@tylertech/forge 2.1.0-next.1 → 2.2.1

package/esm/circular-progress/circular-progress.js

@@ -10,7 +10,7 @@ import { CircularProgressFoundation } from './circular-progress-foundation';
 import { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"mdc-circular-progress mdc-circular-progress--indeterminate\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"1\" part=\"root\"><slot></slot><div class=\"mdc-circular-progress__determinate-container\" part=\"determinate-container\"><svg class=\"mdc-circular-progress__determinate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\" part=\"determinate-svg\"><circle class=\"mdc-circular-progress__determinate-track\" cx=\"24\" cy=\"24\" r=\"18\" stroke-width=\"4\" part=\"determinate-svg-circle-track\"/><circle class=\"mdc-circular-progress__determinate-circle\" cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"113.097\" stroke-width=\"4\" part=\"determinate-svg-circle\"/></svg></div><div class=\"mdc-circular-progress__indeterminate-container\" part=\"indeterminate-container\"><div class=\"mdc-circular-progress__spinner-layer\" part=\"spinner-container\"><div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left\" part=\"spinner-circle-left\"><svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\" part=\"spinner-circle-left-svg\"><circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"4\" part=\"spinner-circle-left-svg-circle\"/></svg></div><div class=\"mdc-circular-progress__gap-patch\" part=\"spinner-gap\"><svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\" part=\"spinner-gap-svg\"><circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"3.2\" part=\"spinner-gap-svg-circle\"/></svg></div><div class=\"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right\" part=\"spinner-circle-right\"><svg class=\"mdc-circular-progress__indeterminate-circle-graphic\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\" part=\"spinner-circle-right-svg\"><circle cx=\"24\" cy=\"24\" r=\"18\" stroke-dasharray=\"113.097\" stroke-dashoffset=\"56.549\" stroke-width=\"4\" part=\"spinner-circle-right-svg-circle\"/></svg></div></div></div></div></template>';
-const styles = '.mdc-circular-progress__determinate-circle,.mdc-circular-progress__indeterminate-circle-graphic{stroke:#3d5afe;stroke:var(--forge-theme-tertiary,#3d5afe)}.mdc-circular-progress__determinate-track{stroke:transparent;stroke:var(--forge-circular-progress-track-color,transparent)}@-webkit-keyframes mdc-circular-progress-container-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes mdc-circular-progress-container-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes mdc-circular-progress-spinner-layer-rotate{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@keyframes mdc-circular-progress-spinner-layer-rotate{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@-webkit-keyframes mdc-circular-progress-color-1-fade-in-out{from{opacity:.99}25%{opacity:.99}26%{opacity:0}89%{opacity:0}90%{opacity:.99}to{opacity:.99}}@keyframes mdc-circular-progress-color-1-fade-in-out{from{opacity:.99}25%{opacity:.99}26%{opacity:0}89%{opacity:0}90%{opacity:.99}to{opacity:.99}}@-webkit-keyframes mdc-circular-progress-color-2-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:.99}50%{opacity:.99}51%{opacity:0}to{opacity:0}}@keyframes mdc-circular-progress-color-2-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:.99}50%{opacity:.99}51%{opacity:0}to{opacity:0}}@-webkit-keyframes mdc-circular-progress-color-3-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:.99}75%{opacity:.99}76%{opacity:0}to{opacity:0}}@keyframes mdc-circular-progress-color-3-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:.99}75%{opacity:.99}76%{opacity:0}to{opacity:0}}@-webkit-keyframes mdc-circular-progress-color-4-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:.99}90%{opacity:.99}to{opacity:0}}@keyframes mdc-circular-progress-color-4-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:.99}90%{opacity:.99}to{opacity:0}}@-webkit-keyframes mdc-circular-progress-left-spin{from{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}to{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@keyframes mdc-circular-progress-left-spin{from{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}to{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@-webkit-keyframes mdc-circular-progress-right-spin{from{-webkit-transform:rotate(-265deg);transform:rotate(-265deg)}50%{-webkit-transform:rotate(-130deg);transform:rotate(-130deg)}to{-webkit-transform:rotate(-265deg);transform:rotate(-265deg)}}@keyframes mdc-circular-progress-right-spin{from{-webkit-transform:rotate(-265deg);transform:rotate(-265deg)}50%{-webkit-transform:rotate(-130deg);transform:rotate(-130deg)}to{-webkit-transform:rotate(-265deg);transform:rotate(-265deg)}}.mdc-circular-progress{height:72px;height:var(--forge-circular-progress-size,72px);width:72px;width:var(--forge-circular-progress-size,72px);display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;direction:ltr;-webkit-transition:opacity 250ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 250ms 0s cubic-bezier(.4, 0, .6, 1)}.mdc-circular-progress circle{stroke-width:4;stroke-width:var(--forge-circular-progress-stroke-width,4)}.mdc-circular-progress ::slotted(*){-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)}.mdc-circular-progress__determinate-container,.mdc-circular-progress__indeterminate-circle-graphic,.mdc-circular-progress__indeterminate-container,.mdc-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}.mdc-circular-progress__determinate-container{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mdc-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.mdc-circular-progress__determinate-circle-graphic,.mdc-circular-progress__indeterminate-circle-graphic{fill:transparent}.mdc-circular-progress__determinate-circle{-webkit-transition:stroke-dashoffset .5s 0s cubic-bezier(0, 0, .2, 1);transition:stroke-dashoffset .5s 0s cubic-bezier(0, 0, .2, 1)}.mdc-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;-webkit-box-sizing:border-box;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.mdc-circular-progress__gap-patch .mdc-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mdc-circular-progress__circle-clipper{display:-webkit-inline-box;display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.mdc-circular-progress__circle-clipper .mdc-circular-progress__indeterminate-circle-graphic{width:200%}.mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{left:-100%}.mdc-circular-progress--indeterminate .mdc-circular-progress__determinate-container{opacity:0}.mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container{opacity:1}.mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container{-webkit-animation:mdc-circular-progress-container-rotate 1.568s linear infinite;animation:mdc-circular-progress-container-rotate 1.568s linear infinite}.mdc-circular-progress--indeterminate .mdc-circular-progress__spinner-layer{-webkit-animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both;animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-1{-webkit-animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-1-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both;animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-1-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-2{-webkit-animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-2-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both;animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-2-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-3{-webkit-animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-3-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both;animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-3-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-4{-webkit-animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-4-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both;animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-4-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-left .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--closed{opacity:0}';
+const styles = '.mdc-circular-progress__determinate-circle,.mdc-circular-progress__indeterminate-circle-graphic{stroke:#3d5afe;stroke:var(--forge-theme-tertiary,#3d5afe)}.mdc-circular-progress__determinate-track{stroke:transparent;stroke:var(--forge-circular-progress-track-color,transparent)}@-webkit-keyframes mdc-circular-progress-container-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes mdc-circular-progress-container-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes mdc-circular-progress-spinner-layer-rotate{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@keyframes mdc-circular-progress-spinner-layer-rotate{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@-webkit-keyframes mdc-circular-progress-color-1-fade-in-out{from{opacity:.99}25%{opacity:.99}26%{opacity:0}89%{opacity:0}90%{opacity:.99}to{opacity:.99}}@keyframes mdc-circular-progress-color-1-fade-in-out{from{opacity:.99}25%{opacity:.99}26%{opacity:0}89%{opacity:0}90%{opacity:.99}to{opacity:.99}}@-webkit-keyframes mdc-circular-progress-color-2-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:.99}50%{opacity:.99}51%{opacity:0}to{opacity:0}}@keyframes mdc-circular-progress-color-2-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:.99}50%{opacity:.99}51%{opacity:0}to{opacity:0}}@-webkit-keyframes mdc-circular-progress-color-3-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:.99}75%{opacity:.99}76%{opacity:0}to{opacity:0}}@keyframes mdc-circular-progress-color-3-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:.99}75%{opacity:.99}76%{opacity:0}to{opacity:0}}@-webkit-keyframes mdc-circular-progress-color-4-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:.99}90%{opacity:.99}to{opacity:0}}@keyframes mdc-circular-progress-color-4-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:.99}90%{opacity:.99}to{opacity:0}}@-webkit-keyframes mdc-circular-progress-left-spin{from{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}to{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@keyframes mdc-circular-progress-left-spin{from{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}to{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@-webkit-keyframes mdc-circular-progress-right-spin{from{-webkit-transform:rotate(-265deg);transform:rotate(-265deg)}50%{-webkit-transform:rotate(-130deg);transform:rotate(-130deg)}to{-webkit-transform:rotate(-265deg);transform:rotate(-265deg)}}@keyframes mdc-circular-progress-right-spin{from{-webkit-transform:rotate(-265deg);transform:rotate(-265deg)}50%{-webkit-transform:rotate(-130deg);transform:rotate(-130deg)}to{-webkit-transform:rotate(-265deg);transform:rotate(-265deg)}}.mdc-circular-progress{height:72px;height:var(--forge-circular-progress-size,72px);width:72px;width:var(--forge-circular-progress-size,72px);display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;direction:ltr;-webkit-transition:opacity 250ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 250ms 0s cubic-bezier(.4, 0, .6, 1)}.mdc-circular-progress circle{stroke-width:4;stroke-width:var(--forge-circular-progress-stroke-width,4);r:22px;r:var(--forge-circular-progress-radius,22px)}.mdc-circular-progress ::slotted(*){-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)}.mdc-circular-progress__determinate-container,.mdc-circular-progress__indeterminate-circle-graphic,.mdc-circular-progress__indeterminate-container,.mdc-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}.mdc-circular-progress__determinate-container{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mdc-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.mdc-circular-progress__determinate-circle-graphic,.mdc-circular-progress__indeterminate-circle-graphic{fill:transparent}.mdc-circular-progress__determinate-circle{-webkit-transition:stroke-dashoffset .5s 0s cubic-bezier(0, 0, .2, 1);transition:stroke-dashoffset .5s 0s cubic-bezier(0, 0, .2, 1)}.mdc-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;-webkit-box-sizing:border-box;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.mdc-circular-progress__gap-patch .mdc-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mdc-circular-progress__circle-clipper{display:-webkit-inline-box;display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.mdc-circular-progress__circle-clipper .mdc-circular-progress__indeterminate-circle-graphic{width:200%}.mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{left:-100%}.mdc-circular-progress--indeterminate .mdc-circular-progress__determinate-container{opacity:0}.mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container{opacity:1}.mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container{-webkit-animation:mdc-circular-progress-container-rotate 1.568s linear infinite;animation:mdc-circular-progress-container-rotate 1.568s linear infinite}.mdc-circular-progress--indeterminate .mdc-circular-progress__spinner-layer{-webkit-animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both;animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-1{-webkit-animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-1-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both;animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-1-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-2{-webkit-animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-2-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both;animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-2-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-3{-webkit-animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-3-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both;animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-3-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-4{-webkit-animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-4-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both;animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-4-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-left .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--closed{opacity:0}';
 let CircularProgressComponent = class CircularProgressComponent extends BaseComponent {
     constructor() {
         super();

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();

package/esm/paginator/paginator.js

@@ -13,7 +13,8 @@ import { IconButtonComponent } from '../icon-button';
 import { SelectComponent } from '../select';
 import { IconComponent, IconRegistry } from '../icon';
 import { BaseComponent } from '../core/base/base-component';
-const template = '<template><div class=\"forge-paginator\" part=\"root\"><div class=\"forge-paginator__container\" part=\"container\"><div class=\"forge-paginator__label\" part=\"label\"></div><forge-select class=\"forge-paginator__page-size-options\" aria-label=\"Choose page size\" density=\"dense\" part=\"page-size-options\"></forge-select><div class=\"forge-paginator__range-label\" part=\"range-label\"></div><forge-icon-button class=\"forge-paginator__first-page\" part=\"first-page-button\"><button aria-label=\"First Page\" part=\"first-page-button-element\"><forge-icon name=\"first_page\" part=\"first-page-icon\"></forge-icon></button></forge-icon-button><forge-icon-button class=\"forge-paginator__previous-page\" part=\"previous-page-button\"><button aria-label=\"Previous Page\" part=\"previous-page-button-element\"><forge-icon name=\"keyboard_arrow_left\" part=\"previous-page-button-icon\"></forge-icon></button></forge-icon-button><div class=\"forge-paginator__range-label--alternative\" part=\"range-label-alternative\"></div><forge-icon-button class=\"forge-paginator__next-page\" part=\"next-page-button\"><button aria-label=\"Next Page\" part=\"next-page-button-element\"><forge-icon name=\"keyboard_arrow_right\" part=\"next-page-icon\"></forge-icon></button></forge-icon-button><forge-icon-button class=\"forge-paginator__last-page\" part=\"last-page-button\"><button aria-label=\"Last Page\" part=\"last-page-button-element\"><forge-icon name=\"last_page\" part=\"last-page-icon\"></forge-icon></button></forge-icon-button></div></div></template>';
+import { TooltipComponent } from '../tooltip';
+const template = '<template><div class=\"forge-paginator\" part=\"root\"><div class=\"forge-paginator__container\" part=\"container\"><div class=\"forge-paginator__label\" part=\"label\"></div><forge-select class=\"forge-paginator__page-size-options\" aria-label=\"Choose page size\" density=\"dense\" part=\"page-size-options\"></forge-select><div class=\"forge-paginator__range-label\" part=\"range-label\"></div><forge-icon-button class=\"forge-paginator__first-page\" part=\"first-page-button\"><button aria-label=\"First Page\" part=\"first-page-button-element\"><forge-icon name=\"first_page\" part=\"first-page-icon\"></forge-icon></button><forge-tooltip position=\"top\">Go to the first page</forge-tooltip></forge-icon-button><forge-icon-button class=\"forge-paginator__previous-page\" part=\"previous-page-button\"><button aria-label=\"Previous Page\" part=\"previous-page-button-element\"><forge-icon name=\"keyboard_arrow_left\" part=\"previous-page-button-icon\"></forge-icon></button><forge-tooltip position=\"top\">Go to the previous page</forge-tooltip></forge-icon-button><div class=\"forge-paginator__range-label--alternative\" part=\"range-label-alternative\"></div><forge-icon-button class=\"forge-paginator__next-page\" part=\"next-page-button\"><button aria-label=\"Next Page\" part=\"next-page-button-element\"><forge-icon name=\"keyboard_arrow_right\" part=\"next-page-icon\"></forge-icon></button><forge-tooltip position=\"top\">Go to the next page</forge-tooltip></forge-icon-button><forge-icon-button class=\"forge-paginator__last-page\" part=\"last-page-button\"><button aria-label=\"Last Page\" part=\"last-page-button-element\"><forge-icon name=\"last_page\" part=\"last-page-icon\"></forge-icon></button><forge-tooltip position=\"top\">Go to the last page</forge-tooltip></forge-icon-button></div></div></template>';
 const styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.forge-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity}.forge-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-icon-button::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-icon-button.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}.forge-paginator{display:inline-block}.forge-paginator--alternative{display:-webkit-box;display:flex}.forge-paginator--alternative .forge-paginator__label,.forge-paginator--alternative .forge-paginator__page-size-options,.forge-paginator--alternative .forge-paginator__range-label{display:none}.forge-paginator--alternative .forge-paginator__range-label--alternative{display:inline-block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);margin:0 12px}.forge-paginator__range-label--alternative{display:none}.forge-paginator__container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-paginator__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);margin-right:16px}.forge-paginator__page-size-options{margin-right:16px}.forge-paginator__range-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);margin-right:8px}.forge-paginator__first-page,.forge-paginator__last-page,.forge-paginator__next-page,.forge-paginator__previous-page{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}:host{display:inline-block}:host([hidden]){display:none}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__container{-webkit-box-pack:center;justify-content:center}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__range-label--alternative{margin:0 auto}:host([alternative]) .forge-paginator--alignment-start .forge-paginator__container{-webkit-box-pack:start;justify-content:flex-start}:host([alternative]) .forge-paginator--alignment-end .forge-paginator__container{-webkit-box-pack:end;justify-content:flex-end}:host([alternative]) .forge-paginator .forge-paginator__container{-webkit-box-flex:1;flex:1}';
 /**
  * The custom element class behind the `<forge-paginator>` component.
@@ -128,7 +129,8 @@ PaginatorComponent = __decorate([
         dependencies: [
             IconButtonComponent,
             SelectComponent,
-            IconComponent
+            IconComponent,
+            TooltipComponent
         ]
     })
 ], PaginatorComponent);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Forge Web Components library",
-  "version": "2.1.0-next.1",
+  "version": "2.2.1",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {

package/styles/circular-progress/_mixins.scss

@@ -78,9 +78,10 @@
       transition: mdc-animation-functions.exit-temporary(opacity, 250ms);
     }
 
-    // FORGE (new): added custom property for setting stroke-width
+    // FORGE (new): added custom properties for setting stroke-width and radius
     circle {
       @include theme.css-custom-property(stroke-width, --forge-circular-progress-stroke-width, variables.$stroke-width);
+      @include theme.css-custom-property(r, --forge-circular-progress-radius, variables.$radius);
     }
 
     ::slotted(*) {

package/styles/circular-progress/_variables.scss

@@ -29,6 +29,7 @@ $color: tertiary !default; // FORGE (modify): use tertiary theme by default
 $track-color: transparent !default;
 $size: 72px !default; // FORGE (new): added default size
 $stroke-width: 4; // FORGE (new): added default stroke-width
+$radius: 22px; // FORGE (new): added default radius
 
 /// The rotation position of the arcs that corresponds to their fully contracted state
 $base-angle: 135deg !default;

package/styles/label-value/_mixins.scss

@@ -3,13 +3,200 @@
  * Copyright 2022 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './core';
+@use '@material/theme/theme' as mdc-theme;
+@use '@material/typography/typography' as mdc-typography;
+@use './variables';
 
 @mixin host() {
   display: block;
   min-width: 0;
 }
 
+@mixin base() {
+  display: flex;
+  min-height: variables.$height;
+}
+
+@mixin container() {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+@mixin icon-container() {
+  display: flex;
+  align-items: flex-start;
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin align-center() {
+  align-items: center;
+}
+
+@mixin align-right() {
+  align-items: flex-end;
+}
+
+@mixin label() {
+  @include mdc-typography.typography(caption);
+  @include mdc-theme.property(color, text-secondary-on-background);
+
+  font-size: 13px;
+  line-height: 1.9rem;
+}
+
+@mixin value() {
+  @include mdc-typography.typography(body1);
+
+  line-height: 0.6rem;
+}
+
+@mixin roomy() {
+  min-height: variables.$roomy-height;
+}
+
+@mixin dense() {
+  min-height: variables.$dense-height;
+}
+
+@mixin container-dense() {
+  flex-direction: row;
+  align-items: center;
+}
+
+@mixin dense-label() {
+  line-height: 1.25rem;
+  margin-right: 8px;
+}
+
+@mixin dense-value() {
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+}
+
+@mixin roomy-label() {
+  line-height: 2.1rem;
+}
+
+@mixin roomy-value() {
+  line-height: 0.6rem;
+}
+
+@mixin empty-value() {
+  @include mdc-theme.property(color, text-secondary-on-background);
+
+  font-style: italic;
+}
+
+@mixin icon() {
+  @include mdc-theme.property(color, text-primary-on-background);
+
+  font-size: 1.25rem !important;
+  margin-right: 8px;
+  margin-top: 4px;
+}
+
+@mixin dense-icon() {
+  margin-top: 2px;
+}
+
+@mixin roomy-icon() {
+  margin-top: 6px;
+}
+
 @mixin core-styles() {
-  @include core.core-styles;
+  .forge-label-value {
+    @include base;
+
+    &__container {
+      @include container;
+    }
+
+    &__icon-container {
+      @include icon-container;
+
+      ::slotted([slot='icon']) {
+        @include icon;
+      }
+    }
+
+    &--align-center {
+      .forge-label-value__container {
+        @include align-center;
+      }
+    }
+
+    &--align-right {
+      .forge-label-value__container {
+        @include align-right;
+      }
+    }
+
+    &__label {
+      @include label;
+    }
+
+    &__value {
+      @include value;
+    }
+
+    &--roomy {
+      @include roomy;
+
+      .forge-label-value__label {
+        @include roomy-label;
+      }
+
+      .forge-label-value__value {
+        @include roomy-value;
+      }
+
+      ::slotted([slot='icon']) {
+        @include roomy-icon;
+      }
+    }
+
+    &--dense {
+      @include dense;
+
+      .forge-label-value__container {
+        @include container-dense;
+
+        .forge-label-value__label {
+          @include dense-label;
+        }
+
+        .forge-label-value__value {
+          @include dense-value;
+        }
+
+      }
+      
+      ::slotted([slot='icon']) {
+        @include dense-icon;
+      }
+    }
+
+    &--empty {
+      .forge-label-value__value {
+        @include empty-value;
+      }
+    }
+
+    &--ellipsis {
+      .forge-label-value__container {
+        overflow: hidden;
+
+        .forge-label-value__label,
+        .forge-label-value__value {
+          @include ellipsis;
+        }
+      }
+    }
+  }
 }

package/styles/label-value/_variables.scss

@@ -3,35 +3,9 @@
  * Copyright 2022 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-$root: (
-  padding: (
-    top: ( // adjusts label position from top of field, in raster space
-      default: 5px,
-      roomy: 7px
-    )
-  )
-) !default;
+@use '../theme/theme-values';
 
-$label: (
-  transform: (
-    translate: (
-      x: ( // moves label back to keyline after scaling, in vector space
-        default: -6.8%,
-        roomy: -7.2%
-      ),
-      y: ( // moves label back to baseline after scaling, in vector space
-        default: -2%,
-        roomy: 1%
-      )
-    )
-  ),
-  margin: (
-    right: (
-      single-line: 8px
-    ),
-    bottom: ( // adjust value position from bottom of label, in raster space
-      default: -1px,
-      roomy: 5px
-    )
-  )
-) !default;
+$color: rgba(theme-values.$on-surface, 0.6);
+$height: 3rem;
+$dense-height: 1.5rem;
+$roomy-height: 3.5rem;

package/styles/label-value/label-value.scss

@@ -5,8 +5,6 @@
  */
 @use './mixins';
 
-@include mixins.core-styles;
-
 :host {
   @include mixins.host;
 }
@@ -15,3 +13,4 @@
   display: none;
 }
 
+@include mixins.core-styles;