@tylertech/forge-ai 0.4.0 → 0.5.0

package/dist/core/overlay/overlay.d.ts

@@ -45,6 +45,16 @@ export declare class ForgeAiOverlayComponent extends LitElement {
      * Whether the overlay is open.
      */
     open: boolean;
+    /**
+     * The arrow element to position relative to the overlay.
+     */
+    arrowElement: HTMLElement | null;
+    /**
+     * The dismiss mode for the overlay.
+     * - 'auto': Automatically closes on outside clicks and Escape key
+     * - 'manual': Requires manual control to close
+     */
+    dismissMode: 'auto' | 'manual';
     private _overlayElement;
     private _cleanupAutoUpdate;
     disconnectedCallback(): void;

package/dist/core/overlay/overlay.mjs

@@ -1,4 +1,4 @@
-import { flip, shift, autoUpdate, computePosition } from "@floating-ui/dom";
+import { flip, shift, arrow, autoUpdate, computePosition } from "@floating-ui/dom";
 import { unsafeCSS, LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import styles from "./overlay.scss.mjs";
@@ -20,6 +20,8 @@ let ForgeAiOverlayComponent = class extends LitElement {
     this.flip = true;
     this.shift = false;
     this.open = false;
+    this.arrowElement = null;
+    this.dismissMode = "auto";
     this._overlayElement = null;
     this._cleanupAutoUpdate = null;
     this._onToggle = (event) => {
@@ -45,7 +47,7 @@ let ForgeAiOverlayComponent = class extends LitElement {
     if (changedProperties.has("open")) {
       this._handleOpenChange();
     }
-    if (changedProperties.has("anchor") || changedProperties.has("placement") || changedProperties.has("flip") || changedProperties.has("shift")) {
+    if (changedProperties.has("anchor") || changedProperties.has("placement") || changedProperties.has("flip") || changedProperties.has("shift") || changedProperties.has("arrowElement")) {
       if (this.open && this._overlayElement && this.anchor) {
         this._updatePosition();
       }
@@ -79,7 +81,11 @@ let ForgeAiOverlayComponent = class extends LitElement {
       return;
     }
     this._cleanup();
-    const middleware = [...this.flip ? [flip()] : [], ...this.shift ? [shift({ padding: 8 })] : []];
+    const middleware = [
+      ...this.flip ? [flip()] : [],
+      ...this.shift ? [shift({ padding: 8 })] : [],
+      ...this.arrowElement ? [arrow({ element: this.arrowElement, padding: 8 })] : []
+    ];
     this._cleanupAutoUpdate = autoUpdate(this.anchor, this._overlayElement, () => this._computePosition(middleware));
   }
   async _computePosition(middleware) {
@@ -89,6 +95,7 @@ let ForgeAiOverlayComponent = class extends LitElement {
     try {
       const result = await computePosition(this.anchor, this._overlayElement, {
         placement: this.placement,
+        strategy: "fixed",
         middleware
       });
       Object.assign(this._overlayElement.style, {
@@ -97,6 +104,13 @@ let ForgeAiOverlayComponent = class extends LitElement {
         translate: `${this._roundByDPR(result.x)}px ${this._roundByDPR(result.y)}px`
       });
       this.setAttribute("data-position-placement", result.placement);
+      if (this.arrowElement && result.middlewareData.arrow) {
+        const { x, y } = result.middlewareData.arrow;
+        Object.assign(this.arrowElement.style, {
+          left: x != null ? `${x}px` : "",
+          top: y != null ? `${y}px` : ""
+        });
+      }
     } catch (error) {
       console.error("Failed to compute overlay position:", error);
     }
@@ -112,7 +126,7 @@ let ForgeAiOverlayComponent = class extends LitElement {
   }
   render() {
     return html`
-      <div class="ai-overlay" popover="manual" @toggle=${this._onToggle}>
+      <div class="ai-overlay" popover=${this.dismissMode} @toggle=${this._onToggle}>
         <slot></slot>
       </div>
     `;
@@ -134,6 +148,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], ForgeAiOverlayComponent.prototype, "open", 2);
+__decorateClass([
+  property({ type: Object })
+], ForgeAiOverlayComponent.prototype, "arrowElement", 2);
+__decorateClass([
+  property({ attribute: "dismiss-mode" })
+], ForgeAiOverlayComponent.prototype, "dismissMode", 2);
 ForgeAiOverlayComponent = __decorateClass([
   customElement("forge-ai-overlay")
 ], ForgeAiOverlayComponent);

package/dist/core/popover/popover.d.ts

@@ -5,13 +5,14 @@ declare global {
         'forge-ai-popover': ForgeAiPopoverComponent;
     }
     interface HTMLElementEventMap {
-        'ai-popover-toggle': CustomEvent<{
-            open: boolean;
-            newState: string;
-            oldState: string;
-        }>;
+        'forge-ai-popover-toggle': CustomEvent<PopoverToggleEventData>;
     }
 }
+export interface PopoverToggleEventData {
+    open: boolean;
+    newState: string;
+    oldState: string;
+}
 export type PopoverPlacement = OverlayPlacement;
 /**
  * @summary A popover component that provides styled overlay functionality.
@@ -20,8 +21,6 @@ export type PopoverPlacement = OverlayPlacement;
  * This component wraps the base overlay component with popover-specific styling
  * including animations, shadows, and rounded corners.
  *
- * @since 1.2.0
- *
  * @cssprop --ai-popover-max-width - The maximum width of the popover.
  * @cssprop --ai-popover-max-height - The maximum height of the popover.
  * @cssprop --ai-popover-min-width - The minimum width of the popover.
@@ -51,6 +50,17 @@ export declare class ForgeAiPopoverComponent extends LitElement {
      * Whether the popover is open.
      */
     open: boolean;
+    /**
+     * Whether to show an arrow pointing to the anchor element.
+     */
+    arrow: boolean;
+    /**
+     * The dismiss mode for the popover.
+     * - 'auto': Automatically closes on outside clicks and Escape key
+     * - 'manual': Requires manual control to close
+     */
+    dismissMode: 'auto' | 'manual';
+    private _arrowElement?;
     private _onOverlayToggle;
     render(): TemplateResult;
 }

package/dist/core/popover/popover.mjs

@@ -1,5 +1,5 @@
 import { unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { property, query, customElement } from "lit/decorators.js";
 import "../overlay/overlay.mjs";
 import styles from "./popover.scss.mjs";
 var __defProp = Object.defineProperty;
@@ -20,10 +20,12 @@ let ForgeAiPopoverComponent = class extends LitElement {
     this.flip = false;
     this.shift = false;
     this.open = false;
+    this.arrow = false;
+    this.dismissMode = "auto";
     this._onOverlayToggle = (event) => {
       this.open = event.detail.open;
       this.dispatchEvent(
-        new CustomEvent("ai-popover-toggle", {
+        new CustomEvent("forge-ai-popover-toggle", {
           detail: event.detail,
           bubbles: true,
           composed: true
@@ -39,8 +41,11 @@ let ForgeAiPopoverComponent = class extends LitElement {
         .flip=${this.flip}
         .shift=${this.shift}
         .open=${this.open}
-        @ai-overlay-toggle=${this._onOverlayToggle}>
+        .arrowElement=${this.arrow ? this._arrowElement : null}
+        .dismissMode=${this.dismissMode}
+        @forge-ai-overlay-toggle=${this._onOverlayToggle}>
         <div class="ai-popover">
+          ${this.arrow ? html`<div class="ai-popover__arrow"></div>` : null}
           <slot></slot>
         </div>
       </forge-ai-overlay>
@@ -63,6 +68,15 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], ForgeAiPopoverComponent.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ForgeAiPopoverComponent.prototype, "arrow", 2);
+__decorateClass([
+  property({ attribute: "dismiss-mode" })
+], ForgeAiPopoverComponent.prototype, "dismissMode", 2);
+__decorateClass([
+  query(".ai-popover__arrow")
+], ForgeAiPopoverComponent.prototype, "_arrowElement", 2);
 ForgeAiPopoverComponent = __decorateClass([
   customElement("forge-ai-popover")
 ], ForgeAiPopoverComponent);

package/dist/core/popover/popover.scss.mjs

@@ -1,4 +1,4 @@
-const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n:host {\n  display: contents;\n  overflow: visible;\n}\n\n.ai-popover {\n  background: var(--forge-theme-surface-bright, #ffffff);\n  border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  box-shadow: 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));\n  box-sizing: border-box;\n  animation-duration: 150ms;\n  animation-timing-function: cubic-bezier(0, 0, 0, 1);\n  animation-name: fadein, scalein;\n  transform-origin: center center;\n}\n\nforge-ai-overlay[data-position-placement^=top]:not([data-position-placement*="-"]) .ai-popover {\n  transform-origin: bottom center;\n}\nforge-ai-overlay[data-position-placement^=top][data-position-placement$=-start] .ai-popover {\n  transform-origin: bottom left;\n}\nforge-ai-overlay[data-position-placement^=top][data-position-placement$=-end] .ai-popover {\n  transform-origin: bottom right;\n}\n\nforge-ai-overlay[data-position-placement^=right]:not([data-position-placement*="-"]) .ai-popover {\n  transform-origin: left center;\n}\nforge-ai-overlay[data-position-placement^=right][data-position-placement$=-start] .ai-popover {\n  transform-origin: left top;\n}\nforge-ai-overlay[data-position-placement^=right][data-position-placement$=-end] .ai-popover {\n  transform-origin: left bottom;\n}\n\nforge-ai-overlay[data-position-placement^=bottom]:not([data-position-placement*="-"]) .ai-popover {\n  transform-origin: top center;\n}\nforge-ai-overlay[data-position-placement^=bottom][data-position-placement$=-start] .ai-popover {\n  transform-origin: top left;\n}\nforge-ai-overlay[data-position-placement^=bottom][data-position-placement$=-end] .ai-popover {\n  transform-origin: top right;\n}\n\nforge-ai-overlay[data-position-placement^=left]:not([data-position-placement*="-"]) .ai-popover {\n  transform-origin: right center;\n}\nforge-ai-overlay[data-position-placement^=left][data-position-placement$=-start] .ai-popover {\n  transform-origin: right top;\n}\nforge-ai-overlay[data-position-placement^=left][data-position-placement$=-end] .ai-popover {\n  transform-origin: right bottom;\n}\n\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes scalein {\n  from {\n    transform: scale(0.8);\n  }\n  to {\n    transform: scale(1);\n  }\n}';
+const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n:host {\n  display: contents;\n  overflow: visible;\n}\n\n.ai-popover {\n  position: relative;\n  background: var(--forge-theme-surface-bright, #ffffff);\n  border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  box-shadow: 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));\n  box-sizing: border-box;\n  animation-duration: 150ms;\n  animation-timing-function: cubic-bezier(0, 0, 0, 1);\n  animation-name: fadein, scalein;\n  transform-origin: center center;\n  overflow: visible;\n}\n.ai-popover__arrow {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: var(--forge-theme-surface-bright, #ffffff);\n  transform: rotate(45deg);\n  border: 1px solid var(--forge-theme-surface-container, #e0e0e0);\n}\n\nforge-ai-overlay[data-position-placement^=top] .ai-popover:has(.ai-popover__arrow) {\n  margin-block-end: var(--forge-spacing-small, 12px);\n}\n\nforge-ai-overlay[data-position-placement^=bottom] .ai-popover:has(.ai-popover__arrow) {\n  margin-block-start: var(--forge-spacing-small, 12px);\n}\n\nforge-ai-overlay[data-position-placement^=left] .ai-popover:has(.ai-popover__arrow) {\n  margin-inline-end: var(--forge-spacing-small, 12px);\n}\n\nforge-ai-overlay[data-position-placement^=right] .ai-popover:has(.ai-popover__arrow) {\n  margin-inline-start: var(--forge-spacing-small, 12px);\n}\n\nforge-ai-overlay[data-position-placement^=top]:not([data-position-placement*="-"]) .ai-popover {\n  transform-origin: bottom center;\n}\nforge-ai-overlay[data-position-placement^=top][data-position-placement$=-start] .ai-popover {\n  transform-origin: bottom left;\n}\nforge-ai-overlay[data-position-placement^=top][data-position-placement$=-end] .ai-popover {\n  transform-origin: bottom right;\n}\nforge-ai-overlay[data-position-placement^=top] .ai-popover__arrow {\n  bottom: -6px;\n  clip-path: polygon(0 100%, 100% 0, 100% 100%);\n}\n\nforge-ai-overlay[data-position-placement^=right]:not([data-position-placement*="-"]) .ai-popover {\n  transform-origin: left center;\n}\nforge-ai-overlay[data-position-placement^=right][data-position-placement$=-start] .ai-popover {\n  transform-origin: left top;\n}\nforge-ai-overlay[data-position-placement^=right][data-position-placement$=-end] .ai-popover {\n  transform-origin: left bottom;\n}\nforge-ai-overlay[data-position-placement^=right] .ai-popover__arrow {\n  left: -6px;\n  clip-path: polygon(0 0, 0 100%, 100% 100%);\n}\n\nforge-ai-overlay[data-position-placement^=bottom]:not([data-position-placement*="-"]) .ai-popover {\n  transform-origin: top center;\n}\nforge-ai-overlay[data-position-placement^=bottom][data-position-placement$=-start] .ai-popover {\n  transform-origin: top left;\n}\nforge-ai-overlay[data-position-placement^=bottom][data-position-placement$=-end] .ai-popover {\n  transform-origin: top right;\n}\nforge-ai-overlay[data-position-placement^=bottom] .ai-popover__arrow {\n  top: -6px;\n  clip-path: polygon(0 0, 0 100%, 100% 0);\n}\n\nforge-ai-overlay[data-position-placement^=left]:not([data-position-placement*="-"]) .ai-popover {\n  transform-origin: right center;\n}\nforge-ai-overlay[data-position-placement^=left][data-position-placement$=-start] .ai-popover {\n  transform-origin: right top;\n}\nforge-ai-overlay[data-position-placement^=left][data-position-placement$=-end] .ai-popover {\n  transform-origin: right bottom;\n}\nforge-ai-overlay[data-position-placement^=left] .ai-popover__arrow {\n  right: -6px;\n  clip-path: polygon(0 0, 100% 0, 100% 100%);\n}\n\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes scalein {\n  from {\n    transform: scale(0.8);\n  }\n  to {\n    transform: scale(1);\n  }\n}';
 export {
   styles as default
 };

package/dist/core/tooltip/tooltip.d.ts

@@ -5,13 +5,14 @@ declare global {
         'forge-ai-tooltip': ForgeAiTooltipComponent;
     }
     interface HTMLElementEventMap {
-        'ai-tooltip-toggle': CustomEvent<{
-            open: boolean;
-            newState: string;
-            oldState: string;
-        }>;
+        'forge-ai-tooltip-toggle': CustomEvent<TooltipToggleEventDetail>;
     }
 }
+export interface TooltipToggleEventDetail {
+    open: boolean;
+    newState: string;
+    oldState: string;
+}
 export type TooltipPlacement = OverlayPlacement;
 export type TooltipTrigger = 'hover' | 'focus' | 'click' | 'manual';
 /**
@@ -61,8 +62,7 @@ export declare class ForgeAiTooltipComponent extends LitElement {
      */
     hideDelay: number;
     private _anchorElement;
-    private _showTimeout;
-    private _hideTimeout;
+    private _arrowElement?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
@@ -73,6 +73,7 @@ export declare class ForgeAiTooltipComponent extends LitElement {
     private _handleShow;
     private _handleHide;
     private _handleToggle;
+    private _handleKeyDown;
     private _clearTimeouts;
     private _onOverlayToggle;
     /**

package/dist/core/tooltip/tooltip.mjs

@@ -1,5 +1,5 @@
 import { unsafeCSS, LitElement, html } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
+import { property, state, query, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import "../overlay/overlay.mjs";
 import styles from "./tooltip.scss.mjs";
@@ -20,7 +20,8 @@ var __decorateClass = (decorators, target, key, kind) => {
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _ForgeAiTooltipComponent_instances, tooltipContent_get;
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _showTimeout, _hideTimeout, _ForgeAiTooltipComponent_instances, tooltipContent_get;
 let ForgeAiTooltipComponent = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -33,14 +34,14 @@ let ForgeAiTooltipComponent = class extends LitElement {
     this.delay = 500;
     this.hideDelay = 0;
     this._anchorElement = null;
-    this._showTimeout = null;
-    this._hideTimeout = null;
+    __privateAdd(this, _showTimeout, null);
+    __privateAdd(this, _hideTimeout, null);
     this._handleShow = () => {
       this._clearTimeouts();
       if (this.delay > 0) {
-        this._showTimeout = window.setTimeout(() => {
+        __privateSet(this, _showTimeout, window.setTimeout(() => {
           this.open = true;
-        }, this.delay);
+        }, this.delay));
       } else {
         this.open = true;
       }
@@ -48,9 +49,9 @@ let ForgeAiTooltipComponent = class extends LitElement {
     this._handleHide = () => {
       this._clearTimeouts();
       if (this.hideDelay > 0) {
-        this._hideTimeout = window.setTimeout(() => {
+        __privateSet(this, _hideTimeout, window.setTimeout(() => {
           this.open = false;
-        }, this.hideDelay);
+        }, this.hideDelay));
       } else {
         this.open = false;
       }
@@ -58,10 +59,15 @@ let ForgeAiTooltipComponent = class extends LitElement {
     this._handleToggle = () => {
       this.open = !this.open;
     };
+    this._handleKeyDown = (event) => {
+      if (event.key === "Escape" && this.open) {
+        this.open = false;
+      }
+    };
     this._onOverlayToggle = (event) => {
       this.open = event.detail.open;
       this.dispatchEvent(
-        new CustomEvent("ai-tooltip-toggle", {
+        new CustomEvent("forge-ai-tooltip-toggle", {
           detail: event.detail,
           bubbles: true,
           composed: true
@@ -85,8 +91,10 @@ let ForgeAiTooltipComponent = class extends LitElement {
     super.disconnectedCallback();
     this._detachEventListeners();
     this._clearTimeouts();
+    document.removeEventListener("keydown", this._handleKeyDown);
   }
   updated(changedProperties) {
+    super.updated(changedProperties);
     if (changedProperties.has("for")) {
       this._detachEventListeners();
       this._findAnchorElement();
@@ -94,6 +102,17 @@ let ForgeAiTooltipComponent = class extends LitElement {
     }
     if (changedProperties.has("open")) {
       this._updateHostAttributes();
+      if (this.open) {
+        document.addEventListener("keydown", this._handleKeyDown);
+        this.updateComplete.then(() => {
+          const overlay = this.shadowRoot?.querySelector("forge-ai-overlay");
+          if (overlay && this._arrowElement) {
+            overlay.arrowElement = this._arrowElement;
+          }
+        });
+      } else {
+        document.removeEventListener("keydown", this._handleKeyDown);
+      }
     }
   }
   _findAnchorElement() {
@@ -129,6 +148,8 @@ let ForgeAiTooltipComponent = class extends LitElement {
       case "hover":
         this._anchorElement.addEventListener("mouseenter", this._handleShow);
         this._anchorElement.addEventListener("mouseleave", this._handleHide);
+        this._anchorElement.addEventListener("focusin", this._handleShow);
+        this._anchorElement.addEventListener("focusout", this._handleHide);
         break;
       case "focus":
         this._anchorElement.addEventListener("focusin", this._handleShow);
@@ -150,13 +171,13 @@ let ForgeAiTooltipComponent = class extends LitElement {
     this._anchorElement.removeEventListener("click", this._handleToggle);
   }
   _clearTimeouts() {
-    if (this._showTimeout) {
-      clearTimeout(this._showTimeout);
-      this._showTimeout = null;
+    if (__privateGet(this, _showTimeout)) {
+      clearTimeout(__privateGet(this, _showTimeout));
+      __privateSet(this, _showTimeout, null);
     }
-    if (this._hideTimeout) {
-      clearTimeout(this._hideTimeout);
-      this._hideTimeout = null;
+    if (__privateGet(this, _hideTimeout)) {
+      clearTimeout(__privateGet(this, _hideTimeout));
+      __privateSet(this, _hideTimeout, null);
     }
   }
   /**
@@ -193,7 +214,10 @@ let ForgeAiTooltipComponent = class extends LitElement {
               shift
               .open=${this.open}
               @ai-overlay-toggle=${this._onOverlayToggle}>
-              <div class="ai-tooltip">${__privateGet(this, _ForgeAiTooltipComponent_instances, tooltipContent_get)}</div>
+              <div class="ai-tooltip">
+                <div class="ai-tooltip__arrow"></div>
+                ${__privateGet(this, _ForgeAiTooltipComponent_instances, tooltipContent_get)}
+              </div>
             </forge-ai-overlay>`,
       () => html`
           <!-- Content shown when closed for accessibility -->
@@ -203,6 +227,8 @@ let ForgeAiTooltipComponent = class extends LitElement {
     `;
   }
 };
+_showTimeout = /* @__PURE__ */ new WeakMap();
+_hideTimeout = /* @__PURE__ */ new WeakMap();
 _ForgeAiTooltipComponent_instances = /* @__PURE__ */ new WeakSet();
 tooltipContent_get = function() {
   const hasText = this.text.trim().length > 0;
@@ -236,6 +262,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], ForgeAiTooltipComponent.prototype, "_anchorElement", 2);
+__decorateClass([
+  query(".ai-tooltip__arrow")
+], ForgeAiTooltipComponent.prototype, "_arrowElement", 2);
 ForgeAiTooltipComponent = __decorateClass([
   customElement("forge-ai-tooltip")
 ], ForgeAiTooltipComponent);

package/dist/core/tooltip/tooltip.scss.mjs

@@ -1,4 +1,4 @@
-const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n@keyframes slidein {\n  from {\n    opacity: 0;\n    transform: translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y));\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0) translateY(0);\n  }\n}\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n.ai-tooltip {\n  --_tooltip-background: var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));\n  --_tooltip-color: var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));\n  --_tooltip-shape: var(--forge-tooltip-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_tooltip-padding: var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));\n  --_tooltip-padding-block: var(--forge-tooltip-padding-block, var(--_tooltip-padding));\n  --_tooltip-padding-inline: var(--forge-tooltip-padding-inline, var(--_tooltip-padding));\n  --_tooltip-width: var(--forge-tooltip-width, max-content);\n  --_tooltip-max-width: var(--forge-tooltip-max-width, 320px);\n  --_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)));\n  --_tooltip-content-align: var(--forge-tooltip-content-align, center);\n  --_tooltip-border-width: var(--forge-tooltip-border-width, 0);\n  --_tooltip-border-style: var(--forge-tooltip-border-style, solid);\n  --_tooltip-border-color: var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));\n  --_tooltip-animation-timing: var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));\n  --_tooltip-animation-duration: var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));\n  --_tooltip-animation-offset: var(--forge-tooltip-animation-offset, 24px);\n  --_tooltip-arrow-size: var(--forge-tooltip-arrow-size, 8px);\n  --_tooltip-arrow-height: var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));\n  --_tooltip-arrow-width: var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));\n  --_tooltip-arrow-shape: var(--forge-tooltip-arrow-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));\n  --_tooltip-arrow-rotation: var(--forge-tooltip-arrow-rotation, 0deg);\n  --_tooltip-arrow-top-rotation: var(--forge-tooltip-arrow-top-rotation, 315deg);\n  --_tooltip-arrow-right-rotation: var(--forge-tooltip-arrow-right-rotation, 45deg);\n  --_tooltip-arrow-bottom-rotation: var(--forge-tooltip-arrow-bottom-rotation, 135deg);\n  --_tooltip-arrow-left-rotation: var(--forge-tooltip-arrow-left-rotation, 225deg);\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  position: relative;\n  background: var(--_tooltip-background);\n  color: var(--_tooltip-color);\n  border-radius: var(--_tooltip-shape);\n  border-width: var(--_tooltip-border-width);\n  border-style: var(--_tooltip-border-style);\n  border-color: var(--_tooltip-border-color);\n  padding-block: var(--_tooltip-padding-block);\n  padding-inline: var(--_tooltip-padding-inline);\n  box-shadow: var(--_tooltip-elevation);\n  width: var(--_tooltip-width);\n  max-width: var(--_tooltip-max-width);\n  text-align: var(--_tooltip-content-align);\n  line-height: normal;\n  white-space: normal;\n  animation-duration: var(--_tooltip-animation-duration);\n  animation-timing-function: var(--_tooltip-animation-timing);\n  animation-name: slidein;\n  animation-fill-mode: forwards;\n  animation-duration: 150ms;\n  animation-timing-function: cubic-bezier(0, 0, 0, 1);\n  animation-name: tooltip-fadein, tooltip-scalein;\n  transform-origin: center center;\n}\n\nforge-ai-overlay[data-position-placement^=top]:not([data-position-placement*="-"]) .ai-tooltip {\n  transform-origin: bottom center;\n}\nforge-ai-overlay[data-position-placement^=top][data-position-placement$=-start] .ai-tooltip {\n  transform-origin: bottom left;\n}\nforge-ai-overlay[data-position-placement^=top][data-position-placement$=-end] .ai-tooltip {\n  transform-origin: bottom right;\n}\n\nforge-ai-overlay[data-position-placement^=right]:not([data-position-placement*="-"]) .ai-tooltip {\n  transform-origin: left center;\n}\nforge-ai-overlay[data-position-placement^=right][data-position-placement$=-start] .ai-tooltip {\n  transform-origin: left top;\n}\nforge-ai-overlay[data-position-placement^=right][data-position-placement$=-end] .ai-tooltip {\n  transform-origin: left bottom;\n}\n\nforge-ai-overlay[data-position-placement^=bottom]:not([data-position-placement*="-"]) .ai-tooltip {\n  transform-origin: top center;\n}\nforge-ai-overlay[data-position-placement^=bottom][data-position-placement$=-start] .ai-tooltip {\n  transform-origin: top left;\n}\nforge-ai-overlay[data-position-placement^=bottom][data-position-placement$=-end] .ai-tooltip {\n  transform-origin: top right;\n}\n\nforge-ai-overlay[data-position-placement^=left]:not([data-position-placement*="-"]) .ai-tooltip {\n  transform-origin: right center;\n}\nforge-ai-overlay[data-position-placement^=left][data-position-placement$=-start] .ai-tooltip {\n  transform-origin: right top;\n}\nforge-ai-overlay[data-position-placement^=left][data-position-placement$=-end] .ai-tooltip {\n  transform-origin: right bottom;\n}\n\n.tooltip-content--hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n@keyframes tooltip-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes tooltip-scalein {\n  from {\n    transform: scale(0.8);\n  }\n  to {\n    transform: scale(1);\n  }\n}';
+const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n@keyframes slidein {\n  from {\n    opacity: 0;\n    transform: translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y));\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0) translateY(0);\n  }\n}\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n.ai-tooltip {\n  --_tooltip-background: var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));\n  --_tooltip-color: var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));\n  --_tooltip-shape: var(--forge-tooltip-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_tooltip-padding: var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));\n  --_tooltip-padding-block: var(--forge-tooltip-padding-block, var(--_tooltip-padding));\n  --_tooltip-padding-inline: var(--forge-tooltip-padding-inline, var(--_tooltip-padding));\n  --_tooltip-width: var(--forge-tooltip-width, max-content);\n  --_tooltip-max-width: var(--forge-tooltip-max-width, 320px);\n  --_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)));\n  --_tooltip-content-align: var(--forge-tooltip-content-align, center);\n  --_tooltip-border-width: var(--forge-tooltip-border-width, 0);\n  --_tooltip-border-style: var(--forge-tooltip-border-style, solid);\n  --_tooltip-border-color: var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));\n  --_tooltip-animation-timing: var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));\n  --_tooltip-animation-duration: var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));\n  --_tooltip-animation-offset: var(--forge-tooltip-animation-offset, 24px);\n  --_tooltip-arrow-size: var(--forge-tooltip-arrow-size, 8px);\n  --_tooltip-arrow-height: var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));\n  --_tooltip-arrow-width: var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));\n  --_tooltip-arrow-shape: var(--forge-tooltip-arrow-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));\n  --_tooltip-arrow-rotation: var(--forge-tooltip-arrow-rotation, 0deg);\n  --_tooltip-arrow-top-rotation: var(--forge-tooltip-arrow-top-rotation, 315deg);\n  --_tooltip-arrow-right-rotation: var(--forge-tooltip-arrow-right-rotation, 45deg);\n  --_tooltip-arrow-bottom-rotation: var(--forge-tooltip-arrow-bottom-rotation, 135deg);\n  --_tooltip-arrow-left-rotation: var(--forge-tooltip-arrow-left-rotation, 225deg);\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  position: relative;\n  background: var(--_tooltip-background);\n  color: var(--_tooltip-color);\n  border-radius: var(--_tooltip-shape);\n  border-width: var(--_tooltip-border-width);\n  border-style: var(--_tooltip-border-style);\n  border-color: var(--_tooltip-border-color);\n  padding-block: var(--_tooltip-padding-block);\n  padding-inline: var(--_tooltip-padding-inline);\n  box-shadow: var(--_tooltip-elevation);\n  width: var(--_tooltip-width);\n  max-width: var(--_tooltip-max-width);\n  text-align: var(--_tooltip-content-align);\n  line-height: normal;\n  white-space: normal;\n  animation-duration: var(--_tooltip-animation-duration);\n  animation-timing-function: var(--_tooltip-animation-timing);\n  animation-name: slidein;\n  animation-fill-mode: forwards;\n  position: relative;\n  animation-duration: 150ms;\n  animation-timing-function: cubic-bezier(0, 0, 0, 1);\n  animation-name: tooltip-fadein, tooltip-scalein;\n  transform-origin: center center;\n}\n.ai-tooltip__arrow {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n  transform: rotate(45deg);\n  z-index: -1;\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));\n}\n\nforge-ai-overlay[data-position-placement^=top] .ai-tooltip {\n  margin-block-end: var(--forge-spacing-small, 12px);\n}\n\nforge-ai-overlay[data-position-placement^=bottom] .ai-tooltip {\n  margin-block-start: var(--forge-spacing-small, 12px);\n}\n\nforge-ai-overlay[data-position-placement^=left] .ai-tooltip {\n  margin-inline-end: var(--forge-spacing-small, 12px);\n}\n\nforge-ai-overlay[data-position-placement^=right] .ai-tooltip {\n  margin-inline-start: var(--forge-spacing-small, 12px);\n}\n\nforge-ai-overlay[data-position-placement^=top]:not([data-position-placement*="-"]) .ai-tooltip {\n  transform-origin: bottom center;\n}\nforge-ai-overlay[data-position-placement^=top][data-position-placement$=-start] .ai-tooltip {\n  transform-origin: bottom left;\n}\nforge-ai-overlay[data-position-placement^=top][data-position-placement$=-end] .ai-tooltip {\n  transform-origin: bottom right;\n}\nforge-ai-overlay[data-position-placement^=top] .ai-tooltip__arrow {\n  bottom: -5px;\n  clip-path: polygon(0 100%, 100% 0, 100% 100%);\n}\n\nforge-ai-overlay[data-position-placement^=right]:not([data-position-placement*="-"]) .ai-tooltip {\n  transform-origin: left center;\n}\nforge-ai-overlay[data-position-placement^=right][data-position-placement$=-start] .ai-tooltip {\n  transform-origin: left top;\n}\nforge-ai-overlay[data-position-placement^=right][data-position-placement$=-end] .ai-tooltip {\n  transform-origin: left bottom;\n}\nforge-ai-overlay[data-position-placement^=right] .ai-tooltip__arrow {\n  left: -5px;\n  clip-path: polygon(0 0, 0 100%, 100% 100%);\n}\n\nforge-ai-overlay[data-position-placement^=bottom]:not([data-position-placement*="-"]) .ai-tooltip {\n  transform-origin: top center;\n}\nforge-ai-overlay[data-position-placement^=bottom][data-position-placement$=-start] .ai-tooltip {\n  transform-origin: top left;\n}\nforge-ai-overlay[data-position-placement^=bottom][data-position-placement$=-end] .ai-tooltip {\n  transform-origin: top right;\n}\nforge-ai-overlay[data-position-placement^=bottom] .ai-tooltip__arrow {\n  top: -5px;\n  clip-path: polygon(0 0, 0 100%, 100% 0);\n}\n\nforge-ai-overlay[data-position-placement^=left]:not([data-position-placement*="-"]) .ai-tooltip {\n  transform-origin: right center;\n}\nforge-ai-overlay[data-position-placement^=left][data-position-placement$=-start] .ai-tooltip {\n  transform-origin: right top;\n}\nforge-ai-overlay[data-position-placement^=left][data-position-placement$=-end] .ai-tooltip {\n  transform-origin: right bottom;\n}\nforge-ai-overlay[data-position-placement^=left] .ai-tooltip__arrow {\n  right: -5px;\n  clip-path: polygon(0 0, 100% 0, 100% 100%);\n}\n\n.tooltip-content--hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n@keyframes tooltip-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes tooltip-scalein {\n  from {\n    transform: scale(0.8);\n  }\n  to {\n    transform: scale(1);\n  }\n}';
 export {
   styles as default
 };

package/dist/index.d.ts

@@ -1,19 +1,24 @@
-export * from './ai-artifact';
-export * from './ai-suggestions';
 export * from './ai-actions-toolbar';
+export * from './ai-agent-info';
+export * from './ai-artifact';
+export * from './ai-attachment';
 export * from './ai-button';
+export * from './ai-chain-of-thought';
 export * from './ai-chat-header';
 export * from './ai-chat-interface';
-export * from './ai-dropdown-menu';
-export * from './ai-chain-of-thought';
+export * from './ai-chatbot';
+export * from './ai-confirmation-prompt';
 export * from './ai-dialog';
+export * from './ai-dropdown-menu';
 export * from './ai-embedded-chat';
 export * from './ai-empty-state';
+export * from './ai-error-message';
 export * from './ai-fab';
 export * from './ai-file-picker';
 export * from './ai-floating-chat';
 export * from './ai-gradient-container';
 export * from './ai-icon';
+export * from './ai-message-thread';
 export * from './ai-modal';
 export * from './ai-prompt';
 export * from './ai-reasoning';
@@ -22,6 +27,7 @@ export * from './ai-response-message';
 export * from './ai-sidebar';
 export * from './ai-sidebar-chat';
 export * from './ai-suggestions';
+export * from './ai-suggestions';
 export * from './ai-thinking-indicator';
 export * from './ai-threads';
 export * from './ai-user-message';

package/dist/index.mjs

@@ -1,26 +1,42 @@
-import { AiArtifactComponent, AiArtifactComponentTagName } from "./ai-artifact/ai-artifact.mjs";
-import { AiSuggestionsComponent, AiSuggestionsComponentTagName } from "./ai-suggestions/ai-suggestions.mjs";
 import { AiActionsToolbarComponent, AiActionsToolbarComponentTagName } from "./ai-actions-toolbar/ai-actions-toolbar.mjs";
+import { AiAgentInfoComponent, AiAgentInfoComponentTagName } from "./ai-agent-info/ai-agent-info.mjs";
+import { AiArtifactComponent, AiArtifactComponentTagName } from "./ai-artifact/ai-artifact.mjs";
+import { AiAttachmentComponent, AiAttachmentComponentTagName } from "./ai-attachment/ai-attachment.mjs";
 import { AiButtonComponent, AiButtonComponentTagName } from "./ai-button/ai-button.mjs";
-import { AiChatHeaderComponent, AiChatHeaderComponentTagName } from "./ai-chat-header/ai-chat-header.mjs";
-import { AiChatInterfaceComponent, AiChatInterfaceComponentTagName } from "./ai-chat-interface/ai-chat-interface.mjs";
-import { ForgeAiDropdownMenuComponent } from "./ai-dropdown-menu/ai-dropdown-menu.mjs";
-import { ForgeAiDropdownMenuItemComponent } from "./ai-dropdown-menu/ai-dropdown-menu-item.mjs";
-import { ForgeAiDropdownMenuItemGroupComponent } from "./ai-dropdown-menu/ai-dropdown-menu-item-group.mjs";
-import { ForgeAiDropdownMenuSeparatorComponent } from "./ai-dropdown-menu/ai-dropdown-menu-separator.mjs";
 import { AiChainOfThoughtComponent, AiChainOfThoughtComponentTagName } from "./ai-chain-of-thought/ai-chain-of-thought.mjs";
 import { ThoughtBaseComponent, ThoughtBaseComponentTagName } from "./ai-chain-of-thought/thought-base/thought-base.mjs";
 import { ThoughtSearchResultComponent, ThoughtSearchResultComponentTagName } from "./ai-chain-of-thought/thought-search-result/thought-search-result.mjs";
 import { ThoughtImageComponent, ThoughtImageComponentTagName } from "./ai-chain-of-thought/thought-image/thought-image.mjs";
 import { ThoughtDetailComponent, ThoughtDetailComponentTagName } from "./ai-chain-of-thought/thought-detail/thought-detail.mjs";
+import { AiChatHeaderComponent, AiChatHeaderComponentTagName } from "./ai-chat-header/ai-chat-header.mjs";
+import { AiChatInterfaceComponent, AiChatInterfaceComponentTagName } from "./ai-chat-interface/ai-chat-interface.mjs";
+import { AiChatbotComponent, AiChatbotComponentTagName } from "./ai-chatbot/ai-chatbot.mjs";
+import { AiChatbotToolCallComponent, AiChatbotToolCallComponentTagName } from "./ai-chatbot/ai-chatbot-tool-call.mjs";
+import { AgentAdapter } from "./ai-chatbot/agent-adapter.mjs";
+import { AgUiAdapter } from "./ai-chatbot/ag-ui-adapter.mjs";
+import { HttpAgentWithCredentials } from "./ai-chatbot/http-agent-with-credentials.mjs";
+import { EventEmitter, SubscriptionManager } from "./ai-chatbot/event-emitter.mjs";
+import { AgentRunner } from "./ai-chatbot/agent-runner.mjs";
+import { createToolRenderer } from "./ai-chatbot/create-tool-renderer.mjs";
+import { MessageStateController } from "./ai-chatbot/message-state-controller.mjs";
+import { FileUploadManager } from "./ai-chatbot/file-upload-manager.mjs";
+import { MarkdownStreamController } from "./ai-chatbot/markdown-stream-controller.mjs";
+import { generateId, renderMarkdown } from "./ai-chatbot/utils.mjs";
+import { AiConfirmationPromptComponent, AiConfirmationPromptComponentTagName } from "./ai-confirmation-prompt/ai-confirmation-prompt.mjs";
 import { AiDialogComponent, AiDialogComponentTagName } from "./ai-dialog/ai-dialog.mjs";
+import { ForgeAiDropdownMenuComponent } from "./ai-dropdown-menu/ai-dropdown-menu.mjs";
+import { ForgeAiDropdownMenuItemComponent } from "./ai-dropdown-menu/ai-dropdown-menu-item.mjs";
+import { ForgeAiDropdownMenuItemGroupComponent } from "./ai-dropdown-menu/ai-dropdown-menu-item-group.mjs";
+import { ForgeAiDropdownMenuSeparatorComponent } from "./ai-dropdown-menu/ai-dropdown-menu-separator.mjs";
 import { AiEmbeddedChatComponent, AiEmbeddedChatComponentTagName } from "./ai-embedded-chat/ai-embedded-chat.mjs";
 import { AiEmptyStateComponent, AiEmptyStateComponentTagName } from "./ai-empty-state/ai-empty-state.mjs";
+import { AiErrorMessageComponent, AiErrorMessageComponentTagName } from "./ai-error-message/ai-error-message.mjs";
 import { AiFabComponent, AiFabComponentTagName } from "./ai-fab/ai-fab.mjs";
 import { AiFilePickerComponent } from "./ai-file-picker/ai-file-picker.mjs";
 import { AiFloatingChatComponent, AiFloatingChatComponentTagName } from "./ai-floating-chat/ai-floating-chat.mjs";
 import { AiGradientContainerComponent, AiGradientContainerComponentTagName } from "./ai-gradient-container/ai-gradient-container.mjs";
 import { AiIconComponent, AiIconComponentTagName } from "./ai-icon/ai-icon.mjs";
+import { AiMessageThreadComponent, AiMessageThreadComponentTagName } from "./ai-message-thread/ai-message-thread.mjs";
 import { AiModalComponent } from "./ai-modal/ai-modal.mjs";
 import { AiPromptComponent, AiPromptComponentTagName } from "./ai-prompt/ai-prompt.mjs";
 import { AiReasoningComponent, AiReasoningComponentTagName } from "./ai-reasoning/ai-reasoning.mjs";
@@ -29,15 +45,23 @@ import { AiReasoningHeaderComponent, AiReasoningHeaderComponentTagName } from ".
 import { AiResponseMessageComponent, AiResponseMessageComponentTagName } from "./ai-response-message/ai-response-message.mjs";
 import { AiSidebarComponent, AiSidebarComponentTagName } from "./ai-sidebar/ai-sidebar.mjs";
 import { AiSidebarChatComponent, AiSidebarChatComponentTagName } from "./ai-sidebar-chat/ai-sidebar-chat.mjs";
+import { AiSuggestionsComponent, AiSuggestionsComponentTagName } from "./ai-suggestions/ai-suggestions.mjs";
 import { AiThinkingIndicatorComponent, AiThinkingIndicatorComponentTagName } from "./ai-thinking-indicator/ai-thinking-indicator.mjs";
 import { AiThreadsComponent, AiThreadsComponentTagName } from "./ai-threads/ai-threads.mjs";
 import { AiUserMessageComponent, AiUserMessageComponentTagName } from "./ai-user-message/ai-user-message.mjs";
 import { AiVoiceInputComponent, AiVoiceInputComponentTagName } from "./ai-voice-input/ai-voice-input.mjs";
 export {
+  AgUiAdapter,
+  AgentAdapter,
+  AgentRunner,
   AiActionsToolbarComponent,
   AiActionsToolbarComponentTagName,
+  AiAgentInfoComponent,
+  AiAgentInfoComponentTagName,
   AiArtifactComponent,
   AiArtifactComponentTagName,
+  AiAttachmentComponent,
+  AiAttachmentComponentTagName,
   AiButtonComponent,
   AiButtonComponentTagName,
   AiChainOfThoughtComponent,
@@ -46,12 +70,20 @@ export {
   AiChatHeaderComponentTagName,
   AiChatInterfaceComponent,
   AiChatInterfaceComponentTagName,
+  AiChatbotComponent,
+  AiChatbotComponentTagName,
+  AiChatbotToolCallComponent,
+  AiChatbotToolCallComponentTagName,
+  AiConfirmationPromptComponent,
+  AiConfirmationPromptComponentTagName,
   AiDialogComponent,
   AiDialogComponentTagName,
   AiEmbeddedChatComponent,
   AiEmbeddedChatComponentTagName,
   AiEmptyStateComponent,
   AiEmptyStateComponentTagName,
+  AiErrorMessageComponent,
+  AiErrorMessageComponentTagName,
   AiFabComponent,
   AiFabComponentTagName,
   AiFilePickerComponent,
@@ -61,6 +93,8 @@ export {
   AiGradientContainerComponentTagName,
   AiIconComponent,
   AiIconComponentTagName,
+  AiMessageThreadComponent,
+  AiMessageThreadComponentTagName,
   AiModalComponent,
   AiPromptComponent,
   AiPromptComponentTagName,
@@ -84,12 +118,18 @@ export {
   AiUserMessageComponentTagName,
   AiVoiceInputComponent,
   AiVoiceInputComponentTagName,
+  EventEmitter,
+  FileUploadManager,
   ForgeAiDropdownMenuComponent,
   ForgeAiDropdownMenuItemComponent,
   ForgeAiDropdownMenuItemGroupComponent,
   ForgeAiDropdownMenuSeparatorComponent,
+  HttpAgentWithCredentials,
+  MarkdownStreamController,
+  MessageStateController,
   ReasoningContentComponent,
   ReasoningContentComponentTagName,
+  SubscriptionManager,
   ThoughtBaseComponent,
   ThoughtBaseComponentTagName,
   ThoughtDetailComponent,
@@ -97,5 +137,8 @@ export {
   ThoughtImageComponent,
   ThoughtImageComponentTagName,
   ThoughtSearchResultComponent,
-  ThoughtSearchResultComponentTagName
+  ThoughtSearchResultComponentTagName,
+  createToolRenderer,
+  generateId,
+  renderMarkdown
 };