@tylertech/forge-ai 0.1.0

package/dist/core/overlay/overlay.mjs

@@ -0,0 +1,142 @@
+import { flip, shift, 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";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let ForgeAiOverlayComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.anchor = null;
+    this.placement = "bottom-start";
+    this.flip = true;
+    this.shift = false;
+    this.open = false;
+    this._overlayElement = null;
+    this._cleanupAutoUpdate = null;
+    this._onToggle = (event) => {
+      this.open = event.newState === "open";
+      this.dispatchEvent(
+        new CustomEvent("forge-ai-overlay-toggle", {
+          detail: {
+            open: this.open,
+            newState: event.newState,
+            oldState: event.oldState
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._cleanup();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("open")) {
+      this._handleOpenChange();
+    }
+    if (changedProperties.has("anchor") || changedProperties.has("placement") || changedProperties.has("flip") || changedProperties.has("shift")) {
+      if (this.open && this._overlayElement && this.anchor) {
+        this._updatePosition();
+      }
+    }
+  }
+  _handleOpenChange() {
+    if (this.open) {
+      this._showOverlay();
+    } else {
+      this._hideOverlay();
+    }
+  }
+  async _showOverlay() {
+    if (!this._overlayElement) {
+      await this.updateComplete;
+      this._overlayElement = this.shadowRoot?.querySelector(".ai-overlay");
+    }
+    if (this._overlayElement) {
+      this._overlayElement.showPopover();
+      if (this.anchor) {
+        this._updatePosition();
+      }
+    }
+  }
+  _hideOverlay() {
+    this._overlayElement?.hidePopover();
+    this._cleanup();
+  }
+  _updatePosition() {
+    if (!this.anchor || !this._overlayElement) {
+      return;
+    }
+    this._cleanup();
+    const middleware = [...this.flip ? [flip()] : [], ...this.shift ? [shift({ padding: 8 })] : []];
+    this._cleanupAutoUpdate = autoUpdate(this.anchor, this._overlayElement, () => this._computePosition(middleware));
+  }
+  async _computePosition(middleware) {
+    if (!this.anchor || !this._overlayElement) {
+      return;
+    }
+    try {
+      const result = await computePosition(this.anchor, this._overlayElement, {
+        placement: this.placement,
+        middleware
+      });
+      Object.assign(this._overlayElement.style, {
+        left: "0",
+        top: "0",
+        translate: `${this._roundByDPR(result.x)}px ${this._roundByDPR(result.y)}px`
+      });
+      this.setAttribute("data-position-placement", result.placement);
+    } catch (error) {
+      console.error("Failed to compute overlay position:", error);
+    }
+  }
+  _roundByDPR(value) {
+    const dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+  }
+  _cleanup() {
+    this._cleanupAutoUpdate?.();
+    this._cleanupAutoUpdate = null;
+    this.removeAttribute("data-position-placement");
+  }
+  render() {
+    return html`
+      <div class="ai-overlay" popover="manual" @toggle=${this._onToggle}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+ForgeAiOverlayComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ type: Object })
+], ForgeAiOverlayComponent.prototype, "anchor", 2);
+__decorateClass([
+  property()
+], ForgeAiOverlayComponent.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ForgeAiOverlayComponent.prototype, "flip", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ForgeAiOverlayComponent.prototype, "shift", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ForgeAiOverlayComponent.prototype, "open", 2);
+ForgeAiOverlayComponent = __decorateClass([
+  customElement("forge-ai-overlay")
+], ForgeAiOverlayComponent);
+export {
+  ForgeAiOverlayComponent
+};

package/dist/core/overlay/overlay.scss.mjs

@@ -0,0 +1,4 @@
+const styles = ":host {\n  display: contents;\n}\n\n.ai-overlay {\n  position: relative;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: inherit;\n  color: inherit;\n  border-radius: inherit;\n  overflow: visible;\n}\n.ai-overlay[popover] {\n  inset: unset;\n}";
+export {
+  styles as default
+};

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

@@ -0,0 +1 @@
+export { ForgeAiPopoverComponent, type PopoverPlacement } from './popover.js';

package/dist/core/popover/index.mjs

@@ -0,0 +1,4 @@
+import { ForgeAiPopoverComponent } from "./popover.mjs";
+export {
+  ForgeAiPopoverComponent
+};

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

@@ -0,0 +1,56 @@
+import { LitElement, TemplateResult } from 'lit';
+import { OverlayPlacement } from '../overlay/overlay.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-popover': ForgeAiPopoverComponent;
+    }
+    interface HTMLElementEventMap {
+        'ai-popover-toggle': CustomEvent<{
+            open: boolean;
+            newState: string;
+            oldState: string;
+        }>;
+    }
+}
+export type PopoverPlacement = OverlayPlacement;
+/**
+ * @summary A popover component that provides styled overlay functionality.
+ *
+ * @description
+ * 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.
+ * @cssprop --ai-popover-min-height - The minimum height of the popover.
+ *
+ * @slot - The default slot for popover content.
+ */
+export declare class ForgeAiPopoverComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * The anchor element to position the popover relative to.
+     */
+    anchor: Element | null;
+    /**
+     * The placement of the popover relative to the anchor.
+     */
+    placement: PopoverPlacement;
+    /**
+     * Whether the popover should flip to the opposite side when there's no space.
+     */
+    flip: boolean;
+    /**
+     * Whether the popover should shift to stay in view.
+     */
+    shift: boolean;
+    /**
+     * Whether the popover is open.
+     */
+    open: boolean;
+    private _onOverlayToggle;
+    render(): TemplateResult;
+}

package/dist/core/popover/popover.mjs

@@ -0,0 +1,71 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import "../overlay/overlay.mjs";
+import styles from "./popover.scss.mjs";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let ForgeAiPopoverComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.anchor = null;
+    this.placement = "bottom-start";
+    this.flip = true;
+    this.shift = false;
+    this.open = false;
+    this._onOverlayToggle = (event) => {
+      this.open = event.detail.open;
+      this.dispatchEvent(
+        new CustomEvent("ai-popover-toggle", {
+          detail: event.detail,
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  render() {
+    return html`
+      <forge-ai-overlay
+        .anchor=${this.anchor}
+        .placement=${this.placement}
+        .flip=${this.flip}
+        .shift=${this.shift}
+        .open=${this.open}
+        @ai-overlay-toggle=${this._onOverlayToggle}>
+        <div class="ai-popover">
+          <slot></slot>
+        </div>
+      </forge-ai-overlay>
+    `;
+  }
+};
+ForgeAiPopoverComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ type: Object })
+], ForgeAiPopoverComponent.prototype, "anchor", 2);
+__decorateClass([
+  property()
+], ForgeAiPopoverComponent.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ForgeAiPopoverComponent.prototype, "flip", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ForgeAiPopoverComponent.prototype, "shift", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ForgeAiPopoverComponent.prototype, "open", 2);
+ForgeAiPopoverComponent = __decorateClass([
+  customElement("forge-ai-popover")
+], ForgeAiPopoverComponent);
+export {
+  ForgeAiPopoverComponent
+};

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

@@ -0,0 +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}';
+export {
+  styles as default
+};

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

@@ -0,0 +1 @@
+export { ForgeAiTooltipComponent, type TooltipPlacement, type TooltipTrigger } from './tooltip.js';

package/dist/core/tooltip/index.mjs

@@ -0,0 +1,4 @@
+import { ForgeAiTooltipComponent } from "./tooltip.mjs";
+export {
+  ForgeAiTooltipComponent
+};

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

@@ -0,0 +1,91 @@
+import { LitElement, TemplateResult } from 'lit';
+import { OverlayPlacement } from '../overlay/overlay.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-tooltip': ForgeAiTooltipComponent;
+    }
+    interface HTMLElementEventMap {
+        'ai-tooltip-toggle': CustomEvent<{
+            open: boolean;
+            newState: string;
+            oldState: string;
+        }>;
+    }
+}
+export type TooltipPlacement = OverlayPlacement;
+export type TooltipTrigger = 'hover' | 'focus' | 'click' | 'manual';
+/**
+ * @summary A tooltip component with accessibility features and dynamic positioning.
+ *
+ * @description
+ * This component provides tooltip functionality with proper accessibility support.
+ * When closed, the content is visually hidden but available to screen readers.
+ * When open, it displays in a positioned overlay above other content.
+ *
+ * @since 1.2.0
+ *
+ * @cssprop --ai-tooltip-max-width - The maximum width of the tooltip.
+ * @cssprop --ai-tooltip-z-index - The z-index of the tooltip overlay.
+ *
+ * @slot - The default slot for tooltip content.
+ */
+export declare class ForgeAiTooltipComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    /**
+     * The ID of the anchor element to attach the tooltip to.
+     */
+    for: string;
+    /**
+     * The text content of the tooltip (alternative to slotted content).
+     */
+    text: string;
+    /**
+     * The placement of the tooltip relative to the anchor.
+     */
+    placement: TooltipPlacement;
+    /**
+     * How the tooltip should be triggered.
+     */
+    trigger: TooltipTrigger;
+    /**
+     * Whether the tooltip is open.
+     */
+    open: boolean;
+    /**
+     * Delay in milliseconds before showing the tooltip.
+     */
+    delay: number;
+    /**
+     * Delay in milliseconds before hiding the tooltip.
+     */
+    hideDelay: number;
+    private _anchorElement;
+    private _showTimeout;
+    private _hideTimeout;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private _findAnchorElement;
+    private _updateHostAttributes;
+    private _attachEventListeners;
+    private _detachEventListeners;
+    private _handleShow;
+    private _handleHide;
+    private _handleToggle;
+    private _clearTimeouts;
+    private _onOverlayToggle;
+    /**
+     * Show the tooltip programmatically.
+     */
+    show(): void;
+    /**
+     * Hide the tooltip programmatically.
+     */
+    hide(): void;
+    /**
+     * Toggle the tooltip programmatically.
+     */
+    toggle(): void;
+    render(): TemplateResult;
+}

package/dist/core/tooltip/tooltip.mjs

@@ -0,0 +1,243 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import "../overlay/overlay.mjs";
+import styles from "./tooltip.scss.mjs";
+import { when } from "lit/directives/when.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+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;
+let ForgeAiTooltipComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _ForgeAiTooltipComponent_instances);
+    this.for = "";
+    this.text = "";
+    this.placement = "top";
+    this.trigger = "hover";
+    this.open = false;
+    this.delay = 500;
+    this.hideDelay = 0;
+    this._anchorElement = null;
+    this._showTimeout = null;
+    this._hideTimeout = null;
+    this._handleShow = () => {
+      this._clearTimeouts();
+      if (this.delay > 0) {
+        this._showTimeout = window.setTimeout(() => {
+          this.open = true;
+        }, this.delay);
+      } else {
+        this.open = true;
+      }
+    };
+    this._handleHide = () => {
+      this._clearTimeouts();
+      if (this.hideDelay > 0) {
+        this._hideTimeout = window.setTimeout(() => {
+          this.open = false;
+        }, this.hideDelay);
+      } else {
+        this.open = false;
+      }
+    };
+    this._handleToggle = () => {
+      this.open = !this.open;
+    };
+    this._onOverlayToggle = (event) => {
+      this.open = event.detail.open;
+      this.dispatchEvent(
+        new CustomEvent("ai-tooltip-toggle", {
+          detail: event.detail,
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._findAnchorElement();
+    this._attachEventListeners();
+    this._updateHostAttributes();
+    if (!this._anchorElement && this.for) {
+      setTimeout(() => {
+        this._findAnchorElement();
+        this._attachEventListeners();
+      }, 0);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._detachEventListeners();
+    this._clearTimeouts();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("for")) {
+      this._detachEventListeners();
+      this._findAnchorElement();
+      this._attachEventListeners();
+    }
+    if (changedProperties.has("open")) {
+      this._updateHostAttributes();
+    }
+  }
+  _findAnchorElement() {
+    if (!this.for) {
+      this._anchorElement = null;
+      return;
+    }
+    this._anchorElement = document.getElementById(this.for);
+    if (!this._anchorElement) {
+      const root = this.getRootNode();
+      if (root !== document && "querySelector" in root) {
+        this._anchorElement = root.querySelector(`#${this.for}`);
+      }
+    }
+    if (!this._anchorElement) {
+      console.warn(`Tooltip anchor element with id "${this.for}" not found`);
+    }
+  }
+  _updateHostAttributes() {
+    this.setAttribute("role", this.open ? "tooltip" : "none");
+    this.setAttribute("aria-hidden", String(!this.open));
+    if (this.open) {
+      this.setAttribute("aria-live", "polite");
+    } else {
+      this.removeAttribute("aria-live");
+    }
+  }
+  _attachEventListeners() {
+    if (!this._anchorElement) {
+      return;
+    }
+    switch (this.trigger) {
+      case "hover":
+        this._anchorElement.addEventListener("mouseenter", this._handleShow);
+        this._anchorElement.addEventListener("mouseleave", this._handleHide);
+        break;
+      case "focus":
+        this._anchorElement.addEventListener("focusin", this._handleShow);
+        this._anchorElement.addEventListener("focusout", this._handleHide);
+        break;
+      case "click":
+        this._anchorElement.addEventListener("click", this._handleToggle);
+        break;
+    }
+  }
+  _detachEventListeners() {
+    if (!this._anchorElement) {
+      return;
+    }
+    this._anchorElement.removeEventListener("mouseenter", this._handleShow);
+    this._anchorElement.removeEventListener("mouseleave", this._handleHide);
+    this._anchorElement.removeEventListener("focusin", this._handleShow);
+    this._anchorElement.removeEventListener("focusout", this._handleHide);
+    this._anchorElement.removeEventListener("click", this._handleToggle);
+  }
+  _clearTimeouts() {
+    if (this._showTimeout) {
+      clearTimeout(this._showTimeout);
+      this._showTimeout = null;
+    }
+    if (this._hideTimeout) {
+      clearTimeout(this._hideTimeout);
+      this._hideTimeout = null;
+    }
+  }
+  /**
+   * Show the tooltip programmatically.
+   */
+  show() {
+    this.open = true;
+  }
+  /**
+   * Hide the tooltip programmatically.
+   */
+  hide() {
+    this.open = false;
+  }
+  /**
+   * Toggle the tooltip programmatically.
+   */
+  toggle() {
+    this.open = !this.open;
+  }
+  render() {
+    const contentClasses = {
+      "tooltip-content": true,
+      "tooltip-content--hidden": !this.open
+    };
+    return html`
+      ${when(
+      this.open,
+      () => html` <!-- Overlay for visual presentation when open -->
+            <forge-ai-overlay
+              .anchor=${this._anchorElement}
+              .placement=${this.placement}
+              flip
+              .open=${this.open}
+              @ai-overlay-toggle=${this._onOverlayToggle}>
+              <div class="ai-tooltip" data-placement=${this.placement}>${__privateGet(this, _ForgeAiTooltipComponent_instances, tooltipContent_get)}</div>
+            </forge-ai-overlay>`,
+      () => html`
+          <!-- Content shown when closed for accessibility -->
+          <div class=${classMap(contentClasses)}>${__privateGet(this, _ForgeAiTooltipComponent_instances, tooltipContent_get)}</div>
+        `
+    )}
+    `;
+  }
+};
+_ForgeAiTooltipComponent_instances = /* @__PURE__ */ new WeakSet();
+tooltipContent_get = function() {
+  const hasText = this.text.trim().length > 0;
+  if (hasText) {
+    return html`${this.text}`;
+  }
+  return html`<slot></slot>`;
+};
+ForgeAiTooltipComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property()
+], ForgeAiTooltipComponent.prototype, "for", 2);
+__decorateClass([
+  property()
+], ForgeAiTooltipComponent.prototype, "text", 2);
+__decorateClass([
+  property()
+], ForgeAiTooltipComponent.prototype, "placement", 2);
+__decorateClass([
+  property()
+], ForgeAiTooltipComponent.prototype, "trigger", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ForgeAiTooltipComponent.prototype, "open", 2);
+__decorateClass([
+  property({ type: Number })
+], ForgeAiTooltipComponent.prototype, "delay", 2);
+__decorateClass([
+  property({ type: Number, attribute: "hide-delay" })
+], ForgeAiTooltipComponent.prototype, "hideDelay", 2);
+__decorateClass([
+  state()
+], ForgeAiTooltipComponent.prototype, "_anchorElement", 2);
+ForgeAiTooltipComponent = __decorateClass([
+  customElement("forge-ai-tooltip")
+], ForgeAiTooltipComponent);
+export {
+  ForgeAiTooltipComponent
+};

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

@@ -0,0 +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-slidein-x: 0;\n  --_tooltip-slidein-y: 0;\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}\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    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}';
+export {
+  styles as default
+};