diff --git a/.prettierignore b/.prettierignore
index ed6d4fdf7d..ee10df539c 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -12,4 +12,13 @@ package-lock.json
 **/*.ts
 **/*.mts
 **/*.cts
+!libs/components/src/**/*.js
+!libs/components/src/**/*.mjs
+!libs/components/src/**/*.cjs
+!libs/components/src/**/*.ts
+!libs/components/src/**/*.mts
+!libs/components/src/**/*.cts
+**/*.css
+**/*.scss
+**/*.vue
 **/*.md
diff --git a/libs/components/.eslintrc.json b/libs/components/.eslintrc.json
index 4d6db77a35..e4955a060c 100644
--- a/libs/components/.eslintrc.json
+++ b/libs/components/.eslintrc.json
@@ -10,27 +10,14 @@
 	"extends": [
 		"../../.eslintrc.json",
 		"@microsoft/eslint-config-fast-dna",
-		"plugin:compat/recommended"
+		"plugin:compat/recommended",
+		"prettier"
 	],
 	"rules": {
 		// lint
 		"@nrwl/nx/workspace/no-attribute-default-value": "error",
 		"@typescript-eslint/no-non-null-assertion": "off",
-		"indent": "off",
-		"@typescript-eslint/indent": ["error", "tab"],
-		"no-tabs": "off",
-		"no-mixed-spaces-and-tabs": "error",
-		"linebreak-style": ["warn", "unix"],
-		"semi": ["error", "always"],
-		"quotes": [
-			"error",
-			"single",
-			{
-				"avoidEscape": true
-			}
-		],
 		"no-var": "error",
-		"no-floating-decimal": "error",
 		"prefer-const": "error",
 		// functional
 		"compat/compat": "error",
diff --git a/libs/components/src/lib/accordion-item/accordion-item.spec.ts b/libs/components/src/lib/accordion-item/accordion-item.spec.ts
index 90f105f611..c7309ed23d 100644
--- a/libs/components/src/lib/accordion-item/accordion-item.spec.ts
+++ b/libs/components/src/lib/accordion-item/accordion-item.spec.ts
@@ -21,7 +21,9 @@ describe('vwc-accordion-item', () => {
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-accordion-item', async () => {
-			expect(accordionItemDefinition()).toBeInstanceOf(FoundationElementRegistry);
+			expect(accordionItemDefinition()).toBeInstanceOf(
+				FoundationElementRegistry
+			);
 			expect(element).toBeInstanceOf(AccordionItem);
 			expect(element.expanded).toBeFalsy();
 			expect(element.icon).toBeUndefined();
@@ -37,7 +39,9 @@ describe('vwc-accordion-item', () => {
 	describe('click', () => {
 		let itemHeaderButton: HTMLButtonElement;
 		beforeEach(function () {
-			itemHeaderButton = element.shadowRoot?.querySelector('.heading-button') as HTMLButtonElement;
+			itemHeaderButton = element.shadowRoot?.querySelector(
+				'.heading-button'
+			) as HTMLButtonElement;
 		});
 
 		it('should expand a closed item on click', async () => {
@@ -55,23 +59,34 @@ describe('vwc-accordion-item', () => {
 
 	describe('icon', () => {
 		it('should have an icon slot', async () => {
-			expect(element.shadowRoot?.querySelector('slot[name="icon"]')).toBeTruthy();
+			expect(
+				element.shadowRoot?.querySelector('slot[name="icon"]')
+			).toBeTruthy();
 		});
 
 		it('should render an icon when the icon property is set', async () => {
-			const secondChildWithoutIcon = element.shadowRoot?.querySelector('.heading-button :nth-child(2)') as HTMLSpanElement;
+			const secondChildWithoutIcon = element.shadowRoot?.querySelector(
+				'.heading-button :nth-child(2)'
+			) as HTMLSpanElement;
 			element.icon = 'chat-solid';
 			await elementUpdated(element);
-			const secondChildWithIcon = element.shadowRoot?.querySelector('.heading-button :nth-child(1)') as HTMLSpanElement;
+			const secondChildWithIcon = element.shadowRoot?.querySelector(
+				'.heading-button :nth-child(1)'
+			) as HTMLSpanElement;
 
 			expect(secondChildWithoutIcon.classList).toContain('heading-content');
 			expect(secondChildWithoutIcon.classList).not.toContain('icon');
 			expect(secondChildWithIcon.classList).not.toContain('heading-content');
-			expect(secondChildWithIcon.querySelector('vwc-icon')?.getAttribute('name')).toBe('chat-solid');
+			expect(
+				secondChildWithIcon.querySelector('vwc-icon')?.getAttribute('name')
+			).toBe('chat-solid');
 		});
 
 		it('should render a trailing icon when the iconTrailing property is set', async () => {
-			const headerLastIcon = () => element.shadowRoot?.querySelector('vwc-icon:last-of-type') as HTMLElement;
+			const headerLastIcon = () =>
+				element.shadowRoot?.querySelector(
+					'vwc-icon:last-of-type'
+				) as HTMLElement;
 
 			const lastIconWithDefaultIcon = headerLastIcon();
 			element.icon = 'chat-solid';
@@ -79,14 +94,17 @@ describe('vwc-accordion-item', () => {
 			await elementUpdated(element);
 			const lastIconWithIconSet = headerLastIcon();
 
-			expect(lastIconWithDefaultIcon.getAttribute('name')).toBe('chevron-down-solid');
+			expect(lastIconWithDefaultIcon.getAttribute('name')).toBe(
+				'chevron-down-solid'
+			);
 			expect(lastIconWithIconSet.getAttribute('name')).toBe('chat-solid');
 		});
 	});
 
 	describe('no-indicator', () => {
 		it('should remove indicator', async () => {
-			const indicatorExistsOnInit = !!element.shadowRoot?.querySelector('.icon');
+			const indicatorExistsOnInit =
+				!!element.shadowRoot?.querySelector('.icon');
 			element.noIndicator = true;
 			await elementUpdated(element);
 
@@ -97,7 +115,8 @@ describe('vwc-accordion-item', () => {
 
 	describe('heading level', () => {
 		it('should update heading level', async () => {
-			const headerTag = () => element.shadowRoot?.querySelector(':first-child')?.tagName as string;
+			const headerTag = () =>
+				element.shadowRoot?.querySelector(':first-child')?.tagName as string;
 			const headerTagOnInit = headerTag();
 
 			element.headinglevel = 4;
@@ -125,7 +144,8 @@ describe('vwc-accordion-item', () => {
 			(element as any).size = size;
 			await elementUpdated(element);
 
-			const accordionButton = element.shadowRoot?.querySelector('.heading-button');
+			const accordionButton =
+				element.shadowRoot?.querySelector('.heading-button');
 			const accordionRegion = element.shadowRoot?.querySelector('.region');
 
 			expect(accordionButton?.classList.contains(`size-${size}`)).toBeTruthy();
@@ -149,9 +169,13 @@ describe('vwc-accordion-item', () => {
 			await elementUpdated(element);
 
 			const accordionButton = element.shadowRoot?.getElementById(TEST_ID);
-			const accordionRegion = element.shadowRoot?.getElementById(`${TEST_ID}-panel`);
+			const accordionRegion = element.shadowRoot?.getElementById(
+				`${TEST_ID}-panel`
+			);
 
-			expect(accordionButton?.getAttribute('aria-controls')).toBe(`${TEST_ID}-panel`);
+			expect(accordionButton?.getAttribute('aria-controls')).toBe(
+				`${TEST_ID}-panel`
+			);
 			expect(accordionRegion?.getAttribute('aria-labelledby')).toBe(TEST_ID);
 		});
 
diff --git a/libs/components/src/lib/accordion-item/accordion-item.template.ts b/libs/components/src/lib/accordion-item/accordion-item.template.ts
index 3743980106..ae58172c41 100644
--- a/libs/components/src/lib/accordion-item/accordion-item.template.ts
+++ b/libs/components/src/lib/accordion-item/accordion-item.template.ts
@@ -1,11 +1,11 @@
 import { html, ref, ViewTemplate, when } from '@microsoft/fast-element';
 import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import type { AccordionItem } from './accordion-item.js';
 
-
-
-
 const header = (context: ElementDefinitionContext, hTag: string) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
@@ -13,24 +13,27 @@ const header = (context: ElementDefinitionContext, hTag: string) => {
 	return html<AccordionItem>`
 		<${hTag} class="heading-container">
 			<button
-				class="heading-button ${x => x.size ? `size-${x.size}` : ''}"
-				id="${x => x.id}"
-				aria-expanded="${x => x.expanded}"
-				aria-controls="${x => x.id}-panel"
+				class="heading-button ${(x) => (x.size ? `size-${x.size}` : '')}"
+				id="${(x) => x.id}"
+				aria-expanded="${(x) => x.expanded}"
+				aria-controls="${(x) => x.id}-panel"
 				@click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
 				${ref('expandbutton')}
 			>
 
-				${x => !x.iconTrailing ? affixIconTemplate(x.icon, IconWrapper.Slot) : null}
+				${(x) => (!x.iconTrailing ? affixIconTemplate(x.icon, IconWrapper.Slot) : null)}
 
-				<span class="heading-content">${x => x.heading}</span>
+				<span class="heading-content">${(x) => x.heading}</span>
 
-				${when(x => x.meta, html`<span class="meta">${x => x.meta}</span>`)}
+				${when((x) => x.meta, html`<span class="meta">${(x) => x.meta}</span>`)}
 
-				${x => x.icon && x.iconTrailing
-					? affixIconTemplate(x.icon) : null}
-				${x => !(x.icon && x.iconTrailing) && !x.noIndicator
-					? affixIconTemplate(x.expanded ? 'chevron-up-solid' : 'chevron-down-solid') : null}
+				${(x) => (x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null)}
+				${(x) =>
+					!(x.icon && x.iconTrailing) && !x.noIndicator
+						? affixIconTemplate(
+								x.expanded ? 'chevron-up-solid' : 'chevron-down-solid'
+						  )
+						: null}
 
 			</button>
 		</${hTag}>
@@ -42,12 +45,13 @@ export const AccordionItemTemplate: (
 ) => ViewTemplate<AccordionItem> = (
 	context: ElementDefinitionContext
 ) => html<AccordionItem>`
-	${x => header(context, 'h' + x.headinglevel)}
+	${(x) => header(context, 'h' + x.headinglevel)}
 	<div
-		id="${x => x.id}-panel"
-		aria-labelledby="${x => x.id}"
+		id="${(x) => x.id}-panel"
+		aria-labelledby="${(x) => x.id}"
 		role="region"
-		class="region ${x => x.icon && !x.iconTrailing ? 'padded' : ''} ${x => x.size ? `size-${x.size}` : ''}"
+		class="region ${(x) => (x.icon && !x.iconTrailing ? 'padded' : '')} ${(x) =>
+			x.size ? `size-${x.size}` : ''}"
 	>
 		<slot></slot>
 	</div>
diff --git a/libs/components/src/lib/accordion-item/accordion-item.ts b/libs/components/src/lib/accordion-item/accordion-item.ts
index bff1093c60..73069b1969 100644
--- a/libs/components/src/lib/accordion-item/accordion-item.ts
+++ b/libs/components/src/lib/accordion-item/accordion-item.ts
@@ -1,9 +1,11 @@
 import { attr } from '@microsoft/fast-element';
-import { applyMixins, AccordionItem as FASTAccordionItem } from '@microsoft/fast-foundation';
+import {
+	applyMixins,
+	AccordionItem as FASTAccordionItem,
+} from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 import type { Size } from '../enums.js';
 
-
 /**
  * Types of accordion size.
  *
@@ -53,9 +55,5 @@ export class AccordionItem extends FASTAccordionItem {
 	@attr size?: AccordionItemSize;
 }
 
-
-
-
-
-export interface AccordionItem extends AffixIconWithTrailing { }
+export interface AccordionItem extends AffixIconWithTrailing {}
 applyMixins(AccordionItem, AffixIconWithTrailing);
diff --git a/libs/components/src/lib/accordion-item/definition.ts b/libs/components/src/lib/accordion-item/definition.ts
index d2a0e8a60c..faec3e27cb 100644
--- a/libs/components/src/lib/accordion-item/definition.ts
+++ b/libs/components/src/lib/accordion-item/definition.ts
@@ -6,7 +6,6 @@ import styles from './accordion-item.scss?inline';
 import { AccordionItem } from './accordion-item';
 import { AccordionItemTemplate as template } from './accordion-item.template';
 
-
 /**
  *
  * @internal
@@ -21,7 +20,10 @@ export const accordionItemDefinition =
 /**
  * @internal
  */
-export const accordionItemRegistries = [accordionItemDefinition(), ...iconRegistries];
+export const accordionItemRegistries = [
+	accordionItemDefinition(),
+	...iconRegistries,
+];
 
 /**
  * Registers the accordion item elements with the design system.
diff --git a/libs/components/src/lib/accordion-item/index.ts b/libs/components/src/lib/accordion-item/index.ts
index 273929cf5f..b26c910d15 100644
--- a/libs/components/src/lib/accordion-item/index.ts
+++ b/libs/components/src/lib/accordion-item/index.ts
@@ -1,4 +1,3 @@
 import { registerAccordionItem } from './definition';
 
-
 registerAccordionItem();
diff --git a/libs/components/src/lib/accordion-item/ui.test.ts b/libs/components/src/lib/accordion-item/ui.test.ts
index fa3087f3d4..f9fa1ed889 100644
--- a/libs/components/src/lib/accordion-item/ui.test.ts
+++ b/libs/components/src/lib/accordion-item/ui.test.ts
@@ -4,7 +4,7 @@ import type { Page } from '@playwright/test';
 import {
 	extractHTMLBlocksFromReadme,
 	loadComponents,
-	loadTemplate
+	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
 const components = ['accordion', 'accordion-item', 'icon'];
diff --git a/libs/components/src/lib/accordion/accordion.spec.ts b/libs/components/src/lib/accordion/accordion.spec.ts
index e5e6a51b41..a928f2ed8e 100644
--- a/libs/components/src/lib/accordion/accordion.spec.ts
+++ b/libs/components/src/lib/accordion/accordion.spec.ts
@@ -17,7 +17,9 @@ const COMPONENT_HTML = `
 
 describe('vwc-accordion', () => {
 	function triggerAccordionUpdate() {
-		const newItem = document.createElement('vwc-accordion-item') as AccordionItem;
+		const newItem = document.createElement(
+			'vwc-accordion-item'
+		) as AccordionItem;
 		element.appendChild(newItem);
 	}
 	function toggleAccordionItem(accordionItem: AccordionItem) {
@@ -57,7 +59,7 @@ describe('vwc-accordion', () => {
 
 			toggleAccordionItem(accordionItem2);
 			await elementUpdated(element);
-			
+
 			expect(accordionItem1.expanded).toBeFalsy();
 			expect(accordionItem2.expanded).toBeTruthy();
 		});
@@ -115,10 +117,13 @@ describe('vwc-accordion', () => {
 	});
 
 	describe('accordion-item keydown', () => {
-
 		function addTwoMoreItems() {
-			const anotherAccordionItem1 = document.createElement('vwc-accordion-item') as AccordionItem;
-			const anotherAccordionItem2 = document.createElement('vwc-accordion-item') as AccordionItem;
+			const anotherAccordionItem1 = document.createElement(
+				'vwc-accordion-item'
+			) as AccordionItem;
+			const anotherAccordionItem2 = document.createElement(
+				'vwc-accordion-item'
+			) as AccordionItem;
 			element.insertBefore(anotherAccordionItem1, accordionItem2);
 			element.insertBefore(anotherAccordionItem2, accordionItem2);
 			return anotherAccordionItem2;
@@ -126,46 +131,57 @@ describe('vwc-accordion', () => {
 
 		it('should focus on next item when downkey is pressed', async () => {
 			toggleAccordionItem(accordionItem1);
-			accordionItem1.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+			accordionItem1.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowDown' })
+			);
 			expect(accordionItem2.contains(document.activeElement)).toBeTruthy();
 		});
 
 		it('should set focus on the first element when downkey is pressed on last element', async () => {
 			toggleAccordionItem(accordionItem2);
-			accordionItem2.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+			accordionItem2.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowDown' })
+			);
 			expect(accordionItem1.contains(document.activeElement)).toBeTruthy();
 		});
 
 		it('should focus on former item when upkey is pressed', async () => {
 			toggleAccordionItem(accordionItem2);
-			accordionItem2.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+			accordionItem2.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowUp' })
+			);
 			expect(accordionItem1.contains(document.activeElement)).toBeTruthy();
 		});
 
 		it('should set focus on the last element when upkey is pressed on first element', async () => {
 			toggleAccordionItem(accordionItem1);
-			accordionItem1.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+			accordionItem1.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowUp' })
+			);
 			expect(accordionItem2.contains(document.activeElement)).toBeTruthy();
 		});
 
 		it('should focus on the first element when home is pressed', async () => {
 			const anotherAccordionItem2 = addTwoMoreItems();
 			toggleAccordionItem(anotherAccordionItem2);
-			accordionItem2.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home' }));
+			accordionItem2.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'Home' })
+			);
 			expect(accordionItem1.contains(document.activeElement)).toBeTruthy();
 		});
 
 		it('should focus on the last element when end is pressed', async () => {
 			const anotherAccordionItem2 = addTwoMoreItems();
 			toggleAccordionItem(anotherAccordionItem2);
-			accordionItem2.dispatchEvent(new KeyboardEvent('keydown', { key: 'End' }));
+			accordionItem2.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'End' })
+			);
 			expect(accordionItem2.contains(document.activeElement)).toBeTruthy();
 		});
 	});
 
 	describe('accordion-item focus', () => {
 		it('should set focused element as the active item', async function () {
-
 			element.expandmode = 'single';
 			toggleAccordionItem(accordionItem2);
 			const item2ExpandedBeforeFocus = accordionItem2.expanded;
@@ -193,8 +209,7 @@ describe('vwc-accordion', () => {
 				<${COMPONENT_TAG} id="tested">
 					<vwc-accordion-item heading="accordion item 1" expanded id="item1"><p>content</p></vwc-accordion-item>
 					<vwc-accordion-item heading="accordion item 2" id="item2"><p>content</p></vwc-accordion-item>
-				</${COMPONENT_TAG}>`
-			)) as Accordion;
+				</${COMPONENT_TAG}>`)) as Accordion;
 			await elementUpdated(element);
 			accordionItem1 = element.querySelector('#item1') as AccordionItem;
 
diff --git a/libs/components/src/lib/accordion/accordion.template.ts b/libs/components/src/lib/accordion/accordion.template.ts
index 09bd25418f..827a203cab 100644
--- a/libs/components/src/lib/accordion/accordion.template.ts
+++ b/libs/components/src/lib/accordion/accordion.template.ts
@@ -8,8 +8,11 @@ const getClasses = (_: Accordion) => classNames('base');
 /**
  * @public
  */
-export const AccordionTemplate: () => ViewTemplate<Accordion> = () => html<Accordion>`
-	<div class="${getClasses}">
-		<slot ${slotted({ property: 'accordionItems', filter: elements() })}></slot>
-	</div>
-`;
+export const AccordionTemplate: () => ViewTemplate<Accordion> =
+	() => html<Accordion>`
+		<div class="${getClasses}">
+			<slot
+				${slotted({ property: 'accordionItems', filter: elements() })}
+			></slot>
+		</div>
+	`;
diff --git a/libs/components/src/lib/accordion/accordion.ts b/libs/components/src/lib/accordion/accordion.ts
index 05e0e62e4d..fa79c17cd8 100644
--- a/libs/components/src/lib/accordion/accordion.ts
+++ b/libs/components/src/lib/accordion/accordion.ts
@@ -1,4 +1,7 @@
-import { AccordionExpandMode, Accordion as FastAccordion } from '@microsoft/fast-foundation';
+import {
+	AccordionExpandMode,
+	Accordion as FastAccordion,
+} from '@microsoft/fast-foundation';
 import type { AccordionItem } from '../accordion-item/accordion-item';
 
 /**
@@ -7,7 +10,6 @@ import type { AccordionItem } from '../accordion-item/accordion-item';
  * @slot - Default slot.
  */
 export class Accordion extends FastAccordion {
-
 	/**
 	 * Controls the expand mode of the Accordion, either allowing
 	 * single or multiple item expansion.
diff --git a/libs/components/src/lib/accordion/definition.ts b/libs/components/src/lib/accordion/definition.ts
index 67457d75a2..27f089ac2f 100644
--- a/libs/components/src/lib/accordion/definition.ts
+++ b/libs/components/src/lib/accordion/definition.ts
@@ -12,16 +12,20 @@ export type { AccordionExpandMode } from '@microsoft/fast-foundation';
  *
  * @internal
  */
-export const accordionDefinition = Accordion.compose<FoundationElementDefinition>({
-	baseName: 'accordion',
-	template: template as any,
-	styles,
-});
+export const accordionDefinition =
+	Accordion.compose<FoundationElementDefinition>({
+		baseName: 'accordion',
+		template: template as any,
+		styles,
+	});
 
 /**
  * @internal
  */
-export const accordionRegistries = [accordionDefinition(), ...accordionItemRegistries];
+export const accordionRegistries = [
+	accordionDefinition(),
+	...accordionItemRegistries,
+];
 
 /**
  * Registers the accordion elements with the design system.
diff --git a/libs/components/src/lib/accordion/index.ts b/libs/components/src/lib/accordion/index.ts
index 4aaa6db8c1..ece1c11256 100644
--- a/libs/components/src/lib/accordion/index.ts
+++ b/libs/components/src/lib/accordion/index.ts
@@ -1,4 +1,3 @@
 import { registerAccordion } from './definition';
 
-
 registerAccordion();
diff --git a/libs/components/src/lib/accordion/ui.test.ts b/libs/components/src/lib/accordion/ui.test.ts
index e014e3991b..533856a0e4 100644
--- a/libs/components/src/lib/accordion/ui.test.ts
+++ b/libs/components/src/lib/accordion/ui.test.ts
@@ -7,7 +7,7 @@ import {
 	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
-const components = ['accordion','accordion-item'];
+const components = ['accordion', 'accordion-item'];
 
 test('should show the component', async ({ page }: { page: Page }) => {
 	const template = extractHTMLBlocksFromReadme(
diff --git a/libs/components/src/lib/action-group/action-group.spec.ts b/libs/components/src/lib/action-group/action-group.spec.ts
index e38d01c7e0..62323f7f34 100644
--- a/libs/components/src/lib/action-group/action-group.spec.ts
+++ b/libs/components/src/lib/action-group/action-group.spec.ts
@@ -4,10 +4,8 @@ import { ActionGroup } from './action-group';
 import { actionGroupDefinition } from './definition';
 import '.';
 
-
 const COMPONENT_TAG = 'vwc-action-group';
 
-
 describe('vwc-action-group', () => {
 	let element: ActionGroup;
 
@@ -35,8 +33,9 @@ describe('vwc-action-group', () => {
 			(element as any).appearance = appearance;
 			await elementUpdated(element);
 
-			expect(getBaseElement(element)?.classList.contains(`appearance-${appearance}`))
-				.toBeTruthy();
+			expect(
+				getBaseElement(element)?.classList.contains(`appearance-${appearance}`)
+			).toBeTruthy();
 		});
 	});
 
@@ -46,8 +45,9 @@ describe('vwc-action-group', () => {
 			(element as any).shape = shape;
 			await elementUpdated(element);
 
-			expect(getBaseElement(element)?.classList.contains(`shape-${shape}`))
-				.toBeTruthy();
+			expect(
+				getBaseElement(element)?.classList.contains(`shape-${shape}`)
+			).toBeTruthy();
 		});
 	});
 
@@ -61,14 +61,14 @@ describe('vwc-action-group', () => {
 				const role = getBaseElement(element)?.getAttribute('role');
 				expect(role).toEqual('group');
 			});
-	
+
 			it('should change role to role radiogroup', async function () {
 				element.role = 'radiogroup';
 				await elementUpdated(element);
 				const role = getBaseElement(element)?.getAttribute('role');
 				expect(role).toEqual('radiogroup');
 			});
-	
+
 			it('should change role when role attribute is set', async function () {
 				element.setAttribute('role', 'radiogroup');
 				await elementUpdated(element);
@@ -76,13 +76,15 @@ describe('vwc-action-group', () => {
 				expect(role).toEqual('radiogroup');
 			});
 		});
-	
+
 		describe('aria-label', function () {
 			it('should set "aria-label" on base if set on host', async function () {
 				const labelId = 'label';
 				element.setAttribute('aria-label', labelId);
 				await elementUpdated(element);
-				expect(getBaseElement(element).getAttribute('aria-label')).toEqual(labelId);
+				expect(getBaseElement(element).getAttribute('aria-label')).toEqual(
+					labelId
+				);
 				expect(await axe(element)).toHaveNoViolations();
 			});
 		});
diff --git a/libs/components/src/lib/action-group/action-group.template.ts b/libs/components/src/lib/action-group/action-group.template.ts
index 78a99fd95e..f42136eb8c 100644
--- a/libs/components/src/lib/action-group/action-group.template.ts
+++ b/libs/components/src/lib/action-group/action-group.template.ts
@@ -7,15 +7,13 @@ import type {
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { ActionGroup } from './action-group';
 
-
-const getClasses = ({
-	appearance, shape, tight
-}: ActionGroup) => classNames(
-	'base',
-	[`appearance-${appearance}`, Boolean(appearance)],
-	[`shape-${shape}`, Boolean(shape)],
-	['tight', tight],
-);
+const getClasses = ({ appearance, shape, tight }: ActionGroup) =>
+	classNames(
+		'base',
+		[`appearance-${appearance}`, Boolean(appearance)],
+		[`shape-${shape}`, Boolean(shape)],
+		['tight', tight]
+	);
 
 /**
  * The template for the action-group component.
@@ -26,10 +24,10 @@ const getClasses = ({
 export const ActionGroupTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
-
-) => ViewTemplate<ActionGroup> = () => html`
-<div class="${getClasses}" 
-	role="${x => x.role ? x.role : 'group'}" 
-	aria-label="${x => x.ariaLabel}">
-  <slot></slot>
+) => ViewTemplate<ActionGroup> = () => html` <div
+	class="${getClasses}"
+	role="${(x) => (x.role ? x.role : 'group')}"
+	aria-label="${(x) => x.ariaLabel}"
+>
+	<slot></slot>
 </div>`;
diff --git a/libs/components/src/lib/action-group/action-group.ts b/libs/components/src/lib/action-group/action-group.ts
index 2c94516840..c01ac763c8 100644
--- a/libs/components/src/lib/action-group/action-group.ts
+++ b/libs/components/src/lib/action-group/action-group.ts
@@ -1,21 +1,18 @@
 //import { rovingIndex } from 'roving-ux';      // npm es6/common modules
 import { FoundationElement } from '@microsoft/fast-foundation';
 
-
-
-import {attr} from '@microsoft/fast-element';
-import type {
-	Appearance, Shape,
-} from '../enums.js';
-
+import { attr } from '@microsoft/fast-element';
+import type { Appearance, Shape } from '../enums.js';
 
 /**
  * Types of button appearance.
  *
  * @public
  */
-export type ActionGroupAppearance = Extract<Appearance,
-Appearance.Fieldset | Appearance.Ghost>;
+export type ActionGroupAppearance = Extract<
+	Appearance,
+	Appearance.Fieldset | Appearance.Ghost
+>;
 
 /**
  * Types of button shape.
@@ -57,10 +54,9 @@ export class ActionGroup extends FoundationElement {
 	 */
 	@attr({
 		mode: 'boolean',
-	}) tight = false;
+	})
+	tight = false;
 
 	@attr() override role: string | null = null;
-	@attr({attribute: 'aria-label'}) override ariaLabel: string | null = null;
+	@attr({ attribute: 'aria-label' }) override ariaLabel: string | null = null;
 }
-
-
diff --git a/libs/components/src/lib/action-group/definition.ts b/libs/components/src/lib/action-group/definition.ts
index d053d507ea..3131d296c9 100644
--- a/libs/components/src/lib/action-group/definition.ts
+++ b/libs/components/src/lib/action-group/definition.ts
@@ -11,11 +11,12 @@ export type { ActionGroupShape, ActionGroupAppearance } from './action-group';
  *
  * @internal
  */
-export const actionGroupDefinition = ActionGroup.compose<FoundationElementDefinition>({
-	baseName: 'action-group',
-	template: template as any,
-	styles,
-});
+export const actionGroupDefinition =
+	ActionGroup.compose<FoundationElementDefinition>({
+		baseName: 'action-group',
+		template: template as any,
+		styles,
+	});
 
 /**
  * @internal
diff --git a/libs/components/src/lib/action-group/index.ts b/libs/components/src/lib/action-group/index.ts
index 1c98a01d14..f53b2a1378 100644
--- a/libs/components/src/lib/action-group/index.ts
+++ b/libs/components/src/lib/action-group/index.ts
@@ -1,4 +1,3 @@
 import { registerActionGroup } from './definition';
 
-
 registerActionGroup();
diff --git a/libs/components/src/lib/action-group/ui.test.ts b/libs/components/src/lib/action-group/ui.test.ts
index 3a8bdcd606..6425ef8d30 100644
--- a/libs/components/src/lib/action-group/ui.test.ts
+++ b/libs/components/src/lib/action-group/ui.test.ts
@@ -7,22 +7,27 @@ import {
 	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
-const components = ['action-group', 'button', 'text-field', 'layout', 'divider'];
+const components = [
+	'action-group',
+	'button',
+	'text-field',
+	'layout',
+	'divider',
+];
 
 function runActionGroupTest() {
-	return async ({page}: { page: Page }) => {
+	return async ({ page }: { page: Page }) => {
 		const template = extractHTMLBlocksFromReadme(
 			path.join(new URL('.', import.meta.url).pathname, 'README.md')
-		)
-			.reduce(
-				(htmlString: string, block: string) =>
-					`${htmlString} <div style="margin: 5px;">${block}</div>`,
-				'<style> .center { height: 100px; display: flex; place-items: end; place-content: center; } </style>'
-			);
+		).reduce(
+			(htmlString: string, block: string) =>
+				`${htmlString} <div style="margin: 5px;">${block}</div>`,
+			'<style> .center { height: 100px; display: flex; place-items: end; place-content: center; } </style>'
+		);
 
 		await page.setViewportSize({
 			width: 380,
-			height: 1000
+			height: 1000,
 		});
 
 		await loadComponents({
@@ -38,12 +43,10 @@ function runActionGroupTest() {
 
 		await page.waitForLoadState('networkidle');
 
-		expect(await testWrapper?.screenshot({animations: 'disabled'}))
-			.toMatchSnapshot(
-				'./snapshots/action-group.png',
-			);
+		expect(
+			await testWrapper?.screenshot({ animations: 'disabled' })
+		).toMatchSnapshot('./snapshots/action-group.png');
 	};
 }
 
 test('should show the component', runActionGroupTest());
-
diff --git a/libs/components/src/lib/alert/alert.spec.ts b/libs/components/src/lib/alert/alert.spec.ts
index d1f10c9da6..595893f5b1 100644
--- a/libs/components/src/lib/alert/alert.spec.ts
+++ b/libs/components/src/lib/alert/alert.spec.ts
@@ -1,4 +1,10 @@
-import { axe, elementUpdated, fixture, getBaseElement, getControlElement } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getBaseElement,
+	getControlElement,
+} from '@vivid-nx/shared';
 import type { Icon } from '../icon/icon';
 import type { Button } from '../button/button';
 import { Connotation } from '../enums';
@@ -12,15 +18,12 @@ describe('vwc-alert', () => {
 	let element: Alert;
 
 	beforeEach(async () => {
-		element = (await fixture(
-			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
-		)) as Alert;
+		element = (await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`)) as Alert;
 	});
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-alert', async () => {
-			expect(element)
-				.toBeInstanceOf(Alert);
+			expect(element).toBeInstanceOf(Alert);
 			expect(element.open).toBeFalsy();
 			expect(element.icon).toBeUndefined();
 			expect(element.text).toBeUndefined();
@@ -34,7 +37,8 @@ describe('vwc-alert', () => {
 	});
 
 	describe('headline', function () {
-		const getHeadline = () => getBaseElement(element).querySelector('.headline')?.textContent?.trim();
+		const getHeadline = () =>
+			getBaseElement(element).querySelector('.headline')?.textContent?.trim();
 
 		it('should init with undefined and set as empty string in DOM', function () {
 			expect(element.headline).toEqual(undefined);
@@ -53,15 +57,14 @@ describe('vwc-alert', () => {
 			await elementUpdated(element);
 			const fromDOMtoProp = element.headline;
 
-			expect(fromProptoDOM)
-				.toEqual(alertHeadline);
-			expect(fromDOMtoProp)
-				.toEqual(alertHeadline);
+			expect(fromProptoDOM).toEqual(alertHeadline);
+			expect(fromDOMtoProp).toEqual(alertHeadline);
 		});
 	});
 
 	describe('text', function () {
-		const getText = () => getBaseElement(element).querySelector('.main-text')?.textContent?.trim();
+		const getText = () =>
+			getBaseElement(element).querySelector('.main-text')?.textContent?.trim();
 
 		it('should init with undefined and set as empty string in DOM', function () {
 			expect(element.text).toEqual(undefined);
@@ -80,17 +83,17 @@ describe('vwc-alert', () => {
 			await elementUpdated(element);
 			const fromDOMtoProp = element.text;
 
-			expect(fromProptoDOM)
-				.toEqual(alertText);
-			expect(fromDOMtoProp)
-				.toEqual(alertText);
+			expect(fromProptoDOM).toEqual(alertText);
+			expect(fromDOMtoProp).toEqual(alertText);
 		});
 	});
 
 	describe('focus', () => {
 		it('should focus when opened', async () => {
 			const spy = jest.fn();
-			const alertText: HTMLElement = element.shadowRoot?.querySelector('.alert-text') as HTMLElement;
+			const alertText: HTMLElement = element.shadowRoot?.querySelector(
+				'.alert-text'
+			) as HTMLElement;
 			alertText.focus = spy;
 			element.removable = true;
 
@@ -105,19 +108,19 @@ describe('vwc-alert', () => {
 	});
 
 	describe('connotation', function () {
-		const possibleConnotations = [Connotation.Accent,
+		const possibleConnotations = [
+			Connotation.Accent,
 			Connotation.Information,
 			Connotation.Success,
 			Connotation.Warning,
-			Connotation.Alert
+			Connotation.Alert,
 		];
 
 		it('should leave connotation class empty if not set', async function () {
-			possibleConnotations.forEach(connotation => {
-				expect(getBaseElement(element)
-					?.classList
-					.contains(connotation))
-					.toEqual(false);
+			possibleConnotations.forEach((connotation) => {
+				expect(
+					getBaseElement(element)?.classList.contains(connotation)
+				).toEqual(false);
 			});
 		});
 
@@ -125,10 +128,11 @@ describe('vwc-alert', () => {
 			const connotation = possibleConnotations[2];
 			(element.connotation as Connotation) = connotation;
 			await elementUpdated(element);
-			expect(getBaseElement(element)
-				?.classList
-				.contains(`connotation-${connotation}`))
-				.toEqual(true);
+			expect(
+				getBaseElement(element)?.classList.contains(
+					`connotation-${connotation}`
+				)
+			).toEqual(true);
 		});
 	});
 
@@ -166,7 +170,7 @@ describe('vwc-alert', () => {
 				[Connotation.Information, 'info-line'],
 				[Connotation.Success, 'check-circle-line'],
 				[Connotation.Warning, 'warning-line'],
-				[Connotation.Alert, 'error-line']
+				[Connotation.Alert, 'error-line'],
 			]);
 
 			connotationIconMap.forEach((icon, connotation) => {
@@ -195,7 +199,6 @@ describe('vwc-alert', () => {
 			expect(element.style.display).toEqual('none');
 		});
 		it('should be display contents when is open', async function () {
-
 			element.open = true;
 			getControlElement(element).dispatchEvent(new Event('transitionend'));
 			await elementUpdated(element);
@@ -205,15 +208,17 @@ describe('vwc-alert', () => {
 	});
 
 	describe('icon', function () {
-
-		const getIcon: () => Icon | null = () => getBaseElement(element).querySelector('slot[name="icon"] > vwc-icon');
+		const getIcon: () => Icon | null = () =>
+			getBaseElement(element).querySelector('slot[name="icon"] > vwc-icon');
 
 		it('should not have an icon if there is none and no connotation is set', async function () {
 			expect(getIcon()).toBeNull();
 		});
 
 		it('should have an icon slot', async () => {
-			expect(element.shadowRoot?.querySelector('slot[name="icon"]')).toBeTruthy();
+			expect(
+				element.shadowRoot?.querySelector('slot[name="icon"]')
+			).toBeTruthy();
 		});
 
 		it('should have an icon when icon is set', async function () {
@@ -232,7 +237,7 @@ describe('vwc-alert', () => {
 				[Connotation.Information, 'info-line'],
 				[Connotation.Success, 'check-circle-line'],
 				[Connotation.Warning, 'warning-line'],
-				[Connotation.Alert, 'error-line']
+				[Connotation.Alert, 'error-line'],
 			]);
 
 			for (const [connotation, iconName] of connotationIconMap) {
@@ -252,39 +257,40 @@ describe('vwc-alert', () => {
 
 	describe('removable', function () {
 		it('should init to false', function () {
-			expect(element.removable)
-				.toEqual(false);
-			expect(element.hasAttribute('removable'))
-				.toEqual(false);
+			expect(element.removable).toEqual(false);
+			expect(element.hasAttribute('removable')).toEqual(false);
 		});
 
 		it('should set removable property on attribute change', async function () {
 			element.toggleAttribute('removable');
 			await elementUpdated(element);
-			expect(element.removable)
-				.toEqual(true);
+			expect(element.removable).toEqual(true);
 		});
 
 		describe('removable with button', function () {
-
 			it('should have dismiss button when removable is true', async function () {
 				element.toggleAttribute('removable');
 				await elementUpdated(element);
-				const dismissButton: Button = element.shadowRoot?.querySelector('.dismiss-button') as Button;
+				const dismissButton: Button = element.shadowRoot?.querySelector(
+					'.dismiss-button'
+				) as Button;
 
 				expect(dismissButton).not.toEqual(null);
 			});
 
 			it('should remove the remove button when removable is false', async function () {
-				expect(element.shadowRoot?.querySelector('.dismiss-button'))
-					.toEqual(null);
+				expect(element.shadowRoot?.querySelector('.dismiss-button')).toEqual(
+					null
+				);
 			});
 
 			it('should close when removable is true', async function () {
 				element.open = true;
 				element.toggleAttribute('removable');
 				await elementUpdated(element);
-				const dismissButton: Button = element.shadowRoot?.querySelector('.dismiss-button') as Button;
+				const dismissButton: Button = element.shadowRoot?.querySelector(
+					'.dismiss-button'
+				) as Button;
 
 				expect(element.open).toEqual(true);
 
@@ -296,8 +302,7 @@ describe('vwc-alert', () => {
 		});
 
 		describe('removable with Escape', function () {
-
-			beforeEach(() => element.open = true);
+			beforeEach(() => (element.open = true));
 
 			it('should remove the alert when esc and removable is true', async function () {
 				const spy = jest.fn();
@@ -379,7 +384,9 @@ describe('vwc-alert', () => {
 		it('should add class .strategy-static to .control when set', async () => {
 			element.strategy = 'static';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.strategy-static')).toBeTruthy();
+			expect(
+				element.shadowRoot?.querySelector('.strategy-static')
+			).toBeTruthy();
 		});
 	});
 });
diff --git a/libs/components/src/lib/alert/alert.template.ts b/libs/components/src/lib/alert/alert.template.ts
index c8f037778c..7a0ae5814c 100644
--- a/libs/components/src/lib/alert/alert.template.ts
+++ b/libs/components/src/lib/alert/alert.template.ts
@@ -7,35 +7,38 @@ import {
 } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { Elevation } from '../elevation/elevation';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import type { Alert } from './alert';
 
-const getClasses = ({ connotation }: Alert) => classNames(
-	'base',
-	[`connotation-${connotation}`, Boolean(connotation)],
-);
+const getClasses = ({ connotation }: Alert) =>
+	classNames('base', [`connotation-${connotation}`, Boolean(connotation)]);
 
-const getControlClasses = ({ open, placement, strategy }: Alert) => classNames(
-	'control',
-	['open', open],
-	[`placement-${placement}`, Boolean(placement)],
-	[`strategy-${strategy}`, Boolean(strategy)],
-);
+const getControlClasses = ({ open, placement, strategy }: Alert) =>
+	classNames(
+		'control',
+		['open', open],
+		[`placement-${placement}`, Boolean(placement)],
+		[`strategy-${strategy}`, Boolean(strategy)]
+	);
 
 function renderIcon(context: ElementDefinitionContext) {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
-	return html`${x => affixIconTemplate(x.conditionedIcon, IconWrapper.Slot)}`;
+	return html`${(x) => affixIconTemplate(x.conditionedIcon, IconWrapper.Slot)}`;
 }
 
 function renderDismissButton(buttonTag: string) {
 	return html`
 		<${buttonTag}
-			aria-label="${x => x.dismissButtonAriaLabel || x.locale.alert.dismissButtonLabel}"
+			aria-label="${(x) =>
+				x.dismissButtonAriaLabel || x.locale.alert.dismissButtonLabel}"
 			size="condensed"
 			class="dismiss-button"
 			icon="close-line"
-			@click="${x => x.open = false}">
+			@click="${(x) => (x.open = false)}">
 		</${buttonTag}>`;
 }
 
@@ -56,22 +59,24 @@ export const AlertTemplate: (
 	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
 		<div
 			class="${getControlClasses}"
-			role="${x => x.removable ? 'alertdialog' : 'alert'}"
+			role="${(x) => (x.removable ? 'alertdialog' : 'alert')}"
 			aria-live="assertive"
 		>
 			<div part="vvd-theme-alternate" class="${getClasses}">
 				${renderIcon(context)}
 				<div class="alert-text">
-					${when(x => x.headline, html`<header class="headline">${(x) => x.headline}</header>`)}
-					${when(x => x.text, html`<div class="main-text">${(x) => x.text}</div>`)}
+					${when(
+						(x) => x.headline,
+						html`<header class="headline">${(x) => x.headline}</header>`
+					)}
+					${when((x) => x.text, html`<div class="main-text">${(x) => x.text}</div>`)}
 					<slot name="main">
 					</slot>
 				</div>
 				<slot class="action-items" name="action-items"></slot>
-				${when(x => x.removable, renderDismissButton(buttonTag))}
+				${when((x) => x.removable, renderDismissButton(buttonTag))}
 			</div>
 		</div>
 	</${elevationTag}>
 	`;
 };
-
diff --git a/libs/components/src/lib/alert/alert.ts b/libs/components/src/lib/alert/alert.ts
index 1b29b3e00c..6af7c0020b 100644
--- a/libs/components/src/lib/alert/alert.ts
+++ b/libs/components/src/lib/alert/alert.ts
@@ -5,21 +5,27 @@ import { Localized } from '../../shared/patterns';
 import { AffixIcon } from '../../shared/patterns/affix';
 
 export type AlertConnotation =
-	Connotation.Accent |
-	Connotation.Information |
-	Connotation.Success |
-	Connotation.Warning |
-	Connotation.Alert;
+	| Connotation.Accent
+	| Connotation.Information
+	| Connotation.Success
+	| Connotation.Warning
+	| Connotation.Alert;
 
 const connotationIconMap = new Map([
 	[Connotation.Accent, 'megaphone-line'],
 	[Connotation.Information, 'info-line'],
 	[Connotation.Success, 'check-circle-line'],
 	[Connotation.Warning, 'warning-line'],
-	[Connotation.Alert, 'error-line']
+	[Connotation.Alert, 'error-line'],
 ]);
 
-export type AlertPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+export type AlertPlacement =
+	| 'top'
+	| 'top-start'
+	| 'top-end'
+	| 'bottom'
+	| 'bottom-start'
+	| 'bottom-end';
 
 export type AlertStrategy = 'fixed' | 'static';
 
@@ -33,7 +39,9 @@ export type AlertStrategy = 'fixed' | 'static';
  * @event close - Fired when the alert is closed
  */
 export class Alert extends FoundationElement {
-	@attr({ attribute: 'dismiss-button-aria-label' }) dismissButtonAriaLabel: string | null = null;
+	@attr({ attribute: 'dismiss-button-aria-label' }) dismissButtonAriaLabel:
+		| string
+		| null = null;
 
 	// timeout to close the alert
 	#timeoutID?: NodeJS.Timeout;
@@ -54,7 +62,6 @@ export class Alert extends FoundationElement {
 	 */
 	@attr({ mode: 'fromView' }) placement?: AlertPlacement = 'bottom';
 
-
 	/**
 	 * the text of the alert heading
 	 * accepts string
@@ -86,8 +93,9 @@ export class Alert extends FoundationElement {
 	 */
 	@attr({
 		mode: 'fromView',
-		converter: nullableNumberConverter
-	}) timeoutms: number = 0;
+		converter: nullableNumberConverter,
+	})
+	timeoutms: number = 0;
 
 	/**
 	 * alert connotation
@@ -122,14 +130,15 @@ export class Alert extends FoundationElement {
 		this.#setupTimeout();
 		if (newValue) {
 			this.style.display = 'contents';
-			const alertText = this.shadowRoot!.querySelector('.alert-text') as HTMLElement;
+			const alertText = this.shadowRoot!.querySelector(
+				'.alert-text'
+			) as HTMLElement;
 			if (this.removable && alertText) {
 				alertText.setAttribute('tabindex', '0');
 				alertText.focus();
 				alertText.removeAttribute('tabindex');
 			}
-		}
-		else{
+		} else {
 			this.style.display = 'none';
 		}
 	}
@@ -137,8 +146,11 @@ export class Alert extends FoundationElement {
 	override connectedCallback(): void {
 		super.connectedCallback();
 		this.addEventListener('keydown', this.#closeOnEscape);
-		this.controlEl = this.shadowRoot!.querySelector('.control') as HTMLDivElement;
-		if (this.controlEl) this.controlEl.addEventListener('transitionend', this.#onTransitionEnd);
+		this.controlEl = this.shadowRoot!.querySelector(
+			'.control'
+		) as HTMLDivElement;
+		if (this.controlEl)
+			this.controlEl.addEventListener('transitionend', this.#onTransitionEnd);
 		this.#setupTimeout();
 	}
 
@@ -146,18 +158,24 @@ export class Alert extends FoundationElement {
 		super.disconnectedCallback();
 		if (this.#timeoutID) clearTimeout(this.#timeoutID);
 		this.removeEventListener('keydown', this.#closeOnEscape);
-		if (this.controlEl) this.controlEl.removeEventListener('transitionend', this.#onTransitionEnd);
+		if (this.controlEl)
+			this.controlEl.removeEventListener(
+				'transitionend',
+				this.#onTransitionEnd
+			);
 	}
 
 	get conditionedIcon() {
-		return this.icon || connotationIconMap.get(this.connotation as AlertConnotation);
+		return (
+			this.icon || connotationIconMap.get(this.connotation as AlertConnotation)
+		);
 	}
 
 	#setupTimeout() {
 		if (this.#timeoutID) clearTimeout(this.#timeoutID);
 
 		if (this.open && this.timeoutms > 0) {
-			this.#timeoutID = setTimeout(() => this.open = false, this.timeoutms);
+			this.#timeoutID = setTimeout(() => (this.open = false), this.timeoutms);
 		}
 	}
 
@@ -175,5 +193,5 @@ export class Alert extends FoundationElement {
 }
 
 applyMixins(Alert, AffixIcon);
-export interface Alert extends Localized, AffixIcon { }
+export interface Alert extends Localized, AffixIcon {}
 applyMixins(Alert, Localized);
diff --git a/libs/components/src/lib/alert/definition.ts b/libs/components/src/lib/alert/definition.ts
index bb65ab49b0..169d6a25c8 100644
--- a/libs/components/src/lib/alert/definition.ts
+++ b/libs/components/src/lib/alert/definition.ts
@@ -23,7 +23,12 @@ export const alertDefinition = Alert.compose<FoundationElementDefinition>({
 /**
  * @internal
  */
-export const alertRegistries = [alertDefinition(), ...iconRegistries, ...buttonRegistries, ...elevationRegistries];
+export const alertRegistries = [
+	alertDefinition(),
+	...iconRegistries,
+	...buttonRegistries,
+	...elevationRegistries,
+];
 
 /**
  * Registers the alert elements with the design system.
@@ -31,4 +36,3 @@ export const alertRegistries = [alertDefinition(), ...iconRegistries, ...buttonR
  * @param prefix - the prefix to use for the component name
  */
 export const registerAlert = registerFactory(alertRegistries);
-
diff --git a/libs/components/src/lib/alert/index.ts b/libs/components/src/lib/alert/index.ts
index 050e5e947d..714c817d93 100644
--- a/libs/components/src/lib/alert/index.ts
+++ b/libs/components/src/lib/alert/index.ts
@@ -1,4 +1,3 @@
 import { registerAlert } from './definition';
 
-
 registerAlert();
diff --git a/libs/components/src/lib/alert/locale.ts b/libs/components/src/lib/alert/locale.ts
index 3a19eec254..8069a046d2 100644
--- a/libs/components/src/lib/alert/locale.ts
+++ b/libs/components/src/lib/alert/locale.ts
@@ -1,3 +1,3 @@
 export interface AlertLocale {
 	dismissButtonLabel: string;
-}
\ No newline at end of file
+}
diff --git a/libs/components/src/lib/alert/ui.test.ts b/libs/components/src/lib/alert/ui.test.ts
index 90c91bfaf1..542970015e 100644
--- a/libs/components/src/lib/alert/ui.test.ts
+++ b/libs/components/src/lib/alert/ui.test.ts
@@ -10,17 +10,20 @@ import {
 const components = ['alert', 'button', 'switch'];
 
 test('should show the component', async ({ page }: { page: Page }) => {
-
 	const CSS = `
 		<style>
 			#wrapper > div { height: 250px; transform: translateY(0px); }
 		</style>`;
 
-	const template = CSS + extractHTMLBlocksFromReadme(
-		path.join(new URL('.', import.meta.url).pathname, 'README.md')
-	).reduce(
-		(htmlString: string, block: string) =>
-			`${htmlString} <div>${block}</div>`,'');
+	const template =
+		CSS +
+		extractHTMLBlocksFromReadme(
+			path.join(new URL('.', import.meta.url).pathname, 'README.md')
+		).reduce(
+			(htmlString: string, block: string) =>
+				`${htmlString} <div>${block}</div>`,
+			''
+		);
 
 	page.setViewportSize({ width: 1300, height: 2750 });
 
@@ -64,9 +67,8 @@ async function testResponsiveAlert({ page }: { page: Page }) {
 
 	await page.waitForLoadState('networkidle');
 
-
 	expect(await testWrapper?.screenshot()).toMatchSnapshot(
-		'./snapshots/alert-mobile.png',
+		'./snapshots/alert-mobile.png'
 	);
 }
 test('alert in mobile screens', testResponsiveAlert);
diff --git a/libs/components/src/lib/appearance-ui/appearance-ui.template.ts b/libs/components/src/lib/appearance-ui/appearance-ui.template.ts
index a51dd66e37..24fad63041 100644
--- a/libs/components/src/lib/appearance-ui/appearance-ui.template.ts
+++ b/libs/components/src/lib/appearance-ui/appearance-ui.template.ts
@@ -7,16 +7,23 @@ import type {
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { AppearanceUi } from './appearance-ui';
 
-const getClasses = ({appearance, hovered, active, selected, disabled, readonly} : AppearanceUi) => classNames(
-	'base',
-	[`appearance-${appearance}`, Boolean(appearance)],
-	['hover', Boolean(hovered)],
-	['active', Boolean(active)],
-	['checked selected', Boolean(selected)],
-	['disabled', Boolean(disabled)],
-	['readonly', Boolean(readonly)],
-);
-
+const getClasses = ({
+	appearance,
+	hovered,
+	active,
+	selected,
+	disabled,
+	readonly,
+}: AppearanceUi) =>
+	classNames(
+		'base',
+		[`appearance-${appearance}`, Boolean(appearance)],
+		['hover', Boolean(hovered)],
+		['active', Boolean(active)],
+		['checked selected', Boolean(selected)],
+		['disabled', Boolean(disabled)],
+		['readonly', Boolean(readonly)]
+	);
 
 /**
  * The template for the AppearanceUi component.
@@ -26,16 +33,17 @@ const getClasses = ({appearance, hovered, active, selected, disabled, readonly}
  */
 export const AppearanceUiTemplate: (
 	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition,
+	definition: FoundationElementDefinition
 ) => ViewTemplate<AppearanceUi> = () => {
-	return html` <div class="wrapper">
-		<span class="${getClasses} connotation-accent">accent</span>
-		<span class="${getClasses} connotation-cta">cta</span>
-		<span class="${getClasses} connotation-success">success</span>
-		<span class="${getClasses} connotation-alert">alert</span>
-		<span class="${getClasses} connotation-warning">warning</span>
-		<span class="${getClasses} connotation-information">information</span>
-		<span class="${getClasses} connotation-announcement">announcement</span>
-	</div>
+	return html`
+		<div class="wrapper">
+			<span class="${getClasses} connotation-accent">accent</span>
+			<span class="${getClasses} connotation-cta">cta</span>
+			<span class="${getClasses} connotation-success">success</span>
+			<span class="${getClasses} connotation-alert">alert</span>
+			<span class="${getClasses} connotation-warning">warning</span>
+			<span class="${getClasses} connotation-information">information</span>
+			<span class="${getClasses} connotation-announcement">announcement</span>
+		</div>
 	`;
 };
diff --git a/libs/components/src/lib/appearance-ui/appearance-ui.ts b/libs/components/src/lib/appearance-ui/appearance-ui.ts
index 28c7012c93..86098f6b6c 100644
--- a/libs/components/src/lib/appearance-ui/appearance-ui.ts
+++ b/libs/components/src/lib/appearance-ui/appearance-ui.ts
@@ -1,26 +1,23 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
-import type {
-	Appearance
-} from '../enums.js';
-
+import type { Appearance } from '../enums.js';
 
 /**
  * Types of appearances.
  *
  * @public
  */
-export type AppearanceUIAppearance = Extract<Appearance,
-Appearance.Filled
-| Appearance.Ghost
-| Appearance.Outlined
-| Appearance.Duotone
-| Appearance.Fieldset
-| Appearance.Subtle
-| Appearance.Listitem
+export type AppearanceUIAppearance = Extract<
+	Appearance,
+	| Appearance.Filled
+	| Appearance.Ghost
+	| Appearance.Outlined
+	| Appearance.Duotone
+	| Appearance.Fieldset
+	| Appearance.Subtle
+	| Appearance.Listitem
 >;
 
-
 /**
  * @component appearance-ui
  */
@@ -44,7 +41,8 @@ export class AppearanceUi extends FoundationElement {
 	@attr({
 		mode: 'boolean',
 		attribute: 'hovered',
-	}) hovered = false;
+	})
+	hovered = false;
 
 	/**
 	 * Displays the active state via class
@@ -56,8 +54,8 @@ export class AppearanceUi extends FoundationElement {
 	@attr({
 		mode: 'boolean',
 		attribute: 'active',
-	}) active = false;
-
+	})
+	active = false;
 
 	/**
 	 * Displays the selected state via class
@@ -69,7 +67,8 @@ export class AppearanceUi extends FoundationElement {
 	@attr({
 		mode: 'boolean',
 		attribute: 'selected',
-	}) selected = false;
+	})
+	selected = false;
 
 	/**
 	 * Displays the disabled state
@@ -81,7 +80,8 @@ export class AppearanceUi extends FoundationElement {
 	@attr({
 		mode: 'boolean',
 		attribute: 'disabled',
-	}) disabled = false;
+	})
+	disabled = false;
 
 	/**
 	 * Displays the disabled state
@@ -93,7 +93,8 @@ export class AppearanceUi extends FoundationElement {
 	@attr({
 		mode: 'boolean',
 		attribute: 'readonly',
-	}) readonly = false;
+	})
+	readonly = false;
 
 	/**
 	 * Indicates the text's text.
diff --git a/libs/components/src/lib/appearance-ui/ui.test.ts b/libs/components/src/lib/appearance-ui/ui.test.ts
index fca3a505d1..a60218ac45 100644
--- a/libs/components/src/lib/appearance-ui/ui.test.ts
+++ b/libs/components/src/lib/appearance-ui/ui.test.ts
@@ -11,7 +11,10 @@ const components = ['appearance-ui'];
 
 test('should show the component', async ({ page }: { page: Page }) => {
 	const template = extractHTMLBlocksFromReadme(
-		path.join(new URL('.', import.meta.url).pathname, '../../../../../docs/design/appearance.md')
+		path.join(
+			new URL('.', import.meta.url).pathname,
+			'../../../../../docs/design/appearance.md'
+		)
 	).reduce(
 		(htmlString: string, block: string) =>
 			`${htmlString} <div style="margin: 5px;">${block}</div>`,
diff --git a/libs/components/src/lib/audio-player/audio-player.spec.ts b/libs/components/src/lib/audio-player/audio-player.spec.ts
index a481a08d47..67e809dc21 100644
--- a/libs/components/src/lib/audio-player/audio-player.spec.ts
+++ b/libs/components/src/lib/audio-player/audio-player.spec.ts
@@ -36,7 +36,9 @@ describe('vwc-audio-player', () => {
 		it('should be initialized as a vwc-audio-player', async () => {
 			expect(audioPlayerDefinition()).toBeInstanceOf(FoundationElementRegistry);
 			expect(element).toBeInstanceOf(AudioPlayer);
-			expect(element.src).toEqual('https://download.samplelib.com/mp3/sample-6s.mp3');
+			expect(element.src).toEqual(
+				'https://download.samplelib.com/mp3/sample-6s.mp3'
+			);
 			expect(element.connotation).toBeUndefined();
 			expect(element.notime).toEqual(false);
 			expect(element.disabled).toEqual(false);
@@ -49,15 +51,21 @@ describe('vwc-audio-player', () => {
 			element.notime = false;
 			await elementUpdated(element);
 
-			const controls = getBaseElement(element).querySelector('.controls') as HTMLDivElement;
-			const currentTimeClassExistsBeforeTheChange = controls.querySelector('.current-time');
-			const totalTimeClassExistsBeforeTheChange = controls.querySelector('.total-time');
+			const controls = getBaseElement(element).querySelector(
+				'.controls'
+			) as HTMLDivElement;
+			const currentTimeClassExistsBeforeTheChange =
+				controls.querySelector('.current-time');
+			const totalTimeClassExistsBeforeTheChange =
+				controls.querySelector('.total-time');
 
 			element.notime = true;
 			await elementUpdated(element);
 
-			const currentTimeClassExistsAfterTheChange = controls.querySelector('.current-time');
-			const totalTimeClassExistsAfterTheChange = controls.querySelector('.total-time');
+			const currentTimeClassExistsAfterTheChange =
+				controls.querySelector('.current-time');
+			const totalTimeClassExistsAfterTheChange =
+				controls.querySelector('.total-time');
 
 			expect(currentTimeClassExistsBeforeTheChange).toBeTruthy();
 			expect(totalTimeClassExistsBeforeTheChange).toBeTruthy();
@@ -73,7 +81,9 @@ describe('vwc-audio-player', () => {
 			element.src = src;
 			await elementUpdated(element);
 
-			const audio = getBaseElement(element).querySelector('audio') as HTMLAudioElement;
+			const audio = getBaseElement(element).querySelector(
+				'audio'
+			) as HTMLAudioElement;
 			expect(audio.src).toEqual(src);
 		});
 	});
@@ -81,13 +91,21 @@ describe('vwc-audio-player', () => {
 	describe('connotation', function () {
 		it('should set the connotation class on base', async function () {
 			const connotation = Connotation.CTA;
-			const sliderConnotationBefore = (getBaseElement(element).querySelector('.slider') as Slider).connotation;
-			const buttonConnotationBefore = (getBaseElement(element).querySelector('.pause') as Button).connotation;
+			const sliderConnotationBefore = (
+				getBaseElement(element).querySelector('.slider') as Slider
+			).connotation;
+			const buttonConnotationBefore = (
+				getBaseElement(element).querySelector('.pause') as Button
+			).connotation;
 
 			element.connotation = connotation;
 			await elementUpdated(element);
-			const sliderConnotationAfter = (getBaseElement(element).querySelector('.slider') as Slider).connotation;
-			const buttonConnotationAfter = (getBaseElement(element).querySelector('.pause') as Button).connotation;
+			const sliderConnotationAfter = (
+				getBaseElement(element).querySelector('.slider') as Slider
+			).connotation;
+			const buttonConnotationAfter = (
+				getBaseElement(element).querySelector('.pause') as Button
+			).connotation;
 
 			expect(sliderConnotationBefore).toBeUndefined();
 			expect(buttonConnotationBefore).toBeUndefined();
@@ -100,17 +118,23 @@ describe('vwc-audio-player', () => {
 		it('should set disabled class on the base element', async function () {
 			element.disabled = true;
 			await elementUpdated(element);
-			expect(getBaseElement(element).classList.contains('disabled')).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains('disabled')
+			).toBeTruthy();
 		});
 	});
 
 	describe('paused', function () {
 		it('should pause audio on click', async function () {
-			const audio = getBaseElement(element).querySelector('audio') as HTMLAudioElement;
+			const audio = getBaseElement(element).querySelector(
+				'audio'
+			) as HTMLAudioElement;
 			const audioConstructor = jest.spyOn(audio, 'duration', 'get');
 			const mockAudioElement = { duration: 60 };
 			audioConstructor.mockImplementation(() => mockAudioElement.duration);
-			const pauseButton = getBaseElement(element).querySelector('.pause') as HTMLButtonElement;
+			const pauseButton = getBaseElement(element).querySelector(
+				'.pause'
+			) as HTMLButtonElement;
 			expect(element.paused).toEqual(true);
 			pauseButton.click();
 
@@ -119,11 +143,15 @@ describe('vwc-audio-player', () => {
 		});
 
 		it('should change button icon', async function () {
-			const audio = getBaseElement(element).querySelector('audio') as HTMLAudioElement;
+			const audio = getBaseElement(element).querySelector(
+				'audio'
+			) as HTMLAudioElement;
 			const audioConstructor = jest.spyOn(audio, 'duration', 'get');
 			const mockAudioElement = { duration: 60 };
 			audioConstructor.mockImplementation(() => mockAudioElement.duration);
-			const pauseButton = getBaseElement(element).querySelector('.pause') as Button;
+			const pauseButton = getBaseElement(element).querySelector(
+				'.pause'
+			) as Button;
 			expect(pauseButton.icon).toEqual('play-solid');
 
 			pauseButton.click();
@@ -136,7 +164,9 @@ describe('vwc-audio-player', () => {
 		});
 
 		it('should pause when rewind is called', async function () {
-			const audio = getBaseElement(element).querySelector('audio') as HTMLAudioElement;
+			const audio = getBaseElement(element).querySelector(
+				'audio'
+			) as HTMLAudioElement;
 			const audioConstructor = jest.spyOn(audio, 'duration', 'get');
 			const mockAudioElement = { duration: 60 };
 			audioConstructor.mockImplementation(() => mockAudioElement.duration);
@@ -152,7 +182,9 @@ describe('vwc-audio-player', () => {
 		});
 
 		it('should pause when finished', async function () {
-			const audio = getBaseElement(element).querySelector('audio') as HTMLAudioElement;
+			const audio = getBaseElement(element).querySelector(
+				'audio'
+			) as HTMLAudioElement;
 			element.paused = false;
 			const audioConstructor = jest.spyOn(audio, 'duration', 'get');
 			const mockAudioElement = { duration: 60 };
@@ -170,7 +202,9 @@ describe('vwc-audio-player', () => {
 
 	describe('updateProgress', function () {
 		it('should call updateProgress when timeupdate', async function () {
-			const audio = getBaseElement(element).querySelector('audio') as HTMLAudioElement;
+			const audio = getBaseElement(element).querySelector(
+				'audio'
+			) as HTMLAudioElement;
 			element._updateProgress = jest.fn();
 
 			const event = new Event('timeupdate');
@@ -182,7 +216,9 @@ describe('vwc-audio-player', () => {
 		});
 
 		it('should update current time when updateProgress is called', async function () {
-			const audio = getBaseElement(element).querySelector('audio') as HTMLAudioElement;
+			const audio = getBaseElement(element).querySelector(
+				'audio'
+			) as HTMLAudioElement;
 			const audioConstructor = jest.spyOn(audio, 'duration', 'get');
 			const mockAudioElement = { duration: 60 };
 			audioConstructor.mockImplementation(() => mockAudioElement.duration);
@@ -193,13 +229,17 @@ describe('vwc-audio-player', () => {
 			element._updateProgress();
 
 			await elementUpdated(element);
-			expect(getBaseElement(element).querySelector('.current-time')?.textContent).toEqual('3:20');
+			expect(
+				getBaseElement(element).querySelector('.current-time')?.textContent
+			).toEqual('3:20');
 		});
 	});
 
 	describe('updateTotalTime', function () {
 		it('should call updateTotalTime when loadedmetadata', async function () {
-			const audio = getBaseElement(element).querySelector('audio') as HTMLAudioElement;
+			const audio = getBaseElement(element).querySelector(
+				'audio'
+			) as HTMLAudioElement;
 			element._updateTotalTime = jest.fn();
 
 			const event = new Event('loadedmetadata');
@@ -211,13 +251,17 @@ describe('vwc-audio-player', () => {
 		});
 
 		it('should update total-time when updateTotalTime is called', async function () {
-			const audio = getBaseElement(element).querySelector('audio') as HTMLAudioElement;
+			const audio = getBaseElement(element).querySelector(
+				'audio'
+			) as HTMLAudioElement;
 			const audioConstructor = jest.spyOn(audio, 'duration', 'get');
 			const mockAudioElement = { duration: 60 };
 			audioConstructor.mockImplementation(() => mockAudioElement.duration);
 
 			element._updateTotalTime();
-			expect(getBaseElement(element).querySelector('.total-time')?.textContent).toEqual('1:00');
+			expect(
+				getBaseElement(element).querySelector('.total-time')?.textContent
+			).toEqual('1:00');
 			audioConstructor.mockRestore();
 		});
 	});
diff --git a/libs/components/src/lib/audio-player/audio-player.template.ts b/libs/components/src/lib/audio-player/audio-player.template.ts
index 2d8cf01961..6bbfe3b82e 100644
--- a/libs/components/src/lib/audio-player/audio-player.template.ts
+++ b/libs/components/src/lib/audio-player/audio-player.template.ts
@@ -1,26 +1,30 @@
 import { html, ref, when } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { Button } from '../button/button';
 import { Slider } from '../slider/slider';
 import { AudioPlayer } from './audio-player';
 
-const getClasses = ({ disabled, duration }: AudioPlayer) => classNames(
-	['disabled', Boolean(disabled) || !Boolean(duration)],
-);
+const getClasses = ({ disabled, duration }: AudioPlayer) =>
+	classNames(['disabled', Boolean(disabled) || !Boolean(duration)]);
 
 function renderButton(context: ElementDefinitionContext) {
 	const buttonTag = context.tagFor(Button);
 
-	return html<AudioPlayer>`<${buttonTag} class="pause" @click="${x => x._togglePlay()}"
-	icon="${x => x.paused ? 'play-solid' : 'pause-solid'}" 
-	aria-label="${x => x.paused 
-		? x.playButtonAriaLabel || x.locale.audioPlayer.playButtonLabel 
-		: x.pauseButtonAriaLabel || x.locale.audioPlayer.playButtonLabel}" 
+	return html<AudioPlayer>`<${buttonTag} class="pause" @click="${(x) =>
+		x._togglePlay()}"
+	icon="${(x) => (x.paused ? 'play-solid' : 'pause-solid')}" 
+	aria-label="${(x) =>
+		x.paused
+			? x.playButtonAriaLabel || x.locale.audioPlayer.playButtonLabel
+			: x.pauseButtonAriaLabel || x.locale.audioPlayer.playButtonLabel}" 
 	size='condensed' 
-	connotation="${x => x.connotation}"
-	?disabled="${x => x.disabled || !x.duration}" 
+	connotation="${(x) => x.connotation}"
+	?disabled="${(x) => x.disabled || !x.duration}" 
   ></${buttonTag}>`;
 }
 
@@ -29,33 +33,35 @@ function renderSlider(context: ElementDefinitionContext) {
 
 	return html<AudioPlayer>`<${sliderTag}
 	${ref('_sliderEl')} class="slider" 
-	aria-label="${x => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
+	aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
 	value="0" max="100" 
-	connotation="${x => x.connotation}"
-	?disabled="${x => x.disabled || !x.duration}">
+	connotation="${(x) => x.connotation}"
+	?disabled="${(x) => x.disabled || !x.duration}">
 	</${sliderTag}>`;
 }
 
 function renderTimestamp() {
-	return html`
-	<div class="time-stamp" ${ref('_timeStampEl')}>
+	return html` <div class="time-stamp" ${ref('_timeStampEl')}>
 		<span class="current-time">0:00</span>
 		<span>/</span>
 		<span class="total-time">0:00</span>
 	</div>`;
 }
 
-export const AudioPlayerTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition
+export const AudioPlayerTemplate: (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
 ) => ViewTemplate<AudioPlayer> = (context: ElementDefinitionContext) => {
-
-	return html<AudioPlayer>`
-    <div class="base ${getClasses}">
-      <div class="controls">
-	  	${renderButton(context)}
-      	${when(x => !x.notime, renderTimestamp())}
-		${renderSlider(context)}
-      </div>
-      <audio ${ref('_playerEl')} src="${x => x.src}"
-      @timeupdate="${x => x._updateProgress()}" @loadedmetadata="${x => x._updateTotalTime()}"></audio>
-    </div>`;
-};
\ No newline at end of file
+	return html<AudioPlayer>` <div class="base ${getClasses}">
+		<div class="controls">
+			${renderButton(context)} ${when((x) => !x.notime, renderTimestamp())}
+			${renderSlider(context)}
+		</div>
+		<audio
+			${ref('_playerEl')}
+			src="${(x) => x.src}"
+			@timeupdate="${(x) => x._updateProgress()}"
+			@loadedmetadata="${(x) => x._updateTotalTime()}"
+		></audio>
+	</div>`;
+};
diff --git a/libs/components/src/lib/audio-player/audio-player.ts b/libs/components/src/lib/audio-player/audio-player.ts
index e0f203a92f..f9150f36b0 100644
--- a/libs/components/src/lib/audio-player/audio-player.ts
+++ b/libs/components/src/lib/audio-player/audio-player.ts
@@ -10,7 +10,10 @@ import type { Slider } from '../slider/slider';
  *
  * @public
  */
-export type AudioPlayerConnotation = Extract<Connotation, | Connotation.Accent | Connotation.CTA>;
+export type AudioPlayerConnotation = Extract<
+	Connotation,
+	Connotation.Accent | Connotation.CTA
+>;
 
 /**
  * @public
@@ -18,9 +21,14 @@ export type AudioPlayerConnotation = Extract<Connotation, | Connotation.Accent |
  */
 
 export class AudioPlayer extends FoundationElement {
-	@attr({ attribute: 'play-button-aria-label' }) playButtonAriaLabel: string | null = null;
-	@attr({ attribute: 'pause-button-aria-label' }) pauseButtonAriaLabel: string | null = null;
-	@attr({ attribute: 'slider-aria-label' }) sliderAriaLabel: string | null = null;
+	@attr({ attribute: 'play-button-aria-label' }) playButtonAriaLabel:
+		| string
+		| null = null;
+	@attr({ attribute: 'pause-button-aria-label' }) pauseButtonAriaLabel:
+		| string
+		| null = null;
+	@attr({ attribute: 'slider-aria-label' }) sliderAriaLabel: string | null =
+		null;
 	/**
 	 * The connotation the audio-player should have.
 	 *
@@ -138,7 +146,8 @@ export class AudioPlayer extends FoundationElement {
 		if (this._playerEl) this.duration = this._playerEl.duration;
 		if (this._timeStampEl) {
 			totalTime = this._timeStampEl.querySelector('.total-time');
-			if (totalTime) totalTime.textContent = this._formatTime(this._playerEl.duration);
+			if (totalTime)
+				totalTime.textContent = this._formatTime(this._playerEl.duration);
 		}
 	}
 
@@ -149,7 +158,8 @@ export class AudioPlayer extends FoundationElement {
 		this.paused = true;
 		if (this._playerEl) {
 			this._playerEl.pause();
-			this._playerEl.currentTime = this._playerEl.duration * (Number(this._sliderEl.value) / 100);
+			this._playerEl.currentTime =
+				this._playerEl.duration * (Number(this._sliderEl.value) / 100);
 		}
 	};
 
@@ -159,9 +169,9 @@ export class AudioPlayer extends FoundationElement {
 	_formatTime(time: number) {
 		const min = Math.floor(time / 60);
 		const sec = Math.floor(time % 60);
-		return min + ':' + ((sec < 10) ? ('0' + sec) : sec);
+		return min + ':' + (sec < 10 ? '0' + sec : sec);
 	}
 }
 
-export interface AudioPlayer extends Localized { }
+export interface AudioPlayer extends Localized {}
 applyMixins(AudioPlayer, Localized);
diff --git a/libs/components/src/lib/audio-player/definition.ts b/libs/components/src/lib/audio-player/definition.ts
index 4127ad2c22..45ace1cd10 100644
--- a/libs/components/src/lib/audio-player/definition.ts
+++ b/libs/components/src/lib/audio-player/definition.ts
@@ -18,7 +18,11 @@ export const audioPlayerDefinition =
 /**
  * @internal
  */
-export const audioPlayerRegistries = [audioPlayerDefinition(), ...buttonRegistries, ...sliderRegistries];
+export const audioPlayerRegistries = [
+	audioPlayerDefinition(),
+	...buttonRegistries,
+	...sliderRegistries,
+];
 
 /**
  * Registers the audio-player element with the design system.
diff --git a/libs/components/src/lib/audio-player/locale.ts b/libs/components/src/lib/audio-player/locale.ts
index 16bb239f15..1c0a82de6e 100644
--- a/libs/components/src/lib/audio-player/locale.ts
+++ b/libs/components/src/lib/audio-player/locale.ts
@@ -2,4 +2,4 @@ export interface AudioPlayerLocale {
 	playButtonLabel: string;
 	pauseButtonLabel: string;
 	sliderLabel: string;
-}
\ No newline at end of file
+}
diff --git a/libs/components/src/lib/avatar/avatar.spec.ts b/libs/components/src/lib/avatar/avatar.spec.ts
index de2776a5b0..d7cdd2ff3c 100644
--- a/libs/components/src/lib/avatar/avatar.spec.ts
+++ b/libs/components/src/lib/avatar/avatar.spec.ts
@@ -1,6 +1,6 @@
 import { axe, elementUpdated, fixture, getBaseElement } from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
-import {Connotation} from '../enums';
+import { Connotation } from '../enums';
 import { Avatar } from './avatar';
 import '.';
 import { avatarDefinition } from './definition';
@@ -36,8 +36,9 @@ describe('vwc-avatar', () => {
 			(element as any).appearance = appearance;
 			await elementUpdated(element);
 
-			expect(baseElement?.classList.contains(`appearance-${appearance}`))
-				.toBeTruthy();
+			expect(
+				baseElement?.classList.contains(`appearance-${appearance}`)
+			).toBeTruthy();
 		});
 	});
 
@@ -48,24 +49,24 @@ describe('vwc-avatar', () => {
 			(element as any).shape = shape;
 			await elementUpdated(element);
 
-			expect(baseElement?.classList.contains(`shape-${shape}`))
-				.toBeTruthy();
+			expect(baseElement?.classList.contains(`shape-${shape}`)).toBeTruthy();
 		});
 	});
 
 	describe('avatar connotation', function () {
 		it('should set the connotation class on base', async function () {
 			const connotation = Connotation.CTA;
-			const connotationClassExistsBeforeTheChange = baseElement?.classList.contains(`connotation-${connotation}`);
+			const connotationClassExistsBeforeTheChange =
+				baseElement?.classList.contains(`connotation-${connotation}`);
 
 			element.connotation = connotation;
 			await elementUpdated(element);
-			const connotationClassExistsAfterChange = baseElement?.classList.contains(`connotation-${connotation}`);
+			const connotationClassExistsAfterChange = baseElement?.classList.contains(
+				`connotation-${connotation}`
+			);
 
-			expect(connotationClassExistsBeforeTheChange)
-				.toEqual(false);
-			expect(connotationClassExistsAfterChange)
-				.toEqual(true);
+			expect(connotationClassExistsBeforeTheChange).toEqual(false);
+			expect(connotationClassExistsAfterChange).toEqual(true);
 		});
 	});
 
@@ -94,7 +95,6 @@ describe('vwc-avatar', () => {
 			expect(iconElement?.getAttribute('name')).toEqual(icon);
 			expect(element.icon).toEqual(icon);
 		});
-
 	});
 
 	describe('avatar initials', () => {
@@ -129,7 +129,7 @@ describe('vwc-avatar', () => {
 			it('should pass html a11y', async () => {
 				element.initials = 'ab';
 				await elementUpdated(element);
-				
+
 				expect(await axe(element)).toHaveNoViolations();
 			});
 		});
diff --git a/libs/components/src/lib/avatar/avatar.template.ts b/libs/components/src/lib/avatar/avatar.template.ts
index f4a4ab3b8f..4c5c0cc788 100644
--- a/libs/components/src/lib/avatar/avatar.template.ts
+++ b/libs/components/src/lib/avatar/avatar.template.ts
@@ -1,4 +1,4 @@
-import {html, when} from '@microsoft/fast-element';
+import { html, when } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type {
 	ElementDefinitionContext,
@@ -8,13 +8,14 @@ import { classNames } from '@microsoft/fast-web-utilities';
 import { Icon } from '../icon/icon';
 import type { Avatar } from './avatar';
 
-const getClasses = ({appearance, connotation, shape, size}: Avatar) => classNames(
-	'base',
-	[`connotation-${connotation}`, Boolean(connotation)],
-	[`appearance-${appearance}`, Boolean(appearance)],
-	[`shape-${shape}`, Boolean(shape)],
-	[`size-${size}`, Boolean(size)],
-);
+const getClasses = ({ appearance, connotation, shape, size }: Avatar) =>
+	classNames(
+		'base',
+		[`connotation-${connotation}`, Boolean(connotation)],
+		[`appearance-${appearance}`, Boolean(appearance)],
+		[`shape-${shape}`, Boolean(shape)],
+		[`size-${size}`, Boolean(size)]
+	);
 
 /**
  avatar icon
@@ -22,18 +23,17 @@ const getClasses = ({appearance, connotation, shape, size}: Avatar) => className
 function renderIcon(iconTag: string) {
 	return html<Avatar>`
 		<span class="icon">
-			<${iconTag} name="${(x) => x.icon? `${x.icon}` : 'user-line'}"></${iconTag}>
+			<${iconTag} name="${(x) => (x.icon ? `${x.icon}` : 'user-line')}"></${iconTag}>
 		</span>
 	`;
 }
 
-
 /**
  avatar initials
  */
 function renderInitials() {
 	return html<Avatar>`
-		<span class="initials">${ ({ initials }) => initials!.substring(0, 2) }</span>
+		<span class="initials">${({ initials }) => initials!.substring(0, 2)}</span>
 	`;
 }
 
@@ -49,11 +49,10 @@ export const AvatarTemplate: (
 ) => ViewTemplate<Avatar> = (context: ElementDefinitionContext) => {
 	const iconTag = context.tagFor(Icon);
 
-	return html`
-	<span class="${getClasses}">
+	return html` <span class="${getClasses}">
 		<slot name="graphic">
-			${when(x => x.initials, renderInitials())}
-			${when( x => !x.initials, renderIcon(iconTag))}
+			${when((x) => x.initials, renderInitials())}
+			${when((x) => !x.initials, renderIcon(iconTag))}
 		</slot>
-</span>`;
+	</span>`;
 };
diff --git a/libs/components/src/lib/avatar/avatar.ts b/libs/components/src/lib/avatar/avatar.ts
index e494a25ba8..83467741cc 100644
--- a/libs/components/src/lib/avatar/avatar.ts
+++ b/libs/components/src/lib/avatar/avatar.ts
@@ -1,27 +1,30 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
 
-import type {
-	Appearance, Connotation, Shape, Size,
-} from '../enums.js';
-
+import type { Appearance, Connotation, Shape, Size } from '../enums.js';
 
 /**
  * Types of avatar connotation.
  *
  * @public
  */
-export type AvatarConnotation = Extract<Connotation,
-| Connotation.Accent
-| Connotation.CTA>;
+export type AvatarConnotation = Extract<
+	Connotation,
+	Connotation.Accent | Connotation.CTA
+>;
 
 /**
  * Types of avatar appearance.
  *
  * @public
  */
-export type AvatarAppearance = Extract<Appearance,
-Appearance.Filled | Appearance.Outlined | Appearance.Duotone | Appearance.Subtle>;
+export type AvatarAppearance = Extract<
+	Appearance,
+	| Appearance.Filled
+	| Appearance.Outlined
+	| Appearance.Duotone
+	| Appearance.Subtle
+>;
 
 /**
  * Types of avatar shape.
@@ -40,7 +43,10 @@ export type AvatarShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
  *
  * @public
  */
-export type AvatarSize = Extract<Size, Size.Condensed | Size.Normal | Size.Expanded>;
+export type AvatarSize = Extract<
+	Size,
+	Size.Condensed | Size.Normal | Size.Expanded
+>;
 
 /**
  * @public
@@ -75,7 +81,6 @@ export class Avatar extends FoundationElement {
 	 */
 	@attr appearance?: AvatarAppearance;
 
-
 	/**
 	 * The size the avatar should have.
 	 *
@@ -85,7 +90,6 @@ export class Avatar extends FoundationElement {
 	 */
 	@attr size?: AvatarSize;
 
-
 	/**
 	 * avatar header icon
 	 *
diff --git a/libs/components/src/lib/avatar/definition.ts b/libs/components/src/lib/avatar/definition.ts
index 325c31c7bc..41923059a3 100644
--- a/libs/components/src/lib/avatar/definition.ts
+++ b/libs/components/src/lib/avatar/definition.ts
@@ -6,7 +6,12 @@ import styles from './avatar.scss?inline';
 import { Avatar } from './avatar';
 import { AvatarTemplate as template } from './avatar.template';
 
-export type { AvatarConnotation, AvatarShape, AvatarAppearance, AvatarSize } from './avatar';
+export type {
+	AvatarConnotation,
+	AvatarShape,
+	AvatarAppearance,
+	AvatarSize,
+} from './avatar';
 
 /**
  *
diff --git a/libs/components/src/lib/avatar/index.ts b/libs/components/src/lib/avatar/index.ts
index 72ad43d8cf..5796012d58 100644
--- a/libs/components/src/lib/avatar/index.ts
+++ b/libs/components/src/lib/avatar/index.ts
@@ -1,4 +1,3 @@
 import { registerAvatar } from './definition';
 
-
 registerAvatar();
diff --git a/libs/components/src/lib/badge/badge.spec.ts b/libs/components/src/lib/badge/badge.spec.ts
index e635d2cab8..3c172d33dc 100644
--- a/libs/components/src/lib/badge/badge.spec.ts
+++ b/libs/components/src/lib/badge/badge.spec.ts
@@ -1,7 +1,7 @@
 import { axe, elementUpdated, fixture } from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
-import {Icon} from '../icon/icon';
-import {Badge} from './badge';
+import { Icon } from '../icon/icon';
+import { Badge } from './badge';
 import { badgeDefinition } from './definition';
 import '.';
 
@@ -16,7 +16,7 @@ describe('vwc-badge', () => {
 	});
 
 	beforeEach(async () => {
-		element = await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`) as Badge;
+		element = (await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`)) as Badge;
 	});
 
 	describe('basic', () => {
@@ -34,7 +34,9 @@ describe('vwc-badge', () => {
 
 	describe('icon', () => {
 		it('should have an icon slot', async () => {
-			expect(element.shadowRoot?.querySelector('slot[name="icon"]')).toBeTruthy();
+			expect(
+				element.shadowRoot?.querySelector('slot[name="icon"]')
+			).toBeTruthy();
 		});
 
 		it('adds an icon to the badge', async () => {
@@ -42,10 +44,8 @@ describe('vwc-badge', () => {
 			await elementUpdated(element);
 
 			const icon = element.shadowRoot?.querySelector(ICON_SELECTOR) as Icon;
-			expect(icon)
-				.toBeInstanceOf(Icon);
-			expect(icon?.name)
-				.toEqual('home');
+			expect(icon).toBeInstanceOf(Icon);
+			expect(icon?.name).toEqual('home');
 		});
 
 		it('setting `iconTrailing` set the order of element', async () => {
@@ -54,12 +54,10 @@ describe('vwc-badge', () => {
 			await elementUpdated(element);
 
 			const trailingIcon = element.shadowRoot?.querySelector(
-				`.icon-trailing ${ICON_SELECTOR}`,
+				`.icon-trailing ${ICON_SELECTOR}`
 			);
-			expect(trailingIcon)
-				.toBeInstanceOf(Icon);
-		},
-		);
+			expect(trailingIcon).toBeInstanceOf(Icon);
+		});
 	});
 
 	describe('text', () => {
@@ -69,8 +67,7 @@ describe('vwc-badge', () => {
 			await elementUpdated(element);
 
 			const base = element.shadowRoot?.querySelector('.base');
-			expect(base?.textContent?.trim())
-				.toEqual(text);
+			expect(base?.textContent?.trim()).toEqual(text);
 		});
 	});
 
@@ -80,9 +77,10 @@ describe('vwc-badge', () => {
 			(element as any).connotation = connotation;
 			await elementUpdated(element);
 
-			const base = element.shadowRoot?.querySelector(`.base.connotation-${connotation}`);
-			expect(base)
-				.toBeInstanceOf(Element);
+			const base = element.shadowRoot?.querySelector(
+				`.base.connotation-${connotation}`
+			);
+			expect(base).toBeInstanceOf(Element);
 		});
 	});
 
@@ -93,8 +91,7 @@ describe('vwc-badge', () => {
 			await elementUpdated(element);
 
 			const base = element.shadowRoot?.querySelector(`.base.shape-${shape}`);
-			expect(base)
-				.toBeInstanceOf(Element);
+			expect(base).toBeInstanceOf(Element);
 		});
 	});
 
@@ -104,15 +101,17 @@ describe('vwc-badge', () => {
 			(element as any).appearance = appearance;
 			await elementUpdated(element);
 
-			const base = element.shadowRoot?.querySelector(`.base.appearance-${appearance}`);
-			expect(base)
-				.toBeInstanceOf(Element);
+			const base = element.shadowRoot?.querySelector(
+				`.base.appearance-${appearance}`
+			);
+			expect(base).toBeInstanceOf(Element);
 		});
 	});
 
 	describe('icon-only', () => {
 		it('sets correct internal icon-only style', async () => {
-			const getControlIconOnly = () => element.shadowRoot?.querySelector('.base.icon-only');
+			const getControlIconOnly = () =>
+				element.shadowRoot?.querySelector('.base.icon-only');
 			const baseIconOnlyBefore = getControlIconOnly();
 
 			element.icon = 'home';
@@ -128,12 +127,12 @@ describe('vwc-badge', () => {
 		it('should pass html a11y test', async () => {
 			element.text = 'Test badge';
 			await elementUpdated(element);
-	
+
 			expect(await axe(element)).toHaveNoViolations();
 		});
 
 		describe('icon-only', () => {
-			it('should pass html a11y test', async () => {				
+			it('should pass html a11y test', async () => {
 				element.icon = 'home';
 				await elementUpdated(element);
 
diff --git a/libs/components/src/lib/badge/badge.template.ts b/libs/components/src/lib/badge/badge.template.ts
index e7c859f9c8..11f0c9ddd4 100644
--- a/libs/components/src/lib/badge/badge.template.ts
+++ b/libs/components/src/lib/badge/badge.template.ts
@@ -1,20 +1,32 @@
 import { html, when } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import type { Badge } from './badge';
 
 const getClasses = ({
-	connotation, appearance, shape, iconTrailing, text, icon
-}: Badge) => classNames(
-	'base',
-	[`connotation-${connotation}`, Boolean(connotation)],
-	[`appearance-${appearance}`, Boolean(appearance)],
-	[`shape-${shape}`, Boolean(shape)],
-	['icon-trailing', iconTrailing],
-	['icon-only', !text && Boolean(icon)],
-);
+	connotation,
+	appearance,
+	shape,
+	iconTrailing,
+	text,
+	icon,
+}: Badge) =>
+	classNames(
+		'base',
+		[`connotation-${connotation}`, Boolean(connotation)],
+		[`appearance-${appearance}`, Boolean(appearance)],
+		[`shape-${shape}`, Boolean(shape)],
+		['icon-trailing', iconTrailing],
+		['icon-only', !text && Boolean(icon)]
+	);
 
 /**
  * The template for the Badge component.
@@ -28,9 +40,11 @@ export const badgeTemplate: (
 ) => ViewTemplate<Badge> = (context: ElementDefinitionContext) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
-	return html`
-    <span class="${getClasses}">
-      ${x => affixIconTemplate(x.icon, IconWrapper.Slot)}
-			${when((x)=> x.text, (x) => html<Badge>`<span class="text">${x.text as string}</span>`)}
+	return html` <span class="${getClasses}">
+		${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+		${when(
+			(x) => x.text,
+			(x) => html<Badge>`<span class="text">${x.text as string}</span>`
+		)}
 	</span>`;
 };
diff --git a/libs/components/src/lib/badge/badge.ts b/libs/components/src/lib/badge/badge.ts
index 4ea1ffef41..6637732d23 100644
--- a/libs/components/src/lib/badge/badge.ts
+++ b/libs/components/src/lib/badge/badge.ts
@@ -2,30 +2,32 @@ import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 
-import type {
-	Appearance, Connotation, Shape,
-} from '../enums.js';
+import type { Appearance, Connotation, Shape } from '../enums.js';
 
 /**
  * Types of badge connotation.
  *
  * @public
  */
-export type BadgeConnotation = Extract<Connotation,
-| Connotation.Accent
-| Connotation.CTA
-| Connotation.Success
-| Connotation.Alert
-| Connotation.Warning
-| Connotation.Information>;
+export type BadgeConnotation = Extract<
+	Connotation,
+	| Connotation.Accent
+	| Connotation.CTA
+	| Connotation.Success
+	| Connotation.Alert
+	| Connotation.Warning
+	| Connotation.Information
+>;
 
 /**
  * Types of badge appearance.
  *
  * @public
  */
-export type BadgeAppearance = Extract<Appearance,
-Appearance.Filled | Appearance.Duotone | Appearance.Subtle>;
+export type BadgeAppearance = Extract<
+	Appearance,
+	Appearance.Filled | Appearance.Duotone | Appearance.Subtle
+>;
 
 /**
  * Types of badge shape.
diff --git a/libs/components/src/lib/badge/index.ts b/libs/components/src/lib/badge/index.ts
index 6cf56dc44a..2ecfa70310 100644
--- a/libs/components/src/lib/badge/index.ts
+++ b/libs/components/src/lib/badge/index.ts
@@ -1,4 +1,3 @@
 import { registerBadge } from './definition';
 
-
 registerBadge();
diff --git a/libs/components/src/lib/badge/ui.test.ts b/libs/components/src/lib/badge/ui.test.ts
index 798eb6347c..c5e1b73685 100644
--- a/libs/components/src/lib/badge/ui.test.ts
+++ b/libs/components/src/lib/badge/ui.test.ts
@@ -1,11 +1,14 @@
 import { expect, test } from '@playwright/test';
 import type { Page } from '@playwright/test';
-import {loadComponents, loadTemplate} from '../../visual-tests/visual-tests-utils.js';
+import {
+	loadComponents,
+	loadTemplate,
+} from '../../visual-tests/visual-tests-utils.js';
 
 const components = ['badge', 'icon'];
 
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template =`
+	const template = `
 	<vwc-badge text='A default badge'></vwc-badge>
 	<vwc-badge text='rounded' shape='rounded'></vwc-badge>
 	<vwc-badge text='pill' shape='pill'></vwc-badge>
@@ -54,8 +57,7 @@ test('should show the component', async ({ page }: { page: Page }) => {
 
 	await page.waitForLoadState('networkidle');
 
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/badge.png',
-		);
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/badge.png'
+	);
 });
diff --git a/libs/components/src/lib/banner/banner.spec.ts b/libs/components/src/lib/banner/banner.spec.ts
index af9ca582f2..f4bde9910b 100644
--- a/libs/components/src/lib/banner/banner.spec.ts
+++ b/libs/components/src/lib/banner/banner.spec.ts
@@ -14,7 +14,8 @@ async function toggleRemovable(element: Banner, removable = true) {
 }
 
 function getBannerMessageAttribute(element: Banner, attribute: string) {
-	return element.shadowRoot?.querySelector('.banner-message')
+	return element.shadowRoot
+		?.querySelector('.banner-message')
 		?.getAttribute(attribute);
 }
 
@@ -39,8 +40,7 @@ describe('vwc-banner', () => {
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-banner', async () => {
-			expect(element)
-				.toBeInstanceOf(Banner);
+			expect(element).toBeInstanceOf(Banner);
 		});
 	});
 
@@ -56,7 +56,8 @@ describe('vwc-banner', () => {
 		}
 
 		function getText() {
-			const text = element.shadowRoot?.querySelector('.banner-message')?.textContent;
+			const text =
+				element.shadowRoot?.querySelector('.banner-message')?.textContent;
 			return text?.trim();
 		}
 
@@ -64,10 +65,8 @@ describe('vwc-banner', () => {
 			const initTextPropEmpty = element.text;
 			const initTextAttrEmpty = getText();
 
-			expect(initTextPropEmpty)
-				.toEqual(undefined);
-			expect(initTextAttrEmpty)
-				.toEqual('');
+			expect(initTextPropEmpty).toEqual(undefined);
+			expect(initTextAttrEmpty).toEqual('');
 		});
 
 		it('should reflect the message', async function () {
@@ -80,39 +79,31 @@ describe('vwc-banner', () => {
 			await setTextAttribute(messageText);
 			const propertyTextWithAttribute = element.text;
 
-			expect(DOMTextWithProperty)
-				.toEqual(messageText);
-			expect(propertyTextWithAttribute)
-				.toEqual(messageText);
+			expect(DOMTextWithProperty).toEqual(messageText);
+			expect(propertyTextWithAttribute).toEqual(messageText);
 		});
 	});
 
 	describe('remove', function () {
-
 		it('should fire removing event', async function () {
 			const spy = jest.fn();
 			element.addEventListener('removing', spy);
 			element.remove();
-			expect(spy)
-				.toHaveBeenCalled();
+			expect(spy).toHaveBeenCalled();
 		});
 
 		it('should fire removed after animation end', async function () {
-
 			const spy = jest.fn();
 			element.addEventListener('removed', spy);
 			element.remove();
 
 			dispatchAnimationEndEvent();
 
-			expect(spy)
-				.toHaveBeenCalled();
-			expect(spy.mock.calls.length)
-				.toEqual(1);
+			expect(spy).toHaveBeenCalled();
+			expect(spy.mock.calls.length).toEqual(1);
 		});
 
 		it('should disable removed and removing events after disconnected callback', async function () {
-
 			const spy = jest.fn();
 			element.addEventListener('removed', spy);
 			element.addEventListener('removing', spy);
@@ -121,32 +112,32 @@ describe('vwc-banner', () => {
 			element.remove();
 			dispatchAnimationEndEvent();
 
-			expect(spy.mock.calls.length)
-				.toEqual(0);
+			expect(spy.mock.calls.length).toEqual(0);
 		});
 
 		it('should remove the banner after dispatch', function () {
 			element.remove();
 			dispatchAnimationEndEvent();
-			expect(document.body.contains(element))
-				.toEqual(false);
+			expect(document.body.contains(element)).toEqual(false);
 		});
 	});
 
 	describe('connotation', function () {
-		const possibleConnotations = [Connotation.Information,
+		const possibleConnotations = [
+			Connotation.Information,
 			Connotation.Announcement,
 			Connotation.Success,
 			Connotation.Warning,
-			Connotation.Alert
+			Connotation.Alert,
 		];
 
 		it('should leave connotation class empty if not set', async function () {
-			possibleConnotations.forEach(connotation => {
-				expect(element.shadowRoot?.querySelector('.control')
-					?.classList
-					.contains(connotation))
-					.toEqual(false);
+			possibleConnotations.forEach((connotation) => {
+				expect(
+					element.shadowRoot
+						?.querySelector('.control')
+						?.classList.contains(connotation)
+				).toEqual(false);
 			});
 		});
 
@@ -154,31 +145,31 @@ describe('vwc-banner', () => {
 			const connotation = possibleConnotations[2];
 			(element.connotation as Connotation) = connotation;
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.control')
-				?.classList
-				.contains(`connotation-${connotation}`))
-				.toEqual(true);
+			expect(
+				element.shadowRoot
+					?.querySelector('.control')
+					?.classList.contains(`connotation-${connotation}`)
+			).toEqual(true);
 		});
 	});
 
 	describe('icon', function () {
-		const getIcon = () => element.shadowRoot?.querySelector('slot[name="icon"] > vwc-icon') as Icon;
+		const getIcon = () =>
+			element.shadowRoot?.querySelector('slot[name="icon"] > vwc-icon') as Icon;
 
 		it('should have an icon slot', async () => {
 			expect(getIcon()).toBeTruthy();
 		});
 
 		it('should set the icon according to connotation information by default', function () {
-			expect(getIcon().name)
-				.toEqual('info-solid');
+			expect(getIcon().name).toEqual('info-solid');
 		});
 
 		it('should set the icon according to "icon" attribute', async function () {
 			element.setAttribute('icon', 'home');
 			await elementUpdated(element);
 
-			expect(getIcon().name)
-				.toEqual('home');
+			expect(getIcon().name).toEqual('home');
 		});
 
 		it('should set the icon according to set connotation', async function () {
@@ -187,7 +178,7 @@ describe('vwc-banner', () => {
 				[Connotation.Announcement, 'megaphone-solid'],
 				[Connotation.Success, 'check-circle-solid'],
 				[Connotation.Warning, 'warning-solid'],
-				[Connotation.Alert, 'error-solid']
+				[Connotation.Alert, 'error-solid'],
 			]);
 
 			for (const [connotation, iconName] of connotationIconMap) {
@@ -202,10 +193,8 @@ describe('vwc-banner', () => {
 
 	describe('removable', function () {
 		it('should init to false', function () {
-			expect(element.removable)
-				.toEqual(false);
-			expect(element.hasAttribute('removable'))
-				.toEqual(false);
+			expect(element.removable).toEqual(false);
+			expect(element.hasAttribute('removable')).toEqual(false);
 		});
 
 		it('should toggle attribute on host', async function () {
@@ -215,44 +204,50 @@ describe('vwc-banner', () => {
 			await toggleRemovable(element, false);
 			const removeAttributeExistsWhenFalse = element.hasAttribute('removable');
 
-			expect(removeAttributeExistsWhenTrue)
-				.toEqual(true);
-			expect(removeAttributeExistsWhenFalse)
-				.toEqual(false);
+			expect(removeAttributeExistsWhenTrue).toEqual(true);
+			expect(removeAttributeExistsWhenFalse).toEqual(false);
 		});
 
 		it('should set removable property on attribute change', async function () {
 			element.toggleAttribute('removable');
 			await elementUpdated(element);
-			expect(element.removable)
-				.toEqual(true);
+			expect(element.removable).toEqual(true);
 		});
 
 		it('should remove the remove button when removable is false', async function () {
-			expect(element.shadowRoot?.querySelector('.dismiss-button'))
-				.toEqual(null);
+			expect(element.shadowRoot?.querySelector('.dismiss-button')).toEqual(
+				null
+			);
 		});
 
 		it('should add a remove button when true', async function () {
 			await toggleRemovable(element, true);
-			expect(element.shadowRoot?.querySelector('.dismiss-button'))
-				.toBeInstanceOf(Button);
+			expect(
+				element.shadowRoot?.querySelector('.dismiss-button')
+			).toBeInstanceOf(Button);
 		});
 
 		it('should remove banner on remove button click', async function () {
 			await toggleRemovable(element, true);
-			const dismissButton = element.shadowRoot?.querySelector('.dismiss-button') as HTMLElement;
+			const dismissButton = element.shadowRoot?.querySelector(
+				'.dismiss-button'
+			) as HTMLElement;
 			dismissButton.click();
 			dispatchAnimationEndEvent();
-			expect(document.body.contains(element))
-				.toEqual(false);
+			expect(document.body.contains(element)).toEqual(false);
 		});
 
 		it('should add class "removing" to banner on remove button click', async function () {
 			await toggleRemovable(element, true);
-			const dismissButton = element.shadowRoot?.querySelector('.dismiss-button') as HTMLElement;
+			const dismissButton = element.shadowRoot?.querySelector(
+				'.dismiss-button'
+			) as HTMLElement;
 			dismissButton.click();
-			expect(element.shadowRoot?.querySelector('.control')?.classList.contains('removing')).toEqual(true);
+			expect(
+				element.shadowRoot
+					?.querySelector('.control')
+					?.classList.contains('removing')
+			).toEqual(true);
 		});
 	});
 
@@ -271,7 +266,6 @@ describe('vwc-banner', () => {
 			const spy = jest.spyOn(element, 'remove');
 			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 			expect((spy as any).mock.calls.length).toEqual(0);
-
 		});
 
 		it('should remove keydown listener after disconnection', async function () {
@@ -303,16 +297,14 @@ describe('vwc-banner', () => {
 		describe('role', function () {
 			it('should be set to "status" on init', function () {
 				const role = getBannerMessageAttribute(element, 'role');
-				expect(role)
-					.toEqual('status');
+				expect(role).toEqual('status');
 			});
 
 			it('should change role to role text', async function () {
 				element.role = 'alert';
 				await elementUpdated(element);
 				const role = getBannerMessageAttribute(element, 'role');
-				expect(role)
-					.toEqual('alert');
+				expect(role).toEqual('alert');
 				expect(await axe(element)).toHaveNoViolations();
 			});
 
@@ -320,8 +312,7 @@ describe('vwc-banner', () => {
 				element.setAttribute('role', 'alert');
 				await elementUpdated(element);
 				const role = getBannerMessageAttribute(element, 'role');
-				expect(role)
-					.toEqual('alert');
+				expect(role).toEqual('alert');
 				expect(await axe(element)).toHaveNoViolations();
 			});
 		});
@@ -329,24 +320,21 @@ describe('vwc-banner', () => {
 		describe('aria live', function () {
 			it('should be set to "live" on init', function () {
 				const ariaLive = getBannerMessageAttribute(element, 'aria-live');
-				expect(ariaLive)
-					.toEqual('polite');
+				expect(ariaLive).toEqual('polite');
 			});
 
 			it('should change aria-live to ariaLive text', async function () {
 				element.ariaLive = 'assertive';
 				await elementUpdated(element);
 				const ariaLive = getBannerMessageAttribute(element, 'aria-live');
-				expect(ariaLive)
-					.toEqual('assertive');
+				expect(ariaLive).toEqual('assertive');
 			});
 
 			it('should change reflect aria-live inside the message', async function () {
 				element.setAttribute('aria-live', 'assertive');
 				await elementUpdated(element);
 				const ariaLive = getBannerMessageAttribute(element, 'aria-live');
-				expect(ariaLive)
-					.toEqual('assertive');
+				expect(ariaLive).toEqual('assertive');
 			});
 		});
 	});
diff --git a/libs/components/src/lib/banner/banner.template.ts b/libs/components/src/lib/banner/banner.template.ts
index d775c55259..ebeb220f12 100644
--- a/libs/components/src/lib/banner/banner.template.ts
+++ b/libs/components/src/lib/banner/banner.template.ts
@@ -5,14 +5,15 @@ import type {
 	FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import { Button } from '../button/button';
 import type { Banner } from './banner';
 
-const getClasses = (_: Banner) => classNames(
-	'control',
-	[`connotation-${_.connotation}`, !!_.connotation]
-);
+const getClasses = (_: Banner) =>
+	classNames('control', [`connotation-${_.connotation}`, !!_.connotation]);
 
 /**
  *
@@ -20,12 +21,13 @@ const getClasses = (_: Banner) => classNames(
 function renderDismissButton(buttonTag: string) {
 	return html<Banner>`
 	  <${buttonTag}
-	  		aria-label="${x => x.dismissButtonAriaLabel || x.locale.banner.dismissButtonLabel}"
+	  		aria-label="${(x) =>
+					x.dismissButtonAriaLabel || x.locale.banner.dismissButtonLabel}"
 			part="vvd-theme-alternate"
 			size="condensed"
 			class="dismiss-button"
 			icon="close-line"
-			@click="${x => x.remove()}">
+			@click="${(x) => x.remove()}">
 	  </${buttonTag}>`;
 }
 
@@ -43,21 +45,26 @@ export const BannerTemplate: (
 	const buttonTag = context.tagFor(Button);
 
 	return html<Banner>`
-	  <div class="${getClasses}">
-		  <header class="header">
-					<div class="content">
-            ${x => affixIconTemplate(x.conditionedIcon, IconWrapper.Slot)}
-						<div class="banner-message"
-						 role="${x => x.role ? x.role : 'status'}"
-						 aria-live="${x => x.ariaLive ? x.ariaLive : 'polite'}">
-									${x => x.text}
-            </div>
-						<slot class="action-items" ${slotted('actionItemsSlottedContent')} name="action-items"></slot>
+		<div class="${getClasses}">
+			<header class="header">
+				<div class="content">
+					${(x) => affixIconTemplate(x.conditionedIcon, IconWrapper.Slot)}
+					<div
+						class="banner-message"
+						role="${(x) => (x.role ? x.role : 'status')}"
+						aria-live="${(x) => (x.ariaLive ? x.ariaLive : 'polite')}"
+					>
+						${(x) => x.text}
 					</div>
+					<slot
+						class="action-items"
+						${slotted('actionItemsSlottedContent')}
+						name="action-items"
+					></slot>
+				</div>
 
-			  ${when(x => x.removable, renderDismissButton(buttonTag))}
-		  </header>
-	  </div>
+				${when((x) => x.removable, renderDismissButton(buttonTag))}
+			</header>
+		</div>
 	`;
 };
-
diff --git a/libs/components/src/lib/banner/banner.ts b/libs/components/src/lib/banner/banner.ts
index 43c30e2be0..27a645430f 100644
--- a/libs/components/src/lib/banner/banner.ts
+++ b/libs/components/src/lib/banner/banner.ts
@@ -1,26 +1,27 @@
-import {applyMixins, FoundationElement} from '@microsoft/fast-foundation';
-import {attr, observable} from '@microsoft/fast-element';
-import {Connotation} from '../enums';
+import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
+import { attr, observable } from '@microsoft/fast-element';
+import { Connotation } from '../enums';
 import { Localized } from '../../shared/patterns';
-import {AffixIcon} from '../../shared/patterns/affix';
+import { AffixIcon } from '../../shared/patterns/affix';
 
 export type BannerConnotation =
-	Connotation.Information |
-	Connotation.Announcement |
-	Connotation.Success |
-	Connotation.Warning |
-	Connotation.Alert;
+	| Connotation.Information
+	| Connotation.Announcement
+	| Connotation.Success
+	| Connotation.Warning
+	| Connotation.Alert;
 
 const connotationIconMap = new Map([
 	[Connotation.Information, 'info-solid'],
 	[Connotation.Announcement, 'megaphone-solid'],
 	[Connotation.Success, 'check-circle-solid'],
 	[Connotation.Warning, 'warning-solid'],
-	[Connotation.Alert, 'error-solid']
+	[Connotation.Alert, 'error-solid'],
 ]);
 
-const defaultConnotation =
-	(connotation: Connotation | undefined = Connotation.Information) => connotationIconMap.get(connotation) as Connotation;
+const defaultConnotation = (
+	connotation: Connotation | undefined = Connotation.Information
+) => connotationIconMap.get(connotation) as Connotation;
 
 /**
  * @public
@@ -29,12 +30,14 @@ const defaultConnotation =
  * @slot icon - Add an icon to the component.
  */
 export class Banner extends FoundationElement {
-	@attr({ attribute: 'dismiss-aria-label' }) dismissButtonAriaLabel: string | null = null;
+	@attr({ attribute: 'dismiss-aria-label' }) dismissButtonAriaLabel:
+		| string
+		| null = null;
 	@attr override role: string | null = null;
-	@attr({attribute: 'action-href'}) actionHref: string | undefined;
-	@attr({attribute: 'action-text'}) actionText: string | undefined;
-	@attr({mode: 'boolean'}) removable = false;
-	@attr({attribute: 'aria-live'}) override ariaLive: any;
+	@attr({ attribute: 'action-href' }) actionHref: string | undefined;
+	@attr({ attribute: 'action-text' }) actionText: string | undefined;
+	@attr({ mode: 'boolean' }) removable = false;
+	@attr({ attribute: 'aria-live' }) override ariaLive: any;
 	@attr() text: string | undefined;
 	@attr() connotation: BannerConnotation | undefined;
 
@@ -85,5 +88,5 @@ export class Banner extends FoundationElement {
 
 applyMixins(Banner, AffixIcon);
 
-export interface Banner extends Localized, AffixIcon{ }
+export interface Banner extends Localized, AffixIcon {}
 applyMixins(Banner, Localized);
diff --git a/libs/components/src/lib/banner/definition.ts b/libs/components/src/lib/banner/definition.ts
index 2aa1a2c2fd..a9a0a70efa 100644
--- a/libs/components/src/lib/banner/definition.ts
+++ b/libs/components/src/lib/banner/definition.ts
@@ -22,7 +22,11 @@ export const bannerDefinition = Banner.compose<FoundationElementDefinition>({
 /**
  * @internal
  */
-export const bannerRegistries = [bannerDefinition(), ...iconRegistries, ...buttonRegistries];
+export const bannerRegistries = [
+	bannerDefinition(),
+	...iconRegistries,
+	...buttonRegistries,
+];
 
 /**
  * Registers the banner elements with the design system.
@@ -30,4 +34,3 @@ export const bannerRegistries = [bannerDefinition(), ...iconRegistries, ...butto
  * @param prefix - the prefix to use for the component name
  */
 export const registerBanner = registerFactory(bannerRegistries);
-
diff --git a/libs/components/src/lib/banner/index.ts b/libs/components/src/lib/banner/index.ts
index 7d4b55d9ba..2645e3baee 100644
--- a/libs/components/src/lib/banner/index.ts
+++ b/libs/components/src/lib/banner/index.ts
@@ -1,4 +1,3 @@
 import { registerBanner } from './definition';
 
-
 registerBanner();
diff --git a/libs/components/src/lib/banner/locale.ts b/libs/components/src/lib/banner/locale.ts
index 3d525bbb88..47e543adce 100644
--- a/libs/components/src/lib/banner/locale.ts
+++ b/libs/components/src/lib/banner/locale.ts
@@ -1,3 +1,3 @@
 export interface BannerLocale {
 	dismissButtonLabel: string;
-}
\ No newline at end of file
+}
diff --git a/libs/components/src/lib/banner/ui.test.ts b/libs/components/src/lib/banner/ui.test.ts
index 045670c587..82777cef40 100644
--- a/libs/components/src/lib/banner/ui.test.ts
+++ b/libs/components/src/lib/banner/ui.test.ts
@@ -36,12 +36,16 @@ test('should show the component', async ({ page }: { page: Page }) => {
 	expect(await testWrapper?.screenshot()).toMatchSnapshot(
 		'./snapshots/banner.png',
 		{
-			maxDiffPixelRatio: 0.02
+			maxDiffPixelRatio: 0.02,
 		}
 	);
 });
 
-test('should remove the component when clicking on remove button', async ({ page }: { page: Page }) => {
+test('should remove the component when clicking on remove button', async ({
+	page,
+}: {
+	page: Page;
+}) => {
 	const template = `
 			<vwc-banner removable icon="home" text="ET Phone!"></vwc-banner>
 	`;
@@ -62,8 +66,7 @@ test('should remove the component when clicking on remove button', async ({ page
 
 	await removeButton.click();
 
-	await element.waitFor({state: 'detached'});
+	await element.waitFor({ state: 'detached' });
 
 	expect(await element.count()).toEqual(0);
-
 });
diff --git a/libs/components/src/lib/breadcrumb-item/breadcrumb-item.spec.ts b/libs/components/src/lib/breadcrumb-item/breadcrumb-item.spec.ts
index 086b5b0956..a959854f4c 100644
--- a/libs/components/src/lib/breadcrumb-item/breadcrumb-item.spec.ts
+++ b/libs/components/src/lib/breadcrumb-item/breadcrumb-item.spec.ts
@@ -1,6 +1,12 @@
-import { axe, elementUpdated, fixture, getBaseElement, setAttribute } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getBaseElement,
+	setAttribute,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
-import type {Icon} from '../icon/icon';
+import type { Icon } from '../icon/icon';
 import { BreadcrumbItem } from './breadcrumb-item';
 import '.';
 import { breadcrumbItemDefinition } from './definition';
@@ -8,7 +14,6 @@ import { breadcrumbItemDefinition } from './definition';
 const COMPONENT_TAG = 'vwc-breadcrumb-item';
 
 describe('vwc-breadcrumb-item', () => {
-
 	let element: BreadcrumbItem;
 
 	beforeEach(async () => {
@@ -18,13 +23,15 @@ describe('vwc-breadcrumb-item', () => {
 	});
 
 	it('should be initialized as a vwc-breadcrumb-item', async () => {
-		expect(breadcrumbItemDefinition()).toBeInstanceOf(FoundationElementRegistry);
+		expect(breadcrumbItemDefinition()).toBeInstanceOf(
+			FoundationElementRegistry
+		);
 		expect(element).toBeInstanceOf(BreadcrumbItem);
 	});
 
 	it('should display only icon when no prop is set', function () {
 		const controlElement = getBaseElement(element);
-		const iconElementExists = Boolean(controlElement.querySelector(('vwc-icon')));
+		const iconElementExists = Boolean(controlElement.querySelector('vwc-icon'));
 		expect(iconElementExists).toEqual(true);
 	});
 
@@ -38,16 +45,18 @@ describe('vwc-breadcrumb-item', () => {
 
 	it('should set icon when "separator" is true', async function () {
 		const controlElement = getBaseElement(element);
-		const iconElementExistsWhenSeparatorTrue = Boolean(controlElement.querySelector(('vwc-icon')));
+		const iconElementExistsWhenSeparatorTrue = Boolean(
+			controlElement.querySelector('vwc-icon')
+		);
 
 		element.separator = false;
 		await elementUpdated(element);
-		const iconElementExistsWithSeparatorFalse = Boolean(controlElement.querySelector(('vwc-icon')));
+		const iconElementExistsWithSeparatorFalse = Boolean(
+			controlElement.querySelector('vwc-icon')
+		);
 
-		expect(iconElementExistsWithSeparatorFalse)
-			.toEqual(false);
-		expect(iconElementExistsWhenSeparatorTrue)
-			.toEqual(true);
+		expect(iconElementExistsWithSeparatorFalse).toEqual(false);
+		expect(iconElementExistsWhenSeparatorTrue).toEqual(true);
 	});
 
 	it('should set as an anchor and icon when set with "href"', async function () {
@@ -58,8 +67,8 @@ describe('vwc-breadcrumb-item', () => {
 		await elementUpdated(element);
 
 		const controlElement = getBaseElement(element);
-		const iconElement = controlElement.querySelector(('vwc-icon')) as Icon;
-		const anchorElement = controlElement.querySelector(('a'));
+		const iconElement = controlElement.querySelector('vwc-icon') as Icon;
+		const anchorElement = controlElement.querySelector('a');
 
 		expect(anchorElement?.textContent?.trim()).toEqual(breadcrumbText);
 		expect((anchorElement as any)?.href).toEqual(element.href);
@@ -67,7 +76,6 @@ describe('vwc-breadcrumb-item', () => {
 	});
 
 	describe('bindings', () => {
-
 		beforeEach(async function () {
 			element.href = '#';
 			element.text = 'stam';
@@ -83,16 +91,25 @@ describe('vwc-breadcrumb-item', () => {
 		}
 
 		it('should set aria labels', async function () {
-
 			const ARIA_PROPS = [
-				'atomic', 'busy', 'current',
-				'details', 'disabled', 'expanded',
-				'haspopup', 'hidden', 'invalid', 'keyshortcuts',
-				'label', 'live', 'relevant', 'roledescription'
+				'atomic',
+				'busy',
+				'current',
+				'details',
+				'disabled',
+				'expanded',
+				'haspopup',
+				'hidden',
+				'invalid',
+				'keyshortcuts',
+				'label',
+				'live',
+				'relevant',
+				'roledescription',
 			];
 
 			function setAriaLabelsOnElementObject() {
-				ARIA_PROPS.forEach(ariaProp => {
+				ARIA_PROPS.forEach((ariaProp) => {
 					const ariaPropOnObject = `aria${capitalizeFirstLetter(ariaProp)}`;
 					(element as any)[ariaPropOnObject] = ariaProp;
 				});
@@ -103,10 +120,12 @@ describe('vwc-breadcrumb-item', () => {
 			setAriaLabelsOnElementObject();
 			await elementUpdated(element);
 
-			ARIA_PROPS.forEach(ariaProp => {
+			ARIA_PROPS.forEach((ariaProp) => {
 				const ariaPropOnElement = `aria-${ariaProp}`;
 
-				expect(anchorElement?.getAttribute(ariaPropOnElement)).toEqual(ariaProp);
+				expect(anchorElement?.getAttribute(ariaPropOnElement)).toEqual(
+					ariaProp
+				);
 			});
 		});
 
diff --git a/libs/components/src/lib/breadcrumb-item/breadcrumb-item.template.ts b/libs/components/src/lib/breadcrumb-item/breadcrumb-item.template.ts
index aa128340aa..a37a163715 100644
--- a/libs/components/src/lib/breadcrumb-item/breadcrumb-item.template.ts
+++ b/libs/components/src/lib/breadcrumb-item/breadcrumb-item.template.ts
@@ -9,8 +9,7 @@ import { textAnchorTemplate } from '../text-anchor/text-anchor.template';
 import { Icon } from '../icon/icon';
 import type { BreadcrumbItem } from './breadcrumb-item';
 
-const getClasses = (_: BreadcrumbItem) =>
-	classNames('base');
+const getClasses = (_: BreadcrumbItem) => classNames('base');
 
 /**
  * The template for the BreadcrumbItem component.
@@ -21,19 +20,21 @@ const getClasses = (_: BreadcrumbItem) =>
 export const BreadcrumbItemTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
-) => ViewTemplate<BreadcrumbItem> =
-	(context: ElementDefinitionContext, definition: FoundationElementDefinition) => {
-		const iconTag = context.tagFor(Icon);
-
-		return html`
-	<div role="listitem" class="${getClasses}">
-		${when(x => x.text && !x.href,
-		html<BreadcrumbItem>`${x => x.text}`)}
-
-		${when(x => x.text && x.href && x.href.length > 0,
-		html<BreadcrumbItem>`${textAnchorTemplate(context, definition)}`)}
+) => ViewTemplate<BreadcrumbItem> = (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => {
+	const iconTag = context.tagFor(Icon);
 
-		${when(x => x.separator,
-		html<BreadcrumbItem>`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`)}
+	return html` <div role="listitem" class="${getClasses}">
+		${when((x) => x.text && !x.href, html<BreadcrumbItem>`${(x) => x.text}`)}
+		${when(
+			(x) => x.text && x.href && x.href.length > 0,
+			html<BreadcrumbItem>`${textAnchorTemplate(context, definition)}`
+		)}
+		${when(
+			(x) => x.separator,
+			html<BreadcrumbItem>`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
+		)}
 	</div>`;
-	};
\ No newline at end of file
+};
diff --git a/libs/components/src/lib/breadcrumb-item/breadcrumb-item.ts b/libs/components/src/lib/breadcrumb-item/breadcrumb-item.ts
index e497d08b92..a389bcf82c 100644
--- a/libs/components/src/lib/breadcrumb-item/breadcrumb-item.ts
+++ b/libs/components/src/lib/breadcrumb-item/breadcrumb-item.ts
@@ -1,12 +1,12 @@
-import {BreadcrumbItem as FastBreadcrumbItem} from '@microsoft/fast-foundation';
-import {attr} from '@microsoft/fast-element';
+import { BreadcrumbItem as FastBreadcrumbItem } from '@microsoft/fast-foundation';
+import { attr } from '@microsoft/fast-element';
 
 /**
  * @public
  * @component breadcrumb-item
  */
 export class BreadcrumbItem extends FastBreadcrumbItem {
-	@attr	text?: string;
+	@attr text?: string;
 
 	constructor() {
 		super();
diff --git a/libs/components/src/lib/breadcrumb-item/definition.ts b/libs/components/src/lib/breadcrumb-item/definition.ts
index 4341bdd740..453c4167a3 100644
--- a/libs/components/src/lib/breadcrumb-item/definition.ts
+++ b/libs/components/src/lib/breadcrumb-item/definition.ts
@@ -1,29 +1,32 @@
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { registerFactory} from '../../shared/design-system';
+import { registerFactory } from '../../shared/design-system';
 import { iconRegistries } from '../icon/definition';
 import styles from './breadcrumb-item.scss?inline';
 
-import {BreadcrumbItem} from './breadcrumb-item';
-import {BreadcrumbItemTemplate as template} from './breadcrumb-item.template';
-
+import { BreadcrumbItem } from './breadcrumb-item';
+import { BreadcrumbItemTemplate as template } from './breadcrumb-item.template';
 
 /**
  *
  * @internal
  */
-export const breadcrumbItemDefinition = BreadcrumbItem.compose<FoundationElementDefinition>({
-	baseName: 'breadcrumb-item',
-	template: template as any,
-	styles,
-	shadowOptions: {
-		delegatesFocus: true,
-	},
-});
+export const breadcrumbItemDefinition =
+	BreadcrumbItem.compose<FoundationElementDefinition>({
+		baseName: 'breadcrumb-item',
+		template: template as any,
+		styles,
+		shadowOptions: {
+			delegatesFocus: true,
+		},
+	});
 
 /**
  * @internal
  */
-export const breadcrumbItemRegistries = [breadcrumbItemDefinition(), ...iconRegistries];
+export const breadcrumbItemRegistries = [
+	breadcrumbItemDefinition(),
+	...iconRegistries,
+];
 
 /**
  * Registers the breadcrumb-item elements with the design system.
diff --git a/libs/components/src/lib/breadcrumb-item/index.ts b/libs/components/src/lib/breadcrumb-item/index.ts
index 7322c68fdc..5f68b45840 100644
--- a/libs/components/src/lib/breadcrumb-item/index.ts
+++ b/libs/components/src/lib/breadcrumb-item/index.ts
@@ -1,4 +1,3 @@
 import { registerBreadcrumbItem } from './definition';
 
-
 registerBreadcrumbItem();
diff --git a/libs/components/src/lib/breadcrumb-item/ui.test.ts b/libs/components/src/lib/breadcrumb-item/ui.test.ts
index 6b5b08c600..93e671a0b6 100644
--- a/libs/components/src/lib/breadcrumb-item/ui.test.ts
+++ b/libs/components/src/lib/breadcrumb-item/ui.test.ts
@@ -20,7 +20,6 @@ test('should show the component', async ({ page }: { page: Page }) => {
 
 	page.setViewportSize({ width: 500, height: 720 });
 
-
 	await loadComponents({
 		page,
 		components,
diff --git a/libs/components/src/lib/breadcrumb/breadcrumb.spec.ts b/libs/components/src/lib/breadcrumb/breadcrumb.spec.ts
index cce61ccd5c..d44d3d4c3d 100644
--- a/libs/components/src/lib/breadcrumb/breadcrumb.spec.ts
+++ b/libs/components/src/lib/breadcrumb/breadcrumb.spec.ts
@@ -1,6 +1,6 @@
 import { axe, elementUpdated, fixture, getBaseElement } from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
-import type {BreadcrumbItem} from '../breadcrumb-item/breadcrumb-item';
+import type { BreadcrumbItem } from '../breadcrumb-item/breadcrumb-item';
 import { Breadcrumb } from './breadcrumb';
 import '../breadcrumb-item';
 import '.';
@@ -32,7 +32,9 @@ describe('vwc-breadcrumb', () => {
 	});
 
 	it('should set separator true for all except the last item', function () {
-		const itemElements = element.querySelectorAll('vwc-breadcrumb-item') as unknown as BreadcrumbItem[];
+		const itemElements = element.querySelectorAll(
+			'vwc-breadcrumb-item'
+		) as unknown as BreadcrumbItem[];
 
 		expect(itemElements[0].separator).toEqual(true);
 		expect(itemElements[1].separator).toEqual(true);
@@ -46,31 +48,34 @@ describe('vwc-breadcrumb', () => {
 			 *
 			 */
 			function removeAElementFromBreadcrumbItem() {
-				newItem.shadowRoot?.querySelector('a')
-					?.remove();
+				newItem.shadowRoot?.querySelector('a')?.remove();
 			}
 			let newItem: BreadcrumbItem;
-	
+
 			beforeEach(async function () {
-				newItem = document.createElement('vwc-breadcrumb-item') as BreadcrumbItem;
+				newItem = document.createElement(
+					'vwc-breadcrumb-item'
+				) as BreadcrumbItem;
 				newItem.href = '#';
 				newItem.text = 'breadcrumb';
 				element.appendChild(newItem);
 				await elementUpdated(element);
 			});
-	
+
 			it('should set aria-current to last node internal a element if last node is href', async function () {
-				const ariaCurrent = newItem.shadowRoot?.querySelector('a')?.getAttribute('aria-current');
+				const ariaCurrent = newItem.shadowRoot
+					?.querySelector('a')
+					?.getAttribute('aria-current');
 				expect(ariaCurrent).toEqual('page');
 			});
-	
+
 			it('should set aria-current to last node if last node is href and doesnt have internal a element', async function () {
 				removeAElementFromBreadcrumbItem();
 				element.slottedBreadcrumbItemsChanged();
-	
+
 				expect(newItem.ariaCurrent).toEqual('page');
 			});
-	
+
 			it('should not set aria-current to last node if last node is not href', async function () {
 				removeAElementFromBreadcrumbItem();
 				newItem.removeAttribute('href');
@@ -82,20 +87,22 @@ describe('vwc-breadcrumb', () => {
 		it('should have a base element with an aria-label of "breadcrumbs"', () => {
 			const control = getBaseElement(element);
 			expect(control.getAttribute('aria-label')).toBe('breadcrumbs');
-
 		});
 
 		it('should wrap breadcrumb items in a list (role)', () => {
 			const control = getBaseElement(element);
 			expect(control.querySelector('[role="list"]')).toBeTruthy();
-
 		});
 
 		it('should pass html a11y test', async () => {
 			const children = Array.from(element.children)
-				.map(({ shadowRoot }) => shadowRoot?.innerHTML).join('');
-			const exposedHtmlString =  element.shadowRoot?.innerHTML.replace('<slot></slot>', children) as string;
-		
+				.map(({ shadowRoot }) => shadowRoot?.innerHTML)
+				.join('');
+			const exposedHtmlString = element.shadowRoot?.innerHTML.replace(
+				'<slot></slot>',
+				children
+			) as string;
+
 			expect(await axe(exposedHtmlString)).toHaveNoViolations();
 		});
 	});
diff --git a/libs/components/src/lib/breadcrumb/breadcrumb.template.ts b/libs/components/src/lib/breadcrumb/breadcrumb.template.ts
index 1593084f2c..de6725f214 100644
--- a/libs/components/src/lib/breadcrumb/breadcrumb.template.ts
+++ b/libs/components/src/lib/breadcrumb/breadcrumb.template.ts
@@ -1,7 +1,7 @@
-import {elements, html, slotted} from '@microsoft/fast-element';
-import type {ViewTemplate} from '@microsoft/fast-element';
-import type {FoundationElementTemplate} from '@microsoft/fast-foundation';
-import type {Breadcrumb} from './breadcrumb';
+import { elements, html, slotted } from '@microsoft/fast-element';
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { Breadcrumb } from './breadcrumb';
 
 /**
  * The template for the Breadcrumb component.
@@ -9,15 +9,17 @@ import type {Breadcrumb} from './breadcrumb';
  * @param context - element definition context
  * @public
  */
-export const breadcrumbTemplate: FoundationElementTemplate<ViewTemplate<Breadcrumb>> = () => html`
+export const breadcrumbTemplate: FoundationElementTemplate<
+	ViewTemplate<Breadcrumb>
+> = () => html`
 	<nav aria-label="breadcrumbs" class="base">
-    <div role="list" class="list">
-      <slot
-        ${slotted({
-		property: 'slottedBreadcrumbItems',
-		filter: elements()
-	})}
-      ></slot>
-    </div>
+		<div role="list" class="list">
+			<slot
+				${slotted({
+					property: 'slottedBreadcrumbItems',
+					filter: elements(),
+				})}
+			></slot>
+		</div>
 	</nav>
 `;
diff --git a/libs/components/src/lib/breadcrumb/breadcrumb.ts b/libs/components/src/lib/breadcrumb/breadcrumb.ts
index 0f01278574..299d88f063 100644
--- a/libs/components/src/lib/breadcrumb/breadcrumb.ts
+++ b/libs/components/src/lib/breadcrumb/breadcrumb.ts
@@ -5,6 +5,4 @@ import { Breadcrumb as FoundationElement } from '@microsoft/fast-foundation';
  * @component breadcrumb
  * @slot - Default slot.
  */
-export class Breadcrumb extends FoundationElement {
-
-}
+export class Breadcrumb extends FoundationElement {}
diff --git a/libs/components/src/lib/breadcrumb/definition.ts b/libs/components/src/lib/breadcrumb/definition.ts
index 0486b59987..75ac0d5f7f 100644
--- a/libs/components/src/lib/breadcrumb/definition.ts
+++ b/libs/components/src/lib/breadcrumb/definition.ts
@@ -8,11 +8,12 @@ import { Breadcrumb } from './breadcrumb';
  *
  * @internal
  */
-export const breadcrumbDefinition = Breadcrumb.compose<FoundationElementDefinition>({
-	baseName: 'breadcrumb',
-	template,
-	styles,
-});
+export const breadcrumbDefinition =
+	Breadcrumb.compose<FoundationElementDefinition>({
+		baseName: 'breadcrumb',
+		template,
+		styles,
+	});
 
 /**
  * @internal
diff --git a/libs/components/src/lib/breadcrumb/index.ts b/libs/components/src/lib/breadcrumb/index.ts
index 7d6dc9f21f..2b04e5d5af 100644
--- a/libs/components/src/lib/breadcrumb/index.ts
+++ b/libs/components/src/lib/breadcrumb/index.ts
@@ -1,4 +1,3 @@
 import { registerBreadcrumb } from './definition';
 
-
 registerBreadcrumb();
diff --git a/libs/components/src/lib/breadcrumb/ui.test.ts b/libs/components/src/lib/breadcrumb/ui.test.ts
index 2432e95bc7..fce1867fe8 100644
--- a/libs/components/src/lib/breadcrumb/ui.test.ts
+++ b/libs/components/src/lib/breadcrumb/ui.test.ts
@@ -20,7 +20,6 @@ test('should show the component', async ({ page }: { page: Page }) => {
 
 	page.setViewportSize({ width: 500, height: 720 });
 
-
 	await loadComponents({
 		page,
 		components,
diff --git a/libs/components/src/lib/button/button.spec.ts b/libs/components/src/lib/button/button.spec.ts
index bad5f5ab9d..e7c7a55089 100644
--- a/libs/components/src/lib/button/button.spec.ts
+++ b/libs/components/src/lib/button/button.spec.ts
@@ -1,4 +1,10 @@
-import { axe, elementUpdated, fixture, getControlElement, setAttribute } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getControlElement,
+	setAttribute,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { Icon } from '../icon/icon';
 import { ProgressRing } from '../progress-ring/progress-ring';
@@ -19,7 +25,9 @@ describe('vwc-button', () => {
 	});
 
 	beforeEach(async () => {
-		element = await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`) as Button;
+		element = (await fixture(
+			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
+		)) as Button;
 	});
 
 	describe('basic', () => {
@@ -40,7 +48,9 @@ describe('vwc-button', () => {
 
 	describe('icon', () => {
 		it('should have an icon slot', async () => {
-			expect(element.shadowRoot?.querySelector('slot[name="icon"]')).toBeTruthy();
+			expect(
+				element.shadowRoot?.querySelector('slot[name="icon"]')
+			).toBeTruthy();
 		});
 
 		it('adds an icon to the button', async () => {
@@ -58,7 +68,7 @@ describe('vwc-button', () => {
 			await elementUpdated(element);
 
 			const trailingIcon = element.shadowRoot?.querySelector(
-				`.icon-trailing ${ICON_SELECTOR}`,
+				`.icon-trailing ${ICON_SELECTOR}`
 			);
 			expect(trailingIcon).toBeInstanceOf(HTMLElement);
 		});
@@ -69,7 +79,9 @@ describe('vwc-button', () => {
 			element.pending = true;
 			await elementUpdated(element);
 
-			const progress = element.shadowRoot?.querySelector(PROGRESS_SELECTOR) as ProgressRing;
+			const progress = element.shadowRoot?.querySelector(
+				PROGRESS_SELECTOR
+			) as ProgressRing;
 			expect(progress).toBeInstanceOf(ProgressRing);
 			expect(progress.size).toEqual('-5');
 		});
@@ -79,7 +91,9 @@ describe('vwc-button', () => {
 			element.pending = true;
 			await elementUpdated(element);
 
-			const progress = element.shadowRoot?.querySelector(PROGRESS_SELECTOR) as ProgressRing;
+			const progress = element.shadowRoot?.querySelector(
+				PROGRESS_SELECTOR
+			) as ProgressRing;
 			expect(progress).toBeNull();
 		});
 
@@ -129,7 +143,9 @@ describe('vwc-button', () => {
 			(element as any).connotation = connotation;
 			await elementUpdated(element);
 
-			const control = element.shadowRoot?.querySelector(`.control.connotation-${connotation}`);
+			const control = element.shadowRoot?.querySelector(
+				`.control.connotation-${connotation}`
+			);
 			expect(control).toBeInstanceOf(Element);
 		});
 	});
@@ -140,7 +156,9 @@ describe('vwc-button', () => {
 			(element as any).shape = shape;
 			await elementUpdated(element);
 
-			const control = element.shadowRoot?.querySelector(`.control.shape-${shape}`);
+			const control = element.shadowRoot?.querySelector(
+				`.control.shape-${shape}`
+			);
 			expect(control).toBeInstanceOf(Element);
 		});
 	});
@@ -151,7 +169,9 @@ describe('vwc-button', () => {
 			(element as any).appearance = appearance;
 			await elementUpdated(element);
 
-			const control = element.shadowRoot?.querySelector(`.control.appearance-${appearance}`);
+			const control = element.shadowRoot?.querySelector(
+				`.control.appearance-${appearance}`
+			);
 			expect(control).toBeInstanceOf(Element);
 		});
 	});
@@ -162,14 +182,17 @@ describe('vwc-button', () => {
 			(element as any).size = size;
 			await elementUpdated(element);
 
-			const control = element.shadowRoot?.querySelector(`.control.size-${size}`);
+			const control = element.shadowRoot?.querySelector(
+				`.control.size-${size}`
+			);
 			expect(control?.classList.contains(`size-${size}`)).toBeTruthy();
 		});
 	});
 
 	describe('icon-only', () => {
 		it('sets correct internal icon-only style', async () => {
-			const getControlIconOnly = () => element.shadowRoot?.querySelector('.control.icon-only');
+			const getControlIconOnly = () =>
+				element.shadowRoot?.querySelector('.control.icon-only');
 			const controlIconOnlyBefore = getControlIconOnly();
 
 			element.icon = 'home';
@@ -181,20 +204,30 @@ describe('vwc-button', () => {
 		});
 
 		it('should set icon-only class if slot name="icon" is slotted', async () => {
-			const iconOnlyClassExistsWithoutSlot = getControlElement(element).classList.contains('icon-only');
+			const iconOnlyClassExistsWithoutSlot =
+				getControlElement(element).classList.contains('icon-only');
 			const slottedElement = document.createElement('span');
 			slottedElement.slot = 'icon';
 			element.appendChild(slottedElement);
 			await elementUpdated(element);
 
 			expect(iconOnlyClassExistsWithoutSlot).toEqual(false);
-			expect(getControlElement(element).classList.contains('icon-only')).toEqual(true);
+			expect(
+				getControlElement(element).classList.contains('icon-only')
+			).toEqual(true);
 		});
-
 	});
 
-
-	describe.each(['href', 'hreflang', 'download', 'ping', 'referrerpolicy', 'rel', 'target', 'type'])('%s attribute', (attribute) => {
+	describe.each([
+		'href',
+		'hreflang',
+		'download',
+		'ping',
+		'referrerpolicy',
+		'rel',
+		'target',
+		'type',
+	])('%s attribute', (attribute) => {
 		beforeEach(async () => {
 			element.href = '/somewhere';
 			await elementUpdated(element);
@@ -204,7 +237,9 @@ describe('vwc-button', () => {
 			const text = 'link';
 			await setAttribute(element, attribute, text);
 
-			expect(element.shadowRoot?.querySelector('a')?.getAttribute(attribute)).toEqual(text);
+			expect(
+				element.shadowRoot?.querySelector('a')?.getAttribute(attribute)
+			).toEqual(text);
 		});
 	});
 
@@ -215,7 +250,9 @@ describe('vwc-button', () => {
 			element.toggleAttribute('disabled', true);
 			await elementUpdated(element);
 
-			const control = element.shadowRoot?.querySelector(`.control.appearance-${appearance}.disabled`);
+			const control = element.shadowRoot?.querySelector(
+				`.control.appearance-${appearance}.disabled`
+			);
 			expect(control).toBeInstanceOf(Element);
 		});
 	});
@@ -224,18 +261,16 @@ describe('vwc-button', () => {
 			const titleText = 'close';
 			element.title = titleText;
 			await elementUpdated(element);
-			expect(element.getAttribute('title'))
-				.toEqual(titleText);
-			expect(getControlElement(element).getAttribute('title'))
-				.toEqual(titleText);
+			expect(element.getAttribute('title')).toEqual(titleText);
+			expect(getControlElement(element).getAttribute('title')).toEqual(
+				titleText
+			);
 		});
 		it('should remove title on the button if not set or empty', async () => {
 			element.title = '';
 			await elementUpdated(element);
-			expect(element.hasAttribute('title'))
-				.toEqual(false);
-			expect(getControlElement(element).hasAttribute('title'))
-				.toEqual(false);
+			expect(element.hasAttribute('title')).toEqual(false);
+			expect(getControlElement(element).hasAttribute('title')).toEqual(false);
 		});
 	});
 	describe('a11y', function () {
@@ -243,8 +278,7 @@ describe('vwc-button', () => {
 			const ariaLabel = 'close';
 			element.ariaLabel = ariaLabel;
 			await elementUpdated(element);
-			expect(element.getAttribute('aria-label'))
-				.toEqual(ariaLabel);
+			expect(element.getAttribute('aria-label')).toEqual(ariaLabel);
 		});
 
 		it('should pass html a11y test', async () => {
diff --git a/libs/components/src/lib/button/button.template.ts b/libs/components/src/lib/button/button.template.ts
index 54b079433d..84d30bf214 100644
--- a/libs/components/src/lib/button/button.template.ts
+++ b/libs/components/src/lib/button/button.template.ts
@@ -1,32 +1,55 @@
 import { ViewTemplate, when } from '@microsoft/fast-element';
 import { html, ref } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { ProgressRing } from '../progress-ring/progress-ring';
 import { Size } from '../enums';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import type { Button, ButtonAppearance, ButtonSize } from './button';
 
-
-const getAppearanceClassName = (appearance: ButtonAppearance, disabled: boolean) => {
+const getAppearanceClassName = (
+	appearance: ButtonAppearance,
+	disabled: boolean
+) => {
 	let className = `appearance-${appearance}`;
 	disabled && (className += ' disabled');
 	return className;
 };
 
 const getClasses = ({
-	connotation, appearance, shape, iconTrailing, icon, label, disabled, stacked, size, iconSlottedContent, ariaExpanded, active
-}: Button) => classNames(
-	'control',
-	[`connotation-${connotation}`, Boolean(connotation)],
-	[getAppearanceClassName(appearance as ButtonAppearance, disabled), Boolean(appearance)],
-	[`shape-${shape}`, Boolean(shape)],
-	[`size-${size}`, Boolean(size)],
-	['icon-only', !label && !!(icon || iconSlottedContent?.length)],
-	['icon-trailing', iconTrailing],
-	['stacked', Boolean(stacked)],
-	['active', ariaExpanded === 'true' || active]
-);
+	connotation,
+	appearance,
+	shape,
+	iconTrailing,
+	icon,
+	label,
+	disabled,
+	stacked,
+	size,
+	iconSlottedContent,
+	ariaExpanded,
+	active,
+}: Button) =>
+	classNames(
+		'control',
+		[`connotation-${connotation}`, Boolean(connotation)],
+		[
+			getAppearanceClassName(appearance as ButtonAppearance, disabled),
+			Boolean(appearance),
+		],
+		[`shape-${shape}`, Boolean(shape)],
+		[`size-${size}`, Boolean(size)],
+		['icon-only', !label && !!(icon || iconSlottedContent?.length)],
+		['icon-trailing', iconTrailing],
+		['stacked', Boolean(stacked)],
+		['active', ariaExpanded === 'true' || active]
+	);
 
 function renderIconOrPending(
 	context: ElementDefinitionContext,
@@ -42,7 +65,6 @@ function renderIconOrPending(
 			[Size.Expanded]: '-4',
 		};
 		return html`<span class="icon pending"><${progressTag} size="${progressSize[size]}"></${progressTag}></span>`;
-
 	} else {
 		const affixIconTemplate = affixIconTemplateFactory(context);
 		return affixIconTemplate(icon, IconWrapper.Slot);
@@ -50,71 +72,78 @@ function renderIconOrPending(
 }
 
 function renderButtonContent(context: ElementDefinitionContext) {
-	return html`
-		<button
-			class="${getClasses}"
-			?autofocus="${(x) => x.autofocus}"
-			?disabled="${(x) => x.disabled || x.pending}"
-			form="${(x) => x.formId}"
-			formaction="${(x) => x.formaction}"
-			formenctype="${(x) => x.formenctype}"
-			formmethod="${(x) => x.formmethod}"
-			formnovalidate="${(x) => x.formnovalidate}"
-			formtarget="${(x) => x.formtarget}"
-			name="${(x) => x.name}"
-			type="${(x) => x.type}"
-			value="${(x) => x.value}"
-			aria-atomic="${(x) => x.ariaAtomic}"
-			aria-busy="${(x) => x.ariaBusy}"
-			aria-current="${(x) => x.ariaCurrent}"
-			aria-details="${(x) => x.ariaDetails}"
-			aria-disabled="${(x) => x.ariaDisabled}"
-			aria-expanded="${(x) => x.ariaExpanded}"
-			aria-haspopup="${(x) => x.ariaHaspopup}"
-			aria-hidden="${(x) => x.ariaHidden}"
-			aria-invalid="${(x) => x.ariaInvalid}"
-			aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
-			aria-label="${(x) => x.ariaLabel}"
-			aria-live="${(x) => x.ariaLive}"
-			aria-pressed="${(x) => x.ariaPressed}"
-			aria-relevant="${(x) => x.ariaRelevant}"
-			aria-roledescription="${(x) => x.ariaRoledescription}"
-			title="${x => x.title}"
-			${ref('control')}>
-		${x => renderIconOrPending(context, x.icon, x.pending, x.size)}
-		${when(x => x.label, html`<span class="text" role="presentation">${(x) => x.label}</span>`)}
+	return html` <button
+		class="${getClasses}"
+		?autofocus="${(x) => x.autofocus}"
+		?disabled="${(x) => x.disabled || x.pending}"
+		form="${(x) => x.formId}"
+		formaction="${(x) => x.formaction}"
+		formenctype="${(x) => x.formenctype}"
+		formmethod="${(x) => x.formmethod}"
+		formnovalidate="${(x) => x.formnovalidate}"
+		formtarget="${(x) => x.formtarget}"
+		name="${(x) => x.name}"
+		type="${(x) => x.type}"
+		value="${(x) => x.value}"
+		aria-atomic="${(x) => x.ariaAtomic}"
+		aria-busy="${(x) => x.ariaBusy}"
+		aria-current="${(x) => x.ariaCurrent}"
+		aria-details="${(x) => x.ariaDetails}"
+		aria-disabled="${(x) => x.ariaDisabled}"
+		aria-expanded="${(x) => x.ariaExpanded}"
+		aria-haspopup="${(x) => x.ariaHaspopup}"
+		aria-hidden="${(x) => x.ariaHidden}"
+		aria-invalid="${(x) => x.ariaInvalid}"
+		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+		aria-label="${(x) => x.ariaLabel}"
+		aria-live="${(x) => x.ariaLive}"
+		aria-pressed="${(x) => x.ariaPressed}"
+		aria-relevant="${(x) => x.ariaRelevant}"
+		aria-roledescription="${(x) => x.ariaRoledescription}"
+		title="${(x) => x.title}"
+		${ref('control')}
+	>
+		${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
+		${when(
+			(x) => x.label,
+			html`<span class="text" role="presentation">${(x) => x.label}</span>`
+		)}
 	</button>`;
 }
 
 function renderAnchorContent(context: ElementDefinitionContext) {
 	return html`<a
 		class="${getClasses}"
-		download="${x => x.download}"
-		href="${x => x.href}"
-		hreflang="${x => x.hreflang}"
-		ping="${x => x.ping}"
-		referrerpolicy="${x => x.referrerpolicy}"
-		rel="${x => x.rel}"
-		target="${x => x.target}"
-		type="${x => x.type}"
-		aria-atomic="${x => x.ariaAtomic}"
-		aria-busy="${x => x.ariaBusy}"
-		aria-current="${x => x.ariaCurrent}"
-		aria-details="${x => x.ariaDetails}"
-		aria-disabled="${x => x.ariaDisabled}"
-		aria-errormessage="${x => x.ariaErrormessage}"
-		aria-expanded="${x => x.ariaExpanded}"
-		aria-haspopup="${x => x.ariaHaspopup}"
-		aria-hidden="${x => x.ariaHidden}"
-		aria-invalid="${x => x.ariaInvalid}"
-		aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-		aria-label="${x => x.ariaLabel}"
-		aria-live="${x => x.ariaLive}"
-		aria-relevant="${x => x.ariaRelevant}"
-		aria-roledescription="${x => x.ariaRoledescription}"
-		${ref('control')}>
-	${x => renderIconOrPending(context, x.icon, x.pending, x.size)}
-	${when(x => x.label, html`<span class="text" role="presentation">${(x) => x.label}</span>`)}
+		download="${(x) => x.download}"
+		href="${(x) => x.href}"
+		hreflang="${(x) => x.hreflang}"
+		ping="${(x) => x.ping}"
+		referrerpolicy="${(x) => x.referrerpolicy}"
+		rel="${(x) => x.rel}"
+		target="${(x) => x.target}"
+		type="${(x) => x.type}"
+		aria-atomic="${(x) => x.ariaAtomic}"
+		aria-busy="${(x) => x.ariaBusy}"
+		aria-current="${(x) => x.ariaCurrent}"
+		aria-details="${(x) => x.ariaDetails}"
+		aria-disabled="${(x) => x.ariaDisabled}"
+		aria-errormessage="${(x) => x.ariaErrormessage}"
+		aria-expanded="${(x) => x.ariaExpanded}"
+		aria-haspopup="${(x) => x.ariaHaspopup}"
+		aria-hidden="${(x) => x.ariaHidden}"
+		aria-invalid="${(x) => x.ariaInvalid}"
+		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+		aria-label="${(x) => x.ariaLabel}"
+		aria-live="${(x) => x.ariaLive}"
+		aria-relevant="${(x) => x.ariaRelevant}"
+		aria-roledescription="${(x) => x.ariaRoledescription}"
+		${ref('control')}
+	>
+		${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
+		${when(
+			(x) => x.label,
+			html`<span class="text" role="presentation">${(x) => x.label}</span>`
+		)}
 	</a>`;
 }
 
@@ -128,10 +157,8 @@ export const buttonTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
 ) => ViewTemplate<Button> = (context: ElementDefinitionContext) => {
-
-	return html`
-		<template role="presentation">
-			${when(x => !x.href, html<Button>`${renderButtonContent(context)}`)}
-			${when(x => x.href, html<Button>`${renderAnchorContent(context)}`)}
-		</template>`;
+	return html` <template role="presentation">
+		${when((x) => !x.href, html<Button>`${renderButtonContent(context)}`)}
+		${when((x) => x.href, html<Button>`${renderAnchorContent(context)}`)}
+	</template>`;
 };
diff --git a/libs/components/src/lib/button/button.ts b/libs/components/src/lib/button/button.ts
index fc18c4fc5e..80b7a819b6 100644
--- a/libs/components/src/lib/button/button.ts
+++ b/libs/components/src/lib/button/button.ts
@@ -1,9 +1,10 @@
-import { applyMixins, Button as FoundationButton } from '@microsoft/fast-foundation';
+import {
+	applyMixins,
+	Button as FoundationButton,
+} from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
 
-import type {
-	Appearance, Connotation, Shape, Size
-} from '../enums.js';
+import type { Appearance, Connotation, Shape, Size } from '../enums.js';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 
 /**
@@ -11,19 +12,20 @@ import { AffixIconWithTrailing } from '../../shared/patterns/affix';
  *
  * @public
  */
-export type ButtonConnotation = Extract<Connotation,
-| Connotation.Accent
-| Connotation.CTA
-| Connotation.Success
-| Connotation.Alert>;
+export type ButtonConnotation = Extract<
+	Connotation,
+	Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert
+>;
 
 /**
  * Types of button appearance.
  *
  * @public
  */
-export type ButtonAppearance = Extract<Appearance,
-Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
+export type ButtonAppearance = Extract<
+	Appearance,
+	Appearance.Filled | Appearance.Outlined | Appearance.Ghost
+>;
 
 /**
  * Types of button shape.
@@ -37,7 +39,10 @@ export type ButtonShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
  *
  * @public
  */
-export type ButtonSize = Extract<Size, Size.SuperCondensed | Size.Condensed | Size.Normal | Size.Expanded>;
+export type ButtonSize = Extract<
+	Size,
+	Size.SuperCondensed | Size.Condensed | Size.Normal | Size.Expanded
+>;
 
 /**
  * @public
@@ -45,7 +50,12 @@ export type ButtonSize = Extract<Size, Size.SuperCondensed | Size.Condensed | Si
  * @slot icon - Add an icon to the component.
  */
 export class Button extends FoundationButton {
-	@attr({ converter: { fromView: (value) => value || null, toView: (value) => value || null } })
+	@attr({
+		converter: {
+			fromView: (value) => value || null,
+			toView: (value) => value || null,
+		},
+	})
 	override title: string;
 	/**
 	 * The connotation the button should have.
@@ -93,7 +103,8 @@ export class Button extends FoundationButton {
 	@attr({
 		mode: 'boolean',
 		attribute: 'stacked',
-	}) stacked = false;
+	})
+	stacked = false;
 
 	/**
 	 * Displays the button in pending state.
@@ -105,7 +116,8 @@ export class Button extends FoundationButton {
 	@attr({
 		mode: 'boolean',
 		attribute: 'pending',
-	}) pending = false;
+	})
+	pending = false;
 
 	/**
 	 * Displays the button in active state.
@@ -117,7 +129,8 @@ export class Button extends FoundationButton {
 	@attr({
 		mode: 'boolean',
 		attribute: 'active',
-	}) active = false;
+	})
+	active = false;
 
 	/**
 	 * Indicates the button's label.
@@ -197,5 +210,5 @@ export class Button extends FoundationButton {
 	}
 }
 
-export interface Button extends AffixIconWithTrailing { }
+export interface Button extends AffixIconWithTrailing {}
 applyMixins(Button, AffixIconWithTrailing);
diff --git a/libs/components/src/lib/button/definition.ts b/libs/components/src/lib/button/definition.ts
index ee5d8eeeec..18555ca9e5 100644
--- a/libs/components/src/lib/button/definition.ts
+++ b/libs/components/src/lib/button/definition.ts
@@ -9,7 +9,12 @@ import { Button } from './button';
 import styles from './button.scss?inline';
 import { buttonTemplate as template } from './button.template';
 
-export type { ButtonAppearance, ButtonConnotation, ButtonShape, ButtonSize } from './button';
+export type {
+	ButtonAppearance,
+	ButtonConnotation,
+	ButtonShape,
+	ButtonSize,
+} from './button';
 
 /**
  *
@@ -25,11 +30,14 @@ export const buttonDefinition = Button.compose<FoundationElementDefinition>({
 	},
 });
 
-
 /**
  * @internal
  */
-export const buttonRegistries = [buttonDefinition(), ...iconRegistries, ...progressRingRegistries];
+export const buttonRegistries = [
+	buttonDefinition(),
+	...iconRegistries,
+	...progressRingRegistries,
+];
 
 /**
  * Registers the button elements with the design system.
diff --git a/libs/components/src/lib/button/index.ts b/libs/components/src/lib/button/index.ts
index 21f099aa08..bf9bb12a49 100644
--- a/libs/components/src/lib/button/index.ts
+++ b/libs/components/src/lib/button/index.ts
@@ -1,4 +1,3 @@
 import { registerButton } from './definition';
 
-
 registerButton();
diff --git a/libs/components/src/lib/button/ui.test.ts b/libs/components/src/lib/button/ui.test.ts
index 601baa7857..978dc1c668 100644
--- a/libs/components/src/lib/button/ui.test.ts
+++ b/libs/components/src/lib/button/ui.test.ts
@@ -3,7 +3,7 @@ import type { Page } from '@playwright/test';
 import type { ProgressRing } from '../progress-ring/progress-ring';
 import {
 	loadComponents,
-	loadTemplate
+	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 import type { Button } from './button';
 
@@ -143,9 +143,13 @@ test('should show the component', async ({ page }: { page: Page }) => {
 	const testWrapper = await page.$('#wrapper');
 
 	await page.evaluate(() => {
-		const pendingButtons = (document.querySelectorAll('vwc-button[pending]') as NodeListOf<Button>);
-		pendingButtons.forEach(button => {
-			const indicator = button.shadowRoot?.querySelector('vwc-progress-ring') as ProgressRing;
+		const pendingButtons = document.querySelectorAll(
+			'vwc-button[pending]'
+		) as NodeListOf<Button>;
+		pendingButtons.forEach((button) => {
+			const indicator = button.shadowRoot?.querySelector(
+				'vwc-progress-ring'
+			) as ProgressRing;
 			if (indicator) indicator.value = 66;
 		});
 	});
@@ -154,8 +158,7 @@ test('should show the component', async ({ page }: { page: Page }) => {
 
 	await page.waitForLoadState('networkidle');
 
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/button.png',
-		);
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/button.png'
+	);
 });
diff --git a/libs/components/src/lib/calendar-event/calendar-event.spec.ts b/libs/components/src/lib/calendar-event/calendar-event.spec.ts
index 5a62d6e60d..9a588dcff5 100644
--- a/libs/components/src/lib/calendar-event/calendar-event.spec.ts
+++ b/libs/components/src/lib/calendar-event/calendar-event.spec.ts
@@ -11,8 +11,9 @@ describe('vwc-calendar-event', () => {
 
 	const getCssPropertyValue = (prop: string) => {
 		const el = element.shadowRoot?.querySelector('.base') as HTMLElement;
-		return getComputedStyle(el)
-			.getPropertyValue(`--vvd-calendar-event--${prop}`);
+		return getComputedStyle(el).getPropertyValue(
+			`--vvd-calendar-event--${prop}`
+		);
 	};
 
 	beforeEach(async () => {
@@ -23,7 +24,9 @@ describe('vwc-calendar-event', () => {
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-calendar-event', async () => {
-			expect(calendarEventDefinition()).toBeInstanceOf(FoundationElementRegistry);
+			expect(calendarEventDefinition()).toBeInstanceOf(
+				FoundationElementRegistry
+			);
 			expect(element).toBeInstanceOf(CalendarEvent);
 			expect(element.heading).toBeUndefined();
 			expect(element.description).toBeUndefined();
@@ -35,7 +38,6 @@ describe('vwc-calendar-event', () => {
 	});
 
 	describe('API members', () => {
-
 		it('should set heading to node', async () => {
 			const heading = 'heading';
 			element.heading = heading;
@@ -75,7 +77,9 @@ describe('vwc-calendar-event', () => {
 			element.overlapCount = overlapCount;
 			await elementUpdated(element);
 
-			expect(getCssPropertyValue('overlap-count')).toEqual(String(overlapCount));
+			expect(getCssPropertyValue('overlap-count')).toEqual(
+				String(overlapCount)
+			);
 		});
 
 		it('should set correct internal connotation style', async () => {
@@ -83,7 +87,9 @@ describe('vwc-calendar-event', () => {
 			(element as any).connotation = connotation;
 			await elementUpdated(element);
 
-			const base = element.shadowRoot?.querySelector(`.base.connotation-${connotation}`);
+			const base = element.shadowRoot?.querySelector(
+				`.base.connotation-${connotation}`
+			);
 			expect(base).toBeInstanceOf(Element);
 		});
 	});
diff --git a/libs/components/src/lib/calendar-event/calendar-event.template.ts b/libs/components/src/lib/calendar-event/calendar-event.template.ts
index bc983f59a5..4a955d6d9f 100644
--- a/libs/components/src/lib/calendar-event/calendar-event.template.ts
+++ b/libs/components/src/lib/calendar-event/calendar-event.template.ts
@@ -7,26 +7,27 @@ import type {
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { CalendarEvent } from './calendar-event';
 
-const getClasses = ({
-	connotation, appearance
-}: CalendarEvent) => classNames('base',
-	[`connotation-${connotation}`, Boolean(connotation)],
-	[`appearance-${appearance}`, Boolean(appearance)],
-);
+const getClasses = ({ connotation, appearance }: CalendarEvent) =>
+	classNames(
+		'base',
+		[`connotation-${connotation}`, Boolean(connotation)],
+		[`appearance-${appearance}`, Boolean(appearance)]
+	);
 
 const getStyles = ({ start, duration, overlapCount }: CalendarEvent) => {
 	const stylesObj = {
-		...overlapCount && {'--vvd-calendar-event--overlap-count': overlapCount},
-		...start && {'--vvd-calendar-event--start': start},
-		...duration && {'--vvd-calendar-event--duration': duration}
+		...(overlapCount && {
+			'--vvd-calendar-event--overlap-count': overlapCount,
+		}),
+		...(start && { '--vvd-calendar-event--start': start }),
+		...(duration && { '--vvd-calendar-event--duration': duration }),
 	};
 
 	return Object.entries(stylesObj)
-		.map(entry => entry.join(':'))
+		.map((entry) => entry.join(':'))
 		.join(';');
 };
 
-
 /**
  * The template for the CalendarEvent component.
  *
@@ -36,13 +37,12 @@ const getStyles = ({ start, duration, overlapCount }: CalendarEvent) => {
 export const CalendarEventTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
-) => ViewTemplate<CalendarEvent> = () => html`
-<div
-  style="${getStyles}"
-  class="${getClasses}"
-  role="button"
-  tabindex="0"
+) => ViewTemplate<CalendarEvent> = () => html` <div
+	style="${getStyles}"
+	class="${getClasses}"
+	role="button"
+	tabindex="0"
 >
-  ${when(x => x.heading, html`<h2><strong>${x => x.heading}</strong></h2>`)}
-  ${when(x => x.description, html`<p>${x => x.description}</p>`)}
+	${when((x) => x.heading, html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
+	${when((x) => x.description, html`<p>${(x) => x.description}</p>`)}
 </div>`;
diff --git a/libs/components/src/lib/calendar-event/calendar-event.ts b/libs/components/src/lib/calendar-event/calendar-event.ts
index 7217c0666e..c4dd5b9fe3 100644
--- a/libs/components/src/lib/calendar-event/calendar-event.ts
+++ b/libs/components/src/lib/calendar-event/calendar-event.ts
@@ -7,22 +7,26 @@ import type { Appearance, Connotation } from '../enums';
  *
  * @public
  */
-export type CalendarEventConnotation = Extract<Connotation,
-| Connotation.Accent
-| Connotation.CTA
-| Connotation.Success
-| Connotation.Alert
-| Connotation.Warning
-| Connotation.Information
-| Connotation.Announcement>;
+export type CalendarEventConnotation = Extract<
+	Connotation,
+	| Connotation.Accent
+	| Connotation.CTA
+	| Connotation.Success
+	| Connotation.Alert
+	| Connotation.Warning
+	| Connotation.Information
+	| Connotation.Announcement
+>;
 
 /**
  * Types of calendar event appearance.
  *
  * @public
  */
-export type CalendarEventAppearance = Extract<Appearance,
-Appearance.Filled | Appearance.Duotone | Appearance.Subtle>;
+export type CalendarEventAppearance = Extract<
+	Appearance,
+	Appearance.Filled | Appearance.Duotone | Appearance.Subtle
+>;
 
 /**
  * @public
@@ -67,22 +71,21 @@ export class CalendarEvent extends FoundationElement {
 	 * @public
 	 */
 	@attr({ converter: nullableNumberConverter, attribute: 'overlap-count' })
-		overlapCount?: number;
+	overlapCount?: number;
 
 	/**
 	 * time of day event starts
 	 *
 	 * @public
 	 */
-	@attr({ converter: nullableNumberConverter  })
-		start?: number; // TODO should be converted to allowed range
+	@attr({ converter: nullableNumberConverter })
+	start?: number; // TODO should be converted to allowed range
 
 	/**
 	 * event's time duration in hours
 	 *
 	 * @public
 	 */
-	@attr({ converter: nullableNumberConverter  })
-		duration?: number; // TODO should be converted to allowed range
-
+	@attr({ converter: nullableNumberConverter })
+	duration?: number; // TODO should be converted to allowed range
 }
diff --git a/libs/components/src/lib/calendar-event/definition.ts b/libs/components/src/lib/calendar-event/definition.ts
index 650d83a1e2..71394d7f90 100644
--- a/libs/components/src/lib/calendar-event/definition.ts
+++ b/libs/components/src/lib/calendar-event/definition.ts
@@ -5,7 +5,10 @@ import styles from './calendar-event.scss?inline';
 import { CalendarEvent } from './calendar-event';
 import { CalendarEventTemplate as template } from './calendar-event.template';
 
-export type { CalendarEventAppearance, CalendarEventConnotation } from './calendar-event';
+export type {
+	CalendarEventAppearance,
+	CalendarEventConnotation,
+} from './calendar-event';
 
 /**
  * The calendar-event element is a custom element that is used to display a single event in a calendar.
@@ -18,8 +21,8 @@ export const calendarEventDefinition =
 		template: template as any,
 		styles,
 		shadowOptions: {
-			delegatesFocus: true
-		}
+			delegatesFocus: true,
+		},
 	});
 
 /**
diff --git a/libs/components/src/lib/calendar-event/index.ts b/libs/components/src/lib/calendar-event/index.ts
index 41f64d5e4c..91f2990d9c 100644
--- a/libs/components/src/lib/calendar-event/index.ts
+++ b/libs/components/src/lib/calendar-event/index.ts
@@ -1,4 +1,3 @@
 import { registerCalendarEvent } from './definition';
 
-
 registerCalendarEvent();
diff --git a/libs/components/src/lib/calendar/calendar.spec.ts b/libs/components/src/lib/calendar/calendar.spec.ts
index fc6f355ab4..5a60a81b56 100644
--- a/libs/components/src/lib/calendar/calendar.spec.ts
+++ b/libs/components/src/lib/calendar/calendar.spec.ts
@@ -30,7 +30,7 @@ describe('vwc-calendar', () => {
 	});
 
 	describe('datetime', () => {
-		it('should show recent monday as first day of \'2022-01-01\' week', async () => {
+		it("should show recent monday as first day of '2022-01-01' week", async () => {
 			const date = '2022-01-01';
 
 			element.datetime = date;
@@ -52,11 +52,11 @@ describe('vwc-calendar', () => {
 
 			const today = getValidDateString(new Date());
 			const sunday = getSundayOfWeek(today);
-			
+
 			expect(firstColumnDate).toEqual(sunday);
 		});
 
-		it('should show recent sunday as first day of \'2022-01-01\' week', async () => {
+		it("should show recent sunday as first day of '2022-01-01' week", async () => {
 			element.startDay = 'sunday';
 			const date = '2022-01-01';
 
@@ -78,7 +78,9 @@ describe('vwc-calendar', () => {
 
 			await elementUpdated(element);
 
-			const firstColumnDate = element.shadowRoot?.querySelector('.column-headers > :first-child small') as HTMLElement;
+			const firstColumnDate = element.shadowRoot?.querySelector(
+				'.column-headers > :first-child small'
+			) as HTMLElement;
 
 			expect(firstColumnDate.textContent?.trim()).toEqual('יום ב׳');
 		});
@@ -90,10 +92,14 @@ describe('vwc-calendar', () => {
 
 			await elementUpdated(element);
 
-			const hour13th = element.shadowRoot?.querySelector('.row-headers > :nth-child(13)') as HTMLSpanElement;
+			const hour13th = element.shadowRoot?.querySelector(
+				'.row-headers > :nth-child(13)'
+			) as HTMLSpanElement;
 
-			const expectedTimeString = new Intl.DateTimeFormat(element.locales, {hour: 'numeric', hour12: true})
-				.format(new Date('2022-12-16T13:00:00.000'));
+			const expectedTimeString = new Intl.DateTimeFormat(element.locales, {
+				hour: 'numeric',
+				hour12: true,
+			}).format(new Date('2022-12-16T13:00:00.000'));
 
 			expect(hour13th.textContent?.trim()).toEqual(expectedTimeString);
 		});
@@ -104,13 +110,17 @@ describe('vwc-calendar', () => {
 		let context: CalendarEventContext | null;
 
 		beforeEach(async () => {
-			gridCell = element.shadowRoot?.querySelector('[role="gridcell"i]:nth-child(3)') as HTMLElement;
+			gridCell = element.shadowRoot?.querySelector(
+				'[role="gridcell"i]:nth-child(3)'
+			) as HTMLElement;
 		});
 
 		it('should return correct day and hour from mouse clicking inside one of the columns cells', async () => {
 			const e = new MouseEvent('click', { composed: true, clientY: 54 });
 			e.composedPath = jest.fn().mockReturnValue([gridCell]);
-			gridCell.getBoundingClientRect = jest.fn().mockReturnValue({ height: 1175, y: 28 });
+			gridCell.getBoundingClientRect = jest
+				.fn()
+				.mockReturnValue({ height: 1175, y: 28 });
 
 			context = element.getEventContext(e);
 
@@ -119,12 +129,22 @@ describe('vwc-calendar', () => {
 		});
 
 		it('should return hour from mouse clicking on a row header', async () => {
-			const rowHeader  = element.shadowRoot?.querySelector('[role="rowheader"]:nth-child(3)') as HTMLElement;
-			rowHeader.getBoundingClientRect = jest.fn().mockReturnValue({ height: 49, y: 85 });
-
-			const rowHeaderTimeElement = rowHeader.querySelector('time') as HTMLElement;
-
-			const e = new MouseEvent('click', { composed: true, clientX: 25, clientY: 174 });
+			const rowHeader = element.shadowRoot?.querySelector(
+				'[role="rowheader"]:nth-child(3)'
+			) as HTMLElement;
+			rowHeader.getBoundingClientRect = jest
+				.fn()
+				.mockReturnValue({ height: 49, y: 85 });
+
+			const rowHeaderTimeElement = rowHeader.querySelector(
+				'time'
+			) as HTMLElement;
+
+			const e = new MouseEvent('click', {
+				composed: true,
+				clientX: 25,
+				clientY: 174,
+			});
 			e.composedPath = jest.fn().mockReturnValue([rowHeaderTimeElement]);
 
 			context = element.getEventContext(e);
@@ -134,9 +154,15 @@ describe('vwc-calendar', () => {
 		});
 
 		it('should return null if mouse click outside grid managed area', async () => {
-			const grid  = element.shadowRoot?.querySelector('[role="grid"]') as HTMLElement;
-
-			const e = new MouseEvent('click', { composed: true, clientX: 0, clientY: 0 });
+			const grid = element.shadowRoot?.querySelector(
+				'[role="grid"]'
+			) as HTMLElement;
+
+			const e = new MouseEvent('click', {
+				composed: true,
+				clientX: 0,
+				clientY: 0,
+			});
 			e.composedPath = jest.fn().mockReturnValue([grid]);
 
 			context = element.getEventContext(e);
@@ -150,31 +176,47 @@ describe('vwc-calendar', () => {
 
 			const getEventContext = () => element.getEventContext(e as MouseEvent);
 
-			expect(getEventContext).toThrow('Invalid event. Event must be instance of KeyboardEvent or MouseEvent');
+			expect(getEventContext).toThrow(
+				'Invalid event. Event must be instance of KeyboardEvent or MouseEvent'
+			);
 		});
 
 		it('should throw if event is missing a target', async () => {
 			const e = new MouseEvent('click', { composed: true, clientY: 54 });
-			gridCell.getBoundingClientRect = jest.fn().mockReturnValue({ height: 1175, y: 28 });
+			gridCell.getBoundingClientRect = jest
+				.fn()
+				.mockReturnValue({ height: 1175, y: 28 });
 
 			const getEventContext = () => element.getEventContext(e);
 
-			expect(getEventContext).toThrow('Invalid event. Event must contain a target object which is a direct descendant of calendar');
+			expect(getEventContext).toThrow(
+				'Invalid event. Event must contain a target object which is a direct descendant of calendar'
+			);
 		});
 
-		it('should return day from keydown \'space\' in grid cell', async () => {
-			element.addEventListener('keydown', e => context = element.getEventContext(e) as CalendarEventContext);
+		it("should return day from keydown 'space' in grid cell", async () => {
+			element.addEventListener(
+				'keydown',
+				(e) => (context = element.getEventContext(e) as CalendarEventContext)
+			);
 
-			gridCell.dispatchEvent(new KeyboardEvent('keydown', { composed: true, keyCode: 13 }));
+			gridCell.dispatchEvent(
+				new KeyboardEvent('keydown', { composed: true, keyCode: 13 })
+			);
 
 			expect(context?.day).toEqual(2);
 			expect(context?.hour).toBeUndefined();
 		});
 
-		it('should emit \'enter\' keydown event with day and hour when focused on grid cell', async () => {
-			element.addEventListener('keydown', e => context = element.getEventContext(e) as CalendarEventContext);
+		it("should emit 'enter' keydown event with day and hour when focused on grid cell", async () => {
+			element.addEventListener(
+				'keydown',
+				(e) => (context = element.getEventContext(e) as CalendarEventContext)
+			);
 
-			gridCell.dispatchEvent(new KeyboardEvent('keydown', { composed: true, keyCode: 32 }));
+			gridCell.dispatchEvent(
+				new KeyboardEvent('keydown', { composed: true, keyCode: 32 })
+			);
 
 			expect(context?.day).toEqual(2);
 			expect(context?.hour).toEqual(undefined);
@@ -186,7 +228,9 @@ describe('vwc-calendar', () => {
 		let shadowRoot: ShadowRoot;
 
 		const hitKey = (key: string) => {
-			grid.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, composed: true }));
+			grid.dispatchEvent(
+				new KeyboardEvent('keydown', { key, bubbles: true, composed: true })
+			);
 		};
 
 		beforeEach(async () => {
@@ -203,8 +247,9 @@ describe('vwc-calendar', () => {
 		});
 
 		it('should keep focus if not arrow key event', async () => {
-
-			const gridCell = shadowRoot?.querySelector('[role="columnheader"i]:nth-child(3)') as HTMLElement;
+			const gridCell = shadowRoot?.querySelector(
+				'[role="columnheader"i]:nth-child(3)'
+			) as HTMLElement;
 
 			gridCell.focus();
 
@@ -213,8 +258,9 @@ describe('vwc-calendar', () => {
 		});
 
 		it('should change focus on keyboard arrow interactions', async () => {
-
-			const gridCell = shadowRoot?.querySelector('[role="columnheader"i]:nth-child(3)') as HTMLElement;
+			const gridCell = shadowRoot?.querySelector(
+				'[role="columnheader"i]:nth-child(3)'
+			) as HTMLElement;
 
 			gridCell.focus();
 
@@ -240,8 +286,9 @@ describe('vwc-calendar', () => {
 		});
 
 		it('should circle back focus from last column to first', async () => {
-
-			const gridCell = shadowRoot?.querySelector('[role="columnheader"i]:nth-child(7)') as HTMLElement;
+			const gridCell = shadowRoot?.querySelector(
+				'[role="columnheader"i]:nth-child(7)'
+			) as HTMLElement;
 
 			gridCell.focus();
 
@@ -257,8 +304,9 @@ describe('vwc-calendar', () => {
 		});
 
 		it('should only apply arrow down on focused "em" (tabindexed) element', async () => {
-
-			const em = shadowRoot?.querySelector('[role="columnheader"i]:nth-child(4) em') as HTMLElement;
+			const em = shadowRoot?.querySelector(
+				'[role="columnheader"i]:nth-child(4) em'
+			) as HTMLElement;
 
 			em.focus();
 
@@ -272,12 +320,18 @@ describe('vwc-calendar', () => {
 			expect(shadowRoot.activeElement).toEqual(em);
 
 			hitKey('ArrowDown');
-			expect(shadowRoot.activeElement).toEqual(grid.querySelector('[role="gridcell"i]:nth-child(4)'));
+			expect(shadowRoot.activeElement).toEqual(
+				grid.querySelector('[role="gridcell"i]:nth-child(4)')
+			);
 		});
 
-		it('should move focus from column header button to gridcell of same block on \'arrowDown\'', async () => {
-			const columnHeader = shadowRoot.querySelector('[role="columnheader"i]:nth-child(3)');
-			const button = columnHeader?.querySelector('[role="button"i]') as HTMLButtonElement;
+		it("should move focus from column header button to gridcell of same block on 'arrowDown'", async () => {
+			const columnHeader = shadowRoot.querySelector(
+				'[role="columnheader"i]:nth-child(3)'
+			);
+			const button = columnHeader?.querySelector(
+				'[role="button"i]'
+			) as HTMLButtonElement;
 			button.focus();
 
 			grid.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
@@ -287,11 +341,13 @@ describe('vwc-calendar', () => {
 			);
 		});
 
-		it('should move focus from calendar event to its containing gridcell on \'ArrowDown\'', async () => {
+		it("should move focus from calendar event to its containing gridcell on 'ArrowDown'", async () => {
 			const calendarEvent = document.createElement('vwc-calendar-event');
 			calendarEvent.slot = 'day-5';
 			element.appendChild(calendarEvent);
-			const calendarEventBase = calendarEvent.shadowRoot?.querySelector('.base') as HTMLDivElement;
+			const calendarEventBase = calendarEvent.shadowRoot?.querySelector(
+				'.base'
+			) as HTMLDivElement;
 			calendarEventBase.focus();
 
 			hitKey('ArrowDown');
@@ -311,7 +367,9 @@ describe('vwc-calendar', () => {
 });
 
 function getFirstColumnDate(element: Calendar) {
-	const firstColumnTimeEl = element.shadowRoot?.querySelector('.column-headers > :first-child time') as HTMLTimeElement;
+	const firstColumnTimeEl = element.shadowRoot?.querySelector(
+		'.column-headers > :first-child time'
+	) as HTMLTimeElement;
 	const firstDatetime = firstColumnTimeEl?.getAttribute('datetime') as string;
 	return new Date(firstDatetime);
 }
@@ -319,7 +377,7 @@ function getFirstColumnDate(element: Calendar) {
 function getMondayOfWeek(d: Date | string) {
 	d = new Date(d);
 	const day = d.getDay(),
-		diff = d.getDate() - day + (day == 0 ? -6:1); // adjust when day is sunday
+		diff = d.getDate() - day + (day == 0 ? -6 : 1); // adjust when day is sunday
 	return new Date(d.setDate(diff));
 }
 
diff --git a/libs/components/src/lib/calendar/calendar.template.ts b/libs/components/src/lib/calendar/calendar.template.ts
index 4b58f28425..885c0735d8 100644
--- a/libs/components/src/lib/calendar/calendar.template.ts
+++ b/libs/components/src/lib/calendar/calendar.template.ts
@@ -7,28 +7,36 @@ import type {
 import type { Calendar } from './calendar';
 import {
 	getFirstDateOfTheWeek,
-	getValidDateString
+	getValidDateString,
 } from './helpers/calendar.date-functions';
 
-
 /**
  * the html days markup
  *
  * @internal
  */
 const HoursTemplate = () => {
-	return html`
-  <div class="row-headers" role="row">
-    ${repeat(x => x.hoursAsDatetime, html<string>`<span role="rowheader">
-      <time datetime="${(x: Date, c) =>	new Intl.DateTimeFormat(c.parent.locales, {
-		hour: 'numeric', minute: 'numeric',	hour12: false
-	}).format(x)}">
-						${(x: Date, c) => new Intl.DateTimeFormat(c.parent.locales, {
-		hour: 'numeric', hour12: c.parent.hour12
-	}).format(x)}
-					</time>
-				</span>`)}
-  </div>`;
+	return html` <div class="row-headers" role="row">
+		${repeat(
+			(x) => x.hoursAsDatetime,
+			html<string>`<span role="rowheader">
+				<time
+					datetime="${(x: Date, c) =>
+						new Intl.DateTimeFormat(c.parent.locales, {
+							hour: 'numeric',
+							minute: 'numeric',
+							hour12: false,
+						}).format(x)}"
+				>
+					${(x: Date, c) =>
+						new Intl.DateTimeFormat(c.parent.locales, {
+							hour: 'numeric',
+							hour12: c.parent.hour12,
+						}).format(x)}
+				</time>
+			</span>`
+		)}
+	</div>`;
 };
 
 /**
@@ -37,33 +45,48 @@ const HoursTemplate = () => {
  * @internal
  */
 const DaysTemplate = () => {
-	return html`
-			<div class="column-headers" role="row">
-				${repeat(x => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]), html<string>`
-						<div role="columnheader" tabindex="-1">
-              <time datetime=${(x: Date) => getValidDateString(x)}>
-                <h2>
-									<!-- TODO add to column aria-labelledby or describedby to count
+	return html` <div class="column-headers" role="row">
+		${repeat(
+			(x) =>
+				x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]),
+			html<string>` <div role="columnheader" tabindex="-1">
+				<time datetime=${(x: Date) => getValidDateString(x)}>
+					<h2>
+						<!-- TODO add to column aria-labelledby or describedby to count
                   events and related day e.g. "3 events, Sunday, March 8" -->
-									<em tabindex="0" role="button" aria-label=${(x: Date, c) => new Intl.DateTimeFormat(c.parent.locales, {
-		weekday: 'long', month: 'long', day: '2-digit'
-	}).format(x)}>
-										${(x: Date, c) => new Intl.DateTimeFormat(c.parent.locales, { day: '2-digit' }).format(x)}
-									</em>
-									<small aria-hidden="true">
-										${(x: Date, c) => new Intl.DateTimeFormat(c.parent.locales, { weekday: 'short' }).format(x)}
-									</small>
-                </h2>
-              </time>
-						</div>`)}
-			</div>`;
+						<em
+							tabindex="0"
+							role="button"
+							aria-label=${(x: Date, c) =>
+								new Intl.DateTimeFormat(c.parent.locales, {
+									weekday: 'long',
+									month: 'long',
+									day: '2-digit',
+								}).format(x)}
+						>
+							${(x: Date, c) =>
+								new Intl.DateTimeFormat(c.parent.locales, {
+									day: '2-digit',
+								}).format(x)}
+						</em>
+						<small aria-hidden="true">
+							${(x: Date, c) =>
+								new Intl.DateTimeFormat(c.parent.locales, {
+									weekday: 'short',
+								}).format(x)}
+						</small>
+					</h2>
+				</time>
+			</div>`
+		)}
+	</div>`;
 };
 
 const ColumnTemplate = html<string>`
-            <div role="gridcell" tabindex="-1">
-              <slot name="day-${(_, c) => c.index}"></slot>
-            </div>
-          `;
+	<div role="gridcell" tabindex="-1">
+		<slot name="day-${(_, c) => c.index}"></slot>
+	</div>
+`;
 /**
  * The template for the Calendar component.
  *
@@ -74,20 +97,24 @@ export const CalendarTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
 ) => ViewTemplate<Calendar> = () => html`
-  <div role="grid" @keydown=${(x, c) => x.onKeydown(c.event as KeyboardEvent)}>
-    ${DaysTemplate}
-    <div class="calendar-row" role="rowgroup">
-      ${HoursTemplate}
-      <div class="calendar-grid-presentation" role="presentation">
-        <div class="hours" role="list">
-          ${repeat(x => Array.from({ length: x.hoursAsDatetime.length + 1 }),	html<string>`
-            <div role="listitem"></div>`)}
-        </div>
-        <div class="columns" role="row">
-          ${repeat(x => Array.from(Array(x._days)), ColumnTemplate, { positioning: true })}
-        </div>
-        <slot></slot>
-      </div>
-    </div>
-  </div>
+	<div role="grid" @keydown=${(x, c) => x.onKeydown(c.event as KeyboardEvent)}>
+		${DaysTemplate}
+		<div class="calendar-row" role="rowgroup">
+			${HoursTemplate}
+			<div class="calendar-grid-presentation" role="presentation">
+				<div class="hours" role="list">
+					${repeat(
+						(x) => Array.from({ length: x.hoursAsDatetime.length + 1 }),
+						html<string>` <div role="listitem"></div>`
+					)}
+				</div>
+				<div class="columns" role="row">
+					${repeat((x) => Array.from(Array(x._days)), ColumnTemplate, {
+						positioning: true,
+					})}
+				</div>
+				<slot></slot>
+			</div>
+		</div>
+	</div>
 `;
diff --git a/libs/components/src/lib/calendar/calendar.ts b/libs/components/src/lib/calendar/calendar.ts
index 3ff1eae1d7..e54e959053 100644
--- a/libs/components/src/lib/calendar/calendar.ts
+++ b/libs/components/src/lib/calendar/calendar.ts
@@ -13,7 +13,6 @@ import {
 } from './helpers/calendar.keyboard-interactions';
 import { getEventContext } from './helpers/calendar.event-context';
 
-
 /**
  * @public
  * @component calendar
@@ -27,14 +26,13 @@ import { getEventContext } from './helpers/calendar.event-context';
  * @slot day-6 - Assign elements to corresponding day column using this slot.
  */
 export class Calendar extends FoundationElement {
-
 	/**
 	 * The date within a week of choice.
 	 * Accepts any parameter acceptable by the `Date()` constructor.
 	 *
 	 * @public
 	 */
-	@attr	datetime?: Date | string;
+	@attr datetime?: Date | string;
 
 	/**
 	 * The day to show as the first within a work week.
@@ -45,7 +43,7 @@ export class Calendar extends FoundationElement {
 	 *
 	 * @public
 	 */
-	@attr({ attribute: 'start-day' })	startDay?: 'sunday' | 'monday';
+	@attr({ attribute: 'start-day' }) startDay?: 'sunday' | 'monday';
 
 	/**
 	 * A locale string or array of locale strings that contain one or more language or locale tags.
@@ -57,7 +55,7 @@ export class Calendar extends FoundationElement {
 	 *
 	 * @public
 	 */
-	@attr	locales?: string | string[] | undefined;
+	@attr locales?: string | string[] | undefined;
 
 	/**
 	 * The convention of displayed time in which the day runs from midnight to midnight and is divided into 24 or 12 hours.
@@ -114,38 +112,50 @@ export class Calendar extends FoundationElement {
 
 	private getCalendarEventContainingCell(calendarEvent: CalendarEvent) {
 		const slotName = calendarEvent.getAttribute('slot') as string;
-		const gridCell = (this.shadowRoot as ShadowRoot).querySelector(`slot[name="${slotName}"i]`) as HTMLDivElement;
+		const gridCell = (this.shadowRoot as ShadowRoot).querySelector(
+			`slot[name="${slotName}"i]`
+		) as HTMLDivElement;
 		return gridCell.parentElement as HTMLDivElement;
 	}
 
 	private arrowKeysInteractions(key: PredefindKeys) {
-		const { activeElement } = (this.shadowRoot as ShadowRoot);
+		const { activeElement } = this.shadowRoot as ShadowRoot;
 		let focusNext: Element | null | void;
 
 		if (isCellOrHeader(activeElement)) {
 			focusNext = getNextFocusableGridElement.call(this, key, activeElement);
 		} else if (this.#activeCalendarEvent) {
-			focusNext = this.getCalendarEventContainingCell(this.#activeCalendarEvent);
-		}	else if (activeElement?.matches('em[role="button"i]')) {
-			focusNext = getHeaderDescendantGridCell.call(this, key, activeElement as HTMLElement);
+			focusNext = this.getCalendarEventContainingCell(
+				this.#activeCalendarEvent
+			);
+		} else if (activeElement?.matches('em[role="button"i]')) {
+			focusNext = getHeaderDescendantGridCell.call(
+				this,
+				key,
+				activeElement as HTMLElement
+			);
 		} else {
-			focusNext = (this.shadowRoot as ShadowRoot).querySelector('[role="columnheader"i]');
+			focusNext = (this.shadowRoot as ShadowRoot).querySelector(
+				'[role="columnheader"i]'
+			);
 		}
 
 		this.activateElement(focusNext as HTMLElement);
 	}
 
 	private activateElement(el: HTMLElement | null | undefined) {
-		const onBlur = ({ target }: FocusEvent) => (target as HTMLElement).setAttribute('tabindex', '-1');
+		const onBlur = ({ target }: FocusEvent) =>
+			(target as HTMLElement).setAttribute('tabindex', '-1');
 
 		el?.addEventListener('blur', onBlur, { once: true });
 		el?.setAttribute('tabindex', '0');
 		el?.focus();
 	}
 
-
 	onKeydown({ key }: KeyboardEvent) {
-		const isArrow = [ARROW_UP, ARROW_RIGHT, ARROW_DOWN, ARROW_LEFT].some(predefinedKey => predefinedKey == key);
+		const isArrow = [ARROW_UP, ARROW_RIGHT, ARROW_DOWN, ARROW_LEFT].some(
+			(predefinedKey) => predefinedKey == key
+		);
 
 		if (isArrow) {
 			this.arrowKeysInteractions(key as PredefindKeys);
diff --git a/libs/components/src/lib/calendar/definition.ts b/libs/components/src/lib/calendar/definition.ts
index 5872743ea8..3f99092975 100644
--- a/libs/components/src/lib/calendar/definition.ts
+++ b/libs/components/src/lib/calendar/definition.ts
@@ -5,19 +5,20 @@ import styles from './calendar.scss?inline';
 import { Calendar } from './calendar';
 import { CalendarTemplate as template } from './calendar.template';
 
-
 /**
  *
  * @internal
  */
-export const calendarDefinition = Calendar.compose<FoundationElementDefinition>({
-	baseName: 'calendar',
-	template: template as any,
-	styles,
-	shadowOptions: {
-		delegatesFocus: true
+export const calendarDefinition = Calendar.compose<FoundationElementDefinition>(
+	{
+		baseName: 'calendar',
+		template: template as any,
+		styles,
+		shadowOptions: {
+			delegatesFocus: true,
+		},
 	}
-});
+);
 
 /**
  * @internal
@@ -30,4 +31,3 @@ export const calendarRegistries = [calendarDefinition()];
  * @param prefix - the prefix to use for the component name
  */
 export const registerCalendar = registerFactory(calendarRegistries);
-
diff --git a/libs/components/src/lib/calendar/helpers/calendar.date-functions.ts b/libs/components/src/lib/calendar/helpers/calendar.date-functions.ts
index 14a085d3b3..aa9dfd3d93 100644
--- a/libs/components/src/lib/calendar/helpers/calendar.date-functions.ts
+++ b/libs/components/src/lib/calendar/helpers/calendar.date-functions.ts
@@ -8,7 +8,9 @@
  */
 export function getValidDateString(date: Date): string {
 	const twoDigit = (num: number) => `0${num}`.slice(-2);
-	return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(date.getDate())}`;
+	return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(
+		date.getDate()
+	)}`;
 }
 
 const weekdaysMap = new Map([
@@ -16,7 +18,10 @@ const weekdaysMap = new Map([
 	['monday', 1],
 ]);
 
-export function getFirstDateOfTheWeek(date: Date = new Date(), startDay: 'sunday' | 'monday'): Date {
+export function getFirstDateOfTheWeek(
+	date: Date = new Date(),
+	startDay: 'sunday' | 'monday'
+): Date {
 	date = new Date(date);
 
 	let num = weekdaysMap.get(startDay);
diff --git a/libs/components/src/lib/calendar/helpers/calendar.event-context.ts b/libs/components/src/lib/calendar/helpers/calendar.event-context.ts
index 5d60f9e319..91356fa910 100644
--- a/libs/components/src/lib/calendar/helpers/calendar.event-context.ts
+++ b/libs/components/src/lib/calendar/helpers/calendar.event-context.ts
@@ -12,13 +12,18 @@ function getDay(el: HTMLElement): number | void {
 	if (cellOrHeader) {
 		const { parentElement } = cellOrHeader;
 		if (parentElement) {
-			return parentElement.children && Array.from(parentElement.children).indexOf(cellOrHeader);
+			return (
+				parentElement.children &&
+				Array.from(parentElement.children).indexOf(cellOrHeader)
+			);
 		}
 	}
 }
 
 function getHour(e: MouseEvent, el: HTMLElement, hours: number): number | void {
-	const rowHeaderOrCell = el.closest('[role="rowheader"], [role="gridcell"i]') as HTMLElement;
+	const rowHeaderOrCell = el.closest(
+		'[role="rowheader"], [role="gridcell"i]'
+	) as HTMLElement;
 
 	if (rowHeaderOrCell) {
 		const DOMRect = rowHeaderOrCell.getBoundingClientRect();
@@ -30,16 +35,28 @@ function getHour(e: MouseEvent, el: HTMLElement, hours: number): number | void {
 	}
 }
 
-export const getEventContext = function(this: Calendar, e: KeyboardEvent | MouseEvent): CalendarEventContext | null {
-
+export const getEventContext = function (
+	this: Calendar,
+	e: KeyboardEvent | MouseEvent
+): CalendarEventContext | null {
 	if (!(e instanceof KeyboardEvent || e instanceof MouseEvent)) {
-		throw new Error('Invalid event. Event must be instance of KeyboardEvent or MouseEvent');
+		throw new Error(
+			'Invalid event. Event must be instance of KeyboardEvent or MouseEvent'
+		);
 	}
 
 	const [el] = e.composedPath();
 
-	if (!(el && el instanceof HTMLElement && (this.shadowRoot as ShadowRoot).contains(el))) {
-		throw new Error('Invalid event. Event must contain a target object which is a direct descendant of calendar');
+	if (
+		!(
+			el &&
+			el instanceof HTMLElement &&
+			(this.shadowRoot as ShadowRoot).contains(el)
+		)
+	) {
+		throw new Error(
+			'Invalid event. Event must contain a target object which is a direct descendant of calendar'
+		);
 	}
 
 	const day = getDay(el);
diff --git a/libs/components/src/lib/calendar/helpers/calendar.keyboard-interactions.ts b/libs/components/src/lib/calendar/helpers/calendar.keyboard-interactions.ts
index 7c414e14f3..4c359bd8c3 100644
--- a/libs/components/src/lib/calendar/helpers/calendar.keyboard-interactions.ts
+++ b/libs/components/src/lib/calendar/helpers/calendar.keyboard-interactions.ts
@@ -1,34 +1,45 @@
 import type { Calendar } from '../calendar';
 
-
 export const ARROW_UP = 'ArrowUp';
 export const ARROW_RIGHT = 'ArrowRight';
 export const ARROW_DOWN = 'ArrowDown';
 export const ARROW_LEFT = 'ArrowLeft';
 
-export type PredefindKeys = typeof ARROW_UP | typeof ARROW_RIGHT | typeof ARROW_DOWN | typeof ARROW_LEFT;
+export type PredefindKeys =
+	| typeof ARROW_UP
+	| typeof ARROW_RIGHT
+	| typeof ARROW_DOWN
+	| typeof ARROW_LEFT;
 
 export function isCellOrHeader(el: unknown): el is HTMLElement {
-	return el instanceof HTMLElement
-	&& (
-		el.matches('[role="gridcell"i]')
-		|| el.matches('[role="columnheader"i]')
+	return (
+		el instanceof HTMLElement &&
+		(el.matches('[role="gridcell"i]') || el.matches('[role="columnheader"i]'))
 	);
 }
 
-const getCellOrHeader = (f: HTMLElement) => (f.matches('[role="columnheader"i]')
-	? '[role="gridcell"i]'
-	: '[role="columnheader"i]');
+const getCellOrHeader = (f: HTMLElement) =>
+	f.matches('[role="columnheader"i]')
+		? '[role="gridcell"i]'
+		: '[role="columnheader"i]';
 
 export function getNextFocusableGridElement(
-	this: Calendar, key: PredefindKeys, activeElement: HTMLElement
+	this: Calendar,
+	key: PredefindKeys,
+	activeElement: HTMLElement
 ): Element | null | void {
 	if (activeElement.parentNode instanceof HTMLElement) {
 		switch (key) {
 			case ARROW_RIGHT:
-				return activeElement.nextElementSibling || activeElement.parentNode.firstElementChild;
+				return (
+					activeElement.nextElementSibling ||
+					activeElement.parentNode.firstElementChild
+				);
 			case ARROW_LEFT:
-				return activeElement.previousElementSibling || activeElement.parentNode.lastElementChild;
+				return (
+					activeElement.previousElementSibling ||
+					activeElement.parentNode.lastElementChild
+				);
 			case ARROW_UP:
 			case ARROW_DOWN: {
 				const { children } = activeElement.parentNode;
@@ -41,12 +52,21 @@ export function getNextFocusableGridElement(
 	}
 }
 
-export function getHeaderDescendantGridCell(this: Calendar, key: PredefindKeys, activeElement: HTMLElement): Element | null | undefined {
-	if (key !== ARROW_DOWN) {return;}
+export function getHeaderDescendantGridCell(
+	this: Calendar,
+	key: PredefindKeys,
+	activeElement: HTMLElement
+): Element | null | undefined {
+	if (key !== ARROW_DOWN) {
+		return;
+	}
 
 	const header = activeElement.closest('[role="columnheader"i]') as HTMLElement;
-	const columnHeaders = (this.shadowRoot as ShadowRoot).querySelectorAll('[role="columnheader"i]');
+	const columnHeaders = (this.shadowRoot as ShadowRoot).querySelectorAll(
+		'[role="columnheader"i]'
+	);
 	const i = Array.from(columnHeaders).indexOf(header);
-	return (this.shadowRoot as ShadowRoot).querySelector(`[role="gridcell"i]:nth-child(${i + 1})`);
-
+	return (this.shadowRoot as ShadowRoot).querySelector(
+		`[role="gridcell"i]:nth-child(${i + 1})`
+	);
 }
diff --git a/libs/components/src/lib/calendar/index.ts b/libs/components/src/lib/calendar/index.ts
index 8d025a221b..29b6148f29 100644
--- a/libs/components/src/lib/calendar/index.ts
+++ b/libs/components/src/lib/calendar/index.ts
@@ -1,4 +1,3 @@
 import { registerCalendar } from './definition';
 
-
 registerCalendar();
diff --git a/libs/components/src/lib/calendar/ui.test.ts b/libs/components/src/lib/calendar/ui.test.ts
index 6ce0ae1143..43fc298a1e 100644
--- a/libs/components/src/lib/calendar/ui.test.ts
+++ b/libs/components/src/lib/calendar/ui.test.ts
@@ -8,7 +8,7 @@ import {
 const components = ['calendar'];
 
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template =`
+	const template = `
     <vwc-calendar datetime="2022-01-01"></vwc-calendar>
     <vwc-calendar datetime="2022-01-01" hour12 locales="he-IL" start-day="sunday" style="direction: rtl"></vwc-calendar>
 	`;
@@ -27,8 +27,7 @@ test('should show the component', async ({ page }: { page: Page }) => {
 	const testWrapper = await page.$('#wrapper');
 	await page.waitForLoadState('networkidle');
 
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/calendar.png',
-		);
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/calendar.png'
+	);
 });
diff --git a/libs/components/src/lib/card/card.spec.ts b/libs/components/src/lib/card/card.spec.ts
index 25643baca6..6a2976e3c8 100644
--- a/libs/components/src/lib/card/card.spec.ts
+++ b/libs/components/src/lib/card/card.spec.ts
@@ -1,13 +1,11 @@
-import {axe, elementUpdated, fixture} from '@vivid-nx/shared';
+import { axe, elementUpdated, fixture } from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
-import {Appearance} from '../enums';
+import { Appearance } from '../enums';
 import { Icon } from '../icon/icon';
 import { Card } from './card';
 import '.';
 import { cardDefinition } from './definition';
 
-
-
 const COMPONENT_TAG = 'vwc-card';
 const ICON_SELECTOR = 'vwc-icon';
 
@@ -27,7 +25,7 @@ describe('vwc-card', () => {
 		});
 	});
 
-	describe( 'header', () => {
+	describe('header', () => {
 		it('should set headline property to header-title', async () => {
 			const headline = 'card headline';
 			element.headline = headline;
@@ -42,7 +40,8 @@ describe('vwc-card', () => {
 			element.subtitle = subtitle;
 			await elementUpdated(element);
 
-			const headerSubtitle = element.shadowRoot?.querySelector('.header-subtitle');
+			const headerSubtitle =
+				element.shadowRoot?.querySelector('.header-subtitle');
 			expect(headerSubtitle?.textContent?.trim()).toEqual(subtitle);
 		});
 
@@ -50,20 +49,20 @@ describe('vwc-card', () => {
 			element.headline = 'card title';
 			await elementUpdated(element);
 
-			const headerContent = element.shadowRoot?.querySelector('.header-content');
+			const headerContent =
+				element.shadowRoot?.querySelector('.header-content');
 			expect(headerContent).toBeTruthy();
 		});
 
-
 		it('should render headerContent if subtitle is set', async function () {
 			element.subtitle = 'card subtitle';
 			await elementUpdated(element);
 
-			const subtitleContent = element.shadowRoot?.querySelector('.header-content');
+			const subtitleContent =
+				element.shadowRoot?.querySelector('.header-content');
 			expect(subtitleContent).toBeTruthy();
 		});
 
-
 		it('should add an icon to the card header', async () => {
 			element.icon = 'chat-line';
 			await elementUpdated(element);
@@ -73,20 +72,22 @@ describe('vwc-card', () => {
 			expect(icon.name).toEqual('chat-line');
 		});
 
-		it( 'should add class .hide-header to .base', async () => {
+		it('should add class .hide-header to .base', async () => {
 			element.icon = undefined;
 			element.headline = undefined;
 			element.subtitle = undefined;
 			await elementUpdated(element);
-			const baseElementHasNoHeader = element.shadowRoot?.
-				querySelector('.base')?.classList.contains('hide-header');
+			const baseElementHasNoHeader = element.shadowRoot
+				?.querySelector('.base')
+				?.classList.contains('hide-header');
 
 			expect(baseElementHasNoHeader).toEqual(true);
 		});
 
-		it('should have slot name graphic with icon default', async() => {
-			const graphicSlotElement = element.shadowRoot?.
-				querySelector('.header slot[name="graphic"]');
+		it('should have slot name graphic with icon default', async () => {
+			const graphicSlotElement = element.shadowRoot?.querySelector(
+				'.header slot[name="graphic"]'
+			);
 
 			element.icon = 'home';
 			await elementUpdated(element);
@@ -95,10 +96,10 @@ describe('vwc-card', () => {
 			expect(icon.parentElement).toEqual(graphicSlotElement);
 		});
 
-
 		it('should have meta slot ', async function () {
-			const metaSlotElement = element.shadowRoot?.
-				querySelector('.header-wrapper slot[name="meta"]');
+			const metaSlotElement = element.shadowRoot?.querySelector(
+				'.header-wrapper slot[name="meta"]'
+			);
 
 			expect(metaSlotElement).toBeTruthy();
 		});
@@ -110,12 +111,12 @@ describe('vwc-card', () => {
 			element.appendChild(slottedElement);
 			await elementUpdated(element);
 
-			const baseElementHasNoHeader = element.shadowRoot?.
-				querySelector('.base')?.classList.contains('hide-header');
+			const baseElementHasNoHeader = element.shadowRoot
+				?.querySelector('.base')
+				?.classList.contains('hide-header');
 
 			expect(baseElementHasNoHeader).toEqual(false);
 		});
-
 	});
 
 	describe('card text', () => {
@@ -125,14 +126,14 @@ describe('vwc-card', () => {
 			await elementUpdated(element);
 			const textNode = element.shadowRoot?.querySelector('.text');
 			expect(textNode?.textContent?.trim()).toEqual(text);
-
 		});
 	});
 
-	describe( 'card footer', () => {
+	describe('card footer', () => {
 		it('should have footer slot ', async function () {
-			const footerSlotElement = element.shadowRoot?.
-				querySelector('.footer slot[name="footer"]');
+			const footerSlotElement = element.shadowRoot?.querySelector(
+				'.footer slot[name="footer"]'
+			);
 
 			expect(footerSlotElement).toBeTruthy();
 		});
@@ -144,8 +145,9 @@ describe('vwc-card', () => {
 			element.appendChild(slottedElement);
 			await elementUpdated(element);
 
-			const baseElementHasNoHeader = element.shadowRoot?.
-				querySelector('.base')?.classList.contains('hide-footer');
+			const baseElementHasNoHeader = element.shadowRoot
+				?.querySelector('.base')
+				?.classList.contains('hide-footer');
 
 			expect(baseElementHasNoHeader).toEqual(false);
 		});
@@ -153,12 +155,10 @@ describe('vwc-card', () => {
 
 	describe('card appearance', function () {
 		it('should have elevation element wrapper when as default appearance or elevated', async function () {
-
 			const elevationTag = element.shadowRoot?.querySelector('vwc-elevation');
 
 			expect(elevationTag).toBeTruthy();
 			expect(elevationTag?.getAttribute('dp')).toEqual('4');
-
 		});
 
 		it('should have no elevation element wrapper when appearance is ghost', async function () {
@@ -168,7 +168,6 @@ describe('vwc-card', () => {
 			const elevationTag = element.shadowRoot?.querySelector('vwc-elevation');
 
 			expect(elevationTag).toBeFalsy();
-
 		});
 
 		it('should have elevation element wrapper with dp="0" when appearance is outlined', async function () {
@@ -179,21 +178,16 @@ describe('vwc-card', () => {
 
 			expect(elevationTag).toBeTruthy();
 			expect(elevationTag?.getAttribute('dp')).toEqual('0');
-
 		});
-
 	});
 
 	describe('card elevation', () => {
-
 		it('should have default elevation', async function () {
 			const defaultElevation = '4';
 
-			const baseElevation = element.shadowRoot?.
-				querySelector('vwc-elevation');
+			const baseElevation = element.shadowRoot?.querySelector('vwc-elevation');
 
 			expect(baseElevation?.getAttribute('dp')).toEqual(defaultElevation);
-
 		});
 
 		it('should change the elevation dp when there is elevation property', async () => {
diff --git a/libs/components/src/lib/card/card.template.ts b/libs/components/src/lib/card/card.template.ts
index b071eb696d..91a8bd72c9 100644
--- a/libs/components/src/lib/card/card.template.ts
+++ b/libs/components/src/lib/card/card.template.ts
@@ -8,36 +8,33 @@ import { classNames } from '@microsoft/fast-web-utilities';
 import { Appearance } from '../enums';
 import { Icon } from '../icon/icon';
 import { Elevation } from '../elevation/elevation';
-import type {Card} from './card';
+import type { Card } from './card';
 
-const getClasses = (_: Card) => classNames(
-	'base',
-	['hide-footer', !_.footerSlottedContent || !_.footerSlottedContent.length],
-	['hide-header', shouldHideHeader(_)]
-);
+const getClasses = (_: Card) =>
+	classNames(
+		'base',
+		['hide-footer', !_.footerSlottedContent || !_.footerSlottedContent.length],
+		['hide-header', shouldHideHeader(_)]
+	);
 
 function renderHeaderIcon(iconTag: string) {
 	return html<Card>`
-		<${iconTag} class="icon" inline name="${x => x.icon}"></${iconTag}>`;
+		<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
 }
 
 function Headline() {
-	return html`
-		<div class="header-headline">${(x) => x.headline}</div>
-	`;
+	return html` <div class="header-headline">${(x) => x.headline}</div> `;
 }
 
 function Subtitle() {
-	return html`
-		<div class="header-subtitle">${(x) => x.subtitle}</div>
-	`;
+	return html` <div class="header-subtitle">${(x) => x.subtitle}</div> `;
 }
 
 function headerContent() {
 	return html`
 		<div class="header-content">
-			${when(x => x.headline, Headline())}
-			${when(x => x.subtitle, Subtitle())}
+			${when((x) => x.headline, Headline())}
+			${when((x) => x.subtitle, Subtitle())}
 		</div>
 	`;
 }
@@ -46,36 +43,37 @@ function headerContent() {
  header
  */
 function renderHeader(iconTag: string) {
-
-	return html<Card>`
-		<header class="header">
-			<slot name="graphic" ${slotted('graphicSlottedContent')}>${when(x => x.icon, renderHeaderIcon(iconTag))}</slot>
-			${when(x => x.headline || x.subtitle, headerContent())}
-		</header>`;
+	return html<Card>` <header class="header">
+		<slot name="graphic" ${slotted('graphicSlottedContent')}
+			>${when((x) => x.icon, renderHeaderIcon(iconTag))}</slot
+		>
+		${when((x) => x.headline || x.subtitle, headerContent())}
+	</header>`;
 }
 
-function shouldHideHeader(card:Card) {
+function shouldHideHeader(card: Card) {
 	// eslint-disable-next-line max-len
-	return 	!card.headline  && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
+	return (
+		!card.headline &&
+		!card.subtitle &&
+		!card.icon &&
+		(!card.graphicSlottedContent || !card.graphicSlottedContent.length)
+	);
 }
 
 function renderMetaSlot() {
-	return html`
-		<slot name="meta" ${slotted('metaSlottedContent')}></slot>
-	`;
+	return html` <slot name="meta" ${slotted('metaSlottedContent')}></slot> `;
 }
 
 function text() {
-	return html`
-		<div class="text">${(x) => x.text}</div>
-	`;
+	return html` <div class="text">${(x) => x.text}</div> `;
 }
 
-function renderCardContent(context: ElementDefinitionContext)  {
+function renderCardContent(context: ElementDefinitionContext) {
 	const iconTag = context.tagFor(Icon);
 
 	return html`
-	<div class="${getClasses}">
+		<div class="${getClasses}">
 			<div class="wrapper">
 				<div class="vwc-card-media">
 					<slot name="media"></slot>
@@ -83,10 +81,9 @@ function renderCardContent(context: ElementDefinitionContext)  {
 				<slot name="main">
 					<div class="main-content">
 						<div class="header-wrapper">
-							${renderHeader(iconTag)}
-							${renderMetaSlot()}
+							${renderHeader(iconTag)} ${renderMetaSlot()}
 						</div>
-						${when(x => x.text, text())}
+						${when((x) => x.text, text())}
 					</div>
 				</slot>
 				<div class="footer">
@@ -111,20 +108,27 @@ export const CardTemplate: (
 	const elevationTag = context.tagFor(Elevation);
 
 	return html<Card>`
-		${when(x => (x.appearance !== Appearance.Ghost) && (x.appearance !== Appearance.Outlined), html`
-			<${elevationTag} dp=${(x => x.elevation ?? '4')}>
+		${when(
+			(x) =>
+				x.appearance !== Appearance.Ghost &&
+				x.appearance !== Appearance.Outlined,
+			html`
+			<${elevationTag} dp=${(x) => x.elevation ?? '4'}>
 			  ${renderCardContent(context)}
 			</${elevationTag}>
-		`)}
-
-		${when(x => (x.appearance === Appearance.Outlined), html`
+		`
+		)}
+		${when(
+			(x) => x.appearance === Appearance.Outlined,
+			html`
 			<${elevationTag} dp='0')}>
 			  ${renderCardContent(context)}
 			</${elevationTag}>
-		`)}
-
-		${when(x => (x.appearance === Appearance.Ghost), html`
-			${renderCardContent(context)}
-		`)}
+		`
+		)}
+		${when(
+			(x) => x.appearance === Appearance.Ghost,
+			html` ${renderCardContent(context)} `
+		)}
 	`;
 };
diff --git a/libs/components/src/lib/card/card.ts b/libs/components/src/lib/card/card.ts
index de089d03bf..c2b41e10b3 100644
--- a/libs/components/src/lib/card/card.ts
+++ b/libs/components/src/lib/card/card.ts
@@ -1,20 +1,17 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
-import {attr, observable} from '@microsoft/fast-element';
-
-import type {
-	Appearance,
-} from '../enums.js';
+import { attr, observable } from '@microsoft/fast-element';
 
+import type { Appearance } from '../enums.js';
 
 /**
  * Types of avatar appearance.
  *
  * @public
  */
-export type CardAppearance = Extract<Appearance,
-Appearance.Elevated | Appearance.Ghost | Appearance.Outlined>;
-
-
+export type CardAppearance = Extract<
+	Appearance,
+	Appearance.Elevated | Appearance.Ghost | Appearance.Outlined
+>;
 
 /**
  * @public
@@ -26,7 +23,6 @@ Appearance.Elevated | Appearance.Ghost | Appearance.Outlined>;
  * @slot main - Assign nodes to main slot to fully override a card's predefined flow and style with your own.
  */
 export class Card extends FoundationElement {
-
 	/**
 	 * The appearance the card should have.
 	 *
@@ -74,8 +70,6 @@ export class Card extends FoundationElement {
 	 */
 	@attr elevation?: 0 | 2 | 4 | 8 | 12 | 16 | 24;
 
-
-
 	/**
 	 *
 	 * Slot observer:
@@ -83,12 +77,7 @@ export class Card extends FoundationElement {
 	 * @internal
 	 */
 
-
 	@observable footerSlottedContent?: HTMLElement[];
 	@observable graphicSlottedContent?: HTMLElement[];
 	@observable hasMetaSlottedContent?: HTMLElement[];
-
 }
-
-
-
diff --git a/libs/components/src/lib/card/definition.ts b/libs/components/src/lib/card/definition.ts
index 66c6a20106..d460c7b4b6 100644
--- a/libs/components/src/lib/card/definition.ts
+++ b/libs/components/src/lib/card/definition.ts
@@ -23,7 +23,11 @@ export const cardDefinition = Card.compose<FoundationElementDefinition>({
 /**
  * @internal
  */
-export const cardRegistries = [cardDefinition(), ...iconRegistries, ...elevationRegistries];
+export const cardRegistries = [
+	cardDefinition(),
+	...iconRegistries,
+	...elevationRegistries,
+];
 
 /**
  * Registers the card elements with the design system.
diff --git a/libs/components/src/lib/card/index.ts b/libs/components/src/lib/card/index.ts
index 0819607ea7..1fcda7a84b 100644
--- a/libs/components/src/lib/card/index.ts
+++ b/libs/components/src/lib/card/index.ts
@@ -1,4 +1,3 @@
 import { registerCard } from './definition';
 
-
 registerCard();
diff --git a/libs/components/src/lib/checkbox/checkbox.spec.ts b/libs/components/src/lib/checkbox/checkbox.spec.ts
index b4f9d86f6f..188eccdd52 100644
--- a/libs/components/src/lib/checkbox/checkbox.spec.ts
+++ b/libs/components/src/lib/checkbox/checkbox.spec.ts
@@ -4,7 +4,7 @@ import {
 	elementUpdated,
 	fixture,
 	getBaseElement,
-	listenToFormSubmission
+	listenToFormSubmission,
 } from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { Connotation } from '../enums';
@@ -69,7 +69,9 @@ describe('vwc-checkbox', () => {
 			element.toggleAttribute('checked', true);
 			await elementUpdated(element);
 
-			expect(getBaseElement(element).classList.contains('checked')).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains('checked')
+			).toBeTruthy();
 		});
 	});
 
@@ -109,7 +111,9 @@ describe('vwc-checkbox', () => {
 
 		it('should set `indeterminate` to false when `checked` by keypress', async () => {
 			element.indeterminate = true;
-			getBaseElement(element).dispatchEvent(new KeyboardEvent('keypress', { key: ' ' }));
+			getBaseElement(element).dispatchEvent(
+				new KeyboardEvent('keypress', { key: ' ' })
+			);
 
 			expect(element.indeterminate).toBeFalsy();
 		});
@@ -120,25 +124,27 @@ describe('vwc-checkbox', () => {
 			const connotation = Connotation.CTA;
 			(element as any).connotation = 'cta';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.base')
-				?.classList
-				.contains(`connotation-${connotation}`))
-				.toEqual(true);
+			expect(
+				element.shadowRoot
+					?.querySelector('.base')
+					?.classList.contains(`connotation-${connotation}`)
+			).toEqual(true);
 		});
 	});
 
 	describe('helper text', function () {
 		it('should render the helper text when attribute is set on checkbox', async function () {
-			const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-text');
+			const helperTextElementWithoutText =
+				element.shadowRoot?.querySelector('.helper-text');
 			const helperText = 'Helper Text';
 			element.helperText = helperText;
 			await elementUpdated(element);
-			expect(helperTextElementWithoutText)
-				.toBeNull();
-			expect(element.shadowRoot?.querySelector('.helper-message')
-				?.textContent
-				?.trim())
-				.toEqual(helperText);
+			expect(helperTextElementWithoutText).toBeNull();
+			expect(
+				element.shadowRoot
+					?.querySelector('.helper-message')
+					?.textContent?.trim()
+			).toEqual(helperText);
 		});
 	});
 
@@ -146,13 +152,19 @@ describe('vwc-checkbox', () => {
 		it('should add success class to base when successText is set', async function () {
 			(element as any).successText = 'success';
 			await elementUpdated(element);
-			expect(getBaseElement(element).classList.contains('success')).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains('success')
+			).toBeTruthy();
 		});
 
 		it('should show success text when successText is set', async function () {
 			(element as any).successText = 'success';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.success-message')?.textContent?.trim()).toEqual('success');
+			expect(
+				element.shadowRoot
+					?.querySelector('.success-message')
+					?.textContent?.trim()
+			).toEqual('success');
 		});
 
 		it('should remove success text when undefined', async function () {
@@ -174,7 +186,9 @@ describe('vwc-checkbox', () => {
 		it('should show error text when errorText is set', async function () {
 			(element as any).errorText = 'error';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()).toEqual('error');
+			expect(
+				element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()
+			).toEqual('error');
 		});
 
 		it('should remove error text when undefined', async function () {
@@ -209,18 +223,18 @@ describe('vwc-checkbox', () => {
 				formId,
 				formWrapper,
 				checked,
-				componentTagName: COMPONENT_TAG
+				componentTagName: COMPONENT_TAG,
 			});
 			document.body.append(formWrapper);
 
 			const submitPromise = listenToFormSubmission(formElement);
 			formElement.requestSubmit();
-			(await submitPromise).forEach((formDataValue: any, formDataKey: string) => {
-				expect(formDataKey)
-					.toEqual(fieldName);
-				expect(formDataValue)
-					.toEqual(checked);
-			});
+			(await submitPromise).forEach(
+				(formDataValue: any, formDataKey: string) => {
+					expect(formDataKey).toEqual(fieldName);
+					expect(formDataValue).toEqual(checked);
+				}
+			);
 		});
 	});
 
@@ -235,8 +249,7 @@ describe('vwc-checkbox', () => {
 			label="I agree to" error-text="You need to accept the Terms of service"
 				aria-label="I agree to Vonage Terms of Service">
 				<a href="https://www.vonage.com/legal/" target="_blank">Vonage Terms of Service</a>
-			</${COMPONENT_TAG}>`
-			)) as Checkbox;
+			</${COMPONENT_TAG}>`)) as Checkbox;
 			await elementUpdated(element);
 		});
 
@@ -247,19 +260,31 @@ describe('vwc-checkbox', () => {
 
 			getBaseElement(element).click();
 			await elementUpdated(element);
-			expect(getBaseElement(element).classList.contains('checked')).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains('checked')
+			).toBeTruthy();
 		});
 
 		it('should check the checkbox when keypressed outside the anchor', async () => {
 			await elementUpdated(element);
 
-			element.querySelector('a')?.dispatchEvent(new KeyboardEvent('keypress', { bubbles: true, composed: true, key: 'Enter' }));
+			element.querySelector('a')?.dispatchEvent(
+				new KeyboardEvent('keypress', {
+					bubbles: true,
+					composed: true,
+					key: 'Enter',
+				})
+			);
 			await elementUpdated(element);
 			expect(getBaseElement(element).classList.contains('checked')).toBeFalsy();
 
-			getBaseElement(element)?.dispatchEvent(new KeyboardEvent('keypress', { key: ' ' }));
+			getBaseElement(element)?.dispatchEvent(
+				new KeyboardEvent('keypress', { key: ' ' })
+			);
 			await elementUpdated(element);
-			expect(getBaseElement(element).classList.contains('checked')).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains('checked')
+			).toBeTruthy();
 		});
 
 		it('should not add hide-label class to .base if slotted', async function () {
@@ -316,6 +341,5 @@ describe('vwc-checkbox', () => {
 				expect(await axe(element)).toHaveNoViolations();
 			});
 		});
-
 	});
-});
\ No newline at end of file
+});
diff --git a/libs/components/src/lib/checkbox/checkbox.template.ts b/libs/components/src/lib/checkbox/checkbox.template.ts
index 2e5bf35308..1e7b7deae9 100644
--- a/libs/components/src/lib/checkbox/checkbox.template.ts
+++ b/libs/components/src/lib/checkbox/checkbox.template.ts
@@ -1,6 +1,9 @@
 import { html, slotted, when } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
-import type { CheckboxOptions, FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type {
+	CheckboxOptions,
+	FoundationElementTemplate,
+} from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { getFeedbackTemplate } from '../../shared/patterns';
 import { Icon } from '../icon/icon';
@@ -15,7 +18,7 @@ const getClasses = ({
 	errorValidationMessage,
 	successText,
 	label,
-	slottedContent
+	slottedContent,
 }: Checkbox) =>
 	classNames(
 		'base',
@@ -25,7 +28,7 @@ const getClasses = ({
 		['disabled', Boolean(disabled)],
 		['error connotation-alert', Boolean(errorValidationMessage)],
 		['success connotation-success', !!successText],
-		['hide-label', !label && !slottedContent?.length],
+		['hide-label', !label && !slottedContent?.length]
 	);
 
 /**
@@ -34,28 +37,45 @@ const getClasses = ({
  * @param context - element definition context
  * @public
  */
-export const CheckboxTemplate: FoundationElementTemplate<ViewTemplate<Checkbox>, CheckboxOptions> = (context) => {
+export const CheckboxTemplate: FoundationElementTemplate<
+	ViewTemplate<Checkbox>,
+	CheckboxOptions
+> = (context) => {
 	const iconTag = context.tagFor(Icon);
 
-	return html`<template role="${x => x.ariaLabel ? 'presentation' : null}">
-		<div class="${getClasses}"
+	return html`<template role="${(x) => (x.ariaLabel ? 'presentation' : null)}">
+		<div
+			class="${getClasses}"
 			role="checkbox"
-			aria-label="${x => x.ariaLabel}"
-			aria-checked="${x => x.checked}"
-			aria-required="${x => x.required}"
-			aria-disabled="${x => x.disabled}"
-			aria-readonly="${x => x.readOnly}"
-			tabindex="${x => (x.tabindex !== null ? x.tabindex : x.disabled ? null : 0)}"
+			aria-label="${(x) => x.ariaLabel}"
+			aria-checked="${(x) => x.checked}"
+			aria-required="${(x) => x.required}"
+			aria-disabled="${(x) => x.disabled}"
+			aria-readonly="${(x) => x.readOnly}"
+			tabindex="${(x) =>
+				x.tabindex !== null ? x.tabindex : x.disabled ? null : 0}"
 			@keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
-			@click="${(x, c) => x.clickHandler(c.event)}">
+			@click="${(x, c) => x.clickHandler(c.event)}"
+		>
 			<div class="control">
-				${when(x => x.checked, html<Checkbox>`<${iconTag} name="check-solid" class="icon"></${iconTag}>`)}
-				${when(x => x.indeterminate, html<Checkbox>`<${iconTag} name="minus-solid" class="icon"></${iconTag}>`)}
+				${when(
+					(x) => x.checked,
+					html<Checkbox>`<${iconTag} name="check-solid" class="icon"></${iconTag}>`
+				)}
+				${when(
+					(x) => x.indeterminate,
+					html<Checkbox>`<${iconTag} name="minus-solid" class="icon"></${iconTag}>`
+				)}
 			</div>
-			${html<Checkbox>`<label>${x => x.label}<slot ${slotted('slottedContent')}></slot></label>`}
+			${html<Checkbox>`<label
+				>${(x) => x.label}<slot ${slotted('slottedContent')}></slot
+			></label>`}
 		</div>
-		${when(x => x.helperText?.length, getFeedbackTemplate('helper', context))}
-		${when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context))}
-		${when(x => x.successText, getFeedbackTemplate('success', context))}
+		${when((x) => x.helperText?.length, getFeedbackTemplate('helper', context))}
+		${when(
+			(x) => !x.successText && x.errorValidationMessage,
+			getFeedbackTemplate('error', context)
+		)}
+		${when((x) => x.successText, getFeedbackTemplate('success', context))}
 	</template>`;
 };
diff --git a/libs/components/src/lib/checkbox/checkbox.ts b/libs/components/src/lib/checkbox/checkbox.ts
index f225033b98..d74ba245e0 100644
--- a/libs/components/src/lib/checkbox/checkbox.ts
+++ b/libs/components/src/lib/checkbox/checkbox.ts
@@ -1,4 +1,7 @@
-import { applyMixins, Checkbox as FoundationCheckbox } from '@microsoft/fast-foundation';
+import {
+	applyMixins,
+	Checkbox as FoundationCheckbox,
+} from '@microsoft/fast-foundation';
 import { attr, observable } from '@microsoft/fast-element';
 import type { Connotation } from '../enums.js';
 import {
@@ -7,10 +10,9 @@ import {
 	type FormElement,
 	FormElementHelperText,
 	formElements,
-	FormElementSuccessText
+	FormElementSuccessText,
 } from '../../shared/patterns';
 
-
 export const keySpace: ' ' = ' ' as const;
 
 /**
@@ -18,8 +20,10 @@ export const keySpace: ' ' = ' ' as const;
  *
  * @public
  */
-export type CheckboxConnotation = Extract<Connotation, | Connotation.Accent | Connotation.CTA>;
-
+export type CheckboxConnotation = Extract<
+	Connotation,
+	Connotation.Accent | Connotation.CTA
+>;
 
 /**
  * @public
@@ -30,8 +34,8 @@ export type CheckboxConnotation = Extract<Connotation, | Connotation.Accent | Co
 @errorText
 @formElements
 export class Checkbox extends FoundationCheckbox {
-	@attr({attribute: 'aria-label'}) override ariaLabel: string | null = null;
-	@attr({attribute: 'tabindex'}) tabindex: string | null = null;
+	@attr({ attribute: 'aria-label' }) override ariaLabel: string | null = null;
+	@attr({ attribute: 'tabindex' }) tabindex: string | null = null;
 
 	/**
 	 * The connotation the checklist should have.
@@ -105,5 +109,9 @@ export class Checkbox extends FoundationCheckbox {
 	@observable slottedContent?: HTMLElement[];
 }
 
-export interface Checkbox extends FormElement, FormElementHelperText, ErrorText, FormElementSuccessText { }
+export interface Checkbox
+	extends FormElement,
+		FormElementHelperText,
+		ErrorText,
+		FormElementSuccessText {}
 applyMixins(Checkbox, FormElementHelperText, FormElementSuccessText);
diff --git a/libs/components/src/lib/checkbox/definition.ts b/libs/components/src/lib/checkbox/definition.ts
index 3de7c1c018..c5195a9ec1 100644
--- a/libs/components/src/lib/checkbox/definition.ts
+++ b/libs/components/src/lib/checkbox/definition.ts
@@ -6,7 +6,6 @@ import styles from './checkbox.scss?inline';
 import { Checkbox } from './checkbox';
 import { CheckboxTemplate as template } from './checkbox.template';
 
-
 /**
  * The checkbox element.
  *
diff --git a/libs/components/src/lib/checkbox/index.ts b/libs/components/src/lib/checkbox/index.ts
index a00891c99b..0c365f4ca6 100644
--- a/libs/components/src/lib/checkbox/index.ts
+++ b/libs/components/src/lib/checkbox/index.ts
@@ -1,4 +1,3 @@
 import { registerCheckbox } from './definition';
 
-
 registerCheckbox();
diff --git a/libs/components/src/lib/checkbox/ui.test.ts b/libs/components/src/lib/checkbox/ui.test.ts
index 4fb0675d2c..e01e1d5e0c 100644
--- a/libs/components/src/lib/checkbox/ui.test.ts
+++ b/libs/components/src/lib/checkbox/ui.test.ts
@@ -10,12 +10,15 @@ import {
 const components = ['checkbox', 'button'];
 
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template = extractHTMLBlocksFromReadme(
-		path.join(new URL('.', import.meta.url).pathname, 'README.md')
-	).reduce(
-		(htmlString: string, block: string) =>
-			`${htmlString} <div style="margin: 5px;">${block}</div>`, ''
-	) + `<form method="post" action="">
+	const template =
+		extractHTMLBlocksFromReadme(
+			path.join(new URL('.', import.meta.url).pathname, 'README.md')
+		).reduce(
+			(htmlString: string, block: string) =>
+				`${htmlString} <div style="margin: 5px;">${block}</div>`,
+			''
+		) +
+		`<form method="post" action="">
 				<vwc-checkbox error-text="You need to accept the Terms of service">
 				<a href="https://www.vonage.com/legal/" target="_blank">Vonage Terms of Service</a>
 				</vwc-checkbox>
diff --git a/libs/components/src/lib/combobox/combobox.spec.ts b/libs/components/src/lib/combobox/combobox.spec.ts
index 5eee42b63d..3c11b3da95 100644
--- a/libs/components/src/lib/combobox/combobox.spec.ts
+++ b/libs/components/src/lib/combobox/combobox.spec.ts
@@ -1,4 +1,10 @@
-import { axe, elementUpdated, fixture, getBaseElement, getControlElement } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getBaseElement,
+	getControlElement,
+} from '@vivid-nx/shared';
 import { Combobox } from './combobox';
 import '.';
 
@@ -7,12 +13,11 @@ const COMPONENT_TAG = 'vwc-combobox';
 describe('vwc-combobox', () => {
 	let element: Combobox;
 
-	global.ResizeObserver = jest.fn()
-		.mockImplementation(() => ({
-			observe: jest.fn(),
-			unobserve: jest.fn(),
-			disconnect: jest.fn()
-		}));
+	global.ResizeObserver = jest.fn().mockImplementation(() => ({
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+		disconnect: jest.fn(),
+	}));
 
 	beforeEach(async () => {
 		element = (await fixture(
@@ -39,16 +44,13 @@ describe('vwc-combobox', () => {
 			element.label = labelText;
 			await elementUpdated(element);
 			const labelElement = element.shadowRoot?.querySelector('label');
-			expect(labelElement)
-				.toBeTruthy();
-			expect(labelElement?.textContent?.trim())
-				.toEqual(labelText);
+			expect(labelElement).toBeTruthy();
+			expect(labelElement?.textContent?.trim()).toEqual(labelText);
 		});
 
 		it('should show label only if label is set', async function () {
 			const labelElement = element.shadowRoot?.querySelector('label');
-			expect(labelElement)
-				.toBeNull();
+			expect(labelElement).toBeNull();
 		});
 	});
 
@@ -74,14 +76,16 @@ describe('vwc-combobox', () => {
 		const placeholderText = 'Text';
 		it('should set placeholder attribute on the input', async function () {
 			element.placeholder = placeholderText;
-			const input: HTMLInputElement = getControlElement(element) as HTMLInputElement;
+			const input: HTMLInputElement = getControlElement(
+				element
+			) as HTMLInputElement;
 			input.focus();
 			input.dispatchEvent(new InputEvent('input'));
 			input.dispatchEvent(new KeyboardEvent('keyup'));
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('input')
-				?.getAttribute('placeholder'))
-				.toEqual(placeholderText);
+			expect(
+				element.shadowRoot?.querySelector('input')?.getAttribute('placeholder')
+			).toEqual(placeholderText);
 		});
 
 		it('should set class placeholder to root', async function () {
@@ -89,10 +93,9 @@ describe('vwc-combobox', () => {
 			element.dispatchEvent(new KeyboardEvent('keydown'));
 			element.dispatchEvent(new FocusEvent('focusout'));
 			await elementUpdated(element);
-			expect(getBaseElement(element)
-				.classList
-				.contains('placeholder'))
-				.toEqual(true);
+			expect(getBaseElement(element).classList.contains('placeholder')).toEqual(
+				true
+			);
 		});
 	});
 
@@ -114,7 +117,9 @@ describe('vwc-combobox', () => {
 		it('should change selection when changed', async () => {
 			element.selectedIndex = 2;
 			await elementUpdated(element);
-			expect(element.selectedOptions).toEqual([element.querySelector('option:nth-child(3)')]);
+			expect(element.selectedOptions).toEqual([
+				element.querySelector('option:nth-child(3)'),
+			]);
 		});
 	});
 
@@ -130,7 +135,9 @@ describe('vwc-combobox', () => {
 
 		it('should recieve array of options', async () => {
 			await elementUpdated(element);
-			expect(element.options[1]).toEqual(element.querySelector('option:nth-child(2)'));
+			expect(element.options[1]).toEqual(
+				element.querySelector('option:nth-child(2)')
+			);
 		});
 	});
 
@@ -146,7 +153,9 @@ describe('vwc-combobox', () => {
 
 		it('should recieve array of selectedOptions', async () => {
 			await elementUpdated(element);
-			expect(element.selectedOptions[0]).toEqual(element.querySelector('option:nth-child(2)'));
+			expect(element.selectedOptions[0]).toEqual(
+				element.querySelector('option:nth-child(2)')
+			);
 		});
 	});
 
@@ -171,7 +180,7 @@ describe('vwc-combobox', () => {
 		it('should pass html a11y test', async () => {
 			element.label = 'Combobox label';
 			await elementUpdated(element);
-			
+
 			expect(await axe(element)).toHaveNoViolations();
 		});
 	});
diff --git a/libs/components/src/lib/combobox/combobox.template.ts b/libs/components/src/lib/combobox/combobox.template.ts
index bc8213c217..d7aa0e9a07 100644
--- a/libs/components/src/lib/combobox/combobox.template.ts
+++ b/libs/components/src/lib/combobox/combobox.template.ts
@@ -1,5 +1,14 @@
-import { html, ref, slotted, ViewTemplate, when } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import {
+	html,
+	ref,
+	slotted,
+	ViewTemplate,
+	when,
+} from '@microsoft/fast-element';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { affixIconTemplateFactory } from '../../shared/patterns/affix';
 import { Popup } from '../popup/popup';
@@ -10,22 +19,18 @@ import type { Combobox } from './combobox';
  *
  */
 function renderLabel() {
-	return html<Combobox>`
-	  <label for="control" class="label">
-		  ${x => x.label}
-	  </label>`;
+	return html<Combobox>` <label for="control" class="label">
+		${(x) => x.label}
+	</label>`;
 }
 
-const getStateClasses = ({
-	disabled,
-	placeholder,
-	label,
-}: Combobox) => classNames(
-	'base',
-	['disabled', disabled],
-	['placeholder', Boolean(placeholder)],
-	['no-label', !label],
-);
+const getStateClasses = ({ disabled, placeholder, label }: Combobox) =>
+	classNames(
+		'base',
+		['disabled', disabled],
+		['placeholder', Boolean(placeholder)],
+		['no-label', !label]
+	);
 
 /**
  * @param context - element definition context
@@ -33,34 +38,33 @@ const getStateClasses = ({
 function renderInput(context: ElementDefinitionContext) {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
-	return html<Combobox>`
-		<div class="${getStateClasses}" ${ref('_anchor')}>
-			${when(x => x.label, renderLabel())}
-			<div class="fieldset">
-				<input
-					id="control"
-					class="control"
-					aria-activedescendant="${x => x.open ? x.ariaActiveDescendant : null}"
-					aria-autocomplete="${x => x.ariaAutoComplete}"
-					aria-controls="${x => x.ariaControls}"
-					aria-disabled="${x => x.ariaDisabled}"
-					aria-expanded="${x => x.ariaExpanded}"
-					aria-haspopup="listbox"
-					placeholder="${x => x.placeholder}"
-					role="combobox"
-					type="text"
-					?disabled="${x => x.disabled}"
-					:value="${x => x.value}"
-					@input="${(x, c) => x.inputHandler(c.event as InputEvent)}"
-					@keyup="${(x, c) => x.keyupHandler(c.event as KeyboardEvent)}"
-					${ref('control')}
-				/>
-				${() => affixIconTemplate('chevron-down-line')}
-			</div>
-		</div>`;
+	return html<Combobox>` <div class="${getStateClasses}" ${ref('_anchor')}>
+		${when((x) => x.label, renderLabel())}
+		<div class="fieldset">
+			<input
+				id="control"
+				class="control"
+				aria-activedescendant="${(x) =>
+					x.open ? x.ariaActiveDescendant : null}"
+				aria-autocomplete="${(x) => x.ariaAutoComplete}"
+				aria-controls="${(x) => x.ariaControls}"
+				aria-disabled="${(x) => x.ariaDisabled}"
+				aria-expanded="${(x) => x.ariaExpanded}"
+				aria-haspopup="listbox"
+				placeholder="${(x) => x.placeholder}"
+				role="combobox"
+				type="text"
+				?disabled="${(x) => x.disabled}"
+				:value="${(x) => x.value}"
+				@input="${(x, c) => x.inputHandler(c.event as InputEvent)}"
+				@keyup="${(x, c) => x.keyupHandler(c.event as KeyboardEvent)}"
+				${ref('control')}
+			/>
+			${() => affixIconTemplate('chevron-down-line')}
+		</div>
+	</div>`;
 }
 
-
 /**
  * The template for the (Combobox:class) component.
  *
@@ -75,29 +79,29 @@ export const comboboxTemplate: (
 
 	return html<Combobox>`
         <template
-            aria-disabled="${x => x.ariaDisabled}"
-            autocomplete="${x => x.autocomplete}"
-            tabindex="${x => (!x.disabled ? '0' : null)}"
+            aria-disabled="${(x) => x.ariaDisabled}"
+            autocomplete="${(x) => x.autocomplete}"
+            tabindex="${(x) => (!x.disabled ? '0' : null)}"
             @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
             @focusout="${(x, c) => x.focusoutHandler(c.event as FocusEvent)}"
             @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
         >
 			${() => renderInput(context)}
 			<${popupTag} class="popup"
-				?open="${x => x.open}"
-				placement="${x => x.placement}"
+				?open="${(x) => x.open}"
+				placement="${(x) => x.placement}"
 				strategy="absolute"
 				${ref('_popup')}>
-				<div id="${x => x.listboxId}"
+				<div id="${(x) => x.listboxId}"
 					class="listbox"
 					role="listbox"
-					?disabled="${x => x.disabled}"
+					?disabled="${(x) => x.disabled}"
 					${ref('listbox')}>
 					<slot ${slotted({
-		filter: Listbox.slottedOptionFilter as any,
-		flatten: true,
-		property: 'slottedOptions'
-	})}>
+						filter: Listbox.slottedOptionFilter as any,
+						flatten: true,
+						property: 'slottedOptions',
+					})}>
 					</slot>
 				</div>
 			</${popupTag}>
diff --git a/libs/components/src/lib/combobox/combobox.ts b/libs/components/src/lib/combobox/combobox.ts
index 5457c270ec..0943c36485 100644
--- a/libs/components/src/lib/combobox/combobox.ts
+++ b/libs/components/src/lib/combobox/combobox.ts
@@ -1,7 +1,14 @@
 import { attr } from '@microsoft/fast-element';
-import { applyMixins, Combobox as FoundationCombobox } from '@microsoft/fast-foundation';
+import {
+	applyMixins,
+	Combobox as FoundationCombobox,
+} from '@microsoft/fast-foundation';
 import type { Popup } from '../popup/popup';
-import { AffixIcon, type FormElement, formElements } from '../../shared/patterns';
+import {
+	AffixIcon,
+	type FormElement,
+	formElements,
+} from '../../shared/patterns';
 
 /**
  * Types of popup placement
@@ -34,5 +41,5 @@ export class Combobox extends FoundationCombobox {
 	}
 }
 
-export interface Combobox extends AffixIcon, FormElement { }
+export interface Combobox extends AffixIcon, FormElement {}
 applyMixins(Combobox, AffixIcon);
diff --git a/libs/components/src/lib/combobox/definition.ts b/libs/components/src/lib/combobox/definition.ts
index 309fa35858..27607fa71d 100644
--- a/libs/components/src/lib/combobox/definition.ts
+++ b/libs/components/src/lib/combobox/definition.ts
@@ -25,7 +25,12 @@ export const combobox = Combobox.compose<ComboboxOptions>({
 	},
 })();
 
-export const comboboxRegistries = [combobox, ...iconRegistries, ...popupRegistries, ...listboxOptionRegistries];
+export const comboboxRegistries = [
+	combobox,
+	...iconRegistries,
+	...popupRegistries,
+	...listboxOptionRegistries,
+];
 
 /**
  * Registers the combobox elements with the design system.
diff --git a/libs/components/src/lib/combobox/index.ts b/libs/components/src/lib/combobox/index.ts
index 63268ee678..421d66c2c3 100644
--- a/libs/components/src/lib/combobox/index.ts
+++ b/libs/components/src/lib/combobox/index.ts
@@ -1,4 +1,3 @@
 import { registerCombobox } from './definition';
 
-
 registerCombobox();
diff --git a/libs/components/src/lib/data-grid/data-grid-cell.spec.ts b/libs/components/src/lib/data-grid/data-grid-cell.spec.ts
index fe79fe913b..0483c3958f 100644
--- a/libs/components/src/lib/data-grid/data-grid-cell.spec.ts
+++ b/libs/components/src/lib/data-grid/data-grid-cell.spec.ts
@@ -5,11 +5,11 @@ import '../icon/index.ts';
 import { designSystem } from '../../shared/design-system';
 import { DataGridCell } from './data-grid-cell';
 import { DataGridCellTemplate } from './data-grid-cell.template';
-import {DataGridCellSortStates} from './data-grid.options';
+import { DataGridCellSortStates } from './data-grid.options';
 
 const dataGridCell = DataGridCell.compose<FoundationElementDefinition>({
 	baseName: 'data-grid-cell',
-	template: DataGridCellTemplate as any
+	template: DataGridCellTemplate as any,
 });
 
 designSystem.withPrefix('vwc').register(dataGridCell());
@@ -21,7 +21,9 @@ describe('vwc-data-grid-cell', () => {
 	let element: DataGridCell;
 
 	beforeEach(async () => {
-		element = (await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`)) as DataGridCell;
+		element = (await fixture(
+			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
+		)) as DataGridCell;
 	});
 
 	describe('basic', () => {
@@ -42,7 +44,7 @@ describe('vwc-data-grid-cell', () => {
 			element.columnDefinition = {
 				columnDataKey: 'name',
 				headerCellTemplate: html`<div id="header"></div>`,
-				cellTemplate: html`<div id="cell"></div>`
+				cellTemplate: html`<div id="cell"></div>`,
 			};
 		}
 
@@ -116,7 +118,7 @@ describe('vwc-data-grid-cell', () => {
 			element.rowData = { name: 'x', age: 33 };
 			element.columnDefinition = {
 				columnDataKey: 'name',
-				cellTemplate: html`<div id="cell"></div>`
+				cellTemplate: html`<div id="cell"></div>`,
 			};
 		}
 
@@ -125,7 +127,7 @@ describe('vwc-data-grid-cell', () => {
 			await elementUpdated(element);
 			const templateRendered = !!element.querySelector('#cell');
 			element.columnDefinition = {
-				columnDataKey: 'age'
+				columnDataKey: 'age',
 			};
 			await elementUpdated(element);
 			expect(templateRendered).toBeTruthy();
@@ -139,7 +141,7 @@ describe('vwc-data-grid-cell', () => {
 
 		beforeEach(async () => {
 			element.columnDefinition = {
-				columnDataKey: 'name'
+				columnDataKey: 'name',
 			};
 			elementToFocus = document.createElement('input');
 			document.body.appendChild(elementToFocus);
@@ -157,7 +159,7 @@ describe('vwc-data-grid-cell', () => {
 					columnDataKey: 'name',
 					cellFocusTargetCallback: () => {
 						return elementToFocus;
-					}
+					},
 				};
 				element.dispatchEvent(new Event('focusin'));
 				expect(document.activeElement).toEqual(elementToFocus);
@@ -169,7 +171,7 @@ describe('vwc-data-grid-cell', () => {
 					columnDataKey: 'name',
 					headerCellFocusTargetCallback: () => {
 						return elementToFocus;
-					}
+					},
 				};
 				element.dispatchEvent(new Event('focusin'));
 				expect(document.activeElement).toEqual(elementToFocus);
@@ -184,7 +186,8 @@ describe('vwc-data-grid-cell', () => {
 
 			it('should set "active" class on the base element', async () => {
 				const baseElement = getBaseElement(element);
-				const hasActiveClassBeforeFocus = baseElement?.classList.contains('active');
+				const hasActiveClassBeforeFocus =
+					baseElement?.classList.contains('active');
 				element.dispatchEvent(new Event('focusin'));
 				expect(hasActiveClassBeforeFocus).toBeFalsy();
 				expect(baseElement?.classList.contains('active')).toBeTruthy();
@@ -199,9 +202,9 @@ describe('vwc-data-grid-cell', () => {
 					cellFocusTargetCallback: () => {
 						return elementToFocus;
 					},
-					cellInternalFocusQueue: true
+					cellInternalFocusQueue: true,
 				};
-				element.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+				element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 				expect(document.activeElement).toEqual(elementToFocus);
 			});
 
@@ -212,21 +215,21 @@ describe('vwc-data-grid-cell', () => {
 					cellFocusTargetCallback: () => {
 						return elementToFocus;
 					},
-					cellInternalFocusQueue: true
+					cellInternalFocusQueue: true,
 				};
-				element.dispatchEvent(new KeyboardEvent('keydown', {key: 'F2'}));
+				element.dispatchEvent(new KeyboardEvent('keydown', { key: 'F2' }));
 				expect(document.activeElement).toEqual(elementToFocus);
 			});
 
 			it('should focus on grid-cell when escape key pressed and child is focused', async () => {
 				element.columnDefinition = {
 					columnDataKey: 'name',
-					cellInternalFocusQueue: true
+					cellInternalFocusQueue: true,
 				};
 				const childNode = document.createElement('button');
 				element.appendChild(childNode);
 				childNode.focus();
-				element.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape'}));
+				element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
 				expect(document.activeElement).toEqual(element);
 			});
 		});
@@ -238,15 +241,21 @@ describe('vwc-data-grid-cell', () => {
 		});
 
 		it('should set selected class on base when aria-selected true on init', async () => {
-			const newElement = (await fixture(`<${COMPONENT_TAG} aria-selected="true"></${COMPONENT_TAG}>`)) as DataGridCell;
+			const newElement = (await fixture(
+				`<${COMPONENT_TAG} aria-selected="true"></${COMPONENT_TAG}>`
+			)) as DataGridCell;
 			await elementUpdated(newElement);
-			expect(getBaseElement(newElement)?.classList.contains('selected')).toBeTruthy();
+			expect(
+				getBaseElement(newElement)?.classList.contains('selected')
+			).toBeTruthy();
 		});
 
 		it('should set selected class on base when aria-selected true', async () => {
 			element.setAttribute('aria-selected', 'true');
 			await elementUpdated(element);
-			expect(getBaseElement(element)?.classList.contains('selected')).toBeTruthy();
+			expect(
+				getBaseElement(element)?.classList.contains('selected')
+			).toBeTruthy();
 		});
 
 		it('should remove selected class on base when aria-selected is not true', async function () {
@@ -255,7 +264,9 @@ describe('vwc-data-grid-cell', () => {
 
 			element.setAttribute('aria-selected', 'false');
 			await elementUpdated(element);
-			expect(getBaseElement(element)?.classList.contains('selected')).toBeFalsy();
+			expect(
+				getBaseElement(element)?.classList.contains('selected')
+			).toBeFalsy();
 		});
 	});
 
@@ -304,7 +315,7 @@ describe('vwc-data-grid-cell', () => {
 			element.columnDefinition = {
 				columnDataKey: 'Name',
 				sortDirection: DataGridCellSortStates.ascending,
-				sortable: true
+				sortable: true,
 			};
 			await elementUpdated(element);
 			expect(element.ariaSort).toEqual('ascending');
@@ -314,7 +325,7 @@ describe('vwc-data-grid-cell', () => {
 			element.columnDefinition = {
 				columnDataKey: 'Name',
 				sortDirection: null,
-				sortable: true
+				sortable: true,
 			};
 			await elementUpdated(element);
 			expect(element.ariaSort).toEqual(DataGridCellSortStates.none);
@@ -324,7 +335,7 @@ describe('vwc-data-grid-cell', () => {
 			element.columnDefinition = {
 				columnDataKey: 'Name',
 				sortDirection: DataGridCellSortStates.ascending,
-				sortable: false
+				sortable: false,
 			};
 			await elementUpdated(element);
 			expect(element.ariaSort).toEqual(null);
@@ -347,10 +358,13 @@ describe('vwc-data-grid-cell', () => {
 				expect(onSortSpy).not.toHaveBeenCalled();
 			});
 
-			it.each(['Enter', ' '])('should not emit "sort" event when "%s" is pressed', async function (key) {
-				element.dispatchEvent(new KeyboardEvent('keydown', {key}));
-				expect(onSortSpy).not.toHaveBeenCalled();
-			});
+			it.each(['Enter', ' '])(
+				'should not emit "sort" event when "%s" is pressed',
+				async function (key) {
+					element.dispatchEvent(new KeyboardEvent('keydown', { key }));
+					expect(onSortSpy).not.toHaveBeenCalled();
+				}
+			);
 		});
 
 		describe('with aria-sort', () => {
@@ -363,15 +377,24 @@ describe('vwc-data-grid-cell', () => {
 				element.click();
 
 				expect(onSortSpy).toHaveBeenCalledTimes(1);
-				expect(onSortSpy.mock.calls[0][0].detail).toEqual({columnDataKey: 'Name', sortDirection: 'none'});
+				expect(onSortSpy.mock.calls[0][0].detail).toEqual({
+					columnDataKey: 'Name',
+					sortDirection: 'none',
+				});
 			});
 
-			it.each(['Enter', ' '])('should fire "sort" event when "%s" is pressed', async function (key) {
-				element.dispatchEvent(new KeyboardEvent('keydown', {key}));
+			it.each(['Enter', ' '])(
+				'should fire "sort" event when "%s" is pressed',
+				async function (key) {
+					element.dispatchEvent(new KeyboardEvent('keydown', { key }));
 
-				expect(onSortSpy).toHaveBeenCalledTimes(1);
-				expect(onSortSpy.mock.calls[0][0].detail).toEqual({columnDataKey: 'Name', sortDirection: 'none'});
-			});
+					expect(onSortSpy).toHaveBeenCalledTimes(1);
+					expect(onSortSpy.mock.calls[0][0].detail).toEqual({
+						columnDataKey: 'Name',
+						sortDirection: 'none',
+					});
+				}
+			);
 		});
 
 		describe('with columnDefinition', () => {
@@ -387,7 +410,10 @@ describe('vwc-data-grid-cell', () => {
 			it('should fire "sort" event when clicked with data key from config', async function () {
 				element.click();
 				expect(onSortSpy).toHaveBeenCalledTimes(1);
-				expect(onSortSpy.mock.calls[0][0].detail).toEqual({columnDataKey: 'Not Name', sortDirection: 'ascending'});
+				expect(onSortSpy.mock.calls[0][0].detail).toEqual({
+					columnDataKey: 'Not Name',
+					sortDirection: 'ascending',
+				});
 			});
 		});
 	});
@@ -401,7 +427,12 @@ describe('vwc-data-grid-cell', () => {
 			await elementUpdated(element);
 			onCellClickSpy = jest.fn();
 			element.addEventListener('cell-click', onCellClickSpy);
-			expectedDetail = {cell: element, row: element.parentElement, isHeaderCell: false, columnDataKey: 'Name'};
+			expectedDetail = {
+				cell: element,
+				row: element.parentElement,
+				isHeaderCell: false,
+				columnDataKey: 'Name',
+			};
 		});
 
 		it('should emit "cell-click" event when clicked', async () => {
@@ -410,7 +441,7 @@ describe('vwc-data-grid-cell', () => {
 			expect(onCellClickSpy.mock.calls[0][0].detail).toEqual(expectedDetail);
 		});
 
-		describe.each(['Enter', ' '])('when "%s" is pressed',  (key) => {
+		describe.each(['Enter', ' '])('when "%s" is pressed', (key) => {
 			it('should emit "cell-click" event', async () => {
 				element.dispatchEvent(new KeyboardEvent('keydown', { key }));
 				expect(onCellClickSpy).toHaveBeenCalledTimes(1);
@@ -420,7 +451,7 @@ describe('vwc-data-grid-cell', () => {
 			it('should not emit "cell-click" event if the cell has an internal focus queue', async () => {
 				element.columnDefinition = {
 					cellInternalFocusQueue: true,
-					columnDataKey: 'Name'
+					columnDataKey: 'Name',
 				};
 				element.dispatchEvent(new KeyboardEvent('keydown', { key }));
 				expect(onCellClickSpy).not.toHaveBeenCalled();
@@ -430,7 +461,7 @@ describe('vwc-data-grid-cell', () => {
 				element.cellType = 'columnheader';
 				element.columnDefinition = {
 					headerCellInternalFocusQueue: true,
-					columnDataKey: 'Name'
+					columnDataKey: 'Name',
 				};
 				element.dispatchEvent(new KeyboardEvent('keydown', { key }));
 				expect(onCellClickSpy).not.toHaveBeenCalled();
@@ -457,7 +488,7 @@ describe('vwc-data-grid-cell', () => {
 			element.columnDefinition = {
 				columnDataKey: 'Name',
 				sortDirection: DataGridCellSortStates.ascending,
-				sortable: true
+				sortable: true,
 			};
 			await elementUpdated(element);
 
@@ -465,4 +496,3 @@ describe('vwc-data-grid-cell', () => {
 		});
 	});
 });
-
diff --git a/libs/components/src/lib/data-grid/data-grid-cell.template.ts b/libs/components/src/lib/data-grid/data-grid-cell.template.ts
index 9308769702..bd5fb88299 100644
--- a/libs/components/src/lib/data-grid/data-grid-cell.template.ts
+++ b/libs/components/src/lib/data-grid/data-grid-cell.template.ts
@@ -1,29 +1,42 @@
-import {html, ViewTemplate, when} from '@microsoft/fast-element';
-import type {ElementDefinitionContext} from '@microsoft/fast-foundation';
+import { html, ViewTemplate, when } from '@microsoft/fast-element';
+import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
 import { keyEnter, keySpace } from '@microsoft/fast-web-utilities';
-import {Icon} from '../icon/icon';
-import {DataGridCellRole, DataGridCellSortStates} from './data-grid.options';
-import type {DataGridCell} from './data-grid-cell';
+import { Icon } from '../icon/icon';
+import { DataGridCellRole, DataGridCellSortStates } from './data-grid.options';
+import type { DataGridCell } from './data-grid-cell';
 
 function shouldShowSortIcons<T extends DataGridCell>(x: T): boolean {
 	if (x.columnDefinition) {
-		x.ariaSort = !x.columnDefinition.sortable ? null : x.columnDefinition.sortDirection ?
-			x.columnDefinition.sortDirection : DataGridCellSortStates.none;
+		x.ariaSort = !x.columnDefinition.sortable
+			? null
+			: x.columnDefinition.sortDirection
+			? x.columnDefinition.sortDirection
+			: DataGridCellSortStates.none;
 	}
-	return x.cellType === 'columnheader' && x.ariaSort !== null && x.ariaSort !== DataGridCellSortStates.other;
+	return (
+		x.cellType === 'columnheader' &&
+		x.ariaSort !== null &&
+		x.ariaSort !== DataGridCellSortStates.other
+	);
 }
 
 function getSortIcon<T extends DataGridCell>(x: T): string {
-	return x.ariaSort === DataGridCellSortStates.ascending ? 'sort-asc-solid' :
-		x.ariaSort === DataGridCellSortStates.descending ? 'sort-desc-solid' : 'sort-solid';
+	return x.ariaSort === DataGridCellSortStates.ascending
+		? 'sort-asc-solid'
+		: x.ariaSort === DataGridCellSortStates.descending
+		? 'sort-desc-solid'
+		: 'sort-solid';
 }
 function renderSortIcons<T extends DataGridCell>(c: ElementDefinitionContext) {
 	const iconTag = c.tagFor(Icon);
 	return html<T>`
-			${when(shouldShowSortIcons, html<T>`
+		${when(
+			shouldShowSortIcons,
+			html<T>`
 				<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
-			`)}
-		`;
+			`
+		)}
+	`;
 }
 
 function handleKeyDown<T extends DataGridCell>(x: T, e: KeyboardEvent) {
@@ -33,19 +46,20 @@ function handleKeyDown<T extends DataGridCell>(x: T, e: KeyboardEvent) {
 	return true;
 }
 
-export function DataGridCellTemplate<T extends DataGridCell>(context: ElementDefinitionContext): ViewTemplate<T> {
+export function DataGridCellTemplate<T extends DataGridCell>(
+	context: ElementDefinitionContext
+): ViewTemplate<T> {
 	return html<T>`
-        <template
-            tabindex="-1"
-            role="${x => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
-						@click="${(x) => x._handleInteraction()}"
-						@keydown="${(x, c) => handleKeyDown(x, c.event as KeyboardEvent)}"
-        >
-					<div class="base">
-							<slot></slot>
-							${_ => renderSortIcons(context)}
-					</div>
-
-        </template>
-    `;
+		<template
+			tabindex="-1"
+			role="${(x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
+			@click="${(x) => x._handleInteraction()}"
+			@keydown="${(x, c) => handleKeyDown(x, c.event as KeyboardEvent)}"
+		>
+			<div class="base">
+				<slot></slot>
+				${(_) => renderSortIcons(context)}
+			</div>
+		</template>
+	`;
 }
diff --git a/libs/components/src/lib/data-grid/data-grid-cell.ts b/libs/components/src/lib/data-grid/data-grid-cell.ts
index 5f4dc3aacc..165663d94f 100644
--- a/libs/components/src/lib/data-grid/data-grid-cell.ts
+++ b/libs/components/src/lib/data-grid/data-grid-cell.ts
@@ -27,7 +27,8 @@ export class DataGridCell extends FoundationDataGridCell {
 	 * @public
 	 * HTML Attribute: aria-selected
 	 */
-	@attr({ attribute: 'aria-selected', mode: 'fromView' }) override ariaSelected: string | null = null;
+	@attr({ attribute: 'aria-selected', mode: 'fromView' })
+	override ariaSelected: string | null = null;
 
 	/**
 	 * Indicates the sort status.
@@ -38,7 +39,10 @@ export class DataGridCell extends FoundationDataGridCell {
 	@attr({ attribute: 'aria-sort' }) override ariaSort: string | null = null;
 
 	ariaSelectedChanged(_: string | null, selectedState: string | null) {
-		this.shadowRoot!.querySelector('.base')?.classList.toggle('selected', selectedState === 'true');
+		this.shadowRoot!.querySelector('.base')?.classList.toggle(
+			'selected',
+			selectedState === 'true'
+		);
 	}
 
 	override connectedCallback() {
diff --git a/libs/components/src/lib/data-grid/data-grid-row.spec.ts b/libs/components/src/lib/data-grid/data-grid-row.spec.ts
index 96af15c2ba..cf4d7287db 100644
--- a/libs/components/src/lib/data-grid/data-grid-row.spec.ts
+++ b/libs/components/src/lib/data-grid/data-grid-row.spec.ts
@@ -7,7 +7,7 @@ import { DataGridRowTemplate } from './data-grid-row.template';
 
 const dataGridRow = DataGridRow.compose<FoundationElementDefinition>({
 	baseName: 'data-grid-row',
-	template: DataGridRowTemplate as any
+	template: DataGridRowTemplate as any,
 });
 
 designSystem.withPrefix('vwc').register(dataGridRow());
@@ -18,7 +18,9 @@ describe('vwc-data-grid-row', () => {
 	let element: DataGridRow;
 
 	beforeEach(async () => {
-		element = (await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`)) as DataGridRow;
+		element = (await fixture(
+			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
+		)) as DataGridRow;
 	});
 
 	// TODO::adds grid column style
@@ -49,7 +51,9 @@ describe('vwc-data-grid-row', () => {
 		it('should reflect grid-template-columns', async () => {
 			element.gridTemplateColumns = '1fr 1fr 1fr';
 			await elementUpdated(element);
-			expect(element.getAttribute('grid-template-columns')).toEqual('1fr 1fr 1fr');
+			expect(element.getAttribute('grid-template-columns')).toEqual(
+				'1fr 1fr 1fr'
+			);
 		});
 	});
 
@@ -57,37 +61,37 @@ describe('vwc-data-grid-row', () => {
 		it('should set grid-column on cells', async () => {
 			element.columnDefinitions = [
 				{ columnDataKey: 'name' },
-				{ columnDataKey: 'age' }
+				{ columnDataKey: 'age' },
 			];
 			await elementUpdated(element);
-			const allHaveExpectedGridColumn = Array.from(element.querySelectorAll('undefined'))
-				.reduce((acc, child, index) => {
-					return acc && child.getAttribute('grid-column') === `${index + 1}`;
-				}, true);
+			const allHaveExpectedGridColumn = Array.from(
+				element.querySelectorAll('undefined')
+			).reduce((acc, child, index) => {
+				return acc && child.getAttribute('grid-column') === `${index + 1}`;
+			}, true);
 			expect(allHaveExpectedGridColumn).toBeTruthy();
 		});
 	});
 
 	describe('columnDefinitions', () => {
-
 		it('should render undefined cells if cells template undefined', async () => {
 			element.columnDefinitions = [
 				{ columnDataKey: 'name' },
-				{ columnDataKey: 'age' }
+				{ columnDataKey: 'age' },
 			];
 			await elementUpdated(element);
 			expect(element.querySelectorAll('undefined').length).toEqual(2);
 		});
-
 	});
 
 	describe('gridTemplateColumns', () => {
 		it('should set "grid-template-columns" on base element according to gridTemplateColumns', async function () {
-
 			element.gridTemplateColumns = '1fr 1fr 1fr';
 			await elementUpdated(element);
 
-			expect(getBaseElement(element).style['gridTemplateColumns']).toEqual('1fr 1fr 1fr');
+			expect(getBaseElement(element).style['gridTemplateColumns']).toEqual(
+				'1fr 1fr 1fr'
+			);
 		});
 	});
 
@@ -96,7 +100,7 @@ describe('vwc-data-grid-row', () => {
 			const dataGridCellTagName = 'something-custom';
 			element.columnDefinitions = [
 				{ columnDataKey: 'name' },
-				{ columnDataKey: 'age' }
+				{ columnDataKey: 'age' },
 			];
 			element.cellItemTemplate = html`<${dataGridCellTagName}></${dataGridCellTagName}>`;
 			await elementUpdated(element);
@@ -107,7 +111,7 @@ describe('vwc-data-grid-row', () => {
 			const dataGridCellTagName = 'something-custom';
 			element.columnDefinitions = [
 				{ columnDataKey: 'name', isRowHeader: true },
-				{ columnDataKey: 'age' }
+				{ columnDataKey: 'age' },
 			];
 			element.rowType = 'header';
 			element.headerCellItemTemplate = html`<${dataGridCellTagName}></${dataGridCellTagName}>`;
@@ -118,7 +122,7 @@ describe('vwc-data-grid-row', () => {
 
 	describe('row-focused event', () => {
 		it('should fire the focused event when one of the cells is focused', async () => {
-			const spy  = jest.fn();
+			const spy = jest.fn();
 			element.addEventListener('row-focused', spy);
 			element.dispatchEvent(new FocusEvent('cell-focused'));
 			expect(spy).toHaveBeenCalled();
@@ -130,22 +134,27 @@ describe('vwc-data-grid-row', () => {
 			const dataGridCellTagName = 'button';
 			element.columnDefinitions = [
 				{ columnDataKey: 'name' },
-				{ columnDataKey: 'age' }
+				{ columnDataKey: 'age' },
 			];
 			element.cellItemTemplate = html`<${dataGridCellTagName} role="cell"></${dataGridCellTagName}>`;
 			await elementUpdated(element);
 			const cells = Array.from(element.querySelectorAll(dataGridCellTagName));
 			const focusedElementBeforeArrowKey = document.activeElement;
-			const rowCellFocused = cells.includes(focusedElementBeforeArrowKey as any);
+			const rowCellFocused = cells.includes(
+				focusedElementBeforeArrowKey as any
+			);
 
 			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
 			const firstCellFocused = cells[0] === document.activeElement;
 
-			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+			element.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowRight' })
+			);
 			const secondCellFocused = cells[1] === document.activeElement;
 
 			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
-			const firstCellFocusedAfterArrowLeft = cells[0] === document.activeElement;
+			const firstCellFocusedAfterArrowLeft =
+				cells[0] === document.activeElement;
 
 			expect(rowCellFocused).toBeFalsy();
 			expect(firstCellFocused).toBeTruthy();
@@ -183,7 +192,9 @@ describe('vwc-data-grid-row', () => {
 		it('should set selected class on base element', async function () {
 			element.ariaSelected = 'true';
 			await elementUpdated(element);
-			expect(getBaseElement(element).classList.contains('selected')).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains('selected')
+			).toBeTruthy();
 		});
 
 		it('should remove selected class on base element when false', async function () {
@@ -191,7 +202,9 @@ describe('vwc-data-grid-row', () => {
 			await elementUpdated(element);
 			element.ariaSelected = 'false';
 			await elementUpdated(element);
-			expect(getBaseElement(element).classList.contains('selected')).toBeFalsy();
+			expect(
+				getBaseElement(element).classList.contains('selected')
+			).toBeFalsy();
 		});
 	});
 
diff --git a/libs/components/src/lib/data-grid/data-grid-row.template.ts b/libs/components/src/lib/data-grid/data-grid-row.template.ts
index c590f32f5e..731228d8d5 100644
--- a/libs/components/src/lib/data-grid/data-grid-row.template.ts
+++ b/libs/components/src/lib/data-grid/data-grid-row.template.ts
@@ -5,24 +5,24 @@ import type { DataGridRow } from './data-grid-row';
 
 function createCellItemTemplate(context: ElementDefinitionContext) {
 	const cellTag = context.tagFor(DataGridCell);
-	return html `
+	return html`
     <${cellTag}
-        cell-type="${x => (x.isRowHeader ? 'rowheader' : undefined)}"
+        cell-type="${(x) => (x.isRowHeader ? 'rowheader' : undefined)}"
         grid-column="${(_, c) => c.index + 1}"
         :rowData="${(_, c) => c.parent.rowData}"
-        :columnDefinition="${x => x}"
-				selected="${(_, c) => c.parent.ariaSelected === 'true' ? true : null}"
+        :columnDefinition="${(x) => x}"
+				selected="${(_, c) => (c.parent.ariaSelected === 'true' ? true : null)}"
     ></${cellTag}>
 `;
 }
 
 function createHeaderCellItemTemplate(context: ElementDefinitionContext) {
 	const cellTag = context.tagFor(DataGridCell);
-	return html `
+	return html`
     <${cellTag}
         cell-type="columnheader"
         grid-column="${(_, c) => c.index + 1}"
-        :columnDefinition="${x => x}"
+        :columnDefinition="${(x) => x}"
     ></${cellTag}>
 `;
 }
@@ -36,24 +36,25 @@ function createHeaderCellItemTemplate(context: ElementDefinitionContext) {
 export const DataGridRowTemplate = (context: ElementDefinitionContext) => {
 	const cellItemTemplate = createCellItemTemplate(context);
 	const headerCellItemTemplate = createHeaderCellItemTemplate(context);
-	return html<DataGridRow> `
-        <template
-            role="row"
-            class="${x => (x.rowType !== 'default' ? x.rowType : '')}"
-            :defaultCellItemTemplate="${cellItemTemplate}"
-            :defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
-            ${children({
-		property: 'cellElements',
-		filter: elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]'),
-	})}
-        >
-					<div class="base ${x => (x.ariaSelected === 'true' ? 'selected' : '')}"
-							 style="grid-template-columns: ${x => x.gridTemplateColumns};"
-					>
-            <slot ${slotted('slottedCellElements')}></slot>
-					</div>
-        </template>
-    `;
+	return html<DataGridRow>`
+		<template
+			role="row"
+			class="${(x) => (x.rowType !== 'default' ? x.rowType : '')}"
+			:defaultCellItemTemplate="${cellItemTemplate}"
+			:defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
+			${children({
+				property: 'cellElements',
+				filter: elements(
+					'[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]'
+				),
+			})}
+		>
+			<div
+				class="base ${(x) => (x.ariaSelected === 'true' ? 'selected' : '')}"
+				style="grid-template-columns: ${(x) => x.gridTemplateColumns};"
+			>
+				<slot ${slotted('slottedCellElements')}></slot>
+			</div>
+		</template>
+	`;
 };
-
-
diff --git a/libs/components/src/lib/data-grid/data-grid-row.ts b/libs/components/src/lib/data-grid/data-grid-row.ts
index ce5640106e..a6cd06240a 100644
--- a/libs/components/src/lib/data-grid/data-grid-row.ts
+++ b/libs/components/src/lib/data-grid/data-grid-row.ts
@@ -1,5 +1,5 @@
 import { DataGridRow as FoundationDataGridRow } from '@microsoft/fast-foundation';
-import {attr} from '@microsoft/fast-element';
+import { attr } from '@microsoft/fast-element';
 
 /**
  * @public
@@ -14,6 +14,6 @@ export class DataGridRow extends FoundationDataGridRow {
 	 * @public
 	 * HTML Attribute: aria-selected
 	 */
-	@attr({attribute: 'aria-selected'})
+	@attr({ attribute: 'aria-selected' })
 	override ariaSelected: string | null = null;
 }
diff --git a/libs/components/src/lib/data-grid/data-grid.options.ts b/libs/components/src/lib/data-grid/data-grid.options.ts
index 79acd1576c..cfad9ccd17 100644
--- a/libs/components/src/lib/data-grid/data-grid.options.ts
+++ b/libs/components/src/lib/data-grid/data-grid.options.ts
@@ -10,7 +10,7 @@ export const DataGridCellSortStates = {
 	none: 'none',
 	ascending: 'ascending',
 	descending: 'descending',
-	other: 'other'
+	other: 'other',
 } as const;
 
 export type DataGridCellSortStates = ValuesOf<typeof DataGridCellSortStates>;
@@ -102,4 +102,3 @@ export const DataGridCellRole = {
  * @public
  */
 export type DataGridCellRole = ValuesOf<typeof DataGridCellRole>;
-
diff --git a/libs/components/src/lib/data-grid/data-grid.spec.ts b/libs/components/src/lib/data-grid/data-grid.spec.ts
index 36dc7d1a70..7e9241fbbc 100644
--- a/libs/components/src/lib/data-grid/data-grid.spec.ts
+++ b/libs/components/src/lib/data-grid/data-grid.spec.ts
@@ -2,13 +2,12 @@ import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { html, ViewTemplate } from '@microsoft/fast-element';
 import { axe, elementUpdated, fixture } from '@vivid-nx/shared';
 import { designSystem } from '../../shared/design-system';
-import {DataGrid, DataGridSelectionMode} from './data-grid';
+import { DataGrid, DataGridSelectionMode } from './data-grid';
 import { DataGridTemplate } from './data-grid.template';
 
-
 const dataGrid = DataGrid.compose<FoundationElementDefinition>({
 	baseName: 'data-grid',
-	template: DataGridTemplate as any
+	template: DataGridTemplate as any,
 });
 
 designSystem.withPrefix('vwc').register(dataGrid());
@@ -67,7 +66,8 @@ describe('vwc-data-grid', () => {
 	describe('rowsData', () => {
 		it('should generate column definitions when set', async () => {
 			const expectedColumnDef = [
-				{'columnDataKey': 'id', 'gridColumn': '0'}, {'columnDataKey': 'name', 'gridColumn': '1'}
+				{ columnDataKey: 'id', gridColumn: '0' },
+				{ columnDataKey: 'name', gridColumn: '1' },
 			];
 			element.rowsData = [{ id: '1', name: 'Person 1' }];
 			expect(element.columnDefinitions).toEqual(expectedColumnDef);
@@ -84,8 +84,10 @@ describe('vwc-data-grid', () => {
 			};
 
 			const expectedColumnDef = [
-				{'columnDataKey': 'id', 'gridColumn': '0'}, {'columnDataKey': 'name', 'gridColumn': '1'},
-				{'columnDataKey': 'age', 'gridColumn': '2'}, {'columnDataKey': 'address.city', 'gridColumn': '3'}
+				{ columnDataKey: 'id', gridColumn: '0' },
+				{ columnDataKey: 'name', gridColumn: '1' },
+				{ columnDataKey: 'age', gridColumn: '2' },
+				{ columnDataKey: 'address.city', gridColumn: '3' },
 			];
 
 			expect(DataGrid.generateColumns(rowData)).toEqual(expectedColumnDef);
@@ -98,13 +100,15 @@ describe('vwc-data-grid', () => {
 				age: 20,
 				'address.city': 'City 1',
 			};
-			Object.defineProperty(rowData, 'nonEnumerable',{
-				value : '80,000$',
-				enumerable: false
+			Object.defineProperty(rowData, 'nonEnumerable', {
+				value: '80,000$',
+				enumerable: false,
 			});
 			const expectedColumnDef = [
-				{'columnDataKey': 'id', 'gridColumn': '0'}, {'columnDataKey': 'name', 'gridColumn': '1'},
-				{'columnDataKey': 'age', 'gridColumn': '2'}, {'columnDataKey': 'address.city', 'gridColumn': '3'}
+				{ columnDataKey: 'id', gridColumn: '0' },
+				{ columnDataKey: 'name', gridColumn: '1' },
+				{ columnDataKey: 'age', gridColumn: '2' },
+				{ columnDataKey: 'address.city', gridColumn: '3' },
 			];
 
 			expect(DataGrid.generateColumns(rowData)).toEqual(expectedColumnDef);
@@ -124,11 +128,15 @@ describe('vwc-data-grid', () => {
 			generatedHeader = element.querySelector(rowElementTag) as any;
 		});
 		it('should generate the header row with columnDefinition', async () => {
-			expect(generatedHeader.columnDefinitions).toEqual(element.columnDefinitions);
+			expect(generatedHeader.columnDefinitions).toEqual(
+				element.columnDefinitions
+			);
 		});
 
 		it('should generate the header row with gridTemplateColumns', async () => {
-			expect(generatedHeader.gridTemplateColumns).toEqual(element.gridTemplateColumns);
+			expect(generatedHeader.gridTemplateColumns).toEqual(
+				element.gridTemplateColumns
+			);
 		});
 
 		it('should generate the header row with sticky', async () => {
@@ -181,7 +189,8 @@ describe('vwc-data-grid', () => {
 
 			element.rowElementTag = rowElementTag;
 			element.columnDefinitions = [
-				{'columnDataKey': 'id', 'title': 'Column 1'}, {'columnDataKey': 'name', 'title': 'Column 2'}
+				{ columnDataKey: 'id', title: 'Column 1' },
+				{ columnDataKey: 'name', title: 'Column 2' },
 			];
 
 			const generatedHeader = element.querySelector(rowElementTag) as any;
@@ -194,7 +203,8 @@ describe('vwc-data-grid', () => {
 			element.rowElementTag = rowElementTag;
 			element.rowItemTemplate = html`<${rowElementTag} role="row"></${rowElementTag}>`;
 			const columnDefinitions = [
-				{'columnDataKey': 'id', 'gridColumn': '3'}, {'columnDataKey': 'name', 'gridColumn': '5'}
+				{ columnDataKey: 'id', gridColumn: '3' },
+				{ columnDataKey: 'name', gridColumn: '5' },
 			];
 			element.columnDefinitions = columnDefinitions;
 			element.rowsData = [
@@ -210,8 +220,12 @@ describe('vwc-data-grid', () => {
 			rows.forEach((row: any, index: number) => {
 				expect(row.columnDefinitions).toEqual(columnDefinitions);
 				expect(row.rowIndex).toEqual(index);
-				expect(row.gridTemplateColumns)
-					.toEqual(element.rowsData.reduce((acc: string, _, index) => acc + (index > 0 ? ' 1fr' : '1fr'), ''));
+				expect(row.gridTemplateColumns).toEqual(
+					element.rowsData.reduce(
+						(acc: string, _, index) => acc + (index > 0 ? ' 1fr' : '1fr'),
+						''
+					)
+				);
 			});
 		});
 	});
@@ -227,7 +241,9 @@ describe('vwc-data-grid', () => {
 				{ id: '2', name: 'Person 2' },
 			];
 			await elementUpdated(element);
-			expect(element.querySelectorAll(rowTag).length).toEqual(element.rowsData.length);
+			expect(element.querySelectorAll(rowTag).length).toEqual(
+				element.rowsData.length
+			);
 		});
 	});
 
@@ -244,7 +260,9 @@ describe('vwc-data-grid', () => {
 				{ id: '2', name: 'Person 2' },
 			];
 			await elementUpdated(element);
-			const expectedFocsedCell = Array.from(element.querySelectorAll(element.rowElementTag))
+			const expectedFocsedCell = Array.from(
+				element.querySelectorAll(element.rowElementTag)
+			)
 				.at(-1)
 				?.querySelector('button');
 			element.focusRowIndex = 2;
@@ -262,7 +280,9 @@ describe('vwc-data-grid', () => {
 				{ id: '2', name: 'Person 2' },
 			];
 			await elementUpdated(element);
-			const expectedFocsedCell = Array.from(element.querySelectorAll(element.rowElementTag))
+			const expectedFocsedCell = Array.from(
+				element.querySelectorAll(element.rowElementTag)
+			)
 				.at(-1)
 				?.querySelector('.second');
 			element.focusRowIndex = 2;
@@ -273,7 +293,6 @@ describe('vwc-data-grid', () => {
 	});
 
 	describe('rowElementTag', () => {
-
 		it('should use rowElementTag for the header row element', async () => {
 			const rowElementTag = 'just-for-test';
 			element.rowElementTag = rowElementTag;
@@ -290,26 +309,35 @@ describe('vwc-data-grid', () => {
 		it('should reflect selectionMode', async () => {
 			element.selectionMode = DataGridSelectionMode.singleRow;
 			await elementUpdated(element);
-			expect(element.getAttribute('selection-mode')).toEqual(DataGridSelectionMode.singleRow);
+			expect(element.getAttribute('selection-mode')).toEqual(
+				DataGridSelectionMode.singleRow
+			);
 		});
 
 		it('should init without aria-multiselectable', async function () {
 			expect(element.hasAttribute('aria-multiselectable')).toEqual(false);
 		});
 
-		it.each([DataGridSelectionMode.multiCell, DataGridSelectionMode.multiRow])
-		('should set aria-multiselectable="true" when multiple mode is selected', async (selectionMode) => {
-			element.selectionMode = selectionMode;
-			await elementUpdated(element);
-			expect(element.getAttribute('aria-multiselectable')).toEqual('true');
-		});
-
-		it.each([DataGridSelectionMode.singleCell, DataGridSelectionMode.singleRow])
-		('should set aria-multiselectable="false" when single mode is selected', async (selectionMode) => {
-			element.selectionMode = selectionMode;
-			await elementUpdated(element);
-			expect(element.getAttribute('aria-multiselectable')).toEqual('false');
-		});
+		it.each([DataGridSelectionMode.multiCell, DataGridSelectionMode.multiRow])(
+			'should set aria-multiselectable="true" when multiple mode is selected',
+			async (selectionMode) => {
+				element.selectionMode = selectionMode;
+				await elementUpdated(element);
+				expect(element.getAttribute('aria-multiselectable')).toEqual('true');
+			}
+		);
+
+		it.each([
+			DataGridSelectionMode.singleCell,
+			DataGridSelectionMode.singleRow,
+		])(
+			'should set aria-multiselectable="false" when single mode is selected',
+			async (selectionMode) => {
+				element.selectionMode = selectionMode;
+				await elementUpdated(element);
+				expect(element.getAttribute('aria-multiselectable')).toEqual('false');
+			}
+		);
 
 		it('should remove aria-multiselectable when selectionMode is "none"', async function () {
 			element.setAttribute('aria-multiselectable', 'true');
@@ -327,7 +355,9 @@ describe('vwc-data-grid', () => {
 				{ id: '2', name: 'Person 2' },
 			];
 			await elementUpdated(element);
-			const expected = Array.from(element.querySelectorAll(element.rowElementTag));
+			const expected = Array.from(
+				element.querySelectorAll(element.rowElementTag)
+			);
 			expected.splice(0, 1);
 			expect(element.rowElements).toEqual(expected);
 		});
diff --git a/libs/components/src/lib/data-grid/data-grid.template.ts b/libs/components/src/lib/data-grid/data-grid.template.ts
index d0f79574c9..d4908c1f89 100644
--- a/libs/components/src/lib/data-grid/data-grid.template.ts
+++ b/libs/components/src/lib/data-grid/data-grid.template.ts
@@ -1,5 +1,11 @@
 import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
-import { children, elements, ExecutionContext, html, slotted } from '@microsoft/fast-element';
+import {
+	children,
+	elements,
+	ExecutionContext,
+	html,
+	slotted,
+} from '@microsoft/fast-element';
 import { DataGridRow } from './data-grid-row';
 import type { DataGrid } from './data-grid';
 import { DataGridSelectionMode } from './data-grid';
@@ -9,7 +15,7 @@ function createRowItemTemplate(context: ElementDefinitionContext) {
 	const rowTag = context.tagFor(DataGridRow);
 	return html`
     <${rowTag}
-        :rowData="${x => x}"
+        :rowData="${(x) => x}"
         :cellItemTemplate="${(_, c) => c.parent.cellItemTemplate}"
         :headerCellItemTemplate="${(_, c) => c.parent.headerCellItemTemplate}"
     ></${rowTag}>
@@ -17,21 +23,33 @@ function createRowItemTemplate(context: ElementDefinitionContext) {
 }
 
 function getMultiSelectAriaState(x: DataGrid) {
-	return (x.selectionMode === undefined || x.selectionMode === DataGridSelectionMode.none) ? null :
-		x.selectionMode.includes('multi') ? 'true' : 'false';
+	return x.selectionMode === undefined ||
+		x.selectionMode === DataGridSelectionMode.none
+		? null
+		: x.selectionMode.includes('multi')
+		? 'true'
+		: 'false';
 }
 
 function setHeaderRow(x: DataGrid) {
 	if (x.columnDefinitions === null) {
-		const headerRow = x.querySelector('[cell-type="columnheader"]')?.parentElement;
+		const headerRow = x.querySelector(
+			'[cell-type="columnheader"]'
+		)?.parentElement;
 		if (headerRow) {
-			const rowType = x.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : DataGridRowTypes.header;
+			const rowType =
+				x.generateHeader === GenerateHeaderOptions.sticky
+					? DataGridRowTypes.stickyHeader
+					: DataGridRowTypes.header;
 			headerRow.setAttribute('row-type', rowType);
 		}
 	}
 }
 
-function handleColumnSort<T extends DataGrid>(_: T, { event }: ExecutionContext) {
+function handleColumnSort<T extends DataGrid>(
+	_: T,
+	{ event }: ExecutionContext
+) {
 	event.stopPropagation();
 }
 
@@ -44,24 +62,23 @@ function handleColumnSort<T extends DataGrid>(_: T, { event }: ExecutionContext)
 export const DataGridTemplate = (context: ElementDefinitionContext) => {
 	const rowItemTemplate = createRowItemTemplate(context);
 	const rowTag = context.tagFor(DataGridRow);
-	return html<DataGrid> `
-        <template
-						aria-multiselectable="${(getMultiSelectAriaState)}"
-            role="grid"
-            tabindex="0"
-						@sort="${handleColumnSort}"
-            :rowElementTag="${() => rowTag}"
-            :defaultRowItemTemplate="${rowItemTemplate}"
-            ${children({
-		property: 'rowElements',
-		filter: elements('[role=row]'),
-	})}
-        >
+	return html<DataGrid>`
+		<template
+			aria-multiselectable="${getMultiSelectAriaState}"
+			role="grid"
+			tabindex="0"
+			@sort="${handleColumnSort}"
+			:rowElementTag="${() => rowTag}"
+			:defaultRowItemTemplate="${rowItemTemplate}"
+			${children({
+				property: 'rowElements',
+				filter: elements('[role=row]'),
+			})}
+		>
 			<div class="base">
 				${setHeaderRow}
 				<slot ${slotted('slottedRowElements')}></slot>
 			</div>
-        </template>
-    `;
+		</template>
+	`;
 };
-
diff --git a/libs/components/src/lib/data-grid/data-grid.ts b/libs/components/src/lib/data-grid/data-grid.ts
index 7e0ca8e650..6847409050 100644
--- a/libs/components/src/lib/data-grid/data-grid.ts
+++ b/libs/components/src/lib/data-grid/data-grid.ts
@@ -5,10 +5,10 @@ import type { DataGridRow } from './data-grid-row';
 import { DataGridRowTypes, GenerateHeaderOptions } from './data-grid.options';
 
 interface SelectionMetaData {
-	target: EventTarget | null
-	ctrlKey: boolean,
-	shiftKey: boolean,
-	metaKey: boolean
+	target: EventTarget | null;
+	ctrlKey: boolean;
+	shiftKey: boolean;
+	metaKey: boolean;
 }
 
 export const DataGridSelectionMode = {
@@ -43,7 +43,10 @@ export class DataGrid extends FoundationDataGrid {
 	 *
 	 * @internal
 	 */
-	slottedRowElementsChanged(_oldValue: HTMLElement[], _newValue: HTMLElement[]) {
+	slottedRowElementsChanged(
+		_oldValue: HTMLElement[],
+		_newValue: HTMLElement[]
+	) {
 		this.#initSelections();
 	}
 
@@ -53,17 +56,21 @@ export class DataGrid extends FoundationDataGrid {
 	 * @public
 	 * HTML Attribute: selection-mode
 	 */
-	@attr({attribute: 'selection-mode'})
-		selectionMode?: DataGridSelectionMode;
+	@attr({ attribute: 'selection-mode' })
+	selectionMode?: DataGridSelectionMode;
 
 	get #selectedRows(): DataGridRow[] {
-		return this.rowElements.filter((row: HTMLElement) => row.getAttribute('aria-selected') === 'true') as DataGridRow[];
+		return this.rowElements.filter(
+			(row: HTMLElement) => row.getAttribute('aria-selected') === 'true'
+		) as DataGridRow[];
 	}
 
 	get #selectedCells(): DataGridCell[] {
 		return this.rowElements.reduce((acc, row) => {
 			const rowChildren = Array.from(row.children) as DataGridCell[];
-			const selectedCells = rowChildren.filter((cell: DataGridCell) => cell.getAttribute('aria-selected') === 'true');
+			const selectedCells = rowChildren.filter(
+				(cell: DataGridCell) => cell.getAttribute('aria-selected') === 'true'
+			);
 			return acc.concat(selectedCells);
 		}, [] as DataGridCell[]);
 	}
@@ -82,34 +89,57 @@ export class DataGrid extends FoundationDataGrid {
 		}
 	};
 
-	#handleClick = ({target, ctrlKey, shiftKey, metaKey}: MouseEvent) => {
+	#handleClick = ({ target, ctrlKey, shiftKey, metaKey }: MouseEvent) => {
 		if ((target as HTMLElement).getAttribute('role') !== 'gridcell') return;
 
-		if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
-			this.#handleCellSelection({target, ctrlKey, shiftKey, metaKey});
+		if (
+			this.selectionMode === DataGridSelectionMode.singleCell ||
+			this.selectionMode === DataGridSelectionMode.multiCell
+		) {
+			this.#handleCellSelection({ target, ctrlKey, shiftKey, metaKey });
 			return;
 		}
 
-		if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
-			this.#handleRowSelection({target, ctrlKey, shiftKey, metaKey});
+		if (
+			this.selectionMode === DataGridSelectionMode.singleRow ||
+			this.selectionMode === DataGridSelectionMode.multiRow
+		) {
+			this.#handleRowSelection({ target, ctrlKey, shiftKey, metaKey });
 		}
 	};
 
-	#handleCellSelection = ({target, ctrlKey, shiftKey, metaKey}: SelectionMetaData) => {
+	#handleCellSelection = ({
+		target,
+		ctrlKey,
+		shiftKey,
+		metaKey,
+	}: SelectionMetaData) => {
 		const cell = target as DataGridCell;
 
-		if (this.selectionMode === DataGridSelectionMode.multiCell && (ctrlKey || shiftKey || metaKey)) {
+		if (
+			this.selectionMode === DataGridSelectionMode.multiCell &&
+			(ctrlKey || shiftKey || metaKey)
+		) {
 			this.#setSelectedState(cell, !this.#selectedCells.includes(cell));
 		} else {
-			const cacheTargetSelection = cell.getAttribute('aria-selected') === 'true';
+			const cacheTargetSelection =
+				cell.getAttribute('aria-selected') === 'true';
 			this.#resetSelection();
 			this.#setSelectedState(cell, !cacheTargetSelection);
 		}
 	};
 
-	#handleRowSelection = ({target, ctrlKey, shiftKey, metaKey}: SelectionMetaData) => {
+	#handleRowSelection = ({
+		target,
+		ctrlKey,
+		shiftKey,
+		metaKey,
+	}: SelectionMetaData) => {
 		const row = (target as DataGridCell).parentNode as DataGridRow;
-		if (this.selectionMode === DataGridSelectionMode.multiRow && (ctrlKey || shiftKey || metaKey)) {
+		if (
+			this.selectionMode === DataGridSelectionMode.multiRow &&
+			(ctrlKey || shiftKey || metaKey)
+		) {
 			this.#setSelectedState(row, !this.#selectedRows.includes(row));
 		} else {
 			const cacheTargetSelection = row.getAttribute('aria-selected') === 'true';
@@ -143,7 +173,8 @@ export class DataGrid extends FoundationDataGrid {
 				const generatedHeaderElement: HTMLElement = document.createElement(
 					this.rowElementTag
 				);
-				privates.generatedHeader = (generatedHeaderElement as unknown) as DataGridRow;
+				privates.generatedHeader =
+					generatedHeaderElement as unknown as DataGridRow;
 				privates.generatedHeader.columnDefinitions = this.columnDefinitions;
 				privates.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
 				privates.generatedHeader.rowType =
@@ -154,7 +185,9 @@ export class DataGrid extends FoundationDataGrid {
 				if (this.firstChild !== null || privates.rowsPlaceholder !== null) {
 					this.insertBefore(
 						generatedHeaderElement,
-						this.firstChild !== null ? this.firstChild : privates.rowsPlaceholder
+						this.firstChild !== null
+							? this.firstChild
+							: privates.rowsPlaceholder
 					);
 				}
 				return;
@@ -169,58 +202,105 @@ export class DataGrid extends FoundationDataGrid {
 					(dataGrid as any).toggleGeneratedHeader();
 				}
 			}
-		}
+		},
 	};
 
 	override connectedCallback() {
 		super.connectedCallback();
-		Observable.getNotifier(this).subscribe(this.#changeHandler, 'columnDefinitions');
+		Observable.getNotifier(this).subscribe(
+			this.#changeHandler,
+			'columnDefinitions'
+		);
 	}
 
 	override disconnectedCallback() {
 		super.disconnectedCallback();
-		Observable.getNotifier(this).unsubscribe(this.#changeHandler, 'columnDefinitions');
+		Observable.getNotifier(this).unsubscribe(
+			this.#changeHandler,
+			'columnDefinitions'
+		);
 	}
 
-	#setSelectedState = (cell: DataGridCell | DataGridRow, selectedState: boolean) => {
+	#setSelectedState = (
+		cell: DataGridCell | DataGridRow,
+		selectedState: boolean
+	) => {
 		cell.setAttribute('aria-selected', selectedState.toString());
 	};
 
 	#resetSelection = () => {
-		if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
-			Array.from(this.querySelectorAll('[role="gridcell"]')).forEach(cell => this.#setSelectedState(cell as DataGridCell, false));
-			Array.from(this.querySelectorAll('[role="row"]')).forEach(row => row.removeAttribute('aria-selected'));
+		if (
+			this.selectionMode === DataGridSelectionMode.singleCell ||
+			this.selectionMode === DataGridSelectionMode.multiCell
+		) {
+			Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) =>
+				this.#setSelectedState(cell as DataGridCell, false)
+			);
+			Array.from(this.querySelectorAll('[role="row"]')).forEach((row) =>
+				row.removeAttribute('aria-selected')
+			);
 		}
 		if (this.selectionMode === DataGridSelectionMode.none) {
-			Array.from(this.querySelectorAll('[role="gridcell"]')).forEach(cell => cell.removeAttribute('aria-selected'));
-			Array.from(this.querySelectorAll('[role="row"]')).forEach(row => row.removeAttribute('aria-selected'));
+			Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) =>
+				cell.removeAttribute('aria-selected')
+			);
+			Array.from(this.querySelectorAll('[role="row"]')).forEach((row) =>
+				row.removeAttribute('aria-selected')
+			);
 		}
-		if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
-			Array.from(this.querySelectorAll('[role="gridcell"]')).forEach(cell => cell.removeAttribute('aria-selected'));
-			Array.from(this.querySelectorAll('[role="row"]')).forEach(row => row.setAttribute('aria-selected', 'false'));
+		if (
+			this.selectionMode === DataGridSelectionMode.singleRow ||
+			this.selectionMode === DataGridSelectionMode.multiRow
+		) {
+			Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) =>
+				cell.removeAttribute('aria-selected')
+			);
+			Array.from(this.querySelectorAll('[role="row"]')).forEach((row) =>
+				row.setAttribute('aria-selected', 'false')
+			);
 		}
 	};
 
 	#initSelections = () => {
-		if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
-			Array.from(this.querySelectorAll('[role="gridcell"]'))
-				.forEach(cell => !cell.hasAttribute('aria-selected') && this.#setSelectedState(cell as DataGridCell, false));
-			Array.from(this.querySelectorAll('[role="row"]')).forEach(row => row.removeAttribute('aria-selected'));
+		if (
+			this.selectionMode === DataGridSelectionMode.singleCell ||
+			this.selectionMode === DataGridSelectionMode.multiCell
+		) {
+			Array.from(this.querySelectorAll('[role="gridcell"]')).forEach(
+				(cell) =>
+					!cell.hasAttribute('aria-selected') &&
+					this.#setSelectedState(cell as DataGridCell, false)
+			);
+			Array.from(this.querySelectorAll('[role="row"]')).forEach((row) =>
+				row.removeAttribute('aria-selected')
+			);
 		}
 
 		if (this.selectionMode === DataGridSelectionMode.none) {
-			Array.from(this.querySelectorAll('[role="gridcell"]')).forEach(cell => cell.removeAttribute('aria-selected'));
-			Array.from(this.querySelectorAll('[role="row"]')).forEach(row => row.removeAttribute('aria-selected'));
+			Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) =>
+				cell.removeAttribute('aria-selected')
+			);
+			Array.from(this.querySelectorAll('[role="row"]')).forEach((row) =>
+				row.removeAttribute('aria-selected')
+			);
 		}
 
-		if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
-			Array.from(this.querySelectorAll('[role="gridcell"]')).forEach(cell => cell.removeAttribute('aria-selected'));
-			Array.from(this.querySelectorAll('[role="row"]'))
-				.forEach(row => !row.hasAttribute('aria-selected') && row.setAttribute('aria-selected', 'false'));
+		if (
+			this.selectionMode === DataGridSelectionMode.singleRow ||
+			this.selectionMode === DataGridSelectionMode.multiRow
+		) {
+			Array.from(this.querySelectorAll('[role="gridcell"]')).forEach((cell) =>
+				cell.removeAttribute('aria-selected')
+			);
+			Array.from(this.querySelectorAll('[role="row"]')).forEach(
+				(row) =>
+					!row.hasAttribute('aria-selected') &&
+					row.setAttribute('aria-selected', 'false')
+			);
 		}
 	};
 
-	static override generateColumns (rowData: any)  {
+	static override generateColumns(rowData: any) {
 		return Object.keys(rowData).map((property, index) => {
 			return {
 				columnDataKey: property,
@@ -228,7 +308,4 @@ export class DataGrid extends FoundationDataGrid {
 			};
 		});
 	}
-
-
 }
-
diff --git a/libs/components/src/lib/data-grid/definition.ts b/libs/components/src/lib/data-grid/definition.ts
index 290ca683e2..466adb440e 100644
--- a/libs/components/src/lib/data-grid/definition.ts
+++ b/libs/components/src/lib/data-grid/definition.ts
@@ -1,5 +1,5 @@
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import {iconRegistries} from '../icon/definition';
+import { iconRegistries } from '../icon/definition';
 import { registerFactory } from '../../shared/design-system';
 import dataGridStyles from './data-grid.scss?inline';
 import dataGridRowStyles from './data-grid-row.scss?inline';
@@ -29,7 +29,12 @@ export const dataGridCell = DataGridCell.compose<FoundationElementDefinition>({
 	template: DataGridCellTemplate as any,
 	styles: dataGridCellStyles,
 })();
-export const dataGridElements = [dataGridCell, dataGridRow, dataGrid, ...iconRegistries];
+export const dataGridElements = [
+	dataGridCell,
+	dataGridRow,
+	dataGrid,
+	...iconRegistries,
+];
 
 /**
  * Registers the data-grid element with the design system.
diff --git a/libs/components/src/lib/data-grid/index.spec.ts b/libs/components/src/lib/data-grid/index.spec.ts
index 62a2c24efb..bd4390158d 100644
--- a/libs/components/src/lib/data-grid/index.spec.ts
+++ b/libs/components/src/lib/data-grid/index.spec.ts
@@ -1,6 +1,6 @@
 import { elementUpdated, fixture } from '@vivid-nx/shared';
 import type { DataGrid } from './data-grid';
-import {DataGridSelectionMode} from './data-grid';
+import { DataGridSelectionMode } from './data-grid';
 import './index';
 
 const COMPONENT_TAG = 'vwc-data-grid';
@@ -75,7 +75,9 @@ describe('data grid integration tests', () => {
 			it('should set row-type sticky-header on header row when generateHeader is sticky', async function () {
 				element.generateHeader = 'sticky';
 				await elementUpdated(element);
-				expect(element.rowElements[0].getAttribute('row-type')).toBe('sticky-header');
+				expect(element.rowElements[0].getAttribute('row-type')).toBe(
+					'sticky-header'
+				);
 			});
 
 			it('should set row-type header on header row when generateHeader is default', async function () {
@@ -86,8 +88,6 @@ describe('data grid integration tests', () => {
 		});
 	});
 
-
-
 	describe('events', function () {
 		it('should fire cell-focused event', async function () {
 			const spy = jest.fn();
@@ -137,7 +137,10 @@ describe('data grid integration tests', () => {
 				(element.rowElements[0].children[1] as HTMLElement).click();
 
 				expect(spy).toHaveBeenCalledTimes(1);
-				expect(spy.mock.calls[0][0].detail).toEqual({columnDataKey: 'data2', sortDirection: 'none'});
+				expect(spy.mock.calls[0][0].detail).toEqual({
+					columnDataKey: 'data2',
+					sortDirection: 'none',
+				});
 			});
 
 			it('should stop sort event propagation', async function () {
@@ -153,11 +156,9 @@ describe('data grid integration tests', () => {
 				expect(parentSpy).toHaveBeenCalledTimes(0);
 			});
 		});
-
 	});
 
 	describe('selectionMode', function () {
-
 		it('should remove aria-selected when "none" is set initially', async function () {
 			element = (await fixture(
 				`<${COMPONENT_TAG} selection-mode="none">
@@ -172,7 +173,8 @@ describe('data grid integration tests', () => {
 										</${COMPONENT_TAG}>`
 			)) as DataGrid;
 			await elementUpdated(element);
-			const ariaSelectedExists = element.querySelectorAll('[aria-selected]').length > 0;
+			const ariaSelectedExists =
+				element.querySelectorAll('[aria-selected]').length > 0;
 			expect(ariaSelectedExists).toEqual(false);
 		});
 
@@ -186,17 +188,26 @@ describe('data grid integration tests', () => {
 				];
 				await elementUpdated(element);
 				await elementUpdated(element);
-				cell = getRowCell(1,0);
+				cell = getRowCell(1, 0);
 			});
 
-			it.each([DataGridSelectionMode.singleCell, DataGridSelectionMode.multiCell])
-			('should add aria-selected="false" to all cells if selectionMode is %s', async function (selectionMode: DataGridSelectionMode) {
-				element.selectionMode = selectionMode;
-				await elementUpdated(element);
-				const allNoneHeaderCells = Array.from(element.querySelectorAll('[role="gridcell"]'));
-				const allNoneHeaderCellsSelectable = allNoneHeaderCells.every(cell => cell.getAttribute('aria-selected') === 'false');
-				expect(allNoneHeaderCellsSelectable).toEqual(true);
-			});
+			it.each([
+				DataGridSelectionMode.singleCell,
+				DataGridSelectionMode.multiCell,
+			])(
+				'should add aria-selected="false" to all cells if selectionMode is %s',
+				async function (selectionMode: DataGridSelectionMode) {
+					element.selectionMode = selectionMode;
+					await elementUpdated(element);
+					const allNoneHeaderCells = Array.from(
+						element.querySelectorAll('[role="gridcell"]')
+					);
+					const allNoneHeaderCellsSelectable = allNoneHeaderCells.every(
+						(cell) => cell.getAttribute('aria-selected') === 'false'
+					);
+					expect(allNoneHeaderCellsSelectable).toEqual(true);
+				}
+			);
 
 			it('should remove aria-selected from all cells if set to "none"', async function () {
 				element.selectionMode = DataGridSelectionMode.singleCell;
@@ -205,8 +216,12 @@ describe('data grid integration tests', () => {
 				element.selectionMode = DataGridSelectionMode.none;
 				await elementUpdated(element);
 
-				const allNonHeaderCells = Array.from(element.querySelectorAll('[role="gridcell"]'));
-				const allNonHeaderCellsNotSelectable = allNonHeaderCells.every(cell => !cell.hasAttribute('aria-selected'));
+				const allNonHeaderCells = Array.from(
+					element.querySelectorAll('[role="gridcell"]')
+				);
+				const allNonHeaderCellsNotSelectable = allNonHeaderCells.every(
+					(cell) => !cell.hasAttribute('aria-selected')
+				);
 				expect(allNonHeaderCellsNotSelectable).toEqual(true);
 			});
 
@@ -217,26 +232,37 @@ describe('data grid integration tests', () => {
 				element.selectionMode = DataGridSelectionMode.singleCell;
 				await elementUpdated(element);
 
-				const allNonHeaderRows = Array.from(element.querySelectorAll('[role="row"]'));
-				const allNonHeaderRowsNotSelectable = allNonHeaderRows.every(row => !row.hasAttribute('aria-selected'));
+				const allNonHeaderRows = Array.from(
+					element.querySelectorAll('[role="row"]')
+				);
+				const allNonHeaderRowsNotSelectable = allNonHeaderRows.every(
+					(row) => !row.hasAttribute('aria-selected')
+				);
 				expect(allNonHeaderRowsNotSelectable).toEqual(true);
 			});
 
-			it.each([DataGridSelectionMode.singleCell, DataGridSelectionMode.multiCell])
-			('should add selected attribute to clicked cell if selection mode is %s', async function (selectionMode) {
-				element.selectionMode = selectionMode;
-				cell.click();
-				await elementUpdated(element);
-				expect(isElementSelected(cell)).toEqual(true);
-			});
+			it.each([
+				DataGridSelectionMode.singleCell,
+				DataGridSelectionMode.multiCell,
+			])(
+				'should add selected attribute to clicked cell if selection mode is %s',
+				async function (selectionMode) {
+					element.selectionMode = selectionMode;
+					cell.click();
+					await elementUpdated(element);
+					expect(isElementSelected(cell)).toEqual(true);
+				}
+			);
 
-			it.each(['none', 'single-row', 'multi-row'])
-			( 'should prevent selected attribute to cell if selectionMode is %s', async function (selectionMode) {
-				(element.selectionMode as any)= selectionMode;
-				cell.click();
-				await elementUpdated(element);
-				expect(isElementSelected(cell)).toEqual(false);
-			});
+			it.each(['none', 'single-row', 'multi-row'])(
+				'should prevent selected attribute to cell if selectionMode is %s',
+				async function (selectionMode) {
+					(element.selectionMode as any) = selectionMode;
+					cell.click();
+					await elementUpdated(element);
+					expect(isElementSelected(cell)).toEqual(false);
+				}
+			);
 
 			it('should remove selected attribute from selected clicked cell in single mode', async function () {
 				element.selectionMode = DataGridSelectionMode.singleCell;
@@ -249,36 +275,48 @@ describe('data grid integration tests', () => {
 				expect(isElementSelected(cell)).toEqual(false);
 			});
 
-			it.each([DataGridSelectionMode.singleCell, DataGridSelectionMode.multiCell])
-			('should remove selected attribute if clicked other cell and selectionMode is %s', async function (selectionMode: string) {
-				element.selectionMode = selectionMode as DataGridSelectionMode;
+			it.each([
+				DataGridSelectionMode.singleCell,
+				DataGridSelectionMode.multiCell,
+			])(
+				'should remove selected attribute if clicked other cell and selectionMode is %s',
+				async function (selectionMode: string) {
+					element.selectionMode = selectionMode as DataGridSelectionMode;
 
-				cell.click();
-				await elementUpdated(element);
+					cell.click();
+					await elementUpdated(element);
 
-				const otherCell = element.rowElements[2].children[1] as HTMLElement;
-				otherCell.click();
-				await elementUpdated(element);
+					const otherCell = element.rowElements[2].children[1] as HTMLElement;
+					otherCell.click();
+					await elementUpdated(element);
 
-				expect(isElementSelected(cell)).toEqual(false);
-				expect(isElementSelected(otherCell)).toEqual(true);
-			});
+					expect(isElementSelected(cell)).toEqual(false);
+					expect(isElementSelected(otherCell)).toEqual(true);
+				}
+			);
 
-			it.each(['ctrlKey', 'shiftKey', 'metaKey'])
-			('should leave selected attribute if clicked other cell with %s and selectionMode is multiCell',
+			it.each(['ctrlKey', 'shiftKey', 'metaKey'])(
+				'should leave selected attribute if clicked other cell with %s and selectionMode is multiCell',
 				async function (activeKey: string) {
 					element.selectionMode = DataGridSelectionMode.multiCell;
 
 					cell.click();
 					await elementUpdated(element);
 
-					const otherCell = getRowCell(2,1);
-					otherCell.dispatchEvent(new MouseEvent('click', { [activeKey]: true, bubbles: true, composed: true }));
+					const otherCell = getRowCell(2, 1);
+					otherCell.dispatchEvent(
+						new MouseEvent('click', {
+							[activeKey]: true,
+							bubbles: true,
+							composed: true,
+						})
+					);
 					await elementUpdated(element);
 
 					expect(isElementSelected(cell)).toEqual(true);
 					expect(isElementSelected(otherCell)).toEqual(true);
-				});
+				}
+			);
 
 			it('should reset selection when selectionMode changes', async function () {
 				element.selectionMode = DataGridSelectionMode.multiCell;
@@ -286,8 +324,14 @@ describe('data grid integration tests', () => {
 				cell.click();
 				await elementUpdated(element);
 
-				const otherCell = getRowCell(2,1);
-				otherCell.dispatchEvent(new MouseEvent('click', { ctrlKey: true, bubbles: true, composed: true }));
+				const otherCell = getRowCell(2, 1);
+				otherCell.dispatchEvent(
+					new MouseEvent('click', {
+						ctrlKey: true,
+						bubbles: true,
+						composed: true,
+					})
+				);
 				await elementUpdated(element);
 
 				element.selectionMode = DataGridSelectionMode.singleCell;
@@ -303,9 +347,11 @@ describe('data grid integration tests', () => {
 				cell.click();
 				await elementUpdated(element);
 
-				const otherCell = getRowCell(2,1);
+				const otherCell = getRowCell(2, 1);
 
-				otherCell.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+				otherCell.dispatchEvent(
+					new MouseEvent('click', { bubbles: true, composed: true })
+				);
 				await elementUpdated(element);
 
 				expect(isElementSelected(cell)).toEqual(false);
@@ -325,8 +371,22 @@ describe('data grid integration tests', () => {
 				const cell1 = getRowCell(1, 1);
 				const cell2 = getRowCell(2, 1);
 
-				cell1.dispatchEvent(new KeyboardEvent('keydown', { ctrlKey: true, key: 'Enter', bubbles: true, composed: true }));
-				cell2.dispatchEvent(new KeyboardEvent('keydown', { ctrlKey: true, key: ' ', bubbles: true, composed: true }));
+				cell1.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						ctrlKey: true,
+						key: 'Enter',
+						bubbles: true,
+						composed: true,
+					})
+				);
+				cell2.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						ctrlKey: true,
+						key: ' ',
+						bubbles: true,
+						composed: true,
+					})
+				);
 				await elementUpdated(element);
 
 				expect(isElementSelected(cell1)).toEqual(true);
@@ -365,8 +425,12 @@ describe('data grid integration tests', () => {
 				element.selectionMode = DataGridSelectionMode.none;
 				await elementUpdated(element);
 
-				const allNoneHeaderRows = Array.from(element.querySelectorAll('[role="row"]'));
-				const allNonHeaderRowsNotSelectable = allNoneHeaderRows.every(row => !row.hasAttribute('aria-selected'));
+				const allNoneHeaderRows = Array.from(
+					element.querySelectorAll('[role="row"]')
+				);
+				const allNonHeaderRowsNotSelectable = allNoneHeaderRows.every(
+					(row) => !row.hasAttribute('aria-selected')
+				);
 				expect(allNonHeaderRowsNotSelectable).toEqual(true);
 			});
 
@@ -377,22 +441,32 @@ describe('data grid integration tests', () => {
 				element.selectionMode = DataGridSelectionMode.multiRow;
 				await elementUpdated(element);
 
-				const allNonHeaderCells = Array.from(element.querySelectorAll('[role="gridcell"]'));
-				const allNonHeaderCellsNotSelectable = allNonHeaderCells.every(cell => !cell.hasAttribute('aria-selected'));
+				const allNonHeaderCells = Array.from(
+					element.querySelectorAll('[role="gridcell"]')
+				);
+				const allNonHeaderCellsNotSelectable = allNonHeaderCells.every(
+					(cell) => !cell.hasAttribute('aria-selected')
+				);
 				expect(allNonHeaderCellsNotSelectable).toEqual(true);
 			});
 
-			it.each([DataGridSelectionMode.singleRow, DataGridSelectionMode.multiRow])
-			('should set aria-selected="false" on all non header rows if selectionMode is %s',
+			it.each([
+				DataGridSelectionMode.singleRow,
+				DataGridSelectionMode.multiRow,
+			])(
+				'should set aria-selected="false" on all non header rows if selectionMode is %s',
 				async function (selectionMode: DataGridSelectionMode) {
 					element.selectionMode = selectionMode;
 					await elementUpdated(element);
 					const allNonHeaderRows = element.querySelectorAll('[role="row"]');
-					const allNonHeaderRowsHaveSelectedFalse = Array.from(allNonHeaderRows).every((row) => {
+					const allNonHeaderRowsHaveSelectedFalse = Array.from(
+						allNonHeaderRows
+					).every((row) => {
 						return row.getAttribute('aria-selected') === 'false';
 					});
 					expect(allNonHeaderRowsHaveSelectedFalse).toEqual(true);
-				});
+				}
+			);
 
 			it('should set aria-selected="true" on clicked row', async function () {
 				element.selectionMode = DataGridSelectionMode.singleRow;
@@ -419,8 +493,8 @@ describe('data grid integration tests', () => {
 				expect(row2.getAttribute('aria-selected')).toEqual('true');
 			});
 
-			it.each(['ctrlKey', 'shiftKey', 'metaKey'])
-			('should set aria-selected="true" to all clicked rows in "multi-row" state and %s key pressed',
+			it.each(['ctrlKey', 'shiftKey', 'metaKey'])(
+				'should set aria-selected="true" to all clicked rows in "multi-row" state and %s key pressed',
 				function (activeKey) {
 					element.selectionMode = DataGridSelectionMode.multiRow;
 					const row1 = getRow(1);
@@ -429,11 +503,18 @@ describe('data grid integration tests', () => {
 					const cellInRow2 = getRowCell(2, 0);
 
 					cellInRow1.click();
-					cellInRow2.dispatchEvent(new MouseEvent('click', { [activeKey]: true, bubbles: true, composed: true }));
+					cellInRow2.dispatchEvent(
+						new MouseEvent('click', {
+							[activeKey]: true,
+							bubbles: true,
+							composed: true,
+						})
+					);
 
 					expect(row1.getAttribute('aria-selected')).toEqual('true');
 					expect(row2.getAttribute('aria-selected')).toEqual('true');
-				});
+				}
+			);
 
 			it('should leave aria-selected value to rows on init', async function () {
 				element = (await fixture(
@@ -450,7 +531,6 @@ describe('data grid integration tests', () => {
 			});
 		});
 	});
-
 });
 
 function isElementSelected(element: HTMLElement): boolean {
diff --git a/libs/components/src/lib/data-grid/index.ts b/libs/components/src/lib/data-grid/index.ts
index ab9beb0fd8..9ceff5b16d 100644
--- a/libs/components/src/lib/data-grid/index.ts
+++ b/libs/components/src/lib/data-grid/index.ts
@@ -1,4 +1,3 @@
 import { registerDataGrid } from './definition';
 
 registerDataGrid();
-
diff --git a/libs/components/src/lib/data-grid/ui.test.ts b/libs/components/src/lib/data-grid/ui.test.ts
index 21ce1d3ba0..fa413aa6d1 100644
--- a/libs/components/src/lib/data-grid/ui.test.ts
+++ b/libs/components/src/lib/data-grid/ui.test.ts
@@ -8,7 +8,6 @@ import {
 const components = ['data-grid'];
 
 export const gridTestFunction = async ({ page }: { page: Page }) => {
-
 	const template = `<div style="margin: 5px; max-width: 700px;">
 			<vwc-data-grid></vwc-data-grid>
 	</div>`;
@@ -26,7 +25,8 @@ export const gridTestFunction = async ({ page }: { page: Page }) => {
 
 	await page.waitForLoadState('networkidle');
 
-	await page.addScriptTag({content: `
+	await page.addScriptTag({
+		content: `
 	const grid = document.querySelector('vwc-data-grid');
 	grid.columnDefinitions = [
 		{columnDataKey: 'data1', title: 'Data 1'},
@@ -37,9 +37,12 @@ export const gridTestFunction = async ({ page }: { page: Page }) => {
 		{data1: 'data11 with very long text that is having a text-overflow data11 with very long text', data2: 'data22'},
 		{data1: 'data11 with very long text that is having a text-overflow data11 with very long text', data2: 'data32'},
 	];
-	`});
+	`,
+	});
 
-	const text = await page.locator('vwc-data-grid-cell:has-text("data22")').nth(2);
+	const text = await page
+		.locator('vwc-data-grid-cell:has-text("data22")')
+		.nth(2);
 	await text.isVisible();
 
 	const clickableCells = await page.locator('vwc-data-grid-cell');
@@ -69,7 +72,8 @@ async function testCellSelection({ page }: { page: Page }) {
 
 	await page.waitForLoadState('networkidle');
 
-	await page.addScriptTag({content: `
+	await page.addScriptTag({
+		content: `
 	const grid = document.querySelector('vwc-data-grid');
 	grid.columnDefinitions = [
 		{columnDataKey: 'data1', title: 'Data 1'},
@@ -80,9 +84,12 @@ async function testCellSelection({ page }: { page: Page }) {
 		{data1: 'data21', data2: 'data22'},
 		{data1: 'data31', data2: 'data32'},
 	];
-	`});
+	`,
+	});
 
-	const text = await page.locator('vwc-data-grid-cell:has-text("data22")').nth(2);
+	const text = await page
+		.locator('vwc-data-grid-cell:has-text("data22")')
+		.nth(2);
 	await text.isVisible();
 
 	const clickableCell = await page.locator('#clicked-cell vwc-data-grid-cell');
@@ -114,7 +121,8 @@ async function testMultiCellSelection({ page }: { page: Page }) {
 
 	await page.waitForLoadState('networkidle');
 
-	await page.addScriptTag({content: `
+	await page.addScriptTag({
+		content: `
 	const grid = document.querySelector('vwc-data-grid');
 	grid.columnDefinitions = [
 		{columnDataKey: 'data1', title: 'Data 1'},
@@ -125,15 +133,20 @@ async function testMultiCellSelection({ page }: { page: Page }) {
 		{data1: 'data21', data2: 'data22'},
 		{data1: 'data31', data2: 'data32'},
 	];
-	`});
+	`,
+	});
 
-	const text = await page.locator('vwc-data-grid-cell:has-text("data22")').nth(2);
+	const text = await page
+		.locator('vwc-data-grid-cell:has-text("data22")')
+		.nth(2);
 	await text.isVisible();
 
-	const clickableCells = await page.locator('#clicked-cells vwc-data-grid-cell');
+	const clickableCells = await page.locator(
+		'#clicked-cells vwc-data-grid-cell'
+	);
 	await clickableCells.nth(3).click();
 	await clickableCells.nth(5).click({
-		modifiers: ['Meta']
+		modifiers: ['Meta'],
 	});
 
 	expect(await testWrapper?.screenshot()).toMatchSnapshot(
@@ -161,7 +174,8 @@ async function testRowSelection({ page }: { page: Page }) {
 
 	await page.waitForLoadState('networkidle');
 
-	await page.addScriptTag({content: `
+	await page.addScriptTag({
+		content: `
 	const grid = document.querySelector('vwc-data-grid');
 	grid.columnDefinitions = [
 		{columnDataKey: 'data1', title: 'Data 1'},
@@ -173,9 +187,12 @@ async function testRowSelection({ page }: { page: Page }) {
 		{data1: 'data31', data2: 'data32'},
 	];
 		grid.generateHeader = 'sticky';
-	`});
+	`,
+	});
 
-	const text = await page.locator('vwc-data-grid-cell:has-text("data22")').nth(2);
+	const text = await page
+		.locator('vwc-data-grid-cell:has-text("data22")')
+		.nth(2);
 	await text.isVisible();
 
 	const clickableCell = await page.locator('#clicked-row vwc-data-grid-row');
@@ -207,7 +224,8 @@ async function testMultiRowSelection({ page }: { page: Page }) {
 
 	await page.waitForLoadState('networkidle');
 
-	await page.addScriptTag({content: `
+	await page.addScriptTag({
+		content: `
 	const grid = document.querySelector('vwc-data-grid');
 	grid.columnDefinitions = [
 		{columnDataKey: 'data1', title: 'Data 1'},
@@ -218,15 +236,18 @@ async function testMultiRowSelection({ page }: { page: Page }) {
 		{data1: 'data21', data2: 'data22'},
 		{data1: 'data31', data2: 'data32'},
 	];
-	`});
+	`,
+	});
 
-	const text = await page.locator('vwc-data-grid-cell:has-text("data22")').nth(2);
+	const text = await page
+		.locator('vwc-data-grid-cell:has-text("data22")')
+		.nth(2);
 	await text.isVisible();
 
 	const clickableCell = await page.locator('#clicked-row vwc-data-grid-row');
 	await clickableCell.nth(1).click();
 	await clickableCell.nth(2).click({
-		modifiers: ['Meta']
+		modifiers: ['Meta'],
 	});
 	await clickableCell.nth(1).hover();
 	await clickableCell.nth(2).focus();
@@ -267,7 +288,9 @@ async function testSortColumns({ page }: { page: Page }) {
 
 	await page.waitForLoadState('networkidle');
 
-	const text = await page.locator('vwc-data-grid-cell:has-text("data22")').nth(2);
+	const text = await page
+		.locator('vwc-data-grid-cell:has-text("data22")')
+		.nth(2);
 	await text.isVisible();
 
 	expect(await testWrapper?.screenshot()).toMatchSnapshot(
@@ -324,4 +347,4 @@ test('multi cell selection', testMultiCellSelection);
 test('single row selection', testRowSelection);
 test('multi row selection', testMultiRowSelection);
 test('sort columns', testSortColumns);
-test('cell link click', testCellLinkClick);
\ No newline at end of file
+test('cell link click', testCellLinkClick);
diff --git a/libs/components/src/lib/date-picker/date-picker.spec.ts b/libs/components/src/lib/date-picker/date-picker.spec.ts
index 045aaaa864..7f446a0e1b 100644
--- a/libs/components/src/lib/date-picker/date-picker.spec.ts
+++ b/libs/components/src/lib/date-picker/date-picker.spec.ts
@@ -1,4 +1,10 @@
-import { axe, createFormHTML, elementUpdated, fixture, setupDelegatesFocusPolyfill } from '@vivid-nx/shared';
+import {
+	axe,
+	createFormHTML,
+	elementUpdated,
+	fixture,
+	setupDelegatesFocusPolyfill,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { TextField } from '../text-field/text-field';
 import { Button } from '../button/button';
@@ -61,7 +67,9 @@ describe('vwc-date-picker', () => {
 			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
 		)) as DatePicker;
 		textField = element.shadowRoot!.querySelector('.control') as TextField;
-		calendarButton = element.shadowRoot!.querySelector('#calendar-button') as Button;
+		calendarButton = element.shadowRoot!.querySelector(
+			'#calendar-button'
+		) as Button;
 		titleAction = element.shadowRoot!.querySelector(
 			'.title-action'
 		) as HTMLButtonElement;
@@ -221,7 +229,9 @@ describe('vwc-date-picker', () => {
 			element.value = '2021-01-01';
 			await elementUpdated(element);
 
-			expect(calendarButton.getAttribute('aria-label')).toBe('Change date, 01/01/2021');
+			expect(calendarButton.getAttribute('aria-label')).toBe(
+				'Change date, 01/01/2021'
+			);
 		});
 	});
 
diff --git a/libs/components/src/lib/date-picker/date-picker.ts b/libs/components/src/lib/date-picker/date-picker.ts
index 9aa5eb1772..edbe56c373 100644
--- a/libs/components/src/lib/date-picker/date-picker.ts
+++ b/libs/components/src/lib/date-picker/date-picker.ts
@@ -1,8 +1,19 @@
 import { volatile } from '@microsoft/fast-element';
-import { type ErrorText, errorText, type FormElement, formElements } from '../../shared/patterns';
+import {
+	type ErrorText,
+	errorText,
+	type FormElement,
+	formElements,
+} from '../../shared/patterns';
 import { DatePickerBase } from '../../shared/date-picker/date-picker-base';
-import { type DateStr, isValidDateStr } from '../../shared/date-picker/calendar/dateStr';
-import { formatPresentationDate, parsePresentationDate } from '../../shared/date-picker/calendar/presentationDate';
+import {
+	type DateStr,
+	isValidDateStr,
+} from '../../shared/date-picker/calendar/dateStr';
+import {
+	formatPresentationDate,
+	parsePresentationDate,
+} from '../../shared/date-picker/calendar/presentationDate';
 
 /**
  * Single date picker component.
@@ -52,7 +63,9 @@ export class DatePicker extends DatePickerBase {
 	@volatile
 	get _calendarButtonLabel() {
 		if (this.value) {
-			return this.locale.datePicker.changeDateLabel(formatPresentationDate(this.value, this.locale.datePicker));
+			return this.locale.datePicker.changeDateLabel(
+				formatPresentationDate(this.value, this.locale.datePicker)
+			);
 		} else {
 			return this.locale.datePicker.chooseDateLabel;
 		}
@@ -158,7 +171,4 @@ export class DatePicker extends DatePickerBase {
 	}
 }
 
-export interface DatePicker
-	extends
-	ErrorText,
-	FormElement {}
+export interface DatePicker extends ErrorText, FormElement {}
diff --git a/libs/components/src/lib/date-picker/ui.test.ts b/libs/components/src/lib/date-picker/ui.test.ts
index de5de9d751..b144109861 100644
--- a/libs/components/src/lib/date-picker/ui.test.ts
+++ b/libs/components/src/lib/date-picker/ui.test.ts
@@ -116,13 +116,17 @@ test.describe('constraints validation', async () => {
 		});
 	});
 
-	test('should have a validation error when the date violates required constraint', async ({ page }: { page: Page }) => {
+	test('should have a validation error when the date violates required constraint', async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-date-picker name="date" required></vwc-date-picker>
 				<button type="submit">Submit</button>
-			</form>`
+			</form>`,
 		});
 
 		await page.getByRole('button', { name: 'Submit' }).click();
@@ -130,13 +134,17 @@ test.describe('constraints validation', async () => {
 		await expect(page.locator('vwc-date-picker .error-message')).toBeVisible();
 	});
 
-	test('should have a validation error when the date violates min constraint', async ({ page }: { page: Page }) => {
+	test('should have a validation error when the date violates min constraint', async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-date-picker name="date" min="2012-12-12" value="2011-11-11"></vwc-date-picker>
 				<button type="submit">Submit</button>
-			</form>`
+			</form>`,
 		});
 
 		await page.getByRole('button', { name: 'Submit' }).click();
@@ -144,13 +152,17 @@ test.describe('constraints validation', async () => {
 		await expect(page.locator('vwc-date-picker .error-message')).toBeVisible();
 	});
 
-	test('should have a validation error when the date violates max constraint', async ({ page }: { page: Page }) => {
+	test('should have a validation error when the date violates max constraint', async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-date-picker name="date" max="2011-11-11" value="2012-12-12"></vwc-date-picker>
 				<button type="submit">Submit</button>
-			</form>`
+			</form>`,
 		});
 
 		await page.getByRole('button', { name: 'Submit' }).click();
@@ -158,13 +170,17 @@ test.describe('constraints validation', async () => {
 		await expect(page.locator('vwc-date-picker .error-message')).toBeVisible();
 	});
 
-	test('should have a validation error when the user entered an invalid date manually', async ({ page }: { page: Page }) => {
+	test('should have a validation error when the user entered an invalid date manually', async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-date-picker name="date"></vwc-date-picker>
 				<button type="submit">Submit</button>
-			</form>`
+			</form>`,
 		});
 
 		await page.locator('vwc-text-field input').fill('invalid date');
diff --git a/libs/components/src/lib/date-range-picker/date-range-picker.spec.ts b/libs/components/src/lib/date-range-picker/date-range-picker.spec.ts
index 4e3f37d7b1..5420507a1b 100644
--- a/libs/components/src/lib/date-range-picker/date-range-picker.spec.ts
+++ b/libs/components/src/lib/date-range-picker/date-range-picker.spec.ts
@@ -2,7 +2,7 @@ import {
 	axe,
 	elementUpdated,
 	fixture,
-	setupDelegatesFocusPolyfill
+	setupDelegatesFocusPolyfill,
 } from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { TextField } from '../text-field/text-field';
@@ -69,9 +69,13 @@ describe('vwc-date-range-picker', () => {
 	}
 
 	beforeEach(async () => {
-		element = (await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`)) as DateRangePicker;
+		element = (await fixture(
+			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
+		)) as DateRangePicker;
 		textField = element.shadowRoot!.querySelector('.control') as TextField;
-		calendarButton = element.shadowRoot!.querySelector('#calendar-button') as Button;
+		calendarButton = element.shadowRoot!.querySelector(
+			'#calendar-button'
+		) as Button;
 		popup = element.shadowRoot!.querySelector('.popup') as Popup;
 		titleAction = element.shadowRoot!.querySelector(
 			'.title-action'
@@ -81,7 +85,9 @@ describe('vwc-date-range-picker', () => {
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-range-date-picker', async () => {
-			expect(dateRangePickerDefinition()).toBeInstanceOf(FoundationElementRegistry);
+			expect(dateRangePickerDefinition()).toBeInstanceOf(
+				FoundationElementRegistry
+			);
 			expect(element).toBeInstanceOf(DateRangePicker);
 		});
 	});
@@ -373,7 +379,9 @@ describe('vwc-date-range-picker', () => {
 			element.end = '2021-01-02';
 			await elementUpdated(element);
 
-			expect(calendarButton.getAttribute('aria-label')).toBe('Change dates, 01/01/2021 – 01/02/2021');
+			expect(calendarButton.getAttribute('aria-label')).toBe(
+				'Change dates, 01/01/2021 – 01/02/2021'
+			);
 		});
 	});
 
@@ -396,9 +404,15 @@ describe('vwc-date-range-picker', () => {
 
 			expect(getDateButton('2023-08-10').classList).toContain('start');
 			expect(getDateButton('2023-08-20').classList).toContain('end');
-			expect(getAllDateButtons()
-				.filter((button) => button.dataset.date! >= '2023-08-10' && button.dataset.date! <= '2023-08-20')
-				.every((button) => button.classList.contains('range'))).toBe(true);
+			expect(
+				getAllDateButtons()
+					.filter(
+						(button) =>
+							button.dataset.date! >= '2023-08-10' &&
+							button.dataset.date! <= '2023-08-20'
+					)
+					.every((button) => button.classList.contains('range'))
+			).toBe(true);
 		});
 
 		it('should preview the date range when hovering over a date', async () => {
@@ -406,14 +420,22 @@ describe('vwc-date-range-picker', () => {
 			await elementUpdated(element);
 
 			const hoverDateButton = getDateButton('2023-08-20');
-			hoverDateButton.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+			hoverDateButton.dispatchEvent(
+				new MouseEvent('mouseenter', { bubbles: true })
+			);
 			await elementUpdated(element);
 
 			expect(getDateButton('2023-08-10').classList).toContain('start');
 			expect(getDateButton('2023-08-20').classList).toContain('end');
-			expect(getAllDateButtons()
-				.filter((button) => button.dataset.date! >= '2023-08-10' && button.dataset.date! <= '2023-08-20')
-				.every((button) => button.classList.contains('range'))).toBe(true);
+			expect(
+				getAllDateButtons()
+					.filter(
+						(button) =>
+							button.dataset.date! >= '2023-08-10' &&
+							button.dataset.date! <= '2023-08-20'
+					)
+					.every((button) => button.classList.contains('range'))
+			).toBe(true);
 		});
 
 		it('should stop previewing the date range when mouse leaves a date', async () => {
@@ -421,14 +443,17 @@ describe('vwc-date-range-picker', () => {
 			await elementUpdated(element);
 
 			const hoverDateButton = getDateButton('2023-08-20');
-			hoverDateButton.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-			hoverDateButton.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
+			hoverDateButton.dispatchEvent(
+				new MouseEvent('mouseenter', { bubbles: true })
+			);
+			hoverDateButton.dispatchEvent(
+				new MouseEvent('mouseleave', { bubbles: true })
+			);
 			await elementUpdated(element);
 
 			expect(getDateButton('2023-08-20').classList).not.toContain('end');
 		});
 
-
 		it('should allow selecting a start and end date by clicking on them and closes the popup', async () => {
 			getDateButton('2023-08-01').click();
 			await elementUpdated(element);
@@ -510,7 +535,9 @@ describe('vwc-date-range-picker', () => {
 			element.start = '2023-08-01';
 			element.end = '2023-08-01';
 
-			expect(element.validationMessage).toBe('The start date must be 08/10/2023 or later.');
+			expect(element.validationMessage).toBe(
+				'The start date must be 08/10/2023 or later.'
+			);
 		});
 
 		it('should show a validation error when the end date is after the max date', async () => {
@@ -518,13 +545,15 @@ describe('vwc-date-range-picker', () => {
 			element.start = '2023-08-10';
 			element.end = '2023-08-11';
 
-			expect(element.validationMessage).toBe('The end date must be 08/10/2023 or earlier.');
+			expect(element.validationMessage).toBe(
+				'The end date must be 08/10/2023 or earlier.'
+			);
 		});
 	});
 
 	describe('form reset', () => {
 		it('should reset the date range to initial values when the form is reset', async () => {
-			const ORIGINAL_START_DATE= '2023-08-01';
+			const ORIGINAL_START_DATE = '2023-08-01';
 			const ORIGINAL_END_DATE = '2023-08-10';
 			const form = fixture(`
 				<form>
@@ -547,31 +576,38 @@ describe('vwc-date-range-picker', () => {
 	describe('form value', () => {
 		// Cannot properly end-to-end test form value because jsdom does not support ElementInternals
 		// Instead we mock the setFormValue method and test that it is called with the correct value
-		const getFormValue = () => jest.mocked(element.setFormValue).mock.lastCall![0] as FormData;
+		const getFormValue = () =>
+			jest.mocked(element.setFormValue).mock.lastCall![0] as FormData;
 
 		beforeEach(() => {
 			element.setFormValue = jest.fn();
 		});
 
-		it('should set the form value when name, start and end date are set',  () => {
+		it('should set the form value when name, start and end date are set', () => {
 			element.name = 'name';
 			element.start = '2023-08-01';
 			element.end = '2023-08-02';
 
-			expect(getFormValue().getAll('name')).toEqual(['2023-08-01', '2023-08-02']);
+			expect(getFormValue().getAll('name')).toEqual([
+				'2023-08-01',
+				'2023-08-02',
+			]);
 		});
 
 		it.each([
 			['name', '', ''],
 			['', '2023-08-01', ''],
 			['', '', '2023-08-02'],
-		])('should set form value to null when not all values are set (name=%s, start=%s, end=%s)',  (name, start, end) => {
-			element.name = name;
-			element.start = start;
-			element.end = end;
-
-			expect(getFormValue()).toBeNull();
-		});
+		])(
+			'should set form value to null when not all values are set (name=%s, start=%s, end=%s)',
+			(name, start, end) => {
+				element.name = name;
+				element.start = start;
+				element.end = end;
+
+				expect(getFormValue()).toBeNull();
+			}
+		);
 	});
 
 	describe('a11y', () => {
diff --git a/libs/components/src/lib/date-range-picker/ui.test.ts b/libs/components/src/lib/date-range-picker/ui.test.ts
index 5b3228a65b..896ba10f25 100644
--- a/libs/components/src/lib/date-range-picker/ui.test.ts
+++ b/libs/components/src/lib/date-range-picker/ui.test.ts
@@ -94,7 +94,6 @@ test('selecting a date range', async ({ page }: { page: Page }) => {
 		'current-end',
 		'2023-08-20'
 	);
-
 });
 
 test.describe('constraints validation', async () => {
@@ -108,75 +107,105 @@ test.describe('constraints validation', async () => {
 		});
 	});
 
-	test('should have a validation error when the date range violates required constraint', async ({ page }: { page: Page }) => {
+	test('should have a validation error when the date range violates required constraint', async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-date-range-picker required></vwc-date-range-picker>
 				<button type="submit">Submit</button>
-			</form>`
+			</form>`,
 		});
 
 		await page.getByRole('button', { name: 'Submit' }).click();
 
-		await expect(page.locator('vwc-date-range-picker .error-message')).toBeVisible();
+		await expect(
+			page.locator('vwc-date-range-picker .error-message')
+		).toBeVisible();
 	});
 
-	test('should have a validation error when the date range violates min constraint', async ({ page }: { page: Page }) => {
+	test('should have a validation error when the date range violates min constraint', async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-date-range-picker min="2012-12-12" start="2011-11-11" end="2011-11-11"></vwc-date-range-picker>
 				<button type="submit">Submit</button>
-			</form>`
+			</form>`,
 		});
 
 		await page.getByRole('button', { name: 'Submit' }).click();
 
-		await expect(page.locator('vwc-date-range-picker .error-message')).toBeVisible();
+		await expect(
+			page.locator('vwc-date-range-picker .error-message')
+		).toBeVisible();
 	});
 
-	test('should have a validation error when the date range violates max constraint', async ({ page }: { page: Page }) => {
+	test('should have a validation error when the date range violates max constraint', async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-date-range-picker max="2012-12-12" start="2013-11-11" end="2013-11-11"></vwc-date-range-picker>
 				<button type="submit">Submit</button>
-			</form>`
+			</form>`,
 		});
 
 		await page.getByRole('button', { name: 'Submit' }).click();
 
-		await expect(page.locator('vwc-date-range-picker .error-message')).toBeVisible();
+		await expect(
+			page.locator('vwc-date-range-picker .error-message')
+		).toBeVisible();
 	});
 
-	test('should have a validation error when the user entered an invalid date range manually', async ({ page }: { page: Page }) => {
+	test('should have a validation error when the user entered an invalid date range manually', async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-date-range-picker></vwc-date-range-picker>
 				<button type="submit">Submit</button>
-			</form>`
+			</form>`,
 		});
 
 		await page.locator('vwc-text-field input').fill('invalid date range');
 		await page.getByRole('button', { name: 'Submit' }).click();
 
-		await expect(page.locator('vwc-date-range-picker .error-message')).toBeVisible();
+		await expect(
+			page.locator('vwc-date-range-picker .error-message')
+		).toBeVisible();
 	});
 
-	test('should hide a validation error after resetting the form', async ({ page }: { page: Page }) => {
+	test('should hide a validation error after resetting the form', async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-date-range-picker required></vwc-date-range-picker>
 				<button type="reset">Reset</button>
-			</form>`
+			</form>`,
 		});
 
 		await page.locator('vwc-text-field input').fill('09/01/2023 – 09/02/2023');
 		await page.getByRole('button', { name: 'Reset' }).click();
 
-		await expect(page.locator('vwc-date-range-picker .error-message')).not.toBeVisible();
+		await expect(
+			page.locator('vwc-date-range-picker .error-message')
+		).not.toBeVisible();
 	});
 });
diff --git a/libs/components/src/lib/dialog/definition.ts b/libs/components/src/lib/dialog/definition.ts
index 25a478dc91..c648f7e153 100644
--- a/libs/components/src/lib/dialog/definition.ts
+++ b/libs/components/src/lib/dialog/definition.ts
@@ -26,7 +26,12 @@ export const dialogDefinition = Dialog.compose<FoundationElementDefinition>({
 /**
  * @internal
  */
-export const dialogRegistries = [dialogDefinition(), ...iconRegistries, ...buttonRegistries, ...elevationRegistries];
+export const dialogRegistries = [
+	dialogDefinition(),
+	...iconRegistries,
+	...buttonRegistries,
+	...elevationRegistries,
+];
 
 /**
  * Registers the dialog elements with the design system.
diff --git a/libs/components/src/lib/dialog/dialog.spec.ts b/libs/components/src/lib/dialog/dialog.spec.ts
index d7d5cebef1..31a0cdf62b 100644
--- a/libs/components/src/lib/dialog/dialog.spec.ts
+++ b/libs/components/src/lib/dialog/dialog.spec.ts
@@ -7,7 +7,6 @@ import { dialogDefinition } from './definition';
 const COMPONENT_TAG = 'vwc-dialog';
 
 describe('vwc-dialog', () => {
-
 	/**
 	 *
 	 */
@@ -53,10 +52,10 @@ describe('vwc-dialog', () => {
 			expect(getBaseElement(element).hasAttribute('open')).toEqual(true);
 		});
 
-		it('should be opened when initiated with open attribute', async function() {
-			const openElement = await fixture(
+		it('should be opened when initiated with open attribute', async function () {
+			const openElement = (await fixture(
 				`<${COMPONENT_TAG} open></${COMPONENT_TAG}>`
-			) as Dialog;
+			)) as Dialog;
 
 			expect(getBaseElement(openElement).hasAttribute('open')).toEqual(true);
 		});
@@ -93,7 +92,7 @@ describe('vwc-dialog', () => {
 			expect(getBaseElement(element).hasAttribute('open')).toEqual(false);
 		});
 
-		it('should fire the "close" event only when closing', async function() {
+		it('should fire the "close" event only when closing', async function () {
 			await closeDialog();
 			const spy = jest.fn();
 			element.addEventListener('close', spy);
@@ -109,7 +108,7 @@ describe('vwc-dialog', () => {
 	});
 
 	describe('show', function () {
-		it('should add the open attribute', async function() {
+		it('should add the open attribute', async function () {
 			await showDialog();
 			expect(element.open).toEqual(true);
 			expect(element.hasAttribute('open')).toEqual(true);
@@ -122,7 +121,7 @@ describe('vwc-dialog', () => {
 	});
 
 	describe('showModal', function () {
-		it('should add the open attribute', async function() {
+		it('should add the open attribute', async function () {
 			await showModalDialog();
 			expect(element.open).toEqual(true);
 			expect(element.hasAttribute('open')).toEqual(true);
@@ -140,24 +139,23 @@ describe('vwc-dialog', () => {
 	});
 
 	describe('scrimClick', function () {
-
 		function createMouseEventOutsideTheDialog(type: string) {
 			return new MouseEvent(type, {
-				'bubbles': true,
-				'cancelable': true,
-				'composed': true,
-				'screenX': 25,
-				'screenY': 25
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+				screenX: 25,
+				screenY: 25,
 			});
 		}
 
 		function createMouseEventInsideTheDialog(type: string) {
 			return new MouseEvent(type, {
-				'bubbles': true,
-				'cancelable': true,
-				'composed': true,
+				bubbles: true,
+				cancelable: true,
+				composed: true,
 				clientY: 75,
-				clientX: 75
+				clientX: 75,
 			});
 		}
 
@@ -171,14 +169,15 @@ describe('vwc-dialog', () => {
 			width: 100,
 			x: 50,
 			y: 50,
-			toJSON(): any {
-			}
+			toJSON(): any {},
 		};
 		beforeEach(async function () {
 			element.headline = 'headline';
 			await showModalDialog();
 			dialogElement = getBaseElement(element) as HTMLDialogElement;
-			jest.spyOn(dialogElement, 'getBoundingClientRect').mockImplementation(() => dialogClientRect);
+			jest
+				.spyOn(dialogElement, 'getBoundingClientRect')
+				.mockImplementation(() => dialogClientRect);
 		});
 
 		it('should leave the dialog open when mouseup or click', async function () {
@@ -241,11 +240,11 @@ describe('vwc-dialog', () => {
 			expect(element.open).toEqual(false);
 		});
 
-		it('should leave the dialog open when submit a non dialog form', async function() {
+		it('should leave the dialog open when submit a non dialog form', async function () {
 			const formElement = document.createElement('form');
 			formElement.setAttribute('slot', 'main');
 			element.appendChild(formElement);
-			formElement.onsubmit = _ => false;
+			formElement.onsubmit = (_) => false;
 
 			formElement.requestSubmit();
 			await elementUpdated(element);
@@ -268,11 +267,11 @@ describe('vwc-dialog', () => {
 
 		it('should remove click listener on disconnected callback', async function () {
 			const event = new MouseEvent('mousedown', {
-				'bubbles': true,
-				'cancelable': true,
-				'composed': true,
-				'screenX': 25,
-				'screenY': 25
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+				screenX: 25,
+				screenY: 25,
 			});
 			element.disconnectedCallback();
 			dialogElement?.dispatchEvent(event);
@@ -281,12 +280,12 @@ describe('vwc-dialog', () => {
 		});
 	});
 
-	it("should fire 'close' event with returnValue", async function() {
+	it("should fire 'close' event with returnValue", async function () {
 		let detail;
 		const returnValue = 'returnValue';
 		element.returnValue = returnValue;
 		await showDialog();
-		const spy = jest.fn().mockImplementation((e) => detail = e.detail);
+		const spy = jest.fn().mockImplementation((e) => (detail = e.detail));
 		element.addEventListener('close', spy);
 
 		await closeDialog();
@@ -302,8 +301,9 @@ describe('vwc-dialog', () => {
 		expect(fn).not.toBeCalled();
 	});
 
-	it('should render the icon when icon is set', async function() {
-		const iconElementWhenUndefined = getBaseElement(element).querySelector('.icon');
+	it('should render the icon when icon is set', async function () {
+		const iconElementWhenUndefined =
+			getBaseElement(element).querySelector('.icon');
 		element.icon = 'home';
 		await elementUpdated(element);
 		const iconElement = getBaseElement(element).querySelector('.icon');
@@ -312,15 +312,17 @@ describe('vwc-dialog', () => {
 		expect(iconElement?.getAttribute('name')).toEqual('home');
 	});
 
-	it( 'should add class of icon placement  to .base', async () => {
+	it('should add class of icon placement  to .base', async () => {
 		element.iconPlacement = 'side';
 		await elementUpdated(element);
-		expect(getBaseElement(element)?.classList.contains('icon-placement-side'))
-			.toEqual(true);
+		expect(
+			getBaseElement(element)?.classList.contains('icon-placement-side')
+		).toEqual(true);
 	});
 
-	it('should render the subtitle if is set', async function() {
-		const contentElementWhenUndefined = getBaseElement(element).querySelector('.subtitle');
+	it('should render the subtitle if is set', async function () {
+		const contentElementWhenUndefined =
+			getBaseElement(element).querySelector('.subtitle');
 		const content = 'This is the dialog subtitle!';
 		element.subtitle = content;
 		await elementUpdated(element);
@@ -330,8 +332,9 @@ describe('vwc-dialog', () => {
 		expect(contentElement?.textContent?.trim()).toEqual(content);
 	});
 
-	it('should render the header area when content is set', async function() {
-		const headlineElementWhenUndefined = getBaseElement(element).querySelector('.headline');
+	it('should render the header area when content is set', async function () {
+		const headlineElementWhenUndefined =
+			getBaseElement(element).querySelector('.headline');
 		const content = 'This is the header!';
 
 		element.headline = content;
@@ -343,12 +346,14 @@ describe('vwc-dialog', () => {
 		expect(headlineElement?.textContent?.trim()).toEqual(content);
 	});
 
-	it('should close the dialog when dismiss button is clicked', async function() {
+	it('should close the dialog when dismiss button is clicked', async function () {
 		const spy = jest.fn();
 		element.addEventListener('close', spy);
 		await showDialog();
 
-		const dismissButton = getBaseElement(element).querySelector('.dismiss-button') as HTMLElement;
+		const dismissButton = getBaseElement(element).querySelector(
+			'.dismiss-button'
+		) as HTMLElement;
 		dismissButton.click();
 
 		expect(element.open).toEqual(false);
@@ -365,10 +370,11 @@ describe('vwc-dialog', () => {
 		expect(cancelEvent.preventDefault).toHaveBeenCalled();
 	});
 
-	describe( 'dialog body', () => {
+	describe('dialog body', () => {
 		it('should have body slot ', async function () {
-			const bodySlotElement = element.shadowRoot?.
-				querySelector('.body slot[name="body"]');
+			const bodySlotElement = element.shadowRoot?.querySelector(
+				'.body slot[name="body"]'
+			);
 
 			expect(bodySlotElement).toBeDefined();
 		});
@@ -388,15 +394,12 @@ describe('vwc-dialog', () => {
 		it('should add class of full-width to body div wrapper', async () => {
 			const bodyDiv = element.shadowRoot?.querySelector('.body');
 			element.fullWidthBody = true;
-			await  elementUpdated(element);
+			await elementUpdated(element);
 			expect(element.hasAttribute('full-width-body')).toEqual(true);
 			expect(bodyDiv?.classList).toContain('full-width');
-
 		});
-
 	});
 
-
 	describe('dialog footer', () => {
 		it.each(['footer', 'action-items'])(
 			'should have a %s slot ',
@@ -429,12 +432,13 @@ describe('vwc-dialog', () => {
 		 *
 		 */
 		async function triggerEscapeKey() {
-			getBaseElement(element)
-				.dispatchEvent(new KeyboardEvent('keydown', {
-					'key': 'Escape',
+			getBaseElement(element).dispatchEvent(
+				new KeyboardEvent('keydown', {
+					key: 'Escape',
 					bubbles: true,
-					composed: true
-				}));
+					composed: true,
+				})
+			);
 			await elementUpdated(element);
 		}
 
@@ -454,7 +458,7 @@ describe('vwc-dialog', () => {
 			expect(getBaseElement(element).getAttribute('role')).toEqual('dialog');
 		});
 
-		it('should set "aria-modal" when used as modal', async function() {
+		it('should set "aria-modal" when used as modal', async function () {
 			await showModalDialog();
 			expect(getBaseElement(element).hasAttribute('aria-modal')).toEqual(true);
 		});
@@ -463,7 +467,9 @@ describe('vwc-dialog', () => {
 			const labelId = 'label';
 			element.setAttribute('aria-label', labelId);
 			await elementUpdated(element);
-			expect(getBaseElement(element).getAttribute('aria-label')).toEqual(labelId);
+			expect(getBaseElement(element).getAttribute('aria-label')).toEqual(
+				labelId
+			);
 		});
 
 		describe('dismiss-button-aria-label', () => {
@@ -471,13 +477,15 @@ describe('vwc-dialog', () => {
 				const labelId = 'label';
 				element.setAttribute('dismiss-button-aria-label', labelId);
 				await elementUpdated(element);
-				const dismissButton = element.shadowRoot?.querySelector('.dismiss-button');
+				const dismissButton =
+					element.shadowRoot?.querySelector('.dismiss-button');
 				expect(dismissButton?.getAttribute('aria-label')).toBe(labelId);
 			});
 		});
 
 		it('should set localised "aria-label" on the dismiss button', async () => {
-			const dismissButton = element.shadowRoot?.querySelector('.dismiss-button');
+			const dismissButton =
+				element.shadowRoot?.querySelector('.dismiss-button');
 			expect(dismissButton?.getAttribute('aria-label')).toBe('Close');
 		});
 
@@ -486,9 +494,7 @@ describe('vwc-dialog', () => {
 			element.setAttribute('aria-label', 'Test dialog');
 			await elementUpdated(element);
 
-
 			expect(await axe(element)).toHaveNoViolations();
 		});
 	});
 });
-
diff --git a/libs/components/src/lib/dialog/dialog.template.ts b/libs/components/src/lib/dialog/dialog.template.ts
index 87350497a8..b54e527cc2 100644
--- a/libs/components/src/lib/dialog/dialog.template.ts
+++ b/libs/components/src/lib/dialog/dialog.template.ts
@@ -1,14 +1,14 @@
-import {html, slotted, when} from '@microsoft/fast-element';
-import type {ViewTemplate} from '@microsoft/fast-element';
+import { html, slotted, when } from '@microsoft/fast-element';
+import type { ViewTemplate } from '@microsoft/fast-element';
 import type {
 	ElementDefinitionContext,
 	FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
-import {classNames} from '@microsoft/fast-web-utilities';
+import { classNames } from '@microsoft/fast-web-utilities';
 import { Elevation } from '../elevation/elevation';
 import { Icon } from '../icon/icon';
 import { Button } from '../button/button';
-import type {Dialog} from './dialog';
+import type { Dialog } from './dialog';
 
 const getClasses = ({
 	iconPlacement,
@@ -22,10 +22,7 @@ const getClasses = ({
 		['hide-body', !bodySlottedContent?.length],
 		[
 			'hide-footer',
-			!(
-				footerSlottedContent?.length ||
-				actionItemsSlottedContent?.length
-			),
+			!(footerSlottedContent?.length || actionItemsSlottedContent?.length),
 		]
 	);
 /**
@@ -33,7 +30,7 @@ const getClasses = ({
  */
 function icon(iconTag: string) {
 	return html<Dialog>`
-		<${iconTag} class="icon" name="${x => x.icon}"></${iconTag}>
+		<${iconTag} class="icon" name="${(x) => x.icon}"></${iconTag}>
 	`;
 }
 
@@ -41,22 +38,14 @@ function icon(iconTag: string) {
  *
  */
 function headline() {
-	return html<Dialog>`
-	  <div class="headline">
-		  ${x => x.headline}
-	  </div>
-	`;
+	return html<Dialog>` <div class="headline">${(x) => x.headline}</div> `;
 }
 
 /**
  *
  */
 function subtitle() {
-	return html<Dialog>`
-	  <div class="subtitle">
-		  ${x => x.subtitle}
-	  </div>
-	`;
+	return html<Dialog>` <div class="subtitle">${(x) => x.subtitle}</div> `;
 }
 
 /**
@@ -65,11 +54,12 @@ function subtitle() {
 function renderDismissButton(buttonTag: string) {
 	return html<Dialog>`
 	<${buttonTag}
-		aria-label="${x => x.dismissButtonAriaLabel || x.locale.dialog.dismissButtonLabel}"
+		aria-label="${(x) =>
+			x.dismissButtonAriaLabel || x.locale.dialog.dismissButtonLabel}"
 		size="condensed"
 		class="dismiss-button"
 		icon="close-line"
-		@click="${x => x.open = false}"
+		@click="${(x) => (x.open = false)}"
 	></${buttonTag}>`;
 }
 
@@ -99,20 +89,20 @@ export const DialogTemplate: (
 		<dialog class="${getClasses}"
 				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
 				@cancel="${(_, c) => c.event.preventDefault()}"
-				returnValue="${x => x.returnValue}"
-				aria-label="${x => x.ariaLabel}"
+				returnValue="${(x) => x.returnValue}"
+				aria-label="${(x) => x.ariaLabel}"
 		>
 			<slot name="main">
 				<div class="main-wrapper">
-					<div class="header ${x => x.subtitle ? 'border' : ''}">
+					<div class="header ${(x) => (x.subtitle ? 'border' : '')}">
 							<slot name="graphic">
-								${when(x => x.icon, icon(iconTag))}
+								${when((x) => x.icon, icon(iconTag))}
 							</slot>
-							${when(x => x.headline, headline())}
-							${when(x => x.subtitle, subtitle())}
+							${when((x) => x.headline, headline())}
+							${when((x) => x.subtitle, subtitle())}
 							${renderDismissButton(buttonTag)}
 					</div>
-					<div class="body ${x => x.fullWidthBody? 'full-width' : ''}" >
+					<div class="body ${(x) => (x.fullWidthBody ? 'full-width' : '')}" >
 						<slot name="body" ${slotted('bodySlottedContent')}></slot>
 					</div>
 					<div class="footer">
diff --git a/libs/components/src/lib/dialog/dialog.ts b/libs/components/src/lib/dialog/dialog.ts
index 96ee8fa4bd..f5a7574eeb 100644
--- a/libs/components/src/lib/dialog/dialog.ts
+++ b/libs/components/src/lib/dialog/dialog.ts
@@ -1,9 +1,11 @@
 import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
-import {attr, observable} from '@microsoft/fast-element';
+import { attr, observable } from '@microsoft/fast-element';
 import { Localized } from '../../shared/patterns';
 
 // eslint-disable-next-line compat/compat
-export const isDialogSupported = Boolean(window.HTMLDialogElement && window.HTMLDialogElement.prototype.showModal);
+export const isDialogSupported = Boolean(
+	window.HTMLDialogElement && window.HTMLDialogElement.prototype.showModal
+);
 
 // Make sure we support Safari 14
 let dialogPolyfill: any;
@@ -41,15 +43,19 @@ export class Dialog extends FoundationElement {
 	 * @remarks
 	 * HTML Attribute: open
 	 */
-	@attr({mode: 'boolean'}) open = false;
+	@attr({ mode: 'boolean' }) open = false;
 	@attr icon?: string;
-	@attr({attribute: 'icon-placement'}) iconPlacement?: IconPlacement;
+	@attr({ attribute: 'icon-placement' }) iconPlacement?: IconPlacement;
 	@attr subtitle?: string;
 	@attr headline?: string;
-	@attr ({attribute: 'full-width-body', mode: 'boolean'}) fullWidthBody = false;
-	@attr({attribute: 'aria-label'}) override ariaLabel: string | null = null;
-	@attr({attribute: 'dismiss-button-aria-label'}) dismissButtonAriaLabel: string | null = null;
-	@attr ({attribute: 'no-light-dismiss', mode: 'boolean'}) noLightDismiss = false;
+	@attr({ attribute: 'full-width-body', mode: 'boolean' }) fullWidthBody =
+		false;
+	@attr({ attribute: 'aria-label' }) override ariaLabel: string | null = null;
+	@attr({ attribute: 'dismiss-button-aria-label' }) dismissButtonAriaLabel:
+		| string
+		| null = null;
+	@attr({ attribute: 'no-light-dismiss', mode: 'boolean' }) noLightDismiss =
+		false;
 
 	#modal = false;
 
@@ -61,7 +67,6 @@ export class Dialog extends FoundationElement {
 		return this.#dialog?.returnValue;
 	}
 
-
 	/**
 	 * @internal
 	 */
@@ -73,7 +78,9 @@ export class Dialog extends FoundationElement {
 
 	get #dialog() {
 		if (!this.#dialogElement) {
-			this.#dialogElement = this.shadowRoot!.querySelector('dialog') as HTMLDialogElement;
+			this.#dialogElement = this.shadowRoot!.querySelector(
+				'dialog'
+			) as HTMLDialogElement;
 			if (this.#dialogElement) {
 				this.#dialogElement.open = this.open;
 				if (dialogPolyfill) {
@@ -106,12 +113,11 @@ export class Dialog extends FoundationElement {
 		}
 		const rect = this.#dialog.getBoundingClientRect();
 
-		const clickedInDialog = (
+		const clickedInDialog =
 			rect.top <= event.clientY &&
 			event.clientY <= rect.top + rect.height &&
 			rect.left <= event.clientX &&
-			event.clientX <= rect.left + rect.width
-		);
+			event.clientX <= rect.left + rect.width;
 
 		this.open = clickedInDialog;
 	};
@@ -163,7 +169,6 @@ export class Dialog extends FoundationElement {
 		this.#dialog.removeEventListener('submit', this.#handleInternalFormSubmit);
 	}
 
-
 	/**
 	 * @internal
 	 */
@@ -176,7 +181,6 @@ export class Dialog extends FoundationElement {
 	 * @internal
 	 */
 	@observable actionItemsSlottedContent?: HTMLElement[];
-
 }
 
 export interface Dialog extends Localized {}
diff --git a/libs/components/src/lib/dialog/index.ts b/libs/components/src/lib/dialog/index.ts
index 073bdf3125..cdb79086f5 100644
--- a/libs/components/src/lib/dialog/index.ts
+++ b/libs/components/src/lib/dialog/index.ts
@@ -1,4 +1,3 @@
 import { registerDialog } from './definition';
 
-
 registerDialog();
diff --git a/libs/components/src/lib/dialog/locale.ts b/libs/components/src/lib/dialog/locale.ts
index 7e28df6b4e..00c83d442b 100644
--- a/libs/components/src/lib/dialog/locale.ts
+++ b/libs/components/src/lib/dialog/locale.ts
@@ -1,3 +1,3 @@
 export interface DialogLocale {
 	dismissButtonLabel: string;
-}
\ No newline at end of file
+}
diff --git a/libs/components/src/lib/dialog/ui.test.ts b/libs/components/src/lib/dialog/ui.test.ts
index cea9b004d0..41b4ad551d 100644
--- a/libs/components/src/lib/dialog/ui.test.ts
+++ b/libs/components/src/lib/dialog/ui.test.ts
@@ -4,11 +4,15 @@ import {
 	loadComponents,
 	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
-import type {Dialog} from './dialog';
+import type { Dialog } from './dialog';
 
 const components = ['dialog'];
 
-test('should set preventDefault to false on keydown event', async ({ page }: { page: Page }) => {
+test('should set preventDefault to false on keydown event', async ({
+	page,
+}: {
+	page: Page;
+}) => {
 	const template = `
 		<vwc-dialog id="dialog" open>
 			<div slot="main"><input id="input"/></div>
@@ -32,7 +36,6 @@ test('should set preventDefault to false on keydown event', async ({ page }: { p
 	await page.keyboard.type(typedValue);
 
 	expect(await input.inputValue()).toBe(typedValue);
-
 });
 
 test('should show the component', async ({ page }: { page: Page }) => {
@@ -115,7 +118,11 @@ test('should show the component', async ({ page }: { page: Page }) => {
 	);
 });
 
-test('should show the the dialog as a modal when calling .showModal()', async ({ page }: { page: Page }) => {
+test('should show the the dialog as a modal when calling .showModal()', async ({
+	page,
+}: {
+	page: Page;
+}) => {
 	const template = `
 		<div style="height: 800px">
 			<vwc-dialog
@@ -142,7 +149,7 @@ test('should show the the dialog as a modal when calling .showModal()', async ({
 	await page.waitForLoadState('networkidle');
 
 	await page.evaluate(() => {
-		const modal = (document.getElementById('modal') as Dialog);
+		const modal = document.getElementById('modal') as Dialog;
 		modal.showModal();
 		return modal;
 	});
diff --git a/libs/components/src/lib/divider/definition.ts b/libs/components/src/lib/divider/definition.ts
index 97ff85900d..5cd98f99d4 100644
--- a/libs/components/src/lib/divider/definition.ts
+++ b/libs/components/src/lib/divider/definition.ts
@@ -5,7 +5,6 @@ import styles from './divider.scss?inline';
 import { Divider } from './divider';
 import { DividerTemplate as template } from './divider.template';
 
-
 /**
  * The Divider element.
  *
diff --git a/libs/components/src/lib/divider/divider.spec.ts b/libs/components/src/lib/divider/divider.spec.ts
index 171bc9aa14..2d41d70331 100644
--- a/libs/components/src/lib/divider/divider.spec.ts
+++ b/libs/components/src/lib/divider/divider.spec.ts
@@ -23,7 +23,7 @@ describe('vwc-divider', () => {
 	});
 
 	describe('orientation', function () {
-		it('should set the orientation class', async function() {
+		it('should set the orientation class', async function () {
 			const base = element.shadowRoot?.querySelector('.base');
 			const orientation = 'vertical';
 			(element as any).orientation = orientation;
@@ -34,7 +34,7 @@ describe('vwc-divider', () => {
 	});
 
 	describe('role', function () {
-		it('should set the role attribute on base', async function() {
+		it('should set the role attribute on base', async function () {
 			element.toggleAttribute('roll', true);
 			await elementUpdated(element);
 
diff --git a/libs/components/src/lib/divider/divider.template.ts b/libs/components/src/lib/divider/divider.template.ts
index e4d5f2d5f9..fee385326f 100644
--- a/libs/components/src/lib/divider/divider.template.ts
+++ b/libs/components/src/lib/divider/divider.template.ts
@@ -7,10 +7,8 @@ import type {
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { Divider } from './divider';
 
-const getClasses = ({orientation}: Divider) => classNames(
-	'base',
-	[`${orientation}`, Boolean(orientation)],
-);
+const getClasses = ({ orientation }: Divider) =>
+	classNames('base', [`${orientation}`, Boolean(orientation)]);
 
 /**
  * The template for the Divider component.
@@ -20,9 +18,8 @@ const getClasses = ({orientation}: Divider) => classNames(
 export const DividerTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
-) => ViewTemplate<Divider> = () => html` 
-  <span
-  class="${getClasses}"
-  	orientation="${(x) => x.orientation}"
-  	role="${(x) => x.role}"
-  ></span>`;
+) => ViewTemplate<Divider> = () => html` <span
+	class="${getClasses}"
+	orientation="${(x) => x.orientation}"
+	role="${(x) => x.role}"
+></span>`;
diff --git a/libs/components/src/lib/divider/divider.ts b/libs/components/src/lib/divider/divider.ts
index 48c10c80eb..279d8e5d5d 100644
--- a/libs/components/src/lib/divider/divider.ts
+++ b/libs/components/src/lib/divider/divider.ts
@@ -4,5 +4,4 @@ import { Divider as FoundationDivider } from '@microsoft/fast-foundation';
  * @public
  * @component divider
  */
-export class Divider extends FoundationDivider {
-}
+export class Divider extends FoundationDivider {}
diff --git a/libs/components/src/lib/divider/index.ts b/libs/components/src/lib/divider/index.ts
index 0c65311358..389541d403 100644
--- a/libs/components/src/lib/divider/index.ts
+++ b/libs/components/src/lib/divider/index.ts
@@ -1,4 +1,3 @@
 import { registerDivider } from './definition';
 
-
 registerDivider();
diff --git a/libs/components/src/lib/elevation/definition.ts b/libs/components/src/lib/elevation/definition.ts
index 7e006e897e..8363de61a1 100644
--- a/libs/components/src/lib/elevation/definition.ts
+++ b/libs/components/src/lib/elevation/definition.ts
@@ -4,17 +4,17 @@ import { Elevation } from './elevation';
 import styles from './elevation.scss?inline';
 import { elevationTemplate as template } from './elevation.template';
 
-
 /**
  * Represents an elevation custom element.
  *
  * @internal
  */
-export const elevationDefinition = Elevation.compose<FoundationElementDefinition>({
-	baseName: 'elevation',
-	template: template as any,
-	styles,
-});
+export const elevationDefinition =
+	Elevation.compose<FoundationElementDefinition>({
+		baseName: 'elevation',
+		template: template as any,
+		styles,
+	});
 
 /**
  * @internal
diff --git a/libs/components/src/lib/elevation/elevation.spec.ts b/libs/components/src/lib/elevation/elevation.spec.ts
index 2433d9306d..4bdc9185d6 100644
--- a/libs/components/src/lib/elevation/elevation.spec.ts
+++ b/libs/components/src/lib/elevation/elevation.spec.ts
@@ -1,4 +1,9 @@
-import { axe, elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getControlElement,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { Elevation } from './elevation';
 import '.';
@@ -10,7 +15,9 @@ describe('vwc-elevation', () => {
 	let element: Elevation;
 
 	beforeEach(async () => {
-		element = await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`) as Elevation;
+		element = (await fixture(
+			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
+		)) as Elevation;
 	});
 
 	describe('basic', () => {
@@ -41,11 +48,15 @@ describe('vwc-elevation', () => {
 			await elementUpdated(element);
 			const classPrefix = 'dp-';
 
-			const startingDPClassExists = getControlElement(element).classList.contains(`${classPrefix}${startingDP}`);
+			const startingDPClassExists = getControlElement(
+				element
+			).classList.contains(`${classPrefix}${startingDP}`);
 
 			element.setAttribute('dp', nextDP);
 			await elementUpdated(element);
-			const nextDPClassExists = getControlElement(element).classList.contains(`${classPrefix}${nextDP}`);
+			const nextDPClassExists = getControlElement(element).classList.contains(
+				`${classPrefix}${nextDP}`
+			);
 			expect(startingDPClassExists).toEqual(true);
 			expect(nextDPClassExists).toEqual(true);
 		});
@@ -62,4 +73,3 @@ describe('vwc-elevation', () => {
 		});
 	});
 });
-
diff --git a/libs/components/src/lib/elevation/elevation.template.ts b/libs/components/src/lib/elevation/elevation.template.ts
index 3781aef6fc..6fac71e716 100644
--- a/libs/components/src/lib/elevation/elevation.template.ts
+++ b/libs/components/src/lib/elevation/elevation.template.ts
@@ -1,16 +1,18 @@
 import { html } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import type { Elevation } from './elevation';
 
-const getClasses = ({
-	dp, noShadow
-}: Elevation) => classNames(
-	'control',
-	[`dp-${dp}`, Boolean(dp)],
-	['no-shadow', Boolean(noShadow)],
-);
+const getClasses = ({ dp, noShadow }: Elevation) =>
+	classNames(
+		'control',
+		[`dp-${dp}`, Boolean(dp)],
+		['no-shadow', Boolean(noShadow)]
+	);
 
 /**
  * The template for the Elevation component.
@@ -21,7 +23,9 @@ const getClasses = ({
 export const elevationTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
-) => ViewTemplate<Elevation> = () => html`
-        <div class="${getClasses}" part="base">
-			<slot></slot>
-		</div>`;
+) => ViewTemplate<Elevation> = () => html` <div
+	class="${getClasses}"
+	part="base"
+>
+	<slot></slot>
+</div>`;
diff --git a/libs/components/src/lib/elevation/elevation.ts b/libs/components/src/lib/elevation/elevation.ts
index 922174ce4f..74d9a73c6c 100644
--- a/libs/components/src/lib/elevation/elevation.ts
+++ b/libs/components/src/lib/elevation/elevation.ts
@@ -21,5 +21,4 @@ export class Elevation extends FoundationElement {
 	 * HTML Attribute: boolean
 	 */
 	@attr({ attribute: 'no-shadow', mode: 'boolean' }) noShadow?: boolean;
-
 }
diff --git a/libs/components/src/lib/elevation/index.ts b/libs/components/src/lib/elevation/index.ts
index 33f50990ad..e107c35005 100644
--- a/libs/components/src/lib/elevation/index.ts
+++ b/libs/components/src/lib/elevation/index.ts
@@ -1,4 +1,3 @@
 import { registerElevation } from './definition';
 
-
 registerElevation();
diff --git a/libs/components/src/lib/elevation/ui.test.ts b/libs/components/src/lib/elevation/ui.test.ts
index 9edb953afb..1a2634fe70 100644
--- a/libs/components/src/lib/elevation/ui.test.ts
+++ b/libs/components/src/lib/elevation/ui.test.ts
@@ -1,16 +1,21 @@
 import * as path from 'path';
-import {expect, test} from '@playwright/test';
-import type {Page} from '@playwright/test';
+import { expect, test } from '@playwright/test';
+import type { Page } from '@playwright/test';
 import {
 	extractHTMLBlocksFromReadme,
 	loadComponents,
-	loadTemplate
+	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
 const components = ['elevation', 'layout'];
-test('should show the component', async ({page}: { page: Page }) => {
-	const template = extractHTMLBlocksFromReadme(path.join(new URL('.', import.meta.url).pathname, 'README.md'))
-		.reduce((htmlString: string, block: string) => `${htmlString} <div style="margin: 5px;">${block}</div>`, '');
+test('should show the component', async ({ page }: { page: Page }) => {
+	const template = extractHTMLBlocksFromReadme(
+		path.join(new URL('.', import.meta.url).pathname, 'README.md')
+	).reduce(
+		(htmlString: string, block: string) =>
+			`${htmlString} <div style="margin: 5px;">${block}</div>`,
+		''
+	);
 
 	page.setViewportSize({ width: 560, height: 720 });
 
@@ -27,8 +32,7 @@ test('should show the component', async ({page}: { page: Page }) => {
 
 	await page.waitForLoadState('networkidle');
 
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/elevation.png',
-		);
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/elevation.png'
+	);
 });
diff --git a/libs/components/src/lib/empty-state/empty-state.spec.ts b/libs/components/src/lib/empty-state/empty-state.spec.ts
index d3e2e9e9f6..fee21cd4f3 100644
--- a/libs/components/src/lib/empty-state/empty-state.spec.ts
+++ b/libs/components/src/lib/empty-state/empty-state.spec.ts
@@ -32,7 +32,9 @@ describe('vwc-empty-state', () => {
 			const headlineText = 'headline';
 			element.setAttribute('headline', headlineText);
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('header')?.textContent?.trim()).toEqual(headlineText);
+			expect(
+				element.shadowRoot?.querySelector('header')?.textContent?.trim()
+			).toEqual(headlineText);
 		});
 	});
 
@@ -51,7 +53,9 @@ describe('vwc-empty-state', () => {
 
 	describe('default slot', () => {
 		it('should should have a default slot', () => {
-			expect(element.shadowRoot?.querySelector('slot:not([name])')).toBeTruthy();
+			expect(
+				element.shadowRoot?.querySelector('slot:not([name])')
+			).toBeTruthy();
 		});
 	});
 
@@ -78,7 +82,9 @@ describe('vwc-empty-state', () => {
 		});
 
 		it('should have no-actions class if slot is not occupied', () => {
-			expect(getBaseElement(element).classList.contains('no-action')).toBe(false);
+			expect(getBaseElement(element).classList.contains('no-action')).toBe(
+				false
+			);
 		});
 
 		it('should not have no-actions class if slot is occupied', async () => {
@@ -86,7 +92,9 @@ describe('vwc-empty-state', () => {
 			slotted.slot = 'action-items';
 			element.appendChild(slotted);
 			await elementUpdated(element);
-			expect(getBaseElement(element).classList.contains('no-action')).toBe(false);
+			expect(getBaseElement(element).classList.contains('no-action')).toBe(
+				false
+			);
 		});
 	});
 
diff --git a/libs/components/src/lib/empty-state/empty-state.template.ts b/libs/components/src/lib/empty-state/empty-state.template.ts
index 0c1a07d6c9..0311bb9c30 100644
--- a/libs/components/src/lib/empty-state/empty-state.template.ts
+++ b/libs/components/src/lib/empty-state/empty-state.template.ts
@@ -1,4 +1,4 @@
-import {html, slotted, when} from '@microsoft/fast-element';
+import { html, slotted, when } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type {
 	ElementDefinitionContext,
@@ -8,9 +8,8 @@ import { classNames } from '@microsoft/fast-web-utilities';
 import { Icon } from '../icon/icon';
 import type { EmptyState } from './empty-state';
 
-const getClasses = (x: EmptyState) => classNames('base',
-	['no-actions', x.slottedActionItems?.length === 0]
-);
+const getClasses = (x: EmptyState) =>
+	classNames('base', ['no-actions', x.slottedActionItems?.length === 0]);
 
 /**
  * The template for the EmptyState component.
@@ -21,31 +20,27 @@ const getClasses = (x: EmptyState) => classNames('base',
 export const EmptyStateTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
-) => ViewTemplate<EmptyState> = (
-	context: ElementDefinitionContext
-) => {
+) => ViewTemplate<EmptyState> = (context: ElementDefinitionContext) => {
 	const iconTag = context.tagFor(Icon);
 
-	return html<EmptyState>`
-		<div class="${getClasses}">
-			<slot name="graphic">
-				${when(
-		x => x.icon,
-		html<EmptyState>`<div class="icon-container">
+	return html<EmptyState>` <div class="${getClasses}">
+		<slot name="graphic">
+			${when(
+				(x) => x.icon,
+				html<EmptyState>`<div class="icon-container">
 					<${iconTag} class="icon" name="${(x) => x.icon}" size="5"></${iconTag}>
 				</div>`
-	)}
-			</slot>
-			<div class="content">
-				${when(
-		(x) => x.headline,
-		html<EmptyState>`<header>${(x) => x.headline}</header>`
-	)}
-				<slot></slot>
-			</div>
-			<div class="actions">
-				<slot name="action-items" ${slotted('slottedActionItems')}></slot>
-			</div>
-		</div>`;
+			)}
+		</slot>
+		<div class="content">
+			${when(
+				(x) => x.headline,
+				html<EmptyState>`<header>${(x) => x.headline}</header>`
+			)}
+			<slot></slot>
+		</div>
+		<div class="actions">
+			<slot name="action-items" ${slotted('slottedActionItems')}></slot>
+		</div>
+	</div>`;
 };
-
diff --git a/libs/components/src/lib/empty-state/empty-state.ts b/libs/components/src/lib/empty-state/empty-state.ts
index 018fd4d8ea..0a3137ca71 100644
--- a/libs/components/src/lib/empty-state/empty-state.ts
+++ b/libs/components/src/lib/empty-state/empty-state.ts
@@ -1,5 +1,5 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
-import {attr, observable} from '@microsoft/fast-element';
+import { attr, observable } from '@microsoft/fast-element';
 
 /**
  * An empty state element. Used when there is no data to display to the user.
diff --git a/libs/components/src/lib/empty-state/ui.test.ts b/libs/components/src/lib/empty-state/ui.test.ts
index 06c627b41c..808fe64d1d 100644
--- a/libs/components/src/lib/empty-state/ui.test.ts
+++ b/libs/components/src/lib/empty-state/ui.test.ts
@@ -10,7 +10,8 @@ import {
 const components = ['empty-state', 'button'];
 
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template = `<style>
+	const template =
+		`<style>
 			#wrapper {
 				width: 500px;
 				display: grid;
diff --git a/libs/components/src/lib/enums.ts b/libs/components/src/lib/enums.ts
index 6c01e2fbae..d9b6178138 100644
--- a/libs/components/src/lib/enums.ts
+++ b/libs/components/src/lib/enums.ts
@@ -18,7 +18,7 @@ export enum Shape {
 	Rounded = 'rounded',
 	Pill = 'pill',
 	Circled = 'circled',
-	Sharp = 'sharp'
+	Sharp = 'sharp',
 }
 
 /* eslint-disable no-shadow */
@@ -29,8 +29,8 @@ export enum Appearance {
 	Fieldset = 'fieldset',
 	Subtle = 'subtle',
 	Ghost = 'ghost',
-	Listitem ='listitem',
-	Elevated = 'elevated'
+	Listitem = 'listitem',
+	Elevated = 'elevated',
 }
 
 export enum Size {
diff --git a/libs/components/src/lib/fab/fab.spec.ts b/libs/components/src/lib/fab/fab.spec.ts
index a483bdc9d7..5716b312bf 100644
--- a/libs/components/src/lib/fab/fab.spec.ts
+++ b/libs/components/src/lib/fab/fab.spec.ts
@@ -1,6 +1,11 @@
-import { axe, elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getControlElement,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
-import {Icon} from '../icon/icon';
+import { Icon } from '../icon/icon';
 import { Fab, FabConnotation } from './fab';
 import '.';
 import { fabDefinition } from './definition';
@@ -40,7 +45,9 @@ describe('vwc-fab', () => {
 
 	describe('icon', () => {
 		it('should have an icon slot', async () => {
-			expect(Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))).toEqual(true);
+			expect(
+				Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))
+			).toEqual(true);
 		});
 
 		it('should have an icon when icon is set without slotted icon', async () => {
@@ -48,46 +55,55 @@ describe('vwc-fab', () => {
 			await elementUpdated(element);
 
 			const icon = element.shadowRoot?.querySelector(ICON_SELECTOR) as Icon;
-			expect(icon)
-				.toBeInstanceOf(Icon);
-			expect(icon?.name)
-				.toEqual('home');
+			expect(icon).toBeInstanceOf(Icon);
+			expect(icon?.name).toEqual('home');
 		});
 
-
-
 		it('should set icon-trailing property', async () => {
-			expect(getControlElement(element).classList.contains('icon-trailing')).toBeFalsy();
+			expect(
+				getControlElement(element).classList.contains('icon-trailing')
+			).toBeFalsy();
 			const icon = 'home-line';
 			element.icon = icon;
 			element.iconTrailing = true;
 			await elementUpdated(element);
-			expect(getControlElement(element).classList.contains('icon-trailing')).toBeTruthy();
+			expect(
+				getControlElement(element).classList.contains('icon-trailing')
+			).toBeTruthy();
 		});
 	});
 
-	describe('icon-only class', ()=> {
+	describe('icon-only class', () => {
 		it('should set icon-only property when icon is set', async () => {
-			expect(getControlElement(element).classList.contains('icon-only')).toBeFalsy();
+			expect(
+				getControlElement(element).classList.contains('icon-only')
+			).toBeFalsy();
 			const icon = 'home-line';
 			element.icon = icon;
 			await elementUpdated(element);
-			expect(getControlElement(element).classList.contains('icon-only')).toBeTruthy();
+			expect(
+				getControlElement(element).classList.contains('icon-only')
+			).toBeTruthy();
 		});
 
 		it('should have an icon slot', async () => {
-			expect(Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))).toEqual(true);
+			expect(
+				Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))
+			).toEqual(true);
 		});
 
 		it('should set icon-only class if slot name="icon" is slotted', async () => {
-			const iconOnlyClassExistsWithoutSlot = getControlElement(element).classList.contains('icon-only');
+			const iconOnlyClassExistsWithoutSlot =
+				getControlElement(element).classList.contains('icon-only');
 			const slottedElement = document.createElement('span');
 			slottedElement.slot = 'icon';
 			element.appendChild(slottedElement);
 			await elementUpdated(element);
 
 			expect(iconOnlyClassExistsWithoutSlot).toEqual(false);
-			expect(getControlElement(element).classList.contains('icon-only')).toEqual(true);
+			expect(
+				getControlElement(element).classList.contains('icon-only')
+			).toEqual(true);
 		});
 
 		it('should leave the slotted elements unreflected', async () => {
@@ -98,16 +114,23 @@ describe('vwc-fab', () => {
 			expect(element.iconSlottedContent?.length).toEqual(1);
 			expect(element.hasAttribute('iconSlottedContent')).toEqual(false);
 		});
-
 	});
 
 	describe('connotation', () => {
 		it('should set connotation property', async () => {
 			const connotation = 'cta' as FabConnotation;
-			expect(getControlElement(element).classList.contains(`connotation-${connotation}`)).toBeFalsy();
+			expect(
+				getControlElement(element).classList.contains(
+					`connotation-${connotation}`
+				)
+			).toBeFalsy();
 			element.connotation = connotation;
 			await elementUpdated(element);
-			expect(getControlElement(element).classList.contains(`connotation-${connotation}`)).toBeTruthy();
+			expect(
+				getControlElement(element).classList.contains(
+					`connotation-${connotation}`
+				)
+			).toBeTruthy();
 		});
 	});
 
@@ -117,7 +140,9 @@ describe('vwc-fab', () => {
 			(element as any).size = size;
 			await elementUpdated(element);
 
-			const control = element.shadowRoot?.querySelector(`.control.size-${size}`);
+			const control = element.shadowRoot?.querySelector(
+				`.control.size-${size}`
+			);
 			expect(control?.classList.contains(`size-${size}`)).toBeTruthy();
 		});
 	});
diff --git a/libs/components/src/lib/fab/fab.template.ts b/libs/components/src/lib/fab/fab.template.ts
index 0af09dc058..aff1c1a37e 100644
--- a/libs/components/src/lib/fab/fab.template.ts
+++ b/libs/components/src/lib/fab/fab.template.ts
@@ -1,20 +1,33 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
 import { html, ref } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import type { Fab } from './fab';
 
 const getClasses = ({
-	connotation, size, icon, label, iconTrailing, disabled, iconSlottedContent
-}: Fab) => classNames(
-	'control',
-	[`connotation-${connotation}`, Boolean(connotation)],
-	[`size-${size}`, Boolean(size)],
-	['icon-only', !label && !!(icon || iconSlottedContent?.length)],
-	['icon-trailing', iconTrailing],
-	['disabled', disabled],
-);
+	connotation,
+	size,
+	icon,
+	label,
+	iconTrailing,
+	disabled,
+	iconSlottedContent,
+}: Fab) =>
+	classNames(
+		'control',
+		[`connotation-${connotation}`, Boolean(connotation)],
+		[`size-${size}`, Boolean(size)],
+		['icon-only', !label && !!(icon || iconSlottedContent?.length)],
+		['icon-trailing', iconTrailing],
+		['disabled', disabled]
+	);
 
 /**
  * The template for the (Button:class) component.
@@ -29,38 +42,37 @@ export const FabTemplate: (
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
 	return html`
-        <button
-            class="${getClasses} "
-            ?autofocus="${(x) => x.autofocus}"
-            ?disabled="${(x) => x.disabled}"
-            form="${(x) => x.formId}"
-            formaction="${(x) => x.formaction}"
-            formenctype="${(x) => x.formenctype}"
-            formmethod="${(x) => x.formmethod}"
-            formnovalidate="${(x) => x.formnovalidate}"
-            formtarget="${(x) => x.formtarget}"
-            name="${(x) => x.name}"
-            type="${(x) => x.type}"
-            value="${(x) => x.value}"
-            aria-atomic="${(x) => x.ariaAtomic}"
-            aria-busy="${(x) => x.ariaBusy}"
-            aria-current="${(x) => x.ariaCurrent}"
-            aria-details="${(x) => x.ariaDetails}"
-            aria-disabled="${(x) => x.ariaDisabled}"
-            aria-expanded="${(x) => x.ariaExpanded}"
-            aria-haspopup="${(x) => x.ariaHaspopup}"
-            aria-hidden="${(x) => x.ariaHidden}"
-            aria-invalid="${(x) => x.ariaInvalid}"
-            aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
-            aria-label="${(x) => x.ariaLabel}"
-            aria-live="${(x) => x.ariaLive}"
-            aria-pressed="${(x) => x.ariaPressed}"
-            aria-relevant="${(x) => x.ariaRelevant}"
-            aria-roledescription="${(x) => x.ariaRoledescription}"
-            ${ref('control')}
-        >
-					  ${x => affixIconTemplate(x.icon, IconWrapper.Slot)}
-            ${(x) => x.label}
-        </button>
-`;
+		<button
+			class="${getClasses} "
+			?autofocus="${(x) => x.autofocus}"
+			?disabled="${(x) => x.disabled}"
+			form="${(x) => x.formId}"
+			formaction="${(x) => x.formaction}"
+			formenctype="${(x) => x.formenctype}"
+			formmethod="${(x) => x.formmethod}"
+			formnovalidate="${(x) => x.formnovalidate}"
+			formtarget="${(x) => x.formtarget}"
+			name="${(x) => x.name}"
+			type="${(x) => x.type}"
+			value="${(x) => x.value}"
+			aria-atomic="${(x) => x.ariaAtomic}"
+			aria-busy="${(x) => x.ariaBusy}"
+			aria-current="${(x) => x.ariaCurrent}"
+			aria-details="${(x) => x.ariaDetails}"
+			aria-disabled="${(x) => x.ariaDisabled}"
+			aria-expanded="${(x) => x.ariaExpanded}"
+			aria-haspopup="${(x) => x.ariaHaspopup}"
+			aria-hidden="${(x) => x.ariaHidden}"
+			aria-invalid="${(x) => x.ariaInvalid}"
+			aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+			aria-label="${(x) => x.ariaLabel}"
+			aria-live="${(x) => x.ariaLive}"
+			aria-pressed="${(x) => x.ariaPressed}"
+			aria-relevant="${(x) => x.ariaRelevant}"
+			aria-roledescription="${(x) => x.ariaRoledescription}"
+			${ref('control')}
+		>
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.label}
+		</button>
+	`;
 };
diff --git a/libs/components/src/lib/fab/fab.ts b/libs/components/src/lib/fab/fab.ts
index 56922a0be5..c0ad740f2d 100644
--- a/libs/components/src/lib/fab/fab.ts
+++ b/libs/components/src/lib/fab/fab.ts
@@ -1,5 +1,8 @@
-import { applyMixins, Button as FoundationButton } from '@microsoft/fast-foundation';
-import {attr} from '@microsoft/fast-element';
+import {
+	applyMixins,
+	Button as FoundationButton,
+} from '@microsoft/fast-foundation';
+import { attr } from '@microsoft/fast-element';
 
 import type { Connotation, Size } from '../enums.js';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
@@ -9,7 +12,10 @@ import { AffixIconWithTrailing } from '../../shared/patterns/affix';
  *
  * @public
  */
-export type FabConnotation = Extract<Connotation, Connotation.CTA | Connotation.Accent>;
+export type FabConnotation = Extract<
+	Connotation,
+	Connotation.CTA | Connotation.Accent
+>;
 
 /**
  * Types of FAB size.
@@ -52,6 +58,5 @@ export class Fab extends FoundationButton {
 	@attr label?: string;
 }
 
-export interface Fab extends AffixIconWithTrailing { }
+export interface Fab extends AffixIconWithTrailing {}
 applyMixins(Fab, AffixIconWithTrailing);
-
diff --git a/libs/components/src/lib/fab/index.ts b/libs/components/src/lib/fab/index.ts
index d8ca04ca95..4e0771f55b 100644
--- a/libs/components/src/lib/fab/index.ts
+++ b/libs/components/src/lib/fab/index.ts
@@ -1,4 +1,3 @@
 import { registerFab } from './definition';
 
-
 registerFab();
diff --git a/libs/components/src/lib/fab/ui.test.ts b/libs/components/src/lib/fab/ui.test.ts
index b0217993d7..21c10671c5 100644
--- a/libs/components/src/lib/fab/ui.test.ts
+++ b/libs/components/src/lib/fab/ui.test.ts
@@ -4,7 +4,7 @@ import type { Page } from '@playwright/test';
 import {
 	extractHTMLBlocksFromReadme,
 	loadComponents,
-	loadTemplate
+	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
 const components = ['fab'];
diff --git a/libs/components/src/lib/file-picker/definition.ts b/libs/components/src/lib/file-picker/definition.ts
index 4cc5681ffd..91145f29a0 100644
--- a/libs/components/src/lib/file-picker/definition.ts
+++ b/libs/components/src/lib/file-picker/definition.ts
@@ -20,7 +20,11 @@ export const filePickerDefinition =
 /**
  * @internal
  */
-export const filePickerRegistries = [filePickerDefinition(), ...iconRegistries, ...buttonRegistries];
+export const filePickerRegistries = [
+	filePickerDefinition(),
+	...iconRegistries,
+	...buttonRegistries,
+];
 
 /**
  * Registers the file-picker element with the design system.
diff --git a/libs/components/src/lib/file-picker/file-picker.spec.ts b/libs/components/src/lib/file-picker/file-picker.spec.ts
index 4accac9222..acf7dac3fd 100644
--- a/libs/components/src/lib/file-picker/file-picker.spec.ts
+++ b/libs/components/src/lib/file-picker/file-picker.spec.ts
@@ -4,7 +4,7 @@ import {
 	elementUpdated,
 	fixture,
 	getBaseElement,
-	getControlElement
+	getControlElement,
 } from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import type { Button } from '../button/button';
@@ -15,7 +15,11 @@ import '.';
 
 const COMPONENT_TAG = 'vwc-file-picker';
 
-async function generateFile(fileName: string, sizeMb: number, type = 'text/plain'): Promise<File> {
+async function generateFile(
+	fileName: string,
+	sizeMb: number,
+	type = 'text/plain'
+): Promise<File> {
 	const blob = new Blob(['x'.repeat(sizeMb * 1024 * 1024)], { type });
 	return new File([blob], fileName, { type: blob.type });
 }
@@ -28,7 +32,7 @@ function addFiles(files: File[]) {
 	// Use hidden input element that dropzone adds to the body to add files
 	const hiddenInput = getHiddenInput();
 	Object.defineProperty(hiddenInput, 'files', {
-		value: files
+		value: files,
 	});
 	hiddenInput.dispatchEvent(new Event('change'));
 }
@@ -60,7 +64,9 @@ describe('vwc-file-picker', () => {
 		});
 
 		it('should allow accessing the component in unmounted state and mounting later without error', async () => {
-			const unmountedElement = document.createElement(COMPONENT_TAG) as FilePicker;
+			const unmountedElement = document.createElement(
+				COMPONENT_TAG
+			) as FilePicker;
 			unmountedElement.maxFileSize = 256;
 			unmountedElement.maxFiles = 1;
 			unmountedElement.accept = '.jpg';
@@ -79,51 +85,50 @@ describe('vwc-file-picker', () => {
 			element.label = labelText;
 			await elementUpdated(element);
 			const labelElement = element.shadowRoot?.querySelector('label');
-			expect(labelElement?.textContent?.trim())
-				.toEqual(labelText);
+			expect(labelElement?.textContent?.trim()).toEqual(labelText);
 		});
 
 		it('should show label element only if label is set', async function () {
 			const labelElement = element.shadowRoot?.querySelector('label');
-			expect(labelElement)
-				.toBeNull();
+			expect(labelElement).toBeNull();
 		});
 
 		it('should set aria-label on base element if label is set', async function () {
 			const labelText = 'label';
 			element.label = labelText;
 			await elementUpdated(element);
-			expect(getBaseElement(element).getAttribute('aria-label'))
-				.toEqual(labelText);
+			expect(getBaseElement(element).getAttribute('aria-label')).toEqual(
+				labelText
+			);
 		});
 	});
 
 	describe('helper text', function () {
 		it('should render the helper text when attribute is set on file picker', async function () {
-			const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-message');
+			const helperTextElementWithoutText =
+				element.shadowRoot?.querySelector('.helper-message');
 			const helperText = 'Helper Text';
 			element.helperText = helperText;
 			await elementUpdated(element);
-			expect(helperTextElementWithoutText)
-				.toBeNull();
-			expect(element.shadowRoot?.querySelector('.helper-message')
-				?.textContent
-				?.trim())
-				.toEqual(helperText);
+			expect(helperTextElementWithoutText).toBeNull();
+			expect(
+				element.shadowRoot
+					?.querySelector('.helper-message')
+					?.textContent?.trim()
+			).toEqual(helperText);
 		});
 	});
 
 	describe('error text', function () {
 		it('should render the error text when attribute is set', async function () {
-			const errorTextElementWithoutAttribute = element.shadowRoot?.querySelector('.error-message');
+			const errorTextElementWithoutAttribute =
+				element.shadowRoot?.querySelector('.error-message');
 			element.errorText = 'Error Text';
 			await elementUpdated(element);
-			expect(errorTextElementWithoutAttribute)
-				.toBeNull();
-			expect(element.shadowRoot?.querySelector('.error-message')
-				?.textContent
-				?.trim())
-				.toEqual('Error Text');
+			expect(errorTextElementWithoutAttribute).toBeNull();
+			expect(
+				element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()
+			).toEqual('Error Text');
 		});
 
 		it('should hide helper text if error text is set', async function () {
@@ -131,7 +136,9 @@ describe('vwc-file-picker', () => {
 			element.errorText = 'Error Text';
 			await elementUpdated(element);
 			expect(element.shadowRoot?.querySelector('.helper-message')).toBe(null);
-			expect(element.shadowRoot?.querySelector('.error-message')).not.toBe(null);
+			expect(element.shadowRoot?.querySelector('.error-message')).not.toBe(
+				null
+			);
 		});
 	});
 
@@ -143,17 +150,19 @@ describe('vwc-file-picker', () => {
 	});
 
 	describe('max file size', function () {
-		it('should show an error message for files larger than maxFileSize', async function() {
+		it('should show an error message for files larger than maxFileSize', async function () {
 			element.maxFileSize = 1; // 1 MB
 			const file = await generateFile('london.png', 2);
 			addFiles([file]);
 
-			expect(getErrorMessage(0)).toBe('File is too big (2MiB). Max filesize: 1MiB.');
+			expect(getErrorMessage(0)).toBe(
+				'File is too big (2MiB). Max filesize: 1MiB.'
+			);
 		});
 	});
 
 	describe('max files', function () {
-		it('should show an error message for files added after the maxFiles limit is reached', async function() {
+		it('should show an error message for files added after the maxFiles limit is reached', async function () {
 			element.maxFiles = 1;
 			addFiles([
 				await generateFile('london.png', 1),
@@ -164,23 +173,23 @@ describe('vwc-file-picker', () => {
 			expect(getErrorMessage(1)).toBe("You can't select any more files.");
 		});
 
-		it('should add multiple attribute to the hidden file input when maxFiles is not set', function() {
+		it('should add multiple attribute to the hidden file input when maxFiles is not set', function () {
 			expect(getHiddenInput().multiple).toBe(true);
 		});
 
-		it('should remove multiple attribute from the hidden file input when maxFiles is 1', async function() {
+		it('should remove multiple attribute from the hidden file input when maxFiles is 1', async function () {
 			element.maxFiles = 1;
 			expect(getHiddenInput().multiple).toBe(false);
 		});
 
-		it('should add multiple attribute to the hidden file input when maxFiles is > 1', async function() {
+		it('should add multiple attribute to the hidden file input when maxFiles is > 1', async function () {
 			element.maxFiles = 2;
 			expect(getHiddenInput().multiple).toBe(true);
 		});
 	});
 
 	describe('accept', function () {
-		it('should show an error message for files added that do not match the accept attribute', async function() {
+		it('should show an error message for files added that do not match the accept attribute', async function () {
 			element.accept = 'image/*, text/html, .zip';
 
 			addFiles([
@@ -193,12 +202,12 @@ describe('vwc-file-picker', () => {
 			expect(getErrorMessage(0)).toBe('');
 			expect(getErrorMessage(1)).toBe('');
 			expect(getErrorMessage(2)).toBe('');
-			expect(getErrorMessage(3)).toBe('You can\'t select files of this type.');
+			expect(getErrorMessage(3)).toBe("You can't select files of this type.");
 		});
 	});
 
 	describe('size', function () {
-		it('should add expanded class to base element if size is set to expanded', async function() {
+		it('should add expanded class to base element if size is set to expanded', async function () {
 			element.size = Size.Expanded;
 			await elementUpdated(element);
 			expect(getControlElement(element).classList.contains('size-expanded'));
@@ -207,7 +216,9 @@ describe('vwc-file-picker', () => {
 
 	describe('default slot', function () {
 		it('should have a default slot', async () => {
-			expect(element.shadowRoot?.querySelector('slot:not([name])')).toBeTruthy();
+			expect(
+				element.shadowRoot?.querySelector('slot:not([name])')
+			).toBeTruthy();
 		});
 	});
 
@@ -241,13 +252,13 @@ describe('vwc-file-picker', () => {
 	});
 
 	describe('files property', function () {
-		it('should contain added files', async function() {
+		it('should contain added files', async function () {
 			const file = await generateFile('london.png', 2);
 			addFiles([file]);
 			expect(element.files).toEqual([file]);
 		});
 
-		it('should exclude files that have not been accepted', async function() {
+		it('should exclude files that have not been accepted', async function () {
 			element.maxFileSize = 1; // 1 MB
 			const acceptableFile = await generateFile('london.png', 1);
 			const unacceptableFile = await generateFile('paris.png', 2);
@@ -268,16 +279,21 @@ describe('vwc-file-picker', () => {
 		it.each([
 			['Space', ' '],
 			['Enter', 'Enter'],
-		])('should click on the hidden file input when pressing %s key', async function (_, key) {
-			const hiddenInputClick = jest.fn();
-			const hiddenInput = getHiddenInput();
-			hiddenInput.click = hiddenInputClick;
-
-			element.focus();
-			getControlElement(element).dispatchEvent(new KeyboardEvent('keydown', { key }));
-
-			expect(hiddenInputClick).toHaveBeenCalledTimes(1);
-		});
+		])(
+			'should click on the hidden file input when pressing %s key',
+			async function (_, key) {
+				const hiddenInputClick = jest.fn();
+				const hiddenInput = getHiddenInput();
+				hiddenInput.click = hiddenInputClick;
+
+				element.focus();
+				getControlElement(element).dispatchEvent(
+					new KeyboardEvent('keydown', { key })
+				);
+
+				expect(hiddenInputClick).toHaveBeenCalledTimes(1);
+			}
+		);
 	});
 
 	/* Failing because element with role of button has no accessible name: aria-label */
@@ -292,11 +308,15 @@ describe('vwc-file-picker', () => {
 	});
 
 	function getErrorMessage(forFileAtIndex: number) {
-		return element.shadowRoot?.querySelectorAll('.preview-list .dz-error-message')[forFileAtIndex]?.textContent?.trim();
+		return element.shadowRoot
+			?.querySelectorAll('.preview-list .dz-error-message')
+			[forFileAtIndex]?.textContent?.trim();
 	}
 
 	function getRemoveButton(forFileAtIndex: number) {
-		return element.shadowRoot?.querySelectorAll('.preview-list .remove-btn')[forFileAtIndex] as Button;
+		return element.shadowRoot?.querySelectorAll('.preview-list .remove-btn')[
+			forFileAtIndex
+		] as Button;
 	}
 });
 
@@ -313,14 +333,11 @@ describe('form associated vwc-file-picker', function () {
 	});
 
 	it('should reset the value and files when the form is reset', async function () {
-		const {
-			form: formElement,
-			element
-		} = createFormHTML<FilePicker>({
+		const { form: formElement, element } = createFormHTML<FilePicker>({
 			fieldName: 'file',
 			formId: 'form-id',
 			componentTagName: COMPONENT_TAG,
-			formWrapper
+			formWrapper,
 		});
 
 		addFiles([await generateFile('london.png', 1)]);
@@ -336,13 +353,10 @@ describe('form associated vwc-file-picker', function () {
 	});
 
 	it('should update the form value when name attribute is added', async function () {
-		const {
-			form: formElement,
-			element
-		} = createFormHTML<FilePicker>({
+		const { form: formElement, element } = createFormHTML<FilePicker>({
 			formId: 'form-id',
 			componentTagName: COMPONENT_TAG,
-			formWrapper
+			formWrapper,
 		});
 		addFiles([await generateFile('london.png', 1)]);
 
diff --git a/libs/components/src/lib/file-picker/file-picker.template.ts b/libs/components/src/lib/file-picker/file-picker.template.ts
index d3811c8ce3..5eb1820d95 100644
--- a/libs/components/src/lib/file-picker/file-picker.template.ts
+++ b/libs/components/src/lib/file-picker/file-picker.template.ts
@@ -9,15 +9,11 @@ import { getFeedbackTemplate } from '../../shared/patterns';
 import { Button } from '../button/button';
 import type { FilePicker } from './file-picker';
 
-const getClasses = ({
-	size,
-}: FilePicker) => classNames(
-	'control',
-	'dz-default',
-	'dz-message',
-	[`size-${size}`, Boolean(size)],
-);
-
+const getClasses = ({ size }: FilePicker) =>
+	classNames('control', 'dz-default', 'dz-message', [
+		`size-${size}`,
+		Boolean(size),
+	]);
 
 /**
  * The template for the FilePicker component.
@@ -28,17 +24,32 @@ export const FilePickerTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
 ) => ViewTemplate<FilePicker> = (context: ElementDefinitionContext) => {
-
 	return html<FilePicker>`
-		${x => {x.setButtonTag(context.tagFor(Button));}}
-		<div class="base" aria-label="${x => x.label}">
-			${when(x => x.label, html<FilePicker>`<label>${x => x.label}</label>`)}
-			<div ${ref('control')} class="${getClasses}" tabindex="0" role="button"
-					 @keydown="${(x, c) => x.handleKeydown(c.event as KeyboardEvent)}">
+		${(x) => {
+			x.setButtonTag(context.tagFor(Button));
+		}}
+		<div class="base" aria-label="${(x) => x.label}">
+			${when(
+				(x) => x.label,
+				html<FilePicker>`<label>${(x) => x.label}</label>`
+			)}
+			<div
+				${ref('control')}
+				class="${getClasses}"
+				tabindex="0"
+				role="button"
+				@keydown="${(x, c) => x.handleKeydown(c.event as KeyboardEvent)}"
+			>
 				<slot class="main"></slot>
 			</div>
-			${when(x => !x.errorValidationMessage && x.helperText?.length, getFeedbackTemplate('helper', context))}
-			${when(x => x.errorValidationMessage, getFeedbackTemplate('error', context))}
+			${when(
+				(x) => !x.errorValidationMessage && x.helperText?.length,
+				getFeedbackTemplate('helper', context)
+			)}
+			${when(
+				(x) => x.errorValidationMessage,
+				getFeedbackTemplate('error', context)
+			)}
 			<div class="preview-list"></div>
 		</div>
 	`;
diff --git a/libs/components/src/lib/file-picker/file-picker.ts b/libs/components/src/lib/file-picker/file-picker.ts
index 8b4b3fabb2..5d6496a2de 100644
--- a/libs/components/src/lib/file-picker/file-picker.ts
+++ b/libs/components/src/lib/file-picker/file-picker.ts
@@ -11,7 +11,7 @@ import {
 	type FormElement,
 	FormElementHelperText,
 	formElements,
-	Localized
+	Localized,
 } from '../../shared/patterns';
 import type { Button } from '../button/button';
 import { FormAssociatedFilePicker } from './file-picker.form-associated';
@@ -23,7 +23,9 @@ import { FormAssociatedFilePicker } from './file-picker.form-associated';
  */
 export type FilePickerSize = Extract<Size, Size.Normal | Size.Expanded>;
 
-const isFormAssociatedTryingToSetFormValueToFakePath = (value: File | string | FormData | null) => typeof value === 'string';
+const isFormAssociatedTryingToSetFormValueToFakePath = (
+	value: File | string | FormData | null
+) => typeof value === 'string';
 
 /**
  * @public
@@ -69,7 +71,7 @@ export class FilePicker extends FormAssociatedFilePicker {
 	 * HTML Attribute: max-file-size
 	 */
 	@attr({ mode: 'fromView', attribute: 'max-file-size' })
-		maxFileSize: number = 256;
+	maxFileSize: number = 256;
 	maxFileSizeChanged(_oldValue: number, newValue: number): void {
 		if (!this.#dropzone) {
 			return;
@@ -245,10 +247,14 @@ export class FilePicker extends FormAssociatedFilePicker {
 	}
 
 	#setValueToAFakePathLikeNativeInput() {
-		this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : '';
+		this.value =
+			this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : '';
 	}
 
-	override setFormValue = (value: File | string | FormData | null, state?: File | string | FormData | null) => {
+	override setFormValue = (
+		value: File | string | FormData | null,
+		state?: File | string | FormData | null
+	) => {
 		if (isFormAssociatedTryingToSetFormValueToFakePath(value)) {
 			return;
 		}
@@ -266,5 +272,10 @@ export class FilePicker extends FormAssociatedFilePicker {
 	}
 }
 
-export interface FilePicker extends FormElementHelperText, Localized, ErrorText, FormElement, FormElementHelperText {}
+export interface FilePicker
+	extends FormElementHelperText,
+		Localized,
+		ErrorText,
+		FormElement,
+		FormElementHelperText {}
 applyMixins(FilePicker, FormElementHelperText, Localized);
diff --git a/libs/components/src/lib/file-picker/ui.test.ts b/libs/components/src/lib/file-picker/ui.test.ts
index 70e172f3d7..d5baa10f31 100644
--- a/libs/components/src/lib/file-picker/ui.test.ts
+++ b/libs/components/src/lib/file-picker/ui.test.ts
@@ -3,24 +3,30 @@ import { expect, test } from '@playwright/test';
 import {
 	InFlightRequests,
 	loadComponents,
-	loadTemplate
+	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
 const components = ['file-picker', 'button', 'layout', 'text-field'];
 
-const addFile = async (page: Page, fileName: string, fileSize: number, fileType: string) => {
-	const dataTransfer = await page.evaluateHandle(([name, size, type]) => {
-		const dt = new DataTransfer();
-		const file = new File(
-			[Array(size).fill('a').join('')],
-			name,
-			{ type }
-		);
-		dt.items.add(file);
-		return dt;
-	}, [fileName, fileSize, fileType] as const);
+const addFile = async (
+	page: Page,
+	fileName: string,
+	fileSize: number,
+	fileType: string
+) => {
+	const dataTransfer = await page.evaluateHandle(
+		([name, size, type]) => {
+			const dt = new DataTransfer();
+			const file = new File([Array(size).fill('a').join('')], name, { type });
+			dt.items.add(file);
+			return dt;
+		},
+		[fileName, fileSize, fileType] as const
+	);
 
-	await page.dispatchEvent('vwc-file-picker:first-child .control', 'drop', { dataTransfer });
+	await page.dispatchEvent('vwc-file-picker:first-child .control', 'drop', {
+		dataTransfer,
+	});
 
 	await page.waitForSelector('vwc-file-picker:first-child .dz-preview');
 };
@@ -55,7 +61,9 @@ test('should show the component', async ({ page }: { page: Page }) => {
 
 	await page.waitForLoadState('networkidle');
 
-	const atLeastOneImageWasRequested = page.waitForRequest(request => request.resourceType() === 'image');
+	const atLeastOneImageWasRequested = page.waitForRequest(
+		(request) => request.resourceType() === 'image'
+	);
 	const requests = new InFlightRequests(page);
 
 	await addFile(page, 'valid.png', 100, 'image/png');
@@ -64,7 +72,7 @@ test('should show the component', async ({ page }: { page: Page }) => {
 
 	// Wait for icons to load
 	await atLeastOneImageWasRequested;
-	await requests.noneInFlight(request => request.resourceType() === 'image');
+	await requests.noneInFlight((request) => request.resourceType() === 'image');
 
 	expect(await testWrapper?.screenshot()).toMatchSnapshot(
 		'./snapshots/file-picker.png'
@@ -72,15 +80,16 @@ test('should show the component', async ({ page }: { page: Page }) => {
 });
 
 test.describe('form association', async () => {
-	const getFileFromFormData = async (page: Page) => page.evaluate(() => {
-		const form = document.querySelector('form') as HTMLFormElement;
-		const formData = new FormData(form);
-		const file = formData.get('file') as File;
-		return {
-			name: file.name,
-			size: file.size,
-		};
-	});
+	const getFileFromFormData = async (page: Page) =>
+		page.evaluate(() => {
+			const form = document.querySelector('form') as HTMLFormElement;
+			const formData = new FormData(form);
+			const file = formData.get('file') as File;
+			return {
+				name: file.name,
+				size: file.size,
+			};
+		});
 
 	test.beforeEach(async ({ page }: { page: Page }) => {
 		await loadComponents({
@@ -89,12 +98,16 @@ test.describe('form association', async () => {
 		});
 	});
 
-	test("should associate with a form and set added files as it's data", async ({ page }: { page: Page }) => {
+	test("should associate with a form and set added files as it's data", async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-file-picker name="file"></vwc-file-picker>
-			</form>`
+			</form>`,
 		});
 
 		await addFile(page, 'file.txt', 1024, 'text/plain');
@@ -105,14 +118,17 @@ test.describe('form association', async () => {
 		expect(file.size).toBe(1024);
 	});
 
-
-	test('should have a validation error when required constraint is violated', async ({ page }: { page: Page }) => {
+	test('should have a validation error when required constraint is violated', async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-file-picker name="file" required></vwc-file-picker>
 				<button type="submit">Submit</button>
-			</form>`
+			</form>`,
 		});
 
 		await page.getByRole('button', { name: 'Submit' }).click();
diff --git a/libs/components/src/lib/header/definition.ts b/libs/components/src/lib/header/definition.ts
index 8773497663..f53c889df0 100644
--- a/libs/components/src/lib/header/definition.ts
+++ b/libs/components/src/lib/header/definition.ts
@@ -5,7 +5,6 @@ import styles from './header.scss?inline';
 import { Header } from './header';
 import { headerTemplate as template } from './header.template';
 
-
 /**
  * The header element.
  */
diff --git a/libs/components/src/lib/header/header.spec.ts b/libs/components/src/lib/header/header.spec.ts
index 439471c021..30160c1eb4 100644
--- a/libs/components/src/lib/header/header.spec.ts
+++ b/libs/components/src/lib/header/header.spec.ts
@@ -28,7 +28,9 @@ describe('vwc-header', () => {
 
 	describe('elevation shadow', () => {
 		it('should default elevation to no-shadow', async () => {
-			const elevation = element.shadowRoot?.querySelector(ELEVATION_SELECTOR) as Elevation;
+			const elevation = element.shadowRoot?.querySelector(
+				ELEVATION_SELECTOR
+			) as Elevation;
 
 			expect(elevation.noShadow).toEqual(true);
 		});
@@ -37,7 +39,9 @@ describe('vwc-header', () => {
 			element.elevationShadow = true;
 			await elementUpdated(element);
 
-			const elevation = element.shadowRoot?.querySelector(ELEVATION_SELECTOR) as Elevation;
+			const elevation = element.shadowRoot?.querySelector(
+				ELEVATION_SELECTOR
+			) as Elevation;
 
 			expect(elevation.noShadow).toBeFalsy();
 		});
@@ -48,7 +52,9 @@ describe('vwc-header', () => {
 			element.alternate = true;
 			await elementUpdated(element);
 
-			const container = element.shadowRoot?.querySelector('.container') as HTMLElement;
+			const container = element.shadowRoot?.querySelector(
+				'.container'
+			) as HTMLElement;
 
 			expect(container.getAttribute('part')).toEqual('vvd-theme-alternate');
 		});
diff --git a/libs/components/src/lib/header/header.template.ts b/libs/components/src/lib/header/header.template.ts
index c0efae5a78..42923273b3 100644
--- a/libs/components/src/lib/header/header.template.ts
+++ b/libs/components/src/lib/header/header.template.ts
@@ -8,9 +8,8 @@ import { classNames } from '@microsoft/fast-web-utilities';
 import { Elevation } from '../elevation/elevation';
 import type { Header } from './header';
 
-const getPartAlternate = ({ alternate }: Header) => classNames(
-	['vvd-theme-alternate', Boolean(alternate)],
-);
+const getPartAlternate = ({ alternate }: Header) =>
+	classNames(['vvd-theme-alternate', Boolean(alternate)]);
 
 /**
  * The template for the header component.
@@ -25,7 +24,7 @@ export const headerTemplate: (
 	const elevationTag = context.tagFor(Elevation);
 
 	return html<Header>`
-    <${elevationTag} dp="4" ?no-shadow=${x => !x.elevationShadow}>
+    <${elevationTag} dp="4" ?no-shadow=${(x) => !x.elevationShadow}>
       <header class="base" part="base">
         <!-- a container is needed to distinguish the surface background color of the
         element from its shadow when applying elevation with alternate -->
diff --git a/libs/components/src/lib/header/header.ts b/libs/components/src/lib/header/header.ts
index 9415ab54b0..742b4e7ca7 100644
--- a/libs/components/src/lib/header/header.ts
+++ b/libs/components/src/lib/header/header.ts
@@ -16,8 +16,9 @@ export class Header extends FoundationElement {
 	 */
 	@attr({
 		attribute: 'elevation-shadow',
-		mode: 'boolean'
-	}) elevationShadow = false;
+		mode: 'boolean',
+	})
+	elevationShadow = false;
 
 	/**
 	 * applies scheme alternate to header region
@@ -26,5 +27,6 @@ export class Header extends FoundationElement {
 	 */
 	@attr({
 		mode: 'boolean',
-	}) alternate = false;
+	})
+	alternate = false;
 }
diff --git a/libs/components/src/lib/header/index.ts b/libs/components/src/lib/header/index.ts
index f83d089241..9319360e91 100644
--- a/libs/components/src/lib/header/index.ts
+++ b/libs/components/src/lib/header/index.ts
@@ -1,4 +1,3 @@
 import { registerHeader } from './definition';
 
-
 registerHeader();
diff --git a/libs/components/src/lib/header/ui.test.ts b/libs/components/src/lib/header/ui.test.ts
index 608570a7ca..3fca34f460 100644
--- a/libs/components/src/lib/header/ui.test.ts
+++ b/libs/components/src/lib/header/ui.test.ts
@@ -2,13 +2,13 @@ import { expect, test } from '@playwright/test';
 import type { Page } from '@playwright/test';
 import {
 	loadComponents,
-	loadTemplate
+	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
 const components = ['header', 'button', 'layout'];
 
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template =`
+	const template = `
     <vwc-layout column-basis="block">
       <vwc-header>
         Header default
diff --git a/libs/components/src/lib/icon/icon.spec.ts b/libs/components/src/lib/icon/icon.spec.ts
index 06a93e8193..2e85b2cd4b 100644
--- a/libs/components/src/lib/icon/icon.spec.ts
+++ b/libs/components/src/lib/icon/icon.spec.ts
@@ -1,6 +1,11 @@
-import { axe, elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
-import {ICONS_VERSION as ICON_SET_VERSION} from '@vonage/vwc-consts';
-import type {Icon} from './icon';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getControlElement,
+} from '@vivid-nx/shared';
+import { ICONS_VERSION as ICON_SET_VERSION } from '@vonage/vwc-consts';
+import type { Icon } from './icon';
 import '.';
 
 const COMPONENT_TAG = 'vwc-icon';
@@ -9,15 +14,13 @@ describe('icon', function () {
 	let element: Icon;
 
 	beforeEach(async () => {
-		element = (await fixture(
-			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
-		)) as Icon;
+		element = (await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`)) as Icon;
 	});
 
 	describe('resolver', function () {
 		function fakeFetch(requestTime = 4000) {
 			(global.fetch as any) = jest.fn(() => {
-				return new Promise(res => {
+				return new Promise((res) => {
 					setTimeout(() => res(response), requestTime);
 				});
 			});
@@ -29,16 +32,16 @@ describe('icon', function () {
 			headers: {
 				get: () => {
 					return 'image/svg+xml';
-				}
+				},
 			},
-			text: () => svg
+			text: () => svg,
 		};
 		const originalFetch = global.fetch;
 		const originalPromise = global.Promise;
 
 		beforeEach(function () {
 			global.Promise = require('promise'); // needed in order for promises to work with jest fake timers
-			jest.useFakeTimers({legacyFakeTimers: true});
+			jest.useFakeTimers({ legacyFakeTimers: true });
 		});
 
 		afterEach(function () {
@@ -115,8 +118,9 @@ describe('icon', function () {
 			element.iconLoaded = false;
 			await elementUpdated(element);
 			const imgElement = getControlElement(element).querySelector('img');
-			expect(imgElement?.src)
-				.toEqual(`https://icon.resources.vonage.com/v${ICON_SET_VERSION}/home.svg`);
+			expect(imgElement?.src).toEqual(
+				`https://icon.resources.vonage.com/v${ICON_SET_VERSION}/home.svg`
+			);
 		});
 
 		it('should set iconLoaded to false when name changes', async function () {
@@ -124,7 +128,7 @@ describe('icon', function () {
 				const originalFetch = global.fetch;
 				let timeout: any;
 				(global.fetch as any) = jest.fn(() => {
-					return new Promise(res => {
+					return new Promise((res) => {
 						timeout = setTimeout(() => res(false), 1000);
 					});
 				});
@@ -161,9 +165,11 @@ describe('icon', function () {
 		});
 
 		it('should set size class only if exists', async function () {
-			const classListContainsSize = controlElement?.className.split(' ').reduce((contains: boolean, className: string) => {
-				return contains || className.indexOf('size-') > -1;
-			}, false);
+			const classListContainsSize = controlElement?.className
+				.split(' ')
+				.reduce((contains: boolean, className: string) => {
+					return contains || className.indexOf('size-') > -1;
+				}, false);
 			expect(classListContainsSize).toEqual(false);
 		});
 
@@ -181,7 +187,7 @@ describe('icon', function () {
 			element = (await fixture(
 				`<${COMPONENT_TAG} name="home"></${COMPONENT_TAG}>`
 			)) as Icon;
-			
+
 			expect(await axe(element)).toHaveNoViolations();
 		});
 	});
diff --git a/libs/components/src/lib/icon/icon.template.ts b/libs/components/src/lib/icon/icon.template.ts
index 4cc15b80bf..df651ab007 100644
--- a/libs/components/src/lib/icon/icon.template.ts
+++ b/libs/components/src/lib/icon/icon.template.ts
@@ -1,28 +1,34 @@
-import {html, when} from '@microsoft/fast-element';
+import { html, when } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { Icon } from './icon';
 
-const getClasses = ({
-	connotation, size,
-}: Icon) => classNames(
-	'control',
-	[`connotation-${connotation}`, Boolean(connotation)],
-	[`size-${size}`, Boolean(size)],
-);
+const getClasses = ({ connotation, size }: Icon) =>
+	classNames(
+		'control',
+		[`connotation-${connotation}`, Boolean(connotation)],
+		[`size-${size}`, Boolean(size)]
+	);
 
 export const iconTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
 ) => ViewTemplate<Icon> = () => html`
-
 	<figure class="${getClasses}">
 		<slot>
-			${when(x => !x.iconLoaded, html<Icon>`<img alt="${x => x.name}" src="${x => x.iconUrl}"/>`)}
-			${when((x)=> x.iconLoaded && x._svg, (x) => html<Icon>`${x._svg as string}`)}
+			${when(
+				(x) => !x.iconLoaded,
+				html<Icon>`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
+			)}
+			${when(
+				(x) => x.iconLoaded && x._svg,
+				(x) => html<Icon>`${x._svg as string}`
+			)}
 		</slot>
 	</figure>
-
 `;
diff --git a/libs/components/src/lib/icon/icon.ts b/libs/components/src/lib/icon/icon.ts
index 3c593f0fba..218667a145 100644
--- a/libs/components/src/lib/icon/icon.ts
+++ b/libs/components/src/lib/icon/icon.ts
@@ -1,7 +1,10 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
-import {attr, observable, volatile} from '@microsoft/fast-element';
+import { attr, observable, volatile } from '@microsoft/fast-element';
 import { identity, memoizeWith } from 'ramda';
-import { ICONS_BASE_URL as BASE_URL, ICONS_VERSION as ICON_SET_VERSION } from '@vonage/vwc-consts';
+import {
+	ICONS_BASE_URL as BASE_URL,
+	ICONS_VERSION as ICON_SET_VERSION,
+} from '@vonage/vwc-consts';
 import type { Connotation } from '../enums';
 import { PLACEHOLDER_ICON } from './icon.placeholder';
 
@@ -11,7 +14,8 @@ const PLACEHOLDER_DELAY = 500;
 // (will also stop one an icon is loaded)
 const PLACEHOLDER_TIMEOUT = 2000;
 
-const baseUrlTemplate = (resource: string, version: string) => [BASE_URL, `v${version}`, resource].join('/');
+const baseUrlTemplate = (resource: string, version: string) =>
+	[BASE_URL, `v${version}`, resource].join('/');
 
 const assertIsValidResponse = ({ ok, headers }: Response) => {
 	if (!ok || headers.get('content-type') !== 'image/svg+xml') {
@@ -24,25 +28,29 @@ const extractSvg = (response: Response) => {
 	return response.text();
 };
 
-const loadSvg = (iconId: string) => fetch(baseUrlTemplate([iconId, 'svg'].join('.'), ICON_SET_VERSION))
-	.then(extractSvg);
+const loadSvg = (iconId: string) =>
+	fetch(baseUrlTemplate([iconId, 'svg'].join('.'), ICON_SET_VERSION)).then(
+		extractSvg
+	);
 
-const resolveIcon = memoizeWith(identity as () => string, (iconId = '') => (iconId.trim()
-	? loadSvg(iconId)
-	: Promise.resolve(''))) as (iconId?: string) => Promise<string>;
+const resolveIcon = memoizeWith(identity as () => string, (iconId = '') =>
+	iconId.trim() ? loadSvg(iconId) : Promise.resolve('')
+) as (iconId?: string) => Promise<string>;
 
 /**
  * Types of icon connotation.
  *
  * @public
  */
-export type IconConnotation = Extract<Connotation,
-| Connotation.Accent
-| Connotation.CTA
-| Connotation.Announcement
-| Connotation.Success
-| Connotation.Alert
-| Connotation.Information>;
+export type IconConnotation = Extract<
+	Connotation,
+	| Connotation.Accent
+	| Connotation.CTA
+	| Connotation.Announcement
+	| Connotation.Success
+	| Connotation.Alert
+	| Connotation.Information
+>;
 
 /**
  * @public
@@ -77,7 +85,9 @@ export class Icon extends FoundationElement {
 
 	@volatile
 	get iconUrl() {
-		return !this.name ? this._svg : baseUrlTemplate(`${this.name}.svg`, ICON_SET_VERSION);
+		return !this.name
+			? this._svg
+			: baseUrlTemplate(`${this.name}.svg`, ICON_SET_VERSION);
 	}
 	async nameChanged() {
 		this._svg = undefined;
@@ -98,6 +108,10 @@ export class Icon extends FoundationElement {
 			})
 			.catch(() => {
 				this._svg = undefined;
-			}).finally(() => { clearTimeout(timeout); this.iconLoaded = true;});
+			})
+			.finally(() => {
+				clearTimeout(timeout);
+				this.iconLoaded = true;
+			});
 	}
 }
diff --git a/libs/components/src/lib/icon/index.ts b/libs/components/src/lib/icon/index.ts
index 0767ec6b4e..d3ec02c7a9 100644
--- a/libs/components/src/lib/icon/index.ts
+++ b/libs/components/src/lib/icon/index.ts
@@ -1,4 +1,3 @@
 import { registerIcon } from './definition';
 
-
 registerIcon();
diff --git a/libs/components/src/lib/icon/ui.test.ts b/libs/components/src/lib/icon/ui.test.ts
index f2c40c7a15..b1055aa8e6 100644
--- a/libs/components/src/lib/icon/ui.test.ts
+++ b/libs/components/src/lib/icon/ui.test.ts
@@ -4,13 +4,18 @@ import type { Page } from '@playwright/test';
 import {
 	extractHTMLBlocksFromReadme,
 	loadComponents,
-	loadTemplate
+	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
 const components = ['icon'];
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template = extractHTMLBlocksFromReadme(path.join(new URL('.', import.meta.url).pathname, 'README.md'))
-		.reduce((htmlString: string, block: string) => `${htmlString} <div style="margin: 5px;">${block}</div>`, '');
+	const template = extractHTMLBlocksFromReadme(
+		path.join(new URL('.', import.meta.url).pathname, 'README.md')
+	).reduce(
+		(htmlString: string, block: string) =>
+			`${htmlString} <div style="margin: 5px;">${block}</div>`,
+		''
+	);
 
 	page.setViewportSize({ width: 560, height: 720 });
 
@@ -27,8 +32,7 @@ test('should show the component', async ({ page }: { page: Page }) => {
 
 	await page.waitForLoadState('networkidle');
 
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/icon.png',
-		);
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/icon.png'
+	);
 });
diff --git a/libs/components/src/lib/layout/definition.ts b/libs/components/src/lib/layout/definition.ts
index 932a369188..1982027dd6 100644
--- a/libs/components/src/lib/layout/definition.ts
+++ b/libs/components/src/lib/layout/definition.ts
@@ -4,7 +4,13 @@ import { Layout } from './layout';
 import styles from './layout.scss?inline';
 import { layoutTemplate as template } from './layout.template';
 
-export type { AUTO_SIZING, ColumnBasis, ColumnSpacing, RowSpacing, Gutters } from './layout';
+export type {
+	AUTO_SIZING,
+	ColumnBasis,
+	ColumnSpacing,
+	RowSpacing,
+	Gutters,
+} from './layout';
 
 /**
  * Represents a layout custom element.
diff --git a/libs/components/src/lib/layout/index.ts b/libs/components/src/lib/layout/index.ts
index 4414f6a39b..d7780b06f6 100644
--- a/libs/components/src/lib/layout/index.ts
+++ b/libs/components/src/lib/layout/index.ts
@@ -1,4 +1,3 @@
 import { registerLayout } from './definition';
 
-
 registerLayout();
diff --git a/libs/components/src/lib/layout/layout.spec.ts b/libs/components/src/lib/layout/layout.spec.ts
index a39b061990..2e83111dee 100644
--- a/libs/components/src/lib/layout/layout.spec.ts
+++ b/libs/components/src/lib/layout/layout.spec.ts
@@ -1,4 +1,9 @@
-import { axe, elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getControlElement,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { LayoutSize } from '../enums';
 import { AUTO_SIZING, Layout } from './layout';
@@ -11,10 +16,10 @@ describe('vwc-layout', () => {
 	let element: Layout;
 
 	beforeEach(async () => {
-		element = await fixture(`<${COMPONENT_TAG}>
+		element = (await fixture(`<${COMPONENT_TAG}>
 									<div style="border: 1px solid">test</div>
 									<div style="border: 1px solid">test</div>
-								</${COMPONENT_TAG}>`) as Layout;
+								</${COMPONENT_TAG}>`)) as Layout;
 	});
 
 	describe('basic', () => {
@@ -33,22 +38,29 @@ describe('vwc-layout', () => {
 		it('should set correct internal gutters class', async () => {
 			const gutters = LayoutSize.Large;
 
-			expect(getControlElement(element).classList.toString()).toEqual('control');
+			expect(getControlElement(element).classList.toString()).toEqual(
+				'control'
+			);
 			element.gutters = gutters;
 			await elementUpdated(element);
-			expect(getControlElement(element).classList.toString()).toEqual(`control gutters-${gutters}`);
+			expect(getControlElement(element).classList.toString()).toEqual(
+				`control gutters-${gutters}`
+			);
 		});
 	});
 
-
 	describe('column-basis', () => {
 		it('should set correct internal column-basis style', async () => {
 			const columnBasis = LayoutSize.Large;
 
-			expect(getControlElement(element).classList.toString()).toEqual('control');
+			expect(getControlElement(element).classList.toString()).toEqual(
+				'control'
+			);
 			element.columnBasis = columnBasis;
 			await elementUpdated(element);
-			expect(getControlElement(element).classList.toString()).toEqual(`control column-basis-${columnBasis}`);
+			expect(getControlElement(element).classList.toString()).toEqual(
+				`control column-basis-${columnBasis}`
+			);
 		});
 	});
 
@@ -56,44 +68,57 @@ describe('vwc-layout', () => {
 		it('should set correct internal column-spacing style', async () => {
 			const columnSpacing = LayoutSize.Large;
 
-			expect(getControlElement(element).classList.toString()).toEqual('control');
+			expect(getControlElement(element).classList.toString()).toEqual(
+				'control'
+			);
 			element.columnSpacing = columnSpacing;
 			await elementUpdated(element);
-			expect(getControlElement(element).classList.toString()).toContain(`control column-spacing-${columnSpacing}`);
+			expect(getControlElement(element).classList.toString()).toContain(
+				`control column-spacing-${columnSpacing}`
+			);
 		});
 	});
 
-
 	describe('row-spacing', () => {
 		it('should set correct internal row-spacing style', async () => {
 			const rowSpacing = LayoutSize.Large;
 
-			expect(getControlElement(element).classList.toString()).toEqual('control');
+			expect(getControlElement(element).classList.toString()).toEqual(
+				'control'
+			);
 			element.rowSpacing = rowSpacing;
 			await elementUpdated(element);
-			expect(getControlElement(element).classList.toString()).toEqual(`control row-spacing-${rowSpacing}`);
+			expect(getControlElement(element).classList.toString()).toEqual(
+				`control row-spacing-${rowSpacing}`
+			);
 		});
 
 		it('should set column-spacing value to row-spacing class if rowSpacing is not set', async () => {
 			const columnSpacing = LayoutSize.Small;
 
-			expect(getControlElement(element).classList.toString()).toEqual('control');
+			expect(getControlElement(element).classList.toString()).toEqual(
+				'control'
+			);
 			element.columnSpacing = columnSpacing;
 			await elementUpdated(element);
-			expect(getControlElement(element).classList.toString())
-				.toEqual(`control column-spacing-${columnSpacing} row-spacing-${columnSpacing}`);
+			expect(getControlElement(element).classList.toString()).toEqual(
+				`control column-spacing-${columnSpacing} row-spacing-${columnSpacing}`
+			);
 		});
 	});
 
-
 	describe('auto-sizing', () => {
 		it('should set correct internal auto-sizing style', async () => {
 			const autoSizing = AUTO_SIZING.Fill;
 
-			expect(getControlElement(element).classList.toString()).toEqual('control');
+			expect(getControlElement(element).classList.toString()).toEqual(
+				'control'
+			);
 			element.autoSizing = autoSizing;
 			await elementUpdated(element);
-			expect(getControlElement(element).classList.toString()).toEqual(`control auto-sizing-${autoSizing}`);
+			expect(getControlElement(element).classList.toString()).toEqual(
+				`control auto-sizing-${autoSizing}`
+			);
 		});
 	});
 
diff --git a/libs/components/src/lib/layout/layout.template.ts b/libs/components/src/lib/layout/layout.template.ts
index 9a00efa377..f378c43caa 100644
--- a/libs/components/src/lib/layout/layout.template.ts
+++ b/libs/components/src/lib/layout/layout.template.ts
@@ -1,19 +1,30 @@
 import { html } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import type { Layout } from './layout';
 
 const getClasses = ({
-	columnBasis, gutters, columnSpacing, autoSizing, rowSpacing
-}: Layout) => classNames(
-	'control',
-	[`column-basis-${columnBasis}`, Boolean(columnBasis)],
-	[`gutters-${gutters}`, Boolean(gutters)],
-	[`column-spacing-${columnSpacing}`, Boolean(columnSpacing)],
-	[`row-spacing-${rowSpacing ? rowSpacing : columnSpacing}`, Boolean(rowSpacing) || Boolean(columnSpacing)],
-	[`auto-sizing-${autoSizing}`, Boolean(autoSizing)],
-);
+	columnBasis,
+	gutters,
+	columnSpacing,
+	autoSizing,
+	rowSpacing,
+}: Layout) =>
+	classNames(
+		'control',
+		[`column-basis-${columnBasis}`, Boolean(columnBasis)],
+		[`gutters-${gutters}`, Boolean(gutters)],
+		[`column-spacing-${columnSpacing}`, Boolean(columnSpacing)],
+		[
+			`row-spacing-${rowSpacing ? rowSpacing : columnSpacing}`,
+			Boolean(rowSpacing) || Boolean(columnSpacing),
+		],
+		[`auto-sizing-${autoSizing}`, Boolean(autoSizing)]
+	);
 
 /**
  * The template for the Layout component.
@@ -24,7 +35,6 @@ const getClasses = ({
 export const layoutTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
-) => ViewTemplate<Layout> = () => html`
-        <div class="${getClasses}">
-			<slot></slot>
-		</div>`;
+) => ViewTemplate<Layout> = () => html` <div class="${getClasses}">
+	<slot></slot>
+</div>`;
diff --git a/libs/components/src/lib/layout/layout.ts b/libs/components/src/lib/layout/layout.ts
index 572aaa655e..c5255a7fbc 100644
--- a/libs/components/src/lib/layout/layout.ts
+++ b/libs/components/src/lib/layout/layout.ts
@@ -2,12 +2,25 @@ import { attr } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { LayoutSize } from '../enums.js';
 
-
-export enum AUTO_SIZING { Fit = 'fit', Fill = 'fill' }
-export type Gutters = Extract<LayoutSize, LayoutSize.Small | LayoutSize.Medium | LayoutSize.Large>;
-export type ColumnSpacing = Extract<LayoutSize, LayoutSize.Small | LayoutSize.Medium | LayoutSize.Large>;
-export type RowSpacing = Extract<LayoutSize, LayoutSize.Small | LayoutSize.Medium | LayoutSize.Large>;
-export type ColumnBasis = Extract<LayoutSize, LayoutSize.Small | LayoutSize.Medium | LayoutSize.Large> | 'block';
+export enum AUTO_SIZING {
+	Fit = 'fit',
+	Fill = 'fill',
+}
+export type Gutters = Extract<
+	LayoutSize,
+	LayoutSize.Small | LayoutSize.Medium | LayoutSize.Large
+>;
+export type ColumnSpacing = Extract<
+	LayoutSize,
+	LayoutSize.Small | LayoutSize.Medium | LayoutSize.Large
+>;
+export type RowSpacing = Extract<
+	LayoutSize,
+	LayoutSize.Small | LayoutSize.Medium | LayoutSize.Large
+>;
+export type ColumnBasis =
+	| Extract<LayoutSize, LayoutSize.Small | LayoutSize.Medium | LayoutSize.Large>
+	| 'block';
 
 /**
  * [--layout-grid-template-columns=repeat([the `auto-sizing` mapped value],
@@ -46,7 +59,6 @@ export class Layout extends FoundationElement {
 	 */
 	@attr({ attribute: 'row-spacing' }) rowSpacing?: RowSpacing;
 
-
 	/**
 	 * sets the initial preferred auto-sizing from predefined available options
 	 *
diff --git a/libs/components/src/lib/layout/ui.test.ts b/libs/components/src/lib/layout/ui.test.ts
index 4dd2942cc5..ffc47683e9 100644
--- a/libs/components/src/lib/layout/ui.test.ts
+++ b/libs/components/src/lib/layout/ui.test.ts
@@ -4,19 +4,24 @@ import type { Page } from '@playwright/test';
 import {
 	extractHTMLBlocksFromReadme,
 	loadComponents,
-	loadTemplate
+	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
 const components = ['layout', 'card', 'divider'];
 
 function runLayoutUiTest() {
-	return async ({page}: { page: Page }) => {
-		const template = extractHTMLBlocksFromReadme(path.join(new URL('.', import.meta.url).pathname, 'README.md'))
-			.reduce((htmlString: string, block: string) => `${htmlString} <div style="margin: 5px;">${block}</div>`, '');
+	return async ({ page }: { page: Page }) => {
+		const template = extractHTMLBlocksFromReadme(
+			path.join(new URL('.', import.meta.url).pathname, 'README.md')
+		).reduce(
+			(htmlString: string, block: string) =>
+				`${htmlString} <div style="margin: 5px;">${block}</div>`,
+			''
+		);
 
 		page.setViewportSize({
 			width: 1100,
-			height: 720
+			height: 720,
 		});
 
 		await loadComponents({
@@ -32,13 +37,12 @@ function runLayoutUiTest() {
 
 		await page.waitForLoadState('networkidle');
 
-		expect(await testWrapper?.screenshot())
-			.toMatchSnapshot(
-				'./snapshots/layout.png',
-				{
-					maxDiffPixelRatio: 0.02
-				}
-			);
+		expect(await testWrapper?.screenshot()).toMatchSnapshot(
+			'./snapshots/layout.png',
+			{
+				maxDiffPixelRatio: 0.02,
+			}
+		);
 	};
 }
 
diff --git a/libs/components/src/lib/listbox/definition.ts b/libs/components/src/lib/listbox/definition.ts
index 0638aab9c3..274713acf7 100644
--- a/libs/components/src/lib/listbox/definition.ts
+++ b/libs/components/src/lib/listbox/definition.ts
@@ -13,7 +13,7 @@ export type { LisboxAppearance } from './listbox';
 export const listboxDefinition = Listbox.compose<FoundationElementDefinition>({
 	baseName: 'listbox',
 	template: template as any,
-	styles
+	styles,
 });
 
 // by convention, option isn't required to be imported
@@ -23,7 +23,10 @@ export const listboxDefinition = Listbox.compose<FoundationElementDefinition>({
 /**
  * @internal
  */
-export const listboxRegistries = [listboxDefinition(), ...listboxOptionRegistries];
+export const listboxRegistries = [
+	listboxDefinition(),
+	...listboxOptionRegistries,
+];
 
 /**
  * Registers the listbox elements with the design system.
diff --git a/libs/components/src/lib/listbox/index.ts b/libs/components/src/lib/listbox/index.ts
index e643f32fe9..4520709c7e 100644
--- a/libs/components/src/lib/listbox/index.ts
+++ b/libs/components/src/lib/listbox/index.ts
@@ -1,4 +1,3 @@
 import { registerListbox } from './definition';
 
-
 registerListbox();
diff --git a/libs/components/src/lib/listbox/listbox.spec.ts b/libs/components/src/lib/listbox/listbox.spec.ts
index 5f63306331..ae4eefa83c 100644
--- a/libs/components/src/lib/listbox/listbox.spec.ts
+++ b/libs/components/src/lib/listbox/listbox.spec.ts
@@ -49,7 +49,9 @@ describe('vwc-listbox', () => {
 			(element as any).appearance = appearance;
 			await elementUpdated(element);
 
-			expect(getBaseElement(element).classList.contains(`appearance-${appearance}`)).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains(`appearance-${appearance}`)
+			).toBeTruthy();
 		});
 	});
 
@@ -59,7 +61,9 @@ describe('vwc-listbox', () => {
 			(element as any).orientation = orientation;
 			await elementUpdated(element);
 
-			expect(getBaseElement(element).classList.contains(`orientation-${orientation}`)).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains(`orientation-${orientation}`)
+			).toBeTruthy();
 		});
 
 		it('should not remove keydown event listener when orientation is horizontal', async function () {
@@ -87,7 +91,9 @@ describe('vwc-listbox', () => {
 			(element as any).shape = shape;
 			await elementUpdated(element);
 
-			expect(getBaseElement(element).classList.contains(`shape-${shape}`)).toBeFalsy();
+			expect(
+				getBaseElement(element).classList.contains(`shape-${shape}`)
+			).toBeFalsy();
 		});
 
 		it('should set correct internal shape style if orientation is horizontal', async function () {
@@ -96,7 +102,9 @@ describe('vwc-listbox', () => {
 			(element as any).shape = shape;
 			await elementUpdated(element);
 
-			expect(getBaseElement(element).classList.contains(`shape-${shape}`)).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains(`shape-${shape}`)
+			).toBeTruthy();
 		});
 	});
 
@@ -126,7 +134,9 @@ describe('vwc-listbox', () => {
 			firstOption?.click();
 			await elementUpdated(element);
 
-			expect(element.getAttribute('aria-activedescendant')).toEqual(firstOption.id);
+			expect(element.getAttribute('aria-activedescendant')).toEqual(
+				firstOption.id
+			);
 		});
 
 		it('should set the `aria-activedescendant` attribute with option when listbox is multiple and focused', async function () {
@@ -143,7 +153,7 @@ describe('vwc-listbox', () => {
 
 			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
 			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
-			element.dispatchEvent(new KeyboardEvent('keydown', { 'key': 'Enter' }));
+			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 			await elementUpdated(element);
 
 			expect(element.getAttribute('aria-activedescendant')).toEqual('option2');
@@ -175,7 +185,9 @@ describe('vwc-listbox', () => {
 		it('should change selection when changed', async () => {
 			element.selectedIndex = 1;
 			await elementUpdated(element);
-			expect(element.selectedOptions).toEqual([element.querySelector('option:nth-child(2)')]);
+			expect(element.selectedOptions).toEqual([
+				element.querySelector('option:nth-child(2)'),
+			]);
 		});
 	});
 
@@ -191,7 +203,9 @@ describe('vwc-listbox', () => {
 
 		it('should recieve array of options', async () => {
 			await elementUpdated(element);
-			expect(element.options[1]).toEqual(element.querySelector('option:nth-child(2)'));
+			expect(element.options[1]).toEqual(
+				element.querySelector('option:nth-child(2)')
+			);
 		});
 	});
 
@@ -207,7 +221,9 @@ describe('vwc-listbox', () => {
 
 		it('should recieve array of selectedOptions', async () => {
 			await elementUpdated(element);
-			expect(element.selectedOptions[0]).toEqual(element.querySelector('option:nth-child(2)'));
+			expect(element.selectedOptions[0]).toEqual(
+				element.querySelector('option:nth-child(2)')
+			);
 		});
 	});
 
@@ -218,10 +234,14 @@ describe('vwc-listbox', () => {
 			await elementUpdated(element);
 
 			element.focus();
-			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+			element.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowRight' })
+			);
 
 			await elementUpdated(element);
-			expect(element.getAttribute('aria-activedescendant')).not.toEqual('option1');
+			expect(element.getAttribute('aria-activedescendant')).not.toEqual(
+				'option1'
+			);
 		});
 
 		it('should focus on the next element when ArrowRight is pressed', async () => {
@@ -229,12 +249,16 @@ describe('vwc-listbox', () => {
 			await elementUpdated(element);
 
 			element.focus();
-			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+			element.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowRight' })
+			);
 
 			await elementUpdated(element);
 			expect(element.getAttribute('aria-activedescendant')).toEqual('option1');
 
-			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+			element.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowRight' })
+			);
 
 			await elementUpdated(element);
 			expect(element.getAttribute('aria-activedescendant')).toEqual('option2');
@@ -245,8 +269,12 @@ describe('vwc-listbox', () => {
 			await elementUpdated(element);
 
 			element.focus();
-			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
-			element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+			element.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowRight' })
+			);
+			element.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowRight' })
+			);
 
 			await elementUpdated(element);
 			expect(element.getAttribute('aria-activedescendant')).toEqual('option2');
@@ -264,4 +292,3 @@ describe('vwc-listbox', () => {
 		});
 	});
 });
-
diff --git a/libs/components/src/lib/listbox/listbox.template.ts b/libs/components/src/lib/listbox/listbox.template.ts
index 8a10e813d3..8133b4db95 100644
--- a/libs/components/src/lib/listbox/listbox.template.ts
+++ b/libs/components/src/lib/listbox/listbox.template.ts
@@ -3,7 +3,7 @@ import type { ViewTemplate } from '@microsoft/fast-element';
 import {
 	type ElementDefinitionContext,
 	ListboxElement as FASTListboxElement,
-	type FoundationElementDefinition
+	type FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { Listbox } from './listbox';
@@ -14,38 +14,35 @@ const getClasses = ({ appearance, shape, disabled, orientation }: Listbox) =>
 		['disabled', disabled],
 		[`appearance-${appearance}`, Boolean(appearance)],
 		[`shape-${shape}`, Boolean(shape) && orientation === 'horizontal'],
-		[`orientation-${orientation}`, Boolean(orientation)],
+		[`orientation-${orientation}`, Boolean(orientation)]
 	);
 
 export const ListboxTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
 ) => ViewTemplate<Listbox> = () => {
-
 	return html`
-<template
-	aria-activedescendant="${x => x.ariaActiveDescendant}"
-	aria-multiselectable="${x => x.ariaMultiSelectable}"
-	aria-orientation="${x => x.ariaOrientation}"
-	aria-label="listbox"
-	role="listbox"
-	@click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
-	@focusin="${(x, c) => x.focusinHandler(c.event as FocusEvent)}"
-	@keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
-	@mousedown="${(x, c) => x.mousedownHandler(c.event as MouseEvent)}"
-	tabindex="${x => (!x.disabled ? '0' : null)}"
->
-	<div
-		class="${getClasses}"
-	>
-		<slot
-			${slotted({
-		filter: FASTListboxElement.slottedOptionFilter as any,
-		flatten: true,
-		property: 'slottedOptions'
-	})}
-		></slot>
-	</div>
-</template>
+		<template
+			aria-activedescendant="${(x) => x.ariaActiveDescendant}"
+			aria-multiselectable="${(x) => x.ariaMultiSelectable}"
+			aria-orientation="${(x) => x.ariaOrientation}"
+			aria-label="listbox"
+			role="listbox"
+			@click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+			@focusin="${(x, c) => x.focusinHandler(c.event as FocusEvent)}"
+			@keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
+			@mousedown="${(x, c) => x.mousedownHandler(c.event as MouseEvent)}"
+			tabindex="${(x) => (!x.disabled ? '0' : null)}"
+		>
+			<div class="${getClasses}">
+				<slot
+					${slotted({
+						filter: FASTListboxElement.slottedOptionFilter as any,
+						flatten: true,
+						property: 'slottedOptions',
+					})}
+				></slot>
+			</div>
+		</template>
 	`;
 };
diff --git a/libs/components/src/lib/listbox/listbox.ts b/libs/components/src/lib/listbox/listbox.ts
index a6ff9c07e2..f03c113b77 100644
--- a/libs/components/src/lib/listbox/listbox.ts
+++ b/libs/components/src/lib/listbox/listbox.ts
@@ -1,6 +1,9 @@
 import { attr } from '@microsoft/fast-element';
 import { ListboxElement as FoundationListboxElement } from '@microsoft/fast-foundation';
-import { keyArrowLeft, keyArrowRight } from '@microsoft/fast-web-utilities/dist/key-codes';
+import {
+	keyArrowLeft,
+	keyArrowRight,
+} from '@microsoft/fast-web-utilities/dist/key-codes';
 import type { Appearance, Shape } from '../enums';
 
 /**
@@ -8,7 +11,10 @@ import type { Appearance, Shape } from '../enums';
  *
  * @public
  */
-export type LisboxAppearance = Extract<Appearance, Appearance.Fieldset | Appearance.Ghost>;
+export type LisboxAppearance = Extract<
+	Appearance,
+	Appearance.Fieldset | Appearance.Ghost
+>;
 
 /**
  * Types of listbox shape.
@@ -93,7 +99,11 @@ export class Listbox extends FoundationListboxElement {
 		this.#disableSlottedChildren();
 	}
 
-	override attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+	override attributeChangedCallback(
+		name: string,
+		oldValue: string,
+		newValue: string
+	): void {
 		super.attributeChangedCallback(name, oldValue, newValue);
 		if (name === 'disabled') {
 			this.#disableSlottedChildren();
@@ -101,7 +111,7 @@ export class Listbox extends FoundationListboxElement {
 	}
 
 	#disableSlottedChildren(): void {
-		this.options.forEach(optionElement => {
+		this.options.forEach((optionElement) => {
 			if (!optionElement.disabled) {
 				optionElement.disabled = this.disabled;
 			}
diff --git a/libs/components/src/lib/listbox/ui.test.ts b/libs/components/src/lib/listbox/ui.test.ts
index cc830fc0c4..2e8a18909d 100644
--- a/libs/components/src/lib/listbox/ui.test.ts
+++ b/libs/components/src/lib/listbox/ui.test.ts
@@ -4,13 +4,18 @@ import type { Page } from '@playwright/test';
 import {
 	extractHTMLBlocksFromReadme,
 	loadComponents,
-	loadTemplate
+	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
 const components = ['listbox', 'option'];
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template = extractHTMLBlocksFromReadme(path.join(new URL('.', import.meta.url).pathname, 'README.md'))
-		.reduce((htmlString: string, block: string) => `${htmlString} <div style="margin: 5px;">${block}</div>`, '');
+	const template = extractHTMLBlocksFromReadme(
+		path.join(new URL('.', import.meta.url).pathname, 'README.md')
+	).reduce(
+		(htmlString: string, block: string) =>
+			`${htmlString} <div style="margin: 5px;">${block}</div>`,
+		''
+	);
 
 	page.setViewportSize({ width: 440, height: 720 });
 
@@ -27,10 +32,9 @@ test('should show the component', async ({ page }: { page: Page }) => {
 
 	await page.waitForLoadState('networkidle');
 
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/listbox.png',
-		);
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/listbox.png'
+	);
 });
 
 test('should show the component focus', async ({ page }: { page: Page }) => {
@@ -62,9 +66,7 @@ test('should show the component focus', async ({ page }: { page: Page }) => {
 
 	await element.click();
 
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/listbox-focus.png',
-		);
-
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/listbox-focus.png'
+	);
 });
diff --git a/libs/components/src/lib/menu-item/definition.ts b/libs/components/src/lib/menu-item/definition.ts
index 31626bc2bc..0201a9d6be 100644
--- a/libs/components/src/lib/menu-item/definition.ts
+++ b/libs/components/src/lib/menu-item/definition.ts
@@ -8,14 +8,13 @@ import { MenuItemTemplate as template } from './menu-item.template';
 
 export { MenuItemRole } from './menu-item';
 
-
 /**
  * The menu-item element.
  */
 export const menuItemDefinition = MenuItem.compose<MenuItemOptions>({
 	baseName: 'menu-item',
 	template: template as any,
-	styles
+	styles,
 });
 
 /**
diff --git a/libs/components/src/lib/menu-item/index.ts b/libs/components/src/lib/menu-item/index.ts
index 9b0d693d45..e8abe53f9c 100644
--- a/libs/components/src/lib/menu-item/index.ts
+++ b/libs/components/src/lib/menu-item/index.ts
@@ -1,4 +1,3 @@
 import { registerMenuItem } from './definition';
 
-
 registerMenuItem();
diff --git a/libs/components/src/lib/menu-item/menu-item.spec.ts b/libs/components/src/lib/menu-item/menu-item.spec.ts
index 0e27de86d2..16152a5bc1 100644
--- a/libs/components/src/lib/menu-item/menu-item.spec.ts
+++ b/libs/components/src/lib/menu-item/menu-item.spec.ts
@@ -71,7 +71,9 @@ describe('vwc-menu-item', () => {
 			element.role = MenuItemRole.menuitemcheckbox;
 			await elementUpdated(element);
 
-			expect(getBaseElement(element).classList.contains('trailing')).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains('trailing')
+			).toBeTruthy();
 		});
 
 		it('should display icon if role=checkbox and icon is set', async function () {
@@ -81,7 +83,9 @@ describe('vwc-menu-item', () => {
 			element.checked = true;
 			await elementUpdated(element);
 
-			const icon = element.shadowRoot?.querySelector(`[name="${iconName}"]`) as Icon;
+			const icon = element.shadowRoot?.querySelector(
+				`[name="${iconName}"]`
+			) as Icon;
 			expect(icon).toBeInstanceOf(Icon);
 		});
 
@@ -90,14 +94,17 @@ describe('vwc-menu-item', () => {
 			['checkbox-unchecked-2-line', false, MenuItemRole.menuitemcheckbox],
 			['radio-checked-2-line', true, MenuItemRole.menuitemradio],
 			['radio-unchecked-2-line', false, MenuItemRole.menuitemradio],
-		])('should set a %s icon when checked=%s and role is %s', async (expectedIcon, checked, role) => {
-			element.role = role;
-			element.checked = checked;
-			await elementUpdated(element);
+		])(
+			'should set a %s icon when checked=%s and role is %s',
+			async (expectedIcon, checked, role) => {
+				element.role = role;
+				element.checked = checked;
+				await elementUpdated(element);
 
-			const icon = element.shadowRoot?.querySelector(ICON_SELECTOR) as Icon;
-			expect(icon.name).toEqual(expectedIcon);
-		});
+				const icon = element.shadowRoot?.querySelector(ICON_SELECTOR) as Icon;
+				expect(icon.name).toEqual(expectedIcon);
+			}
+		);
 
 		it('should enable default of click event if role is presentation', async function () {
 			const spy = jest.fn();
@@ -118,7 +125,6 @@ describe('vwc-menu-item', () => {
 			const event = spy.mock.calls[0][0];
 			expect(event?.defaultPrevented).toEqual(true);
 		});
-
 	});
 
 	describe('check-trailing', () => {
@@ -127,7 +133,9 @@ describe('vwc-menu-item', () => {
 			element.role = MenuItemRole.menuitemcheckbox;
 			await elementUpdated(element);
 
-			expect(getBaseElement(element).classList.contains('trailing')).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains('trailing')
+			).toBeTruthy();
 		});
 	});
 
@@ -137,7 +145,8 @@ describe('vwc-menu-item', () => {
 			['', false, MenuItemRole.menuitemcheckbox],
 			['check-line', true, MenuItemRole.menuitemradio],
 			['', false, MenuItemRole.menuitemradio],
-		])('should set a "%s" icon when checked=%s and role is %s when check-appearance is tick-only',
+		])(
+			'should set a "%s" icon when checked=%s and role is %s when check-appearance is tick-only',
 			async function (expectedIcon, checked, role) {
 				element.checkedAppearance = CheckAppearance.TickOnly;
 				element.checked = checked;
@@ -146,7 +155,8 @@ describe('vwc-menu-item', () => {
 
 				const icon = element.shadowRoot?.querySelector(ICON_SELECTOR) as Icon;
 				expect(icon.name).toBe(expectedIcon);
-			});
+			}
+		);
 	});
 
 	describe('text', () => {
@@ -161,9 +171,9 @@ describe('vwc-menu-item', () => {
 			element.text = text;
 			await elementUpdated(element);
 
-			const primaryTextSpan = element.shadowRoot?.querySelector('.text-primary');
-			expect(primaryTextSpan?.textContent?.trim())
-				.toEqual(text);
+			const primaryTextSpan =
+				element.shadowRoot?.querySelector('.text-primary');
+			expect(primaryTextSpan?.textContent?.trim()).toEqual(text);
 		});
 	});
 
@@ -179,9 +189,9 @@ describe('vwc-menu-item', () => {
 			element.textSecondary = secondaryText;
 			await elementUpdated(element);
 
-			const secondaryTextSpan = element.shadowRoot?.querySelector('.text-secondary');
-			expect(secondaryTextSpan?.textContent?.trim())
-				.toEqual(secondaryText);
+			const secondaryTextSpan =
+				element.shadowRoot?.querySelector('.text-secondary');
+			expect(secondaryTextSpan?.textContent?.trim()).toEqual(secondaryText);
 		});
 
 		it('should add two-lines text class to base when both texts exist', async () => {
@@ -203,7 +213,9 @@ describe('vwc-menu-item', () => {
 		it('should set disabled class on the base element', async function () {
 			element.disabled = true;
 			await elementUpdated(element);
-			expect(getBaseElement(element).classList.contains('disabled')).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains('disabled')
+			).toBeTruthy();
 		});
 	});
 
@@ -339,22 +351,27 @@ describe('vwc-menu-item', () => {
 
 	describe('slot', () => {
 		it('should render meta slot', async function () {
-			const metaSlotElement = element.shadowRoot?.querySelector('.base slot[name="meta"]');
+			const metaSlotElement = element.shadowRoot?.querySelector(
+				'.base slot[name="meta"]'
+			);
 			await elementUpdated(element);
 
 			expect(metaSlotElement).toBeTruthy();
 		});
 
 		it('should render trailing-meta slot', async function () {
-			const trailingMetaSlotElement = element.shadowRoot?.querySelector('.base slot[name="trailing-meta"]');
+			const trailingMetaSlotElement = element.shadowRoot?.querySelector(
+				'.base slot[name="trailing-meta"]'
+			);
 			await elementUpdated(element);
 
 			expect(trailingMetaSlotElement).toBeTruthy();
 		});
 
-
 		it('should render submenu slot', async function () {
-			const submenuSlotElement = element.shadowRoot?.querySelector('slot[name="submenu"]');
+			const submenuSlotElement = element.shadowRoot?.querySelector(
+				'slot[name="submenu"]'
+			);
 			await elementUpdated(element);
 
 			expect(submenuSlotElement).toBeTruthy();
@@ -366,8 +383,9 @@ describe('vwc-menu-item', () => {
 			element.appendChild(slottedElement);
 			await elementUpdated(element);
 
-			expect(getBaseElement(element).classList.contains('has-meta')).toBeTruthy();
-
+			expect(
+				getBaseElement(element).classList.contains('has-meta')
+			).toBeTruthy();
 		});
 	});
 
@@ -392,33 +410,42 @@ describe('vwc-menu-item', () => {
 			const menuitem = menuElement.querySelector('#menuitem') as MenuItem;
 
 			menuitem.focus();
-			menuitem.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+			menuitem.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowRight' })
+			);
 
 			await elementUpdated(menuElement);
 			expect(menuitem.expanded).toEqual(true);
 
-			menuitem.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+			menuitem.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowLeft' })
+			);
 
 			await elementUpdated(menuElement);
 			expect(menuitem.expanded).toEqual(false);
 		});
 
-		it.each(['Enter', ' '])('should expand first menuitem when "%s" is pressed', async (key) => {
-			const menuitem = menuElement.querySelector('#menuitem') as MenuItem;
+		it.each(['Enter', ' '])(
+			'should expand first menuitem when "%s" is pressed',
+			async (key) => {
+				const menuitem = menuElement.querySelector('#menuitem') as MenuItem;
 
-			menuitem.focus();
-			menuitem.dispatchEvent(new KeyboardEvent('keydown', { key }));
+				menuitem.focus();
+				menuitem.dispatchEvent(new KeyboardEvent('keydown', { key }));
 
-			await elementUpdated(menuElement);
-			expect(menuitem.expanded).toEqual(true);
-		});
+				await elementUpdated(menuElement);
+				expect(menuitem.expanded).toEqual(true);
+			}
+		);
 
 		it('should keep closed on keydown if not expanded', async () => {
 			const menuitem = menuElement.querySelector('#menuitem') as MenuItem;
 
 			menuitem.expanded = false;
 			menuitem.focus();
-			menuitem.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+			menuitem.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowLeft' })
+			);
 
 			await elementUpdated(menuElement);
 			expect(menuitem.expanded).toEqual(false);
@@ -434,7 +461,9 @@ describe('vwc-menu-item', () => {
 
 			menuitem.expanded = false;
 			menuitem.focus();
-			menuitem.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+			menuitem.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowDown' })
+			);
 
 			await elementUpdated(menuElement);
 			expect(menuitem.expanded).toEqual(false);
@@ -448,10 +477,10 @@ describe('vwc-menu-item', () => {
 
 	describe('a11y', () => {
 		it('should pass html a11y test', async () => {
-			const container = (await fixture(
+			const container = await fixture(
 				`<div role="menu"><${COMPONENT_TAG}></${COMPONENT_TAG}></div>`
-			));
-			element = (container.querySelector(COMPONENT_TAG) as MenuItem);
+			);
+			element = container.querySelector(COMPONENT_TAG) as MenuItem;
 			element.text = 'Menu item';
 			element.role = MenuItemRole.menuitem;
 			await elementUpdated(element);
diff --git a/libs/components/src/lib/menu-item/menu-item.template.ts b/libs/components/src/lib/menu-item/menu-item.template.ts
index de401c600f..d7180827b4 100644
--- a/libs/components/src/lib/menu-item/menu-item.template.ts
+++ b/libs/components/src/lib/menu-item/menu-item.template.ts
@@ -1,5 +1,15 @@
-import { elements, ExecutionContext, html, slotted, ViewTemplate, when } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, MenuItemOptions } from '@microsoft/fast-foundation';
+import {
+	elements,
+	ExecutionContext,
+	html,
+	slotted,
+	ViewTemplate,
+	when,
+} from '@microsoft/fast-element';
+import type {
+	ElementDefinitionContext,
+	MenuItemOptions,
+} from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { affixIconTemplateFactory } from '../../shared/patterns/affix';
 import { Icon } from '../icon/icon';
@@ -11,23 +21,35 @@ const getIndicatorIcon = (x: MenuItem) => {
 		return x.checked ? 'check-line' : '';
 	}
 
-	const iconType = x.role === MenuItemRole.menuitemcheckbox ? 'checkbox' : 'radio';
+	const iconType =
+		x.role === MenuItemRole.menuitemcheckbox ? 'checkbox' : 'radio';
 	const iconStatus = x.checked ? 'checked' : 'unchecked';
 	return `${iconType}-${iconStatus}-2-line`;
 };
 
 const getClasses = ({
-	disabled, checked, role, text, textSecondary, icon, metaSlottedContent, checkTrailing
-}: MenuItem) => classNames(
-	'base',
-	['disabled', Boolean(disabled)],
-	['selected', role !== MenuItemRole.menuitem && Boolean(checked)],
-	['trailing', role !== MenuItemRole.menuitem && (checkTrailing || Boolean(icon))],
-	['item-checkbox', role === MenuItemRole.menuitemcheckbox],
-	['item-radio', role === MenuItemRole.menuitemradio],
-	['two-lines', Boolean(text?.length) && Boolean(textSecondary?.length)],
-	['has-meta', Boolean(metaSlottedContent?.length)]
-);
+	disabled,
+	checked,
+	role,
+	text,
+	textSecondary,
+	icon,
+	metaSlottedContent,
+	checkTrailing,
+}: MenuItem) =>
+	classNames(
+		'base',
+		['disabled', Boolean(disabled)],
+		['selected', role !== MenuItemRole.menuitem && Boolean(checked)],
+		[
+			'trailing',
+			role !== MenuItemRole.menuitem && (checkTrailing || Boolean(icon)),
+		],
+		['item-checkbox', role === MenuItemRole.menuitemcheckbox],
+		['item-radio', role === MenuItemRole.menuitemradio],
+		['two-lines', Boolean(text?.length) && Boolean(textSecondary?.length)],
+		['has-meta', Boolean(metaSlottedContent?.length)]
+	);
 
 function handleClick(x: MenuItem, { event }: ExecutionContext<MenuItem>) {
 	x.handleMenuItemClick(event as MouseEvent);
@@ -37,16 +59,29 @@ function handleClick(x: MenuItem, { event }: ExecutionContext<MenuItem>) {
 function checkIndicator(context: ElementDefinitionContext) {
 	const iconTag = context.tagFor(Icon);
 
-	return html<MenuItem>`${when(x => x.role === MenuItemRole.menuitemcheckbox || x.role === MenuItemRole.menuitemradio,
-		html`<span class="action"><${iconTag} class="icon" name="${x => getIndicatorIcon(x)}"></${iconTag}></span>`)}`;
+	return html<MenuItem>`${when(
+		(x) =>
+			x.role === MenuItemRole.menuitemcheckbox ||
+			x.role === MenuItemRole.menuitemradio,
+		html`<span class="action"><${iconTag} class="icon" name="${(x) =>
+			getIndicatorIcon(x)}"></${iconTag}></span>`
+	)}`;
 }
 
 function text() {
-	return html<MenuItem>`${when(x => x.text || x.textSecondary,
+	return html<MenuItem>`${when(
+		(x) => x.text || x.textSecondary,
 		html`<span class="text">
-			${when(x => x.text, html`<span class="text-primary">${x => x.text}</span>`)}
-			${when(x => x.textSecondary, html`<span class="text-secondary">${x => x.textSecondary}</span>`)}
-		</span>`)}`;
+			${when(
+				(x) => x.text,
+				html`<span class="text-primary">${(x) => x.text}</span>`
+			)}
+			${when(
+				(x) => x.textSecondary,
+				html`<span class="text-secondary">${(x) => x.textSecondary}</span>`
+			)}
+		</span>`
+	)}`;
 }
 
 /**
@@ -56,32 +91,52 @@ function text() {
  * @param context - element definition context
  * @public
  */
-export const MenuItemTemplate: (context: ElementDefinitionContext, definition: MenuItemOptions
+export const MenuItemTemplate: (
+	context: ElementDefinitionContext,
+	definition: MenuItemOptions
 ) => ViewTemplate<MenuItem> = (context: ElementDefinitionContext) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 	const iconTag = context.tagFor(Icon);
 
 	return html<MenuItem>`
-	<template
-		role="${x => (x.role ? x.role : MenuItemRole.menuitem)}"
-		aria-haspopup="${x => (x.hasSubmenu ? 'menu' : void 0)}"
-		aria-checked="${x => (x.role !== MenuItemRole.menuitem ? x.checked : void 0)}"
-		aria-disabled="${x => x.disabled}"
-		aria-expanded="${x => x.expanded}"
-		@keydown="${(x, c) => x.handleMenuItemKeyDown(c.event as KeyboardEvent)}"
-		@click="${handleClick}"
-		@mouseover="${(x, c) => x.handleMouseOver(c.event as MouseEvent)}"
-		@mouseout="${(x, c) => x.handleMouseOut(c.event as MouseEvent)}"
-	>
-		<div class="${getClasses}">
-			<slot name="meta" ${slotted('metaSlottedContent')}></slot>
-			${checkIndicator(context)}
-			${when(x => x.icon, html`<span class="decorative">${x => affixIconTemplate(x.icon)}</span>`)}
-			${text()}
-			<slot name="trailing-meta" ${slotted('trailingMetaSlottedContent')}></slot>
-			${when(x => x.hasSubmenu, html`<${iconTag} class="chevron" name="chevron-right-line"></${iconTag}>`)}
-		</div>
-		<slot name="submenu" ${slotted({ property: 'slottedSubmenu', filter: elements(context.tagFor(Menu)) })}></slot>
-	</template>
+		<template
+			role="${(x) => (x.role ? x.role : MenuItemRole.menuitem)}"
+			aria-haspopup="${(x) => (x.hasSubmenu ? 'menu' : void 0)}"
+			aria-checked="${(x) =>
+				x.role !== MenuItemRole.menuitem ? x.checked : void 0}"
+			aria-disabled="${(x) => x.disabled}"
+			aria-expanded="${(x) => x.expanded}"
+			@keydown="${(x, c) => x.handleMenuItemKeyDown(c.event as KeyboardEvent)}"
+			@click="${handleClick}"
+			@mouseover="${(x, c) => x.handleMouseOver(c.event as MouseEvent)}"
+			@mouseout="${(x, c) => x.handleMouseOut(c.event as MouseEvent)}"
+		>
+			<div class="${getClasses}">
+				<slot name="meta" ${slotted('metaSlottedContent')}></slot>
+				${checkIndicator(context)}
+				${when(
+					(x) => x.icon,
+					html`<span class="decorative"
+						>${(x) => affixIconTemplate(x.icon)}</span
+					>`
+				)}
+				${text()}
+				<slot
+					name="trailing-meta"
+					${slotted('trailingMetaSlottedContent')}
+				></slot>
+				${when(
+					(x) => x.hasSubmenu,
+					html`<${iconTag} class="chevron" name="chevron-right-line"></${iconTag}>`
+				)}
+			</div>
+			<slot
+				name="submenu"
+				${slotted({
+					property: 'slottedSubmenu',
+					filter: elements(context.tagFor(Menu)),
+				})}
+			></slot>
+		</template>
 	`;
 };
diff --git a/libs/components/src/lib/menu-item/menu-item.ts b/libs/components/src/lib/menu-item/menu-item.ts
index 2dc9c82a5a..2bef2a6a39 100644
--- a/libs/components/src/lib/menu-item/menu-item.ts
+++ b/libs/components/src/lib/menu-item/menu-item.ts
@@ -14,7 +14,7 @@ export const MenuItemRole = {
 
 export enum CheckAppearance {
 	Normal = 'normal',
-	TickOnly =  'tick-only',
+	TickOnly = 'tick-only',
 }
 
 /**
@@ -94,7 +94,8 @@ export class MenuItem extends FastMenuItem {
 			this.submenu = submenu as Menu;
 			(this.submenu as Menu).anchor = this as MenuItem;
 			(this.submenu as Menu).placement = 'right-start';
-			(this.submenu as Menu).collapseExpandedItem = () => this.#collapseExpandedItem();
+			(this.submenu as Menu).collapseExpandedItem = () =>
+				this.#collapseExpandedItem();
 		}
 
 		this.hasSubmenu = this.submenu === undefined ? false : true;
@@ -111,6 +112,6 @@ export class MenuItem extends FastMenuItem {
 	}
 }
 
-export interface MenuItem extends AffixIcon { }
+export interface MenuItem extends AffixIcon {}
 
 applyMixins(MenuItem, AffixIcon);
diff --git a/libs/components/src/lib/menu/definition.ts b/libs/components/src/lib/menu/definition.ts
index 01c6c8000e..a75c75c5ad 100644
--- a/libs/components/src/lib/menu/definition.ts
+++ b/libs/components/src/lib/menu/definition.ts
@@ -16,7 +16,6 @@ export const menuDefinition = Menu.compose({
 	styles,
 });
 
-
 // by convention, menu-item isn't required to be imported
 // in menu as it is not used directly in template, rather by user's authoring.
 // but, due to the race condition and way menu needs children to
@@ -24,7 +23,11 @@ export const menuDefinition = Menu.compose({
 /**
  * @internal
  */
-export const menuRegistries = [menuDefinition(), ...popupRegistries, ...menuItemRegistries];
+export const menuRegistries = [
+	menuDefinition(),
+	...popupRegistries,
+	...menuItemRegistries,
+];
 
 /**
  * Registers the calendar-event elements with the design system.
diff --git a/libs/components/src/lib/menu/index.ts b/libs/components/src/lib/menu/index.ts
index 963138fbe3..382e8e9d24 100644
--- a/libs/components/src/lib/menu/index.ts
+++ b/libs/components/src/lib/menu/index.ts
@@ -1,4 +1,3 @@
 import { registerMenu } from './definition';
 
-
 registerMenu();
diff --git a/libs/components/src/lib/menu/menu.spec.ts b/libs/components/src/lib/menu/menu.spec.ts
index b9301ed4ae..8e3eb8490d 100644
--- a/libs/components/src/lib/menu/menu.spec.ts
+++ b/libs/components/src/lib/menu/menu.spec.ts
@@ -3,7 +3,7 @@ import {
 	axe,
 	elementUpdated,
 	fixture,
-	getBaseElement
+	getBaseElement,
 } from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { keyArrowDown, keyArrowUp } from '@microsoft/fast-web-utilities';
@@ -20,21 +20,19 @@ describe('vwc-menu', () => {
 	let popup: Popup;
 	let anchor: Button;
 
-	global.ResizeObserver = jest.fn()
-		.mockImplementation(() => ({
-			observe: jest.fn(),
-			unobserve: jest.fn(),
-			disconnect: jest.fn()
-		}));
+	global.ResizeObserver = jest.fn().mockImplementation(() => ({
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+		disconnect: jest.fn(),
+	}));
 
 	beforeEach(async () => {
-		element = fixture(
-			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
-		) as Menu;
+		element = fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`) as Menu;
 		popup = element.shadowRoot?.querySelector('vwc-popup') as Popup;
 
 		anchor = fixture(
-			'<vwc-button id="anchorButton"></vwc-button>', ADD_TEMPLATE_TO_FIXTURE
+			'<vwc-button id="anchorButton"></vwc-button>',
+			ADD_TEMPLATE_TO_FIXTURE
 		) as Button;
 	});
 
@@ -49,12 +47,15 @@ describe('vwc-menu', () => {
 	});
 
 	describe('open', () => {
-		it.each([true, false])('should forward open=%s to popup', async (isOpen) => {
-			element.open = isOpen;
-			await elementUpdated(element);
+		it.each([true, false])(
+			'should forward open=%s to popup',
+			async (isOpen) => {
+				element.open = isOpen;
+				await elementUpdated(element);
 
-			expect(popup.hasAttribute('open')).toBe(isOpen);
-		});
+				expect(popup.hasAttribute('open')).toBe(isOpen);
+			}
+		);
 	});
 
 	describe('auto-dismiss', () => {
@@ -68,29 +69,32 @@ describe('vwc-menu', () => {
 
 			await elementUpdated(element);
 
-			expect(element.open)
-				.toEqual(false);
+			expect(element.open).toEqual(false);
 		});
 
 		describe('removing listeners', () => {
 			let lastAddedListener: (() => void) | undefined;
-			let lastRemovedListener:(() => void) | undefined;
+			let lastRemovedListener: (() => void) | undefined;
 			beforeEach(() => {
 				lastAddedListener = undefined;
 				lastRemovedListener = undefined;
-				jest.spyOn(document, 'addEventListener').mockImplementation(function(_: string, cb: any) {
-					lastAddedListener = cb;
-				});
-				jest.spyOn(document, 'removeEventListener').mockImplementation(function(_: string, cb: any) {
-					lastRemovedListener = cb;
-				});
+				jest
+					.spyOn(document, 'addEventListener')
+					.mockImplementation(function (_: string, cb: any) {
+						lastAddedListener = cb;
+					});
+				jest
+					.spyOn(document, 'removeEventListener')
+					.mockImplementation(function (_: string, cb: any) {
+						lastRemovedListener = cb;
+					});
 			});
 			afterEach(() => {
 				jest.mocked(document.addEventListener).mockRestore();
 				jest.mocked(document.removeEventListener).mockRestore();
 			});
 
-			it('should remove the listener on attribute change', async function() {
+			it('should remove the listener on attribute change', async function () {
 				element.open = true;
 				element.autoDismiss = true;
 				await elementUpdated(element);
@@ -100,7 +104,7 @@ describe('vwc-menu', () => {
 				expect(lastAddedListener).toBe(lastRemovedListener);
 			});
 
-			it('should remove the listener when disconnected', async function() {
+			it('should remove the listener when disconnected', async function () {
 				element.open = true;
 				element.autoDismiss = true;
 				await elementUpdated(element);
@@ -132,8 +136,7 @@ describe('vwc-menu', () => {
 			document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 			await elementUpdated(element);
 
-			expect(element.open)
-				.toEqual(true);
+			expect(element.open).toEqual(true);
 		});
 
 		it('should remain open when clicked inside', async () => {
@@ -149,7 +152,7 @@ describe('vwc-menu', () => {
 		});
 
 		it('should not emit a close event when toggling open state programmatically on button click', async () => {
-			anchor.addEventListener('click', () => element.open = !element.open);
+			anchor.addEventListener('click', () => (element.open = !element.open));
 			const closeSpy = jest.fn();
 			element.addEventListener('close', closeSpy);
 			element.anchor = anchor.id;
@@ -170,18 +173,17 @@ describe('vwc-menu', () => {
 
 			await elementUpdated(element);
 
-			getBaseElement(element)
-				.dispatchEvent(new KeyboardEvent('keydown', {
-					'key': 'Escape',
+			getBaseElement(element).dispatchEvent(
+				new KeyboardEvent('keydown', {
+					key: 'Escape',
 					bubbles: true,
-					composed: true
-				}));
-
+					composed: true,
+				})
+			);
 
 			await elementUpdated(element);
 
-			expect(element.open)
-				.toEqual(false);
+			expect(element.open).toEqual(false);
 		});
 	});
 
@@ -233,7 +235,6 @@ describe('vwc-menu', () => {
 		});
 
 		it('should handle menu key down events', async () => {
-
 			function keyMoveAndGetActiveId(arrowEvent: Event) {
 				document.activeElement?.dispatchEvent(arrowEvent);
 				return document.activeElement?.id;
@@ -257,7 +258,6 @@ describe('vwc-menu', () => {
 			expect(activeIdAfterKeyDown2).toEqual('id3');
 			expect(activeIdAfterKeyUp1).toEqual('id2');
 			expect(activeIdAfterKeyUp2).toEqual('id1');
-
 		});
 
 		it('should reset tabindex to the first element on focusout event', async () => {
@@ -266,7 +266,8 @@ describe('vwc-menu', () => {
 				document.activeElement?.dispatchEvent(arrowDownEvent);
 			}
 
-			const menuFocusedElement = () => element.querySelector('[tabindex="0"]') as HTMLElement;
+			const menuFocusedElement = () =>
+				element.querySelector('[tabindex="0"]') as HTMLElement;
 
 			element.innerHTML = `
 				<div role="menuitem" id="id1" text="Menu Item 1"></div>
@@ -307,11 +308,14 @@ describe('vwc-menu', () => {
 
 		it.each([
 			['false', false],
-			['true', true]
-		])('should set aria-expanded=%s on the anchor element when open is %s', async (expectedValue, isOpen) => {
-			element.open = isOpen;
-			expect(anchor.getAttribute('aria-expanded')).toBe(expectedValue);
-		});
+			['true', true],
+		])(
+			'should set aria-expanded=%s on the anchor element when open is %s',
+			async (expectedValue, isOpen) => {
+				element.open = isOpen;
+				expect(anchor.getAttribute('aria-expanded')).toBe(expectedValue);
+			}
+		);
 
 		it('should open when anchor is clicked', async () => {
 			anchor.dispatchEvent(new MouseEvent('click', { bubbles: true }));
@@ -367,8 +371,9 @@ describe('vwc-menu', () => {
 
 	describe('menu header', () => {
 		it('should have header slot ', async function () {
-			const headerSlotElement = element.shadowRoot?.
-				querySelector('.header slot[name="header"]');
+			const headerSlotElement = element.shadowRoot?.querySelector(
+				'.header slot[name="header"]'
+			);
 
 			expect(headerSlotElement).toBeDefined();
 		});
@@ -388,8 +393,9 @@ describe('vwc-menu', () => {
 
 	describe('menu actions', () => {
 		it('should have actions slot ', async function () {
-			const actionsSlotElement = element.shadowRoot?.
-				querySelector('.action-items slot[name="actions"]');
+			const actionsSlotElement = element.shadowRoot?.querySelector(
+				'.action-items slot[name="actions"]'
+			);
 
 			expect(actionsSlotElement).toBeDefined();
 		});
@@ -409,7 +415,8 @@ describe('vwc-menu', () => {
 
 	describe('menu items', () => {
 		it('should have default slot ', async function () {
-			const actionsSlotElement = element.shadowRoot?.querySelector('.body slot');
+			const actionsSlotElement =
+				element.shadowRoot?.querySelector('.body slot');
 
 			expect(actionsSlotElement).toBeDefined();
 		});
@@ -500,7 +507,9 @@ describe('vwc-menu', () => {
 
 	function focusOutOfBody() {
 		const focusOutEvent = new FocusEvent('focusout');
-		const bodyElement = element.shadowRoot?.querySelector('.body') as HTMLElement;
+		const bodyElement = element.shadowRoot?.querySelector(
+			'.body'
+		) as HTMLElement;
 		bodyElement.dispatchEvent(focusOutEvent);
 	}
 });
diff --git a/libs/components/src/lib/menu/menu.template.ts b/libs/components/src/lib/menu/menu.template.ts
index bd51b6d1cc..0a2ed6003a 100644
--- a/libs/components/src/lib/menu/menu.template.ts
+++ b/libs/components/src/lib/menu/menu.template.ts
@@ -1,7 +1,7 @@
 import {
 	type ElementViewTemplate,
 	html,
-	slotted
+	slotted,
 } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 import type {
@@ -13,7 +13,9 @@ import { anchorSlotTemplateFactory } from '../../shared/patterns/anchored';
 import type { Menu } from './menu';
 
 const getClasses = ({
-	headerSlottedContent, actionItemsSlottedContent, items
+	headerSlottedContent,
+	actionItemsSlottedContent,
+	items,
 }: Menu) =>
 	classNames(
 		'base',
@@ -65,13 +67,15 @@ export const MenuTemplate: (
 				<div
 					class="body"
 					role="menu"
-					aria-label="${x => x.ariaLabel}"
+					aria-label="${(x) => x.ariaLabel}"
 					@keydown="${(x, c) => x.handleMenuKeyDown(c.event as KeyboardEvent)}"
 					@focusout="${(x, c) => x.handleFocusOut(c.event as FocusEvent)}"
 				>
 					<slot ${slotted('items')}></slot>
 				</div>
-				<footer class="action-items"><slot name="action-items"  ${slotted('actionItemsSlottedContent')}></slot></footer>
+				<footer class="action-items"><slot name="action-items"  ${slotted(
+					'actionItemsSlottedContent'
+				)}></slot></footer>
 			</div>
 		</${popupTag}>
 	</template>`;
diff --git a/libs/components/src/lib/menu/menu.ts b/libs/components/src/lib/menu/menu.ts
index c9d200e66b..af93823d4a 100644
--- a/libs/components/src/lib/menu/menu.ts
+++ b/libs/components/src/lib/menu/menu.ts
@@ -15,7 +15,7 @@ import { type Anchored, anchored } from '../../shared/patterns/anchored';
  */
 @anchored
 export class Menu extends FastMenu {
-	@attr({attribute: 'aria-label'}) override ariaLabel: string | null = null;
+	@attr({ attribute: 'aria-label' }) override ariaLabel: string | null = null;
 
 	/**
 	 * placement of the menu
@@ -69,7 +69,9 @@ export class Menu extends FastMenu {
 				menuItems: Element[] | undefined;
 				isFocusableElement: (el: Element) => el is HTMLElement;
 			};
-			const isSafeToCallSuper = privates.menuItems!.some(privates.isFocusableElement);
+			const isSafeToCallSuper = privates.menuItems!.some(
+				privates.isFocusableElement
+			);
 			if (!isSafeToCallSuper) {
 				return;
 			}
@@ -114,7 +116,7 @@ export class Menu extends FastMenu {
 	}
 
 	#openIfClosed = () => {
-		if (!this.open) DOM.queueUpdate(() => this.open = true);
+		if (!this.open) DOM.queueUpdate(() => (this.open = true));
 	};
 
 	#updateClickOutsideListeners = () => {
diff --git a/libs/components/src/lib/menu/ui.test.ts b/libs/components/src/lib/menu/ui.test.ts
index b3f6c07b8e..4a303e408f 100644
--- a/libs/components/src/lib/menu/ui.test.ts
+++ b/libs/components/src/lib/menu/ui.test.ts
@@ -8,7 +8,7 @@ import {
 const components = ['menu', 'menu-item', 'button', 'text-field'];
 
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template =`
+	const template = `
 		<style>
 			.wrapper {
 				width: 300px;
diff --git a/libs/components/src/lib/nav-disclosure/definition.ts b/libs/components/src/lib/nav-disclosure/definition.ts
index 15192694d5..04bb14037b 100644
--- a/libs/components/src/lib/nav-disclosure/definition.ts
+++ b/libs/components/src/lib/nav-disclosure/definition.ts
@@ -6,7 +6,6 @@ import styles from './nav-disclosure.scss?inline';
 import { NavDisclosure } from './nav-disclosure';
 import { NavDisclosureTemplate as template } from './nav-disclosure.template';
 
-
 /**
  * The nav-disclosure element.
  */
@@ -20,7 +19,10 @@ export const navDisclosureDefinition =
 /**
  * @internal
  */
-export const navDisclosureRegistries = [navDisclosureDefinition(), ...iconRegistries];
+export const navDisclosureRegistries = [
+	navDisclosureDefinition(),
+	...iconRegistries,
+];
 
 /**
  * Registers the nav-disclosure elements with the design system.
diff --git a/libs/components/src/lib/nav-disclosure/index.ts b/libs/components/src/lib/nav-disclosure/index.ts
index 7d95c9373c..8c9624d105 100644
--- a/libs/components/src/lib/nav-disclosure/index.ts
+++ b/libs/components/src/lib/nav-disclosure/index.ts
@@ -1,4 +1,3 @@
 import { registerNavDisclosure } from './definition';
 
-
 registerNavDisclosure();
diff --git a/libs/components/src/lib/nav-disclosure/nav-disclosure.spec.ts b/libs/components/src/lib/nav-disclosure/nav-disclosure.spec.ts
index 7730297046..6b932c0c3b 100644
--- a/libs/components/src/lib/nav-disclosure/nav-disclosure.spec.ts
+++ b/libs/components/src/lib/nav-disclosure/nav-disclosure.spec.ts
@@ -1,4 +1,10 @@
-import { axe, elementUpdated, fixture, getBaseElement, getControlElement } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getBaseElement,
+	getControlElement,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { Icon } from '../icon/icon';
 import { NavDisclosure } from './nav-disclosure';
@@ -19,7 +25,9 @@ describe('vwc-nav-disclosure', () => {
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-nav-disclosure', async () => {
-			expect(navDisclosureDefinition()).toBeInstanceOf(FoundationElementRegistry);
+			expect(navDisclosureDefinition()).toBeInstanceOf(
+				FoundationElementRegistry
+			);
 			expect(element).toBeInstanceOf(NavDisclosure);
 			expect(element.label).toEqual(undefined);
 			expect(element.icon).toBeUndefined();
@@ -30,11 +38,15 @@ describe('vwc-nav-disclosure', () => {
 
 	describe('aria-expanded', () => {
 		it('should update aria-expanded when toggle open', async () => {
-			expect(getControlElement(element).getAttribute('aria-expanded')).toEqual('false');
+			expect(getControlElement(element).getAttribute('aria-expanded')).toEqual(
+				'false'
+			);
 
 			element.open = true;
 			await elementUpdated(element);
-			expect(getControlElement(element).getAttribute('aria-expanded')).toEqual('true');
+			expect(getControlElement(element).getAttribute('aria-expanded')).toEqual(
+				'true'
+			);
 		});
 	});
 
@@ -59,13 +71,12 @@ describe('vwc-nav-disclosure', () => {
 			element.label = label;
 			await elementUpdated(element);
 
-			expect(getBaseElement(element).textContent?.trim())
-				.toEqual(label);
+			expect(getBaseElement(element).textContent?.trim()).toEqual(label);
 		});
 	});
 
 	describe('toggle event', () => {
-		it('should emit a toggle event that does not bubble when open/closed state is toggled', async function() {
+		it('should emit a toggle event that does not bubble when open/closed state is toggled', async function () {
 			const spy = jest.fn();
 			element.addEventListener('toggle', spy);
 
@@ -78,7 +89,9 @@ describe('vwc-nav-disclosure', () => {
 
 	describe('icon', () => {
 		it('should have an icon slot', async () => {
-			expect(Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))).toEqual(true);
+			expect(
+				Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))
+			).toEqual(true);
 		});
 
 		it('should have an icon when icon is set without slotted icon', async () => {
@@ -86,16 +99,16 @@ describe('vwc-nav-disclosure', () => {
 			await elementUpdated(element);
 
 			const icon = element.shadowRoot?.querySelector(ICON_SELECTOR) as Icon;
-			expect(icon)
-				.toBeInstanceOf(Icon);
-			expect(icon?.name)
-				.toEqual('home');
+			expect(icon).toBeInstanceOf(Icon);
+			expect(icon?.name).toEqual('home');
 		});
 	});
 
 	describe('meta slot', () => {
 		it('should have meta slot', async () => {
-			expect(element.shadowRoot?.querySelector('slot[name="meta"]')).toBeTruthy();
+			expect(
+				element.shadowRoot?.querySelector('slot[name="meta"]')
+			).toBeTruthy();
 		});
 	});
 
@@ -114,14 +127,18 @@ describe('vwc-nav-disclosure', () => {
 				element.open = true;
 				element.ariaCurrent = ariaCurrent;
 				await elementUpdated(element);
-				expect(getControlElement(element).getAttribute('aria-current')).toBeNull();
+				expect(
+					getControlElement(element).getAttribute('aria-current')
+				).toBeNull();
 			});
-	
+
 			it('should set aria-current on the nav-disclosure if closed', async function () {
 				const ariaCurrent = 'true';
 				element.setAttribute('aria-current', ariaCurrent);
 				await elementUpdated(element);
-				expect(getControlElement(element).getAttribute('aria-current')).not.toBeNull();
+				expect(
+					getControlElement(element).getAttribute('aria-current')
+				).not.toBeNull();
 			});
 		});
 	});
diff --git a/libs/components/src/lib/nav-disclosure/nav-disclosure.template.ts b/libs/components/src/lib/nav-disclosure/nav-disclosure.template.ts
index 7bbaf22609..6dbc494141 100644
--- a/libs/components/src/lib/nav-disclosure/nav-disclosure.template.ts
+++ b/libs/components/src/lib/nav-disclosure/nav-disclosure.template.ts
@@ -4,7 +4,10 @@ import type {
 	ElementDefinitionContext,
 	FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import { Icon } from '../icon/icon';
 import type { NavDisclosure } from './nav-disclosure';
 
@@ -25,16 +28,17 @@ export const NavDisclosureTemplate: (
 	const affixIconTemplate = affixIconTemplateFactory(context);
 	const iconTag = context.tagFor(Icon);
 
-	return html`<details class="base" ${ref('details')} ?open=${x => x.open}>
+	return html`<details class="base" ${ref('details')} ?open=${(x) => x.open}>
         <summary class="control"
             role="button"
             aria-controls="disclosure-content"
-			aria-expanded="${x => x.open}"
-			?aria-current=${x => getAriaCurrent(x.ariaCurrent, x.open)}>
-					${x => affixIconTemplate(x.icon, IconWrapper.Slot)}
-            ${x => x.label}
+			aria-expanded="${(x) => x.open}"
+			?aria-current=${(x) => getAriaCurrent(x.ariaCurrent, x.open)}>
+					${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+            ${(x) => x.label}
 						<slot name="meta"></slot>
-					<${iconTag} class="toggleIcon" name=${x => x.open ? 'chevron-up-solid' : 'chevron-down-solid'}
+					<${iconTag} class="toggleIcon" name=${(x) =>
+		x.open ? 'chevron-up-solid' : 'chevron-down-solid'}
 											aria-hidden="true"></${iconTag}>
         </summary>
         <div class="content" id="disclosure-content">
@@ -43,5 +47,3 @@ export const NavDisclosureTemplate: (
     </details>
 	`;
 };
-
-
diff --git a/libs/components/src/lib/nav-disclosure/nav-disclosure.ts b/libs/components/src/lib/nav-disclosure/nav-disclosure.ts
index 34944f6c5c..508b5b2a34 100644
--- a/libs/components/src/lib/nav-disclosure/nav-disclosure.ts
+++ b/libs/components/src/lib/nav-disclosure/nav-disclosure.ts
@@ -28,7 +28,8 @@ export class NavDisclosure extends FoundationElement {
 	 * HTML Attribute: open
 	 */
 	@attr({ mode: 'boolean' }) open = false;
-	@attr({attribute: 'aria-current'}) override ariaCurrent: string | null = null;
+	@attr({ attribute: 'aria-current' }) override ariaCurrent: string | null =
+		null;
 
 	/**
 	 * @internal
@@ -44,7 +45,7 @@ export class NavDisclosure extends FoundationElement {
 	 */
 	override disconnectedCallback(): void {
 		super.disconnectedCallback();
-		this.details.removeEventListener('toggle',  this.#onToggle);
+		this.details.removeEventListener('toggle', this.#onToggle);
 	}
 
 	#onToggle = () => {
@@ -53,5 +54,5 @@ export class NavDisclosure extends FoundationElement {
 	};
 }
 
-export interface NavDisclosure extends AffixIcon { }
+export interface NavDisclosure extends AffixIcon {}
 applyMixins(NavDisclosure, AffixIcon);
diff --git a/libs/components/src/lib/nav-disclosure/ui.test.ts b/libs/components/src/lib/nav-disclosure/ui.test.ts
index 16cdaec867..41cef29cf3 100644
--- a/libs/components/src/lib/nav-disclosure/ui.test.ts
+++ b/libs/components/src/lib/nav-disclosure/ui.test.ts
@@ -10,8 +10,13 @@ import {
 const components = ['nav-disclosure', 'nav-item', 'badge'];
 
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template = extractHTMLBlocksFromReadme(path.join(new URL('.', import.meta.url).pathname, 'README.md'))
-		.reduce((htmlString: string, block: string) => `${htmlString} <div style="margin: 5px;">${block}</div>`, '');
+	const template = extractHTMLBlocksFromReadme(
+		path.join(new URL('.', import.meta.url).pathname, 'README.md')
+	).reduce(
+		(htmlString: string, block: string) =>
+			`${htmlString} <div style="margin: 5px;">${block}</div>`,
+		''
+	);
 
 	page.setViewportSize({ width: 300, height: 720 });
 
diff --git a/libs/components/src/lib/nav-item/definition.ts b/libs/components/src/lib/nav-item/definition.ts
index 1cfb3652e6..e733531723 100644
--- a/libs/components/src/lib/nav-item/definition.ts
+++ b/libs/components/src/lib/nav-item/definition.ts
@@ -6,19 +6,17 @@ import styles from './nav-item.scss?inline';
 import { NavItem } from './nav-item';
 import { NavItemTemplate as template } from './nav-item.template';
 
-
 /**
  * The nav-item element is a custom element that is used to display a single item in a nav.
  */
-export const navItemDefinition =
-	NavItem.compose<FoundationElementDefinition>({
-		baseName: 'nav-item',
-		template: template as any,
-		styles,
-		shadowOptions: {
-			delegatesFocus: true,
-		},
-	});
+export const navItemDefinition = NavItem.compose<FoundationElementDefinition>({
+	baseName: 'nav-item',
+	template: template as any,
+	styles,
+	shadowOptions: {
+		delegatesFocus: true,
+	},
+});
 
 /**
  * @internal
diff --git a/libs/components/src/lib/nav-item/index.ts b/libs/components/src/lib/nav-item/index.ts
index 4193ce3fc5..87a646cf86 100644
--- a/libs/components/src/lib/nav-item/index.ts
+++ b/libs/components/src/lib/nav-item/index.ts
@@ -1,4 +1,3 @@
 import { registerNavItem } from './definition';
 
-
 registerNavItem();
diff --git a/libs/components/src/lib/nav-item/nav-item.spec.ts b/libs/components/src/lib/nav-item/nav-item.spec.ts
index 53beb1a492..ae42f9a8af 100644
--- a/libs/components/src/lib/nav-item/nav-item.spec.ts
+++ b/libs/components/src/lib/nav-item/nav-item.spec.ts
@@ -28,7 +28,9 @@ describe('vwc-nav-item', () => {
 
 	describe('icon', () => {
 		it('should have an icon slot', async () => {
-			expect(element.shadowRoot?.querySelector('slot[name="icon"]')).toBeTruthy();
+			expect(
+				element.shadowRoot?.querySelector('slot[name="icon"]')
+			).toBeTruthy();
 		});
 
 		it('should add an icon to the nav item', async () => {
@@ -36,10 +38,8 @@ describe('vwc-nav-item', () => {
 			await elementUpdated(element);
 
 			const icon = element.shadowRoot?.querySelector(ICON_SELECTOR) as Icon;
-			expect(icon)
-				.toBeInstanceOf(Icon);
-			expect(icon?.name)
-				.toEqual('home');
+			expect(icon).toBeInstanceOf(Icon);
+			expect(icon?.name).toEqual('home');
 		});
 	});
 
@@ -48,7 +48,9 @@ describe('vwc-nav-item', () => {
 			element.icon = 'home';
 			await elementUpdated(element);
 
-			expect(element.shadowRoot?.querySelector('.control.icon-only')).toBeInstanceOf(Element);
+			expect(
+				element.shadowRoot?.querySelector('.control.icon-only')
+			).toBeInstanceOf(Element);
 		});
 	});
 
@@ -59,8 +61,7 @@ describe('vwc-nav-item', () => {
 			await elementUpdated(element);
 
 			const control = element.shadowRoot?.querySelector('.control');
-			expect(control?.textContent?.trim())
-				.toEqual(text);
+			expect(control?.textContent?.trim()).toEqual(text);
 		});
 	});
 
@@ -84,8 +85,7 @@ describe('vwc-nav-item', () => {
 				const ariaCurrent = 'page';
 				element.ariaCurrent = ariaCurrent;
 				await elementUpdated(element);
-				expect(element.getAttribute('aria-current'))
-					.toEqual(ariaCurrent);
+				expect(element.getAttribute('aria-current')).toEqual(ariaCurrent);
 			});
 		});
 	});
diff --git a/libs/components/src/lib/nav-item/nav-item.template.ts b/libs/components/src/lib/nav-item/nav-item.template.ts
index 1bdb465de0..8c93bd112d 100644
--- a/libs/components/src/lib/nav-item/nav-item.template.ts
+++ b/libs/components/src/lib/nav-item/nav-item.template.ts
@@ -19,6 +19,4 @@ export const NavItemTemplate: (
 ) => ViewTemplate<NavItem> = (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
-) => html<NavItem>`
-      ${textAnchorTemplate(context, definition)}
-    `;
+) => html<NavItem>` ${textAnchorTemplate(context, definition)} `;
diff --git a/libs/components/src/lib/nav-item/nav-item.ts b/libs/components/src/lib/nav-item/nav-item.ts
index 296e6f8c8d..5548b1a5d2 100644
--- a/libs/components/src/lib/nav-item/nav-item.ts
+++ b/libs/components/src/lib/nav-item/nav-item.ts
@@ -3,7 +3,6 @@ import { html } from '@microsoft/fast-element';
 import { AffixIcon } from '../../shared/patterns/affix';
 import { TextAnchor } from '../text-anchor/text-anchor';
 
-
 /**
  * A Nav Item Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
diff --git a/libs/components/src/lib/nav-item/ui.test.ts b/libs/components/src/lib/nav-item/ui.test.ts
index f03f6ca4a7..bc86f0d938 100644
--- a/libs/components/src/lib/nav-item/ui.test.ts
+++ b/libs/components/src/lib/nav-item/ui.test.ts
@@ -10,8 +10,13 @@ import {
 const components = ['nav', 'nav-item', 'badge', 'icon'];
 
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template = extractHTMLBlocksFromReadme(path.join(new URL('.', import.meta.url).pathname, 'README.md'))
-		.reduce((htmlString: string, block: string) => `${htmlString} <div style="margin: 5px;">${block}</div>`,'');
+	const template = extractHTMLBlocksFromReadme(
+		path.join(new URL('.', import.meta.url).pathname, 'README.md')
+	).reduce(
+		(htmlString: string, block: string) =>
+			`${htmlString} <div style="margin: 5px;">${block}</div>`,
+		''
+	);
 
 	page.setViewportSize({ width: 200, height: 720 });
 
diff --git a/libs/components/src/lib/nav/definition.ts b/libs/components/src/lib/nav/definition.ts
index b1cb3fd659..4edadfc9e4 100644
--- a/libs/components/src/lib/nav/definition.ts
+++ b/libs/components/src/lib/nav/definition.ts
@@ -8,13 +8,11 @@ import { NavTemplate as template } from './nav.template';
 /**
  * The nav element.
  */
-export const navDefinition =
-	Nav.compose<FoundationElementDefinition>({
-		baseName: 'nav',
-		template: template as any,
-		styles
-	});
-
+export const navDefinition = Nav.compose<FoundationElementDefinition>({
+	baseName: 'nav',
+	template: template as any,
+	styles,
+});
 
 /**
  * @internal
diff --git a/libs/components/src/lib/nav/index.ts b/libs/components/src/lib/nav/index.ts
index 1223389836..2f7b58113a 100644
--- a/libs/components/src/lib/nav/index.ts
+++ b/libs/components/src/lib/nav/index.ts
@@ -1,4 +1,3 @@
 import { registerNav } from './definition';
 
-
 registerNav();
diff --git a/libs/components/src/lib/nav/nav.spec.ts b/libs/components/src/lib/nav/nav.spec.ts
index 69d74b5066..4ef011961b 100644
--- a/libs/components/src/lib/nav/nav.spec.ts
+++ b/libs/components/src/lib/nav/nav.spec.ts
@@ -30,7 +30,10 @@ describe('vwc-nav', () => {
 
 	describe('a11y', () => {
 		it('should pass html a11y test', async () => {
-			const exposedHtmlString = element.shadowRoot?.innerHTML.replace('<slot></slot>', navItemsTemplate) as string;
+			const exposedHtmlString = element.shadowRoot?.innerHTML.replace(
+				'<slot></slot>',
+				navItemsTemplate
+			) as string;
 			expect(await axe(exposedHtmlString)).toHaveNoViolations();
 		});
 	});
diff --git a/libs/components/src/lib/nav/nav.template.ts b/libs/components/src/lib/nav/nav.template.ts
index 4396648bc2..4ae725b7b6 100644
--- a/libs/components/src/lib/nav/nav.template.ts
+++ b/libs/components/src/lib/nav/nav.template.ts
@@ -15,7 +15,4 @@ import type { Nav } from './nav';
 export const NavTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
-) => ViewTemplate<Nav> = (
-) => html<Nav>`
-		<nav><slot></slot></nav>
-    `;
+) => ViewTemplate<Nav> = () => html<Nav>` <nav><slot></slot></nav> `;
diff --git a/libs/components/src/lib/nav/nav.ts b/libs/components/src/lib/nav/nav.ts
index 5dd9b60e90..509d8783ca 100644
--- a/libs/components/src/lib/nav/nav.ts
+++ b/libs/components/src/lib/nav/nav.ts
@@ -5,4 +5,4 @@ import { FoundationElement } from '@microsoft/fast-foundation';
  * @component nav
  * @slot - Default slot.
  */
-export class Nav extends FoundationElement { }
+export class Nav extends FoundationElement {}
diff --git a/libs/components/src/lib/note/index.ts b/libs/components/src/lib/note/index.ts
index 8230f4bf43..7da4df77e4 100644
--- a/libs/components/src/lib/note/index.ts
+++ b/libs/components/src/lib/note/index.ts
@@ -1,4 +1,3 @@
 import { registerNote } from './definition';
 
-
 registerNote();
diff --git a/libs/components/src/lib/note/note.spec.ts b/libs/components/src/lib/note/note.spec.ts
index 99daed9d6c..67d2dfd23a 100644
--- a/libs/components/src/lib/note/note.spec.ts
+++ b/libs/components/src/lib/note/note.spec.ts
@@ -24,19 +24,24 @@ describe('vwc-note', () => {
 	describe('headline', () => {
 		it('should render the headline when headline is set', async function () {
 			const headlineText = 'headline';
-			const headlineElementWhenNull = element.shadowRoot?.querySelector('.headline');
+			const headlineElementWhenNull =
+				element.shadowRoot?.querySelector('.headline');
 			element.headline = headlineText;
 			await elementUpdated(element);
 			expect(headlineElementWhenNull).toBeNull();
-			expect(element.shadowRoot?.querySelector('.headline')?.textContent?.trim()).toEqual(headlineText);
+			expect(
+				element.shadowRoot?.querySelector('.headline')?.textContent?.trim()
+			).toEqual(headlineText);
 		});
 	});
 
 	describe('icon', () => {
 		it('should have an icon slot', async () => {
-			expect(element.shadowRoot?.querySelector('slot[name="icon"]')).toBeTruthy();
+			expect(
+				element.shadowRoot?.querySelector('slot[name="icon"]')
+			).toBeTruthy();
 		});
-		
+
 		it('should render an icon when icon is set', async function () {
 			const icon = 'user-line';
 			element.setAttribute('icon', icon);
@@ -51,11 +56,15 @@ describe('vwc-note', () => {
 		it('should set connotation class on the base element', async function () {
 			const connotation = Connotation.Information;
 			const baseElement = element.shadowRoot?.querySelector('.base');
-			const connotationClassExistsWhenNull = baseElement?.classList?.contains(`connotation-${connotation}`);
+			const connotationClassExistsWhenNull = baseElement?.classList?.contains(
+				`connotation-${connotation}`
+			);
 			element.connotation = connotation;
 			await elementUpdated(element);
 			expect(connotationClassExistsWhenNull).toEqual(false);
-			expect(baseElement?.classList?.contains(`connotation-${connotation}`)).toEqual(true);
+			expect(
+				baseElement?.classList?.contains(`connotation-${connotation}`)
+			).toEqual(true);
 		});
 	});
 
diff --git a/libs/components/src/lib/note/note.template.ts b/libs/components/src/lib/note/note.template.ts
index 2375af3645..56ce1146b4 100644
--- a/libs/components/src/lib/note/note.template.ts
+++ b/libs/components/src/lib/note/note.template.ts
@@ -1,24 +1,24 @@
-import {html, when} from '@microsoft/fast-element';
+import { html, when } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type {
 	ElementDefinitionContext,
 	FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import type { Note } from './note';
 
-
-const getClasses = ({ connotation }: Note) => classNames(
-	'base',
-	`connotation-${connotation}`
-);
+const getClasses = ({ connotation }: Note) =>
+	classNames('base', `connotation-${connotation}`);
 
 /**
  *
  */
 function getHeaderTemplate() {
-	return html<Note>`<div class="headline">${x => x.headline}</div>`;
+	return html<Note>`<div class="headline">${(x) => x.headline}</div>`;
 }
 
 /**
@@ -34,12 +34,12 @@ export const NoteTemplate: (
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
 	return html`
-    <div class="${getClasses}">
-			${x => affixIconTemplate(x.icon, IconWrapper.Slot)}
+		<div class="${getClasses}">
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
 			<div class="text">
-	        ${when(x => x.headline, getHeaderTemplate())}
-			    <slot class="message"></slot>
+				${when((x) => x.headline, getHeaderTemplate())}
+				<slot class="message"></slot>
 			</div>
-    </div>
-`;
+		</div>
+	`;
 };
diff --git a/libs/components/src/lib/note/note.ts b/libs/components/src/lib/note/note.ts
index f532ca4725..f94a79ff3d 100644
--- a/libs/components/src/lib/note/note.ts
+++ b/libs/components/src/lib/note/note.ts
@@ -4,11 +4,11 @@ import type { Connotation } from '../enums';
 import { AffixIcon } from '../../shared/patterns';
 
 export type NoteConnotation =
-	Connotation.Accent |
-	Connotation.Information |
-	Connotation.Success |
-	Connotation.Warning |
-	Connotation.Alert;
+	| Connotation.Accent
+	| Connotation.Information
+	| Connotation.Success
+	| Connotation.Warning
+	| Connotation.Alert;
 /**
  * @public
  * @component note
@@ -27,5 +27,5 @@ export class Note extends FoundationElement {
 	@attr connotation?: NoteConnotation;
 }
 
-export interface Note extends AffixIcon { }
+export interface Note extends AffixIcon {}
 applyMixins(Note, AffixIcon);
diff --git a/libs/components/src/lib/number-field/definition.ts b/libs/components/src/lib/number-field/definition.ts
index a70a6e00bc..505e64b74a 100644
--- a/libs/components/src/lib/number-field/definition.ts
+++ b/libs/components/src/lib/number-field/definition.ts
@@ -21,7 +21,11 @@ export const numberFieldDefinition =
 		},
 	});
 
-export const numberFieldRegistries = [numberFieldDefinition(), ...buttonRegistries, ...dividerRegistries];
+export const numberFieldRegistries = [
+	numberFieldDefinition(),
+	...buttonRegistries,
+	...dividerRegistries,
+];
 
 /**
  * Registers the number-field elements with the design system.
diff --git a/libs/components/src/lib/number-field/index.ts b/libs/components/src/lib/number-field/index.ts
index 62e9ca3243..342adb0423 100644
--- a/libs/components/src/lib/number-field/index.ts
+++ b/libs/components/src/lib/number-field/index.ts
@@ -1,4 +1,3 @@
 import { registerNumberField } from './definition';
 
-
 registerNumberField();
diff --git a/libs/components/src/lib/number-field/locale.ts b/libs/components/src/lib/number-field/locale.ts
index aa4d6e3d5f..ffd76c5ccf 100644
--- a/libs/components/src/lib/number-field/locale.ts
+++ b/libs/components/src/lib/number-field/locale.ts
@@ -1,4 +1,4 @@
 export interface NumberFieldLocale {
 	incrementButtonLabel: string;
 	decrementButtonLabel: string;
-}
\ No newline at end of file
+}
diff --git a/libs/components/src/lib/number-field/number-field.spec.ts b/libs/components/src/lib/number-field/number-field.spec.ts
index 4d6b303a83..7d25ca5f8b 100644
--- a/libs/components/src/lib/number-field/number-field.spec.ts
+++ b/libs/components/src/lib/number-field/number-field.spec.ts
@@ -2,12 +2,13 @@ import {
 	axe,
 	createFormHTML,
 	elementUpdated,
-	fixture, getBaseElement,
+	fixture,
+	getBaseElement,
 	getControlElement,
-	listenToFormSubmission
+	listenToFormSubmission,
 } from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
-import {Shape} from '../enums';
+import { Shape } from '../enums';
 import { NumberField } from './number-field';
 import { numberFieldDefinition } from './definition';
 import '.';
@@ -19,7 +20,6 @@ function getRootElement(element: NumberField) {
 }
 
 describe('vwc-number-field', () => {
-
 	function setToBlurred() {
 		element.dispatchEvent(new Event('blur'));
 	}
@@ -29,7 +29,7 @@ describe('vwc-number-field', () => {
 	}
 
 	function setValidityToError(errorMessage = 'error') {
-		element.setValidity({badInput: true}, errorMessage);
+		element.setValidity({ badInput: true }, errorMessage);
 		element.validate();
 	}
 
@@ -56,33 +56,26 @@ describe('vwc-number-field', () => {
 			element.label = labelText;
 			await elementUpdated(element);
 			const labelElement = element.shadowRoot?.querySelector('label');
-			expect(labelElement)
-				.toBeTruthy();
-			expect(labelElement?.textContent?.trim())
-				.toEqual(labelText);
+			expect(labelElement).toBeTruthy();
+			expect(labelElement?.textContent?.trim()).toEqual(labelText);
 		});
 
 		it('should show label only if label is set', async function () {
 			const labelElement = element.shadowRoot?.querySelector('label');
-			expect(labelElement)
-				.toBeNull();
+			expect(labelElement).toBeNull();
 		});
 	});
 
 	describe('readOnly', function () {
 		it('should add class readonly to host', async function () {
-			const readonlyClassWhenFalse = getRootElement(element)
-				.classList
-				.contains('readonly');
+			const readonlyClassWhenFalse =
+				getRootElement(element).classList.contains('readonly');
 			element.readOnly = true;
 			await elementUpdated(element);
-			const readonlyClassWhenTrue = getRootElement(element)
-				.classList
-				.contains('readonly');
-			expect(readonlyClassWhenFalse)
-				.toEqual(false);
-			expect(readonlyClassWhenTrue)
-				.toEqual(true);
+			const readonlyClassWhenTrue =
+				getRootElement(element).classList.contains('readonly');
+			expect(readonlyClassWhenFalse).toEqual(false);
+			expect(readonlyClassWhenTrue).toEqual(true);
 		});
 	});
 
@@ -90,30 +83,28 @@ describe('vwc-number-field', () => {
 		it('should set autofocus on the input element', async function () {
 			element.autofocus = true;
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('input')
-				?.hasAttribute('autofocus'))
-				.toEqual(true);
+			expect(
+				element.shadowRoot?.querySelector('input')?.hasAttribute('autofocus')
+			).toEqual(true);
 		});
 	});
 
 	describe('placeholder', function () {
 		const placeholderText = 'Text';
 		it('should set placeholder attribute on the input', async function () {
-
 			element.placeholder = placeholderText;
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('input')
-				?.getAttribute('placeholder'))
-				.toEqual(placeholderText);
+			expect(
+				element.shadowRoot?.querySelector('input')?.getAttribute('placeholder')
+			).toEqual(placeholderText);
 		});
 
 		it('should set class placeholder to root', async function () {
 			element.placeholder = placeholderText;
 			await elementUpdated(element);
-			expect(getRootElement(element)
-				.classList
-				.contains('placeholder'))
-				.toEqual(true);
+			expect(getRootElement(element).classList.contains('placeholder')).toEqual(
+				true
+			);
 		});
 	});
 
@@ -123,9 +114,9 @@ describe('vwc-number-field', () => {
 		it('should set list attribute on the input', async function () {
 			element.list = dataListID;
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('input')
-				?.getAttribute('list'))
-				.toEqual(dataListID);
+			expect(
+				element.shadowRoot?.querySelector('input')?.getAttribute('list')
+			).toEqual(dataListID);
 		});
 	});
 
@@ -135,17 +126,15 @@ describe('vwc-number-field', () => {
 		it('should set step attribute on the input', async function () {
 			(element as any)[propertyName] = value;
 			await elementUpdated(element);
-			expect(getControlElement(element)
-				?.getAttribute(propertyName))
-				.toEqual(value);
+			expect(getControlElement(element)?.getAttribute(propertyName)).toEqual(
+				value
+			);
 		});
 
 		it('should not set step attribute on the input if not provided', async function () {
 			(element as any)[propertyName] = '';
 			await elementUpdated(element);
-			expect(getControlElement(element)
-				?.getAttribute(propertyName))
-				.toBe(null);
+			expect(getControlElement(element)?.getAttribute(propertyName)).toBe(null);
 		});
 	});
 
@@ -154,18 +143,17 @@ describe('vwc-number-field', () => {
 		const propertyName = 'max';
 		const proxyPropertyName = 'max';
 
-		it('should set proxy\'s step to empty if invalid value', function () {
+		it("should set proxy's step to empty if invalid value", function () {
 			element.setAttribute('step', 'invalid');
 			expect(element.proxy.step).toEqual('');
 		});
 
 		it('should set max attribute on the input', async function () {
-
 			(element as any)[propertyName] = value;
 			await elementUpdated(element);
-			expect(getControlElement(element)
-				?.getAttribute(propertyName))
-				.toEqual(value.toString());
+			expect(getControlElement(element)?.getAttribute(propertyName)).toEqual(
+				value.toString()
+			);
 		});
 
 		it('should set value to max if set to larger value', async function () {
@@ -173,8 +161,7 @@ describe('vwc-number-field', () => {
 			element.value = (value + 1).toString();
 			await elementUpdated(element);
 			const controlElement = getControlElement(element) as HTMLInputElement;
-			expect(controlElement[proxyPropertyName])
-				.toEqual(value.toString());
+			expect(controlElement[proxyPropertyName]).toEqual(value.toString());
 		});
 	});
 
@@ -184,12 +171,11 @@ describe('vwc-number-field', () => {
 		const proxyPropertyName = 'min';
 
 		it('should set min attribute on the input', async function () {
-
 			(element as any)[propertyName] = value;
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('input')
-				?.getAttribute(propertyName))
-				.toEqual(value);
+			expect(
+				element.shadowRoot?.querySelector('input')?.getAttribute(propertyName)
+			).toEqual(value);
 		});
 
 		it('should set value to min if set to lower value', async function () {
@@ -197,8 +183,7 @@ describe('vwc-number-field', () => {
 			element.value = (Number(value) - 1).toString();
 			await elementUpdated(element);
 			const controlElement = getControlElement(element) as HTMLInputElement;
-			expect(controlElement[proxyPropertyName])
-				.toEqual(value);
+			expect(controlElement[proxyPropertyName]).toEqual(value);
 		});
 	});
 
@@ -221,118 +206,122 @@ describe('vwc-number-field', () => {
 		});
 
 		it('should attach to closest form', async function () {
-			const {form: formElement} = createFormHTML<NumberField>({
+			const { form: formElement } = createFormHTML<NumberField>({
 				componentTagName: COMPONENT_TAG_NAME,
 				fieldName,
 				fieldValue,
 				formId,
-				formWrapper
+				formWrapper,
 			});
 
 			const submitPromise = listenToFormSubmission(formElement);
 			formElement.requestSubmit();
 
 			(await submitPromise).forEach((formDataValue, formDataKey) => {
-				expect(formDataKey)
-					.toEqual(fieldName);
-				expect(formDataValue)
-					.toEqual(fieldValue.toString());
+				expect(formDataKey).toEqual(fieldName);
+				expect(formDataValue).toEqual(fieldValue.toString());
 			});
 		});
 
 		it('should attach to form when given form id', async function () {
-			const {otherForm} = createFormHTML<NumberField>(
-				{
-					fieldName, fieldValue, formId, otherFormId: 'otherFormId', componentTagName: COMPONENT_TAG_NAME, formWrapper
-				});
+			const { otherForm } = createFormHTML<NumberField>({
+				fieldName,
+				fieldValue,
+				formId,
+				otherFormId: 'otherFormId',
+				componentTagName: COMPONENT_TAG_NAME,
+				formWrapper,
+			});
 
 			const submitPromise = listenToFormSubmission(otherForm);
 			otherForm.requestSubmit();
 
 			(await submitPromise).forEach((formDataValue, formDataKey) => {
-				expect(formDataKey)
-					.toEqual(fieldName);
-				expect(formDataValue)
-					.toEqual(fieldValue);
+				expect(formDataKey).toEqual(fieldName);
+				expect(formDataValue).toEqual(fieldValue);
 			});
 		});
 
 		it('should reset the value of the custom element to default on form reset', async function () {
-			const {
-				form: formElement,
-				element
-			} = createFormHTML<NumberField>({
+			const { form: formElement, element } = createFormHTML<NumberField>({
 				fieldName,
 				fieldValue,
 				formId,
 				componentTagName: COMPONENT_TAG_NAME,
-				formWrapper
+				formWrapper,
 			});
 
 			element.value = '5';
 			formElement.reset();
 			await elementUpdated(element);
 
-			expect(element.value)
-				.toEqual(fieldValue.toString());
+			expect(element.value).toEqual(fieldValue.toString());
 		});
 	});
 
 	describe('events', function () {
 		it('should emit an input event', async function () {
-			const inputPromise = new Promise(res => element.addEventListener('input', () => res(true)));
-			const innerInput = element.shadowRoot?.querySelector('input') as HTMLInputElement;
-			innerInput.dispatchEvent(new InputEvent('input', {
-				bubbles: true,
-				composed: true
-			}));
-			expect(await inputPromise)
-				.toEqual(true);
+			const inputPromise = new Promise((res) =>
+				element.addEventListener('input', () => res(true))
+			);
+			const innerInput = element.shadowRoot?.querySelector(
+				'input'
+			) as HTMLInputElement;
+			innerInput.dispatchEvent(
+				new InputEvent('input', {
+					bubbles: true,
+					composed: true,
+				})
+			);
+			expect(await inputPromise).toEqual(true);
 		});
 
 		it('should emit a change event', async function () {
-			const inputPromise = new Promise(res => element.addEventListener('change', () => res(true)));
-			const innerInput = element.shadowRoot?.querySelector('input') as HTMLInputElement;
-			innerInput.dispatchEvent(new InputEvent('change', {
-				bubbles: true,
-				composed: true
-			}));
-			expect(await inputPromise)
-				.toEqual(true);
+			const inputPromise = new Promise((res) =>
+				element.addEventListener('change', () => res(true))
+			);
+			const innerInput = element.shadowRoot?.querySelector(
+				'input'
+			) as HTMLInputElement;
+			innerInput.dispatchEvent(
+				new InputEvent('change', {
+					bubbles: true,
+					composed: true,
+				})
+			);
+			expect(await inputPromise).toEqual(true);
 		});
 	});
 
 	describe('helper text', function () {
 		it('should render the helper text when attribute is set', async function () {
-			const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-message');
+			const helperTextElementWithoutText =
+				element.shadowRoot?.querySelector('.helper-message');
 			const helperText = 'Helper Text';
 			element.helperText = helperText;
 			await elementUpdated(element);
-			expect(helperTextElementWithoutText)
-				.toBeNull();
-			expect(element.shadowRoot?.querySelector('.helper-message')
-				?.textContent
-				?.trim())
-				.toEqual(helperText);
+			expect(helperTextElementWithoutText).toBeNull();
+			expect(
+				element.shadowRoot
+					?.querySelector('.helper-message')
+					?.textContent?.trim()
+			).toEqual(helperText);
 		});
 	});
 
 	describe('error message', function () {
-
 		it('should add class error to base if not valid', async function () {
 			element.dirtyValue = true;
 			setToBlurred();
 			setValidityToError('blah');
 			await elementUpdated(element);
 
-			expect(getRootElement(element)
-				.classList
-				.contains('error'))
-				.toEqual(true);
+			expect(getRootElement(element).classList.contains('error')).toEqual(true);
 		});
 
 		it('should render the error message when not valid', async function () {
-			const errorElementWithoutText = element.shadowRoot?.querySelector('.error-message');
+			const errorElementWithoutText =
+				element.shadowRoot?.querySelector('.error-message');
 			const errorMessage = 'Error Text';
 
 			element.dirtyValue = true;
@@ -340,15 +329,13 @@ describe('vwc-number-field', () => {
 			setValidityToError(errorMessage);
 			await elementUpdated(element);
 
-			expect(errorElementWithoutText)
-				.toBeNull();
-			expect(element.shadowRoot?.querySelector('.error-message')
-				?.textContent
-				?.trim())
-				.toEqual(errorMessage);
+			expect(errorElementWithoutText).toBeNull();
+			expect(
+				element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()
+			).toEqual(errorMessage);
 		});
 
-		it('should render the error message only after a blur', async function() {
+		it('should render the error message only after a blur', async function () {
 			const errorMessage = 'Error Text';
 			element.dirtyValue = true;
 			setValidityToError(errorMessage);
@@ -362,15 +349,13 @@ describe('vwc-number-field', () => {
 			setToBlurred();
 			setValidityToError();
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.helper-text'))
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.helper-text')).toBeNull();
 		});
 
 		it('should set error message to empty string when pristine', async function () {
 			setValidityToError();
 			await elementUpdated(element);
-			expect(element.errorValidationMessage)
-				.toEqual('');
+			expect(element.errorValidationMessage).toEqual('');
 		});
 
 		it('should validate after a blur', async function () {
@@ -379,11 +364,12 @@ describe('vwc-number-field', () => {
 			setValidityToError(errorMessage);
 			setToBlurred();
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.error-message')?.
-				textContent?.trim()).toEqual(errorMessage);
+			expect(
+				element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()
+			).toEqual(errorMessage);
 		});
 
-		it('should update error message when blurred', async function() {
+		it('should update error message when blurred', async function () {
 			setToBlurred();
 			const errorMessage = 'Error Text';
 			const errorMessageTwo = 'Error Text 2';
@@ -394,11 +380,12 @@ describe('vwc-number-field', () => {
 			setValidityToError(errorMessageTwo);
 			await elementUpdated(element);
 
-			expect(element.shadowRoot?.querySelector('.error-message')?.
-				textContent?.trim()).toEqual(errorMessageTwo);
+			expect(
+				element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()
+			).toEqual(errorMessageTwo);
 		});
 
-		it('should change the error message only when already not valid', async function() {
+		it('should change the error message only when already not valid', async function () {
 			setToBlurred();
 			setToFocused();
 			const errorMessage = 'Error Text';
@@ -415,18 +402,16 @@ describe('vwc-number-field', () => {
 			element.successText = 'success';
 			await elementUpdated(element);
 
-			expect(getBaseElement(element)
-				.classList
-				.contains('success'))
-				.toEqual(true);
+			expect(getBaseElement(element).classList.contains('success')).toEqual(
+				true
+			);
 		});
 
 		it('should not show helper text when success is shown', async function () {
 			element.helperText = 'help';
 			element.successText = 'success';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.helper-text'))
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.helper-text')).toBeNull();
 		});
 
 		it('should not show error message when success is shown', async function () {
@@ -435,31 +420,30 @@ describe('vwc-number-field', () => {
 			setValidityToError('blah');
 			element.successText = 'success';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.error-message'))
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.error-message')).toBeNull();
 		});
 
-		it('should show success message if set', async function() {
+		it('should show success message if set', async function () {
 			element.successText = 'success';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.success-message')?.textContent?.trim()).toEqual('success');
+			expect(
+				element.shadowRoot
+					?.querySelector('.success-message')
+					?.textContent?.trim()
+			).toEqual('success');
 		});
 	});
 
 	describe('disabled', function () {
 		it('should set disabled class when attribute is set', async function () {
-			const disabledClassWhenEnabled = getRootElement(element)
-				.classList
-				.contains('disabled');
+			const disabledClassWhenEnabled =
+				getRootElement(element).classList.contains('disabled');
 			element.disabled = true;
 			await elementUpdated(element);
-			const disabledClassWhenDisabled = getRootElement(element)
-				.classList
-				.contains('disabled');
-			expect(disabledClassWhenEnabled)
-				.toEqual(false);
-			expect(disabledClassWhenDisabled)
-				.toEqual(true);
+			const disabledClassWhenDisabled =
+				getRootElement(element).classList.contains('disabled');
+			expect(disabledClassWhenEnabled).toEqual(false);
+			expect(disabledClassWhenDisabled).toEqual(true);
 		});
 	});
 
@@ -468,19 +452,15 @@ describe('vwc-number-field', () => {
 		element.control.dispatchEvent(new Event('input'));
 	}
 	describe('value', function () {
-		it('should set \'has-value\' class when there is a value', async function () {
-			const activeClassWhenEnabled = getRootElement(element)
-				.classList
-				.contains('has-value');
+		it("should set 'has-value' class when there is a value", async function () {
+			const activeClassWhenEnabled =
+				getRootElement(element).classList.contains('has-value');
 			element.value = '5';
 			await elementUpdated(element);
-			const activeClassWhenDisabled = getRootElement(element)
-				.classList
-				.contains('has-value');
-			expect(activeClassWhenEnabled)
-				.toEqual(false);
-			expect(activeClassWhenDisabled)
-				.toEqual(true);
+			const activeClassWhenDisabled =
+				getRootElement(element).classList.contains('has-value');
+			expect(activeClassWhenEnabled).toEqual(false);
+			expect(activeClassWhenDisabled).toEqual(true);
 		});
 
 		it('should allow negative sign as first char when typing', async function () {
@@ -567,14 +547,14 @@ describe('vwc-number-field', () => {
 
 		it('should be invalid if value is not in max boundary', async function () {
 			element.max = 6;
-			element.valueAsNumber = 6+1;
+			element.valueAsNumber = 6 + 1;
 			await elementUpdated(element);
 			expect(element.checkValidity()).toBe(false);
 		});
 
 		it('should be invalid if value is not in min boundary', async function () {
 			element.min = 6;
-			element.valueAsNumber = 6-1;
+			element.valueAsNumber = 6 - 1;
 			await elementUpdated(element);
 			expect(element.checkValidity()).toBe(false);
 		});
@@ -584,7 +564,6 @@ describe('vwc-number-field', () => {
 			await elementUpdated(element);
 			expect(element.checkValidity()).toBe(false);
 		});
-
 	});
 
 	describe('appearance', function () {
@@ -593,10 +572,9 @@ describe('vwc-number-field', () => {
 			element.setAttribute('appearance', appearance);
 			await elementUpdated(element);
 
-			expect(getRootElement(element)
-				.classList
-				.contains('appearance-filled'))
-				.toEqual(true);
+			expect(
+				getRootElement(element).classList.contains('appearance-filled')
+			).toEqual(true);
 		});
 	});
 
@@ -606,27 +584,29 @@ describe('vwc-number-field', () => {
 			element.setAttribute('shape', shape);
 			await elementUpdated(element);
 
-			expect(getRootElement(element)
-				.classList
-				.contains('shape-pill'))
-				.toEqual(true);
+			expect(getRootElement(element).classList.contains('shape-pill')).toEqual(
+				true
+			);
 		});
 	});
 
 	describe('autocomplete', function () {
 		it('should set autocomplete on the internal input', async function () {
-			const internalInput = element.shadowRoot?.querySelector('input') as HTMLElement;
+			const internalInput = element.shadowRoot?.querySelector(
+				'input'
+			) as HTMLElement;
 			const autoCompleteDefault = internalInput.getAttribute('autocomplete');
 
 			element.autoComplete = 'off';
 			await elementUpdated(element);
 			expect(autoCompleteDefault).toBeNull();
 			expect(internalInput.getAttribute('autocomplete')).toEqual('off');
-
 		});
 
 		it('should reflect the name on the internal input', async function () {
-			const internalInput = element.shadowRoot?.querySelector('input') as HTMLElement;
+			const internalInput = element.shadowRoot?.querySelector(
+				'input'
+			) as HTMLElement;
 			element.name = 'off';
 			await elementUpdated(element);
 			expect(internalInput.getAttribute('name')).toEqual('off');
@@ -637,34 +617,44 @@ describe('vwc-number-field', () => {
 		let addButton: HTMLButtonElement, subtractButton: HTMLButtonElement;
 
 		beforeEach(function () {
-			addButton = getRootElement(element).querySelector('#add') as HTMLButtonElement;
-			subtractButton = getRootElement(element).querySelector('#subtract') as HTMLButtonElement;
+			addButton = getRootElement(element).querySelector(
+				'#add'
+			) as HTMLButtonElement;
+			subtractButton = getRootElement(element).querySelector(
+				'#subtract'
+			) as HTMLButtonElement;
 		});
 
 		it('should advance value by 1 as default', async function () {
 			element.value = '10';
 			addButton?.click();
 			await elementUpdated(element);
-			expect((getControlElement(element) as HTMLInputElement).value).toEqual('11');
+			expect((getControlElement(element) as HTMLInputElement).value).toEqual(
+				'11'
+			);
 		});
 
-		it('should increment by step when clicking the add button', async function() {
+		it('should increment by step when clicking the add button', async function () {
 			element.value = '10';
 			element.step = 5;
 			addButton?.click();
 			await elementUpdated(element);
-			expect((getControlElement(element) as HTMLInputElement).value).toEqual('15');
+			expect((getControlElement(element) as HTMLInputElement).value).toEqual(
+				'15'
+			);
 		});
 
-		it('should subtract by step when clicking the add button', async function() {
+		it('should subtract by step when clicking the add button', async function () {
 			element.value = '10';
 			element.step = 5;
 			subtractButton?.click();
 			await elementUpdated(element);
-			expect((getControlElement(element) as HTMLInputElement).value).toEqual('5');
+			expect((getControlElement(element) as HTMLInputElement).value).toEqual(
+				'5'
+			);
 		});
 
-		it('should have pill shape when numberField is pilled', async function() {
+		it('should have pill shape when numberField is pilled', async function () {
 			element.shape = Shape.Pill;
 			await elementUpdated(element);
 			expect(addButton.getAttribute('shape')).toEqual(Shape.Pill);
@@ -675,11 +665,10 @@ describe('vwc-number-field', () => {
 			element.value = '8';
 			await elementUpdated(element);
 			addButton.click();
-			expect(element.value)
-				.toEqual('9');
+			expect(element.value).toEqual('9');
 		});
 
-		it('should set inert in disabled and readonly', async function() {
+		it('should set inert in disabled and readonly', async function () {
 			function isButtonsWrapperInert() {
 				return addButton.parentElement?.hasAttribute('inert');
 			}
@@ -701,10 +690,12 @@ describe('vwc-number-field', () => {
 			expect(inertWhenDisabled).toEqual(true);
 		});
 
-		it('should set tabindex="-1" on the buttons', async function() {
+		it('should set tabindex="-1" on the buttons', async function () {
 			function isButtonsWrapperInert() {
-				return addButton.getAttribute('tabindex') === '-1' &&
-					subtractButton.getAttribute('tabindex') === '-1';
+				return (
+					addButton.getAttribute('tabindex') === '-1' &&
+					subtractButton.getAttribute('tabindex') === '-1'
+				);
 			}
 
 			const inertWhenActive = isButtonsWrapperInert();
@@ -726,7 +717,7 @@ describe('vwc-number-field', () => {
 		it('should increase decimals correctly', async function () {
 			element.step = 0.1;
 			await elementUpdated(element);
-			for (let i = 0.1; i <= 1; i+=0.1) {
+			for (let i = 0.1; i <= 1; i += 0.1) {
 				addButton.click();
 				expect(element.value).toEqual(Number(i.toFixed(12)).toString());
 			}
@@ -735,7 +726,7 @@ describe('vwc-number-field', () => {
 		it('should decrease decimals correctly', async function () {
 			element.step = 0.1;
 			await elementUpdated(element);
-			for (let i = -0.1; i >= -1; i-=0.1) {
+			for (let i = -0.1; i >= -1; i -= 0.1) {
 				subtractButton.click();
 				expect(element.value).toEqual(Number(i.toFixed(12)).toString());
 			}
@@ -743,7 +734,7 @@ describe('vwc-number-field', () => {
 	});
 
 	describe('minlength and maxlength', function () {
-		it('should revert to last valid length', async function() {
+		it('should revert to last valid length', async function () {
 			element.maxlength = 5;
 			element.minlength = 2;
 			await elementUpdated(element);
@@ -882,10 +873,7 @@ describe('vwc-number-field', () => {
 		it('should add the error class', async function () {
 			element.errorText = forcedErrorMessage;
 			await elementUpdated(element);
-			expect(getBaseElement(element)
-				.classList
-				.contains('error'))
-				.toEqual(true);
+			expect(getBaseElement(element).classList.contains('error')).toEqual(true);
 		});
 
 		it('should display the given error message', async function () {
@@ -908,7 +896,6 @@ describe('vwc-number-field', () => {
 			element.errorText = forcedErrorMessage;
 			await elementUpdated(element);
 
-
 			const errorTextMessage = element.validationMessage;
 
 			element.errorText = '';
@@ -951,7 +938,9 @@ describe('vwc-number-field', () => {
 					element.decrementButtonAriaLabel = 'Subtract label';
 					await elementUpdated(element);
 					const subtractButton = element.shadowRoot?.getElementById('subtract');
-					expect(subtractButton?.getAttribute('aria-label')).toBe('Subtract label');
+					expect(subtractButton?.getAttribute('aria-label')).toBe(
+						'Subtract label'
+					);
 				});
 			});
 		});
diff --git a/libs/components/src/lib/number-field/number-field.template.ts b/libs/components/src/lib/number-field/number-field.template.ts
index 96f9043d56..579a7bdda7 100644
--- a/libs/components/src/lib/number-field/number-field.template.ts
+++ b/libs/components/src/lib/number-field/number-field.template.ts
@@ -1,15 +1,15 @@
-import type {ViewTemplate} from '@microsoft/fast-element';
-import {html, ref, when} from '@microsoft/fast-element';
+import type { ViewTemplate } from '@microsoft/fast-element';
+import { html, ref, when } from '@microsoft/fast-element';
 import type {
 	ElementDefinitionContext,
 	FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
-import {classNames} from '@microsoft/fast-web-utilities';
-import {Shape} from '../enums';
-import {getFeedbackTemplate} from '../../shared/patterns';
-import {Button} from '../button/button';
-import {Divider} from '../divider/divider';
-import type {NumberField} from './number-field';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { Shape } from '../enums';
+import { getFeedbackTemplate } from '../../shared/patterns';
+import { Button } from '../button/button';
+import { Divider } from '../divider/divider';
+import type { NumberField } from './number-field';
 
 const getStateClasses = ({
 	errorValidationMessage,
@@ -20,24 +20,24 @@ const getStateClasses = ({
 	appearance,
 	shape,
 	label,
-	successText
-}: NumberField) => classNames(
-	['error', Boolean(errorValidationMessage)],
-	['disabled', disabled],
-	['has-value', Boolean(value)],
-	['readonly', readOnly],
-	['placeholder', Boolean(placeholder)],
-	[`appearance-${appearance}`, Boolean(appearance)],
-	[`shape-${shape}`, Boolean(shape)],
-	['no-label', !label],
-	['success', !!successText]
-);
+	successText,
+}: NumberField) =>
+	classNames(
+		['error', Boolean(errorValidationMessage)],
+		['disabled', disabled],
+		['has-value', Boolean(value)],
+		['readonly', readOnly],
+		['placeholder', Boolean(placeholder)],
+		[`appearance-${appearance}`, Boolean(appearance)],
+		[`shape-${shape}`, Boolean(shape)],
+		['no-label', !label],
+		['success', !!successText]
+	);
 
 function renderLabel() {
-	return html<NumberField>`
-	  <label for="control" class="label">
-		  ${x => x.label}
-	  </label>`;
+	return html<NumberField>` <label for="control" class="label">
+		${(x) => x.label}
+	</label>`;
 }
 
 function setControlButtonShape(numberField: NumberField) {
@@ -45,7 +45,7 @@ function setControlButtonShape(numberField: NumberField) {
 }
 
 function getTabIndex(numberField: NumberField) {
-	return (numberField.disabled || numberField.readOnly) ? '-1' : null;
+	return numberField.disabled || numberField.readOnly ? '-1' : null;
 }
 
 /**
@@ -57,22 +57,26 @@ function numberControlButtons(context: ElementDefinitionContext) {
 
 	return html<NumberField>`
 			<div class="control-buttons"
-			     ?inert="${x => x.disabled || x.readOnly}">
+			     ?inert="${(x) => x.disabled || x.readOnly}">
 				<${buttonTag} id="subtract" icon="minus-line"
-								aria-label=${x => x.decrementButtonAriaLabel || x.locale.numberField.decrementButtonLabel}
-					            shape="${ setControlButtonShape }"
+								aria-label=${(x) =>
+									x.decrementButtonAriaLabel ||
+									x.locale.numberField.decrementButtonLabel}
+					            shape="${setControlButtonShape}"
 								type="button"
 					            size="condensed"
 					  					tabindex="${getTabIndex}"
-					            @click="${x => x.stepDown()}"></${buttonTag}>
+					            @click="${(x) => x.stepDown()}"></${buttonTag}>
 				<${dividerTag} class="divider" orientation="vertical"></${dividerTag}>
 				<${buttonTag} id="add" icon="plus-line"
-								aria-label=${x => x.incrementButtonAriaLabel || x.locale.numberField.incrementButtonLabel}
-					            shape="${ setControlButtonShape }"
+								aria-label=${(x) =>
+									x.incrementButtonAriaLabel ||
+									x.locale.numberField.incrementButtonLabel}
+					            shape="${setControlButtonShape}"
 								type="button"
 					            size="condensed"
 					  					tabindex="${getTabIndex}"
-					            @click="${x => x.stepUp()}"></${buttonTag}>
+					            @click="${(x) => x.stepUp()}"></${buttonTag}>
 		    </div>
 	`;
 }
@@ -87,55 +91,62 @@ export const NumberFieldTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
 ) => ViewTemplate<NumberField> = (context) => {
-
 	return html<NumberField>`
-	<div class="base ${getStateClasses}">
-    ${when(x => x.label, renderLabel())}
-    <div class="fieldset">
-			<div class="wrapper">
-				<input class="control"
-							 id="control"
-							 @input="${x => x.handleTextInput()}"
-							 @change="${x => x.handleChange()}"
-							 ?autofocus="${x => x.autofocus}"
-							 ?disabled="${x => x.disabled}"
-							 list="${x => x.list}"
-							 step="${x => x.step ? x.step : null}"
-							 max="${x => x.max}"
-							 min="${x => x.min}"
-							 maxlength="${x => x.maxlength}"
-							 minlength="${x => x.minlength}"
-							 placeholder="${x => x.placeholder}"
-							 ?readonly="${x => x.readOnly}"
-							 ?required="${x => x.required}"
-							 size="${x => x.size}"
-							 autocomplete="${x => x.autoComplete}"
-							 name="${x => x.name}"
-							 ?spellcheck="${x => x.spellcheck}"
-							 :value="${x => x.value}"
-							 type="text"
-							 aria-atomic="${x => x.ariaAtomic}"
-							 aria-busy="${x => x.ariaBusy}"
-							 aria-current="${x => x.ariaCurrent}"
-							 aria-details="${x => x.ariaDetails}"
-							 aria-disabled="${x => x.ariaDisabled}"
-							 aria-errormessage="${x => x.ariaErrormessage}"
-							 aria-haspopup="${x => x.ariaHaspopup}"
-							 aria-hidden="${x => x.ariaHidden}"
-							 aria-invalid="${x => x.ariaInvalid}"
-							 aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-							 aria-label="${x => x.ariaLabel}"
-							 aria-live="${x => x.ariaLive}"
-							 aria-relevant="${x => x.ariaRelevant}"
-							 aria-roledescription="${x => x.ariaRoledescription}"
-							 ${ref('control')}
-				/>
+		<div class="base ${getStateClasses}">
+			${when((x) => x.label, renderLabel())}
+			<div class="fieldset">
+				<div class="wrapper">
+					<input
+						class="control"
+						id="control"
+						@input="${(x) => x.handleTextInput()}"
+						@change="${(x) => x.handleChange()}"
+						?autofocus="${(x) => x.autofocus}"
+						?disabled="${(x) => x.disabled}"
+						list="${(x) => x.list}"
+						step="${(x) => (x.step ? x.step : null)}"
+						max="${(x) => x.max}"
+						min="${(x) => x.min}"
+						maxlength="${(x) => x.maxlength}"
+						minlength="${(x) => x.minlength}"
+						placeholder="${(x) => x.placeholder}"
+						?readonly="${(x) => x.readOnly}"
+						?required="${(x) => x.required}"
+						size="${(x) => x.size}"
+						autocomplete="${(x) => x.autoComplete}"
+						name="${(x) => x.name}"
+						?spellcheck="${(x) => x.spellcheck}"
+						:value="${(x) => x.value}"
+						type="text"
+						aria-atomic="${(x) => x.ariaAtomic}"
+						aria-busy="${(x) => x.ariaBusy}"
+						aria-current="${(x) => x.ariaCurrent}"
+						aria-details="${(x) => x.ariaDetails}"
+						aria-disabled="${(x) => x.ariaDisabled}"
+						aria-errormessage="${(x) => x.ariaErrormessage}"
+						aria-haspopup="${(x) => x.ariaHaspopup}"
+						aria-hidden="${(x) => x.ariaHidden}"
+						aria-invalid="${(x) => x.ariaInvalid}"
+						aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+						aria-label="${(x) => x.ariaLabel}"
+						aria-live="${(x) => x.ariaLive}"
+						aria-relevant="${(x) => x.ariaRelevant}"
+						aria-roledescription="${(x) => x.ariaRoledescription}"
+						${ref('control')}
+					/>
+				</div>
+				${() => numberControlButtons(context)}
 			</div>
-			${() => numberControlButtons(context)}
-    </div>
-	  ${when(x => !x.successText && !x.errorValidationMessage && x.helperText?.length, getFeedbackTemplate('helper', context))}
-	  ${when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context))}
-	  ${when(x => x.successText, getFeedbackTemplate('success', context))}
-	</div>
-`;
+			${when(
+				(x) =>
+					!x.successText && !x.errorValidationMessage && x.helperText?.length,
+				getFeedbackTemplate('helper', context)
+			)}
+			${when(
+				(x) => !x.successText && x.errorValidationMessage,
+				getFeedbackTemplate('error', context)
+			)}
+			${when((x) => x.successText, getFeedbackTemplate('success', context))}
+		</div>
+	`;
 };
diff --git a/libs/components/src/lib/number-field/number-field.ts b/libs/components/src/lib/number-field/number-field.ts
index 09d291eb1f..5052a0134e 100644
--- a/libs/components/src/lib/number-field/number-field.ts
+++ b/libs/components/src/lib/number-field/number-field.ts
@@ -1,6 +1,9 @@
-import {applyMixins, NumberField as FastNumberField} from '@microsoft/fast-foundation';
-import {attr} from '@microsoft/fast-element';
-import type {Appearance, Shape} from '../enums';
+import {
+	applyMixins,
+	NumberField as FastNumberField,
+} from '@microsoft/fast-foundation';
+import { attr } from '@microsoft/fast-element';
+import type { Appearance, Shape } from '../enums';
 import {
 	type ErrorText,
 	errorText,
@@ -11,31 +14,34 @@ import {
 	FormElementSuccessText,
 	Localized,
 } from '../../shared/patterns';
-import {AffixIcon} from '../../shared/patterns';
+import { AffixIcon } from '../../shared/patterns';
 
-export type NumberFieldAppearance = Extract<Appearance, Appearance.Fieldset | Appearance.Ghost>;
+export type NumberFieldAppearance = Extract<
+	Appearance,
+	Appearance.Fieldset | Appearance.Ghost
+>;
 export type NumberFieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
 
 const STEP_DIRECTION = {
 	up: 1,
-	down: -1
+	down: -1,
 };
 
 const PROXY_REFLECTED_ATTRIBUTES = {
 	max: true,
-	min: true
+	min: true,
 };
 function makeStep(element: NumberField, direction: number) {
 	const value = parseFloat(element.value);
 	const stepUpValue = !isNaN(value)
 		? value + direction * element.step
 		: element.min > 0
-			? element.min
-			: element.max < 0
-				? element.max
-				: !element.min
-					? direction * element.step
-					: 0;
+		? element.min
+		: element.max < 0
+		? element.max
+		: !element.min
+		? direction * element.step
+		: 0;
 
 	element.value = Number(stepUpValue.toFixed(12)).toString();
 }
@@ -47,17 +53,28 @@ function makeStep(element: NumberField, direction: number) {
 @errorText
 @formElements
 export class NumberField extends FastNumberField {
-	@attr({attribute: 'increment-button-aria-label'}) incrementButtonAriaLabel: string | null = null;
-	@attr({attribute: 'decrement-button-aria-label'}) decrementButtonAriaLabel: string | null = null;
+	@attr({ attribute: 'increment-button-aria-label' }) incrementButtonAriaLabel:
+		| string
+		| null = null;
+	@attr({ attribute: 'decrement-button-aria-label' }) decrementButtonAriaLabel:
+		| string
+		| null = null;
 	@attr appearance?: NumberFieldAppearance;
 	@attr shape?: NumberFieldShape;
 	@attr autoComplete?: string;
 
 	stepChanged(_previous: number, next: number) {
-		this.proxy.setAttribute('step', Number.isFinite(next) ? next.toString() : '');
+		this.proxy.setAttribute(
+			'step',
+			Number.isFinite(next) ? next.toString() : ''
+		);
 	}
 
-	override attributeChangedCallback(name:string, previous: string, next:string) {
+	override attributeChangedCallback(
+		name: string,
+		previous: string,
+		next: string
+	) {
 		super.attributeChangedCallback(name, previous, next);
 		if ((<any>PROXY_REFLECTED_ATTRIBUTES)[name]) {
 			this.proxy.setAttribute(name, next);
@@ -100,11 +117,19 @@ numberInput.type = 'number';
 	return numberInput.value + valueSuffix;
 };
 
-export interface NumberField extends AffixIcon,
-	ErrorText,
-	FormElement,
+export interface NumberField
+	extends AffixIcon,
+		ErrorText,
+		FormElement,
+		FormElementCharCount,
+		FormElementHelperText,
+		FormElementSuccessText,
+		Localized {}
+applyMixins(
+	NumberField,
+	Localized,
+	AffixIcon,
 	FormElementCharCount,
 	FormElementHelperText,
-	FormElementSuccessText,
-	Localized {}
-applyMixins(NumberField, Localized, AffixIcon, FormElementCharCount, FormElementHelperText, FormElementSuccessText);
+	FormElementSuccessText
+);
diff --git a/libs/components/src/lib/option/definition.ts b/libs/components/src/lib/option/definition.ts
index f2c7192833..f334370d84 100644
--- a/libs/components/src/lib/option/definition.ts
+++ b/libs/components/src/lib/option/definition.ts
@@ -8,16 +8,20 @@ import styles from './option.scss?inline';
 /**
  * The listbox-option element.
  */
-export const listboxOptionDefinition = ListboxOption.compose<FoundationElementDefinition>({
-	baseName: 'option',
-	template: template as any,
-	styles
-});
+export const listboxOptionDefinition =
+	ListboxOption.compose<FoundationElementDefinition>({
+		baseName: 'option',
+		template: template as any,
+		styles,
+	});
 
 /**
  * @internal
  */
-export const listboxOptionRegistries = [listboxOptionDefinition(), ...iconRegistries];
+export const listboxOptionRegistries = [
+	listboxOptionDefinition(),
+	...iconRegistries,
+];
 
 /**
  * Registers the listbox-option elements with the design system.
diff --git a/libs/components/src/lib/option/index.ts b/libs/components/src/lib/option/index.ts
index 37ab9beb24..11da431385 100644
--- a/libs/components/src/lib/option/index.ts
+++ b/libs/components/src/lib/option/index.ts
@@ -1,4 +1,3 @@
 import { registerOption } from './definition';
 
-
 registerOption();
diff --git a/libs/components/src/lib/option/option.spec.ts b/libs/components/src/lib/option/option.spec.ts
index ea840668a2..9f602c6719 100644
--- a/libs/components/src/lib/option/option.spec.ts
+++ b/libs/components/src/lib/option/option.spec.ts
@@ -19,7 +19,9 @@ describe('vwc-option', () => {
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-option', async () => {
-			expect(listboxOptionDefinition()).toBeInstanceOf(FoundationElementRegistry);
+			expect(listboxOptionDefinition()).toBeInstanceOf(
+				FoundationElementRegistry
+			);
 			expect(element).toBeInstanceOf(ListboxOption);
 			expect(element.text).toEqual('');
 			expect(element.value).toEqual('');
@@ -33,7 +35,9 @@ describe('vwc-option', () => {
 
 	describe('icon', () => {
 		it('should have an icon slot', async () => {
-			expect(Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))).toEqual(true);
+			expect(
+				Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))
+			).toEqual(true);
 		});
 
 		it('should have an icon when icon is set without slotted icon', async () => {
@@ -41,10 +45,8 @@ describe('vwc-option', () => {
 			await elementUpdated(element);
 
 			const icon = element.shadowRoot?.querySelector(ICON_SELECTOR) as Icon;
-			expect(icon)
-				.toBeInstanceOf(Icon);
-			expect(icon?.name)
-				.toEqual('home');
+			expect(icon).toBeInstanceOf(Icon);
+			expect(icon?.name).toEqual('home');
 		});
 	});
 
@@ -79,7 +81,6 @@ describe('vwc-option', () => {
 	});
 
 	describe('label', function () {
-
 		it('should reflect the label to an attribute', async function () {
 			const label = 'label';
 			element.label = label;
@@ -87,14 +88,14 @@ describe('vwc-option', () => {
 			expect(element.getAttribute('label')).toEqual(label);
 		});
 
-		it('should return the options\'s text when label attribute and value are not provided', async function () {
+		it("should return the options's text when label attribute and value are not provided", async function () {
 			const text = 'text';
 			element.text = text;
 
 			expect(element.label).toEqual(text);
 		});
 
-		it('should return the options\'s text when label attribute is not provided and value is', async function () {
+		it("should return the options's text when label attribute is not provided and value is", async function () {
 			const value = 'value';
 			const text = 'text';
 			element.value = value;
@@ -103,7 +104,7 @@ describe('vwc-option', () => {
 			expect(element.label).toEqual(text);
 		});
 
-		it('should return the options\'s label instead of the text', async function () {
+		it("should return the options's label instead of the text", async function () {
 			const label = 'label';
 			element.text = 'text';
 			element.value = 'value';
diff --git a/libs/components/src/lib/option/option.template.ts b/libs/components/src/lib/option/option.template.ts
index 12877c2216..b4d5728adf 100644
--- a/libs/components/src/lib/option/option.template.ts
+++ b/libs/components/src/lib/option/option.template.ts
@@ -5,18 +5,20 @@ import type {
 	FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import type { ListboxOption } from './option';
 
-const getClasses = ({
-	icon, disabled, selected, checked
-}: ListboxOption) => classNames(
-	'base',
-	['disabled', disabled],
-	['selected', Boolean(selected)],
-	['active', Boolean(checked)],
-	['icon', Boolean(icon)],
-);
+const getClasses = ({ icon, disabled, selected, checked }: ListboxOption) =>
+	classNames(
+		'base',
+		['disabled', disabled],
+		['selected', Boolean(selected)],
+		['active', Boolean(checked)],
+		['icon', Boolean(icon)]
+	);
 
 export const ListboxOptionTemplate: (
 	context: ElementDefinitionContext,
@@ -25,17 +27,18 @@ export const ListboxOptionTemplate: (
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
 	return html`
-	<template
-		aria-checked="${x => x.ariaChecked}"
-		aria-disabled="${x => x.ariaDisabled}"
-		aria-posinset="${x => x.ariaPosInSet}"
-		aria-selected="${x => x.ariaSelected}"
-		aria-setsize="${x => x.ariaSetSize}"
-		role="option">
-		<div class="${getClasses}">
-			${x => affixIconTemplate(x.icon, IconWrapper.Slot)}
-			${when(x => x.text, html`<div class="text">${x => x.text}</div>`)}
-		</div>
-	</template>
+		<template
+			aria-checked="${(x) => x.ariaChecked}"
+			aria-disabled="${(x) => x.ariaDisabled}"
+			aria-posinset="${(x) => x.ariaPosInSet}"
+			aria-selected="${(x) => x.ariaSelected}"
+			aria-setsize="${(x) => x.ariaSetSize}"
+			role="option"
+		>
+			<div class="${getClasses}">
+				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+				${when((x) => x.text, html`<div class="text">${(x) => x.text}</div>`)}
+			</div>
+		</template>
 	`;
 };
diff --git a/libs/components/src/lib/option/option.ts b/libs/components/src/lib/option/option.ts
index 7bf7b9af7e..9e1bed03c5 100644
--- a/libs/components/src/lib/option/option.ts
+++ b/libs/components/src/lib/option/option.ts
@@ -1,8 +1,10 @@
-import { applyMixins, ListboxOption as FoundationListboxOption } from '@microsoft/fast-foundation';
+import {
+	applyMixins,
+	ListboxOption as FoundationListboxOption,
+} from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 
-
 /**
  * @public
  * @component option
@@ -17,7 +19,8 @@ export class ListboxOption extends FoundationListboxOption {
 	 */
 	@attr({
 		attribute: 'text',
-	}) _text?: string;
+	})
+	_text?: string;
 
 	// #region overrides base class accessor
 	override set text(value) {
@@ -30,7 +33,8 @@ export class ListboxOption extends FoundationListboxOption {
 
 	@attr({
 		attribute: 'label',
-	}) _label?: string;
+	})
+	_label?: string;
 	override get label(): string {
 		return this._label ?? this.text;
 	}
@@ -40,5 +44,5 @@ export class ListboxOption extends FoundationListboxOption {
 	// #endregion overrides
 }
 
-export interface ListboxOption extends AffixIconWithTrailing { }
+export interface ListboxOption extends AffixIconWithTrailing {}
 applyMixins(ListboxOption, AffixIconWithTrailing);
diff --git a/libs/components/src/lib/option/ui.test.ts b/libs/components/src/lib/option/ui.test.ts
index c22d99e0f0..c4aa8594f0 100644
--- a/libs/components/src/lib/option/ui.test.ts
+++ b/libs/components/src/lib/option/ui.test.ts
@@ -4,13 +4,18 @@ import type { Page } from '@playwright/test';
 import {
 	extractHTMLBlocksFromReadme,
 	loadComponents,
-	loadTemplate
+	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
 const components = ['option'];
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template = extractHTMLBlocksFromReadme(path.join(new URL('.', import.meta.url).pathname, 'README.md'))
-		.reduce((htmlString: string, block: string) => `${htmlString} <div style="margin: 5px;">${block}</div>`, '');
+	const template = extractHTMLBlocksFromReadme(
+		path.join(new URL('.', import.meta.url).pathname, 'README.md')
+	).reduce(
+		(htmlString: string, block: string) =>
+			`${htmlString} <div style="margin: 5px;">${block}</div>`,
+		''
+	);
 
 	page.setViewportSize({ width: 440, height: 720 });
 
@@ -27,8 +32,7 @@ test('should show the component', async ({ page }: { page: Page }) => {
 
 	await page.waitForLoadState('networkidle');
 
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/option.png',
-		);
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/option.png'
+	);
 });
diff --git a/libs/components/src/lib/pagination/pagination.spec.ts b/libs/components/src/lib/pagination/pagination.spec.ts
index 45e993dc36..12728bc137 100644
--- a/libs/components/src/lib/pagination/pagination.spec.ts
+++ b/libs/components/src/lib/pagination/pagination.spec.ts
@@ -1,4 +1,9 @@
-import { axe, elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getControlElement,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import type { Button } from '../button/button';
 import { Shape, Size } from '../enums';
@@ -53,30 +58,36 @@ describe('vwc-pagination', () => {
 		it('should add a button when total is set to 1', async () => {
 			element.total = 1;
 			await elementUpdated(element);
-			const buttons = element.shadowRoot?.querySelectorAll('.vwc-pagination-button');
+			const buttons = element.shadowRoot?.querySelectorAll(
+				'.vwc-pagination-button'
+			);
 			const firstButtonText = getButtonText(buttons?.item(0));
 			expect(element.pagesList.length).toEqual(1);
 			expect(buttons?.length).toEqual(1);
 			expect(firstButtonText).toEqual('1');
 		});
 
-		it.each([2, 3, 4, 5, 6, 7])('should add %i buttons when total is set to %i', async (total) => {
-			element.total = total;
-			await elementUpdated(element);
-			const buttons = getButtons(element);
-			expect(element.pagesList.length).toEqual(total);
-			expect(buttons?.length).toEqual(total);
-			buttons?.forEach((button: any, index: number) => {
-				const buttonText = getButtonText(button);
-				expect(buttonText).toEqual(`${index + 1}`);
-			});
-		});
+		it.each([2, 3, 4, 5, 6, 7])(
+			'should add %i buttons when total is set to %i',
+			async (total) => {
+				element.total = total;
+				await elementUpdated(element);
+				const buttons = getButtons(element);
+				expect(element.pagesList.length).toEqual(total);
+				expect(buttons?.length).toEqual(total);
+				buttons?.forEach((button: any, index: number) => {
+					const buttonText = getButtonText(button);
+					expect(buttonText).toEqual(`${index + 1}`);
+				});
+			}
+		);
 
 		it('should set the numbers around selectedIndex to minus 1 and plus one', async function () {
 			element.total = 20;
 			element.selectedIndex = 10;
 			await elementUpdated(element);
-			const buttonsAndDots = getControlElement(element).querySelector('#buttons-wrapper')?.children;
+			const buttonsAndDots =
+				getControlElement(element).querySelector('#buttons-wrapper')?.children;
 			expect(getButtonText(buttonsAndDots?.item(2))).toEqual('10');
 			expect(getButtonText(buttonsAndDots?.item(3))).toEqual('11');
 			expect(getButtonText(buttonsAndDots?.item(4))).toEqual('12');
@@ -85,7 +96,8 @@ describe('vwc-pagination', () => {
 		it('should add 1,2,3 buttons, 3 dots and the last page when over 7 total', async () => {
 			element.total = 20;
 			await elementUpdated(element);
-			const buttonsAndDots = getControlElement(element).querySelector('#buttons-wrapper')?.children;
+			const buttonsAndDots =
+				getControlElement(element).querySelector('#buttons-wrapper')?.children;
 			const dots = buttonsAndDots?.item(5);
 			const lastItem = buttonsAndDots?.item(6);
 			expect(buttonsAndDots?.length).toEqual(7);
@@ -104,7 +116,8 @@ describe('vwc-pagination', () => {
 			element.total = 20;
 			element.selectedIndex = 4;
 			await elementUpdated(element);
-			const buttonsAndDots = getControlElement(element).querySelector('#buttons-wrapper')?.children;
+			const buttonsAndDots =
+				getControlElement(element).querySelector('#buttons-wrapper')?.children;
 			expect(getButtonText(buttonsAndDots?.item(1))).toEqual('...');
 			expect(getButtonText(buttonsAndDots?.item(5))).toEqual('...');
 		});
@@ -113,9 +126,12 @@ describe('vwc-pagination', () => {
 			element.total = 20;
 			element.selectedIndex = 18;
 			await elementUpdated(element);
-			const buttonsAndDots = getControlElement(element).querySelector('#buttons-wrapper')?.children;
+			const buttonsAndDots =
+				getControlElement(element).querySelector('#buttons-wrapper')?.children;
 			expect(getButtonText(buttonsAndDots?.item(1))).toEqual('...');
-			expect(getButtonText(buttonsAndDots?.item(buttonsAndDots?.length - 2))).toEqual('19');
+			expect(
+				getButtonText(buttonsAndDots?.item(buttonsAndDots?.length - 2))
+			).toEqual('19');
 		});
 	});
 
@@ -142,7 +158,9 @@ describe('vwc-pagination', () => {
 			element.total = 20;
 			element.selectedIndex = 3;
 			await elementUpdated(element);
-			const button = element.shadowRoot?.querySelectorAll('.vwc-pagination-button').item(3);
+			const button = element.shadowRoot
+				?.querySelectorAll('.vwc-pagination-button')
+				.item(3);
 			expect(button?.getAttribute('appearance')).toEqual('filled');
 		});
 
@@ -150,7 +168,9 @@ describe('vwc-pagination', () => {
 			element.total = 20;
 			element.selectedIndex = 4;
 			await elementUpdated(element);
-			const button = element.shadowRoot?.querySelectorAll('.vwc-pagination-button').item(2);
+			const button = element.shadowRoot
+				?.querySelectorAll('.vwc-pagination-button')
+				.item(2);
 			expect(button?.getAttribute('appearance')).toEqual('filled');
 		});
 
@@ -270,7 +290,7 @@ describe('vwc-pagination', () => {
 	describe('click events', function () {
 		let buttons: NodeListOf<Element> | undefined;
 
-		function setEventListeners(status: { clicked: boolean; event?: Event; }) {
+		function setEventListeners(status: { clicked: boolean; event?: Event }) {
 			element.addEventListener('pagination-change', (e) => {
 				status.clicked = true;
 				status.event = e;
@@ -307,7 +327,11 @@ describe('vwc-pagination', () => {
 			const button = buttons?.item(2);
 			button?.dispatchEvent(new MouseEvent('click'));
 			expect(status.clicked).toEqual(true);
-			expect((status.event as MouseEvent).detail).toEqual({ selectedIndex: 2, total: 20, oldIndex: 0 });
+			expect((status.event as MouseEvent).detail).toEqual({
+				selectedIndex: 2,
+				total: 20,
+				oldIndex: 0,
+			});
 		});
 
 		it('should prevent "change" event when selected button is clicked', async function () {
@@ -337,11 +361,14 @@ describe('vwc-pagination', () => {
 	});
 
 	function getButtons(element: Pagination) {
-		return Array.from(element.shadowRoot?.querySelectorAll('.vwc-pagination-button') as unknown as Button[]);
+		return Array.from(
+			element.shadowRoot?.querySelectorAll(
+				'.vwc-pagination-button'
+			) as unknown as Button[]
+		);
 	}
 
 	describe('keyboard events', function () {
-
 		beforeEach(async function () {
 			element.total = 30;
 			await elementUpdated(element);
@@ -349,14 +376,22 @@ describe('vwc-pagination', () => {
 
 		it('should select tag on spacebar', async function () {
 			const button = getButtons(element)[3];
-			const event = new KeyboardEvent('keydown', { key: ' ', bubbles: true, composed: true });
+			const event = new KeyboardEvent('keydown', {
+				key: ' ',
+				bubbles: true,
+				composed: true,
+			});
 			button?.dispatchEvent(event);
 			expect(element.selectedIndex).toEqual(3);
 		});
 
 		it('should select tag on Enter', async function () {
 			const button = getButtons(element)[1];
-			const event = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true });
+			const event = new KeyboardEvent('keydown', {
+				key: 'Enter',
+				bubbles: true,
+				composed: true,
+			});
 			button?.dispatchEvent(event);
 			expect(element.selectedIndex).toEqual(1);
 		});
@@ -365,40 +400,70 @@ describe('vwc-pagination', () => {
 			const buttons = getButtons(element);
 			const button = buttons[1];
 			button.focus();
-			const event = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, composed: true });
+			const event = new KeyboardEvent('keydown', {
+				key: 'Tab',
+				bubbles: true,
+				composed: true,
+			});
 			button.dispatchEvent(event);
-			expect((element.shadowRoot?.activeElement as any).label).toEqual(buttons[2].label);
+			expect((element.shadowRoot?.activeElement as any).label).toEqual(
+				buttons[2].label
+			);
 		});
 
 		it('should focus on previous button when tab+shift are pressed on a button', async function () {
 			const buttons = getButtons(element);
 			const button = buttons[1];
 			button.focus();
-			const event = new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true, composed: true });
+			const event = new KeyboardEvent('keydown', {
+				key: 'Tab',
+				shiftKey: true,
+				bubbles: true,
+				composed: true,
+			});
 			button.dispatchEvent(event);
-			expect((element.shadowRoot?.activeElement as any).label).toEqual(buttons[0].label);
+			expect((element.shadowRoot?.activeElement as any).label).toEqual(
+				buttons[0].label
+			);
 		});
 
 		it('should focus on prev button if focused on the first element', async function () {
 			element.selectedIndex = 5;
 			await elementUpdated(element);
-			const prevButton = element.shadowRoot?.querySelector('.prev-button') as Button;
+			const prevButton = element.shadowRoot?.querySelector(
+				'.prev-button'
+			) as Button;
 			const buttons = getButtons(element);
 			const button = buttons[0];
 			button.focus();
-			const event = new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true, composed: true });
+			const event = new KeyboardEvent('keydown', {
+				key: 'Tab',
+				shiftKey: true,
+				bubbles: true,
+				composed: true,
+			});
 			button.dispatchEvent(event);
-			expect((element.shadowRoot?.activeElement as any).label).toEqual(prevButton?.label);
+			expect((element.shadowRoot?.activeElement as any).label).toEqual(
+				prevButton?.label
+			);
 		});
 
 		it('should focus on prev button if focused on the first element', async function () {
-			const nextButton = element.shadowRoot?.querySelector('.next-button') as Button;
+			const nextButton = element.shadowRoot?.querySelector(
+				'.next-button'
+			) as Button;
 			const buttons = getButtons(element);
 			const button = buttons[5];
 			button.focus();
-			const event = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, composed: true });
+			const event = new KeyboardEvent('keydown', {
+				key: 'Tab',
+				bubbles: true,
+				composed: true,
+			});
 			button.dispatchEvent(event);
-			expect((element.shadowRoot?.activeElement as any).label).toEqual(nextButton?.label);
+			expect((element.shadowRoot?.activeElement as any).label).toEqual(
+				nextButton?.label
+			);
 		});
 	});
 
@@ -406,7 +471,11 @@ describe('vwc-pagination', () => {
 		it('should set tabindex of buttons to 0 by default', async function () {
 			element.total = 20;
 			await elementUpdated(element);
-			const buttons = Array.from(element.shadowRoot?.querySelectorAll('.vwc-pagination-button') as unknown as Button[]);
+			const buttons = Array.from(
+				element.shadowRoot?.querySelectorAll(
+					'.vwc-pagination-button'
+				) as unknown as Button[]
+			);
 			const allButtonsAriaPressedFalse = buttons?.reduce((correct, button) => {
 				return correct && button.getAttribute('tabindex') === '0';
 			}, true);
@@ -418,7 +487,11 @@ describe('vwc-pagination', () => {
 		it('should set size super-condensed of all buttons by default', async function () {
 			element.total = 20;
 			await elementUpdated(element);
-			const allButtons = Array.from(element.shadowRoot?.querySelectorAll('vwc-button') as unknown as Button[]);
+			const allButtons = Array.from(
+				element.shadowRoot?.querySelectorAll(
+					'vwc-button'
+				) as unknown as Button[]
+			);
 			const allButtonsCondensed = allButtons?.reduce((correct, button) => {
 				return correct && button.size === Size.SuperCondensed;
 			}, true);
@@ -430,7 +503,11 @@ describe('vwc-pagination', () => {
 			await elementUpdated(element);
 			element.size = Size.Normal;
 			await elementUpdated(element);
-			const allButtons = Array.from(element.shadowRoot?.querySelectorAll('vwc-button') as unknown as Button[]);
+			const allButtons = Array.from(
+				element.shadowRoot?.querySelectorAll(
+					'vwc-button'
+				) as unknown as Button[]
+			);
 			const allButtonsCondensed = allButtons?.reduce((correct, button) => {
 				return correct && button.size === Size.Normal;
 			}, true);
@@ -442,7 +519,11 @@ describe('vwc-pagination', () => {
 			await elementUpdated(element);
 			element.size = 'invalid-size' as PaginationSize;
 			await elementUpdated(element);
-			const allButtons = Array.from(element.shadowRoot?.querySelectorAll('vwc-button') as unknown as Button[]);
+			const allButtons = Array.from(
+				element.shadowRoot?.querySelectorAll(
+					'vwc-button'
+				) as unknown as Button[]
+			);
 			const allButtonsCondensed = allButtons?.reduce((correct, button) => {
 				return correct && button.size === Size.SuperCondensed;
 			}, true);
@@ -453,21 +534,28 @@ describe('vwc-pagination', () => {
 			['size-super-condensed', Size.SuperCondensed],
 			['size-condensed', Size.Condensed],
 			['size-normal', Size.Normal],
-			['size-super-condensed', 'invalid-size' as PaginationSize]
-		] as const)('should set class %s on dots if size is %s', async function (className, size) {
-			element.total = 20;
-			element.size = size;
-			await elementUpdated(element);
-			const dots = element.shadowRoot?.querySelector('.dots');
-			expect(dots?.classList.contains(className)).toEqual(true);
-		});
+			['size-super-condensed', 'invalid-size' as PaginationSize],
+		] as const)(
+			'should set class %s on dots if size is %s',
+			async function (className, size) {
+				element.total = 20;
+				element.size = size;
+				await elementUpdated(element);
+				const dots = element.shadowRoot?.querySelector('.dots');
+				expect(dots?.classList.contains(className)).toEqual(true);
+			}
+		);
 	});
 
 	describe('shape', function () {
 		it('should set shape rounded of all buttons by default', async function () {
 			element.total = 20;
 			await elementUpdated(element);
-			const allButtons = Array.from(element.shadowRoot?.querySelectorAll('vwc-button') as unknown as Button[]);
+			const allButtons = Array.from(
+				element.shadowRoot?.querySelectorAll(
+					'vwc-button'
+				) as unknown as Button[]
+			);
 			const allButtonsRounded = allButtons?.reduce((correct, button) => {
 				return correct && button.shape === Shape.Rounded;
 			}, true);
@@ -479,7 +567,11 @@ describe('vwc-pagination', () => {
 			await elementUpdated(element);
 			element.shape = Shape.Pill;
 			await elementUpdated(element);
-			const allButtons = Array.from(element.shadowRoot?.querySelectorAll('vwc-button') as unknown as Button[]);
+			const allButtons = Array.from(
+				element.shadowRoot?.querySelectorAll(
+					'vwc-button'
+				) as unknown as Button[]
+			);
 			const allButtonsPill = allButtons?.reduce((correct, button) => {
 				return correct && button.shape === Shape.Pill;
 			}, true);
@@ -491,7 +583,11 @@ describe('vwc-pagination', () => {
 			await elementUpdated(element);
 			element.shape = 'invalid-shape' as PaginationShape;
 			await elementUpdated(element);
-			const allButtons = Array.from(element.shadowRoot?.querySelectorAll('vwc-button') as unknown as Button[]);
+			const allButtons = Array.from(
+				element.shadowRoot?.querySelectorAll(
+					'vwc-button'
+				) as unknown as Button[]
+			);
 			const allButtonsRounded = allButtons?.reduce((correct, button) => {
 				return correct && button.shape === Shape.Rounded;
 			}, true);
@@ -512,11 +608,18 @@ describe('vwc-pagination', () => {
 			it('should set aria-current false by default', async function () {
 				element.total = 20;
 				await elementUpdated(element);
-				const buttons = Array.from(element.shadowRoot?.querySelectorAll('.vwc-pagination-button') as unknown as Button[]);
-				const allButtonsAriaSelectedFalse = buttons?.reduce((correct, button, index) => {
-					if (element.selectedIndex === index) return correct;
-					return correct && button.getAttribute('aria-current') === 'false';
-				}, true);
+				const buttons = Array.from(
+					element.shadowRoot?.querySelectorAll(
+						'.vwc-pagination-button'
+					) as unknown as Button[]
+				);
+				const allButtonsAriaSelectedFalse = buttons?.reduce(
+					(correct, button, index) => {
+						if (element.selectedIndex === index) return correct;
+						return correct && button.getAttribute('aria-current') === 'false';
+					},
+					true
+				);
 				expect(allButtonsAriaSelectedFalse).toEqual(true);
 			});
 		});
diff --git a/libs/components/src/lib/pagination/pagination.template.ts b/libs/components/src/lib/pagination/pagination.template.ts
index da9d728e5c..ca617f7200 100644
--- a/libs/components/src/lib/pagination/pagination.template.ts
+++ b/libs/components/src/lib/pagination/pagination.template.ts
@@ -19,47 +19,63 @@ import type { Pagination } from './pagination';
 const ALLOWED_SIZES = [Size.SuperCondensed, Size.Condensed, Size.Normal];
 const ALLOWED_SHAPES = [Shape.Rounded, Shape.Pill];
 
-const handleSelection = (value: string | number, {parent: x}: {parent: Pagination}) => {
-	return x.selectedIndex = (Number(value) - 1);
+const handleSelection = (
+	value: string | number,
+	{ parent: x }: { parent: Pagination }
+) => {
+	return (x.selectedIndex = Number(value) - 1);
 };
 
-const handleKeyDown = (value: string | number, {event, parent}: {event: KeyboardEvent, parent: Pagination}) => {
+const handleKeyDown = (
+	value: string | number,
+	{ event, parent }: { event: KeyboardEvent; parent: Pagination }
+) => {
 	if (event.key === ' ' || event.key === 'Enter') {
-		handleSelection(value, {parent});
+		handleSelection(value, { parent });
 	}
 	if (event.key === 'Tab') {
 		event.target!.dispatchEvent(
-			new CustomEvent('tabpressed', {detail: {value, shiftKey: event.shiftKey}, bubbles: true, composed: true}));
+			new CustomEvent('tabpressed', {
+				detail: { value, shiftKey: event.shiftKey },
+				bubbles: true,
+				composed: true,
+			})
+		);
 	}
 };
 
 const getClasses = (_: Pagination) => classNames('control');
 
-function getButtonAppearance(value: string | number, {parent}: {parent: Pagination}) {
-	return (parent.selectedIndex === Number(value) - 1) ? 'filled' : 'ghost';
+function getButtonAppearance(
+	value: string | number,
+	{ parent }: { parent: Pagination }
+) {
+	return parent.selectedIndex === Number(value) - 1 ? 'filled' : 'ghost';
 }
 
-const paginationButtonRenderer = (buttonTag: string) => html`
-	${when(value => value !== '...',
-		html`
+const paginationButtonRenderer = (buttonTag: string) => html` ${when(
+	(value) => value !== '...',
+	html`
 		<${buttonTag} class="vwc-pagination-button"
 									label="${(value) => value}"
 									appearance="${getButtonAppearance}"
-									size="${(_, {parent: x}) => getPaginationSize(x)}"
-									shape="${(_, {parent: x}) => getPaginationShape(x)}"
+									size="${(_, { parent: x }) => getPaginationSize(x)}"
+									shape="${(_, { parent: x }) => getPaginationShape(x)}"
 									style="inline-size: ${(value) => getPaginationButtonWidth(value)};"
 									tabindex="0"
-									aria-current="${(value, {parent}) => parent.selectedIndex === Number(value) - 1}"
+									aria-current="${(value, { parent }) =>
+										parent.selectedIndex === Number(value) - 1}"
 									@click="${handleSelection}"
 									@keydown="${handleKeyDown}">
 		</${buttonTag}>
-	`)}
-	${when(value => value === '...',
-		html`
-		<div
-			class="dots size-${(_, {parent: x}) => getPaginationSize(x)}">
-			...
-		</div>`)}`;
+	`
+)}
+${when(
+	(value) => value === '...',
+	html` <div class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
+		...
+	</div>`
+)}`;
 
 const getPaginationSize = (x: Pagination) => {
 	if (!x.size || !ALLOWED_SIZES.includes(x.size)) {
@@ -95,24 +111,26 @@ export const PaginationTemplate: (
 	return html<Pagination>`
 	<div class="${getClasses}">
 		<${buttonTag} class="prev-button" ${ref('prevButton')}
-									label="${x => !x.navIcons ? 'Previous' : null}"
-									icon="${x => x.navIcons ? 'chevron-left-line' : null}"
+									label="${(x) => (!x.navIcons ? 'Previous' : null)}"
+									icon="${(x) => (x.navIcons ? 'chevron-left-line' : null)}"
 									size="${getPaginationSize}"
 									shape="${getPaginationShape}"
-									?disabled="${x => x.total === 0 || x.selectedIndex === 0}"
-									@click="${x => (x.selectedIndex !== undefined) && x.selectedIndex--}"
+									?disabled="${(x) => x.total === 0 || x.selectedIndex === 0}"
+									@click="${(x) => x.selectedIndex !== undefined && x.selectedIndex--}"
 		></${buttonTag}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${children({ property: 'paginationButtons', filter: elements(buttonTag) })}>
-			${repeat(x => x.pagesList, paginationButtonTemplate, { positioning: true })}
+		<div id="buttons-wrapper" class="buttons-wrapper" ${children({
+			property: 'paginationButtons',
+			filter: elements(buttonTag),
+		})}>
+			${repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
 		</div>
 		<${buttonTag} class="next-button" ${ref('nextButton')}
-									label="${x => !x.navIcons ? 'Next' : null}"
-									icon="${x => x.navIcons ? 'chevron-right-line' : null}"
+									label="${(x) => (!x.navIcons ? 'Next' : null)}"
+									icon="${(x) => (x.navIcons ? 'chevron-right-line' : null)}"
 									size="${getPaginationSize}"
 									shape="${getPaginationShape}"
-									?disabled="${x => x.total === 0 || x.selectedIndex === (x.total - 1)}"
-									@click="${x => (x.selectedIndex !== undefined) && x.selectedIndex++}"
+									?disabled="${(x) => x.total === 0 || x.selectedIndex === x.total - 1}"
+									@click="${(x) => x.selectedIndex !== undefined && x.selectedIndex++}"
 		></${buttonTag}>
 </div>`;
 };
-
diff --git a/libs/components/src/lib/pagination/pagination.ts b/libs/components/src/lib/pagination/pagination.ts
index 9cfdb9f187..ad849f8202 100644
--- a/libs/components/src/lib/pagination/pagination.ts
+++ b/libs/components/src/lib/pagination/pagination.ts
@@ -1,16 +1,24 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
-import { attr, observable, type ValueConverter, volatile } from '@microsoft/fast-element';
+import {
+	attr,
+	observable,
+	type ValueConverter,
+	volatile,
+} from '@microsoft/fast-element';
 import type { Shape, Size } from '../enums';
 import type { Button } from '../button/button';
 
-export type PaginationSize = Extract<Size, Size.SuperCondensed | Size.Condensed | Size.Normal>;
+export type PaginationSize = Extract<
+	Size,
+	Size.SuperCondensed | Size.Condensed | Size.Normal
+>;
 
 export type PaginationShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
 
 const MAX_DIGITS_AND_PLACEHOLDERS = 7;
 const totalConverter: ValueConverter = {
 	fromView: (value: string) => parseInt(value, 10),
-	toView: (value: number) => value.toString()
+	toView: (value: number) => value.toString(),
 };
 
 /**
@@ -38,43 +46,56 @@ export class Pagination extends FoundationElement {
 	@attr shape?: PaginationShape;
 
 	@observable
-		paginationButtons?: Button[];
+	paginationButtons?: Button[];
 
 	@observable
-		prevButton?: Button;
+	prevButton?: Button;
 
 	@observable
-		nextButton?: Button;
+	nextButton?: Button;
 
 	@attr({ attribute: 'nav-icons', mode: 'boolean' }) navIcons = false;
 
 	@volatile
 	get pagesList() {
-		return new Array(this.total < MAX_DIGITS_AND_PLACEHOLDERS ? this.total :
-			MAX_DIGITS_AND_PLACEHOLDERS).fill(0).map((_, i, arr) => {
-
-			if (i === 0) return 1;
-			if (i === arr.length - 1) return this.total;
-
-			if (this.selectedIndex !== undefined && this.total > MAX_DIGITS_AND_PLACEHOLDERS) {
-				if (this.selectedIndex < 4) {
-					if (i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return '...';
-				}
-				if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
-					if (i > 1 && i < MAX_DIGITS_AND_PLACEHOLDERS - 2) return this.selectedIndex + (i - 2);
-					if (i === 1 || i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return '...';
-				}
-				if (this.selectedIndex > this.total - 5) {
-					if (i > 1) return this.total - (6 - i);
-					if (i === 1) return '...';
+		return new Array(
+			this.total < MAX_DIGITS_AND_PLACEHOLDERS
+				? this.total
+				: MAX_DIGITS_AND_PLACEHOLDERS
+		)
+			.fill(0)
+			.map((_, i, arr) => {
+				if (i === 0) return 1;
+				if (i === arr.length - 1) return this.total;
+
+				if (
+					this.selectedIndex !== undefined &&
+					this.total > MAX_DIGITS_AND_PLACEHOLDERS
+				) {
+					if (this.selectedIndex < 4) {
+						if (i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return '...';
+					}
+					if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
+						if (i > 1 && i < MAX_DIGITS_AND_PLACEHOLDERS - 2)
+							return this.selectedIndex + (i - 2);
+						if (i === 1 || i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return '...';
+					}
+					if (this.selectedIndex > this.total - 5) {
+						if (i > 1) return this.total - (6 - i);
+						if (i === 1) return '...';
+					}
 				}
-			}
-			return i + 1;
-		});
+				return i + 1;
+			});
 	}
 
 	@attr({ mode: 'reflect', converter: totalConverter }) total: number;
-	@attr({ mode: 'reflect', converter: totalConverter, attribute: 'selected-index' }) selectedIndex: number | undefined;
+	@attr({
+		mode: 'reflect',
+		converter: totalConverter,
+		attribute: 'selected-index',
+	})
+	selectedIndex: number | undefined;
 
 	constructor() {
 		super();
@@ -82,7 +103,9 @@ export class Pagination extends FoundationElement {
 		this.selectedIndex = 0;
 		this.addEventListener('tabpressed', (e: Event) => {
 			const { value: currentLabel, shiftKey } = (e as CustomEvent).detail;
-			const index = this.paginationButtons!.findIndex(button => Number(button.label) === currentLabel) as number;
+			const index = this.paginationButtons!.findIndex(
+				(button) => Number(button.label) === currentLabel
+			) as number;
 			const focusDirection = shiftKey ? -1 : 1;
 			const newIndex = index + focusDirection;
 			if (newIndex < 0) {
@@ -91,7 +114,8 @@ export class Pagination extends FoundationElement {
 			if (newIndex > this.paginationButtons!.length - 1) {
 				return this.nextButton!.focus();
 			}
-			this.paginationButtons && this.paginationButtons[index + focusDirection].focus();
+			this.paginationButtons &&
+				this.paginationButtons[index + focusDirection].focus();
 		});
 	}
 
@@ -105,13 +129,18 @@ export class Pagination extends FoundationElement {
 
 	selectedIndexChanged(oldValue: number, newValue: number) {
 		if (oldValue === undefined) return;
-		this.$emit('pagination-change', { selectedIndex: newValue, total: this.total, oldIndex: oldValue });
+		this.$emit('pagination-change', {
+			selectedIndex: newValue,
+			total: this.total,
+			oldIndex: oldValue,
+		});
 	}
 
 	paginationButtonsChanged(_: Button[] | undefined, newValue: Button[]) {
-		newValue.forEach(button => {
-			button.shadowRoot!.querySelector('button')!.setAttribute('part', 'button');
+		newValue.forEach((button) => {
+			button
+				.shadowRoot!.querySelector('button')!
+				.setAttribute('part', 'button');
 		});
 	}
 }
-
diff --git a/libs/components/src/lib/popup/definition.ts b/libs/components/src/lib/popup/definition.ts
index 9a877b301c..90ab8862bd 100644
--- a/libs/components/src/lib/popup/definition.ts
+++ b/libs/components/src/lib/popup/definition.ts
@@ -22,7 +22,11 @@ export const popupDefinition = Popup.compose<FoundationElementDefinition>({
 /**
  * @internal
  */
-export const popupRegistries = [popupDefinition(), ...elevationRegistries, ...buttonRegistries];
+export const popupRegistries = [
+	popupDefinition(),
+	...elevationRegistries,
+	...buttonRegistries,
+];
 
 /**
  * Registers the popup elements with the design system.
diff --git a/libs/components/src/lib/popup/index.ts b/libs/components/src/lib/popup/index.ts
index 5468787872..e57c0a639f 100644
--- a/libs/components/src/lib/popup/index.ts
+++ b/libs/components/src/lib/popup/index.ts
@@ -1,4 +1,3 @@
 import { registerPopup } from './definition';
 
-
 registerPopup();
diff --git a/libs/components/src/lib/popup/popup.spec.ts b/libs/components/src/lib/popup/popup.spec.ts
index 601d18b1e0..8ccc951aff 100644
--- a/libs/components/src/lib/popup/popup.spec.ts
+++ b/libs/components/src/lib/popup/popup.spec.ts
@@ -3,7 +3,7 @@ import {
 	axe,
 	elementUpdated,
 	fixture,
-	getControlElement
+	getControlElement,
 } from '@vivid-nx/shared';
 import * as floatingUI from '@floating-ui/dom';
 import type { Button } from '../button/button';
@@ -24,14 +24,16 @@ describe('vwc-popup', () => {
 	}
 
 	beforeEach(async () => {
-		element = await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`) as Popup;
-		anchor = await fixture('<vwc-button id="anchor"></vwc-button>', ADD_TEMPLATE_TO_FIXTURE) as Button;
-		global.ResizeObserver = jest.fn()
-			.mockImplementation(() => ({
-				observe: jest.fn(),
-				unobserve: jest.fn(),
-				disconnect: jest.fn()
-			}));
+		element = (await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`)) as Popup;
+		anchor = (await fixture(
+			'<vwc-button id="anchor"></vwc-button>',
+			ADD_TEMPLATE_TO_FIXTURE
+		)) as Button;
+		global.ResizeObserver = jest.fn().mockImplementation(() => ({
+			observe: jest.fn(),
+			unobserve: jest.fn(),
+			disconnect: jest.fn(),
+		}));
 	});
 
 	afterEach(function () {
@@ -65,33 +67,32 @@ describe('vwc-popup', () => {
 	});
 
 	describe('updatePosition', function () {
-
 		const computePositionResult = {
-			'x': -15,
-			'y': 0,
-			'placement': 'left',
-			'strategy': 'fixed',
-			'middlewareData': {
-				'flip': {},
-				'hide': {
-					'referenceHiddenOffsets': {
-						'top': 0,
-						'right': 0,
-						'bottom': 0,
-						'left': 0
+			x: -15,
+			y: 0,
+			placement: 'left',
+			strategy: 'fixed',
+			middlewareData: {
+				flip: {},
+				hide: {
+					referenceHiddenOffsets: {
+						top: 0,
+						right: 0,
+						bottom: 0,
+						left: 0,
 					},
-					'referenceHidden': true
+					referenceHidden: true,
+				},
+				inline: {},
+				arrow: {
+					y: 0,
+					centerOffset: 0,
 				},
-				'inline': {},
-				'arrow': {
-					'y': 0,
-					'centerOffset': 0
+				offset: {
+					x: -12,
+					y: 0,
 				},
-				'offset': {
-					'x': -12,
-					'y': 0
-				}
-			}
+			},
 		};
 
 		beforeEach(function () {
@@ -104,7 +105,9 @@ describe('vwc-popup', () => {
 
 		function resetPosition(hidden = true) {
 			computePositionResult.middlewareData.hide.referenceHidden = hidden;
-			(floatingUI.computePosition as jest.MockedFunction<any>).mockReturnValue(Promise.resolve(computePositionResult));
+			(floatingUI.computePosition as jest.MockedFunction<any>).mockReturnValue(
+				Promise.resolve(computePositionResult)
+			);
 		}
 
 		it('should be hidden when not in viewport', async function () {
@@ -112,8 +115,7 @@ describe('vwc-popup', () => {
 			await resetPosition(true);
 			await element.updatePosition();
 
-			expect(element.popupEl.style.visibility)
-				.toEqual('hidden');
+			expect(element.popupEl.style.visibility).toEqual('hidden');
 		});
 
 		it('should be visible when in viewport', async function () {
@@ -121,54 +123,40 @@ describe('vwc-popup', () => {
 			await resetPosition(false);
 
 			await element.updatePosition();
-			expect(element.popupEl.style.visibility)
-				.toEqual('visible');
+			expect(element.popupEl.style.visibility).toEqual('visible');
 		});
 
 		it('should set the arrow in a position according to middleware', async function () {
 			element.arrow = true;
 			await setupPopupToOpenWithAnchor();
-			(computePositionResult.middlewareData.arrow as any) = { x: 5, y: 10};
+			(computePositionResult.middlewareData.arrow as any) = { x: 5, y: 10 };
 			await resetPosition(false);
 			await element.updatePosition();
-			expect(element.arrowEl.style.left)
-				.toEqual('5px');
-			expect(element.arrowEl.style.top)
-				.toEqual('10px');
+			expect(element.arrowEl.style.left).toEqual('5px');
+			expect(element.arrowEl.style.top).toEqual('10px');
 		});
 
 		it('should not compute position if popup is not open', async function () {
 			await element.updatePosition();
-			expect(floatingUI.computePosition)
-				.not
-				.toHaveBeenCalled();
+			expect(floatingUI.computePosition).not.toHaveBeenCalled();
 		});
 
 		it('should not compute position if there is no anchor', async function () {
 			element.open = true;
 			await element.updatePosition();
-			expect(floatingUI.computePosition)
-				.not
-				.toHaveBeenCalled();
+			expect(floatingUI.computePosition).not.toHaveBeenCalled();
 		});
 	});
 
 	describe('basic', () => {
 		it('initializes as a vwc-popup', async () => {
-			expect(element)
-				.toBeInstanceOf(Popup);
-			expect(element.open)
-				.toBeFalsy();
-			expect(element.arrow)
-				.toBeFalsy();
-			expect(element.dismissible)
-				.toBeFalsy();
-			expect(element.anchor)
-				.toBeUndefined();
-			expect(element.placement)
-				.toBeUndefined();
-			expect(element.strategy)
-				.toEqual('fixed');
+			expect(element).toBeInstanceOf(Popup);
+			expect(element.open).toBeFalsy();
+			expect(element.arrow).toBeFalsy();
+			expect(element.dismissible).toBeFalsy();
+			expect(element.anchor).toBeUndefined();
+			expect(element.placement).toBeUndefined();
+			expect(element.strategy).toEqual('fixed');
 		});
 	});
 
@@ -176,8 +164,7 @@ describe('vwc-popup', () => {
 		it('should set "open" to true', async () => {
 			element.show();
 
-			expect(element.open)
-				.toEqual(true);
+			expect(element.open).toEqual(true);
 		});
 
 		it('should fire vwc-popup:open event', async function () {
@@ -196,8 +183,7 @@ describe('vwc-popup', () => {
 
 			element.hide();
 
-			expect(element.open)
-				.toEqual(false);
+			expect(element.open).toEqual(false);
 		});
 
 		it('should fire "vwc-popup:close" event', async function () {
@@ -213,33 +199,27 @@ describe('vwc-popup', () => {
 
 	describe('arrow', () => {
 		it('should remove the arrow class on the container if arrow is false', async () => {
-			expect(element.shadowRoot?.querySelector('.arrow'))
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.arrow')).toBeNull();
 		});
 
 		it('should set the arrow class on the container if arrow is true', async () => {
 			element.arrow = true;
 			await elementUpdated(element);
 
-			expect(element.shadowRoot?.querySelector('.arrow'))
-				.not
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.arrow')).not.toBeNull();
 		});
 	});
 
 	describe('dismissible', () => {
 		it('should remove the dismiss class on the container if dismissible is false', async () => {
-			expect(element.shadowRoot?.querySelector('.dismissible'))
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.dismissible')).toBeNull();
 		});
 
 		it('should set the dismiss class on the container if dismissible is true', async () => {
 			element.dismissible = true;
 
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.dismissible'))
-				.not
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.dismissible')).not.toBeNull();
 		});
 
 		it('should hide when dismiss button is clicked', async () => {
@@ -254,20 +234,20 @@ describe('vwc-popup', () => {
 			(dismissButton as HTMLElement).click();
 			await elementUpdated(element);
 
-			expect(openStateBeforeEsc)
-				.toEqual(true);
-			expect(element.open)
-				.toEqual(false);
+			expect(openStateBeforeEsc).toEqual(true);
+			expect(element.open).toEqual(false);
 		});
 	});
 
 	describe('alternate', () => {
 		it('should set to alternate', async () => {
-			const partValueWithoutAlternate = getControlElement(element).getAttribute('part');
+			const partValueWithoutAlternate =
+				getControlElement(element).getAttribute('part');
 
 			element.alternate = true;
 			await elementUpdated(element);
-			const partValueWithAlternate = getControlElement(element).getAttribute('part');
+			const partValueWithAlternate =
+				getControlElement(element).getAttribute('part');
 
 			expect(partValueWithoutAlternate).toEqual('');
 			expect(partValueWithAlternate).toEqual('vvd-theme-alternate');
@@ -283,16 +263,16 @@ describe('vwc-popup', () => {
 		});
 
 		it('should set aria-hidden', async () => {
-			expect(getControlElement(element)
-				.getAttribute('aria-hidden'))
-				.toEqual('true');
+			expect(getControlElement(element).getAttribute('aria-hidden')).toEqual(
+				'true'
+			);
 
 			element.open = true;
 			await elementUpdated(element);
 
-			expect(getControlElement(element)
-				.getAttribute('aria-hidden'))
-				.toEqual('false');
+			expect(getControlElement(element).getAttribute('aria-hidden')).toEqual(
+				'false'
+			);
 		});
 	});
 });
diff --git a/libs/components/src/lib/popup/popup.template.ts b/libs/components/src/lib/popup/popup.template.ts
index 8dbf09a93b..29d41b08fa 100644
--- a/libs/components/src/lib/popup/popup.template.ts
+++ b/libs/components/src/lib/popup/popup.template.ts
@@ -1,19 +1,21 @@
 import { html, ref, when } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import { Elevation } from '../elevation/elevation';
 import { Button } from '../button/button';
 import type { Popup } from './popup';
 
-const getClasses = ({
-	open, dismissible, alternate
-}: Popup) => classNames(
-	'control',
-	['open', Boolean(open)],
-	['dismissible', Boolean(dismissible)],
-	['alternate', Boolean(alternate)]
-);
+const getClasses = ({ open, dismissible, alternate }: Popup) =>
+	classNames(
+		'control',
+		['open', Boolean(open)],
+		['dismissible', Boolean(dismissible)],
+		['alternate', Boolean(alternate)]
+	);
 
 /**
  * The template for the Popup component.
@@ -31,16 +33,24 @@ export const popupTemplate: (
 
 	return html`
   <${elevationTag}>
-	  <div class="popup-wrapper ${(x) => x.strategy}" ${ref('popupEl')} part="popup-base">
-			<div class="${getClasses}" aria-hidden="${(x) => x.open ? 'false' : 'true'}"
-				part="${(x) => x.alternate ? 'vvd-theme-alternate' : ''}">
+	  <div class="popup-wrapper ${(x) => x.strategy}" ${ref(
+		'popupEl'
+	)} part="popup-base">
+			<div class="${getClasses}" aria-hidden="${(x) => (x.open ? 'false' : 'true')}"
+				part="${(x) => (x.alternate ? 'vvd-theme-alternate' : '')}">
 				<div class="popup-content">
 					<slot></slot>
-					${when(x => x.dismissible,
-		html<Popup>`<${buttonTag} size="condensed" @click="${x => (x.open = false)}"
-						class="dismissible-button" icon="close-small-solid" shape="pill"></${buttonTag}>`)}
+					${when(
+						(x) => x.dismissible,
+						html<Popup>`<${buttonTag} size="condensed" @click="${(x) =>
+							(x.open = false)}"
+						class="dismissible-button" icon="close-small-solid" shape="pill"></${buttonTag}>`
+					)}
 				</div>
-				${when(x => x.arrow, html<Popup>`<div class="arrow" ${ref('arrowEl')}></div>`)}
+				${when(
+					(x) => x.arrow,
+					html<Popup>`<div class="arrow" ${ref('arrowEl')}></div>`
+				)}
 			</div>
     </div>
   </${elevationTag}>`;
diff --git a/libs/components/src/lib/popup/popup.ts b/libs/components/src/lib/popup/popup.ts
index 23c37eb531..7586e1ffe7 100644
--- a/libs/components/src/lib/popup/popup.ts
+++ b/libs/components/src/lib/popup/popup.ts
@@ -1,6 +1,15 @@
 import { attr, observable } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
-import { arrow, autoUpdate, computePosition, flip, hide, inline, offset, size } from '@floating-ui/dom';
+import {
+	arrow,
+	autoUpdate,
+	computePosition,
+	flip,
+	hide,
+	inline,
+	offset,
+	size,
+} from '@floating-ui/dom';
 import type { Placement, Strategy } from '@floating-ui/dom';
 
 /**
@@ -11,16 +20,25 @@ import type { Placement, Strategy } from '@floating-ui/dom';
  */
 export class Popup extends FoundationElement {
 	get #middleware(): Array<any> {
-		let middleware = [inline(), flip(), hide(), size({
-			apply({availableWidth, availableHeight, elements}) {
-				Object.assign(elements.floating.style, {
-					maxWidth: `${availableWidth}px`,
-					maxHeight: `${availableHeight}px`,
-				});
-			},
-		}),];
+		let middleware = [
+			inline(),
+			flip(),
+			hide(),
+			size({
+				apply({ availableWidth, availableHeight, elements }) {
+					Object.assign(elements.floating.style, {
+						maxWidth: `${availableWidth}px`,
+						maxHeight: `${availableHeight}px`,
+					});
+				},
+			}),
+		];
 		if (this.arrow) {
-			middleware = [offset(12), ...middleware, arrow({ element: this.arrowEl, padding: 10 })];
+			middleware = [
+				offset(12),
+				...middleware,
+				arrow({ element: this.arrowEl, padding: 10 }),
+			];
 		}
 		return middleware;
 	}
@@ -39,7 +57,8 @@ export class Popup extends FoundationElement {
 	 */
 	@attr({
 		mode: 'boolean',
-	}) open = false;
+	})
+	open = false;
 	openChanged(_: boolean, newValue: boolean): void {
 		newValue ? this.$emit('vwc-popup:open') : this.$emit('vwc-popup:close');
 		this.#updateAutoUpdate();
@@ -53,7 +72,8 @@ export class Popup extends FoundationElement {
 	 */
 	@attr({
 		mode: 'boolean',
-	}) dismissible = false;
+	})
+	dismissible = false;
 
 	/**
 	 * adds small triangle to indicate the trigger element
@@ -63,7 +83,8 @@ export class Popup extends FoundationElement {
 	 */
 	@attr({
 		mode: 'boolean',
-	}) arrow = false;
+	})
+	arrow = false;
 
 	/**
 	 * set the color-scheme to dark
@@ -73,7 +94,8 @@ export class Popup extends FoundationElement {
 	 */
 	@attr({
 		mode: 'boolean',
-	}) alternate = false;
+	})
+	alternate = false;
 
 	/**
 	 * the placement of the popup
@@ -118,7 +140,9 @@ export class Popup extends FoundationElement {
 	#updateAutoUpdate() {
 		this.#cleanup?.();
 		if (this.anchorEl && this.open && this.popupEl) {
-			this.#cleanup = autoUpdate(this.anchorEl, this.popupEl, () => this.updatePosition());
+			this.#cleanup = autoUpdate(this.anchorEl, this.popupEl, () =>
+				this.updatePosition()
+			);
 		}
 	}
 
@@ -135,10 +159,12 @@ export class Popup extends FoundationElement {
 		const positionData = await computePosition(this.anchorEl, this.popupEl, {
 			placement: this.placement,
 			strategy: this.strategy,
-			middleware: this.#middleware
+			middleware: this.#middleware,
 		});
 		this.#assignPopupPosition(positionData);
-		if (this.arrow) { this.#assignArrowPosition(positionData); }
+		if (this.arrow) {
+			this.#assignArrowPosition(positionData);
+		}
 	}
 
 	#assignPopupPosition(data: any): void {
@@ -154,16 +180,16 @@ export class Popup extends FoundationElement {
 	#assignArrowPosition(data: any): void {
 		const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
 		const styles = {
-			'left'  : 'calc(100% - 4px)',
-			'right' : '-4px',
-			'top'   : 'calc(100% - 4px)',
-			'bottom': '-4px'
+			left: 'calc(100% - 4px)',
+			right: '-4px',
+			top: 'calc(100% - 4px)',
+			bottom: '-4px',
 		};
 		const staticAxis = data.placement.split('-')[0] as keyof typeof styles;
 
 		Object.assign(this.arrowEl.style, {
 			left: arrowX ? `${arrowX}px` : styles[staticAxis],
-			top:  arrowY ? `${arrowY}px` : styles[staticAxis],
+			top: arrowY ? `${arrowY}px` : styles[staticAxis],
 		});
 	}
 
diff --git a/libs/components/src/lib/popup/ui.test.ts b/libs/components/src/lib/popup/ui.test.ts
index e78d2952c7..f70c8a0ca0 100644
--- a/libs/components/src/lib/popup/ui.test.ts
+++ b/libs/components/src/lib/popup/ui.test.ts
@@ -2,13 +2,13 @@ import { expect, test } from '@playwright/test';
 import type { Page } from '@playwright/test';
 import {
 	loadComponents,
-	loadTemplate
+	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 import type { Popup } from './popup';
 
 const components = ['popup'];
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template =`
+	const template = `
 	<style>
 		.contentWrapper {
 			width: 70px;
@@ -133,16 +133,18 @@ test('should show the component', async ({ page }: { page: Page }) => {
 	// RUn script
 	await page.evaluate(() => {
 		const mainAnchor = document.querySelector('#mainTestAnchor') as HTMLElement;
-		document.querySelectorAll('#mainTestAnchor ~ vwc-popup').forEach((popup: Popup) => popup.anchor = mainAnchor);
+		document
+			.querySelectorAll('#mainTestAnchor ~ vwc-popup')
+			.forEach((popup: Popup) => (popup.anchor = mainAnchor));
 		const indexAnchor = document.querySelector('#anchor-index') as HTMLElement;
-		document.querySelectorAll('#anchor-index ~ vwc-popup').forEach((popup: Popup) => popup.anchor = indexAnchor);
+		document
+			.querySelectorAll('#anchor-index ~ vwc-popup')
+			.forEach((popup: Popup) => (popup.anchor = indexAnchor));
 	});
 
 	const testWrapper = await page.$('#wrapper');
-	await page.waitForLoadState('networkidle');+
-
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/popup.png',
-		);
+	await page.waitForLoadState('networkidle');
+	+expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/popup.png'
+	);
 });
diff --git a/libs/components/src/lib/progress-ring/definition.ts b/libs/components/src/lib/progress-ring/definition.ts
index 717b9b49aa..610bcd46a7 100644
--- a/libs/components/src/lib/progress-ring/definition.ts
+++ b/libs/components/src/lib/progress-ring/definition.ts
@@ -1,9 +1,9 @@
-import type {FoundationElementDefinition} from '@microsoft/fast-foundation';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { registerFactory } from '../../shared/design-system';
 import styles from './progress-ring.scss?inline';
 
-import {ProgressRing} from './progress-ring';
-import {ProgressRingTemplate as template} from './progress-ring.template';
+import { ProgressRing } from './progress-ring';
+import { ProgressRingTemplate as template } from './progress-ring.template';
 
 export type { ProgressRingConnotation } from './progress-ring';
 
diff --git a/libs/components/src/lib/progress-ring/index.ts b/libs/components/src/lib/progress-ring/index.ts
index 0090c938ad..5cd699d0ea 100644
--- a/libs/components/src/lib/progress-ring/index.ts
+++ b/libs/components/src/lib/progress-ring/index.ts
@@ -1,4 +1,3 @@
 import { registerProgressRing } from './definition';
 
-
 registerProgressRing();
diff --git a/libs/components/src/lib/progress-ring/progress-ring.spec.ts b/libs/components/src/lib/progress-ring/progress-ring.spec.ts
index c28e325aad..4e82d12a4b 100644
--- a/libs/components/src/lib/progress-ring/progress-ring.spec.ts
+++ b/libs/components/src/lib/progress-ring/progress-ring.spec.ts
@@ -1,6 +1,6 @@
 import { axe, elementUpdated, fixture, getBaseElement } from '@vivid-nx/shared';
-import {Connotation} from '../enums';
-import {ProgressRing} from './progress-ring';
+import { Connotation } from '../enums';
+import { ProgressRing } from './progress-ring';
 import '.';
 
 const COMPONENT_TAG = 'vwc-progress-ring';
@@ -16,18 +16,15 @@ describe('vwc-progress-ring', () => {
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-progress-ring', async () => {
-			expect(element)
-				.toBeInstanceOf(ProgressRing);
+			expect(element).toBeInstanceOf(ProgressRing);
 		});
 
 		it('should reflect min and max', async function () {
 			element.min = 10;
 			element.max = 90;
 			await elementUpdated(element);
-			expect(element.getAttribute('min'))
-				.toEqual(element.min.toString());
-			expect(element.getAttribute('max'))
-				.toEqual(element.max.toString());
+			expect(element.getAttribute('min')).toEqual(element.min.toString());
+			expect(element.getAttribute('max')).toEqual(element.max.toString());
 		});
 	});
 
@@ -35,8 +32,7 @@ describe('vwc-progress-ring', () => {
 		it('should reflect to host', async function () {
 			element.value = 50;
 			await elementUpdated(element);
-			expect(element.getAttribute('value'))
-				.toEqual('50');
+			expect(element.getAttribute('value')).toEqual('50');
 		});
 
 		it('should set percentComplete to percentage of the range', async function () {
@@ -52,21 +48,22 @@ describe('vwc-progress-ring', () => {
 			await elementUpdated(element);
 			const percentWithSmallRange = element.percentComplete;
 
-			expect(percentWithBigRange)
-				.toEqual(25);
-			expect(percentWithSmallRange)
-				.toEqual(50);
+			expect(percentWithBigRange).toEqual(25);
+			expect(percentWithSmallRange).toEqual(50);
 		});
 
 		it('should set the determinate div width to percentComplete', async function () {
 			element.min = 0;
 			element.max = 100;
 			element.value = 25;
-			const expectedValue = element.value * 44 / 100;
+			const expectedValue = (element.value * 44) / 100;
 			await elementUpdated(element);
-			const determinateDiv = element.shadowRoot?.querySelector('.determinate') as HTMLElement;
-			expect(determinateDiv?.style.strokeDasharray)
-				.toEqual(`${expectedValue}px 44px`);
+			const determinateDiv = element.shadowRoot?.querySelector(
+				'.determinate'
+			) as HTMLElement;
+			expect(determinateDiv?.style.strokeDasharray).toEqual(
+				`${expectedValue}px 44px`
+			);
 		});
 	});
 
@@ -79,62 +76,62 @@ describe('vwc-progress-ring', () => {
 			element.paused = false;
 			await elementUpdated(element);
 			const pausedAttributeExistsWhenFalse = element.hasAttribute('paused');
-			expect(pausedAttributeExistsOnInit)
-				.toEqual(false);
-			expect(pausedAttributeExistsWhenTrue)
-				.toEqual(true);
-			expect(pausedAttributeExistsWhenFalse)
-				.toEqual(false);
+			expect(pausedAttributeExistsOnInit).toEqual(false);
+			expect(pausedAttributeExistsWhenTrue).toEqual(true);
+			expect(pausedAttributeExistsWhenFalse).toEqual(false);
 		});
 
 		it('should set class paused on base element', async function () {
 			const baseDiv = element.shadowRoot?.querySelector('.base');
-			const pausedClassExistsBeforeChange = baseDiv?.classList.contains('paused');
+			const pausedClassExistsBeforeChange =
+				baseDiv?.classList.contains('paused');
 			element.paused = true;
 			await elementUpdated(element);
-			const pausedClassExistsAfterChange = baseDiv?.classList.contains('paused');
+			const pausedClassExistsAfterChange =
+				baseDiv?.classList.contains('paused');
 
-			expect(pausedClassExistsBeforeChange)
-				.toEqual(false);
-			expect(pausedClassExistsAfterChange)
-				.toEqual(true);
+			expect(pausedClassExistsBeforeChange).toEqual(false);
+			expect(pausedClassExistsAfterChange).toEqual(true);
 		});
 	});
 
 	describe('connotation', function () {
 		it('should be undefined by default', async function () {
-			expect(element.connotation)
-				.toEqual(undefined);
+			expect(element.connotation).toEqual(undefined);
 		});
 
 		it('should reflect its value to host', async function () {
-
 			element.setAttribute('connotation', 'alert');
 			await elementUpdated(element);
 			const connotationPropertyAfterAttributeChange = element.connotation;
 
 			element.connotation = Connotation.Success;
 			await elementUpdated(element);
-			const connotationAttributeAfterPropertyChange = element.getAttribute('connotation');
+			const connotationAttributeAfterPropertyChange =
+				element.getAttribute('connotation');
 
-			expect(connotationPropertyAfterAttributeChange)
-				.toEqual(Connotation.Alert);
-			expect(connotationAttributeAfterPropertyChange)
-				.toEqual(Connotation.Success);
+			expect(connotationPropertyAfterAttributeChange).toEqual(
+				Connotation.Alert
+			);
+			expect(connotationAttributeAfterPropertyChange).toEqual(
+				Connotation.Success
+			);
 		});
 
 		it('should set connotation on the base div', async function () {
 			const connotation = Connotation.CTA;
 			const baseDiv = element.shadowRoot?.querySelector('.base');
-			const connotationClassExistsBeforeChange = baseDiv?.classList.contains(`connotation-${connotation}`);
+			const connotationClassExistsBeforeChange = baseDiv?.classList.contains(
+				`connotation-${connotation}`
+			);
 			element.connotation = connotation;
 			await elementUpdated(element);
-			const connotationClassExistsAfterChange = baseDiv?.classList.contains(`connotation-${connotation}`);
+			const connotationClassExistsAfterChange = baseDiv?.classList.contains(
+				`connotation-${connotation}`
+			);
 
-			expect(connotationClassExistsBeforeChange)
-				.toEqual(false);
-			expect(connotationClassExistsAfterChange)
-				.toEqual(true);
+			expect(connotationClassExistsBeforeChange).toEqual(false);
+			expect(connotationClassExistsAfterChange).toEqual(true);
 		});
 	});
 
@@ -145,9 +142,11 @@ describe('vwc-progress-ring', () => {
 		});
 
 		it('should set size class only if exists', async function () {
-			const classListContainsSize = baseElement?.className.split(' ').reduce((contains: boolean, className: string) => {
-				return contains || className.indexOf('size-') > -1;
-			}, false);
+			const classListContainsSize = baseElement?.className
+				.split(' ')
+				.reduce((contains: boolean, className: string) => {
+					return contains || className.indexOf('size-') > -1;
+				}, false);
 			expect(classListContainsSize).toEqual(false);
 		});
 
@@ -181,7 +180,7 @@ describe('vwc-progress-ring', () => {
 			expect(baseElement?.getAttribute('aria-valuemax')).toBe('90');
 			expect(baseElement?.getAttribute('aria-valuenow')).toBe('20');
 		});
-		
+
 		it('should pass html a11y test', async () => {
 			expect(await axe(element)).toHaveNoViolations();
 		});
diff --git a/libs/components/src/lib/progress-ring/progress-ring.template.ts b/libs/components/src/lib/progress-ring/progress-ring.template.ts
index e10c7cede6..fa174fd531 100644
--- a/libs/components/src/lib/progress-ring/progress-ring.template.ts
+++ b/libs/components/src/lib/progress-ring/progress-ring.template.ts
@@ -1,4 +1,4 @@
-import {html, when} from '@microsoft/fast-element';
+import { html, when } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type {
 	ElementDefinitionContext,
@@ -7,12 +7,13 @@ import type {
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { ProgressRing } from './progress-ring';
 
-const getClasses = ({connotation, size, paused}: ProgressRing) => classNames(
-	'base',
-	['disabled', !!paused],
-	[`connotation-${connotation}`, !!connotation],
-	[`size-${size}`, !!size],
-);
+const getClasses = ({ connotation, size, paused }: ProgressRing) =>
+	classNames(
+		'base',
+		['disabled', !!paused],
+		[`connotation-${connotation}`, !!connotation],
+		[`size-${size}`, !!size]
+	);
 const progressSegments: number = 44;
 
 /**
@@ -26,58 +27,45 @@ export const ProgressRingTemplate: (
 	definition: FoundationElementDefinition
 ) => ViewTemplate<ProgressRing> = (
 	_: ElementDefinitionContext
-) => html`<template role="${x => x.ariaLabel ? 'presentation' : null}">
-<div
-        role="progressbar"
-        aria-label="${x => x.ariaLabel}"
-        aria-valuenow="${x => x.value}"
-        aria-valuemin="${x => x.min}"
-        aria-valuemax="${x => x.max}"
-        class="${x => (x.paused ? 'paused' : '')} ${getClasses}"
-    >
-        ${when(
-		x => typeof x.value === 'number',
-		html<ProgressRing>`
-                <svg
-                    class="progress"
-                    viewBox="0 0 16 16"
-                >
-                    <circle
-                        class="background"
-                        cx="8px"
-                        cy="8px"
-                        r="7px"
-                    ></circle>
-                    <circle
-                        class="determinate"
-                        style="stroke-dasharray: ${x =>
-		(progressSegments * x.percentComplete) /
-    100}px ${progressSegments}px"
-                        cx="8px"
-                        cy="8px"
-                        r="7px"
-                    ></circle>
-                </svg>
-            `
-	)}
-        ${when(
-		x => typeof x.value !== 'number', html<ProgressRing>`
-            <svg class="progress" viewBox="0 0 16 16">
-              <circle
-                class="background"
-                cx="8px"
-                cy="8px"
-                r="7px"
-              ></circle>
-              <circle
-                class="indeterminate-indicator-1"
-                cx="8px"
-                cy="8px"
-                r="7px"
-              ></circle>
-            </svg>
-            `
-	)}
-    </div>
+) => html`<template role="${(x) => (x.ariaLabel ? 'presentation' : null)}">
+	<div
+		role="progressbar"
+		aria-label="${(x) => x.ariaLabel}"
+		aria-valuenow="${(x) => x.value}"
+		aria-valuemin="${(x) => x.min}"
+		aria-valuemax="${(x) => x.max}"
+		class="${(x) => (x.paused ? 'paused' : '')} ${getClasses}"
+	>
+		${when(
+			(x) => typeof x.value === 'number',
+			html<ProgressRing>`
+				<svg class="progress" viewBox="0 0 16 16">
+					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
+					<circle
+						class="determinate"
+						style="stroke-dasharray: ${(x) =>
+							(progressSegments * x.percentComplete) /
+							100}px ${progressSegments}px"
+						cx="8px"
+						cy="8px"
+						r="7px"
+					></circle>
+				</svg>
+			`
+		)}
+		${when(
+			(x) => typeof x.value !== 'number',
+			html<ProgressRing>`
+				<svg class="progress" viewBox="0 0 16 16">
+					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
+					<circle
+						class="indeterminate-indicator-1"
+						cx="8px"
+						cy="8px"
+						r="7px"
+					></circle>
+				</svg>
+			`
+		)}
+	</div>
 </template>`;
-
diff --git a/libs/components/src/lib/progress-ring/progress-ring.ts b/libs/components/src/lib/progress-ring/progress-ring.ts
index 521816e09b..26a0a78432 100644
--- a/libs/components/src/lib/progress-ring/progress-ring.ts
+++ b/libs/components/src/lib/progress-ring/progress-ring.ts
@@ -1,20 +1,19 @@
-import {BaseProgress} from '@microsoft/fast-foundation';
-import {attr} from '@microsoft/fast-element';
-import type {Connotation} from '../enums';
-
+import { BaseProgress } from '@microsoft/fast-foundation';
+import { attr } from '@microsoft/fast-element';
+import type { Connotation } from '../enums';
 
 export type ProgressRingConnotation =
-	Connotation.Accent |
-	Connotation.Success |
-	Connotation.Alert |
-	Connotation.CTA;
+	| Connotation.Accent
+	| Connotation.Success
+	| Connotation.Alert
+	| Connotation.CTA;
 
 /**
  * @public
  * @component progress-ring
  */
 export class ProgressRing extends BaseProgress {
-	@attr({attribute: 'aria-label'}) override ariaLabel: string | null = null;
+	@attr({ attribute: 'aria-label' }) override ariaLabel: string | null = null;
 	@attr connotation?: ProgressRingConnotation;
 	@attr size?: -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
 }
diff --git a/libs/components/src/lib/progress/definition.ts b/libs/components/src/lib/progress/definition.ts
index 4957df2546..51667383e0 100644
--- a/libs/components/src/lib/progress/definition.ts
+++ b/libs/components/src/lib/progress/definition.ts
@@ -10,11 +10,13 @@ export type { ProgressConnotation, ProgressShape } from './progress';
 /**
  * The progress element.
  */
-export const progressDefinition = Progress.compose<FoundationElementDefinition>({
-	baseName: 'progress',
-	template: template as any,
-	styles,
-});
+export const progressDefinition = Progress.compose<FoundationElementDefinition>(
+	{
+		baseName: 'progress',
+		template: template as any,
+		styles,
+	}
+);
 
 /**
  * @internal
diff --git a/libs/components/src/lib/progress/index.ts b/libs/components/src/lib/progress/index.ts
index 9df7c73f4b..72350d18d8 100644
--- a/libs/components/src/lib/progress/index.ts
+++ b/libs/components/src/lib/progress/index.ts
@@ -1,4 +1,3 @@
 import { registerProgress } from './definition';
 
-
 registerProgress();
diff --git a/libs/components/src/lib/progress/progress.spec.ts b/libs/components/src/lib/progress/progress.spec.ts
index c93c1f97a4..cb1e81fff0 100644
--- a/libs/components/src/lib/progress/progress.spec.ts
+++ b/libs/components/src/lib/progress/progress.spec.ts
@@ -1,6 +1,6 @@
 import { axe, elementUpdated, fixture, getBaseElement } from '@vivid-nx/shared';
-import {Connotation, Shape} from '../enums';
-import {Progress} from './progress';
+import { Connotation, Shape } from '../enums';
+import { Progress } from './progress';
 import '.';
 
 const COMPONENT_TAG = 'vwc-progress';
@@ -16,55 +16,55 @@ describe('vwc-progress', () => {
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-progress', async () => {
-			expect(element)
-				.toBeInstanceOf(Progress);
+			expect(element).toBeInstanceOf(Progress);
 		});
 
 		it('should reflect min and max', async function () {
 			element.min = 10;
 			element.max = 90;
 			await elementUpdated(element);
-			expect(element.getAttribute('min'))
-				.toEqual(element.min.toString());
-			expect(element.getAttribute('max'))
-				.toEqual(element.max.toString());
+			expect(element.getAttribute('min')).toEqual(element.min.toString());
+			expect(element.getAttribute('max')).toEqual(element.max.toString());
 		});
 	});
 
 	describe('connotation', function () {
 		it('should be undefined by default', async function () {
-			expect(element.connotation)
-				.toEqual(undefined);
+			expect(element.connotation).toEqual(undefined);
 		});
 
 		it('should reflect its value to host', async function () {
-
 			element.setAttribute('connotation', 'alert');
 			await elementUpdated(element);
 			const connotationPropertyAfterAttributeChange = element.connotation;
 
 			element.connotation = Connotation.Success;
 			await elementUpdated(element);
-			const connotationAttributeAfterPropertyChange = element.getAttribute('connotation');
+			const connotationAttributeAfterPropertyChange =
+				element.getAttribute('connotation');
 
-			expect(connotationPropertyAfterAttributeChange)
-				.toEqual(Connotation.Alert);
-			expect(connotationAttributeAfterPropertyChange)
-				.toEqual(Connotation.Success);
+			expect(connotationPropertyAfterAttributeChange).toEqual(
+				Connotation.Alert
+			);
+			expect(connotationAttributeAfterPropertyChange).toEqual(
+				Connotation.Success
+			);
 		});
 
 		it('should set connotation on the base div', async function () {
 			const connotation = Connotation.CTA;
 			const baseDiv = element.shadowRoot?.querySelector('.base');
-			const connotationClassExistsBeforeChange = baseDiv?.classList.contains(`connotation-${connotation}`);
+			const connotationClassExistsBeforeChange = baseDiv?.classList.contains(
+				`connotation-${connotation}`
+			);
 			element.connotation = connotation;
 			await elementUpdated(element);
-			const connotationClassExistsAfterChange = baseDiv?.classList.contains(`connotation-${connotation}`);
+			const connotationClassExistsAfterChange = baseDiv?.classList.contains(
+				`connotation-${connotation}`
+			);
 
-			expect(connotationClassExistsBeforeChange)
-				.toEqual(false);
-			expect(connotationClassExistsAfterChange)
-				.toEqual(true);
+			expect(connotationClassExistsBeforeChange).toEqual(false);
+			expect(connotationClassExistsAfterChange).toEqual(true);
 		});
 	});
 
@@ -77,25 +77,22 @@ describe('vwc-progress', () => {
 			element.paused = false;
 			await elementUpdated(element);
 			const pausedAttributeExistsWhenFalse = element.hasAttribute('paused');
-			expect(pausedAttributeExistsOnInit)
-				.toEqual(false);
-			expect(pausedAttributeExistsWhenTrue)
-				.toEqual(true);
-			expect(pausedAttributeExistsWhenFalse)
-				.toEqual(false);
+			expect(pausedAttributeExistsOnInit).toEqual(false);
+			expect(pausedAttributeExistsWhenTrue).toEqual(true);
+			expect(pausedAttributeExistsWhenFalse).toEqual(false);
 		});
 
 		it('should set class paused on base element', async function () {
 			const baseDiv = element.shadowRoot?.querySelector('.base');
-			const pausedClassExistsBeforeChange = baseDiv?.classList.contains('paused');
+			const pausedClassExistsBeforeChange =
+				baseDiv?.classList.contains('paused');
 			element.paused = true;
 			await elementUpdated(element);
-			const pausedClassExistsAfterChange = baseDiv?.classList.contains('paused');
+			const pausedClassExistsAfterChange =
+				baseDiv?.classList.contains('paused');
 
-			expect(pausedClassExistsBeforeChange)
-				.toEqual(false);
-			expect(pausedClassExistsAfterChange)
-				.toEqual(true);
+			expect(pausedClassExistsBeforeChange).toEqual(false);
+			expect(pausedClassExistsAfterChange).toEqual(true);
 		});
 	});
 
@@ -103,8 +100,7 @@ describe('vwc-progress', () => {
 		it('should reflect to host', async function () {
 			element.value = 50;
 			await elementUpdated(element);
-			expect(element.getAttribute('value'))
-				.toEqual('50');
+			expect(element.getAttribute('value')).toEqual('50');
 		});
 
 		it('should set percentComplete to percentage of the range', async function () {
@@ -120,10 +116,8 @@ describe('vwc-progress', () => {
 			await elementUpdated(element);
 			const percentWithSmallRange = element.percentComplete;
 
-			expect(percentWithBigRange)
-				.toEqual(25);
-			expect(percentWithSmallRange)
-				.toEqual(50);
+			expect(percentWithBigRange).toEqual(25);
+			expect(percentWithSmallRange).toEqual(50);
 		});
 
 		it('should set the determinate div width to percentComplete', async function () {
@@ -131,9 +125,10 @@ describe('vwc-progress', () => {
 			element.max = 100;
 			element.value = 25;
 			await elementUpdated(element);
-			const determinateDiv = element.shadowRoot?.querySelector('.determinate') as HTMLElement;
-			expect(determinateDiv?.style.width)
-				.toEqual(`${element.value}%`);
+			const determinateDiv = element.shadowRoot?.querySelector(
+				'.determinate'
+			) as HTMLElement;
+			expect(determinateDiv?.style.width).toEqual(`${element.value}%`);
 		});
 	});
 
@@ -141,16 +136,14 @@ describe('vwc-progress', () => {
 		it('should reflect reverse on host', async function () {
 			element.reverse = true;
 			await elementUpdated(element);
-			expect(element.hasAttribute('reverse'))
-				.toEqual(true);
+			expect(element.hasAttribute('reverse')).toEqual(true);
 		});
 
 		it('should add class "reverse" to base div', async function () {
 			const baseDiv = element.shadowRoot?.querySelector('.base');
 			element.reverse = true;
 			await elementUpdated(element);
-			expect(baseDiv?.classList.contains('reverse'))
-				.toEqual(true);
+			expect(baseDiv?.classList.contains('reverse')).toEqual(true);
 		});
 	});
 
@@ -158,16 +151,16 @@ describe('vwc-progress', () => {
 		it('should reflect shape on host', async function () {
 			element.shape = Shape.Rounded;
 			await elementUpdated(element);
-			expect(element.getAttribute('shape'))
-				.toEqual(Shape.Rounded);
+			expect(element.getAttribute('shape')).toEqual(Shape.Rounded);
 		});
 
 		it('should add class "shape" to base div', async function () {
 			const baseDiv = element.shadowRoot?.querySelector('.base');
 			element.shape = Shape.Rounded;
 			await elementUpdated(element);
-			expect(baseDiv?.classList.contains(`shape-${Shape.Rounded}`))
-				.toEqual(true);
+			expect(baseDiv?.classList.contains(`shape-${Shape.Rounded}`)).toEqual(
+				true
+			);
 		});
 	});
 
@@ -192,7 +185,7 @@ describe('vwc-progress', () => {
 			expect(baseElement?.getAttribute('aria-valuemax')).toBe('90');
 			expect(baseElement?.getAttribute('aria-valuenow')).toBe('20');
 		});
-		
+
 		it('should pass html a11y test', async () => {
 			expect(await axe(element)).toHaveNoViolations();
 		});
diff --git a/libs/components/src/lib/progress/progress.template.ts b/libs/components/src/lib/progress/progress.template.ts
index 0442dd0382..c82752702a 100644
--- a/libs/components/src/lib/progress/progress.template.ts
+++ b/libs/components/src/lib/progress/progress.template.ts
@@ -1,22 +1,18 @@
-import {html, when} from '@microsoft/fast-element';
+import { html, when } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
-import type {
-	ElementDefinitionContext,
-} from '@microsoft/fast-foundation';
-import {classNames} from '@microsoft/fast-web-utilities';
-import type {BaseProgress, ProgressOptions} from '@microsoft/fast-foundation';
+import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
+import { classNames } from '@microsoft/fast-web-utilities';
+import type { BaseProgress, ProgressOptions } from '@microsoft/fast-foundation';
 import type { Progress } from './progress';
 
-
-const getClasses = ({
-	connotation, shape, reverse, paused
-}: Progress) => classNames(
-	'base',
-	[`connotation-${connotation}`, Boolean(connotation)],
-	[`shape-${shape}`, Boolean(shape)],
-	['reverse', Boolean(reverse)],
-	['paused', Boolean(paused)],
-);
+const getClasses = ({ connotation, shape, reverse, paused }: Progress) =>
+	classNames(
+		'base',
+		[`connotation-${connotation}`, Boolean(connotation)],
+		[`shape-${shape}`, Boolean(shape)],
+		['reverse', Boolean(reverse)],
+		['paused', Boolean(paused)]
+	);
 
 /**
  * The template for the Progress component.
@@ -25,44 +21,43 @@ const getClasses = ({
  * @public
  */
 
-
 /**
  determinate
  */
 function determinate() {
-	return html<BaseProgress>`
-		<span class="determinate" style="width: ${x => x.percentComplete}%"></span>`;
+	return html<BaseProgress>` <span
+		class="determinate"
+		style="width: ${(x) => x.percentComplete}%"
+	></span>`;
 }
 
 /**
  indeterminate
  */
 function indeterminate() {
-	return html<BaseProgress>`
-		<span class="indeterminate" name="indeterminate">
-			<span class="indicator-1"></span>
-			<span class="indicator-2"></span>
-		 </span>`;
+	return html<BaseProgress>` <span class="indeterminate" name="indeterminate">
+		<span class="indicator-1"></span>
+		<span class="indicator-2"></span>
+	</span>`;
 }
 
 export const ProgressTemplate: (
 	context: ElementDefinitionContext,
 	definition: ProgressOptions
 ) => ViewTemplate<Progress> = (_: ElementDefinitionContext) => {
-	return html`<template role="${x => x.ariaLabel ? 'presentation' : null}">
-    <div
-		role="progressbar"
-		aria-label="${x => x.ariaLabel}"
-		aria-valuenow="${x => x.value}"
-		aria-valuemin="${x => x.min}"
-		aria-valuemax="${x => x.max}"
-		class="${getClasses}"
-    >
-		<div class="progress">
-		  ${when(x => typeof x.value === 'number', determinate())}
-		  ${when(x => typeof x.value !== 'number', indeterminate())}
-    	</div>
-	</div>
-  </template>`;
+	return html`<template role="${(x) => (x.ariaLabel ? 'presentation' : null)}">
+		<div
+			role="progressbar"
+			aria-label="${(x) => x.ariaLabel}"
+			aria-valuenow="${(x) => x.value}"
+			aria-valuemin="${(x) => x.min}"
+			aria-valuemax="${(x) => x.max}"
+			class="${getClasses}"
+		>
+			<div class="progress">
+				${when((x) => typeof x.value === 'number', determinate())}
+				${when((x) => typeof x.value !== 'number', indeterminate())}
+			</div>
+		</div>
+	</template>`;
 };
-
diff --git a/libs/components/src/lib/progress/progress.ts b/libs/components/src/lib/progress/progress.ts
index 61b5e095cc..9b5a35790c 100644
--- a/libs/components/src/lib/progress/progress.ts
+++ b/libs/components/src/lib/progress/progress.ts
@@ -1,46 +1,43 @@
 import { BaseProgress } from '@microsoft/fast-foundation';
-import {attr} from '@microsoft/fast-element';
-import type {Connotation, ConnotationDecorative, Shape} from '../enums';
+import { attr } from '@microsoft/fast-element';
+import type { Connotation, ConnotationDecorative, Shape } from '../enums';
 
 export type ProgressConnotation =
-	Connotation.Accent |
-	Connotation.Success |
-	Connotation.Alert |
-	Connotation.CTA |
-	ConnotationDecorative.Pacific;
+	| Connotation.Accent
+	| Connotation.Success
+	| Connotation.Alert
+	| Connotation.CTA
+	| ConnotationDecorative.Pacific;
 
-export type ProgressShape =
-	Shape.Rounded |
-	Shape.Sharp;
+export type ProgressShape = Shape.Rounded | Shape.Sharp;
 /**
  * @public
  * @component progress
  */
 export class Progress extends BaseProgress {
-	@attr({attribute: 'aria-label'}) override ariaLabel: string | null = null;
+	@attr({ attribute: 'aria-label' }) override ariaLabel: string | null = null;
 
 	/**
-	* Indicates the progress' shape.
-	*
-	* @public
-	* HTML Attribute: shape
-	*/
+	 * Indicates the progress' shape.
+	 *
+	 * @public
+	 * HTML Attribute: shape
+	 */
 	@attr() shape?: ProgressShape;
 
 	/**
-	* Indicates the progress' connotation.
-	*
-	* @public
-	* HTML Attribute: connotation
-	*/
+	 * Indicates the progress' connotation.
+	 *
+	 * @public
+	 * HTML Attribute: connotation
+	 */
 	@attr() connotation?: ProgressConnotation;
 
 	/**
-	* Indicates the progress' reverse status.
-	*
-	* @public
-	* HTML Attribute: reverse
-	*/
-	@attr({mode: 'boolean'}) reverse = false;
+	 * Indicates the progress' reverse status.
+	 *
+	 * @public
+	 * HTML Attribute: reverse
+	 */
+	@attr({ mode: 'boolean' }) reverse = false;
 }
-
diff --git a/libs/components/src/lib/progress/ui.test.ts b/libs/components/src/lib/progress/ui.test.ts
index 9980467be5..3f618eb56f 100644
--- a/libs/components/src/lib/progress/ui.test.ts
+++ b/libs/components/src/lib/progress/ui.test.ts
@@ -1,5 +1,5 @@
-import {expect, test} from '@playwright/test';
-import type {Page} from '@playwright/test';
+import { expect, test } from '@playwright/test';
+import type { Page } from '@playwright/test';
 import {
 	loadComponents,
 	loadTemplate,
@@ -7,7 +7,7 @@ import {
 
 const components = ['progress'];
 
-test('should show the component', async ({page}: { page: Page }) => {
+test('should show the component', async ({ page }: { page: Page }) => {
 	const template = `
 		<div style="margin: 5px;">
     <vwc-progress min="0" max="100" value="25" connotation="accent"></vwc-progress>
@@ -65,8 +65,7 @@ test('should show the component', async ({page}: { page: Page }) => {
 
 	await page.waitForLoadState('networkidle');
 
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/progress.png'
-		);
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/progress.png'
+	);
 });
diff --git a/libs/components/src/lib/radio-group/index.ts b/libs/components/src/lib/radio-group/index.ts
index 9c7b2c1342..64120c401d 100644
--- a/libs/components/src/lib/radio-group/index.ts
+++ b/libs/components/src/lib/radio-group/index.ts
@@ -1,4 +1,3 @@
 import { registerRadioGroup } from './definition';
 
-
 registerRadioGroup();
diff --git a/libs/components/src/lib/radio-group/radio-group.spec.ts b/libs/components/src/lib/radio-group/radio-group.spec.ts
index 1a15c1c659..f257ebc4af 100644
--- a/libs/components/src/lib/radio-group/radio-group.spec.ts
+++ b/libs/components/src/lib/radio-group/radio-group.spec.ts
@@ -1,4 +1,10 @@
-import { axe, elementUpdated, fixture, getBaseElement, listenToFormSubmission } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getBaseElement,
+	listenToFormSubmission,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import type { Radio } from '../radio/radio';
 import { RadioGroup } from './radio-group';
@@ -36,7 +42,7 @@ describe('vwc-radio-group', () => {
 		});
 
 		it('should set the radio buttons with proper default values', async () => {
-			expect(radios.every(r => r.checked)).toBeFalsy();
+			expect(radios.every((r) => r.checked)).toBeFalsy();
 			expect(radios[0].getAttribute('tabindex')).toBe('0');
 			expect(radios[1].getAttribute('tabindex')).toBe('-1');
 			expect(radios[2].getAttribute('tabindex')).toBe('-1');
@@ -54,8 +60,12 @@ describe('vwc-radio-group', () => {
 
 	describe('orientation', () => {
 		it('should update the positioning region when changing orientation', async () => {
-			const positioningRegion = element.shadowRoot?.querySelector('.positioning-region');
-			const positioningRegionDefaultClassList = Array.from(positioningRegion?.classList as DOMTokenList);
+			const positioningRegion = element.shadowRoot?.querySelector(
+				'.positioning-region'
+			);
+			const positioningRegionDefaultClassList = Array.from(
+				positioningRegion?.classList as DOMTokenList
+			);
 			element.setAttribute('orientation', 'vertical');
 			await elementUpdated(element);
 
@@ -68,7 +78,9 @@ describe('vwc-radio-group', () => {
 		it('should disable all radio buttons it contains when set to disabled', async () => {
 			element.setAttribute('disabled', '');
 			await elementUpdated(element);
-			expect(radios.every(r => r.getAttribute('disabled') === '')).toBeTruthy();
+			expect(
+				radios.every((r) => r.getAttribute('disabled') === '')
+			).toBeTruthy();
 		});
 	});
 
@@ -77,7 +89,9 @@ describe('vwc-radio-group', () => {
 			element.setAttribute('value', '1');
 			await elementUpdated(element);
 
-			expect(radios[1].checked && !radios[0].checked && !radios[2].checked).toBeTruthy();
+			expect(
+				radios[1].checked && !radios[0].checked && !radios[2].checked
+			).toBeTruthy();
 			expect(radios[0].getAttribute('tabindex')).toBe('-1');
 			expect(radios[1].getAttribute('tabindex')).toBe('0');
 			expect(radios[2].getAttribute('tabindex')).toBe('-1');
@@ -119,7 +133,9 @@ describe('vwc-radio-group', () => {
 			const radioGroupValueBefore = element.value;
 
 			radios[0].focus();
-			radios[0].dispatchEvent(new KeyboardEvent('keydown', { key: key, bubbles: true }));
+			radios[0].dispatchEvent(
+				new KeyboardEvent('keydown', { key: key, bubbles: true })
+			);
 			await elementUpdated(element);
 
 			expect(radioCheckedBefore).toBeFalsy();
@@ -138,7 +154,9 @@ describe('vwc-radio-group', () => {
 
 		it('should loop over radio buttons', async () => {
 			getBaseElement(radios[2]).click();
-			radios[2].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+			radios[2].dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })
+			);
 			await elementUpdated(element);
 
 			expect(radios[0].checked).toBeTruthy();
diff --git a/libs/components/src/lib/radio-group/radio-group.template.ts b/libs/components/src/lib/radio-group/radio-group.template.ts
index 75c47f5f8f..829b5f6397 100644
--- a/libs/components/src/lib/radio-group/radio-group.template.ts
+++ b/libs/components/src/lib/radio-group/radio-group.template.ts
@@ -12,22 +12,34 @@ import type { RadioGroup } from './radio-group';
  * @param context - element definition context
  * @public
  */
-export const RadioGroupTemplate: (context: ElementDefinitionContext) => ViewTemplate<RadioGroup> = (context: ElementDefinitionContext) => {
+export const RadioGroupTemplate: (
+	context: ElementDefinitionContext
+) => ViewTemplate<RadioGroup> = (context: ElementDefinitionContext) => {
 	return html<RadioGroup>`
 		<template
 			role="radiogroup"
-			aria-disabled="${x => x.disabled}"
-			aria-readonly="${x => x.readOnly}"
-			aria-orientation="${x => x.orientation}"
+			aria-disabled="${(x) => x.disabled}"
+			aria-readonly="${(x) => x.readOnly}"
+			aria-orientation="${(x) => x.orientation}"
 			@click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
 			@keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
 			@focusout="${(x, c) => x.focusOutHandler(c.event as FocusEvent)}"
 		>
+			${when(
+				(x) => x.label,
+				html<RadioGroup>`<label>${(x) => x.label}</label>`
+			)}
 
-			${when(x => x.label, html<RadioGroup>`<label>${x => x.label}</label>`)}
-
-			<div class="positioning-region ${x => x.orientation === Orientation.horizontal ? 'horizontal' : 'vertical'}">
-				<slot ${slotted({ property: 'slottedRadioButtons', filter: elements(context.tagFor(Radio)) })}></slot>
+			<div
+				class="positioning-region ${(x) =>
+					x.orientation === Orientation.horizontal ? 'horizontal' : 'vertical'}"
+			>
+				<slot
+					${slotted({
+						property: 'slottedRadioButtons',
+						filter: elements(context.tagFor(Radio)),
+					})}
+				></slot>
 			</div>
 		</template>
 	`;
diff --git a/libs/components/src/lib/radio/definition.ts b/libs/components/src/lib/radio/definition.ts
index 0cfbe03e41..e1c4453d9b 100644
--- a/libs/components/src/lib/radio/definition.ts
+++ b/libs/components/src/lib/radio/definition.ts
@@ -11,7 +11,7 @@ import { RadioTemplate as template } from './radio.template';
 export const radioDefinition = Radio.compose<RadioOptions>({
 	baseName: 'radio',
 	template: template as any,
-	styles
+	styles,
 });
 
 /**
diff --git a/libs/components/src/lib/radio/index.ts b/libs/components/src/lib/radio/index.ts
index 6382336fa4..cf2ec6de61 100644
--- a/libs/components/src/lib/radio/index.ts
+++ b/libs/components/src/lib/radio/index.ts
@@ -1,4 +1,3 @@
 import { registerRadio } from './definition';
 
-
 registerRadio();
diff --git a/libs/components/src/lib/radio/radio.spec.ts b/libs/components/src/lib/radio/radio.spec.ts
index db0f78f498..5be28cd90c 100644
--- a/libs/components/src/lib/radio/radio.spec.ts
+++ b/libs/components/src/lib/radio/radio.spec.ts
@@ -1,13 +1,23 @@
-import { axe, createFormHTML, elementUpdated, fixture, getBaseElement, listenToFormSubmission } from '@vivid-nx/shared';
+import {
+	axe,
+	createFormHTML,
+	elementUpdated,
+	fixture,
+	getBaseElement,
+	listenToFormSubmission,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
-import {Connotation} from '../enums';
+import { Connotation } from '../enums';
 import { Radio } from './radio';
 import '.';
 import { radioDefinition } from './definition';
 
 const COMPONENT_TAG = 'vwc-radio';
 
-async function setBoolAttributeOn(el: Radio, attr: string): Promise<DOMTokenList> {
+async function setBoolAttributeOn(
+	el: Radio,
+	attr: string
+): Promise<DOMTokenList> {
 	el.toggleAttribute(attr, true);
 	await elementUpdated(el);
 	return getBaseElement(el).classList;
@@ -46,7 +56,7 @@ describe('vwc-radio', () => {
 
 	describe('checked', () => {
 		let base: HTMLElement;
-		beforeEach(() => base = getBaseElement(element));
+		beforeEach(() => (base = getBaseElement(element)));
 
 		it('should set the element property and the base class when the attribute is set', async () => {
 			const classes = await setBoolAttributeOn(element, 'checked');
@@ -67,11 +77,13 @@ describe('vwc-radio', () => {
 			expect(element.checked).toBeTruthy();
 		};
 
-		it('should switch to checked when clicked',
-			async () => await sendEventAndVerifyChecked(new MouseEvent('click')));
+		it('should switch to checked when clicked', async () =>
+			await sendEventAndVerifyChecked(new MouseEvent('click')));
 
-		it('should switch to checked when space is pressed',
-			async () => await sendEventAndVerifyChecked(new KeyboardEvent('keypress', { key: ' ' })));
+		it('should switch to checked when space is pressed', async () =>
+			await sendEventAndVerifyChecked(
+				new KeyboardEvent('keypress', { key: ' ' })
+			));
 	});
 
 	describe('connotation', function () {
@@ -79,10 +91,11 @@ describe('vwc-radio', () => {
 			const connotation = Connotation.CTA;
 			(element as any).connotation = 'cta';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.base')
-				?.classList
-				.contains(`connotation-${connotation}`))
-				.toEqual(true);
+			expect(
+				element.shadowRoot
+					?.querySelector('.base')
+					?.classList.contains(`connotation-${connotation}`)
+			).toEqual(true);
 		});
 	});
 
@@ -99,23 +112,23 @@ describe('vwc-radio', () => {
 			const formId = 'testFormId';
 			const fieldName = 'testRadio';
 			const checked = 'on';
-			const {form: formElement} = createFormHTML<Radio>({
+			const { form: formElement } = createFormHTML<Radio>({
 				fieldName,
 				formId,
 				formWrapper,
 				checked,
-				componentTagName: COMPONENT_TAG
+				componentTagName: COMPONENT_TAG,
 			});
 			document.body.append(formWrapper);
 
 			const submitPromise = listenToFormSubmission(formElement);
 			formElement.requestSubmit();
-			(await submitPromise).forEach((formDataValue: any, formDataKey: string) => {
-				expect(formDataKey)
-					.toEqual(fieldName);
-				expect(formDataValue)
-					.toEqual(checked);
-			});
+			(await submitPromise).forEach(
+				(formDataValue: any, formDataKey: string) => {
+					expect(formDataKey).toEqual(fieldName);
+					expect(formDataValue).toEqual(checked);
+				}
+			);
 		});
 	});
 
@@ -162,7 +175,7 @@ describe('vwc-radio', () => {
 
 			it('should render the correct a11y attributes', async () => {
 				const baseElement = getBaseElement(element);
-				
+
 				expect(baseElement?.getAttribute('role')).toBe('radio');
 				expect(baseElement?.getAttribute('aria-label')).toBe('Label');
 			});
diff --git a/libs/components/src/lib/radio/radio.template.ts b/libs/components/src/lib/radio/radio.template.ts
index 6e322c385a..73434ed452 100644
--- a/libs/components/src/lib/radio/radio.template.ts
+++ b/libs/components/src/lib/radio/radio.template.ts
@@ -5,14 +5,14 @@ import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
 
 import type { Radio } from './radio';
 
-
-const getClasses = ({ connotation, checked, readOnly, disabled }: Radio) => classNames(
-	'base',
-	[`connotation-${connotation}`, Boolean(connotation)],
-	['checked', Boolean(checked)],
-	['readonly', Boolean(readOnly)],
-	['disabled', Boolean(disabled)]
-);
+const getClasses = ({ connotation, checked, readOnly, disabled }: Radio) =>
+	classNames(
+		'base',
+		[`connotation-${connotation}`, Boolean(connotation)],
+		['checked', Boolean(checked)],
+		['readonly', Boolean(readOnly)],
+		['disabled', Boolean(disabled)]
+	);
 
 /**
  * The template for the Radio component.
@@ -20,21 +20,27 @@ const getClasses = ({ connotation, checked, readOnly, disabled }: Radio) => clas
  * @param context - element definition context
  * @public
  */
-export const RadioTemplate: (context: ElementDefinitionContext) => ViewTemplate<Radio> = () => {
-
-	return html<Radio>`<template role="${x => x.ariaLabel ? 'presentation' : null}">
-	<div class="${getClasses}"
-		role="radio"
-		aria-label="${x => x.ariaLabel}"
-		aria-checked="${x => x.checked}"
-		aria-required="${x => x.required}"
-		aria-disabled="${x => x.disabled}"
-		@keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
-		@click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+export const RadioTemplate: (
+	context: ElementDefinitionContext
+) => ViewTemplate<Radio> = () => {
+	return html<Radio>`<template
+		role="${(x) => (x.ariaLabel ? 'presentation' : null)}"
 	>
-		<div class="control">
+		<div
+			class="${getClasses}"
+			role="radio"
+			aria-label="${(x) => x.ariaLabel}"
+			aria-checked="${(x) => x.checked}"
+			aria-required="${(x) => x.required}"
+			aria-disabled="${(x) => x.disabled}"
+			@keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
+			@click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+		>
+			<div class="control"></div>
+			${when(
+				(x) => x.label,
+				html<Radio>`<label class="label">${(x) => x.label}</label>`
+			)}
 		</div>
-		${when(x => x.label, html<Radio>`<label class="label">${x => x.label}</label>`)}
-	</div>
-</template>`;
+	</template>`;
 };
diff --git a/libs/components/src/lib/radio/radio.ts b/libs/components/src/lib/radio/radio.ts
index 8788672a37..d4da5aa92d 100644
--- a/libs/components/src/lib/radio/radio.ts
+++ b/libs/components/src/lib/radio/radio.ts
@@ -1,22 +1,23 @@
 import { attr } from '@microsoft/fast-element';
 import { Radio as FastRadio } from '@microsoft/fast-foundation';
-import type {Connotation} from '../enums.js';
+import type { Connotation } from '../enums.js';
 
 /**
  * Types of Checkbox connotation.
  *
  * @public
  */
-export type RadioConnotation = Extract<Connotation,
-| Connotation.Accent
-| Connotation.CTA>;
+export type RadioConnotation = Extract<
+	Connotation,
+	Connotation.Accent | Connotation.CTA
+>;
 
 /**
  * @public
  * @component radio
  */
 export class Radio extends FastRadio {
-	@attr({attribute: 'aria-label'}) override ariaLabel: string | null = null;
+	@attr({ attribute: 'aria-label' }) override ariaLabel: string | null = null;
 
 	/**
 	 * Indicates the radio's label.
@@ -35,5 +36,4 @@ export class Radio extends FastRadio {
 	 * HTML Attribute: connotation
 	 */
 	@attr connotation?: RadioConnotation;
-
 }
diff --git a/libs/components/src/lib/range-slider/range-slider.spec.ts b/libs/components/src/lib/range-slider/range-slider.spec.ts
index 4f876f883b..d18acb744d 100644
--- a/libs/components/src/lib/range-slider/range-slider.spec.ts
+++ b/libs/components/src/lib/range-slider/range-slider.spec.ts
@@ -21,19 +21,23 @@ describe('vwc-range-slider', () => {
 	};
 
 	beforeEach(async () => {
-		jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(1000);
+		jest
+			.spyOn(HTMLElement.prototype, 'clientWidth', 'get')
+			.mockReturnValue(1000);
 		jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
 			bottom: 1000,
 			top: 0,
-			left: 0
+			left: 0,
 		} as DOMRect);
 		element = (await fixture(
 			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
 		)) as RangeSlider;
-		const [start, end] = element.shadowRoot?.querySelectorAll('.thumb-container') as unknown as HTMLElement[];
+		const [start, end] = element.shadowRoot?.querySelectorAll(
+			'.thumb-container'
+		) as unknown as HTMLElement[];
 		thumbs = {
 			start,
-			end
+			end,
 		};
 	});
 
@@ -54,7 +58,10 @@ describe('vwc-range-slider', () => {
 	});
 
 	describe('markers', () => {
-		const getMarkersDiv = () => getControlElement(element).querySelector('.positioning-region > .track > .mark') as HTMLDivElement;
+		const getMarkersDiv = () =>
+			getControlElement(element).querySelector(
+				'.positioning-region > .track > .mark'
+			) as HTMLDivElement;
 
 		it('should not display markers by default', async () => {
 			expect(getMarkersDiv()).toBeNull();
@@ -101,37 +108,43 @@ describe('vwc-range-slider', () => {
 	});
 
 	describe('orientation', () => {
-		describe.each(['horizontal', 'vertical'] as Orientation[])('%s orientation', (orientation) => {
-			beforeEach(async () => {
-				element.orientation = orientation;
-				await elementUpdated(element);
-			});
-
-			it(`should set class ${orientation} on control`, async () => {
-				expect(getControlElement(element).classList).toContain(orientation);
-			});
-
-			it('should set aria-orientation on both thumbs', async () => {
-				expect(thumbs.start.getAttribute('aria-orientation')).toBe(orientation);
-				expect(thumbs.end.getAttribute('aria-orientation')).toBe(orientation);
-			});
-		});
+		describe.each(['horizontal', 'vertical'] as Orientation[])(
+			'%s orientation',
+			(orientation) => {
+				beforeEach(async () => {
+					element.orientation = orientation;
+					await elementUpdated(element);
+				});
+
+				it(`should set class ${orientation} on control`, async () => {
+					expect(getControlElement(element).classList).toContain(orientation);
+				});
+
+				it('should set aria-orientation on both thumbs', async () => {
+					expect(thumbs.start.getAttribute('aria-orientation')).toBe(
+						orientation
+					);
+					expect(thumbs.end.getAttribute('aria-orientation')).toBe(orientation);
+				});
+			}
+		);
 	});
 
-	describe('connotation',  () => {
-		const possibleConnotations = [
-			Connotation.Accent,
-			Connotation.CTA
-		] as const;
+	describe('connotation', () => {
+		const possibleConnotations = [Connotation.Accent, Connotation.CTA] as const;
 
-		it.each(possibleConnotations)('should set the connotation class for "%s"', async function (connotation) {
-			element.connotation = connotation;
-			await elementUpdated(element);
-			expect(getControlElement(element)
-				?.classList
-				.contains(`connotation-${connotation}`))
-				.toEqual(true);
-		});
+		it.each(possibleConnotations)(
+			'should set the connotation class for "%s"',
+			async function (connotation) {
+				element.connotation = connotation;
+				await elementUpdated(element);
+				expect(
+					getControlElement(element)?.classList.contains(
+						`connotation-${connotation}`
+					)
+				).toEqual(true);
+			}
+		);
 	});
 
 	describe('start', () => {
@@ -157,7 +170,9 @@ describe('vwc-range-slider', () => {
 		});
 
 		it('should not set the start value if the field is dirty', async () => {
-			thumbs.start.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+			thumbs.start.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowRight' })
+			);
 
 			element.initialStart = '5';
 
@@ -214,7 +229,9 @@ describe('vwc-range-slider', () => {
 		});
 
 		it('should not set the end value if the field is dirty', async () => {
-			thumbs.end.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+			thumbs.end.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowLeft' })
+			);
 
 			element.initialEnd = '5';
 
@@ -248,7 +265,6 @@ describe('vwc-range-slider', () => {
 		});
 	});
 
-
 	describe.each([
 		{
 			thumb: 'start',
@@ -259,36 +275,44 @@ describe('vwc-range-slider', () => {
 			thumb: 'end',
 			lowerBound: 'startAsNumber',
 			upperBound: 'max',
-		}
-	] as const)('$thumb thumb', ({thumb, lowerBound, upperBound}) => {
+		},
+	] as const)('$thumb thumb', ({ thumb, lowerBound, upperBound }) => {
 		beforeEach(() => {
 			element.step = 0.5;
 		});
 
-		it.each(['ArrowRight', 'ArrowDown'])('should increment by step when pressing %s key', async (key) => {
-			element[thumb] = '5';
-			thumbs[thumb].focus();
+		it.each(['ArrowRight', 'ArrowDown'])(
+			'should increment by step when pressing %s key',
+			async (key) => {
+				element[thumb] = '5';
+				thumbs[thumb].focus();
 
-			thumbs[thumb].dispatchEvent(new KeyboardEvent('keydown', { key }));
+				thumbs[thumb].dispatchEvent(new KeyboardEvent('keydown', { key }));
 
-			expect(element[thumb]).toBe('5.5');
-		});
+				expect(element[thumb]).toBe('5.5');
+			}
+		);
 
-		it.each(['ArrowLeft', 'ArrowUp'])('should decrement by step when pressing %s key', async (key) => {
-			element[thumb] = '5';
-			thumbs[thumb].focus();
+		it.each(['ArrowLeft', 'ArrowUp'])(
+			'should decrement by step when pressing %s key',
+			async (key) => {
+				element[thumb] = '5';
+				thumbs[thumb].focus();
 
-			thumbs[thumb].dispatchEvent(new KeyboardEvent('keydown', { key }));
+				thumbs[thumb].dispatchEvent(new KeyboardEvent('keydown', { key }));
 
-			expect(element[thumb]).toBe('4.5');
-		});
+				expect(element[thumb]).toBe('4.5');
+			}
+		);
 
 		it(`should not decrement below ${lowerBound}`, async () => {
 			element[thumb] = '5';
 			element[lowerBound] = 5;
 			thumbs[thumb].focus();
 
-			thumbs[thumb].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+			thumbs[thumb].dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowLeft' })
+			);
 
 			expect(element[thumb]).toBe('5');
 		});
@@ -298,7 +322,9 @@ describe('vwc-range-slider', () => {
 			element[upperBound] = 5;
 			thumbs[thumb].focus();
 
-			thumbs[thumb].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+			thumbs[thumb].dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowRight' })
+			);
 
 			expect(element[thumb]).toBe('5');
 		});
@@ -308,7 +334,9 @@ describe('vwc-range-slider', () => {
 			element[lowerBound] = 2;
 			thumbs[thumb].focus();
 
-			thumbs[thumb].dispatchEvent(new KeyboardEvent('keydown', { key: 'Home' }));
+			thumbs[thumb].dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'Home' })
+			);
 
 			expect(element[thumb]).toBe('2');
 		});
@@ -326,9 +354,9 @@ describe('vwc-range-slider', () => {
 
 	describe('clicking on track', () => {
 		describe.each([
-			{ orientation: 'horizontal', coordinate: 'pageX', },
-			{ orientation: 'vertical', coordinate: 'pageY', }
-		])('with $orientation orientation', ({orientation, coordinate}) => {
+			{ orientation: 'horizontal', coordinate: 'pageX' },
+			{ orientation: 'vertical', coordinate: 'pageY' },
+		])('with $orientation orientation', ({ orientation, coordinate }) => {
 			beforeEach(async () => {
 				element.orientation = orientation as Orientation;
 				await elementUpdated(element);
@@ -388,9 +416,9 @@ describe('vwc-range-slider', () => {
 
 	describe('dragging', () => {
 		describe.each([
-			{ orientation: 'horizontal', coordinate: 'pageX', },
-			{ orientation: 'vertical', coordinate: 'pageY', }
-		])('with $orientation orientation', ({orientation, coordinate}) => {
+			{ orientation: 'horizontal', coordinate: 'pageX' },
+			{ orientation: 'vertical', coordinate: 'pageY' },
+		])('with $orientation orientation', ({ orientation, coordinate }) => {
 			const mouseDown = (thumb: HTMLElement, value: number) => {
 				const mouseEvent = new MouseEvent('mousedown');
 				Object.defineProperty(mouseEvent, coordinate, { value });
@@ -421,7 +449,12 @@ describe('vwc-range-slider', () => {
 				window.dispatchEvent(new TouchEvent('touchend'));
 			};
 
-			const dragThumb = (thumb: HTMLElement, from: number, to: number, touch = false) => {
+			const dragThumb = (
+				thumb: HTMLElement,
+				from: number,
+				to: number,
+				touch = false
+			) => {
 				mouseDown(thumb, from);
 				if (touch) {
 					touchMove(to);
@@ -487,23 +520,26 @@ describe('vwc-range-slider', () => {
 				expect(element.start).toBe('7');
 			});
 
-			it.each(['input', 'change', 'input:start'])('should emit %s event only when the value changes', async (eventName) => {
-				const eventSpy = jest.fn();
-				element.addEventListener(eventName, eventSpy);
+			it.each(['input', 'change', 'input:start'])(
+				'should emit %s event only when the value changes',
+				async (eventName) => {
+					const eventSpy = jest.fn();
+					element.addEventListener(eventName, eventSpy);
 
-				mouseDown(thumbs.start, 0);
-				mouseMove(50);
-				mouseMove(100);
-				mouseUp();
+					mouseDown(thumbs.start, 0);
+					mouseMove(50);
+					mouseMove(100);
+					mouseUp();
 
-				expect(eventSpy).toHaveBeenCalledTimes(1);
-			});
+					expect(eventSpy).toHaveBeenCalledTimes(1);
+				}
+			);
 		});
 	});
 
 	describe('form reset', () => {
 		it('should reset the range to initial values when the form is reset', async () => {
-			const ORIGINAL_START= '3';
+			const ORIGINAL_START = '3';
 			const ORIGINAL_END = '7';
 			const form = fixture(`
 				<form>
@@ -544,13 +580,14 @@ describe('vwc-range-slider', () => {
 	describe('form value', () => {
 		// Cannot properly end-to-end test form value because jsdom does not support ElementInternals
 		// Instead we mock the setFormValue method and test that it is called with the correct value
-		const getFormValue = () => jest.mocked(element.setFormValue).mock.lastCall![0] as FormData;
+		const getFormValue = () =>
+			jest.mocked(element.setFormValue).mock.lastCall![0] as FormData;
 
 		beforeEach(() => {
 			element.setFormValue = jest.fn();
 		});
 
-		it('should set the form value with name, start and end',  () => {
+		it('should set the form value with name, start and end', () => {
 			element.name = 'name';
 			element.start = '3';
 			element.end = '7';
@@ -563,9 +600,15 @@ describe('vwc-range-slider', () => {
 		element.step = 0.1;
 		thumbs.start.focus();
 
-		thumbs.start.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
-		thumbs.start.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
-		thumbs.start.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+		thumbs.start.dispatchEvent(
+			new KeyboardEvent('keydown', { key: 'ArrowRight' })
+		);
+		thumbs.start.dispatchEvent(
+			new KeyboardEvent('keydown', { key: 'ArrowRight' })
+		);
+		thumbs.start.dispatchEvent(
+			new KeyboardEvent('keydown', { key: 'ArrowRight' })
+		);
 
 		expect(element.start).toBe('0.3');
 	});
@@ -605,5 +648,3 @@ describe('vwc-range-slider', () => {
 		});
 	});
 });
-
-
diff --git a/libs/components/src/lib/range-slider/range-slider.template.ts b/libs/components/src/lib/range-slider/range-slider.template.ts
index e030a38a11..fe7f1f676a 100644
--- a/libs/components/src/lib/range-slider/range-slider.template.ts
+++ b/libs/components/src/lib/range-slider/range-slider.template.ts
@@ -10,7 +10,7 @@ const getClasses = ({ disabled, connotation }: RangeSlider) =>
 	classNames(
 		'control',
 		['disabled', Boolean(disabled)],
-		[`connotation-${connotation}`, Boolean(connotation)],
+		[`connotation-${connotation}`, Boolean(connotation)]
 	);
 
 /**
@@ -19,47 +19,56 @@ const getClasses = ({ disabled, connotation }: RangeSlider) =>
  * @param context - element definition context
  * @public
  */
-export const RangeSliderTemplate: (context: ElementDefinitionContext) => ViewTemplate<RangeSlider> = () => {
-	return html<RangeSlider>`
-		<template @mousedown="${(x, c) => x._onMouseDown(c.event as MouseEvent)}">
-			<div class="${getClasses} ${x => x.orientation}">
-				<div class="positioning-region">
-					<div ${ref('_trackEl')} class="track">
-						<div class="track-start" style="${x => x._selectedRangeCss}"></div>
-						${when(
-		x => x.markers,
-		html<RangeSlider>`${(x) => getMarkersTemplate(x.orientation === Orientation.horizontal, Math.floor((x.max - x.min) / x.step))}`
-	)}
-					</div>
-					<div
-						${ref('_startThumbEl')}
-						class="thumb-container"
-						style="${x => x._startThumbCss}"
-						role="slider"
-						tabindex="${x => (x.disabled ? null : 0)}"
-						aria-label="${x => x.ariaStartLabel || x.locale.rangeSlider.startThumbLabel}"
-						aria-valuetext="${x => x.valueTextFormatter(x.start)}"
-						aria-valuenow="${x => x.start}"
-						aria-valuemin="${x => x.min}"
-						aria-valuemax="${x => x.end}"
-						aria-disabled="${x => x.disabled}"
-						aria-orientation="${x => x.orientation}"
-					></div>
-					<div
-						${ref('_endThumbEl')}
-						class="thumb-container"
-						style="${x => x._endThumbCss}"
-						role="slider"
-						tabindex="${x => (x.disabled ? null : 0)}"
-						aria-label="${x => x.ariaEndLabel || x.locale.rangeSlider.endThumbLabel}"
-						aria-valuetext="${x => x.valueTextFormatter(x.end)}"
-						aria-valuenow="${x => x.end}"
-						aria-valuemin="${x => x.start}"
-						aria-valuemax="${x => x.max}"
-						aria-disabled="${x => x.disabled}"
-						aria-orientation="${x => x.orientation}"
-					></div>
+export const RangeSliderTemplate: (
+	context: ElementDefinitionContext
+) => ViewTemplate<RangeSlider> = () => {
+	return html<RangeSlider>` <template
+		@mousedown="${(x, c) => x._onMouseDown(c.event as MouseEvent)}"
+	>
+		<div class="${getClasses} ${(x) => x.orientation}">
+			<div class="positioning-region">
+				<div ${ref('_trackEl')} class="track">
+					<div class="track-start" style="${(x) => x._selectedRangeCss}"></div>
+					${when(
+						(x) => x.markers,
+						html<RangeSlider>`${(x) =>
+							getMarkersTemplate(
+								x.orientation === Orientation.horizontal,
+								Math.floor((x.max - x.min) / x.step)
+							)}`
+					)}
 				</div>
+				<div
+					${ref('_startThumbEl')}
+					class="thumb-container"
+					style="${(x) => x._startThumbCss}"
+					role="slider"
+					tabindex="${(x) => (x.disabled ? null : 0)}"
+					aria-label="${(x) =>
+						x.ariaStartLabel || x.locale.rangeSlider.startThumbLabel}"
+					aria-valuetext="${(x) => x.valueTextFormatter(x.start)}"
+					aria-valuenow="${(x) => x.start}"
+					aria-valuemin="${(x) => x.min}"
+					aria-valuemax="${(x) => x.end}"
+					aria-disabled="${(x) => x.disabled}"
+					aria-orientation="${(x) => x.orientation}"
+				></div>
+				<div
+					${ref('_endThumbEl')}
+					class="thumb-container"
+					style="${(x) => x._endThumbCss}"
+					role="slider"
+					tabindex="${(x) => (x.disabled ? null : 0)}"
+					aria-label="${(x) =>
+						x.ariaEndLabel || x.locale.rangeSlider.endThumbLabel}"
+					aria-valuetext="${(x) => x.valueTextFormatter(x.end)}"
+					aria-valuenow="${(x) => x.end}"
+					aria-valuemin="${(x) => x.start}"
+					aria-valuemax="${(x) => x.max}"
+					aria-disabled="${(x) => x.disabled}"
+					aria-orientation="${(x) => x.orientation}"
+				></div>
 			</div>
-		</template>`;
+		</div>
+	</template>`;
 };
diff --git a/libs/components/src/lib/range-slider/range-slider.ts b/libs/components/src/lib/range-slider/range-slider.ts
index 6e5e7e1808..0eb856dd9c 100644
--- a/libs/components/src/lib/range-slider/range-slider.ts
+++ b/libs/components/src/lib/range-slider/range-slider.ts
@@ -1,4 +1,8 @@
-import { attr, nullableNumberConverter, observable } from '@microsoft/fast-element';
+import {
+	attr,
+	nullableNumberConverter,
+	observable,
+} from '@microsoft/fast-element';
 import { applyMixins } from '@microsoft/fast-foundation';
 import {
 	keyArrowDown,
@@ -6,22 +10,27 @@ import {
 	keyEnd,
 	keyHome,
 	limit,
-	Orientation
+	Orientation,
 } from '@microsoft/fast-web-utilities';
-import { keyArrowLeft, keyArrowRight } from '@microsoft/fast-web-utilities/dist/key-codes';
+import {
+	keyArrowLeft,
+	keyArrowRight,
+} from '@microsoft/fast-web-utilities/dist/key-codes';
 import { Connotation } from '../enums';
-import { type FormElement, formElements, Localized } from '../../shared/patterns';
+import {
+	type FormElement,
+	formElements,
+	Localized,
+} from '../../shared/patterns';
 import { FormAssociatedRangeSlider } from './range-slider.form-associated';
 import { roundToStepValue } from './utils/roundToStepValue';
 import { inverseLerp, lerp } from './utils/lerp';
 
-export type RangeSliderConnotation =
-	Connotation.Accent |
-	Connotation.CTA;
+export type RangeSliderConnotation = Connotation.Accent | Connotation.CTA;
 
 const Direction = {
 	Increment: 1,
-	Decrement: -1
+	Decrement: -1,
 } as const;
 type Direction = typeof Direction[keyof typeof Direction];
 
@@ -68,8 +77,8 @@ export class RangeSlider extends FormAssociatedRangeSlider {
 	 * HTML Attribute: start
 	 */
 	@attr({ mode: 'fromView', attribute: 'start' }) initialStart:
-	| string
-	| undefined;
+		| string
+		| undefined;
 
 	/**
 	 * @internal
@@ -181,7 +190,10 @@ export class RangeSlider extends FormAssociatedRangeSlider {
 		this.end = next.toString();
 	}
 
-	#updateValues({start, end}: {start?: string, end?: string}, emitEvents: boolean = true) {
+	#updateValues(
+		{ start, end }: { start?: string; end?: string },
+		emitEvents: boolean = true
+	) {
 		if (start === this.start) {
 			start = undefined;
 		}
@@ -254,7 +266,7 @@ export class RangeSlider extends FormAssociatedRangeSlider {
 			[thumb]: this.#roundToNearestStep(
 				thumb,
 				Number(this[thumb]) + direction * this.step
-			).toString()
+			).toString(),
 		});
 	}
 
@@ -338,7 +350,7 @@ export class RangeSlider extends FormAssociatedRangeSlider {
 	override formResetCallback() {
 		this.#updateValues({
 			start: this.initialStart ?? this.min.toString(),
-			end: this.initialEnd ?? this.max.toString()
+			end: this.initialEnd ?? this.max.toString(),
 		});
 		super.formResetCallback();
 	}
@@ -369,12 +381,11 @@ export class RangeSlider extends FormAssociatedRangeSlider {
 
 	get #thumbConstraints() {
 		return {
-			start: {min: this.min, max: this.endAsNumber},
-			end: {min: this.startAsNumber, max: this.max},
+			start: { min: this.min, max: this.endAsNumber },
+			end: { min: this.startAsNumber, max: this.max },
 		};
 	}
 
-
 	#draggingThumb: false | 'start' | 'end' = false;
 
 	/**
@@ -400,7 +411,9 @@ export class RangeSlider extends FormAssociatedRangeSlider {
 			this.orientation === Orientation.horizontal
 				? ['right', 'width']
 				: ['bottom', 'height'];
-		const transition = `transition: ${this.#draggingThumb ? 'none' : 'all 0.2s ease'};`;
+		const transition = `transition: ${
+			this.#draggingThumb ? 'none' : 'all 0.2s ease'
+		};`;
 
 		this._startThumbCss = `${dirProp}: ${startOffsetPct}%; ${transition}`;
 		this._endThumbCss = `${dirProp}: ${endOffsetPct}%; ${transition}`;
@@ -419,22 +432,20 @@ export class RangeSlider extends FormAssociatedRangeSlider {
 		const [minPos, maxPos, valuePos] =
 			this.orientation === Orientation.horizontal
 				? [
-					this._trackEl!.clientLeft,
-					this._trackEl!.clientWidth,
-					e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
-				]
+						this._trackEl!.clientLeft,
+						this._trackEl!.clientWidth,
+						e.pageX -
+							document.documentElement.scrollLeft -
+							this.getBoundingClientRect().left,
+				  ]
 				: [
-					trackClientRect.top,
-					trackClientRect.bottom,
-					e.pageY - document.documentElement.scrollTop
-				];
+						trackClientRect.top,
+						trackClientRect.bottom,
+						e.pageY - document.documentElement.scrollTop,
+				  ];
 
 		// Remap to value space
-		return lerp(
-			this.min,
-			this.max,
-			inverseLerp(minPos, maxPos, valuePos)
-		);
+		return lerp(this.min, this.max, inverseLerp(minPos, maxPos, valuePos));
 	}
 
 	#roundToNearestStep(thumb: 'start' | 'end', value: number) {
@@ -471,16 +482,30 @@ export class RangeSlider extends FormAssociatedRangeSlider {
 	#registerThumbListeners() {
 		for (const thumb of ['start', 'end'] as const) {
 			this.#thumbs[thumb]!.addEventListener('keydown', this.#onThumbKeydown);
-			this.#thumbs[thumb]!.addEventListener('mousedown', this.#onThumbMousedown, { passive: true });
-			this.#thumbs[thumb]!.addEventListener('touchstart', this.#onThumbMousedown, { passive: true });
+			this.#thumbs[thumb]!.addEventListener(
+				'mousedown',
+				this.#onThumbMousedown,
+				{ passive: true }
+			);
+			this.#thumbs[thumb]!.addEventListener(
+				'touchstart',
+				this.#onThumbMousedown,
+				{ passive: true }
+			);
 		}
 	}
 
 	#unregisterThumbListeners() {
 		for (const thumb of ['start', 'end'] as const) {
 			this.#thumbs[thumb]!.removeEventListener('keydown', this.#onThumbKeydown);
-			this.#thumbs[thumb]!.removeEventListener('mousedown', this.#onThumbMousedown);
-			this.#thumbs[thumb]!.removeEventListener('touchstart', this.#onThumbMousedown);
+			this.#thumbs[thumb]!.removeEventListener(
+				'mousedown',
+				this.#onThumbMousedown
+			);
+			this.#thumbs[thumb]!.removeEventListener(
+				'touchstart',
+				this.#onThumbMousedown
+			);
 		}
 	}
 
@@ -499,12 +524,14 @@ export class RangeSlider extends FormAssociatedRangeSlider {
 
 		// Choose closer thumb
 		const thumb =
-				startDistance < endDistance ||
-				(startDistance === endDistance && value < Number(this.start))
-					? 'start'
-					: 'end';
+			startDistance < endDistance ||
+			(startDistance === endDistance && value < Number(this.start))
+				? 'start'
+				: 'end';
 
-		this.#updateValues({ [thumb]: `${this.#roundToNearestStep(thumb, value)}` });
+		this.#updateValues({
+			[thumb]: `${this.#roundToNearestStep(thumb, value)}`,
+		});
 		this.#draggingThumb = thumb;
 		this.#thumbs[thumb]!.focus();
 
@@ -517,15 +544,17 @@ export class RangeSlider extends FormAssociatedRangeSlider {
 		}
 
 		let target = event.target as HTMLElement;
-		if (target === this._endThumbEl && this.startAsNumber === this.max && this.endAsNumber === this.max) {
+		if (
+			target === this._endThumbEl &&
+			this.startAsNumber === this.max &&
+			this.endAsNumber === this.max
+		) {
 			// Prevent both thumbs getting stuck at the max value
 			target = this._startThumbEl!;
 		}
 
 		target.focus();
-		this.#draggingThumb = target === this._startThumbEl
-			? 'start'
-			: 'end';
+		this.#draggingThumb = target === this._startThumbEl ? 'start' : 'end';
 
 		this.#registerDragHandlers();
 	};
@@ -535,10 +564,10 @@ export class RangeSlider extends FormAssociatedRangeSlider {
 
 		if (e.key === keyHome) {
 			e.preventDefault();
-			this.#updateValues({[thumb]: `${this.#thumbConstraints[thumb].min}`});
+			this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].min}` });
 		} else if (e.key === keyEnd) {
 			e.preventDefault();
-			this.#updateValues({[thumb]: `${this.#thumbConstraints[thumb].max}`});
+			this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].max}` });
 		} else if (!e.shiftKey) {
 			switch (e.key) {
 				case keyArrowRight:
@@ -583,7 +612,12 @@ export class RangeSlider extends FormAssociatedRangeSlider {
 
 		const value = this.#calculateValueFromMouseEvent(sourceEvent);
 
-		this.#updateValues({[this.#draggingThumb]: `${this.#roundToNearestStep(this.#draggingThumb, value)}`});
+		this.#updateValues({
+			[this.#draggingThumb]: `${this.#roundToNearestStep(
+				this.#draggingThumb,
+				value
+			)}`,
+		});
 	};
 
 	#onDragEnd = () => {
diff --git a/libs/components/src/lib/range-slider/ui.test.ts b/libs/components/src/lib/range-slider/ui.test.ts
index 77c5089767..e386a38e18 100644
--- a/libs/components/src/lib/range-slider/ui.test.ts
+++ b/libs/components/src/lib/range-slider/ui.test.ts
@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import type { Page } from '@playwright/test';
 import {
 	loadComponents,
-	loadTemplate
+	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
 const components = ['range-slider'];
@@ -64,7 +64,8 @@ test('should show the component', async ({ page }: { page: Page }) => {
 });
 
 test('selecting a range', async ({ page }: { page: Page }) => {
-	const template = '<vwc-range-slider style="width: 1000px;"></vwc-range-slider>';
+	const template =
+		'<vwc-range-slider style="width: 1000px;"></vwc-range-slider>';
 
 	await page.setViewportSize({ width: 1000, height: 600 });
 
diff --git a/libs/components/src/lib/range-slider/utils/lerp.ts b/libs/components/src/lib/range-slider/utils/lerp.ts
index 00fbb3b19f..2510ed5963 100644
--- a/libs/components/src/lib/range-slider/utils/lerp.ts
+++ b/libs/components/src/lib/range-slider/utils/lerp.ts
@@ -3,7 +3,8 @@ import { limit } from '@microsoft/fast-web-utilities';
 /**
  * Linearly interpolates between two values.
  */
-export const lerp = (a: number, b: number, value: number) => a + (b - a) * value;
+export const lerp = (a: number, b: number, value: number) =>
+	a + (b - a) * value;
 
 /**
  * Returns the fraction of a value between a and b.
diff --git a/libs/components/src/lib/range-slider/utils/roundToStepValue.ts b/libs/components/src/lib/range-slider/utils/roundToStepValue.ts
index a31e434d30..79e26ade03 100644
--- a/libs/components/src/lib/range-slider/utils/roundToStepValue.ts
+++ b/libs/components/src/lib/range-slider/utils/roundToStepValue.ts
@@ -4,8 +4,8 @@ const getDecimalPlaces = (num: number) => {
 		0,
 		// Number of digits right of decimal point.
 		(match[1] ? match[1].length : 0) -
-		// Adjust for scientific notation.
-		(match[2] ? +match[2] : 0)
+			// Adjust for scientific notation.
+			(match[2] ? +match[2] : 0)
 	);
 };
 
diff --git a/libs/components/src/lib/select/definition.ts b/libs/components/src/lib/select/definition.ts
index 60c4d5a57e..acc9fbbfb9 100644
--- a/libs/components/src/lib/select/definition.ts
+++ b/libs/components/src/lib/select/definition.ts
@@ -16,13 +16,18 @@ export type { SelectAppearance, SelectShape } from './select';
 export const selectDefinition = Select.compose<SelectOptions>({
 	baseName: 'select',
 	template: template as any,
-	styles
+	styles,
 });
 
 /**
  * @internal
  */
-export const selectRegistries = [selectDefinition(), ...popupRegistries, ...iconRegistries, ...listboxOptionRegistries];
+export const selectRegistries = [
+	selectDefinition(),
+	...popupRegistries,
+	...iconRegistries,
+	...listboxOptionRegistries,
+];
 
 /**
  * Registers the select elements with the design system.
diff --git a/libs/components/src/lib/select/index.ts b/libs/components/src/lib/select/index.ts
index fd2e3b6f8c..26c9ef773d 100644
--- a/libs/components/src/lib/select/index.ts
+++ b/libs/components/src/lib/select/index.ts
@@ -1,4 +1,3 @@
 import { registerSelect } from './definition';
 
-
 registerSelect();
diff --git a/libs/components/src/lib/select/select.spec.ts b/libs/components/src/lib/select/select.spec.ts
index 1f8584bda0..483c878bd1 100644
--- a/libs/components/src/lib/select/select.spec.ts
+++ b/libs/components/src/lib/select/select.spec.ts
@@ -1,4 +1,9 @@
-import { axe, elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getControlElement,
+} from '@vivid-nx/shared';
 import { Select } from './select';
 import '.';
 
@@ -10,12 +15,11 @@ describe('vwc-select', () => {
 
 	let element: Select;
 
-	global.ResizeObserver = jest.fn()
-		.mockImplementation(() => ({
-			observe: jest.fn(),
-			unobserve: jest.fn(),
-			disconnect: jest.fn()
-		}));
+	global.ResizeObserver = jest.fn().mockImplementation(() => ({
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+		disconnect: jest.fn(),
+	}));
 
 	beforeAll(() => {
 		originalScrollIntoView = HTMLElement.prototype.scrollIntoView;
@@ -48,7 +52,7 @@ describe('vwc-select', () => {
 	});
 
 	describe('option label', function () {
-		it('should show the options\'s label instead of the text', async function () {
+		it("should show the options's label instead of the text", async function () {
 			const label = 'label';
 			element.innerHTML = `
 				<vwc-option label="${label}" value="1" text="Option 1"></vwc-option>
@@ -57,7 +61,11 @@ describe('vwc-select', () => {
 				`;
 			await elementUpdated(element);
 
-			expect(getControlElement(element).querySelector('.selected-value')?.textContent?.trim()).toEqual(label);
+			expect(
+				getControlElement(element)
+					.querySelector('.selected-value')
+					?.textContent?.trim()
+			).toEqual(label);
 		});
 	});
 
@@ -79,7 +87,9 @@ describe('vwc-select', () => {
 		it('should change selection when changed', async () => {
 			element.selectedIndex = 2;
 			await elementUpdated(element);
-			expect(element.selectedOptions).toEqual([element.querySelector('option:nth-child(3)')]);
+			expect(element.selectedOptions).toEqual([
+				element.querySelector('option:nth-child(3)'),
+			]);
 		});
 	});
 
@@ -89,22 +99,19 @@ describe('vwc-select', () => {
 			element.label = labelText;
 			await elementUpdated(element);
 			const labelElement = element.shadowRoot?.querySelector('label');
-			expect(labelElement?.textContent?.trim())
-				.toEqual(labelText);
+			expect(labelElement?.textContent?.trim()).toEqual(labelText);
 		});
 
 		it('should show label element only if label is set', async function () {
 			const labelElement = element.shadowRoot?.querySelector('label');
-			expect(labelElement)
-				.toBeNull();
+			expect(labelElement).toBeNull();
 		});
 
 		it('should not set aria-label on host', async function () {
 			const labelText = 'label';
 			element.label = labelText;
 			await elementUpdated(element);
-			expect(element.getAttribute('aria-label'))
-				.toEqual(null);
+			expect(element.getAttribute('aria-label')).toEqual(null);
 		});
 	});
 
@@ -113,36 +120,40 @@ describe('vwc-select', () => {
 			const ariaLabel = 'label';
 			element.ariaLabel = ariaLabel;
 			await elementUpdated(element);
-			expect(element.getAttribute('aria-label'))
-				.toEqual(ariaLabel);
+			expect(element.getAttribute('aria-label')).toEqual(ariaLabel);
 		});
 	});
 
 	describe('icon', () => {
 		it('should have a icon slot', async () => {
-			expect(Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))).toEqual(true);
+			expect(
+				Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))
+			).toEqual(true);
 		});
 
 		it('should have an icon when icon is set without slotted icon', async function () {
 			const icon = 'info';
 			element.icon = icon;
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector(ICON_SELECTOR)?.getAttribute('name')).toEqual(icon);
+			expect(
+				element.shadowRoot?.querySelector(ICON_SELECTOR)?.getAttribute('name')
+			).toEqual(icon);
 		});
 	});
 
 	describe('helper text', function () {
 		it('should render the helper text when attribute is set on select', async function () {
-			const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-text');
+			const helperTextElementWithoutText =
+				element.shadowRoot?.querySelector('.helper-text');
 			const helperText = 'Helper Text';
 			element.helperText = helperText;
 			await elementUpdated(element);
-			expect(helperTextElementWithoutText)
-				.toBeNull();
-			expect(element.shadowRoot?.querySelector('.helper-message')
-				?.textContent
-				?.trim())
-				.toEqual(helperText);
+			expect(helperTextElementWithoutText).toBeNull();
+			expect(
+				element.shadowRoot
+					?.querySelector('.helper-message')
+					?.textContent?.trim()
+			).toEqual(helperText);
 		});
 	});
 
@@ -150,13 +161,19 @@ describe('vwc-select', () => {
 		it('should add success class to base when successText is set', async function () {
 			(element as any).successText = 'success';
 			await elementUpdated(element);
-			expect(getControlElement(element).classList.contains('success')).toBeTruthy();
+			expect(
+				getControlElement(element).classList.contains('success')
+			).toBeTruthy();
 		});
 
 		it('should show success text when successText is set', async function () {
 			(element as any).successText = 'success';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.success-message')?.textContent?.trim()).toEqual('success');
+			expect(
+				element.shadowRoot
+					?.querySelector('.success-message')
+					?.textContent?.trim()
+			).toEqual('success');
 		});
 
 		it('should remove success text when undefined', async function () {
@@ -166,20 +183,23 @@ describe('vwc-select', () => {
 			await elementUpdated(element);
 			expect(element.shadowRoot?.querySelector('.success-message')).toBeNull();
 		});
-
 	});
 
 	describe('error Text', () => {
 		it('should add error class to base when errorText is set', async function () {
 			(element as any).errorText = 'error';
 			await elementUpdated(element);
-			expect(getControlElement(element).classList.contains('error')).toBeTruthy();
+			expect(
+				getControlElement(element).classList.contains('error')
+			).toBeTruthy();
 		});
 
 		it('should show error text when errorText is set', async function () {
 			(element as any).errorText = 'error';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()).toEqual('error');
+			expect(
+				element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()
+			).toEqual('error');
 		});
 
 		it('should remove error text when undefined', async function () {
@@ -189,25 +209,28 @@ describe('vwc-select', () => {
 			await elementUpdated(element);
 			expect(element.shadowRoot?.querySelector('.error-message')).toBeNull();
 		});
-
 	});
 
 	describe('disabled', function () {
 		it('should set disabled class for select when disabled is true', async () => {
-			const disableClassExistsWithDisabledFalse = Boolean(element.shadowRoot?.querySelector('.control.disabled'));
+			const disableClassExistsWithDisabledFalse = Boolean(
+				element.shadowRoot?.querySelector('.control.disabled')
+			);
 
 			element.toggleAttribute('disabled', true);
 			await elementUpdated(element);
 
 			expect(disableClassExistsWithDisabledFalse).toBeFalsy();
-			expect(element.shadowRoot?.querySelector('.control.disabled')).toBeTruthy();
+			expect(
+				element.shadowRoot?.querySelector('.control.disabled')
+			).toBeTruthy();
 		});
 	});
 
 	describe('multiple', () => {
-
 		it('should set multiple attribute on the element', async () => {
-			const multipleAttributeExistsWithMultipleFalse = element.hasAttribute('multiple');
+			const multipleAttributeExistsWithMultipleFalse =
+				element.hasAttribute('multiple');
 
 			element.multiple = true;
 			await elementUpdated(element);
@@ -253,8 +276,9 @@ describe('vwc-select', () => {
 
 			const control = element.shadowRoot?.querySelector('.control');
 
-			expect(control?.classList.contains(`appearance-${appearance}`))
-				.toBeTruthy();
+			expect(
+				control?.classList.contains(`appearance-${appearance}`)
+			).toBeTruthy();
 		});
 	});
 
@@ -266,8 +290,7 @@ describe('vwc-select', () => {
 
 			const control = element.shadowRoot?.querySelector('.control');
 
-			expect(control?.classList.contains(`shape-${shape}`))
-				.toBeTruthy();
+			expect(control?.classList.contains(`shape-${shape}`)).toBeTruthy();
 		});
 	});
 
@@ -284,8 +307,7 @@ describe('vwc-select', () => {
 		it('should set error message to empty string when pristine', async function () {
 			setValidityToError();
 			await elementUpdated(element);
-			expect(element.errorValidationMessage)
-				.toEqual('');
+			expect(element.errorValidationMessage).toEqual('');
 		});
 
 		it('should validate after a blur', async function () {
@@ -328,13 +350,14 @@ describe('vwc-select', () => {
 
 		it('should leave popup open if relatedTarget is same as element', async () => {
 			element.open = true;
-			element.dispatchEvent(new FocusEvent('focusout', { relatedTarget: element }));
+			element.dispatchEvent(
+				new FocusEvent('focusout', { relatedTarget: element })
+			);
 			expect(element.open).toBeTruthy();
 		});
 	});
 
 	describe('keydown', function () {
-
 		it('should toggle selection if spacebar pressed in single selection mode', async () => {
 			element.open = true;
 
@@ -416,7 +439,9 @@ describe('vwc-select', () => {
 
 	describe('slot', () => {
 		it('should have a meta slot', async function () {
-			expect(Boolean(element.shadowRoot?.querySelector('slot[name="meta"]'))).toEqual(true);
+			expect(
+				Boolean(element.shadowRoot?.querySelector('slot[name="meta"]'))
+			).toEqual(true);
 		});
 
 		it('should add class .has-meta if the meta slot is occupied', async function () {
@@ -425,8 +450,9 @@ describe('vwc-select', () => {
 			element.appendChild(slottedElement);
 			await elementUpdated(element);
 
-			expect(getControlElement(element).classList.contains('has-meta')).toBeTruthy();
-
+			expect(
+				getControlElement(element).classList.contains('has-meta')
+			).toBeTruthy();
 		});
 	});
 
@@ -449,11 +475,15 @@ describe('vwc-select', () => {
 		it('should remove strategy attribute from popup', async function () {
 			element.fixedDropdown = true;
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.popup')?.hasAttribute('strategy')).toBeFalsy();
+			expect(
+				element.shadowRoot?.querySelector('.popup')?.hasAttribute('strategy')
+			).toBeFalsy();
 		});
 
 		it('should add strategy="absolute" when fixedDropdown is false', function () {
-			expect(element.shadowRoot?.querySelector('.popup')?.getAttribute('strategy')).toEqual('absolute');
+			expect(
+				element.shadowRoot?.querySelector('.popup')?.getAttribute('strategy')
+			).toEqual('absolute');
 		});
 
 		it('should set --_select-fixed-width to the width of the select on open', async function () {
@@ -464,7 +494,9 @@ describe('vwc-select', () => {
 			await toggleOpenState(true);
 
 			const popup = element.shadowRoot?.querySelector('.popup') as HTMLElement;
-			const variableValue = window.getComputedStyle(popup).getPropertyValue('--_select-fixed-width');
+			const variableValue = window
+				.getComputedStyle(popup)
+				.getPropertyValue('--_select-fixed-width');
 			expect(variableValue).toEqual(`${width}px`);
 		});
 
@@ -475,11 +507,12 @@ describe('vwc-select', () => {
 			setBoundingClientRect(width);
 			await toggleOpenState(true);
 			const popup = element.shadowRoot?.querySelector('.popup') as HTMLElement;
-			const variableValue = window.getComputedStyle(popup).getPropertyValue('--_select-fixed-width');
+			const variableValue = window
+				.getComputedStyle(popup)
+				.getPropertyValue('--_select-fixed-width');
 			expect(variableValue).toEqual(`${expectedWidth}px`);
 		});
 
-
 		it('should update the width on each opening', async function () {
 			const width = 50;
 			element.fixedDropdown = true;
@@ -492,7 +525,9 @@ describe('vwc-select', () => {
 			await toggleOpenState(true);
 
 			const popup = element.shadowRoot?.querySelector('.popup') as HTMLElement;
-			const variableValue = window.getComputedStyle(popup).getPropertyValue('--_select-fixed-width');
+			const variableValue = window
+				.getComputedStyle(popup)
+				.getPropertyValue('--_select-fixed-width');
 			expect(variableValue).toEqual(`${width}px`);
 		});
 	});
@@ -509,7 +544,9 @@ describe('vwc-select', () => {
 
 		it('should recieve array of options', async () => {
 			await elementUpdated(element);
-			expect(element.options[1]).toEqual(element.querySelector('option:nth-child(2)'));
+			expect(element.options[1]).toEqual(
+				element.querySelector('option:nth-child(2)')
+			);
 		});
 	});
 
@@ -525,7 +562,9 @@ describe('vwc-select', () => {
 
 		it('should recieve array of selectedOptions', async () => {
 			await elementUpdated(element);
-			expect(element.selectedOptions[0]).toEqual(element.querySelector('option:nth-child(2)'));
+			expect(element.selectedOptions[0]).toEqual(
+				element.querySelector('option:nth-child(2)')
+			);
 		});
 	});
 
@@ -567,11 +606,19 @@ describe('vwc-select', () => {
 			)) as Select;
 
 			await elementUpdated(element);
-			expect(getControlElement(element).querySelector('.selected-value')?.textContent?.trim()).toEqual('placeholder');
-		
+			expect(
+				getControlElement(element)
+					.querySelector('.selected-value')
+					?.textContent?.trim()
+			).toEqual('placeholder');
+
 			element.selectedIndex = 2;
 			await elementUpdated(element);
-			expect(getControlElement(element).querySelector('.selected-value')?.textContent?.trim()).toEqual('3');
+			expect(
+				getControlElement(element)
+					.querySelector('.selected-value')
+					?.textContent?.trim()
+			).toEqual('3');
 		});
 
 		it('should display the value of the selected option and not the placeholder', async () => {
@@ -584,7 +631,11 @@ describe('vwc-select', () => {
 			)) as Select;
 
 			await elementUpdated(element);
-			expect(getControlElement(element).querySelector('.selected-value')?.textContent?.trim()).toEqual('2');
+			expect(
+				getControlElement(element)
+					.querySelector('.selected-value')
+					?.textContent?.trim()
+			).toEqual('2');
 		});
 	});
 
diff --git a/libs/components/src/lib/select/select.template.ts b/libs/components/src/lib/select/select.template.ts
index 730b3a3a9c..ee4077796b 100644
--- a/libs/components/src/lib/select/select.template.ts
+++ b/libs/components/src/lib/select/select.template.ts
@@ -1,10 +1,22 @@
-import { html, ref, slotted, ViewTemplate, when } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import {
+	html,
+	ref,
+	slotted,
+	ViewTemplate,
+	when,
+} from '@microsoft/fast-element';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { Listbox } from '../listbox/listbox';
 import { Popup } from '../popup/popup';
 import { ListboxOption } from '../option/option';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import { getFeedbackTemplate } from '../../shared/patterns';
 import type { Select } from './select';
 
@@ -15,21 +27,21 @@ const getStateClasses = ({
 	metaSlottedContent,
 	errorValidationMessage,
 	successText,
-}: Select) => classNames(
-	['disabled', disabled],
-	[`appearance-${appearance}`, Boolean(appearance)],
-	[`shape-${shape}`, Boolean(shape)],
-	['has-meta', Boolean(metaSlottedContent?.length)],
-	['error', Boolean(errorValidationMessage)],
-	['success', !!successText],
-	['has-meta', Boolean(metaSlottedContent?.length)],
-);
+}: Select) =>
+	classNames(
+		['disabled', disabled],
+		[`appearance-${appearance}`, Boolean(appearance)],
+		[`shape-${shape}`, Boolean(shape)],
+		['has-meta', Boolean(metaSlottedContent?.length)],
+		['error', Boolean(errorValidationMessage)],
+		['success', !!successText],
+		['has-meta', Boolean(metaSlottedContent?.length)]
+	);
 
 function renderLabel() {
-	return html<Select>`
-	  <label for="control" class="label" id="label">
-		  ${x => x.label}
-	  </label>`;
+	return html<Select>` <label for="control" class="label" id="label">
+		${(x) => x.label}
+	</label>`;
 }
 
 function renderPlaceholder(context: ElementDefinitionContext) {
@@ -37,26 +49,31 @@ function renderPlaceholder(context: ElementDefinitionContext) {
 
 	return html<Select>`
 		<${optionTag} ${ref('placeholderOption')}
-			text="${x => x.placeholder}" hidden disabled>
+			text="${(x) => x.placeholder}" hidden disabled>
 		</${optionTag}>`;
 }
 
 function selectValue(context: ElementDefinitionContext) {
 	const affixIconTemplate = affixIconTemplateFactory(context);
-	return html<Select>`
-		<div class="control ${getStateClasses}" ${ref('_anchor')}
-			id="control" ?disabled="${x => x.disabled}">
-			<div class="selected-value">
-				${x => affixIconTemplate(x.icon, IconWrapper.Slot)}
-				<span class="text">${x => x.displayValue}</span>
-				<slot name="meta" ${slotted('metaSlottedContent')}></slot>
-			</div>
-			${() => affixIconTemplate('chevron-down-line')}
-		</div>`;
+	return html<Select>` <div
+		class="control ${getStateClasses}"
+		${ref('_anchor')}
+		id="control"
+		?disabled="${(x) => x.disabled}"
+	>
+		<div class="selected-value">
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+			<span class="text">${(x) => x.displayValue}</span>
+			<slot name="meta" ${slotted('metaSlottedContent')}></slot>
+		</div>
+		${() => affixIconTemplate('chevron-down-line')}
+	</div>`;
 }
 
 function setFixedDropdownVarWidth(x: Select) {
-	return (x.open && x.fixedDropdown) ? `--_select-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
+	return x.open && x.fixedDropdown
+		? `--_select-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px`
+		: null;
 }
 
 /**
@@ -66,33 +83,39 @@ function renderControl(context: ElementDefinitionContext) {
 	const popupTag = context.tagFor(Popup);
 
 	return html<Select>`
-			${when(x => x.label, renderLabel())}
+			${when((x) => x.label, renderLabel())}
 			<div class="control-wrapper">
-				${when(x => !x.multiple, selectValue(context))}
+				${when((x) => !x.multiple, selectValue(context))}
 				<${popupTag} class="popup"
 					style="${setFixedDropdownVarWidth}"
-					?open="${x => (x.collapsible ? x.open : true)}"
-					:anchor="${x => x._anchor}"
+					?open="${(x) => (x.collapsible ? x.open : true)}"
+					:anchor="${(x) => x._anchor}"
 					placement="bottom-start"
-					strategy="${x => x.fixedDropdown ? null : 'absolute'}">
+					strategy="${(x) => (x.fixedDropdown ? null : 'absolute')}">
 					<div class="listbox"
-						id="${x => x.listboxId}"
+						id="${(x) => x.listboxId}"
 						role="listbox"
-						?disabled="${x => x.disabled}"
-						?hidden="${x => (x.collapsible ? !x.open : false)}"
+						?disabled="${(x) => x.disabled}"
+						?hidden="${(x) => (x.collapsible ? !x.open : false)}"
 						${ref('listbox')}>
-						${when(x => x.placeholder, renderPlaceholder(context))}
+						${when((x) => x.placeholder, renderPlaceholder(context))}
 						<slot
-							${slotted({ filter: Listbox.slottedOptionFilter as any, flatten: true, property: 'slottedOptions' })}>
+							${slotted({
+								filter: Listbox.slottedOptionFilter as any,
+								flatten: true,
+								property: 'slottedOptions',
+							})}>
 						</slot>
            			 </div>
 				</${popupTag}>
 			</div>
-			${when(x => x.helperText?.length, getFeedbackTemplate('helper', context))}
-			${when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context))}
-			${when(x => x.successText, getFeedbackTemplate('success', context))}
+			${when((x) => x.helperText?.length, getFeedbackTemplate('helper', context))}
+			${when(
+				(x) => !x.successText && x.errorValidationMessage,
+				getFeedbackTemplate('error', context)
+			)}
+			${when((x) => x.successText, getFeedbackTemplate('success', context))}
 		`;
-
 }
 
 /**
@@ -105,26 +128,26 @@ export const SelectTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
 ) => ViewTemplate<Select> = (context: ElementDefinitionContext) => {
-
-	return html<Select>`
-		<template class="base"
-			aria-label="${x => x.ariaLabel}"
-			aria-activedescendant="${x => x.ariaActiveDescendant}"
-			aria-controls="${x => x.ariaControls}"
-			aria-disabled="${x => x.ariaDisabled}"
-			aria-expanded="${x => x.ariaExpanded}"
-			aria-haspopup="${x => (x.collapsible ? 'listbox' : null)}"
-			aria-multiselectable="${x => x.ariaMultiSelectable}"
-			?open="${x => x.open}"
-			role="combobox"
-			tabindex="${x => (!x.disabled ? '0' : null)}"
-			@click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
-			@focusin="${(x, c) => x.focusinHandler(c.event as FocusEvent)}"
-			@focusout="${(x, c) => x.focusoutHandler(c.event as FocusEvent)}"
-			@keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
-			@mousedown="${(x, c) => x.mousedownHandler(c.event as MouseEvent)}">
-				${renderControl(context)}
-		</template>`;
+	return html<Select>` <template
+		class="base"
+		aria-label="${(x) => x.ariaLabel}"
+		aria-activedescendant="${(x) => x.ariaActiveDescendant}"
+		aria-controls="${(x) => x.ariaControls}"
+		aria-disabled="${(x) => x.ariaDisabled}"
+		aria-expanded="${(x) => x.ariaExpanded}"
+		aria-haspopup="${(x) => (x.collapsible ? 'listbox' : null)}"
+		aria-multiselectable="${(x) => x.ariaMultiSelectable}"
+		?open="${(x) => x.open}"
+		role="combobox"
+		tabindex="${(x) => (!x.disabled ? '0' : null)}"
+		@click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+		@focusin="${(x, c) => x.focusinHandler(c.event as FocusEvent)}"
+		@focusout="${(x, c) => x.focusoutHandler(c.event as FocusEvent)}"
+		@keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
+		@mousedown="${(x, c) => x.mousedownHandler(c.event as MouseEvent)}"
+	>
+		${renderControl(context)}
+	</template>`;
 };
 
 // TODO::change the css variable according to select width
diff --git a/libs/components/src/lib/select/select.ts b/libs/components/src/lib/select/select.ts
index 57988d1421..0027fd13bb 100644
--- a/libs/components/src/lib/select/select.ts
+++ b/libs/components/src/lib/select/select.ts
@@ -1,4 +1,7 @@
-import { applyMixins, Select as FoundationSelect } from '@microsoft/fast-foundation';
+import {
+	applyMixins,
+	Select as FoundationSelect,
+} from '@microsoft/fast-foundation';
 import { attr, observable, Observable } from '@microsoft/fast-element';
 import {
 	AffixIconWithTrailing,
@@ -7,14 +10,16 @@ import {
 	type FormElement,
 	FormElementHelperText,
 	formElements,
-	FormElementSuccessText
+	FormElementSuccessText,
 } from '../../shared/patterns';
 import type { Appearance, Shape } from '../enums';
 import type { ListboxOption } from '../option/option';
 import { Listbox } from '../listbox/listbox';
 
-
-export type SelectAppearance = Extract<Appearance, Appearance.Fieldset | Appearance.Ghost>;
+export type SelectAppearance = Extract<
+	Appearance,
+	Appearance.Fieldset | Appearance.Ghost
+>;
 export type SelectShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
 
 /**
@@ -34,27 +39,27 @@ export class Select extends FoundationSelect {
 	@observable _anchor!: HTMLElement;
 
 	/**
-	* The appearance attribute.
-	*
-	* @public
-	* HTML Attribute: appearance
-	*/
+	 * The appearance attribute.
+	 *
+	 * @public
+	 * HTML Attribute: appearance
+	 */
 	@attr appearance?: SelectAppearance;
 
 	/**
-	* The shape attribute.
-	*
-	* @public
-	* HTML Attribute: shape
-	*/
+	 * The shape attribute.
+	 *
+	 * @public
+	 * HTML Attribute: shape
+	 */
 	@attr shape?: SelectShape;
 
 	/**
-	* The fixed-dropdown attribute.
-	*
-	* @public
-	* HTML Attribute: fixed-dropdown
-	*/
+	 * The fixed-dropdown attribute.
+	 *
+	 * @public
+	 * HTML Attribute: fixed-dropdown
+	 */
 	@attr({ mode: 'boolean', attribute: 'fixed-dropdown' }) fixedDropdown = false;
 
 	/**
@@ -73,11 +78,11 @@ export class Select extends FoundationSelect {
 	@observable placeholderOption: ListboxOption | null = null;
 
 	/**
-	*
-	* Slot observer:
-	*
-	* @internal
-	*/
+	 *
+	 * Slot observer:
+	 *
+	 * @internal
+	 */
 	@observable metaSlottedContent?: Node[];
 
 	override connectedCallback() {
@@ -87,14 +92,24 @@ export class Select extends FoundationSelect {
 	override get displayValue(): string {
 		Observable.track(this, 'displayValue');
 
-		return this.firstSelectedOption?.getAttribute('label') ?? this.firstSelectedOption?.text ?? this.placeholder ?? '';
+		return (
+			this.firstSelectedOption?.getAttribute('label') ??
+			this.firstSelectedOption?.text ??
+			this.placeholder ??
+			''
+		);
 	}
 
 	override setDefaultSelectedOption(): void {
-		const options = Array.from(this.children).filter(Listbox.slottedOptionFilter as any);
+		const options = Array.from(this.children).filter(
+			Listbox.slottedOptionFilter as any
+		);
 
 		const selectedIndex = options.findIndex(
-			el => el.hasAttribute('selected') || (el as ListboxOption).selected || (el as ListboxOption).value === this.value
+			(el) =>
+				el.hasAttribute('selected') ||
+				(el as ListboxOption).selected ||
+				(el as ListboxOption).value === this.value
 		);
 
 		if (selectedIndex === -1 && !this.placeholderOption) {
@@ -109,5 +124,15 @@ export class Select extends FoundationSelect {
 	}
 }
 
-export interface Select extends AffixIconWithTrailing, FormElement, FormElementHelperText, ErrorText, FormElementSuccessText { }
-applyMixins(Select, AffixIconWithTrailing, FormElementHelperText, FormElementSuccessText);
+export interface Select
+	extends AffixIconWithTrailing,
+		FormElement,
+		FormElementHelperText,
+		ErrorText,
+		FormElementSuccessText {}
+applyMixins(
+	Select,
+	AffixIconWithTrailing,
+	FormElementHelperText,
+	FormElementSuccessText
+);
diff --git a/libs/components/src/lib/select/ui.test.ts b/libs/components/src/lib/select/ui.test.ts
index 206635f2e4..50d1e518cc 100644
--- a/libs/components/src/lib/select/ui.test.ts
+++ b/libs/components/src/lib/select/ui.test.ts
@@ -19,7 +19,6 @@ async function testGhostSelect({ page }: { page: Page }) {
 			<vwc-option value="1" text="Option 1"></vwc-option></vwc-select>
 	</div>`;
 
-
 	await loadComponents({
 		page,
 		components,
@@ -33,7 +32,6 @@ async function testGhostSelect({ page }: { page: Page }) {
 
 	await page.waitForLoadState('networkidle');
 
-
 	expect(await testWrapper?.screenshot()).toMatchSnapshot(
 		'./snapshots/select-ghost.png',
 		{ maxDiffPixelRatio: 0.01 }
@@ -41,8 +39,8 @@ async function testGhostSelect({ page }: { page: Page }) {
 }
 
 test('should show the component', async ({ page }: { page: Page }) => {
-
-	const template = `
+	const template =
+		`
 			<style>
 				#wrapper {
 					width: 2300px;
@@ -50,9 +48,14 @@ test('should show the component', async ({ page }: { page: Page }) => {
 					grid-auto-rows: 250px;
 					grid-template-columns: repeat(8, 1fr);
 				}
-			</style>` + extractHTMLBlocksFromReadme(
-		path.join(new URL('.', import.meta.url).pathname, 'README.md'))
-		.reduce((htmlString: string, block: string) => `${htmlString} <div style="margin: 5px;">${block}</div>`, '');
+			</style>` +
+		extractHTMLBlocksFromReadme(
+			path.join(new URL('.', import.meta.url).pathname, 'README.md')
+		).reduce(
+			(htmlString: string, block: string) =>
+				`${htmlString} <div style="margin: 5px;">${block}</div>`,
+			''
+		);
 
 	await page.setViewportSize({ width: 2300, height: 720 });
 
diff --git a/libs/components/src/lib/selectable-box/selectable-box.spec.ts b/libs/components/src/lib/selectable-box/selectable-box.spec.ts
index 84e7ff86f7..aec677c4bf 100644
--- a/libs/components/src/lib/selectable-box/selectable-box.spec.ts
+++ b/libs/components/src/lib/selectable-box/selectable-box.spec.ts
@@ -1,4 +1,10 @@
-import { axe, elementUpdated, fixture, getBaseElement, getControlElement } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getBaseElement,
+	getControlElement,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { Connotation } from '../enums';
 import { SelectableBox } from './selectable-box';
@@ -42,7 +48,9 @@ describe('vwc-selectable-box', () => {
 			element.connotation = Connotation.CTA;
 			await elementUpdated(element);
 
-			expect(baseElement?.classList?.contains(`connotation-${Connotation.CTA}`)).toBe(true);
+			expect(
+				baseElement?.classList?.contains(`connotation-${Connotation.CTA}`)
+			).toBe(true);
 		});
 
 		it('should set connotation attribute on the control element', async function () {
@@ -81,7 +89,7 @@ describe('vwc-selectable-box', () => {
 					`<${COMPONENT_TAG} control-type="radio" connotation="cta"></${COMPONENT_TAG}>`
 				)) as SelectableBox;
 				const control = getControlElement(element);
-	
+
 				expect(control?.getAttribute('connotation')).toBe('cta');
 			});
 
@@ -91,7 +99,7 @@ describe('vwc-selectable-box', () => {
 						`<${COMPONENT_TAG} control-type="radio" connotation="cta" clickable-box></${COMPONENT_TAG}>`
 					)) as SelectableBox;
 					const control = getControlElement(element);
-		
+
 					expect(control?.getAttribute('connotation')).toBe('cta');
 				});
 			});
@@ -132,15 +140,16 @@ describe('vwc-selectable-box', () => {
 			)) as SelectableBox;
 			baseElement = getBaseElement(element);
 		});
-		
+
 		it('should set checked class on the base element', async function () {
 			expect(baseElement?.classList?.contains('selected')).toBe(true);
 		});
 
 		it('should set the checked attribute on the control element', async () => {
 			const control = getControlElement(element);
-			const controlElement = control.shadowRoot?.querySelector('[role="checkbox"]');
-			
+			const controlElement =
+				control.shadowRoot?.querySelector('[role="checkbox"]');
+
 			expect(controlElement?.getAttribute('aria-checked')).toBe('true');
 		});
 
@@ -150,8 +159,9 @@ describe('vwc-selectable-box', () => {
 					`<${COMPONENT_TAG} control-type="radio" checked></${COMPONENT_TAG}>`
 				)) as SelectableBox;
 				const control = getControlElement(element);
-				const controlElement = control.shadowRoot?.querySelector('[role="radio"]');
-			
+				const controlElement =
+					control.shadowRoot?.querySelector('[role="radio"]');
+
 				expect(controlElement?.getAttribute('aria-checked')).toBe('true');
 			});
 		});
@@ -161,7 +171,7 @@ describe('vwc-selectable-box', () => {
 		it('should set clickable class on the base element', async function () {
 			element.clickableBox = true;
 			await elementUpdated(element);
-			
+
 			expect(baseElement?.classList?.contains('clickable')).toBe(true);
 		});
 	});
@@ -170,7 +180,7 @@ describe('vwc-selectable-box', () => {
 		it('should set clickable class on the base element', async function () {
 			element.clickable = true;
 			await elementUpdated(element);
-			
+
 			expect(baseElement?.classList?.contains('clickable')).toBe(true);
 		});
 	});
@@ -198,29 +208,33 @@ describe('vwc-selectable-box', () => {
 
 			it('should not emit the change event when the base element is clicked and the element is not clickable', async () => {
 				baseElement.click();
-				
+
 				expect(spy).not.toHaveBeenCalled();
 			});
-	
+
 			it('should emit the change event when the control element changes', async () => {
 				const controlElement = getControlElement(element);
 				controlElement.dispatchEvent(new Event('change'));
-	
+
 				expect(spy).toHaveBeenCalledTimes(1);
 				expect(element.checked).toBe(true);
 			});
-	
+
 			describe('keyboard (not clickable)', () => {
 				it('should not emit the change event with Space keypress', async () => {
-					baseElement.dispatchEvent(new KeyboardEvent('keydown', { composed: true, code: 'Space' }));
-					
+					baseElement.dispatchEvent(
+						new KeyboardEvent('keydown', { composed: true, code: 'Space' })
+					);
+
 					expect(spy).not.toHaveBeenCalled();
 					expect(element.checked).toBe(false);
 				});
-	
+
 				it('should not emit the change event with Enter keypress', async () => {
-					baseElement.dispatchEvent(new KeyboardEvent('keydown', { composed: true, code: 'Enter' }));
-					
+					baseElement.dispatchEvent(
+						new KeyboardEvent('keydown', { composed: true, code: 'Enter' })
+					);
+
 					expect(spy).not.toHaveBeenCalled();
 					expect(element.checked).toBe(false);
 				});
@@ -238,7 +252,7 @@ describe('vwc-selectable-box', () => {
 
 			it('should not emit the change event when the base element is clicked and the element is not clickable', async () => {
 				baseElement.click();
-				
+
 				expect(spy).not.toHaveBeenCalled();
 			});
 
@@ -259,15 +273,19 @@ describe('vwc-selectable-box', () => {
 
 			describe('keyboard (not clickable)', () => {
 				it('should not emit the change event with Space keypress', async () => {
-					baseElement.dispatchEvent(new KeyboardEvent('keydown', { composed: true, code: 'Space' }));
-					
+					baseElement.dispatchEvent(
+						new KeyboardEvent('keydown', { composed: true, code: 'Space' })
+					);
+
 					expect(spy).not.toHaveBeenCalled();
 					expect(element.checked).toBe(false);
 				});
-	
+
 				it('should not emit the change event with Enter keypress', async () => {
-					baseElement.dispatchEvent(new KeyboardEvent('keydown', { composed: true, code: 'Enter' }));
-					
+					baseElement.dispatchEvent(
+						new KeyboardEvent('keydown', { composed: true, code: 'Enter' })
+					);
+
 					expect(spy).not.toHaveBeenCalled();
 					expect(element.checked).toBe(false);
 				});
@@ -282,7 +300,7 @@ describe('vwc-selectable-box', () => {
 
 			it('should emit the change event when the checked state changes', async () => {
 				baseElement.click();
-				
+
 				expect(spy).toHaveBeenCalledTimes(1);
 				expect(element.checked).toBe(true);
 			});
@@ -290,7 +308,7 @@ describe('vwc-selectable-box', () => {
 			describe('radio', () => {
 				it('should emit the change event when the checked state changes', async () => {
 					baseElement.click();
-					
+
 					expect(spy).toHaveBeenCalledTimes(1);
 					expect(element.checked).toBe(true);
 				});
@@ -309,22 +327,28 @@ describe('vwc-selectable-box', () => {
 
 			describe('keyboard', () => {
 				it('should emit the change event when the checked state changes with Space keypress', async () => {
-					baseElement.dispatchEvent(new KeyboardEvent('keydown', { composed: true, code: 'Space' }));
-					
+					baseElement.dispatchEvent(
+						new KeyboardEvent('keydown', { composed: true, code: 'Space' })
+					);
+
 					expect(spy).toHaveBeenCalled();
 					expect(element.checked).toBe(true);
 				});
 
 				it('should emit the change event when the checked state changes with Enter keypress', async () => {
-					baseElement.dispatchEvent(new KeyboardEvent('keydown', { composed: true, code: 'Enter' }));
-					
+					baseElement.dispatchEvent(
+						new KeyboardEvent('keydown', { composed: true, code: 'Enter' })
+					);
+
 					expect(spy).toHaveBeenCalled();
 					expect(element.checked).toBe(true);
 				});
 
 				it('should not emit the change event another key is pressed', async () => {
-					baseElement.dispatchEvent(new KeyboardEvent('keydown', { composed: true, code: '65' }));
-					
+					baseElement.dispatchEvent(
+						new KeyboardEvent('keydown', { composed: true, code: '65' })
+					);
+
 					expect(spy).not.toHaveBeenCalled();
 					expect(element.checked).toBe(false);
 				});
@@ -339,7 +363,7 @@ describe('vwc-selectable-box', () => {
 
 			it('should emit the change event when the checked state changes', async () => {
 				baseElement.click();
-				
+
 				expect(spy).toHaveBeenCalledTimes(1);
 				expect(element.checked).toBe(true);
 			});
@@ -347,7 +371,7 @@ describe('vwc-selectable-box', () => {
 			describe('radio', () => {
 				it('should emit the change event when the checked state changes', async () => {
 					baseElement.click();
-					
+
 					expect(spy).toHaveBeenCalledTimes(1);
 					expect(element.checked).toBe(true);
 				});
@@ -366,22 +390,28 @@ describe('vwc-selectable-box', () => {
 
 			describe('keyboard', () => {
 				it('should emit the change event when the checked state changes with Space keypress', async () => {
-					baseElement.dispatchEvent(new KeyboardEvent('keydown', { composed: true, code: 'Space' }));
-					
+					baseElement.dispatchEvent(
+						new KeyboardEvent('keydown', { composed: true, code: 'Space' })
+					);
+
 					expect(spy).toHaveBeenCalled();
 					expect(element.checked).toBe(true);
 				});
 
 				it('should emit the change event when the checked state changes with Enter keypress', async () => {
-					baseElement.dispatchEvent(new KeyboardEvent('keydown', { composed: true, code: 'Enter' }));
-					
+					baseElement.dispatchEvent(
+						new KeyboardEvent('keydown', { composed: true, code: 'Enter' })
+					);
+
 					expect(spy).toHaveBeenCalled();
 					expect(element.checked).toBe(true);
 				});
 
 				it('should not emit the change event another key is pressed', async () => {
-					baseElement.dispatchEvent(new KeyboardEvent('keydown', { composed: true, code: '65' }));
-					
+					baseElement.dispatchEvent(
+						new KeyboardEvent('keydown', { composed: true, code: '65' })
+					);
+
 					expect(spy).not.toHaveBeenCalled();
 					expect(element.checked).toBe(false);
 				});
@@ -401,7 +431,7 @@ describe('vwc-selectable-box', () => {
 
 		it('should put the correct a11y attributes on the control element', async () => {
 			const control = getControlElement(element);
-			
+
 			expect(control?.getAttribute('tabindex')).toBe(null);
 			expect(control?.getAttribute('aria-label')).toBe('Box 1');
 		});
@@ -419,7 +449,7 @@ describe('vwc-selectable-box', () => {
 
 			it('should put the correct a11y attributes on the control element', async () => {
 				const control = getControlElement(element);
-				
+
 				expect(control?.getAttribute('tabindex')).toBe('0');
 				expect(control?.getAttribute('aria-label')).toBe('Box 1');
 			});
@@ -451,7 +481,7 @@ describe('vwc-selectable-box', () => {
 			it('should add the aria-pressed attribute to the base element when checked is true', async () => {
 				element.checked = true;
 				await elementUpdated(element);
-				
+
 				expect(baseElement?.getAttribute('aria-pressed')).toBe('true');
 			});
 
@@ -468,7 +498,7 @@ describe('vwc-selectable-box', () => {
 
 				it('should render the inert attribute on the control element', async () => {
 					const controlElement = getControlElement(element);
-	
+
 					expect(controlElement?.getAttribute('inert')).toBe('true');
 				});
 			});
@@ -511,7 +541,7 @@ describe('vwc-selectable-box', () => {
 
 				it('should render the inert attribute on the control element', async () => {
 					const controlElement = getControlElement(element);
-	
+
 					expect(controlElement?.getAttribute('inert')).toBe('true');
 				});
 			});
diff --git a/libs/components/src/lib/selectable-box/selectable-box.template.ts b/libs/components/src/lib/selectable-box/selectable-box.template.ts
index 4c30283740..b58aa22937 100644
--- a/libs/components/src/lib/selectable-box/selectable-box.template.ts
+++ b/libs/components/src/lib/selectable-box/selectable-box.template.ts
@@ -10,47 +10,62 @@ import { Checkbox } from '../checkbox/checkbox';
 import { Radio } from '../radio/radio';
 import { SelectableBox } from './selectable-box';
 
-const getClasses = ({ connotation, tight, checked, clickableBox, clickable }: SelectableBox) => classNames(
-	'base',
-	[`connotation-${connotation}`, Boolean(connotation)],
-	['tight', tight],
-	['selected', checked],
-	['clickable', clickableBox || clickable],
-	['readonly', !clickableBox && !clickable],
-);
+const getClasses = ({
+	connotation,
+	tight,
+	checked,
+	clickableBox,
+	clickable,
+}: SelectableBox) =>
+	classNames(
+		'base',
+		[`connotation-${connotation}`, Boolean(connotation)],
+		['tight', tight],
+		['selected', checked],
+		['clickable', clickableBox || clickable],
+		['readonly', !clickableBox && !clickable]
+	);
 
 function handleControlChange(x: SelectableBox) {
-	if (!(x.clickableBox)) x._handleCheckedChange();
+	if (!x.clickableBox) x._handleCheckedChange();
 }
 
 function checkbox(context: ElementDefinitionContext) {
 	const checkboxTag = context.tagFor(Checkbox);
 
-	return html<SelectableBox>`${when(x => x.controlType !== 'radio', html`
+	return html<SelectableBox>`${when(
+		(x) => x.controlType !== 'radio',
+		html`
 		<${checkboxTag}
-			aria-label="${x => (!x.clickableBox && !x.clickable) && x.ariaLabel ? x.ariaLabel : null}"
-			@change="${x => handleControlChange(x)}"
+			aria-label="${(x) =>
+				!x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
+			@change="${(x) => handleControlChange(x)}"
 			class="control checkbox"
-			connotation="${x => x.connotation === 'cta' ? Connotation.CTA : Connotation.Accent}"
-			:checked="${x => x.checked}"
-			inert="${x => x.clickableBox || x.clickable ? true : null}"
-		></${checkboxTag}>`)}
-	`;
+			connotation="${(x) =>
+				x.connotation === 'cta' ? Connotation.CTA : Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			inert="${(x) => (x.clickableBox || x.clickable ? true : null)}"
+		></${checkboxTag}>`
+	)} `;
 }
 
 function radio(context: ElementDefinitionContext) {
 	const radioTag = context.tagFor(Radio);
 
-	return html<SelectableBox>`${when(x => x.controlType === 'radio', html`
+	return html<SelectableBox>`${when(
+		(x) => x.controlType === 'radio',
+		html`
 		<${radioTag}
-			aria-label="${x => (!x.clickableBox && !x.clickable) && x.ariaLabel ? x.ariaLabel : null}"
-			@change="${x => handleControlChange(x)}"
+			aria-label="${(x) =>
+				!x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
+			@change="${(x) => handleControlChange(x)}"
 			class="control radio"
-			connotation="${x => x.connotation === 'cta' ? Connotation.CTA : Connotation.Accent}"
-			:checked="${x => x.checked}"
-			inert="${x => x.clickableBox || x.clickable ? true : null}"
-		></${radioTag}>`)}
-	`;
+			connotation="${(x) =>
+				x.connotation === 'cta' ? Connotation.CTA : Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			inert="${(x) => (x.clickableBox || x.clickable ? true : null)}"
+		></${radioTag}>`
+	)} `;
 }
 
 /**
@@ -62,22 +77,22 @@ function radio(context: ElementDefinitionContext) {
 export const SelectableBoxTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
-) => ViewTemplate<SelectableBox> = (
-	context: ElementDefinitionContext
-) => {
+) => ViewTemplate<SelectableBox> = (context: ElementDefinitionContext) => {
 	return html<SelectableBox>`<template role="presentation">
-	<div
-		class="${getClasses}"
-		tabindex="${x => x.clickableBox || x.clickable ? '0' : null}"
-		role="${x => x.clickableBox || x.clickable ? 'button' : null}"
-		aria-pressed="${x => (x.clickableBox || x.clickable) && x.checked ? x.checked : null}"
-		aria-label="${x => x.clickableBox || x.clickable ? x.ariaLabel : null}"
-		@keydown="${(x, c) => x._handleKeydown(c.event as KeyboardEvent)}"
-		@click="${x => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
-	>
-		${checkbox(context)}
-		${radio(context)}
-		<slot></slot>
-	</div>
-</template>`;
+		<div
+			class="${getClasses}"
+			tabindex="${(x) => (x.clickableBox || x.clickable ? '0' : null)}"
+			role="${(x) => (x.clickableBox || x.clickable ? 'button' : null)}"
+			aria-pressed="${(x) =>
+				(x.clickableBox || x.clickable) && x.checked ? x.checked : null}"
+			aria-label="${(x) =>
+				x.clickableBox || x.clickable ? x.ariaLabel : null}"
+			@keydown="${(x, c) => x._handleKeydown(c.event as KeyboardEvent)}"
+			@click="${(x) =>
+				x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
+		>
+			${checkbox(context)} ${radio(context)}
+			<slot></slot>
+		</div>
+	</template>`;
 };
diff --git a/libs/components/src/lib/selectable-box/selectable-box.ts b/libs/components/src/lib/selectable-box/selectable-box.ts
index 93dd5aad46..718b57b084 100644
--- a/libs/components/src/lib/selectable-box/selectable-box.ts
+++ b/libs/components/src/lib/selectable-box/selectable-box.ts
@@ -16,7 +16,6 @@ export type SelectableBoxConnotation = Connotation.Accent | Connotation.CTA;
  */
 export type SelectableBoxControlType = 'checkbox' | 'radio';
 
-
 /**
  * @public
  * @component selectable-box
@@ -24,31 +23,31 @@ export type SelectableBoxControlType = 'checkbox' | 'radio';
  * @event change - Fired when the checked state changes
  */
 export class SelectableBox extends FoundationElement {
-	@attr({attribute: 'aria-label'}) override ariaLabel: string | null = null;
+	@attr({ attribute: 'aria-label' }) override ariaLabel: string | null = null;
 
 	/**
-	* Controls the checked state of the box
-	*
-	* @public
-	* HTML Attribute: checked
-	*/
-	@attr({ mode: 'boolean'}) checked = false;
+	 * Controls the checked state of the box
+	 *
+	 * @public
+	 * HTML Attribute: checked
+	 */
+	@attr({ mode: 'boolean' }) checked = false;
 
 	/**
-	* DEPRECATED: Replaced by the clickable-box prop
-	*
-	* @public
-	* HTML Attribute: clickable
-	*/
-	@attr({ mode: 'boolean'}) clickable = false;
+	 * DEPRECATED: Replaced by the clickable-box prop
+	 *
+	 * @public
+	 * HTML Attribute: clickable
+	 */
+	@attr({ mode: 'boolean' }) clickable = false;
 
 	/**
-	* Makes the entire selectable box clickable
-	*
-	* @public
-	* HTML Attribute: clickable-box
-	*/
-	@attr({ attribute: 'clickable-box', mode: 'boolean'}) clickableBox = false;
+	 * Makes the entire selectable box clickable
+	 *
+	 * @public
+	 * HTML Attribute: clickable-box
+	 */
+	@attr({ attribute: 'clickable-box', mode: 'boolean' }) clickableBox = false;
 
 	/**
 	 * The connotation the selectable box should have.
@@ -69,11 +68,11 @@ export class SelectableBox extends FoundationElement {
 	@attr({ attribute: 'control-type' }) controlType?: SelectableBoxControlType;
 
 	/**
-	* Removes the padding around the box's slot content
-	*
-	* @public
-	* HTML Attribute: tight
-	*/
+	 * Removes the padding around the box's slot content
+	 *
+	 * @public
+	 * HTML Attribute: tight
+	 */
 	@attr({ mode: 'boolean' }) tight = false;
 
 	/**
@@ -89,7 +88,10 @@ export class SelectableBox extends FoundationElement {
 	 * @internal
 	 */
 	_handleKeydown(event: KeyboardEvent) {
-		if ((event.code === 'Space' || event.code === 'Enter') && (this.clickableBox || this.clickable))
+		if (
+			(event.code === 'Space' || event.code === 'Enter') &&
+			(this.clickableBox || this.clickable)
+		)
 			return this._handleCheckedChange();
 		return true;
 	}
diff --git a/libs/components/src/lib/side-drawer/definition.ts b/libs/components/src/lib/side-drawer/definition.ts
index 23cb6ce65d..96ffccc463 100644
--- a/libs/components/src/lib/side-drawer/definition.ts
+++ b/libs/components/src/lib/side-drawer/definition.ts
@@ -7,11 +7,12 @@ import { sideDrawerTemplate as template } from './side-drawer.template';
 /**
  * Represents a side-drawer custom element.
  */
-export const sideDrawerDefinition = SideDrawer.compose<FoundationElementDefinition>({
-	baseName: 'side-drawer',
-	template: template as any,
-	styles,
-});
+export const sideDrawerDefinition =
+	SideDrawer.compose<FoundationElementDefinition>({
+		baseName: 'side-drawer',
+		template: template as any,
+		styles,
+	});
 
 /**
  * @internal
diff --git a/libs/components/src/lib/side-drawer/index.ts b/libs/components/src/lib/side-drawer/index.ts
index d40661fd21..eee770990a 100644
--- a/libs/components/src/lib/side-drawer/index.ts
+++ b/libs/components/src/lib/side-drawer/index.ts
@@ -1,4 +1,3 @@
 import { registerSideDrawer } from './definition';
 
-
 registerSideDrawer();
diff --git a/libs/components/src/lib/side-drawer/side-drawer.spec.ts b/libs/components/src/lib/side-drawer/side-drawer.spec.ts
index 34a72c3343..b88a5126f4 100644
--- a/libs/components/src/lib/side-drawer/side-drawer.spec.ts
+++ b/libs/components/src/lib/side-drawer/side-drawer.spec.ts
@@ -1,4 +1,9 @@
-import { axe, elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getControlElement,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { SideDrawer } from './side-drawer';
 import '.';
@@ -10,8 +15,8 @@ describe('vwc-side-drawer', () => {
 	let element: SideDrawer;
 
 	beforeEach(async () => {
-		element = await fixture(`<${COMPONENT_TAG}>
-								</${COMPONENT_TAG}>`) as SideDrawer;
+		element = (await fixture(`<${COMPONENT_TAG}>
+								</${COMPONENT_TAG}>`)) as SideDrawer;
 		await elementUpdated(element);
 	});
 
@@ -50,8 +55,7 @@ describe('vwc-side-drawer', () => {
 			element.addEventListener('open', spy);
 			element.open = true;
 			await elementUpdated(element);
-			expect(spy)
-				.toHaveBeenCalled();
+			expect(spy).toHaveBeenCalled();
 		});
 
 		it("should not bubble 'open' event", async () => {
@@ -87,8 +91,7 @@ describe('vwc-side-drawer', () => {
 			element.open = false;
 			await elementUpdated(element);
 
-			expect(spy)
-				.toHaveBeenCalled();
+			expect(spy).toHaveBeenCalled();
 		});
 
 		it("should not bubble 'close' event", async () => {
@@ -97,7 +100,7 @@ describe('vwc-side-drawer', () => {
 			const spy = jest.fn();
 			element.parentElement?.addEventListener('close', spy);
 			element.open = false;
-			
+
 			await elementUpdated(element);
 			expect(spy).not.toBeCalled();
 		});
@@ -115,7 +118,9 @@ describe('vwc-side-drawer', () => {
 			element.open = true;
 			await elementUpdated(element);
 
-			const appContent = element.shadowRoot?.querySelector('.side-drawer-app-content');
+			const appContent = element.shadowRoot?.querySelector(
+				'.side-drawer-app-content'
+			);
 			expect(appContent?.hasAttribute('inert')).toBe(false);
 		});
 	});
@@ -136,7 +141,9 @@ describe('vwc-side-drawer', () => {
 			element.modal = true;
 			await elementUpdated(element);
 
-			const appContent = element.shadowRoot?.querySelector('.side-drawer-app-content');
+			const appContent = element.shadowRoot?.querySelector(
+				'.side-drawer-app-content'
+			);
 			expect(appContent?.hasAttribute('inert')).toBe(false);
 		});
 
@@ -145,7 +152,9 @@ describe('vwc-side-drawer', () => {
 			element.open = true;
 			await elementUpdated(element);
 
-			const appContent = element.shadowRoot?.querySelector('.side-drawer-app-content');
+			const appContent = element.shadowRoot?.querySelector(
+				'.side-drawer-app-content'
+			);
 			expect(appContent?.hasAttribute('inert')).toBe(true);
 		});
 	});
@@ -155,7 +164,9 @@ describe('vwc-side-drawer', () => {
 			element.alternate = true;
 			await elementUpdated(element);
 
-			const controlWithPartAlternate = element.shadowRoot?.querySelector('[part~=vvd-theme-alternate]');
+			const controlWithPartAlternate = element.shadowRoot?.querySelector(
+				'[part~=vvd-theme-alternate]'
+			);
 			expect(controlWithPartAlternate).toBeInstanceOf(HTMLElement);
 		});
 	});
@@ -187,7 +198,7 @@ describe('vwc-side-drawer', () => {
 
 	describe('keydown', () => {
 		let control: HTMLElement;
-		
+
 		beforeEach(async () => {
 			element.modal = true;
 			element.open = true;
@@ -196,13 +207,13 @@ describe('vwc-side-drawer', () => {
 		});
 
 		it('should close after keydown on Escape', async () => {
-			control.dispatchEvent(new KeyboardEvent('keydown', { 'key': 'Escape' }));
+			control.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
 			await elementUpdated(element);
 			expect(element.open).toEqual(false);
 		});
 
 		it('should leave open after keydown that is not Escape', async () => {
-			control.dispatchEvent(new KeyboardEvent('keydown', { 'key': 'Enter' }));
+			control.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 			expect(element.open).toEqual(true);
 		});
 	});
diff --git a/libs/components/src/lib/side-drawer/side-drawer.template.ts b/libs/components/src/lib/side-drawer/side-drawer.template.ts
index e369ccfc97..916ef04ddb 100644
--- a/libs/components/src/lib/side-drawer/side-drawer.template.ts
+++ b/libs/components/src/lib/side-drawer/side-drawer.template.ts
@@ -1,26 +1,19 @@
 import { html, when } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { ViewTemplate } from '@microsoft/fast-element';
-import type {
-	FoundationElementTemplate,
-} from '@microsoft/fast-foundation';
+import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
 import type { SideDrawer } from './side-drawer';
 
-const getClasses = ({
-	modal, open, trailing
-}: SideDrawer) => classNames(
-	'control',
-	['modal', modal],
-	['open', open],
-	['trailing', trailing],
-);
+const getClasses = ({ modal, open, trailing }: SideDrawer) =>
+	classNames(
+		'control',
+		['modal', modal],
+		['open', open],
+		['trailing', trailing]
+	);
 
-const getScrimClasses = ({
-	open
-}: SideDrawer) => classNames(
-	'scrim',
-	['open', open],
-);
+const getScrimClasses = ({ open }: SideDrawer) =>
+	classNames('scrim', ['open', open]);
 
 /**
  * The template for the side-drawer component.
@@ -29,18 +22,29 @@ const getScrimClasses = ({
  * @returns ViewTemplate<side-drawer> A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public
  */
-export const sideDrawerTemplate: FoundationElementTemplate<ViewTemplate<SideDrawer>> = () => html`
-	<div class="${getClasses}" ?inert="${x => !x.open}" part="base ${(x) => x.alternate ? 'vvd-theme-alternate' : ''}"
-	 @keydown="${(x, c) => handleKeydown(x, c.event as KeyboardEvent)}">
-    	<slot></slot>
+export const sideDrawerTemplate: FoundationElementTemplate<
+	ViewTemplate<SideDrawer>
+> = () => html`
+	<div
+		class="${getClasses}"
+		?inert="${(x) => !x.open}"
+		part="base ${(x) => (x.alternate ? 'vvd-theme-alternate' : '')}"
+		@keydown="${(x, c) => handleKeydown(x, c.event as KeyboardEvent)}"
+	>
+		<slot></slot>
 	</div>
 
-	<div class="side-drawer-app-content" ?inert="${x => x.open && x.modal}">
+	<div class="side-drawer-app-content" ?inert="${(x) => x.open && x.modal}">
 		<slot name="app-content"></slot>
 	</div>
 
-	${when(x => x.modal,
-		html<SideDrawer>`<div class="${getScrimClasses}" @click="${x => (x.open = false)}"></div>`)}
+	${when(
+		(x) => x.modal,
+		html<SideDrawer>`<div
+			class="${getScrimClasses}"
+			@click="${(x) => (x.open = false)}"
+		></div>`
+	)}
 `;
 
 const handleKeydown = (x: any, { key }: KeyboardEvent): boolean | void => {
diff --git a/libs/components/src/lib/side-drawer/side-drawer.ts b/libs/components/src/lib/side-drawer/side-drawer.ts
index 0869f071c3..5d71839cae 100644
--- a/libs/components/src/lib/side-drawer/side-drawer.ts
+++ b/libs/components/src/lib/side-drawer/side-drawer.ts
@@ -17,7 +17,8 @@ export class SideDrawer extends FoundationElement {
 	 */
 	@attr({
 		mode: 'boolean',
-	}) alternate = false;
+	})
+	alternate = false;
 
 	/**
 	 * sets the side drawer's type to modal
@@ -26,7 +27,8 @@ export class SideDrawer extends FoundationElement {
 	 */
 	@attr({
 		mode: 'boolean',
-	}) modal = false;
+	})
+	modal = false;
 
 	/**
 	 * indicates whether the side drawer is open
@@ -35,7 +37,8 @@ export class SideDrawer extends FoundationElement {
 	 */
 	@attr({
 		mode: 'boolean',
-	}) open = false;
+	})
+	open = false;
 
 	/**
 	 * sets the side of the side drawer
@@ -44,9 +47,14 @@ export class SideDrawer extends FoundationElement {
 	 */
 	@attr({
 		mode: 'boolean',
-	}) trailing = false;
+	})
+	trailing = false;
 
-	override attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+	override attributeChangedCallback(
+		name: string,
+		oldValue: string,
+		newValue: string
+	): void {
 		super.attributeChangedCallback(name, oldValue, newValue);
 		switch (name) {
 			case 'open': {
diff --git a/libs/components/src/lib/side-drawer/ui.test.ts b/libs/components/src/lib/side-drawer/ui.test.ts
index 7a8bae3896..f57616dc50 100644
--- a/libs/components/src/lib/side-drawer/ui.test.ts
+++ b/libs/components/src/lib/side-drawer/ui.test.ts
@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import type { Page } from '@playwright/test';
 import {
 	loadComponents,
-	loadTemplate
+	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
 const components = ['side-drawer', 'layout'];
@@ -42,10 +42,9 @@ test('should show the component', async ({ page }: { page: Page }) => {
 
 	await page.waitForLoadState('networkidle');
 
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/side-drawer.png',
-		);
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/side-drawer.png'
+	);
 });
 
 test('should show the component modal', async ({ page }: { page: Page }) => {
@@ -85,8 +84,7 @@ test('should show the component modal', async ({ page }: { page: Page }) => {
 
 	await page.waitForLoadState('networkidle');
 
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/side-drawer-modal.png',
-		);
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/side-drawer-modal.png'
+	);
 });
diff --git a/libs/components/src/lib/slider/definition.ts b/libs/components/src/lib/slider/definition.ts
index be62972c81..e1f04d7aa8 100644
--- a/libs/components/src/lib/slider/definition.ts
+++ b/libs/components/src/lib/slider/definition.ts
@@ -6,7 +6,6 @@ import { Slider } from './slider';
 import { SliderTemplate as template } from './slider.template';
 export type { SliderConnotation } from './slider';
 
-
 /**
  * The slider element.
  */
diff --git a/libs/components/src/lib/slider/index.ts b/libs/components/src/lib/slider/index.ts
index cefd7f4f2c..0c1facafa7 100644
--- a/libs/components/src/lib/slider/index.ts
+++ b/libs/components/src/lib/slider/index.ts
@@ -1,4 +1,3 @@
 import { registerSlider } from './definition';
 
-
 registerSlider();
diff --git a/libs/components/src/lib/slider/slider.spec.ts b/libs/components/src/lib/slider/slider.spec.ts
index 9820133616..8517f13e61 100644
--- a/libs/components/src/lib/slider/slider.spec.ts
+++ b/libs/components/src/lib/slider/slider.spec.ts
@@ -1,4 +1,9 @@
-import { axe, elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getControlElement,
+} from '@vivid-nx/shared';
 import { Orientation } from '@microsoft/fast-web-utilities';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { Connotation } from '../enums';
@@ -8,7 +13,10 @@ import { sliderDefinition } from './definition';
 
 const COMPONENT_TAG = 'vwc-slider';
 
-async function setBoolAttributeOn(el: Slider, attr: string): Promise<DOMTokenList> {
+async function setBoolAttributeOn(
+	el: Slider,
+	attr: string
+): Promise<DOMTokenList> {
 	el.toggleAttribute(attr, true);
 	await elementUpdated(el);
 	return getControlElement(el).classList;
@@ -55,7 +63,10 @@ describe('vwc-slider', () => {
 	});
 
 	describe('markers', () => {
-		const getMarkersDiv = () => getControlElement(element).querySelector('.positioning-region > .track > .mark') as HTMLDivElement;
+		const getMarkersDiv = () =>
+			getControlElement(element).querySelector(
+				'.positioning-region > .track > .mark'
+			) as HTMLDivElement;
 
 		it('should display the markers element when markers is true', async () => {
 			const markersDivReferenceBefore = getMarkersDiv();
@@ -78,7 +89,8 @@ describe('vwc-slider', () => {
 
 	describe('orientation', () => {
 		it('should set the vertical class on the control when changing orientation to vertical', async () => {
-			const controlClasses = () => Array.from(getControlElement(element).classList);
+			const controlClasses = () =>
+				Array.from(getControlElement(element).classList);
 			const classesInitialValue = controlClasses();
 
 			element.setAttribute('orientation', 'vertical');
@@ -149,27 +161,30 @@ describe('vwc-slider', () => {
 	});
 
 	describe('connotation', function () {
-		const possibleConnotations = [Connotation.Accent,
-			Connotation.CTA
-		] as const;
+		const possibleConnotations = [Connotation.Accent, Connotation.CTA] as const;
 
 		it('should not set any connotation classes when no connotation is set', async function () {
-			possibleConnotations.forEach(connotation => {
-				expect(getControlElement(element)
-					?.classList
-					.contains(`connotation-${connotation}`))
-					.toEqual(false);
+			possibleConnotations.forEach((connotation) => {
+				expect(
+					getControlElement(element)?.classList.contains(
+						`connotation-${connotation}`
+					)
+				).toEqual(false);
 			});
 		});
 
-		it.each(possibleConnotations)('should set the connotation class for "%s"', async function (connotation) {
-			element.connotation = connotation;
-			await elementUpdated(element);
-			expect(getControlElement(element)
-				?.classList
-				.contains(`connotation-${connotation}`))
-				.toEqual(true);
-		});
+		it.each(possibleConnotations)(
+			'should set the connotation class for "%s"',
+			async function (connotation) {
+				element.connotation = connotation;
+				await elementUpdated(element);
+				expect(
+					getControlElement(element)?.classList.contains(
+						`connotation-${connotation}`
+					)
+				).toEqual(true);
+			}
+		);
 	});
 
 	describe('a11y', () => {
diff --git a/libs/components/src/lib/slider/slider.template.ts b/libs/components/src/lib/slider/slider.template.ts
index 115a9dabdb..36ed2c4799 100644
--- a/libs/components/src/lib/slider/slider.template.ts
+++ b/libs/components/src/lib/slider/slider.template.ts
@@ -9,19 +9,24 @@ const getClasses = ({ disabled, connotation }: Slider) =>
 	classNames(
 		'control',
 		['disabled', Boolean(disabled)],
-		[`connotation-${connotation}`, Boolean(connotation)],
+		[`connotation-${connotation}`, Boolean(connotation)]
 	);
 
-export const getMarkersTemplate = (isHorizontal: boolean, numMarkers: number) => {
+export const getMarkersTemplate = (
+	isHorizontal: boolean,
+	numMarkers: number
+) => {
 	const placeholder = isHorizontal
 		? ['right', 'center', '', '100% repeat-x']
 		: ['bottom', 'top', '100%', 'repeat-y'];
 
-	return html`
-	<div class="mark" style="
+	return html` <div
+		class="mark"
+		style="
 	background: linear-gradient(to ${placeholder[0]}, currentcolor 3px, transparent 0px)
 	0px ${placeholder[1]} / ${placeholder[2]} calc((100% - 3px) / ${numMarkers}) ${placeholder[3]}
-	"></div>`;
+	"
+	></div>`;
 };
 
 /**
@@ -30,31 +35,42 @@ export const getMarkersTemplate = (isHorizontal: boolean, numMarkers: number) =>
  * @param context - element definition context
  * @public
  */
-export const SliderTemplate: (context: ElementDefinitionContext) => ViewTemplate<Slider> = () => {
-
+export const SliderTemplate: (
+	context: ElementDefinitionContext
+) => ViewTemplate<Slider> = () => {
 	/* eslint-disable @typescript-eslint/indent */
-	return html<Slider>`<template role="${x => x.ariaLabel ? 'presentation' : null}">
-	<div
-		role="slider"
-		tabindex="${x => (x.disabled ? null : 0)}"
-		aria-label="${x => x.ariaLabel}"
-		aria-valuetext="${x => x.ariaValuetext || x.valueTextFormatter(x.value)}"
-		aria-valuenow="${x => x.value}"
-		aria-valuemin="${x => x.min}"
-		aria-valuemax="${x => x.max}"
-		aria-disabled="${x => (x.disabled ? true : void 0)}"
-		aria-orientation="${x => x.orientation}"
-		class="${getClasses} ${x => x.orientation}"
+	return html<Slider>`<template
+		role="${(x) => (x.ariaLabel ? 'presentation' : null)}"
 	>
-		<div class="positioning-region">
-			<div ${ref('track')} class="track">
-				<div class="track-start" style="${x => x.position}"></div>
-				${x => x.markers
-			? getMarkersTemplate(x.orientation === Orientation.horizontal, Math.floor((x.max - x.min) / x.step))
-			: void 0}
-			</div>
-			<div ${ref('thumb')} class="thumb-container" style="${x => x.position}">
-			</div>
-		</div>
-	</div>`;
+		<div
+			role="slider"
+			tabindex="${(x) => (x.disabled ? null : 0)}"
+			aria-label="${(x) => x.ariaLabel}"
+			aria-valuetext="${(x) =>
+				x.ariaValuetext || x.valueTextFormatter(x.value)}"
+			aria-valuenow="${(x) => x.value}"
+			aria-valuemin="${(x) => x.min}"
+			aria-valuemax="${(x) => x.max}"
+			aria-disabled="${(x) => (x.disabled ? true : void 0)}"
+			aria-orientation="${(x) => x.orientation}"
+			class="${getClasses} ${(x) => x.orientation}"
+		>
+			<div class="positioning-region">
+				<div ${ref('track')} class="track">
+					<div class="track-start" style="${(x) => x.position}"></div>
+					${(x) =>
+						x.markers
+							? getMarkersTemplate(
+									x.orientation === Orientation.horizontal,
+									Math.floor((x.max - x.min) / x.step)
+							  )
+							: void 0}
+				</div>
+				<div
+					${ref('thumb')}
+					class="thumb-container"
+					style="${(x) => x.position}"
+				></div>
+			</div></div
+	></template>`;
 };
diff --git a/libs/components/src/lib/slider/slider.ts b/libs/components/src/lib/slider/slider.ts
index 5cc63c8a42..a9daed43e2 100644
--- a/libs/components/src/lib/slider/slider.ts
+++ b/libs/components/src/lib/slider/slider.ts
@@ -3,10 +3,7 @@ import { Slider as FastSlider } from '@microsoft/fast-foundation';
 import { limit } from '@microsoft/fast-web-utilities';
 import type { Connotation } from '../enums';
 
-export type SliderConnotation =
-	Connotation.Accent |
-	Connotation.CTA;
-
+export type SliderConnotation = Connotation.Accent | Connotation.CTA;
 
 /**
  * @public
@@ -14,8 +11,8 @@ export type SliderConnotation =
  * @vueModel modelValue current-value change `(event.target as HTMLInputElement).value`
  */
 export class Slider extends FastSlider {
-	@attr({attribute: 'aria-label'}) override ariaLabel: string | null = null;
-	@attr({attribute: 'aria-valuetext'}) ariaValuetext: string | null = null;
+	@attr({ attribute: 'aria-label' }) override ariaLabel: string | null = null;
+	@attr({ attribute: 'aria-valuetext' }) ariaValuetext: string | null = null;
 	/**
 	 * Display markers on/off
 	 *
@@ -24,7 +21,8 @@ export class Slider extends FastSlider {
 	 */
 	@attr({
 		mode: 'boolean',
-	}) markers = false;
+	})
+	markers = false;
 
 	/**
 	 * slider connotation
diff --git a/libs/components/src/lib/split-button/definition.ts b/libs/components/src/lib/split-button/definition.ts
index fb92cd88b6..c479b7fc25 100644
--- a/libs/components/src/lib/split-button/definition.ts
+++ b/libs/components/src/lib/split-button/definition.ts
@@ -5,25 +5,34 @@ import { SplitButton } from './split-button';
 import styles from './split-button.scss?inline';
 import { SplitButtonTemplate as template } from './split-button.template';
 
-export type { SplitButtonAppearance, SplitButtonConnotation, SplitButtonShape, SplitButtonSize } from './split-button';
+export type {
+	SplitButtonAppearance,
+	SplitButtonConnotation,
+	SplitButtonShape,
+	SplitButtonSize,
+} from './split-button';
 
 /**
  *
  * @internal
  */
-export const splitButtonDefinition = SplitButton.compose<FoundationElementDefinition>({
-	baseName: 'split-button',
-	template: template as any,
-	styles,
-	shadowOptions: {
-		delegatesFocus: true,
-	},
-});
+export const splitButtonDefinition =
+	SplitButton.compose<FoundationElementDefinition>({
+		baseName: 'split-button',
+		template: template as any,
+		styles,
+		shadowOptions: {
+			delegatesFocus: true,
+		},
+	});
 
 /**
  * @internal
  */
-export const splitButtonRegistries = [splitButtonDefinition(), ...iconRegistries];
+export const splitButtonRegistries = [
+	splitButtonDefinition(),
+	...iconRegistries,
+];
 
 /**
  * Registers the button elements with the design system.
diff --git a/libs/components/src/lib/split-button/split-button.spec.ts b/libs/components/src/lib/split-button/split-button.spec.ts
index 8262434ad7..66348ddb64 100644
--- a/libs/components/src/lib/split-button/split-button.spec.ts
+++ b/libs/components/src/lib/split-button/split-button.spec.ts
@@ -17,7 +17,9 @@ describe('vwc-split-button', () => {
 	let element: SplitButton;
 
 	beforeEach(async () => {
-		element = await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`) as SplitButton;
+		element = (await fixture(
+			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
+		)) as SplitButton;
 		await elementUpdated(element);
 	});
 
@@ -48,12 +50,12 @@ describe('vwc-split-button', () => {
 		});
 
 		it('should have an icon slot', async () => {
-			expect(Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))).toEqual(true);
+			expect(
+				Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))
+			).toEqual(true);
 		});
 	});
 
-
-
 	describe('split indicator', () => {
 		it('adds a split indicator to the button', async () => {
 			element.splitIndicator = 'home';
@@ -81,7 +83,11 @@ describe('vwc-split-button', () => {
 			(element as any).connotation = connotation;
 			await elementUpdated(element);
 
-			expect(getControlElement(element).classList.contains(`connotation-${connotation}`)).toBeTruthy();
+			expect(
+				getControlElement(element).classList.contains(
+					`connotation-${connotation}`
+				)
+			).toBeTruthy();
 		});
 	});
 
@@ -91,7 +97,9 @@ describe('vwc-split-button', () => {
 			(element as any).shape = shape;
 			await elementUpdated(element);
 
-			expect(getControlElement(element).classList.contains(`shape-${shape}`)).toBeTruthy();
+			expect(
+				getControlElement(element).classList.contains(`shape-${shape}`)
+			).toBeTruthy();
 		});
 	});
 
@@ -101,7 +109,11 @@ describe('vwc-split-button', () => {
 			(element as any).appearance = appearance;
 			await elementUpdated(element);
 
-			expect(getControlElement(element).classList.contains(`appearance-${appearance}`)).toBeTruthy();
+			expect(
+				getControlElement(element).classList.contains(
+					`appearance-${appearance}`
+				)
+			).toBeTruthy();
 		});
 	});
 
@@ -111,13 +123,16 @@ describe('vwc-split-button', () => {
 			(element as any).size = size;
 			await elementUpdated(element);
 
-			expect(getControlElement(element).classList.contains(`size-${size}`)).toBeTruthy();
+			expect(
+				getControlElement(element).classList.contains(`size-${size}`)
+			).toBeTruthy();
 		});
 	});
 
 	describe('icon-only', () => {
 		it('sets correct internal icon-only style on control', async () => {
-			const getControlIconOnly = () => element.shadowRoot?.querySelector('.control.icon-only');
+			const getControlIconOnly = () =>
+				element.shadowRoot?.querySelector('.control.icon-only');
 			const controlIconOnlyBefore = getControlIconOnly();
 
 			element.icon = 'home';
@@ -129,19 +144,20 @@ describe('vwc-split-button', () => {
 		});
 
 		it('should set icon-only class if slot name="icon" is slotted', async () => {
-			const iconOnlyClassExistsWithoutSlot = getControlElement(element).classList.contains('icon-only');
+			const iconOnlyClassExistsWithoutSlot =
+				getControlElement(element).classList.contains('icon-only');
 			const slottedElement = document.createElement('span');
 			slottedElement.slot = 'icon';
 			element.appendChild(slottedElement);
 			await elementUpdated(element);
 
 			expect(iconOnlyClassExistsWithoutSlot).toEqual(false);
-			expect(getControlElement(element).classList.contains('icon-only')).toEqual(true);
+			expect(
+				getControlElement(element).classList.contains('icon-only')
+			).toEqual(true);
 		});
-
 	});
 
-
 	describe('disabled', function () {
 		it('should disable control and indicator buttons when disabled is true', async () => {
 			element.disabled = true;
@@ -154,7 +170,9 @@ describe('vwc-split-button', () => {
 
 	describe('default slot', () => {
 		it('should should have a default slot', () => {
-			expect(element.shadowRoot?.querySelector('slot:not([name])')).toBeTruthy();
+			expect(
+				element.shadowRoot?.querySelector('slot:not([name])')
+			).toBeTruthy();
 		});
 	});
 
@@ -165,7 +183,9 @@ describe('vwc-split-button', () => {
 			element.action.click();
 
 			expect(spy).toHaveBeenCalledTimes(1);
-			expect(spy).toHaveBeenCalledWith(expect.objectContaining({ bubbles: false }));
+			expect(spy).toHaveBeenCalledWith(
+				expect.objectContaining({ bubbles: false })
+			);
 		});
 	});
 
@@ -176,7 +196,9 @@ describe('vwc-split-button', () => {
 			element.indicator.click();
 
 			expect(spy).toHaveBeenCalledTimes(1);
-			expect(spy).toHaveBeenCalledWith(expect.objectContaining({ bubbles: false }));
+			expect(spy).toHaveBeenCalledWith(
+				expect.objectContaining({ bubbles: false })
+			);
 		});
 	});
 
@@ -193,20 +215,26 @@ describe('vwc-split-button', () => {
 				const labelId = 'label';
 				element.setAttribute('aria-label', labelId);
 				await elementUpdated(element);
-				expect(getControlElement(element).getAttribute('aria-label')).toEqual(labelId);
+				expect(getControlElement(element).getAttribute('aria-label')).toEqual(
+					labelId
+				);
 			});
 		});
 
 		describe('indicator', function () {
 			it('should have a localised "aria-label"', async function () {
-				expect(element.indicator.getAttribute('aria-label')).toBe('Show more actions');
+				expect(element.indicator.getAttribute('aria-label')).toBe(
+					'Show more actions'
+				);
 			});
 
 			it('should allow overriding the "aria-label" with indicatorAriaLabel', async function () {
 				element.indicatorAriaLabel = 'Custom aria label';
 				await elementUpdated(element);
 
-				expect(element.indicator.getAttribute('aria-label')).toBe('Custom aria label');
+				expect(element.indicator.getAttribute('aria-label')).toBe(
+					'Custom aria label'
+				);
 			});
 		});
 
@@ -215,7 +243,9 @@ describe('vwc-split-button', () => {
 				element.setAttribute('aria-expanded', 'true');
 				await elementUpdated(element);
 
-				const indicator = element.shadowRoot?.querySelector('.indicator') as HTMLElement;
+				const indicator = element.shadowRoot?.querySelector(
+					'.indicator'
+				) as HTMLElement;
 				expect(indicator.getAttribute('aria-expanded')).toEqual('true');
 			});
 		});
diff --git a/libs/components/src/lib/split-button/split-button.template.ts b/libs/components/src/lib/split-button/split-button.template.ts
index 13d37e48d9..9066ab7c5c 100644
--- a/libs/components/src/lib/split-button/split-button.template.ts
+++ b/libs/components/src/lib/split-button/split-button.template.ts
@@ -5,37 +5,48 @@ import type {
 	FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
-import {affixIconTemplateFactory, IconWrapper} from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import type { SplitButton } from './split-button';
 
 const getClasses = ({
-	connotation, appearance, shape, disabled, size, label, icon, iconSlottedContent
-}: SplitButton) => classNames(
-	[`connotation-${connotation}`, Boolean(connotation)],
-	['disabled', disabled],
-	[`shape-${shape}`, Boolean(shape)],
-	[`appearance-${appearance}`, Boolean(appearance)],
-	[`size-${size}`, Boolean(size)],
-	['icon-only', !label && !!(icon || iconSlottedContent?.length)],
-
-);
+	connotation,
+	appearance,
+	shape,
+	disabled,
+	size,
+	label,
+	icon,
+	iconSlottedContent,
+}: SplitButton) =>
+	classNames(
+		[`connotation-${connotation}`, Boolean(connotation)],
+		['disabled', disabled],
+		[`shape-${shape}`, Boolean(shape)],
+		[`appearance-${appearance}`, Boolean(appearance)],
+		[`size-${size}`, Boolean(size)],
+		['icon-only', !label && !!(icon || iconSlottedContent?.length)]
+	);
 
 function actionButton(context: ElementDefinitionContext) {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
 	return html<SplitButton>`
-	<button
-		${ref('_action')}
-		class="control ${getClasses}"
-		aria-label="${(x) => x.ariaLabel}"
-		?disabled="${(x) => x.disabled}"
-		@click="${(x) => x.$emit('action-click', undefined, {
-		bubbles: false,
-	})}"
-	>
-			${x => affixIconTemplate(x.icon, IconWrapper.Slot)}
-		<span class="text">${(x) => x.label}</span>
-	</button>
+		<button
+			${ref('_action')}
+			class="control ${getClasses}"
+			aria-label="${(x) => x.ariaLabel}"
+			?disabled="${(x) => x.disabled}"
+			@click="${(x) =>
+				x.$emit('action-click', undefined, {
+					bubbles: false,
+				})}"
+		>
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+			<span class="text">${(x) => x.label}</span>
+		</button>
 	`;
 }
 
@@ -43,18 +54,20 @@ function indicatorButton(context: ElementDefinitionContext) {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
 	return html<SplitButton>`
-	<button
-		${ref('_indicator')}
-		class="indicator ${getClasses}"
-		?disabled="${(x) => x.disabled}"
-		aria-label="${(x) => x.indicatorAriaLabel || x.locale.splitButton.showMoreActionsLabel}"
-		aria-expanded="${(x) => x.ariaExpanded}"
-		@click="${(x) => x.$emit('indicator-click', undefined, {
-		bubbles: false,
-	})}"
-	>
-			${x => affixIconTemplate(x.splitIndicator)}
-	</button>
+		<button
+			${ref('_indicator')}
+			class="indicator ${getClasses}"
+			?disabled="${(x) => x.disabled}"
+			aria-label="${(x) =>
+				x.indicatorAriaLabel || x.locale.splitButton.showMoreActionsLabel}"
+			aria-expanded="${(x) => x.ariaExpanded}"
+			@click="${(x) =>
+				x.$emit('indicator-click', undefined, {
+					bubbles: false,
+				})}"
+		>
+			${(x) => affixIconTemplate(x.splitIndicator)}
+		</button>
 	`;
 }
 
@@ -67,12 +80,10 @@ export const SplitButtonTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
 ) => ViewTemplate<SplitButton> = (context: ElementDefinitionContext) => {
-	return html<SplitButton>`
-		<template role="presentation">
-			<div class="base" role="group">
-				${actionButton(context)}
-				${indicatorButton(context)}
-				<slot></slot>
-			</div>
-		</template>`;
+	return html<SplitButton>` <template role="presentation">
+		<div class="base" role="group">
+			${actionButton(context)} ${indicatorButton(context)}
+			<slot></slot>
+		</div>
+	</template>`;
 };
diff --git a/libs/components/src/lib/split-button/split-button.ts b/libs/components/src/lib/split-button/split-button.ts
index a4cf8f04ca..6f933a1623 100644
--- a/libs/components/src/lib/split-button/split-button.ts
+++ b/libs/components/src/lib/split-button/split-button.ts
@@ -1,8 +1,6 @@
 import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
-import type {
-	Appearance, Connotation, Shape, Size
-} from '../enums.js';
+import type { Appearance, Connotation, Shape, Size } from '../enums.js';
 import { AffixIcon } from '../../shared/patterns/affix';
 import { Localized } from '../../shared/patterns';
 
@@ -11,14 +9,20 @@ import { Localized } from '../../shared/patterns';
  *
  * @public
  */
-export type SplitButtonConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert>;
+export type SplitButtonConnotation = Extract<
+	Connotation,
+	Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert
+>;
 
 /**
  * Types of split button appearance.
  *
  * @public
  */
-export type SplitButtonAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
+export type SplitButtonAppearance = Extract<
+	Appearance,
+	Appearance.Filled | Appearance.Outlined | Appearance.Ghost
+>;
 
 /**
  * Types of split button shape.
@@ -32,7 +36,10 @@ export type SplitButtonShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
  *
  * @public
  */
-export type SplitButtonSize = Extract<Size, Size.SuperCondensed | Size.Condensed | Size.Normal | Size.Expanded>;
+export type SplitButtonSize = Extract<
+	Size,
+	Size.SuperCondensed | Size.Condensed | Size.Normal | Size.Expanded
+>;
 
 /**
  * @public
@@ -126,7 +133,8 @@ export class SplitButton extends FoundationElement {
 	 * @remarks
 	 * HTML Attribute: split-indicator
 	 */
-	@attr({ attribute: 'split-indicator', mode: 'fromView' }) splitIndicator: string = 'chevron-down-line';
+	@attr({ attribute: 'split-indicator', mode: 'fromView' })
+	splitIndicator: string = 'chevron-down-line';
 
 	/**
 	 * Indicates if the button is disabled.
@@ -138,7 +146,8 @@ export class SplitButton extends FoundationElement {
 	@attr({ attribute: 'disabled', mode: 'boolean' }) disabled = false;
 
 	@attr({ attribute: 'aria-label' }) override ariaLabel: string | null = null;
-	@attr({ attribute: 'aria-expanded' }) override ariaExpanded: string | null = null;
+	@attr({ attribute: 'aria-expanded' }) override ariaExpanded: string | null =
+		null;
 
 	/**
 	 * Defines a string value that labels the indicator element.
@@ -148,8 +157,10 @@ export class SplitButton extends FoundationElement {
 	 * @remarks
 	 * HTML Attribute: indicator-aria-label
 	 */
-	@attr({ attribute: 'indicator-aria-label' }) indicatorAriaLabel: string | null = null;
+	@attr({ attribute: 'indicator-aria-label' }) indicatorAriaLabel:
+		| string
+		| null = null;
 }
 
-export interface SplitButton extends AffixIcon, Localized { }
+export interface SplitButton extends AffixIcon, Localized {}
 applyMixins(SplitButton, AffixIcon, Localized);
diff --git a/libs/components/src/lib/split-button/ui.test.ts b/libs/components/src/lib/split-button/ui.test.ts
index 498d61c880..33ab31b070 100644
--- a/libs/components/src/lib/split-button/ui.test.ts
+++ b/libs/components/src/lib/split-button/ui.test.ts
@@ -109,8 +109,7 @@ test('should show the component', async ({ page }: { page: Page }) => {
 
 	await page.waitForLoadState('networkidle');
 
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/split-button.png',
-		);
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/split-button.png'
+	);
 });
diff --git a/libs/components/src/lib/switch/definition.ts b/libs/components/src/lib/switch/definition.ts
index c113ec4aa4..9e5df68730 100644
--- a/libs/components/src/lib/switch/definition.ts
+++ b/libs/components/src/lib/switch/definition.ts
@@ -16,7 +16,7 @@ export const switchDefinition = Switch.compose<FoundationElementDefinition>({
 	styles,
 	shadowOptions: {
 		delegatesFocus: true,
-	}
+	},
 });
 
 /**
diff --git a/libs/components/src/lib/switch/index.ts b/libs/components/src/lib/switch/index.ts
index 52e6c1b8b5..235c5eab05 100644
--- a/libs/components/src/lib/switch/index.ts
+++ b/libs/components/src/lib/switch/index.ts
@@ -1,4 +1,3 @@
 import { registerSwitch } from './definition';
 
-
 registerSwitch();
diff --git a/libs/components/src/lib/switch/switch.spec.ts b/libs/components/src/lib/switch/switch.spec.ts
index bb30fac4ff..c8721b5c5a 100644
--- a/libs/components/src/lib/switch/switch.spec.ts
+++ b/libs/components/src/lib/switch/switch.spec.ts
@@ -1,6 +1,11 @@
-import { axe, elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getControlElement,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
-import {Connotation} from '../enums';
+import { Connotation } from '../enums';
 import { Switch } from './switch';
 import '.';
 import { switchDefinition } from './definition';
@@ -41,7 +46,7 @@ describe('vwc-switch', () => {
 	});
 
 	describe('checked', () => {
-		it('should toggle the check after a click', async function() {
+		it('should toggle the check after a click', async function () {
 			const control = getControlElement(element);
 			control.click();
 			await elementUpdated(element);
@@ -49,7 +54,6 @@ describe('vwc-switch', () => {
 		});
 
 		it('should set the checked from attribute', async () => {
-
 			element.toggleAttribute('checked', true);
 			await elementUpdated(element);
 			const checkedValueWithCheckedAttribute = element.checked;
@@ -61,23 +65,23 @@ describe('vwc-switch', () => {
 			expect(checkedValueWithoutCheckedAttribute).toEqual(false);
 		});
 
-		it('should change when spacebar hit', async function() {
+		it('should change when spacebar hit', async function () {
 			element.checked = false;
 			const control = getControlElement(element);
-			control.dispatchEvent(new KeyboardEvent('keypress',{'key': ' '}));
+			control.dispatchEvent(new KeyboardEvent('keypress', { key: ' ' }));
 			await elementUpdated(element);
 			expect(element.checked).toEqual(true);
 		});
 
-		it('should change when Enter hit', async function() {
+		it('should change when Enter hit', async function () {
 			element.checked = true;
 			const control = getControlElement(element);
-			control.dispatchEvent(new KeyboardEvent('keypress',{'key': 'Enter'}));
+			control.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' }));
 			await elementUpdated(element);
 			expect(element.checked).toEqual(false);
 		});
 
-		it('should set aria-checked on the control', async function() {
+		it('should set aria-checked on the control', async function () {
 			const control = getControlElement(element);
 			const ariaCheckedWhenNotChecked = control.getAttribute('aria-checked');
 
@@ -91,21 +95,17 @@ describe('vwc-switch', () => {
 
 	describe('disabled', () => {
 		it('should set disabled class when attribute is set', async function () {
-			const disabledClassWhenEnabled = getControlElement(element)
-				.classList
-				.contains('disabled');
+			const disabledClassWhenEnabled =
+				getControlElement(element).classList.contains('disabled');
 			element.disabled = true;
 			await elementUpdated(element);
-			const disabledClassWhenDisabled = getControlElement(element)
-				.classList
-				.contains('disabled');
-			expect(disabledClassWhenEnabled)
-				.toEqual(false);
-			expect(disabledClassWhenDisabled)
-				.toEqual(true);
+			const disabledClassWhenDisabled =
+				getControlElement(element).classList.contains('disabled');
+			expect(disabledClassWhenEnabled).toEqual(false);
+			expect(disabledClassWhenDisabled).toEqual(true);
 		});
 
-		it('should set aria-disabled on the control', async function() {
+		it('should set aria-disabled on the control', async function () {
 			const control = getControlElement(element);
 			const ariaDisabledWhenNotDisabled = control.getAttribute('aria-disabled');
 
@@ -116,7 +116,7 @@ describe('vwc-switch', () => {
 			expect(control.getAttribute('aria-disabled')).toEqual('true');
 		});
 
-		it('should remove tabindex when disabled', async function() {
+		it('should remove tabindex when disabled', async function () {
 			const control = getControlElement(element);
 			const tabindexWhenEnabled = control.getAttribute('tabindex');
 			element.disabled = true;
@@ -129,21 +129,17 @@ describe('vwc-switch', () => {
 
 	describe('readOnly', function () {
 		it('should add class readonly to control', async function () {
-			const readonlyClassWhenFalse = getControlElement(element)
-				.classList
-				.contains('readonly');
+			const readonlyClassWhenFalse =
+				getControlElement(element).classList.contains('readonly');
 			element.readOnly = true;
 			await elementUpdated(element);
-			const readonlyClassWhenTrue = getControlElement(element)
-				.classList
-				.contains('readonly');
-			expect(readonlyClassWhenFalse)
-				.toEqual(false);
-			expect(readonlyClassWhenTrue)
-				.toEqual(true);
+			const readonlyClassWhenTrue =
+				getControlElement(element).classList.contains('readonly');
+			expect(readonlyClassWhenFalse).toEqual(false);
+			expect(readonlyClassWhenTrue).toEqual(true);
 		});
 
-		it('should set aria-readonly on the control', async function() {
+		it('should set aria-readonly on the control', async function () {
 			element.readOnly = false;
 			await elementUpdated(element);
 			const control = getControlElement(element);
@@ -159,18 +155,14 @@ describe('vwc-switch', () => {
 
 	describe('checked', function () {
 		it('should add class checked to control', async function () {
-			const checkedClassWhenFalse = getControlElement(element)
-				.classList
-				.contains('checked');
+			const checkedClassWhenFalse =
+				getControlElement(element).classList.contains('checked');
 			element.checked = true;
 			await elementUpdated(element);
-			const checkedClassWhenTrue = getControlElement(element)
-				.classList
-				.contains('checked');
-			expect(checkedClassWhenFalse)
-				.toEqual(false);
-			expect(checkedClassWhenTrue)
-				.toEqual(true);
+			const checkedClassWhenTrue =
+				getControlElement(element).classList.contains('checked');
+			expect(checkedClassWhenFalse).toEqual(false);
+			expect(checkedClassWhenTrue).toEqual(true);
 		});
 
 		it('should set aria-checked on the control', async function () {
@@ -193,7 +185,9 @@ describe('vwc-switch', () => {
 			element.setAttribute('label', labelText);
 			await elementUpdated(element);
 			expect(element.label).toEqual(labelText);
-			expect(element.shadowRoot?.querySelector('.label')?.textContent?.trim()).toEqual(labelText);
+			expect(
+				element.shadowRoot?.querySelector('.label')?.textContent?.trim()
+			).toEqual(labelText);
 		});
 
 		it('should hide the label if no label is supplied', function () {
@@ -203,19 +197,19 @@ describe('vwc-switch', () => {
 
 	describe('connotation', function () {
 		it('should reflect its value to host', async function () {
-
 			element.setAttribute('connotation', 'alert');
 			await elementUpdated(element);
 			const connotationPropertyAfterAttributeChange = element.connotation;
 
 			element.connotation = Connotation.CTA;
 			await elementUpdated(element);
-			const connotationAttributeAfterPropertyChange = element.getAttribute('connotation');
+			const connotationAttributeAfterPropertyChange =
+				element.getAttribute('connotation');
 
-			expect(connotationPropertyAfterAttributeChange)
-				.toEqual(Connotation.Alert);
-			expect(connotationAttributeAfterPropertyChange)
-				.toEqual(Connotation.CTA);
+			expect(connotationPropertyAfterAttributeChange).toEqual(
+				Connotation.Alert
+			);
+			expect(connotationAttributeAfterPropertyChange).toEqual(Connotation.CTA);
 		});
 
 		it('should not set connotation on the control div if unchecked', async function () {
@@ -224,7 +218,9 @@ describe('vwc-switch', () => {
 			const connotation = Connotation.CTA;
 			element.connotation = connotation;
 			await elementUpdated(element);
-			const connotationClassExistsAfterChange = control?.classList.contains(`connotation-${connotation}`);
+			const connotationClassExistsAfterChange = control?.classList.contains(
+				`connotation-${connotation}`
+			);
 
 			expect(connotationClassExistsAfterChange).toEqual(false);
 		});
@@ -233,16 +229,18 @@ describe('vwc-switch', () => {
 			const control = getControlElement(element);
 
 			const connotation = Connotation.CTA;
-			const connotationClassExistsBeforeChange = control?.classList.contains(`connotation-${connotation}`);
+			const connotationClassExistsBeforeChange = control?.classList.contains(
+				`connotation-${connotation}`
+			);
 			element.checked = true;
 			element.connotation = connotation;
 			await elementUpdated(element);
-			const connotationClassExistsAfterChange = control?.classList.contains(`connotation-${connotation}`);
+			const connotationClassExistsAfterChange = control?.classList.contains(
+				`connotation-${connotation}`
+			);
 
-			expect(connotationClassExistsBeforeChange)
-				.toEqual(false);
-			expect(connotationClassExistsAfterChange)
-				.toEqual(true);
+			expect(connotationClassExistsBeforeChange).toEqual(false);
+			expect(connotationClassExistsAfterChange).toEqual(true);
 		});
 	});
 
@@ -250,23 +248,27 @@ describe('vwc-switch', () => {
 		it('should apply filled appearance style when checked', async function () {
 			const control = getControlElement(element);
 
-			const appearanceFilledClassExistsBeforeChecked = control?.classList.contains('appearance-filled');
+			const appearanceFilledClassExistsBeforeChecked =
+				control?.classList.contains('appearance-filled');
 
 			element.checked = true;
 			await elementUpdated(element);
 
-			const appearanceFilledClassExistsAfterChecked = control?.classList.contains('appearance-filled');
+			const appearanceFilledClassExistsAfterChecked =
+				control?.classList.contains('appearance-filled');
 
 			element.disabled = true;
 			await elementUpdated(element);
 
-			const appearanceFilledClassExistsAfterDisabled = control?.classList.contains('appearance-filled');
+			const appearanceFilledClassExistsAfterDisabled =
+				control?.classList.contains('appearance-filled');
 
 			element.disabled = false;
 			element.readOnly = true;
 			await elementUpdated(element);
 
-			const appearanceFilledClassExistsAfterReadonly = control?.classList.contains('appearance-filled');
+			const appearanceFilledClassExistsAfterReadonly =
+				control?.classList.contains('appearance-filled');
 
 			expect(appearanceFilledClassExistsBeforeChecked).toEqual(false);
 			expect(appearanceFilledClassExistsAfterChecked).toEqual(true);
diff --git a/libs/components/src/lib/switch/switch.template.ts b/libs/components/src/lib/switch/switch.template.ts
index 0644a16cc8..0dcb9fd24d 100644
--- a/libs/components/src/lib/switch/switch.template.ts
+++ b/libs/components/src/lib/switch/switch.template.ts
@@ -1,4 +1,4 @@
-import {html, when} from '@microsoft/fast-element';
+import { html, when } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type {
 	ElementDefinitionContext,
@@ -7,13 +7,18 @@ import type {
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { Switch } from './switch';
 
-const getClasses = (_: Switch) => classNames('control',
-	['appearance-filled', _.checked],
-	['checked', _.checked],
-	['disabled', _.disabled],
-	['readonly', _.readOnly],
-	[`connotation-${_.connotation}`, Boolean(_.checked) && Boolean(_.connotation)],
-);
+const getClasses = (_: Switch) =>
+	classNames(
+		'control',
+		['appearance-filled', _.checked],
+		['checked', _.checked],
+		['disabled', _.disabled],
+		['readonly', _.readOnly],
+		[
+			`connotation-${_.connotation}`,
+			Boolean(_.checked) && Boolean(_.connotation),
+		]
+	);
 
 /**
  * The template for the Switch component.
@@ -27,21 +32,22 @@ export const SwitchTemplate: (
 ) => ViewTemplate<Switch> = () => {
 	return html<Switch>`
 		<div
-				class="${getClasses}"
-				role="switch"
-				aria-checked="${x => x.checked}"
-				aria-disabled="${x => x.disabled}"
-				aria-readonly="${x => x.readOnly}"
-				tabindex="${x => (x.disabled ? null : 0)}"
-				@keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
-				@click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+			class="${getClasses}"
+			role="switch"
+			aria-checked="${(x) => x.checked}"
+			aria-disabled="${(x) => x.disabled}"
+			aria-readonly="${(x) => x.readOnly}"
+			tabindex="${(x) => (x.disabled ? null : 0)}"
+			@keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
+			@click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
 		>
 			<div class="switch">
 				<span class="checked-indicator"></span>
 			</div>
-			${when(x => x.label, html<Switch>`<div class="label">
-				${x => x.label}
-		</div>`)}
+			${when(
+				(x) => x.label,
+				html<Switch>`<div class="label">${(x) => x.label}</div>`
+			)}
 		</div>
-		`;
+	`;
 };
diff --git a/libs/components/src/lib/switch/switch.ts b/libs/components/src/lib/switch/switch.ts
index 61cc3c5418..2d4cb0c6a6 100644
--- a/libs/components/src/lib/switch/switch.ts
+++ b/libs/components/src/lib/switch/switch.ts
@@ -1,12 +1,12 @@
 import { Switch as FoundationSwitch } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
-import type {Connotation} from '../enums';
+import type { Connotation } from '../enums';
 
 export type SwitchConnotation =
-	Connotation.Accent |
-	Connotation.Alert |
-	Connotation.Success |
-	Connotation.CTA;
+	| Connotation.Accent
+	| Connotation.Alert
+	| Connotation.Success
+	| Connotation.CTA;
 /**
  * @public
  * @component switch
@@ -23,10 +23,10 @@ export class Switch extends FoundationSwitch {
 	@attr label?: string;
 
 	/**
-	* Indicates the switch's connotation.
-	*
-	* @public
-	* HTML Attribute: connotation
-	*/
+	 * Indicates the switch's connotation.
+	 *
+	 * @public
+	 * HTML Attribute: connotation
+	 */
 	@attr connotation?: SwitchConnotation;
 }
diff --git a/libs/components/src/lib/switch/ui.test.ts b/libs/components/src/lib/switch/ui.test.ts
index d9db9131cd..f68251e4b8 100644
--- a/libs/components/src/lib/switch/ui.test.ts
+++ b/libs/components/src/lib/switch/ui.test.ts
@@ -1,5 +1,5 @@
-import {expect, test} from '@playwright/test';
-import type {Page} from '@playwright/test';
+import { expect, test } from '@playwright/test';
+import type { Page } from '@playwright/test';
 import {
 	loadComponents,
 	loadTemplate,
@@ -7,8 +7,7 @@ import {
 
 const components = ['switch', 'layout'];
 
-test('should show the component', async ({page}: { page: Page }) => {
-
+test('should show the component', async ({ page }: { page: Page }) => {
 	const template = `
 	<div style="margin: 5px;">
   	<vwc-layout gutters="small"><div><vwc-switch id="focused"></vwc-switch></div></vwc-layout>
@@ -63,8 +62,7 @@ test('should show the component', async ({page}: { page: Page }) => {
 
 	await page.waitForLoadState('networkidle');
 
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/switch.png'
-		);
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/switch.png'
+	);
 });
diff --git a/libs/components/src/lib/tab-panel/definition.ts b/libs/components/src/lib/tab-panel/definition.ts
index b7b113a3c5..f34b6289b5 100644
--- a/libs/components/src/lib/tab-panel/definition.ts
+++ b/libs/components/src/lib/tab-panel/definition.ts
@@ -4,14 +4,15 @@ import { registerFactory } from '../../shared/design-system';
 import { TabPanel } from './tab-panel';
 import { TabPanelTemplate as template } from './tab-panel.template';
 
-
 /**
  * The tab panel element.
  */
-export const tabPanelDefinition = TabPanel.compose<FoundationElementDefinition>({
-	baseName: 'tab-panel',
-	template: template as any,
-});
+export const tabPanelDefinition = TabPanel.compose<FoundationElementDefinition>(
+	{
+		baseName: 'tab-panel',
+		template: template as any,
+	}
+);
 
 /**
  * @internal
diff --git a/libs/components/src/lib/tab-panel/index.ts b/libs/components/src/lib/tab-panel/index.ts
index d39f61f27c..c5f1e30537 100644
--- a/libs/components/src/lib/tab-panel/index.ts
+++ b/libs/components/src/lib/tab-panel/index.ts
@@ -1,4 +1,3 @@
 import { registerTabPanel } from './definition';
 
-
 registerTabPanel();
diff --git a/libs/components/src/lib/tab-panel/tab-panel.template.ts b/libs/components/src/lib/tab-panel/tab-panel.template.ts
index 01f8feb28d..5e284471a2 100644
--- a/libs/components/src/lib/tab-panel/tab-panel.template.ts
+++ b/libs/components/src/lib/tab-panel/tab-panel.template.ts
@@ -8,8 +8,8 @@ import type { TabPanel } from './tab-panel.js';
  */
 export function TabPanelTemplate<T extends TabPanel>() {
 	return html<T>`
-        <template slot="tabpanel" role="tabpanel">
-            <slot></slot>
-        </template>
-    `;
+		<template slot="tabpanel" role="tabpanel">
+			<slot></slot>
+		</template>
+	`;
 }
diff --git a/libs/components/src/lib/tab-panel/tab-panel.ts b/libs/components/src/lib/tab-panel/tab-panel.ts
index b78a914ebc..d087c29906 100644
--- a/libs/components/src/lib/tab-panel/tab-panel.ts
+++ b/libs/components/src/lib/tab-panel/tab-panel.ts
@@ -1,6 +1,5 @@
 import { TabPanel as FoundationTabPanel } from '@microsoft/fast-foundation';
 
-
 /**
  * @public
  * @component tab-panel
diff --git a/libs/components/src/lib/tab/definition.ts b/libs/components/src/lib/tab/definition.ts
index dc1a57d211..4e6ce2ee15 100644
--- a/libs/components/src/lib/tab/definition.ts
+++ b/libs/components/src/lib/tab/definition.ts
@@ -14,7 +14,7 @@ export type { TabConnotation, TabShape } from './tab';
 export const tabDefinition = Tab.compose<FoundationElementDefinition>({
 	baseName: 'tab',
 	template: template as any,
-	styles
+	styles,
 });
 
 /**
diff --git a/libs/components/src/lib/tab/index.ts b/libs/components/src/lib/tab/index.ts
index 5b997bf34a..df594ee036 100644
--- a/libs/components/src/lib/tab/index.ts
+++ b/libs/components/src/lib/tab/index.ts
@@ -1,4 +1,3 @@
 import { registerTab } from './definition';
 
-
 registerTab();
diff --git a/libs/components/src/lib/tab/tab.spec.ts b/libs/components/src/lib/tab/tab.spec.ts
index 0ebf5e7c57..82427b814d 100644
--- a/libs/components/src/lib/tab/tab.spec.ts
+++ b/libs/components/src/lib/tab/tab.spec.ts
@@ -1,10 +1,9 @@
 import { axe, elementUpdated, fixture, getBaseElement } from '@vivid-nx/shared';
-import {Connotation} from '../enums';
-import {Icon} from '../icon/icon';
+import { Connotation } from '../enums';
+import { Icon } from '../icon/icon';
 import { Tab } from './tab';
 import '.';
 
-
 const COMPONENT_TAG = 'vwc-tab';
 const ICON_SELECTOR = 'vwc-icon';
 
@@ -40,7 +39,9 @@ describe('vwc-tab', () => {
 
 	describe('icon', () => {
 		it('should have an icon slot', async () => {
-			expect(Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))).toEqual(true);
+			expect(
+				Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))
+			).toEqual(true);
 		});
 
 		it('should have an icon when icon is set without slotted icon', async () => {
@@ -48,24 +49,21 @@ describe('vwc-tab', () => {
 			await elementUpdated(element);
 
 			const icon = element.shadowRoot?.querySelector(ICON_SELECTOR) as Icon;
-			expect(icon)
-				.toBeInstanceOf(Icon);
-			expect(icon?.name)
-				.toEqual('home');
+			expect(icon).toBeInstanceOf(Icon);
+			expect(icon?.name).toEqual('home');
 		});
 	});
 
-	describe('iconTrailing', function() {
+	describe('iconTrailing', function () {
 		it('should add "icon-trailing" class to base', async () => {
 			element.icon = 'home';
 			element.iconTrailing = true;
 			await elementUpdated(element);
 
 			const trailingIcon = element.shadowRoot?.querySelector(
-				`.icon-trailing ${ICON_SELECTOR}`,
+				`.icon-trailing ${ICON_SELECTOR}`
 			);
-			expect(trailingIcon)
-				.toBeInstanceOf(Icon);
+			expect(trailingIcon).toBeInstanceOf(Icon);
 		});
 	});
 
@@ -83,21 +81,33 @@ describe('vwc-tab', () => {
 			element.connotation = Connotation.CTA;
 			element.ariaSelected = 'true';
 			await elementUpdated(element);
-			expect(getBaseElement(element).classList.contains(`connotation-${Connotation.CTA}`)).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains(
+					`connotation-${Connotation.CTA}`
+				)
+			).toBeTruthy();
 		});
 
 		it('should remove connotation class on base if false', async () => {
 			element.connotation = Connotation.CTA;
 			element.ariaSelected = 'false';
 			await elementUpdated(element);
-			expect(getBaseElement(element).classList.contains(`connotation-${Connotation.CTA}`)).toBeFalsy();
+			expect(
+				getBaseElement(element).classList.contains(
+					`connotation-${Connotation.CTA}`
+				)
+			).toBeFalsy();
 		});
 
 		it('should remove connotation class on base if null', async () => {
 			element.connotation = Connotation.CTA;
 			element.ariaSelected = null;
 			await elementUpdated(element);
-			expect(getBaseElement(element).classList.contains(`connotation-${Connotation.CTA}`)).toBeFalsy();
+			expect(
+				getBaseElement(element).classList.contains(
+					`connotation-${Connotation.CTA}`
+				)
+			).toBeFalsy();
 		});
 	});
 
@@ -108,13 +118,17 @@ describe('vwc-tab', () => {
 			(element as any).shape = shape;
 			await elementUpdated(element);
 
-			expect(getBaseElement(element).classList.contains(`shape-${shape}`)).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains(`shape-${shape}`)
+			).toBeTruthy();
 		});
 	});
 
 	describe('a11y', () => {
 		it('should pass html a11y tests', async () => {
-			element = (await fixture(`<div role="tablist"><${COMPONENT_TAG}></${COMPONENT_TAG}></div>`)) as Tab;
+			element = (await fixture(
+				`<div role="tablist"><${COMPONENT_TAG}></${COMPONENT_TAG}></div>`
+			)) as Tab;
 			element.label = 'Label';
 			element.ariaSelected = 'true';
 			await elementUpdated(element);
diff --git a/libs/components/src/lib/tab/tab.template.ts b/libs/components/src/lib/tab/tab.template.ts
index 0926c04caf..c003f158f7 100644
--- a/libs/components/src/lib/tab/tab.template.ts
+++ b/libs/components/src/lib/tab/tab.template.ts
@@ -1,19 +1,30 @@
 import { html } from '@microsoft/fast-element';
 import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import type { Tab } from './tab.js';
 
 const getClasses = ({
-	connotation, disabled, ariaSelected, iconTrailing, shape
-}: Tab) => classNames(
-	'base',
-	[`connotation-${connotation}`, (Boolean(connotation)) && (ariaSelected === 'true')],
-	[`shape-${shape}`, Boolean(shape)],
-	['disabled', Boolean(disabled)],
-	['selected', ariaSelected === 'true'],
-	['icon-trailing', iconTrailing],
-);
+	connotation,
+	disabled,
+	ariaSelected,
+	iconTrailing,
+	shape,
+}: Tab) =>
+	classNames(
+		'base',
+		[
+			`connotation-${connotation}`,
+			Boolean(connotation) && ariaSelected === 'true',
+		],
+		[`shape-${shape}`, Boolean(shape)],
+		['disabled', Boolean(disabled)],
+		['selected', ariaSelected === 'true'],
+		['icon-trailing', iconTrailing]
+	);
 
 /**
  * The template for the (Tab:class) component.
@@ -24,12 +35,14 @@ const getClasses = ({
 export function TabTemplate<T extends Tab>(context: ElementDefinitionContext) {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
-
-	return html<T>`
-	<template slot="tab" role="tab" aria-disabled="${x => x.disabled}" aria-selected="${x => x.ariaSelected}">
-		<div class="${getClasses}" >
-			${x => affixIconTemplate(x.icon, IconWrapper.Slot)}
-      ${x => x.label}
+	return html<T>` <template
+		slot="tab"
+		role="tab"
+		aria-disabled="${(x) => x.disabled}"
+		aria-selected="${(x) => x.ariaSelected}"
+	>
+		<div class="${getClasses}">
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.label}
 		</div>
 	</template>`;
 }
diff --git a/libs/components/src/lib/tab/tab.ts b/libs/components/src/lib/tab/tab.ts
index 2140c09ebe..1c95dc8b32 100644
--- a/libs/components/src/lib/tab/tab.ts
+++ b/libs/components/src/lib/tab/tab.ts
@@ -2,16 +2,17 @@ import { attr } from '@microsoft/fast-element';
 import { applyMixins, Tab as FoundationTab } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 
-import type { Connotation, Shape} from '../enums.js';
+import type { Connotation, Shape } from '../enums.js';
 
 /**
  * Types of tab connotation.
  *
  * @public
  */
-export type TabConnotation = Extract<Connotation,
-| Connotation.Accent
-| Connotation.CTA>;
+export type TabConnotation = Extract<
+	Connotation,
+	Connotation.Accent | Connotation.CTA
+>;
 
 /**
  * Types of avatar shape.
@@ -54,8 +55,9 @@ export class Tab extends FoundationTab {
 
 	@attr({ mode: 'fromView' }) override tabIndex: any = '-1';
 
-	@attr({ attribute: 'aria-selected' }) override ariaSelected: string | null = null;
+	@attr({ attribute: 'aria-selected' }) override ariaSelected: string | null =
+		null;
 }
 
-export interface Tab extends AffixIconWithTrailing { }
+export interface Tab extends AffixIconWithTrailing {}
 applyMixins(Tab, AffixIconWithTrailing);
diff --git a/libs/components/src/lib/tabs/definition.ts b/libs/components/src/lib/tabs/definition.ts
index f9a595fc4e..c5f525ec91 100644
--- a/libs/components/src/lib/tabs/definition.ts
+++ b/libs/components/src/lib/tabs/definition.ts
@@ -7,20 +7,23 @@ import styles from './tabs.scss?inline';
 import { Tabs } from './tabs';
 import { TabsTemplate as template } from './tabs.template';
 
-
 /**
  * The tabs element.
  */
 export const tabsDefinition = Tabs.compose<FoundationElementDefinition>({
 	baseName: 'tabs',
 	template: template as any,
-	styles
+	styles,
 });
 
 /**
  * @internal
  */
-export const tabsRegistries = [tabsDefinition(), ...tabRegistries, ...tabPanelRegistries];
+export const tabsRegistries = [
+	tabsDefinition(),
+	...tabRegistries,
+	...tabPanelRegistries,
+];
 
 /**
  * Registers the tabs elements with the design system.
diff --git a/libs/components/src/lib/tabs/index.ts b/libs/components/src/lib/tabs/index.ts
index 565aad72af..788db2f159 100644
--- a/libs/components/src/lib/tabs/index.ts
+++ b/libs/components/src/lib/tabs/index.ts
@@ -1,4 +1,3 @@
 import { registerTabs } from './definition';
 
-
 registerTabs();
diff --git a/libs/components/src/lib/tabs/tabs.spec.ts b/libs/components/src/lib/tabs/tabs.spec.ts
index 48c4fe3aa4..aba190f562 100644
--- a/libs/components/src/lib/tabs/tabs.spec.ts
+++ b/libs/components/src/lib/tabs/tabs.spec.ts
@@ -7,12 +7,17 @@ import '.';
 const COMPONENT_TAG = 'vwc-tabs';
 
 describe('vwc-tabs', () => {
-
 	beforeEach(function () {
 		window.HTMLElement.prototype.getBoundingClientRect = function () {
 			return {
-				x: 146, y: 50, width: 440, height: 240,
-				top: 50, right: 586, bottom: 290, left: 146
+				x: 146,
+				y: 50,
+				width: 440,
+				height: 240,
+				top: 50,
+				right: 586,
+				bottom: 290,
+				left: 146,
 			} as DOMRect;
 		};
 		window.HTMLElement.prototype.scrollIntoView = jest.fn();
@@ -20,7 +25,9 @@ describe('vwc-tabs', () => {
 	});
 
 	async function setFixture(activeid: string | null = 'apps'): Promise<Tabs> {
-		return (await fixture(`<${COMPONENT_TAG} ${activeid ? `activeid="${activeid}"` : ''}>
+		return (await fixture(`<${COMPONENT_TAG} ${
+			activeid ? `activeid="${activeid}"` : ''
+		}>
 		<vwc-tab label="Appetizers" id="apps"></vwc-tab>
 		<vwc-tab label="Entrees" id="entrees"></vwc-tab>
 		<vwc-tab label="Desserts" id="desserts"></vwc-tab>
@@ -70,10 +77,14 @@ describe('vwc-tabs', () => {
 	describe('orientation', () => {
 		it('should set orientation property', async () => {
 			const orientation = 'vertical';
-			expect(getBaseElement(element).classList.contains(`orientation-${orientation}`)).toBeFalsy();
+			expect(
+				getBaseElement(element).classList.contains(`orientation-${orientation}`)
+			).toBeFalsy();
 			element.orientation = orientation as any;
 			await elementUpdated(element);
-			expect(getBaseElement(element).classList.contains(`orientation-${orientation}`)).toBeTruthy();
+			expect(
+				getBaseElement(element).classList.contains(`orientation-${orientation}`)
+			).toBeTruthy();
 		});
 	});
 
@@ -101,7 +112,9 @@ describe('vwc-tabs', () => {
 			const scrollWidth = 1320;
 			const scrollHeight = 660;
 			beforeEach(function () {
-				const tablistWrapper = element.shadowRoot?.querySelector('.tablist-wrapper') as HTMLElement;
+				const tablistWrapper = element.shadowRoot?.querySelector(
+					'.tablist-wrapper'
+				) as HTMLElement;
 				jest
 					.spyOn(tablistWrapper, 'scrollWidth', 'get')
 					.mockImplementation(() => scrollWidth);
@@ -114,27 +127,43 @@ describe('vwc-tabs', () => {
 			it('should scrollTo with 0 if index is 0', async function () {
 				element.activeid = element.tabs[0].id;
 				await elementUpdated(element);
-				expect(scrollToSpy).toHaveBeenCalledWith({ top: 0, left: 0, behavior: 'smooth' });
+				expect(scrollToSpy).toHaveBeenCalledWith({
+					top: 0,
+					left: 0,
+					behavior: 'smooth',
+				});
 			});
 
 			it('should scrollTo height 0 if index is 0 and orientation vertical', async function () {
 				element.orientation = 'vertical';
 				element.activeid = element.tabs[0].id;
 				await elementUpdated(element);
-				expect(scrollToSpy).toHaveBeenCalledWith({ top: 0, left: 0, behavior: 'smooth' });
+				expect(scrollToSpy).toHaveBeenCalledWith({
+					top: 0,
+					left: 0,
+					behavior: 'smooth',
+				});
 			});
 
 			it('should scroll to tablist wrapper width when index is last', async function () {
 				element.activeid = element.tabs[2].id;
 				await elementUpdated(element);
-				expect(scrollToSpy).toHaveBeenCalledWith({ top: 0, left: scrollWidth, behavior: 'smooth' });
+				expect(scrollToSpy).toHaveBeenCalledWith({
+					top: 0,
+					left: scrollWidth,
+					behavior: 'smooth',
+				});
 			});
 
 			it('should scroll to tablist wrapper height when index is last and orientation vertical', async function () {
 				element.orientation = 'vertical';
 				element.activeid = element.tabs[2].id;
 				await elementUpdated(element);
-				expect(scrollToSpy).toHaveBeenCalledWith({ top: scrollHeight, left: 0, behavior: 'smooth' });
+				expect(scrollToSpy).toHaveBeenCalledWith({
+					top: scrollHeight,
+					left: 0,
+					behavior: 'smooth',
+				});
 			});
 
 			it('should scroll to sum of tabs plus half active tab when index is between 0 and last', async function () {
@@ -142,7 +171,9 @@ describe('vwc-tabs', () => {
 				const offsetWidth = 200;
 				const scrollWidth = 1000;
 				function setTabListWrapper(scrollWidth: number) {
-					const tablistWrapper = element.shadowRoot?.querySelector('.tablist-wrapper') as HTMLElement;
+					const tablistWrapper = element.shadowRoot?.querySelector(
+						'.tablist-wrapper'
+					) as HTMLElement;
 					jest
 						.spyOn(tablistWrapper, 'offsetWidth', 'get')
 						.mockImplementation(() => scrollWidth);
@@ -163,8 +194,11 @@ describe('vwc-tabs', () => {
 
 				element.activeid = midTab.id;
 				await elementUpdated(element);
-				expect(scrollToSpy)
-					.toHaveBeenCalledWith({ top: 0, left: offsetLeft - scrollWidth / 2 + offsetWidth / 2, behavior: 'smooth' });
+				expect(scrollToSpy).toHaveBeenCalledWith({
+					top: 0,
+					left: offsetLeft - scrollWidth / 2 + offsetWidth / 2,
+					behavior: 'smooth',
+				});
 			});
 
 			it('should scroll to sum of tabs plus half active tab when index is between 0 and last', async function () {
@@ -172,7 +206,9 @@ describe('vwc-tabs', () => {
 				const offsetHeight = 200;
 				const scrollHeight = 1000;
 				function setTabListWrapper(scrollHeight: number) {
-					const tablistWrapper = element.shadowRoot?.querySelector('.tablist-wrapper') as HTMLElement;
+					const tablistWrapper = element.shadowRoot?.querySelector(
+						'.tablist-wrapper'
+					) as HTMLElement;
 					jest
 						.spyOn(tablistWrapper, 'offsetHeight', 'get')
 						.mockImplementation(() => scrollHeight);
@@ -193,8 +229,11 @@ describe('vwc-tabs', () => {
 				element.orientation = 'vertical';
 				element.activeid = midTab.id;
 				await elementUpdated(element);
-				expect(scrollToSpy)
-					.toHaveBeenCalledWith({ top: offsetTop - scrollHeight / 2 + offsetHeight / 2, left: 0, behavior: 'smooth' });
+				expect(scrollToSpy).toHaveBeenCalledWith({
+					top: offsetTop - scrollHeight / 2 + offsetHeight / 2,
+					left: 0,
+					behavior: 'smooth',
+				});
 			});
 		});
 	});
@@ -202,21 +241,31 @@ describe('vwc-tabs', () => {
 	describe('gutters', () => {
 		it('should set gutters property', async () => {
 			const gutters = TabsSize.Small;
-			expect(getBaseElement(element).classList.toString()).not.toContain(`gutters-${gutters}`);
+			expect(getBaseElement(element).classList.toString()).not.toContain(
+				`gutters-${gutters}`
+			);
 			element.gutters = gutters;
 			await elementUpdated(element);
-			expect(getBaseElement(element).classList.toString()).toContain(`gutters-${gutters}`);
+			expect(getBaseElement(element).classList.toString()).toContain(
+				`gutters-${gutters}`
+			);
 		});
 	});
 
 	describe('connotation', () => {
-		function checkConnotationOnActiveTab(connotation: Connotation = Connotation.CTA) {
-			expect(element.activetab.getAttribute('connotation')).toEqual(connotation);
+		function checkConnotationOnActiveTab(
+			connotation: Connotation = Connotation.CTA
+		) {
+			expect(element.activetab.getAttribute('connotation')).toEqual(
+				connotation
+			);
 		}
 
 		function checkConnotationDoesntExistOnNonActiveTabs() {
-			const nonActiveTabs = Array.from(element.querySelectorAll('vwc-tab:not([aria-selected="true"])'));
-			nonActiveTabs.forEach(tab => {
+			const nonActiveTabs = Array.from(
+				element.querySelectorAll('vwc-tab:not([aria-selected="true"])')
+			);
+			nonActiveTabs.forEach((tab) => {
 				expect(tab.hasAttribute('connotation')).toBeFalsy();
 			});
 		}
@@ -268,7 +317,6 @@ describe('vwc-tabs', () => {
 			element.scrollablePanel = true;
 			await elementUpdated(element);
 			expect(getBaseElement(element).classList.contains('scroll')).toBeTruthy();
-
 		});
 	});
 
diff --git a/libs/components/src/lib/tabs/tabs.template.ts b/libs/components/src/lib/tabs/tabs.template.ts
index 945af96675..e456d721a6 100644
--- a/libs/components/src/lib/tabs/tabs.template.ts
+++ b/libs/components/src/lib/tabs/tabs.template.ts
@@ -3,14 +3,18 @@ import { classNames } from '@microsoft/fast-web-utilities';
 import type { Tabs } from './tabs.js';
 
 const getClasses = ({
-	connotation, orientation, gutters, scrollablePanel
-}: Tabs) => classNames(
-	'base',
-	[`connotation-${connotation}`, Boolean(connotation)],
-	[`orientation-${orientation}`, Boolean(orientation)],
-	[`gutters-${gutters}`, Boolean(gutters)],
-	['scroll', Boolean(scrollablePanel)]
-);
+	connotation,
+	orientation,
+	gutters,
+	scrollablePanel,
+}: Tabs) =>
+	classNames(
+		'base',
+		[`connotation-${connotation}`, Boolean(connotation)],
+		[`orientation-${orientation}`, Boolean(orientation)],
+		[`gutters-${gutters}`, Boolean(gutters)],
+		['scroll', Boolean(scrollablePanel)]
+	);
 
 /**
  * The template for the (Tabs:class) component.
@@ -24,9 +28,15 @@ export function TabsTemplate<T extends Tabs>() {
 				<div class="tablist-wrapper">
 					<div class="tablist" role="tablist" ${ref('tablist')}>
 						<slot name="tab" ${slotted('tabs')}></slot>
-						${when(x => x.showActiveIndicator, html<T>`
-							<div ${ref('activeIndicatorRef')} class="active-indicator"></div>
-						`)}
+						${when(
+							(x) => x.showActiveIndicator,
+							html<T>`
+								<div
+									${ref('activeIndicatorRef')}
+									class="active-indicator"
+								></div>
+							`
+						)}
 					</div>
 				</div>
 				<div class="tabpanel">
diff --git a/libs/components/src/lib/tabs/tabs.ts b/libs/components/src/lib/tabs/tabs.ts
index 03a1ee834b..18a68ba98c 100644
--- a/libs/components/src/lib/tabs/tabs.ts
+++ b/libs/components/src/lib/tabs/tabs.ts
@@ -1,5 +1,8 @@
 import { attr, observable } from '@microsoft/fast-element';
-import { Tabs as FoundationTabs, TabsOrientation } from '@microsoft/fast-foundation';
+import {
+	Tabs as FoundationTabs,
+	TabsOrientation,
+} from '@microsoft/fast-foundation';
 import type { Connotation, TabsSize } from '../enums.js';
 
 export const ACTIVE_TAB_WIDTH = '--_tabs-active-tab-inline-size';
@@ -9,10 +12,12 @@ export const ACTIVE_TAB_WIDTH = '--_tabs-active-tab-inline-size';
  *
  * @public
  */
-export type TabsConnotation = Extract<Connotation, | Connotation.Accent | Connotation.CTA>;
-
-export type Gutters = Extract<TabsSize, TabsSize.Small >;
+export type TabsConnotation = Extract<
+	Connotation,
+	Connotation.Accent | Connotation.CTA
+>;
 
+export type Gutters = Extract<TabsSize, TabsSize.Small>;
 
 /**
  * @public
@@ -20,7 +25,6 @@ export type Gutters = Extract<TabsSize, TabsSize.Small >;
  * @slot - Default slot.
  */
 export class Tabs extends FoundationTabs {
-
 	@observable tablist?: HTMLElement;
 
 	/**
@@ -43,7 +47,8 @@ export class Tabs extends FoundationTabs {
 	 *
 	 * @public
 	 */
-	@attr ({mode: 'boolean',attribute: 'scrollable-panel', }) scrollablePanel = false;
+	@attr({ mode: 'boolean', attribute: 'scrollable-panel' }) scrollablePanel =
+		false;
 
 	connotationChanged() {
 		this.#updateTabsConnotation();
@@ -79,14 +84,18 @@ export class Tabs extends FoundationTabs {
 
 	patchIndicatorStyleTransition() {
 		if (!this.activetab || !this.activeIndicatorRef) return;
-		if (this.orientation === TabsOrientation.vertical || !this.showActiveIndicator) return;
+		if (
+			this.orientation === TabsOrientation.vertical ||
+			!this.showActiveIndicator
+		)
+			return;
 		const width = this.activetab.getBoundingClientRect().width;
 		this.activeIndicatorRef.style.setProperty(ACTIVE_TAB_WIDTH, `${width}px`);
 	}
 
 	#updateTabsConnotation() {
 		if (this.tabs) {
-			this.tabs.forEach(tab => {
+			this.tabs.forEach((tab) => {
 				if (tab.getAttribute('aria-selected') === 'true') {
 					tab.setAttribute('connotation', this.connotation as string);
 				} else {
@@ -110,14 +119,20 @@ export class Tabs extends FoundationTabs {
 				top = this.#tabListWrapper.scrollHeight;
 			}
 			if (index > 0 && index < this.tabs.length - 1) {
-				top = tab.offsetTop - this.#tabListWrapper.offsetHeight / 2 + (tab.offsetHeight / 2);
+				top =
+					tab.offsetTop -
+					this.#tabListWrapper.offsetHeight / 2 +
+					tab.offsetHeight / 2;
 			}
 		} else {
 			if (index === this.tabs.length - 1) {
 				left = this.#tabListWrapper.scrollWidth;
 			}
 			if (index > 0 && index < this.tabs.length - 1) {
-				left = tab.offsetLeft - this.#tabListWrapper.offsetWidth / 2 + (tab.offsetWidth / 2);
+				left =
+					tab.offsetLeft -
+					this.#tabListWrapper.offsetWidth / 2 +
+					tab.offsetWidth / 2;
 			}
 		}
 
diff --git a/libs/components/src/lib/tabs/ui.test.ts b/libs/components/src/lib/tabs/ui.test.ts
index f5840e019b..a67a1548ce 100644
--- a/libs/components/src/lib/tabs/ui.test.ts
+++ b/libs/components/src/lib/tabs/ui.test.ts
@@ -71,7 +71,7 @@ test('should scroll only inside tabs', async ({ page }: { page: Page }) => {
 
 	const body = await page.$('body');
 
-	const bodyScrollTop = await body.evaluate(e => e.scrollTop);
+	const bodyScrollTop = await body.evaluate((e) => e.scrollTop);
 
 	expect(bodyScrollTop).toEqual(0);
 });
diff --git a/libs/components/src/lib/tag-group/tag-group.template.ts b/libs/components/src/lib/tag-group/tag-group.template.ts
index 9070627687..e59b1ebb05 100644
--- a/libs/components/src/lib/tag-group/tag-group.template.ts
+++ b/libs/components/src/lib/tag-group/tag-group.template.ts
@@ -5,18 +5,23 @@ import { classNames } from '@microsoft/fast-web-utilities';
 import type { Tag } from '../tag/tag';
 import type { TagGroup } from './tag-group';
 
-const getClasses = (_: Tag) => classNames(
-	'base',
-);
+const getClasses = (_: Tag) => classNames('base');
 
 /**
  *
  * @param context - element definition context
  * @public
  */
-export const TagGroupTemplate: (context: ElementDefinitionContext) => ViewTemplate<TagGroup> = () => {
+export const TagGroupTemplate: (
+	context: ElementDefinitionContext
+) => ViewTemplate<TagGroup> = () => {
 	return html<TagGroup>`
-		<div class="${getClasses}" role="listbox" aria-orientation="horizontal" aria-label="${x => x.ariaLabel}">
+		<div
+			class="${getClasses}"
+			role="listbox"
+			aria-orientation="horizontal"
+			aria-label="${(x) => x.ariaLabel}"
+		>
 			<slot></slot>
 		</div>
 	`;
diff --git a/libs/components/src/lib/tag-group/ui.test.ts b/libs/components/src/lib/tag-group/ui.test.ts
index 14e0f2c0fe..7ff1fb1904 100644
--- a/libs/components/src/lib/tag-group/ui.test.ts
+++ b/libs/components/src/lib/tag-group/ui.test.ts
@@ -10,9 +10,15 @@ import {
 const components = ['tag-group', 'tag'];
 
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template = '<style>#wrapper{height: 250px; width: 1600px; display: flex; flex-wrap: wrap;}</style>' + extractHTMLBlocksFromReadme(
-		path.join(new URL('.', import.meta.url).pathname, 'README.md'))
-		.reduce((htmlString: string, block: string) => `${htmlString} <div style="margin: 5px;">${block}</div>`, '');
+	const template =
+		'<style>#wrapper{height: 250px; width: 1600px; display: flex; flex-wrap: wrap;}</style>' +
+		extractHTMLBlocksFromReadme(
+			path.join(new URL('.', import.meta.url).pathname, 'README.md')
+		).reduce(
+			(htmlString: string, block: string) =>
+				`${htmlString} <div style="margin: 5px;">${block}</div>`,
+			''
+		);
 
 	await loadComponents({
 		page,
diff --git a/libs/components/src/lib/tag/tag.spec.ts b/libs/components/src/lib/tag/tag.spec.ts
index 99cc436e49..869caced3a 100644
--- a/libs/components/src/lib/tag/tag.spec.ts
+++ b/libs/components/src/lib/tag/tag.spec.ts
@@ -18,7 +18,6 @@ async function toggleSelectable(element: Tag, selectable = true) {
 	await elementUpdated(element);
 }
 
-
 describe('vwc-tag', () => {
 	let element: Tag;
 
@@ -40,7 +39,9 @@ describe('vwc-tag', () => {
 
 	describe('icon', () => {
 		it('should have an icon slot', async () => {
-			expect(Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))).toEqual(true);
+			expect(
+				Boolean(element.shadowRoot?.querySelector('slot[name="icon"]'))
+			).toEqual(true);
 		});
 
 		it('should have an icon when icon is set without slotted icon', async () => {
@@ -48,14 +49,11 @@ describe('vwc-tag', () => {
 			await elementUpdated(element);
 
 			const icon = element.shadowRoot?.querySelector(ICON_SELECTOR) as Icon;
-			expect(icon)
-				.toBeInstanceOf(Icon);
-			expect(icon?.name)
-				.toEqual('home');
+			expect(icon).toBeInstanceOf(Icon);
+			expect(icon?.name).toEqual('home');
 		});
 	});
 
-
 	describe('label', () => {
 		it('set label property to node', async () => {
 			const label = 'lorem';
@@ -63,8 +61,7 @@ describe('vwc-tag', () => {
 			await elementUpdated(element);
 
 			const base = element.shadowRoot?.querySelector('.base');
-			expect(base?.textContent?.trim())
-				.toEqual(label);
+			expect(base?.textContent?.trim()).toEqual(label);
 		});
 	});
 
@@ -74,9 +71,10 @@ describe('vwc-tag', () => {
 			(element as any).connotation = connotation;
 			await elementUpdated(element);
 
-			const baseElementContainsConnotationClass = getBaseElement(element).classList.contains(`connotation-${connotation}`);
-			expect(baseElementContainsConnotationClass)
-				.toBeTruthy();
+			const baseElementContainsConnotationClass = getBaseElement(
+				element
+			).classList.contains(`connotation-${connotation}`);
+			expect(baseElementContainsConnotationClass).toBeTruthy();
 		});
 	});
 
@@ -86,9 +84,10 @@ describe('vwc-tag', () => {
 			(element as any).shape = shape;
 			await elementUpdated(element);
 
-			const baseElementContainsShapeClass = getBaseElement(element).classList.contains(`shape-${shape}`);
-			expect(baseElementContainsShapeClass)
-				.toBeTruthy();
+			const baseElementContainsShapeClass = getBaseElement(
+				element
+			).classList.contains(`shape-${shape}`);
+			expect(baseElementContainsShapeClass).toBeTruthy();
 		});
 	});
 
@@ -98,30 +97,28 @@ describe('vwc-tag', () => {
 			(element as any).appearance = appearance;
 			await elementUpdated(element);
 
-			const baseElementContainsAppearanceClass = getBaseElement(element).classList.contains(`appearance-${appearance}`);
-			expect(baseElementContainsAppearanceClass)
-				.toBeTruthy();
+			const baseElementContainsAppearanceClass = getBaseElement(
+				element
+			).classList.contains(`appearance-${appearance}`);
+			expect(baseElementContainsAppearanceClass).toBeTruthy();
 		});
 	});
 
 	describe('disabled', () => {
 		it('should set disabled class when disabled is true', async () => {
-
 			element.toggleAttribute('disabled', true);
 			await elementUpdated(element);
 
-			const baseElementContainsDisabledClass = getBaseElement(element).classList.contains('disabled');
-			expect(baseElementContainsDisabledClass)
-				.toBeTruthy();
+			const baseElementContainsDisabledClass =
+				getBaseElement(element).classList.contains('disabled');
+			expect(baseElementContainsDisabledClass).toBeTruthy();
 		});
 	});
 
 	describe('selectable', () => {
 		it('should init to false', async () => {
-			expect(element.selectable)
-				.toEqual(false);
-			expect(element.hasAttribute('selectable'))
-				.toEqual(false);
+			expect(element.selectable).toEqual(false);
+			expect(element.hasAttribute('selectable')).toEqual(false);
 		});
 
 		it('should toggle attribute on host', async () => {
@@ -131,30 +128,29 @@ describe('vwc-tag', () => {
 			await toggleSelectable(element, false);
 			const removeAttributeExistsWhenFalse = element.hasAttribute('selectable');
 
-			expect(removeAttributeExistsWhenTrue)
-				.toEqual(true);
-			expect(removeAttributeExistsWhenFalse)
-				.toEqual(false);
+			expect(removeAttributeExistsWhenTrue).toEqual(true);
+			expect(removeAttributeExistsWhenFalse).toEqual(false);
 		});
 
 		it('should set selectable property on attribute change', async () => {
 			element.toggleAttribute('selectable');
 			await elementUpdated(element);
-			expect(element.selectable)
-				.toEqual(true);
+			expect(element.selectable).toEqual(true);
 		});
 
 		it('should remove the selectable icon when selectable is false', async () => {
-			expect(element.shadowRoot?.querySelector('.selectable-icon'))
-				.toEqual(null);
+			expect(element.shadowRoot?.querySelector('.selectable-icon')).toEqual(
+				null
+			);
 		});
 
 		it('should remove the selectable icon on click', async () => {
 			await toggleSelectable(element, true);
 			element.click();
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.selectable-icon'))
-				.toEqual(null);
+			expect(element.shadowRoot?.querySelector('.selectable-icon')).toEqual(
+				null
+			);
 		});
 
 		it('should update selected to true when selectable', async () => {
@@ -173,7 +169,9 @@ describe('vwc-tag', () => {
 
 		it('should update selected to true when Enter is pressed', async () => {
 			await toggleSelectable(element, true);
-			getBaseElement(element).dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+			getBaseElement(element).dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'Enter' })
+			);
 			await elementUpdated(element);
 			expect(element.selected).toBeTruthy();
 		});
@@ -196,10 +194,8 @@ describe('vwc-tag', () => {
 
 	describe('removable', () => {
 		it('should init to false', async () => {
-			expect(element.removable)
-				.toEqual(false);
-			expect(element.hasAttribute('removable'))
-				.toEqual(false);
+			expect(element.removable).toEqual(false);
+			expect(element.hasAttribute('removable')).toEqual(false);
 		});
 
 		it('should toggle attribute on host', async () => {
@@ -209,42 +205,39 @@ describe('vwc-tag', () => {
 			await toggleRemovable(element, false);
 			const removeAttributeExistsWhenFalse = element.hasAttribute('removable');
 
-			expect(removeAttributeExistsWhenTrue)
-				.toEqual(true);
-			expect(removeAttributeExistsWhenFalse)
-				.toEqual(false);
+			expect(removeAttributeExistsWhenTrue).toEqual(true);
+			expect(removeAttributeExistsWhenFalse).toEqual(false);
 		});
 
 		it('should set removable property on attribute change', async () => {
 			element.toggleAttribute('removable');
 			await elementUpdated(element);
-			expect(element.removable)
-				.toEqual(true);
+			expect(element.removable).toEqual(true);
 		});
 
 		it('should add a remove button when true', async () => {
-			expect(element.shadowRoot?.querySelector('.dismiss-button'))
-				.toEqual(null);
+			expect(element.shadowRoot?.querySelector('.dismiss-button')).toEqual(
+				null
+			);
 			await toggleRemovable(element, true);
-			expect(element.shadowRoot?.querySelector('.dismiss-button'))
-				.toBeTruthy();
+			expect(element.shadowRoot?.querySelector('.dismiss-button')).toBeTruthy();
 		});
 
 		it('should remove tag on remove button click', async () => {
 			await toggleRemovable(element, true);
-			const dismissButton = element.shadowRoot?.querySelector('.dismiss-button') as HTMLElement;
+			const dismissButton = element.shadowRoot?.querySelector(
+				'.dismiss-button'
+			) as HTMLElement;
 			dismissButton.click();
 			await elementUpdated(element);
-			expect(document.body.contains(element))
-				.toEqual(false);
+			expect(document.body.contains(element)).toEqual(false);
 		});
 
 		it('should remove tag on remove', async () => {
 			await toggleRemovable(element, true);
 			element.remove();
 			await elementUpdated(element);
-			expect(document.body.contains(element))
-				.toEqual(false);
+			expect(document.body.contains(element)).toEqual(false);
 		});
 	});
 
@@ -253,49 +246,53 @@ describe('vwc-tag', () => {
 			await toggleRemovable(element, true);
 			element.remove();
 			await elementUpdated(element);
-			expect(document.body.contains(element))
-				.toEqual(false);
+			expect(document.body.contains(element)).toEqual(false);
 		});
 
 		it('should remove tag on Delete press and removable is true', async () => {
 			await toggleRemovable(element, true);
-			getBaseElement(element).dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete' }));
+			getBaseElement(element).dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'Delete' })
+			);
 			await elementUpdated(element);
-			expect(document.body.contains(element))
-				.toEqual(false);
+			expect(document.body.contains(element)).toEqual(false);
 		});
 
 		it('should remove tag on Backspace press and removable is true', async () => {
 			await toggleRemovable(element, true);
-			getBaseElement(element).dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace' }));
+			getBaseElement(element).dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'Backspace' })
+			);
 			await elementUpdated(element);
-			expect(document.body.contains(element))
-				.toEqual(false);
+			expect(document.body.contains(element)).toEqual(false);
 		});
 
 		it('should still show tag after Delete press when removable is false', async () => {
 			await toggleRemovable(element, false);
-			getBaseElement(element).dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete' }));
+			getBaseElement(element).dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'Delete' })
+			);
 			await elementUpdated(element);
-			expect(document.body.contains(element))
-				.toEqual(true);
+			expect(document.body.contains(element)).toEqual(true);
 		});
 
 		it('should c on keydown when disabled', async () => {
 			element.disabled = false;
-			getBaseElement(element).dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete' }));
+			getBaseElement(element).dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'Delete' })
+			);
 			await elementUpdated(element);
-			expect(document.body.contains(element))
-				.toEqual(true);
+			expect(document.body.contains(element)).toEqual(true);
 		});
 
 		it('should still show tag when selectable is true', async () => {
 			await toggleSelectable(element, true);
 			await toggleRemovable(element, true);
-			getBaseElement(element).dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete' }));
+			getBaseElement(element).dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'Delete' })
+			);
 			await elementUpdated(element);
-			expect(document.body.contains(element))
-				.toEqual(true);
+			expect(document.body.contains(element)).toEqual(true);
 		});
 
 		it('should fire removed event', async () => {
@@ -303,16 +300,14 @@ describe('vwc-tag', () => {
 			await toggleRemovable(element, true);
 			element.addEventListener('removed', spy);
 			element.remove();
-			expect(spy)
-				.toHaveBeenCalled();
+			expect(spy).toHaveBeenCalled();
 		});
 
 		it('should still show tag', async () => {
 			const spy = jest.fn();
 			element.addEventListener('removed', spy);
 			element.remove();
-			expect(spy).not
-				.toHaveBeenCalled();
+			expect(spy).not.toHaveBeenCalled();
 		});
 
 		it('should disable removed events after disconnected callback', async () => {
@@ -323,8 +318,7 @@ describe('vwc-tag', () => {
 			element.remove();
 			await elementUpdated(element);
 
-			expect(spy.mock.calls.length)
-				.toEqual(0);
+			expect(spy.mock.calls.length).toEqual(0);
 		});
 	});
 
@@ -339,7 +333,7 @@ describe('vwc-tag', () => {
 						${element.shadowRoot?.innerHTML}
 					</div>
 				`;
-				
+
 				expect(await axe(exposedHTMLString)).toHaveNoViolations();
 			});
 		});
diff --git a/libs/components/src/lib/tag/tag.template.ts b/libs/components/src/lib/tag/tag.template.ts
index 359ddb197a..1d0afcf86b 100644
--- a/libs/components/src/lib/tag/tag.template.ts
+++ b/libs/components/src/lib/tag/tag.template.ts
@@ -1,30 +1,43 @@
 import { html, when } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import { Icon } from '../icon/icon';
 import type { Tag } from './tag';
 
 const getClasses = ({
-	connotation, appearance, shape, disabled, selectable, removable, selected
-}: Tag) => classNames(
-	'base',
-	['disabled', disabled],
-	['selectable', selectable],
-	['selected', selectable && selected],
-	['removable', removable && !selectable],
-	[`connotation-${connotation}`, Boolean(connotation)],
-	[`appearance-${appearance}`, Boolean(appearance)],
-	[`shape-${shape}`, Boolean(shape)],
-);
+	connotation,
+	appearance,
+	shape,
+	disabled,
+	selectable,
+	removable,
+	selected,
+}: Tag) =>
+	classNames(
+		'base',
+		['disabled', disabled],
+		['selectable', selectable],
+		['selected', selectable && selected],
+		['removable', removable && !selectable],
+		[`connotation-${connotation}`, Boolean(connotation)],
+		[`appearance-${appearance}`, Boolean(appearance)],
+		[`shape-${shape}`, Boolean(shape)]
+	);
 
 function renderDismissButton(iconTag: string) {
 	return html<Tag>`
 	<span
 		aria-hidden="true"
 		class="dismiss-button"
-		@click="${x => x.remove()}">
+		@click="${(x) => x.remove()}">
 		<${iconTag} name="close-line"></${iconTag}>
 	</span>`;
 }
@@ -42,18 +55,24 @@ export const tagTemplate: (
 	const affixIconTemplate = affixIconTemplateFactory(context);
 	const iconTag = context.tagFor(Icon);
 
-	return html`
-	<span class="${getClasses}"
-	role="option"
-	aria-disabled="${x => x.disabled}"
-	aria-selected="${x => x.selectable}"
-	tabindex="${x => (x.disabled ? null : 0)}"
-	@keydown="${(x, c) => x.handleKeydown(c.event as KeyboardEvent)}"
-	@click="${x => x.handleClick()}">
-		${x => affixIconTemplate(x.icon, IconWrapper.Slot)}
-		${when((x) => x.label, (x) => html<Tag>`<span class="label">${x.label as string}</span>`)}
-		${when(x => x.removable && !x.selectable, renderDismissButton(iconTag))}
-		${when(x => (x.selectable && x.selected),
-		html<Tag>`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`)}
+	return html` <span
+		class="${getClasses}"
+		role="option"
+		aria-disabled="${(x) => x.disabled}"
+		aria-selected="${(x) => x.selectable}"
+		tabindex="${(x) => (x.disabled ? null : 0)}"
+		@keydown="${(x, c) => x.handleKeydown(c.event as KeyboardEvent)}"
+		@click="${(x) => x.handleClick()}"
+	>
+		${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+		${when(
+			(x) => x.label,
+			(x) => html<Tag>`<span class="label">${x.label as string}</span>`
+		)}
+		${when((x) => x.removable && !x.selectable, renderDismissButton(iconTag))}
+		${when(
+			(x) => x.selectable && x.selected,
+			html<Tag>`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
+		)}
 	</span>`;
 };
diff --git a/libs/components/src/lib/tag/tag.ts b/libs/components/src/lib/tag/tag.ts
index 58cc3cdd7b..053594c564 100644
--- a/libs/components/src/lib/tag/tag.ts
+++ b/libs/components/src/lib/tag/tag.ts
@@ -2,23 +2,27 @@ import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
 import { AffixIcon } from '../../shared/patterns/affix';
 
-import type {
-	Appearance, Connotation, Shape,
-} from '../enums.js';
+import type { Appearance, Connotation, Shape } from '../enums.js';
 
 /**
  * Types of tag connotation.
  *
  * @public
  */
-export type TagConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
+export type TagConnotation = Extract<
+	Connotation,
+	Connotation.Accent | Connotation.CTA
+>;
 
 /**
  * Types of tag appearance.
  *
  * @public
  */
-export type TagAppearance = Extract<Appearance, Appearance.Subtle | Appearance.Duotone>;
+export type TagAppearance = Extract<
+	Appearance,
+	Appearance.Subtle | Appearance.Duotone
+>;
 
 /**
  * Types of tag shape.
@@ -94,11 +98,11 @@ export class Tag extends FoundationElement {
 	@attr({ mode: 'boolean' }) selectable = false;
 
 	/**
-	* indicates whether the tag is selected
-	*
-	* @public
-	* HTML Attribute: selected
-	*/
+	 * indicates whether the tag is selected
+	 *
+	 * @public
+	 * HTML Attribute: selected
+	 */
 	@attr({ mode: 'boolean' }) selected = false;
 
 	override remove(): void {
@@ -133,5 +137,5 @@ export class Tag extends FoundationElement {
 	}
 }
 
-export interface Tag extends AffixIcon { }
+export interface Tag extends AffixIcon {}
 applyMixins(Tag, AffixIcon);
diff --git a/libs/components/src/lib/tag/ui.test.ts b/libs/components/src/lib/tag/ui.test.ts
index fe3c46bc54..0d9a321336 100644
--- a/libs/components/src/lib/tag/ui.test.ts
+++ b/libs/components/src/lib/tag/ui.test.ts
@@ -10,9 +10,15 @@ import {
 const components = ['tag'];
 
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template = '<style>#wrapper{height: 250px; width: 1600px; display: flex; flex-wrap: wrap;}</style>' + extractHTMLBlocksFromReadme(
-		path.join(new URL('.', import.meta.url).pathname, 'README.md'))
-		.reduce((htmlString: string, block: string) => `${htmlString} <div style="margin: 5px;">${block}</div>`, '');
+	const template =
+		'<style>#wrapper{height: 250px; width: 1600px; display: flex; flex-wrap: wrap;}</style>' +
+		extractHTMLBlocksFromReadme(
+			path.join(new URL('.', import.meta.url).pathname, 'README.md')
+		).reduce(
+			(htmlString: string, block: string) =>
+				`${htmlString} <div style="margin: 5px;">${block}</div>`,
+			''
+		);
 
 	await loadComponents({
 		page,
diff --git a/libs/components/src/lib/text-anchor/definition.ts b/libs/components/src/lib/text-anchor/definition.ts
index 2f7c76e5d2..d28b3637e7 100644
--- a/libs/components/src/lib/text-anchor/definition.ts
+++ b/libs/components/src/lib/text-anchor/definition.ts
@@ -4,14 +4,14 @@ import { registerFactory } from '../../shared/design-system';
 import { TextAnchor } from './text-anchor';
 import { textAnchorTemplate as template } from './text-anchor.template';
 
-
 /**
  * The text-anchor element.
  */
-export const textAnchorDefinition = TextAnchor.compose<FoundationElementDefinition>({
-	baseName: 'text-anchor',
-	template: template as any,
-});
+export const textAnchorDefinition =
+	TextAnchor.compose<FoundationElementDefinition>({
+		baseName: 'text-anchor',
+		template: template as any,
+	});
 
 /**
  * @internal
diff --git a/libs/components/src/lib/text-anchor/index.ts b/libs/components/src/lib/text-anchor/index.ts
index 25e2dd0bb2..b7e13f0444 100644
--- a/libs/components/src/lib/text-anchor/index.ts
+++ b/libs/components/src/lib/text-anchor/index.ts
@@ -1,4 +1,3 @@
 import { registerTextAnchor } from './definition';
 
-
 registerTextAnchor();
diff --git a/libs/components/src/lib/text-anchor/text-anchor.spec.ts b/libs/components/src/lib/text-anchor/text-anchor.spec.ts
index 3a4b6c8bab..885caccda3 100644
--- a/libs/components/src/lib/text-anchor/text-anchor.spec.ts
+++ b/libs/components/src/lib/text-anchor/text-anchor.spec.ts
@@ -1,16 +1,18 @@
 import { axe, elementUpdated, fixture, setAttribute } from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
-import {TextAnchor} from './text-anchor';
+import { TextAnchor } from './text-anchor';
 import '.';
 import { textAnchorDefinition } from './definition';
 
 const COMPONENT_TAG = 'vwc-text-anchor';
 
-describe( 'vwc-text-anchor', () => {
+describe('vwc-text-anchor', () => {
 	let element: TextAnchor;
 
 	beforeEach(async () => {
-		element = (await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`)) as TextAnchor;
+		element = (await fixture(
+			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
+		)) as TextAnchor;
 	});
 
 	describe('basic', () => {
@@ -28,8 +30,7 @@ describe( 'vwc-text-anchor', () => {
 			await elementUpdated(element);
 
 			const { control } = element;
-			expect(control?.textContent?.trim())
-				.toEqual(text);
+			expect(control?.textContent?.trim()).toEqual(text);
 		});
 	});
 
@@ -41,7 +42,6 @@ describe( 'vwc-text-anchor', () => {
 		return anchorElement;
 	}
 
-
 	describe('bindings', () => {
 		function capitalizeFirstLetter(str: string) {
 			return str.charAt(0).toUpperCase() + str.slice(1);
@@ -49,17 +49,27 @@ describe( 'vwc-text-anchor', () => {
 
 		it('should set aria labels', async function () {
 			function setAriaLabelsOnElementObject() {
-				ARIA_PROPS.forEach(ariaProp => {
+				ARIA_PROPS.forEach((ariaProp) => {
 					const ariaPropOnObject = `aria${capitalizeFirstLetter(ariaProp)}`;
 					(element as any)[ariaPropOnObject] = ariaProp;
 				});
 			}
 
 			const ARIA_PROPS = [
-				'atomic', 'busy', 'current',
-				'details', 'disabled', 'expanded',
-				'haspopup', 'hidden', 'invalid', 'keyshortcuts',
-				'label', 'live', 'relevant', 'roledescription'
+				'atomic',
+				'busy',
+				'current',
+				'details',
+				'disabled',
+				'expanded',
+				'haspopup',
+				'hidden',
+				'invalid',
+				'keyshortcuts',
+				'label',
+				'live',
+				'relevant',
+				'roledescription',
 			];
 
 			const anchorElement = getAnchorElement();
@@ -67,10 +77,12 @@ describe( 'vwc-text-anchor', () => {
 			setAriaLabelsOnElementObject();
 			await elementUpdated(element);
 
-			ARIA_PROPS.forEach(ariaProp => {
+			ARIA_PROPS.forEach((ariaProp) => {
 				const ariaPropOnElement = `aria-${ariaProp}`;
 
-				expect(anchorElement?.getAttribute(ariaPropOnElement)).toEqual(ariaProp);
+				expect(anchorElement?.getAttribute(ariaPropOnElement)).toEqual(
+					ariaProp
+				);
 			});
 		});
 
@@ -152,7 +164,7 @@ describe( 'vwc-text-anchor', () => {
 			element.text = 'Link text';
 			element.href = '/somewhere';
 			await elementUpdated(element);
-			
+
 			expect(await axe(element)).toHaveNoViolations();
 		});
 	});
diff --git a/libs/components/src/lib/text-anchor/text-anchor.template.ts b/libs/components/src/lib/text-anchor/text-anchor.template.ts
index e4fe1195aa..8531853c78 100644
--- a/libs/components/src/lib/text-anchor/text-anchor.template.ts
+++ b/libs/components/src/lib/text-anchor/text-anchor.template.ts
@@ -5,13 +5,14 @@ import type {
 	FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import type { TextAnchor } from './text-anchor';
 
-const getClasses = ({text}: TextAnchor) => classNames(
-	'control',
-	['icon-only', !text],
-);
+const getClasses = ({ text }: TextAnchor) =>
+	classNames('control', ['icon-only', !text]);
 
 /**
  * The template for the (Anchor:class) component.
@@ -22,40 +23,37 @@ const getClasses = ({text}: TextAnchor) => classNames(
 export const textAnchorTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
-) => ViewTemplate<TextAnchor> = (
-	context: ElementDefinitionContext,
-) => {
+) => ViewTemplate<TextAnchor> = (context: ElementDefinitionContext) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
 	return html`<a
-        class="${getClasses}"
-        download="${x => x.download}"
-        href="${x => x.href}"
-        hreflang="${x => x.hreflang}"
-        ping="${x => x.ping}"
-        referrerpolicy="${x => x.referrerpolicy}"
-        rel="${x => x.rel}"
-        target="${x => x.target}"
-        type="${x => x.type}"
-        aria-atomic="${x => x.ariaAtomic}"
-        aria-busy="${x => x.ariaBusy}"
-        aria-current="${x => x.ariaCurrent}"
-        aria-details="${x => x.ariaDetails}"
-        aria-disabled="${x => x.ariaDisabled}"
-        aria-errormessage="${x => x.ariaErrormessage}"
-        aria-expanded="${x => x.ariaExpanded}"
-        aria-haspopup="${x => x.ariaHaspopup}"
-        aria-hidden="${x => x.ariaHidden}"
-        aria-invalid="${x => x.ariaInvalid}"
-        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-        aria-label="${x => x.ariaLabel}"
-        aria-live="${x => x.ariaLive}"
-        aria-relevant="${x => x.ariaRelevant}"
-        aria-roledescription="${x => x.ariaRoledescription}"
-        ${ref('control')}
-    >
-      ${x => affixIconTemplate(x.icon, IconWrapper.Slot)}
-      ${x => x.text}
-			${x => x.getBodyTemplate?.() ?? ''}
-    </a>
-`;};
+		class="${getClasses}"
+		download="${(x) => x.download}"
+		href="${(x) => x.href}"
+		hreflang="${(x) => x.hreflang}"
+		ping="${(x) => x.ping}"
+		referrerpolicy="${(x) => x.referrerpolicy}"
+		rel="${(x) => x.rel}"
+		target="${(x) => x.target}"
+		type="${(x) => x.type}"
+		aria-atomic="${(x) => x.ariaAtomic}"
+		aria-busy="${(x) => x.ariaBusy}"
+		aria-current="${(x) => x.ariaCurrent}"
+		aria-details="${(x) => x.ariaDetails}"
+		aria-disabled="${(x) => x.ariaDisabled}"
+		aria-errormessage="${(x) => x.ariaErrormessage}"
+		aria-expanded="${(x) => x.ariaExpanded}"
+		aria-haspopup="${(x) => x.ariaHaspopup}"
+		aria-hidden="${(x) => x.ariaHidden}"
+		aria-invalid="${(x) => x.ariaInvalid}"
+		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+		aria-label="${(x) => x.ariaLabel}"
+		aria-live="${(x) => x.ariaLive}"
+		aria-relevant="${(x) => x.ariaRelevant}"
+		aria-roledescription="${(x) => x.ariaRoledescription}"
+		${ref('control')}
+	>
+		${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.text}
+		${(x) => x.getBodyTemplate?.() ?? ''}
+	</a> `;
+};
diff --git a/libs/components/src/lib/text-area/definition.ts b/libs/components/src/lib/text-area/definition.ts
index 042be4a362..62809f0609 100644
--- a/libs/components/src/lib/text-area/definition.ts
+++ b/libs/components/src/lib/text-area/definition.ts
@@ -11,14 +11,16 @@ export type { TextAreaWrap } from './text-area';
 /**
  * The text-area element.
  */
-export const textAreaDefinition = TextArea.compose<FoundationElementDefinition>({
-	baseName: 'text-area',
-	template: template as any,
-	styles,
-	shadowOptions: {
-		delegatesFocus: true,
-	},
-});
+export const textAreaDefinition = TextArea.compose<FoundationElementDefinition>(
+	{
+		baseName: 'text-area',
+		template: template as any,
+		styles,
+		shadowOptions: {
+			delegatesFocus: true,
+		},
+	}
+);
 
 /**
  * @internal
diff --git a/libs/components/src/lib/text-area/index.ts b/libs/components/src/lib/text-area/index.ts
index b773ab582e..a6e5c22322 100644
--- a/libs/components/src/lib/text-area/index.ts
+++ b/libs/components/src/lib/text-area/index.ts
@@ -1,4 +1,3 @@
 import { registerTextArea } from './definition';
 
-
 registerTextArea();
diff --git a/libs/components/src/lib/text-area/text-area.spec.ts b/libs/components/src/lib/text-area/text-area.spec.ts
index 2ff73782f4..687446330a 100644
--- a/libs/components/src/lib/text-area/text-area.spec.ts
+++ b/libs/components/src/lib/text-area/text-area.spec.ts
@@ -5,7 +5,7 @@ import {
 	fixture,
 	getBaseElement,
 	getControlElement,
-	listenToFormSubmission
+	listenToFormSubmission,
 } from '@vivid-nx/shared';
 import { TextArea } from './text-area';
 import '.';
@@ -17,7 +17,6 @@ function getTextareaElement(element: TextArea) {
 }
 
 describe('vwc-text-area', () => {
-
 	function setToBlurred() {
 		element.dispatchEvent(new Event('blur'));
 	}
@@ -27,7 +26,7 @@ describe('vwc-text-area', () => {
 	}
 
 	function setValidityToError(errorMessage = 'error') {
-		element.setValidity({badInput: true}, errorMessage);
+		element.setValidity({ badInput: true }, errorMessage);
 		element.validate();
 	}
 
@@ -41,23 +40,22 @@ describe('vwc-text-area', () => {
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-text-area', async () => {
-			expect(element.charCount).toBe( undefined);
-			expect(element.cols).toBe( 20);
-			expect(element.dirtyValue).toBe( false);
-			expect(element.disabled).toBe( false);
-			expect(element.errorValidationMessage).toBe( '');
-			expect(element.helperText).toBe( undefined);
-			expect(element.label).toBe( undefined);
-			expect(element.maxlength).toBe( undefined);
-			expect(element.minlength).toBe( undefined);
-			expect(element.name).toBe( undefined);
-			expect(element.placeholder).toBe( undefined);
-			expect(element.readOnly).toBe( undefined);
-			expect(element.required).toBe( false);
-			expect(element.rows).toBe( undefined);
-			expect(element.value).toBe( '');
-			expect(element)
-				.toBeInstanceOf(TextArea);
+			expect(element.charCount).toBe(undefined);
+			expect(element.cols).toBe(20);
+			expect(element.dirtyValue).toBe(false);
+			expect(element.disabled).toBe(false);
+			expect(element.errorValidationMessage).toBe('');
+			expect(element.helperText).toBe(undefined);
+			expect(element.label).toBe(undefined);
+			expect(element.maxlength).toBe(undefined);
+			expect(element.minlength).toBe(undefined);
+			expect(element.name).toBe(undefined);
+			expect(element.placeholder).toBe(undefined);
+			expect(element.readOnly).toBe(undefined);
+			expect(element.required).toBe(false);
+			expect(element.rows).toBe(undefined);
+			expect(element.value).toBe('');
+			expect(element).toBeInstanceOf(TextArea);
 		});
 	});
 
@@ -67,16 +65,13 @@ describe('vwc-text-area', () => {
 			element.label = labelText;
 			await elementUpdated(element);
 			const labelElement = element.shadowRoot?.querySelector('label');
-			expect(labelElement)
-				.toBeTruthy();
-			expect(labelElement?.textContent?.trim())
-				.toEqual(labelText);
+			expect(labelElement).toBeTruthy();
+			expect(labelElement?.textContent?.trim()).toEqual(labelText);
 		});
 
 		it('should show label only if label is set', async function () {
 			const labelElement = element.shadowRoot?.querySelector('label');
-			expect(labelElement)
-				.toBeNull();
+			expect(labelElement).toBeNull();
 		});
 	});
 
@@ -85,16 +80,14 @@ describe('vwc-text-area', () => {
 			element.charCount = true;
 			element.maxlength = 20;
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.char-count'))
-				.toBeTruthy();
+			expect(element.shadowRoot?.querySelector('.char-count')).toBeTruthy();
 		});
 
 		it('should remove char count if max-length is not set', async function () {
 			element.charCount = true;
 			element.toggleAttribute('max-length', false);
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.char-count'))
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.char-count')).toBeNull();
 		});
 
 		it('should render count with 0 if value is not set', async function () {
@@ -102,10 +95,9 @@ describe('vwc-text-area', () => {
 			element.maxlength = 20;
 			const expectedString = '0 / 20';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.char-count')
-				?.textContent
-				?.trim())
-				.toEqual(expectedString);
+			expect(
+				element.shadowRoot?.querySelector('.char-count')?.textContent?.trim()
+			).toEqual(expectedString);
 		});
 
 		it('should render count according to value and max', async function () {
@@ -114,27 +106,22 @@ describe('vwc-text-area', () => {
 			element.value = '12345';
 			const expectedString = '5 / 20';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.char-count')
-				?.textContent
-				?.trim())
-				.toEqual(expectedString);
+			expect(
+				element.shadowRoot?.querySelector('.char-count')?.textContent?.trim()
+			).toEqual(expectedString);
 		});
 	});
 
 	describe('readOnly', function () {
 		it('should add class readonly to host', async function () {
-			const readonlyClassWhenFalse = getBaseElement(element)
-				.classList
-				.contains('readonly');
+			const readonlyClassWhenFalse =
+				getBaseElement(element).classList.contains('readonly');
 			element.readOnly = true;
 			await elementUpdated(element);
-			const readonlyClassWhenTrue = getBaseElement(element)
-				.classList
-				.contains('readonly');
-			expect(readonlyClassWhenFalse)
-				.toEqual(false);
-			expect(readonlyClassWhenTrue)
-				.toEqual(true);
+			const readonlyClassWhenTrue =
+				getBaseElement(element).classList.contains('readonly');
+			expect(readonlyClassWhenFalse).toEqual(false);
+			expect(readonlyClassWhenTrue).toEqual(true);
 		});
 	});
 
@@ -142,38 +129,36 @@ describe('vwc-text-area', () => {
 		it('should set autofocus on the input element', async function () {
 			element.autofocus = true;
 			await elementUpdated(element);
-			expect(getControlElement(element)
-				?.hasAttribute('autofocus'))
-				.toEqual(true);
+			expect(getControlElement(element)?.hasAttribute('autofocus')).toEqual(
+				true
+			);
 		});
 	});
 
 	describe('placeholder', function () {
 		const placeholderText = 'Text';
 		it('should set placeholder attribute on the input', async function () {
-
 			element.placeholder = placeholderText;
 			await elementUpdated(element);
-			expect(getTextareaElement(element)
-				?.getAttribute('placeholder'))
-				.toEqual(placeholderText);
+			expect(getTextareaElement(element)?.getAttribute('placeholder')).toEqual(
+				placeholderText
+			);
 		});
 
 		it('should set class placeholder to base', async function () {
 			element.placeholder = placeholderText;
 			await elementUpdated(element);
-			expect(getBaseElement(element)
-				.classList
-				.contains('placeholder'))
-				.toEqual(true);
+			expect(getBaseElement(element).classList.contains('placeholder')).toEqual(
+				true
+			);
 		});
 
 		it('should have no placeholder if placeholder is not set as string', async function () {
 			element.placeholder = '';
 			await elementUpdated(element);
-			expect(getTextareaElement(element)
-				?.getAttribute('placeholder'))
-				.toBeNull();
+			expect(
+				getTextareaElement(element)?.getAttribute('placeholder')
+			).toBeNull();
 		});
 	});
 
@@ -183,40 +168,35 @@ describe('vwc-text-area', () => {
 		const proxyPropertyName = 'minLength';
 
 		it('should set minlength attribute on the input', async function () {
-
 			(element as any)[propertyName] = value;
 			await elementUpdated(element);
-			expect(getTextareaElement(element)
-				?.getAttribute(propertyName))
-				.toEqual(value);
+			expect(getTextareaElement(element)?.getAttribute(propertyName)).toEqual(
+				value
+			);
 		});
 
 		it('should set minLength on proxy input', function () {
 			(element as any)[propertyName] = value;
-			expect((element.proxy as any)[proxyPropertyName])
-				.toEqual(Number(value));
+			expect((element.proxy as any)[proxyPropertyName]).toEqual(Number(value));
 		});
 	});
 
-
 	describe('maxlength', function () {
 		const value = '8';
 		const propertyName = 'maxlength';
 		const proxyPropertyName = 'maxLength';
 
 		it('should set maxlength attribute on the input', async function () {
-
 			(element as any)[propertyName] = value;
 			await elementUpdated(element);
-			expect(getTextareaElement(element)
-				?.getAttribute(propertyName))
-				.toEqual(value);
+			expect(getTextareaElement(element)?.getAttribute(propertyName)).toEqual(
+				value
+			);
 		});
 
 		it('should set maxLength on proxy input', function () {
 			(element as any)[propertyName] = value;
-			expect((element.proxy as any)[proxyPropertyName])
-				.toEqual(Number(value));
+			expect((element.proxy as any)[proxyPropertyName]).toEqual(Number(value));
 		});
 	});
 
@@ -239,100 +219,98 @@ describe('vwc-text-area', () => {
 		});
 
 		it('should attach to closest form', async function () {
-			const {form: formElement} = createFormHTML<TextArea>({
+			const { form: formElement } = createFormHTML<TextArea>({
 				componentTagName: COMPONENT_TAG_NAME,
 				fieldName,
 				fieldValue,
 				formId,
-				formWrapper
+				formWrapper,
 			});
 
 			const submitPromise = listenToFormSubmission(formElement);
 			formElement.requestSubmit();
 
 			(await submitPromise).forEach((formDataValue, formDataKey) => {
-				expect(formDataKey)
-					.toEqual(fieldName);
-				expect(formDataValue)
-					.toEqual(fieldValue);
+				expect(formDataKey).toEqual(fieldName);
+				expect(formDataValue).toEqual(fieldValue);
 			});
 		});
 
 		it('should attach to form when given form id', async function () {
-			const {otherForm} = createFormHTML<TextArea>(
-				{
-					fieldName, fieldValue, formId, otherFormId: 'otherFormId', componentTagName: COMPONENT_TAG_NAME, formWrapper
-				});
+			const { otherForm } = createFormHTML<TextArea>({
+				fieldName,
+				fieldValue,
+				formId,
+				otherFormId: 'otherFormId',
+				componentTagName: COMPONENT_TAG_NAME,
+				formWrapper,
+			});
 
 			const submitPromise = listenToFormSubmission(otherForm);
 			otherForm.requestSubmit();
 
 			(await submitPromise).forEach((formDataValue, formDataKey) => {
-				expect(formDataKey)
-					.toEqual(fieldName);
-				expect(formDataValue)
-					.toEqual(fieldValue);
+				expect(formDataKey).toEqual(fieldName);
+				expect(formDataValue).toEqual(fieldValue);
 			});
 		});
 
 		it('should reset the value of the custom element to default on form reset', async function () {
-			const {
-				form: formElement,
-				element
-			} = createFormHTML<TextArea>({
+			const { form: formElement, element } = createFormHTML<TextArea>({
 				fieldName,
 				fieldValue,
 				formId,
 				componentTagName: COMPONENT_TAG_NAME,
-				formWrapper
+				formWrapper,
 			});
 
 			element.value = '5';
 			formElement.reset();
 			await elementUpdated(element);
 
-			expect(element.value)
-				.toEqual(fieldValue);
+			expect(element.value).toEqual(fieldValue);
 		});
 	});
 
 	describe('events', function () {
 		it('should emit an input event', async function () {
-			const inputPromise = new Promise(res => element.addEventListener('input', () => res(true)));
+			const inputPromise = new Promise((res) =>
+				element.addEventListener('input', () => res(true))
+			);
 			const innerInput = getTextareaElement(element);
-			innerInput.dispatchEvent(new InputEvent('input', {
-				bubbles: true,
-				composed: true
-			}));
-			expect(await inputPromise)
-				.toEqual(true);
+			innerInput.dispatchEvent(
+				new InputEvent('input', {
+					bubbles: true,
+					composed: true,
+				})
+			);
+			expect(await inputPromise).toEqual(true);
 		});
 
 		it('should emit a change event', async function () {
-			const inputPromise = new Promise(res => element.addEventListener('change', () => res(true)));
+			const inputPromise = new Promise((res) =>
+				element.addEventListener('change', () => res(true))
+			);
 			const innerInput = getTextareaElement(element);
-			innerInput.dispatchEvent(new InputEvent('change', {
-				bubbles: true,
-				composed: true
-			}));
-			expect(await inputPromise)
-				.toEqual(true);
+			innerInput.dispatchEvent(
+				new InputEvent('change', {
+					bubbles: true,
+					composed: true,
+				})
+			);
+			expect(await inputPromise).toEqual(true);
 		});
 
 		describe('disabled', function () {
 			it('should set disabled class when attribute is set', async function () {
-				const disabledClassWhenEnabled = getBaseElement(element)
-					.classList
-					.contains('disabled');
+				const disabledClassWhenEnabled =
+					getBaseElement(element).classList.contains('disabled');
 				element.disabled = true;
 				await elementUpdated(element);
-				const disabledClassWhenDisabled = getBaseElement(element)
-					.classList
-					.contains('disabled');
-				expect(disabledClassWhenEnabled)
-					.toEqual(false);
-				expect(disabledClassWhenDisabled)
-					.toEqual(true);
+				const disabledClassWhenDisabled =
+					getBaseElement(element).classList.contains('disabled');
+				expect(disabledClassWhenEnabled).toEqual(false);
+				expect(disabledClassWhenDisabled).toEqual(true);
 			});
 		});
 	});
@@ -348,51 +326,45 @@ describe('vwc-text-area', () => {
 
 	describe('helper text', function () {
 		it('should render the helper text when attribute is set', async function () {
-			const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-message');
+			const helperTextElementWithoutText =
+				element.shadowRoot?.querySelector('.helper-message');
 			const helperText = 'Helper Text';
 			element.helperText = helperText;
 			await elementUpdated(element);
-			expect(helperTextElementWithoutText)
-				.toBeNull();
-			expect(element.shadowRoot?.querySelector('.helper-message')
-				?.textContent
-				?.trim())
-				.toEqual(helperText);
+			expect(helperTextElementWithoutText).toBeNull();
+			expect(
+				element.shadowRoot
+					?.querySelector('.helper-message')
+					?.textContent?.trim()
+			).toEqual(helperText);
 		});
 	});
 
 	describe('error message', function () {
-
 		it('should add class error to base if not valid', async function () {
 			element.dirtyValue = true;
 			setToBlurred();
 			setValidityToError('blah');
 			await elementUpdated(element);
 
-			expect(getBaseElement(element)
-				.classList
-				.contains('error'))
-				.toEqual(true);
+			expect(getBaseElement(element).classList.contains('error')).toEqual(true);
 		});
 
 		it('should set required message if submitted', async function () {
-
 			element.required = true;
 			await elementUpdated(element);
 			element.dispatchEvent(new Event('invalid'));
 			await elementUpdated(element);
 			const errorElement = element.shadowRoot?.querySelector('.error-message');
 
-			expect(getBaseElement(element)
-				.classList
-				.contains('error'))
-				.toEqual(true);
+			expect(getBaseElement(element).classList.contains('error')).toEqual(true);
 
 			expect(errorElement !== null).toBeTruthy();
 		});
 
 		it('should render the error message when not valid', async function () {
-			const errorElementWithoutText = element.shadowRoot?.querySelector('.error-message');
+			const errorElementWithoutText =
+				element.shadowRoot?.querySelector('.error-message');
 			const errorMessage = 'Error Text';
 
 			element.dirtyValue = true;
@@ -400,15 +372,13 @@ describe('vwc-text-area', () => {
 			setValidityToError(errorMessage);
 			await elementUpdated(element);
 
-			expect(errorElementWithoutText)
-				.toBeNull();
-			expect(element.shadowRoot?.querySelector('.error-message')
-				?.textContent
-				?.trim())
-				.toEqual(errorMessage);
+			expect(errorElementWithoutText).toBeNull();
+			expect(
+				element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()
+			).toEqual(errorMessage);
 		});
 
-		it('should render the error message only after a blur', async function() {
+		it('should render the error message only after a blur', async function () {
 			const errorMessage = 'Error Text';
 			element.dirtyValue = true;
 			setValidityToError(errorMessage);
@@ -422,15 +392,13 @@ describe('vwc-text-area', () => {
 			setToBlurred();
 			setValidityToError();
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.helper-text'))
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.helper-text')).toBeNull();
 		});
 
 		it('should set error message to empty string when pristine', async function () {
 			setValidityToError();
 			await elementUpdated(element);
-			expect(element.errorValidationMessage)
-				.toEqual('');
+			expect(element.errorValidationMessage).toEqual('');
 		});
 
 		it('should validate after a blur', async function () {
@@ -439,11 +407,12 @@ describe('vwc-text-area', () => {
 			setValidityToError(errorMessage);
 			setToBlurred();
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.error-message')?.
-				textContent?.trim()).toEqual(errorMessage);
+			expect(
+				element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()
+			).toEqual(errorMessage);
 		});
 
-		it('should update error message when blurred', async function() {
+		it('should update error message when blurred', async function () {
 			setToBlurred();
 			const errorMessage = 'Error Text';
 			const errorMessageTwo = 'Error Text 2';
@@ -454,11 +423,12 @@ describe('vwc-text-area', () => {
 			setValidityToError(errorMessageTwo);
 			await elementUpdated(element);
 
-			expect(element.shadowRoot?.querySelector('.error-message')?.
-				textContent?.trim()).toEqual(errorMessageTwo);
+			expect(
+				element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()
+			).toEqual(errorMessageTwo);
 		});
 
-		it('should change the error message only when already not valid', async function() {
+		it('should change the error message only when already not valid', async function () {
 			setToBlurred();
 			setToFocused();
 			const errorMessage = 'Error Text';
@@ -468,7 +438,6 @@ describe('vwc-text-area', () => {
 
 			expect(element.shadowRoot?.querySelector('.error-message')).toBeNull();
 		});
-
 	});
 
 	describe('successText', function () {
@@ -476,18 +445,16 @@ describe('vwc-text-area', () => {
 			element.successText = 'success';
 			await elementUpdated(element);
 
-			expect(getBaseElement(element)
-				.classList
-				.contains('success'))
-				.toEqual(true);
+			expect(getBaseElement(element).classList.contains('success')).toEqual(
+				true
+			);
 		});
 
 		it('should not show helper text when success is shown', async function () {
 			element.helperText = 'help';
 			element.successText = 'success';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.helper-text'))
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.helper-text')).toBeNull();
 		});
 
 		it('should not show error message when success is shown', async function () {
@@ -496,14 +463,17 @@ describe('vwc-text-area', () => {
 			setValidityToError('blah');
 			element.successText = 'success';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.error-message'))
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.error-message')).toBeNull();
 		});
 
-		it('should show success message if set', async function() {
+		it('should show success message if set', async function () {
 			element.successText = 'success';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.success-message')?.textContent?.trim()).toEqual('success');
+			expect(
+				element.shadowRoot
+					?.querySelector('.success-message')
+					?.textContent?.trim()
+			).toEqual('success');
 		});
 	});
 
@@ -520,10 +490,7 @@ describe('vwc-text-area', () => {
 		it('should add the error class', async function () {
 			element.errorText = forcedErrorMessage;
 			await elementUpdated(element);
-			expect(getBaseElement(element)
-				.classList
-				.contains('error'))
-				.toEqual(true);
+			expect(getBaseElement(element).classList.contains('error')).toEqual(true);
 		});
 
 		it('should display the given error message', async function () {
@@ -577,19 +544,15 @@ describe('vwc-text-area', () => {
 	});
 
 	describe('value', function () {
-		it('should set \'has-value\' class when there is a value', async function () {
-			const activeClassWhenEnabled = getBaseElement(element)
-				.classList
-				.contains('has-value');
+		it("should set 'has-value' class when there is a value", async function () {
+			const activeClassWhenEnabled =
+				getBaseElement(element).classList.contains('has-value');
 			element.value = '5';
 			await elementUpdated(element);
-			const activeClassWhenDisabled = getBaseElement(element)
-				.classList
-				.contains('has-value');
-			expect(activeClassWhenEnabled)
-				.toEqual(false);
-			expect(activeClassWhenDisabled)
-				.toEqual(true);
+			const activeClassWhenDisabled =
+				getBaseElement(element).classList.contains('has-value');
+			expect(activeClassWhenEnabled).toEqual(false);
+			expect(activeClassWhenDisabled).toEqual(true);
 		});
 	});
 
@@ -608,4 +571,3 @@ describe('vwc-text-area', () => {
 		});
 	});
 });
-
diff --git a/libs/components/src/lib/text-area/text-area.template.ts b/libs/components/src/lib/text-area/text-area.template.ts
index c588102ce9..17c3c2d824 100644
--- a/libs/components/src/lib/text-area/text-area.template.ts
+++ b/libs/components/src/lib/text-area/text-area.template.ts
@@ -8,29 +8,38 @@ import { classNames } from '@microsoft/fast-web-utilities';
 import { getFeedbackTemplate } from '../../shared/patterns';
 import type { TextArea } from './text-area';
 
-const getClasses = ({ value, errorValidationMessage, disabled, placeholder, readOnly, successText }: TextArea) => classNames(
-	'base',
-	['readonly', readOnly],
-	['placeholder', Boolean(placeholder)],
-	['disabled', disabled],
-	['error', Boolean(errorValidationMessage)],
-	['has-value', Boolean(value)],
-	['success', !!successText]
-);
+const getClasses = ({
+	value,
+	errorValidationMessage,
+	disabled,
+	placeholder,
+	readOnly,
+	successText,
+}: TextArea) =>
+	classNames(
+		'base',
+		['readonly', readOnly],
+		['placeholder', Boolean(placeholder)],
+		['disabled', disabled],
+		['error', Boolean(errorValidationMessage)],
+		['has-value', Boolean(value)],
+		['success', !!successText]
+	);
 
 /**
  *
  */
 function renderLabel() {
-	return html<TextArea>`
-	  <label for="control" class="label">
-		  ${x => x.label}
-	  </label>`;
+	return html<TextArea>` <label for="control" class="label">
+		${(x) => x.label}
+	</label>`;
 }
 
 function renderCharCount() {
 	return html<TextArea>`
-		<span class="char-count">${x => x.value ? x.value.length : 0 } / ${ x => x.maxlength }</span>
+		<span class="char-count"
+			>${(x) => (x.value ? x.value.length : 0)} / ${(x) => x.maxlength}</span
+		>
 	`;
 }
 
@@ -45,44 +54,53 @@ export const TextAreaTemplate: (
 	definition: FoundationElementDefinition
 ) => ViewTemplate<TextArea> = (context: ElementDefinitionContext) => {
 	return html`
-	  <div class="${getClasses}">
-		${when(x => x.charCount && x.maxlength, renderCharCount())}
-		${when(x => x.label, renderLabel())}
-			<textarea class="control" id="control"
-				?autofocus="${x => x.autofocus}"
-				placeholder="${x => x.placeholder ? x.placeholder : null}"
-				name="${x => x.name ? x.name : null}"
-				minlength="${x => x.minlength ? x.minlength : null}"
-				maxlength="${x => x.maxlength ? x.maxlength : null}"
-				rows="${x => x.rows ? x.rows : null}"
-				cols="${x => x.cols ? x.cols : null}"
-				wrap="${x => x.wrap ? x.wrap : null}"
-				?readonly="${x => x.readOnly}"
-				?disabled="${x => x.disabled}"
-				?required="${x => x.required}"
-				?spellcheck="${x => x.spellcheck}"
-				aria-atomic="${x => x.ariaAtomic}"
-				aria-busy="${x => x.ariaBusy}"
-				aria-current="${x => x.ariaCurrent}"
-				aria-details="${x => x.ariaDetails}"
-				aria-disabled="${x => x.ariaDisabled}"
-				aria-errormessage="${x => x.ariaErrormessage}"
-				aria-haspopup="${x => x.ariaHaspopup}"
-				aria-hidden="${x => x.ariaHidden}"
-				aria-invalid="${x => x.ariaInvalid}"
-				aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-				aria-label="${x => x.ariaLabel}"
-				aria-live="${x => x.ariaLive}"
-				aria-relevant="${x => x.ariaRelevant}"
-				aria-roledescription="${x => x.ariaRoledescription}"
+		<div class="${getClasses}">
+			${when((x) => x.charCount && x.maxlength, renderCharCount())}
+			${when((x) => x.label, renderLabel())}
+			<textarea
+				class="control"
+				id="control"
+				?autofocus="${(x) => x.autofocus}"
+				placeholder="${(x) => (x.placeholder ? x.placeholder : null)}"
+				name="${(x) => (x.name ? x.name : null)}"
+				minlength="${(x) => (x.minlength ? x.minlength : null)}"
+				maxlength="${(x) => (x.maxlength ? x.maxlength : null)}"
+				rows="${(x) => (x.rows ? x.rows : null)}"
+				cols="${(x) => (x.cols ? x.cols : null)}"
+				wrap="${(x) => (x.wrap ? x.wrap : null)}"
+				?readonly="${(x) => x.readOnly}"
+				?disabled="${(x) => x.disabled}"
+				?required="${(x) => x.required}"
+				?spellcheck="${(x) => x.spellcheck}"
+				aria-atomic="${(x) => x.ariaAtomic}"
+				aria-busy="${(x) => x.ariaBusy}"
+				aria-current="${(x) => x.ariaCurrent}"
+				aria-details="${(x) => x.ariaDetails}"
+				aria-disabled="${(x) => x.ariaDisabled}"
+				aria-errormessage="${(x) => x.ariaErrormessage}"
+				aria-haspopup="${(x) => x.ariaHaspopup}"
+				aria-hidden="${(x) => x.ariaHidden}"
+				aria-invalid="${(x) => x.ariaInvalid}"
+				aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+				aria-label="${(x) => x.ariaLabel}"
+				aria-live="${(x) => x.ariaLive}"
+				aria-relevant="${(x) => x.ariaRelevant}"
+				aria-roledescription="${(x) => x.ariaRoledescription}"
 				@input="${(x) => x.handleTextInput()}"
-				@change="${x => x.handleChange()}"
+				@change="${(x) => x.handleChange()}"
 				${ref('control')}
-	  >
+			>
 			</textarea>
-		${when(x => !x.successText && !x.errorValidationMessage && x.helperText?.length, getFeedbackTemplate('helper', context))}
-		${when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context))}
-		${when(x => x.successText, getFeedbackTemplate('success', context))}
-	  </div>
+			${when(
+				(x) =>
+					!x.successText && !x.errorValidationMessage && x.helperText?.length,
+				getFeedbackTemplate('helper', context)
+			)}
+			${when(
+				(x) => !x.successText && x.errorValidationMessage,
+				getFeedbackTemplate('error', context)
+			)}
+			${when((x) => x.successText, getFeedbackTemplate('success', context))}
+		</div>
 	`;
 };
diff --git a/libs/components/src/lib/text-area/text-area.ts b/libs/components/src/lib/text-area/text-area.ts
index f6cb775d9c..f0831a580d 100644
--- a/libs/components/src/lib/text-area/text-area.ts
+++ b/libs/components/src/lib/text-area/text-area.ts
@@ -1,5 +1,8 @@
-import { applyMixins, TextArea as FoundationTextArea } from '@microsoft/fast-foundation';
-import {attr} from '@microsoft/fast-element';
+import {
+	applyMixins,
+	TextArea as FoundationTextArea,
+} from '@microsoft/fast-foundation';
+import { attr } from '@microsoft/fast-element';
 import {
 	errorText,
 	type ErrorText,
@@ -7,10 +10,10 @@ import {
 	FormElementCharCount,
 	FormElementHelperText,
 	formElements,
-	FormElementSuccessText} from '../../shared/patterns';
+	FormElementSuccessText,
+} from '../../shared/patterns';
 import { Reflector } from '../../shared/utils/Reflector';
 
-
 export type TextAreaWrap = 'hard' | 'soft' | 'off';
 
 /**
@@ -43,5 +46,15 @@ export class TextArea extends FoundationTextArea {
 	}
 }
 
-export interface TextArea extends FormElement, ErrorText, FormElementCharCount, FormElementHelperText, FormElementSuccessText{}
-applyMixins(TextArea, FormElementCharCount, FormElementHelperText, FormElementSuccessText);
+export interface TextArea
+	extends FormElement,
+		ErrorText,
+		FormElementCharCount,
+		FormElementHelperText,
+		FormElementSuccessText {}
+applyMixins(
+	TextArea,
+	FormElementCharCount,
+	FormElementHelperText,
+	FormElementSuccessText
+);
diff --git a/libs/components/src/lib/text-field/definition.ts b/libs/components/src/lib/text-field/definition.ts
index a9e126576c..3c23160fe2 100644
--- a/libs/components/src/lib/text-field/definition.ts
+++ b/libs/components/src/lib/text-field/definition.ts
@@ -10,14 +10,15 @@ export type { TextFieldAppearance, TextFieldShape } from './text-field';
 /**
  * The text-field element.
  */
-export const textFieldDefinition = TextField.compose<FoundationElementDefinition>({
-	baseName: 'text-field',
-	template: template as any,
-	styles,
-	shadowOptions: {
-		delegatesFocus: true,
-	},
-});
+export const textFieldDefinition =
+	TextField.compose<FoundationElementDefinition>({
+		baseName: 'text-field',
+		template: template as any,
+		styles,
+		shadowOptions: {
+			delegatesFocus: true,
+		},
+	});
 
 /**
  * @internal
diff --git a/libs/components/src/lib/text-field/index.ts b/libs/components/src/lib/text-field/index.ts
index de3078b67c..c0d59ef922 100644
--- a/libs/components/src/lib/text-field/index.ts
+++ b/libs/components/src/lib/text-field/index.ts
@@ -1,4 +1,3 @@
 import { registerTextField } from './definition';
 
-
 registerTextField();
diff --git a/libs/components/src/lib/text-field/text-field.spec.ts b/libs/components/src/lib/text-field/text-field.spec.ts
index 8f20cd5754..836648f958 100644
--- a/libs/components/src/lib/text-field/text-field.spec.ts
+++ b/libs/components/src/lib/text-field/text-field.spec.ts
@@ -23,7 +23,7 @@ describe('vwc-text-field', () => {
 	}
 
 	function setValidityToError(errorMessage = 'error') {
-		element.setValidity({badInput: true}, errorMessage);
+		element.setValidity({ badInput: true }, errorMessage);
 		element.validate();
 	}
 
@@ -45,8 +45,7 @@ describe('vwc-text-field', () => {
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-text-field', async () => {
-			expect(element)
-				.toBeInstanceOf(TextField);
+			expect(element).toBeInstanceOf(TextField);
 		});
 	});
 
@@ -56,16 +55,13 @@ describe('vwc-text-field', () => {
 			element.label = labelText;
 			await elementUpdated(element);
 			const labelElement = getLabel();
-			expect(labelElement)
-				.toBeTruthy();
-			expect(labelElement?.textContent?.trim())
-				.toEqual(labelText);
+			expect(labelElement).toBeTruthy();
+			expect(labelElement?.textContent?.trim()).toEqual(labelText);
 		});
 
 		it('should show label only if label is set', async function () {
 			const labelElement = getLabel();
-			expect(labelElement)
-				.toBeNull();
+			expect(labelElement).toBeNull();
 		});
 
 		it('should remove label if label is removed', async function () {
@@ -85,8 +81,7 @@ describe('vwc-text-field', () => {
 			const labelElement = getLabel();
 			const inputElement = getInput();
 			expect(inputElement.id).toBeTruthy();
-			expect(labelElement.htmlFor)
-				.toBe(inputElement.id);
+			expect(labelElement.htmlFor).toBe(inputElement.id);
 		});
 	});
 
@@ -95,16 +90,14 @@ describe('vwc-text-field', () => {
 			element.charCount = true;
 			element.maxlength = 20;
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.char-count'))
-				.toBeTruthy();
+			expect(element.shadowRoot?.querySelector('.char-count')).toBeTruthy();
 		});
 
 		it('should remove char count if max-length is not set', async function () {
 			element.charCount = true;
 			element.toggleAttribute('max-length', false);
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.char-count'))
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.char-count')).toBeNull();
 		});
 
 		it('should render count with 0 if value is not set', async function () {
@@ -112,10 +105,9 @@ describe('vwc-text-field', () => {
 			element.maxlength = 20;
 			const expectedString = '0 / 20';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.char-count')
-				?.textContent
-				?.trim())
-				.toEqual(expectedString);
+			expect(
+				element.shadowRoot?.querySelector('.char-count')?.textContent?.trim()
+			).toEqual(expectedString);
 		});
 
 		it('should render count according to value and max', async function () {
@@ -124,27 +116,22 @@ describe('vwc-text-field', () => {
 			element.value = '12345';
 			const expectedString = '5 / 20';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.char-count')
-				?.textContent
-				?.trim())
-				.toEqual(expectedString);
+			expect(
+				element.shadowRoot?.querySelector('.char-count')?.textContent?.trim()
+			).toEqual(expectedString);
 		});
 	});
 
 	describe('readOnly', function () {
 		it('should add class readonly to host', async function () {
-			const readonlyClassWhenFalse = getBaseElement(element)
-				.classList
-				.contains('readonly');
+			const readonlyClassWhenFalse =
+				getBaseElement(element).classList.contains('readonly');
 			element.readOnly = true;
 			await elementUpdated(element);
-			const readonlyClassWhenTrue = getBaseElement(element)
-				.classList
-				.contains('readonly');
-			expect(readonlyClassWhenFalse)
-				.toEqual(false);
-			expect(readonlyClassWhenTrue)
-				.toEqual(true);
+			const readonlyClassWhenTrue =
+				getBaseElement(element).classList.contains('readonly');
+			expect(readonlyClassWhenFalse).toEqual(false);
+			expect(readonlyClassWhenTrue).toEqual(true);
 		});
 	});
 
@@ -152,42 +139,33 @@ describe('vwc-text-field', () => {
 		it('should set autofocus on the input element', async function () {
 			element.autofocus = true;
 			await elementUpdated(element);
-			expect(getInput()
-				?.hasAttribute('autofocus'))
-				.toEqual(true);
+			expect(getInput()?.hasAttribute('autofocus')).toEqual(true);
 		});
 	});
 
 	describe('placeholder', function () {
 		const placeholderText = 'Text';
 		it('should set placeholder attribute on the input', async function () {
-
 			element.placeholder = placeholderText;
 			await elementUpdated(element);
-			expect(getInput()
-				?.getAttribute('placeholder'))
-				.toEqual(placeholderText);
+			expect(getInput()?.getAttribute('placeholder')).toEqual(placeholderText);
 		});
 
 		it('should set class placeholder to root', async function () {
 			element.placeholder = placeholderText;
 			await elementUpdated(element);
-			expect(getBaseElement(element)
-				.classList
-				.contains('placeholder'))
-				.toEqual(true);
+			expect(getBaseElement(element).classList.contains('placeholder')).toEqual(
+				true
+			);
 		});
 	});
 
 	describe('type', function () {
 		const typeText = TextFieldType.text;
 		it('should set type attribute on the input', async function () {
-
 			element.type = typeText;
 			await elementUpdated(element);
-			expect(getInput()
-				?.getAttribute('type'))
-				.toEqual(typeText);
+			expect(getInput()?.getAttribute('type')).toEqual(typeText);
 		});
 	});
 
@@ -197,9 +175,7 @@ describe('vwc-text-field', () => {
 		it('should set list attribute on the input', async function () {
 			element.list = dataListID;
 			await elementUpdated(element);
-			expect(getInput()
-				?.getAttribute('list'))
-				.toEqual(dataListID);
+			expect(getInput()?.getAttribute('list')).toEqual(dataListID);
 		});
 	});
 
@@ -209,18 +185,14 @@ describe('vwc-text-field', () => {
 		const proxyPropertyName = 'maxLength';
 
 		it('should set maxlength attribute on the input', async function () {
-
 			(element as any)[propertyName] = value;
 			await elementUpdated(element);
-			expect(getInput()
-				?.getAttribute(propertyName))
-				.toEqual(value);
+			expect(getInput()?.getAttribute(propertyName)).toEqual(value);
 		});
 
 		it('should set maxLength on proxy input', function () {
 			(element as any)[propertyName] = value;
-			expect((element.proxy as any)[proxyPropertyName])
-				.toEqual(Number(value));
+			expect((element.proxy as any)[proxyPropertyName]).toEqual(Number(value));
 		});
 	});
 
@@ -230,18 +202,14 @@ describe('vwc-text-field', () => {
 		const proxyPropertyName = 'minLength';
 
 		it('should set minlength attribute on the input', async function () {
-
 			(element as any)[propertyName] = value;
 			await elementUpdated(element);
-			expect(getInput()
-				?.getAttribute(propertyName))
-				.toEqual(value);
+			expect(getInput()?.getAttribute(propertyName)).toEqual(value);
 		});
 
 		it('should set minLength on proxy input', function () {
 			(element as any)[propertyName] = value;
-			expect((element.proxy as any)[proxyPropertyName])
-				.toEqual(Number(value));
+			expect((element.proxy as any)[proxyPropertyName]).toEqual(Number(value));
 		});
 	});
 
@@ -264,134 +232,130 @@ describe('vwc-text-field', () => {
 		});
 
 		it('should attach to closest form', async function () {
-			const {form: formElement} = createFormHTML<TextField>({
+			const { form: formElement } = createFormHTML<TextField>({
 				componentTagName: COMPONENT_TAG_NAME,
 				fieldName,
 				fieldValue,
 				formId,
-				formWrapper
+				formWrapper,
 			});
 
 			const submitPromise = listenToFormSubmission(formElement);
 			formElement.requestSubmit();
 
 			(await submitPromise).forEach((formDataValue, formDataKey) => {
-				expect(formDataKey)
-					.toEqual(fieldName);
-				expect(formDataValue)
-					.toEqual(fieldValue);
+				expect(formDataKey).toEqual(fieldName);
+				expect(formDataValue).toEqual(fieldValue);
 			});
 		});
 
 		it('should attach to form when given form id', async function () {
-			const {otherForm} = createFormHTML<TextField>(
-				{
-					fieldName, fieldValue, formId, otherFormId: 'otherFormId', componentTagName: COMPONENT_TAG_NAME, formWrapper
-				});
+			const { otherForm } = createFormHTML<TextField>({
+				fieldName,
+				fieldValue,
+				formId,
+				otherFormId: 'otherFormId',
+				componentTagName: COMPONENT_TAG_NAME,
+				formWrapper,
+			});
 
 			const submitPromise = listenToFormSubmission(otherForm);
 			otherForm.requestSubmit();
 
 			(await submitPromise).forEach((formDataValue, formDataKey) => {
-				expect(formDataKey)
-					.toEqual(fieldName);
-				expect(formDataValue)
-					.toEqual(fieldValue);
+				expect(formDataKey).toEqual(fieldName);
+				expect(formDataValue).toEqual(fieldValue);
 			});
 		});
 
 		it('should reset the value of the custom element to default on form reset', async function () {
-			const {
-				form: formElement,
-				element
-			} = createFormHTML<TextField>({
+			const { form: formElement, element } = createFormHTML<TextField>({
 				fieldName,
 				fieldValue,
 				formId,
 				componentTagName: COMPONENT_TAG_NAME,
-				formWrapper
+				formWrapper,
 			});
 
 			element.value = '5';
 			formElement.reset();
 			await elementUpdated(element);
 
-			expect(element.value)
-				.toEqual(fieldValue);
+			expect(element.value).toEqual(fieldValue);
 		});
 	});
 
 	describe('events', function () {
 		it('should emit an input event', async function () {
-			const inputPromise = new Promise(res => element.addEventListener('input', () => res(true)));
+			const inputPromise = new Promise((res) =>
+				element.addEventListener('input', () => res(true))
+			);
 			const innerInput = getInput();
-			innerInput.dispatchEvent(new InputEvent('input', {
-				bubbles: true,
-				composed: true
-			}));
-			expect(await inputPromise)
-				.toEqual(true);
+			innerInput.dispatchEvent(
+				new InputEvent('input', {
+					bubbles: true,
+					composed: true,
+				})
+			);
+			expect(await inputPromise).toEqual(true);
 		});
 
 		it('should emit a change event', async function () {
-			const inputPromise = new Promise(res => element.addEventListener('change', () => res(true)));
+			const inputPromise = new Promise((res) =>
+				element.addEventListener('change', () => res(true))
+			);
 			const innerInput = getInput();
-			innerInput.dispatchEvent(new InputEvent('change', {
-				bubbles: true,
-				composed: true
-			}));
-			expect(await inputPromise)
-				.toEqual(true);
+			innerInput.dispatchEvent(
+				new InputEvent('change', {
+					bubbles: true,
+					composed: true,
+				})
+			);
+			expect(await inputPromise).toEqual(true);
 		});
 	});
 
 	describe('helper text', function () {
 		it('should render the helper text when attribute is set', async function () {
-			const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-text');
+			const helperTextElementWithoutText =
+				element.shadowRoot?.querySelector('.helper-text');
 			const helperText = 'Helper Text';
 			element.helperText = helperText;
 			await elementUpdated(element);
-			expect(helperTextElementWithoutText)
-				.toBeNull();
-			expect(element.shadowRoot?.querySelector('.helper-message')
-				?.textContent
-				?.trim())
-				.toEqual(helperText);
+			expect(helperTextElementWithoutText).toBeNull();
+			expect(
+				element.shadowRoot
+					?.querySelector('.helper-message')
+					?.textContent?.trim()
+			).toEqual(helperText);
 		});
 	});
 
 	describe('error message', function () {
-
 		it('should add class error to base if not valid', async function () {
 			element.dirtyValue = true;
 			setToBlurred();
 			setValidityToError('blah');
 			await elementUpdated(element);
 
-			expect(getBaseElement(element)
-				.classList
-				.contains('error'))
-				.toEqual(true);
+			expect(getBaseElement(element).classList.contains('error')).toEqual(true);
 		});
 
 		it('should set required message if submitted', async function () {
-
 			element.required = true;
 			await elementUpdated(element);
 			element.dispatchEvent(new Event('invalid'));
 			await elementUpdated(element);
 			const errorElement = element.shadowRoot?.querySelector('.error-message');
 
-			expect(getBaseElement(element)
-				.classList
-				.contains('error'))
-				.toEqual(true);
+			expect(getBaseElement(element).classList.contains('error')).toEqual(true);
 
 			expect(errorElement !== null).toBeTruthy();
 		});
 
 		it('should render the error message when not valid', async function () {
-			const errorElementWithoutText = element.shadowRoot?.querySelector('.error-message');
+			const errorElementWithoutText =
+				element.shadowRoot?.querySelector('.error-message');
 			const errorMessage = 'Error Text';
 
 			element.dirtyValue = true;
@@ -399,15 +363,13 @@ describe('vwc-text-field', () => {
 			setValidityToError(errorMessage);
 			await elementUpdated(element);
 
-			expect(errorElementWithoutText)
-				.toBeNull();
-			expect(element.shadowRoot?.querySelector('.error-message')
-				?.textContent
-				?.trim())
-				.toEqual(errorMessage);
+			expect(errorElementWithoutText).toBeNull();
+			expect(
+				element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()
+			).toEqual(errorMessage);
 		});
 
-		it('should render the error message only after a blur', async function() {
+		it('should render the error message only after a blur', async function () {
 			const errorMessage = 'Error Text';
 			element.dirtyValue = true;
 			setValidityToError(errorMessage);
@@ -421,15 +383,13 @@ describe('vwc-text-field', () => {
 			setToBlurred();
 			setValidityToError();
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.helper-text'))
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.helper-text')).toBeNull();
 		});
 
 		it('should set error message to empty string when pristine', async function () {
 			setValidityToError();
 			await elementUpdated(element);
-			expect(element.errorValidationMessage)
-				.toEqual('');
+			expect(element.errorValidationMessage).toEqual('');
 		});
 
 		it('should validate after a blur', async function () {
@@ -438,11 +398,12 @@ describe('vwc-text-field', () => {
 			setValidityToError(errorMessage);
 			setToBlurred();
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.error-message')?.
-				textContent?.trim()).toEqual(errorMessage);
+			expect(
+				element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()
+			).toEqual(errorMessage);
 		});
 
-		it('should update error message when blurred', async function() {
+		it('should update error message when blurred', async function () {
 			setToBlurred();
 			const errorMessage = 'Error Text';
 			const errorMessageTwo = 'Error Text 2';
@@ -453,11 +414,12 @@ describe('vwc-text-field', () => {
 			setValidityToError(errorMessageTwo);
 			await elementUpdated(element);
 
-			expect(element.shadowRoot?.querySelector('.error-message')?.
-				textContent?.trim()).toEqual(errorMessageTwo);
+			expect(
+				element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()
+			).toEqual(errorMessageTwo);
 		});
 
-		it('should change the error message only when already not valid', async function() {
+		it('should change the error message only when already not valid', async function () {
 			setToBlurred();
 			setToFocused();
 			const errorMessage = 'Error Text';
@@ -474,18 +436,16 @@ describe('vwc-text-field', () => {
 			element.successText = 'success';
 			await elementUpdated(element);
 
-			expect(getBaseElement(element)
-				.classList
-				.contains('success'))
-				.toEqual(true);
+			expect(getBaseElement(element).classList.contains('success')).toEqual(
+				true
+			);
 		});
 
 		it('should not show helper text when success is shown', async function () {
 			element.helperText = 'help';
 			element.successText = 'success';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.helper-text'))
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.helper-text')).toBeNull();
 		});
 
 		it('should not show error message when success is shown', async function () {
@@ -494,8 +454,7 @@ describe('vwc-text-field', () => {
 			setValidityToError('blah');
 			element.successText = 'success';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.error-message'))
-				.toBeNull();
+			expect(element.shadowRoot?.querySelector('.error-message')).toBeNull();
 		});
 
 		it('should take precedence over errorText', async function () {
@@ -510,58 +469,52 @@ describe('vwc-text-field', () => {
 			).toEqual('success');
 		});
 
-		it('should show success message if set', async function() {
+		it('should show success message if set', async function () {
 			element.successText = 'success';
 			await elementUpdated(element);
-			expect(element.shadowRoot?.querySelector('.success-message')?.textContent?.trim()).toEqual('success');
+			expect(
+				element.shadowRoot
+					?.querySelector('.success-message')
+					?.textContent?.trim()
+			).toEqual('success');
 		});
 	});
 
 	describe('disabled', function () {
 		it('should set disabled class when attribute is set', async function () {
-			const disabledClassWhenEnabled = getBaseElement(element)
-				.classList
-				.contains('disabled');
+			const disabledClassWhenEnabled =
+				getBaseElement(element).classList.contains('disabled');
 			element.disabled = true;
 			await elementUpdated(element);
-			const disabledClassWhenDisabled = getBaseElement(element)
-				.classList
-				.contains('disabled');
-			expect(disabledClassWhenEnabled)
-				.toEqual(false);
-			expect(disabledClassWhenDisabled)
-				.toEqual(true);
+			const disabledClassWhenDisabled =
+				getBaseElement(element).classList.contains('disabled');
+			expect(disabledClassWhenEnabled).toEqual(false);
+			expect(disabledClassWhenDisabled).toEqual(true);
 		});
 	});
 
 	describe('value', function () {
-		it('should set \'has-value\' class when there is a value', async function () {
-			const activeClassWhenEnabled = getBaseElement(element)
-				.classList
-				.contains('has-value');
+		it("should set 'has-value' class when there is a value", async function () {
+			const activeClassWhenEnabled =
+				getBaseElement(element).classList.contains('has-value');
 			element.value = '5';
 			await elementUpdated(element);
-			const activeClassWhenDisabled = getBaseElement(element)
-				.classList
-				.contains('has-value');
-			expect(activeClassWhenEnabled)
-				.toEqual(false);
-			expect(activeClassWhenDisabled)
-				.toEqual(true);
+			const activeClassWhenDisabled =
+				getBaseElement(element).classList.contains('has-value');
+			expect(activeClassWhenEnabled).toEqual(false);
+			expect(activeClassWhenDisabled).toEqual(true);
 		});
 	});
 
-
 	describe('appearance', function () {
 		it('should set the shape class on the root', async function () {
 			const appearance = 'filled';
 			element.setAttribute('appearance', appearance);
 			await elementUpdated(element);
 
-			expect(getBaseElement(element)
-				.classList
-				.contains('appearance-filled'))
-				.toEqual(true);
+			expect(
+				getBaseElement(element).classList.contains('appearance-filled')
+			).toEqual(true);
 		});
 	});
 
@@ -571,40 +524,38 @@ describe('vwc-text-field', () => {
 			element.setAttribute('shape', shape);
 			await elementUpdated(element);
 
-			expect(getBaseElement(element)
-				.classList
-				.contains('shape-pill'))
-				.toEqual(true);
+			expect(getBaseElement(element).classList.contains('shape-pill')).toEqual(
+				true
+			);
 		});
 	});
 
 	describe('icon', function () {
 		it('should render the icon with name', async function () {
-			const iconExistsWithoutAttribute = element.shadowRoot?.querySelector('vwc-icon');
+			const iconExistsWithoutAttribute =
+				element.shadowRoot?.querySelector('vwc-icon');
 			const iconName = 'home';
 			element.setAttribute('icon', iconName);
 			await elementUpdated(element);
 			const iconElement = element.shadowRoot?.querySelector('vwc-icon');
-			expect(iconExistsWithoutAttribute)
-				.toBeFalsy();
-			expect(iconElement instanceof Icon)
-				.toEqual(true);
-			expect(iconElement?.getAttribute('name'))
-				.toEqual(iconName);
+			expect(iconExistsWithoutAttribute).toBeFalsy();
+			expect(iconElement instanceof Icon).toEqual(true);
+			expect(iconElement?.getAttribute('name')).toEqual(iconName);
 		});
 		it('should set class has-icon when icon is set', async function () {
 			element.icon = 'home';
 			await elementUpdated(element);
-			const baseElementHasIconClass = element.shadowRoot?.
-				querySelector('.base')?.classList.contains('has-icon');
+			const baseElementHasIconClass = element.shadowRoot
+				?.querySelector('.base')
+				?.classList.contains('has-icon');
 			expect(baseElementHasIconClass).toEqual(true);
-
 		});
 		it('should remove .no-leading class from .base if icon is set', async function () {
 			element.icon = 'home';
 			await elementUpdated(element);
-			const baseElementHasNoLeadingClass = element.shadowRoot?.
-				querySelector('.base')?.classList.contains('no-leading');
+			const baseElementHasNoLeadingClass = element.shadowRoot
+				?.querySelector('.base')
+				?.classList.contains('no-leading');
 			expect(baseElementHasNoLeadingClass).toEqual(false);
 		});
 	});
@@ -618,7 +569,6 @@ describe('vwc-text-field', () => {
 			await elementUpdated(element);
 			expect(autoCompleteDefault).toBeNull();
 			expect(internalInput.getAttribute('autocomplete')).toEqual('off');
-
 		});
 	});
 
@@ -635,10 +585,7 @@ describe('vwc-text-field', () => {
 		it('should add the error class', async function () {
 			element.errorText = forcedErrorMessage;
 			await elementUpdated(element);
-			expect(getBaseElement(element)
-				.classList
-				.contains('error'))
-				.toEqual(true);
+			expect(getBaseElement(element).classList.contains('error')).toEqual(true);
 		});
 
 		it('should display the given error message', async function () {
@@ -666,15 +613,17 @@ describe('vwc-text-field', () => {
 
 			expect(originalValidationMessage).not.toBe('');
 			expect(validationMessageWithErrorText).toBe(forcedErrorMessage);
-			expect(validationMessageAfterErrorTextRemove).toBe(originalValidationMessage);
+			expect(validationMessageAfterErrorTextRemove).toBe(
+				originalValidationMessage
+			);
 		});
 	});
 
 	describe('slot', function () {
-
 		it('should have a slot name action-items', async function () {
-			const slotElement = element.shadowRoot?.
-				querySelector('.base .fieldset slot[name="action-items"]');
+			const slotElement = element.shadowRoot?.querySelector(
+				'.base .fieldset slot[name="action-items"]'
+			);
 			expect(slotElement).toBeDefined();
 		});
 
@@ -685,15 +634,17 @@ describe('vwc-text-field', () => {
 			element.appendChild(slottedElement);
 			await elementUpdated(element);
 
-			const baseElementHasActionItemsClass = element.shadowRoot?.
-				querySelector('.base')?.classList.contains('action-items');
+			const baseElementHasActionItemsClass = element.shadowRoot
+				?.querySelector('.base')
+				?.classList.contains('action-items');
 
 			expect(baseElementHasActionItemsClass).toEqual(true);
 		});
 
 		it('should have a slot name leading-action-items', async function () {
-			const slotElement = element.shadowRoot?.
-				querySelector('.base .fieldset .leading-items-wrapper  slot[name="leading-action-items"]');
+			const slotElement = element.shadowRoot?.querySelector(
+				'.base .fieldset .leading-items-wrapper  slot[name="leading-action-items"]'
+			);
 			expect(slotElement).toBeDefined();
 		});
 
@@ -704,8 +655,9 @@ describe('vwc-text-field', () => {
 			element.appendChild(slottedElement);
 			await elementUpdated(element);
 
-			const baseElementHasActionItemsClass = element.shadowRoot?.
-				querySelector('.base')?.classList.contains('leading-action-items');
+			const baseElementHasActionItemsClass = element.shadowRoot
+				?.querySelector('.base')
+				?.classList.contains('leading-action-items');
 
 			expect(baseElementHasActionItemsClass).toEqual(true);
 		});
@@ -717,8 +669,9 @@ describe('vwc-text-field', () => {
 			element.appendChild(slottedElement);
 			await elementUpdated(element);
 
-			const baseElementNoLeadingClass = element.shadowRoot?.
-				querySelector('.base')?.classList.contains('no-leading');
+			const baseElementNoLeadingClass = element.shadowRoot
+				?.querySelector('.base')
+				?.classList.contains('no-leading');
 
 			expect(baseElementNoLeadingClass).toEqual(false);
 		});
@@ -731,7 +684,9 @@ describe('vwc-text-field', () => {
 			element.addEventListener('focus', focusSpy);
 			internalInput.focus();
 			expect(focusSpy).toHaveBeenCalledTimes(1);
-			expect(focusSpy).toHaveBeenCalledWith(expect.objectContaining({bubbles: false}));
+			expect(focusSpy).toHaveBeenCalledWith(
+				expect.objectContaining({ bubbles: false })
+			);
 		});
 	});
 
@@ -743,7 +698,9 @@ describe('vwc-text-field', () => {
 			internalInput.focus();
 			internalInput.blur();
 			expect(blurSpy).toHaveBeenCalledTimes(1);
-			expect(blurSpy).toHaveBeenCalledWith(expect.objectContaining({bubbles: false}));
+			expect(blurSpy).toHaveBeenCalledWith(
+				expect.objectContaining({ bubbles: false })
+			);
 		});
 	});
 
@@ -754,7 +711,9 @@ describe('vwc-text-field', () => {
 		});
 
 		it('should do nothing when element is unconnected', async function () {
-			const unconnectedElement = document.createElement(COMPONENT_TAG_NAME) as TextField;
+			const unconnectedElement = document.createElement(
+				COMPONENT_TAG_NAME
+			) as TextField;
 			expect(() => unconnectedElement.focus()).not.toThrow();
 		});
 	});
diff --git a/libs/components/src/lib/text-field/text-field.template.ts b/libs/components/src/lib/text-field/text-field.template.ts
index 08f6b17e69..6696c7a805 100644
--- a/libs/components/src/lib/text-field/text-field.template.ts
+++ b/libs/components/src/lib/text-field/text-field.template.ts
@@ -44,7 +44,9 @@ const getStateClasses = ({
  */
 function renderCharCount() {
 	return html<TextField>`
-		<span class="char-count">${x => x.value ? x.value.length : 0 } / ${ x => x.maxlength }</span>
+		<span class="char-count"
+			>${(x) => (x.value ? x.value.length : 0)} / ${(x) => x.maxlength}</span
+		>
 	`;
 }
 
@@ -60,26 +62,37 @@ export const TextfieldTemplate: (
 ) => ViewTemplate<TextField> = (context: ElementDefinitionContext) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
-	return html<TextField>`
-	<div class="base ${getStateClasses}">
-    ${when(x => x.charCount && x.maxlength, renderCharCount())}
-    <slot class="label" name="_label"></slot>
-    <div class="fieldset">
+	return html<TextField>` <div class="base ${getStateClasses}">
+		${when((x) => x.charCount && x.maxlength, renderCharCount())}
+		<slot class="label" name="_label"></slot>
+		<div class="fieldset">
 			<div class="leading-items-wrapper">
-				<slot name="leading-action-items"  ${slotted('leadingActionItemsSlottedContent')}></slot>
-				${x => affixIconTemplate(x.icon)}
+				<slot
+					name="leading-action-items"
+					${slotted('leadingActionItemsSlottedContent')}
+				></slot>
+				${(x) => affixIconTemplate(x.icon)}
 			</div>
 
 			<div class="wrapper">
 				<slot class="control" name="_control"></slot>
 			</div>
 			<div class="action-items-wrapper">
-				<slot name="action-items"  ${slotted('actionItemsSlottedContent')}></slot>
+				<slot
+					name="action-items"
+					${slotted('actionItemsSlottedContent')}
+				></slot>
 			</div>
-
-    </div>
-	  ${when(x => !x.successText && !x.errorValidationMessage && x.helperText?.length, getFeedbackTemplate('helper', context))}
-	  ${when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context))}
-	  ${when(x => x.successText, getFeedbackTemplate('success', context))}
+		</div>
+		${when(
+			(x) =>
+				!x.successText && !x.errorValidationMessage && x.helperText?.length,
+			getFeedbackTemplate('helper', context)
+		)}
+		${when(
+			(x) => !x.successText && x.errorValidationMessage,
+			getFeedbackTemplate('error', context)
+		)}
+		${when((x) => x.successText, getFeedbackTemplate('success', context))}
 	</div>`;
 };
diff --git a/libs/components/src/lib/text-field/text-field.ts b/libs/components/src/lib/text-field/text-field.ts
index e9ae62a74a..99fdecf17a 100644
--- a/libs/components/src/lib/text-field/text-field.ts
+++ b/libs/components/src/lib/text-field/text-field.ts
@@ -19,8 +19,8 @@ import { generateRandomId } from '../../shared/utils/randomId';
 import { Reflector } from '../../shared/utils/Reflector';
 
 export type TextFieldAppearance = Extract<
-Appearance,
-Appearance.Fieldset | Appearance.Ghost
+	Appearance,
+	Appearance.Fieldset | Appearance.Ghost
 >;
 export type TextFieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
 
@@ -29,28 +29,30 @@ export type TextFieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
 // As a workaround we add a stylesheet to root of text-field to apply the styles
 // Once fixed in Safari we can remove the workaround (VIV-1413)
 const safariWorkaroundClassName = '_vvd-3-text-field-safari-workaround';
-const getSafariWorkaroundStyleSheet = memoizeWith(() => '', () => {
-	const styleSheet = new CSSStyleSheet();
-
-	// Prevent error in environments that do not support `replaceSync` like JSDOM
-	const supportsReplaceSync = 'replaceSync' in styleSheet;
-	// istanbul ignore else
-	if (supportsReplaceSync) {
-		styleSheet.replaceSync(`
+const getSafariWorkaroundStyleSheet = memoizeWith(
+	() => '',
+	() => {
+		const styleSheet = new CSSStyleSheet();
+
+		// Prevent error in environments that do not support `replaceSync` like JSDOM
+		const supportsReplaceSync = 'replaceSync' in styleSheet;
+		// istanbul ignore else
+		if (supportsReplaceSync) {
+			styleSheet.replaceSync(`
 .${safariWorkaroundClassName}::placeholder {
 	opacity: 1 !important;
 	-webkit-text-fill-color: var(--_low-ink-color) !important;
 }`);
-	}
+		}
 
-	return styleSheet;
-});
+		return styleSheet;
+	}
+);
 
 const installSafariWorkaroundStyle = (forElement: TextField) => {
 	const root = forElement.getRootNode() as ShadowRoot | Document;
 	const workaroundStyleSheet = getSafariWorkaroundStyleSheet();
 
-
 	// Prevent error in environments that do not support `adoptedStyleSheets` like JSDOM
 	const supportsAdoptedStyleSheets = 'adoptedStyleSheets' in root;
 	// istanbul ignore if
@@ -59,7 +61,10 @@ const installSafariWorkaroundStyle = (forElement: TextField) => {
 	}
 
 	if (!root.adoptedStyleSheets.includes(workaroundStyleSheet)) {
-		root.adoptedStyleSheets = [...root.adoptedStyleSheets, workaroundStyleSheet];
+		root.adoptedStyleSheets = [
+			...root.adoptedStyleSheets,
+			workaroundStyleSheet,
+		];
 	}
 };
 
@@ -132,19 +137,19 @@ export class TextField extends FoundationTextfield {
 			this.control = input;
 
 			this.#reflectToInput = new Reflector(this, input);
-			this.#reflectToInput.booleanAttribute('autofocus', 'autofocus',);
-			this.#reflectToInput.booleanAttribute('disabled', 'disabled',);
-			this.#reflectToInput.booleanAttribute('readOnly', 'readonly',);
-			this.#reflectToInput.booleanAttribute('required', 'required',);
-			this.#reflectToInput.booleanAttribute('spellcheck', 'spellcheck',);
-			this.#reflectToInput.attribute('list', 'list',);
-			this.#reflectToInput.attribute('maxlength', 'maxlength',);
-			this.#reflectToInput.attribute('minlength', 'minlength',);
-			this.#reflectToInput.attribute('pattern', 'pattern',);
-			this.#reflectToInput.attribute('placeholder', 'placeholder',);
-			this.#reflectToInput.attribute('size', 'size',);
-			this.#reflectToInput.attribute('autoComplete', 'autocomplete',);
-			this.#reflectToInput.attribute('type', 'type',);
+			this.#reflectToInput.booleanAttribute('autofocus', 'autofocus');
+			this.#reflectToInput.booleanAttribute('disabled', 'disabled');
+			this.#reflectToInput.booleanAttribute('readOnly', 'readonly');
+			this.#reflectToInput.booleanAttribute('required', 'required');
+			this.#reflectToInput.booleanAttribute('spellcheck', 'spellcheck');
+			this.#reflectToInput.attribute('list', 'list');
+			this.#reflectToInput.attribute('maxlength', 'maxlength');
+			this.#reflectToInput.attribute('minlength', 'minlength');
+			this.#reflectToInput.attribute('pattern', 'pattern');
+			this.#reflectToInput.attribute('placeholder', 'placeholder');
+			this.#reflectToInput.attribute('size', 'size');
+			this.#reflectToInput.attribute('autoComplete', 'autocomplete');
+			this.#reflectToInput.attribute('type', 'type');
 			this.#reflectToInput.attribute('ariaAtomic', 'aria-atomic');
 			this.#reflectToInput.attribute('ariaBusy', 'aria-busy');
 			this.#reflectToInput.attribute('ariaCurrent', 'aria-current');
@@ -157,7 +162,10 @@ export class TextField extends FoundationTextfield {
 			this.#reflectToInput.attribute('ariaLabel', 'aria-label');
 			this.#reflectToInput.attribute('ariaLive', 'aria-live');
 			this.#reflectToInput.attribute('ariaRelevant', 'aria-relevant');
-			this.#reflectToInput.attribute('ariaRoledescription', 'aria-roledescription');
+			this.#reflectToInput.attribute(
+				'ariaRoledescription',
+				'aria-roledescription'
+			);
 			this.#reflectToInput.property('value', 'value', true);
 
 			input.addEventListener('input', () => {
@@ -195,5 +203,17 @@ export class TextField extends FoundationTextfield {
 	}
 }
 
-export interface TextField extends AffixIcon, ErrorText, FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText{}
-applyMixins(TextField, AffixIcon, FormElementCharCount, FormElementHelperText, FormElementSuccessText);
+export interface TextField
+	extends AffixIcon,
+		ErrorText,
+		FormElement,
+		FormElementCharCount,
+		FormElementHelperText,
+		FormElementSuccessText {}
+applyMixins(
+	TextField,
+	AffixIcon,
+	FormElementCharCount,
+	FormElementHelperText,
+	FormElementSuccessText
+);
diff --git a/libs/components/src/lib/text-field/ui.test.ts b/libs/components/src/lib/text-field/ui.test.ts
index 9a394030b0..de6c9dcf3f 100644
--- a/libs/components/src/lib/text-field/ui.test.ts
+++ b/libs/components/src/lib/text-field/ui.test.ts
@@ -7,7 +7,7 @@ import {
 
 const components = ['text-field', 'button', 'select', 'divider'];
 
-test('should show the component', async ({page}: { page: Page }) => {
+test('should show the component', async ({ page }: { page: Page }) => {
 	const template = `
 	<div style="display: flex; flex-direction: column; row-gap: 5px; inline-size: 260px; margin: 6px;">
 		<vwc-text-field label="My Label"></vwc-text-field>
@@ -67,14 +67,22 @@ test('should show the component', async ({page}: { page: Page }) => {
 	await page.keyboard.press('Tab');
 	await page.waitForLoadState('networkidle');
 
-	expect(await testWrapper?.screenshot())
-		.toMatchSnapshot(
-			'./snapshots/text-field.png'
-		);
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/text-field.png'
+	);
 });
 
-const testInvalidation = async ({page, browserName}: { page: Page, browserName: string }) => {
-	const selector = browserName === 'chromium' ? 'input[name="submit-button"]' : '#submit-button';
+const testInvalidation = async ({
+	page,
+	browserName,
+}: {
+	page: Page;
+	browserName: string;
+}) => {
+	const selector =
+		browserName === 'chromium'
+			? 'input[name="submit-button"]'
+			: '#submit-button';
 
 	const template = `
 		<form onsubmit="return false" style="min-height: 150px;">
@@ -107,10 +115,9 @@ const testInvalidation = async ({page, browserName}: { page: Page, browserName:
 	await page.waitForLoadState('networkidle');
 	await page.waitForTimeout(500);
 
-	expect(await testWrapper?.screenshot({animations: 'disabled'}))
-		.toMatchSnapshot(
-			'./snapshots/text-field-invalidation.png'
-		);
+	expect(
+		await testWrapper?.screenshot({ animations: 'disabled' })
+	).toMatchSnapshot('./snapshots/text-field-invalidation.png');
 };
 
 test('should invalidate component', testInvalidation);
@@ -167,4 +174,3 @@ test.describe('max/min length validation', () => {
 		).toBe(false);
 	});
 });
-
diff --git a/libs/components/src/lib/time-picker/definition.ts b/libs/components/src/lib/time-picker/definition.ts
index 6924537b2b..b75fb952a2 100644
--- a/libs/components/src/lib/time-picker/definition.ts
+++ b/libs/components/src/lib/time-picker/definition.ts
@@ -21,7 +21,12 @@ export const timePickerDefinition =
 /**
  * @internal
  */
-export const timePickerRegistries = [timePickerDefinition(), ...textFieldRegistries, ...popupRegistries, ...buttonRegistries];
+export const timePickerRegistries = [
+	timePickerDefinition(),
+	...textFieldRegistries,
+	...popupRegistries,
+	...buttonRegistries,
+];
 
 /**
  * Registers the time-picker element with the design system.
diff --git a/libs/components/src/lib/time-picker/time-picker.spec.ts b/libs/components/src/lib/time-picker/time-picker.spec.ts
index c0387790e9..14e7e88871 100644
--- a/libs/components/src/lib/time-picker/time-picker.spec.ts
+++ b/libs/components/src/lib/time-picker/time-picker.spec.ts
@@ -4,7 +4,7 @@ import {
 	elementUpdated,
 	fixture,
 	listenToFormSubmission,
-	setupDelegatesFocusPolyfill
+	setupDelegatesFocusPolyfill,
 } from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { setLocale } from '@vonage/vivid';
@@ -43,11 +43,14 @@ describe('vwc-time-picker', () => {
 			`[aria-label="${label}"],[label="${label}"]`
 		) as Button;
 
-	const getPickerItem = (type: 'hours' | 'minutes' | 'seconds' | 'meridies', value: string) =>
-		element.shadowRoot!.querySelector(`#${type}-${value}`) as HTMLElement;
+	const getPickerItem = (
+		type: 'hours' | 'minutes' | 'seconds' | 'meridies',
+		value: string
+	) => element.shadowRoot!.querySelector(`#${type}-${value}`) as HTMLElement;
 
-	const getAllPickerItems = (type: 'hours' | 'minutes' | 'seconds' | 'meridies') =>
-		Array.from(element.shadowRoot!.querySelectorAll(`[id^="${type}-"]`));
+	const getAllPickerItems = (
+		type: 'hours' | 'minutes' | 'seconds' | 'meridies'
+	) => Array.from(element.shadowRoot!.querySelectorAll(`[id^="${type}-"]`));
 
 	const pressKey = (key: string, options: KeyboardEventInit = {}) => {
 		element.shadowRoot!.activeElement!.dispatchEvent(
@@ -78,7 +81,7 @@ describe('vwc-time-picker', () => {
 				get() {
 					const index = Array.from(this.parentElement!.children).indexOf(this);
 					return index * 30;
-				}
+				},
 			},
 			offsetHeight: {
 				get() {
@@ -87,7 +90,7 @@ describe('vwc-time-picker', () => {
 					} else {
 						return 30;
 					}
-				}
+				},
 			},
 		});
 	});
@@ -201,12 +204,15 @@ describe('vwc-time-picker', () => {
 		it.each([
 			[enUS, 'hh:mm aa'],
 			[enGB, 'hh:mm'],
-		])('should default to the default clock of the locale', async (locale, placeholder) => {
-			setLocale(locale);
-			await elementUpdated(element);
+		])(
+			'should default to the default clock of the locale',
+			async (locale, placeholder) => {
+				setLocale(locale);
+				await elementUpdated(element);
 
-			expect(textField.placeholder).toBe(placeholder);
-		});
+				expect(textField.placeholder).toBe(placeholder);
+			}
+		);
 
 		describe('12h', () => {
 			beforeEach(async () => {
@@ -228,20 +234,38 @@ describe('vwc-time-picker', () => {
 			it('should show the meridies picker in the popup', async () => {
 				await openPopup();
 
-				expect(element.shadowRoot?.querySelector('#meridies')).toBeInstanceOf(HTMLElement);
+				expect(element.shadowRoot?.querySelector('#meridies')).toBeInstanceOf(
+					HTMLElement
+				);
 			});
 
-			it.each(['AM', 'PM'])('should show the %s hours options from 12-11', async (meridiem) => {
-				await openPopup();
-
-				getPickerItem('meridies', meridiem).click();
-				await elementUpdated(element);
-				await openPopup();
-
-				expect(getAllPickerItems('hours').map((item) => item.innerHTML.trim())).toEqual([
-					'12', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11',
-				]);
-			});
+			it.each(['AM', 'PM'])(
+				'should show the %s hours options from 12-11',
+				async (meridiem) => {
+					await openPopup();
+
+					getPickerItem('meridies', meridiem).click();
+					await elementUpdated(element);
+					await openPopup();
+
+					expect(
+						getAllPickerItems('hours').map((item) => item.innerHTML.trim())
+					).toEqual([
+						'12',
+						'01',
+						'02',
+						'03',
+						'04',
+						'05',
+						'06',
+						'07',
+						'08',
+						'09',
+						'10',
+						'11',
+					]);
+				}
+			);
 		});
 
 		describe('24h', () => {
@@ -270,10 +294,33 @@ describe('vwc-time-picker', () => {
 			it('should show the hours options from 0-23', async () => {
 				await openPopup();
 
-				expect(getAllPickerItems('hours').map((item) => item.innerHTML.trim())).toEqual([
-					'00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10',
-					'11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
-					'21', '22', '23',
+				expect(
+					getAllPickerItems('hours').map((item) => item.innerHTML.trim())
+				).toEqual([
+					'00',
+					'01',
+					'02',
+					'03',
+					'04',
+					'05',
+					'06',
+					'07',
+					'08',
+					'09',
+					'10',
+					'11',
+					'12',
+					'13',
+					'14',
+					'15',
+					'16',
+					'17',
+					'18',
+					'19',
+					'20',
+					'21',
+					'22',
+					'23',
 				]);
 			});
 		});
@@ -435,12 +482,9 @@ describe('vwc-time-picker', () => {
 
 			await openPopup();
 
-			expect(getAllPickerItems('minutes').map((item) => item.innerHTML.trim())).toEqual([
-				'00',
-				'15',
-				'30',
-				'45',
-			]);
+			expect(
+				getAllPickerItems('minutes').map((item) => item.innerHTML.trim())
+			).toEqual(['00', '15', '30', '45']);
 		});
 
 		it('should ignore minutesStep of less than 1', async () => {
@@ -462,7 +506,9 @@ describe('vwc-time-picker', () => {
 
 			await openPopup();
 
-			expect(element.shadowRoot?.querySelector('#seconds')).toBeInstanceOf(HTMLElement);
+			expect(element.shadowRoot?.querySelector('#seconds')).toBeInstanceOf(
+				HTMLElement
+			);
 		});
 
 		it('should hide seconds that are not a multiple of secondsStep', async () => {
@@ -472,12 +518,9 @@ describe('vwc-time-picker', () => {
 
 			await openPopup();
 
-			expect(getAllPickerItems('seconds').map((item) => item.innerHTML.trim())).toEqual([
-				'00',
-				'15',
-				'30',
-				'45',
-			]);
+			expect(
+				getAllPickerItems('seconds').map((item) => item.innerHTML.trim())
+			).toEqual(['00', '15', '30', '45']);
 		});
 
 		it('should ignore secondsStep of less than 1', async () => {
@@ -525,7 +568,7 @@ describe('vwc-time-picker', () => {
 
 	describe.each([
 		['focus', 'focusin'],
-		['blur', 'focusout']
+		['blur', 'focusout'],
 	])('%s event', (eventName, sourceEventName) => {
 		it(`should emit a '${eventName}' event on '${sourceEventName}'`, async () => {
 			const spy = jest.fn();
@@ -543,7 +586,8 @@ describe('vwc-time-picker', () => {
 			{ clock: '12h', secondsStep: 1, placeholder: 'hh:mm:ss aa' },
 			{ clock: '24h', secondsStep: null, placeholder: 'hh:mm' },
 			{ clock: '24h', secondsStep: 1, placeholder: 'hh:mm:ss' },
-		] as const)('should have a placeholder of "$placeholder" when clock is $clock and secondsStep is $secondsStep',
+		] as const)(
+			'should have a placeholder of "$placeholder" when clock is $clock and secondsStep is $secondsStep',
 			async ({ clock, secondsStep, placeholder }) => {
 				element.clock = clock;
 				element.secondsStep = secondsStep;
@@ -551,7 +595,8 @@ describe('vwc-time-picker', () => {
 				await elementUpdated(element);
 
 				expect(textField.placeholder).toBe(placeholder);
-			});
+			}
+		);
 
 		it('should show an invalid date error when an invalid time is entered', async () => {
 			typeIntoTextField('invalid time');
@@ -592,7 +637,9 @@ describe('vwc-time-picker', () => {
 			element.value = '13:45:00';
 			await elementUpdated(element);
 
-			expect(clockButton.getAttribute('aria-label')).toBe('Change time, 01:45 PM');
+			expect(clockButton.getAttribute('aria-label')).toBe(
+				'Change time, 01:45 PM'
+			);
 		});
 
 		it('should open the popup when pressed', async () => {
@@ -621,7 +668,9 @@ describe('vwc-time-picker', () => {
 			element.value = '12:34:56';
 			await elementUpdated(element);
 
-			expect(() => { clockButton.click(); }).not.toThrow();
+			expect(() => {
+				clockButton.click();
+			}).not.toThrow();
 		});
 
 		it('should close the popup when pressed and it is already open', async () => {
@@ -724,14 +773,17 @@ describe('vwc-time-picker', () => {
 		it.each([
 			['00:00:00', 'AM'],
 			['12:00:00', 'PM'],
-		])('should set the time to %s when clicking on %s', async (expectedValue, meridiem) => {
-			element.clock = '12h';
-			await elementUpdated(element);
-			getPickerItem('meridies', meridiem).click();
-			await elementUpdated(element);
+		])(
+			'should set the time to %s when clicking on %s',
+			async (expectedValue, meridiem) => {
+				element.clock = '12h';
+				await elementUpdated(element);
+				getPickerItem('meridies', meridiem).click();
+				await elementUpdated(element);
 
-			expect(element.value).toBe(expectedValue);
-		});
+				expect(element.value).toBe(expectedValue);
+			}
+		);
 
 		it('should set a time when clicking on a meridiem', async () => {
 			element.clock = '12h';
@@ -765,12 +817,15 @@ describe('vwc-time-picker', () => {
 		});
 
 		describe('picker', () => {
-			it.each(['ArrowDown', 'ArrowUp'])('should select the first item when pressing %s while nothing is selected', async (key) => {
-				pressKey(key);
-				await elementUpdated(element);
+			it.each(['ArrowDown', 'ArrowUp'])(
+				'should select the first item when pressing %s while nothing is selected',
+				async (key) => {
+					pressKey(key);
+					await elementUpdated(element);
 
-				expect(element.value).toBe('00:00:00');
-			});
+					expect(element.value).toBe('00:00:00');
+				}
+			);
 
 			it('should select the next item when pressing ArrowDown', async () => {
 				element.value = '01:00:00';
@@ -877,7 +932,9 @@ describe('vwc-time-picker', () => {
 		beforeEach(async () => {
 			await openPopup();
 			const focusable: NodeListOf<HTMLElement> =
-				element.shadowRoot!.querySelectorAll('.dialog [tabindex="0"], .dialog vwc-button');
+				element.shadowRoot!.querySelectorAll(
+					'.dialog [tabindex="0"], .dialog vwc-button'
+				);
 			firstFocusable = focusable[0];
 			lastFocusable = focusable[focusable.length - 1];
 		});
diff --git a/libs/components/src/lib/time-picker/time-picker.template.ts b/libs/components/src/lib/time-picker/time-picker.template.ts
index e288eae754..c0a3667866 100644
--- a/libs/components/src/lib/time-picker/time-picker.template.ts
+++ b/libs/components/src/lib/time-picker/time-picker.template.ts
@@ -29,27 +29,35 @@ const renderPicker = (
 			tabindex="0"
 			aria-label="${getLabel}"
 			aria-activedescendant="${(x) =>
-		getSelected(x) ? `${id}-${getSelected(x)}` : undefined}"
-			@keydown="${(x, c) => x._onPickerKeyDown(id, getOptions(x), getSelected(x), setSelected(x), c.event as KeyboardEvent)}"
+				getSelected(x) ? `${id}-${getSelected(x)}` : undefined}"
+			@keydown="${(x, c) =>
+				x._onPickerKeyDown(
+					id,
+					getOptions(x),
+					getSelected(x),
+					setSelected(x),
+					c.event as KeyboardEvent
+				)}"
 		>
 			${repeat(
-		getOptions,
-		html<PickerOption>`
+				getOptions,
+				html<PickerOption>`
 					<li
 						id="${(x) => `${id}-${x.value}`}"
 						class="${(x, c) =>
-		classNames('item', [
-			'selected',
-			getSelected(c.parent) === x.value,
-		])}"
+							classNames('item', [
+								'selected',
+								getSelected(c.parent) === x.value,
+							])}"
 						role="option"
 						aria-selected="${(x, c) => getSelected(c.parent) === x.value}"
-						@click="${(x, c) => c.parent._onPickerItemClick(id, setSelected(c.parent), x.value)}"
+						@click="${(x, c) =>
+							c.parent._onPickerItemClick(id, setSelected(c.parent), x.value)}"
 					>
 						${(x) => x.label}
 					</li>
 				`
-	)}
+			)}
 		</ul>
 	`;
 };
@@ -98,38 +106,44 @@ export const TimePickerTemplate: (
 					placement="bottom-start"
 					class="popup">
 			<div class="dialog" role="dialog" ${ref(
-		'_dialogEl'
-	)} aria-modal="true" aria-label="${(x) =>
-	x.locale.timePicker.chooseTimeLabel}">
+				'_dialogEl'
+			)} aria-modal="true" aria-label="${(x) =>
+		x.locale.timePicker.chooseTimeLabel}">
 				<div class="time-pickers">
 					${renderPicker(
-		'hours',
-		(x) => x.locale.timePicker.hoursLabel,
-		(x) => x._selectedHour,
-		(x) => (v) => x._selectedHour = v,
-		(x) => x._hours
-	)}
+						'hours',
+						(x) => x.locale.timePicker.hoursLabel,
+						(x) => x._selectedHour,
+						(x) => (v) => (x._selectedHour = v),
+						(x) => x._hours
+					)}
 					${renderPicker(
-		'minutes',
-		(x) => x.locale.timePicker.minutesLabel,
-		(x) => x._selectedMinute,
-		(x) => (v) => x._selectedMinute = v,
-		(x) => x._minutes
-	)}
-					${when((x) => x._displaySeconds, renderPicker(
-		'seconds',
-		(x) => x.locale.timePicker.secondsLabel,
-		(x) => x._selectedSecond,
-		(x) => (v) => x._selectedSecond = v,
-		(x) => x._seconds
-	))}
-					${when((x) => x._use12hClock, renderPicker(
-		'meridies',
-		(x) => x.locale.timePicker.meridiesLabel,
-		(x) => x._selectedMeridiem,
-		(x) => (v) => x._selectedMeridiem = v,
-		(x) => x._meridies
-	))}
+						'minutes',
+						(x) => x.locale.timePicker.minutesLabel,
+						(x) => x._selectedMinute,
+						(x) => (v) => (x._selectedMinute = v),
+						(x) => x._minutes
+					)}
+					${when(
+						(x) => x._displaySeconds,
+						renderPicker(
+							'seconds',
+							(x) => x.locale.timePicker.secondsLabel,
+							(x) => x._selectedSecond,
+							(x) => (v) => (x._selectedSecond = v),
+							(x) => x._seconds
+						)
+					)}
+					${when(
+						(x) => x._use12hClock,
+						renderPicker(
+							'meridies',
+							(x) => x.locale.timePicker.meridiesLabel,
+							(x) => x._selectedMeridiem,
+							(x) => (v) => (x._selectedMeridiem = v),
+							(x) => x._meridies
+						)
+					)}
 				</div>
 				<div class="footer">
 					<${buttonTag}
diff --git a/libs/components/src/lib/time-picker/time-picker.ts b/libs/components/src/lib/time-picker/time-picker.ts
index f43ce66387..e653f08d6c 100644
--- a/libs/components/src/lib/time-picker/time-picker.ts
+++ b/libs/components/src/lib/time-picker/time-picker.ts
@@ -1,4 +1,10 @@
-import { attr, DOM, nullableNumberConverter, observable, type ValueConverter } from '@microsoft/fast-element';
+import {
+	attr,
+	DOM,
+	nullableNumberConverter,
+	observable,
+	type ValueConverter,
+} from '@microsoft/fast-element';
 import { applyMixins } from '@microsoft/fast-foundation';
 import {
 	type ErrorText,
@@ -7,15 +13,28 @@ import {
 	FormElementHelperText,
 	formElements,
 	Localized,
-	TrappedFocus
+	TrappedFocus,
 } from '../../shared/patterns';
 import type { TextField } from '../text-field/text-field';
 import type { Button } from '../button/button';
 import { FormAssociatedTimePicker } from './time-picker.form-associated';
-import { formatPresentationTime, parsePresentationTime } from './time/presentationTime';
-import { formatTimePart, isValidTimeStr, parseTimeStr, type TimeStr } from './time/time';
+import {
+	formatPresentationTime,
+	parsePresentationTime,
+} from './time/presentationTime';
+import {
+	formatTimePart,
+	isValidTimeStr,
+	parseTimeStr,
+	type TimeStr,
+} from './time/time';
 import type { PickerOption } from './time/picker';
-import { getHoursOptions, getMeridiesOptions, getMinutesOptions, getSecondsOptions } from './time/picker';
+import {
+	getHoursOptions,
+	getMeridiesOptions,
+	getMinutesOptions,
+	getSecondsOptions,
+} from './time/picker';
 
 /// Converter ensures that the value is always a valid time string or empty string
 const ValidTimeFilter: ValueConverter = {
@@ -48,7 +67,7 @@ export class TimePicker extends FormAssociatedTimePicker {
 	 * HTML Attribute: readonly
 	 */
 	@attr({ attribute: 'readonly', mode: 'boolean' })
-		readOnly: boolean = false;
+	readOnly: boolean = false;
 
 	/**
 	 * @internal
@@ -66,7 +85,8 @@ export class TimePicker extends FormAssociatedTimePicker {
 	 * @remarks
 	 * HTML Attribute: minutes-step
 	 */
-	@attr({ attribute: 'minutes-step', converter: nullableNumberConverter }) minutesStep: number | null = null;
+	@attr({ attribute: 'minutes-step', converter: nullableNumberConverter })
+	minutesStep: number | null = null;
 
 	/**
 	 * Distance between presented seconds options. If null, seconds are not presented.
@@ -74,7 +94,8 @@ export class TimePicker extends FormAssociatedTimePicker {
 	 * @remarks
 	 * HTML Attribute: seconds-step
 	 */
-	@attr({ attribute: 'seconds-step', converter: nullableNumberConverter }) secondsStep: number | null = null;
+	@attr({ attribute: 'seconds-step', converter: nullableNumberConverter })
+	secondsStep: number | null = null;
 
 	/**
 	 * Forces the time-picker to use a 12h or 24h clock.
@@ -92,7 +113,7 @@ export class TimePicker extends FormAssociatedTimePicker {
 	 * HTML Attribute: min
 	 */
 	@attr({ converter: ValidTimeFilter })
-		min: string;
+	min: string;
 
 	/**
 	 * @internal
@@ -112,7 +133,7 @@ export class TimePicker extends FormAssociatedTimePicker {
 	 * HTML Attribute: max
 	 */
 	@attr({ converter: ValidTimeFilter })
-		max: string;
+	max: string;
 
 	/**
 	 * @internal
@@ -151,7 +172,9 @@ export class TimePicker extends FormAssociatedTimePicker {
 	 * @internal
 	 */
 	get _use12hClock() {
-		return this.clock ? this.clock === '12h' : this.locale.timePicker.defaultTo12HourClock;
+		return this.clock
+			? this.clock === '12h'
+			: this.locale.timePicker.defaultTo12HourClock;
 	}
 
 	#getFocusableEls = () =>
@@ -235,7 +258,7 @@ export class TimePicker extends FormAssociatedTimePicker {
 
 		const path = event.composedPath();
 		const elementsToIgnoreClicksOn = [this._dialogEl, this._clockButtonEl];
-		if (!elementsToIgnoreClicksOn.some(element => path.includes(element))) {
+		if (!elementsToIgnoreClicksOn.some((element) => path.includes(element))) {
 			this._closePopup(false);
 		}
 	};
@@ -338,7 +361,13 @@ export class TimePicker extends FormAssociatedTimePicker {
 	 */
 	get _clockButtonLabel() {
 		if (this.value) {
-			return this.locale.timePicker.changeTimeLabel(formatPresentationTime(this.value, this._displaySeconds, this._use12hClock));
+			return this.locale.timePicker.changeTimeLabel(
+				formatPresentationTime(
+					this.value,
+					this._displaySeconds,
+					this._use12hClock
+				)
+			);
 		}
 		return this.locale.timePicker.chooseTimeLabel;
 	}
@@ -377,7 +406,13 @@ export class TimePicker extends FormAssociatedTimePicker {
 	 * @internal
 	 */
 	get _hours(): PickerOption[] {
-		return getHoursOptions(this.min, this.max, this._use12hClock ? this._selectedMeridiem ?? this._meridies[0].value : undefined);
+		return getHoursOptions(
+			this.min,
+			this.max,
+			this._use12hClock
+				? this._selectedMeridiem ?? this._meridies[0].value
+				: undefined
+		);
 	}
 
 	/**
@@ -392,7 +427,7 @@ export class TimePicker extends FormAssociatedTimePicker {
 	 */
 	set _selectedHour(value: string) {
 		if (this.value) {
-			const {minuteStr, secondStr} = parseTimeStr(this.value);
+			const { minuteStr, secondStr } = parseTimeStr(this.value);
 			this.value = `${value}:${minuteStr}:${secondStr}`;
 		} else {
 			this.value = `${value}:00:00`;
@@ -418,7 +453,7 @@ export class TimePicker extends FormAssociatedTimePicker {
 	 */
 	set _selectedMinute(value: string) {
 		if (this.value) {
-			const {hourStr, secondStr} = parseTimeStr(this.value);
+			const { hourStr, secondStr } = parseTimeStr(this.value);
 			this.value = `${hourStr}:${value}:${secondStr}`;
 		} else {
 			this.value = `00:${value}:00`;
@@ -444,7 +479,7 @@ export class TimePicker extends FormAssociatedTimePicker {
 	 */
 	set _selectedSecond(value: string) {
 		if (this.value) {
-			const {hourStr, minuteStr} = parseTimeStr(this.value);
+			const { hourStr, minuteStr } = parseTimeStr(this.value);
 			this.value = `${hourStr}:${minuteStr}:${value}`;
 		} else {
 			this.value = `00:00:${value}`;
@@ -470,7 +505,7 @@ export class TimePicker extends FormAssociatedTimePicker {
 	 */
 	set _selectedMeridiem(value: string) {
 		if (this.value) {
-			const {hours, minuteStr, secondStr} = parseTimeStr(this.value);
+			const { hours, minuteStr, secondStr } = parseTimeStr(this.value);
 			let adjustedHours = hours;
 			if (value === 'AM' && hours >= 12) {
 				adjustedHours -= 12;
@@ -499,7 +534,7 @@ export class TimePicker extends FormAssociatedTimePicker {
 	) {
 		const offset = {
 			ArrowUp: -1,
-			ArrowDown: 1
+			ArrowDown: 1,
 		}[event.key];
 
 		if (offset) {
@@ -507,7 +542,7 @@ export class TimePicker extends FormAssociatedTimePicker {
 			const index = options.findIndex((h) => h.value === selectedValue);
 			const newRawIndex = index === -1 ? 0 : index + offset;
 			const newIndex = (newRawIndex + options.length) % options.length;
-			const newValue= options[newIndex].value;
+			const newValue = options[newIndex].value;
 			setSelectedValue(newValue);
 			this.#scrollToItem(picker, newValue, 'nearest');
 			this.#updateValueDueToUserInteraction(this.value);
@@ -516,8 +551,14 @@ export class TimePicker extends FormAssociatedTimePicker {
 		return true;
 	}
 
-	#scrollToItem(picker: string, selectedValue: string, position: 'nearest' | 'start') {
-		const element = this.shadowRoot!.querySelector(`#${picker}-${selectedValue}`) as HTMLElement | null;
+	#scrollToItem(
+		picker: string,
+		selectedValue: string,
+		position: 'nearest' | 'start'
+	) {
+		const element = this.shadowRoot!.querySelector(
+			`#${picker}-${selectedValue}`
+		) as HTMLElement | null;
 		if (!element) {
 			return;
 		}
@@ -532,8 +573,12 @@ export class TimePicker extends FormAssociatedTimePicker {
 				if (element.offsetTop < parent.scrollTop) {
 					parent.scrollTop = element.offsetTop;
 				}
-				if (element.offsetTop + element.offsetHeight > parent.scrollTop + parent.offsetHeight) {
-					parent.scrollTop = element.offsetTop + element.offsetHeight - parent.offsetHeight;
+				if (
+					element.offsetTop + element.offsetHeight >
+					parent.scrollTop + parent.offsetHeight
+				) {
+					parent.scrollTop =
+						element.offsetTop + element.offsetHeight - parent.offsetHeight;
 				}
 				break;
 		}
@@ -542,12 +587,18 @@ export class TimePicker extends FormAssociatedTimePicker {
 	/**
 	 * @internal
 	 */
-	_onPickerItemClick(picker: string, setSelectedValue: (value: string) => void, value: string) {
+	_onPickerItemClick(
+		picker: string,
+		setSelectedValue: (value: string) => void,
+		value: string
+	) {
 		setSelectedValue(value);
 		this.#scrollToItem(picker, value, 'start');
 		this.#updateValueDueToUserInteraction(this.value);
 
-		const nextPickerEl = this.shadowRoot!.querySelector(`#${picker} + .picker`) as HTMLElement | null;
+		const nextPickerEl = this.shadowRoot!.querySelector(
+			`#${picker} + .picker`
+		) as HTMLElement | null;
 		if (nextPickerEl) {
 			nextPickerEl.focus();
 		} else {
@@ -618,10 +669,9 @@ export class TimePicker extends FormAssociatedTimePicker {
 }
 
 export interface TimePicker
-	extends
-	ErrorText,
-	FormElement,
-	FormElementHelperText,
-	Localized,
-	TrappedFocus {}
+	extends ErrorText,
+		FormElement,
+		FormElementHelperText,
+		Localized,
+		TrappedFocus {}
 applyMixins(TimePicker, Localized, FormElementHelperText, TrappedFocus);
diff --git a/libs/components/src/lib/time-picker/time/picker.spec.ts b/libs/components/src/lib/time-picker/time/picker.spec.ts
index 1cc35bc54b..544b6585f8 100644
--- a/libs/components/src/lib/time-picker/time/picker.spec.ts
+++ b/libs/components/src/lib/time-picker/time/picker.spec.ts
@@ -1,32 +1,37 @@
-import { getHoursOptions, getMeridiesOptions, getMinutesOptions, getSecondsOptions } from './picker.ts';
+import {
+	getHoursOptions,
+	getMeridiesOptions,
+	getMinutesOptions,
+	getSecondsOptions,
+} from './picker.ts';
 
 describe('getHoursOptions', () => {
 	it('should return 12-hour clock options for AM', () => {
 		const result = getHoursOptions(undefined, undefined, 'AM');
 		expect(result.length).toBe(12);
-		expect(result[0]).toEqual({value: '00', label: '12'});
-		expect(result[11]).toEqual({value: '11', label: '11'});
+		expect(result[0]).toEqual({ value: '00', label: '12' });
+		expect(result[11]).toEqual({ value: '11', label: '11' });
 	});
 
 	it('should return 12-hour clock options for PM', () => {
 		const result = getHoursOptions(undefined, undefined, 'PM');
 		expect(result.length).toBe(12);
-		expect(result[0]).toEqual({value: '12', label: '12'});
-		expect(result[11]).toEqual({value: '23', label: '11'});
+		expect(result[0]).toEqual({ value: '12', label: '12' });
+		expect(result[11]).toEqual({ value: '23', label: '11' });
 	});
 
 	it('should return 24-hour clock options', () => {
 		const result = getHoursOptions(undefined, undefined);
 		expect(result.length).toBe(24);
-		expect(result[0]).toEqual({value: '00', label: '00'});
-		expect(result[23]).toEqual({value: '23', label: '23'});
+		expect(result[0]).toEqual({ value: '00', label: '00' });
+		expect(result[23]).toEqual({ value: '23', label: '23' });
 	});
 
 	it('should limit hours by min and max', () => {
 		const result = getHoursOptions('11:00:00', '13:00:00');
 		expect(result.length).toBe(3);
-		expect(result[0]).toEqual({value: '11', label: '11'});
-		expect(result[2]).toEqual({value: '13', label: '13'});
+		expect(result[0]).toEqual({ value: '11', label: '11' });
+		expect(result[2]).toEqual({ value: '13', label: '13' });
 	});
 });
 
@@ -34,22 +39,22 @@ describe('getMinutesOptions', () => {
 	it.each([null, 1, 0])('should return 60 options with step %s', () => {
 		const result = getMinutesOptions(null);
 		expect(result.length).toBe(60);
-		expect(result[0]).toEqual({value: '00', label: '00'});
-		expect(result[59]).toEqual({value: '59', label: '59'});
+		expect(result[0]).toEqual({ value: '00', label: '00' });
+		expect(result[59]).toEqual({ value: '59', label: '59' });
 	});
 
 	it('should limit minutes by min and max', () => {
 		const result = getMinutesOptions(1, '12:34:00', '12:30:00', '12:40:00');
 		expect(result.length).toBe(11);
-		expect(result[0]).toEqual({value: '30', label: '30'});
-		expect(result[10]).toEqual({value: '40', label: '40'});
+		expect(result[0]).toEqual({ value: '30', label: '30' });
+		expect(result[10]).toEqual({ value: '40', label: '40' });
 	});
 
 	it('should generate options based on step', () => {
 		const result = getMinutesOptions(5);
 		expect(result.length).toBe(12);
-		expect(result[0]).toEqual({value: '00', label: '00'});
-		expect(result[11]).toEqual({value: '55', label: '55'});
+		expect(result[0]).toEqual({ value: '00', label: '00' });
+		expect(result[11]).toEqual({ value: '55', label: '55' });
 	});
 });
 
@@ -57,22 +62,22 @@ describe('getSecondsOptions', () => {
 	it.each([0, 1])('should return 60 options with step %s', (step) => {
 		const result = getSecondsOptions(step);
 		expect(result.length).toBe(60);
-		expect(result[0]).toEqual({value: '00', label: '00'});
-		expect(result[59]).toEqual({value: '59', label: '59'});
+		expect(result[0]).toEqual({ value: '00', label: '00' });
+		expect(result[59]).toEqual({ value: '59', label: '59' });
 	});
 
 	it('should limit seconds by min and max', () => {
 		const result = getSecondsOptions(1, '12:34:56', '12:34:50', '12:34:59');
 		expect(result.length).toBe(10);
-		expect(result[0]).toEqual({value: '50', label: '50'});
-		expect(result[9]).toEqual({value: '59', label: '59'});
+		expect(result[0]).toEqual({ value: '50', label: '50' });
+		expect(result[9]).toEqual({ value: '59', label: '59' });
 	});
 
 	it('should generate options based on step', () => {
 		const result = getSecondsOptions(5);
 		expect(result.length).toBe(12);
-		expect(result[0]).toEqual({value: '00', label: '00'});
-		expect(result[11]).toEqual({value: '55', label: '55'});
+		expect(result[0]).toEqual({ value: '00', label: '00' });
+		expect(result[11]).toEqual({ value: '55', label: '55' });
 	});
 });
 
@@ -80,19 +85,19 @@ describe('getMeridiesOptions', () => {
 	it('should return AM and PM options', () => {
 		const result = getMeridiesOptions();
 		expect(result.length).toBe(2);
-		expect(result[0]).toEqual({value: 'AM', label: 'AM'});
-		expect(result[1]).toEqual({value: 'PM', label: 'PM'});
+		expect(result[0]).toEqual({ value: 'AM', label: 'AM' });
+		expect(result[1]).toEqual({ value: 'PM', label: 'PM' });
 	});
 
 	it('should hide AM if min is PM', () => {
 		const result = getMeridiesOptions('12:00:00', '13:00:00');
 		expect(result.length).toBe(1);
-		expect(result[0]).toEqual({value: 'PM', label: 'PM'});
+		expect(result[0]).toEqual({ value: 'PM', label: 'PM' });
 	});
 
 	it('should hide PM if max is AM', () => {
 		const result = getMeridiesOptions('10:00:00', '11:00:00');
 		expect(result.length).toBe(1);
-		expect(result[0]).toEqual({value: 'AM', label: 'AM'});
+		expect(result[0]).toEqual({ value: 'AM', label: 'AM' });
 	});
 });
diff --git a/libs/components/src/lib/time-picker/time/picker.ts b/libs/components/src/lib/time-picker/time/picker.ts
index 89d66e2ccb..fa0194f98e 100644
--- a/libs/components/src/lib/time-picker/time/picker.ts
+++ b/libs/components/src/lib/time-picker/time/picker.ts
@@ -1,4 +1,9 @@
-import { formatTimePart, hoursAs12hClock, parseTimeStr, type TimeStr } from './time';
+import {
+	formatTimePart,
+	hoursAs12hClock,
+	parseTimeStr,
+	type TimeStr,
+} from './time';
 
 export interface PickerOption {
 	value: string; // e.g. '13'
@@ -6,10 +11,13 @@ export interface PickerOption {
 }
 
 const fallsIntoMeridiem = (meridiem: string, hour: number) =>
-	(meridiem === 'AM' && hour < 12) ||
-		(meridiem === 'PM' && hour >= 12);
+	(meridiem === 'AM' && hour < 12) || (meridiem === 'PM' && hour >= 12);
 
-export const getHoursOptions = (min?: TimeStr, max?: TimeStr, forMeridiem?: string): PickerOption[] => {
+export const getHoursOptions = (
+	min?: TimeStr,
+	max?: TimeStr,
+	forMeridiem?: string
+): PickerOption[] => {
 	const result = [];
 	const minHour = min ? parseTimeStr(min).hours : 0;
 	const maxHour = max ? parseTimeStr(max).hours : 23;
@@ -20,25 +28,30 @@ export const getHoursOptions = (min?: TimeStr, max?: TimeStr, forMeridiem?: stri
 
 		result.push({
 			value: formatTimePart(i),
-			label: formatTimePart(forMeridiem ? hoursAs12hClock(i) : i)
+			label: formatTimePart(forMeridiem ? hoursAs12hClock(i) : i),
 		});
 	}
 
 	return result;
 };
 
-export const getMinutesOptions = (step: number | null, value?: TimeStr, min?: TimeStr, max?: TimeStr): PickerOption[] => {
+export const getMinutesOptions = (
+	step: number | null,
+	value?: TimeStr,
+	min?: TimeStr,
+	max?: TimeStr
+): PickerOption[] => {
 	const result = [];
 	let minMinute = 0;
 	let maxMinute = 59;
 	if (min) {
-		const {hourStr: minHourStr, minutes: minMinutes} = parseTimeStr(min);
+		const { hourStr: minHourStr, minutes: minMinutes } = parseTimeStr(min);
 		if (value && parseTimeStr(value).hourStr === minHourStr) {
 			minMinute = minMinutes;
 		}
 	}
 	if (max) {
-		const {hourStr: maxHourStr, minutes: maxMinutes} = parseTimeStr(max);
+		const { hourStr: maxHourStr, minutes: maxMinutes } = parseTimeStr(max);
 		if (value && parseTimeStr(value).hourStr === maxHourStr) {
 			maxMinute = maxMinutes;
 		}
@@ -47,25 +60,38 @@ export const getMinutesOptions = (step: number | null, value?: TimeStr, min?: Ti
 		const minutes = formatTimePart(i);
 		result.push({
 			value: minutes,
-			label: minutes
+			label: minutes,
 		});
 	}
 	return result;
 };
 
-export const getSecondsOptions = (step: number, value?: TimeStr, min?: TimeStr, max?: TimeStr): PickerOption[] => {
+export const getSecondsOptions = (
+	step: number,
+	value?: TimeStr,
+	min?: TimeStr,
+	max?: TimeStr
+): PickerOption[] => {
 	const result = [];
 	let minSecond = 0;
 	let maxSecond = 59;
 	if (min) {
 		const minTime = parseTimeStr(min);
-		if (value && (parseTimeStr(value).hourStr === minTime.hourStr && parseTimeStr(value).minuteStr) === minTime.minuteStr) {
+		if (
+			value &&
+			(parseTimeStr(value).hourStr === minTime.hourStr &&
+				parseTimeStr(value).minuteStr) === minTime.minuteStr
+		) {
 			minSecond = minTime.seconds;
 		}
 	}
 	if (max) {
 		const maxTime = parseTimeStr(max);
-		if (value && (parseTimeStr(value).hourStr === maxTime.hourStr && parseTimeStr(value).minuteStr) === maxTime.minuteStr) {
+		if (
+			value &&
+			(parseTimeStr(value).hourStr === maxTime.hourStr &&
+				parseTimeStr(value).minuteStr) === maxTime.minuteStr
+		) {
 			maxSecond = maxTime.seconds;
 		}
 	}
@@ -73,26 +99,29 @@ export const getSecondsOptions = (step: number, value?: TimeStr, min?: TimeStr,
 		const seconds = formatTimePart(i);
 		result.push({
 			value: seconds,
-			label: seconds
+			label: seconds,
 		});
 	}
 	return result;
 };
 
-export const getMeridiesOptions = (min?: TimeStr, max?: TimeStr): PickerOption[] => {
+export const getMeridiesOptions = (
+	min?: TimeStr,
+	max?: TimeStr
+): PickerOption[] => {
 	const result = [];
 	const hideAM = min ? parseTimeStr(min).meridiem === 'PM' : false;
 	if (!hideAM) {
 		result.push({
 			value: 'AM',
-			label: 'AM'
+			label: 'AM',
 		});
 	}
 	const hidePM = max ? parseTimeStr(max).meridiem === 'AM' : false;
 	if (!hidePM) {
 		result.push({
 			value: 'PM',
-			label: 'PM'
+			label: 'PM',
 		});
 	}
 	return result;
diff --git a/libs/components/src/lib/time-picker/time/presentationTime.spec.ts b/libs/components/src/lib/time-picker/time/presentationTime.spec.ts
index e55b7860da..ca187f2583 100644
--- a/libs/components/src/lib/time-picker/time/presentationTime.spec.ts
+++ b/libs/components/src/lib/time-picker/time/presentationTime.spec.ts
@@ -1,9 +1,14 @@
-import { formatPresentationTime, parsePresentationTime } from './presentationTime.ts';
+import {
+	formatPresentationTime,
+	parsePresentationTime,
+} from './presentationTime.ts';
 
 describe('formatPresentationTime', () => {
 	it('should format time with seconds', () => {
 		expect(formatPresentationTime('12:34:56', true, false)).toEqual('12:34:56');
-		expect(formatPresentationTime('12:34:56', true, true)).toEqual('12:34:56 PM');
+		expect(formatPresentationTime('12:34:56', true, true)).toEqual(
+			'12:34:56 PM'
+		);
 	});
 
 	it('should format time without seconds', () => {
@@ -12,63 +17,119 @@ describe('formatPresentationTime', () => {
 	});
 
 	it('should format time with 12-hour clock', () => {
-		expect(formatPresentationTime('12:34:56', true, true)).toEqual('12:34:56 PM');
-		expect(formatPresentationTime('00:34:56', true, true)).toEqual('12:34:56 AM');
-		expect(formatPresentationTime('23:34:56', true, true)).toEqual('11:34:56 PM');
+		expect(formatPresentationTime('12:34:56', true, true)).toEqual(
+			'12:34:56 PM'
+		);
+		expect(formatPresentationTime('00:34:56', true, true)).toEqual(
+			'12:34:56 AM'
+		);
+		expect(formatPresentationTime('23:34:56', true, true)).toEqual(
+			'11:34:56 PM'
+		);
 	});
 });
 
 describe('parsePresentationTime', () => {
 	describe.each([
-		{name: '12 hour clock', use12HourClock: true},
-		{name: '24 hour clock', use12HourClock: false},
-	])('$name', ({use12HourClock}) => {
+		{ name: '12 hour clock', use12HourClock: true },
+		{ name: '24 hour clock', use12HourClock: false },
+	])('$name', ({ use12HourClock }) => {
 		it('should parse time with seconds', () => {
-			expect(parsePresentationTime('13:34:56', use12HourClock)).toEqual('13:34:56');
-			expect(parsePresentationTime('12:34:56 PM', use12HourClock)).toEqual('12:34:56');
-			expect(parsePresentationTime('12:34:56 AM', use12HourClock)).toEqual('00:34:56');
-			expect(parsePresentationTime('11:34:56 PM', use12HourClock)).toEqual('23:34:56');
+			expect(parsePresentationTime('13:34:56', use12HourClock)).toEqual(
+				'13:34:56'
+			);
+			expect(parsePresentationTime('12:34:56 PM', use12HourClock)).toEqual(
+				'12:34:56'
+			);
+			expect(parsePresentationTime('12:34:56 AM', use12HourClock)).toEqual(
+				'00:34:56'
+			);
+			expect(parsePresentationTime('11:34:56 PM', use12HourClock)).toEqual(
+				'23:34:56'
+			);
 		});
 
 		it('should parse time without seconds', () => {
-			expect(parsePresentationTime('13:34', use12HourClock)).toEqual('13:34:00');
-			expect(parsePresentationTime('12:34 PM', use12HourClock)).toEqual('12:34:00');
-			expect(parsePresentationTime('12:34 AM', use12HourClock)).toEqual('00:34:00');
-			expect(parsePresentationTime('11:34 PM', use12HourClock)).toEqual('23:34:00');
+			expect(parsePresentationTime('13:34', use12HourClock)).toEqual(
+				'13:34:00'
+			);
+			expect(parsePresentationTime('12:34 PM', use12HourClock)).toEqual(
+				'12:34:00'
+			);
+			expect(parsePresentationTime('12:34 AM', use12HourClock)).toEqual(
+				'00:34:00'
+			);
+			expect(parsePresentationTime('11:34 PM', use12HourClock)).toEqual(
+				'23:34:00'
+			);
 		});
 
 		it('should be lenient in accepting user input', () => {
-			expect(parsePresentationTime('1:1:1', use12HourClock)).toEqual('01:01:01');
-			expect(parsePresentationTime('2:00 pm', use12HourClock)).toEqual('14:00:00');
-			expect(parsePresentationTime('12:00 am', use12HourClock)).toEqual('00:00:00');
+			expect(parsePresentationTime('1:1:1', use12HourClock)).toEqual(
+				'01:01:01'
+			);
+			expect(parsePresentationTime('2:00 pm', use12HourClock)).toEqual(
+				'14:00:00'
+			);
+			expect(parsePresentationTime('12:00 am', use12HourClock)).toEqual(
+				'00:00:00'
+			);
 			expect(parsePresentationTime('1', use12HourClock)).toEqual('01:00:00');
 			expect(parsePresentationTime('1 pm', use12HourClock)).toEqual('13:00:00');
 			expect(parsePresentationTime('2pm', use12HourClock)).toEqual('14:00:00');
-			expect(parsePresentationTime('2:00pm', use12HourClock)).toEqual('14:00:00');
-			expect(parsePresentationTime('2:00:00pm', use12HourClock)).toEqual('14:00:00');
-			expect(parsePresentationTime(' 13:34 ', use12HourClock)).toEqual('13:34:00');
-			expect(parsePresentationTime(' 13:34:56 ', use12HourClock)).toEqual('13:34:56');
-			expect(parsePresentationTime(' 12:34:56  pm ', use12HourClock)).toEqual('12:34:56');
+			expect(parsePresentationTime('2:00pm', use12HourClock)).toEqual(
+				'14:00:00'
+			);
+			expect(parsePresentationTime('2:00:00pm', use12HourClock)).toEqual(
+				'14:00:00'
+			);
+			expect(parsePresentationTime(' 13:34 ', use12HourClock)).toEqual(
+				'13:34:00'
+			);
+			expect(parsePresentationTime(' 13:34:56 ', use12HourClock)).toEqual(
+				'13:34:56'
+			);
+			expect(parsePresentationTime(' 12:34:56  pm ', use12HourClock)).toEqual(
+				'12:34:56'
+			);
 			expect(parsePresentationTime('8.30', use12HourClock)).toEqual('08:30:00');
-			expect(parsePresentationTime('8.30 PM', use12HourClock)).toEqual('20:30:00');
+			expect(parsePresentationTime('8.30 PM', use12HourClock)).toEqual(
+				'20:30:00'
+			);
 			expect(parsePresentationTime('8 30', use12HourClock)).toEqual('08:30:00');
-			expect(parsePresentationTime('8 30 PM', use12HourClock)).toEqual('20:30:00');
-			expect(parsePresentationTime('padding08:30padding', use12HourClock)).toEqual('08:30:00');
+			expect(parsePresentationTime('8 30 PM', use12HourClock)).toEqual(
+				'20:30:00'
+			);
+			expect(
+				parsePresentationTime('padding08:30padding', use12HourClock)
+			).toEqual('08:30:00');
 		});
 
 		it('should throw an error if the input cannot be parsed', () => {
 			expect(() => parsePresentationTime('', use12HourClock)).toThrow();
-			expect(() => parsePresentationTime('12:34:56:78', use12HourClock)).toThrow();
-			expect(() => parsePresentationTime('12:34:56:78', use12HourClock)).toThrow();
+			expect(() =>
+				parsePresentationTime('12:34:56:78', use12HourClock)
+			).toThrow();
+			expect(() =>
+				parsePresentationTime('12:34:56:78', use12HourClock)
+			).toThrow();
 			expect(() => parsePresentationTime('24:00', use12HourClock)).toThrow();
 			expect(() => parsePresentationTime('24:01', use12HourClock)).toThrow();
 			expect(() => parsePresentationTime('23:60', use12HourClock)).toThrow();
 			expect(() => parsePresentationTime('23:59:60', use12HourClock)).toThrow();
 			expect(() => parsePresentationTime('x', use12HourClock)).toThrow();
-			expect(() => parsePresentationTime('00:00:00 pm', use12HourClock)).toThrow();
-			expect(() => parsePresentationTime('00:00:00 am', use12HourClock)).toThrow();
-			expect(() => parsePresentationTime('13:00:00 pm', use12HourClock)).toThrow();
-			expect(() => parsePresentationTime('13:00:00 am', use12HourClock)).toThrow();
+			expect(() =>
+				parsePresentationTime('00:00:00 pm', use12HourClock)
+			).toThrow();
+			expect(() =>
+				parsePresentationTime('00:00:00 am', use12HourClock)
+			).toThrow();
+			expect(() =>
+				parsePresentationTime('13:00:00 pm', use12HourClock)
+			).toThrow();
+			expect(() =>
+				parsePresentationTime('13:00:00 am', use12HourClock)
+			).toThrow();
 		});
 	});
 
diff --git a/libs/components/src/lib/time-picker/time/presentationTime.ts b/libs/components/src/lib/time-picker/time/presentationTime.ts
index 5aaeb4abd2..aedc32b4e3 100644
--- a/libs/components/src/lib/time-picker/time/presentationTime.ts
+++ b/libs/components/src/lib/time-picker/time/presentationTime.ts
@@ -6,10 +6,16 @@ import { formatTimePart, hoursAs12hClock, parseTimeStr } from './time';
  */
 type PresentationTime = string;
 
-export const formatPresentationTime = (timeStr: TimeStr, includeSeconds: boolean, use12HourClock: boolean): PresentationTime => {
+export const formatPresentationTime = (
+	timeStr: TimeStr,
+	includeSeconds: boolean,
+	use12HourClock: boolean
+): PresentationTime => {
 	const time = parseTimeStr(timeStr);
 
-	const hoursStr = formatTimePart(use12HourClock ? hoursAs12hClock(time.hours) : time.hours);
+	const hoursStr = formatTimePart(
+		use12HourClock ? hoursAs12hClock(time.hours) : time.hours
+	);
 
 	let result = `${hoursStr}:${time.minuteStr}`;
 	if (includeSeconds) {
@@ -24,18 +30,21 @@ export const formatPresentationTime = (timeStr: TimeStr, includeSeconds: boolean
 
 const isDigit = (char: string): boolean => char >= '0' && char <= '9';
 
-export const parsePresentationTime = (input: string, use12HourClock: boolean): TimeStr => {
+export const parsePresentationTime = (
+	input: string,
+	use12HourClock: boolean
+): TimeStr => {
 	const cleanedInput = input.toLowerCase();
 
 	const numerals: number[] = [];
 	let meridiem: 'AM' | 'PM' | undefined;
 	for (let i = 0; i < cleanedInput.length; i++) {
 		const char = cleanedInput[i];
-		if ((char === 'a') && cleanedInput[i + 1] === 'm') {
+		if (char === 'a' && cleanedInput[i + 1] === 'm') {
 			i++;
 			meridiem = 'AM';
 		}
-		if ((char === 'p') && cleanedInput[i + 1] === 'm') {
+		if (char === 'p' && cleanedInput[i + 1] === 'm') {
 			i++;
 			meridiem = 'PM';
 		}
diff --git a/libs/components/src/lib/time-picker/time/time.spec.ts b/libs/components/src/lib/time-picker/time/time.spec.ts
index 731bb9c446..86dc97c7af 100644
--- a/libs/components/src/lib/time-picker/time/time.spec.ts
+++ b/libs/components/src/lib/time-picker/time/time.spec.ts
@@ -1,4 +1,9 @@
-import { formatTimePart, hoursAs12hClock, isValidTimeStr, parseTimeStr } from './time.ts';
+import {
+	formatTimePart,
+	hoursAs12hClock,
+	isValidTimeStr,
+	parseTimeStr,
+} from './time.ts';
 
 describe('isValidTimeStr', () => {
 	it('should return true for a valid time string', () => {
diff --git a/libs/components/src/lib/time-picker/time/time.ts b/libs/components/src/lib/time-picker/time/time.ts
index 31784ed2b8..186d6293bf 100644
--- a/libs/components/src/lib/time-picker/time/time.ts
+++ b/libs/components/src/lib/time-picker/time/time.ts
@@ -42,7 +42,8 @@ interface ParsedTimeStr {
 
 const parseTimePart = (partStr: string): number => Number.parseInt(partStr, 10);
 
-export const formatTimePart = (part: number): string => part.toString().padStart(2, '0');
+export const formatTimePart = (part: number): string =>
+	part.toString().padStart(2, '0');
 
 export const parseTimeStr = (timeStr: TimeStr): ParsedTimeStr => {
 	const [hoursStr, minutesStr, secondsStr] = timeStr.split(':');
diff --git a/libs/components/src/lib/time-picker/ui.test.ts b/libs/components/src/lib/time-picker/ui.test.ts
index e344f6e780..387a91f9f4 100644
--- a/libs/components/src/lib/time-picker/ui.test.ts
+++ b/libs/components/src/lib/time-picker/ui.test.ts
@@ -65,9 +65,11 @@ test('should show the component', async ({ page }: { page: Page }) => {
 
 	// Prevent opening the time pickers from closing each other
 	await page.evaluate(() => {
-		document.querySelectorAll('vwc-time-picker').forEach((timePicker) =>
-			timePicker.addEventListener('click', (e) => e.stopPropagation())
-		);
+		document
+			.querySelectorAll('vwc-time-picker')
+			.forEach((timePicker) =>
+				timePicker.addEventListener('click', (e) => e.stopPropagation())
+			);
 	});
 
 	await page.locator('#time-picker #clock-button').click();
@@ -120,13 +122,17 @@ test.describe('constraints validation', async () => {
 		});
 	});
 
-	test('should have a validation error when the time violates required constraint', async ({ page }: { page: Page }) => {
+	test('should have a validation error when the time violates required constraint', async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-time-picker name="time" required></vwc-time-picker>
 				<button type="submit">Submit</button>
-			</form>`
+			</form>`,
 		});
 
 		await page.getByRole('button', { name: 'Submit' }).click();
@@ -134,13 +140,17 @@ test.describe('constraints validation', async () => {
 		await expect(page.locator('vwc-time-picker .error-message')).toBeVisible();
 	});
 
-	test('should have a validation error when the time violates min constraint', async ({ page }: { page: Page }) => {
+	test('should have a validation error when the time violates min constraint', async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-time-picker name="time" min="08:00:00" value="06:00:00"></vwc-time-picker>
 				<button type="submit">Submit</button>
-			</form>`
+			</form>`,
 		});
 
 		await page.getByRole('button', { name: 'Submit' }).click();
@@ -148,13 +158,17 @@ test.describe('constraints validation', async () => {
 		await expect(page.locator('vwc-time-picker .error-message')).toBeVisible();
 	});
 
-	test('should have a validation error when the time violates max constraint', async ({ page }: { page: Page }) => {
+	test('should have a validation error when the time violates max constraint', async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-time-picker name="time" max="18:00:00" value="19:00:00"></vwc-time-picker>
 				<button type="submit">Submit</button>
-			</form>`
+			</form>`,
 		});
 
 		await page.getByRole('button', { name: 'Submit' }).click();
@@ -162,13 +176,17 @@ test.describe('constraints validation', async () => {
 		await expect(page.locator('vwc-time-picker .error-message')).toBeVisible();
 	});
 
-	test('should have a validation error when the user entered an invalid time manually', async ({ page }: { page: Page }) => {
+	test('should have a validation error when the user entered an invalid time manually', async ({
+		page,
+	}: {
+		page: Page;
+	}) => {
 		await loadTemplate({
 			page,
 			template: `<form>
 				<vwc-time-picker name="time"></vwc-time-picker>
 				<button type="submit">Submit</button>
-			</form>`
+			</form>`,
 		});
 
 		await page.locator('vwc-text-field input').fill('invalid time');
diff --git a/libs/components/src/lib/toggletip/definition.ts b/libs/components/src/lib/toggletip/definition.ts
index 3ee5a6cb0b..8e3f0178b3 100644
--- a/libs/components/src/lib/toggletip/definition.ts
+++ b/libs/components/src/lib/toggletip/definition.ts
@@ -10,11 +10,12 @@ import { ToggletipTemplate as template } from './toggletip.template';
 /**
  * The toggletip element.
  */
-export const toggletipDefinition = Toggletip.compose<FoundationElementDefinition>({
-	baseName: 'toggletip',
-	template: template as any,
-	styles,
-});
+export const toggletipDefinition =
+	Toggletip.compose<FoundationElementDefinition>({
+		baseName: 'toggletip',
+		template: template as any,
+		styles,
+	});
 
 /**
  * @internal
diff --git a/libs/components/src/lib/toggletip/toggletip.spec.ts b/libs/components/src/lib/toggletip/toggletip.spec.ts
index 86ad278ac8..6836aab859 100644
--- a/libs/components/src/lib/toggletip/toggletip.spec.ts
+++ b/libs/components/src/lib/toggletip/toggletip.spec.ts
@@ -1,4 +1,10 @@
-import { ADD_TEMPLATE_TO_FIXTURE, axe, elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
+import {
+	ADD_TEMPLATE_TO_FIXTURE,
+	axe,
+	elementUpdated,
+	fixture,
+	getControlElement,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import type { Button } from '../button/button';
 import { type Popup } from '../popup/popup.ts';
@@ -15,21 +21,19 @@ describe('vwc-toggletip', () => {
 	let popup: Popup;
 	let anchor: Button;
 
-	global.ResizeObserver = jest.fn()
-		.mockImplementation(() => ({
-			observe: jest.fn(),
-			unobserve: jest.fn(),
-			disconnect: jest.fn()
-		}));
+	global.ResizeObserver = jest.fn().mockImplementation(() => ({
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+		disconnect: jest.fn(),
+	}));
 
 	beforeEach(async () => {
-		element = fixture(
-			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
-		) as Toggletip;
+		element = fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`) as Toggletip;
 		popup = getControlElement(element) as Popup;
 
 		anchor = fixture(
-			`<vwc-button id="anchorButton" aria-label="${ANCHOR_ARIA_LABEL}"></vwc-button>`, ADD_TEMPLATE_TO_FIXTURE
+			`<vwc-button id="anchorButton" aria-label="${ANCHOR_ARIA_LABEL}"></vwc-button>`,
+			ADD_TEMPLATE_TO_FIXTURE
 		) as Button;
 	});
 
@@ -46,18 +50,21 @@ describe('vwc-toggletip', () => {
 	});
 
 	describe('open', () => {
-		it.each([true, false])('should forward open=%s to popup', async (isOpen) => {
-			element.open = isOpen;
-			await elementUpdated(element);
+		it.each([true, false])(
+			'should forward open=%s to popup',
+			async (isOpen) => {
+				element.open = isOpen;
+				await elementUpdated(element);
 
-			expect(popup.hasAttribute('open')).toBe(isOpen);
-		});
+				expect(popup.hasAttribute('open')).toBe(isOpen);
+			}
+		);
 
 		it('should remain open when clicked inside', async () => {
 			element.open = true;
 			await elementUpdated(element);
 
-			element.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+			element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 			await elementUpdated(element);
 
 			expect(element.open).toEqual(true);
@@ -67,7 +74,7 @@ describe('vwc-toggletip', () => {
 			element.open = true;
 			await elementUpdated(element);
 
-			document.body.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+			document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 			await elementUpdated(element);
 
 			expect(element.open).toEqual(false);
@@ -80,7 +87,7 @@ describe('vwc-toggletip', () => {
 			element.open = true;
 			await elementUpdated(element);
 
-			anchor.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+			anchor.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 			await elementUpdated(element);
 
 			expect(element.open).toEqual(false);
@@ -90,12 +97,13 @@ describe('vwc-toggletip', () => {
 			element.open = true;
 			await elementUpdated(element);
 
-			document.body.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape', bubbles: true}));
+			document.body.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
+			);
 			await elementUpdated(element);
 
 			expect(element.open).toEqual(false);
 		});
-
 	});
 
 	describe('anchor', () => {
@@ -114,11 +122,13 @@ describe('vwc-toggletip', () => {
 		});
 
 		it('should append to an existing aria-label on anchor', async () => {
-			expect(anchor.ariaLabel).toEqual(`${ANCHOR_ARIA_LABEL} ; Show more information`);
+			expect(anchor.ariaLabel).toEqual(
+				`${ANCHOR_ARIA_LABEL} ; Show more information`
+			);
 		});
 
 		it('should open when anchor is clicked', async () => {
-			anchor.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+			anchor.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 			await elementUpdated(element);
 
 			expect(element.open).toBe(true);
@@ -135,7 +145,7 @@ describe('vwc-toggletip', () => {
 			});
 
 			it('should no longer open when anchor is clicked', async () => {
-				anchor.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+				anchor.dispatchEvent(new MouseEvent('click', { bubbles: true }));
 				await elementUpdated(element);
 
 				expect(element.open).toBe(false);
@@ -148,7 +158,11 @@ describe('vwc-toggletip', () => {
 			element.headline = 'A title!';
 			await elementUpdated(element);
 
-			expect(element.shadowRoot?.querySelector('header.headline')?.textContent?.trim()).toEqual(element.headline);
+			expect(
+				element.shadowRoot
+					?.querySelector('header.headline')
+					?.textContent?.trim()
+			).toEqual(element.headline);
 		});
 
 		it('should remove headline element when headline is undefined', async () => {
diff --git a/libs/components/src/lib/toggletip/toggletip.template.ts b/libs/components/src/lib/toggletip/toggletip.template.ts
index a458c12150..96ed95097e 100644
--- a/libs/components/src/lib/toggletip/toggletip.template.ts
+++ b/libs/components/src/lib/toggletip/toggletip.template.ts
@@ -1,6 +1,9 @@
 import { html, when } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { Popup } from '../popup/popup';
 import { anchorSlotTemplateFactory } from '../../shared/patterns/anchored';
@@ -14,9 +17,10 @@ const getClasses = (_: Toggletip) => classNames('control');
  * @param context - element definition context
  * @public
  */
-export const ToggletipTemplate:
-(context: ElementDefinitionContext, definition: FoundationElementDefinition)
-=> ViewTemplate<Toggletip> = (context: ElementDefinitionContext) => {
+export const ToggletipTemplate: (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => ViewTemplate<Toggletip> = (context: ElementDefinitionContext) => {
 	const popup = context.tagFor(Popup);
 	const anchorSlotTemplate = anchorSlotTemplateFactory();
 
@@ -25,14 +29,17 @@ export const ToggletipTemplate:
 		<${popup}
 			class="${getClasses}"
 			arrow
-			:anchor="${x => x._anchorEl}"
-			:open="${x => x.open}"
-			?alternate="${x => !x.alternate}"
-			placement="${x => x.placement}"
+			:anchor="${(x) => x._anchorEl}"
+			:open="${(x) => x.open}"
+			?alternate="${(x) => !x.alternate}"
+			placement="${(x) => x.placement}"
 			exportparts="vvd-theme-alternate"
 		>
 			<div class="content-wrapper">
-				${when(x => x.headline, html`<header class="headline">${x => x.headline}</header>`)}
+				${when(
+					(x) => x.headline,
+					html`<header class="headline">${(x) => x.headline}</header>`
+				)}
 				<slot></slot>
 				<footer class="action-items"><slot name="action-items"></slot></footer>
 			</div>
diff --git a/libs/components/src/lib/toggletip/toggletip.ts b/libs/components/src/lib/toggletip/toggletip.ts
index 38d1e4d9bd..0f94775c44 100644
--- a/libs/components/src/lib/toggletip/toggletip.ts
+++ b/libs/components/src/lib/toggletip/toggletip.ts
@@ -29,7 +29,7 @@ export class Toggletip extends FoundationElement {
 	 * @public
 	 * HTML Attribute: alternate
 	 */
-	@attr({ mode: 'boolean'	}) alternate = false;
+	@attr({ mode: 'boolean' }) alternate = false;
 
 	/**
 	 * placement of the toggletip
@@ -45,7 +45,7 @@ export class Toggletip extends FoundationElement {
 	 * @public
 	 * HTML Attribute: open
 	 */
-	@attr({ mode: 'boolean'	}) open = false;
+	@attr({ mode: 'boolean' }) open = false;
 	openChanged(oldValue: boolean, newValue: boolean): void {
 		if (oldValue === undefined) return;
 
@@ -93,13 +93,14 @@ export class Toggletip extends FoundationElement {
 
 	#cleanupAnchor(a: HTMLElement) {
 		a.removeEventListener('click', this.#openIfClosed, true);
-		if (a.ariaLabel) a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, '');
+		if (a.ariaLabel)
+			a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, '');
 	}
 
 	#openIfClosed = () => {
 		// DOM.queueUpdate() is required to prevent the click event from
 		// being caught by the document click handler (added by openChanged)
-		if (!this.open) DOM.queueUpdate(() => this.open = true);
+		if (!this.open) DOM.queueUpdate(() => (this.open = true));
 	};
 
 	#updateListeners() {
@@ -117,7 +118,7 @@ export class Toggletip extends FoundationElement {
 		if (clickedOutside || clickedOnAnchor) this.open = false;
 	};
 
-	#closeOnEscape = (e:KeyboardEvent) => {
+	#closeOnEscape = (e: KeyboardEvent) => {
 		if (e.key === 'Escape') this.open = false;
 	};
 }
diff --git a/libs/components/src/lib/tooltip/definition.ts b/libs/components/src/lib/tooltip/definition.ts
index eeb4f31d66..e58fc5e02d 100644
--- a/libs/components/src/lib/tooltip/definition.ts
+++ b/libs/components/src/lib/tooltip/definition.ts
@@ -6,7 +6,6 @@ import styles from './tooltip.scss?inline';
 import { Tooltip } from './tooltip';
 import { TooltipTemplate as template } from './tooltip.template';
 
-
 /**
  * The tooltip element.
  */
diff --git a/libs/components/src/lib/tooltip/index.ts b/libs/components/src/lib/tooltip/index.ts
index 0d34e0947b..6d574335e4 100644
--- a/libs/components/src/lib/tooltip/index.ts
+++ b/libs/components/src/lib/tooltip/index.ts
@@ -1,4 +1,3 @@
 import { registerTooltip } from './definition';
 
-
 registerTooltip();
diff --git a/libs/components/src/lib/tooltip/tooltip.spec.ts b/libs/components/src/lib/tooltip/tooltip.spec.ts
index 45f6b88924..789d7fb8bf 100644
--- a/libs/components/src/lib/tooltip/tooltip.spec.ts
+++ b/libs/components/src/lib/tooltip/tooltip.spec.ts
@@ -1,4 +1,10 @@
-import { ADD_TEMPLATE_TO_FIXTURE, axe, elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
+import {
+	ADD_TEMPLATE_TO_FIXTURE,
+	axe,
+	elementUpdated,
+	fixture,
+	getControlElement,
+} from '@vivid-nx/shared';
 import { fireEvent } from '@testing-library/dom';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import type { Button } from '../button/button';
@@ -14,50 +20,51 @@ describe('vwc-tooltip', () => {
 	let popup: Popup;
 	let anchor: Button;
 
-	global.ResizeObserver = jest.fn()
-		.mockImplementation(() => ({
-			observe: jest.fn(),
-			unobserve: jest.fn(),
-			disconnect: jest.fn()
-		}));
+	global.ResizeObserver = jest.fn().mockImplementation(() => ({
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+		disconnect: jest.fn(),
+	}));
 
 	beforeEach(async () => {
 		element = (await fixture(
 			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
 		)) as Tooltip;
 		popup = getControlElement(element) as Popup;
-		anchor = await fixture('<vwc-button id="anchor"></vwc-button>', ADD_TEMPLATE_TO_FIXTURE) as Button;
+		anchor = (await fixture(
+			'<vwc-button id="anchor"></vwc-button>',
+			ADD_TEMPLATE_TO_FIXTURE
+		)) as Button;
 	});
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-tooltip', async () => {
 			expect(tooltipDefinition()).toBeInstanceOf(FoundationElementRegistry);
 			expect(element).toBeInstanceOf(Tooltip);
-			expect(element.open)
-				.toBeFalsy();
-			expect(element.anchor)
-				.toBeUndefined();
-			expect(element.placement)
-				.toBeUndefined();
-			expect(element.text)
-				.toEqual(undefined);
+			expect(element.open).toBeFalsy();
+			expect(element.anchor).toBeUndefined();
+			expect(element.placement).toBeUndefined();
+			expect(element.text).toEqual(undefined);
 		});
 	});
 
 	describe('open', () => {
-		it.each([true, false])('should forward open=%s to popup', async (isOpen) => {
-			element.open = isOpen;
-			await elementUpdated(element);
-
-			expect(popup.hasAttribute('open')).toBe(isOpen);
-		});
+		it.each([true, false])(
+			'should forward open=%s to popup',
+			async (isOpen) => {
+				element.open = isOpen;
+				await elementUpdated(element);
+
+				expect(popup.hasAttribute('open')).toBe(isOpen);
+			}
+		);
 	});
 
 	describe('escape', () => {
 		it('should disappear when Escape is pressed', () => {
 			element.open = true;
 
-			fireEvent(document, new KeyboardEvent('keydown', {key: 'Escape'}));
+			fireEvent(document, new KeyboardEvent('keydown', { key: 'Escape' }));
 
 			expect(element.open).toEqual(false);
 		});
@@ -74,11 +81,11 @@ describe('vwc-tooltip', () => {
 		});
 
 		describe.each([
-			{eventName: 'mouseover', openState: false, expectation: true},
-			{eventName: 'mouseout', openState: true, expectation: false},
-			{eventName: 'focusin', openState: false, expectation: true},
-			{eventName: 'focusout', openState: true, expectation: false},
-		])( 'on $eventName of anchor', ({eventName, openState, expectation}) => {
+			{ eventName: 'mouseover', openState: false, expectation: true },
+			{ eventName: 'mouseout', openState: true, expectation: false },
+			{ eventName: 'focusin', openState: false, expectation: true },
+			{ eventName: 'focusout', openState: true, expectation: false },
+		])('on $eventName of anchor', ({ eventName, openState, expectation }) => {
 			beforeEach(() => {
 				element.open = openState;
 			});
diff --git a/libs/components/src/lib/tooltip/tooltip.template.ts b/libs/components/src/lib/tooltip/tooltip.template.ts
index 689b9b0f25..6bd5dacfc6 100644
--- a/libs/components/src/lib/tooltip/tooltip.template.ts
+++ b/libs/components/src/lib/tooltip/tooltip.template.ts
@@ -1,26 +1,23 @@
 import { html } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type {
-	ElementDefinitionContext, FoundationElementDefinition,
+	ElementDefinitionContext,
+	FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { Popup } from '../popup/popup';
 import { anchorSlotTemplateFactory } from '../../shared/patterns/anchored';
 import type { Tooltip } from './tooltip';
 
-const getClasses = ({
-	open
-}: Tooltip) => classNames(
-	'control',
-	['open', Boolean(open)],
-);
+const getClasses = ({ open }: Tooltip) =>
+	classNames('control', ['open', Boolean(open)]);
 
 /**
-	* The template for the Tooltip component.
-	*
-	* @param context - element definition context
-	* @public
-	*/
+ * The template for the Tooltip component.
+ *
+ * @param context - element definition context
+ * @public
+ */
 export const TooltipTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
@@ -32,7 +29,7 @@ export const TooltipTemplate: (
 ${anchorSlotTemplate}
 <${popupTag} class="${getClasses}" arrow alternate
 	:placement=${(x) => x.placement}
-	:anchor="${x => x._anchorEl}"
+	:anchor="${(x) => x._anchorEl}"
 	:open=${(x) => x.open}
   exportparts="vvd-theme-alternate">
   <div class="tooltip" role="tooltip">
diff --git a/libs/components/src/lib/tooltip/tooltip.ts b/libs/components/src/lib/tooltip/tooltip.ts
index ee930fbaf7..0157a9c65e 100644
--- a/libs/components/src/lib/tooltip/tooltip.ts
+++ b/libs/components/src/lib/tooltip/tooltip.ts
@@ -1,5 +1,5 @@
 import { attr } from '@microsoft/fast-element';
-import {FoundationElement} from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Placement } from '@floating-ui/dom';
 import { type Anchored, anchored } from '../../shared/patterns/anchored';
 
@@ -20,7 +20,7 @@ export class Tooltip extends FoundationElement {
 
 	@attr({ mode: 'fromView' }) placement?: Placement;
 
-	@attr({ mode: 'boolean'	}) open = false;
+	@attr({ mode: 'boolean' }) open = false;
 
 	override connectedCallback(): void {
 		super.connectedCallback();
@@ -69,7 +69,7 @@ export class Tooltip extends FoundationElement {
 		}
 	}
 
-	#closeOnEscape = (e:KeyboardEvent) => {
+	#closeOnEscape = (e: KeyboardEvent) => {
 		if (e.key === 'Escape') this.#hide();
 	};
 
diff --git a/libs/components/src/lib/tooltip/ui.test.ts b/libs/components/src/lib/tooltip/ui.test.ts
index b42487d372..86329aa0ec 100644
--- a/libs/components/src/lib/tooltip/ui.test.ts
+++ b/libs/components/src/lib/tooltip/ui.test.ts
@@ -60,7 +60,9 @@ test('should show the component', async ({ page }: { page: Page }) => {
 
 	await page.waitForLoadState('networkidle');
 
-	await page.addScriptTag({content: changeAnchor.toString() + 'changeAnchor();'});
+	await page.addScriptTag({
+		content: changeAnchor.toString() + 'changeAnchor();',
+	});
 
 	expect(await testWrapper?.screenshot()).toMatchSnapshot(
 		'./snapshots/tooltip.png'
diff --git a/libs/components/src/lib/tree-item/tree-item.spec.ts b/libs/components/src/lib/tree-item/tree-item.spec.ts
index 226dc665f9..3779ae6310 100644
--- a/libs/components/src/lib/tree-item/tree-item.spec.ts
+++ b/libs/components/src/lib/tree-item/tree-item.spec.ts
@@ -1,4 +1,9 @@
-import { axe, elementUpdated, fixture, getControlElement } from '@vivid-nx/shared';
+import {
+	axe,
+	elementUpdated,
+	fixture,
+	getControlElement,
+} from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { Icon } from '../icon/icon';
 
@@ -49,7 +54,9 @@ describe('vwc-tree-item', () => {
 
 	describe('icon', () => {
 		it('should have an icon slot', async () => {
-			expect(Boolean(treeItem1.shadowRoot?.querySelector('slot[name="icon"]'))).toEqual(true);
+			expect(
+				Boolean(treeItem1.shadowRoot?.querySelector('slot[name="icon"]'))
+			).toEqual(true);
 		});
 
 		it('should add an icon to the tree item', async () => {
@@ -57,7 +64,9 @@ describe('vwc-tree-item', () => {
 			treeItem2.icon = iconName;
 			await elementUpdated(treeItem2);
 
-			const icon = getControlElement(treeItem2).querySelector(ICON_SELECTOR) as Icon;
+			const icon = getControlElement(treeItem2).querySelector(
+				ICON_SELECTOR
+			) as Icon;
 			expect(icon).toBeInstanceOf(Icon);
 			expect(icon?.name).toEqual(iconName);
 		});
@@ -69,8 +78,7 @@ describe('vwc-tree-item', () => {
 			treeItem1.text = text;
 			await elementUpdated(treeItem1);
 
-			expect(getControlElement(treeItem1)?.textContent?.trim())
-				.toEqual(text);
+			expect(getControlElement(treeItem1)?.textContent?.trim()).toEqual(text);
 		});
 	});
 
@@ -94,13 +102,17 @@ describe('vwc-tree-item', () => {
 
 	it('should expand/collapse using right/left arrows', async () => {
 		expect(treeItem1.expanded).toBeFalsy();
-		
-		treeItem1.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+
+		treeItem1.dispatchEvent(
+			new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })
+		);
 		await elementUpdated(treeItem1);
 
 		expect(treeItem1.expanded).toBeTruthy();
 
-		treeItem1.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+		treeItem1.dispatchEvent(
+			new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true })
+		);
 		await elementUpdated(treeItem1);
 
 		expect(treeItem1.expanded).toBeFalsy();
@@ -108,7 +120,9 @@ describe('vwc-tree-item', () => {
 
 	describe('tree-item click', () => {
 		it('should expand when click', async () => {
-			const expandButton = getControlElement(treeItem1).querySelector(ICON_SELECTOR) as Icon;
+			const expandButton = getControlElement(treeItem1).querySelector(
+				ICON_SELECTOR
+			) as Icon;
 			expandButton.click();
 
 			await elementUpdated(treeItem1);
@@ -122,7 +136,9 @@ describe('vwc-tree-item', () => {
 			expect(treeItem1.contains(document.activeElement)).toBeTruthy();
 			expect(treeItem2.contains(document.activeElement)).toBeFalsy();
 
-			treeItem1.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+			treeItem1.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowDown' })
+			);
 			treeItem2.focus();
 			await elementUpdated(treeItem2);
 
@@ -141,9 +157,13 @@ describe('vwc-tree-item', () => {
 			await elementUpdated(treeItem2);
 
 			const children = Array.from(element.children)
-				.map(({ shadowRoot }) => shadowRoot?.innerHTML).join('');
-			const exposedHtmlString =  element.shadowRoot?.innerHTML.replace('<slot></slot>', children) as string;
-			
+				.map(({ shadowRoot }) => shadowRoot?.innerHTML)
+				.join('');
+			const exposedHtmlString = element.shadowRoot?.innerHTML.replace(
+				'<slot></slot>',
+				children
+			) as string;
+
 			expect(await axe(exposedHtmlString)).toHaveNoViolations();
 		});
 	});
diff --git a/libs/components/src/lib/tree-item/tree-item.template.ts b/libs/components/src/lib/tree-item/tree-item.template.ts
index e18b16aca6..e1dcb6e879 100644
--- a/libs/components/src/lib/tree-item/tree-item.template.ts
+++ b/libs/components/src/lib/tree-item/tree-item.template.ts
@@ -1,16 +1,26 @@
-import { children, elements, html, ref, slotted, when } from '@microsoft/fast-element';
+import {
+	children,
+	elements,
+	html,
+	ref,
+	slotted,
+	when,
+} from '@microsoft/fast-element';
 import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
-import { affixIconTemplateFactory, IconWrapper } from '../../shared/patterns/affix';
+import {
+	affixIconTemplateFactory,
+	IconWrapper,
+} from '../../shared/patterns/affix';
 import { Icon } from '../icon/icon';
 import { TreeItem } from './tree-item';
 
-const getClasses = ({
-	disabled, selected }: TreeItem) => classNames(
-	'control',
-	['disabled', disabled],
-	['selected', Boolean(selected)],
-);
+const getClasses = ({ disabled, selected }: TreeItem) =>
+	classNames(
+		'control',
+		['disabled', disabled],
+		['selected', Boolean(selected)]
+	);
 
 export const expandCollapseButton = (context: ElementDefinitionContext) => {
 	const iconTag = context.tagFor(Icon);
@@ -18,11 +28,11 @@ export const expandCollapseButton = (context: ElementDefinitionContext) => {
 	return html<TreeItem>`
 	<div aria-hidden="true"
 		class="expandCollapseButton"
-		@click="${(x, c) =>
-		x.handleExpandCollapseButtonClick(c.event as MouseEvent)}"
+		@click="${(x, c) => x.handleExpandCollapseButtonClick(c.event as MouseEvent)}"
 			${ref('expandCollapseButton')}
 	>
-		<${iconTag} class="expandCollapseIcon" name="${x => x.expanded ? 'chevron-down-line' : 'chevron-right-line'}"></${iconTag}>
+		<${iconTag} class="expandCollapseIcon" name="${(x) =>
+		x.expanded ? 'chevron-down-line' : 'chevron-right-line'}"></${iconTag}>
 	</div>`;
 };
 
@@ -35,29 +45,34 @@ export const expandCollapseButton = (context: ElementDefinitionContext) => {
 export const TreeItemTemplate = (context: ElementDefinitionContext) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
-	return html<TreeItem>`
-	<template
-			role="treeitem"
-			slot="${x => (x.isNestedItem() ? 'item' : void 0)}"
-			tabindex="-1"
-			aria-expanded="${x =>
-		x.childItems && x.childItems.length > 0 ? x.expanded : void 0}"
-			aria-selected="${x => x.selected}"
-			aria-disabled="${x => x.disabled}"
-			@focusin="${(x, c) => x.handleFocus(c.event as FocusEvent)}"
-			@focusout="${(x, c) => x.handleBlur(c.event as FocusEvent)}"
-			${children({ property: 'childItems', filter: elements(context.tagFor(TreeItem)) })}
-			>
-			<div class="${getClasses}">
-				${when(x => x.childItems && x.childItems.length > 0, expandCollapseButton(context))}
-				${x => affixIconTemplate(x.icon, IconWrapper.Slot)}
-				${x => x.text as string}
-			</div>
-			${when(x => x.childItems && x.childItems.length > 0 && x.expanded,
-		html<TreeItem>`
-				<div role="group" class="items">
-					<slot name="item" ${slotted('items')}></slot>
-				</div>`
-	)}
-		</template>`;
+	return html<TreeItem>` <template
+		role="treeitem"
+		slot="${(x) => (x.isNestedItem() ? 'item' : void 0)}"
+		tabindex="-1"
+		aria-expanded="${(x) =>
+			x.childItems && x.childItems.length > 0 ? x.expanded : void 0}"
+		aria-selected="${(x) => x.selected}"
+		aria-disabled="${(x) => x.disabled}"
+		@focusin="${(x, c) => x.handleFocus(c.event as FocusEvent)}"
+		@focusout="${(x, c) => x.handleBlur(c.event as FocusEvent)}"
+		${children({
+			property: 'childItems',
+			filter: elements(context.tagFor(TreeItem)),
+		})}
+	>
+		<div class="${getClasses}">
+			${when(
+				(x) => x.childItems && x.childItems.length > 0,
+				expandCollapseButton(context)
+			)}
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+			${(x) => x.text as string}
+		</div>
+		${when(
+			(x) => x.childItems && x.childItems.length > 0 && x.expanded,
+			html<TreeItem>` <div role="group" class="items">
+				<slot name="item" ${slotted('items')}></slot>
+			</div>`
+		)}
+	</template>`;
 };
diff --git a/libs/components/src/lib/tree-view/tree-view.spec.ts b/libs/components/src/lib/tree-view/tree-view.spec.ts
index 284e647b5f..bd42a404e9 100644
--- a/libs/components/src/lib/tree-view/tree-view.spec.ts
+++ b/libs/components/src/lib/tree-view/tree-view.spec.ts
@@ -66,7 +66,9 @@ describe('vwc-tree-view', () => {
 
 			expect(treeItem1.contains(document.activeElement)).toBeTruthy();
 
-			treeItem1.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+			treeItem1.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowDown' })
+			);
 
 			treeItem2.focus();
 			await elementUpdated(treeItem2);
@@ -83,7 +85,9 @@ describe('vwc-tree-view', () => {
 
 			expect(treeItem1.contains(document.activeElement)).toBeTruthy();
 
-			treeItem1.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+			treeItem1.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'ArrowDown' })
+			);
 
 			treeItem2.focus();
 			await elementUpdated(treeItem2);
@@ -118,8 +122,12 @@ describe('vwc-tree-view', () => {
 			await elementUpdated(treeItem2);
 
 			const children = Array.from(element.children)
-				.map(({ shadowRoot }) => shadowRoot?.innerHTML).join('');
-			const exposedHtmlString =  element.shadowRoot?.innerHTML.replace('<slot></slot>', children) as string;
+				.map(({ shadowRoot }) => shadowRoot?.innerHTML)
+				.join('');
+			const exposedHtmlString = element.shadowRoot?.innerHTML.replace(
+				'<slot></slot>',
+				children
+			) as string;
 
 			expect(await axe(exposedHtmlString)).toHaveNoViolations();
 		});
diff --git a/libs/components/src/lib/tree-view/tree-view.template.ts b/libs/components/src/lib/tree-view/tree-view.template.ts
index ba50a6c849..c1d6e895f7 100644
--- a/libs/components/src/lib/tree-view/tree-view.template.ts
+++ b/libs/components/src/lib/tree-view/tree-view.template.ts
@@ -11,8 +11,7 @@ const getClasses = (_: TreeView) => classNames('control');
  * @public
  */
 export const TreeViewTemplate = () => {
-	return html<TreeView>`
-	<template
+	return html<TreeView>` <template
 		role="tree"
 		${ref('treeView')}
 		@keydown="${(x, c) => x.handleKeyDown(c.event as KeyboardEvent)}"
@@ -20,9 +19,9 @@ export const TreeViewTemplate = () => {
 		@focusout="${(x, c) => x.handleBlur(c.event as FocusEvent)}"
 		@click="${(x, c) => x.handleClick(c.event as MouseEvent)}"
 		@selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
-		>
+	>
 		<div class="${getClasses}">
 			<slot ${slotted('slottedTreeItems')}></slot>
 		</div>
 	</template>`;
-};
\ No newline at end of file
+};
diff --git a/libs/components/src/lib/tree-view/tree-view.ts b/libs/components/src/lib/tree-view/tree-view.ts
index 2bb7962c4a..c33206bb61 100644
--- a/libs/components/src/lib/tree-view/tree-view.ts
+++ b/libs/components/src/lib/tree-view/tree-view.ts
@@ -5,6 +5,4 @@ import { TreeView as FastTreeView } from '@microsoft/fast-foundation';
  * @component tree-view
  * @slot - Default slot.
  */
-export class TreeView extends FastTreeView {
-
-}
+export class TreeView extends FastTreeView {}
diff --git a/libs/components/src/locales/en-GB.ts b/libs/components/src/locales/en-GB.ts
index 0c9795ff8c..672ea8ddb9 100644
--- a/libs/components/src/locales/en-GB.ts
+++ b/libs/components/src/locales/en-GB.ts
@@ -48,9 +48,11 @@ const enGB: Locale = {
 		dateFormat: 'dd/MM/yyyy',
 		dateFormatPlaceholder: 'DD/MM/YYYY',
 		chooseDateLabel: 'Choose date',
-		changeDateLabel: /* istanbul ignore next */ (date: string) => `Change date, ${date}`,
+		changeDateLabel: /* istanbul ignore next */ (date: string) =>
+			`Change date, ${date}`,
 		chooseDatesLabel: 'Choose dates',
-		changeDatesLabel: /* istanbul ignore next */ (range: string) => `Change dates, ${range}`,
+		changeDatesLabel: /* istanbul ignore next */ (range: string) =>
+			`Change dates, ${range}`,
 		prevYearLabel: 'Previous year',
 		prevMonthLabel: 'Previous month',
 		nextMonthLabel: 'Next month',
@@ -67,14 +69,15 @@ const enGB: Locale = {
 	timePicker: {
 		defaultTo12HourClock: false,
 		chooseTimeLabel: 'Choose time',
-		changeTimeLabel: /* istanbul ignore next */ (time: string) => `Change time, ${time}`,
+		changeTimeLabel: /* istanbul ignore next */ (time: string) =>
+			`Change time, ${time}`,
 		hoursLabel: 'hours',
 		minutesLabel: 'minutes',
 		secondsLabel: 'seconds',
 		meridiesLabel: 'AM/PM',
 		clearLabel: 'Clear',
 		okLabel: 'OK',
-		invalidTimeError: 'Please enter a valid time.'
+		invalidTimeError: 'Please enter a valid time.',
 	},
 	filePicker: {
 		invalidFileTypeError: "You can't select files of this type.",
@@ -107,7 +110,7 @@ const enGB: Locale = {
 	rangeSlider: {
 		startThumbLabel: 'min',
 		endThumbLabel: 'max',
-	}
+	},
 };
 
 export default enGB;
diff --git a/libs/components/src/locales/en-US.ts b/libs/components/src/locales/en-US.ts
index 700bfe6b73..cf74300eb5 100644
--- a/libs/components/src/locales/en-US.ts
+++ b/libs/components/src/locales/en-US.ts
@@ -48,9 +48,11 @@ const enUS: Locale = {
 		dateFormat: 'MM/dd/yyyy',
 		dateFormatPlaceholder: 'MM/DD/YYYY',
 		chooseDateLabel: 'Choose date',
-		changeDateLabel: /* istanbul ignore next */ (date: string) => `Change date, ${date}`,
+		changeDateLabel: /* istanbul ignore next */ (date: string) =>
+			`Change date, ${date}`,
 		chooseDatesLabel: 'Choose dates',
-		changeDatesLabel: /* istanbul ignore next */ (range: string) => `Change dates, ${range}`,
+		changeDatesLabel: /* istanbul ignore next */ (range: string) =>
+			`Change dates, ${range}`,
 		prevYearLabel: 'Previous year',
 		prevMonthLabel: 'Previous month',
 		nextMonthLabel: 'Next month',
@@ -67,14 +69,15 @@ const enUS: Locale = {
 	timePicker: {
 		defaultTo12HourClock: true,
 		chooseTimeLabel: 'Choose time',
-		changeTimeLabel: /* istanbul ignore next */ (time: string) => `Change time, ${time}`,
+		changeTimeLabel: /* istanbul ignore next */ (time: string) =>
+			`Change time, ${time}`,
 		hoursLabel: 'hours',
 		minutesLabel: 'minutes',
 		secondsLabel: 'seconds',
 		meridiesLabel: 'AM/PM',
 		clearLabel: 'Clear',
 		okLabel: 'OK',
-		invalidTimeError: 'Please enter a valid time.'
+		invalidTimeError: 'Please enter a valid time.',
 	},
 	filePicker: {
 		invalidFileTypeError: "You can't select files of this type.",
@@ -107,7 +110,7 @@ const enUS: Locale = {
 	rangeSlider: {
 		startThumbLabel: 'min',
 		endThumbLabel: 'max',
-	}
+	},
 };
 
 export default enUS;
diff --git a/libs/components/src/locales/ja-JP.ts b/libs/components/src/locales/ja-JP.ts
index bb6123009c..01f728c2bc 100644
--- a/libs/components/src/locales/ja-JP.ts
+++ b/libs/components/src/locales/ja-JP.ts
@@ -48,9 +48,11 @@ const jaJP: Locale = {
 		dateFormat: 'yyyy年MM月dd日',
 		dateFormatPlaceholder: 'YYYY年MM月DD日',
 		chooseDateLabel: '日付を選択',
-		changeDateLabel: /* istanbul ignore next */ (date: string) => `日付を変更, ${date}`,
+		changeDateLabel: /* istanbul ignore next */ (date: string) =>
+			`日付を変更, ${date}`,
 		chooseDatesLabel: '日付を選択',
-		changeDatesLabel: /* istanbul ignore next */ (range: string) => `日付を変更, ${range}`,
+		changeDatesLabel: /* istanbul ignore next */ (range: string) =>
+			`日付を変更, ${range}`,
 		prevYearLabel: '前年',
 		prevMonthLabel: '前月',
 		nextMonthLabel: '次月',
@@ -67,7 +69,8 @@ const jaJP: Locale = {
 	timePicker: {
 		defaultTo12HourClock: false,
 		chooseTimeLabel: '時間を選択',
-		changeTimeLabel: /* istanbul ignore next */ (time: string) => `時間を変更, ${time}`,
+		changeTimeLabel: /* istanbul ignore next */ (time: string) =>
+			`時間を変更, ${time}`,
 		hoursLabel: '時間',
 		minutesLabel: '分',
 		secondsLabel: '秒',
@@ -107,7 +110,7 @@ const jaJP: Locale = {
 	rangeSlider: {
 		startThumbLabel: '最小',
 		endThumbLabel: '最大',
-	}
+	},
 };
 
 export default jaJP;
diff --git a/libs/components/src/locales/zh-CN.ts b/libs/components/src/locales/zh-CN.ts
index 87e5da9e82..82b346cc64 100644
--- a/libs/components/src/locales/zh-CN.ts
+++ b/libs/components/src/locales/zh-CN.ts
@@ -48,9 +48,11 @@ const zhCN: Locale = {
 		dateFormat: 'yyyy年MM月dd日',
 		dateFormatPlaceholder: 'YYYY年MM月DD日',
 		chooseDateLabel: '选择日期',
-		changeDateLabel: /* istanbul ignore next */ (date: string) => `更改日期, ${date}`,
+		changeDateLabel: /* istanbul ignore next */ (date: string) =>
+			`更改日期, ${date}`,
 		chooseDatesLabel: '选择日期',
-		changeDatesLabel: /* istanbul ignore next */ (range: string) => `更改日期, ${range}`,
+		changeDatesLabel: /* istanbul ignore next */ (range: string) =>
+			`更改日期, ${range}`,
 		prevYearLabel: '上一年',
 		prevMonthLabel: '上个月',
 		nextMonthLabel: '下个月',
@@ -67,7 +69,8 @@ const zhCN: Locale = {
 	timePicker: {
 		defaultTo12HourClock: false,
 		chooseTimeLabel: '选择时间',
-		changeTimeLabel: /* istanbul ignore next */ (time: string) => `更改时间, ${time}`,
+		changeTimeLabel: /* istanbul ignore next */ (time: string) =>
+			`更改时间, ${time}`,
 		hoursLabel: '小时',
 		minutesLabel: '分钟',
 		secondsLabel: '秒',
@@ -107,7 +110,7 @@ const zhCN: Locale = {
 	rangeSlider: {
 		startThumbLabel: '最小',
 		endThumbLabel: '最大',
-	}
+	},
 };
 
 export default zhCN;
diff --git a/libs/components/src/shared/date-picker/calendar/calendarGrid.ts b/libs/components/src/shared/date-picker/calendar/calendarGrid.ts
index e4fb5a48d8..3f583d03ca 100644
--- a/libs/components/src/shared/date-picker/calendar/calendarGrid.ts
+++ b/libs/components/src/shared/date-picker/calendar/calendarGrid.ts
@@ -56,14 +56,18 @@ const buildDateGrid = (
 	const firstDayInWeek = getDay(firstDay);
 	const daysInMonth = lastDay.getDate();
 	const daysOutsideMonthInLastWeek = 7 - getDay(lastDay);
-	const totalDaysInCalendar = daysInMonth + firstDayInWeek + daysOutsideMonthInLastWeek;
+	const totalDaysInCalendar =
+		daysInMonth + firstDayInWeek + daysOutsideMonthInLastWeek;
 	let week: CalendarGridDate[] = [];
 
-	for (let i = 0;
-		i < totalDaysInCalendar;
-		i++) {
+	for (let i = 0; i < totalDaysInCalendar; i++) {
 		const dayIndexInMonth = i - firstDayInWeek;
-		week.push(gridDate(addDays(firstDay, dayIndexInMonth), isOutsideMonth(dayIndexInMonth, daysInMonth)));
+		week.push(
+			gridDate(
+				addDays(firstDay, dayIndexInMonth),
+				isOutsideMonth(dayIndexInMonth, daysInMonth)
+			)
+		);
 		if (week.length === 7) {
 			grid.push(week);
 			week = [];
@@ -87,4 +91,3 @@ export const buildCalendarGrid = (
 		grid: buildDateGrid(month, getShiftedDay),
 	};
 };
-
diff --git a/libs/components/src/shared/date-picker/calendar/presentationDateRange.spec.ts b/libs/components/src/shared/date-picker/calendar/presentationDateRange.spec.ts
index 79d5f020a7..f25467b4ee 100644
--- a/libs/components/src/shared/date-picker/calendar/presentationDateRange.spec.ts
+++ b/libs/components/src/shared/date-picker/calendar/presentationDateRange.spec.ts
@@ -1,5 +1,9 @@
 import { DatePickerLocale } from '../locale.ts';
-import { formatPresentationDateRange, formatRange, parsePresentationDateRange } from './presentationDateRange.ts';
+import {
+	formatPresentationDateRange,
+	formatRange,
+	parsePresentationDateRange,
+} from './presentationDateRange.ts';
 
 const enUsLocale = {
 	dateFormat: 'MM/dd/yyyy',
@@ -13,29 +17,50 @@ describe('formatRange', () => {
 
 describe('presentationDateRange', () => {
 	it('should format the range in the date format of the given locale', () => {
-		expect(formatPresentationDateRange({start: '2023-08-01', end: '2023-08-02'}, enUsLocale)).toBe('08/01/2023 – 08/02/2023');
+		expect(
+			formatPresentationDateRange(
+				{ start: '2023-08-01', end: '2023-08-02' },
+				enUsLocale
+			)
+		).toBe('08/01/2023 – 08/02/2023');
 	});
 });
 
 describe('parsePresentationDateRange', () => {
 	it("should throw an error if the input string doesn't have a separator", () => {
-		expect(() => parsePresentationDateRange('08/01/202308/02/2023', enUsLocale)).toThrow();
+		expect(() =>
+			parsePresentationDateRange('08/01/202308/02/2023', enUsLocale)
+		).toThrow();
 	});
 
 	it("should throw an error if one of the dates can't be parsed", () => {
-		expect(() => parsePresentationDateRange('x – 08/02/2023', enUsLocale)).toThrow();
-		expect(() => parsePresentationDateRange('08/01/2023 – x', enUsLocale)).toThrow();
+		expect(() =>
+			parsePresentationDateRange('x – 08/02/2023', enUsLocale)
+		).toThrow();
+		expect(() =>
+			parsePresentationDateRange('08/01/2023 – x', enUsLocale)
+		).toThrow();
 	});
 
 	it('should parse the range in the date format of the given locale', () => {
-		expect(parsePresentationDateRange('08/01/2023 – 08/02/2023', enUsLocale)).toEqual({start: '2023-08-01', end: '2023-08-02'});
+		expect(
+			parsePresentationDateRange('08/01/2023 – 08/02/2023', enUsLocale)
+		).toEqual({ start: '2023-08-01', end: '2023-08-02' });
 	});
 
 	it('should accept inputs formatted in a variety of ways', () => {
-		const expected = {start: '2023-08-01', end: '2023-08-02'};
-		expect(parsePresentationDateRange('08/01/2023–08/02/2023', enUsLocale)).toEqual(expected);
-		expect(parsePresentationDateRange('08/01/2023-08/02/2023', enUsLocale)).toEqual(expected);
-		expect(parsePresentationDateRange(' 08/01/2023  -  08/02/2023 ', enUsLocale)).toEqual(expected);
-		expect(parsePresentationDateRange('08/01/2023 08/02/2023', enUsLocale)).toEqual(expected);
+		const expected = { start: '2023-08-01', end: '2023-08-02' };
+		expect(
+			parsePresentationDateRange('08/01/2023–08/02/2023', enUsLocale)
+		).toEqual(expected);
+		expect(
+			parsePresentationDateRange('08/01/2023-08/02/2023', enUsLocale)
+		).toEqual(expected);
+		expect(
+			parsePresentationDateRange(' 08/01/2023  -  08/02/2023 ', enUsLocale)
+		).toEqual(expected);
+		expect(
+			parsePresentationDateRange('08/01/2023 08/02/2023', enUsLocale)
+		).toEqual(expected);
 	});
 });
diff --git a/libs/components/src/shared/date-picker/calendar/presentationDateRange.ts b/libs/components/src/shared/date-picker/calendar/presentationDateRange.ts
index 1739f32bf2..1b24496709 100644
--- a/libs/components/src/shared/date-picker/calendar/presentationDateRange.ts
+++ b/libs/components/src/shared/date-picker/calendar/presentationDateRange.ts
@@ -1,11 +1,11 @@
 import type { DatePickerLocale } from '../locale';
 import type { DateRange } from './dateRange';
-import { formatPresentationDate, parsePresentationDate } from './presentationDate';
+import {
+	formatPresentationDate,
+	parsePresentationDate,
+} from './presentationDate';
 
-export const formatRange = (
-	from: string,
-	to: string
-): string => {
+export const formatRange = (from: string, to: string): string => {
 	return `${from} – ${to}`;
 };
 
@@ -13,7 +13,10 @@ export const formatPresentationDateRange = (
 	dateRange: DateRange,
 	locale: DatePickerLocale
 ): string => {
-	return formatRange(formatPresentationDate(dateRange.start, locale), formatPresentationDate(dateRange.end, locale));
+	return formatRange(
+		formatPresentationDate(dateRange.start, locale),
+		formatPresentationDate(dateRange.end, locale)
+	);
 };
 
 /**
@@ -29,6 +32,8 @@ export const parsePresentationDateRange = (
 		throw new Error(`Invalid date range: ${presentationDateRange}`);
 	}
 
-	const [start, end] = fragments.map((fragment) => parsePresentationDate(fragment, locale));
+	const [start, end] = fragments.map((fragment) =>
+		parsePresentationDate(fragment, locale)
+	);
 	return { start, end };
 };
diff --git a/libs/components/src/shared/date-picker/calendar/segment.ts b/libs/components/src/shared/date-picker/calendar/segment.ts
index 59ec0d9cd5..a297f13f99 100644
--- a/libs/components/src/shared/date-picker/calendar/segment.ts
+++ b/libs/components/src/shared/date-picker/calendar/segment.ts
@@ -9,16 +9,16 @@ type BaseSegment = {
 	prevMonthButton?: boolean;
 	nextMonthButton?: boolean;
 	nextYearButton?: boolean;
-}
+};
 
 export type CalendarSegment = BaseSegment & {
 	type: 'calendar';
 	calendar: CalendarGrid;
-}
+};
 
 export type MonthPickerSegment = BaseSegment & {
 	type: 'month-picker';
 	months: MonthPickerGrid;
-}
+};
 
 export type Segment = CalendarSegment | MonthPickerSegment;
diff --git a/libs/components/src/shared/date-picker/date-picker-base.form-associated.ts b/libs/components/src/shared/date-picker/date-picker-base.form-associated.ts
index 5b56042925..d8f14994da 100644
--- a/libs/components/src/shared/date-picker/date-picker-base.form-associated.ts
+++ b/libs/components/src/shared/date-picker/date-picker-base.form-associated.ts
@@ -4,6 +4,8 @@ class _DatePickerBase extends FoundationElement {}
 // eslint-disable-next-line @typescript-eslint/naming-convention
 interface _DatePickerBase extends FormAssociated {}
 
-export class FormAssociatedDatePickerBase extends FormAssociated(_DatePickerBase) {
+export class FormAssociatedDatePickerBase extends FormAssociated(
+	_DatePickerBase
+) {
 	proxy = document.createElement('input');
 }
diff --git a/libs/components/src/shared/date-picker/date-picker-base.spec.ts b/libs/components/src/shared/date-picker/date-picker-base.spec.ts
index b7b84f6655..43aee81c31 100644
--- a/libs/components/src/shared/date-picker/date-picker-base.spec.ts
+++ b/libs/components/src/shared/date-picker/date-picker-base.spec.ts
@@ -2,7 +2,8 @@ import {
 	createFormHTML,
 	elementUpdated,
 	fixture,
-	listenToFormSubmission, setupDelegatesFocusPolyfill
+	listenToFormSubmission,
+	setupDelegatesFocusPolyfill,
 } from '@vivid-nx/shared';
 import { TextField } from '../../lib/text-field/text-field';
 import { Popup } from '../../lib/popup/popup';
@@ -11,7 +12,6 @@ import { DatePickerBase } from './date-picker-base';
 import '../../lib/date-picker';
 import '../../lib/date-range-picker';
 
-
 // Mock current date to be 2023-08-10 for the tests
 jest.mock('./calendar/month.ts', () => ({
 	...jest.requireActual('./calendar/month.ts'),
@@ -25,647 +25,660 @@ jest.mock('./calendar/dateStr.ts', () => ({
 /**
  * Run common tests for the abstract DatePickerBase component against implementations.
  */
-describe.each([
-	['vwc-date-picker'],
-	['vwc-date-range-picker']])('%s', (COMPONENT_TAG) => {
-	let element: DatePickerBase;
-	let textField: TextField;
-	let calendarButton: Button;
-	let popup: Popup;
-
-	const getTitleAction = () => element.shadowRoot!.querySelector('.title-action') as HTMLButtonElement;
-
-	const getDateButton = (date: string) =>
-		element.shadowRoot!.querySelector(
-			`[data-date="${date}"]`
-		) as HTMLButtonElement;
-
-	const getAllDateButtons = () =>
-		Array.from(
-			element.shadowRoot!.querySelectorAll('[data-date]')
-		) as HTMLButtonElement[];
-
-	const getMonthButton = (month: string) =>
-		element.shadowRoot!.querySelector(
-			`[data-month="${month}"]`
-		) as HTMLButtonElement;
-
-	const getAllMonthButtons = () =>
-		Array.from(
-			element.shadowRoot!.querySelectorAll('[data-month]')
-		) as HTMLButtonElement[];
-
-	const pressKey = (key: string, options: KeyboardEventInit = {}) => {
-		element.shadowRoot!.activeElement!.dispatchEvent(
-			new KeyboardEvent('keydown', { key, bubbles: true, ...options })
-		);
-	};
-
-	const getButtonByLabel = (label: string) =>
-		element.shadowRoot!.querySelector(
-			`[aria-label="${label}"],[label="${label}"]`
-		) as Button;
-
-	const getDialogTitle = () => getTitleAction().textContent!.trim();
-
-	async function openPopup() {
-		calendarButton.click();
-		await elementUpdated(element);
-	}
-
-	async function openMonthView() {
-		getTitleAction().click();
-		await elementUpdated(element);
-	}
-
-	beforeEach(async () => {
-		element = (await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`)) as DatePickerBase;
-		textField = element.shadowRoot!.querySelector('.control') as TextField;
-		calendarButton = element.shadowRoot!.querySelector('#calendar-button') as Button;
-		popup = element.shadowRoot!.querySelector('.popup') as Popup;
-		setupDelegatesFocusPolyfill(element);
-	});
-
-	describe('label', () => {
-		it('should forward label to the text field', async () => {
-			element.label = 'label';
+describe.each([['vwc-date-picker'], ['vwc-date-range-picker']])(
+	'%s',
+	(COMPONENT_TAG) => {
+		let element: DatePickerBase;
+		let textField: TextField;
+		let calendarButton: Button;
+		let popup: Popup;
+
+		const getTitleAction = () =>
+			element.shadowRoot!.querySelector('.title-action') as HTMLButtonElement;
+
+		const getDateButton = (date: string) =>
+			element.shadowRoot!.querySelector(
+				`[data-date="${date}"]`
+			) as HTMLButtonElement;
+
+		const getAllDateButtons = () =>
+			Array.from(
+				element.shadowRoot!.querySelectorAll('[data-date]')
+			) as HTMLButtonElement[];
+
+		const getMonthButton = (month: string) =>
+			element.shadowRoot!.querySelector(
+				`[data-month="${month}"]`
+			) as HTMLButtonElement;
+
+		const getAllMonthButtons = () =>
+			Array.from(
+				element.shadowRoot!.querySelectorAll('[data-month]')
+			) as HTMLButtonElement[];
+
+		const pressKey = (key: string, options: KeyboardEventInit = {}) => {
+			element.shadowRoot!.activeElement!.dispatchEvent(
+				new KeyboardEvent('keydown', { key, bubbles: true, ...options })
+			);
+		};
+
+		const getButtonByLabel = (label: string) =>
+			element.shadowRoot!.querySelector(
+				`[aria-label="${label}"],[label="${label}"]`
+			) as Button;
+
+		const getDialogTitle = () => getTitleAction().textContent!.trim();
+
+		async function openPopup() {
+			calendarButton.click();
 			await elementUpdated(element);
+		}
 
-			expect(textField.label).toBe('label');
-		});
-	});
-
-	describe('helperText', () => {
-		it('should forward helperText to the text field', async () => {
-			element.helperText = 'helperText';
+		async function openMonthView() {
+			getTitleAction().click();
 			await elementUpdated(element);
+		}
 
-			expect(textField.helperText).toBe('helperText');
-		});
-	});
-
-	describe('disabled', () => {
-		it('should forward disabled to the text field', async () => {
-			element.disabled = true;
-			await elementUpdated(element);
+		beforeEach(async () => {
+			element = (await fixture(
+				`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
+			)) as DatePickerBase;
+			textField = element.shadowRoot!.querySelector('.control') as TextField;
+			calendarButton = element.shadowRoot!.querySelector(
+				'#calendar-button'
+			) as Button;
+			popup = element.shadowRoot!.querySelector('.popup') as Popup;
+			setupDelegatesFocusPolyfill(element);
+		});
+
+		describe('label', () => {
+			it('should forward label to the text field', async () => {
+				element.label = 'label';
+				await elementUpdated(element);
 
-			expect(textField.disabled).toBe(true);
+				expect(textField.label).toBe('label');
+			});
 		});
-	});
 
-	describe('readOnly', () => {
-		it('should forward readOnly to the text field', async () => {
-			element.readOnly = true;
-			await elementUpdated(element);
+		describe('helperText', () => {
+			it('should forward helperText to the text field', async () => {
+				element.helperText = 'helperText';
+				await elementUpdated(element);
 
-			expect(textField.readOnly).toBe(true);
+				expect(textField.helperText).toBe('helperText');
+			});
 		});
-	});
 
-	describe('min', () => {
-		const MIN_DATE = '2023-08-05';
-		const MIN_MONTH = '2023-08';
+		describe('disabled', () => {
+			it('should forward disabled to the text field', async () => {
+				element.disabled = true;
+				await elementUpdated(element);
 
-		beforeEach(async () => {
-			element.min = MIN_DATE;
-			await elementUpdated(element);
-			await openPopup();
+				expect(textField.disabled).toBe(true);
+			});
 		});
 
-		describe('in the calendar grid', () => {
-			it('should disable dates earlier than min', async () => {
-				expect(
-					getAllDateButtons()
-						.filter((button) => button.dataset.date! < MIN_DATE)
-						.every((button) => button.disabled)
-				).toBe(true);
-			});
+		describe('readOnly', () => {
+			it('should forward readOnly to the text field', async () => {
+				element.readOnly = true;
+				await elementUpdated(element);
 
-			it('should disable previous month button if the previous month is earlier than min', async () => {
-				expect(getButtonByLabel('Previous month').disabled).toBe(true);
+				expect(textField.readOnly).toBe(true);
 			});
+		});
 
-			it('should enable previous month button if the previous month is not earlier than min', async () => {
-				getButtonByLabel('Next month').click();
-				await elementUpdated(element);
+		describe('min', () => {
+			const MIN_DATE = '2023-08-05';
+			const MIN_MONTH = '2023-08';
 
-				expect(getButtonByLabel('Previous month').disabled).toBe(false);
+			beforeEach(async () => {
+				element.min = MIN_DATE;
+				await elementUpdated(element);
+				await openPopup();
 			});
 
-			describe('with single calendar', () => {
-				beforeEach(async () => {
-					element._numCalendars = 1;
-					await elementUpdated(element);
+			describe('in the calendar grid', () => {
+				it('should disable dates earlier than min', async () => {
+					expect(
+						getAllDateButtons()
+							.filter((button) => button.dataset.date! < MIN_DATE)
+							.every((button) => button.disabled)
+					).toBe(true);
 				});
 
-				it('should disable previous year button if the previous year is earlier than min', async () => {
-					expect(getButtonByLabel('Previous year').disabled).toBe(true);
+				it('should disable previous month button if the previous month is earlier than min', async () => {
+					expect(getButtonByLabel('Previous month').disabled).toBe(true);
 				});
 
-				it('should enable previous year button if the previous year is not earlier than min', async () => {
-					getButtonByLabel('Next year').click();
+				it('should enable previous month button if the previous month is not earlier than min', async () => {
+					getButtonByLabel('Next month').click();
 					await elementUpdated(element);
 
-					expect(getButtonByLabel('Previous year').disabled).toBe(false);
+					expect(getButtonByLabel('Previous month').disabled).toBe(false);
 				});
-			});
-		});
 
-		describe('in the month picker', () => {
-			beforeEach(async () => {
-				await openMonthView();
-			});
+				describe('with single calendar', () => {
+					beforeEach(async () => {
+						element._numCalendars = 1;
+						await elementUpdated(element);
+					});
+
+					it('should disable previous year button if the previous year is earlier than min', async () => {
+						expect(getButtonByLabel('Previous year').disabled).toBe(true);
+					});
 
-			it('should disable months earlier than min', async () => {
-				expect(
-					getAllMonthButtons()
-						.filter((button) => button.dataset.month! < MIN_MONTH)
-						.every((button) => button.disabled)
-				).toBe(true);
+					it('should enable previous year button if the previous year is not earlier than min', async () => {
+						getButtonByLabel('Next year').click();
+						await elementUpdated(element);
+
+						expect(getButtonByLabel('Previous year').disabled).toBe(false);
+					});
+				});
 			});
 
-			describe('with single calendar', () => {
+			describe('in the month picker', () => {
 				beforeEach(async () => {
-					element._numCalendars = 1;
-					await elementUpdated(element);
+					await openMonthView();
 				});
 
-				it('should disable previous year button if the previous year is earlier than min', async () => {
-					expect(getButtonByLabel('Previous year').disabled).toBe(true);
+				it('should disable months earlier than min', async () => {
+					expect(
+						getAllMonthButtons()
+							.filter((button) => button.dataset.month! < MIN_MONTH)
+							.every((button) => button.disabled)
+					).toBe(true);
 				});
-			});
-		});
-	});
-
-	describe('max', () => {
-		const MAX_DATE = '2023-08-15';
-		const MAX_MONTH = '2023-08';
 
-		beforeEach(async () => {
-			element.max = MAX_DATE;
-			await elementUpdated(element);
-			await openPopup();
-		});
+				describe('with single calendar', () => {
+					beforeEach(async () => {
+						element._numCalendars = 1;
+						await elementUpdated(element);
+					});
 
-		describe('in the calendar grid', () => {
-			it('should disable dates later than max', async () => {
-				expect(
-					getAllDateButtons()
-						.filter((button) => button.dataset.date! > MAX_DATE)
-						.every((button) => button.disabled)
-				).toBe(true);
+					it('should disable previous year button if the previous year is earlier than min', async () => {
+						expect(getButtonByLabel('Previous year').disabled).toBe(true);
+					});
+				});
 			});
+		});
 
-			it('should disable next month button if the next month is later than max', async () => {
-				expect(getButtonByLabel('Next month').disabled).toBe(true);
-			});
+		describe('max', () => {
+			const MAX_DATE = '2023-08-15';
+			const MAX_MONTH = '2023-08';
 
-			it('should enable next month button if the next month is not later than max', async () => {
-				getButtonByLabel('Previous month').click();
+			beforeEach(async () => {
+				element.max = MAX_DATE;
 				await elementUpdated(element);
-
-				expect(getButtonByLabel('Next month').disabled).toBe(false);
+				await openPopup();
 			});
 
-			describe('with single calendar', () => {
-				beforeEach(async () => {
-					element._numCalendars = 1;
-					await elementUpdated(element);
+			describe('in the calendar grid', () => {
+				it('should disable dates later than max', async () => {
+					expect(
+						getAllDateButtons()
+							.filter((button) => button.dataset.date! > MAX_DATE)
+							.every((button) => button.disabled)
+					).toBe(true);
 				});
 
-				it('should disable next year button if the next year is later than max', async () => {
-					expect(getButtonByLabel('Next year').disabled).toBe(true);
+				it('should disable next month button if the next month is later than max', async () => {
+					expect(getButtonByLabel('Next month').disabled).toBe(true);
 				});
 
-				it('should enable next year button if the next year is not later than max', async () => {
-					getButtonByLabel('Previous year').click();
+				it('should enable next month button if the next month is not later than max', async () => {
+					getButtonByLabel('Previous month').click();
 					await elementUpdated(element);
 
-					expect(getButtonByLabel('Next year').disabled).toBe(false);
+					expect(getButtonByLabel('Next month').disabled).toBe(false);
 				});
-			});
-		});
 
-		describe('in the month picker', () => {
-			beforeEach(async () => {
-				await openMonthView();
-			});
+				describe('with single calendar', () => {
+					beforeEach(async () => {
+						element._numCalendars = 1;
+						await elementUpdated(element);
+					});
+
+					it('should disable next year button if the next year is later than max', async () => {
+						expect(getButtonByLabel('Next year').disabled).toBe(true);
+					});
 
-			it('should disable months later than max', async () => {
-				expect(
-					getAllMonthButtons()
-						.filter((button) => button.dataset.month! > MAX_MONTH)
-						.every((button) => button.disabled)
-				).toBe(true);
+					it('should enable next year button if the next year is not later than max', async () => {
+						getButtonByLabel('Previous year').click();
+						await elementUpdated(element);
+
+						expect(getButtonByLabel('Next year').disabled).toBe(false);
+					});
+				});
 			});
 
-			describe('with single calendar', () => {
+			describe('in the month picker', () => {
 				beforeEach(async () => {
-					element._numCalendars = 1;
-					await elementUpdated(element);
+					await openMonthView();
+				});
+
+				it('should disable months later than max', async () => {
+					expect(
+						getAllMonthButtons()
+							.filter((button) => button.dataset.month! > MAX_MONTH)
+							.every((button) => button.disabled)
+					).toBe(true);
 				});
 
-				it('should disable next year button if the next year is later than max', async () => {
-					expect(getButtonByLabel('Next year').disabled).toBe(true);
+				describe('with single calendar', () => {
+					beforeEach(async () => {
+						element._numCalendars = 1;
+						await elementUpdated(element);
+					});
+
+					it('should disable next year button if the next year is later than max', async () => {
+						expect(getButtonByLabel('Next year').disabled).toBe(true);
+					});
 				});
 			});
 		});
-	});
 
-	describe.each([
-		['focus', 'focusin'],
-		['blur', 'focusout']
-	])('%s event', (eventName, sourceEventName) => {
-		it(`should emit a '${eventName}' event on '${sourceEventName}'`, async () => {
-			const spy = jest.fn();
-			element.addEventListener(eventName, spy);
+		describe.each([
+			['focus', 'focusin'],
+			['blur', 'focusout'],
+		])('%s event', (eventName, sourceEventName) => {
+			it(`should emit a '${eventName}' event on '${sourceEventName}'`, async () => {
+				const spy = jest.fn();
+				element.addEventListener(eventName, spy);
 
-			element.dispatchEvent(new Event(sourceEventName));
+				element.dispatchEvent(new Event(sourceEventName));
 
-			expect(spy).toHaveBeenCalledTimes(1);
+				expect(spy).toHaveBeenCalledTimes(1);
+			});
 		});
-	});
 
-	describe('calendar button', () => {
-		it('should open the popup when pressed', async () => {
-			calendarButton.click();
-			await elementUpdated(element);
+		describe('calendar button', () => {
+			it('should open the popup when pressed', async () => {
+				calendarButton.click();
+				await elementUpdated(element);
 
-			expect(popup.open).toBe(true);
-		});
+				expect(popup.open).toBe(true);
+			});
 
-		it('should close the popup when pressed and it is already open', async () => {
-			await openPopup();
+			it('should close the popup when pressed and it is already open', async () => {
+				await openPopup();
 
-			calendarButton.click();
-			await elementUpdated(element);
+				calendarButton.click();
+				await elementUpdated(element);
 
-			expect(popup.open).toBe(false);
-		});
+				expect(popup.open).toBe(false);
+			});
 
-		it('should be disabled when the date picker is disabled', async () => {
-			element.disabled = true;
-			await elementUpdated(element);
+			it('should be disabled when the date picker is disabled', async () => {
+				element.disabled = true;
+				await elementUpdated(element);
 
-			expect(calendarButton.disabled).toBe(true);
-		});
+				expect(calendarButton.disabled).toBe(true);
+			});
 
-		it('should be disabled when the date picker is readonly', async () => {
-			element.readOnly = true;
-			await elementUpdated(element);
+			it('should be disabled when the date picker is readonly', async () => {
+				element.readOnly = true;
+				await elementUpdated(element);
 
-			expect(calendarButton.disabled).toBe(true);
+				expect(calendarButton.disabled).toBe(true);
+			});
 		});
-	});
 
-	describe('popup', () => {
-		it('should close when pressing ESC', async () => {
-			await openPopup();
-
-			pressKey('Escape');
-			await elementUpdated(element);
+		describe('popup', () => {
+			it('should close when pressing ESC', async () => {
+				await openPopup();
 
-			expect(popup.open).toBe(false);
-		});
-
-		it('should close when clicking outside the date-picker', async () => {
-			await openPopup();
+				pressKey('Escape');
+				await elementUpdated(element);
 
-			document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-			await elementUpdated(element);
+				expect(popup.open).toBe(false);
+			});
 
-			expect(popup.open).toBe(false);
-		});
-	});
+			it('should close when clicking outside the date-picker', async () => {
+				await openPopup();
 
-	describe('trapped focus', () => {
-		let firstFocusable: HTMLElement;
-		let lastFocusable: HTMLElement;
+				document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+				await elementUpdated(element);
 
-		beforeEach(async () => {
-			await openPopup();
-			const buttons: NodeListOf<HTMLElement> =
-				element.shadowRoot!.querySelectorAll('.dialog button, .dialog vwc-button');
-			firstFocusable = buttons[0];
-			lastFocusable = buttons[buttons.length - 1];
+				expect(popup.open).toBe(false);
+			});
 		});
 
-		it('should move focus to first focusable element when pressing tab on the last focusable element', async () => {
-			lastFocusable.focus();
+		describe('trapped focus', () => {
+			let firstFocusable: HTMLElement;
+			let lastFocusable: HTMLElement;
 
-			pressKey('Tab');
+			beforeEach(async () => {
+				await openPopup();
+				const buttons: NodeListOf<HTMLElement> =
+					element.shadowRoot!.querySelectorAll(
+						'.dialog button, .dialog vwc-button'
+					);
+				firstFocusable = buttons[0];
+				lastFocusable = buttons[buttons.length - 1];
+			});
 
-			expect(element.shadowRoot!.activeElement).toBe(firstFocusable);
-		});
+			it('should move focus to first focusable element when pressing tab on the last focusable element', async () => {
+				lastFocusable.focus();
 
-		it('should move focus to last focusable element when pressing shift + tab on the first focusable element', async () => {
-			firstFocusable.focus();
+				pressKey('Tab');
 
-			pressKey('Tab', { shiftKey: true });
+				expect(element.shadowRoot!.activeElement).toBe(firstFocusable);
+			});
 
-			expect(element.shadowRoot!.activeElement).toBe(lastFocusable);
-		});
-	});
+			it('should move focus to last focusable element when pressing shift + tab on the first focusable element', async () => {
+				firstFocusable.focus();
 
-	describe('calendar', () => {
-		beforeEach(async () => {
-			await openPopup();
-		});
+				pressKey('Tab', { shiftKey: true });
 
-		it('should initially show the current month', () => {
-			expect(getDialogTitle()).toBe('August 2023');
+				expect(element.shadowRoot!.activeElement).toBe(lastFocusable);
+			});
 		});
 
-		it('should highlight the current date', () => {
-			expect(getDateButton('2023-08-10').classList).toContain('current');
-		});
+		describe('calendar', () => {
+			beforeEach(async () => {
+				await openPopup();
+			});
 
-		it('should switch to the previous month when clicking the previous month button', async () => {
-			getButtonByLabel('Previous month').click();
-			await elementUpdated(element);
+			it('should initially show the current month', () => {
+				expect(getDialogTitle()).toBe('August 2023');
+			});
 
-			expect(getDialogTitle()).toBe('July 2023');
-		});
+			it('should highlight the current date', () => {
+				expect(getDateButton('2023-08-10').classList).toContain('current');
+			});
 
-		it('should switch to the next month when clicking the next month button', async () => {
-			getButtonByLabel('Next month').click();
-			await elementUpdated(element);
+			it('should switch to the previous month when clicking the previous month button', async () => {
+				getButtonByLabel('Previous month').click();
+				await elementUpdated(element);
 
-			expect(getDialogTitle()).toBe('September 2023');
-		});
+				expect(getDialogTitle()).toBe('July 2023');
+			});
 
-		describe('with single calendar', () => {
-			beforeEach(async () => {
-				element._numCalendars = 1;
+			it('should switch to the next month when clicking the next month button', async () => {
+				getButtonByLabel('Next month').click();
 				await elementUpdated(element);
+
+				expect(getDialogTitle()).toBe('September 2023');
 			});
 
-			it('should switch to the previous year when clicking the previous year button', async () => {
-				getButtonByLabel('Previous year').click();
-				await elementUpdated(element);
+			describe('with single calendar', () => {
+				beforeEach(async () => {
+					element._numCalendars = 1;
+					await elementUpdated(element);
+				});
+
+				it('should switch to the previous year when clicking the previous year button', async () => {
+					getButtonByLabel('Previous year').click();
+					await elementUpdated(element);
+
+					expect(getDialogTitle()).toBe('August 2022');
+				});
+
+				it('should switch to the next year when clicking the next year button', async () => {
+					getButtonByLabel('Next year').click();
+					await elementUpdated(element);
 
-				expect(getDialogTitle()).toBe('August 2022');
+					expect(getDialogTitle()).toBe('August 2024');
+				});
 			});
 
-			it('should switch to the next year when clicking the next year button', async () => {
-				getButtonByLabel('Next year').click();
-				await elementUpdated(element);
+			describe('with multiple calendars', () => {
+				beforeEach(async () => {
+					element._numCalendars = 2;
+					await elementUpdated(element);
+				});
 
-				expect(getDialogTitle()).toBe('August 2024');
+				it('should hide the buttons to change year', async () => {
+					expect(getButtonByLabel('Previous year')).toBe(null);
+					expect(getButtonByLabel('Next year')).toBe(null);
+				});
 			});
 		});
 
-		describe('with multiple calendars', () => {
+		describe('date grid button', () => {
 			beforeEach(async () => {
-				element._numCalendars = 2;
-				await elementUpdated(element);
+				await openPopup();
 			});
 
-			it('should hide the buttons to change year', async () => {
-				expect(getButtonByLabel('Previous year')).toBe(null);
-				expect(getButtonByLabel('Next year')).toBe(null);
-			});
-		});
-	});
+			it.each([
+				['2023-08-18', 'ArrowRight'],
+				['2023-08-16', 'ArrowLeft'],
+				['2023-08-24', 'ArrowDown'],
+				['2023-08-10', 'ArrowUp'],
+			])(
+				'should move focus to %s when pressing %s while focused on 2023-08-17',
+				async (expectedDate, key) => {
+					getDateButton('2023-08-17').focus();
+					pressKey(key);
+					await elementUpdated(element);
 
-	describe('date grid button', () => {
-		beforeEach(async () => {
-			await openPopup();
-		});
+					expect(element.shadowRoot!.activeElement).toBe(
+						getDateButton(expectedDate)
+					);
+				}
+			);
 
-		it.each([
-			['2023-08-18', 'ArrowRight'],
-			['2023-08-16', 'ArrowLeft'],
-			['2023-08-24', 'ArrowDown'],
-			['2023-08-10', 'ArrowUp'],
-		])(
-			'should move focus to %s when pressing %s while focused on 2023-08-17',
-			async (expectedDate, key) => {
-				getDateButton('2023-08-17').focus();
-				pressKey(key);
+			it('should switch to the new month when navigating to a date of a different month', async () => {
+				getDateButton('2023-08-01').focus();
+				pressKey('ArrowLeft');
 				await elementUpdated(element);
 
-				expect(element.shadowRoot!.activeElement).toBe(
-					getDateButton(expectedDate)
-				);
-			}
-		);
-
-		it('should switch to the new month when navigating to a date of a different month', async () => {
-			getDateButton('2023-08-01').focus();
-			pressKey('ArrowLeft');
-			await elementUpdated(element);
-
-			expect(getDialogTitle()).toBe('July 2023');
-		});
-
-		it('should enable default of keydown event when pressing any other key', async () => {
-			getDateButton('2023-08-01').focus();
+				expect(getDialogTitle()).toBe('July 2023');
+			});
 
-			const event = new KeyboardEvent('keydown', { key: 'a', bubbles: true });
-			event.preventDefault = jest.fn();
-			getDateButton('2023-08-01').dispatchEvent(event);
+			it('should enable default of keydown event when pressing any other key', async () => {
+				getDateButton('2023-08-01').focus();
 
-			expect(event.preventDefault).not.toHaveBeenCalled();
-		});
+				const event = new KeyboardEvent('keydown', { key: 'a', bubbles: true });
+				event.preventDefault = jest.fn();
+				getDateButton('2023-08-01').dispatchEvent(event);
 
-		it('should remain on the current date when attempting to move into a date outside valid range', async () => {
-			element.max = '2023-08-01';
-			await elementUpdated(element);
-			const focusedDate = getDateButton('2023-08-01');
-			focusedDate.focus();
+				expect(event.preventDefault).not.toHaveBeenCalled();
+			});
 
-			pressKey('ArrowRight');
+			it('should remain on the current date when attempting to move into a date outside valid range', async () => {
+				element.max = '2023-08-01';
+				await elementUpdated(element);
+				const focusedDate = getDateButton('2023-08-01');
+				focusedDate.focus();
 
-			expect(element.shadowRoot!.activeElement).toBe(focusedDate);
-		});
+				pressKey('ArrowRight');
 
-		it('should allow hovering over a date', async () => {
-			const hoverDate = getDateButton('2023-08-01');
-			hoverDate.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-			hoverDate.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
-		});
-	});
+				expect(element.shadowRoot!.activeElement).toBe(focusedDate);
+			});
 
-	describe('month picker', () => {
-		beforeEach(async () => {
-			element._numCalendars = 1;
-			await elementUpdated(element);
-			await openPopup();
-			await openMonthView();
+			it('should allow hovering over a date', async () => {
+				const hoverDate = getDateButton('2023-08-01');
+				hoverDate.dispatchEvent(
+					new MouseEvent('mouseenter', { bubbles: true })
+				);
+				hoverDate.dispatchEvent(
+					new MouseEvent('mouseleave', { bubbles: true })
+				);
+			});
 		});
 
-		it('should highlight the current month', () => {
-			expect(getMonthButton('2023-08').classList).toContain('current');
-		});
+		describe('month picker', () => {
+			beforeEach(async () => {
+				element._numCalendars = 1;
+				await elementUpdated(element);
+				await openPopup();
+				await openMonthView();
+			});
 
-		it('should highlight the selected month', async () => {
-			expect(getMonthButton('2023-08').classList).toContain('selected');
-		});
+			it('should highlight the current month', () => {
+				expect(getMonthButton('2023-08').classList).toContain('current');
+			});
 
-		it('should switch to the previous year when clicking the previous year button', async () => {
-			getButtonByLabel('Previous year').click();
-			await elementUpdated(element);
+			it('should highlight the selected month', async () => {
+				expect(getMonthButton('2023-08').classList).toContain('selected');
+			});
 
-			expect(getDialogTitle()).toBe('2022');
-		});
+			it('should switch to the previous year when clicking the previous year button', async () => {
+				getButtonByLabel('Previous year').click();
+				await elementUpdated(element);
 
-		it('should switch to the next year when clicking the next year button', async () => {
-			getButtonByLabel('Next year').click();
-			await elementUpdated(element);
+				expect(getDialogTitle()).toBe('2022');
+			});
 
-			expect(getDialogTitle()).toBe('2024');
-		});
+			it('should switch to the next year when clicking the next year button', async () => {
+				getButtonByLabel('Next year').click();
+				await elementUpdated(element);
 
-		it('should select a month when clicking on a month', async () => {
-			getMonthButton('2023-01').click();
-			await elementUpdated(element);
+				expect(getDialogTitle()).toBe('2024');
+			});
 
-			expect(getDialogTitle()).toBe('January 2023');
-		});
+			it('should select a month when clicking on a month', async () => {
+				getMonthButton('2023-01').click();
+				await elementUpdated(element);
 
-		it('should close the month picker when clicking on the title action', async () => {
-			getTitleAction().click();
-			await elementUpdated(element);
+				expect(getDialogTitle()).toBe('January 2023');
+			});
 
-			expect(element.shadowRoot!.querySelector('.month-grid')).toBeNull();
-		});
-	});
+			it('should close the month picker when clicking on the title action', async () => {
+				getTitleAction().click();
+				await elementUpdated(element);
 
-	describe('month grid button', () => {
-		beforeEach(async () => {
-			element._numCalendars = 1;
-			await elementUpdated(element);
-			await openPopup();
-			await openMonthView();
+				expect(element.shadowRoot!.querySelector('.month-grid')).toBeNull();
+			});
 		});
 
-		it.each([
-			['2023-08', 'ArrowRight'],
-			['2023-06', 'ArrowLeft'],
-			['2023-11', 'ArrowDown'],
-			['2023-03', 'ArrowUp'],
-		])(
-			'should move focus to %s when pressing %s while focused on 2023-07',
-			async (expectedDate, key) => {
-				getMonthButton('2023-07').focus();
-				pressKey(key);
+		describe('month grid button', () => {
+			beforeEach(async () => {
+				element._numCalendars = 1;
 				await elementUpdated(element);
+				await openPopup();
+				await openMonthView();
+			});
 
-				expect(element.shadowRoot!.activeElement).toBe(
-					getMonthButton(expectedDate)
-				);
-			}
-		);
+			it.each([
+				['2023-08', 'ArrowRight'],
+				['2023-06', 'ArrowLeft'],
+				['2023-11', 'ArrowDown'],
+				['2023-03', 'ArrowUp'],
+			])(
+				'should move focus to %s when pressing %s while focused on 2023-07',
+				async (expectedDate, key) => {
+					getMonthButton('2023-07').focus();
+					pressKey(key);
+					await elementUpdated(element);
 
-		it('should switch to the new year when navigating to a month of a different year', async () => {
-			getMonthButton('2023-01').focus();
-			pressKey('ArrowLeft');
-			await elementUpdated(element);
+					expect(element.shadowRoot!.activeElement).toBe(
+						getMonthButton(expectedDate)
+					);
+				}
+			);
 
-			expect(getDialogTitle()).toBe('2022');
-		});
+			it('should switch to the new year when navigating to a month of a different year', async () => {
+				getMonthButton('2023-01').focus();
+				pressKey('ArrowLeft');
+				await elementUpdated(element);
 
-		it('should enable default of keydown event when pressing any other key', async () => {
-			getMonthButton('2023-01').focus();
+				expect(getDialogTitle()).toBe('2022');
+			});
 
-			const event = new KeyboardEvent('keydown', { key: 'a', bubbles: true });
-			event.preventDefault = jest.fn();
-			getMonthButton('2023-01').dispatchEvent(event);
+			it('should enable default of keydown event when pressing any other key', async () => {
+				getMonthButton('2023-01').focus();
 
-			expect(event.preventDefault).not.toHaveBeenCalled();
-		});
+				const event = new KeyboardEvent('keydown', { key: 'a', bubbles: true });
+				event.preventDefault = jest.fn();
+				getMonthButton('2023-01').dispatchEvent(event);
 
-		it('should remain on the current month when attempting to move into a month outside valid range', async () => {
-			element.max = '2023-08-01';
-			await elementUpdated(element);
-			getMonthButton('2023-08').focus();
+				expect(event.preventDefault).not.toHaveBeenCalled();
+			});
 
-			pressKey('ArrowRight');
+			it('should remain on the current month when attempting to move into a month outside valid range', async () => {
+				element.max = '2023-08-01';
+				await elementUpdated(element);
+				getMonthButton('2023-08').focus();
 
-			expect(element.shadowRoot!.activeElement).toBe(getMonthButton('2023-08'));
-		});
-	});
+				pressKey('ArrowRight');
 
-	describe('dialog footer', () => {
-		beforeEach(async () => {
-			await openPopup();
+				expect(element.shadowRoot!.activeElement).toBe(
+					getMonthButton('2023-08')
+				);
+			});
 		});
 
-		it('should close the dialog when clicking the ok button', async () => {
-			getButtonByLabel('OK').click();
-			await elementUpdated(element);
+		describe('dialog footer', () => {
+			beforeEach(async () => {
+				await openPopup();
+			});
 
-			expect(popup.open).toBe(false);
-		});
+			it('should close the dialog when clicking the ok button', async () => {
+				getButtonByLabel('OK').click();
+				await elementUpdated(element);
 
-		it('should close the dialog when clicking the clear button', async () => {
-			getButtonByLabel('Clear').click();
-			await elementUpdated(element);
+				expect(popup.open).toBe(false);
+			});
 
-			expect(popup.open).toBe(false);
-		});
+			it('should close the dialog when clicking the clear button', async () => {
+				getButtonByLabel('Clear').click();
+				await elementUpdated(element);
 
+				expect(popup.open).toBe(false);
+			});
 
-		it('should fire a clear-click event when clear button is clicked', async () => {
-			const spy = jest.fn();
-			element.addEventListener('clear-click', spy);
-			getButtonByLabel('Clear').click();
+			it('should fire a clear-click event when clear button is clicked', async () => {
+				const spy = jest.fn();
+				element.addEventListener('clear-click', spy);
+				getButtonByLabel('Clear').click();
 
-			expect(spy).toHaveBeenCalledTimes(1);
+				expect(spy).toHaveBeenCalledTimes(1);
+			});
 		});
-	});
-
-	describe('form association', () => {
-		const fieldValue = '2020-02-02';
-		const formId = 'test-form-id';
-		const fieldName = 'test-field';
-		let formWrapper: HTMLElement;
 
-		beforeEach(() => {
-			formWrapper = document.createElement('div');
-			document.body.appendChild(formWrapper);
-		});
+		describe('form association', () => {
+			const fieldValue = '2020-02-02';
+			const formId = 'test-form-id';
+			const fieldName = 'test-field';
+			let formWrapper: HTMLElement;
 
-		afterEach(() => {
-			formWrapper.remove();
-		});
+			beforeEach(() => {
+				formWrapper = document.createElement('div');
+				document.body.appendChild(formWrapper);
+			});
 
-		it('should attach to closest form', async () => {
-			const { form: formElement } = createFormHTML<DatePickerBase>({
-				componentTagName: COMPONENT_TAG,
-				fieldName,
-				fieldValue,
-				formId,
-				formWrapper,
+			afterEach(() => {
+				formWrapper.remove();
 			});
 
-			const submitPromise = listenToFormSubmission(formElement);
-			formElement.requestSubmit();
+			it('should attach to closest form', async () => {
+				const { form: formElement } = createFormHTML<DatePickerBase>({
+					componentTagName: COMPONENT_TAG,
+					fieldName,
+					fieldValue,
+					formId,
+					formWrapper,
+				});
 
-			(await submitPromise).forEach((formDataValue, formDataKey) => {
-				expect(formDataKey).toEqual(fieldName);
-				expect(formDataValue).toEqual(fieldValue);
-			});
-		});
+				const submitPromise = listenToFormSubmission(formElement);
+				formElement.requestSubmit();
 
-		it('should attach to form when given form id', async () => {
-			const { otherForm } = createFormHTML<TextField>({
-				fieldName,
-				fieldValue,
-				formId,
-				otherFormId: 'otherFormId',
-				componentTagName: COMPONENT_TAG,
-				formWrapper,
+				(await submitPromise).forEach((formDataValue, formDataKey) => {
+					expect(formDataKey).toEqual(fieldName);
+					expect(formDataValue).toEqual(fieldValue);
+				});
 			});
 
-			const submitPromise = listenToFormSubmission(otherForm);
-			otherForm.requestSubmit();
+			it('should attach to form when given form id', async () => {
+				const { otherForm } = createFormHTML<TextField>({
+					fieldName,
+					fieldValue,
+					formId,
+					otherFormId: 'otherFormId',
+					componentTagName: COMPONENT_TAG,
+					formWrapper,
+				});
 
-			(await submitPromise).forEach((formDataValue, formDataKey) => {
-				expect(formDataKey).toEqual(fieldName);
-				expect(formDataValue).toEqual(fieldValue);
+				const submitPromise = listenToFormSubmission(otherForm);
+				otherForm.requestSubmit();
+
+				(await submitPromise).forEach((formDataValue, formDataKey) => {
+					expect(formDataKey).toEqual(fieldName);
+					expect(formDataValue).toEqual(fieldValue);
+				});
 			});
 		});
-	});
-});
+	}
+);
diff --git a/libs/components/src/shared/date-picker/date-picker-base.template.ts b/libs/components/src/shared/date-picker/date-picker-base.template.ts
index 68d3e96f61..60904274cd 100644
--- a/libs/components/src/shared/date-picker/date-picker-base.template.ts
+++ b/libs/components/src/shared/date-picker/date-picker-base.template.ts
@@ -13,29 +13,36 @@ import type { CalendarGridDate, Weekday } from './calendar/calendarGrid';
 import { areMonthsEqual, monthToStr } from './calendar/month';
 import type { MonthPickerGridCell } from './calendar/monthPickerGrid';
 import type { DatePickerBase } from './date-picker-base';
-import type { CalendarSegment, MonthPickerSegment, Segment } from './calendar/segment';
+import type {
+	CalendarSegment,
+	MonthPickerSegment,
+	Segment,
+} from './calendar/segment';
 
 function renderDialogHeader(context: ElementDefinitionContext) {
 	const buttonTag = context.tagFor(Button);
 
 	return html<Segment, DatePickerBase>`<div class="header">
 		${when(
-		(x) => x.prevYearButton,
-		html<Segment, DatePickerBase>`
+			(x) => x.prevYearButton,
+			html<Segment, DatePickerBase>`
 					<${buttonTag}
 						tabindex="1"
 						class="vwc-button"
 						size="super-condensed"
-						icon="${(_, c) => c.parent._inMonthPicker ? 'chevron-left-line' : 'double-chevron-left-line'}"
+						icon="${(_, c) =>
+							c.parent._inMonthPicker
+								? 'chevron-left-line'
+								: 'double-chevron-left-line'}"
 						aria-label="${(_, c) => c.parent.locale.datePicker.prevYearLabel}"
 						?disabled="${(_, c) => c.parent._isPrevYearDisabled}"
 						@click="${(_, c) => c.parent._onPrevYearClick()}"
 					></${buttonTag}>
 		`
-	)}
+		)}
 		${when(
-		(x) => x.prevMonthButton,
-		html<Segment, DatePickerBase>`
+			(x) => x.prevMonthButton,
+			html<Segment, DatePickerBase>`
 					<${buttonTag}
 						tabindex="1"
 						class="vwc-button"
@@ -46,33 +53,39 @@ function renderDialogHeader(context: ElementDefinitionContext) {
 						@click="${(_, c) => c.parent._onPrevMonthClick()}"
 					></${buttonTag}>
 		`
-	)}
+		)}
 		<div class="title">
-			${when(x => x.titleClickable, html<Segment, DatePickerBase>`
-			<button
-				tabindex="1"
-				id="${x => `grid-label-${x.id}`}"
-				class="title-action button"
-				aria-live="polite"
-				@click="${(_, c) => c.parent._onTitleActionClick()}"
-			>
-				${(x) => x.title}
-			</button>
-			`)}
-			${when(x => !x.titleClickable, html<Segment, DatePickerBase>`
-			<div
-				id="${x => `grid-label-${x.id}`}"
-				class="title-action"
-				aria-live="polite"
-			>
-				${(x) => x.title}
-			</div>
-			`)}
+			${when(
+				(x) => x.titleClickable,
+				html<Segment, DatePickerBase>`
+					<button
+						tabindex="1"
+						id="${(x) => `grid-label-${x.id}`}"
+						class="title-action button"
+						aria-live="polite"
+						@click="${(_, c) => c.parent._onTitleActionClick()}"
+					>
+						${(x) => x.title}
+					</button>
+				`
+			)}
+			${when(
+				(x) => !x.titleClickable,
+				html<Segment, DatePickerBase>`
+					<div
+						id="${(x) => `grid-label-${x.id}`}"
+						class="title-action"
+						aria-live="polite"
+					>
+						${(x) => x.title}
+					</div>
+				`
+			)}
 		</div>
 
 		${when(
-		(x) => x.nextMonthButton,
-		html<Segment, DatePickerBase>`
+			(x) => x.nextMonthButton,
+			html<Segment, DatePickerBase>`
 				<${buttonTag}
 					tabindex="1"
 					class="vwc-button"
@@ -83,37 +96,39 @@ function renderDialogHeader(context: ElementDefinitionContext) {
 					@click="${(_, c) => c.parent._onNextMonthClick()}"
 				></${buttonTag}>
 			`
-	)}
+		)}
 		${when(
-		(x) => x.nextYearButton,
-		html<Segment, DatePickerBase>`
+			(x) => x.nextYearButton,
+			html<Segment, DatePickerBase>`
 				<${buttonTag}
 					tabindex="1"
 					class="vwc-button"
 					size="super-condensed"
-					icon="${(_, c) => c.parent._inMonthPicker ? 'chevron-right-line' : 'double-chevron-right-line'}"
+					icon="${(_, c) =>
+						c.parent._inMonthPicker
+							? 'chevron-right-line'
+							: 'double-chevron-right-line'}"
 					aria-label="${(_, c) => c.parent.locale.datePicker.nextYearLabel}"
 					?disabled="${(_, c) => c.parent._isNextYearDisabled}"
 					@click="${(_, c) => c.parent._onNextYearClick()}"
 				></${buttonTag}>
 			`
-	)}
+		)}
 	</div>`;
 }
 
-
 function renderCalendarGrid(context: ElementDefinitionContext) {
 	const dividerTag = context.tagFor(Divider);
 
 	return html<CalendarSegment, DatePickerBase>`<div
 		class="calendar"
 		role="grid"
-		aria-labelledby="${x => `grid-label-${x.id}`}"
+		aria-labelledby="${(x) => `grid-label-${x.id}`}"
 	>
 		<div class="calendar-weekdays" role="row">
 			${repeat(
-		(x) => x.calendar.weekdays,
-		html<Weekday>`
+				(x) => x.calendar.weekdays,
+				html<Weekday>`
 					<div
 						class="calendar-weekday"
 						role="columnheader"
@@ -122,61 +137,91 @@ function renderCalendarGrid(context: ElementDefinitionContext) {
 						${(x) => x.shortName}
 					</div>
 				`
-	)}
+			)}
 		</div>
 		<${dividerTag} class="calendar-separator" role="presentation"></${dividerTag}>
 		${repeat(
-		(x) => x.calendar.grid,
-		html<CalendarGridDate[]>`
-				<div class="calendar-week" role="row">
-					${repeat(
-		(x) => x,
-		html<CalendarGridDate>`
-			${when((x, c) =>
-		c.parentContext.parentContext.parent._hideDatesOutsideMonth && x.isOutsideMonth,
-	html<CalendarGridDate>`<div class="calendar-day"></div>`
-	)}
-			${when((x, c) =>
-		!c.parentContext.parentContext.parent._hideDatesOutsideMonth || !x.isOutsideMonth,
-	html<CalendarGridDate>`
-		<span role="gridcell">
-			<button
-							class="${(x, c) =>
-		classNames(
-			'calendar-day',
-			'button',
-			['current', x.date === c.parentContext.parentContext.parent._currentDate],
-			['selected', c.parentContext.parentContext.parent._isDateSelected(x.date)],
-			['range', c.parentContext.parentContext.parent._isDateInSelectedRange(x.date)],
-			['start', c.parentContext.parentContext.parent._isDateRangeStart(x.date)],
-			['end', c.parentContext.parentContext.parent._isDateRangeEnd(x.date)],
-			['outside-month', x.isOutsideMonth]
-		)}"
-							?disabled="${(x, c) =>
-		!c.parentContext.parentContext.parent._isDateInValidRange(x.date)}"
-							tabindex="${(x, c) =>
-		x.date === c.parentContext.parentContext.parent._tabbableDate ? 2 : -1}"
-							aria-selected="${(x, c) =>
-		c.parentContext.parentContext.parent._isDateAriaSelected(x.date)}"
-							data-date="${(x) => x.date}"
-							@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(x.date)}"
-							@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(x.date)}"
-							@mouseenter="${(x, c) => c.parentContext.parentContext.parent._onDateMouseEnter(x.date)}"
-							@mouseleave="${(x, c) => c.parentContext.parentContext.parent._onDateMouseLeave(x.date)}"
-							@keydown="${(x, c) =>
-		c.parentContext.parentContext.parent._onDateKeydown(
-			x.date,
-			c.event as KeyboardEvent
-		)}"
-						>
-							${(x) => x.label}
-						</button>
-		</span>`
-	)}
+			(x) => x.calendar.grid,
+			html<CalendarGridDate[]>` <div class="calendar-week" role="row">
+				${repeat(
+					(x) => x,
+					html<CalendarGridDate>`
+			${when(
+				(x, c) =>
+					c.parentContext.parentContext.parent._hideDatesOutsideMonth &&
+					x.isOutsideMonth,
+				html<CalendarGridDate>`<div class="calendar-day"></div>`
+			)}
+			${when(
+				(x, c) =>
+					!c.parentContext.parentContext.parent._hideDatesOutsideMonth ||
+					!x.isOutsideMonth,
+				html<CalendarGridDate>` <span role="gridcell">
+					<button
+						class="${(x, c) =>
+							classNames(
+								'calendar-day',
+								'button',
+								[
+									'current',
+									x.date === c.parentContext.parentContext.parent._currentDate,
+								],
+								[
+									'selected',
+									c.parentContext.parentContext.parent._isDateSelected(x.date),
+								],
+								[
+									'range',
+									c.parentContext.parentContext.parent._isDateInSelectedRange(
+										x.date
+									),
+								],
+								[
+									'start',
+									c.parentContext.parentContext.parent._isDateRangeStart(
+										x.date
+									),
+								],
+								[
+									'end',
+									c.parentContext.parentContext.parent._isDateRangeEnd(x.date),
+								],
+								['outside-month', x.isOutsideMonth]
+							)}"
+						?disabled="${(x, c) =>
+							!c.parentContext.parentContext.parent._isDateInValidRange(
+								x.date
+							)}"
+						tabindex="${(x, c) =>
+							x.date === c.parentContext.parentContext.parent._tabbableDate
+								? 2
+								: -1}"
+						aria-selected="${(x, c) =>
+							c.parentContext.parentContext.parent._isDateAriaSelected(x.date)}"
+						data-date="${(x) => x.date}"
+						@click="${(x, c) =>
+							c.parentContext.parentContext.parent._onDateClick(x.date)}"
+						@focus="${(x, c) =>
+							c.parentContext.parentContext.parent._onDateFocus(x.date)}"
+						@mouseenter="${(x, c) =>
+							c.parentContext.parentContext.parent._onDateMouseEnter(x.date)}"
+						@mouseleave="${(x, c) =>
+							c.parentContext.parentContext.parent._onDateMouseLeave(x.date)}"
+						@keydown="${(x, c) =>
+							c.parentContext.parentContext.parent._onDateKeydown(
+								x.date,
+								c.event as KeyboardEvent
+							)}"
+					>
+						${(x) => x.label}
+					</button>
+				</span>`
+			)}
 				</div>
 			`
-	)}
-	</div>`)}`;
+				)}
+			</div>`
+		)}`;
 }
 function renderMonthPickerGrid(context: ElementDefinitionContext) {
 	const dividerTag = context.tagFor(Divider);
@@ -192,72 +237,84 @@ function renderMonthPickerGrid(context: ElementDefinitionContext) {
 		aria-labelledby="grid-label"
 	>
 		${repeat(
-		(x) => x.months,
-		html<MonthPickerGridCell[]>`
+			(x) => x.months,
+			html<MonthPickerGridCell[]>`
 				<div class="months-row" role="row">
 					${repeat(
-		(x) => x,
-		html<MonthPickerGridCell>`
-			<span role="gridcell">
-							<button
-								class="${(x, c) =>
-		classNames(
-			'month',
-			'button',
-			[
-				'current',
-				areMonthsEqual(
-					x.month,
-					c.parentContext.parentContext.parent._currentMonth
-				),
-			],
-			[
-				'selected',
-				areMonthsEqual(
-					x.month,
-					c.parentContext.parentContext.parent._selectedMonth
-				),
-			]
-		)}"
-								tabindex="${(x, c) =>
-		c.parentContext.parentContext.parent._tabbableMonth &&
-									areMonthsEqual(x.month, c.parentContext.parentContext.parent._tabbableMonth)
-			? 2
-			: -1}"
-								aria-label="${(x) => x.monthName}"
-								aria-selected="${(x, c) =>
-		areMonthsEqual(
-			x.month,
-			c.parentContext.parentContext.parent._selectedMonth
-		)}"
-								data-month="${(x) => monthToStr(x.month)}"
-								?disabled="${(x, c) =>
-		!c.parentContext.parentContext.parent._isMonthInValidRange(x.month)}"
-								@click="${(x, c) =>
-		c.parentContext.parentContext.parent._onMonthClick(x.month)}"
-								@focus="${(x, c) =>
-		c.parentContext.parentContext.parent._onMonthFocus(x.month)}"
-								@keydown="${(x, c) =>
-		c.parentContext.parentContext.parent._onMonthKeydown(
-			x.month,
-			c.event as KeyboardEvent
-		)}"
-							>
-								${(x) => x.label}
-							</button>
-				</span>
+						(x) => x,
+						html<MonthPickerGridCell>`
+							<span role="gridcell">
+								<button
+									class="${(x, c) =>
+										classNames(
+											'month',
+											'button',
+											[
+												'current',
+												areMonthsEqual(
+													x.month,
+													c.parentContext.parentContext.parent._currentMonth
+												),
+											],
+											[
+												'selected',
+												areMonthsEqual(
+													x.month,
+													c.parentContext.parentContext.parent._selectedMonth
+												),
+											]
+										)}"
+									tabindex="${(x, c) =>
+										c.parentContext.parentContext.parent._tabbableMonth &&
+										areMonthsEqual(
+											x.month,
+											c.parentContext.parentContext.parent._tabbableMonth
+										)
+											? 2
+											: -1}"
+									aria-label="${(x) => x.monthName}"
+									aria-selected="${(x, c) =>
+										areMonthsEqual(
+											x.month,
+											c.parentContext.parentContext.parent._selectedMonth
+										)}"
+									data-month="${(x) => monthToStr(x.month)}"
+									?disabled="${(x, c) =>
+										!c.parentContext.parentContext.parent._isMonthInValidRange(
+											x.month
+										)}"
+									@click="${(x, c) =>
+										c.parentContext.parentContext.parent._onMonthClick(
+											x.month
+										)}"
+									@focus="${(x, c) =>
+										c.parentContext.parentContext.parent._onMonthFocus(
+											x.month
+										)}"
+									@keydown="${(x, c) =>
+										c.parentContext.parentContext.parent._onMonthKeydown(
+											x.month,
+											c.event as KeyboardEvent
+										)}"
+								>
+									${(x) => x.label}
+								</button>
+							</span>
 						`
-	)}
+					)}
 				</div>
 			`
-	)}
+		)}
 	</div>`;
 }
 
 export const DatePickerBaseTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
-) => ViewTemplate<DatePickerBase> = (context: ElementDefinitionContext, _: FoundationElementDefinition) => {
+) => ViewTemplate<DatePickerBase> = (
+	context: ElementDefinitionContext,
+	_: FoundationElementDefinition
+) => {
 	const popupTag = context.tagFor(Popup);
 	const textFieldTag = context.tagFor(TextField);
 	const buttonTag = context.tagFor(Button);
@@ -296,23 +353,24 @@ export const DatePickerBaseTemplate: (
 					placement="bottom-start"
 					class="popup">
 			<div class="dialog" role="dialog" ${ref(
-		'_dialogEl'
-	)} aria-modal="true" aria-label="${(x) =>
-	x.locale.datePicker.chooseDateLabel}">
+				'_dialogEl'
+			)} aria-modal="true" aria-label="${(x) =>
+		x.locale.datePicker.chooseDateLabel}">
 				<div class="segments">
-					${repeat(x => x._segments,
-		html<Segment>`
-					<div class="segment">
-				${renderDialogHeader(context)}
-				${when(
-		(x) => x.type === 'month-picker',
-		html<DatePickerBase>`${renderMonthPickerGrid(context)}`
-	)}
-				${when(
-		(x) => x.type === 'calendar',
-		html<DatePickerBase>`${renderCalendarGrid(context)}`
-	)}
-					</div>`)}
+					${repeat(
+						(x) => x._segments,
+						html<Segment>` <div class="segment">
+							${renderDialogHeader(context)}
+							${when(
+								(x) => x.type === 'month-picker',
+								html<DatePickerBase>`${renderMonthPickerGrid(context)}`
+							)}
+							${when(
+								(x) => x.type === 'calendar',
+								html<DatePickerBase>`${renderCalendarGrid(context)}`
+							)}
+						</div>`
+					)}
 				</div>
 				<div class="footer">
 					<${buttonTag}
diff --git a/libs/components/src/shared/date-picker/date-picker-base.ts b/libs/components/src/shared/date-picker/date-picker-base.ts
index 90f328de58..ba335c64f8 100644
--- a/libs/components/src/shared/date-picker/date-picker-base.ts
+++ b/libs/components/src/shared/date-picker/date-picker-base.ts
@@ -1,15 +1,38 @@
 import { applyMixins } from '@microsoft/fast-foundation';
-import { attr, DOM, observable, type ValueConverter, volatile } from '@microsoft/fast-element';
+import {
+	attr,
+	DOM,
+	observable,
+	type ValueConverter,
+	volatile,
+} from '@microsoft/fast-element';
 import type { TextField } from '../../lib/text-field/text-field';
 import type { Button } from '../../lib/button/button';
 import { FormElementHelperText, Localized, TrappedFocus } from '../patterns';
-import { addDays, compareDateStr, currentDateStr, type DateStr, isValidDateStr } from './calendar/dateStr';
-import { addMonths, compareMonths, getCurrentMonth, type Month, monthOfDate, monthToStr } from './calendar/month';
+import {
+	addDays,
+	compareDateStr,
+	currentDateStr,
+	type DateStr,
+	isValidDateStr,
+} from './calendar/dateStr';
+import {
+	addMonths,
+	compareMonths,
+	getCurrentMonth,
+	type Month,
+	monthOfDate,
+	monthToStr,
+} from './calendar/month';
 import { buildCalendarGrid } from './calendar/calendarGrid';
 import { buildMonthPickerGrid, MonthsPerRow } from './calendar/monthPickerGrid';
 import { yearOfDate } from './calendar/year';
 import { FormAssociatedDatePickerBase } from './date-picker-base.form-associated';
-import type { CalendarSegment, MonthPickerSegment, Segment } from './calendar/segment';
+import type {
+	CalendarSegment,
+	MonthPickerSegment,
+	Segment,
+} from './calendar/segment';
 
 /// Converter ensures that the value is always a valid date string or empty string
 const ValidDateFilter: ValueConverter = {
@@ -43,7 +66,7 @@ export abstract class DatePickerBase extends FormAssociatedDatePickerBase {
 	 * HTML Attribute: min
 	 */
 	@attr({ converter: ValidDateFilter })
-		min: string;
+	min: string;
 
 	/**
 	 * @internal
@@ -63,7 +86,7 @@ export abstract class DatePickerBase extends FormAssociatedDatePickerBase {
 	 * HTML Attribute: max
 	 */
 	@attr({ converter: ValidDateFilter })
-		max: string;
+	max: string;
 
 	/**
 	 * @internal
@@ -102,7 +125,7 @@ export abstract class DatePickerBase extends FormAssociatedDatePickerBase {
 	 * HTML Attribute: readonly
 	 */
 	@attr({ attribute: 'readonly', mode: 'boolean' })
-		readOnly: boolean = false;
+	readOnly: boolean = false;
 
 	/**
 	 * @internal
@@ -139,11 +162,14 @@ export abstract class DatePickerBase extends FormAssociatedDatePickerBase {
 	protected _adjustSelectedMonthToEnsureVisibilityOf(date: DateStr) {
 		const month = monthOfDate(date);
 		const firstDisplayedMonth = this._selectedMonth;
-		const lastDisplayedMonth = addMonths(this._selectedMonth, this._numCalendars - 1);
-		if(compareMonths(month, firstDisplayedMonth) < 0) {
+		const lastDisplayedMonth = addMonths(
+			this._selectedMonth,
+			this._numCalendars - 1
+		);
+		if (compareMonths(month, firstDisplayedMonth) < 0) {
 			this._selectedMonth = month;
 			return true;
-		} else if(compareMonths(month, lastDisplayedMonth) > 0) {
+		} else if (compareMonths(month, lastDisplayedMonth) > 0) {
 			this._selectedMonth = addMonths(month, 1 - this._numCalendars);
 			return true;
 		}
@@ -260,7 +286,7 @@ export abstract class DatePickerBase extends FormAssociatedDatePickerBase {
 
 		const path = event.composedPath();
 		const elementsToIgnoreClicksOn = [this._dialogEl, this._calendarButtonEl];
-		if (!elementsToIgnoreClicksOn.some(element => path.includes(element))) {
+		if (!elementsToIgnoreClicksOn.some((element) => path.includes(element))) {
 			this._closePopup(false);
 		}
 	};
@@ -294,13 +320,16 @@ export abstract class DatePickerBase extends FormAssociatedDatePickerBase {
 			return false;
 		}
 
-		if (this._trappedFocus(
-			event,
-			() => this.shadowRoot!.querySelectorAll(`
+		if (
+			this._trappedFocus(
+				event,
+				() =>
+					this.shadowRoot!.querySelectorAll(`
 				.dialog .button:not(:disabled),
 				.dialog .vwc-button:not(:disabled)
 			`) as NodeListOf<HTMLElement>
-		)) {
+			)
+		) {
 			return false;
 		}
 
@@ -364,7 +393,9 @@ export abstract class DatePickerBase extends FormAssociatedDatePickerBase {
 
 			DOM.processUpdates();
 
-			const tabbableDate = this.shadowRoot!.querySelector(`[data-date="${this._tabbableDate}"]`) as HTMLButtonElement;
+			const tabbableDate = this.shadowRoot!.querySelector(
+				`[data-date="${this._tabbableDate}"]`
+			) as HTMLButtonElement;
 			tabbableDate.focus();
 		}
 	}
@@ -489,7 +520,7 @@ export abstract class DatePickerBase extends FormAssociatedDatePickerBase {
 				months: buildMonthPickerGrid(
 					this._monthPickerYear!,
 					this.locale.datePicker
-				)
+				),
 			});
 		} else {
 			for (let i = 0; i < this._numCalendars; i++) {
@@ -500,13 +531,15 @@ export abstract class DatePickerBase extends FormAssociatedDatePickerBase {
 				segments.push({
 					id: i,
 					type: 'calendar',
-					title: `${this.locale.datePicker.months.name[month.month]} ${month.year}`,
+					title: `${this.locale.datePicker.months.name[month.month]} ${
+						month.year
+					}`,
 					titleClickable: isSingle,
 					prevYearButton: isFirst && isSingle,
 					prevMonthButton: isFirst,
 					nextMonthButton: isLast,
 					nextYearButton: isLast && isSingle,
-					calendar: buildCalendarGrid(month, this.locale.datePicker)
+					calendar: buildCalendarGrid(month, this.locale.datePicker),
 				});
 			}
 		}
@@ -626,11 +659,10 @@ export abstract class DatePickerBase extends FormAssociatedDatePickerBase {
 	@volatile
 	get _tabbableDate(): DateStr | null {
 		const datesInSegments = this._segments
-			.filter((segment): segment is CalendarSegment => segment.type === 'calendar')
-			.flatMap(segment =>
-				segment.calendar.grid.flat()
-					.map(d => d.date)
-			);
+			.filter(
+				(segment): segment is CalendarSegment => segment.type === 'calendar'
+			)
+			.flatMap((segment) => segment.calendar.grid.flat().map((d) => d.date));
 
 		const candidates = [
 			this._lastFocussedDate,
@@ -640,7 +672,10 @@ export abstract class DatePickerBase extends FormAssociatedDatePickerBase {
 		];
 
 		const firstVisibleMonth = this._selectedMonth;
-		const lastVisibleMonth = addMonths(this._selectedMonth, this._numCalendars - 1);
+		const lastVisibleMonth = addMonths(
+			this._selectedMonth,
+			this._numCalendars - 1
+		);
 
 		// Find valid candidate
 		return (
@@ -755,7 +790,9 @@ export abstract class DatePickerBase extends FormAssociatedDatePickerBase {
 		return (
 			candidates.find(
 				(month) =>
-					month && month.year === this._monthPickerYear && this._isMonthInValidRange(month)
+					month &&
+					month.year === this._monthPickerYear &&
+					this._isMonthInValidRange(month)
 			) ?? null
 		);
 	}
@@ -779,6 +816,6 @@ export abstract class DatePickerBase extends FormAssociatedDatePickerBase {
 
 export interface DatePickerBase
 	extends Localized,
-	FormElementHelperText,
-	TrappedFocus {}
+		FormElementHelperText,
+		TrappedFocus {}
 applyMixins(DatePickerBase, Localized, FormElementHelperText, TrappedFocus);
diff --git a/libs/components/src/shared/design-system/index.spec.ts b/libs/components/src/shared/design-system/index.spec.ts
index f7e427521f..4487f5f99f 100644
--- a/libs/components/src/shared/design-system/index.spec.ts
+++ b/libs/components/src/shared/design-system/index.spec.ts
@@ -3,7 +3,7 @@ import { badgeDefinition } from '../../lib/badge/definition';
 import { designSystem, registerFactory } from '.';
 
 describe('design system', () => {
-	it('should export \'designSystem\'', async () => {
+	it("should export 'designSystem'", async () => {
 		expect(designSystem).toBeDefined();
 	});
 
@@ -18,11 +18,16 @@ describe('design system', () => {
 		await Promise.all(
 			elementsDefinitions.map(({ definition }) =>
 				customElements.whenDefined(`${customPrefix}-${definition.baseName}`)
-			));
+			)
+		);
 
 		elementsDefinitions.forEach(({ definition }) => {
-			expect(customElements.get(`${customPrefix}-${definition.baseName}`)).toBeDefined();
-			expect(customElements.get(`${defaultPrefix}-${definition.baseName}`)).toBeUndefined();
+			expect(
+				customElements.get(`${customPrefix}-${definition.baseName}`)
+			).toBeDefined();
+			expect(
+				customElements.get(`${defaultPrefix}-${definition.baseName}`)
+			).toBeUndefined();
 		});
 	});
 
@@ -36,10 +41,13 @@ describe('design system', () => {
 		await Promise.all(
 			elementsDefinitions.map(({ definition }) =>
 				customElements.whenDefined(`${defaultPrefix}-${definition.baseName}`)
-			));
+			)
+		);
 
 		elementsDefinitions.forEach(({ definition }) => {
-			expect(customElements.get(`${defaultPrefix}-${definition.baseName}`)).toBeDefined();
+			expect(
+				customElements.get(`${defaultPrefix}-${definition.baseName}`)
+			).toBeDefined();
 		});
 	});
 });
diff --git a/libs/components/src/shared/design-system/index.ts b/libs/components/src/shared/design-system/index.ts
index 346ce6be6f..a84f7bc260 100644
--- a/libs/components/src/shared/design-system/index.ts
+++ b/libs/components/src/shared/design-system/index.ts
@@ -9,4 +9,7 @@ const defaultPrefix = 'vwc';
  */
 export const designSystem = DesignSystem.getOrCreate();
 
-export const registerFactory = (registries: any[]) => (prefix = defaultPrefix) => designSystem.withPrefix(prefix).register(...registries);
+export const registerFactory =
+	(registries: any[]) =>
+	(prefix = defaultPrefix) =>
+		designSystem.withPrefix(prefix).register(...registries);
diff --git a/libs/components/src/shared/patterns/affix.spec.ts b/libs/components/src/shared/patterns/affix.spec.ts
index b6da42c1eb..ee1354c1dd 100644
--- a/libs/components/src/shared/patterns/affix.spec.ts
+++ b/libs/components/src/shared/patterns/affix.spec.ts
@@ -1,10 +1,10 @@
-import {AffixIconWithTrailing} from './affix';
+import { AffixIconWithTrailing } from './affix';
 
 describe('affix', function () {
 	describe('affixWithTrailing', function () {
-		it('should resolve', async function() {
+		it('should resolve', async function () {
 			const affixWithTrailing = new AffixIconWithTrailing();
 			expect(affixWithTrailing).toBeTruthy();
-		}); 
+		});
 	});
 });
diff --git a/libs/components/src/shared/patterns/affix.ts b/libs/components/src/shared/patterns/affix.ts
index d82d3ebe4e..9b9fd0f873 100644
--- a/libs/components/src/shared/patterns/affix.ts
+++ b/libs/components/src/shared/patterns/affix.ts
@@ -1,22 +1,22 @@
-import {attr, html, slotted} from '@microsoft/fast-element';
+import { attr, html, slotted } from '@microsoft/fast-element';
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
 import { Icon } from '../../lib/icon/icon';
 
 /**
-	* A mixin class implementing prefix elements.
-	* These are generally used to decorate text elements with icons or other visual indicators.
-	*
-	* @public
-	*/
+ * A mixin class implementing prefix elements.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ *
+ * @public
+ */
 export class AffixIcon {
 	/**
-		* A decorative icon the custom element should have.
-		*
-		* @public
-		* @remarks
-		* HTML Attribute: icon
-		*/
+	 * A decorative icon the custom element should have.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: icon
+	 */
 	@attr icon?: string;
 	/**
 	 *
@@ -24,41 +24,46 @@ export class AffixIcon {
 	 *
 	 * @internal
 	 */
-	@attr({mode: 'fromView'}) iconSlottedContent?: HTMLElement[];
+	@attr({ mode: 'fromView' }) iconSlottedContent?: HTMLElement[];
 }
 
 /**
-	* A mixin class implementing icon affix (prefix or suffix) alignment.
-	*
-	* @public
-	*/
+ * A mixin class implementing icon affix (prefix or suffix) alignment.
+ *
+ * @public
+ */
 export class AffixIconWithTrailing extends AffixIcon {
 	/**
-		* Indicates the icon affix alignment.
-		*
-		* @public
-		* @remarks
-		* HTML Attribute: icon-trailing
-		*/
+	 * Indicates the icon affix alignment.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: icon-trailing
+	 */
 	@attr({
 		mode: 'boolean',
 		attribute: 'icon-trailing',
-	}) iconTrailing = false;
+	})
+	iconTrailing = false;
 }
 
 export const IconWrapper = {
 	Slot: false,
-	Span: true
+	Span: true,
 };
 
 export const IconAriaHidden = {
 	Hidden: 'true',
-	Visible: 'false'
+	Visible: 'false',
 };
 
-type affixIconTemplateFactoryReturnType = (context: ElementDefinitionContext) =>
-(icon?: string, slottedState?: boolean, ariaHidden?: string) =>
-ViewTemplate<AffixIcon> | null
+type affixIconTemplateFactoryReturnType = (
+	context: ElementDefinitionContext
+) => (
+	icon?: string,
+	slottedState?: boolean,
+	ariaHidden?: string
+) => ViewTemplate<AffixIcon> | null;
 /**
  * The template for the prefixed element.
  * For use with {@link AffixIcon}
@@ -66,12 +71,21 @@ ViewTemplate<AffixIcon> | null
  * @param context - element definition context
  * @public
  */
-export const affixIconTemplateFactory: affixIconTemplateFactoryReturnType = (context: ElementDefinitionContext) => {
-
+export const affixIconTemplateFactory: affixIconTemplateFactoryReturnType = (
+	context: ElementDefinitionContext
+) => {
 	const iconTag = context.tagFor(Icon);
-	return (icon?: string, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden) => {
+	return (
+		icon?: string,
+		slottedState = IconWrapper.Span,
+		ariaHidden = IconAriaHidden.Hidden
+	) => {
 		if (!icon && !slottedState) {
-			return html`<slot name="icon" aria-hidden="${() => ariaHidden}" ${slotted('iconSlottedContent')}></slot>`;
+			return html`<slot
+				name="icon"
+				aria-hidden="${() => ariaHidden}"
+				${slotted('iconSlottedContent')}
+			></slot>`;
 		}
 		if (!icon && slottedState) {
 			return null;
@@ -79,7 +93,12 @@ export const affixIconTemplateFactory: affixIconTemplateFactoryReturnType = (con
 
 		const iconTemplate = html`<${iconTag} :name="${() => icon}"></${iconTag}>`;
 
-		return slottedState ? html`<span class="icon" aria-hidden="${() => ariaHidden}">${iconTemplate}</span>`
-			:  html`<slot name="icon" aria-hidden="${() => ariaHidden}">${iconTemplate}</slot>`;
+		return slottedState
+			? html`<span class="icon" aria-hidden="${() => ariaHidden}"
+					>${iconTemplate}</span
+			  >`
+			: html`<slot name="icon" aria-hidden="${() => ariaHidden}"
+					>${iconTemplate}</slot
+			  >`;
 	};
 };
diff --git a/libs/components/src/shared/patterns/anchored.spec.ts b/libs/components/src/shared/patterns/anchored.spec.ts
index 376a05beb9..b23f1f4a6a 100644
--- a/libs/components/src/shared/patterns/anchored.spec.ts
+++ b/libs/components/src/shared/patterns/anchored.spec.ts
@@ -1,13 +1,17 @@
 import { customElement, FASTElement } from '@microsoft/fast-element';
 import { elementUpdated, fixture } from '@vivid-nx/shared';
-import { type Anchored, anchored, anchorSlotTemplateFactory } from './anchored.ts';
+import {
+	type Anchored,
+	anchored,
+	anchorSlotTemplateFactory,
+} from './anchored.ts';
 
 describe('anchored', () => {
 	const _anchorElChanged = jest.fn();
 
 	@customElement({
 		name: 'anchored-element',
-		template: anchorSlotTemplateFactory()
+		template: anchorSlotTemplateFactory(),
 	})
 	@anchored
 	class AnchoredElement extends FASTElement {
@@ -141,7 +145,8 @@ describe('anchored', () => {
 				capturedCallback = callback;
 				callback();
 			});
-			mutationObserverSpy = jest.spyOn(window, 'MutationObserver')
+			mutationObserverSpy = jest
+				.spyOn(window, 'MutationObserver')
 				.mockImplementation(mockMutationObserver as any);
 		});
 
@@ -158,8 +163,7 @@ describe('anchored', () => {
 			expect(disconnectionFunc).toHaveBeenCalled();
 		});
 
-
-		it('should remove observer when element is removed from the DOM',  function () {
+		it('should remove observer when element is removed from the DOM', function () {
 			element.anchor = 'nonExistentAnchor';
 			element.remove();
 			expect(disconnectionFunc).toHaveBeenCalled();
diff --git a/libs/components/src/shared/patterns/anchored.ts b/libs/components/src/shared/patterns/anchored.ts
index b8d41192cf..1d5e67a23f 100644
--- a/libs/components/src/shared/patterns/anchored.ts
+++ b/libs/components/src/shared/patterns/anchored.ts
@@ -39,8 +39,14 @@ export function anchored<
 		 * @internal
 		 */
 		_slottedAnchorChanged() {
-			const isOccupied = Boolean(this._slottedAnchor && this._slottedAnchor.length > 0);
-			DOM.setBooleanAttribute(this as unknown as HTMLElement, 'slotted-anchor', isOccupied);
+			const isOccupied = Boolean(
+				this._slottedAnchor && this._slottedAnchor.length > 0
+			);
+			DOM.setBooleanAttribute(
+				this as unknown as HTMLElement,
+				'slotted-anchor',
+				isOccupied
+			);
 			this.#updateAnchorEl();
 		}
 
@@ -105,4 +111,5 @@ export function anchored<
 	return Decorated;
 }
 
-export const anchorSlotTemplateFactory = () =>html<Anchored>`<slot name="anchor" ${slotted('_slottedAnchor')}></slot>`;
+export const anchorSlotTemplateFactory = () =>
+	html<Anchored>`<slot name="anchor" ${slotted('_slottedAnchor')}></slot>`;
diff --git a/libs/components/src/shared/patterns/form-elements/form-elements.ts b/libs/components/src/shared/patterns/form-elements/form-elements.ts
index 562facf5b5..a56048fc70 100644
--- a/libs/components/src/shared/patterns/form-elements/form-elements.ts
+++ b/libs/components/src/shared/patterns/form-elements/form-elements.ts
@@ -39,7 +39,7 @@ export class FormElementCharCount {
 		attribute: 'char-count',
 		mode: 'boolean',
 	})
-		charCount = false;
+	charCount = false;
 }
 
 export function formElements<
@@ -65,9 +65,10 @@ export function formElements<
 				if (this.proxy instanceof HTMLElement && this.elementInternals) {
 					const isValid = this.proxy.validity.valid;
 					const controlIsInvalidDueToMinOrMaxLength =
-						(this.control && this.control.validity)
-						&& !this.control.validity.valid
-						&& (this.control.validity.tooShort || this.control.validity.tooLong);
+						this.control &&
+						this.control.validity &&
+						!this.control.validity.valid &&
+						(this.control.validity.tooShort || this.control.validity.tooLong);
 
 					if (isValid && controlIsInvalidDueToMinOrMaxLength) {
 						this.setValidity(
@@ -201,13 +202,13 @@ export function getFeedbackTemplate(
 		</style>
 		<div class="message ${MessageTypeMap[messageType].className}-message">
 			${when(
-		() => iconType,
-		html<FormElement>`
+				() => iconType,
+				html<FormElement>`
 					  <${iconTag} class="message-icon" name="${iconType}"></${iconTag}>`
-	)}
+			)}
 			${feedbackMessage({
-		messageProperty: MessageTypeMap[messageType].messageProperty,
-	})}
+				messageProperty: MessageTypeMap[messageType].messageProperty,
+			})}
 		</div>`;
 }
 
diff --git a/libs/components/src/shared/patterns/trapped-focus.spec.ts b/libs/components/src/shared/patterns/trapped-focus.spec.ts
index f982f94fd4..de14d82ed8 100644
--- a/libs/components/src/shared/patterns/trapped-focus.spec.ts
+++ b/libs/components/src/shared/patterns/trapped-focus.spec.ts
@@ -12,11 +12,15 @@ describe('TrappedFocus', () => {
 				<button id="second"></button>
 				<button id="third"></button>
 			</template>
-		`
+		`,
 	})
 	class TestElement extends FASTElement {
 		onKeyDown(event: KeyboardEvent) {
-			if (this._trappedFocus(event, () => this.shadowRoot!.querySelectorAll('button'))) {
+			if (
+				this._trappedFocus(event, () =>
+					this.shadowRoot!.querySelectorAll('button')
+				)
+			) {
 				return false;
 			}
 			return true;
@@ -31,12 +35,16 @@ describe('TrappedFocus', () => {
 	let lastButton: HTMLButtonElement;
 
 	beforeEach(async () => {
-		element = (await fixture(
-			'<test-element></test-element>'
-		)) as TestElement;
-		firstButton = element.shadowRoot!.querySelector('#first') as HTMLButtonElement;
-		secondButton = element.shadowRoot!.querySelector('#second') as HTMLButtonElement;
-		lastButton = element.shadowRoot!.querySelector('#third') as HTMLButtonElement;
+		element = (await fixture('<test-element></test-element>')) as TestElement;
+		firstButton = element.shadowRoot!.querySelector(
+			'#first'
+		) as HTMLButtonElement;
+		secondButton = element.shadowRoot!.querySelector(
+			'#second'
+		) as HTMLButtonElement;
+		lastButton = element.shadowRoot!.querySelector(
+			'#third'
+		) as HTMLButtonElement;
 		setupDelegatesFocusPolyfill(element);
 	});
 
diff --git a/libs/components/src/shared/patterns/trapped-focus.ts b/libs/components/src/shared/patterns/trapped-focus.ts
index c955d81a3b..c5be7a96b3 100644
--- a/libs/components/src/shared/patterns/trapped-focus.ts
+++ b/libs/components/src/shared/patterns/trapped-focus.ts
@@ -3,7 +3,10 @@ export class TrappedFocus {
 	 * @returns Whether focus was trapped.
 	 * @internal
 	 */
-	protected _trappedFocus(event: KeyboardEvent, getFocusableEls: () => NodeListOf<HTMLElement>) {
+	protected _trappedFocus(
+		event: KeyboardEvent,
+		getFocusableEls: () => NodeListOf<HTMLElement>
+	) {
 		if (event.key === 'Tab') {
 			const focusableEls = getFocusableEls();
 			const firstFocusableEl = focusableEls[0];
diff --git a/libs/components/src/shared/utils/Reflector.spec.ts b/libs/components/src/shared/utils/Reflector.spec.ts
index 1ee7d7e844..49afa013d2 100644
--- a/libs/components/src/shared/utils/Reflector.spec.ts
+++ b/libs/components/src/shared/utils/Reflector.spec.ts
@@ -30,10 +30,13 @@ describe('Reflector', () => {
 			expect(target.getAttribute('aria-label')).toBe('changed');
 		});
 
-		it.each([null, undefined])('should remove the attribute if value is %s', (value) => {
-			source.value = value;
-			expect(target.hasAttribute('aria-label')).toBe(false);
-		});
+		it.each([null, undefined])(
+			'should remove the attribute if value is %s',
+			(value) => {
+				source.value = value;
+				expect(target.hasAttribute('aria-label')).toBe(false);
+			}
+		);
 	});
 
 	describe('booleanAttribute', () => {
@@ -76,7 +79,7 @@ describe('Reflector', () => {
 				get() {
 					return 'changed';
 				},
-				set
+				set,
 			});
 
 			source.value = 'changed';
diff --git a/libs/components/src/shared/utils/Reflector.ts b/libs/components/src/shared/utils/Reflector.ts
index b3e777416e..5729f71123 100644
--- a/libs/components/src/shared/utils/Reflector.ts
+++ b/libs/components/src/shared/utils/Reflector.ts
@@ -9,11 +9,10 @@ type ReflectedAsProperty<T> = {
 type ReflectedAsAttribute = {
 	type: 'attribute' | 'boolean-attribute';
 	destination: string;
-}
+};
 
 type ReflectedProperty<T> = ReflectedAsProperty<T> | ReflectedAsAttribute;
 
-
 /**
  * Reflects observable properties of the source object to the target, either as attributes or as properties.
  */
@@ -30,22 +29,26 @@ export class Reflector<S, T extends HTMLElement> {
 	attribute(propertyName: keyof S, attributeName: string) {
 		this.#addReflectedProperty(propertyName, {
 			type: 'attribute',
-			destination: attributeName
+			destination: attributeName,
 		});
 	}
 
 	booleanAttribute(propertyName: keyof S, attributeName: string) {
 		this.#addReflectedProperty(propertyName, {
 			type: 'boolean-attribute',
-			destination: attributeName
+			destination: attributeName,
 		});
 	}
 
-	property(propertyName: keyof S, targetProperty: keyof T, skipIfEqual = false) {
+	property(
+		propertyName: keyof S,
+		targetProperty: keyof T,
+		skipIfEqual = false
+	) {
 		this.#addReflectedProperty(propertyName, {
 			type: 'property',
 			destination: targetProperty,
-			skipIfEqual
+			skipIfEqual,
 		});
 	}
 
@@ -71,18 +74,25 @@ export class Reflector<S, T extends HTMLElement> {
 
 			switch (reflectedProperty.type) {
 				case 'boolean-attribute':
-					DOM.setBooleanAttribute(this.#target, reflectedProperty.destination, Boolean(value));
+					DOM.setBooleanAttribute(
+						this.#target,
+						reflectedProperty.destination,
+						Boolean(value)
+					);
 					break;
 				case 'attribute':
 					DOM.setAttribute(this.#target, reflectedProperty.destination, value);
 					break;
 				case 'property':
-					if (reflectedProperty.skipIfEqual && (this.#target as any)[reflectedProperty.destination] === value) {
+					if (
+						reflectedProperty.skipIfEqual &&
+						(this.#target as any)[reflectedProperty.destination] === value
+					) {
 						return;
 					}
 					(this.#target as any)[reflectedProperty.destination] = value as any;
 					break;
 			}
-		}
+		},
 	};
 }
diff --git a/libs/components/src/visual-tests/visual-tests-utils.ts b/libs/components/src/visual-tests/visual-tests-utils.ts
index 134ea4272f..f0978db290 100644
--- a/libs/components/src/visual-tests/visual-tests-utils.ts
+++ b/libs/components/src/visual-tests/visual-tests-utils.ts
@@ -2,11 +2,13 @@ import * as fs from 'fs';
 import * as path from 'path';
 import markdownIt from 'markdown-it';
 import { JSDOM } from 'jsdom';
-import type {Page, Request} from '@playwright/test';
+import type { Page, Request } from '@playwright/test';
 
-const layout = (function() {
-	const layoutFactorial = (...attrs) =>
-		(code) => `
+const layout = (function () {
+	const layoutFactorial =
+		(...attrs) =>
+		(code) =>
+			`
     <script type="module" src="/assets/modules/components/layout/index.js"></script>
     <vwc-layout ${attrs.join(' ')}>${code}</vwc-layout>
 `;
@@ -14,7 +16,7 @@ const layout = (function() {
 	const inline = layoutFactorial('gutters="small"');
 	const blocks = layoutFactorial('gutters="small"', 'column-basis="block"');
 	const columns = layoutFactorial('gutters="small"', 'column-basis="medium"');
-	const center = code => `<div class="center">${code}</div>`;
+	const center = (code) => `<div class="center">${code}</div>`;
 
 	const layoutFun = (code, classList) => {
 		if (classList.contains('full')) {
@@ -27,19 +29,19 @@ const layout = (function() {
 			return center(code);
 		} else if (classList.contains('inline')) {
 			return inline(`<div>${code}</div>`);
-		} else { // default
+		} else {
+			// default
 			return inline(`<div>${code}</div>`);
 		}
 	};
 	return layoutFun;
-
 })();
 
 const md = markdownIt({
 	html: true,
 	highlight: function (str, _, attrs) {
 		return `<pre class="${attrs}">${str}</pre>`;
-	}
+	},
 });
 
 export function replaceAll(str: string, find: string, replace: string) {
@@ -52,7 +54,8 @@ function getPreElements(html): NodeListOf<HTMLPreElement> {
 }
 
 export function extractHTMLBlocksFromReadme(pathToReadme: string): string[] {
-	const readmeFileContents = fs.readFileSync(path.resolve(pathToReadme))
+	const readmeFileContents = fs
+		.readFileSync(path.resolve(pathToReadme))
 		.toString();
 	const html = md.render(readmeFileContents);
 	const preElements = getPreElements(html);
@@ -64,7 +67,7 @@ export function extractHTMLBlocksFromReadme(pathToReadme: string): string[] {
 const defaultStyles = [
 	'http://127.0.0.1:8080/dist/libs/components/styles/tokens/theme-light.css',
 	'http://127.0.0.1:8080/dist/libs/components/styles/core/all.css',
-	'http://127.0.0.1:8080/assets/fonts/speziaLocalFonts.css'
+	'http://127.0.0.1:8080/assets/fonts/speziaLocalFonts.css',
 ];
 
 export async function loadComponents({
@@ -72,9 +75,9 @@ export async function loadComponents({
 	components,
 	styleUrls = defaultStyles,
 }: {
-	page: Page,
-	components: string[],
-	styleUrls?: string[]
+	page: Page;
+	components: string[];
+	styleUrls?: string[];
 }) {
 	await page.goto('http://127.0.0.1:8080/scripts/visual-tests/index.html');
 
@@ -87,19 +90,24 @@ export async function loadComponents({
 		}
 	})();
 
-	const styleTags$ = styleUrls.map(url => page.addStyleTag({url}));
+	const styleTags$ = styleUrls.map((url) => page.addStyleTag({ url }));
 	await Promise.all(styleTags$);
 }
 
 export async function loadTemplate({
 	page,
 	template,
-}: { page: Page, template: string }) {
+}: {
+	page: Page;
+	template: string;
+}) {
 	const style = '';
 
-	await page.$('html').then(html => html?.evaluate((html) => {
-		html.classList.add('vvd-root');
-	}, template));
+	await page.$('html').then((html) =>
+		html?.evaluate((html) => {
+			html.classList.add('vvd-root');
+		}, template)
+	);
 
 	await page.$('body').then((body) =>
 		body?.evaluate(
@@ -136,8 +144,12 @@ export class InFlightRequests {
 
 	constructor(private page: Page) {
 		this.page.on('request', (request) => this.inFlightRequests.add(request));
-		this.page.on('requestfinished', (request) => this.inFlightRequests.delete(request));
-		this.page.on('requestfailed', (request) => this.inFlightRequests.delete(request));
+		this.page.on('requestfinished', (request) =>
+			this.inFlightRequests.delete(request)
+		);
+		this.page.on('requestfailed', (request) =>
+			this.inFlightRequests.delete(request)
+		);
 	}
 
 	noneInFlight(predicate: (request: Request) => boolean = () => true) {