@tylertech/forge-ai 0.2.0 → 0.3.1

package/dist/ai-sidebar/ai-sidebar.mjs

@@ -18,7 +18,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 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 _AiSidebarComponent_instances, handleTransitionEnd_fn, dispatchEvent_fn;
+var _AiSidebarComponent_instances, handleContainerTransitionEnd_fn, handleDrawerTransitionEnd_fn, dispatchEvent_fn;
 const AiSidebarComponentTagName = "forge-ai-sidebar";
 let AiSidebarComponent = class extends LitElement {
   constructor() {
@@ -26,23 +26,32 @@ let AiSidebarComponent = class extends LitElement {
     __privateAdd(this, _AiSidebarComponent_instances);
     this.open = true;
     this._closing = false;
+    this._containerClosing = false;
   }
   render() {
-    const classes = {
+    const containerClasses = {
+      "animation-container": true,
+      "animation-container--open": this.open && !this._containerClosing,
+      "animation-container--closing": this._containerClosing,
+      "animation-container--closed": !this.open && !this._containerClosing
+    };
+    const drawerClasses = {
       "forge-drawer": true,
       "forge-drawer--right": true,
       "forge-drawer--closing": this._closing,
       "forge-drawer--closed": !this.open && !this._closing
     };
     return html`
-      <aside
-        class=${classMap(classes)}
-        ?open=${this.open}
-        role="complementary"
-        aria-hidden=${!this.open}
-        @transitionend=${__privateMethod(this, _AiSidebarComponent_instances, handleTransitionEnd_fn)}>
-        <slot></slot>
-      </aside>
+      <div class=${classMap(containerClasses)} @transitionend=${__privateMethod(this, _AiSidebarComponent_instances, handleContainerTransitionEnd_fn)}>
+        <aside
+          class=${classMap(drawerClasses)}
+          ?open=${this.open}
+          role="complementary"
+          aria-hidden=${!this.open}
+          @transitionend=${__privateMethod(this, _AiSidebarComponent_instances, handleDrawerTransitionEnd_fn)}>
+          <slot></slot>
+        </aside>
+      </div>
     `;
   }
   /**
@@ -51,6 +60,7 @@ let AiSidebarComponent = class extends LitElement {
   show() {
     if (!this.open) {
       this._closing = false;
+      this._containerClosing = false;
       this.open = true;
       __privateMethod(this, _AiSidebarComponent_instances, dispatchEvent_fn).call(this, "forge-ai-sidebar-open");
     }
@@ -59,8 +69,9 @@ let AiSidebarComponent = class extends LitElement {
    * Closes the sidebar.
    */
   close() {
-    if (this.open && !this._closing) {
+    if (this.open && !this._closing && !this._containerClosing) {
       this._closing = true;
+      this._containerClosing = true;
     }
   }
   /**
@@ -75,8 +86,13 @@ let AiSidebarComponent = class extends LitElement {
   }
 };
 _AiSidebarComponent_instances = /* @__PURE__ */ new WeakSet();
-handleTransitionEnd_fn = function() {
-  if (this._closing) {
+handleContainerTransitionEnd_fn = function(evt) {
+  if (evt.target === evt.currentTarget && this._containerClosing) {
+    this._containerClosing = false;
+  }
+};
+handleDrawerTransitionEnd_fn = function(evt) {
+  if (evt.target === evt.currentTarget && this._closing) {
     this.open = false;
     this._closing = false;
     __privateMethod(this, _AiSidebarComponent_instances, dispatchEvent_fn).call(this, "forge-ai-sidebar-close");
@@ -96,6 +112,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], AiSidebarComponent.prototype, "_closing", 2);
+__decorateClass([
+  state()
+], AiSidebarComponent.prototype, "_containerClosing", 2);
 AiSidebarComponent = __decorateClass([
   customElement(AiSidebarComponentTagName)
 ], AiSidebarComponent);

package/dist/ai-sidebar/ai-sidebar.scss.mjs

@@ -1,4 +1,4 @@
-const styles = "/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n.forge-drawer {\n  --_drawer-background: var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));\n  --_drawer-border-color: var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));\n  --_drawer-width: var(--forge-drawer-width, 256px);\n  --_drawer-border-width: var(--forge-drawer-border-width, var(--forge-border-thin, 1px));\n  --_drawer-transition-duration: var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_drawer-transition-easing: var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_drawer-transition-duration-close: var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms));\n}\n\n.forge-drawer {\n  width: var(--_drawer-width);\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: auto 1fr auto;\n  background-color: var(--_drawer-background);\n  border-color: var(--_drawer-border-color);\n  transition-property: transform;\n  transition-duration: var(--_drawer-transition-duration);\n  transition-timing-function: var(--_drawer-transition-easing);\n  border-right-width: var(--_drawer-border-width);\n  border-right-style: solid;\n}\n\n.forge-drawer--closing {\n  transform: translateX(-100%);\n  left: 0;\n  z-index: var(--forge-z-index-surface, 1);\n  position: absolute;\n  top: 0;\n  right: 0;\n  transition-duration: var(--_drawer-transition-duration-close);\n}\n\n.forge-drawer--closed {\n  transform: translateX(-100%);\n  left: 0;\n  width: 0;\n  border: none;\n}\n\n.forge-drawer--right {\n  border-left-width: var(--_drawer-border-width);\n  border-left-style: solid;\n  border-right: none;\n}\n\n.forge-drawer--right.forge-drawer--closing {\n  transform: translateX(100%);\n  right: 0;\n  left: auto;\n  z-index: var(--forge-z-index-surface, 1);\n  position: absolute;\n  top: 0;\n  right: 0;\n  transition-duration: var(--_drawer-transition-duration-close);\n}\n\n.forge-drawer--right.forge-drawer--closed {\n  transform: translateX(100%);\n  right: 0;\n  left: auto;\n  width: 0;\n  border: none;\n}\n\n.forge-drawer--mini {\n  width: var(--_mini-drawer-width);\n  z-index: var(--forge-z-index-surface, 1);\n  transition: width var(--_mini-drawer-transition-duration) var(--_mini-drawer-transition-easing);\n}\n\n:host {\n  display: block;\n  width: auto;\n  height: 100%;\n  overflow: hidden;\n}\n\n.forge-drawer {\n  --forge-drawer-width: 420px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}";
+const styles = "/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n.forge-drawer {\n  --_drawer-background: var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));\n  --_drawer-border-color: var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));\n  --_drawer-width: var(--forge-drawer-width, 256px);\n  --_drawer-border-width: var(--forge-drawer-border-width, var(--forge-border-thin, 1px));\n  --_drawer-transition-duration: var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_drawer-transition-easing: var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_drawer-transition-duration-close: var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms));\n}\n\n.forge-drawer {\n  width: var(--_drawer-width);\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: auto 1fr auto;\n  background-color: var(--_drawer-background);\n  border-color: var(--_drawer-border-color);\n  transition-property: transform;\n  transition-duration: var(--_drawer-transition-duration);\n  transition-timing-function: var(--_drawer-transition-easing);\n  border-right-width: var(--_drawer-border-width);\n  border-right-style: solid;\n}\n\n.forge-drawer--closing {\n  transform: translateX(-100%);\n  left: 0;\n  z-index: var(--forge-z-index-surface, 1);\n  position: absolute;\n  top: 0;\n  right: 0;\n  transition-duration: var(--_drawer-transition-duration-close);\n}\n\n.forge-drawer--closed {\n  transform: translateX(-100%);\n  left: 0;\n  width: 0;\n  border: none;\n}\n\n.forge-drawer--right {\n  border-left-width: var(--_drawer-border-width);\n  border-left-style: solid;\n  border-right: none;\n}\n\n.forge-drawer--right.forge-drawer--closing {\n  transform: translateX(100%);\n  right: 0;\n  left: auto;\n  z-index: var(--forge-z-index-surface, 1);\n  position: absolute;\n  top: 0;\n  right: 0;\n  transition-duration: var(--_drawer-transition-duration-close);\n}\n\n.forge-drawer--right.forge-drawer--closed {\n  transform: translateX(100%);\n  right: 0;\n  left: auto;\n  width: 0;\n  border: none;\n}\n\n.forge-drawer--mini {\n  width: var(--_mini-drawer-width);\n  z-index: var(--forge-z-index-surface, 1);\n  transition: width var(--_mini-drawer-transition-duration) var(--_mini-drawer-transition-easing);\n}\n\n:host {\n  display: block;\n  width: auto;\n  height: 100%;\n  overflow: hidden;\n}\n\n.animation-container {\n  --forge-drawer-width: 420px; /* Default value, can be overridden */\n  width: var(--forge-drawer-width);\n  height: 100%;\n  position: relative;\n  transition: width 250ms cubic-bezier(0.2, 0, 0, 1);\n  overflow: hidden;\n}\n.animation-container--closed {\n  width: 0;\n}\n.animation-container--closing {\n  width: 0;\n}\n.animation-container--open {\n  width: var(--forge-drawer-width);\n}\n\n.forge-drawer {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  width: var(--forge-drawer-width);\n  height: 100%;\n  position: absolute;\n  top: 0;\n  right: 0;\n}";
 export {
   styles as default
 };

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

@@ -4,14 +4,14 @@ declare global {
         'forge-ai-suggestions': AiSuggestionsComponent;
     }
     interface HTMLElementEventMap {
-        'forge-ai-suggestions-select': CustomEvent<AiSuggestionsEventData>;
+        'forge-ai-suggestions-select': CustomEvent<ForgeAiSuggestionsEventData>;
     }
 }
 export interface Suggestion {
     text: string;
     value: string;
 }
-export interface AiSuggestionsEventData {
+export interface ForgeAiSuggestionsEventData {
     text: string;
     value: string;
 }
@@ -23,7 +23,7 @@ export declare const AiSuggestionsComponentTagName: keyof HTMLElementTagNameMap;
  * @state inline - The suggestions are displayed inline.
  * @state block - The suggestions are displayed as blocks.
  *
- * @event {CustomEvent<AiSuggestionsEventData>} forge-ai-suggestions-select - Fired when a suggestion is selected.
+ * @event {CustomEvent<ForgeAiSuggestionsEventData>} forge-ai-suggestions-select - Fired when a suggestion is selected.
  */
 export declare class AiSuggestionsComponent extends LitElement {
     #private;

package/dist/ai-suggestions/ai-suggestions.mjs

@@ -60,7 +60,7 @@ setCssState_fn = function() {
   toggleState(__privateGet(this, _internals), "block", this.variant === "block");
 };
 suggestionButtons_get = function() {
-  return this.suggestions.map(
+  return this.suggestions?.map(
     (suggestion) => html`<button
           class="forge-button forge-button--tonal suggestion"
           @click=${() => this._handleSuggestionClick(suggestion)}>
@@ -82,7 +82,7 @@ blockLayout_get = function() {
 };
 AiSuggestionsComponent.styles = unsafeCSS(styles);
 __decorateClass([
-  property({ type: Array })
+  property({ type: Array, attribute: false })
 ], AiSuggestionsComponent.prototype, "suggestions", 2);
 __decorateClass([
   property({ type: String, attribute: "variant" })

package/dist/ai-thinking-indicator/ai-thinking-indicator.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-thinking-indicator': AiThinkingIndicatorComponent;
+    }
+}
+export declare const AiThinkingIndicatorComponentTagName: keyof HTMLElementTagNameMap;
+/**
+ * @tag forge-ai-thinking-indicator
+ *
+ * @summary A thinking indicator component that displays three animated dots to show that the system is processing or awaiting a response.
+ *
+ * @description
+ * The AI Thinking Indicator component provides a visual cue that the system is working on a response.
+ * It displays three dots that animate in sequence from left to right, then bounce in a wave pattern,
+ * creating an engaging loading animation perfect for chat interfaces.
+ */
+export declare class AiThinkingIndicatorComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    render(): TemplateResult;
+}

package/dist/ai-thinking-indicator/ai-thinking-indicator.mjs

@@ -0,0 +1,41 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import styles from "./ai-thinking-indicator.scss.mjs";
+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 = decorator(result) || 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 _dotsTemplate;
+const AiThinkingIndicatorComponentTagName = "forge-ai-thinking-indicator";
+let AiThinkingIndicatorComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _dotsTemplate, html`
+    <div class="dot dot-1"></div>
+    <div class="dot dot-2"></div>
+    <div class="dot dot-3"></div>
+  `);
+  }
+  render() {
+    return html`<div class="thinking-indicator">${__privateGet(this, _dotsTemplate)}</div>`;
+  }
+};
+_dotsTemplate = /* @__PURE__ */ new WeakMap();
+AiThinkingIndicatorComponent.styles = unsafeCSS(styles);
+AiThinkingIndicatorComponent = __decorateClass([
+  customElement(AiThinkingIndicatorComponentTagName)
+], AiThinkingIndicatorComponent);
+export {
+  AiThinkingIndicatorComponent,
+  AiThinkingIndicatorComponentTagName
+};

package/dist/ai-thinking-indicator/ai-thinking-indicator.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:host {\n  --forge-ai-thinking-indicator-dot-color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n  --forge-ai-thinking-indicator-dot-size: 6px;\n  --forge-ai-thinking-indicator-gap: var(--forge-spacing-xxsmall, 4px);\n  --forge-ai-thinking-indicator-animation-duration: 2s;\n  display: inline-block;\n  box-sizing: border-box;\n}\n\n.thinking-indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--forge-ai-thinking-indicator-gap);\n  height: calc(var(--forge-ai-thinking-indicator-dot-size) * 2);\n}\n\n.dot {\n  width: var(--forge-ai-thinking-indicator-dot-size);\n  height: var(--forge-ai-thinking-indicator-dot-size);\n  background-color: var(--forge-ai-thinking-indicator-dot-color);\n  border-radius: 50%;\n  opacity: 0;\n  transform: scale(0.8) translateY(0);\n  animation: thinking-animation var(--forge-ai-thinking-indicator-animation-duration) ease-in-out infinite;\n}\n\n.dot-1 {\n  animation-delay: 0s;\n}\n\n.dot-2 {\n  animation-delay: 0.15s;\n}\n\n.dot-3 {\n  animation-delay: 0.3s;\n}\n\n@keyframes thinking-animation {\n  0% {\n    opacity: 0;\n    transform: scale(0.8) translateY(0);\n  }\n  10% {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  20% {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  30% {\n    opacity: 1;\n    transform: scale(1.2) translateY(-4px);\n  }\n  40% {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1.1) translateY(-2px);\n  }\n  60% {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  70% {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  80% {\n    opacity: 0.7;\n    transform: scale(0.9) translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(0.8) translateY(0);\n  }\n}\n/* Respect user's reduced motion preference */\n@media (prefers-reduced-motion: reduce) {\n  .dot {\n    animation: thinking-animation-reduced var(--forge-ai-thinking-indicator-animation-duration) ease-in-out infinite;\n  }\n  @keyframes thinking-animation-reduced {\n    0%, 100% {\n      opacity: 0.3;\n    }\n    50% {\n      opacity: 1;\n    }\n  }\n}";
+export {
+  styles as default
+};

package/dist/ai-thinking-indicator/index.d.ts

@@ -0,0 +1 @@
+export * from './ai-thinking-indicator';

package/dist/ai-thinking-indicator/index.mjs

@@ -0,0 +1,5 @@
+import { AiThinkingIndicatorComponent, AiThinkingIndicatorComponentTagName } from "./ai-thinking-indicator.mjs";
+export {
+  AiThinkingIndicatorComponent,
+  AiThinkingIndicatorComponentTagName
+};

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

@@ -4,7 +4,7 @@ declare global {
         'forge-ai-threads': AiThreadsComponent;
     }
     interface HTMLElementEventMap {
-        'forge-ai-threads-select': CustomEvent<AiThreadsSelectEventData>;
+        'forge-ai-threads-select': CustomEvent<ForgeAiThreadsSelectEventData>;
         'forge-ai-threads-new-chat': CustomEvent;
         'forge-ai-threads-clear-history': CustomEvent;
     }
@@ -15,7 +15,7 @@ export interface Thread {
     time: string;
     date: Date;
 }
-export interface AiThreadsSelectEventData {
+export interface ForgeAiThreadsSelectEventData {
     id: string;
     title: string;
 }
@@ -23,7 +23,7 @@ export declare const AiThreadsComponentTagName: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-ai-threads
  *
- * @event {CustomEvent<AiThreadsSelectEventData>} forge-ai-threads-select - Fired when a thread is selected.
+ * @event {CustomEvent<ForgeAiThreadsSelectEventData>} forge-ai-threads-select - Fired when a thread is selected.
  * @event {CustomEvent} forge-ai-threads-new-chat - Fired when the new chat button is clicked.
  * @event {CustomEvent} forge-ai-threads-clear-history - Fired when the clear history button is clicked.
  */

package/dist/ai-voice-input/ai-voice-input.d.ts

@@ -44,7 +44,7 @@ export declare const AiVoiceInputComponentTagName: keyof HTMLElementTagNameMap;
 /**
  * Event detail interface for the speech recognition result event.
  */
-export interface AiVoiceInputResultEvent {
+export interface ForgeAiVoiceInputResultEvent {
     /** The recognized speech text */
     transcript: string;
     /** Confidence score of the recognition result (0-1) */

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

@@ -1,4 +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}";
+const styles = ":host {\n  display: contents;\n}\n\n.ai-overlay {\n  position: fixed;\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/popover.mjs

@@ -17,7 +17,7 @@ let ForgeAiPopoverComponent = class extends LitElement {
     super(...arguments);
     this.anchor = null;
     this.placement = "bottom-start";
-    this.flip = true;
+    this.flip = false;
     this.shift = false;
     this.open = false;
     this._onOverlayToggle = (event) => {

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export * from './ai-response-message';
 export * from './ai-sidebar';
 export * from './ai-sidebar-chat';
 export * from './ai-suggestions';
+export * from './ai-thinking-indicator';
 export * from './ai-threads';
 export * from './ai-user-message';
 export * from './ai-voice-input';

package/dist/index.mjs

@@ -17,7 +17,7 @@ import { AiDialogComponent, AiDialogComponentTagName } from "./ai-dialog/ai-dial
 import { AiEmbeddedChatComponent, AiEmbeddedChatComponentTagName } from "./ai-embedded-chat/ai-embedded-chat.mjs";
 import { AiEmptyStateComponent, AiEmptyStateComponentTagName } from "./ai-empty-state/ai-empty-state.mjs";
 import { AiFabComponent, AiFabComponentTagName } from "./ai-fab/ai-fab.mjs";
-import { ForgeAiFilePickerComponent } from "./ai-file-picker/ai-file-picker.mjs";
+import { AiFilePickerComponent } from "./ai-file-picker/ai-file-picker.mjs";
 import { AiFloatingChatComponent, AiFloatingChatComponentTagName } from "./ai-floating-chat/ai-floating-chat.mjs";
 import { AiGradientContainerComponent, AiGradientContainerComponentTagName } from "./ai-gradient-container/ai-gradient-container.mjs";
 import { AiIconComponent, AiIconComponentTagName } from "./ai-icon/ai-icon.mjs";
@@ -29,6 +29,7 @@ import { AiReasoningHeaderComponent, AiReasoningHeaderComponentTagName } from ".
 import { AiResponseMessageComponent, AiResponseMessageComponentTagName } from "./ai-response-message/ai-response-message.mjs";
 import { AiSidebarComponent, AiSidebarComponentTagName } from "./ai-sidebar/ai-sidebar.mjs";
 import { AiSidebarChatComponent, AiSidebarChatComponentTagName } from "./ai-sidebar-chat/ai-sidebar-chat.mjs";
+import { AiThinkingIndicatorComponent, AiThinkingIndicatorComponentTagName } from "./ai-thinking-indicator/ai-thinking-indicator.mjs";
 import { AiThreadsComponent, AiThreadsComponentTagName } from "./ai-threads/ai-threads.mjs";
 import { AiUserMessageComponent, AiUserMessageComponentTagName } from "./ai-user-message/ai-user-message.mjs";
 import { AiVoiceInputComponent, AiVoiceInputComponentTagName } from "./ai-voice-input/ai-voice-input.mjs";
@@ -53,6 +54,7 @@ export {
   AiEmptyStateComponentTagName,
   AiFabComponent,
   AiFabComponentTagName,
+  AiFilePickerComponent,
   AiFloatingChatComponent,
   AiFloatingChatComponentTagName,
   AiGradientContainerComponent,
@@ -74,6 +76,8 @@ export {
   AiSidebarComponentTagName,
   AiSuggestionsComponent,
   AiSuggestionsComponentTagName,
+  AiThinkingIndicatorComponent,
+  AiThinkingIndicatorComponentTagName,
   AiThreadsComponent,
   AiThreadsComponentTagName,
   AiUserMessageComponent,
@@ -84,7 +88,6 @@ export {
   ForgeAiDropdownMenuItemComponent,
   ForgeAiDropdownMenuItemGroupComponent,
   ForgeAiDropdownMenuSeparatorComponent,
-  ForgeAiFilePickerComponent,
   ReasoningContentComponent,
   ReasoningContentComponentTagName,
   ThoughtBaseComponent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge-ai",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "A library of Tyler Forge™ AI chat interface web components.",
   "license": "Apache-2.0",
   "author": "Tyler Technologies, Inc.",