@tylertech/forge 3.0.0-next.19 → 3.0.0-next.20

package/esm/text-field/text-field-component-delegate.js

@@ -10,28 +10,39 @@ export class TextFieldComponentDelegate extends FormFieldComponentDelegate {
         super(config);
     }
     _build() {
-        var _a, _b;
         const textField = document.createElement(TEXT_FIELD_CONSTANTS.elementName);
         this._inputElement = this._buildInputElement(textField);
-        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.leadingElement) {
-            this._config.options.leadingElement.slot = 'leading';
-            textField.appendChild(this._config.options.leadingElement);
-        }
-        if ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.trailingElement) {
-            this._config.options.trailingElement.slot = 'trailing';
-            textField.appendChild(this._config.options.trailingElement);
-        }
-        textField.appendChild(this._inputElement);
+        textField.append(this._inputElement);
         return textField;
     }
     _configure() {
-        var _a, _b;
-        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.helperText) {
-            this.setHelperText(this._config.options.helperText);
+        var _a, _b, _c, _d, _e, _f, _g;
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.id) {
+            this._element.id = this._config.options.id;
         }
-        if (typeof ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.label) === 'string') {
+        if ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.label) {
             this._createLabel(this._config.options.label);
         }
+        if ((_c = this._config.options) === null || _c === void 0 ? void 0 : _c.startElement) {
+            this._config.options.startElement.slot = 'start';
+            this._element.append(this._config.options.startElement);
+        }
+        if ((_d = this._config.options) === null || _d === void 0 ? void 0 : _d.leadingElement) {
+            this._config.options.leadingElement.slot = 'start';
+            this._element.append(this._config.options.leadingElement);
+        }
+        if ((_e = this._config.options) === null || _e === void 0 ? void 0 : _e.endElement) {
+            this._config.options.endElement.slot = 'end';
+            this._element.append(this._config.options.endElement);
+        }
+        if ((_f = this._config.options) === null || _f === void 0 ? void 0 : _f.trailingElement) {
+            this._config.options.trailingElement.slot = 'end';
+            this._element.append(this._config.options.trailingElement);
+        }
+        if ((_g = this._config.options) === null || _g === void 0 ? void 0 : _g.accessoryElement) {
+            this._config.options.accessoryElement.slot = 'accessory';
+            this._element.append(this._config.options.accessoryElement);
+        }
     }
     get value() {
         return this._inputElement.value;
@@ -46,7 +57,7 @@ export class TextFieldComponentDelegate extends FormFieldComponentDelegate {
         this._inputElement.disabled = value;
     }
     get invalid() {
-        return this._element.invalid || false;
+        return this._element.invalid;
     }
     set invalid(value) {
         this._element.invalid = value;
@@ -67,6 +78,7 @@ export class TextFieldComponentDelegate extends FormFieldComponentDelegate {
         this._inputElement.addEventListener('blur', evt => listener(evt));
     }
     setLabel(text) {
+        var _a;
         if (text) {
             if (this._labelElement) {
                 this._labelElement.textContent = text;
@@ -74,52 +86,70 @@ export class TextFieldComponentDelegate extends FormFieldComponentDelegate {
             else {
                 this._createLabel(text);
             }
+            return;
         }
-        else if (this._labelElement) {
-            this._element.removeChild(this._labelElement);
-            this._labelElement = undefined;
+        (_a = this._labelElement) === null || _a === void 0 ? void 0 : _a.remove();
+        this._labelElement = undefined;
+    }
+    setSupportTextStart(text) {
+        var _a;
+        if (text) {
+            if (!this._supportTextStartElement) {
+                this._supportTextStartElement = document.createElement('span');
+                this._supportTextStartElement.slot = 'support-text-start';
+                this._element.append(this._supportTextStartElement);
+            }
+            this._supportTextStartElement.textContent = text;
+            return;
         }
+        (_a = this._supportTextStartElement) === null || _a === void 0 ? void 0 : _a.remove();
+        this._supportTextStartElement = undefined;
     }
+    // Deprecated alias for `setSupportTextStart`
     setHelperText(text) {
+        this.setSupportTextStart(text);
+    }
+    setSupportTextEnd(text) {
+        var _a;
         if (text) {
-            if (!this._helperTextElement) {
-                this._helperTextElement = document.createElement('span');
-                this._helperTextElement.slot = 'helper-text';
-                this._element.appendChild(this._helperTextElement);
+            if (!this._supportTextEndElement) {
+                this._supportTextEndElement = document.createElement('span');
+                this._supportTextEndElement.slot = 'support-text-end';
+                this._element.append(this._supportTextEndElement);
             }
-            this._helperTextElement.textContent = text;
-        }
-        else if (this._helperTextElement) {
-            this._element.removeChild(this._helperTextElement);
-            this._helperTextElement = undefined;
+            this._supportTextEndElement.textContent = text;
+            return;
         }
+        (_a = this._supportTextEndElement) === null || _a === void 0 ? void 0 : _a.remove();
+        this._supportTextEndElement = undefined;
     }
     floatLabel(value) {
-        this._element.floatLabel(value);
+        this._element.floatLabel = value;
     }
     _createLabel(text) {
         var _a;
         this._labelElement = document.createElement('label');
         this._labelElement.textContent = text;
+        this._labelElement.slot = 'label';
         if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.id) {
-            this._labelElement.setAttribute('for', this._config.options.id);
+            this._labelElement.htmlFor = this._config.options.id;
         }
-        this._element.appendChild(this._labelElement);
+        this._element.append(this._labelElement);
     }
     _buildInputElement(textField) {
         var _a, _b, _c, _d, _e;
         const inputElement = document.createElement('input');
-        inputElement.type = ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.type) || 'text';
-        if (((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.value) !== undefined) {
+        inputElement.type = (_b = (_a = this._config.options) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : 'text';
+        if (((_c = this._config.options) === null || _c === void 0 ? void 0 : _c.value) !== undefined) {
             inputElement.value = this._config.options.value;
         }
-        if ((_c = this._config.options) === null || _c === void 0 ? void 0 : _c.id) {
+        if ((_d = this._config.options) === null || _d === void 0 ? void 0 : _d.id) {
             inputElement.id = this._config.options.id;
         }
-        if (typeof ((_d = this._config.options) === null || _d === void 0 ? void 0 : _d.placeholder) === 'string') {
-            inputElement.placeholder = (_e = this._config.options) === null || _e === void 0 ? void 0 : _e.placeholder;
+        if (((_e = this._config.options) === null || _e === void 0 ? void 0 : _e.placeholder) !== undefined) {
+            inputElement.placeholder = this._config.options.placeholder;
         }
-        textField.appendChild(inputElement);
+        textField.append(inputElement);
         return inputElement;
     }
 }

package/esm/text-field/text-field-constants.d.ts

@@ -3,19 +3,30 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+declare const observedInputAttributes: string[];
 export declare const TEXT_FIELD_CONSTANTS: {
     elementName: "forge-text-field";
+    observedAttributes: {
+        SHOW_CLEAR: string;
+    };
     attributes: {
-        MULTI_INPUT: string;
-        MULTI_INPUT_SEPARATOR: string;
+        SHOW_CLEAR: string;
+    };
+    selectors: {
+        FIELD: string;
+        CLEAR_BUTTON_SLOT: string;
+        FORGE_LABEL: "forge-label";
+        INPUT: string;
     };
-    classes: {
-        ROOT: string;
-        MULTI_INPUT: string;
+    observedInputAttributes: string[];
+    tagNames: {
         TEXTAREA: string;
+        LABEL: string;
     };
-    selectors: {
-        ROOT: string;
+    events: {
+        CLEAR: string;
     };
 };
-export { type FieldDensityType as TextFieldDensityType, type FieldFloatLabelType as TextFieldFloatLabelType, type FieldShapeType as TextFieldShapeType } from '../field/field-constants';
+export type TextFieldInputAttributeObserver = (name: keyof typeof observedInputAttributes, value: string | null) => void;
+export type TextFieldValueChangeListener = (value: string | null) => void;
+export {};

package/esm/text-field/text-field-constants.js

@@ -4,22 +4,32 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
+import { LABEL_CONSTANTS } from '../label';
 const elementName = `${COMPONENT_NAME_PREFIX}text-field`;
-const attributes = {
-    MULTI_INPUT: 'data-forge-multi-input',
-    MULTI_INPUT_SEPARATOR: 'data-forge-multi-input-separator'
-};
-const classes = {
-    ROOT: 'forge-text-field',
-    MULTI_INPUT: 'forge-text-field--multi-input',
-    TEXTAREA: 'forge-text-field--textarea'
+const observedAttributes = {
+    SHOW_CLEAR: 'show-clear'
 };
+const attributes = Object.assign({}, observedAttributes);
 const selectors = {
-    ROOT: `.${classes.ROOT}`
+    FIELD: '#field',
+    CLEAR_BUTTON_SLOT: 'slot[name=clear-button]',
+    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)'
+};
+const observedInputAttributes = ['disabled', 'placeholder'];
+const tagNames = {
+    TEXTAREA: 'TEXTAREA',
+    LABEL: 'LABEL'
+};
+const events = {
+    CLEAR: `${elementName}-clear`
 };
 export const TEXT_FIELD_CONSTANTS = {
     elementName,
+    observedAttributes,
     attributes,
-    classes,
-    selectors
+    selectors,
+    observedInputAttributes,
+    tagNames,
+    events
 };

package/esm/text-field/text-field-foundation.d.ts

@@ -3,12 +3,34 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { ITextFieldAdapter } from './text-field-adapter';
-import { FieldFoundation, IFieldFoundation } from '../field/field-foundation';
-export interface ITextFieldFoundation extends IFieldFoundation {
+import { FieldLabelPosition } from '../field-next';
+import { BaseFieldFoundation, IBaseFieldFoundation } from '../field-next/base/base-field-foundation';
+import { ITextFieldAdapter, TextFieldAdapter } from './text-field-adapter';
+export interface ITextFieldFoundation extends IBaseFieldFoundation {
+    readonly popoverTargetElement: HTMLElement;
+    showClear: boolean;
 }
-export declare class TextFieldFoundation extends FieldFoundation implements ITextFieldFoundation {
-    protected _adapter: ITextFieldAdapter;
-    constructor(_adapter: ITextFieldAdapter);
+export declare class TextFieldFoundation extends BaseFieldFoundation<ITextFieldAdapter> implements ITextFieldFoundation {
+    protected _adapter: TextFieldAdapter;
+    private _showClear;
+    private _slotChangeListener;
+    private _inputAttributeListener;
+    private _valueChangeListener;
+    private _inputListener;
+    private _clearButtonClickListener;
+    constructor(_adapter: TextFieldAdapter);
     initialize(): void;
+    disconnect(): void;
+    get popoverTargetElement(): HTMLElement;
+    private _onSlotChange;
+    private _onInputAttributeChange;
+    private _onClearButtonClick;
+    private _onValueChange;
+    private _toggleClearButtonVisibility;
+    get showClear(): boolean;
+    set showClear(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get labelPosition(): FieldLabelPosition;
+    set labelPosition(value: FieldLabelPosition);
 }

package/esm/text-field/text-field-foundation.js

@@ -3,14 +3,107 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { FieldFoundation } from '../field/field-foundation';
-export class TextFieldFoundation extends FieldFoundation {
+import { FIELD_CONSTANTS } from '../field-next';
+import { BaseFieldFoundation } from '../field-next/base/base-field-foundation';
+import { TEXT_FIELD_CONSTANTS } from './text-field-constants';
+export class TextFieldFoundation extends BaseFieldFoundation {
     constructor(_adapter) {
         super(_adapter);
         this._adapter = _adapter;
+        this._showClear = false;
+        this._slotChangeListener = this._onSlotChange.bind(this);
+        this._inputAttributeListener = this._onInputAttributeChange.bind(this);
+        this._valueChangeListener = this._onValueChange.bind(this);
+        this._inputListener = this._onValueChange.bind(this);
+        this._clearButtonClickListener = (evt) => this._onClearButtonClick(evt);
     }
     initialize() {
-        super.initialize();
-        this._adapter.detectTextarea();
+        this._adapter.addRootListener('slotchange', this._slotChangeListener);
+        this._adapter.addRootListener('input', this._inputListener);
+    }
+    disconnect() {
+        this._adapter.removeRootListener('slotchange', this._slotChangeListener);
+        this._adapter.removeRootListener('input', this._inputListener);
+        this._adapter.removeValueChangeListener();
+    }
+    get popoverTargetElement() {
+        return this._adapter.popoverTargetElement;
+    }
+    _onSlotChange(evt) {
+        const target = evt.target;
+        switch (target.name) {
+            case 'label':
+                this._adapter.tryConnectSlottedLabel(target);
+                break;
+            case '':
+                this._adapter.handleDefaultSlotChange(target, this._inputAttributeListener);
+                this._adapter.tryAddValueChangeListener(this, this._valueChangeListener);
+                this._tryFloatLabel();
+                break;
+        }
+    }
+    _onInputAttributeChange(name, value) {
+        switch (name) {
+            case 'disabled':
+                this.disabled = value !== null;
+                break;
+            case 'placeholder':
+                this._tryFloatLabel();
+                break;
+        }
+    }
+    _onClearButtonClick(evt) {
+        const event = new CustomEvent(TEXT_FIELD_CONSTANTS.events.CLEAR, { bubbles: true, cancelable: true, composed: true });
+        this._adapter.dispatchHostEvent(event);
+        if (!event.defaultPrevented) {
+            this._adapter.clearInput();
+        }
+    }
+    ;
+    _onValueChange() {
+        this._tryFloatLabel();
+        this._toggleClearButtonVisibility();
+    }
+    _toggleClearButtonVisibility() {
+        this._adapter.toggleClearButtonVisibility(this._showClear && this._hasValue && !this.disabled);
+    }
+    get showClear() {
+        return this._showClear;
+    }
+    set showClear(value) {
+        if (this._showClear !== value) {
+            this._showClear = value;
+            this._adapter.toggleHostAttribute(TEXT_FIELD_CONSTANTS.attributes.SHOW_CLEAR, value);
+            if (value) {
+                this._adapter.connectClearButton(this._clearButtonClickListener);
+            }
+            else {
+                this._adapter.disconnectClearButton(this._clearButtonClickListener);
+            }
+            this._toggleClearButtonVisibility();
+        }
+    }
+    get disabled() {
+        return super.disabled;
+    }
+    set disabled(value) {
+        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();
+        }
+    }
+    get labelPosition() {
+        return super.labelPosition;
+    }
+    set labelPosition(value) {
+        if (this._labelPosition !== value) {
+            this._labelPosition = value;
+            this._adapter.toggleHostAttribute(FIELD_CONSTANTS.attributes.LABEL_POSITION, true, value);
+            this._adapter.setFieldProperty('labelPosition', value);
+            this._tryFloatLabel();
+        }
     }
 }

package/esm/text-field/text-field.d.ts

@@ -3,9 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { BaseField, IBaseField } from '../field-next/base/base-field';
 import { TextFieldFoundation } from './text-field-foundation';
-import { FieldComponent, IFieldComponent } from '../field/field';
-export interface ITextFieldComponent extends IFieldComponent {
+export interface ITextFieldComponent extends IBaseField {
+    showClear: boolean;
+    readonly popoverTargetElement: HTMLElement;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -13,10 +15,46 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-text-field>` custom element.
- *
  * @tag forge-text-field
+ *
+ * @summary The Forge Text Field component wraps and styles an input or textarea element.
+ *
+ * @property {boolean} showClear - Whether the clear button appears when text has been entered.
+ * @property {HTMLElement} popoverTargetElement - Gets a reference to the element that the popover should target for best alignment.
+ *
+ * @attribute {boolean} show-clear - Whether the clear button appears when text has been entered.
+ *
+ * @event {CustomEvent<null>} forge-text-field-clear - Dispatches when the clear button is clicked.
+ *
+ * @csspart root - The root container element.
+ * @csspart label - The label element.
+ * @csspart container - The container element surrounding the input.
+ * @csspart input - The element containing te input slot.
+ * @csspart start - The element containing the start slot.
+ * @csspart end - The element containing the end slot.
+ * @csspart popover-icon - The popover icon element.
+ * @csspart accessory - The element containing the accessory slot.
+ * @csspart support-text - The support text element.
+ * @csspart support-text-start - The element containing the support text start slot.
+ * @csspart support-text-end - The element containing the support text end slot.
+ * @csspart focus-indicator - The focus indicator element.
+ *
+ * @slot - The default/unnamed slot for the field's input.
+ * @slot label - Renders its content as a positioned label.
+ * @slot start - Typically reserved for content/icons that render logically before the default slot content.
+ * @slot end - Typically reserved content/icons that render logically after the default slot content.
+ * @slot clear-button - Content slotted here replaces the default clear button.
+ * @slot clear-button-tooltip - Sets the text content of the clear button's tooltip and accessible label.
+ * @slot accessory - Used for content such as a button that is logically connected to the field but should appear distinct from the input.
+ * @slot support-text-start - Used for content that provides additional information about the field. Aligns to the inline start of the field.
+ * @slot support-text-end - Used for content that provides additional information about the field. Aligns to the inline end of the field.
  */
-export declare class TextFieldComponent extends FieldComponent<TextFieldFoundation> implements ITextFieldComponent {
+export declare class TextFieldComponent extends BaseField<TextFieldFoundation> implements ITextFieldComponent {
+    static get observedAttributes(): string[];
+    protected readonly _foundation: TextFieldFoundation;
     constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    get popoverTargetElement(): HTMLElement;
+    showClear: boolean;
 }

package/esm/text-field/text-field.js

@@ -4,28 +4,92 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, attachShadowTemplate } from '@tylertech/forge-core';
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { tylIconClear } from '@tylertech/tyler-icons/standard';
+import { BASE_FIELD_CONSTANTS, FieldComponent } from '../field-next';
+import { BaseField } from '../field-next/base/base-field';
+import { IconRegistry } from '../icon';
+import { IconButtonComponent } from '../icon-button';
+import { TooltipComponent } from '../tooltip';
 import { TextFieldAdapter } from './text-field-adapter';
-import { TextFieldFoundation } from './text-field-foundation';
 import { TEXT_FIELD_CONSTANTS } from './text-field-constants';
-import { FieldComponent } from '../field/field';
-const template = '<template><div class=\"forge-text-field__wrapper\" part=\"root\"><div class=\"forge-text-field forge-field\" part=\"container\"><div class=\"forge-text-field__leading-container\" part=\"leading-container\"><slot name=\"leading\"></slot></div><div class=\"forge-field__label-input-container\" part=\"label-input-container\"><slot></slot><slot name=\"label\"></slot></div><slot name=\"trailing\"></slot><div class=\"forge-field__addon-end-container\" part=\"addon-end-container\"><slot name=\"addon-end\"></slot></div></div><slot name=\"helper-text\"></slot></div></template>';
-const styles = '.forge-field::before{content:\"\";display:-webkit-box;display:flex;position:absolute;top:0;right:0;left:0;z-index:-1;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:100%;pointer-events:none;border-style:solid;border-style:var(--forge-text-field-border-style,solid);border-width:1px;-webkit-transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);background-color:transparent;background-color:var(--forge-text-field-theme-background,transparent);text-align:left}.forge-field[dir=rtl]::before,[dir=rtl] .forge-field::before{text-align:right}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused)::before{border-color:rgba(0,0,0,.38);border-color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused):hover::before{border-color:rgba(0,0,0,.87);border-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled)::before{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.forge-field--invalid:not(.forge-field--disabled)::before{border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.forge-field--invalid:not(.forge-field--disabled):not(.forge-field--focused):hover::before{border-color:#db8a98;border-color:var(--forge-theme-error-hover,#db8a98)}.forge-field--disabled::before{border-color:rgba(0,0,0,.38);border-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--shape-rounded){border-radius:4px}.forge-field:not(.forge-field--shape-rounded)::before{border-radius:4px}.forge-field--shape-rounded{border-radius:28px}.forge-field--shape-rounded::before{border-radius:28px}.forge-field--disabled::before{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5)}.forge-field--focused::before{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee);border-width:2px}.forge-field__label-input-container{position:relative;-webkit-box-flex:1;flex:1 1 0.0001px;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;min-width:0}.forge-field ::slotted(label){color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65));pointer-events:none;right:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);font-size:var(--mdc-typography-subtitle1-font-size, 1rem);position:absolute;left:0;-webkit-transform-origin:left top;transform-origin:left top;line-height:1.1rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;-webkit-transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-field ::slotted(label[dir=rtl]),[dir=rtl] .forge-field ::slotted(label){right:0;left:auto;-webkit-transform-origin:right top;transform-origin:right top;text-align:right}.forge-field--dense:not(.forge-field--roomy) ::slotted(label){display:none}.forge-field--required ::slotted(label)::after{content:none}.forge-field--required ::slotted(label)::before{color:#b00020;color:var(--mdc-theme-error,#b00020);content:\"*\";margin-right:4px}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label){font-size:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(label){font-size:1rem}.forge-field--disabled ::slotted(label){color:rgba(0,0,0,.38);color:var(--forge-theme-label-disabled-on-background,rgba(0,0,0,.38))}.forge-field--invalid:not(.forge-field--disabled) ::slotted(label){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) ::slotted(label){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label){top:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(label){top:1.285rem}.forge-field:not(.forge-field--shape-rounded):not(.forge-field--leading) ::slotted(label){left:12px!important}.forge-field--shape-rounded:not(.forge-field--leading) ::slotted(label){left:32px!important}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end):not(.forge-field--shape-rounded) ::slotted(label){padding-right:12px}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end).forge-field--shape-rounded ::slotted(label){padding-right:32px}.forge-field ::slotted(label.forge-floating-label--float-above){color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65))}.forge-field--disabled ::slotted(label.forge-floating-label--float-above){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-field--invalid:not(.forge-field--disabled) ::slotted(label.forge-floating-label--float-above){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) ::slotted(label.forge-floating-label--float-above){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--float-above){-webkit-transform:translateY(-.54rem) scale(.8125);transform:translateY(-.54rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--float-above){-webkit-transform:translateY(-.72rem) scale(.8125);transform:translateY(-.72rem) scale(.8125);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe){-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.62rem) scale(1);transform:translateY(-.62rem) scale(1);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe){-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.8rem) scale(1);transform:translateY(-.8rem) scale(1);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--unfloat-above-start-keyframe){-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.62rem) scale(.8125);transform:translateY(-.62rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--unfloat-above-start-keyframe){-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.8rem) scale(.8125);transform:translateY(-.8rem) scale(.8125);cursor:auto}.forge-field ::slotted(input){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);align-self:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;-webkit-transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);border:none;background:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;line-height:normal;min-width:0}.forge-field ::slotted(input)::-webkit-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::-moz-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input):-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input):invalid{-webkit-box-shadow:none;box-shadow:none}.forge-field ::slotted(input):-webkit-autofill{z-index:auto!important}.forge-field:not(.forge-field--disabled) ::slotted(input){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--disabled ::slotted(input){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6));cursor:not-allowed}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(input){font-size:1rem;font-size:var(--forge-field-font-size, 1rem)}.forge-field--roomy:not(.forge-field--dense) ::slotted(input){font-size:1rem;font-size:var(--forge-field-font-size, 1rem)}.forge-field--dense:not(.forge-field--roomy) ::slotted(input){font-size:.875rem;font-size:var(--forge-field-font-size, .875rem)}.forge-field ::slotted(input){padding:0 12px}.forge-field--label ::slotted(input){padding-top:24px}.forge-field--roomy.forge-field--label ::slotted(input){padding-top:29px}.forge-field--shape-rounded:not(.forge-field--leading) ::slotted(input){padding-left:32px}.forge-field--leading ::slotted(input){padding-left:0}.forge-field--label ::slotted(input){padding-bottom:3px}.forge-field--roomy.forge-field--label ::slotted(input){padding-bottom:8px}.forge-field--shape-rounded:not(.forge-field--trailing):not(.forge-field--addon-end) ::slotted(input){padding-right:32px}.forge-field--addon-end ::slotted(input),.forge-field--trailing ::slotted(input){padding-right:0}.forge-field~::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;min-height:1.5rem;line-height:normal;padding-top:4px;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-field:not(.forge-field--dense):not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field--roomy:not(.forge-field--dense)~::slotted([slot=helper-text]){font-size:.875rem}.forge-field--dense:not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field~::slotted([slot=helper-text]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled)~::slotted([slot=helper-text]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field:not(.forge-field--shape-rounded)~::slotted([slot=helper-text]){margin-left:12px}.forge-field--shape-rounded~::slotted([slot=helper-text]){margin-left:32px}.forge-field ::slotted([slot=leading]){display:-webkit-box;display:flex;align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=leading]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=leading]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=leading]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=leading]){margin:0 4px}.forge-field ::slotted([slot=leading]:not(forge-icon-button)){padding:6px}.forge-field ::slotted([slot=trailing]){align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=trailing]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=trailing]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=trailing]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=trailing]){margin:0 4px}.forge-field ::slotted([slot=trailing]:not(forge-icon-button)){padding:6px}.forge-field__addon-end-container{display:none}.forge-field--addon-end .forge-field__addon-end-container{height:100%;width:auto;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;padding:0 4px;border-left-width:1px;border-left-style:solid;-webkit-transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1)}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.54);border-left-color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container:hover{border-left-color:rgba(0,0,0,.87);border-left-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#6200ee;border-left-color:var(--mdc-theme-primary,#6200ee)}.forge-field.forge-field--invalid:not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#b00020;border-left-color:var(--mdc-theme-error,#b00020)}.forge-field.forge-field--invalid:not(.forge-field--focused):not(.forge-field--disabled) .forge-field__addon-end-container:hover{border-left-color:#db8a98;border-left-color:var(--forge-theme-error-hover,#db8a98)}.forge-field.forge-field--disabled .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.38);border-left-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=addon-end]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=addon-end]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=addon-end]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-text-field{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;z-index:1;z-index:var(--forge-z-index-surface,1);margin-top:0;margin-top:var(--forge-text-field-margin-top,0)}.forge-text-field.forge-field--disabled{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5);cursor:not-allowed}.forge-text-field:not(.forge-text-field--textarea):not(.forge-field--dense):not(.forge-field--roomy){height:3rem;height:var(--forge-text-field-height,3rem)}.forge-text-field:not(.forge-text-field--textarea).forge-field--roomy:not(.forge-field--dense){height:3.5rem;height:var(--forge-text-field-height,3.5rem)}.forge-text-field:not(.forge-text-field--textarea).forge-field--dense:not(.forge-field--roomy){height:1.5rem;height:var(--forge-text-field-height,1.5rem)}.forge-text-field__leading-container{display:-webkit-box;display:flex;align-self:center}.forge-text-field--multi-input ::slotted(input:first-of-type){padding-right:0;max-width:110px;min-width:110px;width:110px}.forge-text-field--multi-input ::slotted(input:last-of-type)::-webkit-input-placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted(input:last-of-type)::-moz-placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted(input:last-of-type):-ms-input-placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted(input:last-of-type)::-ms-input-placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted(input:last-of-type)::placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted([data-forge-multi-input-separator]){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));border:transparent}.forge-text-field--multi-input.forge-field--label ::slotted([data-forge-multi-input-separator]){margin:20px 0 0 4px}.forge-text-field--multi-input:not(.forge-field--label) ::slotted([data-forge-multi-input-separator]){margin:0 0 0 4px}.forge-text-field.forge-text-field--textarea{height:auto;padding-right:2px;min-height:3rem;min-height:var(--forge-text-field-height,3rem)}.forge-text-field.forge-text-field--textarea ::slotted(textarea){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-body1-font-size, 1rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);align-self:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;-webkit-transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);border:none;background:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;line-height:normal;min-width:0;font-size:1rem;margin:28px 0 0;padding:0 12px 8px;overflow:auto;resize:vertical}.forge-text-field.forge-text-field--textarea ::slotted(textarea)::-webkit-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea)::-moz-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea):-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea)::-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea)::placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea):invalid{-webkit-box-shadow:none;box-shadow:none}.forge-text-field.forge-text-field--textarea ::slotted(textarea):-webkit-autofill{z-index:auto!important}.forge-text-field.forge-text-field--textarea:not(.forge-field--disabled) ::slotted(textarea){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-text-field.forge-text-field--textarea.forge-field--disabled ::slotted(textarea){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6));cursor:not-allowed}:host{display:block;contain:layout}:host([hidden]){display:none}';
+import { TextFieldFoundation } from './text-field-foundation';
+const template = '<template><forge-field id=\"field\"><slot slot=\"label\" name=\"label\"></slot><slot slot=\"start\" name=\"start\"></slot><slot></slot><slot slot=\"end\" name=\"end\"></slot><slot slot=\"end\" name=\"clear-button\"><forge-icon-button tabindex=\"-1\" dense><forge-icon name=\"clear\"></forge-icon></forge-icon-button><forge-tooltip type=\"label\"><slot name=\"clear-button-tooltip\">Clear</slot></forge-tooltip></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text-start\" name=\"support-text-start\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text-start\" name=\"helper-text\"></slot></forge-field></template>';
+const styles = ':host{display:block}:host([hidden]){display:none}forge-field{display:contents}';
 /**
- * The web component class behind the `<forge-text-field>` custom element.
- *
  * @tag forge-text-field
+ *
+ * @summary The Forge Text Field component wraps and styles an input or textarea element.
+ *
+ * @property {boolean} showClear - Whether the clear button appears when text has been entered.
+ * @property {HTMLElement} popoverTargetElement - Gets a reference to the element that the popover should target for best alignment.
+ *
+ * @attribute {boolean} show-clear - Whether the clear button appears when text has been entered.
+ *
+ * @event {CustomEvent<null>} forge-text-field-clear - Dispatches when the clear button is clicked.
+ *
+ * @csspart root - The root container element.
+ * @csspart label - The label element.
+ * @csspart container - The container element surrounding the input.
+ * @csspart input - The element containing te input slot.
+ * @csspart start - The element containing the start slot.
+ * @csspart end - The element containing the end slot.
+ * @csspart popover-icon - The popover icon element.
+ * @csspart accessory - The element containing the accessory slot.
+ * @csspart support-text - The support text element.
+ * @csspart support-text-start - The element containing the support text start slot.
+ * @csspart support-text-end - The element containing the support text end slot.
+ * @csspart focus-indicator - The focus indicator element.
+ *
+ * @slot - The default/unnamed slot for the field's input.
+ * @slot label - Renders its content as a positioned label.
+ * @slot start - Typically reserved for content/icons that render logically before the default slot content.
+ * @slot end - Typically reserved content/icons that render logically after the default slot content.
+ * @slot clear-button - Content slotted here replaces the default clear button.
+ * @slot clear-button-tooltip - Sets the text content of the clear button's tooltip and accessible label.
+ * @slot accessory - Used for content such as a button that is logically connected to the field but should appear distinct from the input.
+ * @slot support-text-start - Used for content that provides additional information about the field. Aligns to the inline start of the field.
+ * @slot support-text-end - Used for content that provides additional information about the field. Aligns to the inline end of the field.
  */
-let TextFieldComponent = class TextFieldComponent extends FieldComponent {
+let TextFieldComponent = class TextFieldComponent extends BaseField {
+    static get observedAttributes() {
+        return [
+            ...Object.values(BASE_FIELD_CONSTANTS.observedAttributes),
+            ...Object.values(TEXT_FIELD_CONSTANTS.observedAttributes)
+        ];
+    }
     constructor() {
         super();
         attachShadowTemplate(this, template, styles);
         this._foundation = new TextFieldFoundation(new TextFieldAdapter(this));
+        IconRegistry.define(tylIconClear);
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        switch (name) {
+            case TEXT_FIELD_CONSTANTS.attributes.SHOW_CLEAR:
+                this.showClear = coerceBoolean(newValue);
+                break;
+        }
+    }
+    get popoverTargetElement() {
+        return this._foundation.popoverTargetElement;
     }
 };
+__decorate([
+    FoundationProperty()
+], TextFieldComponent.prototype, "showClear", void 0);
 TextFieldComponent = __decorate([
     CustomElement({
-        name: TEXT_FIELD_CONSTANTS.elementName
+        name: TEXT_FIELD_CONSTANTS.elementName,
+        dependencies: [
+            FieldComponent,
+            IconButtonComponent,
+            TooltipComponent
+        ]
     })
 ], TextFieldComponent);
 export { TextFieldComponent };

package/esm/time-picker/time-picker-adapter.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, emitEvent, getActiveElement, toggleAttribute } from '@tylertech/forge-core';
+import { emitEvent, getActiveElement, toggleAttribute } from '@tylertech/forge-core';
 import { BaseAdapter } from '../core';
 import { TIME_PICKER_CONSTANTS } from './time-picker-constants';
 import { TimeInputMask } from '../core/mask/time-input-mask';
@@ -128,7 +128,10 @@ export class TimePickerAdapter extends BaseAdapter {
         this.setToggleDisabled(isDisabled);
     }
     attachDropdown(config) {
-        this._listDropdown = new ListDropdown(this._inputElement, config);
+        if (!this._targetElement) {
+            this._targetElement = this._getTargetElement(this._component.popupTarget);
+        }
+        this._listDropdown = new ListDropdown(this._targetElement, config);
         this._listDropdown.open();
         this._inputElement.setAttribute('aria-controls', `list-dropdown-popup-${config.id}`);
     }
@@ -198,14 +201,9 @@ export class TimePickerAdapter extends BaseAdapter {
         return this._targetElement;
     }
     _getDefaultTargetElement() {
-        // This component is often used with the text-field, if so, let's target our popup around one if its internal elements for proper alignnment
+        var _a;
+        // This component is often used with the text-field, if so, let's target our popup around one if its internal elements for proper alignment
         const textField = this._component.querySelector(TEXT_FIELD_CONSTANTS.elementName);
-        if (textField && textField.shadowRoot) {
-            const textFieldRoot = getShadowElement(textField, TEXT_FIELD_CONSTANTS.selectors.ROOT);
-            if (textFieldRoot) {
-                return textFieldRoot;
-            }
-        }
-        return this._component; // Otherwise we just use the time-picker host as the target
+        return (_a = textField === null || textField === void 0 ? void 0 : textField.popoverTargetElement) !== null && _a !== void 0 ? _a : this._component;
     }
 }