@tylertech/forge 2.13.2 → 2.14.0-dev.0

package/esm/menu/menu-foundation.js

@@ -16,6 +16,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         });
         this._adapter = _adapter;
         this._placement = 'bottom-start';
+        this._fallbackPlacements = [];
         this._dense = false;
         this._iconClass = ICON_CLASS_NAME;
         this._persistSelection = false;
@@ -38,6 +39,9 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         }
         this._destroyInteractionListeners();
     }
+    activateFirstOption() {
+        this._adapter.activateFirstOption();
+    }
     _applyMode() {
         if (!this._adapter.hasTargetElement()) {
             return;
@@ -55,14 +59,14 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         }
         this._applyMode();
         this._adapter.addTargetListener('keydown', this._keydownListener, true);
-        this._adapter.addTargetListener('blur', this._blurListener);
+        this._adapter.addTargetListener('focusout', this._blurListener);
     }
     _destroyInteractionListeners() {
         if (!this._adapter.hasTargetElement()) {
             return;
         }
         this._adapter.removeTargetListener('keydown', this._clickListener);
-        this._adapter.removeTargetListener('blur', this._blurListener);
+        this._adapter.removeTargetListener('focusout', this._blurListener);
         this._adapter.removeTargetListener('click', this._clickListener);
         this._detachCascadingListeners();
     }
@@ -113,13 +117,6 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
     onKeydown(evt) {
         // If we have any child menus open, we need to proxy the keyboard events to those and exit
         if (this._childOpen) {
-            // If escape is pressed while other menus are open then we need to close everything
-            if (evt.code === 'Escape') {
-                evt.preventDefault();
-                this._adapter.closeOtherChildMenus();
-                this._closeDropdown();
-                return;
-            }
             this._adapter.proxyKeyboardEventToChild(evt, this._identifier);
             return;
         }
@@ -132,6 +129,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
             case 'Escape':
                 if (this._open) {
                     evt.preventDefault();
+                    evt.stopPropagation();
                     this._closeDropdown();
                 }
                 break;
@@ -141,7 +139,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
                     this._closeDropdown();
                 }
                 else {
-                    this._openDropdown();
+                    this._openDropdown({ fromKeyboard: true });
                 }
                 break;
             case 'Home':
@@ -152,11 +150,13 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
                 }
                 break;
             case 'Enter':
+                evt.preventDefault();
                 if (!this._open) {
+                    evt.preventDefault();
+                    this._openDropdown({ fromKeyboard: true });
                     return;
                 }
                 evt.stopImmediatePropagation();
-                evt.preventDefault();
                 this._adapter.propagateKey(evt.code);
                 // Check if we need to toggle the child menu open state
                 const activeIndex = this._adapter.getActiveOptionIndex();
@@ -172,7 +172,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
                 }
                 evt.preventDefault();
                 if (!this._open && evt.code === 'ArrowDown') {
-                    this._openDropdown();
+                    this._openDropdown({ fromKeyboard: true });
                     this._adapter.activateFirstOption();
                     return;
                 }
@@ -202,7 +202,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
                 break;
         }
     }
-    async _openMenu() {
+    async _openMenu({ fromKeyboard } = {}) {
         this._open = true;
         let options = [];
         if (typeof this._optionsFactory === 'function') {
@@ -238,7 +238,8 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
             observeScroll: this._observeScroll,
             observeScrollThreshold: this._observeScrollThreshold,
             popupPlacement: this._placement,
-            activeStartIndex: this._mode === 'cascade' ? 0 : undefined,
+            popupFallbackPlacements: this._fallbackPlacements,
+            activeStartIndex: fromKeyboard ? 0 : undefined,
             popupClasses: [
                 MENU_CONSTANTS.classes.POPUP,
                 MENU_CONSTANTS.classes.MENU,
@@ -355,14 +356,17 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         this._adapter.setActiveOption(index);
     }
     /** Called when a child menu is closed off of one of our menu options. */
-    _onCascadingChildClose() {
+    _onCascadingChildClose(index) {
         this._childOpen = false;
     }
     _closeDropdown() {
         this._closeMenu();
     }
-    _openDropdown() {
-        this._openMenu();
+    _openDropdown({ fromKeyboard } = {}) {
+        this._openMenu({ fromKeyboard });
+    }
+    _setCascadeTargetInactive() {
+        this._adapter.setCascadeTargetInactive();
     }
     _isOwnElement(element) {
         return this._adapter.isOwnElement(element);
@@ -373,6 +377,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         menu.popupOffset = { x: 0, y: -8 };
         menu.dense = this._dense;
         menu.placement = 'right-start';
+        menu.fallbackPlacements = ['left-start', 'right-start']; // Cascading menus should only fallback to left or right placement if needed
         menu.persistSelection = this._persistSelection;
         if (this._persistSelection) {
             menu.selectedValue = this._selectedValue;
@@ -462,6 +467,12 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
             this._adapter.setHostAttribute(MENU_CONSTANTS.attributes.PLACEMENT, this._placement);
         }
     }
+    get fallbackPlacements() {
+        return this._fallbackPlacements;
+    }
+    set fallbackPlacements(value) {
+        this._fallbackPlacements = Array.isArray(value) ? value : [];
+    }
     get dense() {
         return this._dense;
     }

package/esm/menu/menu.d.ts

@@ -12,6 +12,7 @@ export interface IMenuComponent extends IListDropdownAware {
     selectedIndex: number;
     selectedValue: number;
     placement: PopupPlacement;
+    fallbackPlacements: PopupPlacement[];
     dense: boolean;
     iconClass: string;
     persistSelection: boolean;
@@ -20,6 +21,7 @@ export interface IMenuComponent extends IListDropdownAware {
     optionBuilder: MenuOptionBuilder | undefined;
     popupElement: HTMLElement | undefined;
     propagateKeyEvent(evt: KeyboardEvent): void;
+    activateFirstOption(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -54,6 +56,8 @@ export declare class MenuComponent extends ListDropdownAware implements IMenuCom
     selectedValue: any;
     /** Gets/sets the menu placement (default is bottom-left). */
     placement: `${PopupPlacement}`;
+    /** Gets/sets the fallback menu placement for overriding the default of any side. */
+    fallbackPlacements: `${PopupPlacement}`[];
     /** Gets/sets dense state of the list options used in the menu popup. */
     dense: boolean;
     /** Gets/sets the class name to use for option icons. */
@@ -65,7 +69,7 @@ export declare class MenuComponent extends ListDropdownAware implements IMenuCom
     persistSelection: boolean;
     /** Gets/sets the mode that this menu is using. */
     mode: MenuMode;
-    /** Sets the position adustment on the internal popup element. */
+    /** Sets the position adjustment on the internal popup element. */
     popupOffset: IPopupPosition;
     /** Sets the callback that will be executed for each option in the dropdown for producing custom option templates. */
     optionBuilder: MenuOptionBuilder;
@@ -73,4 +77,5 @@ export declare class MenuComponent extends ListDropdownAware implements IMenuCom
     popupElement: HTMLElement | undefined;
     /** Force propagates the key event from another element this component. */
     propagateKeyEvent(evt: KeyboardEvent): void;
+    activateFirstOption(): void;
 }

package/esm/menu/menu.js

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { attachShadowTemplate, coerceBoolean, CustomElement, ensureChildren, FoundationProperty, isDefined } from '@tylertech/forge-core';
+import { attachShadowTemplate, coerceBoolean, CustomElement, ensureChild, FoundationProperty, isDefined } from '@tylertech/forge-core';
 import { tylIconArrowRight } from '@tylertech/tyler-icons/standard';
 import { CircularProgressComponent } from '../circular-progress';
 import { IconRegistry } from '../icon';
@@ -47,11 +47,11 @@ let MenuComponent = class MenuComponent extends ListDropdownAware {
         ];
     }
     connectedCallback() {
-        if (this.children.length) {
+        if (this.querySelector(MENU_CONSTANTS.selectors.TOGGLE)) {
             this._foundation.initialize();
         }
         else {
-            ensureChildren(this).then(() => this._foundation.initialize());
+            ensureChild(this, MENU_CONSTANTS.selectors.TOGGLE).then(() => this._foundation.initialize());
         }
     }
     attributeChangedCallback(name, oldValue, newValue) {
@@ -90,6 +90,9 @@ let MenuComponent = class MenuComponent extends ListDropdownAware {
     propagateKeyEvent(evt) {
         this._foundation.onKeydown(evt);
     }
+    activateFirstOption() {
+        this._foundation.activateFirstOption();
+    }
 };
 __decorate([
     FoundationProperty()
@@ -106,6 +109,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], MenuComponent.prototype, "placement", void 0);
+__decorate([
+    FoundationProperty()
+], MenuComponent.prototype, "fallbackPlacements", void 0);
 __decorate([
     FoundationProperty()
 ], MenuComponent.prototype, "dense", void 0);

package/esm/popup/popup-adapter.js

@@ -32,8 +32,16 @@ export class PopupAdapter extends BaseAdapter {
             element: this._component,
             targetElement: this._component.targetElement,
             placement: this._component.placement,
-            hide: this._component.hideWhenClipped
+            hide: this._component.hideWhenClipped,
+            flipOptions: {
+                fallbackPlacements: ['top-start', 'top', 'top-end', 'left-start', 'left', 'left-end', 'right-start', 'right', 'right-end'],
+                fallbackStrategy: 'initialPlacement'
+            }
         };
+        const fallbackPlacements = this._component.fallbackPlacements;
+        if (fallbackPlacements === null || fallbackPlacements === void 0 ? void 0 : fallbackPlacements.length) {
+            config.flipOptions = Object.assign(Object.assign({}, config.flipOptions), { fallbackPlacements });
+        }
         if (this._component.offset) {
             config.offset = this._component.offset;
         }

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

@@ -27,6 +27,7 @@ export declare const POPUP_CONSTANTS: {
         HIDE_WHEN_CLIPPED: string;
         HOST: string;
         INITIAL_FOCUS: string;
+        CONSTRAIN_VIEWPORT_WIDTH: string;
     };
     events: {
         OPEN: string;

package/esm/popup/popup-constants.js

@@ -14,7 +14,8 @@ const attributes = {
     STATIC: 'static',
     HIDE_WHEN_CLIPPED: 'hide-when-clipped',
     HOST: 'forge-popup-host',
-    INITIAL_FOCUS: 'forge-popup-focus'
+    INITIAL_FOCUS: 'forge-popup-focus',
+    CONSTRAIN_VIEWPORT_WIDTH: 'constrain-viewport-width'
 };
 const classes = {
     OPEN: 'forge-popup--open',

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

@@ -9,6 +9,7 @@ import { IPopupPosition, PopupAnimationType, PopupPlacement, PopupStateCallback
 export interface IPopupFoundation extends ICustomElementFoundation {
     targetElement: HTMLElement;
     placement: PopupPlacement;
+    fallbackPlacements: PopupPlacement[];
     open: boolean;
     manageFocus: boolean;
     animationType: PopupAnimationType;
@@ -23,6 +24,7 @@ export declare class PopupFoundation implements IPopupFoundation {
     private _adapter;
     private _targetElement;
     private _placement;
+    private _fallbackPlacements;
     private _open;
     private _manageFocus;
     private _animationType;
@@ -48,6 +50,8 @@ export declare class PopupFoundation implements IPopupFoundation {
     set targetElement(element: HTMLElement);
     get placement(): PopupPlacement;
     set placement(value: PopupPlacement);
+    get fallbackPlacements(): PopupPlacement[];
+    set fallbackPlacements(value: PopupPlacement[]);
     get open(): boolean;
     set open(value: boolean);
     get manageFocus(): boolean;

package/esm/popup/popup-foundation.js

@@ -9,6 +9,7 @@ export class PopupFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
         this._placement = 'bottom-start';
+        this._fallbackPlacements = [];
         this._open = false;
         this._manageFocus = false;
         this._animationType = PopupAnimationType.None;
@@ -166,6 +167,12 @@ export class PopupFoundation {
             this._adapter.setAttribute(POPUP_CONSTANTS.attributes.PLACEMENT, this._placement);
         }
     }
+    get fallbackPlacements() {
+        return this._fallbackPlacements;
+    }
+    set fallbackPlacements(value) {
+        this._fallbackPlacements = Array.isArray(value) ? value : [];
+    }
     get open() {
         return this._open;
     }

package/esm/popup/popup.d.ts

@@ -8,6 +8,7 @@ import { IPopupPosition, IPopupPositionEventData, PopupAnimationType, PopupPlace
 export interface IPopupComponent extends IBaseComponent {
     targetElement: HTMLElement;
     placement: PopupPlacement;
+    fallbackPlacements: PopupPlacement[];
     open: boolean;
     manageFocus: boolean;
     animationType: `${PopupAnimationType}`;
@@ -42,6 +43,7 @@ export declare class PopupComponent extends BaseComponent implements IPopupCompo
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     targetElement: HTMLElement;
     placement: `${PopupPlacement}`;
+    fallbackPlacements: `${PopupPlacement}`[];
     open: boolean;
     manageFocus: boolean;
     animationType: `${PopupAnimationType}`;

package/esm/popup/popup.js

@@ -10,7 +10,7 @@ import { PopupAdapter } from './popup-adapter';
 import { POPUP_CONSTANTS } from './popup-constants';
 import { PopupFoundation } from './popup-foundation';
 const template = '<template><div class=\"forge-popup\" part=\"root\"><slot></slot></div></template>';
-const styles = '.forge-popup{min-width:112px;min-width:var(--min-width,112px);background-color:#fff;background-color:var(--forge-theme-elevated-surface,#fff);-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-webkit-box-shadow:var(--forge-theme-popup-elevation,0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12));box-shadow:var(--forge-theme-popup-elevation,0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12));color:#000;color:var(--mdc-theme-on-surface,#000);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);display:none;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:100%;margin:0;padding:0;-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 24px 0;transform-origin:50% 24px 0;opacity:0;will-change:transform,opacity;-webkit-transition:opacity 120ms linear,-webkit-transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,-webkit-transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,transform 120ms cubic-bezier(0, 0, .2, 1),-webkit-transform 120ms cubic-bezier(0, 0, .2, 1)}.forge-popup::-webkit-scrollbar{width:16px;width:var(--forge-scrollbar-width,16px);height:16px;height:var(--forge-scrollbar-height,16px)}.forge-popup::-webkit-scrollbar-corner{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-popup::-webkit-scrollbar-track{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-popup::-webkit-scrollbar-track:hover{background-color:#ececec;background-color:var(--forge-theme-scrollbar-track-hover,#ececec)}.forge-popup::-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-popup::-webkit-scrollbar-thumb:hover{background-color:#9e9e9e;background-color:var(--forge-theme-scrollbar-thumb-hover,#9e9e9e)}.forge-popup--opening{display:block;-webkit-transform:scale(.8);transform:scale(.8);opacity:0}.forge-popup--closed{display:block;opacity:0;-webkit-transition:opacity 120ms linear;transition:opacity 120ms linear}.forge-popup--open{display:block;-webkit-transform:scale(1);transform:scale(1);opacity:1}.forge-popup--select{border-top-left-radius:0;border-top-right-radius:0;max-height:256px;overflow-y:auto}:host{z-index:10;z-index:var(--forge-z-index-popup,10);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;position:absolute;overflow:visible}:host([hidden]){display:none}';
+const styles = '.forge-popup{min-width:112px;min-width:var(--min-width,112px);background-color:#fff;background-color:var(--forge-theme-elevated-surface,#fff);-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-webkit-box-shadow:var(--forge-theme-popup-elevation,0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12));box-shadow:var(--forge-theme-popup-elevation,0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12));color:#000;color:var(--mdc-theme-on-surface,#000);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);display:none;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:100%;margin:0;padding:0;-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 24px 0;transform-origin:50% 24px 0;opacity:0;will-change:transform,opacity;-webkit-transition:opacity 120ms linear,-webkit-transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,-webkit-transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,transform 120ms cubic-bezier(0, 0, .2, 1),-webkit-transform 120ms cubic-bezier(0, 0, .2, 1)}.forge-popup::-webkit-scrollbar{width:16px;width:var(--forge-scrollbar-width,16px);height:16px;height:var(--forge-scrollbar-height,16px)}.forge-popup::-webkit-scrollbar-corner{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-popup::-webkit-scrollbar-track{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-popup::-webkit-scrollbar-track:hover{background-color:#ececec;background-color:var(--forge-theme-scrollbar-track-hover,#ececec)}.forge-popup::-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-popup::-webkit-scrollbar-thumb:hover{background-color:#9e9e9e;background-color:var(--forge-theme-scrollbar-thumb-hover,#9e9e9e)}.forge-popup--opening{display:block;-webkit-transform:scale(.8);transform:scale(.8);opacity:0}.forge-popup--closed{display:block;opacity:0;-webkit-transition:opacity 120ms linear;transition:opacity 120ms linear}.forge-popup--open{display:block;-webkit-transform:scale(1);transform:scale(1);opacity:1}.forge-popup--select{border-top-left-radius:0;border-top-right-radius:0;max-height:256px;overflow-y:auto}:host{z-index:10;z-index:var(--forge-z-index-popup,10);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;position:absolute;overflow:visible}:host([hidden]){display:none}:host([constrain-viewport-width]){max-width:100vw}';
 /**
  * The web component class behind the `<forge-popup>` custom element.
  *
@@ -67,6 +67,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], PopupComponent.prototype, "placement", void 0);
+__decorate([
+    FoundationProperty()
+], PopupComponent.prototype, "fallbackPlacements", void 0);
 __decorate([
     FoundationProperty()
 ], PopupComponent.prototype, "open", void 0);

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

@@ -6,6 +6,7 @@
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 import { IQuantityFieldComponent } from './quantity-field';
 export interface IQuantityFieldAdapter extends IBaseAdapter {
+    initializeButtons(): void;
     addRootClass(name: string): void;
     removeRootClass(name: string): void;
     inputHasAttribute(name: string): boolean;
@@ -38,6 +39,7 @@ export declare class QuantityFieldAdapter extends BaseAdapter<IQuantityFieldComp
     private _inputElement;
     private _inputAttributeMutationObserver;
     constructor(component: IQuantityFieldComponent);
+    initializeButtons(): void;
     addRootClass(name: string): void;
     removeRootClass(name: string): void;
     inputHasAttribute(name: string): boolean;

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

@@ -13,6 +13,14 @@ export class QuantityFieldAdapter extends BaseAdapter {
         this._incrementButtonSlot = getShadowElement(this._component, QUANTITY_FIELD_CONSTANTS.selectors.INCREMENT_BUTTON_SLOT);
         this._decrementButtonSlot = getShadowElement(this._component, QUANTITY_FIELD_CONSTANTS.selectors.DECREMENT_BUTTON_SLOT);
     }
+    initializeButtons() {
+        if (this._incrementButton && !this._incrementButton.hasAttribute('tabindex')) {
+            this._incrementButton.tabIndex = -1;
+        }
+        if (this._decrementButton && !this._decrementButton.hasAttribute('tabindex')) {
+            this._decrementButton.tabIndex = -1;
+        }
+    }
     addRootClass(name) {
         this._rootElement.classList.add(name);
     }

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

@@ -17,6 +17,7 @@ export class QuantityFieldFoundation {
     connect() {
         this._adapter.addInputDisabledAttributeChangeListener(() => this._syncDisabledStateOfButtons());
         this._syncDisabledStateOfButtons();
+        this._adapter.initializeButtons();
     }
     disconnect() {
         this._removeIncrementEventListener();

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

@@ -5,6 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { CustomElement, attachShadowTemplate, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { tylIconRemoveCircleOutline, tylIconControlPoint } from '@tylertech/tyler-icons/standard';
 import { QuantityFieldAdapter } from './quantity-field-adapter';
 import { QuantityFieldFoundation } from './quantity-field-foundation';
 import { QUANTITY_FIELD_CONSTANTS } from './quantity-field-constants';
@@ -12,6 +13,7 @@ import { IconButtonComponent } from '../icon-button';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-quantity-field\" part=\"root\"><slot name=\"label\"></slot><div class=\"forge-quantity-field__row\" part=\"row\"><slot name=\"decrement-button\"></slot><slot></slot><slot name=\"increment-button\"></slot></div><slot name=\"helper-text\"></slot></div></template>';
 const styles = '.forge-quantity-field ::slotted([slot=label]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-quantity-field ::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));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);height:1rem;color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-quantity-field ::slotted([slot=helper-text])::before{display:inline-block;width:0;height:16px;content:\"\";vertical-align:0}.forge-quantity-field__row{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center}.forge-quantity-field ::slotted(forge-icon-button:first-of-type){color:var(--mdc-theme-text-secondary-on-light);margin-right:4px}.forge-quantity-field ::slotted(forge-icon-button:last-of-type){color:var(--mdc-theme-text-secondary-on-light);margin-left:4px}.forge-quantity-field ::slotted(forge-text-field){--forge-text-field-margin-top:0;--forge-text-field-margin-bottom:0}.forge-quantity-field--required ::slotted([slot=label])::before{color:#b00020;color:var(--mdc-theme-error,#b00020);content:\"*\";margin-right:4px}.forge-quantity-field--invalid ::slotted([slot=label]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-quantity-field--invalid ::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));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);height:1rem;color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-quantity-field--invalid ::slotted([slot=helper-text])::before{display:inline-block;width:0;height:16px;content:\"\";vertical-align:0}:host{display:inline-block}:host([hidden]){display:none}';
+import { IconRegistry } from '../icon';
 /**
  * The web component class behind the `<forge-quantity-field>` custom element.
  *
@@ -22,6 +24,10 @@ let QuantityFieldComponent = class QuantityFieldComponent extends BaseComponent
         super();
         attachShadowTemplate(this, template, styles);
         this._foundation = new QuantityFieldFoundation(new QuantityFieldAdapter(this));
+        IconRegistry.define([
+            tylIconRemoveCircleOutline,
+            tylIconControlPoint
+        ]);
     }
     static get observedAttributes() {
         return [

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

@@ -7,7 +7,7 @@ import { IRadioComponent } from './radio';
 import { ForgeRippleCapableSurface } from '../ripple';
 export interface IRadioAdapter {
     connect(): void;
-    initializeRipple(): void;
+    deferRippleInitialization(): Promise<void>;
     destroyRipple(): void;
     setHostAttribute(name: string, value?: string): void;
     removeHostAttribute(name: string): void;
@@ -28,7 +28,7 @@ export interface IRadioAdapter {
 }
 export declare class RadioAdapter implements IRadioAdapter, ForgeRippleCapableSurface {
     private _component;
-    private _shadowRoot;
+    private _rootElement;
     private _containerElement;
     private _nativeInputElement;
     private _inputAttributeMutationObserver?;
@@ -38,7 +38,7 @@ export declare class RadioAdapter implements IRadioAdapter, ForgeRippleCapableSu
     get unbounded(): boolean | undefined;
     get disabled(): boolean | undefined;
     connect(): void;
-    initializeRipple(): void;
+    deferRippleInitialization(): Promise<void>;
     destroyRipple(): void;
     setHostAttribute(name: string, value?: string): void;
     removeHostAttribute(name: string): void;

package/esm/radio/radio-adapter.js

@@ -6,15 +6,16 @@
 import { addClass, getShadowElement, removeClass, getActiveElement } from '@tylertech/forge-core';
 import { RADIO_CONSTANTS } from './radio-constants';
 import { ForgeRipple, ForgeRippleFoundation } from '../ripple';
+import { userInteractionListener } from '../core/utils';
 export class RadioAdapter {
     constructor(_component) {
         this._component = _component;
-        this._shadowRoot = getShadowElement(this._component, RADIO_CONSTANTS.selectors.RADIO);
+        this._rootElement = getShadowElement(this._component, RADIO_CONSTANTS.selectors.RADIO);
         this._containerElement = getShadowElement(this._component, RADIO_CONSTANTS.selectors.WRAPPER);
     }
     // ForgeRippleCapableSurface
     get root() {
-        return this._shadowRoot;
+        return this._rootElement;
     }
     get unbounded() {
         return true;
@@ -28,18 +29,19 @@ export class RadioAdapter {
             labelElement.setAttribute(RADIO_CONSTANTS.attributes.SLOT, RADIO_CONSTANTS.selectors.LABEL);
         }
     }
-    initializeRipple() {
-        this._rippleInstance = this._createRipple();
-        requestAnimationFrame(() => {
-            if (this._rippleInstance) {
-                this._rippleInstance.layout();
+    async deferRippleInitialization() {
+        const type = await userInteractionListener(this._rootElement);
+        if (!this._rippleInstance) {
+            this._rippleInstance = this._createRipple();
+            if (type === 'focusin') {
+                this._rippleInstance.handleFocus();
             }
-        });
+        }
     }
     destroyRipple() {
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
-        }
+        var _a;
+        (_a = this._rippleInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._rippleInstance = undefined;
     }
     setHostAttribute(name, value = '') {
         this._component.setAttribute(name, value);
@@ -48,10 +50,10 @@ export class RadioAdapter {
         this._component.removeAttribute(name);
     }
     addRootClass(className) {
-        this._shadowRoot.classList.add(className);
+        this._rootElement.classList.add(className);
     }
     removeRootClass(className) {
-        this._shadowRoot.classList.remove(className);
+        this._rootElement.classList.remove(className);
     }
     addContainerClass(className) {
         this._containerElement.classList.add(className);
@@ -244,7 +246,7 @@ export class RadioAdapter {
                 if (this._inputElement) {
                     this._inputElement.addEventListener(evtType, handler, { passive: true });
                 }
-            }, isSurfaceDisabled: () => this._inputElement ? this._inputElement.disabled : false, addClass: (className) => addClass(className, this._shadowRoot), removeClass: (className) => removeClass(className, this._shadowRoot), updateCssVariable: (varName, value) => this._shadowRoot.style.setProperty(varName, value) });
-        return new ForgeRipple(this._shadowRoot, new ForgeRippleFoundation(adapter));
+            }, isSurfaceDisabled: () => this._inputElement ? this._inputElement.disabled : false, addClass: (className) => addClass(className, this._rootElement), removeClass: (className) => removeClass(className, this._rootElement), updateCssVariable: (varName, value) => this._rootElement.style.setProperty(varName, value) });
+        return new ForgeRipple(this._rootElement, new ForgeRippleFoundation(adapter));
     }
 }

package/esm/radio/radio-foundation.js

@@ -11,7 +11,7 @@ export class RadioFoundation {
     }
     connect() {
         this._adapter.connect();
-        this._adapter.initializeRipple();
+        this._adapter.deferRippleInitialization();
         this._focusListenerCallback = () => this._adapter.syncFocusedStateWithInput();
         this._disabledListenerCallback = () => this._adapter.syncDisabledStateWithInput();
         this._syncRadiogroupCheckStyles = () => this._adapter.syncRadiogroupCheckStyles();

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

@@ -5,6 +5,7 @@
  */
 import { MDCRipple, type MDCRippleAdapter, MDCRippleFoundation, type MDCRippleCapableSurface } from '@material/ripple';
 export declare class ForgeRipple extends MDCRipple {
+    handleFocus(): void;
 }
 export declare class ForgeRippleFoundation extends MDCRippleFoundation {
 }

package/esm/ripple/forge-ripple.js

@@ -5,6 +5,9 @@
  */
 import { MDCRipple, MDCRippleFoundation } from '@material/ripple';
 export class ForgeRipple extends MDCRipple {
+    handleFocus() {
+        this.foundation.handleFocus();
+    }
 }
 export class ForgeRippleFoundation extends MDCRippleFoundation {
 }

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

@@ -11,5 +11,6 @@ export declare const RIPPLE_CONSTANTS: {
     attributes: {
         TARGET: string;
         UNBOUNDED: string;
+        SELECTED: string;
     };
 };

package/esm/ripple/ripple-constants.js

@@ -10,7 +10,8 @@ const classes = {
 };
 const attributes = {
     TARGET: 'target',
-    UNBOUNDED: 'unbounded'
+    UNBOUNDED: 'unbounded',
+    SELECTED: 'selected'
 };
 export const RIPPLE_CONSTANTS = {
     elementName,

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

@@ -8,6 +8,7 @@ import { IRippleAdapter } from './ripple-adapter';
 export interface IRippleFoundation extends ICustomElementFoundation {
     target: string;
     unbounded: boolean;
+    selected: boolean;
     layout(): void;
     activate(): void;
     deactivate(): void;
@@ -16,6 +17,7 @@ export declare class RippleFoundation implements IRippleFoundation {
     private _adapter;
     private _target;
     private _unbounded;
+    private _selected;
     constructor(_adapter: IRippleAdapter);
     initialize(): void;
     disconnect(): void;
@@ -27,4 +29,6 @@ export declare class RippleFoundation implements IRippleFoundation {
     set target(value: string);
     get unbounded(): boolean;
     set unbounded(value: boolean);
+    get selected(): boolean;
+    set selected(value: boolean);
 }

package/esm/ripple/ripple-foundation.js

@@ -7,6 +7,7 @@ export class RippleFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
         this._unbounded = false;
+        this._selected = false;
     }
     initialize() {
         this._adapter.initialize(this._target, this._unbounded);
@@ -45,4 +46,13 @@ export class RippleFoundation {
             this._applyTarget();
         }
     }
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        if (this._selected !== value) {
+            this._selected = value;
+            // this._applySelected();
+        }
+    }
 }

package/esm/ripple/ripple.d.ts

@@ -7,6 +7,7 @@ import { BaseComponent, IBaseComponent } from '../core/base/base-component';
 export interface IRippleComponent extends IBaseComponent {
     target: string;
     unbounded: boolean;
+    selected: boolean;
     layout(): void;
     activate(): void;
     deactivate(): void;
@@ -33,4 +34,5 @@ export declare class RippleComponent extends BaseComponent implements IRippleCom
     deactivate(): void;
     target: string;
     unbounded: boolean;
+    selected: boolean;
 }