@tylertech/forge-ai 0.14.0 → 0.15.1

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

@@ -1,5 +1,6 @@
 import { unsafeCSS, LitElement, html } from "lit";
 import { property, query, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import styles from "./ai-edit-thread.scss.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -15,15 +16,17 @@ var __decorateClass = (decorators, target, key, kind) => {
   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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _AiEditThreadComponent_instances, handleKeyDown_fn, handleFocusOut_fn, handleSave_fn, handleCancel_fn;
+var _AiEditThreadComponent_instances, handleKeyDown_fn, handleFocusOut_fn, handleSave_fn, handleCancel_fn, buttonClasses_get;
 const AiEditThreadComponentTagName = "forge-ai-edit-thread";
 let AiEditThreadComponent = class extends LitElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _AiEditThreadComponent_instances);
     this.value = "";
+    this.density = "small";
   }
   firstUpdated() {
     if (this._inputElement) {
@@ -44,19 +47,13 @@ let AiEditThreadComponent = class extends LitElement {
             @keydown=${__privateMethod(this, _AiEditThreadComponent_instances, handleKeyDown_fn)} />
         </div>
         <div class="edit-thread-actions">
-          <button
-            class="forge-icon-button forge-icon-button--squared forge-icon-button--small"
-            @click=${__privateMethod(this, _AiEditThreadComponent_instances, handleCancel_fn)}
-            aria-label="Cancel">
+          <button class=${classMap(__privateGet(this, _AiEditThreadComponent_instances, buttonClasses_get))} @click=${__privateMethod(this, _AiEditThreadComponent_instances, handleCancel_fn)} aria-label="Cancel">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
               <path
                 d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
             </svg>
           </button>
-          <button
-            class="forge-icon-button forge-icon-button--squared forge-icon-button--small"
-            @click=${__privateMethod(this, _AiEditThreadComponent_instances, handleSave_fn)}
-            aria-label="Save">
+          <button class=${classMap(__privateGet(this, _AiEditThreadComponent_instances, buttonClasses_get))} @click=${__privateMethod(this, _AiEditThreadComponent_instances, handleSave_fn)} aria-label="Save">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
               <path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
             </svg>
@@ -111,6 +108,13 @@ handleCancel_fn = function() {
   });
   this.dispatchEvent(event);
 };
+buttonClasses_get = function() {
+  return {
+    "forge-icon-button": true,
+    "forge-icon-button--squared": true,
+    "forge-icon-button--small": this.density === "small"
+  };
+};
 AiEditThreadComponent.styles = unsafeCSS(styles);
 __decorateClass([
   property({ type: Object })
@@ -118,6 +122,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], AiEditThreadComponent.prototype, "value", 2);
+__decorateClass([
+  property()
+], AiEditThreadComponent.prototype, "density", 2);
 __decorateClass([
   query(".edit-input")
 ], AiEditThreadComponent.prototype, "_inputElement", 2);

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

@@ -4,16 +4,22 @@ declare global {
         'forge-ai-error-message': AiErrorMessageComponent;
     }
 }
+export type ErrorMessageDensity = 'medium' | 'small';
 export declare const AiErrorMessageComponentTagName: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-ai-error-message
  *
  * @summary Displays error messages using Forge inline message banner style.
  *
- * @slot title - The error title text
+ * @property {ErrorMessageDensity} density - The density of the banner. `'small'` tightens the padding, gap, and icon for use in compact surfaces like lists and panels (default: 'medium')
+ *
+ * @slot title - The error title text. When empty the banner collapses to a single row alongside the icon.
  * @slot - The error message content
  */
 export declare class AiErrorMessageComponent extends LitElement {
+    #private;
     static styles: CSSResult;
+    density: ErrorMessageDensity;
+    private _titleNodes;
     render(): TemplateResult;
 }

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

@@ -1,16 +1,32 @@
 import { unsafeCSS, LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { property, queryAssignedNodes, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import styles from "./ai-error-message.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 = decorator(result) || result;
+      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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _AiErrorMessageComponent_instances, handleTitleSlotChange_fn, title_get;
 const AiErrorMessageComponentTagName = "forge-ai-error-message";
 let AiErrorMessageComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _AiErrorMessageComponent_instances);
+    this.density = "medium";
+  }
   render() {
     return html`
       <div class="forge-inline-message">
@@ -25,9 +41,7 @@ let AiErrorMessageComponent = class extends LitElement {
           <path fill="none" d="M0 0h24v24H0z" />
           <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z" />
         </svg>
-        <div class="forge-inline-message__title">
-          <slot name="title"></slot>
-        </div>
+        ${__privateGet(this, _AiErrorMessageComponent_instances, title_get)}
         <div class="forge-inline-message__content">
           <slot></slot>
         </div>
@@ -35,7 +49,28 @@ let AiErrorMessageComponent = class extends LitElement {
     `;
   }
 };
+_AiErrorMessageComponent_instances = /* @__PURE__ */ new WeakSet();
+handleTitleSlotChange_fn = function() {
+  this.requestUpdate();
+};
+title_get = function() {
+  const classes = classMap({
+    "forge-inline-message__title": true,
+    "forge-inline-message__title--empty": this._titleNodes.length === 0
+  });
+  return html`
+      <div class=${classes}>
+        <slot name="title" @slotchange=${__privateMethod(this, _AiErrorMessageComponent_instances, handleTitleSlotChange_fn)}></slot>
+      </div>
+    `;
+};
 AiErrorMessageComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ type: String, reflect: true })
+], AiErrorMessageComponent.prototype, "density", 2);
+__decorateClass([
+  queryAssignedNodes({ slot: "title", flatten: true })
+], AiErrorMessageComponent.prototype, "_titleNodes", 2);
 AiErrorMessageComponent = __decorateClass([
   customElement(AiErrorMessageComponentTagName)
 ], AiErrorMessageComponent);

package/dist/ai-error-message/ai-error-message.scss.mjs

@@ -1,4 +1,4 @@
-const styles = '/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-inline-message {\n  --_inline-message-background:var(--forge-inline-message-background, var(--forge-theme-info-container-low, #e3edf7));\n  --_inline-message-color:var(--forge-inline-message-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));\n  --_inline-message-shape:var(--forge-inline-message-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_inline-message-padding:var(--forge-inline-message-padding, var(--forge-spacing-small, 12px));\n  --_inline-message-padding-inline:var(--forge-inline-message-padding-inline, var(--_inline-message-padding));\n  --_inline-message-padding-block:var(--forge-inline-message-padding-block, var(--_inline-message-padding));\n  --_inline-message-border-width:var(--forge-inline-message-border-width, var(--forge-border-thin, 1px));\n  --_inline-message-border-style:var(--forge-inline-message-border-style, none);\n  --_inline-message-border-color:var(--forge-inline-message-border-color, var(--forge-theme-info-container, #c7daf0));\n  --_inline-message-gap:var(--forge-inline-message-gap, var(--forge-spacing-small, 12px));\n  --_inline-message-icon-gap:var(--forge-inline-message-icon-gap, var(--_inline-message-gap));\n  --_inline-message-content-gap:var(--forge-inline-message-content-gap, var(--_inline-message-gap));\n  --_inline-message-icon-color:var(--forge-inline-message-icon-color, var(--forge-theme-on-info-container-low, #0b3768));\n}\n\n.forge-inline-message {\n  display: block;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  background: var(--_inline-message-background);\n  color: var(--_inline-message-color);\n  border-radius: var(--_inline-message-shape);\n  border-width: var(--_inline-message-border-width);\n  border-style: var(--_inline-message-border-style);\n  border-color: var(--_inline-message-border-color);\n  display: flex;\n  align-items: center;\n  gap: var(--_inline-message-icon-gap);\n  box-sizing: border-box;\n  padding-inline: var(--_inline-message-padding-inline);\n  padding-block: var(--_inline-message-padding-block);\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: auto 1fr;\n}\n\n.forge-inline-message:not(:has(.forge-inline-message__icon)) {\n  grid-template-columns: 1fr;\n}\n\n.forge-inline-message__title {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-heading1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-heading1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-heading1-font-weight, 500);\n  line-height: var(--forge-typography-heading1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-heading1-letter-spacing, 0.0178571429em);\n  text-transform: var(--forge-typography-heading1-text-transform, inherit);\n  text-decoration: var(--forge-typography-heading1-text-decoration, inherit);\n}\n\n.forge-inline-message__icon {\n  color: var(--_inline-message-icon-color);\n  align-self: start;\n  grid-row: 1/span 2;\n}\n\n:host {\n  display: block;\n}\n\n.forge-inline-message {\n  --forge-inline-message-background: var(--forge-theme-error-container-low, #f6e0e4);\n  --forge-inline-message-color: var(--forge-theme-on-error-container-low, #5f0011);\n  --forge-inline-message-icon-color: var(--forge-theme-on-error-container-low, #5f0011);\n  --forge-inline-message-border-color: var(--forge-theme-error-container, #ecc2c9);\n  --forge-inline-message-border-style: solid;\n}\n.forge-inline-message__title {\n  font-weight: bold;\n}\n.forge-inline-message__content {\n  overflow-wrap: anywhere;\n}\n\n::slotted(*) {\n  margin-block: 0;\n  overflow-wrap: anywhere;\n}';
+const styles = '/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-inline-message {\n  --_inline-message-background:var(--forge-inline-message-background, var(--forge-theme-info-container-low, #e3edf7));\n  --_inline-message-color:var(--forge-inline-message-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));\n  --_inline-message-shape:var(--forge-inline-message-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_inline-message-padding:var(--forge-inline-message-padding, var(--forge-spacing-small, 12px));\n  --_inline-message-padding-inline:var(--forge-inline-message-padding-inline, var(--_inline-message-padding));\n  --_inline-message-padding-block:var(--forge-inline-message-padding-block, var(--_inline-message-padding));\n  --_inline-message-border-width:var(--forge-inline-message-border-width, var(--forge-border-thin, 1px));\n  --_inline-message-border-style:var(--forge-inline-message-border-style, none);\n  --_inline-message-border-color:var(--forge-inline-message-border-color, var(--forge-theme-info-container, #c7daf0));\n  --_inline-message-gap:var(--forge-inline-message-gap, var(--forge-spacing-small, 12px));\n  --_inline-message-icon-gap:var(--forge-inline-message-icon-gap, var(--_inline-message-gap));\n  --_inline-message-content-gap:var(--forge-inline-message-content-gap, var(--_inline-message-gap));\n  --_inline-message-icon-color:var(--forge-inline-message-icon-color, var(--forge-theme-on-info-container-low, #0b3768));\n}\n\n.forge-inline-message {\n  display: block;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  background: var(--_inline-message-background);\n  color: var(--_inline-message-color);\n  border-radius: var(--_inline-message-shape);\n  border-width: var(--_inline-message-border-width);\n  border-style: var(--_inline-message-border-style);\n  border-color: var(--_inline-message-border-color);\n  display: flex;\n  align-items: center;\n  gap: var(--_inline-message-icon-gap);\n  box-sizing: border-box;\n  padding-inline: var(--_inline-message-padding-inline);\n  padding-block: var(--_inline-message-padding-block);\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: auto 1fr;\n}\n\n.forge-inline-message:not(:has(.forge-inline-message__icon)) {\n  grid-template-columns: 1fr;\n}\n\n.forge-inline-message__title {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-heading1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-heading1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-heading1-font-weight, 500);\n  line-height: var(--forge-typography-heading1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-heading1-letter-spacing, 0.0178571429em);\n  text-transform: var(--forge-typography-heading1-text-transform, inherit);\n  text-decoration: var(--forge-typography-heading1-text-decoration, inherit);\n}\n\n.forge-inline-message__icon {\n  color: var(--_inline-message-icon-color);\n  align-self: start;\n  grid-row: 1/span 2;\n}\n\n:host {\n  display: block;\n}\n\n.forge-inline-message {\n  --forge-inline-message-background: var(--forge-theme-error-container-low, #f6e0e4);\n  --forge-inline-message-color: var(--forge-theme-on-error-container-low, #5f0011);\n  --forge-inline-message-icon-color: var(--forge-theme-on-error-container-low, #5f0011);\n  --forge-inline-message-border-color: var(--forge-theme-error-container, #ecc2c9);\n  --forge-inline-message-border-style: solid;\n}\n.forge-inline-message__title {\n  font-weight: bold;\n}\n.forge-inline-message__title--empty {\n  display: none;\n}\n.forge-inline-message__content {\n  overflow-wrap: anywhere;\n}\n.forge-inline-message:has(.forge-inline-message__title--empty) {\n  grid-template-rows: auto;\n}\n.forge-inline-message:has(.forge-inline-message__title--empty) .forge-inline-message__icon {\n  grid-row: auto;\n  align-self: center;\n}\n\n:host([density=small]) .forge-inline-message {\n  --forge-inline-message-padding: var(--forge-spacing-xsmall, 8px);\n  --forge-inline-message-gap: var(--forge-spacing-xsmall, 8px);\n  --forge-inline-message-content-gap: var(--forge-spacing-xxsmall, 4px);\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));\n  font-weight: var(--forge-typography-body2-font-weight, 400);\n  line-height: var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));\n  letter-spacing: var(--forge-typography-body2-letter-spacing, 0.015625em);\n  text-transform: var(--forge-typography-body2-text-transform, inherit);\n  text-decoration: var(--forge-typography-body2-text-decoration, inherit);\n}\n:host([density=small]) .forge-inline-message__icon {\n  height: 20px;\n  width: 20px;\n}\n\n::slotted(*) {\n  margin-block: 0;\n  overflow-wrap: anywhere;\n}';
 export {
   styles as default
 };

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

@@ -1 +1,2 @@
 export { AiErrorMessageComponent, AiErrorMessageComponentTagName } from './ai-error-message.js';
+export type { ErrorMessageDensity } from './ai-error-message.js';

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

@@ -22,6 +22,8 @@ export declare class AiFabComponent extends LitElement {
     disabled: boolean;
     /** Whether the button is extended */
     extended: boolean;
+    /** Accessible label for the button, announced by screen readers. */
+    label: string;
     constructor();
     willUpdate(changedProperties: PropertyValues<this>): void;
     render(): TemplateResult;

package/dist/ai-fab/ai-fab.mjs

@@ -30,6 +30,7 @@ let AiFabComponent = class extends LitElement {
     __privateAdd(this, _AiFabComponent_instances);
     this.disabled = false;
     this.extended = false;
+    this.label = "Launch chatbot";
     __privateAdd(this, _internals);
     __privateSet(this, _internals, this.attachInternals());
     __privateMethod(this, _AiFabComponent_instances, setCssState_fn).call(this);
@@ -43,7 +44,7 @@ let AiFabComponent = class extends LitElement {
     return html`
       <forge-ai-gradient-container variant=${this.disabled ? "disabled" : "high"}>
         <button
-          aria-label="Floating Action Button Demo"
+          aria-label=${this.label}
           class="forge-fab ai-fab ${this.extended ? "forge-fab--small forge-fab--extended" : ""}"
           .disabled=${this.disabled}>
           <slot name="icon">
@@ -68,6 +69,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], AiFabComponent.prototype, "extended", 2);
+__decorateClass([
+  property({ type: String })
+], AiFabComponent.prototype, "label", 2);
 AiFabComponent = __decorateClass([
   customElement(AiFabComponentTagName)
 ], AiFabComponent);

package/dist/ai-icon-button/ai-icon-button.mjs

@@ -39,7 +39,10 @@ let AiIconButtonComponent = class extends LitElement {
   }
   render() {
     return html`
-      <button aria-label="AI Icon Button" class="forge-icon-button ai-icon-button" .disabled=${this.disabled}>
+      <button
+        aria-label="AI Icon Button"
+        class="forge-icon-button forge-icon-button--medium ai-icon-button"
+        .disabled=${this.disabled}>
         <forge-ai-icon></forge-ai-icon>
       </button>
     `;

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

@@ -87,9 +87,9 @@ let AiMessageThreadComponent = class extends LitElement {
   render() {
     return html`
       <div class="message-thread" @scroll=${this.autoScroll ? __privateGet(this, _handleScroll) : void 0}>
+        ${__privateGet(this, _AiMessageThreadComponent_instances, scrollToBottomButton_get)}
         <div class="message-thread-content">${__privateGet(this, _AiMessageThreadComponent_instances, emptyState_get)} ${__privateGet(this, _AiMessageThreadComponent_instances, messages_get)} ${__privateGet(this, _AiMessageThreadComponent_instances, thinkingIndicator_get)}</div>
       </div>
-      ${__privateGet(this, _AiMessageThreadComponent_instances, scrollToBottomButton_get)}
     `;
   }
 };

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

@@ -85,9 +85,9 @@ let AiSidebarComponent = class extends LitElement {
               <div
                 ${ref(__privateGet(this, _resizeHandleRef))}
                 class=${classMap(handleClasses)}
-                role="separator"
+                role="slider"
                 aria-orientation="vertical"
-                aria-label="Resize sidebar"
+                aria-label="Resize chatbot panel, use left and right arrow keys"
                 aria-valuemin="${MIN_WIDTH}"
                 aria-valuemax="${MAX_WIDTH}"
                 aria-valuenow=${this._width}

package/dist/ai-thread-actions-menu/ai-thread-actions-menu.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, TemplateResult, CSSResult } from 'lit';
 import { Thread } from '../ai-threads';
+import { DropdownMenuDensity } from '../ai-dropdown-menu';
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-thread-actions-menu': AiThreadActionsMenuComponent;
@@ -40,5 +41,9 @@ export declare class AiThreadActionsMenuComponent extends LitElement {
     thread: Thread;
     showRename: boolean;
     showDelete: boolean;
+    /**
+     * The density of the trigger button
+     */
+    density: DropdownMenuDensity;
     render(): TemplateResult;
 }

package/dist/ai-thread-actions-menu/ai-thread-actions-menu.mjs

@@ -28,15 +28,16 @@ let AiThreadActionsMenuComponent = class extends LitElement {
     __privateAdd(this, _AiThreadActionsMenuComponent_instances);
     this.showRename = false;
     this.showDelete = false;
+    this.density = "small";
   }
   render() {
     return html`
       <forge-ai-dropdown-menu
         variant="icon-button-squared"
-        density="small"
+        density=${this.density}
         selection-mode="none"
         popover-placement="bottom-start"
-        trigger-label="Thread options"
+        trigger-label="More actions for ${this.thread.title}"
         @keydown=${__privateMethod(this, _AiThreadActionsMenuComponent_instances, handleMenuKeyDown_fn)}
         @forge-ai-dropdown-menu-open=${__privateMethod(this, _AiThreadActionsMenuComponent_instances, handleMenuOpen_fn)}
         @forge-ai-dropdown-menu-close=${__privateMethod(this, _AiThreadActionsMenuComponent_instances, handleMenuClose_fn)}
@@ -139,6 +140,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "show-delete" })
 ], AiThreadActionsMenuComponent.prototype, "showDelete", 2);
+__decorateClass([
+  property()
+], AiThreadActionsMenuComponent.prototype, "density", 2);
 AiThreadActionsMenuComponent = __decorateClass([
   customElement(AiThreadActionsMenuComponentTagName)
 ], AiThreadActionsMenuComponent);

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

@@ -13,6 +13,7 @@ declare global {
         'forge-ai-threads-search-delete': CustomEvent<ForgeAiThreadsSearchDeleteEventData>;
         'forge-ai-threads-search-delete-confirm': CustomEvent<ForgeAiThreadsSearchDeleteConfirmEventData>;
         'forge-ai-threads-search-back': CustomEvent<void>;
+        'forge-ai-threads-search-retry': CustomEvent<void>;
     }
 }
 export interface ForgeAiThreadsSearchQueryEventData {
@@ -50,13 +51,14 @@ export declare const AiThreadsSearchComponentTagName: keyof HTMLElementTagNameMa
  * @slot header-actions - Slot for a persistent action pinned to the top-right of the header, alongside the "New chat" button (e.g. a "View all" button).
  *
  * @event {CustomEvent<ForgeAiThreadsSearchQueryEventData>} forge-ai-threads-search-query - Fired when search query changes (debounced).
- * @event {CustomEvent<ForgeAiThreadsSearchLoadMoreEventData>} forge-ai-threads-search-load-more - Fired when user scrolls near bottom for pagination.
+ * @event {CustomEvent<ForgeAiThreadsSearchLoadMoreEventData>} forge-ai-threads-search-load-more - Fired when the user scrolls near the bottom or clicks "Load more" for pagination.
  * @event {CustomEvent<ForgeAiThreadsSearchSelectEventData>} forge-ai-threads-search-select - Fired when a thread is selected.
  * @event {CustomEvent} forge-ai-threads-search-new-chat - Fired when new chat button clicked.
  * @event {CustomEvent<ForgeAiThreadsSearchRenameEventData>} forge-ai-threads-search-rename - Fired when thread renamed. Cancelable - if prevented, call onSuccess() to commit or onError() to revert.
  * @event {CustomEvent<ForgeAiThreadsSearchDeleteEventData>} forge-ai-threads-search-delete - Fired when thread delete confirmed. Cancelable - if prevented, call onSuccess() to commit deletion or onError() to revert.
  * @event {CustomEvent<ForgeAiThreadsSearchDeleteConfirmEventData>} forge-ai-threads-search-delete-confirm - Fired before showing the built-in delete confirmation. Cancelable - if prevented, this component shows no confirmation UI; the host must show its own and call confirmThreadDelete() once accepted.
  * @event {CustomEvent<void>} forge-ai-threads-search-back - Fired when the back button (shown via showBackButton) is clicked.
+ * @event {CustomEvent<void>} forge-ai-threads-search-retry - Fired when the retry button in the error state is clicked. The host should re-request the threads and clear errorMessage once the load succeeds.
  *
  * @description A standalone search component for conversations/threads. Can be slotted into forge-ai-threads
  * or used independently. Supports both local and external/async search patterns via event callbacks.
@@ -88,8 +90,18 @@ export declare class AiThreadsSearchComponent extends LitElement {
      * infinite scroll entirely. Useful when all data is loaded upfront.
      */
     totalChats: number;
+    /**
+     * Placeholder text for the search input. The input's aria-label is "Search" - avoid reusing
+     * that word here so screen readers don't announce the same word twice.
+     */
     placeholder: string;
-    emptyMessage: string;
+    /**
+     * Message describing a failed thread load. When no threads are loaded, an error banner with a
+     * retry button replaces the empty state. When threads are already on screen the list stays visible
+     * and the message shows as a compact single line with a retry - at the bottom of the list if a page
+     * was in flight, otherwise above it. The host owns this value and should clear it once a load succeeds.
+     */
+    errorMessage?: string;
     showThreadRename: boolean;
     showThreadDelete: boolean;
     /**
@@ -97,6 +109,7 @@ export declare class AiThreadsSearchComponent extends LitElement {
      */
     selectedThreadId: string | null;
     private _resultsContainer;
+    private _searchInput?;
     private _searchQuery;
     private _isSearching;
     private _searchResults;
@@ -113,5 +126,16 @@ export declare class AiThreadsSearchComponent extends LitElement {
      * built-in one). Call once the host's own confirmation has been accepted.
      */
     confirmThreadDelete(thread: Thread): void;
+    /**
+     * Discards the current query and its results so the list shows every loaded chat again.
+     * Dispatches no search event and moves no focus, so a host may call it on a surface that is
+     * currently hidden (e.g. a popover that stays mounted between opens).
+     */
+    resetSearch(): void;
+    /**
+     * Moves focus into the component: the search input when shown, otherwise the first chat in
+     * the list, otherwise the first header button.
+     */
+    focus(): void;
     render(): TemplateResult;
 }