@tylertech/forge-ai 0.1.0

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

@@ -0,0 +1,26 @@
+import { LitElement, TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-dropdown-menu-item-group': ForgeAiDropdownMenuItemGroupComponent;
+    }
+}
+/**
+ * @summary A group component for organizing items within ai-dropdown-menu.
+ *
+ * @description
+ * This component groups related dropdown menu items together with an optional label.
+ * It provides semantic structure and visual organization for dropdown menu content.
+ *
+ * @since 1.2.0
+ *
+ * @slot - The default slot for dropdown menu items.
+ * @slot label - The label slot for the group heading text.
+ */
+export declare class ForgeAiDropdownMenuItemGroupComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    private _labelSlottedNodes;
+    private _groupId;
+    private get _hasLabel();
+    render(): TemplateResult;
+}

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

@@ -0,0 +1,80 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { queryAssignedNodes, state, customElement } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { generateUniqueId } from "../utils.mjs";
+import styles from "./ai-dropdown-menu-item-group.scss.mjs";
+import "./ai-dropdown-menu-separator.mjs";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _labelSlot, _contentSlot, _ForgeAiDropdownMenuItemGroupComponent_instances, conditionalLabel_get, handleSlotChange_fn;
+let ForgeAiDropdownMenuItemGroupComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _ForgeAiDropdownMenuItemGroupComponent_instances);
+    this._groupId = generateUniqueId("group");
+    __privateAdd(this, _labelSlot, html`<slot name="label"></slot>`);
+    __privateAdd(this, _contentSlot, html`<slot></slot>`);
+  }
+  get _hasLabel() {
+    return this._labelSlottedNodes.length > 0;
+  }
+  render() {
+    return html`
+      <forge-ai-dropdown-menu-separator></forge-ai-dropdown-menu-separator>
+      <div
+        class="ai-dropdown-menu-item-group"
+        role="${ifDefined(this._hasLabel ? "group" : void 0)}"
+        aria-labelledby="${ifDefined(this._hasLabel ? `${this._groupId}-label` : void 0)}">
+        ${__privateGet(this, _ForgeAiDropdownMenuItemGroupComponent_instances, conditionalLabel_get)}
+        <div class="ai-dropdown-menu-item-group__content" @slotchange=${__privateMethod(this, _ForgeAiDropdownMenuItemGroupComponent_instances, handleSlotChange_fn)}>
+          ${__privateGet(this, _contentSlot)}
+        </div>
+      </div>
+    `;
+  }
+};
+_labelSlot = /* @__PURE__ */ new WeakMap();
+_contentSlot = /* @__PURE__ */ new WeakMap();
+_ForgeAiDropdownMenuItemGroupComponent_instances = /* @__PURE__ */ new WeakSet();
+conditionalLabel_get = function() {
+  return when(
+    this._hasLabel,
+    () => html`<div class="ai-dropdown-menu-item-group__label" id="${this._groupId}-label">${__privateGet(this, _labelSlot)}</div>`,
+    () => __privateGet(this, _labelSlot)
+  );
+};
+handleSlotChange_fn = function(evt) {
+  const slotName = evt.target.name;
+  if (slotName === "label") {
+    this.requestUpdate();
+  }
+};
+ForgeAiDropdownMenuItemGroupComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  queryAssignedNodes({ slot: "label", flatten: true })
+], ForgeAiDropdownMenuItemGroupComponent.prototype, "_labelSlottedNodes", 2);
+__decorateClass([
+  state()
+], ForgeAiDropdownMenuItemGroupComponent.prototype, "_groupId", 2);
+ForgeAiDropdownMenuItemGroupComponent = __decorateClass([
+  customElement("forge-ai-dropdown-menu-item-group")
+], ForgeAiDropdownMenuItemGroupComponent);
+export {
+  ForgeAiDropdownMenuItemGroupComponent
+};

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

@@ -0,0 +1,4 @@
+const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\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.ai-dropdown-menu-item-group {\n  display: block;\n  margin-block: var(--forge-spacing-xsmall, 8px);\n}\n\n::slotted([slot=label]) {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-overline-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-overline-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-overline-font-size-scale, 0.75)));\n  font-weight: var(--forge-typography-overline-font-weight, 500);\n  line-height: var(--forge-typography-overline-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-overline-line-height-scale, 2)));\n  letter-spacing: var(--forge-typography-overline-letter-spacing, 0.1666666667em);\n  text-transform: var(--forge-typography-overline-text-transform, uppercase);\n  text-decoration: var(--forge-typography-overline-text-decoration, inherit);\n  margin-inline: var(--forge-spacing-small, 12px);\n  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}\n\n.ai-dropdown-menu-item-group__content {\n  display: block;\n}';
+export {
+  styles as default
+};

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

@@ -0,0 +1,133 @@
+import { LitElement, TemplateResult } from 'lit';
+import { DropdownMenuSelectionMode } from './selection-manager.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-dropdown-menu-item': ForgeAiDropdownMenuItemComponent;
+    }
+}
+/**
+ * @summary An item component for use within ai-dropdown-menu with submenu support.
+ *
+ * @description
+ * This component represents an individual item within a dropdown menu and supports
+ * advanced features including submenus, configurable selection states, and
+ * accessibility-compliant interactions.
+ *
+ * ## Features
+ * - **Selection States**: Supports none, single, and multi-selection modes
+ * - **Submenu Support**: Can contain nested dropdown menus with configurable triggers
+ * - **Accessibility**: Complete ARIA implementation with proper roles and states
+ * - **Configurable Behavior**: Customizable submenu trigger timing and behavior
+ * - **Rich Content**: Supports text, descriptions, icons, and custom content
+ *
+ * ## Submenu Configuration
+ * The component supports three submenu trigger modes:
+ * - **'hover'**: Opens on mouse hover (default)
+ * - **'click'**: Opens on click/tap
+ * - **'both'**: Opens on both hover and click
+ *
+ * @since 1.2.0
+ *
+ * @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.
+ *
+ * @slot - The default slot for item text content.
+ * @slot description - The description slot for additional item details.
+ * @slot start - The start icon slot.
+ * @slot end - The end icon slot.
+ * @slot submenu - The slot for nested dropdown menu components.
+ *
+ * @example
+ * ```html
+ * <!-- Basic menu item -->
+ * <forge-ai-dropdown-menu-item value="basic">Basic Item</forge-ai-dropdown-menu-item>
+ *
+ * <!-- Menu item with description -->
+ * <forge-ai-dropdown-menu-item value="detailed">
+ *   Detailed Item
+ *   <span slot="description">Additional information</span>
+ * </forge-ai-dropdown-menu-item>
+ *
+ * <!-- Menu item with submenu -->
+ * <forge-ai-dropdown-menu-item
+ *   value="parent"
+ *   submenu-trigger="hover"
+ *   submenu-open-delay="200">
+ *   Parent Item
+ *   <forge-ai-dropdown-menu slot="submenu">
+ *     <forge-ai-dropdown-menu-item value="child1">Child 1</forge-ai-dropdown-menu-item>
+ *     <forge-ai-dropdown-menu-item value="child2">Child 2</forge-ai-dropdown-menu-item>
+ *   </forge-ai-dropdown-menu>
+ * </forge-ai-dropdown-menu-item>
+ * ```
+ */
+export declare class ForgeAiDropdownMenuItemComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    /**
+     * The value associated with this menu item.
+     */
+    value: string;
+    /**
+     * Whether this menu item is selected.
+     */
+    selected: boolean;
+    /**
+     * Whether this menu item is disabled.
+     */
+    disabled: boolean;
+    /**
+     * The selection mode for this menu item.
+     * This is typically set by the parent dropdown menu component.
+     */
+    selectionMode: DropdownMenuSelectionMode;
+    /**
+     * The trigger behavior for submenu opening.
+     * - 'hover': Opens on mouse hover (default)
+     * - 'click': Opens on click
+     * - 'both': Opens on both hover and click
+     */
+    submenuTrigger: 'hover' | 'click' | 'both';
+    /**
+     * The delay in milliseconds before opening a submenu on hover.
+     */
+    submenuOpenDelay: number;
+    /**
+     * The delay in milliseconds before closing a submenu when mouse leaves.
+     */
+    submenuCloseDelay: number;
+    private _startSlottedElements;
+    private _endSlottedElements;
+    private _descriptionSlottedNodes;
+    private _defaultSlottedNodes;
+    private _childSubmenu;
+    private _submenuOpen;
+    private _hoverTimeout;
+    private _leaveTimeout;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private _updateSubmenuAttributes;
+    private _updateSubmenuState;
+    private _onMouseEnter;
+    private _onMouseLeave;
+    private _onItemClick;
+    private _onKeyDown;
+    private _clearAllTimeouts;
+    private _focusFirstSubmenuItem;
+    private _updateRole;
+    private get _hasStartIcon();
+    private get _hasEndIcon();
+    private get _hasDescriptionContent();
+    private get _shouldShowSelectionIcon();
+    private get _shouldReserveSelectionSpace();
+    private get _hasSubmenu();
+    /**
+     * Gets the text content from the default slot (label text only).
+     */
+    get labelText(): string;
+    private get _selectionIcon();
+    private readonly _submenuArrowIcon;
+    render(): TemplateResult;
+}

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

@@ -0,0 +1,335 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, queryAssignedElements, queryAssignedNodes, state, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { when } from "lit/directives/when.js";
+import styles from "./ai-dropdown-menu-item.scss.mjs";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _startIconSlot, _endIconSlot, _ForgeAiDropdownMenuItemComponent_instances, selectionIconSlot_get, handleSlotChange_fn;
+let ForgeAiDropdownMenuItemComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _ForgeAiDropdownMenuItemComponent_instances);
+    this.value = "";
+    this.selected = false;
+    this.disabled = false;
+    this.selectionMode = "none";
+    this.submenuTrigger = "hover";
+    this.submenuOpenDelay = 150;
+    this.submenuCloseDelay = 300;
+    this._submenuOpen = false;
+    this._hoverTimeout = null;
+    this._leaveTimeout = null;
+    this._onMouseEnter = () => {
+      if (this._hasSubmenu && !this.disabled && (this.submenuTrigger === "hover" || this.submenuTrigger === "both")) {
+        this._clearAllTimeouts();
+        this._hoverTimeout = window.setTimeout(() => {
+          this._submenuOpen = true;
+        }, this.submenuOpenDelay);
+      }
+    };
+    this._onMouseLeave = () => {
+      if (this._hasSubmenu && (this.submenuTrigger === "hover" || this.submenuTrigger === "both")) {
+        this._clearAllTimeouts();
+        this._leaveTimeout = window.setTimeout(() => {
+          this._submenuOpen = false;
+        }, this.submenuCloseDelay);
+      }
+    };
+    this._onItemClick = (event) => {
+      if (this.disabled) {
+        return;
+      }
+      if (this._hasSubmenu && (this.submenuTrigger === "click" || this.submenuTrigger === "both")) {
+        event.stopPropagation();
+        this._clearAllTimeouts();
+        this._submenuOpen = !this._submenuOpen;
+        if (this._submenuOpen) {
+          this._focusFirstSubmenuItem();
+        }
+      }
+    };
+    this._onKeyDown = (event) => {
+      if (this.disabled) {
+        return;
+      }
+      switch (event.key) {
+        case "ArrowRight":
+          if (this._hasSubmenu) {
+            event.preventDefault();
+            event.stopPropagation();
+            this._clearAllTimeouts();
+            this._submenuOpen = true;
+            this._focusFirstSubmenuItem();
+          }
+          break;
+        case "ArrowLeft":
+          if (this._submenuOpen) {
+            event.preventDefault();
+            event.stopPropagation();
+            this._clearAllTimeouts();
+            this._submenuOpen = false;
+            this.focus();
+          }
+          break;
+        case "Escape":
+          if (this._submenuOpen) {
+            event.preventDefault();
+            event.stopPropagation();
+            this._clearAllTimeouts();
+            this._submenuOpen = false;
+            this.focus();
+          }
+          break;
+      }
+    };
+    this._submenuArrowIcon = html`
+    <svg class="ai-dropdown-menu-item__submenu-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z" />
+    </svg>
+  `;
+    __privateAdd(this, _startIconSlot, html`<div class="ai-dropdown-menu-item__icon"><slot name="start"></slot></div>`);
+    __privateAdd(this, _endIconSlot, html`<div class="ai-dropdown-menu-item__icon"><slot name="end"></slot></div>`);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("tabindex", "-1");
+    this._updateRole();
+    this._updateSubmenuAttributes();
+    this.addEventListener("mouseenter", this._onMouseEnter);
+    this.addEventListener("mouseleave", this._onMouseLeave);
+    this.addEventListener("keydown", this._onKeyDown);
+    this.addEventListener("click", this._onItemClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("mouseenter", this._onMouseEnter);
+    this.removeEventListener("mouseleave", this._onMouseLeave);
+    this.removeEventListener("keydown", this._onKeyDown);
+    this.removeEventListener("click", this._onItemClick);
+    this._clearAllTimeouts();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("selected")) {
+      if (this.selectionMode === "single") {
+        this.setAttribute("aria-selected", this.selected.toString());
+      } else {
+        this.removeAttribute("aria-selected");
+      }
+      if (this.selectionMode === "multi") {
+        this.setAttribute("aria-checked", this.selected.toString());
+      }
+    }
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", this.disabled.toString());
+    }
+    if (changedProperties.has("selectionMode")) {
+      this._updateRole();
+      this._updateSubmenuAttributes();
+      if (this.selectionMode === "single") {
+        this.setAttribute("aria-selected", this.selected.toString());
+        this.removeAttribute("aria-checked");
+      } else if (this.selectionMode === "multi") {
+        this.setAttribute("aria-checked", this.selected.toString());
+        this.removeAttribute("aria-selected");
+      } else {
+        this.removeAttribute("aria-selected");
+        this.removeAttribute("aria-checked");
+      }
+    }
+    if (changedProperties.has("_submenuOpen")) {
+      this._updateSubmenuState();
+    }
+  }
+  _updateSubmenuAttributes() {
+    if (this._hasSubmenu) {
+      this.setAttribute("aria-haspopup", "menu");
+      this.setAttribute("aria-expanded", this._submenuOpen.toString());
+    } else {
+      this.removeAttribute("aria-haspopup");
+      this.removeAttribute("aria-expanded");
+    }
+  }
+  _updateSubmenuState() {
+    if (this._hasSubmenu && this._childSubmenu.length > 0) {
+      const submenu = this._childSubmenu[0];
+      submenu.open = this._submenuOpen;
+    }
+    if (this._hasSubmenu) {
+      this.setAttribute("aria-expanded", this._submenuOpen.toString());
+    }
+  }
+  _clearAllTimeouts() {
+    if (this._hoverTimeout !== null) {
+      window.clearTimeout(this._hoverTimeout);
+      this._hoverTimeout = null;
+    }
+    if (this._leaveTimeout !== null) {
+      window.clearTimeout(this._leaveTimeout);
+      this._leaveTimeout = null;
+    }
+  }
+  _focusFirstSubmenuItem() {
+    if (this._childSubmenu.length > 0) {
+      const submenu = this._childSubmenu[0];
+      requestAnimationFrame(() => {
+        submenu.focusFirstItem?.();
+      });
+    }
+  }
+  _updateRole() {
+    switch (this.selectionMode) {
+      case "single":
+        this.setAttribute("role", "menuitemradio");
+        break;
+      case "multi":
+        this.setAttribute("role", "menuitemcheckbox");
+        break;
+      case "none":
+      default:
+        this.setAttribute("role", "menuitem");
+        break;
+    }
+  }
+  get _hasStartIcon() {
+    return this._startSlottedElements.length > 0;
+  }
+  get _hasEndIcon() {
+    return this._endSlottedElements.length > 0;
+  }
+  get _hasDescriptionContent() {
+    return this._descriptionSlottedNodes.length > 0;
+  }
+  get _shouldShowSelectionIcon() {
+    return this.selectionMode !== "none" && this.selected;
+  }
+  get _shouldReserveSelectionSpace() {
+    return this.selectionMode !== "none";
+  }
+  get _hasSubmenu() {
+    return this._childSubmenu.length > 0;
+  }
+  /**
+   * Gets the text content from the default slot (label text only).
+   */
+  get labelText() {
+    return this._defaultSlottedNodes.map((node) => node.textContent?.trim() || "").join(" ").trim();
+  }
+  get _selectionIcon() {
+    const iconPath = this.selectionMode === "multi" ? "M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z" : "M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4";
+    return html`
+      <svg class="ai-dropdown-menu-item__selection-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="${iconPath}" />
+      </svg>
+    `;
+  }
+  render() {
+    const classes = {
+      "ai-dropdown-menu-item": true,
+      "ai-dropdown-menu-item--with-selection": this._shouldReserveSelectionSpace,
+      "ai-dropdown-menu-item--with-description": this._hasDescriptionContent,
+      "ai-dropdown-menu-item--selected": this.selected,
+      "ai-dropdown-menu-item--disabled": this.disabled,
+      "ai-dropdown-menu-item--with-submenu": this._hasSubmenu
+    };
+    return html`
+      <div class=${classMap(classes)}>
+        ${when(this._shouldReserveSelectionSpace, () => __privateGet(this, _ForgeAiDropdownMenuItemComponent_instances, selectionIconSlot_get))}
+        ${when(this._hasStartIcon, () => __privateGet(this, _startIconSlot))}
+        <div class="ai-dropdown-menu-item__content" @slotchange=${__privateMethod(this, _ForgeAiDropdownMenuItemComponent_instances, handleSlotChange_fn)}>
+          <span class="ai-dropdown-menu-item__text"><slot></slot></span>
+          ${when(
+      this._hasDescriptionContent,
+      () => html`<span class="ai-dropdown-menu-item__description"><slot name="description"></slot></span>`,
+      () => html`<slot name="description"></slot>`
+    )}
+        </div>
+        ${when(this._hasEndIcon, () => __privateGet(this, _endIconSlot))}
+        ${when(
+      this._hasSubmenu,
+      () => html`<div class="ai-dropdown-menu-item__submenu-arrow-container">${this._submenuArrowIcon}</div>`
+    )}
+      </div>
+      <div class="focus-indicator"></div>
+      <slot name="submenu"></slot>
+    `;
+  }
+};
+_startIconSlot = /* @__PURE__ */ new WeakMap();
+_endIconSlot = /* @__PURE__ */ new WeakMap();
+_ForgeAiDropdownMenuItemComponent_instances = /* @__PURE__ */ new WeakSet();
+selectionIconSlot_get = function() {
+  return html`<div class="ai-dropdown-menu-item__selection-icon">
+      ${this._shouldShowSelectionIcon ? this._selectionIcon : ""}
+    </div>`;
+};
+handleSlotChange_fn = function(_evt) {
+  this.requestUpdate();
+};
+ForgeAiDropdownMenuItemComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property()
+], ForgeAiDropdownMenuItemComponent.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ForgeAiDropdownMenuItemComponent.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ForgeAiDropdownMenuItemComponent.prototype, "disabled", 2);
+__decorateClass([
+  property({ attribute: "selection-mode" })
+], ForgeAiDropdownMenuItemComponent.prototype, "selectionMode", 2);
+__decorateClass([
+  property({ attribute: "submenu-trigger" })
+], ForgeAiDropdownMenuItemComponent.prototype, "submenuTrigger", 2);
+__decorateClass([
+  property({ attribute: "submenu-open-delay", type: Number })
+], ForgeAiDropdownMenuItemComponent.prototype, "submenuOpenDelay", 2);
+__decorateClass([
+  property({ attribute: "submenu-close-delay", type: Number })
+], ForgeAiDropdownMenuItemComponent.prototype, "submenuCloseDelay", 2);
+__decorateClass([
+  queryAssignedElements({ slot: "start", flatten: true })
+], ForgeAiDropdownMenuItemComponent.prototype, "_startSlottedElements", 2);
+__decorateClass([
+  queryAssignedElements({ slot: "end", flatten: true })
+], ForgeAiDropdownMenuItemComponent.prototype, "_endSlottedElements", 2);
+__decorateClass([
+  queryAssignedNodes({ slot: "description", flatten: true })
+], ForgeAiDropdownMenuItemComponent.prototype, "_descriptionSlottedNodes", 2);
+__decorateClass([
+  queryAssignedNodes({ flatten: true })
+], ForgeAiDropdownMenuItemComponent.prototype, "_defaultSlottedNodes", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "forge-ai-dropdown-menu" })
+], ForgeAiDropdownMenuItemComponent.prototype, "_childSubmenu", 2);
+__decorateClass([
+  state()
+], ForgeAiDropdownMenuItemComponent.prototype, "_submenuOpen", 2);
+__decorateClass([
+  state()
+], ForgeAiDropdownMenuItemComponent.prototype, "_hoverTimeout", 2);
+__decorateClass([
+  state()
+], ForgeAiDropdownMenuItemComponent.prototype, "_leaveTimeout", 2);
+ForgeAiDropdownMenuItemComponent = __decorateClass([
+  customElement("forge-ai-dropdown-menu-item")
+], ForgeAiDropdownMenuItemComponent);
+export {
+  ForgeAiDropdownMenuItemComponent
+};

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

@@ -0,0 +1,4 @@
+const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\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  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-separator.d.ts

@@ -0,0 +1,18 @@
+import { LitElement, TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-dropdown-menu-separator': ForgeAiDropdownMenuSeparatorComponent;
+    }
+}
+/**
+ * @summary A separator component for dividing sections within ai-dropdown-menu.
+ *
+ * @description
+ * This component renders a horizontal divider to visually separate groups of items
+ * within a dropdown menu. It uses the forge-divider styling.
+ */
+export declare class ForgeAiDropdownMenuSeparatorComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}