@tylertech/forge 2.13.0-next.0 → 2.13.1

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

@@ -36,6 +36,7 @@ export declare class DateRangePickerFoundation extends BaseDatePickerFoundation<
     private _formatToInputValue;
     protected _setFormattedInputValue(suppressValueChanges?: boolean): void;
     private _setFormattedToInputValue;
+    protected _isDateRangeAcceptable(value?: DateRange | null | undefined): boolean;
     protected _setValue(value: Date | null | undefined): void;
     private _setToValue;
     protected _onDateSelected(event: ICalendarDateSelectEventData): void;

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

@@ -77,7 +77,10 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
     }
     _onToday() {
         const today = new Date();
-        const range = new DateRange({ from: today });
+        const range = this._open ? new DateRange({ from: this._from || today, to: this._to || undefined }) : new DateRange({ from: today });
+        if (!this._isDateRangeAcceptable(range)) {
+            return;
+        }
         this.value = range;
         this._onDateSelected({ date: today, range, selected: true, type: 'date' });
         this._adapter.setCalendarActiveDate(today);
@@ -120,6 +123,15 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
         }
         this._adapter.setToInputValue(formattedDate, suppressValueChanges ? false : this._notifyInputValueChanges);
     }
+    _isDateRangeAcceptable(value) {
+        if (!(value === null || value === void 0 ? void 0 : value.to)) {
+            return true;
+        }
+        const passesMinDate = () => this._isDateValueAcceptable(value.from);
+        const passesMaxDate = () => this._isDateValueAcceptable(value.to);
+        const passesDateRange = () => (value === null || value === void 0 ? void 0 : value.from) && (value === null || value === void 0 ? void 0 : value.to) ? value.from.getTime() <= value.to.getTime() : true;
+        return passesMinDate() && passesMaxDate() && passesDateRange();
+    }
     _setValue(value) {
         if (this._isDateValueAcceptable(value)) {
             this._from = value || null;

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

@@ -10,7 +10,7 @@ export interface IDialogAdapter extends IBaseAdapter {
     initializeAccessibility(): void;
     setAnimating(animating: boolean): void;
     setVisibility(visible: boolean): void;
-    attach(parent?: HTMLElement): void;
+    attach(): void;
     detach(): void;
     setDocumentListener(type: string, listener: (evt: Event) => void): void;
     removeDocumentListener(type: string, listener: (evt: Event) => void): void;
@@ -31,7 +31,7 @@ export interface IDialogAdapter extends IBaseAdapter {
     setMoveTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
     removeDragTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
     getSurfaceBounds(): DOMRect;
-    setSurfacePosition(x: string | null, y: string | null, positionType: DialogPositionType | null): void;
+    setSurfacePosition(x: string | null, y: string | null, positionType: DialogPositionType): void;
     captureActiveElement(): void;
     tryRestoreActiveElement(): void;
 }
@@ -39,7 +39,7 @@ export interface IDialogAdapter extends IBaseAdapter {
  * Provides facilities for interacting with the internal DOM of `DialogComponent`.
  */
 export declare class DialogAdapter extends BaseAdapter<IDialogComponent> implements IDialogAdapter {
-    private _backdropElement?;
+    private _backdropElement;
     private _containerElement;
     private _surfaceElement;
     private _moveTargetElement;
@@ -48,7 +48,7 @@ export declare class DialogAdapter extends BaseAdapter<IDialogComponent> impleme
     initializeAccessibility(): void;
     setAnimating(animating: boolean): void;
     setVisibility(visible: boolean): void;
-    attach(parent?: HTMLElement): void;
+    attach(): void;
     detach(): void;
     registerTransitionEndHandler(handler: (evt: TransitionEvent) => void): void;
     deregisterTransitionEndHandler(handler: (evt: TransitionEvent) => void): void;
@@ -69,7 +69,7 @@ export declare class DialogAdapter extends BaseAdapter<IDialogComponent> impleme
     setMoveTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
     removeDragTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
     getSurfaceBounds(): DOMRect;
-    setSurfacePosition(x: string | null, y: string | null, positionType: DialogPositionType | null): void;
+    setSurfacePosition(x: string | null, y: string | null, positionType: DialogPositionType): void;
     captureActiveElement(): void;
     tryRestoreActiveElement(): void;
 }

package/esm/dialog/dialog-adapter.js

@@ -17,6 +17,7 @@ import { DIALOG_CONSTANTS } from './dialog-constants';
 export class DialogAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
+        this._backdropElement = getShadowElement(component, DIALOG_CONSTANTS.selectors.BACKDROP);
         this._containerElement = getShadowElement(component, DIALOG_CONSTANTS.selectors.CONTAINER);
         this._surfaceElement = getShadowElement(component, DIALOG_CONSTANTS.selectors.SURFACE);
     }
@@ -27,24 +28,23 @@ export class DialogAdapter extends BaseAdapter {
         this._component.setAttribute('aria-modal', 'true');
     }
     setAnimating(animating) {
-        toggleClass(this._containerElement, animating, DIALOG_CONSTANTS.classes.ANIMATING);
+        if (animating) {
+            this._containerElement.classList.add(DIALOG_CONSTANTS.classes.ANIMATING);
+        }
+        else {
+            this._containerElement.classList.remove(DIALOG_CONSTANTS.classes.ANIMATING);
+        }
     }
     setVisibility(visible) {
-        toggleClass(this._containerElement, visible, DIALOG_CONSTANTS.classes.OPEN);
-        if (!this._backdropElement) {
-            this._backdropElement = document.createElement('forge-backdrop');
-            this._backdropElement.setAttribute('part', 'scrim');
-            this._containerElement.appendChild(this._backdropElement);
-        }
         if (visible) {
-            this._backdropElement.fadeIn();
+            this._containerElement.classList.add(DIALOG_CONSTANTS.classes.OPEN);
         }
         else {
-            this._backdropElement.fadeOut();
+            this._containerElement.classList.remove(DIALOG_CONSTANTS.classes.OPEN);
         }
     }
-    attach(parent = document.body) {
-        parent.appendChild(this._component);
+    attach() {
+        document.body.appendChild(this._component);
     }
     detach() {
         if (this._activeElement) {
@@ -65,12 +65,10 @@ export class DialogAdapter extends BaseAdapter {
         document.removeEventListener(type, listener);
     }
     registerBackdropClickHandler(handler) {
-        var _a;
-        (_a = this._backdropElement) === null || _a === void 0 ? void 0 : _a.addEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, handler);
+        this._backdropElement.addEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, handler);
     }
     deregisterBackdropClickHandler(handler) {
-        var _a;
-        (_a = this._backdropElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, handler);
+        this._backdropElement.removeEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, handler);
     }
     getOpenDialogs(selector) {
         return document.querySelectorAll(selector);
@@ -99,7 +97,12 @@ export class DialogAdapter extends BaseAdapter {
         this._component.classList.add(name);
     }
     setFullscreen(value) {
-        toggleClass(this._containerElement, value, DIALOG_CONSTANTS.classes.FULLSCREEN);
+        if (value) {
+            this._containerElement.classList.add(DIALOG_CONSTANTS.classes.FULLSCREEN);
+        }
+        else {
+            this._containerElement.classList.remove(DIALOG_CONSTANTS.classes.FULLSCREEN);
+        }
     }
     setMoveable(value) {
         toggleClass(this._containerElement, value, DIALOG_CONSTANTS.classes.MOVEABLE);
@@ -117,30 +120,27 @@ export class DialogAdapter extends BaseAdapter {
         return !!this._moveTargetElement;
     }
     setMoveTargetHandler(type, listener) {
-        var _a;
-        (_a = this._moveTargetElement) === null || _a === void 0 ? void 0 : _a.addEventListener(type, listener);
+        if (this._moveTargetElement) {
+            this._moveTargetElement.addEventListener(type, listener);
+        }
     }
     removeDragTargetHandler(type, listener) {
-        var _a;
-        (_a = this._moveTargetElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(type, listener);
+        if (this._moveTargetElement) {
+            this._moveTargetElement.removeEventListener(type, listener);
+        }
     }
     getSurfaceBounds() {
         return this._surfaceElement.getBoundingClientRect();
     }
     setSurfacePosition(x, y, positionType) {
-        if (positionType) {
-            this._surfaceElement.style.position = positionType === 'absolute' ? positionType : 'relative';
-        }
-        else {
-            this._surfaceElement.style.removeProperty('position');
-        }
-        if (y !== null) {
+        this._surfaceElement.style.position = positionType === 'absolute' ? positionType : 'relative';
+        if (y != null) {
             this._surfaceElement.style.top = y;
         }
         else {
             this._surfaceElement.style.removeProperty('top');
         }
-        if (x !== null) {
+        if (x != null) {
             this._surfaceElement.style.left = x;
         }
         else {
@@ -148,9 +148,10 @@ export class DialogAdapter extends BaseAdapter {
         }
     }
     captureActiveElement() {
-        var _a;
         this._activeElement = getActiveElement();
-        (_a = this._activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+        if (this._activeElement) {
+            this._activeElement.blur();
+        }
     }
     tryRestoreActiveElement() {
         if (this._activeElement) {

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

@@ -21,8 +21,6 @@ export interface IDialogFoundation extends ICustomElementFoundation {
     moveTarget: string;
     initializeMoveTarget(): void;
     resetPosition(): void;
-    show(parent?: HTMLElement): Promise<void>;
-    hide(remove?: boolean): Promise<void>;
 }
 export declare class DialogFoundation implements IDialogFoundation {
     _adapter: IDialogAdapter;
@@ -48,6 +46,8 @@ export declare class DialogFoundation implements IDialogFoundation {
     private _moveTargetMouseDownHandler;
     private _moveTargetMouseMoveHandler;
     private _moveTargetMouseUpHandler;
+    private _attachedDocumentKeydownHandler;
+    private _attachedBackdropClickHandler;
     constructor(_adapter: IDialogAdapter);
     initialize(): void;
     destroy(): void;
@@ -56,8 +56,6 @@ export declare class DialogFoundation implements IDialogFoundation {
     private _executeCloseCallback;
     initializeMoveTarget(): void;
     resetPosition(): void;
-    show(parent?: HTMLElement): Promise<void>;
-    hide(remove?: boolean): Promise<void>;
     private _normalizePositionValue;
     private _openDialog;
     private _closeDialog;

package/esm/dialog/dialog-foundation.js

@@ -20,6 +20,9 @@ export class DialogFoundation {
         this._moveTarget = DIALOG_CONSTANTS.selectors.DFEAULT_MOVE_TARGET;
         this._isAnimating = false;
         this._isMoving = false;
+        // Event handler states
+        this._attachedDocumentKeydownHandler = false;
+        this._attachedBackdropClickHandler = false;
         this._transitionEndHandler = (evt) => this._onTransitionEnd();
         this._documentKeydownHandler = (evt) => this._onDocumentKeydown(evt);
         this._backdropClickHandler = (evt) => this._onBackdropClick(evt);
@@ -40,8 +43,12 @@ export class DialogFoundation {
         if (this._open) {
             this._removeDragHandlers();
             this._adapter.deregisterTransitionEndHandler(this._transitionEndHandler);
-            this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
-            this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
+            if (this._attachedDocumentKeydownHandler) {
+                this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
+            }
+            if (this._attachedBackdropClickHandler) {
+                this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
+            }
         }
     }
     async _applyOpen(value) {
@@ -86,26 +93,6 @@ export class DialogFoundation {
     resetPosition() {
         this._adapter.setSurfacePosition(this._positionX, this._positionY, this._positionType);
     }
-    async show(parent) {
-        if (this._open) {
-            return;
-        }
-        this._open = true;
-        if (!this._adapter.isConnected) {
-            this._adapter.attach(parent);
-        }
-        await this._openDialog();
-    }
-    async hide(remove) {
-        if (!this._open) {
-            return;
-        }
-        this._open = false;
-        await this._closeDialog();
-        if (remove) {
-            this._adapter.detach();
-        }
-    }
     _normalizePositionValue(value) {
         if (isNumber(value)) {
             return `${value}px`;
@@ -116,24 +103,25 @@ export class DialogFoundation {
         return null;
     }
     _openDialog() {
+        this._adapter.attach();
         if (!this._fullscreen) {
             if (this._moveable) {
                 this._adapter.setMoveable(this._moveable);
             }
-            if (this._positionX !== null || this._positionY !== null) {
+            if (this._positionX != null || this._positionY != null) {
                 this._adapter.setSurfacePosition(this._positionX, this._positionY, this._positionType);
             }
         }
         this._adapter.setBodyAttribute(DIALOG_CONSTANTS.attributes.OPEN, 'true');
         this._adapter.registerTransitionEndHandler(this._transitionEndHandler);
         this._setDocumentKeydownListener(this._escapeClose);
+        this._setBackdropClickListener(this._backdropClose);
         this._adapter.setAnimating(true);
         this._isAnimating = true;
         // Ensure transitions are triggered properly
         window.requestAnimationFrame(() => {
             window.requestAnimationFrame(() => {
                 this._adapter.setVisibility(true);
-                this._setBackdropClickListener(this._backdropClose); // Must come after setting visibility because the backdrop may not yet exist
                 this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.OPEN);
                 this._adapter.trySetInitialFocus();
                 if (this._adapter.isScrollable()) {
@@ -141,46 +129,37 @@ export class DialogFoundation {
                 }
             });
         });
-        return new Promise(resolve => {
-            // Wait for the dialog to finish animating open, then emit the ready event and attach any listeners
-            window.setTimeout(() => {
-                window.requestAnimationFrame(() => {
-                    if (this._open && this._isAnimating) {
-                        this._onTransitionEnd();
-                        resolve();
-                    }
-                });
-            }, DIALOG_CONSTANTS.numbers.ANIMATION_DURATION);
-        });
+        // Wait for the dialog to finish animating open, then emit the ready event and attach any listeners
+        setTimeout(() => {
+            window.requestAnimationFrame(() => {
+                if (this._open && this._isAnimating) {
+                    this._onTransitionEnd();
+                }
+            });
+        }, DIALOG_CONSTANTS.numbers.ANIMATION_DURATION);
     }
     _closeDialog() {
         if (this._moveTarget) {
             this._removeDragHandlers();
         }
         this._adapter.deregisterTransitionEndHandler(this._transitionEndHandler);
-        if (this._escapeClose) {
+        if (this._attachedDocumentKeydownHandler) {
             this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
         }
-        if (this._backdropClose) {
+        if (this._attachedBackdropClickHandler) {
             this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
         }
         this._isAnimating = false;
-        this._moveContext = undefined;
-        this._lastPosition = undefined;
         this._adapter.setAnimating(true);
         this._adapter.setVisibility(false);
-        this._adapter.setSurfacePosition(null, null, null);
-        return new Promise(resolve => {
-            setTimeout(() => {
-                this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.CLOSE);
-                const openDialogs = this._adapter.getOpenDialogs(`${DIALOG_CONSTANTS.elementName}[${DIALOG_CONSTANTS.attributes.OPEN}]`);
-                if (!openDialogs.length) {
-                    this._adapter.removeBodyAttribute(DIALOG_CONSTANTS.attributes.OPEN);
-                }
-                this._adapter.setAnimating(false);
-                resolve();
-            }, DIALOG_CONSTANTS.numbers.ANIMATION_DURATION);
-        });
+        setTimeout(() => {
+            this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.CLOSE);
+            this._adapter.detach();
+            const openDialogs = this._adapter.getOpenDialogs(DIALOG_CONSTANTS.elementName);
+            if (!openDialogs.length) {
+                this._adapter.removeBodyAttribute(DIALOG_CONSTANTS.attributes.OPEN);
+            }
+        }, DIALOG_CONSTANTS.numbers.ANIMATION_DURATION);
     }
     _onTransitionEnd() {
         if (!this._isAnimating) {
@@ -291,22 +270,26 @@ export class DialogFoundation {
         if (!this._open) {
             return;
         }
-        if (attach && this._backdropClose) {
+        if (attach && !this._attachedBackdropClickHandler) {
             this._adapter.registerBackdropClickHandler(this._backdropClickHandler);
+            this._attachedBackdropClickHandler = true;
         }
-        else if (!attach) {
+        else if (!attach && this._attachedBackdropClickHandler) {
             this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
+            this._attachedBackdropClickHandler = false;
         }
     }
     _setDocumentKeydownListener(attach) {
         if (!this._open) {
             return;
         }
-        if (attach && this._escapeClose) {
+        if (attach && !this._attachedDocumentKeydownHandler) {
             this._adapter.setDocumentListener('keydown', this._documentKeydownHandler);
+            this._attachedDocumentKeydownHandler = true;
         }
-        else if (!attach) {
+        else if (!attach && this._attachedDocumentKeydownHandler) {
             this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
+            this._attachedDocumentKeydownHandler = false;
         }
     }
     _calculateOffsetPosition(pageX, pageY, context) {

package/esm/dialog/dialog.d.ts

@@ -20,8 +20,6 @@ export interface IDialogComponent extends IBaseComponent {
     moveTarget: string;
     initializeMoveTarget(): void;
     resetPosition(): void;
-    show(parent?: HTMLElement): Promise<void>;
-    hide(remove?: boolean): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -75,6 +73,4 @@ export declare class DialogComponent extends BaseComponent implements IDialogCom
     moveTarget: string;
     initializeMoveTarget(): void;
     resetPosition(): void;
-    show(parent?: HTMLElement): Promise<void>;
-    hide(remove?: boolean): Promise<void>;
 }

package/esm/dialog/dialog.js

@@ -10,7 +10,7 @@ import { DialogAdapter } from './dialog-adapter';
 import { DIALOG_CONSTANTS } from './dialog-constants';
 import { BackdropComponent } from '../backdrop';
 import { BaseComponent } from '../core/base/base-component';
-const template = '<template><div class=\"forge-dialog\" part=\"root\"><div class=\"forge-dialog__surface\" part=\"surface\"><slot></slot></div></div></template>';
+const template = '<template><div class=\"forge-dialog\" part=\"root\"><forge-backdrop part=\"scrim\"></forge-backdrop><div class=\"forge-dialog__surface\" part=\"surface\"><slot></slot></div></div></template>';
 const styles = '.forge-dialog{position:fixed;top:0;bottom:0;left:0;right:0;z-index:8;z-index:var(--forge-z-index-dialog,8);-webkit-box-align:center;align-items:center;-webkit-box-align:var(--forge-dialog-align-items,center);align-items:var(--forge-dialog-align-items,center);top:0;top:var(--forge-dialog-top,0);padding:24px;padding:var(--forge-dialog-padding,24px);display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;visibility:hidden}@media (max-width:599px){.forge-dialog{padding:0}}.forge-dialog--moveable:not(.forge-dialog--fullscreen) ::slotted([forge-dialog-move-target]){cursor:move}.forge-dialog--animating{visibility:visible}.forge-dialog--animating .forge-dialog--open .forge-dialog__surface{-webkit-transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1)}.forge-dialog--animating .forge-dialog__surface{-webkit-transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1)}.forge-dialog--scrollable .forge-dialog__footer,.forge-dialog--scrollable .forge-dialog__title{border-color:rgba(0,0,0,.12)}.forge-dialog--open{visibility:visible!important}.forge-dialog--open .forge-dialog__surface{-webkit-transform:scale(1);transform:scale(1);opacity:1}.forge-dialog__surface{-webkit-box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);width:auto;width:var(--forge-dialog-width,auto);height:auto;height:var(--forge-dialog-height,auto);min-width:280px;min-width:var(--forge-dialog-min-width,280px);max-width:100%;max-width:var(--forge-dialog-max-width,100%);max-height:100%;max-height:var(--forge-dialog-max-height,100%);border-radius:4px;border-radius:var(--forge-dialog-border-radius,var(--mdc-shape-medium,4px));display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:scale(.8);transform:scale(.8);opacity:0;overflow:hidden;z-index:inherit}.forge-dialog__header{margin:0;padding:0 24px 9px;border-bottom:1px solid transparent}.forge-dialog__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1.25rem;font-size:var(--forge-typography-title-font-size, 1.25rem);line-height:2rem;line-height:var(--forge-typography-title-line-height, 2rem);font-weight:400;font-weight:var(--forge-typography-title-font-weight,400);letter-spacing:.0125em;letter-spacing:var(--forge-typography-title-letter-spacing, .0125em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-title-text-decoration,inherit);text-decoration:var(--forge-typography-title-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-title-text-transform,inherit);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}.forge-dialog__title::before{display:inline-block;width:0;height:40px;content:\"\";vertical-align:0}.forge-dialog__body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-body1-font-size, 1rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);padding-top:20px;padding:0 24px 24px;overflow:auto}.forge-dialog__body--scrollable{max-height:195px;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);overflow-x:auto;overflow-y:scroll;-webkit-overflow-scrolling:touch}.forge-dialog__footer{display:-webkit-box;display:flex;position:relative;flex-shrink:0;flex-wrap:wrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:end;justify-content:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:52px;margin:0;padding:8px;border-top:1px solid transparent}.forge-dialog--fullscreen{padding:0}.forge-dialog--fullscreen .forge-dialog__surface{height:100%;width:100%;min-width:auto;max-width:100%;border-radius:0}:host{display:block}:host([hidden]){display:none}';
 /**
  * The web component class behind the `<forge-dialog>` custom element.
@@ -79,12 +79,6 @@ let DialogComponent = class DialogComponent extends BaseComponent {
     resetPosition() {
         this._foundation.resetPosition();
     }
-    show(parent) {
-        return this._foundation.show(parent);
-    }
-    hide(remove) {
-        return this._foundation.hide(remove);
-    }
 };
 __decorate([
     FoundationProperty()

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

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

package/esm/list/list-item/list-item-adapter.d.ts

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
+import { userInteractionListener } from '../../core/utils';
 import { IListItemComponent } from './list-item';
 export interface IListItemAdapter extends IBaseAdapter {
     initializeAccessibility(): void;
@@ -25,7 +26,8 @@ export interface IListItemAdapter extends IBaseAdapter {
     setDense(dense: boolean): void;
     setIndented(indented: boolean): void;
     setWrap(value: boolean): void;
-    trySelect(value: unknown): void;
+    trySelect(value: unknown): boolean | null;
+    userInteractionListener(): ReturnType<typeof userInteractionListener>;
 }
 export declare class ListItemAdapter extends BaseAdapter<IListItemComponent> implements IListItemAdapter {
     private _listItemElement;
@@ -97,5 +99,11 @@ export declare class ListItemAdapter extends BaseAdapter<IListItemComponent> imp
     setDense(dense: boolean): void;
     setIndented(indented: boolean): void;
     setWrap(value: boolean): void;
-    trySelect(value: unknown): void;
+    /**
+     * Attempts to set the selected state of the list item element and it's visual indicators
+     * @param value The value to compare to the parent list element's selected value
+     * @returns Returns whether the list item is selected or not
+     */
+    trySelect(value: unknown): boolean | null;
+    userInteractionListener(): ReturnType<typeof userInteractionListener>;
 }

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

@@ -5,6 +5,7 @@
  */
 import { addClass, getShadowElement, removeClass, requireParent, isDeepEqual, toggleClass } from '@tylertech/forge-core';
 import { BaseAdapter } from '../../core/base/base-adapter';
+import { userInteractionListener } from '../../core/utils';
 import { LIST_CONSTANTS } from '../list/list-constants';
 import { LIST_ITEM_CONSTANTS } from './list-item-constants';
 import { ForgeRipple } from '../../ripple';
@@ -162,14 +163,23 @@ export class ListItemAdapter extends BaseAdapter {
     setWrap(value) {
         toggleClass(this._listItemElement, value, LIST_ITEM_CONSTANTS.classes.WRAP);
     }
+    /**
+     * Attempts to set the selected state of the list item element and it's visual indicators
+     * @param value The value to compare to the parent list element's selected value
+     * @returns Returns whether the list item is selected or not
+     */
     trySelect(value) {
         const list = requireParent(this._component, LIST_CONSTANTS.elementName);
         if (!list || list.selectedValue === undefined) {
-            return;
+            return null;
         }
         const listValues = list.selectedValue instanceof Array ? list.selectedValue : [list.selectedValue];
-        if (listValues.some(v => isDeepEqual(v, value))) {
-            this.setSelected(true);
-        }
+        const isSelected = listValues.some(v => isDeepEqual(v, value));
+        this.setSelected(isSelected);
+        this.tryToggleCheckboxRadio(isSelected);
+        return isSelected;
+    }
+    userInteractionListener() {
+        return userInteractionListener(this._listItemElement);
     }
 }

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

@@ -45,7 +45,10 @@ export class ListItemFoundation {
         else if (this.twoLine) {
             this._adapter.setTwoLine(this._twoLine);
         }
-        this._adapter.trySelect(this._value);
+        const isSelected = this._adapter.trySelect(this._value);
+        if (isSelected != null) {
+            this._selected = isSelected;
+        }
     }
     disconnect() {
         if (this._rippleInstance) {
@@ -210,7 +213,10 @@ export class ListItemFoundation {
     }
     set value(value) {
         this._value = value;
-        this._adapter.trySelect(this._value);
+        const isSelected = this._adapter.trySelect(this._value);
+        if (isSelected != null) {
+            this._selected = isSelected;
+        }
     }
     /** Gets/sets the href link that this list item will send the browser to when clicked. */
     get href() {
@@ -287,9 +293,16 @@ export class ListItemFoundation {
             this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.WRAP, this._wrap);
         }
     }
-    _setRipple() {
+    async _setRipple() {
         if (this._ripple && !this._static && !this._rippleInstance) {
-            this._rippleInstance = this._adapter.createRipple();
+            const type = await this._adapter.userInteractionListener();
+            if (this._ripple && !this._static && !this._rippleInstance) { // need to re-check after await
+                this._rippleInstance = this._adapter.createRipple();
+                if (type === 'focusin') {
+                    // eslint-disable-next-line @typescript-eslint/dot-notation
+                    this._rippleInstance['foundation'].handleFocus();
+                }
+            }
         }
         else if ((!this._ripple || this._static) && this._rippleInstance) {
             this._rippleInstance.destroy();

package/esm/list/list-item/list-item.d.ts

@@ -39,7 +39,7 @@ export declare class ListItemComponent extends BaseComponent implements IListIte
     static get observedAttributes(): string[];
     private _foundation;
     constructor();
-    initializedCallback(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     private _inheritParentListProps;

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

@@ -41,7 +41,7 @@ let ListItemComponent = class ListItemComponent extends BaseComponent {
             LIST_ITEM_CONSTANTS.attributes.WRAP
         ];
     }
-    initializedCallback() {
+    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
         // any of the parents of this element are a drawer.

package/esm/select/core/base-select-adapter.js

@@ -102,9 +102,19 @@ export class BaseSelectAdapter extends BaseAdapter {
         (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.setSelectedValues(selectedValues);
     }
     setOptionsListener(listener) {
+        // Watch for option value property changes
+        const optionValueChangeListener = evt => {
+            evt.stopPropagation();
+            listener(this.getOptions());
+        };
+        this._component.addEventListener(OPTION_CONSTANTS.events.VALUE_CHANGE, optionValueChangeListener);
+        // Watch for DOM changes
         const observer = new MutationObserver(() => listener(this.getOptions()));
         observer.observe(this._component, { childList: true, subtree: true });
-        return () => observer.disconnect();
+        return () => {
+            this._component.removeEventListener(OPTION_CONSTANTS.events.VALUE_CHANGE, optionValueChangeListener);
+            observer.disconnect();
+        };
     }
     setOptions(options, clear = true) {
         if (clear) {