@tylertech/forge-ai 0.4.0 → 0.5.0

package/dist/ai-floating-chat/ai-floating-chat.mjs

@@ -2,8 +2,6 @@ import { unsafeCSS, LitElement, html } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import "../ai-dialog/ai-dialog.mjs";
-import "../ai-chat-interface/ai-chat-interface.mjs";
-import "../ai-chat-header/ai-chat-header.mjs";
 import styles from "./ai-floating-chat.scss.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -22,7 +20,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _dialogRef, _AiFloatingChatComponent_instances, handleFullscreenChange_fn, handleHeaderExpand_fn, handleHeaderMinimize_fn, handleDialogClose_fn, dispatchEvent_fn;
+var _dialogRef, _AiFloatingChatComponent_instances, handleFullscreenChange_fn, handleChatbotExpand_fn, handleChatbotMinimize_fn, handleDialogClose_fn, dispatchEvent_fn;
 const AiFloatingChatComponentTagName = "forge-ai-floating-chat";
 let AiFloatingChatComponent = class extends LitElement {
   constructor() {
@@ -30,14 +28,9 @@ let AiFloatingChatComponent = class extends LitElement {
     __privateAdd(this, _AiFloatingChatComponent_instances);
     this.open = false;
     this.expanded = false;
-    this._isFullscreen = false;
+    this._userExpanded = false;
     __privateAdd(this, _dialogRef, createRef());
   }
-  updated() {
-    if (__privateGet(this, _dialogRef).value && this._isFullscreen !== __privateGet(this, _dialogRef).value.isFullscreen) {
-      this._isFullscreen = __privateGet(this, _dialogRef).value.isFullscreen;
-    }
-  }
   render() {
     return html`
       <forge-ai-dialog
@@ -46,33 +39,16 @@ let AiFloatingChatComponent = class extends LitElement {
         ?expanded=${this.expanded}
         @forge-ai-dialog-fullscreen-change=${__privateMethod(this, _AiFloatingChatComponent_instances, handleFullscreenChange_fn)}
         @forge-ai-dialog-close=${__privateMethod(this, _AiFloatingChatComponent_instances, handleDialogClose_fn)}>
-        <forge-ai-chat-interface>
-          <forge-ai-chat-header
-            slot="header"
-            @forge-ai-chat-header-expand=${__privateMethod(this, _AiFloatingChatComponent_instances, handleHeaderExpand_fn)}
-            @forge-ai-chat-header-minimize=${__privateMethod(this, _AiFloatingChatComponent_instances, handleHeaderMinimize_fn)}
-            ?show-expand-button=${!this._isFullscreen}
-            show-minimize-button
-            minimize-icon="default"
-            ?expanded=${this.expanded}>
-          </forge-ai-chat-header>
-          <slot></slot>
-          <slot name="suggestions" slot="suggestions"></slot>
-          <slot name="prompt" slot="prompt"></slot>
-        </forge-ai-chat-interface>
+        <slot
+          @forge-ai-chatbot-expand=${__privateMethod(this, _AiFloatingChatComponent_instances, handleChatbotExpand_fn)}
+          @forge-ai-chatbot-minimize=${__privateMethod(this, _AiFloatingChatComponent_instances, handleChatbotMinimize_fn)}></slot>
       </forge-ai-dialog>
     `;
   }
-  /**
-   * Opens the chat.
-   */
   show() {
     this.open = true;
     __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-open");
   }
-  /**
-   * Closes the chat.
-   */
   close() {
     if (this.expanded) {
       this.expanded = false;
@@ -81,9 +57,6 @@ let AiFloatingChatComponent = class extends LitElement {
     this.open = false;
     __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-close");
   }
-  /**
-   * Toggles the chat open state.
-   */
   toggle() {
     if (this.open) {
       this.close();
@@ -91,21 +64,17 @@ let AiFloatingChatComponent = class extends LitElement {
       this.show();
     }
   }
-  /**
-   * Expands the chat to full width.
-   */
   expand() {
     if (!this.expanded) {
       this.expanded = true;
+      this._userExpanded = true;
       __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-expand");
     }
   }
-  /**
-   * Collapses the chat to normal width.
-   */
   collapse() {
     if (this.expanded) {
       this.expanded = false;
+      this._userExpanded = false;
       __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-collapse");
     }
   }
@@ -113,17 +82,25 @@ let AiFloatingChatComponent = class extends LitElement {
 _dialogRef = /* @__PURE__ */ new WeakMap();
 _AiFloatingChatComponent_instances = /* @__PURE__ */ new WeakSet();
 handleFullscreenChange_fn = function(event) {
-  this._isFullscreen = event.detail.isFullscreen;
+  const { isFullscreen } = event.detail;
+  if (isFullscreen && !this.expanded) {
+    this.expanded = true;
+    __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-expand");
+  } else if (!isFullscreen && this.expanded && !this._userExpanded) {
+    this.expanded = false;
+    __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-collapse");
+  }
 };
-handleHeaderExpand_fn = function() {
+handleChatbotExpand_fn = function() {
   this.expanded = !this.expanded;
+  this._userExpanded = this.expanded;
   if (this.expanded) {
     __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-expand");
   } else {
     __privateMethod(this, _AiFloatingChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-floating-chat-collapse");
   }
 };
-handleHeaderMinimize_fn = function() {
+handleChatbotMinimize_fn = function() {
   this.close();
 };
 handleDialogClose_fn = function() {
@@ -147,7 +124,7 @@ __decorateClass([
 ], AiFloatingChatComponent.prototype, "expanded", 2);
 __decorateClass([
   state()
-], AiFloatingChatComponent.prototype, "_isFullscreen", 2);
+], AiFloatingChatComponent.prototype, "_userExpanded", 2);
 AiFloatingChatComponent = __decorateClass([
   customElement(AiFloatingChatComponentTagName)
 ], AiFloatingChatComponent);

package/dist/ai-message-thread/ai-message-thread.d.ts

@@ -0,0 +1,58 @@
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
+import { MessageItem, ToolDefinition } from '../ai-chatbot/types.js';
+import { FeatureToggle } from '../ai-chatbot/ai-chatbot.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-message-thread': AiMessageThreadComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-ai-message-thread-copy': CustomEvent<ForgeAiMessageThreadCopyEventData>;
+        'forge-ai-message-thread-refresh': CustomEvent<ForgeAiMessageThreadRefreshEventData>;
+        'forge-ai-message-thread-thumbs-up': CustomEvent<ForgeAiMessageThreadThumbsEventData>;
+        'forge-ai-message-thread-thumbs-down': CustomEvent<ForgeAiMessageThreadThumbsEventData>;
+    }
+}
+export interface ForgeAiMessageThreadCopyEventData {
+    messageItemIndex: number;
+}
+export interface ForgeAiMessageThreadRefreshEventData {
+    messageItemIndex: number;
+}
+export interface ForgeAiMessageThreadThumbsEventData {
+    messageId: string;
+}
+export declare const AiMessageThreadComponentTagName: keyof HTMLElementTagNameMap;
+/**
+ * @tag forge-ai-message-thread
+ *
+ * @summary A primitive component for rendering a thread of chat messages, including user, assistant, system, and tool call messages.
+ *
+ * @description
+ * The AI Message Thread component displays a chronological list of messages with support for markdown rendering,
+ * tool calls, empty states, and thinking indicators. It handles its own scrolling behavior with auto-scroll support.
+ *
+ * @slot empty-state-heading - Slot for custom empty state heading content
+ * @slot empty-state-actions - Slot for custom empty state actions (e.g., suggestions)
+ *
+ * @event {CustomEvent<ForgeAiMessageThreadCopyEventData>} forge-ai-message-thread-copy - Fired when user clicks copy on a message
+ * @event {CustomEvent<ForgeAiMessageThreadRefreshEventData>} forge-ai-message-thread-refresh - Fired when user clicks refresh on a message
+ * @event {CustomEvent<ForgeAiMessageThreadThumbsEventData>} forge-ai-message-thread-thumbs-up - Fired when user gives thumbs up
+ * @event {CustomEvent<ForgeAiMessageThreadThumbsEventData>} forge-ai-message-thread-thumbs-down - Fired when user gives thumbs down
+ */
+export declare class AiMessageThreadComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    messageItems: MessageItem[];
+    tools?: Map<string, ToolDefinition>;
+    enableReactions: boolean;
+    showThinking: boolean;
+    autoScroll: FeatureToggle;
+    private _messageThreadContainer;
+    connectedCallback(): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    scrollToBottom({ force, behavior }?: {
+        force?: boolean;
+        behavior?: ScrollBehavior;
+    }): void;
+    render(): TemplateResult;
+}

package/dist/ai-message-thread/ai-message-thread.mjs

@@ -0,0 +1,224 @@
+import { unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, query, customElement } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { when } from "lit/directives/when.js";
+import { MarkdownStreamController } from "../ai-chatbot/markdown-stream-controller.mjs";
+import "../ai-empty-state/ai-empty-state.mjs";
+import "../ai-error-message/ai-error-message.mjs";
+import "../ai-response-message/ai-response-message.mjs";
+import "../ai-thinking-indicator/ai-thinking-indicator.mjs";
+import "../ai-user-message/ai-user-message.mjs";
+import "../ai-chatbot/ai-chatbot-tool-call.mjs";
+import styles from "./ai-message-thread.scss.mjs";
+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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _markdownController, _canAutoScroll, _handleScroll, _AiMessageThreadComponent_instances, handleCopy_fn, handleRefresh_fn, handleThumbsUp_fn, handleThumbsDown_fn, renderToolCall_fn, emptyState_get, thinkingIndicator_get, messages_get, dispatchEvent_fn;
+const AiMessageThreadComponentTagName = "forge-ai-message-thread";
+const SCROLL_THRESHOLD = 100;
+let AiMessageThreadComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _AiMessageThreadComponent_instances);
+    this.messageItems = [];
+    this.enableReactions = false;
+    this.showThinking = false;
+    this.autoScroll = "on";
+    __privateAdd(this, _markdownController);
+    __privateAdd(this, _canAutoScroll, true);
+    __privateAdd(this, _handleScroll, () => {
+      const { scrollTop, scrollHeight, clientHeight } = this._messageThreadContainer;
+      __privateSet(this, _canAutoScroll, scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD);
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateSet(this, _markdownController, new MarkdownStreamController(this));
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (this.autoScroll === "on" && (changedProperties.has("messageItems") || changedProperties.has("showThinking"))) {
+      this.scrollToBottom();
+    }
+  }
+  scrollToBottom({
+    force = false,
+    behavior = "smooth"
+  } = {}) {
+    if (!force && !__privateGet(this, _canAutoScroll)) {
+      return;
+    }
+    const container = this._messageThreadContainer;
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior
+    });
+  }
+  render() {
+    return html`
+      <div class="message-thread" @scroll=${this.autoScroll ? __privateGet(this, _handleScroll) : void 0}>
+        ${__privateGet(this, _AiMessageThreadComponent_instances, emptyState_get)} ${__privateGet(this, _AiMessageThreadComponent_instances, messages_get)} ${__privateGet(this, _AiMessageThreadComponent_instances, thinkingIndicator_get)}
+      </div>
+    `;
+  }
+};
+_markdownController = /* @__PURE__ */ new WeakMap();
+_canAutoScroll = /* @__PURE__ */ new WeakMap();
+_handleScroll = /* @__PURE__ */ new WeakMap();
+_AiMessageThreadComponent_instances = /* @__PURE__ */ new WeakSet();
+handleCopy_fn = function(messageItemIndex) {
+  __privateMethod(this, _AiMessageThreadComponent_instances, dispatchEvent_fn).call(this, {
+    type: "forge-ai-message-thread-copy",
+    detail: { messageItemIndex }
+  });
+};
+handleRefresh_fn = function(messageItemIndex) {
+  __privateMethod(this, _AiMessageThreadComponent_instances, dispatchEvent_fn).call(this, {
+    type: "forge-ai-message-thread-refresh",
+    detail: { messageItemIndex }
+  });
+};
+handleThumbsUp_fn = function(messageId) {
+  __privateMethod(this, _AiMessageThreadComponent_instances, dispatchEvent_fn).call(this, {
+    type: "forge-ai-message-thread-thumbs-up",
+    detail: { messageId }
+  });
+};
+handleThumbsDown_fn = function(messageId) {
+  __privateMethod(this, _AiMessageThreadComponent_instances, dispatchEvent_fn).call(this, {
+    type: "forge-ai-message-thread-thumbs-down",
+    detail: { messageId }
+  });
+};
+renderToolCall_fn = function(toolCall) {
+  const toolDefinition = this.tools?.get(toolCall.name);
+  return html`<forge-ai-chatbot-tool-call
+      .toolCall=${toolCall}
+      .toolDefinition=${toolDefinition}></forge-ai-chatbot-tool-call>`;
+};
+emptyState_get = function() {
+  if (this.messageItems.length) {
+    return nothing;
+  }
+  return html`
+      <forge-ai-empty-state>
+        <slot name="empty-state-heading" slot="heading">
+          <span>How can I help you today?</span>
+        </slot>
+        <slot name="empty-state-message" slot="body">
+          Start a conversation by asking a question or describing what you'd like help with.
+        </slot>
+        <slot name="empty-state-actions" slot="actions"></slot>
+      </forge-ai-empty-state>
+    `;
+};
+thinkingIndicator_get = function() {
+  if (!this.showThinking) {
+    return nothing;
+  }
+  const lastItem = this.messageItems[this.messageItems.length - 1];
+  const hasAssistantContent = lastItem?.type !== "toolCall" && lastItem?.type === "message" && lastItem.data.role === "assistant" && lastItem.data.content.trim().length;
+  if (hasAssistantContent) {
+    return nothing;
+  }
+  return html`<div class="thinking-indicator">
+      <forge-ai-thinking-indicator class="status-indicator"></forge-ai-thinking-indicator>
+    </div>`;
+};
+messages_get = function() {
+  const itemsToRender = this.messageItems.filter((item) => {
+    if (item.type === "toolCall") {
+      const toolDef = this.tools?.get(item.data.name);
+      return !!toolDef?.renderer;
+    }
+    if (item.type === "message") {
+      return item.data.role !== "tool";
+    }
+    return false;
+  });
+  return itemsToRender.map((item, index) => {
+    if (item.type === "toolCall") {
+      return __privateMethod(this, _AiMessageThreadComponent_instances, renderToolCall_fn).call(this, item.data);
+    }
+    const msg = item.data;
+    if (msg.role === "user") {
+      const renderedHtml = __privateGet(this, _markdownController).getCachedHtml(msg.id, msg.content);
+      return html`<forge-ai-user-message>${unsafeHTML(renderedHtml)}</forge-ai-user-message>`;
+    } else if (msg.role === "system") {
+      return html`<div class="system-message">${msg.content}</div>`;
+    } else if (msg.status === "error") {
+      const renderedHtml = __privateGet(this, _markdownController).getCachedHtml(msg.id, msg.content);
+      return html`
+          <forge-ai-error-message>
+            <span slot="title">Error</span>
+            ${unsafeHTML(renderedHtml)}
+          </forge-ai-error-message>
+        `;
+    } else {
+      return when(msg.content?.trim().length, () => {
+        const renderedHtml = __privateGet(this, _markdownController).getCachedHtml(msg.id, msg.content);
+        return html`
+            <forge-ai-response-message
+              ?complete=${msg.status === "complete"}
+              ?enable-reactions=${this.enableReactions}
+              @forge-ai-response-message-copy=${() => __privateMethod(this, _AiMessageThreadComponent_instances, handleCopy_fn).call(this, index)}
+              @forge-ai-response-message-refresh=${() => __privateMethod(this, _AiMessageThreadComponent_instances, handleRefresh_fn).call(this, index)}
+              @forge-ai-response-message-thumbs-up=${() => __privateMethod(this, _AiMessageThreadComponent_instances, handleThumbsUp_fn).call(this, msg.id)}
+              @forge-ai-response-message-thumbs-down=${() => __privateMethod(this, _AiMessageThreadComponent_instances, handleThumbsDown_fn).call(this, msg.id)}>
+              ${unsafeHTML(renderedHtml)}
+            </forge-ai-response-message>
+          `;
+      });
+    }
+  });
+};
+dispatchEvent_fn = function(config) {
+  const event = new CustomEvent(config.type, {
+    detail: config.detail,
+    bubbles: true,
+    composed: true
+  });
+  this.dispatchEvent(event);
+  return event;
+};
+AiMessageThreadComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ attribute: false })
+], AiMessageThreadComponent.prototype, "messageItems", 2);
+__decorateClass([
+  property({ attribute: false })
+], AiMessageThreadComponent.prototype, "tools", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "enable-reactions" })
+], AiMessageThreadComponent.prototype, "enableReactions", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-thinking" })
+], AiMessageThreadComponent.prototype, "showThinking", 2);
+__decorateClass([
+  property({ attribute: "auto-scroll" })
+], AiMessageThreadComponent.prototype, "autoScroll", 2);
+__decorateClass([
+  query(".message-thread")
+], AiMessageThreadComponent.prototype, "_messageThreadContainer", 2);
+AiMessageThreadComponent = __decorateClass([
+  customElement(AiMessageThreadComponentTagName)
+], AiMessageThreadComponent);
+export {
+  AiMessageThreadComponent,
+  AiMessageThreadComponentTagName
+};

package/dist/ai-message-thread/ai-message-thread.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/* 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:host {\n  display: grid;\n  height: 100%;\n}\n\n.message-thread::-webkit-scrollbar {\n  height: var(--forge-scrollbar-height, 16px);\n  width: var(--forge-scrollbar-width, 16px);\n}\n.message-thread::-webkit-scrollbar-track {\n  background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.message-thread::-webkit-scrollbar-track:hover {\n  background-color: var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.message-thread::-webkit-scrollbar-corner {\n  background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.message-thread::-webkit-scrollbar-thumb {\n  height: var(--forge-scrollbar-thumb-min-height, 32px);\n  width: var(--forge-scrollbar-thumb-min-width, 32px);\n  border-radius: var(--forge-scrollbar-border-radius, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n  border-width: var(--forge-scrollbar-border-width, 3px);\n  border-style: solid;\n  border-color: transparent;\n  background-color: var(--forge-scrollbar-thumb-container, var(--forge-theme-surface-container-medium, #c2c2c2));\n  background-clip: content-box;\n}\n.message-thread::-webkit-scrollbar-thumb:hover {\n  background-color: var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e));\n}\n.message-thread {\n  display: flex;\n  flex-direction: column;\n  gap: var(--forge-spacing-medium, 16px);\n  padding-block-end: var(--forge-spacing-large, 24px);\n  overflow-y: auto;\n  padding: var(--forge-spacing-medium, 16px) var(--forge-spacing-medium, 16px) var(--forge-spacing-xxlarge, 48px) var(--forge-spacing-medium, 16px);\n}\n@media not all and (min-resolution: 0.001dpcm) {\n  @supports (-webkit-appearance: none) {\n    .message-thread {\n      overflow-y: scroll;\n    }\n  }\n}\n\n.thinking-indicator {\n  margin-block-start: var(--forge-spacing-xsmall, 8px);\n}\n\n.system-message {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-subheading2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-subheading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-font-size-scale, 1)));\n  font-weight: var(--forge-typography-subheading2-font-weight, 400);\n  line-height: var(--forge-typography-subheading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-line-height-scale, 1.25)));\n  letter-spacing: var(--forge-typography-subheading2-letter-spacing, normal);\n  text-transform: var(--forge-typography-subheading2-text-transform, inherit);\n  text-decoration: var(--forge-typography-subheading2-text-decoration, inherit);\n  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n  padding-block: var(--forge-spacing-small, 12px);\n}';
+export {
+  styles as default
+};

package/dist/ai-message-thread/index.d.ts

@@ -0,0 +1,2 @@
+export { AiMessageThreadComponent, AiMessageThreadComponentTagName } from './ai-message-thread.js';
+export type { ForgeAiMessageThreadCopyEventData, ForgeAiMessageThreadRefreshEventData, ForgeAiMessageThreadThumbsEventData } from './ai-message-thread.js';

package/dist/ai-message-thread/index.mjs

@@ -0,0 +1,5 @@
+import { AiMessageThreadComponent, AiMessageThreadComponentTagName } from "./ai-message-thread.mjs";
+export {
+  AiMessageThreadComponent,
+  AiMessageThreadComponentTagName
+};

package/dist/ai-modal/ai-modal.d.ts

@@ -19,6 +19,11 @@ declare global {
  * @event {CustomEvent<void>} forge-ai-modal-open - Fired when the modal is opened
  * @event {CustomEvent<void>} forge-ai-modal-close - Fired when the modal is closed
  * @event {CustomEvent<{ isFullscreen: boolean }>} forge-ai-modal-fullscreen-change - Fired when the fullscreen state changes
+ *
+ * @cssproperty --forge-ai-modal-width - Width of the modal in non-fullscreen mode
+ * @cssproperty --forge-ai-modal-height - Height of the modal in non-fullscreen mode
+ *
+ * @state fullscreen - The modal is in fullscreen mode
  */
 export declare class AiModalComponent extends LitElement {
     #private;
@@ -34,6 +39,7 @@ export declare class AiModalComponent extends LitElement {
      */
     fullscreen?: boolean;
     private _autoFullscreen;
+    constructor();
     render(): TemplateResult;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/ai-modal/ai-modal.mjs

@@ -1,6 +1,7 @@
 import { unsafeCSS, LitElement, html } from "lit";
 import { query, property, state, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { toggleState } from "../utils.mjs";
 import styles from "./ai-modal.scss.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -20,27 +21,33 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _mediaQuery, _AiModalComponent_instances, handleDialogClose_fn, handleDialogClick_fn, setupMediaQuery_fn, cleanupMediaQuery_fn, _handleMediaChange;
+var _mediaQuery, _internals, _AiModalComponent_instances, updateFullscreenState_fn, handleDialogClose_fn, handleDialogClick_fn, setupMediaQuery_fn, cleanupMediaQuery_fn, _handleMediaChange;
 const FULLSCREEN_WIDTH_THRESHOLD = 768;
 let AiModalComponent = class extends LitElement {
   constructor() {
-    super(...arguments);
+    super();
     __privateAdd(this, _AiModalComponent_instances);
     this.open = false;
     this._autoFullscreen = window.innerWidth <= FULLSCREEN_WIDTH_THRESHOLD;
     __privateAdd(this, _mediaQuery);
+    __privateAdd(this, _internals);
     __privateAdd(this, _handleMediaChange, (e) => {
       const previousFullscreen = this._autoFullscreen;
       this._autoFullscreen = e.matches;
-      if (this.fullscreen === void 0 && previousFullscreen !== this._autoFullscreen) {
-        const event = new CustomEvent("forge-ai-modal-fullscreen-change", {
-          bubbles: true,
-          composed: true,
-          detail: { isFullscreen: this._autoFullscreen }
-        });
-        this.dispatchEvent(event);
+      if (previousFullscreen !== this._autoFullscreen) {
+        __privateMethod(this, _AiModalComponent_instances, updateFullscreenState_fn).call(this);
+        if (this.fullscreen === void 0) {
+          const event = new CustomEvent("forge-ai-modal-fullscreen-change", {
+            bubbles: true,
+            composed: true,
+            detail: { isFullscreen: this._autoFullscreen }
+          });
+          this.dispatchEvent(event);
+        }
       }
     });
+    __privateSet(this, _internals, this.attachInternals());
+    __privateMethod(this, _AiModalComponent_instances, updateFullscreenState_fn).call(this);
   }
   render() {
     const isFullscreen = this.fullscreen ?? this._autoFullscreen;
@@ -69,15 +76,20 @@ let AiModalComponent = class extends LitElement {
   updated(changedProperties) {
     if (changedProperties.has("open")) {
       if (this.open) {
-        this._dialog?.showModal();
-        this.dispatchEvent(new CustomEvent("forge-ai-modal-open", { bubbles: true, composed: true }));
+        if (this._dialog && !this._dialog.open) {
+          this._dialog.showModal();
+          this.dispatchEvent(new CustomEvent("forge-ai-modal-open", { bubbles: true, composed: true }));
+        }
       } else {
-        this._dialog?.close();
-        window.setTimeout(() => {
+        if (this._dialog?.open) {
+          this._dialog.close();
           this.dispatchEvent(new CustomEvent("forge-ai-modal-close", { bubbles: true, composed: true }));
-        }, 100);
+        }
       }
     }
+    if (changedProperties.has("fullscreen")) {
+      __privateMethod(this, _AiModalComponent_instances, updateFullscreenState_fn).call(this);
+    }
   }
   /**
    * Shows the modal dialog.
@@ -93,7 +105,12 @@ let AiModalComponent = class extends LitElement {
   }
 };
 _mediaQuery = /* @__PURE__ */ new WeakMap();
+_internals = /* @__PURE__ */ new WeakMap();
 _AiModalComponent_instances = /* @__PURE__ */ new WeakSet();
+updateFullscreenState_fn = function() {
+  const isFullscreen = this.fullscreen ?? this._autoFullscreen;
+  toggleState(__privateGet(this, _internals), "fullscreen", isFullscreen);
+};
 handleDialogClose_fn = function() {
   this.open = false;
 };

package/dist/ai-modal/ai-modal.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@keyframes forge-dialog-zoom-in {\n  from {\n    opacity: var(--_dialog-zoom-opacity);\n    scale: var(--_dialog-zoom-scale);\n  }\n  to {\n    opacity: 1;\n    scale: 1;\n  }\n}\n@keyframes forge-dialog-zoom-out {\n  from {\n    opacity: 1;\n    scale: 1;\n  }\n  to {\n    opacity: var(--_dialog-zoom-opacity);\n    scale: var(--_dialog-zoom-scale);\n  }\n}\n@keyframes forge-dialog-fade-in {\n  from {\n    opacity: var(--_dialog-fade-opacity);\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes forge-dialog-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: var(--_dialog-fade-opacity);\n  }\n}\n@keyframes forge-dialog-slide-in {\n  from {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n  to {\n    opacity: 1;\n    translate: 0 0;\n  }\n}\n@keyframes forge-dialog-slide-out {\n  from {\n    opacity: 1;\n    translate: 0 0;\n  }\n  to {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog {\n  --_dialog-background: var(--forge-dialog-background, var(--forge-theme-surface-bright, #ffffff));\n  --_dialog-shape: var(--forge-dialog-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_dialog-elevation: var(--forge-dialog-elevation, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));\n  --_dialog-spacing: var(--forge-dialog-spacing, auto);\n  --_dialog-block-start-spacing: var(--forge-dialog-block-start-spacing, var(--_dialog-spacing));\n  --_dialog-block-end-spacing: var(--forge-dialog-block-end-spacing, var(--_dialog-spacing));\n  --_dialog-inline-start-spacing: var(--forge-dialog-inline-start-spacing, var(--_dialog-spacing));\n  --_dialog-inline-end-spacing: var(--forge-dialog-inline-end-spacing, var(--_dialog-spacing));\n  --_dialog-padding: var(--forge-dialog-padding, 0);\n  --_dialog-width: var(--forge-dialog-width, fit-content);\n  --_dialog-height: var(--forge-dialog-height, fit-content);\n  --_dialog-min-width: var(--forge-dialog-min-width, 0);\n  --_dialog-max-width: var(--forge-dialog-max-width, calc(100% - var(--forge-spacing-xxlarge, 48px)));\n  --_dialog-min-height: var(--forge-dialog-min-height, 0);\n  --_dialog-max-height: var(--forge-dialog-max-height, calc(100% - var(--forge-spacing-xxlarge, 48px)));\n  --_dialog-z-index: var(--forge-dialog-z-index, var(--forge-z-index-dialog, 8));\n  --_dialog-move-handle-color: var(--forge-dialog-move-handle-color, currentColor);\n  --_dialog-move-handle-size: var(--forge-dialog-move-handle-size, 24px);\n  --_dialog-move-handle-hover-cursor: var(--forge-dialog-move-handle-hover-cursor, grab);\n  --_dialog-move-handle-active-cursor: var(--forge-dialog-move-handle-active-cursor, grabbing);\n  --_dialog-move-handle-spacing: var(--forge-dialog-move-handle-spacing, calc(var(--forge-spacing-xxsmall, 4px) * -1) 0 0);\n  --_dialog-move-transition-duration: var(--forge-dialog-move-transition-duration, var(--forge-animation-duration-short4, 200ms));\n  --_dialog-move-transition-easing: var(--forge-dialog-move-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_dialog-moving-opacity: var(--forge-dialog-moving-opacity, 0.54);\n  --_dialog-enter-animation-duration: var(--forge-dialog-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_dialog-enter-animation-easing: var(--forge-dialog-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_dialog-exit-animation-duration: var(--forge-dialog-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));\n  --_dialog-exit-animation-easing: var(--forge-dialog-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));\n  --_dialog-zoom-opacity: var(--forge-dialog-zoom-opacity, 0);\n  --_dialog-zoom-scale: var(--forge-dialog-zoom-scale, 0.8);\n  --_dialog-fade-opacity: var(--forge-dialog-fade-opacity, 0);\n  --_dialog-slide-opacity: var(--forge-dialog-slide-opacity, 0);\n  --_dialog-slide-translate: var(--forge-dialog-slide-translate, 0 -30%);\n  --_dialog-backdrop-opacity: var(--forge-dialog-backdrop-opacity, var(--forge-backdrop-opacity, 0.54));\n  --_dialog-nonmodal-elevation: var(--forge-dialog-nonmodal-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));\n  --_dialog-fullscreen-enter-animation-duration: var(--forge-dialog-fullscreen-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_dialog-fullscreen-exit-animation-duration: var(--forge-dialog-fullscreen-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));\n  --_dialog-position-x: var(--forge-dialog-position-x, 0);\n  --_dialog-position-y: var(--forge-dialog-position-y, 0);\n  --_dialog-preset-sheet-enter-animation-duration: var(--forge-dialog-preset-sheet-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_dialog-preset-sheet-exit-animation-duration: var(--forge-dialog-preset-sheet-exit-animation-duration, var(--forge-animation-duration-short3, 150ms));\n  --_backdrop-background: var(--forge-backdrop-background, #000);\n  --_backdrop-opacity: var(--forge-backdrop-opacity, 0.54);\n  --_backdrop-z-index: var(--forge-backdrop-z-index, var(--forge-z-index-backdrop, 7));\n  --_backdrop-enter-animation-duration: var(--forge-backdrop-enter-animation-duration, var(--forge-animation-duration-short4, 200ms));\n  --_backdrop-enter-animation-easing: var(--forge-backdrop-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_backdrop-exit-animation-duration: var(--forge-backdrop-exit-animation-duration, var(--forge-animation-duration-short1, 50ms));\n  --_backdrop-exit-animation-easing: var(--forge-backdrop-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));\n  --forge-theme-surface: var(--forge-theme-surface-bright, #ffffff);\n}\n\n.forge-dialog {\n  position: fixed;\n  inset: 0;\n  z-index: var(--_dialog-z-index);\n  background-color: transparent;\n  color: inherit;\n  border: none;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0;\n  overflow: visible;\n  max-width: 100%;\n  max-height: 100%;\n  box-sizing: border-box;\n  position: absolute;\n  inset: 0;\n  display: flex;\n  background: var(--_dialog-background);\n  box-shadow: var(--_dialog-elevation);\n  z-index: var(--_dialog-z-index);\n  overflow: hidden;\n  border-radius: var(--_dialog-shape);\n  margin-block-start: var(--_dialog-block-start-spacing);\n  margin-block-end: var(--_dialog-block-end-spacing);\n  margin-inline-start: var(--_dialog-inline-start-spacing);\n  margin-inline-end: var(--_dialog-inline-end-spacing);\n  padding: var(--_dialog-padding);\n  width: var(--_dialog-width);\n  height: var(--_dialog-height);\n  min-width: var(--_dialog-min-width);\n  max-width: var(--_dialog-max-width);\n  min-height: var(--_dialog-min-height);\n  max-height: var(--_dialog-max-height);\n  box-sizing: border-box;\n  animation-duration: var(--_dialog-exit-animation-duration);\n  animation-timing-function: var(--_dialog-exit-animation-easing);\n  position: fixed;\n  transition-property: display, opacity, overlay, scale;\n  transition-behavior: allow-discrete;\n}\n\n.forge-dialog > forge-scaffold {\n  height: auto;\n}\n\n.forge-dialog--fullscreen {\n  --_dialog-enter-animation-duration: var(--_dialog-fullscreen-enter-animation-duration);\n  --_dialog-exit-animation-duration: var(--_dialog-fullscreen-exit-animation-duration);\n  height: 100%;\n  width: 100%;\n  max-width: none;\n  max-height: none;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.forge-dialog:not(:modal) {\n  --_dialog-elevation: var(--_dialog-nonmodal-elevation);\n  pointer-events: all;\n}\n\n.forge-dialog--moveable {\n  user-select: none;\n  transition-property: opacity;\n  transition-duration: var(--_dialog-move-transition-duration);\n  transition-timing-function: var(--_dialog-move-transition-easing);\n}\n\n.forge-dialog--moved {\n  margin: 0;\n}\n\n.forge-dialog--moving {\n  opacity: var(--_dialog-moving-opacity);\n}\n\n.forge-dialog__move-handle {\n  fill: var(--_dialog-move-handle-color);\n  height: var(--_dialog-move-handle-size);\n  width: var(--_dialog-move-handle-size);\n  margin: var(--_dialog-move-handle-spacing);\n  touch-action: none;\n}\n\n.forge-dialog__move-handle:hover {\n  cursor: var(--_dialog-move-handle-hover-cursor);\n}\n\n.forge-dialog__move-handle:active {\n  cursor: var(--_dialog-move-handle-active-cursor);\n}\n\n.forge-dialog__move-handle-container {\n  position: absolute;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\n\n.forge-dialog--top {\n  --_dialog-block-start-spacing: var(--forge-dialog-block-start-spacing, 0);\n  top: 0;\n  bottom: auto;\n}\n\n.forge-dialog--top-right {\n  --_dialog-spacing: var(--forge-dialog-spacing, 0);\n  top: 0;\n  left: auto;\n  right: 0;\n  bottom: auto;\n}\n\n.forge-dialog--top-left {\n  --_dialog-spacing: var(--forge-dialog-spacing, 0);\n  top: 0;\n  left: 0;\n  right: auto;\n  bottom: auto;\n}\n\n.forge-dialog--bottom {\n  --_dialog-block-end-spacing: var(--forge-dialog-block-end-spacing, 0);\n  top: auto;\n  bottom: 0;\n}\n\n.forge-dialog--bottom-right {\n  --_dialog-spacing: var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: auto;\n  right: 0;\n  bottom: 0;\n}\n\n.forge-dialog--bottom-left {\n  --_dialog-spacing: var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: 0;\n  right: auto;\n  bottom: 0;\n}\n\n.forge-dialog--right {\n  --_dialog-spacing: var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: auto;\n  right: 0;\n  bottom: auto;\n}\n\n.forge-dialog--left {\n  --_dialog-spacing: var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: 0;\n  right: auto;\n  bottom: auto;\n}\n\n.forge-dialog--custom {\n  margin: 0;\n  top: var(--_dialog-position-x);\n  left: var(--_dialog-position-y);\n}\n\n.forge-dialog--bottom-sheet {\n  --_dialog-enter-animation-duration: var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration: var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width: var(--forge-dialog-max-width, none);\n  --_dialog-max-height: var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  --_dialog-slide-translate: var(--forge-dialog-slide-translate, 0 100%);\n}\n\n.forge-dialog--bottom-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--bottom-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--bottom-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--bottom-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--left-sheet {\n  --_dialog-enter-animation-duration: var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration: var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width: var(--forge-dialog-max-width, none);\n  --_dialog-max-height: var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  height: 100%;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  --_dialog-slide-translate: var(--forge-dialog-slide-translate, -100% 0);\n}\n\n.forge-dialog--left-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--left-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--left-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--left-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--right-sheet {\n  --_dialog-enter-animation-duration: var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration: var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width: var(--forge-dialog-max-width, none);\n  --_dialog-max-height: var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  height: 100%;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  --_dialog-slide-translate: var(--forge-dialog-slide-translate, 100% 0);\n}\n\n.forge-dialog--right-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--right-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--right-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--right-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--top-sheet {\n  --_dialog-enter-animation-duration: var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration: var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width: var(--forge-dialog-max-width, none);\n  --_dialog-max-height: var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  --_dialog-slide-translate: var(--forge-dialog-slide-translate, 0 -100%);\n}\n\n.forge-dialog--top-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--top-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--top-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--top-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog::backdrop {\n  --forge-backdrop-opacity: var(--_backdrop-opacity);\n  --forge-backdrop-enter-animation-duration: var(--_backdrop-enter-animation-duration);\n  --forge-backdrop-enter-animation-easing: var(--_backdrop-enter-animation-easing);\n  --forge-backdrop-exit-animation-duration: var(--_backdrop-exit-animation-duration);\n  --forge-backdrop-exit-animation-easing: var(--_backdrop-exit-animation-easing);\n  position: absolute;\n  inset: 0;\n  z-index: var(--_backdrop-z-index);\n  background: var(--_backdrop-background);\n  opacity: 0;\n  animation-fill-mode: forwards;\n  transition-property: display, opacity, overlay;\n}\n\n.forge-dialog[open] {\n  opacity: 1;\n  scale: 1;\n  transition-duration: var(--_dialog-enter-animation-duration);\n  transition-timing-function: var(--_dialog-enter-animation-easing);\n}\n\n@starting-style {\n  .forge-dialog[open] {\n    opacity: var(--_dialog-zoom-opacity);\n    scale: var(--_dialog-zoom-scale);\n  }\n}\n.forge-dialog[open]::backdrop {\n  opacity: var(--_backdrop-opacity);\n  transition-duration: var(--_backdrop-enter-animation-duration);\n  transition-timing-function: var(--_backdrop-enter-animation-easing);\n}\n\n@starting-style {\n  .forge-dialog[open]::backdrop {\n    opacity: 0;\n  }\n}\n.forge-dialog:not([open]) {\n  animation-duration: var(--_dialog-enter-animation-duration);\n  animation-timing-function: var(--_dialog-enter-animation-easing);\n  display: none;\n  opacity: var(--_dialog-zoom-opacity);\n  scale: var(--_dialog-zoom-scale);\n  transition-duration: var(--_dialog-exit-animation-duration);\n  transition-timing-function: var(--_dialog-exit-animation-easing);\n}\n\n.forge-dialog:not([open])::backdrop {\n  transition-duration: var(--_backdrop-exit-animation-duration);\n  transition-timing-function: var(--_backdrop-exit-animation-easing);\n}\n\n.forge-dialog--animation-fade.forge-dialog {\n  transition-property: display, opacity, overlay;\n}\n\n@starting-style {\n  .forge-dialog--animation-fade.forge-dialog[open] {\n    opacity: var(--_dialog-fade-opacity);\n  }\n}\n.forge-dialog--animation-fade.forge-dialog:not([open]) {\n  opacity: var(--_dialog-fade-opacity);\n  scale: 1;\n}\n\n.forge-dialog--animation-slide.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--animation-slide.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--animation-slide.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--animation-slide.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--animation-none {\n  --_dialog-enter-animation-duration: var(--forge-dialog-enter-animation-duration, 0s);\n  --_dialog-exit-animation-duration: var(--forge-dialog-exit-animation-duration, 0s);\n  --_backdrop-enter-animation-duration: var(--forge-backdrop-enter-animation-duration, 0s);\n  --_backdrop-exit-animation-duration: var(--forge-backdrop-exit-animation-duration, 0s);\n}\n\n@media (prefers-reduced-motion) {\n  .forge-dialog.forge-dialog {\n    transition-property: display, opacity, overlay;\n  }\n  @starting-style {\n    .forge-dialog.forge-dialog[open] {\n      opacity: var(--_dialog-fade-opacity);\n    }\n  }\n  .forge-dialog.forge-dialog:not([open]) {\n    opacity: var(--_dialog-fade-opacity);\n    scale: 1;\n  }\n}\n:host {\n  display: contents;\n}\n\ndialog.forge-dialog:not(.forge-dialog--fullscreen) {\n  height: 80vh;\n  width: 80vw;\n  border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\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@keyframes forge-dialog-zoom-in {\n  from {\n    opacity: var(--_dialog-zoom-opacity);\n    scale: var(--_dialog-zoom-scale);\n  }\n  to {\n    opacity: 1;\n    scale: 1;\n  }\n}\n@keyframes forge-dialog-zoom-out {\n  from {\n    opacity: 1;\n    scale: 1;\n  }\n  to {\n    opacity: var(--_dialog-zoom-opacity);\n    scale: var(--_dialog-zoom-scale);\n  }\n}\n@keyframes forge-dialog-fade-in {\n  from {\n    opacity: var(--_dialog-fade-opacity);\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes forge-dialog-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: var(--_dialog-fade-opacity);\n  }\n}\n@keyframes forge-dialog-slide-in {\n  from {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n  to {\n    opacity: 1;\n    translate: 0 0;\n  }\n}\n@keyframes forge-dialog-slide-out {\n  from {\n    opacity: 1;\n    translate: 0 0;\n  }\n  to {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog {\n  --_dialog-background: var(--forge-dialog-background, var(--forge-theme-surface-bright, #ffffff));\n  --_dialog-shape: var(--forge-dialog-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_dialog-elevation: var(--forge-dialog-elevation, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));\n  --_dialog-spacing: var(--forge-dialog-spacing, auto);\n  --_dialog-block-start-spacing: var(--forge-dialog-block-start-spacing, var(--_dialog-spacing));\n  --_dialog-block-end-spacing: var(--forge-dialog-block-end-spacing, var(--_dialog-spacing));\n  --_dialog-inline-start-spacing: var(--forge-dialog-inline-start-spacing, var(--_dialog-spacing));\n  --_dialog-inline-end-spacing: var(--forge-dialog-inline-end-spacing, var(--_dialog-spacing));\n  --_dialog-padding: var(--forge-dialog-padding, 0);\n  --_dialog-width: var(--forge-dialog-width, fit-content);\n  --_dialog-height: var(--forge-dialog-height, fit-content);\n  --_dialog-min-width: var(--forge-dialog-min-width, 0);\n  --_dialog-max-width: var(--forge-dialog-max-width, calc(100% - var(--forge-spacing-xxlarge, 48px)));\n  --_dialog-min-height: var(--forge-dialog-min-height, 0);\n  --_dialog-max-height: var(--forge-dialog-max-height, calc(100% - var(--forge-spacing-xxlarge, 48px)));\n  --_dialog-z-index: var(--forge-dialog-z-index, var(--forge-z-index-dialog, 8));\n  --_dialog-move-handle-color: var(--forge-dialog-move-handle-color, currentColor);\n  --_dialog-move-handle-size: var(--forge-dialog-move-handle-size, 24px);\n  --_dialog-move-handle-hover-cursor: var(--forge-dialog-move-handle-hover-cursor, grab);\n  --_dialog-move-handle-active-cursor: var(--forge-dialog-move-handle-active-cursor, grabbing);\n  --_dialog-move-handle-spacing: var(--forge-dialog-move-handle-spacing, calc(var(--forge-spacing-xxsmall, 4px) * -1) 0 0);\n  --_dialog-move-transition-duration: var(--forge-dialog-move-transition-duration, var(--forge-animation-duration-short4, 200ms));\n  --_dialog-move-transition-easing: var(--forge-dialog-move-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_dialog-moving-opacity: var(--forge-dialog-moving-opacity, 0.54);\n  --_dialog-enter-animation-duration: var(--forge-dialog-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_dialog-enter-animation-easing: var(--forge-dialog-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_dialog-exit-animation-duration: var(--forge-dialog-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));\n  --_dialog-exit-animation-easing: var(--forge-dialog-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));\n  --_dialog-zoom-opacity: var(--forge-dialog-zoom-opacity, 0);\n  --_dialog-zoom-scale: var(--forge-dialog-zoom-scale, 0.8);\n  --_dialog-fade-opacity: var(--forge-dialog-fade-opacity, 0);\n  --_dialog-slide-opacity: var(--forge-dialog-slide-opacity, 0);\n  --_dialog-slide-translate: var(--forge-dialog-slide-translate, 0 -30%);\n  --_dialog-backdrop-opacity: var(--forge-dialog-backdrop-opacity, var(--forge-backdrop-opacity, 0.54));\n  --_dialog-nonmodal-elevation: var(--forge-dialog-nonmodal-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));\n  --_dialog-fullscreen-enter-animation-duration: var(--forge-dialog-fullscreen-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_dialog-fullscreen-exit-animation-duration: var(--forge-dialog-fullscreen-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));\n  --_dialog-position-x: var(--forge-dialog-position-x, 0);\n  --_dialog-position-y: var(--forge-dialog-position-y, 0);\n  --_dialog-preset-sheet-enter-animation-duration: var(--forge-dialog-preset-sheet-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_dialog-preset-sheet-exit-animation-duration: var(--forge-dialog-preset-sheet-exit-animation-duration, var(--forge-animation-duration-short3, 150ms));\n  --_backdrop-background: var(--forge-backdrop-background, #000);\n  --_backdrop-opacity: var(--forge-backdrop-opacity, 0.54);\n  --_backdrop-z-index: var(--forge-backdrop-z-index, var(--forge-z-index-backdrop, 7));\n  --_backdrop-enter-animation-duration: var(--forge-backdrop-enter-animation-duration, var(--forge-animation-duration-short4, 200ms));\n  --_backdrop-enter-animation-easing: var(--forge-backdrop-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_backdrop-exit-animation-duration: var(--forge-backdrop-exit-animation-duration, var(--forge-animation-duration-short1, 50ms));\n  --_backdrop-exit-animation-easing: var(--forge-backdrop-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));\n  --forge-theme-surface: var(--forge-theme-surface-bright, #ffffff);\n}\n\n.forge-dialog {\n  position: fixed;\n  inset: 0;\n  z-index: var(--_dialog-z-index);\n  background-color: transparent;\n  color: inherit;\n  border: none;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0;\n  overflow: visible;\n  max-width: 100%;\n  max-height: 100%;\n  box-sizing: border-box;\n  position: absolute;\n  inset: 0;\n  display: flex;\n  background: var(--_dialog-background);\n  box-shadow: var(--_dialog-elevation);\n  z-index: var(--_dialog-z-index);\n  overflow: hidden;\n  border-radius: var(--_dialog-shape);\n  margin-block-start: var(--_dialog-block-start-spacing);\n  margin-block-end: var(--_dialog-block-end-spacing);\n  margin-inline-start: var(--_dialog-inline-start-spacing);\n  margin-inline-end: var(--_dialog-inline-end-spacing);\n  padding: var(--_dialog-padding);\n  width: var(--_dialog-width);\n  height: var(--_dialog-height);\n  min-width: var(--_dialog-min-width);\n  max-width: var(--_dialog-max-width);\n  min-height: var(--_dialog-min-height);\n  max-height: var(--_dialog-max-height);\n  box-sizing: border-box;\n  animation-duration: var(--_dialog-exit-animation-duration);\n  animation-timing-function: var(--_dialog-exit-animation-easing);\n  position: fixed;\n  transition-property: display, opacity, overlay, scale;\n  transition-behavior: allow-discrete;\n}\n\n.forge-dialog > forge-scaffold {\n  height: auto;\n}\n\n.forge-dialog--fullscreen {\n  --_dialog-enter-animation-duration: var(--_dialog-fullscreen-enter-animation-duration);\n  --_dialog-exit-animation-duration: var(--_dialog-fullscreen-exit-animation-duration);\n  height: 100%;\n  width: 100%;\n  max-width: none;\n  max-height: none;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.forge-dialog:not(:modal) {\n  --_dialog-elevation: var(--_dialog-nonmodal-elevation);\n  pointer-events: all;\n}\n\n.forge-dialog--moveable {\n  user-select: none;\n  transition-property: opacity;\n  transition-duration: var(--_dialog-move-transition-duration);\n  transition-timing-function: var(--_dialog-move-transition-easing);\n}\n\n.forge-dialog--moved {\n  margin: 0;\n}\n\n.forge-dialog--moving {\n  opacity: var(--_dialog-moving-opacity);\n}\n\n.forge-dialog__move-handle {\n  fill: var(--_dialog-move-handle-color);\n  height: var(--_dialog-move-handle-size);\n  width: var(--_dialog-move-handle-size);\n  margin: var(--_dialog-move-handle-spacing);\n  touch-action: none;\n}\n\n.forge-dialog__move-handle:hover {\n  cursor: var(--_dialog-move-handle-hover-cursor);\n}\n\n.forge-dialog__move-handle:active {\n  cursor: var(--_dialog-move-handle-active-cursor);\n}\n\n.forge-dialog__move-handle-container {\n  position: absolute;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\n\n.forge-dialog--top {\n  --_dialog-block-start-spacing: var(--forge-dialog-block-start-spacing, 0);\n  top: 0;\n  bottom: auto;\n}\n\n.forge-dialog--top-right {\n  --_dialog-spacing: var(--forge-dialog-spacing, 0);\n  top: 0;\n  left: auto;\n  right: 0;\n  bottom: auto;\n}\n\n.forge-dialog--top-left {\n  --_dialog-spacing: var(--forge-dialog-spacing, 0);\n  top: 0;\n  left: 0;\n  right: auto;\n  bottom: auto;\n}\n\n.forge-dialog--bottom {\n  --_dialog-block-end-spacing: var(--forge-dialog-block-end-spacing, 0);\n  top: auto;\n  bottom: 0;\n}\n\n.forge-dialog--bottom-right {\n  --_dialog-spacing: var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: auto;\n  right: 0;\n  bottom: 0;\n}\n\n.forge-dialog--bottom-left {\n  --_dialog-spacing: var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: 0;\n  right: auto;\n  bottom: 0;\n}\n\n.forge-dialog--right {\n  --_dialog-spacing: var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: auto;\n  right: 0;\n  bottom: auto;\n}\n\n.forge-dialog--left {\n  --_dialog-spacing: var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: 0;\n  right: auto;\n  bottom: auto;\n}\n\n.forge-dialog--custom {\n  margin: 0;\n  top: var(--_dialog-position-x);\n  left: var(--_dialog-position-y);\n}\n\n.forge-dialog--bottom-sheet {\n  --_dialog-enter-animation-duration: var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration: var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width: var(--forge-dialog-max-width, none);\n  --_dialog-max-height: var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  --_dialog-slide-translate: var(--forge-dialog-slide-translate, 0 100%);\n}\n\n.forge-dialog--bottom-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--bottom-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--bottom-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--bottom-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--left-sheet {\n  --_dialog-enter-animation-duration: var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration: var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width: var(--forge-dialog-max-width, none);\n  --_dialog-max-height: var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  height: 100%;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  --_dialog-slide-translate: var(--forge-dialog-slide-translate, -100% 0);\n}\n\n.forge-dialog--left-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--left-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--left-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--left-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--right-sheet {\n  --_dialog-enter-animation-duration: var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration: var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width: var(--forge-dialog-max-width, none);\n  --_dialog-max-height: var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  height: 100%;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  --_dialog-slide-translate: var(--forge-dialog-slide-translate, 100% 0);\n}\n\n.forge-dialog--right-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--right-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--right-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--right-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--top-sheet {\n  --_dialog-enter-animation-duration: var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration: var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width: var(--forge-dialog-max-width, none);\n  --_dialog-max-height: var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  --_dialog-slide-translate: var(--forge-dialog-slide-translate, 0 -100%);\n}\n\n.forge-dialog--top-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--top-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--top-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--top-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog::backdrop {\n  --forge-backdrop-opacity: var(--_backdrop-opacity);\n  --forge-backdrop-enter-animation-duration: var(--_backdrop-enter-animation-duration);\n  --forge-backdrop-enter-animation-easing: var(--_backdrop-enter-animation-easing);\n  --forge-backdrop-exit-animation-duration: var(--_backdrop-exit-animation-duration);\n  --forge-backdrop-exit-animation-easing: var(--_backdrop-exit-animation-easing);\n  position: absolute;\n  inset: 0;\n  z-index: var(--_backdrop-z-index);\n  background: var(--_backdrop-background);\n  opacity: 0;\n  animation-fill-mode: forwards;\n  transition-property: display, opacity, overlay;\n}\n\n.forge-dialog[open] {\n  opacity: 1;\n  scale: 1;\n  transition-duration: var(--_dialog-enter-animation-duration);\n  transition-timing-function: var(--_dialog-enter-animation-easing);\n}\n\n@starting-style {\n  .forge-dialog[open] {\n    opacity: var(--_dialog-zoom-opacity);\n    scale: var(--_dialog-zoom-scale);\n  }\n}\n.forge-dialog[open]::backdrop {\n  opacity: var(--_backdrop-opacity);\n  transition-duration: var(--_backdrop-enter-animation-duration);\n  transition-timing-function: var(--_backdrop-enter-animation-easing);\n}\n\n@starting-style {\n  .forge-dialog[open]::backdrop {\n    opacity: 0;\n  }\n}\n.forge-dialog:not([open]) {\n  animation-duration: var(--_dialog-enter-animation-duration);\n  animation-timing-function: var(--_dialog-enter-animation-easing);\n  display: none;\n  opacity: var(--_dialog-zoom-opacity);\n  scale: var(--_dialog-zoom-scale);\n  transition-duration: var(--_dialog-exit-animation-duration);\n  transition-timing-function: var(--_dialog-exit-animation-easing);\n}\n\n.forge-dialog:not([open])::backdrop {\n  transition-duration: var(--_backdrop-exit-animation-duration);\n  transition-timing-function: var(--_backdrop-exit-animation-easing);\n}\n\n.forge-dialog--animation-fade.forge-dialog {\n  transition-property: display, opacity, overlay;\n}\n\n@starting-style {\n  .forge-dialog--animation-fade.forge-dialog[open] {\n    opacity: var(--_dialog-fade-opacity);\n  }\n}\n.forge-dialog--animation-fade.forge-dialog:not([open]) {\n  opacity: var(--_dialog-fade-opacity);\n  scale: 1;\n}\n\n.forge-dialog--animation-slide.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--animation-slide.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--animation-slide.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--animation-slide.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--animation-none {\n  --_dialog-enter-animation-duration: var(--forge-dialog-enter-animation-duration, 0s);\n  --_dialog-exit-animation-duration: var(--forge-dialog-exit-animation-duration, 0s);\n  --_backdrop-enter-animation-duration: var(--forge-backdrop-enter-animation-duration, 0s);\n  --_backdrop-exit-animation-duration: var(--forge-backdrop-exit-animation-duration, 0s);\n}\n\n@media (prefers-reduced-motion) {\n  .forge-dialog.forge-dialog {\n    transition-property: display, opacity, overlay;\n  }\n  @starting-style {\n    .forge-dialog.forge-dialog[open] {\n      opacity: var(--_dialog-fade-opacity);\n    }\n  }\n  .forge-dialog.forge-dialog:not([open]) {\n    opacity: var(--_dialog-fade-opacity);\n    scale: 1;\n  }\n}\n:host {\n  display: contents;\n}\n\ndialog.forge-dialog:not(.forge-dialog--fullscreen) {\n  height: var(--forge-ai-modal-height, 80vh);\n  width: var(--forge-ai-modal-width, 80vw);\n  border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n}";
 export {
   styles as default
 };