@tylertech/forge 3.0.0-next.14 → 3.0.0-next.16

package/esm/core/utils/index.js

@@ -6,6 +6,7 @@
 export * from './date-utils';
 export * from './event-utils';
 export * from './feature-detection';
+export * from './form-utils';
 export * from './reflect-utils';
 export * from './svg-utils';
 export * from './time-utils';

package/esm/core/utils/mixin-utils.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { MixinBase } from '../../constants';
+type MixinFunction<T extends MixinBase = MixinBase, R extends T = T & MixinBase> = (Base: T) => R;
+type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;
+type MixinReturnValue<T extends MixinFunction<any, any>[]> = UnionToIntersection<{
+    [K in keyof T]: T[K] extends MixinFunction<any, infer U> ? U : never;
+}[number]>;
+/**
+ * Combines multiple mixins into a single component class.
+ *
+ * @param base - The base mixin to start with.
+ * @param mixins - The mixins to combine.
+ * @returns The combined component class.
+ */
+export declare function combineMixins<T extends MixinBase, K extends MixinFunction<T, any>[]>(base: T, ...mixins: K): MixinReturnValue<K>;
+export {};

package/esm/core/utils/mixin-utils.js

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Combines multiple mixins into a single component class.
+ *
+ * @param base - The base mixin to start with.
+ * @param mixins - The mixins to combine.
+ * @returns The combined component class.
+ */
+export function combineMixins(base, ...mixins) {
+    return mixins.reduce((acc, cur) => cur(acc), base);
+}

package/esm/core/utils/position-utils.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FlipOptions, ShiftOptions, AutoPlacementOptions, HideOptions, Middleware, Placement, Strategy, OffsetOptions, MiddlewareData, ArrowOptions } from '@floating-ui/dom';
+export type PositionPlacement = Placement;
+export type PositionStrategy = Strategy;
+export declare const DEFAULT_FALLBACK_PLACEMENTS: PositionPlacement[];
+export interface IPositionElementResult {
+    x: number;
+    y: number;
+    hidden: boolean;
+    placement: PositionPlacement;
+    arrow?: MiddlewareData['arrow'];
+}
+export declare class VirtualElement {
+    x: number;
+    y: number;
+    height: number;
+    width: number;
+    constructor(x: number, y: number, height?: number, width?: number);
+    getBoundingClientRect(): DOMRect;
+    static fromElement(element: HTMLElement): VirtualElement;
+    static fromEvent(event: MouseEvent | TouchEvent): VirtualElement;
+}
+export interface IPositionElementConfig {
+    /** The element to apply position to. */
+    element: HTMLElement;
+    /** The anchor element to position `element` around. */
+    anchorElement: HTMLElement | VirtualElement;
+    /** The placement position. */
+    placement: PositionPlacement;
+    /** Whether the position values should be applied to the `element` or not. Default is `true`. */
+    apply?: boolean;
+    /** Should the element flip to the opposite placement when not enough room. */
+    flip?: boolean;
+    /** Options to provide to the flip middleware. */
+    flipOptions?: Partial<FlipOptions>;
+    /** Should the element stay visible at the same placement when scrolling. */
+    shift?: boolean;
+    /** Options to provide to the shift middleware. */
+    shiftOptions?: Partial<ShiftOptions>;
+    /** Should the element hide itself when the anchor element is out of the view. */
+    hide?: boolean;
+    /** Options to provide to the hide middleware. */
+    hideOptions?: Partial<HideOptions>;
+    /** Should the element automatically attempt to locate the best placement, */
+    auto?: boolean;
+    /** Options to provide to the autoPlacement middleware. */
+    autoOptions?: Partial<AutoPlacementOptions>;
+    /** Should any offset values be applied to the element. */
+    offset?: boolean;
+    /** The options provide to the offset middleware. */
+    offsetOptions?: Partial<OffsetOptions>;
+    /** The element to use as an arrow. */
+    arrowElement?: HTMLElement;
+    /** Options to provide to the arrow middleware. */
+    arrowOptions?: Partial<ArrowOptions>;
+    /** Should the top-layer middleware be applied or not. */
+    topLayer?: boolean;
+    /** The positioning strategy. */
+    strategy?: PositionStrategy;
+    /** Should positioning be applied using a `transform` style. */
+    transform?: boolean;
+    /** The CSS `translate` function to apply to the `transform`. Only applied when `transform` is `true`. */
+    translateFunction?: 'translate3d' | 'translate';
+}
+/**
+ * Calculates an elements position relative to another element.
+ * @param {IPositionElementConfig} config Configuration to provide when positioning the element.
+ * @returns {IPositionElementResult} The result of the positioning logic.
+ */
+export declare function positionElementAsync({ element, anchorElement, placement, offset, offsetOptions, strategy, apply, flip, flipOptions, auto, autoOptions, shift, shiftOptions, hide, hideOptions, arrowElement, arrowOptions, topLayer, transform, translateFunction }: IPositionElementConfig): Promise<IPositionElementResult>;
+/**
+ * Custom middleware to handle positioning when the element is on the top layer AND within a containing block.
+ */
+export declare const topLayerMiddleware: () => Middleware;

package/esm/core/utils/position-utils.js

@@ -0,0 +1,197 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { computePosition, flip as flipMiddleware, hide as hideMiddleware, shift as shiftMiddleware, offset as offsetMiddleware, arrow as arrowMiddleware, autoPlacement as autoPlacementMiddleware } from '@floating-ui/dom';
+import { getContainingBlock, isContainingBlock, getWindow } from '@floating-ui/utils/dom';
+export const DEFAULT_FALLBACK_PLACEMENTS = ['top-start', 'top', 'top-end', 'left-start', 'left', 'left-end', 'right-start', 'right', 'right-end'];
+export class VirtualElement {
+    constructor(x, y, height = 0, width = 0) {
+        this.x = x;
+        this.y = y;
+        this.height = height;
+        this.width = width;
+    }
+    getBoundingClientRect() {
+        return {
+            x: this.x,
+            y: this.y,
+            top: this.y,
+            left: this.x,
+            bottom: this.y,
+            right: this.x,
+            width: this.height,
+            height: this.width,
+            toJSON() {
+                return;
+            }
+        };
+    }
+    static fromElement(element) {
+        const rect = element.getBoundingClientRect();
+        return new VirtualElement(rect.left, rect.top, rect.height, rect.width);
+    }
+    static fromEvent(event) {
+        if (event instanceof MouseEvent) {
+            return new VirtualElement(event.clientX, event.clientY);
+        }
+        if (event instanceof TouchEvent) {
+            return new VirtualElement(event.touches[0].clientX, event.touches[0].clientY);
+        }
+        throw new Error('Unsupported event type');
+    }
+}
+/**
+ * Calculates an elements position relative to another element.
+ * @param {IPositionElementConfig} config Configuration to provide when positioning the element.
+ * @returns {IPositionElementResult} The result of the positioning logic.
+ */
+export async function positionElementAsync({ element, anchorElement, placement = 'bottom', offset = false, offsetOptions, strategy = 'absolute', apply = true, flip = true, flipOptions = {
+    fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS,
+    fallbackStrategy: 'initialPlacement'
+}, auto = false, autoOptions, shift = true, shiftOptions, hide = false, hideOptions, arrowElement, arrowOptions = {}, topLayer = false, transform = true, translateFunction = 'translate3d' }) {
+    var _a, _b, _c;
+    const middleware = [];
+    //
+    // Order of the following middleware is **important**
+    //
+    if (offset) {
+        middleware.push(offsetMiddleware(offsetOptions));
+    }
+    if (shift) {
+        middleware.push(shiftMiddleware(shiftOptions));
+    }
+    if (flip && !auto) { // flip and auto placement middleware cannot be used together
+        middleware.push(flipMiddleware(flipOptions));
+    }
+    if (auto) {
+        middleware.push(autoPlacementMiddleware(autoOptions));
+    }
+    if (hide) {
+        middleware.push(hideMiddleware(hideOptions));
+    }
+    if (arrowElement) { // Must come before the topLayer middleware
+        middleware.push(arrowMiddleware(Object.assign(Object.assign({}, arrowOptions), { element: arrowElement })));
+    }
+    if (topLayer) {
+        middleware.push(topLayerMiddleware());
+    }
+    const { x, y, placement: finalPlacement, middlewareData } = await computePosition(anchorElement, element, { strategy, placement, middleware });
+    // Should we apply the position information to the element?
+    if (apply) {
+        const styles = {
+            left: transform ? '0' : `${x}px`,
+            top: transform ? '0' : `${y}px`
+        };
+        if (transform) {
+            if (translateFunction === 'translate') {
+                styles.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+            }
+            else {
+                styles.transform = `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
+            }
+        }
+        Object.assign(element.style, styles);
+        // We use `display` here to ensure that any child overlays are also hidden
+        if ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) {
+            element.style.display = 'none';
+        }
+        else {
+            element.style.removeProperty('display');
+        }
+    }
+    return {
+        x,
+        y,
+        hidden: (_c = (_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) !== null && _c !== void 0 ? _c : false,
+        placement: finalPlacement,
+        arrow: middlewareData.arrow
+    };
+}
+/**
+ * Custom middleware to handle positioning when the element is on the top layer AND within a containing block.
+ */
+export const topLayerMiddleware = () => ({
+    name: 'topLayer',
+    async fn({ x, y, elements: { reference, floating } }) {
+        let onTopLayer = false;
+        let topLayerIsFloating = false;
+        let withinReference = false;
+        const diffCoords = { x: 0, y: 0 };
+        try {
+            onTopLayer = onTopLayer || floating.matches(':popover-open');
+        }
+        catch (_a) { }
+        try {
+            onTopLayer = onTopLayer || floating.matches(':open');
+        }
+        catch (_b) { }
+        try {
+            onTopLayer = onTopLayer || floating.matches(':modal');
+        }
+        catch (_c) { }
+        topLayerIsFloating = onTopLayer;
+        const dialogAncestorQueryEvent = new Event('floating-ui-dialog-test', { composed: true, bubbles: true });
+        floating.addEventListener('floating-ui-dialog-test', (event) => {
+            event.composedPath().forEach((el) => {
+                withinReference = withinReference || el === reference;
+                if (el === floating || el.localName !== 'dialog') {
+                    return;
+                }
+                try {
+                    onTopLayer = onTopLayer || el.matches(':modal');
+                }
+                catch (_a) { }
+            });
+        }, { once: true });
+        floating.dispatchEvent(dialogAncestorQueryEvent);
+        let overTransforms = false;
+        if (!(reference instanceof VirtualElement)) {
+            const root = (withinReference ? reference : floating);
+            const containingBlock = isContainingBlock(root) ? root : getContainingBlock(root);
+            let css = {};
+            if (containingBlock !== null && getWindow(containingBlock) !== containingBlock) {
+                css = getComputedStyle(containingBlock);
+                // The overlay is "over transforms" when the containing block uses specific CSS...
+                overTransforms =
+                    css.transform !== 'none' ||
+                        css.translate !== 'none' ||
+                        (css.containerType ? css.containerType !== 'normal' : false) ||
+                        (css.backdropFilter ? css.backdropFilter !== 'none' : false) ||
+                        (css.filter ? css.filter !== 'none' : false) ||
+                        css.willChange.search('transform') > -1 ||
+                        css.willChange.search('translate') > -1 ||
+                        ['paint', 'layout', 'strict', 'content'].some((value) => (css.contain || '').includes(value));
+            }
+            if (onTopLayer && overTransforms && containingBlock) {
+                const rect = containingBlock.getBoundingClientRect();
+                // Margins and borders are not included in the bounding client rect and need to be handled separately
+                const { marginInlineStart = '0', marginBlockStart = '0', borderInlineWidth = '0', borderBlockWidth = '0' } = css;
+                const inlineBoxAdjust = parseFloat(marginInlineStart) + parseFloat(borderInlineWidth);
+                const blockBoxAdjust = parseFloat(marginBlockStart) + parseFloat(borderBlockWidth);
+                diffCoords.x = rect.x + inlineBoxAdjust - containingBlock.scrollLeft;
+                diffCoords.y = rect.y + blockBoxAdjust - containingBlock.scrollTop;
+            }
+        }
+        if (onTopLayer && topLayerIsFloating) {
+            return {
+                x: x + diffCoords.x,
+                y: y + diffCoords.y,
+                data: diffCoords
+            };
+        }
+        if (onTopLayer) {
+            return {
+                x,
+                y,
+                data: diffCoords
+            };
+        }
+        return {
+            x: x - diffCoords.x,
+            y: y - diffCoords.y,
+            data: diffCoords
+        };
+    }
+});

package/esm/core/utils/reflect-utils.d.ts

@@ -38,7 +38,7 @@ export declare function getPartPrefixedAttributes(part: string, attributes: stri
  * @param callback A function to handle forwarded attributes.
  * @returns A `MutationObserver`.
  */
-export declare function forwardAttributes(from: HTMLElement, attributes: string[], callback: AttributeForwardingCallback): MutationObserver;
+export declare function forwardAttributes(from: HTMLElement, attributes: string[], callback: AttributeForwardingCallback, genericize?: boolean): MutationObserver;
 /**
  * Clones attributes from one element to another.
  * @param from The source element to clone attributes from.

package/esm/core/utils/reflect-utils.js

@@ -98,10 +98,10 @@ export function getPartPrefixedAttributes(part, attributes) {
  * @param callback A function to handle forwarded attributes.
  * @returns A `MutationObserver`.
  */
-export function forwardAttributes(from, attributes, callback) {
+export function forwardAttributes(from, attributes, callback, genericize = true) {
     // Set the source element's role to presentation to prevent duplicated ARIA attributes being
     // seen by assistive technology
-    if (attributes.some(attr => attr.toLowerCase().startsWith('aria-'))) {
+    if (genericize && attributes.some(attr => attr.toLowerCase().startsWith('aria-'))) {
         from.setAttribute('role', 'presentation');
     }
     // Parses an attribute and sends it to the provided callback

package/esm/core/utils/utils.d.ts

@@ -90,6 +90,13 @@ export declare function isPointerOverElement({ x, y }: {
  * @param value {string | null} - A selector string to query the DOM for the target element
  */
 export declare function locateTargetHeuristic(element: HTMLElement, id?: string | null): HTMLElement | null;
+/**
+ * Attempts to locate an element by id within its root node.
+ * @param element The element to search from.
+ * @param id The id of the element to locate.
+ * @returns The element if found, otherwise `null`.
+ */
+export declare function locateElementById(element: HTMLElement, id?: string | null): HTMLElement | null;
 /**
  * Replaces an existing element with a new element, while optionally moving the children of the old element into the new element.
  * @param oldElement The element to replace.
@@ -98,3 +105,10 @@ export declare function locateTargetHeuristic(element: HTMLElement, id?: string
  * @returns The new element.
  */
 export declare function replaceElement<T extends HTMLElement>(oldElement: HTMLElement, newElement: T, preserveChildren?: boolean): T;
+/**
+ * Coerces a string separated by `separator` into an array of strings.
+ * @param value The string to coerce.
+ * @params [separator=','] The separator to use when splitting the string.
+ * @returns An array of strings.
+ */
+export declare function coerceStringToArray<T extends string>(value: string, separator?: string): T[];

package/esm/core/utils/utils.js

@@ -168,19 +168,28 @@ export function isPointerOverElement({ x, y }, element) {
 export function locateTargetHeuristic(element, id) {
     let targetEl = null;
     if (id) {
-        const rootNode = element.getRootNode();
-        // Special case handling for a `:host` selector to easily target a host element
-        // from within a shadow tree, given that this is a very common scenario
-        if (id === ':host' && rootNode instanceof ShadowRoot) {
-            return rootNode.host;
-        }
-        targetEl = rootNode.querySelector(`#${id}`);
+        targetEl = locateElementById(element, id);
     }
     if (!targetEl) {
         return element.parentElement;
     }
     return targetEl;
 }
+/**
+ * Attempts to locate an element by id within its root node.
+ * @param element The element to search from.
+ * @param id The id of the element to locate.
+ * @returns The element if found, otherwise `null`.
+ */
+export function locateElementById(element, id) {
+    const rootNode = element.getRootNode();
+    // Special case handling for a `:host` selector to easily target a host element
+    // from within a shadow tree, given that this is a very common scenario
+    if (id === ':host' && rootNode instanceof ShadowRoot) {
+        return rootNode.host;
+    }
+    return rootNode.querySelector(`#${id}`);
+}
 /**
  * Replaces an existing element with a new element, while optionally moving the children of the old element into the new element.
  * @param oldElement The element to replace.
@@ -196,3 +205,12 @@ export function replaceElement(oldElement, newElement, preserveChildren = true)
     oldElement.remove();
     return newElement;
 }
+/**
+ * Coerces a string separated by `separator` into an array of strings.
+ * @param value The string to coerce.
+ * @params [separator=','] The separator to use when splitting the string.
+ * @returns An array of strings.
+ */
+export function coerceStringToArray(value, separator = ',') {
+    return value.split(separator).map(p => p.trim());
+}

package/esm/date-picker/base/base-date-picker.d.ts

@@ -35,7 +35,7 @@ export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
 export declare abstract class BaseDatePickerComponent<TPublicValue, TPrivateValue, TFoundation extends BaseDatePickerFoundation<IBaseDatePickerAdapter, TPublicValue, TPrivateValue>> extends BaseComponent implements IBaseDatePickerComponent<TPublicValue> {
     protected _foundation: TFoundation;
     constructor();
-    connectedCallback(): Promise<void>;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     /** Gets/sets the value of the component. */

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

@@ -11,13 +11,14 @@ export class BaseDatePickerComponent extends BaseComponent {
     constructor() {
         super();
     }
-    async connectedCallback() {
+    connectedCallback() {
         if (this.querySelector(BASE_DATE_PICKER_CONSTANTS.selectors.INPUT)) {
             this._foundation.initialize();
         }
         else {
-            await ensureChild(this, BASE_DATE_PICKER_CONSTANTS.selectors.INPUT);
-            this._foundation.initialize();
+            ensureChild(this, BASE_DATE_PICKER_CONSTANTS.selectors.INPUT).then(() => {
+                this._foundation.initialize();
+            });
         }
     }
     disconnectedCallback() {

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

@@ -21,6 +21,7 @@ export declare class DateRangePickerFoundation extends BaseDatePickerFoundation<
     private _toInputBlurListener;
     private _toInputValueChangedListener;
     constructor(adapter: IDateRangePickerAdapter);
+    initialize(): void;
     protected _initializeState(): void;
     protected _initializeListeners(): void;
     protected _initializeValueChangedListeners(): void;

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

@@ -20,6 +20,10 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
         this._toInputFocusListener = evt => this._onToInputFocus();
         this._toInputBlurListener = evt => this._onToInputBlur(evt);
     }
+    initialize() {
+        super.initialize();
+        this._setFormattedToInputValue(true);
+    }
     _initializeState() {
         this._applyToMask();
         if (!this._from) {

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

@@ -32,6 +32,7 @@ export declare const DIALOG_CONSTANTS: {
         MOVEABLE: string;
         MOVE_TARGET: string;
         OPEN: string;
+        BODY_OPEN: string;
         INITIAL_FOCUS: string;
         DFEAULT_MOVE_TARGET: string;
     };

package/esm/dialog/dialog-constants.js

@@ -24,7 +24,8 @@ const attributes = {
     POSITION_Y: 'position-y',
     MOVEABLE: 'moveable',
     MOVE_TARGET: 'move-target',
-    OPEN: 'forge-dialog-open',
+    OPEN: 'open',
+    BODY_OPEN: 'forge-dialog-open',
     INITIAL_FOCUS: 'forge-dialog-focus',
     DFEAULT_MOVE_TARGET: 'forge-dialog-move-target'
 };

package/esm/dialog/dialog-foundation.js

@@ -124,7 +124,7 @@ export class DialogFoundation {
                 this._adapter.setSurfacePosition(this._positionX, this._positionY, this._positionType);
             }
         }
-        this._adapter.setBodyAttribute(DIALOG_CONSTANTS.attributes.OPEN, 'true');
+        this._adapter.setBodyAttribute(DIALOG_CONSTANTS.attributes.BODY_OPEN, 'true');
         this._adapter.registerTransitionEndHandler(this._transitionEndHandler);
         this._setDocumentKeydownListener(this._escapeClose);
         this._adapter.setAnimating(true);
@@ -175,7 +175,7 @@ export class DialogFoundation {
                 this._adapter.emitHostEvent(DIALOG_CONSTANTS.events.CLOSE);
                 const openDialogs = this._adapter.getOpenDialogs(`${DIALOG_CONSTANTS.elementName}[${DIALOG_CONSTANTS.attributes.OPEN}]`);
                 if (!openDialogs.length) {
-                    this._adapter.removeBodyAttribute(DIALOG_CONSTANTS.attributes.OPEN);
+                    this._adapter.removeBodyAttribute(DIALOG_CONSTANTS.attributes.BODY_OPEN);
                 }
                 this._adapter.setAnimating(false);
                 resolve();
@@ -364,10 +364,7 @@ export class DialogFoundation {
     }
     set open(value) {
         if (this._open !== value) {
-            value = Boolean(value);
-            if (value !== this._open) {
-                this._applyOpen(value);
-            }
+            this._applyOpen(!!value);
         }
     }
     get fullscreen() {

package/esm/dialog/dialog.js

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

package/esm/drawer/mini-drawer/mini-drawer.js

@@ -8,7 +8,7 @@ import { attachShadowTemplate, CustomElement } from '@tylertech/forge-core';
 import { BaseDrawerAdapter, BaseDrawerComponent, BaseDrawerFoundation } from '../base';
 import { MINI_DRAWER_CONSTANTS } from './mini-drawer-constants';
 const template = '<template><div class=\"forge-drawer__root\" part=\"root\"><div class=\"forge-drawer forge-drawer--mini\" part=\"container\"><slot name=\"header\"></slot><div class=\"forge-drawer__content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></div></div></template>';
-const styles = '.forge-drawer{width:256px;width:var(--forge-drawer-width,256px);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;overflow:hidden;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:250ms;transition-duration:250ms;-webkit-transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-timing-function:cubic-bezier(0.4,0,0.2,1)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer__content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;grid-row:2}.forge-drawer__content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer__content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer__content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer__content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer__content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,var(--forge-shape-full,9999px));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer__content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer--left{border-right-width:1px;border-right-style:solid}.forge-drawer--right{border-left-width:1px;border-left-style:solid}.forge-drawer--right.forge-drawer--closing{-webkit-transform:translateX(100%);transform:translateX(100%);right:0;left:auto;z-index:1;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;-webkit-transition-duration:.2s;transition-duration:.2s}.forge-drawer--right.forge-drawer--closed{-webkit-transform:translateX(100%);transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer--closing{-webkit-transform:translateX(-100%);transform:translateX(-100%);left:0;z-index:1;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;-webkit-transition-duration:.2s;transition-duration:.2s}.forge-drawer--closed{-webkit-transform:translateX(-100%);transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer--no-transition{-webkit-transition:none!important;transition:none!important}.forge-drawer__root{z-index:1;z-index:var(--forge-z-index-surface,1);height:100%}.forge-drawer--mini{width:56px;width:var(--forge-drawer-mini-width,56px);z-index:1;z-index:var(--forge-z-index-surface,1);-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition-property:width,-webkit-transform;transition-property:width,-webkit-transform;transition-property:transform,width;transition-property:transform,width,-webkit-transform;-webkit-transition:width .2s cubic-bezier(.4, 0, .2, 1);transition:width .2s cubic-bezier(.4, 0, .2, 1)}.forge-drawer--mini .forge-drawer__content{overflow:hidden}.forge-drawer--closed{width:0}:host{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;overflow:hidden!important;width:56px;width:var(--forge-drawer-mini-width,56px);overflow:visible!important}:host([direction=right]){min-width:56px;min-width:var(--forge-drawer-mini-width,56px);width:auto}:host([direction=right]) .forge-drawer__root{position:relative}:host(:not([open])){display:none}:host([hover]) .forge-drawer--right{position:absolute;right:0}:host([hover]) .forge-drawer:hover{width:256px!important;width:var(--forge-drawer-width,256px)!important;-webkit-transition:width .3s cubic-bezier(.4, 0, .2, 1) .3s;transition:width .3s cubic-bezier(.4, 0, .2, 1) .3s}:host([hover]) .forge-drawer:hover .forge-drawer__content{overflow:auto;overflow:overlay}';
+const styles = '.forge-drawer{width:256px;width:var(--forge-drawer-width,256px);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;overflow:hidden;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:250ms;transition-duration:250ms;-webkit-transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-timing-function:cubic-bezier(0.4,0,0.2,1)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer__content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;grid-row:2}.forge-drawer__content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer__content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer__content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer__content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer__content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,var(--forge-shape-full,9999px));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer__content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer--left{border-right-width:1px;border-right-style:solid}.forge-drawer--right{border-left-width:1px;border-left-style:solid}.forge-drawer--right.forge-drawer--closing{-webkit-transform:translateX(100%);transform:translateX(100%);right:0;left:auto;z-index:1;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;-webkit-transition-duration:.2s;transition-duration:.2s}.forge-drawer--right.forge-drawer--closed{-webkit-transform:translateX(100%);transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer--closing{-webkit-transform:translateX(-100%);transform:translateX(-100%);left:0;z-index:1;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;-webkit-transition-duration:.2s;transition-duration:.2s}.forge-drawer--closed{-webkit-transform:translateX(-100%);transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer--no-transition{-webkit-transition:none!important;transition:none!important}.forge-drawer__root{z-index:1;z-index:var(--forge-z-index-surface,1);height:100%}.forge-drawer--mini{width:56px;width:var(--forge-drawer-mini-width,56px);z-index:1;z-index:var(--forge-z-index-surface,1);-webkit-transition:width .2s cubic-bezier(.4, 0, .2, 1);transition:width .2s cubic-bezier(.4, 0, .2, 1)}.forge-drawer--mini .forge-drawer__content{overflow:hidden}.forge-drawer--closed{width:0}:host{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;overflow:hidden!important;width:56px;width:var(--forge-drawer-mini-width,56px);overflow:visible!important}:host([direction=right]){min-width:56px;min-width:var(--forge-drawer-mini-width,56px);width:auto}:host([direction=right]) .forge-drawer__root{position:relative}:host(:not([open])){display:none}:host([hover]) .forge-drawer--right{position:absolute;right:0}:host([hover]) .forge-drawer:hover{width:256px!important;width:var(--forge-drawer-width,256px)!important;-webkit-transition:width .3s cubic-bezier(.4, 0, .2, 1) .3s;transition:width .3s cubic-bezier(.4, 0, .2, 1) .3s}:host([hover]) .forge-drawer:hover .forge-drawer__content{overflow:auto;overflow:overlay}';
 /**
  * The web component class behind the `<forge-mini-drawer>` custom element.
  *

package/esm/expansion-panel/expansion-panel-adapter.js

@@ -34,7 +34,6 @@ export class ExpansionPanelAdapter extends BaseAdapter {
                 openIconElement.open = true;
             }
         }
-        this._headerElement.setAttribute('aria-expanded', open ? 'true' : 'false');
     }
     setHeaderVisibility(visible) {
         if (visible) {
@@ -109,7 +108,6 @@ export class ExpansionPanelAdapter extends BaseAdapter {
                             this._contentElement.style.height = `${this._contentElement.scrollHeight}px`;
                         }
                         this._contentElement.style.opacity = '1';
-                        this._headerElement.setAttribute('aria-expanded', 'true');
                         if (openIconElement) {
                             openIconElement.open = true;
                         }
@@ -122,7 +120,6 @@ export class ExpansionPanelAdapter extends BaseAdapter {
                             this._contentElement.style.height = '0px';
                         }
                         this._contentElement.style.opacity = '0';
-                        this._headerElement.setAttribute('aria-expanded', 'false');
                         if (openIconElement) {
                             openIconElement.open = false;
                         }
@@ -145,7 +142,6 @@ export class ExpansionPanelAdapter extends BaseAdapter {
                 }
                 this._contentElement.style.removeProperty('visibility');
                 this._contentElement.style.removeProperty('opacity');
-                this._headerElement.setAttribute('aria-expanded', 'true');
                 if (openIconElement) {
                     openIconElement.open = true;
                 }
@@ -159,7 +155,6 @@ export class ExpansionPanelAdapter extends BaseAdapter {
                 }
                 this._contentElement.style.opacity = '0';
                 this._contentElement.style.visibility = 'hidden';
-                this._headerElement.setAttribute('aria-expanded', 'false');
                 if (openIconElement) {
                     openIconElement.open = false;
                 }