@tylertech/forge 3.0.0-next.20 → 3.0.0-next.22

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

@@ -11,9 +11,9 @@ import { APP_BAR_PROFILE_BUTTON_CONSTANTS } from './app-bar-profile-button-const
 import { ProfileCardComponent } from '../../profile-card';
 import { IconButtonComponent } from '../../icon-button';
 import { AvatarComponent } from '../../avatar';
-import { PopupComponent } from '../../popup';
 import { TooltipComponent } from '../../tooltip';
 import { BaseComponent } from '../../core/base/base-component';
+import { PopoverComponent } from '../../popover/popover';
 const template = '<template><forge-icon-button><forge-avatar aria-hidden=\"true\"></forge-avatar></forge-icon-button><forge-tooltip type=\"label\" placement=\"bottom\">View profile</forge-tooltip></template>';
 /**
  * @tag forge-app-bar-profile-button
@@ -29,7 +29,7 @@ const template = '<template><forge-icon-button><forge-avatar aria-hidden=\"true\
  * @property {string} signOutButtonText - The text to display in the sign out button.
  * @property {string} profileButtonText - The text to display in the profile button.
  * @property {boolean} open - Whether the profile card is open or not.
- * @property {IPopupComponent | undefined} popupElement - The popup element when open.
+ * @property {IPopoverComponent | undefined} popupElement - The popup element when open.
  * @property {AppBarProfileButtonProfileCardBuilder} profileCardBuilder - Sets the profile card builder callback that will be used to add extra content to the profile card.
  *
  * @attribute {string} [avatar-image-url] - The url of the avatar image to display.
@@ -156,7 +156,7 @@ AppBarProfileButtonComponent = __decorate([
     CustomElement({
         name: APP_BAR_PROFILE_BUTTON_CONSTANTS.elementName,
         dependencies: [
-            PopupComponent,
+            PopoverComponent,
             ProfileCardComponent,
             IconButtonComponent,
             AvatarComponent,

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

@@ -15,7 +15,9 @@ export interface IAutocompleteAdapter extends IBaseAdapter {
     initializeInputAccessibility(identifier: string): void;
     isWrappingChipField(): boolean;
     show(config: IListDropdownConfig, popupTarget: string): void;
-    hide(listener: () => void): void;
+    hide(listener: () => void, options: {
+        destroy?: boolean;
+    }): Promise<void>;
     focus(): void;
     setOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
     appendOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
@@ -59,7 +61,9 @@ export declare class AutocompleteAdapter extends BaseAdapter<IAutocompleteCompon
     initializeInputAccessibility(identifier: string): void;
     isWrappingChipField(): boolean;
     show(config: IListDropdownConfig, popupTarget: string): void;
-    hide(listener: () => void): void;
+    hide(listener: () => void, { destroy }?: {
+        destroy?: boolean | undefined;
+    }): Promise<void>;
     setBusyVisibility(isVisible: boolean): void;
     setDismissListener(listener: () => void): void;
     focus(): void;

package/esm/autocomplete/autocomplete-adapter.js

@@ -3,13 +3,13 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, deepQuerySelectorAll, getActiveElement, toggleAttribute } from '@tylertech/forge-core';
+import { deepQuerySelectorAll, getActiveElement, toggleAttribute } from '@tylertech/forge-core';
 import { BaseAdapter } from '../core/base/base-adapter';
 import { AUTOCOMPLETE_CONSTANTS } from './autocomplete-constants';
 import { TEXT_FIELD_CONSTANTS } from '../text-field';
 import { ListDropdown } from '../list-dropdown';
 import { CHIP_FIELD_CONSTANTS } from '../chip-field';
-import { POPUP_CONSTANTS } from '../popup';
+import { POPOVER_CONSTANTS } from '../popover';
 /**
  * The DOM adapter for the `<forge-autocomplete>` element.
  */
@@ -57,18 +57,26 @@ export class AutocompleteAdapter extends BaseAdapter {
         this._inputElement.setAttribute('aria-controls', `list-dropdown-popup-${config.id}`);
         this._tryToggleDropdownIconRotation(true);
     }
-    hide(listener) {
+    async hide(listener, { destroy = false } = {}) {
+        var _a, _b, _c;
+        this.setBusyVisibility(false);
+        this._tryToggleDropdownIconRotation(false);
+        (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-activedescendant');
+        (_b = this._inputElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-controls');
+        (_c = this._inputElement) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-expanded', 'false');
         if (!this._listDropdown) {
             return;
         }
-        const { targetElement } = this._listDropdown.dropdownElement;
-        targetElement.removeEventListener(POPUP_CONSTANTS.events.BLUR, listener);
-        this.setBusyVisibility(false);
-        this._tryToggleDropdownIconRotation(false);
-        this._inputElement.removeAttribute('aria-activedescendant');
-        this._inputElement.removeAttribute('aria-controls');
-        this._inputElement.setAttribute('aria-expanded', 'false');
-        this._listDropdown.close();
+        const { anchorElement } = this._listDropdown.dropdownElement;
+        if (anchorElement && anchorElement instanceof HTMLElement) {
+            anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.removeEventListener(POPOVER_CONSTANTS.events.TOGGLE, listener);
+        }
+        if (destroy) {
+            this._listDropdown.destroy();
+        }
+        else {
+            await this._listDropdown.close();
+        }
         this._listDropdown = undefined;
     }
     setBusyVisibility(isVisible) {
@@ -80,8 +88,8 @@ export class AutocompleteAdapter extends BaseAdapter {
             return;
         }
         const dropdownElement = this._listDropdown.dropdownElement;
-        if (dropdownElement.targetElement) {
-            dropdownElement.targetElement.addEventListener(POPUP_CONSTANTS.events.BLUR, listener);
+        if (dropdownElement.anchorElement && dropdownElement.anchorElement instanceof HTMLElement) {
+            dropdownElement.anchorElement.addEventListener(POPOVER_CONSTANTS.events.TOGGLE, listener);
         }
     }
     focus() {
@@ -208,19 +216,15 @@ export class AutocompleteAdapter extends BaseAdapter {
         return selector ? this._component.querySelector(selector) || this._getDefaultTargetElement() : this._getDefaultTargetElement();
     }
     _getDefaultTargetElement() {
-        // This component is often used with the text-field, if so, let's target our popup around one if its internal elements for proper alignment
-        const textField = this._component.querySelector(TEXT_FIELD_CONSTANTS.elementName);
+        const fieldElements = [
+            TEXT_FIELD_CONSTANTS.elementName,
+            CHIP_FIELD_CONSTANTS.elementName
+        ];
+        // This component is often used with the field-like Forge elements, if so, let's target our popup around one if its internal elements for proper alignment
+        const textField = this._component.querySelector(`:is(${fieldElements.join(',')})`);
         if (textField === null || textField === void 0 ? void 0 : textField.popoverTargetElement) {
             return textField.popoverTargetElement;
         }
-        // This component is often used with the chip-field, if so, let's target our popup around one if its internal elements for proper alignment
-        const chipField = this._component.querySelector(CHIP_FIELD_CONSTANTS.elementName);
-        if (chipField && chipField.shadowRoot) {
-            const chipFieldRoot = getShadowElement(chipField, CHIP_FIELD_CONSTANTS.selectors.ROOT);
-            if (chipFieldRoot) {
-                return chipFieldRoot;
-            }
-        }
         return this._component.querySelector('input') || this._component;
     }
     _tryToggleDropdownIconRotation(state) {

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

@@ -5,7 +5,7 @@
  */
 import { IListItemComponent } from '../list';
 import { IListDropdownConfig, IListDropdownOption, IListDropdownOptionGroup, ListDropdownOptionGroupBuilder } from '../list-dropdown';
-import { IPopupPosition } from '../popup';
+import { IOverlayOffset } from '../overlay/overlay-constants';
 export declare const AUTOCOMPLETE_CONSTANTS: {
     elementName: "forge-autocomplete";
     attributes: {
@@ -58,7 +58,7 @@ export interface IAutocompletePopupConfiguration {
     popupTarget: string;
     dropdownConfig: IListDropdownConfig;
     popupClasses: string[];
-    popupOffset: IPopupPosition;
+    popupOffset: IOverlayOffset;
     syncPopupWidth: boolean;
     listener: (value: string) => void;
     scrollEndListener: () => void;

package/esm/autocomplete/autocomplete-constants.js

@@ -4,7 +4,6 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX, KEYSTROKE_DEBOUNCE_THRESHOLD } from '../constants';
-import { FIELD_CONSTANTS } from '../field/field-constants';
 const elementName = `${COMPONENT_NAME_PREFIX}autocomplete`;
 const attributes = {
     MODE: 'mode',
@@ -25,7 +24,7 @@ const attributes = {
     DROPDOWN_ICON_OPEN: 'data-forge-dropdown-icon-open'
 };
 const selectors = {
-    INPUT: FIELD_CONSTANTS.selectors.INPUT,
+    INPUT: 'input',
     DROPDOWN_ICON: '[data-forge-dropdown-icon],[data-forge-dropdown-icon],[forge-dropdown-icon],.forge-dropdown-icon',
     CLEAR_BUTTON: '[data-forge-autocomplete-clear],[forge-autocomplete-clear]'
 };

package/esm/autocomplete/autocomplete-foundation.js

@@ -70,9 +70,7 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
             this._detachListeners();
             this._isInitialized = false;
         }
-        if (this._isDropdownOpen) {
-            this._closeDropdown();
-        }
+        this._closeDropdown({ destroy: true });
     }
     async forceFilter({ preserveValue }) {
         // Clear any existing options since they are expected to no longer be valid
@@ -413,12 +411,12 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation {
             this._adapter.activateFirstOption();
         }
     }
-    _closeDropdown() {
+    _closeDropdown({ destroy = false } = {}) {
         if (this._multiple) {
             this._filterText = '';
         }
         this._isDropdownOpen = false;
-        this._adapter.hide(this._dismissListener);
+        this._adapter.hide(this._dismissListener, { destroy });
         this._sortSelectedOptions();
         this._adapter.toggleHostAttribute(AUTOCOMPLETE_CONSTANTS.attributes.OPEN, this._isDropdownOpen);
     }

package/esm/autocomplete/autocomplete.js

@@ -11,7 +11,7 @@ import { IconComponent, IconRegistry } from '../icon';
 import { LinearProgressComponent } from '../linear-progress';
 import { ListComponent, ListItemComponent } from '../list';
 import { ListDropdownAware } from '../list-dropdown/list-dropdown-aware';
-import { PopupComponent } from '../popup';
+import { PopoverComponent } from '../popover/popover';
 import { SkeletonComponent } from '../skeleton';
 import { TextFieldComponent } from '../text-field';
 import { AutocompleteAdapter } from './autocomplete-adapter';
@@ -172,7 +172,7 @@ AutocompleteComponent = __decorate([
         name: AUTOCOMPLETE_CONSTANTS.elementName,
         dependencies: [
             TextFieldComponent,
-            PopupComponent,
+            PopoverComponent,
             ListComponent,
             ListItemComponent,
             DividerComponent,

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

@@ -5,22 +5,19 @@
  */
 export declare const BACKDROP_CONSTANTS: {
     elementName: "forge-backdrop";
-    selectors: {
-        CONTAINER: string;
-    };
-    numbers: {
-        OPACITY: number;
-        DELAY: number;
-        TRANSITION_DURATION: number;
+    observedAttributes: {
+        VISIBLE: string;
+        FIXED: string;
     };
     attributes: {
-        DELAY: string;
-        MAX_OPACITY: string;
-        APPEARANCE: string;
+        VISIBLE: string;
         FIXED: string;
     };
-    events: {
-        BACKDROP_CLICK: string;
+    classes: {
+        ENTERING: string;
+        EXITING: string;
+    };
+    selectors: {
+        ROOT: string;
     };
 };
-export type BackdropAppearance = 'light' | 'dark' | undefined;

package/esm/backdrop/backdrop-constants.js

@@ -5,27 +5,22 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}backdrop`;
-const selectors = {
-    CONTAINER: '.forge-backdrop'
-};
-const numbers = {
-    OPACITY: 0.54,
-    DELAY: 0,
-    TRANSITION_DURATION: 150
-};
-const attributes = {
-    DELAY: 'delay',
-    MAX_OPACITY: 'max-opacity',
-    APPEARANCE: 'appearance',
+const observedAttributes = {
+    VISIBLE: 'visible',
     FIXED: 'fixed'
 };
-const events = {
-    BACKDROP_CLICK: `${elementName}-click`
+const attributes = Object.assign({}, observedAttributes);
+const classes = {
+    ENTERING: 'entering',
+    EXITING: 'exiting'
+};
+const selectors = {
+    ROOT: '.forge-backdrop'
 };
 export const BACKDROP_CONSTANTS = {
     elementName,
-    selectors,
-    numbers,
+    observedAttributes,
     attributes,
-    events
+    classes,
+    selectors
 };

package/esm/backdrop/backdrop.d.ts

@@ -4,50 +4,38 @@
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-import { BackdropAppearance } from './backdrop-constants';
-import { BackdropFoundation } from './backdrop-foundation';
 export interface IBackdropComponent extends IBaseComponent {
-    delay: number;
-    maxOpacity: number;
-    appearance: BackdropAppearance;
-    fadeOut(): Promise<void>;
+    visible: boolean;
+    fixed: boolean;
+    show(): void;
+    hide(): void;
     fadeIn(): Promise<void>;
+    fadeOut(): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-backdrop': IBackdropComponent;
     }
-    interface HTMLElementEventMap {
-        'forge-backdrop-click': CustomEvent<void>;
-    }
 }
 /**
- * A web component that renders a backdrop covering its parent container with a semi-opaque element.
- *
  * @tag forge-backdrop
  */
 export declare class BackdropComponent extends BaseComponent {
     static get observedAttributes(): string[];
-    protected _foundation: BackdropFoundation;
+    private _visible;
+    private _fixed;
+    private _rootElement;
+    private _animationController;
     constructor();
-    connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /**
-     * The time in milliseconds to delay the fade in animation of the opacity.
-     * Note: The element will start with 0% opacity when the component is rendered.
-     */
-    delay: number;
-    /** Controls whether the theme defaults to light vs dark compatibility. */
-    appearance: BackdropAppearance;
-    /** The max opacity to fade the element to. This defines how opaque the backdrop is when visible. */
-    maxOpacity: number;
-    /**
-     * Starts the fade-out animation to animate the backdrop to 0% opacity.
-     */
-    fadeOut(): Promise<void>;
-    /**
-     * Starts the fade-in animation to animate the backdrop to max opacity.
-     */
+    private _applyVisibility;
+    show(): void;
+    hide(): void;
     fadeIn(): Promise<void>;
+    fadeOut(): Promise<void>;
+    get visible(): boolean;
+    set visible(value: boolean);
+    get fixed(): boolean;
+    set fixed(value: boolean);
 }

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.
  *