@tylertech/forge 3.0.0-next.11 → 3.0.0-next.13

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

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * A callback function for handling forwarded attributes.
+ */
+export type AttributeForwardingCallback = (name: string, value: string | null, part: string | null) => void;
+/**
+ * ARIA attributes capable of being reflected to a shadow element.
+ */
+export declare const REFLECTIVE_ARIA_ATTRIBUTES: string[];
+/**
+ * ARIA attributes typically useful for input elements.
+ */
+export declare const INPUT_ARIA_ATTRIBUTES: string[];
+/**
+ * Property names relevant to input elements.
+ */
+export declare const INPUT_PROPERTIES: (keyof HTMLInputElement)[];
+/**
+ * Attributes for buttons when used within a form.
+ */
+export declare const BUTTON_FORM_ATTRIBUTES: string[];
+/**
+ * Gets an array of attribute names prefixed by a part name and colon.
+ * @param part The part name of a shadow element.
+ * @param attributes An array of attribute names to prefix.
+ * @returns An array of prefixed attribute name strings.
+ */
+export declare function getPartPrefixedAttributes(part: string, attributes: string[]): string[];
+/**
+ * Observes a configured array of attributes set on a source element and forwards them to a
+ * callback function.
+ * @param from The element to forward attributes from.
+ * @param attributes Forwarded attributes.
+ * @param callback A function to handle forwarded attributes.
+ * @returns A `MutationObserver`.
+ */
+export declare function forwardAttributes(from: HTMLElement, attributes: string[], callback: AttributeForwardingCallback): MutationObserver;
+/**
+ * Clones attributes from one element to another.
+ * @param from The source element to clone attributes from.
+ * @param to The target element to clone attributes to.
+ * @param attributes The list of attributes to clone.
+ */
+export declare function cloneAttributes(from: HTMLElement, to: HTMLElement, attributes: string[]): void;
+/**
+ * Clones properties from one element to another.
+ * @param from The source element to clone properties from.
+ * @param to The target element to clone properties to.
+ * @param attributes The list of properties to clone.
+ */
+export declare function cloneProperties<T, K extends keyof T>(from: T, to: T, properties: K[]): void;
+/**
+ * Clones the validation message of one input element to another.
+ * @param from The source input element to clone the validation message from.
+ * @param to The target input element to clone the validation message to.
+ */
+export declare function cloneValidationMessage(from: HTMLInputElement, to: HTMLInputElement): void;
+/**
+ * A utility class for switching between elements.
+ */
+export declare class SlottedElementAdapter<T extends HTMLElement = HTMLElement> {
+    private _el;
+    private _attachCallback;
+    /**
+     * Returns the element associated with this adapter.
+     */
+    get el(): T;
+    /**
+     * Clones the specified attributes from one element to another.
+     *
+     * @param from - The element to clone attributes from.
+     * @param to - The element to clone attributes to.
+     * @param attributes - The names of the attributes to clone.
+     */
+    static cloneAttributes(from: HTMLElement, to: HTMLElement, attributes: string[]): void;
+    /**
+     * Clones the input specific properties from one element to another.
+     *
+     * @param from - The element to clone properties from.
+     * @param to - The element to clone properties to.
+     */
+    static cloneProperties(from: HTMLElement, to: HTMLElement, properties: (keyof HTMLElement)[]): void;
+    /**
+     * Clones the validation message from one element to another.
+     *
+     * @param from - The element to clone the validation message from.
+     * @param to - The element to clone the validation message to.
+     */
+    static cloneValidationMessage(from: HTMLElement, to: HTMLElement): void;
+    /**
+     * Initializes the adapter with an initial element and attach callback.
+     *
+     * @param el - The element to associate with the adapter.
+     * @param attachCallback - The callback to invoke when attaching the element.
+     */
+    initialize(el: T, attachCallback: (newEl: T, oldEl: T) => void): void;
+    /**
+     * Replaces the attached element.
+     *
+     * @param el - The new element to attach.
+     */
+    attachElement(el: T): void;
+}

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

@@ -0,0 +1,227 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { isDefined } from '@tylertech/forge-core';
+/**
+ * ARIA attributes capable of being reflected to a shadow element.
+ */
+export const REFLECTIVE_ARIA_ATTRIBUTES = [
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-busy',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colspan',
+    'aria-current',
+    'aria-description',
+    'aria-disabled',
+    'aria-expanded',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-level',
+    'aria-live',
+    'aria-modal',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext'
+];
+/**
+ * ARIA attributes typically useful for input elements.
+ */
+export const INPUT_ARIA_ATTRIBUTES = [
+    'aria-autocomplete',
+    'aria-description',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label'
+];
+/**
+ * Property names relevant to input elements.
+ */
+export const INPUT_PROPERTIES = [
+    'checked',
+    'disabled',
+    'indeterminate',
+    'readOnly',
+    'required',
+    'value'
+];
+/**
+ * Attributes for buttons when used within a form.
+ */
+export const BUTTON_FORM_ATTRIBUTES = [
+    'name',
+    'value',
+    'formaction',
+    'formenctype',
+    'formmethod',
+    'formnovalidate',
+    'formtarget'
+];
+/**
+ * Gets an array of attribute names prefixed by a part name and colon.
+ * @param part The part name of a shadow element.
+ * @param attributes An array of attribute names to prefix.
+ * @returns An array of prefixed attribute name strings.
+ */
+export function getPartPrefixedAttributes(part, attributes) {
+    return attributes.map(attr => `${part}:${attr}`);
+}
+/**
+ * Observes a configured array of attributes set on a source element and forwards them to a
+ * callback function.
+ * @param from The element to forward attributes from.
+ * @param attributes Forwarded attributes.
+ * @param callback A function to handle forwarded attributes.
+ * @returns A `MutationObserver`.
+ */
+export function forwardAttributes(from, attributes, callback) {
+    // 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-'))) {
+        from.setAttribute('role', 'presentation');
+    }
+    // Parses an attribute and sends it to the provided callback
+    const forwardAttribute = (name) => {
+        const nameParts = name.split(':');
+        const partName = nameParts.length === 2 ? nameParts[0] : null;
+        const attrName = nameParts.length === 2 ? nameParts[1] : nameParts[0];
+        const value = from.getAttribute(name);
+        callback.call({}, attrName, value, partName);
+    };
+    // First, forward any attributes already set on the source element
+    attributes.forEach(attr => forwardAttribute(attr));
+    // Forward new and changed attributes as needed
+    const observerConfig = { attributeFilter: attributes };
+    const observerCallback = mutationList => {
+        mutationList.forEach(mutation => forwardAttribute(mutation.attributeName));
+    };
+    const observer = new MutationObserver(observerCallback);
+    observer.observe(from, observerConfig);
+    return observer;
+}
+/**
+ * Clones attributes from one element to another.
+ * @param from The source element to clone attributes from.
+ * @param to The target element to clone attributes to.
+ * @param attributes The list of attributes to clone.
+ */
+export function cloneAttributes(from, to, attributes) {
+    attributes.forEach(attr => {
+        const value = from.getAttribute(attr);
+        if (value !== null) {
+            to.setAttribute(attr, value);
+        }
+    });
+}
+/**
+ * Clones properties from one element to another.
+ * @param from The source element to clone properties from.
+ * @param to The target element to clone properties to.
+ * @param attributes The list of properties to clone.
+ */
+export function cloneProperties(from, to, properties) {
+    properties.forEach(prop => {
+        const value = from[prop];
+        if (isDefined(value)) {
+            to[prop] = value;
+        }
+    });
+}
+/**
+ * Clones the validation message of one input element to another.
+ * @param from The source input element to clone the validation message from.
+ * @param to The target input element to clone the validation message to.
+ */
+export function cloneValidationMessage(from, to) {
+    const message = from.validationMessage;
+    if (message) {
+        to.setCustomValidity(message);
+    }
+}
+/**
+ * A utility class for switching between elements.
+ */
+export class SlottedElementAdapter {
+    /**
+     * Returns the element associated with this adapter.
+     */
+    get el() {
+        return this._el;
+    }
+    /**
+     * Clones the specified attributes from one element to another.
+     *
+     * @param from - The element to clone attributes from.
+     * @param to - The element to clone attributes to.
+     * @param attributes - The names of the attributes to clone.
+     */
+    static cloneAttributes(from, to, attributes) {
+        cloneAttributes(from, to, attributes);
+    }
+    /**
+     * Clones the input specific properties from one element to another.
+     *
+     * @param from - The element to clone properties from.
+     * @param to - The element to clone properties to.
+     */
+    static cloneProperties(from, to, properties) {
+        cloneProperties(from, to, properties);
+    }
+    /**
+     * Clones the validation message from one element to another.
+     *
+     * @param from - The element to clone the validation message from.
+     * @param to - The element to clone the validation message to.
+     */
+    static cloneValidationMessage(from, to) {
+        if (Object.hasOwnProperty.call(from, 'validationMessage') && Object.hasOwnProperty.call(to, 'validationMessage')) {
+            cloneValidationMessage(from, to);
+        }
+        else {
+            console.warn('cloneValidationMessage() requires both elements to be input elements.');
+        }
+    }
+    /**
+     * Initializes the adapter with an initial element and attach callback.
+     *
+     * @param el - The element to associate with the adapter.
+     * @param attachCallback - The callback to invoke when attaching the element.
+     */
+    initialize(el, attachCallback) {
+        this._attachCallback = attachCallback;
+        this._el = el;
+    }
+    /**
+     * Replaces the attached element.
+     *
+     * @param el - The new element to attach.
+     */
+    attachElement(el) {
+        this._attachCallback(el, this._el);
+        this._el = el;
+    }
+}

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

@@ -90,3 +90,11 @@ 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;
+/**
+ * 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.
+ * @param newElement The element to replace with.
+ * @param preserveChildren Whether or not to preserve the children of the old element in the new element.
+ * @returns The new element.
+ */
+export declare function replaceElement(oldElement: HTMLElement, newElement: HTMLElement, preserveChildren?: boolean): HTMLElement;

package/esm/core/utils/utils.js

@@ -181,3 +181,18 @@ export function locateTargetHeuristic(element, id) {
     }
     return targetEl;
 }
+/**
+ * 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.
+ * @param newElement The element to replace with.
+ * @param preserveChildren Whether or not to preserve the children of the old element in the new element.
+ * @returns The new element.
+ */
+export function replaceElement(oldElement, newElement, preserveChildren = true) {
+    if (preserveChildren) {
+        newElement.append(...oldElement.childNodes);
+    }
+    oldElement.insertAdjacentElement('beforebegin', newElement);
+    oldElement.remove();
+    return newElement;
+}

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

@@ -92,10 +92,10 @@ export class BaseDatePickerFoundation {
         this._handleInput(this._adapter.getInputValue());
     }
     _onInputFocus(evt) {
-        this._adapter.selectInputText();
         if (this.masked && this.showMaskFormat) {
             this._applyMask();
         }
+        this._adapter.selectInputText();
     }
     _onInputBlur(evt) {
         if (this.masked && this.showMaskFormat) {

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

@@ -5,17 +5,14 @@
  */
 export function createToggleElement(iconName) {
     const iconButtonElement = document.createElement('forge-icon-button');
+    iconButtonElement.type = 'button';
+    iconButtonElement.tabIndex = -1;
+    iconButtonElement.setAttribute('aria-label', 'Toggle calendar');
     iconButtonElement.slot = 'trailing';
-    iconButtonElement.dense = true;
-    iconButtonElement.densityLevel = 3;
+    iconButtonElement.density = 'medium';
     iconButtonElement.style.marginRight = '4px';
-    const buttonElement = document.createElement('button');
-    buttonElement.type = 'button';
-    buttonElement.tabIndex = -1;
-    buttonElement.setAttribute('aria-label', 'Toggle calendar');
-    iconButtonElement.appendChild(buttonElement);
     const iconElement = document.createElement('forge-icon');
     iconElement.name = iconName;
-    buttonElement.appendChild(iconElement);
+    iconButtonElement.appendChild(iconElement);
     return iconButtonElement;
 }

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

@@ -271,11 +271,11 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
         }
     }
     _onToInputFocus() {
-        this._adapter.selectToInputText();
         if (this.masked && this._showMaskFormat) {
             this._initializeMask();
             this._initializeToMask();
         }
+        this._adapter.selectToInputText();
     }
     _onToInputBlur(evt) {
         if (this._masked && !this._adapter.isInputFocused(evt.relatedTarget)) {
@@ -288,11 +288,11 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
         }
     }
     _onInputFocus(evt) {
-        this._adapter.selectInputText();
         if (this.masked && this._showMaskFormat) {
             this._initializeMask();
             this._initializeToMask();
         }
+        this._adapter.selectInputText();
     }
     _onInputBlur(evt) {
         if (this.masked && !this._adapter.isInputFocused(evt.relatedTarget)) {

package/esm/drawer/drawer/drawer.js

@@ -8,7 +8,7 @@ import { CustomElement, attachShadowTemplate } from '@tylertech/forge-core';
 import { DRAWER_CONSTANTS } from './drawer-constants';
 import { BaseDrawerAdapter, BaseDrawerComponent, BaseDrawerFoundation } from '../base';
 const template = '<template><div class=\"forge-drawer\" part=\"root\"><slot name=\"header\"></slot><div class=\"forge-drawer__content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></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{width:16px;width:var(--forge-scrollbar-width,16px);height:16px;height:var(--forge-scrollbar-height,16px)}.forge-drawer__content::-webkit-scrollbar-corner{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-drawer__content::-webkit-scrollbar-track{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-drawer__content::-webkit-scrollbar-track:hover{background-color:#ececec;background-color:var(--forge-theme-scrollbar-track-hover,#ececec)}.forge-drawer__content::-webkit-scrollbar-thumb{background-color:#bdbdbd;background-color:var(--forge-theme-scrollbar-thumb,#bdbdbd);height:32px;height:var(--forge-scrollbar-min-height,32px);width:32px;width:var(--forge-scrollbar-min-width,32px);border-radius:10px;border-radius:var(--forge-scrollbar-border-radius,10px);border-width:3px;border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-clip:content-box}.forge-drawer__content::-webkit-scrollbar-thumb:hover{background-color:#9e9e9e;background-color:var(--forge-theme-scrollbar-thumb-hover,#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}: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}@media not all and (-webkit-min-device-pixel-ratio:0),not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){:host([open]){-webkit-transform:translateZ(0);transform:translateZ(0)}}}';
+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}: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}@media not all and (-webkit-min-device-pixel-ratio:0),not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){:host([open]){-webkit-transform:translateZ(0);transform:translateZ(0)}}}';
 /**
  * The web component class behind the `<forge-drawer>` 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{width:16px;width:var(--forge-scrollbar-width,16px);height:16px;height:var(--forge-scrollbar-height,16px)}.forge-drawer__content::-webkit-scrollbar-corner{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-drawer__content::-webkit-scrollbar-track{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-drawer__content::-webkit-scrollbar-track:hover{background-color:#ececec;background-color:var(--forge-theme-scrollbar-track-hover,#ececec)}.forge-drawer__content::-webkit-scrollbar-thumb{background-color:#bdbdbd;background-color:var(--forge-theme-scrollbar-thumb,#bdbdbd);height:32px;height:var(--forge-scrollbar-min-height,32px);width:32px;width:var(--forge-scrollbar-min-width,32px);border-radius:10px;border-radius:var(--forge-scrollbar-border-radius,10px);border-width:3px;border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-clip:content-box}.forge-drawer__content::-webkit-scrollbar-thumb:hover{background-color:#9e9e9e;background-color:var(--forge-theme-scrollbar-thumb-hover,#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-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}';
 /**
  * The web component class behind the `<forge-mini-drawer>` custom element.
  *

package/esm/drawer/modal-drawer/modal-drawer.js

@@ -11,7 +11,7 @@ import { ModalDrawerAdapter } from './modal-drawer-adapter';
 import { MODAL_DRAWER_CONSTANTS } from './modal-drawer-constants';
 import { ModalDrawerFoundation } from './modal-drawer-foundation';
 const template = '<template><forge-backdrop class=\"forge-drawer__scrim\" hidden part=\"scrim\"></forge-backdrop><div class=\"forge-drawer forge-drawer--modal\" part=\"root\"><slot name=\"header\"></slot><div class=\"forge-drawer__content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></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{width:16px;width:var(--forge-scrollbar-width,16px);height:16px;height:var(--forge-scrollbar-height,16px)}.forge-drawer__content::-webkit-scrollbar-corner{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-drawer__content::-webkit-scrollbar-track{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-drawer__content::-webkit-scrollbar-track:hover{background-color:#ececec;background-color:var(--forge-theme-scrollbar-track-hover,#ececec)}.forge-drawer__content::-webkit-scrollbar-thumb{background-color:#bdbdbd;background-color:var(--forge-theme-scrollbar-thumb,#bdbdbd);height:32px;height:var(--forge-scrollbar-min-height,32px);width:32px;width:var(--forge-scrollbar-min-width,32px);border-radius:10px;border-radius:var(--forge-scrollbar-border-radius,10px);border-width:3px;border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-clip:content-box}.forge-drawer__content::-webkit-scrollbar-thumb:hover{background-color:#9e9e9e;background-color:var(--forge-theme-scrollbar-thumb-hover,#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--modal{-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);z-index:8;z-index:var(--forge-z-index-dialog,8);position:absolute;top:0;max-width:80%}.forge-drawer--modal+.mdc-drawer-scrim{background-color:rgba(0,0,0,.32)}.forge-drawer--modal.forge-drawer--closed,.forge-drawer--modal.forge-drawer--closing{-webkit-box-shadow:none;box-shadow:none}.forge-drawer--modal.forge-drawer--closing.forge-drawer--right{-webkit-transform:translateX(100%);transform:translateX(100%)}.forge-drawer__scrim{z-index:8;z-index:var(--forge-z-index-dialog,8)}.forge-drawer__scrim--closed{display:none}.forge-drawer.forge-drawer--right{right:0}.forge-drawer--display-none{display:none!important}';
+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--modal{-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);z-index:8;z-index:var(--forge-z-index-dialog,8);position:absolute;top:0;max-width:80%}.forge-drawer--modal+.mdc-drawer-scrim{background-color:rgba(0,0,0,.32)}.forge-drawer--modal.forge-drawer--closed,.forge-drawer--modal.forge-drawer--closing{-webkit-box-shadow:none;box-shadow:none}.forge-drawer--modal.forge-drawer--closing.forge-drawer--right{-webkit-transform:translateX(100%);transform:translateX(100%)}.forge-drawer__scrim{z-index:8;z-index:var(--forge-z-index-dialog,8)}.forge-drawer__scrim--closed{display:none}.forge-drawer.forge-drawer--right{right:0}.forge-drawer--display-none{display:none!important}';
 /**
  * The web component class behind the `<forge-modal-drawer>` custom element.
  *

package/esm/expansion-panel/expansion-panel-adapter.d.ts

@@ -20,6 +20,7 @@ export declare class ExpansionPanelAdapter extends BaseAdapter<IExpansionPanelCo
     private _headerElement;
     private _contentElement;
     private _headerSlotElement;
+    private _activeAnimationFrame;
     constructor(component: IExpansionPanelComponent);
     initialize(open: boolean, orientation?: string): void;
     setHeaderVisibility(visible: boolean): void;

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

@@ -98,8 +98,9 @@ export class ExpansionPanelAdapter extends BaseAdapter {
             else {
                 this._contentElement.style.transition = EXPANSION_PANEL_CONSTANTS.strings.EXPANSION_VERTICAL_TRANSITION;
             }
-            window.requestAnimationFrame(() => {
-                window.requestAnimationFrame(() => {
+            this._activeAnimationFrame = window.requestAnimationFrame(() => {
+                this._activeAnimationFrame = window.requestAnimationFrame(() => {
+                    this._activeAnimationFrame = undefined;
                     if (opening) {
                         if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
                             this._contentElement.style.width = `${this._contentElement.scrollWidth}px`;
@@ -130,6 +131,10 @@ export class ExpansionPanelAdapter extends BaseAdapter {
             });
         }
         else {
+            if (this._activeAnimationFrame) {
+                window.cancelAnimationFrame(this._activeAnimationFrame);
+                this._activeAnimationFrame = undefined;
+            }
             this._contentElement.style.removeProperty('transition');
             if (opening) {
                 if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {

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

@@ -10,7 +10,7 @@ import { ExpansionPanelAdapter } from './expansion-panel-adapter';
 import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
 import { ExpansionPanelFoundation } from './expansion-panel-foundation';
 const template = '<template><div class=\"forge-expansion-panel\" part=\"root\"><div class=\"forge-expansion-panel__header\" part=\"header\"><slot name=\"header\"></slot></div><div class=\"forge-expansion-panel__content\" style=\"height: 0; opacity: 0; visibility: hidden;\" part=\"content\"><slot></slot></div></div></template>';
-const styles = '.forge-expansion-panel{display:block;display:var(--forge-expansion-panel-display,block);height:auto;height:var(--forge-expansion-panel-height,auto)}.forge-expansion-panel__header{outline:0}.forge-expansion-panel__header:hover{cursor:pointer}.forge-expansion-panel__header forge-open-icon{margin-left:auto}.forge-expansion-panel__content{overflow:hidden;overflow:var(--forge-expansion-panel-content-overflow,hidden);max-height:none;max-height:var(--forge-expansion-panel-content-max-height,none)}.forge-expansion-panel__content::-webkit-scrollbar{width:16px;width:var(--forge-scrollbar-width,16px);height:16px;height:var(--forge-scrollbar-height,16px)}.forge-expansion-panel__content::-webkit-scrollbar-corner{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-expansion-panel__content::-webkit-scrollbar-track{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-expansion-panel__content::-webkit-scrollbar-track:hover{background-color:#ececec;background-color:var(--forge-theme-scrollbar-track-hover,#ececec)}.forge-expansion-panel__content::-webkit-scrollbar-thumb{background-color:#bdbdbd;background-color:var(--forge-theme-scrollbar-thumb,#bdbdbd);height:32px;height:var(--forge-scrollbar-min-height,32px);width:32px;width:var(--forge-scrollbar-min-width,32px);border-radius:10px;border-radius:var(--forge-scrollbar-border-radius,10px);border-width:3px;border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-clip:content-box}.forge-expansion-panel__content::-webkit-scrollbar-thumb:hover{background-color:#9e9e9e;background-color:var(--forge-theme-scrollbar-thumb-hover,#9e9e9e)}:host{display:block}:host([hidden]){display:none}';
+const styles = '.forge-expansion-panel{display:block;display:var(--forge-expansion-panel-display,block);height:auto;height:var(--forge-expansion-panel-height,auto)}.forge-expansion-panel__header{outline:0}.forge-expansion-panel__header:hover{cursor:pointer}.forge-expansion-panel__header forge-open-icon{margin-left:auto}.forge-expansion-panel__content{overflow:hidden;overflow:var(--forge-expansion-panel-content-overflow,hidden);max-height:none;max-height:var(--forge-expansion-panel-content-max-height,none)}.forge-expansion-panel__content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-expansion-panel__content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-expansion-panel__content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-expansion-panel__content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-expansion-panel__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-expansion-panel__content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}:host{display:block}:host([hidden]){display:none}';
 /**
  * A web component that encapsulates the functionality of expanding/collapsing content when clicked.
  *

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

@@ -12,6 +12,14 @@ export declare const FIELD_CONSTANTS: {
         REQUIRED: string;
         HOST_LABEL_FLOATING: string;
     };
+    observedAttributes: {
+        DENSITY: string;
+        FLOAT_LABEL_TYPE: string;
+        SHAPE: string;
+        INVALID: string;
+        REQUIRED: string;
+        HOST_LABEL_FLOATING: string;
+    };
     observedInputAttributes: string[];
     selectors: {
         INPUT: string;

package/esm/field/field-constants.js

@@ -3,14 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-const attributes = {
-    DENSITY: 'density',
-    FLOAT_LABEL_TYPE: 'float-label-type',
-    SHAPE: 'shape',
-    INVALID: 'invalid',
-    REQUIRED: 'required',
-    HOST_LABEL_FLOATING: `forge-label-floating`
-};
 const selectors = {
     INPUT: 'input,textarea'
 };
@@ -32,8 +24,18 @@ const classes = {
     ROOMY: 'forge-field--roomy',
     LABEL: 'forge-field--label'
 };
+const observedAttributes = {
+    DENSITY: 'density',
+    FLOAT_LABEL_TYPE: 'float-label-type',
+    SHAPE: 'shape',
+    INVALID: 'invalid',
+    REQUIRED: 'required',
+    HOST_LABEL_FLOATING: `forge-label-floating`
+};
+const attributes = Object.assign({}, observedAttributes);
 export const FIELD_CONSTANTS = {
     attributes,
+    observedAttributes,
     observedInputAttributes,
     selectors,
     classes

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

@@ -51,6 +51,7 @@ export declare class FieldFoundation {
     protected _onTrailingSlotChanged(evt: Event): void;
     protected _onAddonEndSlotChanged(evt: Event): void;
     protected _initializeLabel(): void;
+    private _destroyFloatingLabel;
     protected _detectLeadingContent(): void;
     protected _detectTrailingContent(): void;
     protected _detectAddonEndContent(): void;