@tylertech/forge 3.10.5 → 3.12.0

package/esm/tooltip/tooltip-core.d.ts

@@ -39,8 +39,17 @@ export declare class TooltipCore extends TooltipCore_base implements ITooltipCor
     private _hoverStartListener;
     private _hoverEndListener;
     private _hoverTimeout;
+    private _hoverOutsideTimeout;
+    private _isHoveringTooltip;
+    private _isHoveringAnchor;
+    private _tooltipHoverStartListener;
+    private _tooltipHoverEndListener;
+    private _anchorOpenHoverStartListener;
+    private _anchorOpenHoverEndListener;
     private _focusListener;
     private _blurListener;
+    private _keyboardFocusListener;
+    private _keyboardBlurListener;
     private _longpressVisibilityTimeout;
     private _scrollListener;
     private _mouseDownListener;
@@ -56,10 +65,21 @@ export declare class TooltipCore extends TooltipCore_base implements ITooltipCor
     private _hide;
     private _attachDismissListeners;
     private _detachDismissListeners;
+    private _attachTooltipHoverListeners;
+    private _detachTooltipHoverListeners;
+    private _attachAnchorOpenHoverListeners;
+    private _detachAnchorOpenHoverListeners;
     private _onHoverStart;
     private _onHoverEnd;
     private _onFocus;
     private _onBlur;
+    private _onKeyboardFocus;
+    private _onKeyboardBlur;
+    private _onTooltipHoverStart;
+    private _onTooltipHoverEnd;
+    private _onAnchorOpenHoverStart;
+    private _onAnchorOpenHoverEnd;
+    private _scheduleHideIfOutsideHoverRegion;
     protected _onLongpress(): void;
     protected _onLongpressEnd(evt: PointerEvent | TouchEvent): void;
     private _onTryShow;

package/esm/tooltip/tooltip-core.js

@@ -24,9 +24,20 @@ export class TooltipCore extends WithLongpressListener(Object) {
         // Hover trigger type
         this._hoverStartListener = this._onHoverStart.bind(this);
         this._hoverEndListener = this._onHoverEnd.bind(this);
+        this._isHoveringTooltip = false;
+        this._isHoveringAnchor = false;
+        // Tooltip hover listeners
+        this._tooltipHoverStartListener = this._onTooltipHoverStart.bind(this);
+        this._tooltipHoverEndListener = this._onTooltipHoverEnd.bind(this);
+        // Anchor hover listeners (when tooltip is open)
+        this._anchorOpenHoverStartListener = this._onAnchorOpenHoverStart.bind(this);
+        this._anchorOpenHoverEndListener = this._onAnchorOpenHoverEnd.bind(this);
         // Focus trigger type
         this._focusListener = this._onFocus.bind(this);
         this._blurListener = this._onBlur.bind(this);
+        // Keyboard-only focus for hover trigger (when focus trigger is not explicitly enabled)
+        this._keyboardFocusListener = this._onKeyboardFocus.bind(this);
+        this._keyboardBlurListener = this._onKeyboardBlur.bind(this);
         // Dismiss/hide triggers
         this._scrollListener = this._onTryHide.bind(this);
         this._mouseDownListener = this._onTryHide.bind(this);
@@ -66,7 +77,13 @@ export class TooltipCore extends WithLongpressListener(Object) {
             triggerTypes.push('longpress');
         }
         const triggerInitializers = {
-            hover: () => this._adapter.addAnchorListener('mouseenter', this._hoverStartListener),
+            hover: () => {
+                this._adapter.addAnchorListener('mouseenter', this._hoverStartListener);
+                // Add keyboard focus support if focus trigger is not explicitly enabled
+                if (!triggerTypes.includes('focus')) {
+                    this._adapter.addAnchorListener('focusin', this._keyboardFocusListener);
+                }
+            },
             longpress: () => this._startLongpressListener(this._adapter.anchorElement),
             focus: () => this._adapter.addAnchorListener('focusin', this._focusListener)
         };
@@ -86,6 +103,11 @@ export class TooltipCore extends WithLongpressListener(Object) {
                 this._adapter.removeAnchorListener('mouseenter', this._hoverStartListener);
                 this._adapter.removeAnchorListener('mousedown', this._hoverEndListener);
                 this._adapter.removeAnchorListener('mouseleave', this._hoverEndListener);
+                // Remove keyboard focus support if focus trigger is not explicitly enabled
+                if (!triggerTypes.includes('focus')) {
+                    this._adapter.removeAnchorListener('focusin', this._keyboardFocusListener);
+                    this._adapter.removeAnchorListener('focusout', this._keyboardBlurListener);
+                }
             },
             longpress: () => this._stopLongpressListener(this._adapter.anchorElement),
             focus: () => {
@@ -101,13 +123,20 @@ export class TooltipCore extends WithLongpressListener(Object) {
         }
         this._open = true;
         this._adapter.show();
+        this._attachTooltipHoverListeners();
+        this._attachAnchorOpenHoverListeners();
         DismissibleStack.instance.add(this._adapter.hostElement);
         this._attachDismissListeners();
         this._adapter.toggleHostAttribute(TOOLTIP_CONSTANTS.attributes.OPEN, this._open);
     }
     _hide() {
         window.clearTimeout(this._hoverTimeout);
+        window.clearTimeout(this._hoverOutsideTimeout);
         window.clearTimeout(this._longpressVisibilityTimeout);
+        this._isHoveringTooltip = false;
+        this._isHoveringAnchor = false;
+        this._detachTooltipHoverListeners();
+        this._detachAnchorOpenHoverListeners();
         this._open = false;
         this._adapter.hide();
         DismissibleStack.instance.remove(this._adapter.hostElement);
@@ -128,11 +157,35 @@ export class TooltipCore extends WithLongpressListener(Object) {
         this._adapter.removeDocumentListener('wheel', this._scrollListener);
         this._adapter.removeLightDismissListener(this._lightDismissListener);
     }
+    _attachTooltipHoverListeners() {
+        // Only attach hover listeners if hover is one of the active trigger types
+        if (this._triggerTypes.includes('hover')) {
+            this._adapter.addTooltipListener('mouseenter', this._tooltipHoverStartListener);
+            this._adapter.addTooltipListener('mouseleave', this._tooltipHoverEndListener);
+        }
+    }
+    _detachTooltipHoverListeners() {
+        this._adapter.removeTooltipListener('mouseenter', this._tooltipHoverStartListener);
+        this._adapter.removeTooltipListener('mouseleave', this._tooltipHoverEndListener);
+    }
+    _attachAnchorOpenHoverListeners() {
+        // Only attach hover listeners if hover is one of the active trigger types
+        if (this._triggerTypes.includes('hover')) {
+            this._adapter.addAnchorListener('mouseenter', this._anchorOpenHoverStartListener);
+            this._adapter.addAnchorListener('mouseleave', this._anchorOpenHoverEndListener);
+        }
+    }
+    _detachAnchorOpenHoverListeners() {
+        this._adapter.removeAnchorListener('mouseenter', this._anchorOpenHoverStartListener);
+        this._adapter.removeAnchorListener('mouseleave', this._anchorOpenHoverEndListener);
+    }
     _onHoverStart(_evt) {
         /* c8 ignore next 3 */
         if (this._open) {
             return;
         }
+        this._isHoveringAnchor = true;
+        window.clearTimeout(this._hoverOutsideTimeout);
         this._adapter.addAnchorListener('mousedown', this._hoverEndListener);
         this._adapter.addAnchorListener('mouseleave', this._hoverEndListener);
         if (this._delay) {
@@ -145,10 +198,11 @@ export class TooltipCore extends WithLongpressListener(Object) {
         }
     }
     _onHoverEnd(_evt) {
+        this._isHoveringAnchor = false;
         this._adapter.removeAnchorListener('mousedown', this._hoverEndListener);
         this._adapter.removeAnchorListener('mouseleave', this._hoverEndListener);
         window.clearTimeout(this._hoverTimeout);
-        this._onTryHide();
+        this._scheduleHideIfOutsideHoverRegion();
     }
     _onFocus(_evt) {
         /* c8 ignore next 3 */
@@ -162,6 +216,46 @@ export class TooltipCore extends WithLongpressListener(Object) {
         this._adapter.removeAnchorListener('focusout', this._blurListener);
         this._onTryHide();
     }
+    _onKeyboardFocus(_evt) {
+        /* c8 ignore next 3 */
+        if (this._open) {
+            return;
+        }
+        // Only show tooltip if the focus is from keyboard (focus-visible)
+        if (this._adapter.isKeyboardFocused()) {
+            this._adapter.addAnchorListener('focusout', this._keyboardBlurListener);
+            this._onTryShow();
+        }
+    }
+    _onKeyboardBlur(_evt) {
+        this._adapter.removeAnchorListener('focusout', this._keyboardBlurListener);
+        this._onTryHide();
+    }
+    _onTooltipHoverStart(_evt) {
+        this._isHoveringTooltip = true;
+        window.clearTimeout(this._hoverOutsideTimeout);
+    }
+    _onTooltipHoverEnd(_evt) {
+        this._isHoveringTooltip = false;
+        this._scheduleHideIfOutsideHoverRegion();
+    }
+    _onAnchorOpenHoverStart(_evt) {
+        this._isHoveringAnchor = true;
+        window.clearTimeout(this._hoverOutsideTimeout);
+    }
+    _onAnchorOpenHoverEnd(_evt) {
+        this._isHoveringAnchor = false;
+        this._scheduleHideIfOutsideHoverRegion();
+    }
+    _scheduleHideIfOutsideHoverRegion() {
+        window.clearTimeout(this._hoverOutsideTimeout);
+        this._hoverOutsideTimeout = window.setTimeout(() => {
+            // Only hide if user is outside both anchor and tooltip
+            if (!this._isHoveringTooltip && !this._isHoveringAnchor) {
+                this._onTryHide();
+            }
+        }, TOOLTIP_CONSTANTS.numbers.HOVER_OUTSIDE_THRESHOLD);
+    }
     _onLongpress() {
         this._onTryShow();
     }

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

@@ -15,11 +15,11 @@ 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';
 const template = '<template><div class=\"forge-tooltip\" part=\"surface\"><slot></slot><div class=\"arrow\" part=\"arrow\"></div></div></template>';
-const styles = '@keyframes slidein{from{opacity:0;transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;transform:translateX(0) translateY(0)}}:host{display:contents;pointer-events:none}:host([hidden]){display:none}.forge-tooltip{--_tooltip-background:var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));--_tooltip-color:var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));--_tooltip-shape:var(--forge-tooltip-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_tooltip-padding:var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));--_tooltip-padding-block:var(--forge-tooltip-padding-block, var(--_tooltip-padding));--_tooltip-padding-inline:var(--forge-tooltip-padding-inline, var(--_tooltip-padding));--_tooltip-width:var(--forge-tooltip-width, max-content);--_tooltip-max-width:var(--forge-tooltip-max-width, 320px);--_tooltip-elevation:var(--forge-tooltip-elevation, var(--forge-theme-surface-bright-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)));--_tooltip-content-align:var(--forge-tooltip-content-align, center);--_tooltip-border-width:var(--forge-tooltip-border-width, 0);--_tooltip-border-style:var(--forge-tooltip-border-style, solid);--_tooltip-border-color:var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));--_tooltip-animation-timing:var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_tooltip-animation-duration:var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));--_tooltip-animation-offset:var(--forge-tooltip-animation-offset, 24px);--_tooltip-arrow-size:var(--forge-tooltip-arrow-size, 8px);--_tooltip-arrow-height:var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));--_tooltip-arrow-width:var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));--_tooltip-arrow-shape:var(--forge-tooltip-arrow-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_tooltip-arrow-rotation:var(--forge-tooltip-arrow-rotation, 0deg);--_tooltip-arrow-top-rotation:var(--forge-tooltip-arrow-top-rotation, 315deg);--_tooltip-arrow-right-rotation:var(--forge-tooltip-arrow-right-rotation, 45deg);--_tooltip-arrow-bottom-rotation:var(--forge-tooltip-arrow-bottom-rotation, 135deg);--_tooltip-arrow-left-rotation:var(--forge-tooltip-arrow-left-rotation, 225deg)}.forge-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:relative;background:var(--_tooltip-background);color:var(--_tooltip-color);border-radius:var(--_tooltip-shape);border-width:var(--_tooltip-border-width);border-style:var(--_tooltip-border-style);border-color:var(--_tooltip-border-color);padding-block:var(--_tooltip-padding-block);padding-inline:var(--_tooltip-padding-inline);box-shadow:var(--_tooltip-elevation);width:var(--_tooltip-width);max-width:var(--_tooltip-max-width);pointer-events:none;text-align:var(--_tooltip-content-align);line-height:normal;white-space:normal;animation-duration:var(--_tooltip-animation-duration);animation-timing-function:var(--_tooltip-animation-timing);animation-name:slidein;animation-fill-mode:forwards}:host(:not([open])) .forge-tooltip{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}.arrow{position:absolute;contain:strict;background-color:inherit;height:var(--_tooltip-arrow-height);width:var(--_tooltip-arrow-width);box-shadow:inherit;border:inherit;border-end-start-radius:var(--_tooltip-arrow-shape);rotate:var(--_tooltip-arrow-rotation);clip-path:var(--_tooltip-arrow-clip-path);--_tooltip-arrow-translate-x:0;--_tooltip-arrow-translate-y:0;--_tooltip-arrow-clip-path:polygon(0 0, 0 100%, 100% 100%)}.forge-tooltip{--_tooltip-slidein-x:0;--_tooltip-slidein-y:0}forge-overlay[open][position-placement^=top] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=top] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-top-rotation);margin-block-end:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=right] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=right] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-right-rotation);margin-inline-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=bottom] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=bottom] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-bottom-rotation);margin-block-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=left] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=left] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-left-rotation);margin-inline-end:var(--_tooltip-border-width)}';
+const styles = '@keyframes slidein{from{opacity:0;transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;transform:translateX(0) translateY(0)}}:host{display:contents}:host([hidden]){display:none}.forge-tooltip{--_tooltip-background:var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));--_tooltip-color:var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));--_tooltip-shape:var(--forge-tooltip-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_tooltip-padding:var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));--_tooltip-padding-block:var(--forge-tooltip-padding-block, var(--_tooltip-padding));--_tooltip-padding-inline:var(--forge-tooltip-padding-inline, var(--_tooltip-padding));--_tooltip-width:var(--forge-tooltip-width, max-content);--_tooltip-max-width:var(--forge-tooltip-max-width, 320px);--_tooltip-elevation:var(--forge-tooltip-elevation, var(--forge-theme-surface-bright-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)));--_tooltip-content-align:var(--forge-tooltip-content-align, center);--_tooltip-border-width:var(--forge-tooltip-border-width, 0);--_tooltip-border-style:var(--forge-tooltip-border-style, solid);--_tooltip-border-color:var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));--_tooltip-animation-timing:var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_tooltip-animation-duration:var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));--_tooltip-animation-offset:var(--forge-tooltip-animation-offset, 24px);--_tooltip-arrow-size:var(--forge-tooltip-arrow-size, 8px);--_tooltip-arrow-height:var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));--_tooltip-arrow-width:var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));--_tooltip-arrow-shape:var(--forge-tooltip-arrow-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_tooltip-arrow-rotation:var(--forge-tooltip-arrow-rotation, 0deg);--_tooltip-arrow-top-rotation:var(--forge-tooltip-arrow-top-rotation, 315deg);--_tooltip-arrow-right-rotation:var(--forge-tooltip-arrow-right-rotation, 45deg);--_tooltip-arrow-bottom-rotation:var(--forge-tooltip-arrow-bottom-rotation, 135deg);--_tooltip-arrow-left-rotation:var(--forge-tooltip-arrow-left-rotation, 225deg)}.forge-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:relative;background:var(--_tooltip-background);color:var(--_tooltip-color);border-radius:var(--_tooltip-shape);border-width:var(--_tooltip-border-width);border-style:var(--_tooltip-border-style);border-color:var(--_tooltip-border-color);padding-block:var(--_tooltip-padding-block);padding-inline:var(--_tooltip-padding-inline);box-shadow:var(--_tooltip-elevation);width:var(--_tooltip-width);max-width:var(--_tooltip-max-width);text-align:var(--_tooltip-content-align);line-height:normal;white-space:normal;animation-duration:var(--_tooltip-animation-duration);animation-timing-function:var(--_tooltip-animation-timing);animation-name:slidein;animation-fill-mode:forwards}:host(:not([open])) .forge-tooltip{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}.arrow{position:absolute;contain:strict;background-color:inherit;height:var(--_tooltip-arrow-height);width:var(--_tooltip-arrow-width);box-shadow:inherit;border:inherit;border-end-start-radius:var(--_tooltip-arrow-shape);rotate:var(--_tooltip-arrow-rotation);clip-path:var(--_tooltip-arrow-clip-path);--_tooltip-arrow-translate-x:0;--_tooltip-arrow-translate-y:0;--_tooltip-arrow-clip-path:polygon(0 0, 0 100%, 100% 100%)}.forge-tooltip{--_tooltip-slidein-x:0;--_tooltip-slidein-y:0}forge-overlay[open][position-placement^=top] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=top] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-top-rotation);margin-block-end:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=right] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=right] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-right-rotation);margin-inline-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=bottom] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=bottom] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-bottom-rotation);margin-block-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=left] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=left] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-left-rotation);margin-inline-end:var(--_tooltip-border-width)}';
 /**
  * @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,6 +12,8 @@ declare global {
     }
 }
 /**
+ * @summary Represents a single view content area within a view-switcher for organizing and displaying content sections.
+ *
  * @tag forge-view
  */
 export declare class ViewComponent extends BaseComponent implements IViewComponent {

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

@@ -10,6 +10,8 @@ import { VIEW_CONSTANTS } from './view-constants';
 const template = '<template><slot></slot></template>';
 const styles = ':host{display:block}:host([hidden]){display:none}';
 /**
+ * @summary Represents a single view content area within a view-switcher for organizing and displaying content sections.
+ *
  * @tag forge-view
  */
 let ViewComponent = class ViewComponent extends BaseComponent {

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

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

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

@@ -13,6 +13,8 @@ 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 `<forge-view>` elements with configurable animations and programmatic navigation controls.
+ *
  * @tag forge-view-switcher
  *
  * @dependency forge-view

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.10.5",
+  "version": "3.12.0",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,11 +13,11 @@
   "typings": "esm/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@floating-ui/dom": "^1.7.1",
+    "@floating-ui/dom": "^1.7.4",
     "@tylertech/forge-core": "^3.2.1",
-    "@tylertech/tyler-icons": "^2.0.3",
+    "@tylertech/tyler-icons": "^2.0.4",
     "imask": "^7.6.1",
-    "lit": "^3.3.0",
+    "lit": "^3.3.1",
     "tslib": "^2.8.1"
   },
   "customElements": "custom-elements.json"

package/sass/focus-indicator/focus-indicator.scss

@@ -26,7 +26,7 @@
 // States
 //
 
-:host([active]) {
+:host(:where(:state(active), [active])) {
   @include active;
 }
 

package/sass/icon-button/forge-icon-button.scss

@@ -47,9 +47,9 @@
     );
 
     &:where(
-        .forge-icon-button--text,
-        :not(:where(.forge-icon-button--outlined, .forge-icon-button--tonal, .forge-icon-button--filled, .forge-icon-button--raised))
-      ) {
+      .forge-icon-button--text,
+      :not(:where(.forge-icon-button--outlined, .forge-icon-button--tonal, .forge-icon-button--filled, .forge-icon-button--raised))
+    ) {
       @include focus-indicator.provide-theme(
         (
           outward-offset: 0px // Requires unit

package/sass/list/forge-list.scss

@@ -118,12 +118,12 @@
     }
 
     &:has(
-        button:not(:disabled),
-        a,
-        label,
-        .forge-list-item--interactive:not(.forge-list-item--disabled),
-        :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])
-      ) {
+      button:not(:disabled),
+      a,
+      label,
+      .forge-list-item--interactive:not(.forge-list-item--disabled),
+      :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])
+    ) {
       a,
       button,
       label,

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 {

package/sass/table/_core.scss

@@ -9,6 +9,7 @@
 @use '../core/styles/theme';
 @use '../core/styles/typography';
 @use '../core/styles/animation';
+@use '../focus-indicator';
 @use './variables';
 
 @mixin host {
@@ -239,7 +240,18 @@
   font: inherit;
   color: inherit;
   width: 100%;
-  outline-offset: #{spacing.variable(xxsmall)};
+  outline: none;
+  position: relative;
+
+  forge-focus-indicator {
+    border-radius: 4px;
+
+    @include focus-indicator.provide-theme(
+      (
+        'offset-inline': -4px
+      )
+    );
+  }
 }
 
 // The base table body row styles for row interactions.

package/sass/tooltip/_core.scss

@@ -11,7 +11,6 @@
 
 @mixin host {
   display: contents;
-  pointer-events: none;
 }
 
 @mixin base {
@@ -32,7 +31,6 @@
 
   width: #{token(width)};
   max-width: #{token(max-width)};
-  pointer-events: none;
   text-align: #{token(content-align)};
   line-height: normal;
   white-space: normal;

package/esm/focus-indicator/focus-indicator-adapter.d.ts

@@ -1,29 +0,0 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseAdapter, IBaseAdapter } from '../core';
-import { IFocusIndicatorComponent } from './focus-indicator';
-export interface IFocusIndicatorAdapter extends IBaseAdapter {
-    destroy(): void;
-    hasTargetElement(): boolean;
-    addTargetListener(type: string, listener: EventListener): void;
-    removeTargetListener(type: string, listener: EventListener): void;
-    getTargetElement(): HTMLElement | null;
-    setTargetElement(el: HTMLElement | null): void;
-    trySetTarget(value: string | null): void;
-    isActive(selector: string, el?: HTMLElement | null): boolean;
-}
-export declare class FocusIndicatorAdapter extends BaseAdapter<IFocusIndicatorComponent> implements IFocusIndicatorAdapter {
-    private _targetElement;
-    constructor(component: IFocusIndicatorComponent);
-    destroy(): void;
-    hasTargetElement(): boolean;
-    addTargetListener(type: string, listener: EventListener): void;
-    removeTargetListener(type: string, listener: EventListener): void;
-    getTargetElement(): HTMLElement | null;
-    setTargetElement(el: HTMLElement | null): void;
-    trySetTarget(value: string | null): void;
-    isActive(selector: string, el?: HTMLElement | null): boolean;
-}

package/esm/focus-indicator/focus-indicator-adapter.js

@@ -1,37 +0,0 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseAdapter, locateTargetHeuristic } from '../core';
-export class FocusIndicatorAdapter extends BaseAdapter {
-    constructor(component) {
-        super(component);
-        this._targetElement = null;
-    }
-    destroy() {
-        this._targetElement = null;
-    }
-    hasTargetElement() {
-        return !!this._targetElement;
-    }
-    addTargetListener(type, listener) {
-        this._targetElement?.addEventListener(type, listener);
-    }
-    removeTargetListener(type, listener) {
-        this._targetElement?.removeEventListener(type, listener);
-    }
-    getTargetElement() {
-        return this._targetElement;
-    }
-    setTargetElement(el) {
-        this._targetElement = el;
-    }
-    trySetTarget(value) {
-        this._targetElement = locateTargetHeuristic(this._component, value);
-    }
-    isActive(selector, el) {
-        const targetedEl = el ?? this._targetElement;
-        return !!targetedEl?.matches(selector);
-    }
-}

package/esm/focus-indicator/focus-indicator-core.d.ts

@@ -1,48 +0,0 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { IFocusIndicatorAdapter } from './focus-indicator-adapter';
-import { FocusIndicatorFocusMode } from './focus-indicator-constants';
-export interface IFocusIndicatorCore {
-    targetElement: HTMLElement | null;
-    target: string | null;
-    active: boolean;
-    inward: boolean;
-    circular: boolean;
-    allowFocus: boolean;
-    focusMode: FocusIndicatorFocusMode;
-    initialize(): void;
-    destroy(): void;
-}
-export declare class FocusIndicatorCore implements IFocusIndicatorCore {
-    private _adapter;
-    private _target;
-    private _active;
-    private _inward;
-    private _circular;
-    private _allowFocus;
-    private _focusMode;
-    private _interactionListener;
-    constructor(_adapter: IFocusIndicatorAdapter);
-    initialize(): void;
-    destroy(): void;
-    private _addListeners;
-    private _removeListeners;
-    private _onInteraction;
-    get targetElement(): HTMLElement | null;
-    set targetElement(value: HTMLElement | null);
-    get target(): string | null;
-    set target(value: string | null);
-    get active(): boolean;
-    set active(value: boolean);
-    get inward(): boolean;
-    set inward(value: boolean);
-    get circular(): boolean;
-    set circular(value: boolean);
-    get allowFocus(): boolean;
-    set allowFocus(value: boolean);
-    get focusMode(): FocusIndicatorFocusMode;
-    set focusMode(value: FocusIndicatorFocusMode);
-}

package/esm/focus-indicator/focus-indicator-core.js

@@ -1,129 +0,0 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { FOCUS_INDICATOR_CONSTANTS } from './focus-indicator-constants';
-export class FocusIndicatorCore {
-    constructor(_adapter) {
-        this._adapter = _adapter;
-        this._target = null;
-        this._active = false;
-        this._inward = false;
-        this._circular = false;
-        this._allowFocus = false;
-        this._focusMode = FOCUS_INDICATOR_CONSTANTS.defaults.FOCUS_MODE;
-        this._interactionListener = evt => this._onInteraction(evt);
-    }
-    initialize() {
-        if (!this._adapter.hasTargetElement()) {
-            this._adapter.trySetTarget(this._target);
-        }
-        this._addListeners();
-    }
-    destroy() {
-        this._removeListeners(); // Must be called before destroying adapter
-        this._adapter.destroy();
-    }
-    _addListeners() {
-        this._adapter.addTargetListener(this._focusMode, this._interactionListener);
-        this._adapter.addTargetListener('focusout', this._interactionListener);
-        this._adapter.addTargetListener('pointerdown', this._interactionListener);
-    }
-    _removeListeners() {
-        this._adapter.removeTargetListener(this._focusMode, this._interactionListener);
-        this._adapter.removeTargetListener('focusout', this._interactionListener);
-        this._adapter.removeTargetListener('pointerdown', this._interactionListener);
-    }
-    _onInteraction(evt) {
-        const target = evt.target;
-        switch (evt.type) {
-            case this._focusMode:
-                this.active = this._adapter.isActive(this._allowFocus ? ':focus' : ':focus-visible', target);
-                break;
-            case 'focusout':
-                this.active = false;
-                break;
-            case 'pointerdown':
-                this.active = this._allowFocus ? this._adapter.isActive(':focus', target) : this._adapter.isActive(':focus-visible', target);
-                break;
-        }
-    }
-    get targetElement() {
-        return this._adapter.getTargetElement();
-    }
-    set targetElement(value) {
-        this._removeListeners();
-        this._adapter.setTargetElement(value);
-        this._addListeners();
-    }
-    get target() {
-        return this._adapter.getHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.TARGET);
-    }
-    set target(value) {
-        if (this._target !== value) {
-            this._target = value;
-            if (this._adapter.isConnected) {
-                this._adapter.trySetTarget(value);
-            }
-            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.TARGET, Boolean(this._target), this._target);
-        }
-    }
-    get active() {
-        return this._active;
-    }
-    set active(value) {
-        value = Boolean(value);
-        if (this._active !== value) {
-            this._active = value;
-            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.ACTIVE, this._active);
-        }
-    }
-    get inward() {
-        return this._inward;
-    }
-    set inward(value) {
-        value = Boolean(value);
-        if (this._inward !== value) {
-            this._inward = value;
-            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.INWARD, this._inward);
-        }
-    }
-    get circular() {
-        return this._circular;
-    }
-    set circular(value) {
-        value = Boolean(value);
-        if (this._circular !== value) {
-            this._circular = value;
-            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.CIRCULAR, this._circular);
-        }
-    }
-    get allowFocus() {
-        return this._allowFocus;
-    }
-    set allowFocus(value) {
-        value = Boolean(value);
-        if (this._allowFocus !== value) {
-            this._allowFocus = value;
-            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.ALLOW_FOCUS, this._allowFocus);
-        }
-    }
-    get focusMode() {
-        return this._focusMode;
-    }
-    set focusMode(value) {
-        value ?? (value = FOCUS_INDICATOR_CONSTANTS.defaults.FOCUS_MODE);
-        if (this._focusMode !== value) {
-            if (this._adapter.isConnected) {
-                this._removeListeners();
-            }
-            this._focusMode = value;
-            if (this._adapter.isConnected) {
-                this._addListeners();
-            }
-            const hasFocusMode = this._focusMode !== FOCUS_INDICATOR_CONSTANTS.defaults.FOCUS_MODE;
-            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.FOCUS_MODE, hasFocusMode, this._focusMode);
-        }
-    }
-}