@tylertech/forge 2.13.2 → 2.14.0-dev.0

package/esm/app-bar/notification-button/app-bar-notification-button-foundation.js

@@ -11,6 +11,7 @@ export class AppBarNotificationButtonFoundation {
         this._dot = false;
         this._showBadge = false;
         this._isInitialized = false;
+        this._icon = 'notifications';
     }
     initialize() {
         this._adapter.initialize();
@@ -18,11 +19,24 @@ export class AppBarNotificationButtonFoundation {
         this._adapter.setBadgeType(this._dot);
         this._adapter.setBadgeTheme(this._theme);
         this._adapter.setBadgeVisible(this._showBadge);
+        this._adapter.setIcon(this._icon);
         this._isInitialized = true;
     }
     disconnect() {
         this._isInitialized = false;
     }
+    get icon() {
+        return this._icon;
+    }
+    set icon(value) {
+        if (this._icon !== value) {
+            this._icon = value;
+            if (this._isInitialized) {
+                this._adapter.setIcon(this._icon);
+                this._adapter.setHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.ICON, this._icon);
+            }
+        }
+    }
     get count() {
         return this._count;
     }

package/esm/app-bar/notification-button/app-bar-notification-button.d.ts

@@ -14,6 +14,7 @@ export interface IAppBarNotificationButtonComponent extends IBaseComponent {
     dot: boolean;
     showBadge: boolean;
     theme: string;
+    icon: string;
 }
 /**
  * The web component class behind the `<forge-app-bar-notification-button>` custom element.
@@ -30,5 +31,6 @@ export declare class AppBarNotificationButtonComponent extends BaseComponent imp
     count: number;
     dot: boolean;
     theme: string;
+    icon: string;
     showBadge: boolean;
 }

package/esm/app-bar/notification-button/app-bar-notification-button.js

@@ -14,7 +14,7 @@ import { TooltipComponent } from '../../tooltip';
 import { AppBarNotificationButtonAdapter } from './app-bar-notification-button-adapter';
 import { APP_BAR_NOTIFICATION_BUTTON_CONSTANTS } from './app-bar-notification-button-constants';
 import { AppBarNotificationButtonFoundation } from './app-bar-notification-button-foundation';
-const template = '<template><forge-icon-button class=\"forge-icon-button--with-badge\"><button type=\"button\" aria-label=\"Show notifications\"><forge-icon name=\"notifications\"></forge-icon></button><forge-tooltip delay=\"500\" position=\"bottom\">Notifications</forge-tooltip><forge-badge positioned app-bar-context></forge-badge></forge-icon-button></template>';
+const template = '<template><forge-icon-button class=\"forge-icon-button--with-badge\"><button type=\"button\" aria-label=\"Show notifications\"><forge-icon></forge-icon></button><forge-tooltip delay=\"500\" position=\"bottom\">Notifications</forge-tooltip><forge-badge positioned app-bar-context></forge-badge></forge-icon-button></template>';
 /**
  * The web component class behind the `<forge-app-bar-notification-button>` custom element.
  *
@@ -31,7 +31,8 @@ let AppBarNotificationButtonComponent = class AppBarNotificationButtonComponent
             APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.COUNT,
             APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.DOT,
             APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.THEME,
-            APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.SHOW_BADGE
+            APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.SHOW_BADGE,
+            APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.ICON
         ];
     }
     initializedCallback() {
@@ -51,6 +52,9 @@ let AppBarNotificationButtonComponent = class AppBarNotificationButtonComponent
             case APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.THEME:
                 this.theme = newValue;
                 break;
+            case APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.ICON:
+                this.icon = newValue;
+                break;
             case APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.SHOW_BADGE:
                 this.showBadge = coerceBoolean(newValue);
                 break;
@@ -66,6 +70,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], AppBarNotificationButtonComponent.prototype, "theme", void 0);
+__decorate([
+    FoundationProperty()
+], AppBarNotificationButtonComponent.prototype, "icon", void 0);
 __decorate([
     FoundationProperty()
 ], AppBarNotificationButtonComponent.prototype, "showBadge", void 0);

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

@@ -4,22 +4,21 @@
  * License: Apache-2.0
  */
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
-import { IOption } from '../select';
 import { IAutocompleteComponent } from './autocomplete';
-import { IAutocompleteOptionGroup } from './autocomplete-constants';
+import { IAutocompleteOption, IAutocompleteOptionGroup } from './autocomplete-constants';
 import { IListDropdownConfig } from '../list-dropdown';
 export interface IAutocompleteAdapter extends IBaseAdapter {
     setInputElement(): HTMLInputElement;
     setInputAttribute(name: string, value: string): void;
     addInputListener(type: string, listener: (evt: Event) => void): void;
     removeInputListener(type: string, listener: (evt: Event) => void): void;
-    intializeInputAccessibility(identifier: string): void;
+    initializeInputAccessibility(identifier: string): void;
     isWrappingChipField(): boolean;
     show(config: IListDropdownConfig, popupTarget: string): void;
     hide(listener: () => void): void;
     focus(): void;
-    setOptions(options: IOption[] | IAutocompleteOptionGroup[]): void;
-    appendOptions(options: IOption[] | IAutocompleteOptionGroup[]): void;
+    setOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
+    appendOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
     setSelectedText(value: string): void;
     getInputValue(): string;
     selectInputValue(): void;
@@ -42,7 +41,7 @@ export interface IAutocompleteAdapter extends IBaseAdapter {
     setBusyVisibility(busy: boolean): void;
     getActiveOptionIndex(): number | null;
     clearActiveOption(): void;
-    setSelectedOptions(options: IOption[]): void;
+    setSelectedOptions(options: IAutocompleteOption[]): void;
     queueDropdownPositionUpdate(): void;
 }
 /**
@@ -57,7 +56,7 @@ export declare class AutocompleteAdapter extends BaseAdapter<IAutocompleteCompon
     setInputAttribute(name: string, value: string): void;
     addInputListener(type: string, listener: (evt: Event) => void): void;
     removeInputListener(type: string, listener: (evt: Event) => void): void;
-    intializeInputAccessibility(identifier: string): void;
+    initializeInputAccessibility(identifier: string): void;
     isWrappingChipField(): boolean;
     show(config: IListDropdownConfig, popupTarget: string): void;
     hide(listener: () => void): void;
@@ -65,8 +64,8 @@ export declare class AutocompleteAdapter extends BaseAdapter<IAutocompleteCompon
     toggleOptionMultiple(index: number, selected: boolean): void;
     setDismissListener(listener: () => void): void;
     focus(): void;
-    setOptions(options: IOption[] | IAutocompleteOptionGroup[]): void;
-    appendOptions(options: IOption[] | IAutocompleteOptionGroup[]): void;
+    setOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
+    appendOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
     setSelectedText(value: string): void;
     getInputValue(): string;
     selectInputValue(): void;
@@ -86,7 +85,7 @@ export declare class AutocompleteAdapter extends BaseAdapter<IAutocompleteCompon
     activateOptionByIndex(value: number): void;
     getActiveOptionIndex(): number | null;
     clearActiveOption(): void;
-    setSelectedOptions(options: IOption[]): void;
+    setSelectedOptions(options: IAutocompleteOption[]): void;
     queueDropdownPositionUpdate(): void;
     private _getTargetElement;
     private _getDefaultTargetElement;

package/esm/autocomplete/autocomplete-adapter.js

@@ -34,7 +34,7 @@ export class AutocompleteAdapter extends BaseAdapter {
     removeInputListener(type, listener) {
         this._inputElement.removeEventListener(type, listener);
     }
-    intializeInputAccessibility(identifier) {
+    initializeInputAccessibility(identifier) {
         this._inputElement.setAttribute('autocomplete', 'off');
         this._inputElement.setAttribute('role', 'combobox');
         this._inputElement.setAttribute('aria-live', 'polite');

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

@@ -3,9 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IOption } from '../select';
 import { IListItemComponent } from '../list';
-import { IListDropdownConfig } from '../list-dropdown';
+import { IListDropdownConfig, IListDropdownOption, IListDropdownOptionGroup, ListDropdownOptionGroupBuilder } from '../list-dropdown';
 import { IPopupPosition } from '../popup';
 export declare const AUTOCOMPLETE_CONSTANTS: {
     elementName: "forge-autocomplete";
@@ -40,18 +39,17 @@ export declare const AUTOCOMPLETE_CONSTANTS: {
         SCROLLED_BOTTOM: string;
     };
 };
-export declare type AutocompleteOptionBuilder<T = any> = (option: IOption<T>, filterText: string, parentElement: IListItemComponent) => HTMLElement;
-export declare type AutocompleteOptionGroupBuilder<T = any> = (option: IAutocompleteOptionGroup<T>) => HTMLElement;
-export declare type AutocompleteFilterCallback<T = any> = (filterText: string, value: T | null) => Array<IOption<T>> | IAutocompleteOptionGroup[] | Promise<Array<IOption<T>> | IAutocompleteOptionGroup[]>;
-export declare type AutocompleteSelectedTextBuilder<T = any> = (selectedOptions: Array<IOption<T>>) => string;
+export declare type AutocompleteOptionBuilder<T = any> = (option: IAutocompleteOption<T>, filterText: string, parentElement: IListItemComponent) => HTMLElement;
+export declare type AutocompleteOptionGroupBuilder<T = any> = ListDropdownOptionGroupBuilder<T>;
+export declare type AutocompleteFilterCallback<T = any> = (filterText: string, value: T | null) => IAutocompleteOption<T>[] | IAutocompleteOptionGroup<T>[] | Promise<IAutocompleteOption<T>[] | IAutocompleteOptionGroup<T>[]>;
+export declare type AutocompleteSelectedTextBuilder<T = any> = (selectedOptions: Array<IAutocompleteOption<T>>) => string;
 export declare enum AutocompleteMode {
     Default = "default",
     Stateless = "stateless"
 }
-export interface IAutocompleteOptionGroup<T = any> {
-    text?: string;
-    builder?: AutocompleteOptionGroupBuilder;
-    options: Array<IOption<T>>;
+export interface IAutocompleteOption<T = any> extends IListDropdownOption<T> {
+}
+export interface IAutocompleteOptionGroup<T = any> extends IListDropdownOptionGroup<T> {
 }
 export interface IAutocompletePopupConfiguration {
     filterText: string;
@@ -63,6 +61,6 @@ export interface IAutocompletePopupConfiguration {
     listener: (value: string) => void;
     scrollEndListener: () => void;
 }
-export interface IAutocompleteSelectEventData {
-    value: any;
+export interface IAutocompleteSelectEventData<T = any> {
+    value: T;
 }

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

@@ -5,13 +5,12 @@
  */
 import { ListDropdownFooterBuilder, ListDropdownHeaderBuilder } from '../list-dropdown';
 import { IListDropdownAwareFoundation, ListDropdownAwareFoundation } from '../list-dropdown/list-dropdown-aware-foundation';
-import { IOption } from '../select';
 import { IAutocompleteAdapter } from './autocomplete-adapter';
-import { AutocompleteFilterCallback, AutocompleteMode, AutocompleteOptionBuilder, AutocompleteSelectedTextBuilder, IAutocompleteOptionGroup } from './autocomplete-constants';
+import { AutocompleteFilterCallback, AutocompleteMode, AutocompleteOptionBuilder, AutocompleteSelectedTextBuilder, IAutocompleteOption, IAutocompleteOptionGroup } from './autocomplete-constants';
 export interface IAutocompleteFoundation extends IListDropdownAwareFoundation {
     mode: AutocompleteMode;
     multiple: boolean;
-    value: string | string[] | IOption | IOption[] | null | undefined;
+    value: string | string[] | IAutocompleteOption | IAutocompleteOption[] | null | undefined;
     debounce: number;
     filterOnFocus: boolean;
     allowUnmatched: boolean;
@@ -22,7 +21,7 @@ export interface IAutocompleteFoundation extends IListDropdownAwareFoundation {
     isInitialized: boolean;
     open: boolean;
     matchKey: string | null | undefined;
-    appendOptions(options: IOption[] | IAutocompleteOptionGroup[]): void;
+    appendOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
     beforeValueChange: (value: any) => boolean | Promise<boolean>;
 }
 /**
@@ -122,8 +121,8 @@ export declare class AutocompleteFoundation extends ListDropdownAwareFoundation
     get multiple(): boolean;
     set multiple(value: boolean);
     /** Gets/sets the value of the component. */
-    get value(): string | string[] | IOption | IOption[] | null | undefined;
-    set value(value: string | string[] | IOption | IOption[] | null | undefined);
+    get value(): string | string[] | IAutocompleteOption | IAutocompleteOption[] | null | undefined;
+    set value(value: string | string[] | IAutocompleteOption | IAutocompleteOption[] | null | undefined);
     /** Gets/sets filter on focus settings which controls whether the dropdown displays automatically when focused. */
     get filterOnFocus(): boolean;
     set filterOnFocus(value: boolean);
@@ -165,7 +164,7 @@ export declare class AutocompleteFoundation extends ListDropdownAwareFoundation
     set observeScroll(value: boolean);
     get observeScrollThreshold(): number;
     set observeScrollThreshold(value: number);
-    appendOptions(options: IOption[] | IAutocompleteOptionGroup[]): void;
+    appendOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
     get isInitialized(): boolean;
     get open(): boolean;
     set open(value: boolean);

package/esm/autocomplete/autocomplete-foundation.js

@@ -100,7 +100,7 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
         this._filterFn = isDefined(this._debounce) && this._debounce > 0 ? debounce(this._debounceFilter, this._debounce, false) : this._debounceFilter;
     }
     _initializeAccessibility() {
-        this._adapter.intializeInputAccessibility(this._identifier);
+        this._adapter.initializeInputAccessibility(this._identifier);
     }
     get _flatOptions() {
         if (isOptionType(this._options, OptionType.Group)) {
@@ -230,6 +230,7 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
             case 'Escape':
                 if (this._isDropdownOpen) {
                     evt.preventDefault();
+                    evt.stopPropagation();
                     this._closeDropdown();
                 }
                 break;
@@ -437,7 +438,9 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
             const result = this._adapter.emitHostEvent(AUTOCOMPLETE_CONSTANTS.events.SELECT, data, true, true);
             if (result) {
                 this._filterText = '';
-                this._closeDropdown();
+                if (!this._multiple) {
+                    this._closeDropdown();
+                }
             }
             return;
         }

package/esm/autocomplete/autocomplete-utils.d.ts

@@ -3,8 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IOption } from '../select';
-import { IAutocompleteOptionGroup } from './autocomplete-constants';
+import { IAutocompleteOption, IAutocompleteOptionGroup } from './autocomplete-constants';
 /** The available option types. */
 export declare enum OptionType {
     Option = 0,
@@ -15,8 +14,8 @@ export declare enum OptionType {
  * @param options The options either grouped or individual.
  * @param type The type of option to detect.
  */
-export declare function isOptionType(options: IOption[] | IAutocompleteOptionGroup[], type: OptionType): boolean;
+export declare function isOptionType(options: IAutocompleteOption[] | IAutocompleteOptionGroup[], type: OptionType): boolean;
 /** A utility function to find the matching option in the provided options by the value provided. */
-export declare function getSelectedOption(options: IOption[], value: string): IOption | undefined;
+export declare function getSelectedOption(options: IAutocompleteOption[], value: string): IAutocompleteOption | undefined;
 /** A predicate function that will determine if an option value is equal regardless of primitive type or complex object type. */
-export declare function optionEqualPredicate(option: IOption, value: any, property?: string | null): boolean;
+export declare function optionEqualPredicate(option: IAutocompleteOption, value: any, property?: string | null): boolean;

package/esm/autocomplete/autocomplete.d.ts

@@ -4,8 +4,7 @@
  * License: Apache-2.0
  */
 import { IListDropdownAware, ListDropdownAware } from '../list-dropdown/list-dropdown-aware';
-import { IOption } from '../select';
-import { AutocompleteFilterCallback, AutocompleteMode, AutocompleteOptionBuilder, AutocompleteSelectedTextBuilder, IAutocompleteOptionGroup, IAutocompleteSelectEventData } from './autocomplete-constants';
+import { AutocompleteFilterCallback, AutocompleteMode, AutocompleteOptionBuilder, AutocompleteSelectedTextBuilder, IAutocompleteOption, IAutocompleteOptionGroup, IAutocompleteSelectEventData } from './autocomplete-constants';
 export interface IAutocompleteComponent extends IListDropdownAware {
     mode: `${AutocompleteMode}`;
     multiple: boolean;
@@ -22,7 +21,7 @@ export interface IAutocompleteComponent extends IListDropdownAware {
     beforeValueChange: (value: any) => boolean | Promise<boolean>;
     isInitialized: boolean;
     open: boolean;
-    appendOptions(options: IOption[] | IAutocompleteOptionGroup[]): void;
+    appendOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
     openDropdown(): void;
     closeDropdown(): void;
 }
@@ -79,7 +78,7 @@ export declare class AutocompleteComponent extends ListDropdownAware implements
     /** Sets the callback to be executed when the user selects an option, before the UI is updated to allow for validation. */
     beforeValueChange: (value: any) => boolean | Promise<boolean>;
     /** Adds options to the dropdown while it is open. Has no effect if the dropdown is closed.  */
-    appendOptions(options: IOption[] | IAutocompleteOptionGroup[]): void;
+    appendOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
     /** Opens the dropdown. */
     openDropdown(): void;
     /** Closes the dropdown. */

package/esm/autocomplete/autocomplete.js

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, coerceNumber, CustomElement, ensureChild, FoundationProperty } from '@tylertech/forge-core';
-import { tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-icons/standard';
+import { tylIconArrowDropDown, tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-icons/standard';
 import { DividerComponent } from '../divider';
 import { IconComponent, IconRegistry } from '../icon';
 import { LinearProgressComponent } from '../linear-progress';
@@ -27,7 +27,7 @@ const styles = ':host{display:block}:host([hidden]){display:none}';
 let AutocompleteComponent = class AutocompleteComponent extends ListDropdownAware {
     constructor() {
         super();
-        IconRegistry.define([tylIconCheckBox, tylIconCheckBoxOutlineBlank]);
+        IconRegistry.define([tylIconArrowDropDown, tylIconCheckBox, tylIconCheckBoxOutlineBlank]);
         attachShadowTemplate(this, template, styles);
         this._foundation = new AutocompleteFoundation(new AutocompleteAdapter(this));
     }

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

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+export declare const ALLOWED_CHILDREN: string[];
 export declare const BUTTON_CONSTANTS: {
     elementName: "forge-button";
     classes: {

package/esm/button/button-constants.js

@@ -5,6 +5,7 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}button`;
+export const ALLOWED_CHILDREN = ['button', 'a'];
 const classes = {
     BUTTON: 'forge-button',
     LABEL: 'forge-button__label',
@@ -16,7 +17,7 @@ const classes = {
     RIPPLE: 'forge-button__ripple'
 };
 const selectors = {
-    BUTTON: 'button',
+    BUTTON: ALLOWED_CHILDREN.join(','),
     LABEL: `span:not(.${classes.RIPPLE})`,
     ICON: 'i,forge-icon,[data-forge-button-icon]',
     RIPPLE: `.${classes.RIPPLE}`

package/esm/button/button.d.ts

@@ -39,7 +39,7 @@ export declare class ButtonComponent extends BaseComponent implements IButtonCom
     private _initialize;
     private _initializeButton;
     private _deferRippleInitialization;
-    private _initRipple;
+    private _createRipple;
     private _initializeButtonChildren;
     private _initializeMutationObserver;
     private _buttonWasAdded;

package/esm/button/button.js

@@ -6,7 +6,7 @@
 import { __decorate } from "tslib";
 import { CustomElement, ensureChildren, toggleAttribute } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
-import { BUTTON_CONSTANTS } from './button-constants';
+import { ALLOWED_CHILDREN, BUTTON_CONSTANTS } from './button-constants';
 import { userInteractionListener } from '../core/utils/utils';
 import { ForgeRipple } from '../ripple';
 /**
@@ -104,18 +104,17 @@ let ButtonComponent = class ButtonComponent extends BaseComponent {
     async _deferRippleInitialization() {
         const type = await userInteractionListener(this._buttonElement);
         if (!this._rippleInstance) {
-            this._initRipple();
+            this._rippleInstance = this._createRipple();
             if (type === 'focusin') {
-                // eslint-disable-next-line @typescript-eslint/dot-notation
-                this._rippleInstance['foundation'].handleFocus();
+                this._rippleInstance.handleFocus();
             }
         }
     }
-    _initRipple() {
+    _createRipple() {
         if (this._rippleInstance) {
             this._rippleInstance.destroy();
         }
-        this._rippleInstance = new ForgeRipple(this._buttonElement);
+        return new ForgeRipple(this._buttonElement);
     }
     _initializeButtonChildren() {
         if (!this._buttonElement.querySelector(BUTTON_CONSTANTS.selectors.RIPPLE)) {
@@ -162,7 +161,7 @@ let ButtonComponent = class ButtonComponent extends BaseComponent {
     _buttonWasAdded(mutationList) {
         return mutationList.some(mutation => {
             return Array.from(mutation.addedNodes)
-                .some(node => node.nodeName.toLowerCase() === BUTTON_CONSTANTS.selectors.BUTTON);
+                .some(node => ALLOWED_CHILDREN.includes(node.nodeName.toLowerCase()));
         });
     }
     _syncDisabledState() {

package/esm/calendar/calendar-foundation.js

@@ -230,6 +230,7 @@ export class CalendarFoundation {
             case 'Escape':
                 if (this._view !== 'date') {
                     evt.preventDefault();
+                    evt.stopPropagation();
                     this._closeMenu(false, true);
                 }
                 break;

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

@@ -7,7 +7,6 @@ import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 import { ForgeRippleCapableSurface } from '../ripple';
 import { ICheckboxComponent } from './checkbox';
 export interface ICheckboxAdapter extends IBaseAdapter {
-    forceLayout(): void;
     isAttachedToDOM(): boolean;
     isDisabled(): boolean;
     isChecked(): boolean;
@@ -41,8 +40,8 @@ export declare class CheckboxAdapter extends BaseAdapter<ICheckboxComponent> imp
     get unbounded(): boolean | undefined;
     get disabled(): boolean | undefined;
     initialize(): void;
+    private _deferRippleInitialization;
     setDense(value: boolean | undefined): void;
-    forceLayout(): void;
     isAttachedToDOM(): boolean;
     private _configureElements;
     private _setHostAttribute;

package/esm/checkbox/checkbox-adapter.js

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { addClass, getShadowElement, removeClass } from '@tylertech/forge-core';
+import { userInteractionListener } from '../core';
 import { BaseAdapter } from '../core/base/base-adapter';
 import { ForgeRipple, ForgeRippleFoundation } from '../ripple';
 import { CHECKBOX_CONSTANTS } from './checkbox-constants';
@@ -24,14 +25,19 @@ export class CheckboxAdapter extends BaseAdapter {
     initialize() {
         this._configureElements();
         this._attachInternalInputListeners();
-        this._rippleInstance = this._createRipple();
-        requestAnimationFrame(() => {
-            if (this._rippleInstance) {
-                this._rippleInstance.layout();
+        this._deferRippleInitialization();
+    }
+    async _deferRippleInitialization() {
+        const type = await userInteractionListener(this._rootElement);
+        if (!this._rippleInstance) {
+            this._rippleInstance = this._createRipple();
+            if (type === 'focusin') {
+                this._rippleInstance.handleFocus();
             }
-        });
+        }
     }
     setDense(value) {
+        var _a;
         if (value) {
             this._setHostAttribute(CHECKBOX_CONSTANTS.attributes.DENSE);
             this.setRootClass(CHECKBOX_CONSTANTS.classes.CHECKBOX_DENSE);
@@ -40,9 +46,7 @@ export class CheckboxAdapter extends BaseAdapter {
             this._removeHostAttribute(CHECKBOX_CONSTANTS.attributes.DENSE);
             this.removeRootClass(CHECKBOX_CONSTANTS.classes.CHECKBOX_DENSE);
         }
-    }
-    forceLayout() {
-        this._rippleInstance.layout();
+        (_a = this._rippleInstance) === null || _a === void 0 ? void 0 : _a.layout();
     }
     isAttachedToDOM() {
         return Boolean(this._component.parentNode);

package/esm/checkbox/checkbox-foundation.js

@@ -109,14 +109,12 @@ export class CheckboxFoundation {
         // the user interacted with the checkbox before the animation was finished.
         if (this._currentAnimationClass.length > 0) {
             clearTimeout(this._animEndLatchTimer);
-            this._adapter.forceLayout();
             this._adapter.removeRootClass(this._currentAnimationClass);
         }
         // Check to ensure that there isn't a previously existing animation class, in case for example
         // the user interacted with the checkbox before the animation was finished.
         if (this._currentAnimationClass.length > 0) {
             clearTimeout(this._animEndLatchTimer);
-            this._adapter.forceLayout();
             this._adapter.removeRootClass(this._currentAnimationClass);
         }
         this._currentAnimationClass = this._getTransitionAnimationClass(oldState, newState);
@@ -127,7 +125,6 @@ export class CheckboxFoundation {
             this._adapter.setRootClass(this._currentAnimationClass);
             this._enableAnimationEndHandler = true;
         }
-        this._adapter.forceLayout();
     }
     _handleInputAttributeChange() {
         if (this._adapter.isDisabled()) {

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

@@ -14,6 +14,7 @@ export interface IChipFieldAdapter extends IFieldAdapter {
     removeInputContainerListener(type: string, callback: (event: Event) => void): void;
     getSlottedMemberElements(): NodeListOf<HTMLElement>;
     focusInput(): void;
+    tryPropagateClick(target: EventTarget | null): void;
 }
 export declare class ChipFieldAdapter extends FieldAdapter implements IChipFieldAdapter {
     protected _memberSlot: HTMLSlotElement;
@@ -28,5 +29,6 @@ export declare class ChipFieldAdapter extends FieldAdapter implements IChipField
     removeInputContainerListener(type: string, callback: (event: Event) => void): void;
     fieldHasValue(): boolean;
     focusInput(): void;
+    tryPropagateClick(target: EventTarget | null): void;
     getSlottedMemberElements(): NodeListOf<HTMLElement>;
 }

package/esm/chip-field/chip-field-adapter.js

@@ -40,10 +40,15 @@ export class ChipFieldAdapter extends FieldAdapter {
         return aMemberExists || super.inputHasValue();
     }
     focusInput() {
-        if (!this._inputElement) {
-            return;
+        var _a;
+        (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    tryPropagateClick(target) {
+        var _a;
+        // We only propagate the click to the input if it originated from our internal input container
+        if (target instanceof HTMLElement && target.matches(CHIP_FIELD_CONSTANTS.selectors.INPUT_CONTAINER)) {
+            (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new MouseEvent('click'));
         }
-        this._inputElement.focus();
     }
     getSlottedMemberElements() {
         return this._component.querySelectorAll(CHIP_FIELD_CONSTANTS.selectors.MEMBER);

package/esm/chip-field/chip-field-foundation.js

@@ -32,6 +32,7 @@ export class ChipFieldFoundation extends FieldFoundation {
     _onInputContainerMouseDown(evt) {
         evt.preventDefault();
         this._adapter.focusInput();
+        this._adapter.tryPropagateClick(evt.target);
     }
     _onBlur(event) {
         const input = event.target;