diff --git a/src/dev/pages/text-field/text-field.ejs b/src/dev/pages/text-field/text-field.ejs
index d9886c6ce..35458fb14 100644
--- a/src/dev/pages/text-field/text-field.ejs
+++ b/src/dev/pages/text-field/text-field.ejs
@@ -23,6 +23,13 @@
       <input type="text" />
     </forge-text-field>
   </div>
+
+  <div>
+    <h3 class="forge-typography--heading2">Label aware</h3>
+    <forge-text-field>
+      <forge-label>First name</forge-label>
+      <input type="text" />
+    </forge-text-field>
 </div>
 
 
diff --git a/src/lib/field-next/_core.slotted.scss b/src/lib/field-next/_core.slotted.scss
index 65dfa1e75..bbb3f4089 100644
--- a/src/lib/field-next/_core.slotted.scss
+++ b/src/lib/field-next/_core.slotted.scss
@@ -38,6 +38,10 @@
   text-overflow: ellipsis;
 }
 
+@mixin slotted-forge-label {
+  font: inherit;
+}
+
 @mixin default-slot-disabled {
   cursor: not-allowed;
 }
diff --git a/src/lib/field-next/base/base-field-adapter.ts b/src/lib/field-next/base/base-field-adapter.ts
index 68346c358..9f47bbb56 100644
--- a/src/lib/field-next/base/base-field-adapter.ts
+++ b/src/lib/field-next/base/base-field-adapter.ts
@@ -1,4 +1,4 @@
-import { BaseAdapter, IBaseAdapter } from '@tylertech/forge/core';
+import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { IFieldComponent } from '../field';
 import { IBaseField } from './base-field';
 
diff --git a/src/lib/field-next/base/base-field.ts b/src/lib/field-next/base/base-field.ts
index 59c261478..dfbb5feae 100644
--- a/src/lib/field-next/base/base-field.ts
+++ b/src/lib/field-next/base/base-field.ts
@@ -1,6 +1,6 @@
 import { coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
-import { BaseComponent } from '@tylertech/forge/core';
-import { IWithLabelAwareness, WithLabelAwareness } from '@tylertech/forge/core/mixins/label/with-label-aware';
+import { BaseComponent } from '../../core/base/base-component';
+import { IWithLabelAwareness, WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
 import { IBaseFieldAdapter } from './base-field-adapter';
 import { BASE_FIELD_CONSTANTS, FieldDensity, FieldLabelAlignment, FieldLabelPosition, FieldShape, FieldSupportTextInset, FieldTheme, FieldVariant } from './base-field-constants';
 import { BaseFieldFoundation } from './base-field-foundation';
diff --git a/src/lib/field-next/field.scss b/src/lib/field-next/field.scss
index 3a177e131..db4a0052a 100644
--- a/src/lib/field-next/field.scss
+++ b/src/lib/field-next/field.scss
@@ -660,6 +660,12 @@ $variants: (
     }
   }
 
+  .label {
+    ::slotted(forge-label) {
+      @include core.slotted-forge-label;
+    }
+  }
+
   &--has-start {
     @include core.main-content-padding-inline(start, start);
   }
diff --git a/src/lib/label/label-foundation.ts b/src/lib/label/label-foundation.ts
index 0ae2c0143..f9cc1dcf1 100644
--- a/src/lib/label/label-foundation.ts
+++ b/src/lib/label/label-foundation.ts
@@ -17,6 +17,7 @@ export class LabelFoundation implements ILabelFoundation {
   // State
   private _for: string | null | undefined;
   private _forElement: HTMLElement | null | undefined;
+  private _clickTarget: HTMLElement | null | undefined;
   private _dynamic = false;
   private _nonInteractive = false;
   private _legend = false;
@@ -74,7 +75,7 @@ export class LabelFoundation implements ILabelFoundation {
   private _handleClick(evt: PointerEvent): void {
     // Prevent duplicate clicks from a nested target element or if the event originates
     // from within the target element
-    const targetEl = this._adapter.getTargetElement();
+    const targetEl = this._clickTarget ?? this._adapter.getTargetElement();
     if (evt.target === targetEl || targetEl?.contains(evt.target as Node)) {
       return;
     }
@@ -140,6 +141,15 @@ export class LabelFoundation implements ILabelFoundation {
     }
   }
 
+  public get clickTarget(): HTMLElement | null | undefined {
+    return this._clickTarget;
+  }
+  public set clickTarget(value: HTMLElement | null | undefined) {
+    if (this._clickTarget !== value) {
+      this._clickTarget = value;
+    }
+  }
+
   public get dynamic(): boolean {
     return this._dynamic;
   }
diff --git a/src/lib/label/label.ts b/src/lib/label/label.ts
index 6d5773c21..2ca3549dd 100644
--- a/src/lib/label/label.ts
+++ b/src/lib/label/label.ts
@@ -30,6 +30,7 @@ declare global {
  * 
  * @property {string | null | undefined} for - The id of the associated element.
  * @property {HTMLElement | null | undefined} forElement - The associated element.
+ * @property {HTMLElement | null | undefined} clickTarget - The element that a click should be simulated on. If not defined clicks act on the associated element.
  * @property {boolean} dynamic - Propagates changes in the label's text content to the associated element.
  * @property {boolean} nonInteractive - Removes click handling from the label.
  * @property {boolean} legend - Whether or not the label should be associated with an ancestor element.
@@ -90,6 +91,9 @@ export class LabelComponent extends BaseComponent implements ILabelComponent {
   @FoundationProperty()
   public declare forElement: HTMLElement | null | undefined;
 
+  @FoundationProperty()
+  public declare clickTarget: HTMLElement | null | undefined;
+
   @FoundationProperty()
   public declare dynamic: boolean;
 
diff --git a/src/lib/text-field/text-field-adapter.ts b/src/lib/text-field/text-field-adapter.ts
index 479dd017c..044ca8168 100644
--- a/src/lib/text-field/text-field-adapter.ts
+++ b/src/lib/text-field/text-field-adapter.ts
@@ -143,14 +143,15 @@ export class TextFieldAdapter extends BaseFieldAdapter implements ITextFieldAdap
     const elements = slot.assignedElements({ flatten: true });
 
     // Attempt to find and connect a `<forge-label>` element
-    const forgeLabel = elements.find(el => el.tagName === TEXT_FIELD_CONSTANTS.selectors.FORGE_LABEL) as LabelComponent | undefined;
+    const forgeLabel = elements.find(el => el.matches(TEXT_FIELD_CONSTANTS.selectors.FORGE_LABEL)) as LabelComponent | undefined;
     if (forgeLabel) {
-      forgeLabel.forElement = inputElement;
+      forgeLabel.forElement = this._component;
+      forgeLabel.clickTarget = inputElement;
       return;
     }
     
     // Attempt to find and connect a `<label>` element
-    const label = elements.find(el => el.tagName === TEXT_FIELD_CONSTANTS.selectors.LABEL) as HTMLLabelElement | undefined;
+    const label = elements.find(el => el.tagName === TEXT_FIELD_CONSTANTS.tagNames.LABEL) as HTMLLabelElement | undefined;
     if (!label || label.control) {
       return;
     }
diff --git a/src/lib/text-field/text-field-constants.ts b/src/lib/text-field/text-field-constants.ts
index c387d5217..b0e32a454 100644
--- a/src/lib/text-field/text-field-constants.ts
+++ b/src/lib/text-field/text-field-constants.ts
@@ -14,7 +14,6 @@ const attributes = {
 const selectors = {
   FIELD: '#field',
   CLEAR_BUTTON_SLOT: 'slot[name=clear-button]',
-  LABEL: 'label',
   FORGE_LABEL: LABEL_CONSTANTS.elementName,
   INPUT: ':where(input:not([type=button], [type=checkbox], [type=color], [type=hidden], [type=image], [type=radio], [type=range], [type=reset], [type=submit]), textarea)'
 };
@@ -32,6 +31,7 @@ const events = {
 
 export const TEXT_FIELD_CONSTANTS = {
   elementName,
+  observedAttributes,
   attributes,
   selectors,
   observedInputAttributes,
diff --git a/src/lib/text-field/text-field-foundation.ts b/src/lib/text-field/text-field-foundation.ts
index 289582be9..edec205a2 100644
--- a/src/lib/text-field/text-field-foundation.ts
+++ b/src/lib/text-field/text-field-foundation.ts
@@ -1,4 +1,4 @@
-import { FieldLabelPosition } from '../field-next';
+import { FieldLabelPosition, FIELD_CONSTANTS } from '../field-next';
 import { BaseFieldFoundation, IBaseFieldFoundation } from '../field-next/base/base-field-foundation';
 import { ITextFieldAdapter, TextFieldAdapter } from './text-field-adapter';
 import { TextFieldInputAttributeObserver, TextFieldValueChangeListener, TEXT_FIELD_CONSTANTS } from './text-field-constants';
@@ -72,6 +72,7 @@ export class TextFieldFoundation extends BaseFieldFoundation<ITextFieldAdapter>
   public set showClear(value: boolean) {
     if (this._showClear !== value) {
       this._showClear = value;
+      this._adapter.toggleHostAttribute(TEXT_FIELD_CONSTANTS.attributes.SHOW_CLEAR, value);
 
       if (value) {
         this._adapter.connectClearButton(this._clearButtonClickListener);
@@ -88,6 +89,7 @@ export class TextFieldFoundation extends BaseFieldFoundation<ITextFieldAdapter>
   public override set disabled(value: boolean) {
     if (this._disabled !== value) {
       this._disabled = value;
+      this._adapter.toggleHostAttribute(FIELD_CONSTANTS.attributes.DISABLED, value);
       this._adapter.setFieldProperty('disabled', value);
       this._adapter.disableInput(value);
       this._toggleClearButtonVisibility();
@@ -100,6 +102,7 @@ export class TextFieldFoundation extends BaseFieldFoundation<ITextFieldAdapter>
   public override set labelPosition(value: FieldLabelPosition) {
     if (this._labelPosition !== value) {
       this._labelPosition = value;
+      this._adapter.toggleHostAttribute(FIELD_CONSTANTS.attributes.LABEL_POSITION, true, value);
       this._adapter.setFieldProperty('labelPosition', value);
       this._tryFloatLabel();
     }
diff --git a/src/lib/text-field/text-field.test.ts b/src/lib/text-field/text-field.test.ts
index e69de29bb..d5f6b4248 100644
--- a/src/lib/text-field/text-field.test.ts
+++ b/src/lib/text-field/text-field.test.ts
@@ -0,0 +1,290 @@
+import { expect } from '@esm-bundle/chai';
+import { fixture, html } from '@open-wc/testing';
+import { getShadowElement } from '@tylertech/forge-core';
+import { tick } from '@tylertech/forge-testing';
+import { sendMouse } from '@web/test-runner-commands';
+import { spy } from 'sinon';
+import { ITextFieldComponent } from '.';
+import { TestHarness } from '../../test/utils/test-harness';
+import { FIELD_CONSTANTS, IFieldComponent } from '../field-next';
+import { ICON_BUTTON_CONSTANTS, IIconButtonComponent } from '../icon-button';
+import { LABEL_CONSTANTS } from '../label';
+
+import './text-field';
+
+describe('Text field', () => {
+  it('should contain shadow root', async () => {
+    const harness = await createFixture();
+    expect(harness.element.shadowRoot).not.to.be.null;
+  });
+
+  it('should be accessible', async () => {
+    const harness = await createFixture();
+    await expect(harness.element).to.be.accessible();
+  });
+
+  describe('properties', () => {
+    it('should set show-clear attribute', async () => {
+      const harness = await createFixture({ showClear: true });
+      expect(harness.element.hasAttribute('show-clear')).to.be.true;
+    });
+
+    it('should set showClear property from attribute', async () => {
+      const harness = await createFixture();
+      harness.element.setAttribute('show-clear', '');
+      expect(harness.element.showClear).to.be.true;
+    });
+
+    it('should set disabled attribute', async () => {
+      const harness = await createFixture();
+      harness.element.disabled = true;
+      expect(harness.element.hasAttribute('disabled')).to.be.true;
+    });
+
+    it('should set disabled property from attribute', async () => {
+      const harness = await createFixture();
+      harness.element.setAttribute('disabled', '');
+      expect(harness.element.disabled).to.be.true;
+    });
+
+    it('should set label-position attribute', async () => {
+      const harness = await createFixture();
+      harness.element.labelPosition = 'block-start';
+      expect(harness.element.getAttribute('label-position')).to.equal('block-start');
+    });
+
+    it('should set labelPosition property from attribute', async () => {
+      const harness = await createFixture();
+      harness.element.setAttribute('label-position', 'block-start');
+      expect(harness.element.labelPosition).to.equal('block-start');
+    });
+
+    it('should disable input when disabled is true', async () => {
+      const harness = await createFixture();
+      harness.element.disabled = true;
+      expect(harness.inputElement.disabled).to.be.true;
+    });
+
+    it('should enable input when disabled is false', async () => {
+      const harness = await createFixture();
+      harness.inputElement.disabled = true;
+      await tick();
+      harness.element.disabled = false;
+      expect(harness.inputElement.disabled).to.be.false;
+    });
+
+    it('should enable text field when input is not disabled', async () => {
+      const harness = await createFixture();
+      harness.element.disabled = true;
+      harness.inputElement.disabled = false;
+      await tick();
+      expect(harness.element.disabled).to.be.false;
+    });
+
+    it('should disable text field when input is disabled', async () => {
+      const harness = await createFixture();
+      harness.inputElement.disabled = true;
+      await tick();
+      expect(harness.element.disabled).to.be.true;
+    });
+  });
+
+  describe('clear button', () => {
+    it('should not render clear button by default', async () => {
+      const harness = await createFixture();
+      expect(harness.clearButtonElement).to.be.null;
+    });
+
+    it('should not render clear button when showClear is true but input is empty', async () => {
+      const harness = await createFixture({ showClear: true });
+      expect(harness.clearButtonElement).to.be.null;
+    });
+
+    it('should render clear button when showClear is true and input is not empty', async () => {
+      const harness = await createFixture({ showClear: true });
+      harness.inputElement.value = 'test';
+      expect(harness.clearButtonElement).to.not.be.null;
+    });
+
+    it('should not render clear button when disabled', async () => {
+      const harness = await createFixture({ showClear: true });
+      harness.element.disabled = true;
+      harness.inputElement.value = 'test';
+      await tick();
+      expect(harness.clearButtonElement).to.be.null;
+    });
+
+    it('should clear input when clear button is clicked', async () => {
+      const harness = await createFixture({ showClear: true });
+      harness.inputElement.value = 'test';
+      harness.clearButtonElement!.click();
+      await tick();
+      expect(harness.inputElement.value).to.equal('');
+    });
+  });
+
+  describe('label', () => {
+    it('should connect slotted label to input', async () => {
+      const harness = await createEmptyFixture();
+      const label = document.createElement('label');
+      const input = document.createElement('input');
+      label.slot = 'label';
+      input.id = 'input';
+      harness.element.append(input);
+      harness.element.append(label);
+      await tick();
+      expect(label.htmlFor).to.equal(input.id);
+      await expect(harness.element).to.be.accessible();
+    });
+
+    it('should add id to input if no id is present', async () => {
+      const harness = await createEmptyFixture();
+      const label = document.createElement('label');
+      const input = document.createElement('input');
+      label.slot = 'label';
+      harness.element.append(input);
+      harness.element.append(label);
+      await tick();
+      const id = input.id;
+      expect(id).to.not.be.undefined;
+      expect(label.htmlFor).to.equal(id);
+      await expect(harness.element).to.be.accessible();
+    });
+
+    it('should connect slotted forge label to input', async () => {
+      const harness = await createEmptyFixture();
+      const label = document.createElement(LABEL_CONSTANTS.elementName);
+      const input = document.createElement('input');
+      label.textContent = 'Label';
+      label.slot = 'label';
+      harness.element.append(input);
+      harness.element.append(label);
+      await tick();
+      expect(label.forElement).to.equal(harness.element);
+      expect(input.ariaLabel).to.equal(label.textContent);
+      await expect(harness.element).to.be.accessible();
+    });
+
+    it('should update input label when forge label text changes', async () => {
+      const harness = await createEmptyFixture();
+      const label = document.createElement(LABEL_CONSTANTS.elementName);
+      const input = document.createElement('input');
+      label.textContent = 'Label';
+      label.slot = 'label';
+      label.dynamic = true;
+      harness.element.append(input);
+      harness.element.append(label);
+      await tick();
+      label.textContent = 'New label';
+      await tick();
+      expect(input.ariaLabel).to.equal(label.textContent);
+    });
+
+    it('should focus text field when forge label is clicked', async () => {
+      const harness = await createEmptyFixture();
+      const label = document.createElement(LABEL_CONSTANTS.elementName);
+      const input = document.createElement('input');
+      label.textContent = 'Label';
+      label.slot = 'label';
+      harness.element.append(input);
+      harness.element.append(label);
+
+      const focusSpy = spy(harness.inputElement, 'focus');
+      await tick();
+      label.click();
+      await tick();
+      expect(focusSpy).to.have.been.called;
+    });
+  });
+
+  describe('floating label', () => {
+    it('should float label when input has value', async () => {
+      const harness = await createFixture();
+      harness.element.labelPosition = 'inset';
+      harness.inputElement.value = 'test';
+      await tick();
+      expect(harness.fieldElement.floatLabel).to.be.true;
+    });
+
+    it('should float label when input has placeholder', async () => {
+      const harness = await createFixture();
+      harness.element.labelPosition = 'inset';
+      harness.inputElement.placeholder = 'test';
+      await tick();
+      expect(harness.fieldElement.floatLabel).to.be.true;
+    });
+
+    it('should not float label when input has no value or placeholder', async () => {
+      const harness = await createFixture();
+      harness.element.labelPosition = 'inset';
+      expect(harness.fieldElement.floatLabel).to.be.false;
+    });
+
+    it('should always float label when floatLabel is true', async () => {
+      const harness = await createFixture();
+      harness.element.labelPosition = 'inset';
+      harness.element.floatLabel = true;
+      expect(harness.fieldElement.floatLabel).to.be.true;
+    });
+
+    it('should float label when input has value and floatLabel is false', async () => {
+      const harness = await createFixture();
+      harness.element.labelPosition = 'inset';
+      harness.element.floatLabel = false;
+      harness.inputElement.value = 'test';
+      expect(harness.fieldElement.floatLabel).to.be.true;
+    });
+  });
+});
+
+class TextFieldHarness extends TestHarness<ITextFieldComponent> {
+  public fieldElement: IFieldComponent;
+
+  public get inputElement(): HTMLInputElement {
+    return this.element.querySelector('input')!;
+  }
+  public get labelElement(): HTMLLabelElement {
+    return this.element.querySelector('label')!;
+  }
+  public get clearButtonElement(): IIconButtonComponent | null {
+    return getShadowElement(this.element, ICON_BUTTON_CONSTANTS.elementName) as IIconButtonComponent;
+  }
+
+  constructor(el: ITextFieldComponent) {
+    super(el);
+  }
+
+  public initElementRefs(): void {
+    this.fieldElement = getShadowElement(this.element, FIELD_CONSTANTS.elementName) as IFieldComponent;
+  }
+
+  public async clickElement(el: HTMLElement): Promise<void> {
+    const { x, y, width, height} = el.getBoundingClientRect();
+
+    await sendMouse({ type: 'click', position: [
+      Math.floor(x + window.scrollX + width / 2),
+      Math.floor(y + window.scrollY + height / 2)
+    ]});
+  }
+}
+
+interface TextFieldFixtureConfig {
+  showClear?: boolean;
+}
+
+async function createFixture({ showClear }: TextFieldFixtureConfig = {}): Promise<TextFieldHarness> {
+  const el = await fixture<ITextFieldComponent>(html`
+    <forge-text-field
+      .showClear=${showClear}
+    >
+      <label slot="label" for="input">Label</label>
+      <input id="input" type="text" />
+    </forge-text-field>
+  `);
+  return new TextFieldHarness(el);
+}
+
+async function createEmptyFixture(): Promise<TextFieldHarness> {
+  const el = await fixture<ITextFieldComponent>(html`<forge-text-field></forge-text-field>`);
+  return new TextFieldHarness(el);
+}
diff --git a/src/lib/text-field/text-field.ts b/src/lib/text-field/text-field.ts
index 06b3adacb..cc60a8a51 100644
--- a/src/lib/text-field/text-field.ts
+++ b/src/lib/text-field/text-field.ts
@@ -1,6 +1,6 @@
 import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
 import { tylIconClear } from '@tylertech/tyler-icons/standard';
-import { FieldComponent } from '../field-next';
+import { BASE_FIELD_CONSTANTS, FieldComponent } from '../field-next';
 import { BaseField, IBaseField } from '../field-next/base/base-field';
 import { IconRegistry } from '../icon';
 import { IconButtonComponent } from '../icon-button';
@@ -65,7 +65,14 @@ declare global {
   ]
 })
 export class TextFieldComponent extends BaseField<TextFieldFoundation> implements ITextFieldComponent {
-  protected _foundation: TextFieldFoundation;
+  public static get observedAttributes(): string[] {
+    return [
+      ...Object.values(BASE_FIELD_CONSTANTS.observedAttributes),
+      ...Object.values(TEXT_FIELD_CONSTANTS.observedAttributes)
+    ];
+  }
+
+  protected readonly _foundation: TextFieldFoundation;
 
   constructor() {
     super();
diff --git a/src/test/spec/text-field/text-field.spec.ts b/src/test/spec/text-field/text-field.spec.ts
deleted file mode 100644
index 80bd9ca4e..000000000
--- a/src/test/spec/text-field/text-field.spec.ts
+++ /dev/null
@@ -1,849 +0,0 @@
-import {
-  defineTextFieldComponent,
-  ITextFieldComponent,
-  TEXT_FIELD_CONSTANTS,
-  TextFieldComponentDelegate,
-  TextFieldComponentDelegateProps,
-  ITextFieldFoundation,
-  ITextFieldComponentDelegateOptions
-} from '@tylertech/forge/text-field';
-import { removeElement, getShadowElement } from '@tylertech/forge-core';
-import { tick, timer } from '@tylertech/forge-testing';
-import { FLOATING_LABEL_CONSTANTS } from '@tylertech/forge/floating-label';
-import { expectFloatingLabelState, floatTick, testFloatingLabelState } from '../../utils/floating-label-utils';
-import { FIELD_CONSTANTS } from '@tylertech/forge/field/field-constants';
-
-interface ITestContext {
-  context: ITextFieldTestContext;
-}
-
-interface ITextFieldTestContext { 
-  delegate: TextFieldComponentDelegate;
-  component: ITextFieldComponent;
-  root: HTMLElement;
-  input: HTMLInputElement;
-  label: HTMLLabelElement;
-  foundation: ITextFieldFoundation;
-  leadingIcon?: HTMLElement;
-  trailingIcon?: HTMLElement;
-  destroy(): void;
-}
-
-describe('TextFieldComponent', function(this: ITestContext) {  
-  beforeAll(function(this: ITestContext) {
-    defineTextFieldComponent();
-  });
-
-  describe('Imperative creation', function(this: ITestContext) {
-    afterEach(function(this: ITestContext) {
-      this.context.destroy();
-    });
-
-    it('should allow for interaction before initialization', function(this: ITestContext) {
-      this.context = setupTestContext(false);
-      const catchSpy = jasmine.createSpy('caught exception');
-
-      try {
-        this.context.component.density = 'dense';
-        this.context.component.floatLabelType = 'always';
-        this.context.component.shape = 'rounded';
-        this.context.component.invalid = true;
-        this.context.component.required = true;
-        this.context.component.floatLabel(true);
-      } catch {
-        catchSpy();
-      }
-      
-      expect(catchSpy).not.toHaveBeenCalled();
-    });
-
-    it('should not initialize until input element is added', async function(this: ITestContext) {
-      this.context = setupTestContext(false);
-      // Remove the input and label elements from the text-field before adding to DOM
-      this.context.component.removeChild(this.context.label);
-      this.context.component.removeChild(this.context.input);
-      
-      document.body.appendChild(this.context.component);
-      await tick();
-
-      // Make sure that the component doesn't initialize when added to DOM
-      expect(this.context.foundation['_isInitialized']).toBe(false);
-
-      const inputContainer = document.createElement('div');
-      // Add the input and label elements to the text-field component
-      inputContainer.appendChild(this.context.input);
-      inputContainer.appendChild(this.context.label);
-      this.context.component.appendChild(inputContainer)
-      await tick();
-
-      // Now the component should initialize
-      expect(this.context.foundation['_isInitialized']).toBe(true);
-    });
-
-    it('should float label if value is set before adding to DOM', async function(this: ITestContext) {
-      this.context = setupTestContext(false);
-      this.context.input.value = 'text';
-      document.body.appendChild(this.context.component);
-      await floatTick();
-      expectFloatingLabelState(this.context, true);
-    });
-
-    it('should float label if float label type is set to "always"', async function(this: ITestContext) {
-      this.context = setupTestContext(false);
-      this.context.component.floatLabelType = 'always';
-      document.body.appendChild(this.context.component);
-      await floatTick();
-      expect(this.context.component.floatLabelType).toBe('always');
-      expectFloatingLabelState(this.context, true);
-    });
-
-    it('should float label if float label type is changed to "always" after initial render', async function(this: ITestContext) {
-      this.context = setupTestContext(false);
-      document.body.appendChild(this.context.component);
-      await tick();
-      this.context.component.floatLabelType = 'always';
-      await floatTick();
-      expectFloatingLabelState(this.context, true);
-    });
-
-    it('should float label always if placeholder is set', async function(this: ITestContext) {
-      this.context = setupTestContext(false);
-      this.context.input.placeholder = 'placeholder text';
-      document.body.appendChild(this.context.component);
-      await floatTick();
-      expect(this.context.component.floatLabelType).toBe('always');
-      expectFloatingLabelState(this.context, true);
-    });
-
-    it('should be disabled if set by default', async function(this: ITestContext) {
-      this.context = setupTestContext(false);
-
-      this.context.input.disabled = true;
-      document.body.appendChild(this.context.component);
-      await tick();
-
-      expect(this.context.input.disabled).toBe(true);
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.DISABLED)).toBe(true);
-    });
-
-    it('should be readonly if set by default', async function(this: ITestContext) {
-      this.context = setupTestContext(false);
-
-      this.context.input.readOnly = true;
-      document.body.appendChild(this.context.component);
-      await tick();
-
-      expect(this.context.input.readOnly).toBe(true);
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.READONLY)).toBe(true);
-    });
-
-    it('should initialize with textarea', async function(this: ITestContext) {
-      this.context = setupTestContext(false);
-
-      removeElement(this.context.input);
-      const textarea = document.createElement('textarea');
-      this.context.component.appendChild(textarea);
-      document.body.appendChild(this.context.component);
-      await tick();
-
-      expect(this.context.root.classList.contains(TEXT_FIELD_CONSTANTS.classes.TEXTAREA)).toBe(true);
-    });
-
-    it('should detect addon-end content when connecting', async function(this: ITestContext) {
-      this.context = setupTestContext(false);
-
-      const element = document.createElement('div');
-      element.textContent = 'end';
-      element.slot = 'addon-end';
-      this.context.component.appendChild(element);
-      document.body.appendChild(this.context.component);
-
-      await tick();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.ADDON_END)).toBeTrue();
-    });
-  });
-  
-  describe('Basic functionality', function(this: ITestContext) {
-    afterEach(function(this: ITestContext) {
-      this.context.destroy();
-    });
-
-    it('should not float label when no value is specified', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      await tick();
-
-      expectFloatingLabelState(this.context, false);
-    });
-
-    it('should float label when value is set', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      await tick();
-      this.context.input.value = 'test';
-      await floatTick();
-      expectFloatingLabelState(this.context, true);
-    });
-
-    it('should float label when value is set after changing from dense to roomy', async function(this: ITestContext) {
-      this.context = setupTestContext(true, { density: 'dense' });
-
-      await tick();
-      this.context.input.value = 'test';
-      await floatTick();
-      
-      this.context.component.density = 'roomy';
-      await floatTick();
-
-      expect(this.context.component.hasAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING)).toBeTrue();
-      expectFloatingLabelState(this.context, true);
-    });
-
-    it('should float label when value is set after changing from dense to default', async function(this: ITestContext) {
-      this.context = setupTestContext(true, { density: 'dense' });
-
-      await tick();
-      this.context.input.value = 'test';
-      await floatTick();
-      
-      this.context.component.density = 'default';
-      await floatTick();
-
-      expect(this.context.component.hasAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING)).toBeTrue();
-      expectFloatingLabelState(this.context, true);
-    });
-
-    it('should float label when invoked programmatically', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      await tick();
-      this.context.component.floatLabel(true);
-      await floatTick();
-      expectFloatingLabelState(this.context, true);
-    });
-
-    it('should un-float label when invoked programmatically', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      await tick();
-      this.context.component.floatLabel(true);
-      await floatTick();
-      this.context.component.floatLabel(false);
-      await tick();
-      expectFloatingLabelState(this.context, false);
-    });
-
-    it('should float label when value is set by default', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.input.value = 'test';
-      await floatTick();
-      expectFloatingLabelState(this.context, true);
-    });
-
-    it('should float label when focused', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      await tick();
-      this.context.input.dispatchEvent(new Event('focus'));
-      await floatTick();
-      expectFloatingLabelState(this.context, true);
-    });
-
-    it('should set proper state when focused', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      await tick();
-      this.context.input.dispatchEvent(new Event('focus'));
-      await tick();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.FOCUSED)).toBe(true);
-      expect(this.context.input.classList.contains(FIELD_CONSTANTS.classes.INPUT_FOCUSED)).toBe(true);
-    });
-
-    it('should not float label when blurred', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      await tick();
-      this.context.input.dispatchEvent(new Event('focus'));
-      await floatTick();
-      expectFloatingLabelState(this.context, true);
-      this.context.input.dispatchEvent(new Event('blur'));
-      await tick();
-      expectFloatingLabelState(this.context, false);
-    });
-
-    it('should set dense via property', function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.density = 'dense';
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.DENSE)).toBe(true);
-    });
-
-    it('should set dense via attribute', function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.setAttribute(FIELD_CONSTANTS.attributes.DENSITY, 'dense');
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.DENSE)).toBe(true);
-    });
-
-    it('should set roomy via property', function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.density = 'roomy';
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.ROOMY)).toBe(true);
-    });
-
-    it('should set roomy via attribute', function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.setAttribute(FIELD_CONSTANTS.attributes.DENSITY, 'roomy');
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.ROOMY)).toBe(true);
-    });
-
-    it('should be disabled when the input is', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.input.disabled = true;
-      await timer();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.DISABLED)).toBe(true);
-    });
-
-    it('should not be disabled when the input is not', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.input.disabled = false;
-      await timer();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.DISABLED)).toBe(false);
-    });
-
-    it('should be readonly when the input is', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.input.readOnly = true;
-      await timer();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.READONLY)).toBe(true);
-    });
-
-    it('should not be readonly when the input is not', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.input.readOnly = false;
-      await timer();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.READONLY)).toBe(false);
-    });
-
-    it('should correctly remove disabled if removed from the DOM and re-added', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.input.disabled = true;
-      await timer();
-      this.context.component.remove();
-      this.context.input.disabled = false;
-      document.body.appendChild(this.context.component);
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.DISABLED)).toBe(false);
-    });
-
-    it('should correctly remove readonly if removed from the DOM and re-added', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.input.readOnly = true;
-      await timer();
-      this.context.component.remove();
-      this.context.input.readOnly = false;
-      document.body.appendChild(this.context.component);
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.READONLY)).toBe(false);
-    });
-
-    it('should set invalid', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.invalid = true;
-      await tick();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.INVALID)).toBe(true);
-    });
-
-    it('should set invalid via attribute', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.setAttribute(FIELD_CONSTANTS.attributes.INVALID, 'true');
-      await tick();
-
-      expect(this.context.component.invalid).toBe(true);
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.INVALID)).toBe(true);
-    });
-
-    it('should set required', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.required = true;
-      await tick();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.REQUIRED)).toBe(true);
-    });
-
-    it('should set required via attribute', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.setAttribute(FIELD_CONSTANTS.attributes.REQUIRED, 'true');
-      await tick();
-
-      expect(this.context.component.required).toBe(true);
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.REQUIRED)).toBe(true);
-    });
-
-    it('should toggle required attribute', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.required = true;
-      await tick();
-      this.context.component.required = false;
-      await tick();
-
-      expect(this.context.component.required).toBe(false);
-      expect(this.context.component.hasAttribute(FIELD_CONSTANTS.attributes.REQUIRED)).toBe(false);
-    });
-
-    it('should set shape to rounded', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.shape = 'rounded';
-      await tick();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.SHAPE_ROUNDED)).toBe(true);
-    });
-
-    it('should set rounded shape via attribute', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.setAttribute(FIELD_CONSTANTS.attributes.SHAPE, 'rounded');
-      await tick();
-
-      expect(this.context.component.shape).toBe('rounded');
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.SHAPE_ROUNDED)).toBe(true);
-    });
-
-    it('should set density to dense', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.density = 'dense';
-      await tick();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.DENSE)).toBe(true);
-    });
-
-    it('should set density to dense via attribute', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.setAttribute(FIELD_CONSTANTS.attributes.DENSITY, 'dense');
-      await tick();
-
-      expect(this.context.component.density).toBe('dense');
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.DENSE)).toBe(true);
-    });
-
-    it('should set density to roomy', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.density = 'roomy';
-      await tick();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.ROOMY)).toBe(true);
-    });
-
-    it('should set density to roomy via attribute', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.component.setAttribute(FIELD_CONSTANTS.attributes.DENSITY, 'roomy');
-      await tick();
-
-      expect(this.context.component.density).toBe('roomy');
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.ROOMY)).toBe(true);
-    });
-
-    it('should un-float label if value is removed when input is not focused', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.input.value = 'test';
-      await tick();
-      await floatTick();
-      expectFloatingLabelState(this.context, true);
-      this.context.input.value = '';
-      await tick();
-      expectFloatingLabelState(this.context, false);
-    });
-
-    it('should set floating label state when input attribute value changes', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.input.setAttribute('value', 'test');
-      await tick();
-      await floatTick();
-      expectFloatingLabelState(this.context, true);
-      this.context.input.setAttribute('value', '');
-      await tick();
-      expectFloatingLabelState(this.context, false);
-    });
-
-    it('should float label if label text is empty', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      this.context.label.textContent = '';
-      this.context.input.value = 'test';
-      await floatTick();
-
-      expect(this.context.label.classList.contains(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE)).toBe(true);
-    });
-
-    it('should not show addon-end content by default', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      await tick();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.ADDON_END)).toBeFalse();
-    });
-
-    it('should detect addon-end content', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      const element = document.createElement('div');
-      element.textContent = 'end';
-      element.slot = 'addon-end';
-      this.context.component.appendChild(element);
-
-      await tick();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.ADDON_END)).toBeTrue();
-    });
-
-    it('should hide addon-on end content if element is removed', async function(this: ITestContext) {
-      this.context = setupTestContext();
-
-      const element = document.createElement('div');
-      element.textContent = 'end';
-      element.slot = 'addon-end';
-      this.context.component.appendChild(element);
-
-      await tick();
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.ADDON_END)).toBeTrue();
-
-      this.context.component.removeChild(element);
-      await tick();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.ADDON_END)).toBeFalse();
-    });
-
-    it('should set focus state when toggling input readonly attribute while focused', async function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      
-      this.context.input.focus();
-      await tick();
-
-      this.context.input.setAttribute('readonly', '');
-      await tick();
-
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.FOCUSED)).toBeTrue();
-      expect(this.context.input.classList.contains(FIELD_CONSTANTS.classes.INPUT_FOCUSED)).toBeTrue();
-      expect(this.context.label.classList.contains(FIELD_CONSTANTS.classes.LABEL_FOCUSED)).toBeTrue();
-    });
-  });
-
-  describe('with leading icon', function(this: ITestContext) {
-    beforeEach(function(this: ITestContext) {
-      const leadingElement = document.createElement('i');
-      const trailingElement = document.createElement('i');
-
-      this.context = setupTestContext(true, {}, { leadingElement, trailingElement });
-    });
-
-    afterEach(function(this: ITestContext) {
-      this.context.destroy();
-    });
-
-    it('should render leading icon class', async function(this: ITestContext) {
-      await tick();
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.LEADING)).toBe(true);
-    });
-
-    it('should render trailing icon class', async function(this: ITestContext) {
-      await tick();
-      expect(this.context.root.classList.contains(FIELD_CONSTANTS.classes.LEADING)).toBe(true);
-    });
-  });
-
-  describe('with multiple inputs', function(this: ITestContext) {
-    beforeEach(function(this: ITestContext) {
-      const inputElement = document.createElement('input');
-      this.context = setupTestContext(false);
-      this.context.component.appendChild(inputElement);
-      document.body.appendChild(this.context.component);
-    });
-
-    afterEach(function(this: ITestContext) {
-      this.context.destroy();
-    });
-
-    it('should handle multiple inputs', function(this: ITestContext) {
-      expect(this.context.root.classList.contains(TEXT_FIELD_CONSTANTS.classes.MULTI_INPUT)).toBeTruthy();
-    });
-  });
-
-  describe('TextFieldComponentDelegate', function(this: ITestContext) {
-    describe('without being in DOM', function(this: ITestContext) {
-      it('should create input without label with default configuration', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate();
-
-        expect(delegate.element.querySelector('input')).not.toBeNull();
-        expect(delegate.element.querySelector('label')).toBeNull();
-      });
-
-      it('should have correct default configuration', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate();
-
-        expect(delegate.element.required).toBe(false);
-        expect(delegate.element.invalid).toBe(false);
-        expect(delegate.element.floatLabelType).toBe('auto');
-        expect(delegate.inputElement.placeholder).toBe('');
-      });
-  
-      it('should create label', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate({ options: { label: 'Label' }});
-        const label = delegate.element.querySelector('label') as HTMLLabelElement;
-
-        expect(label).not.toBeNull();
-        expect(label.innerText).toBe('Label');
-      });
-  
-      it('should create helper text', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate({ options: { helperText: 'Helper text' }});
-        const span = delegate.element.querySelector('[slot="helper-text"]') as HTMLSpanElement;
-
-        expect(span).not.toBeNull();
-        expect(span.innerText).toBe('Helper text');
-      });
-  
-      it('should change helper text content', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate({ options: { helperText: 'Helper text' }});
-
-        delegate.setHelperText('New helper text');
-
-        const span = delegate.element.querySelector('[slot="helper-text"]') as HTMLSpanElement;
-        expect(span.innerText).toBe('New helper text');
-      });
-  
-      it('should not add helper text if set to null', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate();
-
-        delegate.setHelperText(null);
-
-        const span = delegate.element.querySelector('[slot="helper-text"]') as HTMLSpanElement;
-        expect(span).toBeNull();
-      });
-  
-      it('should change label', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate({ options: { label: 'Initial label' }});
-
-        delegate.setLabel('New label');
-
-        const label = delegate.element.querySelector('label') as HTMLLabelElement;
-        expect(label.innerText).toBe('New label');
-      });
-  
-      it('should remove label', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate({ options: { label: 'Initial label' }});
-
-        delegate.setLabel(null);
-
-        const label = delegate.element.querySelector('label') as HTMLLabelElement;
-        expect(label).toBeNull();
-      });
-  
-      it('should create label after initialization', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate();
-
-        delegate.setLabel('Label text');
-
-        const label = delegate.element.querySelector('label') as HTMLLabelElement;
-        expect(label).not.toBeNull();
-        expect(label.innerText).toBe('Label text');
-      });
-
-      it('should expose reference for input element', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate();
-
-        expect(delegate.inputElement).not.toBeNull();
-      });
-
-      it('should expose reference for label element', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate();
-
-        expect(delegate.labelElement).not.toBeNull();
-      });
-
-      it('should set disabled', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate();
-
-        delegate.disabled = true;
-
-        expect(delegate.inputElement.disabled).toBe(true);
-      });
-
-      it('should set disabled', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate();
-
-        delegate.disabled = true;
-        delegate.disabled = false;
-
-        expect(delegate.inputElement.disabled).toBe(false);
-      });
-
-      it('should set initial value', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate({ options: { value: 'val' }});
-
-        expect(delegate.inputElement.value).toBe('val');
-        expect(delegate.value).toBe('val');
-      });
-
-      it('should change value', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate({ options: { value: 'val' }});
-
-        delegate.value = 'new val';
-
-        expect(delegate.inputElement.value).toBe('new val');
-        expect(delegate.value).toBe('new val');
-      });
-
-      it('should initialize required', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate({ props: { required: true }});
-
-        expect(delegate.element.required).toBe(true);
-      });
-
-      it('should initialize invalid', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate({ props: { invalid: true }});
-
-        expect(delegate.invalid).toBe(true);
-      });
-
-      it('should initialize float label type', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate({ props: { floatLabelType: 'always' }});
-
-        expect(delegate.element.floatLabelType).toBe('always');
-      });
-
-      it('should initialize placeholder', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate({ options: { placeholder: 'placeholder text' }});
-
-        expect(delegate.inputElement.placeholder).toBe('placeholder text');
-      });
-
-      it('should pass validation after input value set', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate({ options: { value: 'val' }});
-
-        expect(delegate.invalid).toBeFalse();
-      });
-
-      it('should set density', function(this: ITestContext) {
-        const delegate = new TextFieldComponentDelegate({ props: { density: 'dense' }});
-
-        expect(delegate.element.density).toBe('dense');
-      });
-    });
-
-    describe('in DOM', function(this: ITestContext) {
-      afterEach(function(this: ITestContext) {
-        this.context.destroy();
-      });
-
-      it('should remove helper text element', async function(this: ITestContext) {
-        this.context = setupTestContext(true, {}, { helperText: 'Helper text' });
-        
-        await tick();
-        this.context.delegate.setHelperText(null);
-        await tick();
-
-        const span = this.context.component.querySelector('[slot="helper-text"]') as HTMLSpanElement;
-        expect(span).toBeNull();
-      });
-
-      it('should float label', async function(this: ITestContext) {
-        this.context = setupTestContext(true, {}, { label: 'Test' });
-        await tick();
-        this.context.delegate.floatLabel(true);
-        await floatTick();
-        testFloatingLabelState(this.context.delegate.labelElement as HTMLLabelElement, true);
-      });
-
-      it('should un-float label', async function(this: ITestContext) {
-        this.context = setupTestContext(true, {}, { label: 'Test' });
-        await tick();
-        this.context.delegate.floatLabel(true);
-        await floatTick();
-        this.context.delegate.floatLabel(false);
-        await tick();
-        testFloatingLabelState(this.context.delegate.labelElement as HTMLLabelElement, false);
-      });
-
-      it('should notify when input value changes', async function(this: ITestContext) {
-        this.context = setupTestContext(false);
-
-        const listener = jasmine.createSpy('onChange listener');
-        this.context.delegate.onChange(listener);
-
-        document.body.appendChild(this.context.component);
-        await tick();
-        this.context.delegate.inputElement.value = 'a';
-        this.context.delegate.inputElement.dispatchEvent(new Event('input'));
-
-        expect(listener).toHaveBeenCalledWith('a');
-      });
-
-      it('should notify when input receives focus', async function(this: ITestContext) {
-        this.context = setupTestContext(false);
-
-        const listener = jasmine.createSpy('onFocus listener');
-        this.context.delegate.onFocus(listener);
-
-        document.body.appendChild(this.context.delegate.element);
-        await tick();
-        this.context.delegate.inputElement.dispatchEvent(new Event('focus'));
-
-        expect(listener).toHaveBeenCalled();
-      });
-
-      it('should notify when input loses focus', async function(this: ITestContext) {
-        this.context = setupTestContext(false);
-
-        const listener = jasmine.createSpy('onBlur listener');
-        this.context.delegate.onBlur(listener);
-
-        document.body.appendChild(this.context.component);
-        await tick();
-        this.context.delegate.inputElement.dispatchEvent(new Event('blur'));
-        
-        expect(listener).toHaveBeenCalled();
-      });
-    });
-  });
-
-  function setupTestContext(append = true, props: TextFieldComponentDelegateProps = {}, options: ITextFieldComponentDelegateOptions = { label: 'Label text', id: 'text-field-01' }): ITextFieldTestContext {
-    const delegate = new TextFieldComponentDelegate({ props, options });
-    const label = delegate.element.querySelector('label') as HTMLLabelElement;
-    const input = delegate.element.querySelector('input') as HTMLInputElement;
-    const root = getShadowElement(delegate.element, TEXT_FIELD_CONSTANTS.selectors.ROOT);
-
-    if (append) {
-      document.body.appendChild(delegate.element);
-    }
-
-    return {
-      delegate,
-      component: delegate.element,
-      input,
-      label,
-      root,
-      foundation: delegate.element['_foundation'],
-      destroy: () => removeElement(delegate.element)
-    };
-  }
-});