@tylertech/forge 3.11.0 → 3.12.0

package/esm/toast/toast-core.js

@@ -3,6 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { DismissibleStack, tryDismiss } from '../core/utils/dismissible-stack';
 import { TOAST_CONSTANTS } from './toast-constants';
 export class ToastCore {
     constructor(_adapter) {
@@ -14,15 +15,28 @@ export class ToastCore {
         this._theme = TOAST_CONSTANTS.defaults.THEME;
         this._actionListener = this._onAction.bind(this);
         this._closeListener = this._onClose.bind(this);
+        this._isHovered = false;
+        this._isFocused = false;
+        this._pointerEnterListener = this._handlePointerEnter.bind(this);
+        this._pointerLeaveListener = this._handlePointerLeave.bind(this);
+        this._focusInListener = this._handleFocusIn.bind(this);
+        this._focusOutListener = this._handleFocusOut.bind(this);
+        this._keyboardListener = this._handleKeyboard.bind(this);
     }
     initialize() {
         this._adapter.tryApplyGlobalConfiguration(['duration', 'placement', 'dismissible']);
+        this._adapter.addPointerEnterListener(this._pointerEnterListener);
+        this._adapter.addPointerLeaveListener(this._pointerLeaveListener);
+        this._adapter.addFocusInListener(this._focusInListener);
+        this._adapter.addFocusOutListener(this._focusOutListener);
+        this._adapter.addKeyboardListener(this._keyboardListener);
         if (this._open) {
             this.show();
         }
     }
     show() {
         this._adapter.show();
+        DismissibleStack.instance.add(this._adapter.hostElement);
         if (isFinite(this._duration) && this._duration > 0) {
             /* c8 ignore next 3 */
             if (this._hideTimeout) {
@@ -38,6 +52,9 @@ export class ToastCore {
             window.clearTimeout(this._hideTimeout);
             this._hideTimeout = undefined;
         }
+        this._isHovered = false;
+        this._isFocused = false;
+        DismissibleStack.instance.remove(this._adapter.hostElement);
         await this._adapter.hide();
         this._open = false;
         this._adapter.toggleHostAttribute(TOAST_CONSTANTS.attributes.OPEN, this._open);
@@ -52,6 +69,55 @@ export class ToastCore {
     _onClose(_evt) {
         this.hide();
     }
+    _handlePointerEnter() {
+        this._isHovered = true;
+        this._updateTimerState();
+    }
+    _handlePointerLeave() {
+        this._isHovered = false;
+        this._updateTimerState();
+    }
+    _handleFocusIn() {
+        this._isFocused = true;
+        this._updateTimerState();
+    }
+    _handleFocusOut() {
+        this._isFocused = false;
+        this._updateTimerState();
+    }
+    _handleKeyboard(event) {
+        if (event.key === 'Escape' && this._open) {
+            event.stopPropagation();
+            DismissibleStack.instance.dismiss(this._adapter.hostElement, { reason: 'escape' });
+        }
+    }
+    _updateTimerState() {
+        const shouldPause = this._isHovered || this._isFocused;
+        if (shouldPause && this._hideTimeout) {
+            this._pauseTimer();
+        }
+        else if (!shouldPause && !this._hideTimeout) {
+            this._resumeTimer();
+        }
+    }
+    _pauseTimer() {
+        if (this._hideTimeout) {
+            window.clearTimeout(this._hideTimeout);
+            this._hideTimeout = undefined;
+        }
+    }
+    _resumeTimer() {
+        if (isFinite(this._duration) && this._duration > 0) {
+            this._hideTimeout = window.setTimeout(() => this.hide(), this._duration);
+        }
+    }
+    [tryDismiss](state) {
+        if (state?.reason === 'escape') {
+            this.hide();
+            return true;
+        }
+        return false;
+    }
     get open() {
         return this._open;
     }

package/esm/toast/toast.d.ts

@@ -6,6 +6,7 @@
 import { BaseComponent } from '../core/base/base-component';
 import { IWithDefaultAria } from '../core/mixins/internals/with-default-aria';
 import { IWithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { IDismissible, IDismissibleStackState, tryDismiss } from '../core/utils/dismissible-stack';
 import { IIconProperties } from '../icon';
 import { ToastPlacement, ToastTheme } from './toast-constants';
 export interface IToastProperties {
@@ -24,7 +25,7 @@ export interface IToastPresentConfiguration extends Partial<IToastProperties> {
     icon?: Partial<IIconProperties>;
     topLayer?: boolean;
 }
-export interface IToastComponent extends IToastProperties, IWithElementInternals, IWithDefaultAria {
+export interface IToastComponent extends IToastProperties, IWithElementInternals, IWithDefaultAria, IDismissible {
     show(): void;
     hide(): Promise<void>;
 }
@@ -41,7 +42,7 @@ declare const ToastComponent_base: import("../constants").AbstractConstructor<im
 /**
  * @tag forge-toast
  *
- * @summary Toasts are non-modal notifications that appear in response to user interactions.
+ * @summary Toasts are non-modal notifications that appear in response to user interactions. Use toasts to provide brief messages about app processes at the bottom or top of the screen. They automatically disappear after a timeout, but can also include an action button and a dismiss button.
  *
  * @dependency forge-overlay
  * @dependency forge-button
@@ -117,6 +118,12 @@ export declare class ToastComponent extends ToastComponent_base implements IToas
      * @returns A promise that resolves when the toast animation completes.
      */
     hide(): Promise<void>;
+    /**
+     * Attempts to dismiss the toast.
+     * @param state The dismiss state.
+     * @returns True if the toast was dismissed, false otherwise.
+     */
+    [tryDismiss](state?: IDismissibleStackState): boolean;
     /**
      * Presents a toast notification.
      * @param config The configuration for the toast.

package/esm/toast/toast.js

@@ -11,6 +11,7 @@ import { setDefaultAria } from '../constants';
 import { BaseComponent } from '../core/base/base-component';
 import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
 import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { tryDismiss } from '../core/utils/dismissible-stack';
 import { DialogComponent, dialogStack } from '../dialog';
 import { IconComponent, IconRegistry } from '../icon';
 import { IconButtonComponent } from '../icon-button';
@@ -23,7 +24,7 @@ const styles = '@keyframes slidein{from{transform:translateY(var(--_toast-slide-
 /**
  * @tag forge-toast
  *
- * @summary Toasts are non-modal notifications that appear in response to user interactions.
+ * @summary Toasts are non-modal notifications that appear in response to user interactions. Use toasts to provide brief messages about app processes at the bottom or top of the screen. They automatically disappear after a timeout, but can also include an action button and a dismiss button.
  *
  * @dependency forge-overlay
  * @dependency forge-button
@@ -138,6 +139,14 @@ let ToastComponent = class ToastComponent extends WithElementInternals(WithDefau
     hide() {
         return this._core.hide();
     }
+    /**
+     * Attempts to dismiss the toast.
+     * @param state The dismiss state.
+     * @returns True if the toast was dismissed, false otherwise.
+     */
+    [tryDismiss](state) {
+        return this._core[tryDismiss](state);
+    }
     /**
      * Presents a toast notification.
      * @param config The configuration for the toast.

package/esm/toolbar/toolbar.d.ts

@@ -15,9 +15,7 @@ declare global {
 /**
  * @tag forge-toolbar
  *
- * @summary
- * Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar.
- * This component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.
+ * @summary Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar. This component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.
  *
  * @property {boolean} [inverted=false] - Controls whether a bottom divider (default) or top divider (true) is used.
  *

package/esm/toolbar/toolbar.js

@@ -12,9 +12,7 @@ const styles = ':host{display:block}:host([hidden]){display:none}.forge-toolbar{
 /**
  * @tag forge-toolbar
  *
- * @summary
- * Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar.
- * This component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.
+ * @summary Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar. This component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.
  *
  * @property {boolean} [inverted=false] - Controls whether a bottom divider (default) or top divider (true) is used.
  *

package/esm/tooltip/tooltip.d.ts

@@ -37,7 +37,7 @@ declare const TooltipComponent_base: import("..").AbstractConstructor<import("..
 /**
  * @tag forge-tooltip
  *
- * @summary Tooltips display information related to an element when the user hovers over an element.
+ * @summary Tooltips display information related to an element when the user focuses or hovers over an anchor element. Use tooltips to provide additional context or information about elements that may not be immediately apparent.
  *
  * @dependency forge-overlay
  *

package/esm/tooltip/tooltip.js

@@ -19,7 +19,7 @@ const styles = '@keyframes slidein{from{opacity:0;transform:translateX(var(--_to
 /**
  * @tag forge-tooltip
  *
- * @summary Tooltips display information related to an element when the user hovers over an element.
+ * @summary Tooltips display information related to an element when the user focuses or hovers over an anchor element. Use tooltips to provide additional context or information about elements that may not be immediately apparent.
  *
  * @dependency forge-overlay
  *

package/esm/view-switcher/view/view.d.ts

@@ -12,7 +12,7 @@ declare global {
     }
 }
 /**
- * @summary A wrapper component that represents a single view content area within a view-switcher for organizing and displaying content sections.
+ * @summary Represents a single view content area within a view-switcher for organizing and displaying content sections.
  *
  * @tag forge-view
  */

package/esm/view-switcher/view/view.js

@@ -10,7 +10,7 @@ import { VIEW_CONSTANTS } from './view-constants';
 const template = '<template><slot></slot></template>';
 const styles = ':host{display:block}:host([hidden]){display:none}';
 /**
- * @summary A wrapper component that represents a single view content area within a view-switcher for organizing and displaying content sections.
+ * @summary Represents a single view content area within a view-switcher for organizing and displaying content sections.
  *
  * @tag forge-view
  */

package/esm/view-switcher/view-switcher.d.ts

@@ -19,7 +19,7 @@ declare global {
     }
 }
 /**
- * @summary A container component that manages switching between multiple child views with configurable animations and programmatic navigation controls.
+ * @summary A container component that manages switching between multiple child `<forge-view>` elements with configurable animations and programmatic navigation controls.
  *
  * @tag forge-view-switcher
  *

package/esm/view-switcher/view-switcher.js

@@ -13,7 +13,7 @@ import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-view-switcher\" part=\"root\"><slot></slot></div></template>';
 const styles = ':host{height:var(--_view-switcher-height);width:var(--_view-switcher-width);display:block}:host{--_view-switcher-height:var(--forge-view-switcher-height, auto);--_view-switcher-width:var(--forge-view-switcher-width, auto)}:host([hidden]){display:none}.forge-view-switcher{--_view-switcher-animation-duration:var(--forge-view-switcher-animation-duration, var(--forge-animation-duration-medium2, 300ms));--_view-switcher-animation-easing:var(--forge-view-switcher-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-view-switcher{height:var(--_view-switcher-height);width:var(--_view-switcher-width);position:relative;overflow:hidden;transition-property:height;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing)}.forge-view-switcher ::slotted(.forge-view-switcher__view--hidden){position:absolute;top:0;right:0;bottom:0;left:0}:host(.slide) ::slotted(forge-view){transition-property:transform;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing);will-change:transform}:host(.fade) ::slotted(forge-view){transition-property:opacity;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing);will-change:opacity}:host(.fade) ::slotted(.forge-view-switcher__view--hidden){opacity:0}';
 /**
- * @summary A container component that manages switching between multiple child views with configurable animations and programmatic navigation controls.
+ * @summary A container component that manages switching between multiple child `<forge-view>` elements with configurable animations and programmatic navigation controls.
  *
  * @tag forge-view-switcher
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {

package/sass/state-layer/_core.scss

@@ -57,6 +57,8 @@
 @mixin layer-base {
   opacity: 0;
   position: absolute;
+  backface-visibility: hidden;
+  transform: translateZ(0);
 }
 
 @mixin hover-base {