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

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

@@ -8,7 +8,7 @@ import { CalendarDropdown } from '../calendar/calendar-dropdown';
 import { DateInputMask } from '../core';
 import { BaseDatePickerAdapter } from '../date-picker/base/base-date-picker-adapter';
 import { createToggleElement } from '../date-picker/base/base-date-picker-utils';
-import { FIELD_CONSTANTS } from '../field-next';
+import { FIELD_CONSTANTS } from '../field';
 import { DATE_RANGE_PICKER_CONSTANTS } from './date-range-picker-constants';
 export class DateRangePickerAdapter extends BaseDatePickerAdapter {
     constructor(component) {

package/esm/date-range-picker/date-range-picker-component-delegate.d.ts

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { FormFieldComponentDelegate, IBaseComponentDelegateConfig, IFormFieldComponentDelegateOptions } from '../core/delegates';
-import { FieldDensity } from '../field-next';
+import { FieldDensity } from '../field';
 import { ITextFieldComponent } from '../text-field';
 import { IDateRangePickerComponent } from './date-range-picker';
 import { IDateRangePickerChangeEventData } from './date-range-picker-constants';

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

@@ -11,7 +11,7 @@ import { BaseDatePickerComponent } from '../date-picker/base/base-date-picker';
 import { BASE_DATE_PICKER_CONSTANTS } from '../date-picker/base/base-date-picker-constants';
 import { IconComponent, IconRegistry } from '../icon';
 import { IconButtonComponent } from '../icon-button';
-import { PopupComponent } from '../popup';
+import { PopoverComponent } from '../popover';
 import { DateRangePickerAdapter } from './date-range-picker-adapter';
 import { DATE_RANGE_PICKER_CONSTANTS } from './date-range-picker-constants';
 import { DateRangePickerFoundation } from './date-range-picker-foundation';
@@ -58,7 +58,7 @@ DateRangePickerComponent = __decorate([
     CustomElement({
         name: DATE_RANGE_PICKER_CONSTANTS.elementName,
         dependencies: [
-            PopupComponent,
+            PopoverComponent,
             CalendarComponent,
             IconButtonComponent,
             IconComponent

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

@@ -5,71 +5,53 @@
  */
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 import { IDialogComponent } from './dialog';
-import { DialogPositionType } from './dialog-constants';
 export interface IDialogAdapter extends IBaseAdapter {
-    initializeAccessibility(): void;
-    setAnimating(animating: boolean): void;
-    setVisibility(visible: boolean): void;
-    attach(parent?: HTMLElement): void;
-    detach(): void;
-    setDocumentListener(type: string, listener: (evt: Event) => void): void;
-    removeDocumentListener(type: string, listener: (evt: Event) => void): void;
-    registerTransitionEndHandler: (handler: (evt: TransitionEvent) => void) => void;
-    deregisterTransitionEndHandler: (handler: (evt: TransitionEvent) => void) => void;
-    registerBackdropClickHandler: (handler: (evt: CustomEvent) => void) => void;
-    deregisterBackdropClickHandler: (handler: (evt: CustomEvent) => void) => void;
-    getOpenDialogs: (selector: string) => NodeListOf<HTMLElement>;
-    setBodyAttribute: (name: string, value: string) => void;
-    removeBodyAttribute: (name: string) => void;
-    trySetInitialFocus: () => void;
-    isScrollable(): boolean;
-    addRootClass(name: string): void;
-    setFullscreen(value: boolean): void;
-    setMoveable(value: boolean): void;
-    tryLayoutRippleChildren(): void;
-    setMoveTarget(selector: string): boolean;
-    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;
-    captureActiveElement(): void;
-    tryRestoreActiveElement(): void;
+    readonly hostElement: IDialogComponent;
+    readonly moveHandleElement: HTMLElement;
+    readonly surfaceElement: HTMLElement;
+    triggerElement: HTMLElement | null;
+    show(): void;
+    hide(): Promise<void>;
+    addDialogFormSubmitListener(listener: EventListener): void;
+    removeDialogFormSubmitListener(listener: EventListener): void;
+    addDialogCancelListener(listener: EventListener): void;
+    removeDialogCancelListener(listener: EventListener): void;
+    addBackdropDismissListener(listener: EventListener): void;
+    removeBackdropDismissListener(listener: EventListener): void;
+    tryAutofocus(): void;
+    tryLocateTriggerElement(id: string | null): void;
+    addTriggerInteractionListener(listener: EventListener): void;
+    removeTriggerInteractionListener(listener: EventListener): void;
+    hideBackdrop(): void;
+    showBackdrop(): void;
+    addSurfaceClass(className: string): void;
+    removeSurfaceClass(className: string): void;
 }
-/**
- * Provides facilities for interacting with the internal DOM of `DialogComponent`.
- */
 export declare class DialogAdapter extends BaseAdapter<IDialogComponent> implements IDialogAdapter {
-    private _backdropElement?;
-    private _containerElement;
+    private _dialogElement;
     private _surfaceElement;
-    private _moveTargetElement;
-    private _activeElement;
+    private _backdropElement;
+    private _moveHandleElement;
+    triggerElement: HTMLElement | null;
+    get moveHandleElement(): HTMLElement;
+    get surfaceElement(): HTMLElement;
     constructor(component: IDialogComponent);
-    initializeAccessibility(): void;
-    setAnimating(animating: boolean): void;
-    setVisibility(visible: boolean): void;
-    attach(parent?: HTMLElement): void;
-    detach(): void;
-    registerTransitionEndHandler(handler: (evt: TransitionEvent) => void): void;
-    deregisterTransitionEndHandler(handler: (evt: TransitionEvent) => void): void;
-    setDocumentListener(type: string, listener: (evt: Event) => void): void;
-    removeDocumentListener(type: string, listener: (evt: Event) => void): void;
-    registerBackdropClickHandler(handler: (evt: CustomEvent) => void): void;
-    deregisterBackdropClickHandler(handler: (evt: CustomEvent) => void): void;
-    getOpenDialogs(selector: string): NodeListOf<HTMLElement>;
-    setBodyAttribute(name: string, value: string): void;
-    removeBodyAttribute(name: string): void;
-    trySetInitialFocus(): void;
-    isScrollable(): boolean;
-    addRootClass(name: string): void;
-    setFullscreen(value: boolean): void;
-    setMoveable(value: boolean): void;
-    tryLayoutRippleChildren(): void;
-    setMoveTarget(selector: string): boolean;
-    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;
-    captureActiveElement(): void;
-    tryRestoreActiveElement(): void;
+    show(): void;
+    private _hideBackdrops;
+    private _showBackdropMostRecent;
+    hide(): Promise<void>;
+    addDialogFormSubmitListener(listener: EventListener): void;
+    removeDialogFormSubmitListener(listener: EventListener): void;
+    addDialogCancelListener(listener: EventListener): void;
+    removeDialogCancelListener(listener: EventListener): void;
+    addBackdropDismissListener(listener: EventListener): void;
+    removeBackdropDismissListener(listener: EventListener): void;
+    tryAutofocus(): void;
+    tryLocateTriggerElement(id: string | null): void;
+    addTriggerInteractionListener(listener: EventListener): void;
+    removeTriggerInteractionListener(listener: EventListener): void;
+    hideBackdrop(): void;
+    showBackdrop(): void;
+    addSurfaceClass(className: string): void;
+    removeSurfaceClass(className: string): void;
 }

package/esm/dialog/dialog-adapter.js

@@ -3,166 +3,138 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { deepQuerySelectorAll, getActiveElement, getShadowElement, removeElement, toggleClass } from '@tylertech/forge-core';
+import { getShadowElement, playKeyframeAnimation } from '@tylertech/forge-core';
 import { BACKDROP_CONSTANTS } from '../backdrop';
-import { CHECKBOX_CONSTANTS } from '../checkbox/checkbox-constants';
+import { setDefaultAria } from '../constants';
 import { BaseAdapter } from '../core/base/base-adapter';
-import { ICON_BUTTON_CONSTANTS } from '../icon-button/icon-button-constants';
-import { RADIO_CONSTANTS } from '../radio/radio/radio-constants';
-import { SWITCH_CONSTANTS } from '../switch/switch-constants';
-import { DIALOG_CONSTANTS } from './dialog-constants';
-/**
- * Provides facilities for interacting with the internal DOM of `DialogComponent`.
- */
+import { DialogComponent } from './dialog';
+import { dialogStack, DIALOG_CONSTANTS, hideBackdrop, showBackdrop } from './dialog-constants';
 export class DialogAdapter extends BaseAdapter {
+    get moveHandleElement() {
+        return this._moveHandleElement;
+    }
+    get surfaceElement() {
+        return this._surfaceElement;
+    }
     constructor(component) {
         super(component);
-        this._containerElement = getShadowElement(component, DIALOG_CONSTANTS.selectors.CONTAINER);
+        this._dialogElement = getShadowElement(component, DIALOG_CONSTANTS.selectors.DIALOG);
         this._surfaceElement = getShadowElement(component, DIALOG_CONSTANTS.selectors.SURFACE);
-    }
-    initializeAccessibility() {
-        if (!this._component.hasAttribute('role')) {
-            this._component.setAttribute('role', 'dialog');
+        this._moveHandleElement = getShadowElement(component, DIALOG_CONSTANTS.selectors.MOVE_HANDLE);
+        this._backdropElement = getShadowElement(component, BACKDROP_CONSTANTS.elementName);
+        if (!this._backdropElement.shadowRoot) {
+            window.customElements.upgrade(this._backdropElement);
         }
-        this._component.setAttribute('aria-modal', 'true');
     }
-    setAnimating(animating) {
-        toggleClass(this._containerElement, animating, 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);
+    show() {
+        /* c8 ignore next 3 */
+        if (this._dialogElement.open) {
+            return;
+        }
+        this._component[setDefaultAria]({
+            role: this._component.type,
+            ariaModal: this._component.mode === 'modal' || this._component.mode === 'inline-modal' ? 'true' : 'false'
+        }, { setAttribute: true });
+        // Show the dialog (and backdrop) based on modal vs non-modal
+        const isModal = this._component.mode === 'modal' || this._component.mode === 'inline-modal';
+        if (isModal) {
+            if (this._component.animationType === 'none') {
+                this._backdropElement.show();
+            }
+            else {
+                this._backdropElement.fadeIn();
+            }
         }
-        if (visible) {
-            this._backdropElement.fadeIn();
+        if (this._component.mode === 'modal') {
+            this._dialogElement.showModal();
         }
         else {
-            this._backdropElement.fadeOut();
+            this._dialogElement.show();
         }
-    }
-    attach(parent = document.body) {
-        parent.appendChild(this._component);
-    }
-    detach() {
-        if (this._activeElement) {
-            this._activeElement = undefined;
+        if (isModal) {
+            this._hideBackdrops();
         }
-        removeElement(this._component);
-    }
-    registerTransitionEndHandler(handler) {
-        this._surfaceElement.addEventListener('transitionend', handler);
-    }
-    deregisterTransitionEndHandler(handler) {
-        this._surfaceElement.removeEventListener('transitionend', handler);
+        DialogComponent[dialogStack].add(this._component);
     }
-    setDocumentListener(type, listener) {
-        document.addEventListener(type, listener);
+    _hideBackdrops() {
+        DialogComponent[dialogStack].forEach(dialog => dialog[hideBackdrop]());
     }
-    removeDocumentListener(type, listener) {
-        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);
-    }
-    deregisterBackdropClickHandler(handler) {
+    _showBackdropMostRecent() {
         var _a;
-        (_a = this._backdropElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, handler);
-    }
-    getOpenDialogs(selector) {
-        return document.querySelectorAll(selector);
-    }
-    setBodyAttribute(name, value) {
-        document.body.setAttribute(name, value);
-    }
-    removeBodyAttribute(name) {
-        document.body.removeAttribute(name);
-    }
-    trySetInitialFocus() {
-        const elements = deepQuerySelectorAll(this._component, DIALOG_CONSTANTS.selectors.INITIAL_FOCUS);
-        if (elements && elements.length) {
-            const initialElement = elements[elements.length - 1];
-            initialElement.focus();
-        }
-    }
-    isScrollable() {
-        const contentElement = this._component.querySelector(DIALOG_CONSTANTS.selectors.CONTENT);
-        if (contentElement) {
-            return contentElement.scrollHeight > contentElement.offsetHeight;
+        (_a = Array.from(DialogComponent[dialogStack]).filter(dialog => dialog.mode === 'modal' || dialog.mode === 'inline-modal').at(-1)) === null || _a === void 0 ? void 0 : _a[showBackdrop]();
+    }
+    async hide() {
+        this._component[setDefaultAria]({
+            role: null,
+            ariaModal: null
+        }, { setAttribute: true });
+        const close = () => {
+            this._surfaceElement.classList.remove(BACKDROP_CONSTANTS.classes.EXITING);
+            this._dialogElement.close();
+            DialogComponent[dialogStack].delete(this._component);
+            this._showBackdropMostRecent();
+        };
+        if (this._component.animationType === 'none') {
+            return Promise.resolve(close());
         }
-        return false;
-    }
-    addRootClass(name) {
-        this._component.classList.add(name);
-    }
-    setFullscreen(value) {
-        toggleClass(this._containerElement, value, DIALOG_CONSTANTS.classes.FULLSCREEN);
-    }
-    setMoveable(value) {
-        toggleClass(this._containerElement, value, DIALOG_CONSTANTS.classes.MOVEABLE);
-    }
-    tryLayoutRippleChildren() {
-        const selectors = [
-            ICON_BUTTON_CONSTANTS.elementName,
-            SWITCH_CONSTANTS.elementName,
-            CHECKBOX_CONSTANTS.elementName,
-            RADIO_CONSTANTS.elementName
-        ];
-        const rippleChildren = deepQuerySelectorAll(this._component, selectors.join(':focus-within,'));
-        rippleChildren.filter(el => typeof el.layout === 'function').forEach(el => el.layout());
-    }
-    setMoveTarget(selector) {
-        if (!selector) {
-            return false;
+        this._backdropElement.fadeOut();
+        await playKeyframeAnimation(this._surfaceElement, BACKDROP_CONSTANTS.classes.EXITING);
+        close();
+    }
+    addDialogFormSubmitListener(listener) {
+        this._dialogElement.addEventListener('submit', listener);
+    }
+    removeDialogFormSubmitListener(listener) {
+        this._dialogElement.removeEventListener('submit', listener);
+    }
+    addDialogCancelListener(listener) {
+        this._dialogElement.addEventListener('cancel', listener);
+    }
+    removeDialogCancelListener(listener) {
+        this._dialogElement.removeEventListener('cancel', listener);
+    }
+    addBackdropDismissListener(listener) {
+        this._backdropElement.addEventListener('click', listener);
+    }
+    removeBackdropDismissListener(listener) {
+        this._backdropElement.removeEventListener('click', listener);
+    }
+    tryAutofocus() {
+        window.requestAnimationFrame(() => {
+            window.requestAnimationFrame(() => {
+                if (this._component.open && this._dialogElement.isConnected && !this._component.matches(':focus-within')) {
+                    const autofocusElement = this._component.querySelector(DIALOG_CONSTANTS.selectors.AUTOFOCUS);
+                    autofocusElement === null || autofocusElement === void 0 ? void 0 : autofocusElement.focus();
+                }
+            });
+        });
+    }
+    tryLocateTriggerElement(id) {
+        if (!id) {
+            this.triggerElement = null;
+            return;
         }
-        this._moveTargetElement = this._component.querySelector(selector);
-        return !!this._moveTargetElement;
+        const rootNode = this._component.getRootNode();
+        this.triggerElement = rootNode.querySelector(`#${id}`);
     }
-    setMoveTargetHandler(type, listener) {
+    addTriggerInteractionListener(listener) {
         var _a;
-        (_a = this._moveTargetElement) === null || _a === void 0 ? void 0 : _a.addEventListener(type, listener);
+        (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', listener);
     }
-    removeDragTargetHandler(type, listener) {
+    removeTriggerInteractionListener(listener) {
         var _a;
-        (_a = this._moveTargetElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(type, listener);
+        (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', listener);
     }
-    getSurfaceBounds() {
-        return this._surfaceElement.getBoundingClientRect();
+    hideBackdrop() {
+        this._backdropElement.fadeOut();
     }
-    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.top = y;
-        }
-        else {
-            this._surfaceElement.style.removeProperty('top');
-        }
-        if (x !== null) {
-            this._surfaceElement.style.left = x;
-        }
-        else {
-            this._surfaceElement.style.removeProperty('left');
-        }
+    showBackdrop() {
+        this._backdropElement.fadeIn();
     }
-    captureActiveElement() {
-        var _a;
-        this._activeElement = getActiveElement(this._component.ownerDocument);
-        (_a = this._activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+    addSurfaceClass(className) {
+        this._surfaceElement.classList.add(className);
     }
-    tryRestoreActiveElement() {
-        if (this._activeElement) {
-            if (this._activeElement.isConnected) {
-                this._activeElement.focus();
-            }
-            this._activeElement = undefined;
-        }
+    removeSurfaceClass(className) {
+        this._surfaceElement.classList.remove(className);
     }
 }

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

@@ -5,49 +5,64 @@
  */
 export declare const DIALOG_CONSTANTS: {
     elementName: "forge-dialog";
-    classes: {
-        ANIMATING: string;
+    observedAttributes: {
         OPEN: string;
-        ACTION_BUTTON: string;
-        BUTTON_TEXT: string;
-        SCROLLABLE: string;
+        VISIBLE: string;
+        MODE: string;
+        TYPE: string;
+        ANIMATION_TYPE: string;
+        PRESET: string;
+        PERSISTENT: string;
         FULLSCREEN: string;
+        TRIGGER: string;
         MOVEABLE: string;
+        MOVE_TARGET: string;
+        POSITION_STRATEGY: string;
+        PLACEMENT: string;
+        SIZE_STRATEGY: string;
     };
-    selectors: {
-        CONTAINER: string;
-        SURFACE: string;
-        BACKDROP: "forge-backdrop";
-        INITIAL_FOCUS: string;
-        DFEAULT_MOVE_TARGET: string;
-        CONTENT: string;
+    classes: {
+        MOVED: string;
+        MOVING: string;
     };
     attributes: {
-        BACKDROP_CLOSE: string;
-        ESCAPE_CLOSE: string;
+        OPEN: string;
+        VISIBLE: string;
+        MODE: string;
+        TYPE: string;
+        ANIMATION_TYPE: string;
+        PRESET: string;
+        PERSISTENT: string;
         FULLSCREEN: string;
-        POSITION_TYPE: string;
-        POSITION_X: string;
-        POSITION_Y: string;
+        TRIGGER: string;
         MOVEABLE: string;
         MOVE_TARGET: string;
-        OPEN: string;
-        BODY_OPEN: string;
-        INITIAL_FOCUS: string;
-        DFEAULT_MOVE_TARGET: string;
+        POSITION_STRATEGY: string;
+        PLACEMENT: string;
+        SIZE_STRATEGY: string;
+    };
+    selectors: {
+        DIALOG: string;
+        SURFACE: string;
+        MOVE_HANDLE: string;
+        AUTOFOCUS: string;
     };
     events: {
         BEFORE_CLOSE: string;
         OPEN: string;
         CLOSE: string;
-        READY: string;
         MOVE_START: string;
-        MOVED: string;
+        MOVE: string;
         MOVE_END: string;
     };
-    numbers: {
-        ANIMATION_DURATION: number;
-        BACKDROP_MAX_OPACITY: number;
+    defaults: {
+        MODE: DialogMode;
+        TYPE: DialogType;
+        ANIMATION_TYPE: DialogAnimationType;
+        PRESET: DialogPreset;
+        SIZE_STRATEGY: DialogSizeStrategy;
+        POSITION_STRATEGY: DialogPositionStrategy;
+        PLACEMENT: DialogPlacement;
     };
 };
 export interface IDialogMoveEventData {
@@ -62,5 +77,13 @@ export interface IDialogMoveContext {
 }
 export interface IDialogMoveStartEventData extends IDialogMoveEventData {
 }
-export type DialogPositionType = 'absolute' | 'relative';
-export type DialogStateCallback = () => boolean | void | Promise<boolean | void>;
+export type DialogMode = 'modal' | 'inline-modal' | 'nonmodal';
+export type DialogType = 'dialog' | 'alertdialog';
+export type DialogAnimationType = 'none' | 'zoom' | 'fade' | 'slide' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right';
+export type DialogPositionStrategy = 'viewport' | 'container';
+export type DialogPlacement = 'custom' | 'center' | 'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export type DialogSizeStrategy = 'content' | 'container-inline' | 'container-block';
+export type DialogPreset = 'dialog' | 'bottom-sheet' | 'top-sheet' | 'left-sheet' | 'right-sheet';
+export declare const hideBackdrop: unique symbol;
+export declare const showBackdrop: unique symbol;
+export declare const dialogStack: unique symbol;

package/esm/dialog/dialog-constants.js

@@ -4,57 +4,60 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
-import { BACKDROP_CONSTANTS } from '../backdrop';
 const elementName = `${COMPONENT_NAME_PREFIX}dialog`;
-const classes = {
-    ANIMATING: 'forge-dialog--animating',
-    OPEN: 'forge-dialog--open',
-    ACTION_BUTTON: 'forge-dialog__action__button',
-    BUTTON_TEXT: 'forge-button__text',
-    SCROLLABLE: 'forge-dialog--scrollable',
-    FULLSCREEN: 'forge-dialog--fullscreen',
-    MOVEABLE: 'forge-dialog--moveable'
-};
-const attributes = {
-    BACKDROP_CLOSE: 'backdrop-close',
-    ESCAPE_CLOSE: 'escape-close',
+const observedAttributes = {
+    OPEN: 'open',
+    VISIBLE: 'visible',
+    MODE: 'mode',
+    TYPE: 'type',
+    ANIMATION_TYPE: 'animation-type',
+    PRESET: 'preset',
+    PERSISTENT: 'persistent',
     FULLSCREEN: 'fullscreen',
-    POSITION_TYPE: 'position-type',
-    POSITION_X: 'position-x',
-    POSITION_Y: 'position-y',
+    TRIGGER: 'trigger',
     MOVEABLE: 'moveable',
     MOVE_TARGET: 'move-target',
-    OPEN: 'open',
-    BODY_OPEN: 'forge-dialog-open',
-    INITIAL_FOCUS: 'forge-dialog-focus',
-    DFEAULT_MOVE_TARGET: 'forge-dialog-move-target'
+    POSITION_STRATEGY: 'position-strategy',
+    PLACEMENT: 'placement',
+    SIZE_STRATEGY: 'size-strategy'
+};
+const attributes = Object.assign({}, observedAttributes);
+const classes = {
+    MOVED: 'moved',
+    MOVING: 'moving'
 };
 const selectors = {
-    CONTAINER: '.forge-dialog',
-    SURFACE: '.forge-dialog__surface',
-    BACKDROP: BACKDROP_CONSTANTS.elementName,
-    INITIAL_FOCUS: `[${attributes.INITIAL_FOCUS}]`,
-    DFEAULT_MOVE_TARGET: `[${attributes.DFEAULT_MOVE_TARGET}]`,
-    CONTENT: '.forge-dialog__body'
+    DIALOG: '.forge-dialog',
+    SURFACE: '.surface',
+    MOVE_HANDLE: '.move-handle',
+    AUTOFOCUS: ':is([autofocus],[forge-dialog-focus])'
 };
 const events = {
     BEFORE_CLOSE: `${elementName}-before-close`,
     OPEN: `${elementName}-open`,
     CLOSE: `${elementName}-close`,
-    READY: `${elementName}-ready`,
     MOVE_START: `${elementName}-move-start`,
-    MOVED: `${elementName}-move`,
+    MOVE: `${elementName}-move`,
     MOVE_END: `${elementName}-move-end`
 };
-const numbers = {
-    ANIMATION_DURATION: 150,
-    BACKDROP_MAX_OPACITY: 0.3
+const defaults = {
+    MODE: 'modal',
+    TYPE: 'dialog',
+    ANIMATION_TYPE: 'zoom',
+    PRESET: 'dialog',
+    SIZE_STRATEGY: 'content',
+    POSITION_STRATEGY: 'viewport',
+    PLACEMENT: 'center'
 };
 export const DIALOG_CONSTANTS = {
     elementName,
+    observedAttributes,
     classes,
-    selectors,
     attributes,
+    selectors,
     events,
-    numbers
+    defaults
 };
+export const hideBackdrop = Symbol('hideBackdrop');
+export const showBackdrop = Symbol('showBackdrop');
+export const dialogStack = Symbol('dialogStack');