@tylertech/forge 3.9.1 → 3.10.0

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

@@ -20,6 +20,7 @@ export class BaseDatePickerCore {
         this._masked = true;
         this._maskFormat = DEFAULT_DATE_MASK;
         this._showMaskFormat = false;
+        this._dateFormat = BASE_DATE_PICKER_CONSTANTS.defaults.DATE_FORMAT;
         this._valueMode = 'object';
         this._notifyInputValueChanges = true;
         this._allowInvalidDate = false;
@@ -160,6 +161,24 @@ export class BaseDatePickerCore {
             this._emitCloseEvent();
         }
     }
+    _getDefaultShortcuts() {
+        const handleTodayShortcut = () => {
+            this._onToday();
+            if (this._open) {
+                this._closeCalendar(true);
+            }
+        };
+        const formatAllowsMonthAbbreviations = this._dateFormat.toUpperCase().includes('MMM');
+        // We only allow "t" shortcut for today if the date format allows month abbreviations
+        // because otherwise it could conflict with the "n" shortcut for month names
+        if (formatAllowsMonthAbbreviations) {
+            return { t: handleTodayShortcut };
+        }
+        return {
+            n: handleTodayShortcut,
+            t: handleTodayShortcut
+        };
+    }
     _onInputKeydown(evt) {
         // Handle keyboard shortcuts that make use of the shift key first
         if (evt.shiftKey) {
@@ -188,6 +207,24 @@ export class BaseDatePickerCore {
                     break;
             }
         }
+        // Handle date entry shortcuts
+        const shortcuts = Object.entries(this._shortcuts ?? this._getDefaultShortcuts());
+        if (shortcuts.length && !evt.shiftKey && evt.key.length === 1) {
+            const key = evt.key.toLowerCase();
+            const shortcut = shortcuts.find(([k]) => k === key);
+            if (shortcut) {
+                evt.preventDefault();
+                const [_k, callback] = shortcut;
+                if (typeof callback === 'function') {
+                    const date = callback({ instance: this._adapter.hostElement });
+                    if (isValidDate(date)) {
+                        this._onDateSelected({ date, selected: true, type: 'date' });
+                    }
+                }
+                return;
+            }
+        }
+        // Handle shortcuts that do not require the shift key
         switch (evt.key) {
             case 'Escape':
                 if (this._open) {
@@ -230,14 +267,6 @@ export class BaseDatePickerCore {
                     this._adapter.propagateCalendarKey(evt);
                 }
                 break;
-            case 'n':
-            case 't':
-                evt.preventDefault();
-                this._onToday();
-                if (this._open) {
-                    this._closeCalendar(true);
-                }
-                break;
             case 'PageUp':
             case 'PageDown':
                 if (this._open) {
@@ -260,7 +289,7 @@ export class BaseDatePickerCore {
         }
     }
     _getSanitizedDateString(value) {
-        return value.replace(/_|[a-z]|[A-Z]/g, '').replace(/\/$|\/\/$/, '');
+        return value.replace(/_/g, '').replace(/\/$|\/\/$/, '');
     }
     _onToggleMousedown(evt) {
         if (this._disabled) {
@@ -312,16 +341,16 @@ export class BaseDatePickerCore {
     }
     _formatDate(date) {
         if (!isValidDate(date)) {
-            return '';
+            return null;
         }
-        return typeof this._formatCallback === 'function' ? this._formatCallback(date) : formatDate(date);
+        return typeof this._formatCallback === 'function' ? this._formatCallback(date) : formatDate(date, this._dateFormat);
     }
     _parseDateString(value) {
-        value = value.replace(/_|\s/g, '');
+        value = value.replace(/_/g, '');
         if (!value || !value.length) {
             return null;
         }
-        const parsedDate = typeof this._parseCallback === 'function' ? this._parseCallback(value) : parseDateString(value);
+        const parsedDate = typeof this._parseCallback === 'function' ? this._parseCallback(value) : parseDateString(value, this._dateFormat);
         return isValidDate(parsedDate) ? parsedDate : null;
     }
     _coerceDateValue(value) {
@@ -365,9 +394,7 @@ export class BaseDatePickerCore {
             onChange: (value) => this._handleInput(value)
         };
         if (this._prepareMaskCallback) {
-            options.prepareCallback = (value, masked, flags, maskInstance) => {
-                return this._prepareMaskCallback.call(null, value, masked, flags, maskInstance);
-            };
+            options.prepareCallback = (value, masked, flags, maskInstance) => this._prepareMaskCallback.call(null, value, masked, flags, maskInstance);
         }
         this._adapter.initializeMask(options);
     }
@@ -410,13 +437,23 @@ export class BaseDatePickerCore {
             this._adapter.setHostAttribute(BASE_DATE_PICKER_CONSTANTS.observedAttributes.VALUE_MODE, this._valueMode);
         }
     }
+    get shortcuts() {
+        return this._shortcuts;
+    }
+    set shortcuts(value) {
+        if (value === 'off') {
+            this._shortcuts = {};
+            return;
+        }
+        this._shortcuts = Object.prototype.toString.call(value) === '[object Object]' ? value : undefined;
+    }
     get min() {
         return this._min ? new Date(this._min.getTime()) : null;
     }
     set min(value) {
         if (this._min !== value) {
             const date = this._coerceDateValue(value);
-            this._min = !!date ? new Date(date.getTime()) : null;
+            this._min = date ? new Date(date.getTime()) : null;
             this._applyMin();
             if (this._isInitialized && this._open) {
                 this._adapter.setCalendarMinDate(this._min);
@@ -538,6 +575,22 @@ export class BaseDatePickerCore {
             this._showMaskFormat = value;
         }
     }
+    get dateFormat() {
+        return this._dateFormat;
+    }
+    set dateFormat(value) {
+        if (typeof value !== 'string' || !BASE_DATE_PICKER_CONSTANTS.supportedDateFormats.includes(value)) {
+            this._dateFormat = BASE_DATE_PICKER_CONSTANTS.defaults.DATE_FORMAT;
+        }
+        if (this._dateFormat !== value) {
+            this._dateFormat = value;
+            // Automatically set the mask format based on the date format
+            this._maskFormat = value === BASE_DATE_PICKER_CONSTANTS.defaults.DATE_FORMAT ? DEFAULT_DATE_MASK : value;
+            if (this._isInitialized) {
+                this._applyMask();
+            }
+        }
+    }
     get notifyInputValueChanges() {
         return this._notifyInputValueChanges;
     }

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

@@ -3,4 +3,5 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export declare function createToggleElement(iconName: string): HTMLElement;
+import { type IIconButtonComponent } from '../../icon-button/icon-button';
+export declare function createToggleElement(iconName: string): IIconButtonComponent;

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

@@ -5,9 +5,9 @@
  */
 import { DayOfWeek } from '../../calendar/calendar-constants';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
-import { DatePickerFormatCallback, DatePickerParseCallback, DatePickerPrepareMaskCallback, DatePickerValueMode, IDatePickerCalendarDropdownText } from './base-date-picker-constants';
-import { BaseDatePickerCore } from './base-date-picker-core';
 import { IBaseDatePickerAdapter } from './base-date-picker-adapter';
+import { DatePickerDateFormat, DatePickerFormatCallback, DatePickerParseCallback, DatePickerPrepareMaskCallback, DatePickerShortcuts, DatePickerValueMode, IDatePickerCalendarDropdownText } from './base-date-picker-constants';
+import { BaseDatePickerCore } from './base-date-picker-core';
 export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
     value: TValue | null | undefined;
     min: Date | string | null | undefined;
@@ -23,7 +23,9 @@ export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
     masked: boolean;
     maskFormat: string;
     showMaskFormat: boolean;
+    dateFormat: DatePickerDateFormat;
     valueMode: DatePickerValueMode;
+    shortcuts: DatePickerShortcuts;
     notifyInputValueChanges: boolean;
     allowInvalidDate: boolean;
     showToday: boolean;
@@ -53,9 +55,11 @@ export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
  * @property {DatePickerPrepareMaskCallback} prepareMaskCallback - The callback to use when altering default mask entry.
  * @property {boolean} [showClear=false] - Whether the clear button is visible in the popup.
  * @property {boolean} [showMaskFormat=false] - Whether the mask format is displayed in the input or not. Only applies if `masked` is `true`.
+ * @property {DatePickerDateFormat} [dateFormat='MM/DD/YYYY'] - The date format to use for the date picker.
  * @property {boolean} [showToday=false] - Whether the today button is visible in the popup.
  * @property {TValue} value - The value of the date picker.
  * @property {DatePickerValueMode} valueMode - The type for the `value` property and `forge-date-picker-change` event.
+ * @property {DatePickerShortcuts} shortcuts - The shortcuts to use for the date picker. Can be an object with key-value pairs where the key is the shortcut name and the value is a function that returns a `Date` object.
  * @property {string} yearRange - The year range.
  *
  * @attribute {boolean} [allow-invalid-date=false] - Whether to allow an invalid date to be input. When true, the date picker will not clear out the value of the input if the date was invalid (i.e. could not be parsed).
@@ -71,8 +75,10 @@ export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
  * @attribute {string} [popup-classes] - The CSS classes that are applied to the popup element.
  * @attribute {boolean} [show-clear=false] - Whether the clear button is visible in the popup.
  * @attribute {boolean} [show-mask-format=false] - Whether the mask format is displayed in the input or not. Only applies if `masked` is `true`.
+ * @attribute {DatePickerDateFormat} [date-format=MM/DD/YYYY] - The date format to use for the date picker.
  * @attribute {boolean} [show-today=false] - Whether the today button is visible in the popup.
  * @attribute {DatePickerValueMode} [value-mode=string] - The type for the `value` property and `forge-date-picker-change` event.
+ * @attribute {DatePickerShortcuts} shortcuts - When specifies as an attribute you can only use the `off` value to disable shortcuts. Otherwise, you can use the `shortcuts` property to set your own shortcuts.
  * @attribute {string} [year-range] - The year range.
  */
 export declare abstract class BaseDatePickerComponent<TPublicValue, TPrivateValue, TCore extends BaseDatePickerCore<IBaseDatePickerAdapter, TPublicValue, TPrivateValue>> extends BaseComponent implements IBaseDatePickerComponent<TPublicValue> {
@@ -91,7 +97,9 @@ export declare abstract class BaseDatePickerComponent<TPublicValue, TPrivateValu
     masked: boolean;
     maskFormat: string;
     showMaskFormat: boolean;
+    dateFormat: DatePickerDateFormat;
     valueMode: DatePickerValueMode;
+    shortcuts: DatePickerShortcuts;
     notifyInputValueChanges: boolean;
     allowInvalidDate: boolean;
     showToday: boolean;

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

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { coerceBoolean, ensureChild, coreProperty, coerceNumberArray } from '@tylertech/forge-core';
+import { coerceBoolean, coerceNumberArray, coreProperty, ensureChild } from '@tylertech/forge-core';
 import { BaseComponent } from '../../core/base/base-component';
 import { BASE_DATE_PICKER_CONSTANTS } from './base-date-picker-constants';
 /**
@@ -27,9 +27,11 @@ import { BASE_DATE_PICKER_CONSTANTS } from './base-date-picker-constants';
  * @property {DatePickerPrepareMaskCallback} prepareMaskCallback - The callback to use when altering default mask entry.
  * @property {boolean} [showClear=false] - Whether the clear button is visible in the popup.
  * @property {boolean} [showMaskFormat=false] - Whether the mask format is displayed in the input or not. Only applies if `masked` is `true`.
+ * @property {DatePickerDateFormat} [dateFormat='MM/DD/YYYY'] - The date format to use for the date picker.
  * @property {boolean} [showToday=false] - Whether the today button is visible in the popup.
  * @property {TValue} value - The value of the date picker.
  * @property {DatePickerValueMode} valueMode - The type for the `value` property and `forge-date-picker-change` event.
+ * @property {DatePickerShortcuts} shortcuts - The shortcuts to use for the date picker. Can be an object with key-value pairs where the key is the shortcut name and the value is a function that returns a `Date` object.
  * @property {string} yearRange - The year range.
  *
  * @attribute {boolean} [allow-invalid-date=false] - Whether to allow an invalid date to be input. When true, the date picker will not clear out the value of the input if the date was invalid (i.e. could not be parsed).
@@ -45,8 +47,10 @@ import { BASE_DATE_PICKER_CONSTANTS } from './base-date-picker-constants';
  * @attribute {string} [popup-classes] - The CSS classes that are applied to the popup element.
  * @attribute {boolean} [show-clear=false] - Whether the clear button is visible in the popup.
  * @attribute {boolean} [show-mask-format=false] - Whether the mask format is displayed in the input or not. Only applies if `masked` is `true`.
+ * @attribute {DatePickerDateFormat} [date-format=MM/DD/YYYY] - The date format to use for the date picker.
  * @attribute {boolean} [show-today=false] - Whether the today button is visible in the popup.
  * @attribute {DatePickerValueMode} [value-mode=string] - The type for the `value` property and `forge-date-picker-change` event.
+ * @attribute {DatePickerShortcuts} shortcuts - When specifies as an attribute you can only use the `off` value to disable shortcuts. Otherwise, you can use the `shortcuts` property to set your own shortcuts.
  * @attribute {string} [year-range] - The year range.
  */
 export class BaseDatePickerComponent extends BaseComponent {
@@ -89,12 +93,18 @@ export class BaseDatePickerComponent extends BaseComponent {
             case BASE_DATE_PICKER_CONSTANTS.observedAttributes.SHOW_MASK_FORMAT:
                 this.showMaskFormat = coerceBoolean(newValue);
                 break;
+            case BASE_DATE_PICKER_CONSTANTS.observedAttributes.DATE_FORMAT:
+                this.dateFormat = newValue;
+                break;
             case BASE_DATE_PICKER_CONSTANTS.observedAttributes.MASK_FORMAT:
                 this.maskFormat = newValue;
                 break;
             case BASE_DATE_PICKER_CONSTANTS.observedAttributes.VALUE_MODE:
                 this.valueMode = newValue;
                 break;
+            case BASE_DATE_PICKER_CONSTANTS.observedAttributes.SHORTCUTS:
+                this.shortcuts = newValue === 'off' ? {} : undefined;
+                break;
             case BASE_DATE_PICKER_CONSTANTS.observedAttributes.ALLOW_INVALID_DATE:
                 this.allowInvalidDate = coerceBoolean(newValue);
                 break;
@@ -149,9 +159,15 @@ __decorate([
 __decorate([
     coreProperty()
 ], BaseDatePickerComponent.prototype, "showMaskFormat", void 0);
+__decorate([
+    coreProperty()
+], BaseDatePickerComponent.prototype, "dateFormat", void 0);
 __decorate([
     coreProperty()
 ], BaseDatePickerComponent.prototype, "valueMode", void 0);
+__decorate([
+    coreProperty()
+], BaseDatePickerComponent.prototype, "shortcuts", void 0);
 __decorate([
     coreProperty()
 ], BaseDatePickerComponent.prototype, "notifyInputValueChanges", void 0);

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

@@ -98,7 +98,7 @@ export class DatePickerAdapter extends BaseDatePickerAdapter {
         this._inputElement.setAttribute('aria-disabled', value.toString());
         if (this._toggleElement) {
             this._toggleElement.setAttribute('aria-disabled', value.toString());
-            if (this._toggleElement.hasOwnProperty('disabled')) {
+            if (Object.prototype.hasOwnProperty.call(this._toggleElement, 'disabled')) {
                 this._toggleElement.disabled = value;
                 // The toggle element should never be in the tab order
                 this._toggleElement.tabIndex = -1;

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

@@ -34,6 +34,7 @@ export class DatePickerCore extends BaseDatePickerCore {
     }
     _onToday() {
         const today = new Date();
+        today.setHours(0, 0, 0, 0);
         this._tryMergeCurrentTime(today);
         this._onDateSelected({ date: today, selected: true, type: 'date' });
     }
@@ -69,7 +70,7 @@ export class DatePickerCore extends BaseDatePickerCore {
             return;
         }
         const formattedValue = this._formatDate(value);
-        this._adapter.setInputValue(formattedValue, this._notifyInputValueChanges);
+        this._adapter.setInputValue(formattedValue ?? '', this._notifyInputValueChanges);
         this._formatInputValue();
         if (!Platform.isMobile) {
             this._adapter.selectInputText();
@@ -78,7 +79,7 @@ export class DatePickerCore extends BaseDatePickerCore {
     _openCalendar(emitOpenEvent) {
         super._openCalendar(emitOpenEvent);
         const currentValue = this._getCurrentValue();
-        if (!!currentValue) {
+        if (currentValue) {
             this._adapter.goToCalendarDate(new Date(currentValue));
         }
     }

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

@@ -8,6 +8,7 @@ import { IDateInputMaskOptions } from '../core/mask/date-input-mask';
 import { BaseDatePickerAdapter, IBaseDatePickerAdapter } from '../date-picker/base/base-date-picker-adapter';
 import { IDatePickerCalendarDropdownConfig } from '../date-picker/base/base-date-picker-constants';
 import { DateRangePickerComponent, IDateRangePickerComponent } from './date-range-picker';
+import { IIconButtonComponent } from '../icon-button/icon-button';
 export interface IDateRangePickerAdapter extends IBaseDatePickerAdapter {
     initializeToMask(toOptions: IDateInputMaskOptions): void;
     addToInputListener(type: string, listener: (event: Event) => void): void;
@@ -58,7 +59,7 @@ export declare class DateRangePickerAdapter extends BaseDatePickerAdapter<IDateR
     setDisabled(isDisabled: boolean): void;
     emitInputEvent(type: string, data?: any): void;
     emitToInputEvent(type: string, data?: any): void;
-    protected _createToggleElement(): HTMLElement;
+    protected _createToggleElement(): IIconButtonComponent;
     tryFocusInput(): void;
     tryBlurInput(): void;
     selectInputText(): void;

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

@@ -162,7 +162,7 @@ export class DateRangePickerAdapter extends BaseDatePickerAdapter {
         this._fromInputElement.setAttribute('aria-disabled', isDisabled.toString());
         if (this._toggleElement) {
             this._toggleElement.setAttribute('aria-disabled', isDisabled.toString());
-            if (this._toggleElement.hasOwnProperty('disabled')) {
+            if (Object.prototype.hasOwnProperty.call(this._toggleElement, 'disabled')) {
                 this._toggleElement.disabled = isDisabled;
                 // The toggle element should never be in the tab order
                 this._toggleElement.tabIndex = -1;

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

@@ -44,6 +44,7 @@ export declare class DateRangePickerCore extends BaseDatePickerCore<IDateRangePi
     protected _onDateSelected(event: ICalendarDateSelectEventData): void;
     protected _applyMin(): void;
     protected _applyMax(): void;
+    protected _applyMask(): void;
     protected _initializeToMask(): void;
     protected _applyDisabledDates(): void;
     protected _applyDisabledDaysOfWeek(): void;

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

@@ -55,10 +55,10 @@ export class DateRangePickerCore extends BaseDatePickerCore {
         this._formatToInputValue();
         super._openCalendar(emitOpenEvent);
         const currentValue = this._getCurrentValue();
-        if (!!currentValue?.to) {
+        if (currentValue?.to) {
             this._adapter.goToCalendarDate(new Date(currentValue.to));
         }
-        else if (!!currentValue?.from) {
+        else if (currentValue?.from) {
             this._adapter.goToCalendarDate(new Date(currentValue.from));
         }
     }
@@ -82,6 +82,7 @@ export class DateRangePickerCore extends BaseDatePickerCore {
     }
     _onToday() {
         const today = new Date();
+        today.setHours(0, 0, 0, 0);
         this._tryMergeCurrentTime({ from: today });
         const range = this._open ? new DateRange({ from: this._from || today, to: this._to || undefined }) : new DateRange({ from: today });
         if (!this._isDateRangeAcceptable(range)) {
@@ -125,14 +126,14 @@ export class DateRangePickerCore extends BaseDatePickerCore {
         }
     }
     _setFormattedInputValue(suppressValueChanges) {
-        let formattedDate = this._formatDate(this._from);
+        let formattedDate = this._formatDate(this._from) ?? '';
         if (!formattedDate && !this._allowInvalidDate) {
             formattedDate = '';
         }
         this._adapter.setInputValue(formattedDate, suppressValueChanges ? false : this._notifyInputValueChanges);
     }
     _setFormattedToInputValue(suppressValueChanges) {
-        let formattedDate = this._formatDate(this._to);
+        let formattedDate = this._formatDate(this._to) ?? '';
         if (!formattedDate && !this._allowInvalidDate) {
             formattedDate = '';
         }
@@ -180,8 +181,8 @@ export class DateRangePickerCore extends BaseDatePickerCore {
         }
         const formattedFromValue = this._formatDate((value && value.from) || null);
         const formattedToValue = this._formatDate((value && value.to) || null);
-        this._adapter.setInputValue(formattedFromValue, this._notifyInputValueChanges);
-        this._adapter.setToInputValue(formattedToValue, this._notifyInputValueChanges);
+        this._adapter.setInputValue(formattedFromValue ?? '', this._notifyInputValueChanges);
+        this._adapter.setToInputValue(formattedToValue ?? '', this._notifyInputValueChanges);
         this._formatInputValue();
         this._formatToInputValue();
         this._from = (value && value.from) || null;
@@ -217,6 +218,16 @@ export class DateRangePickerCore extends BaseDatePickerCore {
         }
         super._applyMax();
     }
+    _applyMask() {
+        super._applyMask();
+        if (this._masked) {
+            this._initializeToMask();
+        }
+        else {
+            this._adapter.destroyToMask();
+            this._formatToInputValue();
+        }
+    }
     _initializeToMask() {
         if (!this._masked) {
             return;
@@ -227,9 +238,7 @@ export class DateRangePickerCore extends BaseDatePickerCore {
             onChange: (value) => this._handleToInput(value)
         };
         if (this._prepareMaskCallback) {
-            options.prepareCallback = (value, masked, flags, maskInstance) => {
-                return this._prepareMaskCallback.call(null, value, masked, flags, maskInstance);
-            };
+            options.prepareCallback = (value, masked, flags, maskInstance) => this._prepareMaskCallback.call(null, value, masked, flags, maskInstance);
         }
         this._adapter.initializeToMask(options);
     }

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

@@ -61,13 +61,14 @@ export class DeprecatedIconButtonComponentDelegate extends BaseComponentDelegate
         }
         const type = this._config.options?.iconType || 'component';
         switch (type) {
-            case 'font':
+            case 'font': {
                 const classes = Array.isArray(this._config.options.iconClass) ? this._config.options.iconClass : [ICON_CLASS_NAME];
                 this._buttonElement?.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;

package/esm/dialog/dialog.js

@@ -15,7 +15,7 @@ import { DialogAdapter } from './dialog-adapter';
 import { DIALOG_CONSTANTS, dialogStack, hideBackdrop, showBackdrop } from './dialog-constants';
 import { DialogCore } from './dialog-core';
 const template = '<template><dialog class=\"forge-dialog\" part=\"root\" aria-labelledby=\"forge-dialog-label\" aria-describedby=\"forge-dialog-description\"><div id=\"forge-dialog-label\" class=\"visually-hidden\"></div><div id=\"forge-dialog-description\" class=\"visually-hidden\"></div><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 = '@keyframes forge-dialog-zoom-in{from{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}to{opacity:1;scale:1}}@keyframes forge-dialog-zoom-out{from{opacity:1;scale:1}to{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}}@keyframes forge-dialog-fade-in{from{opacity:var(--_dialog-fade-opacity)}to{opacity:1}}@keyframes forge-dialog-fade-out{from{opacity:1}to{opacity:var(--_dialog-fade-opacity)}}@keyframes forge-dialog-slide-in{from{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}to{opacity:1;translate:0 0}}@keyframes forge-dialog-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}::slotted(forge-scaffold){height:auto}.forge-dialog{--_dialog-background:var(--forge-dialog-background, var(--forge-theme-surface-bright, #ffffff));--_dialog-shape:var(--forge-dialog-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_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%;box-sizing:border-box}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.surface{position:absolute;inset:0;display:flex;background:var(--_dialog-background);box-shadow:var(--_dialog-elevation);z-index:var(--_dialog-z-index);overflow:hidden;border-radius:var(--_dialog-shape);margin-block-start:var(--_dialog-block-start-spacing);margin-block-end:var(--_dialog-block-end-spacing);margin-inline-start:var(--_dialog-inline-start-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);box-sizing:border-box}.visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance: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{user-select:none;transition-property:opacity;transition-duration:var(--_dialog-move-transition-duration);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:flex;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{animation-duration:var(--_dialog-enter-animation-duration);animation-timing-function:var(--_dialog-enter-animation-easing)}:host([visible]:not([animation-type=none])) dialog.forge-dialog[open] .surface.exiting{animation-duration:var(--_dialog-exit-animation-duration);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{animation-name:forge-dialog-zoom-in}:host([visible]:not([animation-type=none]):is(:not([animation-type]),[animation-type=zoom])) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-zoom-out}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface{animation-name:forge-dialog-fade-in}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-fade-out}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface{animation-name:forge-dialog-slide-in}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-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{animation-name:forge-dialog-slide-in}:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface.exiting{animation-name:forge-dialog-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: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;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{animation-name:forge-dialog-fade-in}.surface.exiting{animation-name:forge-dialog-fade-out}}}';
+const styles = '@keyframes forge-dialog-zoom-in{from{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}to{opacity:1;scale:1}}@keyframes forge-dialog-zoom-out{from{opacity:1;scale:1}to{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}}@keyframes forge-dialog-fade-in{from{opacity:var(--_dialog-fade-opacity)}to{opacity:1}}@keyframes forge-dialog-fade-out{from{opacity:1}to{opacity:var(--_dialog-fade-opacity)}}@keyframes forge-dialog-slide-in{from{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}to{opacity:1;translate:0 0}}@keyframes forge-dialog-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}::slotted(forge-scaffold){height:auto}.forge-dialog{--_dialog-background:var(--forge-dialog-background, var(--forge-theme-surface-bright, #ffffff));--_dialog-shape:var(--forge-dialog-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_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%;box-sizing:border-box}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.surface{position:absolute;inset:0;display:flex;background:var(--_dialog-background);box-shadow:var(--_dialog-elevation);z-index:var(--_dialog-z-index);overflow:hidden;border-radius:var(--_dialog-shape);margin-block-start:var(--_dialog-block-start-spacing);margin-block-end:var(--_dialog-block-end-spacing);margin-inline-start:var(--_dialog-inline-start-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);box-sizing:border-box}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}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{user-select:none;transition-property:opacity;transition-duration:var(--_dialog-move-transition-duration);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:flex;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{animation-duration:var(--_dialog-enter-animation-duration);animation-timing-function:var(--_dialog-enter-animation-easing)}:host([visible]:not([animation-type=none])) dialog.forge-dialog[open] .surface.exiting{animation-duration:var(--_dialog-exit-animation-duration);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{animation-name:forge-dialog-zoom-in}:host([visible]:not([animation-type=none]):is(:not([animation-type]),[animation-type=zoom])) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-zoom-out}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface{animation-name:forge-dialog-fade-in}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-fade-out}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface{animation-name:forge-dialog-slide-in}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface.exiting{animation-name:forge-dialog-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{animation-name:forge-dialog-slide-in}:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface.exiting{animation-name:forge-dialog-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: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;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{animation-name:forge-dialog-fade-in}.surface.exiting{animation-name:forge-dialog-fade-out}}}';
 /**
  * @tag forge-dialog
  *

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

@@ -21,6 +21,7 @@ export declare class ExpansionPanelCore implements IExpansionPanelCore {
     private _trigger;
     private _clickListener;
     private _keydownListener;
+    private _keyupListener;
     private _animationCompleteListener;
     private _slotListener;
     constructor(_adapter: IExpansionPanelAdapter);
@@ -31,6 +32,9 @@ export declare class ExpansionPanelCore implements IExpansionPanelCore {
     private _syncTrigger;
     private _onClick;
     private _onKeydown;
+    private _onKeyup;
+    private _tryToggle;
+    private _canIgnoreEvent;
     private _onAnimationComplete;
     private _togglePanel;
     dispatchToggleEvent(): void;

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

@@ -14,12 +14,14 @@ export class ExpansionPanelCore {
         this._trigger = '';
         this._clickListener = this._onClick.bind(this);
         this._keydownListener = this._onKeydown.bind(this);
+        this._keyupListener = this._onKeyup.bind(this);
         this._animationCompleteListener = this._onAnimationComplete.bind(this);
         this._slotListener = this._handleContentSlotChange.bind(this);
     }
     async initialize() {
         this._adapter.addHeaderListener('click', this._clickListener);
         this._adapter.addHeaderListener('keydown', this._keydownListener);
+        this._adapter.addHeaderListener('keyup', this._keyupListener);
         this._adapter.setAnimationCompleteListener(this._animationCompleteListener);
         this._adapter.addContentSlotListener(this._slotListener);
         this._adapter.setContentId();
@@ -54,25 +56,31 @@ export class ExpansionPanelCore {
         this._adapter.removeTriggerListeners({ reset: true });
         this._adapter.addTriggerListener('click', this._clickListener);
         this._adapter.addTriggerListener('keydown', this._keydownListener);
+        this._adapter.addTriggerListener('keyup', this._keyupListener);
     }
     _onClick(evt) {
-        const fromIgnoredEl = evt
-            .composedPath()
-            .find((el) => el.nodeType === Node.ELEMENT_NODE && el.matches(EXPANSION_PANEL_CONSTANTS.selectors.IGNORE));
-        if (fromIgnoredEl) {
+        this._tryToggle(evt);
+    }
+    _onKeydown(evt) {
+        if (evt.key === ' ' || evt.key === 'Enter') {
+            evt.preventDefault();
+        }
+    }
+    _onKeyup(evt) {
+        if (evt.key === ' ' || evt.key === 'Enter') {
+            this._tryToggle(evt);
+        }
+    }
+    _tryToggle(evt) {
+        if (this._canIgnoreEvent(evt)) {
             return;
         }
         evt.stopPropagation();
         this._toggle();
         this.dispatchToggleEvent();
     }
-    _onKeydown(evt) {
-        if (evt.key === ' ' || evt.key === 'Enter') {
-            evt.stopPropagation();
-            evt.preventDefault();
-            this._toggle();
-            this.dispatchToggleEvent();
-        }
+    _canIgnoreEvent(evt) {
+        return evt.composedPath().some((el) => el.nodeType === Node.ELEMENT_NODE && el.matches(EXPANSION_PANEL_CONSTANTS.selectors.IGNORE));
     }
     _onAnimationComplete() {
         if (!this._open) {

package/esm/field/field-core.js

@@ -46,8 +46,9 @@ export class FieldCore {
     _onPopoverIconMousedown(evt) {
         const popoverEvent = new CustomEvent(FIELD_CONSTANTS.events.POPOVER_ICON_MOUSEDOWN, { bubbles: true, composed: true, cancelable: true });
         this._adapter.dispatchHostEvent(popoverEvent);
-        if (popoverEvent.defaultPrevented)
+        if (popoverEvent.defaultPrevented) {
             evt.preventDefault();
+        }
     }
     floatLabelWithoutAnimation(value) {
         if (this._floatLabel !== value) {