@tylertech/forge 3.0.0-next.11 → 3.0.0-next.13

package/esm/field/field-foundation.js

@@ -85,10 +85,16 @@ export class FieldFoundation {
     }
     set density(value) {
         if (this._density !== value) {
+            const prevDensity = this._density;
             this._density = value;
             if (this._isInitialized) {
                 this._applyDensity();
-                this._initializeLabel();
+                if (this._density === 'dense') {
+                    this._destroyFloatingLabel({ cancelFloat: true });
+                }
+                else if (prevDensity === 'dense') {
+                    this._initializeLabel();
+                }
             }
             this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.DENSITY, this._density.toString());
         }
@@ -186,9 +192,8 @@ export class FieldFoundation {
         this._detectAddonEndContent();
     }
     _initializeLabel() {
-        if (this._floatingLabel) {
-            this._floatingLabel.destroy();
-        }
+        var _a;
+        (_a = this._floatingLabel) === null || _a === void 0 ? void 0 : _a.destroy();
         this._adapter.detectLabel();
         if (this._adapter.hasLabel() && this._density !== 'dense') {
             this._floatingLabel = this._adapter.initializeFloatingLabel();
@@ -197,11 +202,16 @@ export class FieldFoundation {
             this._adapter.setRootClass(FIELD_CONSTANTS.classes.LABEL);
         }
         else {
-            this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
-            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LABEL);
-            this._floatingLabel = undefined;
+            this._destroyFloatingLabel();
         }
     }
+    _destroyFloatingLabel({ cancelFloat = false } = {}) {
+        var _a;
+        this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
+        this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LABEL);
+        (_a = this._floatingLabel) === null || _a === void 0 ? void 0 : _a.destroy({ cancelFloat });
+        this._floatingLabel = undefined;
+    }
     _detectLeadingContent() {
         if (this._adapter.hasLeadingNodes()) {
             this._adapter.setRootClass(FIELD_CONSTANTS.classes.LEADING);

package/esm/file-picker/file-picker-component-delegate.js

@@ -33,7 +33,7 @@ export class FilePickerComponentDelegate extends BaseComponentDelegate {
                     parent: this._element,
                     text: this._config.options.buttonText
                 },
-                props: { type: 'outlined' }
+                props: { variant: 'outlined' }
             });
         }
         if ((_d = this._config.options) === null || _d === void 0 ? void 0 : _d.helperText) {

package/esm/file-picker/file-picker.js

@@ -11,7 +11,7 @@ import { FilePickerAdapter } from './file-picker-adapter';
 import { FILE_PICKER_CONSTANTS } from './file-picker-constants';
 import { FilePickerFoundation } from './file-picker-foundation';
 const template = '<template><form class=\"forge-file-picker\" id=\"container\" part=\"form\"><div class=\"forge-file-picker__primary\" id=\"primary\" part=\"primary\"><slot name=\"primary\"></slot></div><slot id=\"button-slot\"></slot><div class=\"forge-file-picker__secondary\" id=\"secondary\" part=\"secondary\"><slot name=\"secondary\"></slot></div><input type=\"file\" class=\"forge-file-picker__input\" id=\"input\" part=\"input\"></form><div class=\"forge-file-picker__helper-text\" part=\"helper-text-container\"><slot name=\"helper-text\"></slot></div></template>';
-const styles = '.forge-file-picker{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;background-color:rgba(189,189,189,.12);border:1px dashed #e0e0e0;display:grid;-webkit-box-pack:center;justify-content:center;align-content:center;gap:16px;padding:16px;text-align:center;cursor:pointer}.forge-file-picker__primary{-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-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size, 1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.75rem);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);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));max-width:auto;max-width:var(--forge-file-picker-max-content-width,auto)}.forge-file-picker__secondary{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;font-size:var(--forge-typography-subtitle2-secondary-font-size, .875rem);line-height:1.375rem;line-height:var(--forge-typography-subtitle2-secondary-line-height, 1.375rem);font-weight:400;font-weight:var(--forge-typography-subtitle2-secondary-font-weight,400);letter-spacing:.0087500001em;letter-spacing:var(--forge-typography-subtitle2-secondary-letter-spacing, .0087500001em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-subtitle2-secondary-text-decoration,inherit);text-decoration:var(--forge-typography-subtitle2-secondary-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-subtitle2-secondary-text-transform,inherit);color:var(--mdc-theme-text-secondary-on-background);color:var(--forge-typography-subtitle2-secondary-color,var(--mdc-theme-text-secondary-on-background));color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));max-width:auto;max-width:var(--forge-file-picker-max-content-width,auto)}.forge-file-picker__input{display:none}.forge-file-picker__helper-text ::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;min-height:1.5rem;line-height:normal;padding-top:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-left:12px;-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;text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);text-align:start}.forge-file-picker[disabled]{background-color:#fff;background-color:var(--mdc-theme-background,#fff);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);opacity:.38;cursor:unset}.forge-file-picker.compact{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background-color:transparent;border:none;padding:0}.forge-file-picker.compact .forge-file-picker__primary,.forge-file-picker.compact .forge-file-picker__secondary{display:none}.forge-file-picker.compact .forge-file-picker__button>button{width:auto;width:var(--forge-file-picker-width,auto);background-color:transparent}.forge-file-picker:not(.compact).highlight{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee);background-color:rgba(98,0,238,.12);border-width:1px;border-style:solid}.forge-file-picker.borderless{--forge-file-picker-width:100%;border:none}.forge-file-picker.borderless:not(.compact).highlight{border:none}.forge-file-picker.borderless+.forge-file-picker__helper-text{display:none}:host{width:auto;width:var(--forge-file-picker-width,auto);height:auto;height:var(--forge-file-picker-height,auto);display:inline-block}:host([hidden]){display:none}';
+const styles = '.forge-file-picker{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;background-color:rgba(189,189,189,.12);border:1px dashed #e0e0e0;display:grid;-webkit-box-pack:center;justify-content:center;align-content:center;gap:16px;padding:16px;text-align:center;cursor:pointer}.forge-file-picker__primary{-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-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size, 1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.75rem);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);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));max-width:auto;max-width:var(--forge-file-picker-max-content-width,auto)}.forge-file-picker__secondary{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;font-size:var(--forge-typography-subtitle2-secondary-font-size, .875rem);line-height:1.375rem;line-height:var(--forge-typography-subtitle2-secondary-line-height, 1.375rem);font-weight:400;font-weight:var(--forge-typography-subtitle2-secondary-font-weight,400);letter-spacing:.0087500001em;letter-spacing:var(--forge-typography-subtitle2-secondary-letter-spacing, .0087500001em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-subtitle2-secondary-text-decoration,inherit);text-decoration:var(--forge-typography-subtitle2-secondary-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-subtitle2-secondary-text-transform,inherit);color:var(--mdc-theme-text-secondary-on-background);color:var(--forge-typography-subtitle2-secondary-color,var(--mdc-theme-text-secondary-on-background));color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));max-width:auto;max-width:var(--forge-file-picker-max-content-width,auto)}.forge-file-picker__input{display:none}.forge-file-picker__helper-text ::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;min-height:1.5rem;line-height:normal;padding-top:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-left:12px;-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;text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);text-align:start}.forge-file-picker[disabled]{background-color:#fff;background-color:var(--mdc-theme-background,#fff);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);opacity:.38;cursor:unset}.forge-file-picker.compact{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background-color:transparent;border:none;padding:0}.forge-file-picker.compact .forge-file-picker__primary,.forge-file-picker.compact .forge-file-picker__secondary{display:none}.forge-file-picker.compact .forge-file-picker__button{width:auto;width:var(--forge-file-picker-width,auto);background-color:transparent}.forge-file-picker:not(.compact).highlight{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee);background-color:rgba(98,0,238,.12);border-width:1px;border-style:solid}.forge-file-picker.borderless{--forge-file-picker-width:100%;border:none}.forge-file-picker.borderless:not(.compact).highlight{border:none}.forge-file-picker.borderless+.forge-file-picker__helper-text{display:none}:host{width:auto;width:var(--forge-file-picker-width,auto);height:auto;height:var(--forge-file-picker-height,auto);display:inline-block}:host([hidden]){display:none}';
 /**
  * The web component class behind the `<forge-file-picker>` custom element.
  *

package/esm/floating-label/floating-label-foundation.d.ts

@@ -7,9 +7,12 @@ import { IFloatingLabelAdapter } from './floating-label-adapter';
 export declare class FloatingLabelFoundation {
     protected _adapter: IFloatingLabelAdapter;
     private _floatAnimationEndHandler;
+    private _activeFrame;
     constructor(_adapter: IFloatingLabelAdapter);
     initialize(): void;
-    disconnect(): void;
+    disconnect({ cancelFloat }?: {
+        cancelFloat?: boolean | undefined;
+    }): void;
     float(shouldFloat: boolean, alwaysFloat?: boolean): void;
     getWidth(): number;
     get isFloating(): boolean;

package/esm/floating-label/floating-label-foundation.js

@@ -18,7 +18,10 @@ export class FloatingLabelFoundation {
             this._adapter.addLabelListener('transitionend', this._floatAnimationEndHandler);
         }
     }
-    disconnect() {
+    disconnect({ cancelFloat = false } = {}) {
+        if (cancelFloat && this._activeFrame) {
+            window.cancelAnimationFrame(this._activeFrame);
+        }
         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOATING_LABEL);
         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE);
         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
@@ -32,9 +35,9 @@ export class FloatingLabelFoundation {
             if (this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME)) {
                 this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
             }
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    if (alwaysFloat || this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE)) {
+            this._activeFrame = window.requestAnimationFrame(() => {
+                this._activeFrame = window.requestAnimationFrame(() => {
+                    if (alwaysFloat || this.isFloating) {
                         this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
                     }
                     this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE);
@@ -46,8 +49,8 @@ export class FloatingLabelFoundation {
             if (this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME)) {
                 this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
                 this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
-                requestAnimationFrame(() => {
-                    requestAnimationFrame(() => {
+                this._activeFrame = window.requestAnimationFrame(() => {
+                    this._activeFrame = window.requestAnimationFrame(() => {
                         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
                     });
                 });

package/esm/floating-label/floating-label.d.ts

@@ -7,7 +7,9 @@ export interface IFloatingLabel {
     isFloating: boolean;
     float(float: boolean, alwaysFloat?: boolean): void;
     getWidth(): number;
-    destroy(): void;
+    destroy(opts?: {
+        cancelFloat?: boolean;
+    }): void;
 }
 export declare class FloatingLabel implements IFloatingLabel {
     private _labelElement;
@@ -15,7 +17,9 @@ export declare class FloatingLabel implements IFloatingLabel {
     constructor(_labelElement: HTMLLabelElement);
     /** Returns the current label floating state. */
     get isFloating(): boolean;
-    destroy(): void;
+    destroy({ cancelFloat }?: {
+        cancelFloat?: boolean | undefined;
+    }): void;
     /**
      * Sets the floating state of the label element.
      * @param shouldFloat If true, sets the label to float, otherwise un-float.

package/esm/floating-label/floating-label.js

@@ -15,8 +15,8 @@ export class FloatingLabel {
     get isFloating() {
         return this._foundation.isFloating;
     }
-    destroy() {
-        this._foundation.disconnect();
+    destroy({ cancelFloat = false } = {}) {
+        this._foundation.disconnect({ cancelFloat });
         this._labelElement = undefined;
     }
     /**

package/esm/focus-indicator/focus-indicator-adapter.d.ts

@@ -13,7 +13,7 @@ export interface IFocusIndicatorAdapter extends IBaseAdapter {
     getTargetElement(): HTMLElement | null;
     setTargetElement(el: HTMLElement | null): void;
     trySetTarget(value: string | null): void;
-    isActive(selector: string): boolean;
+    isActive(selector: string, el?: HTMLElement | null): boolean;
 }
 export declare class FocusIndicatorAdapter extends BaseAdapter<IFocusIndicatorComponent> implements IFocusIndicatorAdapter {
     private _targetElement;
@@ -25,5 +25,5 @@ export declare class FocusIndicatorAdapter extends BaseAdapter<IFocusIndicatorCo
     getTargetElement(): HTMLElement | null;
     setTargetElement(el: HTMLElement | null): void;
     trySetTarget(value: string | null): void;
-    isActive(selector: string): boolean;
+    isActive(selector: string, el?: HTMLElement | null): boolean;
 }

package/esm/focus-indicator/focus-indicator-adapter.js

@@ -32,8 +32,8 @@ export class FocusIndicatorAdapter extends BaseAdapter {
     trySetTarget(value) {
         this._targetElement = locateTargetHeuristic(this._component, value);
     }
-    isActive(selector) {
-        var _a;
-        return !!((_a = this._targetElement) === null || _a === void 0 ? void 0 : _a.matches(selector));
+    isActive(selector, el) {
+        const targetedEl = el !== null && el !== void 0 ? el : this._targetElement;
+        return !!(targetedEl === null || targetedEl === void 0 ? void 0 : targetedEl.matches(selector));
     }
 }

package/esm/focus-indicator/focus-indicator-foundation.js

@@ -21,8 +21,8 @@ export class FocusIndicatorFoundation {
         this._addListeners();
     }
     destroy() {
+        this._removeListeners(); // Must be called before destroying adapter
         this._adapter.destroy();
-        this._removeListeners();
     }
     _addListeners() {
         this._adapter.addTargetListener('focusin', this._interactionListener);
@@ -35,15 +35,16 @@ export class FocusIndicatorFoundation {
         this._adapter.removeTargetListener('pointerdown', this._interactionListener);
     }
     _onInteraction(evt) {
+        const target = evt.target;
         switch (evt.type) {
             case 'focusin':
-                this.active = this._adapter.isActive(this._allowFocus ? ':focus' : ':focus-visible');
+                this.active = this._adapter.isActive(this._allowFocus ? ':focus' : ':focus-visible', target);
                 break;
             case 'focusout':
                 this.active = false;
                 break;
             case 'pointerdown':
-                this.active = this._allowFocus ? this._adapter.isActive(':focus') : this._adapter.isActive(':focus-visible');
+                this.active = this._allowFocus ? this._adapter.isActive(':focus', target) : this._adapter.isActive(':focus-visible', target);
                 break;
         }
     }

package/esm/focus-indicator/focus-indicator.js

@@ -10,7 +10,7 @@ import { FocusIndicatorAdapter } from './focus-indicator-adapter';
 import { FOCUS_INDICATOR_CONSTANTS } from './focus-indicator-constants';
 import { FocusIndicatorFoundation } from './focus-indicator-foundation';
 const template = '<template><div class=\"forge-focus-indicator\" part=\"indicator\"></div></template>';
-const styles = ':host{display:contents}:host([hidden]){display:none}:host([active]) .forge-focus-indicator{display:-webkit-box;display:flex}:host(:not([inward])) .forge-focus-indicator{-webkit-animation-name:outward-grow,outward-shrink;animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--_shape-end-end) + var(--_outward-offset));border-end-start-radius:calc(var(--_shape-end-start) + var(--_outward-offset));border-start-end-radius:calc(var(--_shape-start-end) + var(--_outward-offset));border-start-start-radius:calc(var(--_shape-start-start) + var(--_outward-offset));inset:calc(-1 * var(--_outward-offset));outline:var(--_width) solid currentColor}:host([inward]) .forge-focus-indicator{-webkit-animation-name:inward-grow,inward-shrink;animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--_shape-end-end) - var(--_inward-offset));border-end-start-radius:calc(var(--_shape-end-start) - var(--_inward-offset));border-start-end-radius:calc(var(--_shape-start-end) - var(--_inward-offset));border-start-start-radius:calc(var(--_shape-start-start) - var(--_inward-offset));border:var(--_width) solid currentColor;inset:var(--_inward-offset)}:host([circular]) .forge-focus-indicator{--_shape:50%}.forge-focus-indicator{--_active-width:var(--forge-focus-indicator-active-width, 6px);--_color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));--_outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-050, 4px));--_inward-offset:var(--forge-focus-indicator-inward-offset, 0);--_shape:var(--forge-focus-indicator-shape, var(--forge-shape-extra-small, 1px));--_width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));--_easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));--_shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_shape));--_shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_shape));--_shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_shape));--_shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_shape));--_margin-block:var(--forge-focus-indicator-offset-block, 0);--_margin-inline:var(--forge-focus-indicator-offset-inline, 0);-webkit-animation-delay:0s,calc(var(--_duration) * .25);animation-delay:0s,calc(var(--_duration) * .25);-webkit-animation-duration:calc(var(--_duration) * .25),calc(var(--_duration) * .75);animation-duration:calc(var(--_duration) * .25),calc(var(--_duration) * .75);-webkit-animation-timing-function:var(--_easing);animation-timing-function:var(--_easing);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--_color);display:none;pointer-events:none;position:absolute;margin-block:var(--_margin-block);margin-inline:var(--_margin-inline)}@-webkit-keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_active-width)}}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_active-width)}}@-webkit-keyframes outward-shrink{from{outline-width:var(--_active-width)}}@keyframes outward-shrink{from{outline-width:var(--_active-width)}}@-webkit-keyframes inward-grow{from{border-width:0}to{border-width:var(--_active-width)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--_active-width)}}@-webkit-keyframes inward-shrink{from{border-width:var(--_active-width)}}@keyframes inward-shrink{from{border-width:var(--_active-width)}}@media (prefers-reduced-motion){.forge-focus-indicator{-webkit-animation:none;animation:none}}';
+const styles = ':host{display:contents}:host([hidden]){display:none}.forge-focus-indicator{--_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));--_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);--_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_focus-indicator-shape:var(--forge-focus-indicator-shape, var(--forge-shape-extra-small, 1px));--_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));--_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));--_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));--_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));--_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));--_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);--_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);--_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0)}.forge-focus-indicator{-webkit-animation-delay:0s,calc(var(--_focus-indicator-duration) * .25);animation-delay:0s,calc(var(--_focus-indicator-duration) * .25);-webkit-animation-duration:calc(var(--_focus-indicator-duration) * .25),calc(var(--_focus-indicator-duration) * .75);animation-duration:calc(var(--_focus-indicator-duration) * .25),calc(var(--_focus-indicator-duration) * .75);-webkit-animation-timing-function:var(--_focus-indicator-easing);animation-timing-function:var(--_focus-indicator-easing);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--_focus-indicator-color);display:none;pointer-events:none;position:absolute;margin-block:var(--_focus-indicator-offset-block);margin-inline:var(--_focus-indicator-offset-inline)}:host([active]) .forge-focus-indicator{display:-webkit-box;display:flex}:host(:not([inward])) .forge-focus-indicator{-webkit-animation-name:outward-grow,outward-shrink;animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));border-end-start-radius:calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));border-start-end-radius:calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));border-start-start-radius:calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));inset:calc(-1 * var(--_focus-indicator-outward-offset));outline:var(--_focus-indicator-width) solid currentColor}:host([inward]) .forge-focus-indicator{-webkit-animation-name:inward-grow,inward-shrink;animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--_focus-indicator-shape-end-end) - var(--_focus-indicator-inward-offset));border-end-start-radius:calc(var(--_focus-indicator-shape-end-start) - var(--_focus-indicator-inward-offset));border-start-end-radius:calc(var(--_focus-indicator-shape-start-end) - var(--_focus-indicator-inward-offset));border-start-start-radius:calc(var(--_focus-indicator-shape-start-start) - var(--_focus-indicator-inward-offset));border:var(--_focus-indicator-width) solid currentColor;inset:var(--_focus-indicator-inward-offset)}:host([circular]) .forge-focus-indicator{--_focus-indicator-shape:var(--forge-focus-indicator-shape, 50%)}@-webkit-keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_focus-indicator-active-width)}}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_focus-indicator-active-width)}}@-webkit-keyframes outward-shrink{from{outline-width:var(--_focus-indicator-active-width)}}@keyframes outward-shrink{from{outline-width:var(--_focus-indicator-active-width)}}@-webkit-keyframes inward-grow{from{border-width:0}to{border-width:var(--_focus-indicator-active-width)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--_focus-indicator-active-width)}}@-webkit-keyframes inward-shrink{from{border-width:var(--_focus-indicator-active-width)}}@keyframes inward-shrink{from{border-width:var(--_focus-indicator-active-width)}}@media (prefers-reduced-motion){.forge-focus-indicator{-webkit-animation:none;animation:none}}';
 /**
  * @tag forge-focus-indicator
  *

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

@@ -6,7 +6,6 @@
 import { IIconComponent } from './icon';
 import { BaseAdapter, IBaseAdapter } from '../core';
 export interface IIconAdapter extends IBaseAdapter {
-    initialize(): void;
     canLazyLoad(): boolean;
     observeVisibility(listener: () => void): void;
     destroyVisibilityObserver(): void;
@@ -15,7 +14,6 @@ export interface IIconAdapter extends IBaseAdapter {
 export declare class IconAdapter extends BaseAdapter<IIconComponent> implements IIconAdapter {
     private _observer;
     constructor(component: IIconComponent);
-    initialize(): void;
     canLazyLoad(): boolean;
     observeVisibility(listener: () => void): void;
     destroyVisibilityObserver(): void;

package/esm/icon/icon-adapter.js

@@ -9,11 +9,6 @@ export class IconAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
     }
-    initialize() {
-        if (!this._component.hasAttribute('aria-hidden')) {
-            this._component.setAttribute('aria-hidden', 'true');
-        }
-    }
     canLazyLoad() {
         return !!window.IntersectionObserver;
     }
@@ -33,9 +28,13 @@ export class IconAdapter extends BaseAdapter {
         }
     }
     setContent(content) {
+        var _a;
         const shadowRoot = this._component.shadowRoot;
         const styleTag = shadowRoot.querySelector('style');
         shadowRoot.innerHTML = content;
+        if (content) {
+            (_a = shadowRoot.firstElementChild) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
+        }
         if (styleTag) {
             shadowRoot.appendChild(styleTag);
         }

package/esm/icon/icon-foundation.js

@@ -13,7 +13,6 @@ export class IconFoundation {
         this._lazyListener = () => this._loadIcon();
     }
     initialize() {
-        this._adapter.initialize();
         this._applyIcon();
     }
     disconnect() {

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

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonAdapter, IBaseButtonAdapter } from '../button/base/base-button-adapter';
+import { IIconButtonComponent } from './icon-button';
+export interface IIconButtonAdapter extends IBaseButtonAdapter {
+}
+export declare class IconButtonAdapter extends BaseButtonAdapter implements IIconButtonAdapter {
+    constructor(component: IIconButtonComponent);
+}

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonAdapter } from '../button/base/base-button-adapter';
+export class IconButtonAdapter extends BaseButtonAdapter {
+    constructor(component) {
+        super(component);
+    }
+}

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

@@ -20,16 +20,12 @@ export interface IIconButtonComponentDelegateOptions extends IBaseComponentDeleg
 export interface IIconButtonComponentDelegateConfig extends IBaseComponentDelegateConfig<IIconButtonComponent, IIconButtonComponentDelegateOptions> {
 }
 export declare class IconButtonComponentDelegate extends BaseComponentDelegate<IIconButtonComponent, IIconButtonComponentDelegateOptions> {
-    private _buttonElement;
     private _iconElement?;
     constructor(config?: IIconButtonComponentDelegateConfig);
     protected _build(): IIconButtonComponent;
     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

@@ -15,9 +15,6 @@ export class IconButtonComponentDelegate extends BaseComponentDelegate {
     _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;
@@ -32,17 +29,10 @@ export class IconButtonComponentDelegate extends BaseComponentDelegate {
         return this._iconElement;
     }
     get disabled() {
-        return !!this._buttonElement.disabled;
+        return !!this._element.disabled;
     }
     set disabled(value) {
-        this._buttonElement.disabled = value;
-    }
-    /** @deprecated Use buttonElement instead. */
-    get butttonElement() {
-        return this._buttonElement;
-    }
-    get buttonElement() {
-        return this._buttonElement;
+        this._element.disabled = value;
     }
     _configure() {
         this._configureIcon();
@@ -56,8 +46,8 @@ export class IconButtonComponentDelegate extends BaseComponentDelegate {
         switch (type) {
             case 'font':
                 const classes = Array.isArray(this._config.options.iconClass) ? this._config.options.iconClass : [ICON_CLASS_NAME];
-                addClass(classes, this._buttonElement);
-                this._buttonElement.textContent = this._config.options.iconName;
+                addClass(classes, this._element);
+                this._element.textContent = this._config.options.iconName;
                 break;
             case 'component':
                 this._iconElement = document.createElement(ICON_CONSTANTS.elementName);
@@ -71,17 +61,17 @@ export class IconButtonComponentDelegate extends BaseComponentDelegate {
                 if (this._config.options.iconClass) {
                     addClass(this._config.options.iconClass, this._iconElement);
                 }
-                this._buttonElement.appendChild(this._iconElement);
+                this._element.appendChild(this._iconElement);
                 break;
         }
     }
     onClick(listener) {
-        this._buttonElement.addEventListener('click', listener);
+        this._element.addEventListener('click', listener);
     }
     onFocus(listener) {
-        this._buttonElement.addEventListener('focus', evt => listener(evt));
+        this._element.addEventListener('focus', evt => listener(evt));
     }
     onBlur(listener) {
-        this._buttonElement.addEventListener('blur', evt => listener(evt));
+        this._element.addEventListener('blur', evt => listener(evt));
     }
 }

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

@@ -3,28 +3,37 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Theme } from '../constants';
 export declare const ICON_BUTTON_CONSTANTS: {
     elementName: "forge-icon-button";
-    attributes: {
+    observedAttributes: {
         TOGGLE: string;
-        IS_ON: string;
-        ICON_ON: string;
-        DENSE: string;
-        DENSITY_LEVEL: string;
-    };
-    selectors: {
-        BUTTON: string;
-        ICON: string;
+        ON: string;
+        VARIANT: string;
+        THEME: string;
+        SHAPE: string;
+        DENSITY: string;
     };
-    classes: {
-        BUTTON: string;
-        BUTTON_ON: string;
-        BUTTON_DENSE: string;
-        ICON: string;
-        ICON_ON: string;
-        DENSITY: string[];
+    attributes: {
+        ARIA_PRESSED: string;
+        TOGGLE: string;
+        ON: string;
+        VARIANT: string;
+        THEME: string;
+        SHAPE: string;
+        DENSITY: string;
     };
     events: {
-        CHANGE: string;
+        TOGGLE: string;
+    };
+    defaults: {
+        DEFAULT_VARIANT: IconButtonVariant;
+        DEFAULT_THEME: Theme;
+        DEFAULT_SHAPE: IconButtonShape;
+        DEFAULT_DENSITY: IconButtonDensity;
     };
 };
+export type IconButtonVariant = 'icon' | 'outlined' | 'tonal' | 'filled' | 'raised';
+export type IconButtonTheme = Theme;
+export type IconButtonShape = 'circular' | 'squared';
+export type IconButtonDensity = 'small' | 'medium' | 'large';

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

@@ -5,39 +5,28 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}icon-button`;
-const attributes = {
+const observedAttributes = {
     TOGGLE: 'toggle',
-    IS_ON: 'is-on',
-    ICON_ON: 'forge-icon-button-on',
-    DENSE: 'dense',
-    DENSITY_LEVEL: 'density-level'
-};
-const selectors = {
-    BUTTON: 'button, a',
-    ICON: 'i, span, svg, img, forge-icon'
-};
-const classes = {
-    BUTTON: 'forge-icon-button',
-    BUTTON_ON: 'forge-icon-button--on',
-    BUTTON_DENSE: 'forge-icon-button--dense',
-    ICON: 'forge-icon-button__icon',
-    ICON_ON: 'forge-icon-button__icon--on',
-    DENSITY: [
-        'forge-icon-button--dense-1',
-        'forge-icon-button--dense-2',
-        'forge-icon-button--dense-3',
-        'forge-icon-button--dense-4',
-        'forge-icon-button--dense-5',
-        'forge-icon-button--dense-6'
-    ]
+    ON: 'on',
+    VARIANT: 'variant',
+    THEME: 'theme',
+    SHAPE: 'shape',
+    DENSITY: 'density'
 };
+const attributes = Object.assign(Object.assign({}, observedAttributes), { ARIA_PRESSED: 'aria-pressed' });
 const events = {
-    CHANGE: `${elementName}-change`
+    TOGGLE: `${elementName}-toggle`
+};
+const defaults = {
+    DEFAULT_VARIANT: 'icon',
+    DEFAULT_THEME: 'primary',
+    DEFAULT_SHAPE: 'circular',
+    DEFAULT_DENSITY: 'large'
 };
 export const ICON_BUTTON_CONSTANTS = {
     elementName,
+    observedAttributes,
     attributes,
-    selectors,
-    classes,
-    events
+    events,
+    defaults
 };

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonFoundation, IBaseButtonFoundation } from '../button/base/base-button-foundation';
+import { IIconButtonAdapter } from './icon-button-adapter';
+import { IconButtonDensity, IconButtonShape, IconButtonTheme, IconButtonVariant } from './icon-button-constants';
+export interface IIconButtonFoundation extends IBaseButtonFoundation {
+    toggle: boolean;
+    on: boolean;
+    variant: IconButtonVariant;
+    theme: IconButtonTheme;
+    shape: IconButtonShape;
+    density: IconButtonDensity;
+}
+export declare class IconButtonFoundation extends BaseButtonFoundation<IIconButtonAdapter> implements IIconButtonFoundation {
+    private _toggle;
+    private _on;
+    private _variant;
+    private _theme;
+    private _shape;
+    private _density;
+    constructor(adapter: IIconButtonAdapter);
+    protected _onClick(evt: MouseEvent): Promise<void>;
+    private _onToggle;
+    get toggle(): boolean;
+    set toggle(value: boolean);
+    get on(): boolean;
+    set on(value: boolean);
+    get variant(): IconButtonVariant;
+    set variant(value: IconButtonVariant);
+    get theme(): IconButtonTheme;
+    set theme(value: IconButtonTheme);
+    get shape(): IconButtonShape;
+    set shape(value: IconButtonShape);
+    get density(): IconButtonDensity;
+    set density(value: IconButtonDensity);
+}