@tylertech/forge 2.1.0 → 2.3.0

package/dist/esm/select/select/index.js

@@ -9,16 +9,16 @@ import {
   SelectComponent,
   SelectFoundation,
   defineSelectComponent
-} from "../../chunks/chunk.CGHKW6S6.js";
+} from "../../chunks/chunk.NJRPAX7P.js";
 import "../../chunks/chunk.WXFCZJJI.js";
 import "../../chunks/chunk.MNFGVNDI.js";
-import "../../chunks/chunk.NQOD2XB3.js";
+import "../../chunks/chunk.5VNEDRVC.js";
 import "../../chunks/chunk.P7NOYP4O.js";
 import "../../chunks/chunk.Y2TDQIA4.js";
 import "../../chunks/chunk.QD7EPCL6.js";
 import "../../chunks/chunk.JKC5PU23.js";
-import "../../chunks/chunk.ST3R6JEE.js";
-import "../../chunks/chunk.D4XU5MZN.js";
+import "../../chunks/chunk.LKUKESRQ.js";
+import "../../chunks/chunk.47D77ELY.js";
 import "../../chunks/chunk.EL6B2ODN.js";
 import "../../chunks/chunk.FZQCBRPK.js";
 import "../../chunks/chunk.4UKSUUTX.js";
@@ -30,20 +30,20 @@ import "../../chunks/chunk.RNPIV3BY.js";
 import "../../chunks/chunk.LCWRP2UI.js";
 import "../../chunks/chunk.YJ5X3WZ4.js";
 import "../../chunks/chunk.5EEEKOOK.js";
-import "../../chunks/chunk.7Y4NHCJH.js";
+import "../../chunks/chunk.UM3J4AZ7.js";
 import "../../chunks/chunk.C2MR3RDF.js";
 import "../../chunks/chunk.4HQ5VELO.js";
 import "../../chunks/chunk.5VKAVHLM.js";
 import "../../chunks/chunk.GS2AXUCN.js";
 import "../../chunks/chunk.BYN27JXZ.js";
 import "../../chunks/chunk.BKMWXPAS.js";
-import "../../chunks/chunk.P43Z3YAS.js";
+import "../../chunks/chunk.V6TRG2CM.js";
 import "../../chunks/chunk.6KTLOA7V.js";
 import "../../chunks/chunk.SKLCDWYQ.js";
 import "../../chunks/chunk.HZISALRH.js";
 import "../../chunks/chunk.WIYLQTSX.js";
-import "../../chunks/chunk.52F6VUCF.js";
 import "../../chunks/chunk.U6FJJGO3.js";
+import "../../chunks/chunk.3VR7VHL5.js";
 import "../../chunks/chunk.WT4W2IFT.js";
 import "../../chunks/chunk.KZATVOA6.js";
 import "../../chunks/chunk.MMIZOYAS.js";

package/dist/esm/select/select-dropdown/index.js

@@ -9,13 +9,13 @@ import {
   SelectDropdownComponent,
   SelectDropdownFoundation,
   defineSelectDropdownComponent
-} from "../../chunks/chunk.D5DMZ7ZG.js";
+} from "../../chunks/chunk.FF2RETWV.js";
 import "../../chunks/chunk.WXFCZJJI.js";
-import "../../chunks/chunk.NQOD2XB3.js";
+import "../../chunks/chunk.5VNEDRVC.js";
 import "../../chunks/chunk.P7NOYP4O.js";
 import "../../chunks/chunk.Y2TDQIA4.js";
-import "../../chunks/chunk.ST3R6JEE.js";
-import "../../chunks/chunk.D4XU5MZN.js";
+import "../../chunks/chunk.LKUKESRQ.js";
+import "../../chunks/chunk.47D77ELY.js";
 import "../../chunks/chunk.EL6B2ODN.js";
 import "../../chunks/chunk.FZQCBRPK.js";
 import "../../chunks/chunk.4UKSUUTX.js";
@@ -27,19 +27,19 @@ import "../../chunks/chunk.RNPIV3BY.js";
 import "../../chunks/chunk.LCWRP2UI.js";
 import "../../chunks/chunk.YJ5X3WZ4.js";
 import "../../chunks/chunk.5EEEKOOK.js";
-import "../../chunks/chunk.7Y4NHCJH.js";
+import "../../chunks/chunk.UM3J4AZ7.js";
 import "../../chunks/chunk.C2MR3RDF.js";
 import "../../chunks/chunk.4HQ5VELO.js";
 import "../../chunks/chunk.5VKAVHLM.js";
 import "../../chunks/chunk.GS2AXUCN.js";
 import "../../chunks/chunk.BKMWXPAS.js";
-import "../../chunks/chunk.P43Z3YAS.js";
+import "../../chunks/chunk.V6TRG2CM.js";
 import "../../chunks/chunk.6KTLOA7V.js";
 import "../../chunks/chunk.SKLCDWYQ.js";
 import "../../chunks/chunk.HZISALRH.js";
 import "../../chunks/chunk.WIYLQTSX.js";
-import "../../chunks/chunk.52F6VUCF.js";
 import "../../chunks/chunk.U6FJJGO3.js";
+import "../../chunks/chunk.3VR7VHL5.js";
 import "../../chunks/chunk.WT4W2IFT.js";
 import "../../chunks/chunk.KZATVOA6.js";
 import "../../chunks/chunk.MMIZOYAS.js";

package/dist/esm/slider/index.js

@@ -16,8 +16,8 @@ import "../chunks/chunk.6KTLOA7V.js";
 import "../chunks/chunk.SKLCDWYQ.js";
 import "../chunks/chunk.HZISALRH.js";
 import "../chunks/chunk.WIYLQTSX.js";
-import "../chunks/chunk.52F6VUCF.js";
 import "../chunks/chunk.U6FJJGO3.js";
+import "../chunks/chunk.3VR7VHL5.js";
 import "../chunks/chunk.WT4W2IFT.js";
 import "../chunks/chunk.KZATVOA6.js";
 import "../chunks/chunk.35U3UPDV.js";

package/dist/esm/stepper/index.js

@@ -10,27 +10,27 @@ import {
   StepperComponent,
   StepperFoundation,
   defineStepperComponent
-} from "../chunks/chunk.FBUQQD2T.js";
+} from "../chunks/chunk.4ZBBOR4H.js";
 import {
   STEP_CONSTANTS,
   StepAdapter,
   StepComponent,
   StepFoundation,
   defineStepComponent
-} from "../chunks/chunk.J6LOWXOG.js";
+} from "../chunks/chunk.C44LSSHS.js";
 import "../chunks/chunk.EY57VTRF.js";
 import "../chunks/chunk.C2MR3RDF.js";
 import "../chunks/chunk.4HQ5VELO.js";
 import "../chunks/chunk.5VKAVHLM.js";
 import "../chunks/chunk.GS2AXUCN.js";
 import "../chunks/chunk.BYN27JXZ.js";
-import "../chunks/chunk.P43Z3YAS.js";
+import "../chunks/chunk.V6TRG2CM.js";
 import "../chunks/chunk.6KTLOA7V.js";
 import "../chunks/chunk.SKLCDWYQ.js";
 import "../chunks/chunk.HZISALRH.js";
 import "../chunks/chunk.WIYLQTSX.js";
-import "../chunks/chunk.52F6VUCF.js";
 import "../chunks/chunk.U6FJJGO3.js";
+import "../chunks/chunk.3VR7VHL5.js";
 import "../chunks/chunk.WT4W2IFT.js";
 import "../chunks/chunk.KZATVOA6.js";
 import "../chunks/chunk.MMIZOYAS.js";

package/dist/esm/stepper/step/index.js

@@ -9,18 +9,18 @@ import {
   StepComponent,
   StepFoundation,
   defineStepComponent
-} from "../../chunks/chunk.J6LOWXOG.js";
+} from "../../chunks/chunk.C44LSSHS.js";
 import "../../chunks/chunk.C2MR3RDF.js";
 import "../../chunks/chunk.4HQ5VELO.js";
 import "../../chunks/chunk.5VKAVHLM.js";
 import "../../chunks/chunk.GS2AXUCN.js";
-import "../../chunks/chunk.P43Z3YAS.js";
+import "../../chunks/chunk.V6TRG2CM.js";
 import "../../chunks/chunk.6KTLOA7V.js";
 import "../../chunks/chunk.SKLCDWYQ.js";
 import "../../chunks/chunk.HZISALRH.js";
 import "../../chunks/chunk.WIYLQTSX.js";
-import "../../chunks/chunk.52F6VUCF.js";
 import "../../chunks/chunk.U6FJJGO3.js";
+import "../../chunks/chunk.3VR7VHL5.js";
 import "../../chunks/chunk.WT4W2IFT.js";
 import "../../chunks/chunk.KZATVOA6.js";
 import "../../chunks/chunk.MMIZOYAS.js";

package/dist/esm/stepper/stepper/index.js

@@ -9,21 +9,21 @@ import {
   StepperComponent,
   StepperFoundation,
   defineStepperComponent
-} from "../../chunks/chunk.FBUQQD2T.js";
-import "../../chunks/chunk.J6LOWXOG.js";
+} from "../../chunks/chunk.4ZBBOR4H.js";
+import "../../chunks/chunk.C44LSSHS.js";
 import "../../chunks/chunk.EY57VTRF.js";
 import "../../chunks/chunk.C2MR3RDF.js";
 import "../../chunks/chunk.4HQ5VELO.js";
 import "../../chunks/chunk.5VKAVHLM.js";
 import "../../chunks/chunk.GS2AXUCN.js";
 import "../../chunks/chunk.BYN27JXZ.js";
-import "../../chunks/chunk.P43Z3YAS.js";
+import "../../chunks/chunk.V6TRG2CM.js";
 import "../../chunks/chunk.6KTLOA7V.js";
 import "../../chunks/chunk.SKLCDWYQ.js";
 import "../../chunks/chunk.HZISALRH.js";
 import "../../chunks/chunk.WIYLQTSX.js";
-import "../../chunks/chunk.52F6VUCF.js";
 import "../../chunks/chunk.U6FJJGO3.js";
+import "../../chunks/chunk.3VR7VHL5.js";
 import "../../chunks/chunk.WT4W2IFT.js";
 import "../../chunks/chunk.KZATVOA6.js";
 import "../../chunks/chunk.MMIZOYAS.js";

package/dist/esm/switch/index.js

@@ -15,8 +15,8 @@ import "../chunks/chunk.6KTLOA7V.js";
 import "../chunks/chunk.SKLCDWYQ.js";
 import "../chunks/chunk.HZISALRH.js";
 import "../chunks/chunk.WIYLQTSX.js";
-import "../chunks/chunk.52F6VUCF.js";
 import "../chunks/chunk.U6FJJGO3.js";
+import "../chunks/chunk.3VR7VHL5.js";
 import "../chunks/chunk.WT4W2IFT.js";
 import "../chunks/chunk.KZATVOA6.js";
 import "../chunks/chunk.35U3UPDV.js";

package/dist/esm/table/index.js

@@ -13,11 +13,11 @@ import {
   TableFoundation,
   TableRow,
   defineTableComponent
-} from "../chunks/chunk.BOWCSPCH.js";
+} from "../chunks/chunk.L65L5VJ6.js";
 import "../chunks/chunk.RV3E762Y.js";
 import "../chunks/chunk.KCK3G74Y.js";
-import "../chunks/chunk.KRW2IAIU.js";
-import "../chunks/chunk.JICZQ2BO.js";
+import "../chunks/chunk.DKHOY6QU.js";
+import "../chunks/chunk.VEC77KBM.js";
 import "../chunks/chunk.EY57VTRF.js";
 import "../chunks/chunk.C2MR3RDF.js";
 import "../chunks/chunk.4HQ5VELO.js";
@@ -27,13 +27,13 @@ import "../chunks/chunk.2F6PST3N.js";
 import "../chunks/chunk.NX5SKZLU.js";
 import "../chunks/chunk.BYN27JXZ.js";
 import "../chunks/chunk.BKMWXPAS.js";
-import "../chunks/chunk.P43Z3YAS.js";
+import "../chunks/chunk.V6TRG2CM.js";
 import "../chunks/chunk.6KTLOA7V.js";
 import "../chunks/chunk.SKLCDWYQ.js";
 import "../chunks/chunk.HZISALRH.js";
 import "../chunks/chunk.WIYLQTSX.js";
-import "../chunks/chunk.52F6VUCF.js";
 import "../chunks/chunk.U6FJJGO3.js";
+import "../chunks/chunk.3VR7VHL5.js";
 import "../chunks/chunk.WT4W2IFT.js";
 import "../chunks/chunk.KZATVOA6.js";
 import "../chunks/chunk.MMIZOYAS.js";

package/dist/esm/tabs/index.js

@@ -12,7 +12,7 @@ import {
   TabBarComponent,
   TabBarFoundation,
   defineTabBarComponent
-} from "../chunks/chunk.OQRMHHPB.js";
+} from "../chunks/chunk.5CZWANU6.js";
 import {
   defineTabComponent
 } from "../chunks/chunk.KZ2QNQK2.js";
@@ -22,19 +22,19 @@ import {
   TabComponent,
   TabFoundation
 } from "../chunks/chunk.EWQENJ4W.js";
-import "../chunks/chunk.7Y4NHCJH.js";
+import "../chunks/chunk.UM3J4AZ7.js";
 import "../chunks/chunk.C2MR3RDF.js";
 import "../chunks/chunk.4HQ5VELO.js";
 import "../chunks/chunk.5VKAVHLM.js";
 import "../chunks/chunk.GS2AXUCN.js";
 import "../chunks/chunk.BYN27JXZ.js";
-import "../chunks/chunk.P43Z3YAS.js";
+import "../chunks/chunk.V6TRG2CM.js";
 import "../chunks/chunk.6KTLOA7V.js";
 import "../chunks/chunk.SKLCDWYQ.js";
 import "../chunks/chunk.HZISALRH.js";
 import "../chunks/chunk.WIYLQTSX.js";
-import "../chunks/chunk.52F6VUCF.js";
 import "../chunks/chunk.U6FJJGO3.js";
+import "../chunks/chunk.3VR7VHL5.js";
 import "../chunks/chunk.WT4W2IFT.js";
 import "../chunks/chunk.KZATVOA6.js";
 import "../chunks/chunk.MMIZOYAS.js";

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

@@ -11,21 +11,21 @@ import {
   TabBarComponent,
   TabBarFoundation,
   defineTabBarComponent
-} from "../../chunks/chunk.OQRMHHPB.js";
+} from "../../chunks/chunk.5CZWANU6.js";
 import "../../chunks/chunk.EWQENJ4W.js";
-import "../../chunks/chunk.7Y4NHCJH.js";
+import "../../chunks/chunk.UM3J4AZ7.js";
 import "../../chunks/chunk.C2MR3RDF.js";
 import "../../chunks/chunk.4HQ5VELO.js";
 import "../../chunks/chunk.5VKAVHLM.js";
 import "../../chunks/chunk.GS2AXUCN.js";
 import "../../chunks/chunk.BYN27JXZ.js";
-import "../../chunks/chunk.P43Z3YAS.js";
+import "../../chunks/chunk.V6TRG2CM.js";
 import "../../chunks/chunk.6KTLOA7V.js";
 import "../../chunks/chunk.SKLCDWYQ.js";
 import "../../chunks/chunk.HZISALRH.js";
 import "../../chunks/chunk.WIYLQTSX.js";
-import "../../chunks/chunk.52F6VUCF.js";
 import "../../chunks/chunk.U6FJJGO3.js";
+import "../../chunks/chunk.3VR7VHL5.js";
 import "../../chunks/chunk.WT4W2IFT.js";
 import "../../chunks/chunk.KZATVOA6.js";
 import "../../chunks/chunk.MMIZOYAS.js";

package/dist/esm/time-picker/index.js

@@ -23,8 +23,8 @@ import {
   secondsToMillis,
   stripSecondsFromMillis,
   timeStringToMillis
-} from "../chunks/chunk.2FXYTBYG.js";
-import "../chunks/chunk.KI3IHPS2.js";
+} from "../chunks/chunk.7M3P4QES.js";
+import "../chunks/chunk.YKNYR3NX.js";
 import "../chunks/chunk.YCW56AVX.js";
 import "../chunks/chunk.Q4YMHFRY.js";
 import "../chunks/chunk.7I2XNJBL.js";
@@ -35,7 +35,7 @@ import "../chunks/chunk.7XGNGXLR.js";
 import "../chunks/chunk.VTXXZ5KT.js";
 import "../chunks/chunk.KCK3G74Y.js";
 import "../chunks/chunk.2NUAEZY7.js";
-import "../chunks/chunk.D4XU5MZN.js";
+import "../chunks/chunk.47D77ELY.js";
 import "../chunks/chunk.EL6B2ODN.js";
 import "../chunks/chunk.FZQCBRPK.js";
 import "../chunks/chunk.4UKSUUTX.js";
@@ -45,20 +45,20 @@ import "../chunks/chunk.EY57VTRF.js";
 import "../chunks/chunk.RNPIV3BY.js";
 import "../chunks/chunk.LCWRP2UI.js";
 import "../chunks/chunk.5EEEKOOK.js";
-import "../chunks/chunk.7Y4NHCJH.js";
+import "../chunks/chunk.UM3J4AZ7.js";
 import "../chunks/chunk.C2MR3RDF.js";
 import "../chunks/chunk.4HQ5VELO.js";
 import "../chunks/chunk.5VKAVHLM.js";
 import "../chunks/chunk.GS2AXUCN.js";
 import "../chunks/chunk.BYN27JXZ.js";
 import "../chunks/chunk.BKMWXPAS.js";
-import "../chunks/chunk.P43Z3YAS.js";
+import "../chunks/chunk.V6TRG2CM.js";
 import "../chunks/chunk.6KTLOA7V.js";
 import "../chunks/chunk.SKLCDWYQ.js";
 import "../chunks/chunk.HZISALRH.js";
 import "../chunks/chunk.WIYLQTSX.js";
-import "../chunks/chunk.52F6VUCF.js";
 import "../chunks/chunk.U6FJJGO3.js";
+import "../chunks/chunk.3VR7VHL5.js";
 import "../chunks/chunk.WT4W2IFT.js";
 import "../chunks/chunk.KZATVOA6.js";
 import "../chunks/chunk.MMIZOYAS.js";

package/dist/esm/toast/index.js

@@ -9,20 +9,20 @@ import {
   ToastComponent,
   ToastFoundation,
   defineToastComponent
-} from "../chunks/chunk.4V5O2CPU.js";
-import "../chunks/chunk.5NXVVSTU.js";
-import "../chunks/chunk.7Y4NHCJH.js";
+} from "../chunks/chunk.ZPABBQEA.js";
+import "../chunks/chunk.P477KUJ4.js";
+import "../chunks/chunk.UM3J4AZ7.js";
 import "../chunks/chunk.C2MR3RDF.js";
 import "../chunks/chunk.4HQ5VELO.js";
 import "../chunks/chunk.5VKAVHLM.js";
 import "../chunks/chunk.GS2AXUCN.js";
-import "../chunks/chunk.P43Z3YAS.js";
+import "../chunks/chunk.V6TRG2CM.js";
 import "../chunks/chunk.6KTLOA7V.js";
 import "../chunks/chunk.SKLCDWYQ.js";
 import "../chunks/chunk.HZISALRH.js";
 import "../chunks/chunk.WIYLQTSX.js";
-import "../chunks/chunk.52F6VUCF.js";
 import "../chunks/chunk.U6FJJGO3.js";
+import "../chunks/chunk.3VR7VHL5.js";
 import "../chunks/chunk.WT4W2IFT.js";
 import "../chunks/chunk.KZATVOA6.js";
 import "../chunks/chunk.MMIZOYAS.js";

package/esm/button/button.d.ts

@@ -36,6 +36,8 @@ export declare class ButtonComponent extends BaseComponent implements IButtonCom
     private _applyType;
     private _initialize;
     private _initializeButton;
+    private _deferRippleInitialization;
+    private _initRipple;
     private _initializeButtonChildren;
     private _initializeMutationObserver;
     private _buttonWasAdded;

package/esm/button/button.js

@@ -7,6 +7,7 @@ import { __decorate } from "tslib";
 import { CustomElement, ensureChildren, toggleAttribute } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
 import { BUTTON_CONSTANTS } from './button-constants';
+import { userInteractionListener } from '../core/utils';
 import { ForgeRipple } from '../ripple';
 /**
  * The custom element class behind the `<forge-button>` element.
@@ -95,6 +96,20 @@ let ButtonComponent = class ButtonComponent extends BaseComponent {
         this._buttonElement.classList.add(BUTTON_CONSTANTS.classes.BUTTON);
         this._syncDisabledState();
         this._initializeButtonChildren();
+        // We wait to initialize the ripple instance until the user interacts with the component to avoid unnecessary performance overhead
+        this._deferRippleInitialization();
+    }
+    async _deferRippleInitialization() {
+        const type = await userInteractionListener(this._buttonElement);
+        if (!this._rippleInstance) {
+            this._initRipple();
+            if (type === 'focusin') {
+                // eslint-disable-next-line @typescript-eslint/dot-notation
+                this._rippleInstance['foundation'].handleFocus();
+            }
+        }
+    }
+    _initRipple() {
         if (this._rippleInstance) {
             this._rippleInstance.destroy();
         }

package/esm/core/utils/utils.d.ts

@@ -9,3 +9,17 @@
  * @param highlightText The text to highlight.
  */
 export declare function highlightTextHTML(label: string, highlightText: string): HTMLElement | undefined;
+/**
+ * Awaits user interaction on an element in the form of `pointerenter` or `focusin` to let a listener know
+ * when the user has attempted to interact with the provided element.
+ *
+ * The listeners are only called once, and the other is removed after one of the listeners is called.
+ * @param element The element to listen to.
+ * @param capture Whether to use capturing listeners or not.
+ * @returns A `Promise` that will be resolved when either of the listeners has executed.
+ */
+export declare function userInteractionListener(element: HTMLElement, { capture, pointerenter, focusin }?: {
+    capture?: boolean | undefined;
+    pointerenter?: boolean | undefined;
+    focusin?: boolean | undefined;
+}): Promise<'pointerenter' | 'focusin'>;

package/esm/core/utils/utils.js

@@ -24,3 +24,35 @@ export function highlightTextHTML(label, highlightText) {
     }
     return undefined;
 }
+/**
+ * Awaits user interaction on an element in the form of `pointerenter` or `focusin` to let a listener know
+ * when the user has attempted to interact with the provided element.
+ *
+ * The listeners are only called once, and the other is removed after one of the listeners is called.
+ * @param element The element to listen to.
+ * @param capture Whether to use capturing listeners or not.
+ * @returns A `Promise` that will be resolved when either of the listeners has executed.
+ */
+export function userInteractionListener(element, { capture = true, pointerenter = true, focusin = true } = {}) {
+    return new Promise(resolve => {
+        const listenerOpts = { once: true, capture };
+        const handlePointerenter = () => {
+            if (focusin) {
+                element.removeEventListener('focusin', handleFocusin, listenerOpts);
+            }
+            resolve('pointerenter');
+        };
+        const handleFocusin = () => {
+            if (pointerenter) {
+                element.removeEventListener('pointerenter', handlePointerenter, listenerOpts);
+            }
+            resolve('focusin');
+        };
+        if (pointerenter) {
+            element.addEventListener('pointerenter', handlePointerenter, listenerOpts);
+        }
+        if (focusin) {
+            element.addEventListener('focusin', handleFocusin, listenerOpts);
+        }
+    });
+}

package/esm/icon-button/icon-button-component-delegate.d.ts

@@ -3,14 +3,19 @@
  * Copyright 2022 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IIconComponent } from '../icon';
+import { IconExternalType, IIconComponent } from '../icon';
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
 import { IIconButtonComponent } from './icon-button';
+import { PopupPlacement } from '../popup';
 export declare type IconButtonComponentDelegateProps = Partial<IIconButtonComponent>;
 export interface IIconButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
     iconName?: string;
+    iconExternal?: boolean;
+    iconExternalType?: IconExternalType;
     iconType?: 'font' | 'component';
     iconClass?: string | string[];
+    tooltip?: string;
+    tooltipPosition?: PopupPlacement;
 }
 export interface IIconButtonComponentDelegateConfig extends IBaseComponentDelegateConfig<IIconButtonComponent, IIconButtonComponentDelegateOptions> {
 }
@@ -22,7 +27,9 @@ export declare class IconButtonComponentDelegate extends BaseComponentDelegate<I
     get iconElement(): IIconComponent | undefined;
     get disabled(): boolean;
     set disabled(value: boolean);
+    /** @deprecated Use buttonElement instead. */
     get butttonElement(): HTMLButtonElement | undefined;
+    get buttonElement(): HTMLButtonElement | undefined;
     protected _configure(): void;
     private _configureIcon;
     onClick(listener: (evt: MouseEvent) => void): void;

package/esm/icon-button/icon-button-component-delegate.js

@@ -13,10 +13,19 @@ export class IconButtonComponentDelegate extends BaseComponentDelegate {
         super(config);
     }
     _build() {
+        var _a;
         const component = document.createElement(ICON_BUTTON_CONSTANTS.elementName);
         this._buttonElement = document.createElement('button');
         this._buttonElement.type = 'button';
         component.appendChild(this._buttonElement);
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.tooltip) {
+            const tooltip = document.createElement('forge-tooltip');
+            tooltip.textContent = this._config.options.tooltip;
+            if (this._config.options.tooltipPosition) {
+                tooltip.position = this._config.options.tooltipPosition;
+            }
+            component.appendChild(tooltip);
+        }
         return component;
     }
     get iconElement() {
@@ -28,9 +37,13 @@ export class IconButtonComponentDelegate extends BaseComponentDelegate {
     set disabled(value) {
         this._buttonElement.disabled = value;
     }
+    /** @deprecated Use buttonElement instead. */
     get butttonElement() {
         return this._buttonElement;
     }
+    get buttonElement() {
+        return this._buttonElement;
+    }
     _configure() {
         this._configureIcon();
     }
@@ -49,6 +62,12 @@ export class IconButtonComponentDelegate extends BaseComponentDelegate {
             case 'component':
                 this._iconElement = document.createElement(ICON_CONSTANTS.elementName);
                 this._iconElement.name = this._config.options.iconName;
+                if (this._config.options.iconExternal !== undefined) {
+                    this._iconElement.external = !!this._config.options.iconExternal;
+                }
+                if (this._config.options.iconExternalType) {
+                    this._iconElement.externalType = this._config.options.iconExternalType;
+                }
                 if (this._config.options.iconClass) {
                     addClass(this._config.options.iconClass, this._iconElement);
                 }

package/esm/icon-button/icon-button.d.ts

@@ -48,6 +48,8 @@ export declare class IconButtonComponent extends BaseComponent implements IIconB
     get densityLevel(): number;
     set densityLevel(value: number);
     private _initialize;
+    private _deferRippleInitialization;
+    private _initRipple;
     private _toggleValue;
     private _applyToggle;
     private _applyDensity;

package/esm/icon-button/icon-button.js

@@ -7,6 +7,7 @@ import { __decorate } from "tslib";
 import { coerceBoolean, coerceNumber, CustomElement, emitEvent, ensureChild, toggleClass } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
 import { ForgeRipple } from '../ripple';
+import { userInteractionListener } from '../core/utils';
 import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
 /**
  * The custom element class behind the `<forge-icon-button>` element.
@@ -123,6 +124,20 @@ let IconButtonComponent = class IconButtonComponent extends BaseComponent {
         if (this._toggle) {
             this._initializeToggle();
         }
+        // We wait to initialize the ripple instance until the user interacts with the component to avoid unnecessary performance overhead
+        this._deferRippleInitialization();
+    }
+    async _deferRippleInitialization() {
+        const type = await userInteractionListener(this._buttonElement);
+        if (!this._rippleInstance) {
+            this._initRipple();
+            if (type === 'focusin') {
+                // eslint-disable-next-line @typescript-eslint/dot-notation
+                this._rippleInstance['foundation'].handleFocus();
+            }
+        }
+    }
+    _initRipple() {
         if (this._rippleInstance) {
             this._rippleInstance.destroy();
         }
@@ -175,7 +190,8 @@ let IconButtonComponent = class IconButtonComponent extends BaseComponent {
         const icons = Array.from(this._buttonElement.querySelectorAll(ICON_BUTTON_CONSTANTS.selectors.ICON));
         // We require two icon/image elements to be specified for the "on" and "off" states
         if (icons.length !== 2) {
-            throw new Error('You must specify two icons, one for "on" and one for "off".');
+            console.error('You must specify two icons, one for "on" and one for "off".');
+            return;
         }
         // Add the icon class to each icon
         icons.forEach(icon => icon.classList.add(ICON_BUTTON_CONSTANTS.classes.ICON));

package/esm/label-value/label-value.js

@@ -10,7 +10,7 @@ import { LabelValueFoundation } from './label-value-foundation';
 import { LABEL_VALUE_CONSTANTS } from './label-value-constants';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-label-value\" part=\"root\"><div class=\"forge-label-value__icon-container\" part=\"icon-container\"><slot name=\"icon\"></slot></div><div class=\"forge-label-value__container\" part=\"container\"><div class=\"forge-label-value__label\" part=\"label-container\"><slot name=\"label\"></slot></div><div class=\"forge-label-value__value\" part=\"value-container\"><slot name=\"value\"></slot></div></div></div></template>';
-const styles = '.forge-label-value{display:-webkit-box;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}:host(:not([single-line])) .forge-label-value:not(.forge-label-value--dense):not(.forge-label-value--roomy){min-height:3rem}:host(:not([single-line])) .forge-label-value--roomy:not(.forge-label-value--dense){min-height:3.5rem}:host(:not([single-line])) .forge-label-value--dense:not(.forge-label-value--roomy){min-height:3rem}:host([single-line]) .forge-label-value{min-height:1.5rem}:host(:not([single-line])) .forge-label-value:not(.forge-label-value--roomy){padding-top:5px}:host(:not([single-line])) .forge-label-value--roomy{padding-top:7px}.forge-label-value__icon-container{display:-webkit-box;display:flex;-webkit-box-align:start;align-items:flex-start}:host(:not([single-line])) .forge-label-value__container{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:start;align-items:flex-start}:host([single-line]) .forge-label-value__container{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center}:host(:not([single-line])) .forge-label-value--align-center .forge-label-value__container{-webkit-box-align:center;align-items:center}:host(:not([single-line])) .forge-label-value--align-right .forge-label-value__container{-webkit-box-align:end;align-items:flex-end}.forge-label-value--ellipsis .forge-label-value__container{overflow:hidden}::slotted([slot=icon]){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));font-size:1.25rem!important;margin-right:8px}.forge-label-value__label{-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);line-height:1rem;color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}:host(:not([single-line])) .forge-label-value:not(.forge-label-value--roomy):not(.forge-label-value--dense) .forge-label-value__label{font-size:1rem}:host(:not([single-line])) .forge-label-value--roomy:not(.forge-label-value--dense) .forge-label-value__label{font-size:1rem}:host(:not([single-line])) .forge-label-value--dense:not(.forge-label-value--roomy) .forge-label-value__label{font-size:1rem}:host([single-line]) .forge-label-value__label{font-size:1rem}:host(:not([single-line])) .forge-label-value:not(.forge-label-value--roomy) .forge-label-value__label{-webkit-transform:translateX(-6.8%) translateY(-2%) scale(.8125);transform:translateX(-6.8%) translateY(-2%) scale(.8125)}:host(:not([single-line])) .forge-label-value--roomy .forge-label-value__label{-webkit-transform:translateX(-7.2%) translateY(1%) scale(.8125);transform:translateX(-7.2%) translateY(1%) scale(.8125)}:host([single-line]) .forge-label-value__label{margin-right:8px}:host(:not([single-line])) .forge-label-value:not(.forge-label-value--roomy) .forge-label-value__label{margin-bottom:-1px}:host(:not([single-line])) .forge-label-value--roomy .forge-label-value__label{margin-bottom:5px}:host(:not([single-line])) .forge-label-value__label{max-width:100%}:host([single-line]) .forge-label-value__label{-webkit-box-flex:0;flex:none}.forge-label-value--ellipsis .forge-label-value__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.forge-label-value__value{-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);line-height:1.25rem}:host(:not([single-line])) .forge-label-value:not(.forge-label-value--dense):not(.forge-label-value--roomy) .forge-label-value__value{font-size:1rem}:host(:not([single-line])) .forge-label-value--roomy:not(.forge-label-value--dense) .forge-label-value__value{font-size:1rem}:host(:not([single-line])) .forge-label-value--dense:not(.forge-label-value--roomy) .forge-label-value__value{font-size:.875rem}:host(:not([single-line])) .forge-label-value__value{max-width:100%}:host([single-line]) .forge-label-value__value{-webkit-box-flex:0;flex:none}.forge-label-value--empty .forge-label-value__value{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-style:italic}.forge-label-value--ellipsis .forge-label-value__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host{display:block;min-width:0}:host([hidden]){display:none}';
+const styles = ':host{display:block;min-width:0}:host([hidden]){display:none}.forge-label-value{display:-webkit-box;display:flex;min-height:3rem}.forge-label-value__container{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-flex:1;flex:1}.forge-label-value__icon-container{display:-webkit-box;display:flex;-webkit-box-align:start;align-items:flex-start}.forge-label-value__icon-container ::slotted([slot=icon]){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));font-size:1.25rem!important;margin-right:8px;margin-top:4px}.forge-label-value--align-center .forge-label-value__container{-webkit-box-align:center;align-items:center}.forge-label-value--align-right .forge-label-value__container{-webkit-box-align:end;align-items:flex-end}.forge-label-value__label{-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));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);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);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:13px;line-height:1.9rem}.forge-label-value__value{-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);line-height:.6rem}.forge-label-value--roomy{min-height:3.5rem}.forge-label-value--roomy .forge-label-value__label{line-height:2.1rem}.forge-label-value--roomy .forge-label-value__value{line-height:.6rem}.forge-label-value--roomy ::slotted([slot=icon]){margin-top:6px}.forge-label-value--dense{min-height:1.5rem}.forge-label-value--dense .forge-label-value__container{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center}.forge-label-value--dense .forge-label-value__container .forge-label-value__label{line-height:1.25rem;margin-right:8px}.forge-label-value--dense .forge-label-value__container .forge-label-value__value{line-height:1.25rem;font-size:.875rem}.forge-label-value--dense ::slotted([slot=icon]){margin-top:2px}.forge-label-value--empty .forge-label-value__value{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-style:italic}.forge-label-value--ellipsis .forge-label-value__container{overflow:hidden}.forge-label-value--ellipsis .forge-label-value__container .forge-label-value__label,.forge-label-value--ellipsis .forge-label-value__container .forge-label-value__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}';
 let LabelValueComponent = class LabelValueComponent extends BaseComponent {
     constructor() {
         super();