@tylertech/forge-ai 0.5.0 → 0.6.0

package/dist/ai-chatbot/message-state-controller.mjs

@@ -28,18 +28,34 @@ class MessageStateController {
     this._messageItems = [...this._messageItems, item];
     this.#notifyStateChange();
   }
-  addMessage(message) {
+  addMessage(message, event) {
     const existing = this.getMessage(message.id);
     if (existing) {
       return;
     }
     this.addMessageItem({ type: "message", data: message });
+    if (event) {
+      this.#appendEventToMessage(message.id, {
+        type: "message-start",
+        timestamp: Date.now(),
+        data: event,
+        rawEvent: event.rawEvent
+      });
+    }
   }
-  addToolCall(toolCall) {
+  addToolCall(toolCall, event) {
     this._toolCalls.set(toolCall.id, toolCall);
     this.addMessageItem({ type: "toolCall", data: toolCall });
+    if (event) {
+      this.#appendEventToToolCall(toolCall.id, {
+        type: "tool-call-start",
+        timestamp: Date.now(),
+        data: event,
+        rawEvent: event.rawEvent
+      });
+    }
   }
-  updateToolCall(toolCallId, updates) {
+  updateToolCall(toolCallId, updates, eventData) {
     const toolCall = this._toolCalls.get(toolCallId);
     if (!toolCall) {
       return;
@@ -52,28 +68,63 @@ class MessageStateController {
       }
       return item;
     });
+    if (eventData) {
+      if (eventData.eventType === "tool-call-args") {
+        const argsEvent = eventData.event;
+        this.#appendEventToToolCall(toolCallId, {
+          type: "tool-call-args",
+          timestamp: Date.now(),
+          data: argsEvent,
+          rawEvent: argsEvent.rawEvent
+        });
+      } else {
+        const endEvent = eventData.event;
+        this.#appendEventToToolCall(toolCallId, {
+          type: "tool-call-end",
+          timestamp: Date.now(),
+          data: endEvent,
+          rawEvent: endEvent.rawEvent
+        });
+      }
+    }
     this.#notifyStateChange();
   }
-  appendToMessage(id, content) {
+  appendToMessage(id, content, event) {
     this._messageItems = this._messageItems.map((item) => {
       if (item.type === "message" && item.data.id === id) {
         return { ...item, data: { ...item.data, content: item.data.content + content } };
       }
       return item;
     });
+    if (event) {
+      this.#appendEventToMessage(id, {
+        type: "message-delta",
+        timestamp: Date.now(),
+        data: event,
+        rawEvent: event.rawEvent
+      });
+    }
     this.#notifyStateChange();
   }
   getMessage(id) {
     const item = this._messageItems.find((i) => i.type === "message" && i.data.id === id);
     return item?.type === "message" ? item.data : void 0;
   }
-  updateMessageStatus(id, status) {
+  updateMessageStatus(id, status, event) {
     this._messageItems = this._messageItems.map((item) => {
       if (item.type === "message" && item.data.id === id) {
         return { ...item, data: { ...item.data, status } };
       }
       return item;
     });
+    if (event) {
+      this.#appendEventToMessage(id, {
+        type: "message-end",
+        timestamp: Date.now(),
+        data: event,
+        rawEvent: event.rawEvent
+      });
+    }
     this.#notifyStateChange();
   }
   removeMessageItem(index) {
@@ -126,11 +177,49 @@ class MessageStateController {
     this._messageItems = messageItems;
     this.#notifyStateChange();
   }
-  completeToolCall(toolCallId, result) {
+  #appendEventToMessage(id, event) {
+    const messageExists = this._messageItems.some((item) => item.type === "message" && item.data.id === id);
+    if (!messageExists) {
+      return;
+    }
+    this._messageItems = this._messageItems.map((item) => {
+      if (item.type === "message" && item.data.id === id) {
+        const eventStream = [...item.data.eventStream || [], event];
+        return { ...item, data: { ...item.data, eventStream } };
+      }
+      return item;
+    });
+    this.#notifyStateChange();
+  }
+  #appendEventToToolCall(id, event) {
+    const toolCall = this._toolCalls.get(id);
+    if (!toolCall) {
+      return;
+    }
+    const eventStream = [...toolCall.eventStream || [], event];
+    const updated = { ...toolCall, eventStream };
+    this._toolCalls.set(id, updated);
+    this._messageItems = this._messageItems.map((item) => {
+      if (item.type === "toolCall" && item.data.id === id) {
+        return { ...item, data: updated };
+      }
+      return item;
+    });
+    this.#notifyStateChange();
+  }
+  completeToolCall(toolCallId, result, event) {
     this.updateToolCall(toolCallId, {
       result,
       status: "complete"
     });
+    if (event) {
+      this.#appendEventToToolCall(toolCallId, {
+        type: "tool-result",
+        timestamp: Date.now(),
+        data: event,
+        rawEvent: event.rawEvent
+      });
+    }
     this.#tryReorderAssistantMessage(toolCallId);
   }
   /**

package/dist/ai-chatbot/types.d.ts

@@ -2,10 +2,28 @@
  * Valid HTML heading levels for accessibility and semantic structure
  */
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type SlashCommandId = 'clear' | 'export' | 'info' | 'debug';
+export type SlashCommandGroup = 'Conversation' | 'Help';
+export interface SlashCommand {
+    id: SlashCommandId;
+    name: string;
+    group: SlashCommandGroup;
+}
+export interface ForgeAiSlashCommandMenuSelectEventData {
+    command: SlashCommand;
+    index: number;
+}
 export interface ToolRenderer {
     elementTag?: string;
     render?: (toolCall: ToolCall) => HTMLElement | DocumentFragment;
 }
+/**
+ * Interface that tool renderer components should implement for type-safe tool call handling.
+ * @template TArgs - Type of the tool call arguments
+ */
+export interface IToolRenderer<TArgs = Record<string, unknown>> {
+    toolCall: ToolCall<TArgs>;
+}
 /**
  * Context provided to tool handlers when they are invoked.
  * @template TArgs - Type of the tool call arguments
@@ -42,6 +60,75 @@ export interface ToolDefinition<THandlerArgs = Record<string, unknown>> {
      */
     handler?: (context: HandlerContext<THandlerArgs>) => Promise<string | Record<string, unknown> | void> | string | Record<string, unknown> | void;
 }
+export interface MessageStartEvent {
+    messageId: string;
+}
+export interface MessageDeltaEvent {
+    messageId: string;
+    delta: string;
+}
+export interface MessageEndEvent {
+    messageId: string;
+}
+export interface ToolCallStartEvent {
+    id: string;
+    messageId: string;
+    name: string;
+}
+export interface ToolCallArgsEvent {
+    id: string;
+    messageId: string;
+    name: string;
+    argsBuffer: string;
+    partialArgs?: Record<string, unknown>;
+}
+export interface ToolCallEndEvent {
+    id: string;
+    messageId: string;
+    name: string;
+    args: Record<string, unknown>;
+}
+export interface ToolResultEvent {
+    toolCallId: string;
+    result: unknown;
+    message: ChatMessage;
+}
+export type StreamEvent = {
+    type: 'message-start';
+    timestamp: number;
+    data: MessageStartEvent;
+    rawEvent?: unknown;
+} | {
+    type: 'message-delta';
+    timestamp: number;
+    data: MessageDeltaEvent;
+    rawEvent?: unknown;
+} | {
+    type: 'message-end';
+    timestamp: number;
+    data: MessageEndEvent;
+    rawEvent?: unknown;
+} | {
+    type: 'tool-call-start';
+    timestamp: number;
+    data: ToolCallStartEvent;
+    rawEvent?: unknown;
+} | {
+    type: 'tool-call-args';
+    timestamp: number;
+    data: ToolCallArgsEvent;
+    rawEvent?: unknown;
+} | {
+    type: 'tool-call-end';
+    timestamp: number;
+    data: ToolCallEndEvent;
+    rawEvent?: unknown;
+} | {
+    type: 'tool-result';
+    timestamp: number;
+    data: ToolResultEvent;
+    rawEvent?: unknown;
+};
 export interface ChatMessage {
     id: string;
     role: 'user' | 'assistant' | 'system' | 'tool';
@@ -50,16 +137,18 @@ export interface ChatMessage {
     status: 'pending' | 'streaming' | 'complete' | 'error';
     toolCalls?: ToolCall[];
     toolCallId?: string;
+    eventStream?: StreamEvent[];
 }
-export interface ToolCall {
+export interface ToolCall<TArgs = Record<string, unknown>> {
     id: string;
     messageId: string;
     name: string;
-    args: Record<string, unknown>;
+    args: TArgs;
     argsBuffer?: string;
     result?: unknown;
     status: 'pending' | 'parsing' | 'executing' | 'complete' | 'error';
     type: ToolType;
+    eventStream?: StreamEvent[];
 }
 export interface FileAttachment {
     id: string;

package/dist/ai-chatbot/utils.d.ts

@@ -1,7 +1,7 @@
 /**
- * Generates a unique ID with a given prefix
+ * Generates a unique ID using UUID v4
  */
-export declare function generateId(prefix: string): string;
+export declare function generateId(): string;
 /**
  * Renders markdown content to sanitized HTML
  */

package/dist/ai-chatbot/utils.mjs

@@ -1,12 +1,13 @@
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import remend from "remend";
+import { v4 } from "uuid";
 const DOMPURIFY_CONFIG = {
   FORBID_TAGS: ["script", "style", "iframe", "object", "embed"],
   FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover"]
 };
-function generateId(prefix) {
-  return `${prefix}_${Date.now()}_${Math.random().toString(36).slice(2, 11)}`;
+function generateId() {
+  return v4();
 }
 function renderMarkdown(content) {
   const completedMarkdown = remend(content);

package/dist/ai-dropdown-menu/ai-dropdown-menu-item.d.ts

@@ -26,9 +26,7 @@ declare global {
  * - **'click'**: Opens on click/tap
  * - **'both'**: Opens on both hover and click
  *
- * @cssprop --ai-dropdown-menu-item-submenu-open-delay - Delay before opening submenu on hover.
- * @cssprop --ai-dropdown-menu-item-submenu-close-delay - Delay before closing submenu when mouse leaves.
- * @cssprop --ai-dropdown-menu-item-selection-icon-size - Size of selection and submenu icons.
+ * @cssproperty --forge-ai-dropdown-menu-item-selection-icon-size - Size of selection and submenu icons.
  *
  * @slot - The default slot for item text content.
  * @slot description - The description slot for additional item details.

package/dist/ai-dropdown-menu/ai-dropdown-menu-item.scss.mjs

@@ -1,4 +1,4 @@
-const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright 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: block;\n  position: relative;\n  outline: none;\n  --ai-dropdown-menu-item-submenu-open-delay: 150ms;\n  --ai-dropdown-menu-item-submenu-close-delay: 300ms;\n  --ai-dropdown-menu-item-selection-icon-size: 16px;\n}\n\n@keyframes forge-focus-indicator-outward-grow {\n  from {\n    outline-width: 0;\n  }\n  to {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n  from {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-grow {\n  from {\n    border-width: 0;\n  }\n  to {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n  from {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n:host(:focus) .focus-indicator {\n  --_focus-indicator-display: var(--forge-focus-indicator-display, flex);\n  --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n  --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);\n  --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n  --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n  --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n  --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n  --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n  --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n  --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);\n  --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);\n  --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);\n  animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n  animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n  animation-timing-function: var(--_focus-indicator-easing);\n  box-sizing: border-box;\n  color: var(--_focus-indicator-color);\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  margin-block: var(--_focus-indicator-offset-block);\n  margin-inline: var(--_focus-indicator-offset-inline);\n  animation-name: forge-focus-indicator-inward-grow, forge-focus-indicator-inward-shrink;\n  border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) - var(--_focus-indicator-inward-offset));\n  border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) - var(--_focus-indicator-inward-offset));\n  border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) - var(--_focus-indicator-inward-offset));\n  border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) - var(--_focus-indicator-inward-offset));\n  border: var(--_focus-indicator-width) solid currentColor;\n  inset: var(--_focus-indicator-inward-offset);\n}\n:host(:focus) .focus-indicator::before {\n  content: "";\n}\n:host(:focus) .focus-indicator {\n  display: block;\n  --forge-focus-indicator-shape: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n}\n\n.ai-dropdown-menu-item {\n  --_list-item-background: var(--forge-list-item-background, transparent);\n  --_list-item-shape: var(--forge-list-item-shape, 0);\n  --_list-item-padding: var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));\n  --_list-item-margin: var(--forge-list-item-margin, 0);\n  --_list-item-height: var(--forge-list-item-height, 48px);\n  --_list-item-dense-height: var(--forge-list-item-dense-height, 32px);\n  --_list-item-indent: var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));\n  --_list-item-cursor: var(--forge-list-item-cursor, pointer);\n  --_list-item-gap: var(--forge-list-item-gap, var(--forge-spacing-large, 24px));\n  --_list-item-text-color: var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));\n  --_list-item-text-font-size: var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));\n  --_list-item-text-font-weight: var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));\n  --_list-item-text-line-height: var(--forge-list-item-text-line-height, 1.5rem);\n  --_list-item-selected-color: var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));\n  --_list-item-selected-background: var(--forge-list-item-selected-background, var(--_list-item-selected-color));\n  --_list-item-selected-opacity: var(--forge-list-item-selected-opacity, 0.08);\n  --_list-item-selected-start-color: var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));\n  --_list-item-selected-end-color: var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));\n  --_list-item-selected-text-color: var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));\n  --_list-item-disabled-opacity: var(--forge-list-item-disabled-opacity, 0.38);\n  --_list-item-disabled-cursor: var(--forge-list-item-disabled-cursor, not-allowed);\n  --_list-item-one-line-height: var(--forge-list-item-one-line-height, var(--_list-item-height));\n  --_list-item-two-line-height: var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));\n  --_list-item-three-line-height: var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));\n  --_list-item-dense-one-line-height: var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));\n  --_list-item-dense-two-line-height: var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));\n  --_list-item-dense-three-line-height: var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));\n  --_list-item-dense-font-size: var(--forge-list-item-dense-font-size, 0.875rem);\n  --_list-item-dense-indent: var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));\n  --_list-item-dense-gap: var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));\n  --_list-item-start-selected-color: var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));\n  --_list-item-end-selected-color: var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));\n  --_list-item-wrap-padding: var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px));\n  position: relative;\n  display: flex;\n  gap: var(--_list-item-gap);\n  align-items: center;\n  box-sizing: border-box;\n  outline: none;\n  text-decoration: none;\n  border-radius: var(--_list-item-shape);\n  -webkit-tap-highlight-color: transparent;\n  background-color: var(--_list-item-background);\n  height: var(--_list-item-height);\n  min-height: var(--_list-item-height);\n  padding: var(--_list-item-padding);\n  margin: var(--_list-item-margin);\n  --_list-item-gap: var(--_list-item-dense-gap);\n  height: var(--_list-item-dense-one-line-height);\n  min-height: var(--_list-item-dense-one-line-height);\n  --_state-layer-display: var(--forge-state-layer-display, flex);\n  --_state-layer-color: var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n  --_state-layer-hover-color: var(--forge-state-layer-hover-color, var(--_state-layer-color));\n  --_state-layer-hover-opacity: var(--forge-state-layer-hover-opacity, 0.08);\n  --_state-layer-pressed-color: var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.12);\n  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);\n  --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);\n  --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);\n}\n.ai-dropdown-menu-item::before {\n  opacity: 0;\n  position: absolute;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  background-color: var(--_state-layer-hover-color);\n  inset: 0;\n  transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 100ms);\n  content: "";\n  opacity: 0;\n  border-radius: inherit;\n}\n.ai-dropdown-menu-item:hover::before {\n  background-color: var(--_state-layer-hover-color);\n  opacity: var(--_state-layer-hover-opacity);\n}\n.ai-dropdown-menu-item:active::before {\n  opacity: var(--_state-layer-pressed-opacity);\n  transition-duration: var(--_state-layer-pressed-duration);\n  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);\n}\n.ai-dropdown-menu-item {\n  cursor: pointer;\n}\n.ai-dropdown-menu-item ::slotted([slot=start]),\n.ai-dropdown-menu-item ::slotted([slot=end]) {\n  color: var(--_list-item-text-color);\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  fill: currentColor;\n}\n.ai-dropdown-menu-item--with-selection {\n  --forge-list-item-padding: 0 var(--forge-spacing-xxsmall, 4px);\n}\n.ai-dropdown-menu-item--with-description {\n  height: var(--_list-item-dense-two-line-height);\n  min-height: var(--_list-item-dense-two-line-height);\n}\n.ai-dropdown-menu-item--selected {\n  color: var(--_list-item-selected-color);\n}\n.ai-dropdown-menu-item--selected::before {\n  content: "";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  opacity: var(--_list-item-selected-opacity);\n  background-color: var(--_list-item-selected-background);\n  pointer-events: none;\n}\n.ai-dropdown-menu-item--selected {\n  --forge-state-layer-color: var(--_list-item-selected-color);\n}\n.ai-dropdown-menu-item--selected ::slotted([slot=start]),\n.ai-dropdown-menu-item--selected ::slotted([slot=end]) {\n  color: var(--_list-item-selected-color);\n}\n.ai-dropdown-menu-item--disabled {\n  cursor: var(--_list-item-disabled-cursor);\n  opacity: var(--_list-item-disabled-opacity);\n}\n.ai-dropdown-menu-item__content {\n  flex: 1;\n  min-width: 0;\n}\n.ai-dropdown-menu-item__text {\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  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  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  isolation: isolate;\n  font-size: var(--_list-item-text-font-size);\n  font-weight: var(--_list-item-text-font-weight);\n  line-height: var(--_list-item-text-line-height);\n  flex: 1;\n  contain: layout;\n  font-size: var(--_list-item-dense-font-size);\n}\n.ai-dropdown-menu-item__description {\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  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--_list-item-text-color);\n  display: block;\n  font-size: var(--_list-item-dense-font-size);\n}\n.ai-dropdown-menu-item__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.ai-dropdown-menu-item__selection-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--forge-spacing-small, 12px);\n}\n.ai-dropdown-menu-item__selection-svg {\n  fill: currentColor;\n  width: var(--ai-dropdown-menu-item-selection-icon-size);\n  height: var(--ai-dropdown-menu-item-selection-icon-size);\n}\n.ai-dropdown-menu-item__submenu-arrow {\n  width: var(--ai-dropdown-menu-item-selection-icon-size);\n  height: var(--ai-dropdown-menu-item-selection-icon-size);\n  fill: currentColor;\n}\n.ai-dropdown-menu-item__submenu-arrow-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}';
+const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright 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: block;\n  position: relative;\n  outline: none;\n  --_ai-dropdown-menu-item-selection-icon-size: var(--forge-ai-dropdown-menu-item-selection-icon-size, 16px);\n}\n\n@keyframes forge-focus-indicator-outward-grow {\n  from {\n    outline-width: 0;\n  }\n  to {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n  from {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-grow {\n  from {\n    border-width: 0;\n  }\n  to {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n  from {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n:host(:focus) .focus-indicator {\n  --_focus-indicator-display: var(--forge-focus-indicator-display, flex);\n  --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n  --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);\n  --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n  --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n  --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n  --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n  --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n  --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n  --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);\n  --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);\n  --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);\n  animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n  animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n  animation-timing-function: var(--_focus-indicator-easing);\n  box-sizing: border-box;\n  color: var(--_focus-indicator-color);\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  margin-block: var(--_focus-indicator-offset-block);\n  margin-inline: var(--_focus-indicator-offset-inline);\n  animation-name: forge-focus-indicator-inward-grow, forge-focus-indicator-inward-shrink;\n  border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) - var(--_focus-indicator-inward-offset));\n  border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) - var(--_focus-indicator-inward-offset));\n  border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) - var(--_focus-indicator-inward-offset));\n  border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) - var(--_focus-indicator-inward-offset));\n  border: var(--_focus-indicator-width) solid currentColor;\n  inset: var(--_focus-indicator-inward-offset);\n}\n:host(:focus) .focus-indicator::before {\n  content: "";\n}\n:host(:focus) .focus-indicator {\n  display: block;\n  --forge-focus-indicator-shape: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n}\n\n.ai-dropdown-menu-item {\n  --_list-item-background: var(--forge-list-item-background, transparent);\n  --_list-item-shape: var(--forge-list-item-shape, 0);\n  --_list-item-padding: var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));\n  --_list-item-margin: var(--forge-list-item-margin, 0);\n  --_list-item-height: var(--forge-list-item-height, 48px);\n  --_list-item-dense-height: var(--forge-list-item-dense-height, 32px);\n  --_list-item-indent: var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));\n  --_list-item-cursor: var(--forge-list-item-cursor, pointer);\n  --_list-item-gap: var(--forge-list-item-gap, var(--forge-spacing-large, 24px));\n  --_list-item-text-color: var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));\n  --_list-item-text-font-size: var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));\n  --_list-item-text-font-weight: var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));\n  --_list-item-text-line-height: var(--forge-list-item-text-line-height, 1.5rem);\n  --_list-item-selected-color: var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));\n  --_list-item-selected-background: var(--forge-list-item-selected-background, var(--_list-item-selected-color));\n  --_list-item-selected-opacity: var(--forge-list-item-selected-opacity, 0.08);\n  --_list-item-selected-start-color: var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));\n  --_list-item-selected-end-color: var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));\n  --_list-item-selected-text-color: var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));\n  --_list-item-disabled-opacity: var(--forge-list-item-disabled-opacity, 0.38);\n  --_list-item-disabled-cursor: var(--forge-list-item-disabled-cursor, not-allowed);\n  --_list-item-one-line-height: var(--forge-list-item-one-line-height, var(--_list-item-height));\n  --_list-item-two-line-height: var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));\n  --_list-item-three-line-height: var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));\n  --_list-item-dense-one-line-height: var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));\n  --_list-item-dense-two-line-height: var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));\n  --_list-item-dense-three-line-height: var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));\n  --_list-item-dense-font-size: var(--forge-list-item-dense-font-size, 0.875rem);\n  --_list-item-dense-indent: var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));\n  --_list-item-dense-gap: var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));\n  --_list-item-start-selected-color: var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));\n  --_list-item-end-selected-color: var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));\n  --_list-item-wrap-padding: var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px));\n  position: relative;\n  display: flex;\n  gap: var(--_list-item-gap);\n  align-items: center;\n  box-sizing: border-box;\n  outline: none;\n  text-decoration: none;\n  border-radius: var(--_list-item-shape);\n  -webkit-tap-highlight-color: transparent;\n  background-color: var(--_list-item-background);\n  height: var(--_list-item-height);\n  min-height: var(--_list-item-height);\n  padding: var(--_list-item-padding);\n  margin: var(--_list-item-margin);\n  --_list-item-gap: var(--_list-item-dense-gap);\n  height: var(--_list-item-dense-one-line-height);\n  min-height: var(--_list-item-dense-one-line-height);\n  --_state-layer-display: var(--forge-state-layer-display, flex);\n  --_state-layer-color: var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n  --_state-layer-hover-color: var(--forge-state-layer-hover-color, var(--_state-layer-color));\n  --_state-layer-hover-opacity: var(--forge-state-layer-hover-opacity, 0.08);\n  --_state-layer-pressed-color: var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.12);\n  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);\n  --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);\n  --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);\n}\n.ai-dropdown-menu-item::before {\n  opacity: 0;\n  position: absolute;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  background-color: var(--_state-layer-hover-color);\n  inset: 0;\n  transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 100ms);\n  content: "";\n  opacity: 0;\n  border-radius: inherit;\n}\n.ai-dropdown-menu-item:hover::before {\n  background-color: var(--_state-layer-hover-color);\n  opacity: var(--_state-layer-hover-opacity);\n}\n.ai-dropdown-menu-item:active::before {\n  opacity: var(--_state-layer-pressed-opacity);\n  transition-duration: var(--_state-layer-pressed-duration);\n  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);\n}\n.ai-dropdown-menu-item {\n  cursor: pointer;\n}\n.ai-dropdown-menu-item ::slotted([slot=start]),\n.ai-dropdown-menu-item ::slotted([slot=end]) {\n  color: var(--_list-item-text-color);\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  fill: currentColor;\n}\n.ai-dropdown-menu-item--with-selection {\n  --forge-list-item-padding: 0 var(--forge-spacing-xxsmall, 4px);\n}\n.ai-dropdown-menu-item--with-description {\n  height: var(--_list-item-dense-two-line-height);\n  min-height: var(--_list-item-dense-two-line-height);\n}\n.ai-dropdown-menu-item--selected {\n  color: var(--_list-item-selected-color);\n}\n.ai-dropdown-menu-item--selected::before {\n  content: "";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  opacity: var(--_list-item-selected-opacity);\n  background-color: var(--_list-item-selected-background);\n  pointer-events: none;\n}\n.ai-dropdown-menu-item--selected {\n  --forge-state-layer-color: var(--_list-item-selected-color);\n}\n.ai-dropdown-menu-item--selected ::slotted([slot=start]),\n.ai-dropdown-menu-item--selected ::slotted([slot=end]) {\n  color: var(--_list-item-selected-color);\n}\n.ai-dropdown-menu-item--disabled {\n  cursor: var(--_list-item-disabled-cursor);\n  opacity: var(--_list-item-disabled-opacity);\n}\n.ai-dropdown-menu-item__content {\n  flex: 1;\n  min-width: 0;\n}\n.ai-dropdown-menu-item__text {\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  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  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  isolation: isolate;\n  font-size: var(--_list-item-text-font-size);\n  font-weight: var(--_list-item-text-font-weight);\n  line-height: var(--_list-item-text-line-height);\n  flex: 1;\n  contain: layout;\n  font-size: var(--_list-item-dense-font-size);\n}\n.ai-dropdown-menu-item__description {\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  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--_list-item-text-color);\n  display: block;\n  font-size: var(--_list-item-dense-font-size);\n}\n.ai-dropdown-menu-item__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.ai-dropdown-menu-item__selection-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--forge-spacing-small, 12px);\n}\n.ai-dropdown-menu-item__selection-svg {\n  fill: currentColor;\n  width: var(--_ai-dropdown-menu-item-selection-icon-size);\n  height: var(--_ai-dropdown-menu-item-selection-icon-size);\n}\n.ai-dropdown-menu-item__submenu-arrow {\n  width: var(--_ai-dropdown-menu-item-selection-icon-size);\n  height: var(--_ai-dropdown-menu-item-selection-icon-size);\n  fill: currentColor;\n}\n.ai-dropdown-menu-item__submenu-arrow-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}';
 export {
   styles as default
 };

package/dist/ai-dropdown-menu/ai-dropdown-menu.d.ts

@@ -46,12 +46,10 @@ export type DropdownMenuVariant = 'button' | 'icon-button';
  * - **forge-ai-dropdown-menu-open**: Fired when dropdown opens
  * - **forge-ai-dropdown-menu-close**: Fired when dropdown closes
  *
- * @cssprop --ai-dropdown-menu-min-width - Minimum width of the dropdown menu.
- * @cssprop --ai-dropdown-menu-max-width - Maximum width of the dropdown menu.
- * @cssprop --ai-dropdown-menu-max-height - Maximum height of the dropdown menu.
- * @cssprop --ai-dropdown-menu-padding - Padding inside the dropdown menu.
- * @cssprop --ai-dropdown-menu-trigger-width - The width of the trigger button.
- * @cssprop --ai-dropdown-menu-trigger-height - The height of the trigger button.
+ * @cssproperty --forge-ai-dropdown-menu-min-width - Minimum width of the dropdown menu.
+ * @cssproperty --forge-ai-dropdown-menu-max-width - Maximum width of the dropdown menu.
+ * @cssproperty --forge-ai-dropdown-menu-max-height - Maximum height of the dropdown menu.
+ * @cssproperty --forge-ai-dropdown-menu-padding - Padding inside the dropdown menu.
  *
  * @slot - The default slot for dropdown menu items, item groups, and separators.
  * @slot header - The header content displayed at the top of the dropdown menu.
@@ -137,6 +135,7 @@ export declare class ForgeAiDropdownMenuComponent extends LitElement {
     private _onPopoverToggle;
     private _onItemClick;
     private _onFocusOut;
+    private _onDefaultSlotChange;
     private get _dropdownRole();
     private get _ariaHasPopup();
     private get _ariaMultiSelectable();

package/dist/ai-dropdown-menu/ai-dropdown-menu.mjs

@@ -47,7 +47,7 @@ let ForgeAiDropdownMenuComponent = class extends LitElement {
     __privateAdd(this, _triggerTextSlot, html`<slot name="trigger-content">Choose...</slot>`);
     __privateAdd(this, _dropdownContentTemplate, html`
     <slot name="header"></slot>
-    <slot></slot>
+    <slot @slotchange=${this._onDefaultSlotChange}></slot>
   `);
   }
   connectedCallback() {
@@ -201,6 +201,12 @@ let ForgeAiDropdownMenuComponent = class extends LitElement {
       }
     });
   }
+  _onDefaultSlotChange() {
+    if (this._selectionManager) {
+      this._selectionManager.value = this.value;
+      this.requestUpdate();
+    }
+  }
   get _dropdownRole() {
     switch (this.selectionMode) {
       case "single":