@tylertech/forge 3.6.4 → 3.8.0-dev.0

package/esm/checkbox/checkbox.d.ts

@@ -99,7 +99,11 @@ export declare class CheckboxComponent extends CheckboxComponent_base implements
     labelClickedCallback(): void;
     labelChangedCallback(value: string | null): void;
     /** @ignore */
-    setFormValue(value: FormValue | null, state?: FormValue | null | undefined): void;
+    setFormValue(value: (FormValue & {
+        [key: string]: any;
+    }) | null, state?: (FormValue & {
+        [key: string]: any;
+    }) | null | undefined): void;
     /**
      * Gets/sets whether the checkbox is checked.
      * @default false

package/esm/chips/chip/chip-constants.d.ts

@@ -43,7 +43,7 @@ export declare const CHIP_CONSTANTS: {
     };
     defaults: {
         TYPE: ChipType;
-        THEME: Theme;
+        THEME: ChipTheme;
     };
 };
 export type ChipTheme = Theme;

package/esm/core/delegates/base-component-delegate.d.ts

@@ -5,7 +5,7 @@
  */
 export type BaseComponentDelegateProps<T extends HTMLElement> = Partial<T>;
 export interface IBaseComponentDelegateOptions {
-    style?: Partial<CSSStyleDeclaration> | {
+    style?: Partial<CSSStyleDeclaration> & {
         [key: string]: string;
     };
     attributes?: {

package/esm/core/mask/date-input-mask.d.ts

@@ -3,12 +3,12 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import IMask, { InputMask, Masked } from 'imask';
+import { InputMask, type AppendFlags, type FactoryArg, type Masked } from 'imask';
 export interface IDateInputMaskOptions {
     showMaskFormat?: boolean;
     pattern?: string;
     useBlockCharPlaceholder?: boolean;
-    prepareCallback?: (value: string, masked: Masked<string>, flags: IMask.AppendFlags, maskInstance: InputMask<IMask.MaskedPatternOptions>) => string;
+    prepareCallback?: (value: string, masked: Masked<string>, flags: AppendFlags, maskInstance: InputMask<FactoryArg>) => string;
     onChange?: (value: string) => void;
 }
 export declare const DEFAULT_DATE_MASK = "0`0{/}`0`0{/}`0`0`0`0";
@@ -20,7 +20,7 @@ export declare class DateInputMask {
     private _acceptListener;
     constructor(_element: HTMLInputElement, _options?: IDateInputMaskOptions);
     destroy(): void;
-    resolve(value: string): string;
+    resolve(value: string): void;
     private _onAccept;
     private get _isDefaultMask();
     private _createOptions;

package/esm/core/mask/date-input-mask.js

@@ -3,8 +3,8 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { InputMask, createMask, MaskedRange } from 'imask';
 import { isNumeric } from '@tylertech/forge-core';
+import { InputMask, MaskedRange, createMask } from 'imask';
 export const DEFAULT_DATE_MASK = '0`0{/}`0`0{/}`0`0`0`0';
 export class DateInputMask {
     constructor(_element, _options = {}) {
@@ -25,7 +25,7 @@ export class DateInputMask {
     }
     resolve(value) {
         const masked = createMask(this._maskOptions);
-        return masked.resolve(value);
+        masked.resolve(value);
     }
     _onAccept() {
         if (typeof this._options.onChange === 'function') {
@@ -36,11 +36,11 @@ export class DateInputMask {
         return this._options.pattern === DEFAULT_DATE_MASK;
     }
     _createOptions() {
-        const options = {
+        return {
             mask: this._options.pattern || DEFAULT_DATE_MASK,
             lazy: this._options.showMaskFormat === undefined ? false : !this._options.showMaskFormat,
             overwrite: true,
-            prepare: (value, masked, flags) => this._prepare(value, masked, flags, this._mask),
+            prepareChar: (value, masked, flags) => this._prepare(value, masked, flags, this._mask),
             blocks: {
                 MM: {
                     mask: MaskedRange,
@@ -65,7 +65,6 @@ export class DateInputMask {
                 }
             }
         };
-        return options;
     }
     _prepare(value, masked, flags, maskInstance) {
         if (typeof this._options.prepareCallback === 'function') {
@@ -77,8 +76,8 @@ export class DateInputMask {
         if (!flags.input || !value.length || !maskInstance) {
             return value;
         }
-        // eslint-disable-next-line @typescript-eslint/dot-notation
-        const isAllSelected = maskInstance['_selection'] && maskInstance['_selection'].end === 10;
+        const maskInstanceWithSelection = maskInstance;
+        const isAllSelected = maskInstanceWithSelection._selection && maskInstanceWithSelection._selection.end === 10;
         const currentValue = isAllSelected ? '' : maskInstance.value;
         if (!isNumeric(value)) {
             // Before we ignore this character let's do some checks for common scenarios where the user enters a slash to help with coercion
@@ -135,7 +134,7 @@ export class DateInputMask {
     }
     _setMaskedValueAdjusted(value, position) {
         this._mask.unmaskedValue = value;
-        window.requestAnimationFrame(() => this._mask.updateCursor(this._mask.cursorPos + position));
+        this._mask.updateCursor(this._mask.cursorPos + position);
     }
     updateMask() {
         this._mask.updateValue();

package/esm/core/mask/intermediate-time-parser.d.ts

@@ -3,7 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { InputMask } from 'imask';
+import { InputMask, type FactoryArg } from 'imask';
 import { TimeSegmentType } from './time-segment-parser';
 export declare const SEGMENT_CURSOR_POSITION: {
     'hours-start': number;
@@ -19,7 +19,7 @@ export declare class IntermediateTimeParser {
     private _char;
     private _mask;
     private _segmentParser;
-    constructor(_char: string, _mask: InputMask<IMask.AnyMaskedOptions>);
+    constructor(_char: string, _mask: InputMask<FactoryArg>);
     get value(): string;
     get numChar(): number;
     get asPaddedChar(): string;

package/esm/core/mask/intermediate-time-parser.js

@@ -39,8 +39,7 @@ export class IntermediateTimeParser {
         return value;
     }
     get isAllSelected() {
-        // eslint-disable-next-line @typescript-eslint/dot-notation
-        const { start, end } = this._mask['_selection'];
+        const { start, end } = this._mask._selection;
         return start === 0 && end > 0 && end === this._mask.value.length;
     }
     /** Determines if this is the first non-zero hours character being entered. */
@@ -100,7 +99,7 @@ export class IntermediateTimeParser {
     applyValue(value, cursorPos) {
         this._mask.unmaskedValue = value;
         if (cursorPos !== undefined) {
-            window.requestAnimationFrame(() => this._mask.updateCursor(SEGMENT_CURSOR_POSITION[cursorPos]));
+            this._mask.updateCursor(SEGMENT_CURSOR_POSITION[cursorPos]);
         }
     }
 }

package/esm/core/mask/time-input-mask.d.ts

@@ -3,13 +3,13 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import IMask, { InputMask, Masked } from 'imask';
+import { FactoryArg, InputMask, type AppendFlags, type Masked } from 'imask';
 export interface ITimeInputMaskOptions {
     showMaskFormat?: boolean;
     use24HourTime?: boolean;
     showSeconds?: boolean;
     onChange?: (value: string) => void;
-    prepareCallback?: (value: string, masked: Masked<string>, flags: IMask.AppendFlags, maskInstance: InputMask<IMask.AnyMaskedOptions>) => string;
+    prepareCallback?: (value: string, masked: Masked<string>, flags: AppendFlags, maskInstance: InputMask<FactoryArg>) => string;
 }
 export declare const TWELVE_HOUR_TIME_MASK = "0`0{:}`0`0 `AM";
 export declare const TWELVE_HOUR_TIME_MASK_WITH_SECONDS = "0`0{:}`0`0{:}`0`0 `AM";
@@ -23,7 +23,7 @@ export declare class TimeInputMask {
     private _acceptListener;
     constructor(_element: HTMLInputElement, _options?: ITimeInputMaskOptions);
     destroy(): void;
-    resolve(value: string): string;
+    resolve(value: string): void;
     update(): void;
     private _onAccept;
     private _createOptions;

package/esm/core/mask/time-input-mask.js

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { isNumeric } from '@tylertech/forge-core';
-import { createMask, InputMask, MaskedEnum } from 'imask';
+import { InputMask, MaskedEnum, createMask } from 'imask';
 import { IntermediateTimeParser } from './intermediate-time-parser';
 export const TWELVE_HOUR_TIME_MASK = '0`0{:}`0`0 `AM';
 export const TWELVE_HOUR_TIME_MASK_WITH_SECONDS = '0`0{:}`0`0{:}`0`0 `AM';
@@ -29,7 +29,7 @@ export class TimeInputMask {
     }
     resolve(value) {
         const masked = createMask(this._maskOptions);
-        return masked.resolve(value);
+        masked.resolve(value);
     }
     update() {
         this._mask.updateValue();
@@ -44,7 +44,7 @@ export class TimeInputMask {
             mask: this._getMaskFormat(),
             overwrite: true,
             lazy: !this._options.showMaskFormat,
-            prepare: (value, masked, flags) => this._prepare(value, masked, flags, this._mask),
+            prepareChar: (value, masked, flags) => this._prepare(value, masked, flags, this._mask),
             blocks: {
                 A: {
                     mask: MaskedEnum,
@@ -66,8 +66,7 @@ export class TimeInputMask {
         }
         // Whenever we paste text we don't care to send it through our custom prepare logic,
         // so just return the character being processed.
-        // eslint-disable-next-line @typescript-eslint/dot-notation
-        if (maskInstance['_inputEvent']?.inputType !== 'insertText') {
+        if (maskInstance._inputEvent?.inputType !== 'insertText') {
             return value;
         }
         return this._prepareDefault(value, maskInstance).toUpperCase();

package/esm/core/mixins/label/with-label-aware.d.ts

@@ -3,7 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { AbstractConstructor, MixinBase } from '../../../constants';
+import { AbstractConstructor, MixinBase, forgeLabelRef, updateTarget } from '../../../constants';
 import { IBaseComponent } from '../../base/base-component';
 /**
  * An element that can be associated with a Forge label component.
@@ -20,6 +20,9 @@ export interface IWithLabelAwareness extends IBaseComponent {
      * A callback for when the associated label is clicked.
      */
     labelClickedCallback?(): void;
+    [forgeLabelRef]?: {
+        [updateTarget](target: HTMLElement): boolean;
+    };
 }
 export declare abstract class WithLabelAwarenessContract {
     connectedCallback(): void;

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

@@ -135,11 +135,3 @@ export type DefaultAriaOptions = {
  * }
  */
 export declare function setDefaultAria(element: HTMLElement, internals: ElementInternals, properties: Partial<ARIAMixinStrict>, { setAttribute }?: DefaultAriaOptions): void;
-/**
- * Adds or removes a state from an element's custom state set.
- *
- * @param internals - The element's internals object.
- * @param state - The name of the custom state to toggle.
- * @param value - Whether to add or remove the state.
- */
-export declare function toggleState(internals: ElementInternals, state: string, value: boolean): void;

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

@@ -63,10 +63,13 @@ export const ARIA_PROPERTIES = [
 const ARIA_ATTRIBUTES_TO_PROPERTIES = {
     'aria-atomic': 'ariaAtomic',
     'aria-autocomplete': 'ariaAutoComplete',
+    'aria-braillelabel': 'ariaBrailleLabel',
+    'aria-brailleroledescription': 'ariaBrailleRoleDescription',
     'aria-busy': 'ariaBusy',
     'aria-checked': 'ariaChecked',
     'aria-colcount': 'ariaColCount',
     'aria-colindex': 'ariaColIndex',
+    'aria-colindextext': 'ariaColIndexText',
     'aria-colspan': 'ariaColSpan',
     'aria-current': 'ariaCurrent',
     'aria-description': 'ariaDescription',
@@ -87,10 +90,12 @@ const ARIA_ATTRIBUTES_TO_PROPERTIES = {
     'aria-posinset': 'ariaPosInSet',
     'aria-pressed': 'ariaPressed',
     'aria-readonly': 'ariaReadOnly',
+    'aria-relevant': 'ariaRelevant',
     'aria-required': 'ariaRequired',
     'aria-roledescription': 'ariaRoleDescription',
     'aria-rowcount': 'ariaRowCount',
     'aria-rowindex': 'ariaRowIndex',
+    'aria-rowindextext': 'ariaRowIndexText',
     'aria-rowspan': 'ariaRowSpan',
     'aria-selected': 'ariaSelected',
     'aria-setsize': 'ariaSetSize',
@@ -166,28 +171,3 @@ export function setDefaultAria(element, internals, properties, { setAttribute }
         }
     });
 }
-/**
- * Adds or removes a state from an element's custom state set.
- *
- * @param internals - The element's internals object.
- * @param state - The name of the custom state to toggle.
- * @param value - Whether to add or remove the state.
- */
-export function toggleState(internals, state, value) {
-    if (value) {
-        try {
-            internals.states.add(state);
-        }
-        catch {
-            internals.states.add(`--${state}`);
-        }
-    }
-    else {
-        try {
-            internals.states.delete(state);
-        }
-        catch {
-            internals.states.delete(`--${state}`);
-        }
-    }
-}

package/esm/core/utils/dismissible-stack.d.ts

@@ -4,12 +4,18 @@
  * License: Apache-2.0
  */
 export declare const tryDismiss: unique symbol;
+declare const DISMISSIBLE_STACK_INSTANCE_KEY: unique symbol;
 export interface IDismissibleStackState<T = string> {
     [key: string]: T;
 }
 export interface IDismissible {
     [tryDismiss](state?: IDismissibleStackState): boolean;
 }
+declare global {
+    interface Window {
+        [DISMISSIBLE_STACK_INSTANCE_KEY]: DismissibleStack<IDismissible>;
+    }
+}
 export declare class DismissibleStack<T extends IDismissible> {
     private _deferredDismiss;
     /**
@@ -78,3 +84,4 @@ export declare class DismissibleStack<T extends IDismissible> {
      */
     isMostRecent(el: T): boolean;
 }
+export {};

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

@@ -3,10 +3,9 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { FlipOptions, ShiftOptions, HideOptions, Placement, Strategy, OffsetOptions, MiddlewareData, ArrowOptions } from '@floating-ui/dom';
+import { ArrowOptions, FlipOptions, HideOptions, MiddlewareData, OffsetOptions, Placement, ShiftOptions, Strategy } from '@floating-ui/dom';
 export type PositionPlacement = Placement;
 export type PositionStrategy = Strategy;
-export declare const DEFAULT_FALLBACK_PLACEMENTS: PositionPlacement[];
 export interface IPositionElementResult {
     x: number;
     y: number;

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

@@ -3,19 +3,8 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { computePosition, flip as flipMiddleware, hide as hideMiddleware, shift as shiftMiddleware, offset as offsetMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';
+import { arrow as arrowMiddleware, computePosition, flip as flipMiddleware, hide as hideMiddleware, offset as offsetMiddleware, shift as shiftMiddleware } from '@floating-ui/dom';
 import { roundByDPR } from './utils';
-export const DEFAULT_FALLBACK_PLACEMENTS = [
-    'top-start',
-    'top',
-    'top-end',
-    'left-start',
-    'left',
-    'left-end',
-    'right-start',
-    'right',
-    'right-end'
-];
 export class VirtualElement {
     constructor(x, y, height = 0, width = 0) {
         this.x = x;
@@ -57,10 +46,7 @@ export class VirtualElement {
  * @param {IPositionElementConfig} config Configuration to provide when positioning the element.
  * @returns {IPositionElementResult} The result of the positioning logic.
  */
-export async function positionElementAsync({ element, anchorElement, placement = 'bottom', offset = false, offsetOptions, strategy = 'fixed', apply = true, flip = true, flipOptions = {
-    fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS,
-    fallbackStrategy: 'initialPlacement'
-}, shift = true, shiftOptions, hide = false, hideOptions, arrowElement, arrowOptions = {} }) {
+export async function positionElementAsync({ element, anchorElement, placement = 'bottom', offset = false, offsetOptions, strategy = 'fixed', apply = true, flip = true, flipOptions, shift = true, shiftOptions, hide = false, hideOptions, arrowElement, arrowOptions = {} }) {
     const middleware = [];
     //
     // Order of the following middleware is **important**
@@ -68,12 +54,12 @@ export async function positionElementAsync({ element, anchorElement, placement =
     if (offset) {
         middleware.push(offsetMiddleware(offsetOptions));
     }
-    if (shift) {
-        middleware.push(shiftMiddleware(shiftOptions));
-    }
     if (flip) {
         middleware.push(flipMiddleware(flipOptions));
     }
+    if (shift) {
+        middleware.push(shiftMiddleware(shiftOptions));
+    }
     if (hide) {
         middleware.push(hideMiddleware(hideOptions));
     }
@@ -90,12 +76,11 @@ export async function positionElementAsync({ element, anchorElement, placement =
             translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`
         };
         Object.assign(element.style, styles);
-        // We use `display` here to ensure that any child overlays are also hidden
         if (middlewareData.hide?.referenceHidden) {
-            element.style.display = 'none';
+            element.style.visibility = 'hidden';
         }
         else {
-            element.style.removeProperty('display');
+            element.style.removeProperty('visibility');
         }
     }
     return {

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

@@ -154,3 +154,17 @@ export declare function frame(): Promise<void>;
  * @returns `true` if the object is an instance of the type, otherwise `false`.
  */
 export declare function isInstanceOf<T>(obj: any, name: string): obj is T;
+/**
+ * Determines if an element is visible based on its computed styles.
+ * @param element The element to check.
+ * @returns `true` if the element is visible, otherwise `false`.
+ */
+export declare function checkVisibility(element: HTMLElement): boolean;
+/**
+ * Adds or removes a state from an element's custom state set.
+ *
+ * @param internals - The element's internals object.
+ * @param state - The name of the custom state to toggle.
+ * @param value - Whether to add or remove the state.
+ */
+export declare function toggleState(internals: ElementInternals, state: string, value: boolean): void;

package/esm/core/utils/utils.js

@@ -276,7 +276,7 @@ export function tryCreateAriaControlsPlaceholder() {
  */
 export function setAriaControls(component) {
     const placeholderDiv = document.getElementById(ARIA_CONTROLS_PLACEHOLDER_ID);
-    if (placeholderDiv) {
+    if (placeholderDiv && component) {
         component.setAttribute('aria-controls', placeholderDiv.id);
     }
 }
@@ -305,3 +305,46 @@ export function frame() {
 export function isInstanceOf(obj, name) {
     return Object.prototype.toString.call(obj) === `[object ${name}]`;
 }
+/**
+ * Determines if an element is visible based on its computed styles.
+ * @param element The element to check.
+ * @returns `true` if the element is visible, otherwise `false`.
+ */
+export function checkVisibility(element) {
+    // Use the `checkVisibility()` method on the element if available
+    if (typeof element.checkVisibility === 'function') {
+        return element.checkVisibility();
+    }
+    // Fall back to computed styles on older browsers
+    const style = window.getComputedStyle(element);
+    return (style.display !== 'none' &&
+        style.visibility !== 'hidden' &&
+        style.visibility !== 'collapse' &&
+        style.opacity !== '0' &&
+        style.getPropertyValue('content-visibility') !== 'hidden');
+}
+/**
+ * Adds or removes a state from an element's custom state set.
+ *
+ * @param internals - The element's internals object.
+ * @param state - The name of the custom state to toggle.
+ * @param value - Whether to add or remove the state.
+ */
+export function toggleState(internals, state, value) {
+    if (value) {
+        try {
+            internals.states.add(state);
+        }
+        catch {
+            internals.states.add(`--${state}`);
+        }
+    }
+    else {
+        try {
+            internals.states.delete(state);
+        }
+        catch {
+            internals.states.delete(`--${state}`);
+        }
+    }
+}

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

@@ -3,11 +3,11 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import IMask, { Masked, InputMask } from 'imask';
+import { Masked, InputMask, type AppendFlags, type FactoryArg } from 'imask';
 import { DayOfWeek, ICalendarDateSelectEventData } from '../../calendar';
 export declare type DatePickerParseCallback = (value: string) => Date | null;
 export declare type DatePickerFormatCallback = (value: Date | null) => string;
-export declare type DatePickerPrepareMaskCallback = (value: string, masked: Masked<string>, flags: IMask.AppendFlags, maskInstance: InputMask<IMask.MaskedPatternOptions>) => string;
+export declare type DatePickerPrepareMaskCallback = (value: string, masked: Masked<string>, flags: AppendFlags, maskInstance: InputMask<FactoryArg>) => string;
 export declare type DatePickerValueMode = 'object' | 'string' | 'iso-string';
 export interface IDatePickerCalendarDropdownConfig<T> {
     value?: T | null;

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

@@ -10,7 +10,7 @@ import { StateLayerComponent, STATE_LAYER_CONSTANTS } from '../../state-layer';
 import { DEPRECATED_BUTTON_CONSTANTS } from './deprecated-button-constants';
 import { BaseComponent } from '../../core/base/base-component';
 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{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));--_button-text-color:var(--forge-button-text-color, var(--_button-primary-color));--_button-disabled-color:var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));--_button-padding:var(--forge-button-padding, var(--forge-spacing-medium, 16px));--_button-display:var(--forge-button-display, inline-flex);--_button-justify:var(--forge-button-justify, center);--_button-shape:var(--forge-button-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_button-height:var(--forge-button-height, 36px);--_button-min-width:var(--forge-button-min-width, 64px);--_button-spacing:var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));--_button-border-width:var(--forge-button-border-width, medium);--_button-border-style:var(--forge-button-border-style, none);--_button-border-color:var(--forge-button-border-color, currentColor);--_button-shape-start-start-radius:var(--forge-button-shape-start-start-radius, var(--_button-shape));--_button-shape-start-end-radius:var(--forge-button-shape-start-end-radius, var(--_button-shape));--_button-shape-end-start-radius:var(--forge-button-shape-end-start-radius, var(--_button-shape));--_button-shape-end-end-radius:var(--forge-button-shape-end-end-radius, var(--_button-shape));--_button-padding-block:var(--forge-button-padding-block, var(--_button-padding));--_button-padding-inline:var(--forge-button-padding-inline, var(--_button-padding));--_button-background:var(--forge-button-background, transparent);--_button-hover-background:var(--forge-button-hover-background, var(--_button-background));--_button-active-background:var(--forge-button-active-background, var(--_button-background));--_button-color:var(--forge-button-color, var(--_button-text-color));--_button-icon-size:var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_button-shadow:var(--forge-button-shadow, none);--_button-hover-shadow:var(--forge-button-hover-shadow, none);--_button-active-shadow:var(--forge-button-active-shadow, none);--_button-cursor:var(--forge-button-cursor, pointer);--_button-transition-duration:var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-transition-timing:var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-text-padding-inline:var(--forge-button-text-padding-inline, var(--forge-spacing-xsmall, 8px));--_button-outlined-background:var(--forge-button-outlined-background, transparent);--_button-outlined-color:var(--forge-button-outlined-color, var(--_button-primary-color));--_button-outlined-border-width:var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));--_button-outlined-border-style:var(--forge-button-outlined-border-style, solid);--_button-outlined-border-color:var(--forge-button-outlined-border-color, var(--_button-primary-color));--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));--_button-tonal-disabled-background:var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-primary-container, #222c62));--_button-tonal-disabled-color:var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));--_button-filled-background:var(--forge-button-filled-background, var(--_button-primary-color));--_button-filled-disabled-background:var(--forge-button-filled-disabled-background, var(--_button-disabled-color));--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));--_button-filled-disabled-color:var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));--_button-raised-background:var(--forge-button-raised-background, var(--_button-primary-color));--_button-raised-disabled-background:var(--forge-button-raised-disabled-background, var(--_button-disabled-color));--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-primary, #ffffff));--_button-raised-disabled-color:var(--forge-button-raised-disabled-color, var(--_button-disabled-text-color));--_button-raised-shadow:var(--forge-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));--_button-raised-hover-shadow:var(--forge-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));--_button-raised-active-shadow:var(--forge-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));--_button-raised-disabled-shadow:var(--forge-button-raised-disabled-shadow, none);--_button-link-color:var(--forge-button-link-color, var(--_button-primary-color));--_button-link-text-decoration:var(--forge-button-link-text-decoration, underline);--_button-link-height:var(--forge-button-link-height, auto);--_button-link-padding:var(--forge-button-link-padding, 0);--_button-link-line-height:var(--forge-button-link-line-height, normal);--_button-link-width:var(--forge-button-link-width, auto);--_button-link-hover-text-decoration:var(--forge-button-link-hover-text-decoration, none);--_button-link-active-opacity:var(--forge-button-link-active-opacity, 0.65);--_button-link-transition-duration:var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-link-transition-timing:var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-disabled-cursor:var(--forge-button-disabled-cursor, not-allowed);--_button-disabled-text-color:var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_button-disabled-background:var(--forge-button-disabled-background, transparent);--_button-disabled-border-color:var(--forge-button-disabled-border-color, var(--_button-disabled-color));--_button-disabled-shadow:var(--forge-button-disabled-shadow, none);--_button-dense-height:var(--forge-button-dense-height, 24px);--_button-pill-shape:var(--forge-button-pill-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_button-pill-padding-inline:var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));--_button-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 4px);--_button-text-focus-indicator-offset:var(--forge-button-text-focus-indicator-offset, 0px);--_button-link-focus-indicator-offset:var(--forge-button-link-focus-indicator-offset, 2px);--_button-popover-icon-transition-duration:var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-popover-icon-transition-timing:var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-popover-icon-open-rotation:var(--forge-button-popover-icon-open-rotation, 180deg)}:host{display:var(--_button-display);position:relative;outline:0;vertical-align:middle;-webkit-tap-highlight-color:transparent;border-radius:var(--_button-shape)}:host([hidden]){display:none}::slotted(:is(button,a)){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);position:relative;display:var(--_button-display);align-items:center;justify-content:var(--_button-justify);gap:var(--_button-spacing);z-index:0;box-sizing:border-box;min-inline-size:var(--_button-min-width);height:var(--_button-height);inline-size:100%;border-width:var(--_button-border-width);border-style:var(--_button-border-style);border-color:var(--_button-border-color);border-start-start-radius:var(--_button-shape-start-start-radius);border-start-end-radius:var(--_button-shape-start-end-radius);border-end-start-radius:var(--_button-shape-end-start-radius);border-end-end-radius:var(--_button-shape-end-end-radius);padding-block:var(--_button-padding-block);padding-inline:var(--_button-padding-inline);box-shadow:var(--_button-shadow);outline:0;user-select:none;-webkit-appearance:none;vertical-align:middle;text-decoration:none;white-space:nowrap;background:var(--_button-background);color:var(--_button-color);cursor:var(--_button-cursor);transition-property:box-shadow,background;transition-duration:var(--_button-transition-duration);transition-timing-function:var(--_button-transition-timing);--forge-icon-font-size:1.25em}::slotted(:is(button,a))::-moz-focus-inner{padding:0;border:0}::slotted(:is(button,a)):hover{--_button-shadow:var(--_button-hover-shadow);background:var(--_button-hover-background)}::slotted(:is(button,a)):active{--_button-shadow:var(--_button-active-shadow);background:var(--_button-active-background)}::slotted(a){text-decoration:none;--forge-typography-link-text-decoration:none}forge-state-layer{--forge-state-layer-color:var(--_button-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_button-primary-color);--forge-focus-indicator-outward-offset:var(--_button-focus-indicator-offset)}:host(:is([type*=unelevated],[type*=raised])) ::slotted(:is(button,a)){--_button-background:var(--_button-filled-background);--_button-color:var(--_button-filled-color)}:host(:is([type*=unelevated],[type*=raised])) forge-state-layer{--forge-state-layer-color:var(--_button-filled-color)}:host([type*=raised]) ::slotted(:is(button,a)){--_button-background:var(--_button-raised-background);--_button-color:var(--_button-raised-color);--_button-shadow:var(--_button-raised-shadow)}:host([type*=raised]) ::slotted(:is(button,a)):hover{--_button-shadow:var(--_button-raised-hover-shadow)}:host([type*=raised]) ::slotted(:is(button,a)):active{--_button-shadow:var(--_button-raised-active-shadow)}:host([type*=outlined]) ::slotted(:is(button,a)){--_button-background:var(--_button-outlined-background);--_button-color:var(--_button-outlined-color);--_button-border-width:var(--_button-outlined-border-width);--_button-border-style:var(--_button-outlined-border-style);--_button-border-color:var(--_button-outlined-border-color)}:host([full-width]){width:100%}:host(:is([dense],[type*=dense])) ::slotted(:is(button,a)){--_button-height:var(--_button-dense-height)}:host([disabled]){cursor:var(--_button-disabled-cursor)}:host([disabled]) ::slotted(button[disabled]){--_button-background:var(--_button-disabled-background);--_button-color:var(--_button-disabled-text-color);--_button-shadow:var(--_button-disabled-shadow);pointer-events:none}:host([type*=outlined][disabled]) ::slotted(button[disabled]){--_button-border-color:var(--_button-disabled-border-color)}:host(:is([type*=unelevated],[type*=raised])[disabled]) ::slotted(button[disabled]){--_button-background:var(--_button-filled-disabled-background);--_button-color:var(--_button-filled-disabled-color)}:host([type*=raised][disabled]) ::slotted(button[disabled]){--_button-background:var(--_button-raised-disabled-background);--_button-color:var(--_button-raised-disabled-color);--_button-shadow:var(--_button-raised-disabled-shadow)}';
+const styles = ':host{--_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));--_button-text-color:var(--forge-button-text-color, var(--_button-primary-color));--_button-disabled-color:var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));--_button-padding:var(--forge-button-padding, var(--forge-spacing-medium, 16px));--_button-display:var(--forge-button-display, inline-grid);--_button-justify:var(--forge-button-justify, center);--_button-shape:var(--forge-button-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_button-height:var(--forge-button-height, 36px);--_button-min-width:var(--forge-button-min-width, 64px);--_button-spacing:var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));--_button-border-width:var(--forge-button-border-width, medium);--_button-border-style:var(--forge-button-border-style, none);--_button-border-color:var(--forge-button-border-color, currentColor);--_button-shape-start-start-radius:var(--forge-button-shape-start-start-radius, var(--_button-shape));--_button-shape-start-end-radius:var(--forge-button-shape-start-end-radius, var(--_button-shape));--_button-shape-end-start-radius:var(--forge-button-shape-end-start-radius, var(--_button-shape));--_button-shape-end-end-radius:var(--forge-button-shape-end-end-radius, var(--_button-shape));--_button-padding-block:var(--forge-button-padding-block, var(--_button-0));--_button-padding-inline:var(--forge-button-padding-inline, var(--_button-padding));--_button-background:var(--forge-button-background, transparent);--_button-hover-background:var(--forge-button-hover-background, var(--_button-background));--_button-active-background:var(--forge-button-active-background, var(--_button-background));--_button-color:var(--forge-button-color, var(--_button-text-color));--_button-icon-size:var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_button-shadow:var(--forge-button-shadow, none);--_button-hover-shadow:var(--forge-button-hover-shadow, none);--_button-active-shadow:var(--forge-button-active-shadow, none);--_button-cursor:var(--forge-button-cursor, pointer);--_button-transition-duration:var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-transition-timing:var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-text-padding-inline:var(--forge-button-text-padding-inline, var(--forge-spacing-xsmall, 8px));--_button-outlined-background:var(--forge-button-outlined-background, transparent);--_button-outlined-color:var(--forge-button-outlined-color, var(--_button-primary-color));--_button-outlined-border-width:var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));--_button-outlined-border-style:var(--forge-button-outlined-border-style, solid);--_button-outlined-border-color:var(--forge-button-outlined-border-color, var(--_button-primary-color));--_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));--_button-tonal-disabled-background:var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));--_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-primary-container, #222c62));--_button-tonal-disabled-color:var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));--_button-filled-background:var(--forge-button-filled-background, var(--_button-primary-color));--_button-filled-disabled-background:var(--forge-button-filled-disabled-background, var(--_button-disabled-color));--_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));--_button-filled-disabled-color:var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));--_button-raised-background:var(--forge-button-raised-background, var(--_button-primary-color));--_button-raised-disabled-background:var(--forge-button-raised-disabled-background, var(--_button-disabled-color));--_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-primary, #ffffff));--_button-raised-disabled-color:var(--forge-button-raised-disabled-color, var(--_button-disabled-text-color));--_button-raised-shadow:var(--forge-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));--_button-raised-hover-shadow:var(--forge-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));--_button-raised-active-shadow:var(--forge-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));--_button-raised-disabled-shadow:var(--forge-button-raised-disabled-shadow, none);--_button-link-color:var(--forge-button-link-color, var(--_button-primary-color));--_button-link-text-decoration:var(--forge-button-link-text-decoration, underline);--_button-link-height:var(--forge-button-link-height, auto);--_button-link-padding:var(--forge-button-link-padding, 0);--_button-link-line-height:var(--forge-button-link-line-height, normal);--_button-link-width:var(--forge-button-link-width, auto);--_button-link-hover-text-decoration:var(--forge-button-link-hover-text-decoration, none);--_button-link-active-opacity:var(--forge-button-link-active-opacity, 0.65);--_button-link-transition-duration:var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-link-transition-timing:var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-disabled-cursor:var(--forge-button-disabled-cursor, not-allowed);--_button-disabled-text-color:var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_button-disabled-background:var(--forge-button-disabled-background, transparent);--_button-disabled-border-color:var(--forge-button-disabled-border-color, var(--_button-disabled-color));--_button-disabled-shadow:var(--forge-button-disabled-shadow, none);--_button-dense-height:var(--forge-button-dense-height, 24px);--_button-pill-shape:var(--forge-button-pill-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_button-pill-padding-inline:var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));--_button-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 4px);--_button-text-focus-indicator-offset:var(--forge-button-text-focus-indicator-offset, 0px);--_button-link-focus-indicator-offset:var(--forge-button-link-focus-indicator-offset, 2px);--_button-popover-icon-transition-duration:var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));--_button-popover-icon-transition-timing:var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_button-popover-icon-open-rotation:var(--forge-button-popover-icon-open-rotation, 180deg)}:host{display:var(--_button-display);position:relative;outline:0;vertical-align:middle;-webkit-tap-highlight-color:transparent;border-radius:var(--_button-shape)}:host([hidden]){display:none}::slotted(:is(button,a)){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);position:relative;display:var(--_button-display);grid-auto-flow:column;align-items:center;justify-content:var(--_button-justify);gap:var(--_button-spacing);z-index:0;box-sizing:border-box;min-inline-size:var(--_button-min-width);height:var(--_button-height);inline-size:100%;border-width:var(--_button-border-width);border-style:var(--_button-border-style);border-color:var(--_button-border-color);border-start-start-radius:var(--_button-shape-start-start-radius);border-start-end-radius:var(--_button-shape-start-end-radius);border-end-start-radius:var(--_button-shape-end-start-radius);border-end-end-radius:var(--_button-shape-end-end-radius);padding-block:var(--_button-padding-block);padding-inline:var(--_button-padding-inline);box-shadow:var(--_button-shadow);outline:0;user-select:none;-webkit-appearance:none;vertical-align:middle;text-decoration:none;white-space:nowrap;background:var(--_button-background);color:var(--_button-color);cursor:var(--_button-cursor);transition-property:box-shadow,background;transition-duration:var(--_button-transition-duration);transition-timing-function:var(--_button-transition-timing);--forge-icon-font-size:1.25em}::slotted(:is(button,a))::-moz-focus-inner{padding:0;border:0}::slotted(:is(button,a)):hover{--_button-shadow:var(--_button-hover-shadow);background:var(--_button-hover-background)}::slotted(:is(button,a)):active{--_button-shadow:var(--_button-active-shadow);background:var(--_button-active-background)}::slotted(a){text-decoration:none;--forge-typography-link-text-decoration:none}forge-state-layer{--forge-state-layer-color:var(--_button-color)}forge-focus-indicator{--forge-focus-indicator-color:var(--_button-primary-color);--forge-focus-indicator-outward-offset:var(--_button-focus-indicator-offset)}:host(:is([type*=unelevated],[type*=raised])) ::slotted(:is(button,a)){--_button-background:var(--_button-filled-background);--_button-color:var(--_button-filled-color)}:host(:is([type*=unelevated],[type*=raised])) forge-state-layer{--forge-state-layer-color:var(--_button-filled-color)}:host([type*=raised]) ::slotted(:is(button,a)){--_button-background:var(--_button-raised-background);--_button-color:var(--_button-raised-color);--_button-shadow:var(--_button-raised-shadow)}:host([type*=raised]) ::slotted(:is(button,a)):hover{--_button-shadow:var(--_button-raised-hover-shadow)}:host([type*=raised]) ::slotted(:is(button,a)):active{--_button-shadow:var(--_button-raised-active-shadow)}:host([type*=outlined]) ::slotted(:is(button,a)){--_button-background:var(--_button-outlined-background);--_button-color:var(--_button-outlined-color);--_button-border-width:var(--_button-outlined-border-width);--_button-border-style:var(--_button-outlined-border-style);--_button-border-color:var(--_button-outlined-border-color)}:host([full-width]){width:100%}:host(:is([dense],[type*=dense])) ::slotted(:is(button,a)){--_button-height:var(--_button-dense-height)}:host([disabled]){cursor:var(--_button-disabled-cursor)}:host([disabled]) ::slotted(button[disabled]){--_button-background:var(--_button-disabled-background);--_button-color:var(--_button-disabled-text-color);--_button-shadow:var(--_button-disabled-shadow);pointer-events:none}:host([type*=outlined][disabled]) ::slotted(button[disabled]){--_button-border-color:var(--_button-disabled-border-color)}:host(:is([type*=unelevated],[type*=raised])[disabled]) ::slotted(button[disabled]){--_button-background:var(--_button-filled-disabled-background);--_button-color:var(--_button-filled-disabled-color)}:host([type*=raised][disabled]) ::slotted(button[disabled]){--_button-background:var(--_button-raised-disabled-background);--_button-color:var(--_button-raised-disabled-color);--_button-shadow:var(--_button-raised-disabled-shadow)}';
 /**
  * @tag forge-deprecated-button
  *

package/esm/dialog/dialog-core.js

@@ -73,7 +73,7 @@ export class DialogCore {
         this._adapter.addDialogFormSubmitListener(this._dialogFormSubmitListener);
         DismissibleStack.instance.add(this._adapter.hostElement);
         if (this._mode === 'modal' || this._mode === 'inline-modal') {
-            this._adapter.addDocumentListener('keydown', this._escapeDismissListener);
+            this._adapter.addDocumentListener('keydown', this._escapeDismissListener, { capture: true });
         }
         if (!this._persistent) {
             this._adapter.addBackdropDismissListener(this._backdropDismissListener);
@@ -99,7 +99,7 @@ export class DialogCore {
     }
     _release() {
         this._adapter.removeDialogFormSubmitListener(this._dialogFormSubmitListener);
-        this._adapter.removeDocumentListener('keydown', this._escapeDismissListener);
+        this._adapter.removeDocumentListener('keydown', this._escapeDismissListener, { capture: true });
         this._adapter.removeBackdropDismissListener(this._backdropDismissListener);
         DismissibleStack.instance.remove(this._adapter.hostElement);
     }

package/esm/dialog/dialog.d.ts

@@ -25,6 +25,8 @@ export interface IDialogProperties {
     moveable: boolean;
     label: string;
     description: string;
+    [showBackdrop](): void;
+    [hideBackdrop](): void;
 }
 export interface IDialogComponent extends IDialogProperties, IWithDefaultAria, IWithElementInternals, IDismissible {
     show(): void;