@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

package/esm/backdrop/backdrop.js

@@ -4,81 +4,110 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { attachShadowTemplate, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { attachShadowTemplate, coerceBoolean, CustomElement, getShadowElement } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
-import { BackdropAdapter } from './backdrop-adapter';
 import { BACKDROP_CONSTANTS } from './backdrop-constants';
-import { BackdropFoundation } from './backdrop-foundation';
 const template = '<template><div class=\"forge-backdrop\" part=\"root\"></div></template>';
-const styles = '.forge-backdrop{z-index:7;z-index:var(--forge-z-index-backdrop,7);background-color:rgba(0,0,0,.54);background-color:var(--forge-backdrop-theme-background,rgba(0,0,0,.54));position:absolute;top:0;bottom:0;left:0;right:0;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-transition:opacity 150ms 0s cubic-bezier(0, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(0, 0, .2, 1);opacity:0}:host{display:block}:host([hidden]){display:none}:host([fixed]) .forge-backdrop{position:fixed}:host([appearance=light]){--forge-backdrop-theme-background:rgba(255, 255, 255, 0.54)}:host([appearance=dark]){--forge-backdrop-theme-background:rgba(0, 0, 0, 0.54)}';
+const styles = '@-webkit-keyframes enter{from{opacity:0}to{opacity:var(--_backdrop-opacity)}}@keyframes enter{from{opacity:0}to{opacity:var(--_backdrop-opacity)}}@-webkit-keyframes exit{from{opacity:var(--_backdrop-opacity)}to{opacity:0}}@keyframes exit{from{opacity:var(--_backdrop-opacity)}to{opacity:0}}:host{display:contents}:host([hidden]){display:-webkit-box;display:flex}.forge-backdrop{--_backdrop-background:var(--forge-backdrop-background, #000);--_backdrop-opacity:var(--forge-backdrop-opacity, 0.54);--_backdrop-z-index:var(--forge-backdrop-z-index, var(--forge-z-index-backdrop, 7));--_backdrop-enter-animation-duration:var(--forge-backdrop-enter-animation-duration, var(--forge-animation-duration-short4, 200ms));--_backdrop-enter-animation-easing:var(--forge-backdrop-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_backdrop-exit-animation-duration:var(--forge-backdrop-exit-animation-duration, var(--forge-animation-duration-short1, 50ms));--_backdrop-exit-animation-easing:var(--forge-backdrop-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-backdrop{position:absolute;inset:0;contain:content;z-index:var(--_backdrop-z-index);background:var(--_backdrop-background);opacity:0;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host([fixed]) .forge-backdrop{position:fixed}:host([visible]) .forge-backdrop{opacity:var(--_backdrop-opacity)}:host([visible]) .forge-backdrop.entering{-webkit-animation-name:enter;animation-name:enter;-webkit-animation-duration:var(--_backdrop-enter-animation-duration);animation-duration:var(--_backdrop-enter-animation-duration);-webkit-animation-timing-function:var(--_backdrop-enter-animation-easing);animation-timing-function:var(--_backdrop-enter-animation-easing)}:host([visible]) .forge-backdrop.exiting{-webkit-animation-name:exit;animation-name:exit;-webkit-animation-duration:var(--_backdrop-exit-animation-duration);animation-duration:var(--_backdrop-exit-animation-duration);-webkit-animation-timing-function:var(--_backdrop-exit-animation-easing);animation-timing-function:var(--_backdrop-exit-animation-easing)}';
 /**
- * A web component that renders a backdrop covering its parent container with a semi-opaque element.
- *
  * @tag forge-backdrop
  */
 let BackdropComponent = class BackdropComponent extends BaseComponent {
     static get observedAttributes() {
-        return [
-            BACKDROP_CONSTANTS.attributes.DELAY,
-            BACKDROP_CONSTANTS.attributes.MAX_OPACITY
-        ];
+        return Object.values(BACKDROP_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
+        this._visible = false;
+        this._fixed = false;
         attachShadowTemplate(this, template, styles);
-        this._foundation = new BackdropFoundation(new BackdropAdapter(this));
-    }
-    connectedCallback() {
-        if (this.hasAttribute(BACKDROP_CONSTANTS.attributes.DELAY) && this.getAttribute(BACKDROP_CONSTANTS.attributes.DELAY)) {
-            const inDelay = Number(this.getAttribute(BACKDROP_CONSTANTS.attributes.DELAY));
-            this.delay = inDelay >= 0 ? inDelay : BACKDROP_CONSTANTS.numbers.DELAY;
-        }
-        if (this.hasAttribute(BACKDROP_CONSTANTS.attributes.MAX_OPACITY)) {
-            const inMaxOpacity = Number(this.getAttribute(BACKDROP_CONSTANTS.attributes.MAX_OPACITY));
-            this.maxOpacity = inMaxOpacity >= 0 && inMaxOpacity <= 1 ? inMaxOpacity : BACKDROP_CONSTANTS.numbers.OPACITY;
-        }
-        this._foundation.initialize();
+        this._rootElement = getShadowElement(this, BACKDROP_CONSTANTS.selectors.ROOT);
     }
     disconnectedCallback() {
-        this._foundation.disconnect();
+        if (this._animationController) {
+            this._animationController.abort();
+            this._animationController = undefined;
+        }
+        this.classList.remove(BACKDROP_CONSTANTS.classes.ENTERING, BACKDROP_CONSTANTS.classes.EXITING);
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case BACKDROP_CONSTANTS.attributes.DELAY:
-                const delayValue = Number(newValue);
-                this.delay = delayValue >= 0 ? delayValue : BACKDROP_CONSTANTS.numbers.DELAY;
-                break;
-            case BACKDROP_CONSTANTS.attributes.MAX_OPACITY:
-                const opacityValue = Number(newValue);
-                this.maxOpacity = opacityValue >= 0 && opacityValue <= 1 ? opacityValue : BACKDROP_CONSTANTS.numbers.OPACITY;
+            case BACKDROP_CONSTANTS.attributes.VISIBLE:
+                this.visible = coerceBoolean(newValue);
                 break;
-            case BACKDROP_CONSTANTS.attributes.APPEARANCE:
-                this.appearance = newValue;
+            case BACKDROP_CONSTANTS.attributes.FIXED:
+                this.fixed = coerceBoolean(newValue);
                 break;
         }
     }
-    /**
-     * Starts the fade-out animation to animate the backdrop to 0% opacity.
-     */
-    fadeOut() {
-        return this._foundation.fadeOut();
+    async _applyVisibility(visible, { animate } = { animate: true }) {
+        if (this._visible === visible) {
+            return;
+        }
+        this._visible = visible;
+        if (!this.isConnected) {
+            this.toggleAttribute(BACKDROP_CONSTANTS.attributes.VISIBLE, this._visible);
+            return Promise.resolve();
+        }
+        if (!animate) {
+            this.toggleAttribute(BACKDROP_CONSTANTS.attributes.VISIBLE, this._visible);
+            return;
+        }
+        const isVisible = this._visible;
+        const className = isVisible ? BACKDROP_CONSTANTS.classes.ENTERING : BACKDROP_CONSTANTS.classes.EXITING;
+        if (this._animationController) {
+            this._animationController.abort();
+            this._rootElement.classList.remove(BACKDROP_CONSTANTS.classes.ENTERING, BACKDROP_CONSTANTS.classes.EXITING);
+        }
+        this._animationController = new AbortController();
+        const animationComplete = new Promise(resolve => {
+            var _a;
+            this._rootElement.addEventListener('animationend', () => {
+                if (!isVisible) {
+                    this.removeAttribute(BACKDROP_CONSTANTS.attributes.VISIBLE);
+                }
+                this._rootElement.classList.remove(className);
+                resolve();
+            }, { once: true, signal: (_a = this._animationController) === null || _a === void 0 ? void 0 : _a.signal });
+        });
+        if (isVisible) {
+            this.setAttribute(BACKDROP_CONSTANTS.attributes.VISIBLE, '');
+        }
+        this._rootElement.classList.add(className);
+        return animationComplete;
+    }
+    show() {
+        this._applyVisibility(true, { animate: false });
+    }
+    hide() {
+        this._applyVisibility(false, { animate: false });
     }
-    /**
-     * Starts the fade-in animation to animate the backdrop to max opacity.
-     */
     fadeIn() {
-        return this._foundation.fadeIn();
+        return this._applyVisibility(true);
+    }
+    fadeOut() {
+        return this._applyVisibility(false);
+    }
+    get visible() {
+        return this._visible;
+    }
+    set visible(value) {
+        value = Boolean(value);
+        if (this._visible !== value) {
+            this._applyVisibility(value);
+        }
+    }
+    get fixed() {
+        return this._fixed;
+    }
+    set fixed(value) {
+        value = Boolean(value);
+        if (this._fixed !== value) {
+            this._fixed = value;
+            this.toggleAttribute(BACKDROP_CONSTANTS.attributes.FIXED, this._fixed);
+        }
     }
 };
-__decorate([
-    FoundationProperty()
-], BackdropComponent.prototype, "delay", void 0);
-__decorate([
-    FoundationProperty()
-], BackdropComponent.prototype, "appearance", void 0);
-__decorate([
-    FoundationProperty()
-], BackdropComponent.prototype, "maxOpacity", void 0);
 BackdropComponent = __decorate([
     CustomElement({
         name: BACKDROP_CONSTANTS.elementName

package/esm/backdrop/index.d.ts

@@ -3,8 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './backdrop-adapter';
 export * from './backdrop-constants';
-export * from './backdrop-foundation';
 export * from './backdrop';
 export declare function defineBackdropComponent(): void;

package/esm/backdrop/index.js

@@ -5,9 +5,7 @@
  */
 import { defineCustomElement } from '@tylertech/forge-core';
 import { BackdropComponent } from './backdrop';
-export * from './backdrop-adapter';
 export * from './backdrop-constants';
-export * from './backdrop-foundation';
 export * from './backdrop';
 export function defineBackdropComponent() {
     defineCustomElement(BackdropComponent);

package/esm/bottom-sheet/bottom-sheet-adapter.d.ts

@@ -24,7 +24,7 @@ export interface IBottomSheetAdapter extends IBaseAdapter {
     isContentChild(el: HTMLElement): boolean;
     initScrollable(): void;
     setDragging(isDragging: boolean): void;
-    setBackdropVisiblity(value: boolean): void;
+    setBackdropVisibility(value: boolean): void;
     setFullscreen(value: boolean): void;
     tryLayoutChildren(): void;
     setContainerHeight(height: number | null): void;
@@ -58,7 +58,7 @@ export declare class BottomSheetAdapter extends BaseAdapter<IBottomSheetComponen
     isContentChild(el: HTMLElement): boolean;
     initScrollable(): void;
     setDragging(isDragging: boolean): void;
-    setBackdropVisiblity(value: boolean): void;
+    setBackdropVisibility(value: boolean): void;
     setFullscreen(value: boolean): void;
     tryLayoutChildren(): void;
     setContainerHeight(height: number | null): void;

package/esm/bottom-sheet/bottom-sheet-adapter.js

@@ -4,7 +4,6 @@
  * License: Apache-2.0
  */
 import { getShadowElement, removeElement, deepQuerySelectorAll, toggleClass } from '@tylertech/forge-core';
-import { BACKDROP_CONSTANTS } from '../backdrop';
 import { CHECKBOX_CONSTANTS } from '../checkbox';
 import { BaseAdapter } from '../core/base/base-adapter';
 import { ICON_BUTTON_CONSTANTS } from '../icon-button';
@@ -27,6 +26,7 @@ export class BottomSheetAdapter extends BaseAdapter {
         }
     }
     setVisibility(visible) {
+        this.setBackdropVisibility(visible);
         toggleClass(this._containerElement, visible, BOTTOM_SHEET_CONSTANTS.classes.OPEN);
     }
     attach() {
@@ -55,10 +55,10 @@ export class BottomSheetAdapter extends BaseAdapter {
         document.removeEventListener(type, listener);
     }
     registerBackdropClickHandler(handler) {
-        this._backdropElement.addEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, handler);
+        this._backdropElement.addEventListener('click', handler);
     }
     deregisterBackdropClickHandler(handler) {
-        this._backdropElement.removeEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, handler);
+        this._backdropElement.removeEventListener('click', handler);
     }
     getOpenBottomSheets(selector) {
         return document.querySelectorAll(selector);
@@ -87,8 +87,15 @@ export class BottomSheetAdapter extends BaseAdapter {
         toggleClass(this._containerElement, isDragging, BOTTOM_SHEET_CONSTANTS.classes.DRAGGING);
         toggleClass(this._component, isDragging, BOTTOM_SHEET_CONSTANTS.classes.DRAGGING);
     }
-    setBackdropVisiblity(value) {
-        this._backdropElement.hidden = !value;
+    setBackdropVisibility(value) {
+        window.requestAnimationFrame(() => {
+            if (this._component.open) {
+                this._backdropElement.fadeIn();
+            }
+            else {
+                this._backdropElement.fadeOut();
+            }
+        });
     }
     setFullscreen(value) {
         toggleClass(this._containerElement, value, BOTTOM_SHEET_CONSTANTS.classes.FULLSCREEN);

package/esm/bottom-sheet/bottom-sheet-foundation.js

@@ -199,7 +199,7 @@ export class BottomSheetFoundation {
     set showBackdrop(value) {
         if (this._showBackdrop !== value) {
             this._showBackdrop = value;
-            this._adapter.setBackdropVisiblity(value);
+            this._adapter.setBackdropVisibility(value);
             this._adapter.toggleHostAttribute(BOTTOM_SHEET_CONSTANTS.attributes.SHOW_BACKDROP, this._showBackdrop);
         }
     }

package/esm/bottom-sheet/bottom-sheet.js

@@ -9,8 +9,8 @@ import { BackdropComponent } from '../backdrop';
 import { BottomSheetAdapter } from './bottom-sheet-adapter';
 import { BOTTOM_SHEET_CONSTANTS } from './bottom-sheet-constants';
 import { BottomSheetFoundation } from './bottom-sheet-foundation';
-const template = '<template><forge-backdrop hidden part=\"backdrop\"></forge-backdrop><div class=\"forge-bottom-sheet\" part=\"root\"><slot></slot></div></template>';
-const styles = '.forge-bottom-sheet{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);-webkit-box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);border-radius:4px 4px 0 0;border-radius:var(--forge-bottom-sheet-border-radius,4px 4px 0 0);max-width:50%;max-width:var(--forge-bottom-sheet-desktop-max-width,50%);-webkit-box-sizing:border-box;box-sizing:border-box;position:fixed;bottom:0;right:0;left:0;max-height:50%;margin:0 auto;display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in,-webkit-transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1);transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in,-webkit-transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1);transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in,transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1);transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in,transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1),-webkit-transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1)}@media (max-width:600px){.forge-bottom-sheet{max-width:100%;width:100%;margin:0;border-radius:0}}.forge-bottom-sheet--open{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition-duration:var(--forge-bottom-sheet-transition-duration, 250ms);transition-duration:var(--forge-bottom-sheet-transition-duration, 250ms)}.forge-bottom-sheet--fullscreen.forge-bottom-sheet--open{height:100%;max-height:100%;-webkit-transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in;transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in}.forge-bottom-sheet--dragging{-webkit-transition:none!important;transition:none!important}.forge-bottom-sheet--scrollable{height:100%}:host{z-index:8;z-index:var(--forge-z-index-dialog,8);position:fixed}:host forge-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;position:fixed}:host([hidden]){display:none}';
+const template = '<template><forge-backdrop fixed part=\"backdrop\"></forge-backdrop><div class=\"forge-bottom-sheet\" part=\"root\"><slot></slot></div></template>';
+const styles = '.forge-bottom-sheet{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);-webkit-box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);border-radius:4px 4px 0 0;border-radius:var(--forge-bottom-sheet-border-radius,4px 4px 0 0);max-width:50%;max-width:var(--forge-bottom-sheet-desktop-max-width,50%);z-index:8;z-index:var(--forge-z-index-dialog,8);-webkit-box-sizing:border-box;box-sizing:border-box;position:fixed;bottom:0;right:0;left:0;max-height:50%;margin:0 auto;display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in,-webkit-transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1);transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in,-webkit-transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1);transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in,transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1);transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in,transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1),-webkit-transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1)}@media (max-width:600px){.forge-bottom-sheet{max-width:100%;width:100%;margin:0;border-radius:0}}.forge-bottom-sheet--open{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition-duration:var(--forge-bottom-sheet-transition-duration, 250ms);transition-duration:var(--forge-bottom-sheet-transition-duration, 250ms)}.forge-bottom-sheet--fullscreen.forge-bottom-sheet--open{height:100%;max-height:100%;-webkit-transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in;transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in}.forge-bottom-sheet--dragging{-webkit-transition:none!important;transition:none!important}.forge-bottom-sheet--scrollable{height:100%}:host{z-index:8;z-index:var(--forge-z-index-dialog,8);position:fixed}:host([hidden]){display:none}';
 /**
  * The web component class behind the `<forge-bottom-sheet>` custom element.
  *

package/esm/busy-indicator/busy-indicator-adapter.d.ts

@@ -3,7 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BackdropAppearance } from '../backdrop';
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 import { IBusyIndicatorComponent } from './busy-indicator';
 export interface IBusyIndicatorAdapter extends IBaseAdapter {
@@ -28,7 +27,7 @@ export interface IBusyIndicatorAdapter extends IBaseAdapter {
     captureFocus: () => void;
     remove: () => void;
     hideBackdrop: () => void;
-    setBackdropAppearance(appearance: BackdropAppearance): void;
+    showBackdrop: () => void;
     setParentAttribute(name: string, value: string): void;
     removeParentAttribute(name: string): void;
     getFocusedElement(): HTMLElement;
@@ -145,13 +144,10 @@ export declare class BusyIndicatorAdapter extends BaseAdapter<IBusyIndicatorComp
      * Removes the busy indicator component from its parent.
      */
     remove(): void;
-    /**
-     * Hides the backdrop by fading it out.
-     */
     hideBackdrop(): void;
+    showBackdrop(): void;
     private _toggleElement;
     setContainerInvisible(): void;
-    setBackdropAppearance(appearance: BackdropAppearance): void;
     setParentAttribute(name: string, value: string): void;
     removeParentAttribute(name: string): void;
     getFocusedElement(): HTMLElement;

package/esm/busy-indicator/busy-indicator-adapter.js

@@ -154,12 +154,17 @@ export class BusyIndicatorAdapter extends BaseAdapter {
     remove() {
         removeElement(this._component);
     }
-    /**
-     * Hides the backdrop by fading it out.
-     */
     hideBackdrop() {
         this._backdropElement.fadeOut();
     }
+    showBackdrop() {
+        window.requestAnimationFrame(() => {
+            var _a;
+            if (this._component.isConnected) {
+                (_a = this._backdropElement) === null || _a === void 0 ? void 0 : _a.fadeIn();
+            }
+        });
+    }
     _toggleElement(isVisible, selector, element, placeholder) {
         const exists = !!getShadowElement(this._component, selector);
         if (!placeholder) {
@@ -176,9 +181,6 @@ export class BusyIndicatorAdapter extends BaseAdapter {
     setContainerInvisible() {
         addClass(BUSY_INDICATOR_CONSTANTS.classes.SURFACE_INVISIBLE, this._surfaceElement);
     }
-    setBackdropAppearance(appearance) {
-        this._backdropElement.setAttribute(BACKDROP_CONSTANTS.attributes.APPEARANCE, String(appearance));
-    }
     setParentAttribute(name, value) {
         this._parentElement = this._component.parentElement;
         if (this._parentElement) {

package/esm/busy-indicator/busy-indicator-foundation.js

@@ -60,7 +60,6 @@ export class BusyIndicatorFoundation {
         }
         if ((!this._message || this._message.length === 0) && this._showSpinner && (!this.titleText || this._titleText.length === 0) && !this._canCancel) {
             this._adapter.setContainerInvisible();
-            this._adapter.setBackdropAppearance('light');
         }
         this.fadeIn();
     }
@@ -94,6 +93,7 @@ export class BusyIndicatorFoundation {
     }
     /** Sets the elements opacity to 1 which triggers the CSS transition to fade in after the current delay value. */
     fadeIn() {
+        this._adapter.showBackdrop();
         this._adapter.setSurfaceOpacity(1);
         if (this._manageFocus) {
             this._captureFocus();

package/esm/button/base/base-button-foundation.js

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { task } from '../../core/utils/event-utils';
 import { BASE_BUTTON_CONSTANTS } from './base-button-constants';
 export class BaseButtonFoundation {
     constructor(_adapter) {
@@ -94,7 +95,7 @@ export class BaseButtonFoundation {
             return;
         }
         // Wait a cycle for the keydown event to propagate
-        await new Promise(resolve => setTimeout(resolve));
+        await task();
         if (evt.defaultPrevented || this._disabled) {
             return;
         }

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

@@ -9,7 +9,7 @@ export declare const CALENDAR_CONSTANTS: {
     attributes: {
         DATA_DATE: string;
         DATA_EVENT_THEME: string;
-        POPUP_CONTEXT: string;
+        POPOVER_CONTEXT: string;
         ALLOW_SINGLE_DATE_RANGE: string;
         CLEAR_BUTTON: string;
         CONSTRAIN_TO_ENABLED: string;

package/esm/calendar/calendar-constants.js

@@ -31,7 +31,7 @@ const observedAttributes = {
     YEAR: 'year',
     YEAR_RANGE: 'year-range'
 };
-const attributes = Object.assign(Object.assign({}, observedAttributes), { DATA_DATE: 'data-date', DATA_EVENT_THEME: 'data-event-theme', POPUP_CONTEXT: 'forge-popup-context' });
+const attributes = Object.assign(Object.assign({}, observedAttributes), { DATA_DATE: 'data-date', DATA_EVENT_THEME: 'data-event-theme', POPOVER_CONTEXT: 'forge-popover-context' });
 const classes = {
     ALLOW_SINGLE_DATE_RANGE: 'forge-calendar--allow-single-date-range',
     DATE: 'forge-calendar__date',

package/esm/calendar/calendar-dropdown/calendar-dropdown.d.ts

@@ -3,11 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { IPopupComponent } from '../../popup';
+import { IPopoverComponent } from '../../popover/popover';
 import { ICalendarComponent } from '../calendar';
 export interface ICalendarDropdown {
     calendar: ICalendarComponent | undefined;
-    dropdownElement: IPopupComponent | undefined;
+    dropdownElement: IPopoverComponent | undefined;
     id: string;
     targetElement: HTMLElement;
     popupClasses: string | string[] | null;
@@ -22,7 +22,7 @@ export interface ICalendarDropdown {
 }
 export declare class CalendarDropdown implements ICalendarDropdown {
     calendar: ICalendarComponent | undefined;
-    dropdownElement: IPopupComponent | undefined;
+    dropdownElement: IPopoverComponent | undefined;
     id: string;
     targetElement: HTMLElement;
     activeChangeCallback: ((id: string) => void) | undefined;
@@ -35,7 +35,9 @@ export declare class CalendarDropdown implements ICalendarDropdown {
     get locale(): string | undefined;
     set locale(value: string | undefined);
     constructor(targetElement: HTMLElement, id: string);
-    close(): void;
+    close({ force }?: {
+        force?: boolean | undefined;
+    }): Promise<void>;
     destroy(): void;
     open(config: Partial<ICalendarComponent>): void;
     propagateKeyboardEvent(evt: KeyboardEvent): void;

package/esm/calendar/calendar-dropdown/calendar-dropdown.js

@@ -3,8 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { addClass, isArray, createVisuallyHiddenElement } from '@tylertech/forge-core';
-import { PopupAnimationType, POPUP_CONSTANTS } from '../../popup';
+import { isArray, createVisuallyHiddenElement, closestElement } from '@tylertech/forge-core';
+import { POPOVER_CONSTANTS } from '../../popover/popover-constants';
 import { CALENDAR_CONSTANTS } from '../calendar-constants';
 import { getDateId } from '../calendar-dom-utils';
 import { CALENDAR_DROPDOWN_CONSTANTS } from './calendar-dropdown-constants';
@@ -33,18 +33,25 @@ export class CalendarDropdown {
         this.targetElement = targetElement;
         this.id = id;
     }
-    close() {
+    async close({ force = false } = {}) {
         if (!this.dropdownElement) {
             return;
         }
-        this.dropdownElement.open = false;
+        if (force) {
+            this.dropdownElement.open = false;
+        }
+        else {
+            await this.dropdownElement.hideAsync();
+        }
+        this.dropdownElement.remove();
         this.dropdownElement = undefined;
         this.calendar = undefined;
     }
     destroy() {
-        this.close();
+        this.close({ force: true });
     }
     open(config) {
+        var _a, _b;
         // Create calendar element
         this.calendar = this._createCalendar(config);
         this._announcerElement = createVisuallyHiddenElement();
@@ -53,7 +60,6 @@ export class CalendarDropdown {
         this.dropdownElement = this._createDropdown();
         this.dropdownElement.appendChild(this.calendar);
         this.dropdownElement.appendChild(this._announcerElement);
-        this.dropdownElement.static = true;
         // Add a listener for when the active descendent is updated
         this.calendar.addEventListener(CALENDAR_CONSTANTS.events.FOCUS_CHANGE, (evt) => {
             var _a;
@@ -76,17 +82,11 @@ export class CalendarDropdown {
                 this._announcerElement.textContent = evt.detail.text;
             }
         });
-        // Open the popup
+        // Append to root node
+        const hostDocument = (_a = this.targetElement.ownerDocument) !== null && _a !== void 0 ? _a : document;
+        const hostElement = (_b = closestElement(POPOVER_CONSTANTS.selectors.HOST, this.targetElement)) !== null && _b !== void 0 ? _b : hostDocument.body;
+        hostElement.appendChild(this.dropdownElement);
         this.dropdownElement.open = true;
-        // Attempt to re-layout the calendar to account for updates in rendering during scale
-        // transition within popup (fixes ripple alignment... etc.)
-        window.requestAnimationFrame(() => {
-            setTimeout(() => {
-                if (this.dropdownElement && this.dropdownElement.open && this.calendar && this.calendar.isConnected) {
-                    this.calendar.layout();
-                }
-            }, POPUP_CONSTANTS.numbers.ANIMATION_DURATION);
-        });
     }
     propagateKeyboardEvent(evt) {
         var _a;
@@ -98,18 +98,14 @@ export class CalendarDropdown {
         return calendarElement;
     }
     _createDropdown() {
-        const popupElement = document.createElement(POPUP_CONSTANTS.elementName);
-        popupElement.targetElement = this.targetElement;
+        const popupElement = document.createElement('forge-popover');
+        popupElement.anchorElement = this.targetElement;
         popupElement.placement = 'bottom-start';
-        popupElement.animationType = PopupAnimationType.Menu;
+        popupElement.persistent = true;
         popupElement.classList.add(CALENDAR_DROPDOWN_CONSTANTS.classes.POPUP);
         popupElement.id = this.id;
-        addClass(this._popupClasses, popupElement);
-        popupElement.addEventListener(POPUP_CONSTANTS.events.CLOSE, () => {
-            if (this.closeCallback) {
-                this.closeCallback();
-            }
-        });
+        popupElement.classList.add(...this._popupClasses);
+        popupElement.addEventListener(POPOVER_CONSTANTS.events.TOGGLE, () => { var _a; return (_a = this.closeCallback) === null || _a === void 0 ? void 0 : _a.call(this); });
         return popupElement;
     }
 }

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

@@ -10,7 +10,7 @@ export declare const CALENDAR_MENU_CONSTANTS: {
         ANIMATION_TYPE: string;
         DATA_ANIMATION: string;
         DATA_VALUE: string;
-        POPUP_CONTEXT: string;
+        POPOVER_CONTEXT: string;
         PREVENT_FOCUS: string;
     };
     classes: {

package/esm/calendar/calendar-menu/calendar-menu-constants.js

@@ -9,7 +9,7 @@ const attributes = {
     ANIMATION_TYPE: 'animation-type',
     DATA_ANIMATION: 'data-animation',
     DATA_VALUE: 'data-value',
-    POPUP_CONTEXT: 'forge-popup-context',
+    POPOVER_CONTEXT: 'forge-popover-context',
     PREVENT_FOCUS: 'prevent-focus'
 };
 const classes = {