chore(text-field): decouple from FAST foundation (VIV-2029)

libs/components/src/lib/text-field/README.md

@@ -223,5 +223,6 @@ The `helper-text` slot allows you to use rich content as the text-field's helper
 | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `checkValidity`  | Returns `true` if the element's `value` passes validity checks; otherwise, returns `false` and fires an `invalid` event at the element.                                                                 |
 | `reportValidity` | Returns `true` if the element's `value` passes validity checks; otherwise, returns `false`, fires an `invalid` event at the element, and (if the event isn't canceled) reports the problem to the user. |
+| `select`         | Selects all the text in the text field                                                                                                                                                                  |
 
 </div>

libs/components/src/lib/text-field/text-field.form-associated.ts

@@ -0,0 +1,9 @@
+import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
+
+class _TextField extends FoundationElement {}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+interface _TextField extends FormAssociated {}
+
+export class FormAssociatedTextField extends FormAssociated(_TextField) {
+	proxy = document.createElement('input');
+}

libs/components/src/lib/text-field/text-field.spec.ts

@@ -192,6 +192,15 @@ describe('vwc-text-field', () => {
 			await elementUpdated(element);
 			expect(getInput()?.hasAttribute('autofocus')).toEqual(true);
 		});
+
+		it('should focus the input element when connected', async () => {
+			element = (await fixture(
+				`<${COMPONENT_TAG_NAME} autofocus></${COMPONENT_TAG_NAME}>`
+			)) as TextField;
+			await elementUpdated(element);
+
+			expect(document.activeElement).toEqual(getInput());
+		});
 	});
 
 	describe('inputmode', function () {
@@ -238,6 +247,14 @@ describe('vwc-text-field', () => {
 		});
 	});
 
+	describe('spellcheck', function () {
+		it('should set spellcheck attribute on the input', async function () {
+			element.spellcheck = true;
+			await elementUpdated(element);
+			expect(getInput()?.hasAttribute('spellcheck')).toBe(true);
+		});
+	});
+
 	describe('maxlength', function () {
 		const value = '8';
 		const propertyName = 'maxlength';
@@ -634,6 +651,16 @@ describe('vwc-text-field', () => {
 		});
 	});
 
+	describe('select method', function () {
+		it('should call select on the input', async function () {
+			getInput().select = jest.fn();
+
+			element.select();
+
+			expect(getInput().select).toHaveBeenCalled();
+		});
+	});
+
 	describe('accessible helper text', function () {
 		function getAccessibleDescription() {
 			const describedBy = element