@tylertech/forge-ai 0.15.3-dev.0 → 0.16.0-dev.0

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

@@ -1,330 +1,4 @@
-import { unsafeCSS, LitElement, html } from "lit";
-import { property, queryAssignedNodes, queryAssignedElements, 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"
-      aria-hidden="true">
-      <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 _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"
-        aria-hidden="true">
-        <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))} ${__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>
-        ${__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([
-  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
-};
+//#region src/lib/ai-dropdown-menu/ai-dropdown-menu-item.scss?inline
+var ai_dropdown_menu_item_default = ":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  margin: var(--forge-spacing-xxxsmall, 2px) var(--forge-spacing-xxsmall, 4px);\n  padding: 0 var(--forge-spacing-xsmall, 8px);\n  border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  font-size: 0.875rem;\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  font-weight: normal;\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}";
+//#endregion
+export { ai_dropdown_menu_item_default as default };

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

@@ -0,0 +1,280 @@
+import __decorate from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.mjs";
+import ai_dropdown_menu_item_default from "./ai-dropdown-menu-item.mjs";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property, queryAssignedElements, queryAssignedNodes, state } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { classMap } from "lit/directives/class-map.js";
+//#region src/lib/ai-dropdown-menu/ai-dropdown-menu-item.ts
+var ForgeAiDropdownMenuItemComponent = class ForgeAiDropdownMenuItemComponent extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		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 || this._isFromSubmenu(event)) return;
+			if (this._hasSubmenu && (this.submenuTrigger === "click" || this.submenuTrigger === "both")) {
+				event.stopPropagation();
+				this._clearAllTimeouts();
+				this._submenuOpen = !this._submenuOpen;
+				if (this._submenuOpen) this._focusFirstSubmenuItem();
+			}
+		};
+		this._onSubmenuClose = (event) => {
+			if (event.target === this._childSubmenu[0]) {
+				this._clearAllTimeouts();
+				this._submenuOpen = false;
+			}
+		};
+		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();
+				}
+			}
+		};
+		this._submenuArrowIcon = html`
+    <svg class="ai-dropdown-menu-item__submenu-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z" />
+    </svg>
+  `;
+		this.#startIconSlot = html`<div class="ai-dropdown-menu-item__icon"><slot name="start"></slot></div>`;
+		this.#endIconSlot = html`<div class="ai-dropdown-menu-item__icon"><slot name="end"></slot></div>`;
+	}
+	static {
+		this.styles = unsafeCSS(ai_dropdown_menu_item_default);
+	}
+	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);
+		this.addEventListener("forge-ai-dropdown-menu-close", this._onSubmenuClose);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("mouseenter", this._onMouseEnter);
+		this.removeEventListener("mouseleave", this._onMouseLeave);
+		this.removeEventListener("keydown", this._onKeyDown);
+		this.removeEventListener("click", this._onItemClick);
+		this.removeEventListener("forge-ai-dropdown-menu-close", this._onSubmenuClose);
+		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());
+	}
+	_isFromSubmenu(event) {
+		const submenu = this._childSubmenu[0];
+		return !!submenu && event.composedPath().includes(submenu);
+	}
+	_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;
+			default: this.setAttribute("role", "menuitem");
+		}
+	}
+	get _hasDescriptionContent() {
+		return this._descriptionSlottedNodes.length > 0;
+	}
+	get _shouldShowSelectionIcon() {
+		return this.selectionMode !== "none" && this.selected;
+	}
+	get _shouldReserveSelectionSpace() {
+		return this.selectionMode !== "none";
+	}
+	get _childSubmenu() {
+		return this._slottedSubmenu.length > 0 ? this._slottedSubmenu : this._legacySubmenu;
+	}
+	get _hasSubmenu() {
+		return this._childSubmenu.length > 0;
+	}
+	/**
+	* Gets the text content from the default slot (label text only).
+	*/
+	get labelText() {
+		return this._defaultSlottedNodes.filter((node) => !(node instanceof Element && node.matches("forge-ai-dropdown-menu"))).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" aria-hidden="true">
+        <path d="${iconPath}" />
+      </svg>
+    `;
+	}
+	#startIconSlot;
+	#endIconSlot;
+	get #selectionIconSlot() {
+		return html`<div class="ai-dropdown-menu-item__selection-icon">${this._shouldShowSelectionIcon ? this._selectionIcon : ""}</div>`;
+	}
+	#handleSlotChange(_evt) {
+		this._updateSubmenuAttributes();
+		this.requestUpdate();
+	}
+	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, () => this.#selectionIconSlot)} ${this.#startIconSlot}
+        <div class="ai-dropdown-menu-item__content" @slotchange=${this.#handleSlotChange}>
+          <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>
+        ${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" @slotchange=${this.#handleSlotChange}></slot>
+    `;
+	}
+};
+__decorate([property()], ForgeAiDropdownMenuItemComponent.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ForgeAiDropdownMenuItemComponent.prototype, "selected", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ForgeAiDropdownMenuItemComponent.prototype, "disabled", void 0);
+__decorate([property({ attribute: "selection-mode" })], ForgeAiDropdownMenuItemComponent.prototype, "selectionMode", void 0);
+__decorate([property({ attribute: "submenu-trigger" })], ForgeAiDropdownMenuItemComponent.prototype, "submenuTrigger", void 0);
+__decorate([property({
+	attribute: "submenu-open-delay",
+	type: Number
+})], ForgeAiDropdownMenuItemComponent.prototype, "submenuOpenDelay", void 0);
+__decorate([property({
+	attribute: "submenu-close-delay",
+	type: Number
+})], ForgeAiDropdownMenuItemComponent.prototype, "submenuCloseDelay", void 0);
+__decorate([queryAssignedNodes({
+	slot: "description",
+	flatten: true
+})], ForgeAiDropdownMenuItemComponent.prototype, "_descriptionSlottedNodes", void 0);
+__decorate([queryAssignedNodes({ flatten: true })], ForgeAiDropdownMenuItemComponent.prototype, "_defaultSlottedNodes", void 0);
+__decorate([queryAssignedElements({
+	slot: "submenu",
+	selector: "forge-ai-dropdown-menu"
+})], ForgeAiDropdownMenuItemComponent.prototype, "_slottedSubmenu", void 0);
+__decorate([queryAssignedElements({ selector: "forge-ai-dropdown-menu" })], ForgeAiDropdownMenuItemComponent.prototype, "_legacySubmenu", void 0);
+__decorate([state()], ForgeAiDropdownMenuItemComponent.prototype, "_submenuOpen", void 0);
+__decorate([state()], ForgeAiDropdownMenuItemComponent.prototype, "_hoverTimeout", void 0);
+__decorate([state()], ForgeAiDropdownMenuItemComponent.prototype, "_leaveTimeout", void 0);
+ForgeAiDropdownMenuItemComponent = __decorate([customElement("forge-ai-dropdown-menu-item")], ForgeAiDropdownMenuItemComponent);
+//#endregion
+export { ForgeAiDropdownMenuItemComponent };

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

@@ -1,26 +1,4 @@
-import { unsafeCSS, LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
-import styles from "./ai-dropdown-menu-separator.scss.mjs";
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(result) || result;
-  return result;
-};
-let ForgeAiDropdownMenuSeparatorComponent = class extends LitElement {
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  render() {
-    return html`<div class="forge-divider" role="separator"></div>`;
-  }
-};
-ForgeAiDropdownMenuSeparatorComponent.styles = unsafeCSS(styles);
-ForgeAiDropdownMenuSeparatorComponent = __decorateClass([
-  customElement("forge-ai-dropdown-menu-separator")
-], ForgeAiDropdownMenuSeparatorComponent);
-export {
-  ForgeAiDropdownMenuSeparatorComponent
-};
+//#region src/lib/ai-dropdown-menu/ai-dropdown-menu-separator.scss?inline
+var ai_dropdown_menu_separator_default = "/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-divider {\n  --_divider-color:var(--forge-divider-color, var(--forge-theme-outline, #e0e0e0));\n  --_divider-width:var(--forge-divider-width, var(--forge-border-thin, 1px));\n  --_divider-border-style:var(--forge-divider-border-style, solid);\n  --_divider-margin:var(--forge-divider-margin, 0);\n}\n\n.forge-divider {\n  display: block;\n  margin: var(--_divider-margin);\n  border: none;\n  border-bottom-color: var(--_divider-color);\n  border-bottom-width: var(--_divider-width);\n  border-bottom-style: var(--_divider-border-style);\n  height: 0;\n}\n\n:host {\n  display: contents;\n}\n\n.forge-divider {\n  margin: var(--forge-spacing-xsmall, 8px) 0;\n}";
+//#endregion
+export { ai_dropdown_menu_separator_default as default };