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

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

@@ -21,16 +21,14 @@ export class DatePickerAdapter extends BaseDatePickerAdapter {
         this._calendarDropdown = new CalendarDropdown(targetElement, this._dropdownIdentifier);
     }
     initializeMask(options) {
-        if (this._inputMask) {
-            this._inputMask.destroy();
-        }
+        var _a;
+        (_a = this._inputMask) === null || _a === void 0 ? void 0 : _a.destroy();
         this._inputMask = new DateInputMask(this._inputElement, options);
     }
     destroyMask() {
-        if (this._inputMask) {
-            this._inputMask.destroy();
-            this._inputMask = undefined;
-        }
+        var _a;
+        (_a = this._inputMask) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._inputMask = undefined;
     }
     initializeAccessibility() {
         this._inputElement.setAttribute('autocomplete', 'off');
@@ -91,7 +89,7 @@ export class DatePickerAdapter extends BaseDatePickerAdapter {
         return this._inputElement.disabled;
     }
     isInputFocused() {
-        return getActiveElement() === this._inputElement;
+        return getActiveElement(this._component.ownerDocument) === this._inputElement;
     }
     getInputValue() {
         return this._inputMask ? this._inputMask.maskedValue : this._inputElement.value;

package/esm/date-picker/date-picker-component-delegate.d.ts

@@ -7,7 +7,7 @@ import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-d
 import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core/delegates/form-field-component-delegate';
 import { ITextFieldComponent, ITextFieldComponentDelegateConfig } from '../text-field';
 import { IDatePickerComponent } from './date-picker';
-export declare type DatePickerComponentDelegateProps = Partial<IDatePickerComponent>;
+export type DatePickerComponentDelegateProps = Partial<IDatePickerComponent>;
 export interface IDatePickerComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     useDropdownIcon?: boolean;
     textFieldDelegateConfig?: ITextFieldComponentDelegateConfig;

package/esm/date-range-picker/date-range-picker-adapter.d.ts

@@ -20,6 +20,7 @@ export interface IDateRangePickerAdapter extends IBaseDatePickerAdapter {
     tryFocusInput(): void;
     tryBlurInput(): void;
     selectToInputText(): void;
+    destroyToMask(): void;
 }
 export declare class DateRangePickerAdapter extends BaseDatePickerAdapter<IDateRangePickerComponent> implements IDateRangePickerAdapter {
     private _fromInputElement;
@@ -32,9 +33,10 @@ export declare class DateRangePickerAdapter extends BaseDatePickerAdapter<IDateR
     protected _initializeInput(): void;
     protected _initializeCalendarDropdown(): void;
     initializeMask(fromOptions: IDateInputMaskOptions): void;
+    destroyMask(): void;
     initializeToMask(toOptions: IDateInputMaskOptions): void;
+    destroyToMask(): void;
     destroy(): void;
-    destroyMask(): void;
     private _destroyToValueChangeListener;
     initializeAccessibility(): void;
     addInputListener(type: string, listener: (event: Event) => void, capture?: boolean): void;
@@ -50,7 +52,7 @@ export declare class DateRangePickerAdapter extends BaseDatePickerAdapter<IDateR
     setInputValue(value: string, emitEvents: boolean): void;
     setToInputValue(value: string, emitEvents: boolean): void;
     isInputDisabled(): boolean;
-    isInputFocused(): boolean;
+    isInputFocused(target?: EventTarget | null): boolean;
     getInputValue(): string;
     getToInputValue(): string;
     setDisabled(isDisabled: boolean): void;

package/esm/date-range-picker/date-range-picker-adapter.js

@@ -26,31 +26,29 @@ export class DateRangePickerAdapter extends BaseDatePickerAdapter {
         this._calendarDropdown = new CalendarDropdown(targetElement, this._dropdownIdentifier);
     }
     initializeMask(fromOptions) {
-        if (this._fromInputMask) {
-            this._fromInputMask.destroy();
-        }
+        var _a;
+        (_a = this._fromInputMask) === null || _a === void 0 ? void 0 : _a.destroy();
         this._fromInputMask = new DateInputMask(this._fromInputElement, fromOptions);
     }
+    destroyMask() {
+        var _a;
+        (_a = this._fromInputMask) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._fromInputMask = undefined;
+    }
     initializeToMask(toOptions) {
-        if (this._toInputMask) {
-            this._toInputMask.destroy();
-        }
+        var _a;
+        (_a = this._toInputMask) === null || _a === void 0 ? void 0 : _a.destroy();
         this._toInputMask = new DateInputMask(this._toInputElement, toOptions);
     }
+    destroyToMask() {
+        var _a;
+        (_a = this._toInputMask) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._toInputMask = undefined;
+    }
     destroy() {
         super.destroy();
         this._destroyToValueChangeListener();
     }
-    destroyMask() {
-        if (this._fromInputMask) {
-            this._fromInputMask.destroy();
-            this._fromInputMask = undefined;
-        }
-        if (this._toInputMask) {
-            this._toInputMask.destroy();
-            this._toInputMask = undefined;
-        }
-    }
     _destroyToValueChangeListener() {
         if (typeof this._toValueChangeListener === 'function') {
             this._toValueChangeListener();
@@ -142,8 +140,12 @@ export class DateRangePickerAdapter extends BaseDatePickerAdapter {
     isInputDisabled() {
         return this._fromInputElement.disabled;
     }
-    isInputFocused() {
-        return this._toInputElement === getActiveElement() || this._fromInputElement === getActiveElement();
+    isInputFocused(target) {
+        if (target && this._toInputElement === target || this._fromInputElement === target) {
+            return true;
+        }
+        const activeEl = getActiveElement(this._component.ownerDocument);
+        return this._toInputElement === activeEl || this._fromInputElement === activeEl;
     }
     getInputValue() {
         return this._fromInputElement.value;

package/esm/date-range-picker/date-range-picker-component-delegate.d.ts

@@ -8,7 +8,7 @@ import { FieldDensityType } from '../field/field-constants';
 import { ITextFieldComponent } from '../text-field';
 import { IDateRangePickerComponent } from './date-range-picker';
 import { IDateRangePickerChangeEventData } from './date-range-picker-constants';
-export declare type DateRangePickerComponentDelegateProps = Partial<IDateRangePickerComponent>;
+export type DateRangePickerComponentDelegateProps = Partial<IDateRangePickerComponent>;
 export interface IDateRangePickerComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     useDropdownIcon?: boolean;
     fromPlaceholder?: string;

package/esm/date-range-picker/date-range-picker-foundation.d.ts

@@ -33,6 +33,7 @@ export declare class DateRangePickerFoundation extends BaseDatePickerFoundation<
     protected _onToday(): void;
     protected _onClear(): void;
     protected _getCurrentValue(): IDatePickerRange | null | undefined;
+    private _applyToMask;
     private _formatToInputValue;
     protected _setFormattedInputValue(suppressValueChanges?: boolean): void;
     private _setFormattedToInputValue;
@@ -42,7 +43,7 @@ export declare class DateRangePickerFoundation extends BaseDatePickerFoundation<
     protected _onDateSelected(event: ICalendarDateSelectEventData): void;
     protected _applyMin(): void;
     protected _applyMax(): void;
-    protected _initializeMask(): void;
+    protected _initializeToMask(): void;
     protected _applyDisabledDates(): void;
     protected _applyDisabledDaysOfWeek(): void;
     private _onToInput;
@@ -50,6 +51,8 @@ export declare class DateRangePickerFoundation extends BaseDatePickerFoundation<
     private _handleToInput;
     private _onToInputFocus;
     private _onToInputBlur;
+    protected _onInputFocus(evt: FocusEvent): void;
+    protected _onInputBlur(evt: FocusEvent): void;
     protected _onInputValueChanged(value: string): void;
     private _onToInputValueChanged;
     get value(): IDatePickerRange | null | undefined;

package/esm/date-range-picker/date-range-picker-foundation.js

@@ -21,6 +21,7 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
         this._toInputBlurListener = evt => this._onToInputBlur(evt);
     }
     _initializeState() {
+        this._applyToMask();
         if (!this._from) {
             this._from = this._coerceDateValue(this._adapter.getInputValue());
         }
@@ -92,6 +93,15 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
     _getCurrentValue() {
         return this._value;
     }
+    _applyToMask() {
+        if (this._masked) {
+            this._initializeToMask();
+        }
+        else {
+            this._adapter.destroyToMask();
+            this._formatToInputValue();
+        }
+    }
     _formatToInputValue() {
         const inputValue = this._adapter.getToInputValue();
         if (inputValue) {
@@ -201,22 +211,21 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
         }
         super._applyMax();
     }
-    _initializeMask() {
-        super._initializeMask();
-        // We also need to initialize our mask for the "to" input
-        if (this._masked) {
-            const options = {
-                showMaskFormat: this._showMaskFormat,
-                pattern: this._maskFormat,
-                onChange: (value) => this._handleToInput(value)
+    _initializeToMask() {
+        if (!this._masked) {
+            return;
+        }
+        const options = {
+            showMaskFormat: this._showMaskFormat && this._adapter.isInputFocused(),
+            pattern: this._maskFormat,
+            onChange: (value) => this._handleToInput(value)
+        };
+        if (this._prepareMaskCallback) {
+            options.prepareCallback = (value, masked, flags, maskInstance) => {
+                return this._prepareMaskCallback.call(null, value, masked, flags, maskInstance);
             };
-            if (this._prepareMaskCallback) {
-                options.prepareCallback = (value, masked, flags, maskInstance) => {
-                    return this._prepareMaskCallback.call(null, value, masked, flags, maskInstance);
-                };
-            }
-            this._adapter.initializeToMask(options);
         }
+        this._adapter.initializeToMask(options);
     }
     _applyDisabledDates() {
         if (this._from && !this._isDateValueAcceptable(this._from)) {
@@ -263,13 +272,38 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
     }
     _onToInputFocus() {
         this._adapter.selectToInputText();
+        if (this.masked && this._showMaskFormat) {
+            this._initializeMask();
+            this._initializeToMask();
+        }
     }
     _onToInputBlur(evt) {
+        if (this._masked && !this._adapter.isInputFocused(evt.relatedTarget)) {
+            this._initializeMask();
+            this._initializeToMask();
+        }
         this._formatToInputValue();
         if (this._open) {
             this._closeCalendar(true);
         }
     }
+    _onInputFocus(evt) {
+        this._adapter.selectInputText();
+        if (this.masked && this._showMaskFormat) {
+            this._initializeMask();
+            this._initializeToMask();
+        }
+    }
+    _onInputBlur(evt) {
+        if (this.masked && !this._adapter.isInputFocused(evt.relatedTarget)) {
+            this._initializeMask();
+            this._initializeToMask();
+        }
+        this._formatInputValue();
+        if (this._open && !this._adapter.isInputFocused(evt.relatedTarget)) {
+            this._closeCalendar(true);
+        }
+    }
     _onInputValueChanged(value) {
         if (this._masked) {
             return;

package/esm/dialog/dialog-adapter.js

@@ -140,7 +140,7 @@ export class DialogAdapter extends BaseAdapter {
     }
     captureActiveElement() {
         var _a;
-        this._activeElement = getActiveElement();
+        this._activeElement = getActiveElement(this._component.ownerDocument);
         (_a = this._activeElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     tryRestoreActiveElement() {

package/esm/dialog/dialog-constants.d.ts

@@ -61,5 +61,5 @@ export interface IDialogMoveContext {
 }
 export interface IDialogMoveStartEventData extends IDialogMoveEventData {
 }
-export declare type DialogPositionType = 'absolute' | 'relative';
-export declare type DialogStateCallback = () => boolean | void | Promise<boolean | void>;
+export type DialogPositionType = 'absolute' | 'relative';
+export type DialogStateCallback = () => boolean | void | Promise<boolean | void>;

package/esm/dialog/dialog.js

@@ -18,11 +18,6 @@ const styles = '.forge-dialog{position:fixed;top:0;bottom:0;left:0;right:0;z-ind
  * @tag forge-dialog
  */
 let DialogComponent = class DialogComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new DialogFoundation(new DialogAdapter(this));
-    }
     static get observedAttributes() {
         return [
             DIALOG_CONSTANTS.attributes.BACKDROP_CLOSE,
@@ -36,6 +31,11 @@ let DialogComponent = class DialogComponent extends BaseComponent {
             DIALOG_CONSTANTS.attributes.MOVE_TARGET
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new DialogFoundation(new DialogAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/esm/drawer/base/base-drawer-constants.d.ts

@@ -24,4 +24,4 @@ export declare const BASE_DRAWER_CONSTANTS: {
         AFTER_CLOSE: string;
     };
 };
-export declare type DrawerDirection = 'left' | 'right';
+export type DrawerDirection = 'left' | 'right';

package/esm/expansion-panel/expansion-panel-constants.d.ts

@@ -24,6 +24,8 @@ export declare const EXPANSION_PANEL_CONSTANTS: {
         OPEN: string;
         ORIENTATION: string;
         USE_ANIMATIONS: string;
+        IGNORE: string;
+        IGNORE_ALT: string;
     };
     numbers: {
         COLLAPSE_ANIMATION_DURATION: number;

package/esm/expansion-panel/expansion-panel-constants.js

@@ -24,7 +24,9 @@ const events = {
 const attributes = {
     OPEN: 'open',
     ORIENTATION: 'orientation',
-    USE_ANIMATIONS: 'use-animations'
+    USE_ANIMATIONS: 'use-animations',
+    IGNORE: 'data-forge-ignore',
+    IGNORE_ALT: 'forge-ignore'
 };
 const numbers = {
     COLLAPSE_ANIMATION_DURATION: 400,

package/esm/expansion-panel/expansion-panel-foundation.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { debounce } from '@tylertech/forge-core';
+import { debounce, getEventPath } from '@tylertech/forge-core';
 import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
 export class ExpansionPanelFoundation {
     constructor(_adapter) {
@@ -115,6 +115,9 @@ export class ExpansionPanelFoundation {
      * @param {MouseEvent} evt The click event.
      */
     _onClick(evt) {
+        if (getEventPath(evt).find(p => p.nodeType === 1 && (p.hasAttribute(EXPANSION_PANEL_CONSTANTS.attributes.IGNORE) || p.hasAttribute(EXPANSION_PANEL_CONSTANTS.attributes.IGNORE_ALT)))) {
+            return;
+        }
         evt.stopPropagation();
         this._toggle();
         this._emitEvent();

package/esm/expansion-panel/expansion-panel.js

@@ -9,7 +9,7 @@ import { BaseComponent } from '../core/base/base-component';
 import { ExpansionPanelAdapter } from './expansion-panel-adapter';
 import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
 import { ExpansionPanelFoundation } from './expansion-panel-foundation';
-const template = '<template><div class=\"forge-expansion-panel\" part=\"root\"><div class=\"forge-expansion-panel__header\" role=\"button\" aria-controls=\"content\" aria-expanded=\"false\" part=\"header\"><slot name=\"header\"></slot></div><div id=\"content\" role=\"group\" class=\"forge-expansion-panel__content\" style=\"height: 0; opacity: 0; visibility: hidden;\" part=\"content\"><slot></slot></div></div></template>';
+const template = '<template><div class=\"forge-expansion-panel\" part=\"root\"><div class=\"forge-expansion-panel__header\" part=\"header\"><slot name=\"header\"></slot></div><div class=\"forge-expansion-panel__content\" style=\"height: 0; opacity: 0; visibility: hidden;\" part=\"content\"><slot></slot></div></div></template>';
 const styles = '.forge-expansion-panel{display:block;display:var(--forge-expansion-panel-display,block);height:auto;height:var(--forge-expansion-panel-height,auto)}.forge-expansion-panel__header{outline:0}.forge-expansion-panel__header:hover{cursor:pointer}.forge-expansion-panel__header forge-open-icon{margin-left:auto}.forge-expansion-panel__content{overflow:hidden;overflow:var(--forge-expansion-panel-content-overflow,hidden);max-height:none;max-height:var(--forge-expansion-panel-content-max-height,none)}.forge-expansion-panel__content::-webkit-scrollbar{width:16px;width:var(--forge-scrollbar-width,16px);height:16px;height:var(--forge-scrollbar-height,16px)}.forge-expansion-panel__content::-webkit-scrollbar-corner{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-expansion-panel__content::-webkit-scrollbar-track{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-expansion-panel__content::-webkit-scrollbar-track:hover{background-color:#ececec;background-color:var(--forge-theme-scrollbar-track-hover,#ececec)}.forge-expansion-panel__content::-webkit-scrollbar-thumb{background-color:#bdbdbd;background-color:var(--forge-theme-scrollbar-thumb,#bdbdbd);height:32px;height:var(--forge-scrollbar-min-height,32px);width:32px;width:var(--forge-scrollbar-min-width,32px);border-radius:10px;border-radius:var(--forge-scrollbar-border-radius,10px);border-width:3px;border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-clip:content-box}.forge-expansion-panel__content::-webkit-scrollbar-thumb:hover{background-color:#9e9e9e;background-color:var(--forge-theme-scrollbar-thumb-hover,#9e9e9e)}:host{display:block}:host([hidden]){display:none}';
 /**
  * A web component that encapsulates the functionality of expanding/collapsing content when clicked.
@@ -17,11 +17,6 @@ const styles = '.forge-expansion-panel{display:block;display:var(--forge-expansi
  * @tag forge-expansion-panel
  */
 let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new ExpansionPanelFoundation(new ExpansionPanelAdapter(this));
-    }
     static get observedAttributes() {
         return [
             EXPANSION_PANEL_CONSTANTS.attributes.OPEN,
@@ -29,6 +24,11 @@ let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponen
             EXPANSION_PANEL_CONSTANTS.attributes.USE_ANIMATIONS
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ExpansionPanelFoundation(new ExpansionPanelAdapter(this));
+    }
     initializedCallback() {
         this._foundation.initialize();
     }

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

@@ -18,6 +18,7 @@ export interface IFieldAdapter extends IBaseAdapter {
     removeLabelSlotListener(listener: (evt: Event) => void): void;
     setLabelClass(name: string): void;
     removeLabelClass(name: string): void;
+    isLabelFloating(): boolean;
     addLeadingSlotListener(listener: (evt: Event) => void): void;
     removeLeadingSlotListener(listener: (evt: Event) => void): void;
     addTrailingSlotListener(listener: (evt: Event) => void): void;
@@ -29,7 +30,7 @@ export interface IFieldAdapter extends IBaseAdapter {
     hasLeadingNodes(): boolean;
     hasPlaceholder(): boolean;
     hasTrailingNodes(): boolean;
-    inputHasFocus(): boolean;
+    inputHasFocus(target?: EventTarget | null): boolean;
     inputHasValue(): boolean;
     fieldHasValue(): boolean;
     isDisabled(): boolean;
@@ -81,9 +82,10 @@ export declare class FieldAdapter extends BaseAdapter<IFieldComponent> implement
     inputHasValue(): boolean;
     fieldHasValue(): boolean;
     hasPlaceholder(): boolean;
-    inputHasFocus(): boolean;
+    inputHasFocus(target?: EventTarget | null): boolean;
     setLabelClass(name: string): void;
     removeLabelClass(name: string): void;
+    isLabelFloating(): boolean;
     setRoomy(isRoomy: boolean): void;
     setDense(isDense: boolean): void;
     hasLeadingNodes(): boolean;

package/esm/field/field-adapter.js

@@ -104,8 +104,8 @@ export class FieldAdapter extends BaseAdapter {
     hasPlaceholder() {
         return this._inputElement.placeholder ? this._inputElement.placeholder.trim().length > 0 : false;
     }
-    inputHasFocus() {
-        return this._inputElement === getActiveElement();
+    inputHasFocus(target) {
+        return this._inputElement === target || this._inputElement === getActiveElement(this._component.ownerDocument);
     }
     setLabelClass(name) {
         if (this._labelElement) {
@@ -117,6 +117,9 @@ export class FieldAdapter extends BaseAdapter {
             this._labelElement.classList.remove(name);
         }
     }
+    isLabelFloating() {
+        return this._component.hasAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
+    }
     setRoomy(isRoomy) {
         toggleClass(this._rootElement, isRoomy, FIELD_CONSTANTS.classes.ROOMY);
     }

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

@@ -34,6 +34,6 @@ export declare const FIELD_CONSTANTS: {
         LABEL: string;
     };
 };
-export declare type FieldDensityType = 'roomy' | 'default' | 'dense';
-export declare type FieldFloatLabelType = 'always' | 'auto';
-export declare type FieldShapeType = 'default' | 'rounded';
+export type FieldDensityType = 'roomy' | 'default' | 'dense';
+export type FieldFloatLabelType = 'always' | 'auto';
+export type FieldShapeType = 'default' | 'rounded';

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

@@ -55,8 +55,8 @@ export declare class FieldFoundation {
     protected _detectTrailingContent(): void;
     protected _detectAddonEndContent(): void;
     protected _detectSlottedContent(): void;
-    protected _onFocus(event: Event): void;
-    protected _onBlur(event: Event): void;
+    protected _onFocus(evt: FocusEvent): void;
+    protected _onBlur(evt: FocusEvent): void;
     protected _onValueChanged(value: any): void;
     protected _onInputAttributeChanged(name: string, value: string | null): void;
     protected _setShapeType(): void;

package/esm/field/field-foundation.js

@@ -66,6 +66,8 @@ export class FieldFoundation {
     disconnect() {
         this._isInitialized = false;
         this._adapter.destroy();
+        this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
+        this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LABEL);
         if (this._floatingLabel) {
             this._floatingLabel.destroy();
             this._floatingLabel = undefined;
@@ -144,14 +146,15 @@ export class FieldFoundation {
         }
     }
     floatLabel(value) {
-        var _a;
-        if (((_a = this._floatingLabel) === null || _a === void 0 ? void 0 : _a.isFloating) === value) {
+        var _a, _b;
+        if (((_a = this._floatingLabel) === null || _a === void 0 ? void 0 : _a.isFloating) === value || this._adapter.isLabelFloating() === value) {
+            if (value) {
+                this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING, '');
+            }
             return;
         }
         if (!value && this._floatLabelType === 'always') {
-            if (this._floatingLabel) {
-                this._floatingLabel.float(true, true);
-            }
+            (_b = this._floatingLabel) === null || _b === void 0 ? void 0 : _b.float(true, true);
             this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING, '');
             return;
         }
@@ -228,20 +231,20 @@ export class FieldFoundation {
         this._detectTrailingContent();
         this._detectAddonEndContent();
     }
-    _onFocus(event) {
+    _onFocus(evt) {
         this._adapter.setRootClass(FIELD_CONSTANTS.classes.FOCUSED);
         this._adapter.setLabelClass(FIELD_CONSTANTS.classes.LABEL_FOCUSED);
         this.floatLabel(true);
     }
-    _onBlur(event) {
-        if (this._adapter.inputHasFocus()) {
+    _onBlur(evt) {
+        if (this._adapter.inputHasFocus(evt.relatedTarget)) {
             return;
         }
         this._adapter.removeRootClass(FIELD_CONSTANTS.classes.FOCUSED);
         this._adapter.removeLabelClass(FIELD_CONSTANTS.classes.LABEL_FOCUSED);
         if (!this._adapter.fieldHasValue() && !this._adapter.hasPlaceholder()) {
-            this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
             this.floatLabel(false);
+            this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
         }
     }
     _onValueChanged(value) {

package/esm/field/field.js

@@ -8,9 +8,6 @@ import { FIELD_CONSTANTS } from './field-constants';
 import { BaseComponent } from '../core/base/base-component';
 import { coerceBoolean, ensureChild, FoundationProperty } from '@tylertech/forge-core';
 export class FieldComponent extends BaseComponent {
-    constructor() {
-        super();
-    }
     static get observedAttributes() {
         return [
             FIELD_CONSTANTS.attributes.DENSITY,
@@ -20,6 +17,9 @@ export class FieldComponent extends BaseComponent {
             FIELD_CONSTANTS.attributes.REQUIRED
         ];
     }
+    constructor() {
+        super();
+    }
     connectedCallback() {
         if (this.querySelector(FIELD_CONSTANTS.selectors.INPUT)) {
             this._initialize();

package/esm/file-picker/file-picker-component-delegate.d.ts

@@ -6,7 +6,7 @@
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
 import { IFilePickerComponent } from './file-picker';
 import { IFilePickerChangeEventData } from './file-picker-constants';
-export declare type FilePickerComponentDelegateProps = Partial<IFilePickerComponent>;
+export type FilePickerComponentDelegateProps = Partial<IFilePickerComponent>;
 export interface IFilePickerComponentDelegateOptions extends IBaseComponentDelegateOptions {
     primaryText?: string;
     secondaryText?: string;

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

@@ -11,18 +11,13 @@ 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:#fafafa;background-color:var(--mdc-theme-background,#fafafa);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:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5);background-color:rgba(63,81,181,.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>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.
  *
  * @tag forge-file-picker
  */
 let FilePickerComponent = class FilePickerComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new FilePickerFoundation(new FilePickerAdapter(this));
-    }
     static get observedAttributes() {
         return [
             FILE_PICKER_CONSTANTS.attributes.ACCEPT,
@@ -34,6 +29,11 @@ let FilePickerComponent = class FilePickerComponent extends BaseComponent {
             FILE_PICKER_CONSTANTS.attributes.BORDERLESS
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new FilePickerFoundation(new FilePickerAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/esm/floating-action-button/floating-action-button-component-delegate.d.ts

@@ -5,7 +5,7 @@
  */
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
 import { IFloatingActionButtonComponent } from './floating-action-button';
-export declare type FloatingActionButtonComponentDelegateProps = Partial<IFloatingActionButtonComponent>;
+export type FloatingActionButtonComponentDelegateProps = Partial<IFloatingActionButtonComponent>;
 export interface IFloatingActionButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
     text?: string;
 }

package/esm/floating-action-button/floating-action-button.js

@@ -14,12 +14,6 @@ import { FLOATING_ACTION_BUTTON_CONSTANTS } from './floating-action-button-const
  * @tag forge-fab
  */
 let FloatingActionButton = class FloatingActionButton extends BaseComponent {
-    constructor() {
-        super();
-        this._isExtended = false;
-        this._isMini = false;
-        this._isExited = false;
-    }
     static get observedAttributes() {
         return [
             FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXITED,
@@ -27,6 +21,12 @@ let FloatingActionButton = class FloatingActionButton extends BaseComponent {
             FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXTENDED
         ];
     }
+    constructor() {
+        super();
+        this._isExtended = false;
+        this._isMini = false;
+        this._isExited = false;
+    }
     connectedCallback() {
         if (this.children.length) {
             this._initialize();