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

package/esm/deprecated/icon-button/deprecated-icon-button-component-delegate.js

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICON_CLASS_NAME } from '../../constants';
+import { BaseComponentDelegate } from '../../core/delegates/base-component-delegate';
+import { ICON_CONSTANTS } from '../../icon/icon-constants';
+import { DEPRECATED_ICON_BUTTON_CONSTANTS } from './deprecated-icon-button-constants';
+export class DeprecatedIconButtonComponentDelegate extends BaseComponentDelegate {
+    constructor(config) {
+        super(config);
+    }
+    destroy() {
+        this._buttonElement = undefined;
+    }
+    get buttonElement() {
+        return this._buttonElement;
+    }
+    _build() {
+        var _a;
+        const component = document.createElement(DEPRECATED_ICON_BUTTON_CONSTANTS.elementName);
+        this._buttonElement = document.createElement('button');
+        this._buttonElement.type = 'button';
+        component.appendChild(this._buttonElement);
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.tooltip) {
+            const tooltip = document.createElement('forge-tooltip');
+            tooltip.textContent = this._config.options.tooltip;
+            if (this._config.options.tooltipPosition) {
+                tooltip.position = this._config.options.tooltipPosition;
+            }
+            component.appendChild(tooltip);
+        }
+        return component;
+    }
+    onClick(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', listener);
+    }
+    onFocus(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', listener);
+    }
+    onBlur(listener) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('blur', listener);
+    }
+    get iconElement() {
+        return this._iconElement;
+    }
+    get disabled() {
+        var _a;
+        return !!((_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.disabled);
+    }
+    set disabled(value) {
+        if (this._buttonElement) {
+            this._buttonElement.disabled = value;
+        }
+    }
+    _configure() {
+        this._configureIcon();
+    }
+    _configureIcon() {
+        var _a, _b, _c, _d;
+        if (!((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.iconName)) {
+            return;
+        }
+        const type = ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.iconType) || 'component';
+        switch (type) {
+            case 'font':
+                const classes = Array.isArray(this._config.options.iconClass) ? this._config.options.iconClass : [ICON_CLASS_NAME];
+                (_c = this._buttonElement) === null || _c === void 0 ? void 0 : _c.classList.add(...classes);
+                if (this._buttonElement) {
+                    this._buttonElement.textContent = this._config.options.iconName;
+                }
+                break;
+            case 'component':
+                this._iconElement = document.createElement(ICON_CONSTANTS.elementName);
+                this._iconElement.name = this._config.options.iconName;
+                if (this._config.options.iconExternal !== undefined) {
+                    this._iconElement.external = !!this._config.options.iconExternal;
+                }
+                if (this._config.options.iconExternalType) {
+                    this._iconElement.externalType = this._config.options.iconExternalType;
+                }
+                if (this._config.options.iconClass) {
+                    this._iconElement.classList.add(...this._config.options.iconClass);
+                }
+                (_d = this._buttonElement) === null || _d === void 0 ? void 0 : _d.appendChild(this._iconElement);
+                break;
+        }
+    }
+}

package/esm/deprecated/icon-button/deprecated-icon-button-constants.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const DEPRECATED_ICON_BUTTON_CONSTANTS: {
+    elementName: "forge-deprecated-icon-button";
+    observedAttributes: {
+        DISABLED: string;
+        TOGGLE: string;
+        IS_ON: string;
+        DENSITY_LEVEL: string;
+    };
+    attributes: {
+        ON_ICON: string;
+        DISABLED: string;
+        TOGGLE: string;
+        IS_ON: string;
+        DENSITY_LEVEL: string;
+    };
+    selectors: {
+        BUTTON: string;
+        ICON_LIKE: string;
+    };
+    events: {
+        TOGGLE: string;
+    };
+};

package/esm/deprecated/icon-button/deprecated-icon-button-constants.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}deprecated-icon-button`;
+const observedAttributes = {
+    DISABLED: 'disabled',
+    TOGGLE: 'toggle',
+    IS_ON: 'is-on',
+    DENSITY_LEVEL: 'density-level'
+};
+const attributes = Object.assign(Object.assign({}, observedAttributes), { ON_ICON: 'forge-icon-button-on' });
+const selectors = {
+    BUTTON: 'button,a',
+    ICON_LIKE: 'button > i,span,svg,img,forge-icon'
+};
+const events = {
+    TOGGLE: 'forge-icon-button-toggle'
+};
+export const DEPRECATED_ICON_BUTTON_CONSTANTS = {
+    elementName,
+    observedAttributes,
+    attributes,
+    selectors,
+    events
+};

package/esm/deprecated/icon-button/deprecated-icon-button.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+/**
+ * @deprecated Use `IIconButtonComponent` component instead.
+ */
+export interface IDeprecatedIconButtonComponent extends IBaseComponent {
+    disabled: boolean;
+    toggle: boolean;
+    isOn: boolean;
+    densityLevel: number;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-deprecated-icon-button': IDeprecatedIconButtonComponent;
+    }
+}
+/**
+ * @tag forge-deprecated-icon-button
+ *
+ * @deprecated Use the `<forge-icon-button>` element instead.
+ */
+export declare class DeprecatedIconButtonComponent extends BaseComponent implements IDeprecatedIconButtonComponent {
+    static get observedAttributes(): string[];
+    private _disabled;
+    private _toggle;
+    private _isOn;
+    private _densityLevel;
+    private _slotElement;
+    private _focusIndicator;
+    private _stateLayer;
+    private _buttonOrAnchorElement;
+    private _slotChangeListener;
+    private _buttonAttrMutationObserver;
+    private _keydownListener;
+    private _toggleClickListener;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private _onKeydown;
+    private _onSlotChange;
+    private _onToggle;
+    private _initialize;
+    private _syncDisabledState;
+    private _detachButton;
+    private _initializeToggle;
+    private _destroyToggle;
+    private _syncToggleState;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get toggle(): boolean;
+    set toggle(value: boolean);
+    get isOn(): boolean;
+    set isOn(value: boolean);
+    get densityLevel(): number;
+    set densityLevel(value: number);
+    focus(options?: FocusOptions | undefined): void;
+}

package/esm/deprecated/icon-button/deprecated-icon-button.js

@@ -0,0 +1,208 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, coerceNumber, CustomElement, ensureChildren, getShadowElement } from '@tylertech/forge-core';
+import { FocusIndicatorComponent, FOCUS_INDICATOR_CONSTANTS } from '../../focus-indicator';
+import { StateLayerComponent, STATE_LAYER_CONSTANTS } from '../../state-layer';
+import { DEPRECATED_ICON_BUTTON_CONSTANTS } from './deprecated-icon-button-constants';
+import { BaseComponent } from '../../core/base/base-component';
+import { IconComponent } from '../../icon/icon';
+const template = '<template><slot></slot><forge-focus-indicator part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer exportparts=\"surface:state-layer\"></forge-state-layer></template>';
+const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, inline-flex);--_icon-button-size:var(--forge-icon-button-size, 48px);--_icon-button-gap:var(--forge-icon-button-gap, 0);--_icon-button-icon-color:var(--forge-icon-button-icon-color, currentColor);--_icon-button-background-color:var(--forge-icon-button-background-color, none);--_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));--_icon-button-cursor:var(--forge-icon-button-cursor, pointer);--_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-border:var(--forge-icon-button-border, none);--_icon-button-shadow:var(--forge-icon-button-shadow, none);--_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_icon-button-shape:var(--forge-icon-button-shape, var(--forge-shape-full, 9999px));--_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));--_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));--_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));--_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));--_icon-button-shape-squared:var(--forge-icon-button-shape-squared, var(--forge-shape-medium, 4px));--_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);--_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);--_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));--_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));--_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);--_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);--_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));--_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_icon-button-density-medium-size:var(--forge-icon-button-density-medium-size, 36px);--_icon-button-density-medium-padding:var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-density-large-size:var(--forge-icon-button-density-large-size, var(--_icon-button-size));--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed);--_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);--_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}:host{display:var(--_icon-button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent;border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end)}:host([hidden]){display:none}::slotted(:is(button,a)){position:relative;z-index:0;display:var(--_icon-button-display);-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;gap:var(--_icon-button-gap);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--_icon-button-density-large-size);min-width:var(--_icon-button-density-large-size);border:var(--_icon-button-border);border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end);padding:var(--_icon-button-padding);-webkit-box-shadow:var(--_icon-button-shadow);box-shadow:var(--_icon-button-shadow);color:var(--_icon-button-icon-color);background:var(--_icon-button-background-color);font-size:var(--_icon-button-icon-size);cursor:var(--_icon-button-cursor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition-property:background,-webkit-box-shadow;transition-property:background,-webkit-box-shadow;transition-property:box-shadow,background;transition-property:box-shadow,background,-webkit-box-shadow;-webkit-transition-duration:var(--_icon-button-transition-duration);transition-duration:var(--_icon-button-transition-duration);-webkit-transition-timing-function:var(--_icon-button-transition-timing);transition-timing-function:var(--_icon-button-transition-timing);font-size:var(--_icon-button-icon-size);height:var(--_icon-button-size);width:var(--_icon-button-size)}::slotted(a){text-decoration:none;color:var(--_icon-button-icon-color)!important}forge-state-layer{--forge-state-layer-color:var(--_icon-button-icon-color)}forge-focus-indicator{--forge-focus-indicator-outward-offset:0px;--forge-focus-indicator-color:var(--_icon-button-focus-indicator-color);--forge-focus-indicator-shape-start-start:var(--_icon-button-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_icon-button-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_icon-button-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_icon-button-shape-end-end)}:host(:is([dense],[density=large]):not(:is([density=medium],[density-level]))){--_icon-button-size:var(--_icon-button-density-small-size);--_icon-button-icon-size:var(--_icon-button-density-small-icon-size);--_icon-button-padding:var(--_icon-button-density-small-padding);--forge-icon-font-size:var(--_icon-button-icon-size)}:host([dense]:not([density=large]):not([density=small]):is([density=medium],[density-level])){--_icon-button-size:var(--_icon-button-density-medium-size);--_icon-button-padding:var(--_icon-button-density-medium-padding)}:host([disabled]){cursor:var(--_icon-button-disabled-cursor)}:host([disabled]) ::slotted(button[disabled]){pointer-events:none;opacity:var(--_icon-button-disabled-opacity)}:host([toggle]:is([on],[is-on]):not([is-on=false])){--_icon-button-icon-color:var(--_icon-button-toggle-on-icon-color);--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-primary-container-low, #e8eaf6))}';
+/**
+ * @tag forge-deprecated-icon-button
+ *
+ * @deprecated Use the `<forge-icon-button>` element instead.
+ */
+let DeprecatedIconButtonComponent = class DeprecatedIconButtonComponent extends BaseComponent {
+    static get observedAttributes() {
+        return Object.values(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes);
+    }
+    constructor() {
+        super();
+        // State
+        this._disabled = false;
+        this._toggle = false;
+        this._isOn = false;
+        this._densityLevel = 0;
+        this._buttonOrAnchorElement = null;
+        // Listeners
+        this._slotChangeListener = this._onSlotChange.bind(this);
+        this._keydownListener = this._onKeydown.bind(this);
+        this._toggleClickListener = this._onToggle.bind(this);
+        attachShadowTemplate(this, template, styles);
+        this._slotElement = getShadowElement(this, 'slot:not([name])');
+        this._focusIndicator = getShadowElement(this, FOCUS_INDICATOR_CONSTANTS.elementName);
+        this._stateLayer = getShadowElement(this, STATE_LAYER_CONSTANTS.elementName);
+    }
+    connectedCallback() {
+        this._slotElement.addEventListener('slotchange', this._slotChangeListener);
+        if (this.children.length) {
+            this._initialize();
+        }
+        else {
+            ensureChildren(this).then(() => this._initialize());
+        }
+    }
+    disconnectedCallback() {
+        this._detachButton();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                return;
+            case DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.TOGGLE:
+                this.toggle = coerceBoolean(newValue);
+                return;
+            case DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.IS_ON:
+                this.isOn = coerceBoolean(newValue);
+                return;
+            case DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.DENSITY_LEVEL:
+                this.densityLevel = coerceNumber(newValue);
+                return;
+        }
+    }
+    _onKeydown(evt) {
+        if (evt.key === 'Enter' || evt.key === ' ') {
+            this._stateLayer.playAnimation();
+        }
+    }
+    _onSlotChange() {
+        this._detachButton();
+        this._initialize();
+    }
+    _onToggle() {
+        this.isOn = !this._isOn;
+        this.dispatchEvent(new CustomEvent(DEPRECATED_ICON_BUTTON_CONSTANTS.events.TOGGLE, { bubbles: true, composed: true, detail: this._isOn }));
+    }
+    _initialize() {
+        this._buttonOrAnchorElement = this.querySelector(DEPRECATED_ICON_BUTTON_CONSTANTS.selectors.BUTTON);
+        if (!this._buttonOrAnchorElement) {
+            return;
+        }
+        this._stateLayer.targetElement = this._buttonOrAnchorElement;
+        this._focusIndicator.targetElement = this._buttonOrAnchorElement;
+        this._buttonOrAnchorElement.addEventListener('keydown', this._keydownListener);
+        // Sync disabled state
+        if (this._buttonOrAnchorElement instanceof HTMLButtonElement && this._disabled && !this._buttonOrAnchorElement.disabled) {
+            this._buttonOrAnchorElement.disabled = true;
+        }
+        else {
+            this.disabled = this._buttonOrAnchorElement instanceof HTMLButtonElement && this._buttonOrAnchorElement.disabled;
+        }
+        if (this._toggle) {
+            this._initializeToggle();
+        }
+        // Listen for disabled attribute changes on the button
+        if (this._buttonOrAnchorElement instanceof HTMLButtonElement) {
+            this._buttonAttrMutationObserver = new MutationObserver(mutationList => {
+                if (mutationList.some(mutation => mutation.attributeName === 'disabled')) {
+                    this._syncDisabledState();
+                }
+            });
+            this._buttonAttrMutationObserver.observe(this._buttonOrAnchorElement, { attributes: true, attributeFilter: ['disabled'] });
+        }
+    }
+    _syncDisabledState() {
+        const isDisabled = this._buttonOrAnchorElement instanceof HTMLButtonElement && this._buttonOrAnchorElement.disabled;
+        this.toggleAttribute(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.DISABLED, isDisabled);
+    }
+    _detachButton() {
+        var _a;
+        (_a = this._buttonOrAnchorElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._keydownListener);
+        if (this._buttonAttrMutationObserver) {
+            this._buttonAttrMutationObserver.disconnect();
+            this._buttonAttrMutationObserver = undefined;
+        }
+    }
+    _initializeToggle() {
+        /* c8 ignore next 3 */
+        if (!this._buttonOrAnchorElement) {
+            return;
+        }
+        this._buttonOrAnchorElement.addEventListener('click', this._toggleClickListener);
+        this._syncToggleState();
+    }
+    _destroyToggle() {
+        var _a;
+        (_a = this._buttonOrAnchorElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this._toggleClickListener);
+    }
+    _syncToggleState() {
+        const iconLikeElements = Array.from(this.querySelectorAll(DEPRECATED_ICON_BUTTON_CONSTANTS.selectors.ICON_LIKE));
+        const onIconElement = iconLikeElements.find(el => el.hasAttribute(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.ON_ICON));
+        const offIconElements = iconLikeElements.filter(el => el !== onIconElement);
+        onIconElement === null || onIconElement === void 0 ? void 0 : onIconElement.toggleAttribute('hidden', !this._isOn);
+        offIconElements.forEach(el => el.toggleAttribute('hidden', this._isOn));
+        this.toggleAttribute(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.IS_ON, this._isOn);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        var _a;
+        value = Boolean(value);
+        if (this._disabled !== value) {
+            this._disabled = value;
+            (_a = this._buttonOrAnchorElement) === null || _a === void 0 ? void 0 : _a.toggleAttribute(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.DISABLED, this._disabled);
+            this.toggleAttribute(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+    get toggle() {
+        return this._toggle;
+    }
+    set toggle(value) {
+        value = Boolean(value);
+        if (this._toggle !== value) {
+            this._toggle = value;
+            if (this.isConnected) {
+                if (this._toggle) {
+                    this._initializeToggle();
+                }
+                else {
+                    this._destroyToggle();
+                }
+            }
+            this.toggleAttribute(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.TOGGLE, this._toggle);
+        }
+    }
+    get isOn() {
+        return this._isOn;
+    }
+    set isOn(value) {
+        value = Boolean(value);
+        if (this._isOn !== value) {
+            this._isOn = value;
+            if (this.isConnected) {
+                this._syncToggleState();
+            }
+        }
+    }
+    get densityLevel() {
+        return this._densityLevel;
+    }
+    set densityLevel(value) {
+        if (this._densityLevel !== value) {
+            this._densityLevel = value;
+            this.setAttribute(DEPRECATED_ICON_BUTTON_CONSTANTS.attributes.DENSITY_LEVEL, String(this._densityLevel));
+        }
+    }
+    focus(options) {
+        var _a;
+        (_a = this._buttonOrAnchorElement) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+};
+DeprecatedIconButtonComponent = __decorate([
+    CustomElement({
+        name: DEPRECATED_ICON_BUTTON_CONSTANTS.elementName,
+        dependencies: [
+            IconComponent,
+            FocusIndicatorComponent,
+            StateLayerComponent
+        ]
+    })
+], DeprecatedIconButtonComponent);
+export { DeprecatedIconButtonComponent };

package/esm/deprecated/icon-button/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './deprecated-icon-button';
+export * from './deprecated-icon-button-component-delegate';
+export * from './deprecated-icon-button-constants';
+/**
+ * @deprecated Use `defineIconButtonComponent()` instead for the `<forge-icon-button>` element.
+ */
+export declare function defineDeprecatedIconButtonComponent(): void;

package/esm/deprecated/icon-button/index.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { DeprecatedIconButtonComponent } from './deprecated-icon-button';
+export * from './deprecated-icon-button';
+export * from './deprecated-icon-button-component-delegate';
+export * from './deprecated-icon-button-constants';
+/**
+ * @deprecated Use `defineIconButtonComponent()` instead for the `<forge-icon-button>` element.
+ */
+export function defineDeprecatedIconButtonComponent() {
+    defineCustomElement(DeprecatedIconButtonComponent);
+}

package/esm/dialog/dialog.js

@@ -15,7 +15,7 @@ import { DialogFoundation } from './dialog-foundation';
 import { dialogStack, DIALOG_CONSTANTS, hideBackdrop, showBackdrop } from './dialog-constants';
 import { tryDismiss } from '../core/utils/dismissible-stack';
 const template = '<template><dialog class=\"forge-dialog\" part=\"root\"><forge-backdrop exportparts=\"root:backdrop\"></forge-backdrop><div class=\"surface\" part=\"surface\"><div class=\"move-handle-container\" part=\"move-handle-container\"><div class=\"move-handle\" part=\"move-handle\"><slot name=\"move-handle\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" part=\"move-handle-icon\"><path d=\"M3 15v-2h2v2H3m0-4V9h2v2H3m4 4v-2h2v2H7m0-4V9h2v2H7m4 4v-2h2v2h-2m0-4V9h2v2h-2m4 4v-2h2v2h-2m0-4V9h2v2h-2m4 4v-2h2v2h-2m0-4V9h2v2h-2z\"/></svg></slot></div></div><slot></slot></div></dialog></template>';
-const styles = '@-webkit-keyframes zoom-in{from{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}to{opacity:1;scale:1}}@keyframes zoom-in{from{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}to{opacity:1;scale:1}}@-webkit-keyframes zoom-out{from{opacity:1;scale:1}to{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}}@keyframes zoom-out{from{opacity:1;scale:1}to{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}}@-webkit-keyframes fade-in{from{opacity:var(--_dialog-fade-opacity)}to{opacity:1}}@keyframes fade-in{from{opacity:var(--_dialog-fade-opacity)}to{opacity:1}}@-webkit-keyframes fade-out{from{opacity:1}to{opacity:var(--_dialog-fade-opacity)}}@keyframes fade-out{from{opacity:1}to{opacity:var(--_dialog-fade-opacity)}}@-webkit-keyframes slide-in{from{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}to{opacity:1;translate:0 0}}@keyframes slide-in{from{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}to{opacity:1;translate:0 0}}@-webkit-keyframes slide-out{from{opacity:1;translate:0 0}to{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}}@keyframes slide-out{from{opacity:1;translate:0 0}to{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}}@layer base,nonmodal,animation,placement,size-strategy,preset,fullscreen,position-strategy,media; @layer base{:host{display:none;--forge-theme-surface:var(--forge-theme-surface-bright, #ffffff)}:host([hidden]){display:none}.forge-dialog{--_dialog-background:var(--forge-dialog-background, var(--forge-theme-surface-bright, #ffffff));--_dialog-shape:var(--forge-dialog-shape, var(--forge-shape-medium, 4px));--_dialog-elevation:var(--forge-dialog-elevation, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));--_dialog-spacing:var(--forge-dialog-spacing, auto);--_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, var(--_dialog-spacing));--_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, var(--_dialog-spacing));--_dialog-inline-start-spacing:var(--forge-dialog-inline-start-spacing, var(--_dialog-spacing));--_dialog-inline-end-spacing:var(--forge-dialog-inline-end-spacing, var(--_dialog-spacing));--_dialog-padding:var(--forge-dialog-padding, 0);--_dialog-width:var(--forge-dialog-width, fit-content);--_dialog-height:var(--forge-dialog-height, fit-content);--_dialog-min-width:var(--forge-dialog-min-width, 0);--_dialog-max-width:var(--forge-dialog-max-width, calc(100% - var(--forge-spacing-xxlarge, 48px)));--_dialog-min-height:var(--forge-dialog-min-height, 0);--_dialog-max-height:var(--forge-dialog-max-height, calc(100% - var(--forge-spacing-xxlarge, 48px)));--_dialog-z-index:var(--forge-dialog-z-index, var(--forge-z-index-dialog, 8));--_dialog-move-handle-color:var(--forge-dialog-move-handle-color, currentColor);--_dialog-move-handle-size:var(--forge-dialog-move-handle-size, 24px);--_dialog-move-handle-hover-cursor:var(--forge-dialog-move-handle-hover-cursor, grab);--_dialog-move-handle-active-cursor:var(--forge-dialog-move-handle-active-cursor, grabbing);--_dialog-move-handle-spacing:var(--forge-dialog-move-handle-spacing, calc(var(--forge-spacing-xxsmall, 4px) * -1) 0 0);--_dialog-move-transition-duration:var(--forge-dialog-move-transition-duration, var(--forge-animation-duration-short4, 200ms));--_dialog-move-transition-easing:var(--forge-dialog-move-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_dialog-moving-opacity:var(--forge-dialog-moving-opacity, 0.54);--_dialog-enter-animation-duration:var(--forge-dialog-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-enter-animation-easing:var(--forge-dialog-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_dialog-exit-animation-duration:var(--forge-dialog-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));--_dialog-exit-animation-easing:var(--forge-dialog-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));--_dialog-zoom-opacity:var(--forge-dialog-zoom-opacity, 0);--_dialog-zoom-scale:var(--forge-dialog-zoom-scale, 0.8);--_dialog-fade-opacity:var(--forge-dialog-fade-opacity, 0);--_dialog-slide-opacity:var(--forge-dialog-slide-opacity, 0);--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -30%);--_dialog-backdrop-opacity:var(--forge-dialog-backdrop-opacity, var(--forge-backdrop-opacity, 0.54));--_dialog-nonmodal-elevation:var(--forge-dialog-nonmodal-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_dialog-fullscreen-enter-animation-duration:var(--forge-dialog-fullscreen-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-fullscreen-exit-animation-duration:var(--forge-dialog-fullscreen-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));--_dialog-position-x:var(--forge-dialog-position-x, 0);--_dialog-position-y:var(--forge-dialog-position-y, 0);--_dialog-preset-sheet-enter-animation-duration:var(--forge-dialog-preset-sheet-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-preset-sheet-exit-animation-duration:var(--forge-dialog-preset-sheet-exit-animation-duration, var(--forge-animation-duration-short3, 150ms))}.forge-dialog{position:fixed;inset:0;z-index:var(--_dialog-z-index);background-color:transparent;color:inherit;border:none;width:auto;height:auto;padding:0;margin:0;overflow:visible;max-width:100%;max-height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.container{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%;height:100%}.surface{position:absolute;inset:0;background:var(--_dialog-background);-webkit-box-shadow:var(--_dialog-elevation);box-shadow:var(--_dialog-elevation);z-index:var(--_dialog-z-index);overflow:hidden;border-radius:var(--_dialog-shape);-webkit-margin-before:var(--_dialog-block-start-spacing);margin-block-start:var(--_dialog-block-start-spacing);-webkit-margin-after:var(--_dialog-block-end-spacing);margin-block-end:var(--_dialog-block-end-spacing);-webkit-margin-start:var(--_dialog-inline-start-spacing);margin-inline-start:var(--_dialog-inline-start-spacing);-webkit-margin-end:var(--_dialog-inline-end-spacing);margin-inline-end:var(--_dialog-inline-end-spacing);padding:var(--_dialog-padding);width:var(--_dialog-width);height:var(--_dialog-height);min-width:var(--_dialog-min-width);max-width:var(--_dialog-max-width);min-height:var(--_dialog-min-height);max-height:var(--_dialog-max-height);-webkit-box-sizing:border-box;box-sizing:border-box}dialog.forge-dialog::-webkit-backdrop{display:none}dialog.forge-dialog::backdrop{display:none}forge-backdrop{--forge-backdrop-opacity:var(--_dialog-backdrop-opacity);--forge-backdrop-enter-animation-duration:var(--_dialog-enter-animation-duration);--forge-backdrop-enter-animation-easing:var(--_dialog-enter-animation-easing);--forge-backdrop-exit-animation-duration:var(--_dialog-exit-animation-duration);--forge-backdrop-exit-animation-easing:var(--_dialog-exit-animation-easing)}:host(:not([moveable])) .move-handle{display:none}:host([moveable]:not([fullscreen]):not([preset])) .surface{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:var(--_dialog-move-transition-duration);transition-duration:var(--_dialog-move-transition-duration);-webkit-transition-timing-function:var(--_dialog-move-transition-easing);transition-timing-function:var(--_dialog-move-transition-easing)}:host([moveable]:not([fullscreen]):not([preset])) .surface:not(:hover) .move-handle-container{display:none}:host([moveable]:not([fullscreen]):not([preset])) .surface.moved{margin:0}:host([moveable]:not([fullscreen]):not([preset])) .surface.moving{opacity:var(--_dialog-moving-opacity)}:host([moveable]:not([fullscreen]):not([preset])) .move-handle-container{position:absolute;top:0;z-index:1;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;width:100%}:host([moveable]:not([fullscreen]):not([preset])) .move-handle-container .move-handle{fill:var(--_dialog-move-handle-color);height:var(--_dialog-move-handle-size);width:var(--_dialog-move-handle-size);margin:var(--_dialog-move-handle-spacing);touch-action:none}:host([moveable]:not([fullscreen]):not([preset])) .move-handle-container .move-handle:hover{cursor:var(--_dialog-move-handle-hover-cursor)}:host([moveable]:not([fullscreen]):not([preset])) .move-handle-container .move-handle:active{cursor:var(--_dialog-move-handle-active-cursor)}:host([moveable]:not([fullscreen]):not([preset])) .move-handle-container .move-handle svg{fill:currentColor}:host([visible]){display:initial}}@layer nonmodal{:host([mode=nonmodal]) .forge-dialog{pointer-events:none}:host([mode=nonmodal]) .container{display:contents}:host([mode=nonmodal]) .surface{--_dialog-elevation:var(--_dialog-nonmodal-elevation);pointer-events:all}:host([mode=nonmodal]) forge-backdrop{display:none}}@layer animation{:host([visible]:not([animation-type=none])) dialog.forge-dialog[open] .surface{-webkit-animation-duration:var(--_dialog-enter-animation-duration);animation-duration:var(--_dialog-enter-animation-duration);-webkit-animation-timing-function:var(--_dialog-enter-animation-easing);animation-timing-function:var(--_dialog-enter-animation-easing)}:host([visible]:not([animation-type=none])) dialog.forge-dialog[open] .surface.exiting{-webkit-animation-duration:var(--_dialog-exit-animation-duration);animation-duration:var(--_dialog-exit-animation-duration);-webkit-animation-timing-function:var(--_dialog-exit-animation-easing);animation-timing-function:var(--_dialog-exit-animation-easing)}:host([visible]:not([animation-type=none]):is(:not([animation-type]),[animation-type=zoom])) dialog.forge-dialog[open] .surface{-webkit-animation-name:zoom-in;animation-name:zoom-in}:host([visible]:not([animation-type=none]):is(:not([animation-type]),[animation-type=zoom])) dialog.forge-dialog[open] .surface.exiting{-webkit-animation-name:zoom-out;animation-name:zoom-out}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface{-webkit-animation-name:fade-in;animation-name:fade-in}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface.exiting{-webkit-animation-name:fade-out;animation-name:fade-out}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface{-webkit-animation-name:slide-in;animation-name:slide-in}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface.exiting{-webkit-animation-name:slide-out;animation-name:slide-out}}@layer placement{:host([placement=custom]) .surface{margin:0;top:var(--_dialog-position-x);left:var(--_dialog-position-y)}:host([placement=top]) .surface{--_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, 0);top:0;bottom:auto}:host([placement=top-right]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:0;left:auto;right:0;bottom:auto}:host([placement=top-left]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:0;left:0;right:auto;bottom:auto}:host([placement=bottom]) .surface{--_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, 0);top:auto;bottom:0}:host([placement=bottom-right]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:auto;left:auto;right:0;bottom:0}:host([placement=bottom-left]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:auto;left:0;right:auto;bottom:0}}@layer size-strategy{:host([size-strategy=container-inline]) .surface{width:100%}:host([size-strategy=container-block]) .surface{height:100%}}@layer preset{:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .forge-dialog{--_dialog-enter-animation-duration:var(--_dialog-preset-sheet-enter-animation-duration);--_dialog-exit-animation-duration:var(--_dialog-preset-sheet-exit-animation-duration)}:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface{-webkit-animation-name:slide-in;animation-name:slide-in}:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface.exiting{-webkit-animation-name:slide-out;animation-name:slide-out}:host(:is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface{--_dialog-max-width:var(--forge-dialog-max-width, none);--_dialog-max-height:var(--forge-dialog-max-height, none);inset:auto}:host([preset=left-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, -100% 0)}:host([preset=left-sheet]) .surface{left:0;bottom:0;top:0;height:100%;border-top-left-radius:0;border-bottom-left-radius:0}:host([preset=right-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 100% 0)}:host([preset=right-sheet]) .surface{right:0;bottom:0;top:0;height:100%;border-top-right-radius:0;border-bottom-right-radius:0}:host([preset=top-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -100%)}:host([preset=top-sheet]) .surface{top:0;left:0;right:0;border-top-left-radius:0;border-top-right-radius:0}:host([preset=bottom-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 100%)}:host([preset=bottom-sheet]) .surface{bottom:0;left:0;right:0;border-bottom-left-radius:0;border-bottom-right-radius:0}}@layer fullscreen{:host([fullscreen]) .forge-dialog{--_dialog-enter-animation-duration:var(--_dialog-fullscreen-enter-animation-duration);--_dialog-exit-animation-duration:var(--_dialog-fullscreen-exit-animation-duration)}:host([fullscreen]) .surface{height:100%;width:100%;max-width:none;max-height:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none}:host([fullscreen]) forge-backdrop{display:none}}@layer position-strategy{:host([position-strategy=viewport]) .forge-dialog{position:fixed}:host([position-strategy=container]) .forge-dialog{position:absolute}:host([position-strategy=container][preset$=-sheet]) .forge-dialog{contain:content}}@layer media{@media (prefers-reduced-motion:reduce){.surface{-webkit-animation-name:fade-in;animation-name:fade-in}.surface.exiting{-webkit-animation-name:fade-out;animation-name:fade-out}}}';
+const styles = '@-webkit-keyframes zoom-in{from{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}to{opacity:1;scale:1}}@keyframes zoom-in{from{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}to{opacity:1;scale:1}}@-webkit-keyframes zoom-out{from{opacity:1;scale:1}to{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}}@keyframes zoom-out{from{opacity:1;scale:1}to{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}}@-webkit-keyframes fade-in{from{opacity:var(--_dialog-fade-opacity)}to{opacity:1}}@keyframes fade-in{from{opacity:var(--_dialog-fade-opacity)}to{opacity:1}}@-webkit-keyframes fade-out{from{opacity:1}to{opacity:var(--_dialog-fade-opacity)}}@keyframes fade-out{from{opacity:1}to{opacity:var(--_dialog-fade-opacity)}}@-webkit-keyframes slide-in{from{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}to{opacity:1;translate:0 0}}@keyframes slide-in{from{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}to{opacity:1;translate:0 0}}@-webkit-keyframes slide-out{from{opacity:1;translate:0 0}to{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}}@keyframes slide-out{from{opacity:1;translate:0 0}to{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}}@layer base,nonmodal,animation,placement,size-strategy,preset,fullscreen,position-strategy,media; @layer base{:host{display:none;--forge-theme-surface:var(--forge-theme-surface-bright, #ffffff)}:host([hidden]){display:none}.forge-dialog{--_dialog-background:var(--forge-dialog-background, var(--forge-theme-surface-bright, #ffffff));--_dialog-shape:var(--forge-dialog-shape, var(--forge-shape-medium, 4px));--_dialog-elevation:var(--forge-dialog-elevation, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));--_dialog-spacing:var(--forge-dialog-spacing, auto);--_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, var(--_dialog-spacing));--_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, var(--_dialog-spacing));--_dialog-inline-start-spacing:var(--forge-dialog-inline-start-spacing, var(--_dialog-spacing));--_dialog-inline-end-spacing:var(--forge-dialog-inline-end-spacing, var(--_dialog-spacing));--_dialog-padding:var(--forge-dialog-padding, 0);--_dialog-width:var(--forge-dialog-width, fit-content);--_dialog-height:var(--forge-dialog-height, fit-content);--_dialog-min-width:var(--forge-dialog-min-width, 0);--_dialog-max-width:var(--forge-dialog-max-width, calc(100% - var(--forge-spacing-xxlarge, 48px)));--_dialog-min-height:var(--forge-dialog-min-height, 0);--_dialog-max-height:var(--forge-dialog-max-height, calc(100% - var(--forge-spacing-xxlarge, 48px)));--_dialog-z-index:var(--forge-dialog-z-index, var(--forge-z-index-dialog, 8));--_dialog-move-handle-color:var(--forge-dialog-move-handle-color, currentColor);--_dialog-move-handle-size:var(--forge-dialog-move-handle-size, 24px);--_dialog-move-handle-hover-cursor:var(--forge-dialog-move-handle-hover-cursor, grab);--_dialog-move-handle-active-cursor:var(--forge-dialog-move-handle-active-cursor, grabbing);--_dialog-move-handle-spacing:var(--forge-dialog-move-handle-spacing, calc(var(--forge-spacing-xxsmall, 4px) * -1) 0 0);--_dialog-move-transition-duration:var(--forge-dialog-move-transition-duration, var(--forge-animation-duration-short4, 200ms));--_dialog-move-transition-easing:var(--forge-dialog-move-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_dialog-moving-opacity:var(--forge-dialog-moving-opacity, 0.54);--_dialog-enter-animation-duration:var(--forge-dialog-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-enter-animation-easing:var(--forge-dialog-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_dialog-exit-animation-duration:var(--forge-dialog-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));--_dialog-exit-animation-easing:var(--forge-dialog-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));--_dialog-zoom-opacity:var(--forge-dialog-zoom-opacity, 0);--_dialog-zoom-scale:var(--forge-dialog-zoom-scale, 0.8);--_dialog-fade-opacity:var(--forge-dialog-fade-opacity, 0);--_dialog-slide-opacity:var(--forge-dialog-slide-opacity, 0);--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -30%);--_dialog-backdrop-opacity:var(--forge-dialog-backdrop-opacity, var(--forge-backdrop-opacity, 0.54));--_dialog-nonmodal-elevation:var(--forge-dialog-nonmodal-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_dialog-fullscreen-enter-animation-duration:var(--forge-dialog-fullscreen-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-fullscreen-exit-animation-duration:var(--forge-dialog-fullscreen-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));--_dialog-position-x:var(--forge-dialog-position-x, 0);--_dialog-position-y:var(--forge-dialog-position-y, 0);--_dialog-preset-sheet-enter-animation-duration:var(--forge-dialog-preset-sheet-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-preset-sheet-exit-animation-duration:var(--forge-dialog-preset-sheet-exit-animation-duration, var(--forge-animation-duration-short3, 150ms))}.forge-dialog{position:fixed;inset:0;z-index:var(--_dialog-z-index);background-color:transparent;color:inherit;border:none;width:auto;height:auto;padding:0;margin:0;overflow:visible;max-width:100%;max-height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.container{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%;height:100%}.surface{position:absolute;inset:0;background:var(--_dialog-background);-webkit-box-shadow:var(--_dialog-elevation);box-shadow:var(--_dialog-elevation);z-index:var(--_dialog-z-index);overflow:hidden;border-radius:var(--_dialog-shape);-webkit-margin-before:var(--_dialog-block-start-spacing);margin-block-start:var(--_dialog-block-start-spacing);-webkit-margin-after:var(--_dialog-block-end-spacing);margin-block-end:var(--_dialog-block-end-spacing);-webkit-margin-start:var(--_dialog-inline-start-spacing);margin-inline-start:var(--_dialog-inline-start-spacing);-webkit-margin-end:var(--_dialog-inline-end-spacing);margin-inline-end:var(--_dialog-inline-end-spacing);padding:var(--_dialog-padding);width:var(--_dialog-width);height:var(--_dialog-height);min-width:var(--_dialog-min-width);max-width:var(--_dialog-max-width);min-height:var(--_dialog-min-height);max-height:var(--_dialog-max-height);-webkit-box-sizing:border-box;box-sizing:border-box}dialog.forge-dialog::-webkit-backdrop{display:none}dialog.forge-dialog::backdrop{display:none}forge-backdrop{--forge-backdrop-opacity:var(--_dialog-backdrop-opacity);--forge-backdrop-enter-animation-duration:var(--_dialog-enter-animation-duration);--forge-backdrop-enter-animation-easing:var(--_dialog-enter-animation-easing);--forge-backdrop-exit-animation-duration:var(--_dialog-exit-animation-duration);--forge-backdrop-exit-animation-easing:var(--_dialog-exit-animation-easing)}:host(:not([moveable])) .move-handle{display:none}:host([moveable]:not([fullscreen])) .surface{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:var(--_dialog-move-transition-duration);transition-duration:var(--_dialog-move-transition-duration);-webkit-transition-timing-function:var(--_dialog-move-transition-easing);transition-timing-function:var(--_dialog-move-transition-easing)}:host([moveable]:not([fullscreen])) .surface:not(:hover) .move-handle-container{display:none}:host([moveable]:not([fullscreen])) .surface.moved{margin:0}:host([moveable]:not([fullscreen])) .surface.moving{opacity:var(--_dialog-moving-opacity)}:host([moveable]:not([fullscreen])) .move-handle-container{position:absolute;top:0;z-index:1;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;width:100%}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle{fill:var(--_dialog-move-handle-color);height:var(--_dialog-move-handle-size);width:var(--_dialog-move-handle-size);margin:var(--_dialog-move-handle-spacing);touch-action:none}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle:hover{cursor:var(--_dialog-move-handle-hover-cursor)}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle:active{cursor:var(--_dialog-move-handle-active-cursor)}:host([moveable]:not([fullscreen])) .move-handle-container .move-handle svg{fill:currentColor}:host([visible]){display:contents}}@layer nonmodal{:host([mode=nonmodal]) .forge-dialog{pointer-events:none}:host([mode=nonmodal]) .container{display:contents}:host([mode=nonmodal]) .surface{--_dialog-elevation:var(--_dialog-nonmodal-elevation);pointer-events:all}:host([mode=nonmodal]) forge-backdrop{display:none}}@layer animation{:host([visible]:not([animation-type=none])) dialog.forge-dialog[open] .surface{-webkit-animation-duration:var(--_dialog-enter-animation-duration);animation-duration:var(--_dialog-enter-animation-duration);-webkit-animation-timing-function:var(--_dialog-enter-animation-easing);animation-timing-function:var(--_dialog-enter-animation-easing)}:host([visible]:not([animation-type=none])) dialog.forge-dialog[open] .surface.exiting{-webkit-animation-duration:var(--_dialog-exit-animation-duration);animation-duration:var(--_dialog-exit-animation-duration);-webkit-animation-timing-function:var(--_dialog-exit-animation-easing);animation-timing-function:var(--_dialog-exit-animation-easing)}:host([visible]:not([animation-type=none]):is(:not([animation-type]),[animation-type=zoom])) dialog.forge-dialog[open] .surface{-webkit-animation-name:zoom-in;animation-name:zoom-in}:host([visible]:not([animation-type=none]):is(:not([animation-type]),[animation-type=zoom])) dialog.forge-dialog[open] .surface.exiting{-webkit-animation-name:zoom-out;animation-name:zoom-out}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface{-webkit-animation-name:fade-in;animation-name:fade-in}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface.exiting{-webkit-animation-name:fade-out;animation-name:fade-out}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface{-webkit-animation-name:slide-in;animation-name:slide-in}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface.exiting{-webkit-animation-name:slide-out;animation-name:slide-out}}@layer placement{:host([placement=custom]) .surface{margin:0;top:var(--_dialog-position-x);left:var(--_dialog-position-y)}:host([placement=top]) .surface{--_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, 0);top:0;bottom:auto}:host([placement=top-right]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:0;left:auto;right:0;bottom:auto}:host([placement=top-left]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:0;left:0;right:auto;bottom:auto}:host([placement=bottom]) .surface{--_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, 0);top:auto;bottom:0}:host([placement=bottom-right]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:auto;left:auto;right:0;bottom:0}:host([placement=bottom-left]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:auto;left:0;right:auto;bottom:0}}@layer size-strategy{:host([size-strategy=container-inline]) .surface{width:100%}:host([size-strategy=container-block]) .surface{height:100%}}@layer preset{:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .forge-dialog{--_dialog-enter-animation-duration:var(--_dialog-preset-sheet-enter-animation-duration);--_dialog-exit-animation-duration:var(--_dialog-preset-sheet-exit-animation-duration)}:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface{-webkit-animation-name:slide-in;animation-name:slide-in}:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface.exiting{-webkit-animation-name:slide-out;animation-name:slide-out}:host(:is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface{--_dialog-max-width:var(--forge-dialog-max-width, none);--_dialog-max-height:var(--forge-dialog-max-height, none);inset:auto;display:-webkit-inline-box;display:inline-flex}:host([preset=left-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, -100% 0)}:host([preset=left-sheet]) .surface{left:0;bottom:0;top:0;height:100%;border-top-left-radius:0;border-bottom-left-radius:0}:host([preset=right-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 100% 0)}:host([preset=right-sheet]) .surface{right:0;bottom:0;top:0;height:100%;border-top-right-radius:0;border-bottom-right-radius:0}:host([preset=top-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -100%)}:host([preset=top-sheet]) .surface{top:0;left:0;right:0;border-top-left-radius:0;border-top-right-radius:0}:host([preset=bottom-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 100%)}:host([preset=bottom-sheet]) .surface{bottom:0;left:0;right:0;border-bottom-left-radius:0;border-bottom-right-radius:0}}@layer fullscreen{:host([fullscreen]) .forge-dialog{--_dialog-enter-animation-duration:var(--_dialog-fullscreen-enter-animation-duration);--_dialog-exit-animation-duration:var(--_dialog-fullscreen-exit-animation-duration)}:host([fullscreen]) .surface{height:100%;width:100%;max-width:none;max-height:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none}:host([fullscreen]) forge-backdrop{display:none}}@layer position-strategy{:host([position-strategy=viewport]) .forge-dialog{position:fixed}:host([position-strategy=container]) .forge-dialog{position:absolute}:host([position-strategy=container][preset$=-sheet]) .forge-dialog{contain:content}}@layer media{@media (prefers-reduced-motion:reduce){.surface{-webkit-animation-name:fade-in;animation-name:fade-in}.surface.exiting{-webkit-animation-name:fade-out;animation-name:fade-out}}}';
 const BaseClass = WithDefaultAria(WithElementInternals(BaseComponent));
 /**
  * @tag forge-dialog

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{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;--forge-divider-margin:4px 0}@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:var(--forge-drawer-width,256px);background-color:var(--forge-theme-surface,#fff);border-color:var(--forge-theme-outline,#e0e0e0);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:var(--forge-animation-duration-medium1, 250ms);transition-duration:var(--forge-animation-duration-medium1, 250ms);-webkit-transition-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));transition-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,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:var(--forge-border-thin,1px);border-right-style:solid}.forge-drawer--right{border-left-width:var(--forge-border-thin,1px);border-left-style:solid}.forge-drawer--right.forge-drawer--closing{-webkit-transform:translateX(100%);transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;-webkit-transition-duration:var(--forge-animation-duration-short4, 200ms);transition-duration:var(--forge-animation-duration-short4, 200ms)}.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:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;-webkit-transition-duration:var(--forge-animation-duration-short4, 200ms);transition-duration:var(--forge-animation-duration-short4, 200ms)}.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;--forge-divider-margin:4px 0}@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{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;--forge-divider-margin:4px 0}: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:var(--forge-drawer-width,256px);background-color:var(--forge-theme-surface,#fff);border-color:var(--forge-theme-outline,#e0e0e0);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:var(--forge-animation-duration-medium1, 250ms);transition-duration:var(--forge-animation-duration-medium1, 250ms);-webkit-transition-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));transition-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,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:var(--forge-border-thin,1px);border-right-style:solid}.forge-drawer--right{border-left-width:var(--forge-border-thin,1px);border-left-style:solid}.forge-drawer--right.forge-drawer--closing{-webkit-transform:translateX(100%);transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;-webkit-transition-duration:var(--forge-animation-duration-short4, 200ms);transition-duration:var(--forge-animation-duration-short4, 200ms)}.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:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;-webkit-transition-duration:var(--forge-animation-duration-short4, 200ms);transition-duration:var(--forge-animation-duration-short4, 200ms)}.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:var(--forge-z-index-surface,1);height:100%}.forge-drawer--mini{width:var(--forge-drawer-mini-width,56px);z-index:var(--forge-z-index-surface,1);-webkit-transition:width var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1));transition:width var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 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:var(--forge-drawer-mini-width,56px);overflow:visible!important;--forge-divider-margin:4px 0}:host([direction=right]){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:var(--forge-drawer-width,256px)!important;-webkit-transition:width var(--forge-animation-duration-medium2, 300ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 1)) .3s;transition:width var(--forge-animation-duration-medium2, 300ms) var(--forge-animation-easing-standard, cubic-bezier(.2, 0, 0, 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{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}:host{--forge-divider-margin:4px 0}';
+const styles = '.forge-drawer{width:var(--forge-drawer-width,256px);background-color:var(--forge-theme-surface,#fff);border-color:var(--forge-theme-outline,#e0e0e0);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:var(--forge-animation-duration-medium1, 250ms);transition-duration:var(--forge-animation-duration-medium1, 250ms);-webkit-transition-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));transition-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,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:var(--forge-border-thin,1px);border-right-style:solid}.forge-drawer--right{border-left-width:var(--forge-border-thin,1px);border-left-style:solid}.forge-drawer--right.forge-drawer--closing{-webkit-transform:translateX(100%);transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;-webkit-transition-duration:var(--forge-animation-duration-short4, 200ms);transition-duration:var(--forge-animation-duration-short4, 200ms)}.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:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;-webkit-transition-duration:var(--forge-animation-duration-short4, 200ms);transition-duration:var(--forge-animation-duration-short4, 200ms)}.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{z-index:var(--forge-z-index-dialog,8);-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);position:absolute;top:0;max-width:80%}.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: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}:host{--forge-divider-margin:4px 0}';
 /**
  * The web component class behind the `<forge-modal-drawer>` custom element.
  *