@tylertech/forge 3.0.0-next.5 → 3.0.0-next.7

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

@@ -18,11 +18,6 @@ const styles = '.forge-file-picker{-webkit-box-sizing:border-box;box-sizing:bord
  * @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();

package/esm/icon/icon.js

@@ -17,11 +17,6 @@ const styles = ':host{font-size:24px;font-size:var(--forge-icon-font-size, 24px)
  * @tag forge-icon
  */
 let IconComponent = class IconComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new IconFoundation(new IconAdapter(this));
-    }
     static get observedAttributes() {
         return [
             ICON_CONSTANTS.attributes.NAME,
@@ -32,6 +27,11 @@ let IconComponent = class IconComponent extends BaseComponent {
             ICON_CONSTANTS.attributes.VIEWBOX
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new IconFoundation(new IconAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

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

@@ -7,7 +7,7 @@ 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 type IconButtonComponentDelegateProps = Partial<IIconButtonComponent>;
 export interface IIconButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
     iconName?: string;
     iconExternal?: boolean;

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

@@ -15,13 +15,6 @@ import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
  * @tag forge-icon-button
  */
 let IconButtonComponent = class IconButtonComponent extends BaseComponent {
-    constructor() {
-        super();
-        this._toggle = false;
-        this._isOn = false;
-        this._dense = false;
-        this._densityLevel = 5;
-    }
     static get observedAttributes() {
         return [
             ICON_BUTTON_CONSTANTS.attributes.IS_ON,
@@ -30,6 +23,13 @@ let IconButtonComponent = class IconButtonComponent extends BaseComponent {
             ICON_BUTTON_CONSTANTS.attributes.TOGGLE
         ];
     }
+    constructor() {
+        super();
+        this._toggle = false;
+        this._isOn = false;
+        this._dense = false;
+        this._densityLevel = 5;
+    }
     connectedCallback() {
         if (this.querySelector(ICON_BUTTON_CONSTANTS.selectors.BUTTON)) {
             this._initialize();

package/esm/keyboard-shortcut/keyboard-shortcut.js

@@ -15,10 +15,6 @@ import { BaseComponent } from '../core/base/base-component';
  * @tag forge-keyboard-shortcut
  */
 let KeyboardShortcutComponent = class KeyboardShortcutComponent extends BaseComponent {
-    constructor() {
-        super();
-        this._foundation = new KeyboardShortcutFoundation(new KeyboardShortcutAdapter(this));
-    }
     static get observedAttributes() {
         return [
             KEYBOARD_SHORTCUT_CONSTANTS.attributes.KEY,
@@ -31,6 +27,10 @@ let KeyboardShortcutComponent = class KeyboardShortcutComponent extends BaseComp
             KEYBOARD_SHORTCUT_CONSTANTS.attributes.DISABLED
         ];
     }
+    constructor() {
+        super();
+        this._foundation = new KeyboardShortcutFoundation(new KeyboardShortcutAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/esm/label-value/label-value-component-delegate.d.ts

@@ -5,7 +5,7 @@
  */
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
 import { ILabelValueComponent } from '../label-value';
-export declare type LabelValueComponentDelegateProps = Partial<ILabelValueComponent>;
+export type LabelValueComponentDelegateProps = Partial<ILabelValueComponent>;
 export interface ILabelValueComponentDelegateOptions extends IBaseComponentDelegateOptions {
     labelText: string;
     valueText: string;

package/esm/label-value/label-value-constants.d.ts

@@ -23,5 +23,5 @@ export declare const LABEL_VALUE_CONSTANTS: {
         ROOT: string;
     };
 };
-export declare type LabelValueAlignment = 'left' | 'center' | 'right';
+export type LabelValueAlignment = 'left' | 'center' | 'right';
 export { type FieldDensityType as LabelValueDensityType } from '../field/field-constants';

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

@@ -17,11 +17,6 @@ const styles = ':host{display:block;min-width:0}:host([hidden]){display:none}.fo
  * @tag forge-label-value
  */
 let LabelValueComponent = class LabelValueComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new LabelValueFoundation(new LabelValueAdapter(this));
-    }
     static get observedAttributes() {
         return [
             LABEL_VALUE_CONSTANTS.attributes.EMPTY,
@@ -30,6 +25,11 @@ let LabelValueComponent = class LabelValueComponent extends BaseComponent {
             LABEL_VALUE_CONSTANTS.attributes.ALIGN
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new LabelValueFoundation(new LabelValueAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/esm/linear-progress/linear-progress.js

@@ -38,11 +38,6 @@ const styles = ':host{display:block;position:relative;min-inline-size:80px;block
  * @csspart progressbar - Styles the progress bar container element
  */
 let LinearProgressComponent = class LinearProgressComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new LinearProgressFoundation(new LinearProgressAdapter(this));
-    }
     static get observedAttributes() {
         return [
             LINEAR_PROGRESS_CONSTANTS.attributes.DETERMINATE,
@@ -51,6 +46,11 @@ let LinearProgressComponent = class LinearProgressComponent extends BaseComponen
             LINEAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new LinearProgressFoundation(new LinearProgressAdapter(this));
+    }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
             case LINEAR_PROGRESS_CONSTANTS.attributes.DETERMINATE:

package/esm/list/list/list.js

@@ -18,11 +18,6 @@ const styles = '.forge-list{-moz-osx-font-smoothing:grayscale;-webkit-font-smoot
  * @tag forge-list
  */
 let ListComponent = class ListComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new ListFoundation(new ListAdapter(this));
-    }
     static get observedAttributes() {
         return [
             LIST_CONSTANTS.attributes.STATIC,
@@ -32,6 +27,11 @@ let ListComponent = class ListComponent extends BaseComponent {
             LIST_CONSTANTS.attributes.INDENTED
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ListFoundation(new ListAdapter(this));
+    }
     initializedCallback() {
         this._foundation.initialize();
     }

package/esm/list/list-item/list-item.js

@@ -18,11 +18,6 @@ const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animatio
  * @tag forge-list-item
  */
 let ListItemComponent = class ListItemComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, defaultTemplate, styles);
-        this._foundation = new ListItemFoundation(new ListItemAdapter(this));
-    }
     static get observedAttributes() {
         return [
             LIST_ITEM_CONSTANTS.attributes.STATIC,
@@ -41,6 +36,11 @@ let ListItemComponent = class ListItemComponent extends BaseComponent {
             LIST_ITEM_CONSTANTS.attributes.WRAP
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, defaultTemplate, styles);
+        this._foundation = new ListItemFoundation(new ListItemAdapter(this));
+    }
     connectedCallback() {
         // To simulate the :host-context() selector for Firefox until they implement it, we need to determine if the
         // list item is within a drawer for auto-styling the list item when included within a drawer. Check to see if

package/esm/list-dropdown/list-dropdown-adapter.js

@@ -213,7 +213,7 @@ export class ListDropdownAdapter {
         if (!this._dropdownElement || !this._listElement) {
             return;
         }
-        createListItems(config, this._listElement, options);
+        createListItems(config, this._listElement, options, this._listElement.childElementCount, false);
     }
     setBusyVisibility(isVisible) {
         if (!this._dropdownElement) {

package/esm/list-dropdown/list-dropdown-constants.d.ts

@@ -20,12 +20,12 @@ export declare const LIST_DROPDOWN_CONSTANTS: {
         GROUP_WRAPPER: string;
     };
 };
-export declare type ListDropdownOptionBuilder<T = HTMLElement> = (option: IListDropdownOption, parentElement: T) => HTMLElement | string | void;
-export declare type ListDropdownHeaderBuilder = () => HTMLElement;
-export declare type ListDropdownFooterBuilder = () => HTMLElement;
-export declare type ListDropdownOptionGroupBuilder<T = any> = (option: IListDropdownOptionGroup<T>) => HTMLElement | string;
-export declare type ListDropdownTransformCallback = (label: string) => string | HTMLElement;
-export declare type ListDropdownIconType = 'font' | 'component';
+export type ListDropdownOptionBuilder<T = HTMLElement> = (option: IListDropdownOption, parentElement: T) => HTMLElement | string | void;
+export type ListDropdownHeaderBuilder = () => HTMLElement;
+export type ListDropdownFooterBuilder = () => HTMLElement;
+export type ListDropdownOptionGroupBuilder<T = any> = (option: IListDropdownOptionGroup<T>) => HTMLElement | string;
+export type ListDropdownTransformCallback = (label: string) => string | HTMLElement;
+export type ListDropdownIconType = 'font' | 'component';
 export interface IBaseListDropdownOption<T = any> {
     value: T;
     label: string;

package/esm/list-dropdown/list-dropdown-utils.d.ts

@@ -23,7 +23,7 @@ export declare function createList(config: IListDropdownOpenConfig): IListCompon
  * Creates the list to place inside of the dropdown.
  * @param config
  */
-export declare function createListItems(config: IListDropdownOpenConfig, listElement: IListComponent, options?: Array<IListDropdownOption | IListDropdownOptionGroup>): void;
+export declare function createListItems(config: IListDropdownOpenConfig, listElement: IListComponent, options?: Array<IListDropdownOption | IListDropdownOptionGroup>, startIndex?: number, renderSelected?: boolean): void;
 export declare function createCheckboxElement(selected: boolean): HTMLElement;
 export declare function createAsyncElement(asyncStyle?: ListDropdownAsyncStyle): HTMLElement;
 export declare function createBusyElement(): ILinearProgressComponent;

package/esm/list-dropdown/list-dropdown-utils.js

@@ -93,13 +93,13 @@ export function createList(config) {
  * Creates the list to place inside of the dropdown.
  * @param config
  */
-export function createListItems(config, listElement, options) {
+export function createListItems(config, listElement, options, startIndex = 0, renderSelected = true) {
     // Ensure the options are provided in the form a group (if no groups provided, then we have one anonymous group of options)
     const groups = getOptionsByGroup(options || config.options);
     const flatOptions = getFlattenedOptions(groups);
     const limitOptions = config.optionLimit ? true : false;
     let optionLimit = config.optionLimit || 0;
-    let optionIndex = 0;
+    let optionIdIndex = startIndex;
     // Iterate over our groups and render the optional headers and options for that group
     for (const group of groups) {
         let optionParent = listElement;
@@ -148,12 +148,15 @@ export function createListItems(config, listElement, options) {
             if (limitOptions && --optionLimit < 0) {
                 break;
             }
-            optionIndex++;
             // Create and configure the list element
             const isSelected = config.selectedValues ? config.selectedValues.some(v => isDeepEqual(v, option.value)) : false;
+            // We don't render selected options that are appended dynamically since those are always displayed at the top of the list
+            if (!renderSelected && isSelected) {
+                continue;
+            }
             let listItemElement = document.createElement('forge-list-item');
             listItemElement.value = option.value;
-            listItemElement.id = `list-dropdown-option-${config.id}-${optionIndex}`;
+            listItemElement.id = `list-dropdown-option-${config.id}-${optionIdIndex++}`;
             listItemElement.style.cursor = 'pointer';
             if (config.wrapOptionText) {
                 listItemElement.wrap = true;

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

@@ -54,6 +54,6 @@ export interface IMenuOption<T = any> extends IListDropdownOption<T> {
 }
 export interface IMenuOptionGroup extends IListDropdownOptionGroup {
 }
-export declare type MenuOptionBuilder = (option: IMenuOption, parentElement: HTMLElement) => HTMLElement | string | void;
-export declare type MenuOptionFactory = (() => IMenuOption[]) | (() => Promise<IMenuOption[]>);
-export declare type MenuMode = 'click' | 'cascade';
+export type MenuOptionBuilder = (option: IMenuOption, parentElement: HTMLElement) => HTMLElement | string | void;
+export type MenuOptionFactory = (() => IMenuOption[]) | (() => Promise<IMenuOption[]>);
+export type MenuMode = 'click' | 'cascade';

package/esm/menu/menu.js

@@ -23,12 +23,6 @@ const styles = ':host{display:inline-block}:host([hidden]){display:none}';
  * @tag forge-menu
  */
 let MenuComponent = class MenuComponent extends ListDropdownAware {
-    constructor() {
-        super();
-        IconRegistry.define(tylIconArrowRight);
-        this._foundation = new MenuFoundation(new MenuAdapter(this));
-        attachShadowTemplate(this, template, styles);
-    }
     static get observedAttributes() {
         return [
             MENU_CONSTANTS.attributes.OPEN,
@@ -46,6 +40,12 @@ let MenuComponent = class MenuComponent extends ListDropdownAware {
             MENU_CONSTANTS.attributes.OBSERVE_SCROLL_THRESHOLD
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define(tylIconArrowRight);
+        this._foundation = new MenuFoundation(new MenuAdapter(this));
+        attachShadowTemplate(this, template, styles);
+    }
     connectedCallback() {
         if (this.querySelector(MENU_CONSTANTS.selectors.TOGGLE)) {
             this._foundation.initialize();

package/esm/open-icon/open-icon.js

@@ -19,18 +19,18 @@ const styles = '.forge-open-icon{color:#757575;color:var(--forge-theme-icon-colo
  * @tag forge-open-icon
  */
 let OpenIconComponent = class OpenIconComponent extends BaseComponent {
-    constructor() {
-        super();
-        IconRegistry.define([tylIconKeyboardArrowLeft, tylIconKeyboardArrowDown]);
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new OpenIconFoundation(new OpenIconAdapter(this));
-    }
     static get observedAttributes() {
         return [
             OPEN_ICON_CONSTANTS.attributes.OPEN,
             OPEN_ICON_CONSTANTS.attributes.ORIENTATION
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define([tylIconKeyboardArrowLeft, tylIconKeyboardArrowDown]);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new OpenIconFoundation(new OpenIconAdapter(this));
+    }
     initializedCallback() {
         this._foundation.initialize();
     }

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

@@ -65,7 +65,7 @@ export declare const PAGINATOR_CONSTANTS: {
         PAGE_SIZE: string;
     };
 };
-export declare type PaginatorAlternativeAlignment = 'start' | 'space-between' | 'end';
+export type PaginatorAlternativeAlignment = 'start' | 'space-between' | 'end';
 export interface IPaginatorChangeEvent {
     type: string;
     pageSize: number;

package/esm/paginator/paginator-foundation.js

@@ -290,6 +290,8 @@ export class PaginatorFoundation {
         if (canPage) {
             this.pageIndex = 0;
             this.pageSize = pageSize;
+        }
+        else {
             evt.preventDefault();
         }
     }

package/esm/paginator/paginator.js

@@ -22,17 +22,6 @@ const styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-fle
  * @tag forge-paginator
  */
 let PaginatorComponent = class PaginatorComponent extends BaseComponent {
-    constructor() {
-        super();
-        IconRegistry.define([
-            tylIconFirstPage,
-            tylIconKeyboardArrowLeft,
-            tylIconKeyboardArrowRight,
-            tylIconLastPage
-        ]);
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new PaginatorFoundation(new PaginatorAdapter(this));
-    }
     static get observedAttributes() {
         return [
             PAGINATOR_CONSTANTS.attributes.PAGE_INDEX,
@@ -48,6 +37,17 @@ let PaginatorComponent = class PaginatorComponent extends BaseComponent {
             PAGINATOR_CONSTANTS.attributes.ALIGNMENT
         ];
     }
+    constructor() {
+        super();
+        IconRegistry.define([
+            tylIconFirstPage,
+            tylIconKeyboardArrowLeft,
+            tylIconKeyboardArrowRight,
+            tylIconLastPage
+        ]);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new PaginatorFoundation(new PaginatorAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

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

@@ -43,7 +43,7 @@ export interface IPopupPosition {
     x: number;
     y: number;
 }
-export declare type PopupPlacement = PositionPlacement;
+export type PopupPlacement = PositionPlacement;
 export declare enum PopupAnimationType {
     None = "none",
     Menu = "menu",
@@ -52,4 +52,4 @@ export declare enum PopupAnimationType {
 export interface IPopupPositionEventData extends IPopupPosition {
     visibility: 'visible' | 'hidden';
 }
-export declare type PopupStateCallback = () => boolean | void | Promise<boolean | void>;
+export type PopupStateCallback = () => boolean | void | Promise<boolean | void>;

package/esm/popup/popup.js

@@ -17,11 +17,6 @@ const styles = '.forge-popup{min-width:112px;min-width:var(--min-width,112px);ba
  * @tag forge-popup
  */
 let PopupComponent = class PopupComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new PopupFoundation(new PopupAdapter(this));
-    }
     static get observedAttributes() {
         return [
             POPUP_CONSTANTS.attributes.OPEN,
@@ -32,6 +27,11 @@ let PopupComponent = class PopupComponent extends BaseComponent {
             POPUP_CONSTANTS.attributes.HIDE_WHEN_CLIPPED
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new PopupFoundation(new PopupAdapter(this));
+    }
     disconnectedCallback() {
         this._foundation.disconnect();
     }

package/esm/product-icon/product-icon.js

@@ -17,11 +17,6 @@ const styles = '.forge-product-icon__background{border-radius:50%;border-radius:
  * @tag forge-product-icon
  */
 let ProductIconComponent = class ProductIconComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new ProductIconFoundation(new ProductIconAdapter(this));
-    }
     static get observedAttributes() {
         return [
             PRODUCT_ICON_CONSTANTS.attributes.COLOR,
@@ -30,6 +25,11 @@ let ProductIconComponent = class ProductIconComponent extends BaseComponent {
             PRODUCT_ICON_CONSTANTS.attributes.ITERATIONS
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ProductIconFoundation(new ProductIconAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/esm/profile-card/profile-card.js

@@ -20,11 +20,6 @@ const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animatio
  * @tag forge-profile-card
  */
 let ProfileCardComponent = class ProfileCardComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new ProfileCardFoundation(new ProfileCardAdapter(this));
-    }
     static get observedAttributes() {
         return [
             PROFILE_CARD_CONSTANTS.attributes.FULL_NAME,
@@ -39,6 +34,11 @@ let ProfileCardComponent = class ProfileCardComponent extends BaseComponent {
             PROFILE_CARD_CONSTANTS.attributes.AVATAR_LETTER_COUNT
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ProfileCardFoundation(new ProfileCardAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/esm/quantity-field/quantity-field-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 { ITextFieldComponentDelegateConfig } from '../text-field/text-field-component-delegate';
 import { IQuantityFieldComponent } from './quantity-field';
-export declare type QuantityFieldComponentDelegateProps = Partial<IQuantityFieldComponent>;
+export type QuantityFieldComponentDelegateProps = Partial<IQuantityFieldComponent>;
 export interface IQuantityFieldComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
     id?: string;
     label?: string;

package/esm/quantity-field/quantity-field.js

@@ -20,6 +20,12 @@ import { IconRegistry } from '../icon';
  * @tag forge-quantity-field
  */
 let QuantityFieldComponent = class QuantityFieldComponent extends BaseComponent {
+    static get observedAttributes() {
+        return [
+            QUANTITY_FIELD_CONSTANTS.attributes.INVALID,
+            QUANTITY_FIELD_CONSTANTS.attributes.REQUIRED
+        ];
+    }
     constructor() {
         super();
         attachShadowTemplate(this, template, styles);
@@ -29,12 +35,6 @@ let QuantityFieldComponent = class QuantityFieldComponent extends BaseComponent
             tylIconControlPoint
         ]);
     }
-    static get observedAttributes() {
-        return [
-            QUANTITY_FIELD_CONSTANTS.attributes.INVALID,
-            QUANTITY_FIELD_CONSTANTS.attributes.REQUIRED
-        ];
-    }
     connectedCallback() {
         if (this._requiredElementsPresent()) {
             this._foundation.connect();

package/esm/radio/radio.js

@@ -17,16 +17,16 @@ const styles = '.mdc-radio{padding:10px;display:inline-block;position:relative;-
  * @tag forge-radio
  */
 let RadioComponent = class RadioComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new RadioFoundation(new RadioAdapter(this));
-    }
     static get observedAttributes() {
         return [
             RADIO_CONSTANTS.attributes.DENSE
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new RadioFoundation(new RadioAdapter(this));
+    }
     connectedCallback() {
         this._ensureRadioInputElement().then(() => this._foundation.connect());
     }

package/esm/ripple/forge-ripple.d.ts

@@ -7,6 +7,8 @@ import { MDCRipple, type MDCRippleAdapter, MDCRippleFoundation, type MDCRippleCa
 export declare class ForgeRipple extends MDCRipple {
     /** Manually trigger focus activation. */
     handleFocus(): void;
+    /** Manually trigger focus deactivation. */
+    handleBlur(): void;
     /** Executes the ripple animation. */
     animate(): void;
 }