@tylertech/forge 3.11.0 → 3.12.0

package/esm/table/table-adapter.js

@@ -57,8 +57,8 @@ export class TableAdapter extends BaseAdapter {
     setSortDirection(tableElement, columnIndex, sortDirection) {
         TableUtils.setSortDirection(tableElement, columnIndex, sortDirection);
     }
-    setSelectColumnVisibility(tableElement, isVisible, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
-        TableUtils.setSelectColumnVisibility(tableElement, isVisible, selectListener, selectAllListener || null, selectAllTemplate || null, selectCheckboxAlignment || null, data || [], tooltipSelect || null, tooltipSelectAll || null);
+    setSelectColumnVisibility(tableElement, dense, isVisible, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
+        TableUtils.setSelectColumnVisibility(tableElement, dense, isVisible, selectListener, selectAllListener || null, selectAllTemplate || null, selectCheckboxAlignment || null, data || [], tooltipSelect || null, tooltipSelectAll || null);
     }
     setDense(tableElement, isDense) {
         TableUtils.setDenseState(tableElement, isDense);
@@ -69,8 +69,8 @@ export class TableAdapter extends BaseAdapter {
     setResizable(configuration) {
         TableUtils.setResizable(configuration);
     }
-    setSelectAllVisibility(tableElement, isVisible, listener, selectAllTemplate, selectCheckboxAlignment, tooltipSelectAll = null) {
-        TableUtils.setSelectAllVisibility(tableElement, isVisible, listener, selectAllTemplate, selectCheckboxAlignment || null, tooltipSelectAll || null);
+    setSelectAllVisibility(tableElement, dense, isVisible, listener, selectAllTemplate, selectCheckboxAlignment, tooltipSelectAll = null) {
+        TableUtils.setSelectAllVisibility(tableElement, dense, isVisible, listener, selectAllTemplate, selectCheckboxAlignment || null, tooltipSelectAll || null);
     }
     setFilterRow(configuration) {
         TableUtils.setFilterRow(configuration);

package/esm/table/table-core.js

@@ -141,7 +141,7 @@ export class TableCore {
         if (this._select !== value) {
             this._select = value;
             // Now we can add/remove the column
-            this._adapter.setSelectColumnVisibility(this._adapter.getTableElement(), this._select, this._selectRowListener, this._multiselect ? this._selectAllListener : undefined, this._multiselect ? this._selectAllTemplate : null, this._selectCheckboxAlignment, this._tableRows, this._tooltipSelect, this._tooltipSelectAll);
+            this._adapter.setSelectColumnVisibility(this._adapter.getTableElement(), this._dense, this._select, this._selectRowListener, this._multiselect ? this._selectAllListener : undefined, this._multiselect ? this._selectAllTemplate : null, this._selectCheckboxAlignment, this._tableRows, this._tooltipSelect, this._tooltipSelectAll);
             this._updateSelections(true);
             // Update the attribute on the host element
             if (this._select) {
@@ -160,7 +160,7 @@ export class TableCore {
         if (this._multiselect !== value) {
             this._multiselect = value;
             if (this._select) {
-                this._adapter.setSelectAllVisibility(this._adapter.getTableElement(), this._multiselect, this._multiselect ? this._selectAllListener : null, this._multiselect ? this.selectAllTemplate : null, this._selectCheckboxAlignment, this._tooltipSelectAll);
+                this._adapter.setSelectAllVisibility(this._adapter.getTableElement(), this._dense, this._multiselect, this._multiselect ? this._selectAllListener : null, this._multiselect ? this.selectAllTemplate : null, this._selectCheckboxAlignment, this._tooltipSelectAll);
                 this._updateSelections(true);
             }
             this._adapter.setHostAttribute(TABLE_CONSTANTS.attributes.MULTISELECT, this._multiselect.toString());

package/esm/table/table-utils.d.ts

@@ -282,7 +282,7 @@ export declare class TableUtils {
     /**
      * Adds/removes the select column on the table.
      */
-    static setSelectColumnVisibility(tableElement: HTMLTableElement, isVisible: boolean, selectListener: ((evt: Event) => void) | null, selectAllListener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment: CellAlign | null, data: TableRow[], tooltipSelect: string | TableSelectTooltipCallback | null, tooltipSelectAll: string | null): void;
+    static setSelectColumnVisibility(tableElement: HTMLTableElement, dense: boolean, isVisible: boolean, selectListener: ((evt: Event) => void) | null, selectAllListener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment: CellAlign | null, data: TableRow[], tooltipSelect: string | TableSelectTooltipCallback | null, tooltipSelectAll: string | null): void;
     /**
      * Adds the select column to the thead/tbody elements and attaches the provided click listeners.
      * @param theadElement The table head element.
@@ -311,7 +311,7 @@ export declare class TableUtils {
      * @param {HTMLTableElement} tableElement The table element.
      * @param {boolean} isVisible Whether the select all option is visible or not.
      */
-    static setSelectAllVisibility(tableElement: HTMLTableElement, isVisible: boolean, listener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment: CellAlign | null, tooltipSelectAll: string | null): void;
+    static setSelectAllVisibility(tableElement: HTMLTableElement, dense: boolean, isVisible: boolean, listener: ((evt: Event) => void) | null, selectAllTemplate: TableHeaderSelectAllTemplate | null, selectCheckboxAlignment: CellAlign | null, tooltipSelectAll: string | null): void;
     /**
      * Controls the visibility of the table filter row.
      * @param {ITableConfiguration} configuration The table configuration.

package/esm/table/table-utils.js

@@ -51,7 +51,7 @@ export class TableUtils {
         }
         // Add the select column
         if (configuration.selectListener) {
-            TableUtils._addSelectColumn(thead, tbody, configuration.selectListener, configuration.selectAllListener, configuration.selectAllTemplate, configuration.selectCheckboxAlignment, configuration.data, configuration.tooltipSelect, configuration.tooltipSelectAll);
+            TableUtils._addSelectColumn(thead, tbody, configuration.dense, configuration.selectListener, configuration.selectAllListener, configuration.selectAllTemplate, configuration.selectCheckboxAlignment, configuration.data, configuration.tooltipSelect, configuration.tooltipSelectAll);
         }
         if (configuration.resizable || configuration.columnConfigurations.some(c => !!c.sortable)) {
             TableUtils._attachHeadRowMouseDownListener(thead, configuration.headRowMouseDownListener);
@@ -97,7 +97,7 @@ export class TableUtils {
         }
         // Add the select column if necessary
         if (configuration.selectListener) {
-            TableUtils._createBodySelectColumn(tbody, configuration.selectCheckboxAlignment, configuration.data, configuration.tooltipSelect, configuration.tooltipSelectAll);
+            TableUtils._createBodySelectColumn(tbody, configuration.dense, configuration.selectCheckboxAlignment, configuration.data, configuration.tooltipSelect, configuration.tooltipSelectAll);
             TableUtils._attachRowSelectListeners(tbody, configuration.selectListener);
         }
         TableUtils._setTableBody(configuration.tableElement, tbody);
@@ -594,12 +594,12 @@ export class TableUtils {
      * @param theadElement
      * @param tbodyElement
      */
-    static _createSelectColumn(theadElement, tbodyElement, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
+    static _createSelectColumn(theadElement, tbodyElement, dense, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
         if (theadElement) {
-            TableUtils._createHeadSelectColumn(theadElement, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, tooltipSelectAll);
+            TableUtils._createHeadSelectColumn(theadElement, dense, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, tooltipSelectAll);
         }
         if (tbodyElement) {
-            TableUtils._createBodySelectColumn(tbodyElement, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll);
+            TableUtils._createBodySelectColumn(tbodyElement, dense, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll);
         }
     }
     /**
@@ -607,7 +607,7 @@ export class TableUtils {
      * @param {HTMLTableSectionElement} theadElement The table head element.
      * @param {boolean} showSelectAll Whether to show the select all checkbox or not.
      */
-    static _createHeadSelectColumn(theadElement, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, tooltipSelectAll) {
+    static _createHeadSelectColumn(theadElement, dense, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, tooltipSelectAll) {
         Array.from(theadElement.rows).forEach(row => {
             const th = document.createElement('th');
             addClass([TABLE_CONSTANTS.classes.TABLE_CELL, TABLE_CONSTANTS.classes.TABLE_HEAD_CELL], th);
@@ -624,7 +624,7 @@ export class TableUtils {
                 });
             }
             else {
-                lastRowFirstCell?.appendChild(TableUtils._createCheckboxElement(true, selectCheckboxAlignment, null, null, null, tooltipSelectAll));
+                lastRowFirstCell?.appendChild(TableUtils._createCheckboxElement(true, dense, selectCheckboxAlignment, null, null, null, tooltipSelectAll));
             }
         }
     }
@@ -632,9 +632,9 @@ export class TableUtils {
      * Creates the select column in the table body.
      * @param {HTMLTableSectionElement} tbodyElement The table body element.
      */
-    static _createBodySelectColumn(tbodyElement, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
+    static _createBodySelectColumn(tbodyElement, dense, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
         const nonExpandedRows = TableUtils._getNonExpandedRows(tbodyElement.rows);
-        nonExpandedRows.forEach((row, rowIndex) => TableUtils._addRowSelectColumn(row, selectCheckboxAlignment, rowIndex, data[rowIndex], tooltipSelect, tooltipSelectAll));
+        nonExpandedRows.forEach((row, rowIndex) => TableUtils._addRowSelectColumn(row, dense, selectCheckboxAlignment, rowIndex, data[rowIndex], tooltipSelect, tooltipSelectAll));
         // Update the colspan on the expanded rows
         if (tbodyElement.rows.length) {
             const firstRow = tbodyElement.rows.item(0);
@@ -643,10 +643,10 @@ export class TableUtils {
             }
         }
     }
-    static _addRowSelectColumn(row, selectCheckboxAlignment, rowIndex, rowData, tooltipSelect, tooltipSelectAll) {
+    static _addRowSelectColumn(row, dense, selectCheckboxAlignment, rowIndex, rowData, tooltipSelect, tooltipSelectAll) {
         const td = row.insertCell(0);
         addClass([TABLE_CONSTANTS.classes.TABLE_CELL, TABLE_CONSTANTS.classes.TABLE_BODY_CELL, TABLE_CONSTANTS.classes.TABLE_CELL_SELECT], td);
-        td.appendChild(TableUtils._createCheckboxElement(false, selectCheckboxAlignment, rowIndex, rowData, tooltipSelect, tooltipSelectAll));
+        td.appendChild(TableUtils._createCheckboxElement(false, dense, selectCheckboxAlignment, rowIndex, rowData, tooltipSelect, tooltipSelectAll));
     }
     /**
      * Removes the first cell (select cell) in every row in the table head and table body elements.
@@ -678,7 +678,7 @@ export class TableUtils {
     /**
      * Creates a checkbox element for the select column.
      */
-    static _createCheckboxElement(isHeader, alignment, rowIndex, rowData, tooltipSelect, tooltipSelectAll) {
+    static _createCheckboxElement(isHeader, dense, alignment, rowIndex, rowData, tooltipSelect, tooltipSelectAll) {
         const checkboxContainer = document.createElement('div');
         checkboxContainer.classList.add(TABLE_CONSTANTS.classes.TABLE_CELL_SELECT_CHECKBOX_CONTAINER);
         if (alignment) {
@@ -696,6 +696,7 @@ export class TableUtils {
         }
         const checkboxElement = document.createElement(CHECKBOX_CONSTANTS.elementName);
         checkboxElement.setAttribute(TABLE_CONSTANTS.attributes.SELECT_CHECKBOX, '');
+        checkboxElement.dense = dense;
         checkboxContainer.appendChild(checkboxElement);
         const tooltipFactory = (text) => {
             const tooltipEl = document.createElement('forge-tooltip');
@@ -957,14 +958,14 @@ export class TableUtils {
     /**
      * Adds/removes the select column on the table.
      */
-    static setSelectColumnVisibility(tableElement, isVisible, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
+    static setSelectColumnVisibility(tableElement, dense, isVisible, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
         const theadElement = tableElement.tHead;
         const tbodyElement = tableElement.tBodies[0];
         if (!theadElement || !tbodyElement) {
             return;
         }
         if (isVisible) {
-            TableUtils._addSelectColumn(theadElement, tbodyElement, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll);
+            TableUtils._addSelectColumn(theadElement, tbodyElement, dense, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll);
         }
         else if (TableUtils._hasSelectColumn(theadElement, tbodyElement)) {
             if (selectListener) {
@@ -983,8 +984,8 @@ export class TableUtils {
      * @param selectListener The row select listener.
      * @param selectAllListener The select all checkbox listener.
      */
-    static _addSelectColumn(theadElement, tbodyElement, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
-        TableUtils._createSelectColumn(theadElement, tbodyElement, !!selectAllListener, selectAllTemplate, () => {
+    static _addSelectColumn(theadElement, tbodyElement, dense, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
+        TableUtils._createSelectColumn(theadElement, tbodyElement, dense, !!selectAllListener, selectAllTemplate, () => {
             if (selectAllListener) {
                 TableUtils._tryAttachSelectAllTemplateListener(theadElement, selectAllListener);
             }
@@ -1006,6 +1007,9 @@ export class TableUtils {
         if (isDense) {
             tableElement.classList.add(TABLE_CONSTANTS.classes.TABLE_DENSE);
         }
+        // Update the select column checkboxes if they exist
+        const selectColumnCheckboxes = tableElement.querySelectorAll(`forge-checkbox[${TABLE_CONSTANTS.attributes.SELECT_CHECKBOX}]`);
+        selectColumnCheckboxes.forEach(checkboxEl => (checkboxEl.dense = isDense));
     }
     /**
      * Adds/removes the roomy class on the table.
@@ -1086,7 +1090,7 @@ export class TableUtils {
      * @param {HTMLTableElement} tableElement The table element.
      * @param {boolean} isVisible Whether the select all option is visible or not.
      */
-    static setSelectAllVisibility(tableElement, isVisible, listener, selectAllTemplate, selectCheckboxAlignment, tooltipSelectAll) {
+    static setSelectAllVisibility(tableElement, dense, isVisible, listener, selectAllTemplate, selectCheckboxAlignment, tooltipSelectAll) {
         const theadElement = tableElement.tHead;
         if (!theadElement) {
             return;
@@ -1108,7 +1112,7 @@ export class TableUtils {
                     });
                 }
                 else {
-                    selectAllCell.appendChild(TableUtils._createCheckboxElement(true, selectCheckboxAlignment || null, null, null, null, tooltipSelectAll));
+                    selectAllCell.appendChild(TableUtils._createCheckboxElement(true, dense, selectCheckboxAlignment || null, null, null, null, tooltipSelectAll));
                 }
                 if (listener && !selectAllTemplate) {
                     TableUtils._attachSelectAllListener(theadElement, listener);

package/esm/table/table.d.ts

@@ -64,7 +64,7 @@ declare global {
     }
 }
 /**
- * @summary A comprehensive data table component with features for selection, sorting, filtering, resizing, and row expansion functionality.
+ * @summary Tables are used to display sets of data. They organize information into rows and columns, making it easier to read, compare, and analyze. The Forge table provides a configuration-based approach to building data tables with means for sorting, filtering, selecting, and customizing the display of tabular data.
  *
  * @tag forge-table
  *
@@ -185,7 +185,7 @@ export declare class TableComponent extends BaseComponent implements ITableCompo
     columnConfigurations: IColumnConfiguration[];
     /**
      * Controls the visibility of the select column.
-     * @default true
+     * @default false
      * @attribute
      */
     select: boolean;

package/esm/table/table.js

@@ -17,7 +17,7 @@ import { CellAlign } from './types';
 import { TooltipComponent } from '../tooltip';
 import { FocusIndicatorComponent } from '../focus-indicator';
 /**
- * @summary A comprehensive data table component with features for selection, sorting, filtering, resizing, and row expansion functionality.
+ * @summary Tables are used to display sets of data. They organize information into rows and columns, making it easier to read, compare, and analyze. The Forge table provides a configuration-based approach to building data tables with means for sorting, filtering, selecting, and customizing the display of tabular data.
  *
  * @tag forge-table
  *

package/esm/tabs/tab/tab.d.ts

@@ -26,7 +26,7 @@ declare global {
 /**
  * @tag forge-tab
  *
- * @summary Individual tab elements that provide navigation between different content panels.
+ * @summary Tab components represent a single tab inside a tab bar.
  *
  * @dependency forge-focus-indicator
  * @dependency forge-state-layer

package/esm/tabs/tab/tab.js

@@ -16,7 +16,7 @@ const styles = ':host{display:inline-flex;outline:0;-webkit-tap-highlight-color:
 /**
  * @tag forge-tab
  *
- * @summary Individual tab elements that provide navigation between different content panels.
+ * @summary Tab components represent a single tab inside a tab bar.
  *
  * @dependency forge-focus-indicator
  * @dependency forge-state-layer

package/esm/tabs/tab-bar/tab-bar.d.ts

@@ -31,7 +31,7 @@ declare const TabBarComponent_base: import("../../constants").AbstractConstructo
 /**
  * @tag forge-tab-bar
  *
- * @summary Tabs organize content across different screens and views.
+ * @summary Tab bars organize a set of tabs, holding selection state and enabling navigation between different views or sections of content.
  *
  * @description
  * Use tabs to group content into helpful categories. Tabs are typically placed

package/esm/tabs/tab-bar/tab-bar.js

@@ -21,7 +21,7 @@ const styles = ':host{position:relative;display:block}:host([hidden]){display:no
 /**
  * @tag forge-tab-bar
  *
- * @summary Tabs organize content across different screens and views.
+ * @summary Tab bars organize a set of tabs, holding selection state and enabling navigation between different views or sections of content.
  *
  * @description
  * Use tabs to group content into helpful categories. Tabs are typically placed

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

@@ -12,13 +12,14 @@ export interface ITextFieldAdapter extends IBaseFieldAdapter {
     addRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
     removeRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
     disableInput(disabled: boolean): void;
+    setInvalid(value: boolean): void;
     handleDefaultSlotChange(listener: TextFieldInputAttributeObserver): void;
     tryAddValueChangeListener(context: unknown, listener: TextFieldValueChangeListener): void;
     removeValueChangeListener(): void;
     tryFloatLabel(force?: boolean): void;
     tryConnectSlottedLabel(): void;
-    connectClearButton(listener: EventListener): void;
-    disconnectClearButton(listener: EventListener): void;
+    connectClearButton(clickListener: EventListener, mouseDownListener: EventListener): void;
+    disconnectClearButton(clickListener: EventListener, mouseDownListener: EventListener): void;
     toggleClearButtonVisibility(visible: boolean): void;
     clearInput(): void;
     getAllSlotElements(): HTMLSlotElement[];
@@ -39,6 +40,7 @@ export declare class TextFieldAdapter extends BaseFieldAdapter implements ITextF
     addRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
     removeRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
     disableInput(disabled: boolean): void;
+    setInvalid(value: boolean): void;
     inputIsDisabled(): boolean;
     click(): void;
     applyLabel(value: string | null): void;
@@ -47,8 +49,8 @@ export declare class TextFieldAdapter extends BaseFieldAdapter implements ITextF
     removeValueChangeListener(): void;
     tryFloatLabel(force?: boolean): void;
     tryConnectSlottedLabel(): void;
-    connectClearButton(listener: EventListener): void;
-    disconnectClearButton(listener: EventListener): void;
+    connectClearButton(clickListener: EventListener, mouseDownListener: EventListener): void;
+    disconnectClearButton(clickListener: EventListener, mouseDownListener: EventListener): void;
     toggleClearButtonVisibility(visible: boolean): void;
     clearInput(): void;
     getAllSlotElements(): HTMLSlotElement[];

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

@@ -40,6 +40,9 @@ export class TextFieldAdapter extends BaseFieldAdapter {
     disableInput(disabled) {
         this._inputElements.forEach(el => (el.disabled = disabled));
     }
+    setInvalid(value) {
+        this._inputElements.forEach(el => toggleAttribute(el, value, 'aria-invalid', 'true'));
+    }
     inputIsDisabled() {
         return this._inputElements.some(el => el.disabled);
     }
@@ -130,11 +133,15 @@ export class TextFieldAdapter extends BaseFieldAdapter {
         inputElement.id = id;
         label.htmlFor = id;
     }
-    connectClearButton(listener) {
-        this._clearButtonSlotElement.addEventListener('click', listener);
+    connectClearButton(clickListener, mouseDownListener) {
+        this._clearButtonSlotElement.addEventListener('click', clickListener);
+        if (mouseDownListener) {
+            this._clearButtonSlotElement.addEventListener('mousedown', mouseDownListener);
+        }
     }
-    disconnectClearButton(listener) {
-        this._clearButtonSlotElement.removeEventListener('click', listener);
+    disconnectClearButton(clickListener, mouseDownListener) {
+        this._clearButtonSlotElement.removeEventListener('click', clickListener);
+        this._clearButtonSlotElement.removeEventListener('mousedown', mouseDownListener);
     }
     toggleClearButtonVisibility(visible) {
         if (visible) {

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

@@ -18,6 +18,7 @@ export declare class TextFieldCore extends BaseFieldCore<ITextFieldAdapter> impl
     private _valueChangeListener;
     private _inputListener;
     private _clearButtonClickListener;
+    private _clearButtonMouseDownListener;
     constructor(_adapter: TextFieldAdapter);
     initialize(): void;
     destroy(): void;
@@ -27,6 +28,7 @@ export declare class TextFieldCore extends BaseFieldCore<ITextFieldAdapter> impl
     private _handleSlotChange;
     private _onInputAttributeChange;
     private _onClearButtonClick;
+    private _onClearButtonMouseDown;
     /** Responds to the `input` event from the <input> element. */
     private _onInputChange;
     /** Called from the `value` property setter on the <input> element. */
@@ -35,6 +37,8 @@ export declare class TextFieldCore extends BaseFieldCore<ITextFieldAdapter> impl
     private _toggleClearButtonVisibility;
     get showClear(): boolean;
     set showClear(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
     get labelPosition(): FieldLabelPosition;

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

@@ -17,6 +17,7 @@ export class TextFieldCore extends BaseFieldCore {
         this._valueChangeListener = this._onValueChange.bind(this);
         this._inputListener = this._onInputChange.bind(this);
         this._clearButtonClickListener = (evt) => this._onClearButtonClick(evt);
+        this._clearButtonMouseDownListener = (evt) => this._onClearButtonMouseDown(evt);
     }
     initialize() {
         this._adapter.tryApplyGlobalConfiguration(['labelPosition', 'variant']);
@@ -72,6 +73,9 @@ export class TextFieldCore extends BaseFieldCore {
             this._adapter.clearInput();
         }
     }
+    _onClearButtonMouseDown(evt) {
+        evt.preventDefault(); // Prevent focus change to avoid blur event
+    }
     /** Responds to the `input` event from the <input> element. */
     _onInputChange(evt) {
         let floatLabel;
@@ -101,14 +105,21 @@ export class TextFieldCore extends BaseFieldCore {
             this._showClear = value;
             this._adapter.toggleHostAttribute(TEXT_FIELD_CONSTANTS.attributes.SHOW_CLEAR, value);
             if (value) {
-                this._adapter.connectClearButton(this._clearButtonClickListener);
+                this._adapter.connectClearButton(this._clearButtonClickListener, this._clearButtonMouseDownListener);
             }
             else {
-                this._adapter.disconnectClearButton(this._clearButtonClickListener);
+                this._adapter.disconnectClearButton(this._clearButtonClickListener, this._clearButtonMouseDownListener);
             }
             this._toggleClearButtonVisibility();
         }
     }
+    get invalid() {
+        return super.invalid;
+    }
+    set invalid(value) {
+        super.invalid = value;
+        this._adapter.setInvalid(value);
+    }
     get disabled() {
         return super.disabled;
     }

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

@@ -20,7 +20,7 @@ declare global {
 /**
  * @tag forge-text-field
  *
- * @summary The Forge Text Field component wraps and styles an input or textarea element.
+ * @summary The Forge Text Field component is an input field used to capture user text input. It requires a child `<input>` or `<textarea>` element to function properly, and an optional `<label>` element can be used to provide a label for the `<input>`.
  *
  * @dependency forge-field
  * @dependency forge-icon-button

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

@@ -19,7 +19,7 @@ const styles = ':host{display:block}:host([hidden]){display:none}forge-field{dis
 /**
  * @tag forge-text-field
  *
- * @summary The Forge Text Field component wraps and styles an input or textarea element.
+ * @summary The Forge Text Field component is an input field used to capture user text input. It requires a child `<input>` or `<textarea>` element to function properly, and an optional `<label>` element can be used to provide a label for the `<input>`.
  *
  * @dependency forge-field
  * @dependency forge-icon-button

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

@@ -189,6 +189,7 @@ export class TimePickerAdapter extends BaseAdapter {
             this._toggleElement.setAttribute('aria-disabled', value.toString());
             if ('disabled' in this._toggleElement) {
                 this._toggleElement.disabled = value;
+                this._toggleElement.tabIndex = -1;
             }
             else {
                 const button = this._toggleElement.querySelector('button');

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

@@ -579,7 +579,7 @@ export class TimePickerCore {
                 for (let totalMinutes = minMinutes; totalMinutes < TIME_PICKER_CONSTANTS.numbers.MAX_DAY_MINUTES; totalMinutes += minuteStep) {
                     const millis = minutesToMillis(totalMinutes);
                     const disabled = this._restrictedTimes.includes(millis);
-                    const label = millisToTimeString(millis, this._use24HourTime, false) || '';
+                    const label = millisToTimeString(millis, this._use24HourTime, this._allowSeconds) || '';
                     const value = { time: millis };
                     times.push({ label, value, disabled });
                 }
@@ -587,7 +587,7 @@ export class TimePickerCore {
                 for (let totalMinutes = 0; totalMinutes <= maxMinutes; totalMinutes += minuteStep) {
                     const millis = minutesToMillis(totalMinutes);
                     const disabled = this._restrictedTimes.includes(millis);
-                    const label = millisToTimeString(millis, this._use24HourTime, false) || '';
+                    const label = millisToTimeString(millis, this._use24HourTime, this._allowSeconds) || '';
                     const value = { time: millis };
                     times.push({ label, value, disabled });
                 }
@@ -602,7 +602,7 @@ export class TimePickerCore {
                     }
                     const millis = minutesToMillis(totalMinutes);
                     const disabled = this._restrictedTimes.includes(millis);
-                    const label = millisToTimeString(millis, this._use24HourTime, false) || '';
+                    const label = millisToTimeString(millis, this._use24HourTime, this._allowSeconds) || '';
                     const value = { time: millis };
                     times.push({ label, value, disabled });
                 }

package/esm/toast/toast-adapter.d.ts

@@ -14,6 +14,16 @@ export interface IToastAdapter extends IBaseAdapter<IToastComponent> {
     removeActionListener(listener: EventListener): void;
     setDismissLabel(label: string): void;
     setActionText(text: string): void;
+    addPointerEnterListener(listener: EventListener): void;
+    removePointerEnterListener(listener: EventListener): void;
+    addPointerLeaveListener(listener: EventListener): void;
+    removePointerLeaveListener(listener: EventListener): void;
+    addFocusInListener(listener: EventListener): void;
+    removeFocusInListener(listener: EventListener): void;
+    addFocusOutListener(listener: EventListener): void;
+    removeFocusOutListener(listener: EventListener): void;
+    addKeyboardListener(listener: EventListener): void;
+    removeKeyboardListener(listener: EventListener): void;
 }
 export declare class ToastAdapter extends BaseAdapter<IToastComponent> implements IToastAdapter {
     private _overlayElement;
@@ -29,4 +39,14 @@ export declare class ToastAdapter extends BaseAdapter<IToastComponent> implement
     removeActionListener(listener: EventListener): void;
     setDismissLabel(label: string): void;
     setActionText(text: string): void;
+    addPointerEnterListener(listener: EventListener): void;
+    removePointerEnterListener(listener: EventListener): void;
+    addPointerLeaveListener(listener: EventListener): void;
+    removePointerLeaveListener(listener: EventListener): void;
+    addFocusInListener(listener: EventListener): void;
+    removeFocusInListener(listener: EventListener): void;
+    addFocusOutListener(listener: EventListener): void;
+    removeFocusOutListener(listener: EventListener): void;
+    addKeyboardListener(listener: EventListener): void;
+    removeKeyboardListener(listener: EventListener): void;
 }

package/esm/toast/toast-adapter.js

@@ -46,4 +46,34 @@ export class ToastAdapter extends BaseAdapter {
             this._actionButtonElement.setAttribute('hidden', '');
         }
     }
+    addPointerEnterListener(listener) {
+        this._component.addEventListener('pointerenter', listener);
+    }
+    removePointerEnterListener(listener) {
+        this._component.removeEventListener('pointerenter', listener);
+    }
+    addPointerLeaveListener(listener) {
+        this._component.addEventListener('pointerleave', listener);
+    }
+    removePointerLeaveListener(listener) {
+        this._component.removeEventListener('pointerleave', listener);
+    }
+    addFocusInListener(listener) {
+        this._component.addEventListener('focusin', listener);
+    }
+    removeFocusInListener(listener) {
+        this._component.removeEventListener('focusin', listener);
+    }
+    addFocusOutListener(listener) {
+        this._component.addEventListener('focusout', listener);
+    }
+    removeFocusOutListener(listener) {
+        this._component.removeEventListener('focusout', listener);
+    }
+    addKeyboardListener(listener) {
+        this._component.addEventListener('keydown', listener);
+    }
+    removeKeyboardListener(listener) {
+        this._component.removeEventListener('keydown', listener);
+    }
 }

package/esm/toast/toast-core.d.ts

@@ -3,6 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { IDismissibleStackState, tryDismiss } from '../core/utils/dismissible-stack';
 import { IToastAdapter } from './toast-adapter';
 import { ToastPlacement, ToastTheme } from './toast-constants';
 export interface IToastCore {
@@ -26,6 +27,13 @@ export declare class ToastCore implements IToastCore {
     private _hideTimeout;
     private _actionListener;
     private _closeListener;
+    private _isHovered;
+    private _isFocused;
+    private _pointerEnterListener;
+    private _pointerLeaveListener;
+    private _focusInListener;
+    private _focusOutListener;
+    private _keyboardListener;
     constructor(_adapter: IToastAdapter);
     initialize(): void;
     show(): void;
@@ -34,6 +42,15 @@ export declare class ToastCore implements IToastCore {
     }): Promise<void>;
     private _onAction;
     private _onClose;
+    private _handlePointerEnter;
+    private _handlePointerLeave;
+    private _handleFocusIn;
+    private _handleFocusOut;
+    private _handleKeyboard;
+    private _updateTimerState;
+    private _pauseTimer;
+    private _resumeTimer;
+    [tryDismiss](state?: IDismissibleStackState): boolean;
     get open(): boolean;
     set open(value: boolean);
     get duration(): number;