@superleapai/flow-ui 2.4.3 → 2.4.5

package/dist/superleap-flow.js

@@ -1,12 +1,12 @@
 /**
- * @superleapai/flow-ui v2.3.4
+ * @superleapai/flow-ui v2.2.9
  * A reusable design system for building multi-step forms
  *
  * Copyright (c) 2024-present SuperLeap
  * Licensed under MIT
  *
  * Build: development
- * Date: 2026-02-19T14:43:01.927Z
+ * Date: 2026-02-16T06:02:03.445Z
  *
  * For documentation and examples, visit:
  * https://github.com/superleap/superleap-flow
@@ -3567,13 +3567,12 @@
 
     /**
      * Tell the CRM to navigate to a path.
-     * @param {string} url
-     * @param {boolean} [newTab=false]
+     * @param {string} path
      */
-    function navigate(url, newTab) {
+    function navigate(path) {
       var bridge = getBridge();
       if (bridge && bridge.isConnected()) {
-        bridge.send("crm:navigate", { url: url, new_tab: !!newTab });
+        bridge.send("crm:navigate", { path: path });
       }
     }
 
@@ -5122,6 +5121,42 @@
       });
     }
 
+    // ============================================================================
+    // ALERT COMPONENT
+    // ============================================================================
+
+    /**
+     * Render alerts/errors
+     * Uses Alert component when available for design-system styling.
+     * @param {HTMLElement} container - Container element for alerts
+     * @param {Array} messages - Array of error/info messages (strings) or { title?, description } objects
+     * @param {string} type - Alert type: "error" | "info" | "success" | "warning" | "destructive" | "default"
+     */
+    function renderAlerts(container, messages = [], type = "error") {
+      if (!container) {return;}
+      container.innerHTML = "";
+
+      const Alert = getComponent("Alert");
+      const useAlertComponent = Alert && typeof Alert.create === "function";
+
+      messages.forEach((msg) => {
+        const description = typeof msg === "string" ? msg : (msg.description || msg.title || "");
+        const title = typeof msg === "object" && msg.title ? msg.title : "";
+
+        if (useAlertComponent && (description || title)) {
+          const variantMap = { error: "error", info: "info", success: "success" };
+          const variant = variantMap[type] || type;
+          const alertEl = Alert.create({ title, description, variant });
+          if (alertEl) container.appendChild(alertEl);
+        } else {
+          const div = document.createElement("div");
+          div.className = `alert alert--${type}`;
+          div.textContent = description || title;
+          container.appendChild(div);
+        }
+      });
+    }
+
     // ============================================================================
     // TABLE COMPONENT
     // ============================================================================
@@ -5456,8 +5491,9 @@
       // Stepper
       renderStepper,
 
-      // Alerts
+      // Alerts (now shows toast notifications)
       showToast,
+      renderAlerts, // Legacy support for static alerts
 
       // Table
       createDataTable,
@@ -6860,12 +6896,12 @@
         ' stroke-width="1.5">' +
         TI_PATH_NONE +
         '<path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg>',
-      IconStar:
+      IconCurrencyDollar:
         "<svg" +
         TI +
         ' stroke-width="1.5">' +
         TI_PATH_NONE +
-        '<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/></svg>',
+        '<path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2"/><path d="M12 3v3m0 12v3"/></svg>',
       IconPhone:
         "<svg" +
         TI +
@@ -7064,18 +7100,9 @@
         return { show: noop, hide: noop, destroy: noop, element: null };
       }
 
-      // Wrap trigger in a relative container so popover can be absolute relative to it (full width so parent controls it)
-      const container = document.createElement("div");
-      container.className = "relative w-full";
-      const triggerParent = triggerEl.parentNode;
-      if (triggerParent) {
-        triggerParent.insertBefore(container, triggerEl);
-        container.appendChild(triggerEl);
-      }
-
       const wrapper = document.createElement("div");
       wrapper.className =
-        "absolute z-50 pointer-events-none opacity-0 invisible transition-opacity duration-150 ease-out";
+        "fixed z-50  pointer-events-none opacity-0 invisible transition-opacity duration-150 ease-out";
       wrapper.setAttribute("aria-hidden", "true");
 
       const panel = document.createElement("div");
@@ -7111,46 +7138,57 @@
       panel.appendChild(body);
 
       wrapper.appendChild(panel);
-      container.appendChild(wrapper);
 
       function noop() {}
 
       function position() {
-        const triggerRect = triggerEl.getBoundingClientRect();
+        const rect = triggerEl.getBoundingClientRect();
         const panelRect = panel.getBoundingClientRect();
         const gap = 8;
         let top = 0;
         let left = 0;
 
         // Alignment offset: start = 0, center = half diff, end = full diff
-        const alignLeft = (align === "center" ? (triggerRect.width - panelRect.width) / 2 : align === "end" ? triggerRect.width - panelRect.width : 0);
-        const alignTop = (align === "center" ? (triggerRect.height - panelRect.height) / 2 : align === "end" ? triggerRect.height - panelRect.height : 0);
+        const alignLeft = (align === "center" ? (rect.width - panelRect.width) / 2 : align === "end" ? rect.width - panelRect.width : 0);
+        const alignTop = (align === "center" ? (rect.height - panelRect.height) / 2 : align === "end" ? rect.height - panelRect.height : 0);
 
         switch (placement) {
           case "bottom":
-            top = triggerRect.height + gap;
-            left = alignLeft;
+            top = rect.bottom + gap;
+            left = rect.left + alignLeft;
             break;
           case "top":
-            top = -panelRect.height - gap;
-            left = alignLeft;
+            top = rect.top - panelRect.height - gap;
+            left = rect.left + alignLeft;
             break;
           case "right":
-            top = alignTop;
-            left = triggerRect.width + gap;
+            top = rect.top + alignTop;
+            left = rect.right + gap;
             break;
           case "left":
-            top = alignTop;
-            left = -panelRect.width - gap;
+            top = rect.top + alignTop;
+            left = rect.left - panelRect.width - gap;
             break;
           default:
-            top = triggerRect.height + gap;
-            left = alignLeft;
+            top = rect.bottom + gap;
+            left = rect.left + alignLeft;
+        }
+
+        // Keep within viewport
+        const padding = 8;
+        if (left < padding) left = padding;
+        if (left + panelRect.width > window.innerWidth - padding) {
+          left = window.innerWidth - panelRect.width - padding;
+        }
+        if (top < padding) top = padding;
+        if (top + panelRect.height > window.innerHeight - padding) {
+          top = window.innerHeight - panelRect.height - padding;
         }
 
-        wrapper.style.transform = "";
-        wrapper.style.top = top + "px";
-        wrapper.style.left = left + "px";
+        wrapper.style.left = "0";
+        wrapper.style.top = "0";
+        wrapper.style.transform = "translate(" + left + "px, " + top + "px)";
+        // Force reflow so transform is applied before we show (avoids flash from left/top-left)
         wrapper.offsetHeight;
       }
 
@@ -7164,7 +7202,24 @@
 
       function show() {
         if (onOpen) onOpen();
-        requestAnimationFrame(function () {
+        var justAppended = !wrapper.parentNode;
+        if (justAppended) {
+          document.body.appendChild(wrapper);
+        }
+        // On first open, wait for layout so getBoundingClientRect() is correct (avoids wrong position / "from left" look)
+        if (justAppended) {
+          requestAnimationFrame(function () {
+            position();
+            wrapper.classList.remove("invisible", "opacity-0", "pointer-events-none");
+            wrapper.classList.add("visible", "opacity-100", "pointer-events-auto");
+            wrapper.setAttribute("aria-hidden", "false");
+            requestAnimationFrame(function () {
+              requestAnimationFrame(function () {
+                panel.setAttribute("data-state", "open");
+              });
+            });
+          });
+        } else {
           position();
           wrapper.classList.remove("invisible", "opacity-0", "pointer-events-none");
           wrapper.classList.add("visible", "opacity-100", "pointer-events-auto");
@@ -7174,7 +7229,7 @@
               panel.setAttribute("data-state", "open");
             });
           });
-        });
+        }
       }
 
       function destroy() {
@@ -7182,10 +7237,6 @@
         if (wrapper.parentNode) {
           wrapper.parentNode.removeChild(wrapper);
         }
-        if (container.parentNode && triggerEl.parentNode === container) {
-          container.parentNode.insertBefore(triggerEl, container);
-          container.parentNode.removeChild(container);
-        }
         if (closeOnClickOutside) {
           document.removeEventListener("click", outsideClick);
         }
@@ -7305,14 +7356,6 @@
       return Array.prototype.filter.call(arguments, Boolean).join(" ");
     }
 
-    function getDep(name) {
-      if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
-        var c = global.FlowUI._getComponent(name);
-        if (c) return c;
-      }
-      return global[name];
-    }
-
     /**
      * Create a custom select component
      * @param {Object} config
@@ -7342,11 +7385,6 @@
       var value =
         config.value !== undefined && config.value !== null ? config.value : "";
 
-      var Popover = getDep("Popover");
-      if (!Popover || typeof Popover.create !== "function") {
-        throw new Error("Select requires Popover");
-      }
-
       var selectedOption = options.find(function (opt) {
         var optValue =
           opt.value !== undefined && opt.value !== null
@@ -7446,7 +7484,11 @@
 
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
-      content.className = "custom-select-content w-full max-h-[200px] overflow-hidden flex flex-col";
+      var contentBase =
+        "custom-select-content absolute left-0 right-0 z-50 max-h-[200px] min-w-[8rem] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium opacity-0 invisible transition-all duration-150 ease-out " +
+        "group-[.open]:opacity-100 group-[.open]:visible ";
+      content.className =
+        contentBase + "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
 
       var optionsList = document.createElement("div");
       optionsList.className =
@@ -7500,66 +7542,47 @@
       }
 
       content.appendChild(optionsList);
+      container.appendChild(content);
 
+      var isOpen = false;
       var highlightedIndex = -1;
-      var popover = Popover.create({
-        trigger: trigger,
-        content: content,
-        placement: "bottom",
-        align: "start",
-        closeOnClickOutside: true,
-        bodyClassName: "p-0 overflow-hidden",
-        panelClassName: "min-w-[var(--trigger-width)] max-h-[200px] overflow-hidden",
-        onOpen: function () {
-          if (disabled) {
-            popover.hide();
-            return;
-          }
-          document
-            .querySelectorAll(".custom-select, .record-select, .enum-select, .enum-multiselect, .custom-multiselect, .record-multiselect")
-            .forEach(function (other) {
-              if (other !== container && other.popoverInstance) {
-                other.popoverInstance.hide();
-              }
-            });
-          trigger.setAttribute("aria-expanded", "true");
-          chevron.style.transform = "rotate(180deg)";
-          highlightOptionByValue(value);
-          if (popover.panel) {
-            var triggerWidthPx = trigger.offsetWidth + "px";
-            popover.panel.style.setProperty("--trigger-width", triggerWidthPx);
-            popover.panel.style.minWidth = triggerWidthPx;
-            popover.panel.style.width = triggerWidthPx;
-          }
-        },
-        onClose: function () {
-          trigger.setAttribute("aria-expanded", "false");
-          chevron.style.transform = "";
-          highlightedIndex = -1;
-        },
-      });
-      container.popoverInstance = popover;
 
       function openDropdown() {
         if (disabled) return;
-        popover.show();
+        document
+          .querySelectorAll(".custom-select.open, .record-select.open")
+          .forEach(function (other) {
+            if (other !== container) {
+              other.classList.remove("open");
+              var t = other.querySelector(
+                "button, .custom-select-trigger, .record-select-trigger"
+              );
+              if (t) t.setAttribute("aria-expanded", "false");
+            }
+          });
+        isOpen = true;
+        container.classList.add("open");
+        trigger.setAttribute("aria-expanded", "true");
+        highlightOptionByValue(value);
+        updatePosition();
       }
 
       function closeDropdown() {
-        popover.hide();
+        isOpen = false;
+        container.classList.remove("open");
+        trigger.setAttribute("aria-expanded", "false");
         highlightedIndex = -1;
       }
 
       function toggleDropdown() {
-        var isVisible = popover.element && popover.element.classList.contains("visible");
         var others = document.querySelectorAll(
-          ".custom-select, .record-select, .enum-select, .enum-multiselect, .custom-multiselect, .record-multiselect"
+          ".custom-select.open, .record-select.open"
         );
         var hasOther = Array.from(others).some(function (s) {
-          return s !== container && s.popoverInstance && s.popoverInstance.element && s.popoverInstance.element.classList.contains("visible");
+          return s !== container;
         });
         if (hasOther) openDropdown();
-        else if (isVisible) closeDropdown();
+        else if (isOpen) closeDropdown();
         else openDropdown();
       }
 
@@ -7638,26 +7661,40 @@
 
       function scrollToOption(opt) {
         if (!opt) return;
-        var cr = optionsList.getBoundingClientRect();
+        var cr = content.getBoundingClientRect();
         var top = opt.offsetTop;
         var bottom = top + opt.offsetHeight;
-        var st = optionsList.scrollTop;
+        var st = content.scrollTop;
         var sb = st + cr.height;
-        if (top < st) optionsList.scrollTop = top - 8;
+        if (top < st) content.scrollTop = top - 8;
         else if (bottom > sb)
-          optionsList.scrollTop = bottom - cr.height + 8;
+          content.scrollTop = bottom - cr.height + 8;
+      }
+
+      function updatePosition() {
+        var rect = trigger.getBoundingClientRect();
+        var vh = window.innerHeight;
+        var below = vh - rect.bottom;
+        var above = rect.top;
+        if (below < 200 && above > below) {
+          content.className =
+            contentBase +
+            "bottom-full mb-1 translate-y-1 group-[.open]:translate-y-0";
+        } else {
+          content.className =
+            contentBase +
+            "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
+        }
       }
 
       trigger.addEventListener("click", function (e) {
-        if (disabled) {
-          e.preventDefault();
-          e.stopImmediatePropagation();
-        }
-      }, true);
+        e.preventDefault();
+        e.stopPropagation();
+        toggleDropdown();
+      });
 
       trigger.addEventListener("keydown", function (e) {
         if (disabled) return;
-        var isVisible = popover.element && popover.element.classList.contains("visible");
         switch (e.key) {
           case "Enter":
           case " ":
@@ -7666,16 +7703,16 @@
             break;
           case "ArrowDown":
             e.preventDefault();
-            if (!isVisible) openDropdown();
+            if (!isOpen) openDropdown();
             else navigateOptions(1);
             break;
           case "ArrowUp":
             e.preventDefault();
-            if (!isVisible) openDropdown();
+            if (!isOpen) openDropdown();
             else navigateOptions(-1);
             break;
           case "Escape":
-            if (isVisible) {
+            if (isOpen) {
               e.preventDefault();
               closeDropdown();
             }
@@ -7696,6 +7733,13 @@
         scrollToOption(opt);
       }
 
+      document.addEventListener("click", function (e) {
+        if (isOpen && !container.contains(e.target)) closeDropdown();
+      });
+      document.addEventListener("keydown", function (e) {
+        if (e.key === "Escape" && isOpen) closeDropdown();
+      });
+
       container.updateValue = function (newValue) {
         value =
           newValue !== undefined && newValue !== null ? newValue : "";
@@ -7792,8 +7836,7 @@
           canClear && !!value && !disabled
         );
         updateClearButton();
-        var isVisible = popover.element && popover.element.classList.contains("visible");
-        if (disabled && isVisible) closeDropdown();
+        if (disabled && isOpen) closeDropdown();
       };
 
       return container;
@@ -7883,14 +7926,6 @@
       return Array.prototype.filter.call(arguments, Boolean).join(" ");
     }
 
-    function getDep(name) {
-      if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
-        var c = global.FlowUI._getComponent(name);
-        if (c) return c;
-      }
-      return global[name];
-    }
-
     /** Resolve client: use FlowUI._getComponent when bundle has captured globals, else global.superleapClient */
     function getClient() {
       if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
@@ -7954,10 +7989,8 @@
       var error = null;
       var searchQuery = "";
       var popover = null;
-      var Popover = getDep("Popover");
-      if (!Popover || typeof Popover.create !== "function") {
-        throw new Error("EnumSelect requires Popover");
-      }
+      var usePopover = !!(global.Popover && typeof global.Popover.create === "function");
+      var isOpen = false;
 
       var container = document.createElement("div");
       container.className = "enum-select relative w-full group";
@@ -8041,7 +8074,13 @@
       // Create dropdown content
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
-      content.className = "w-full min-w-[200px] max-h-[30vh] overflow-hidden flex flex-col";
+      var contentBase = "w-full min-w-[200px]";
+      if (!usePopover) {
+        contentBase += " absolute left-0 right-0 z-50 max-h-[30vh] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium border-1/2 border-border-primary opacity-0 invisible transition-all duration-150 ease-out group-[.open]:opacity-100 group-[.open]:visible top-full mt-1 -translate-y-1 group-[.open]:translate-y-0 flex flex-col";
+      } else {
+        contentBase += " max-h-[30vh] overflow-hidden flex flex-col";
+      }
+      content.className = contentBase;
 
       // Search input (using InputComponent like phone-input)
       var searchContainer = document.createElement("div");
@@ -8107,6 +8146,10 @@
       content.appendChild(searchContainer);
       content.appendChild(optionsList);
 
+      if (!usePopover) {
+        container.appendChild(content);
+      }
+
       var highlightedIndex = -1;
 
       function showLoading() {
@@ -8229,14 +8272,37 @@
 
       function openDropdown() {
         if (disabled) return;
+        if (popover) {
+          // Close other open selects
+          document
+            .querySelectorAll(".enum-select, .custom-select, .record-select")
+            .forEach(function (other) {
+              if (other !== container && other.popoverInstance) {
+                other.popoverInstance.hide();
+              }
+            });
+          popover.show();
+          trigger.setAttribute("aria-expanded", "true");
+          highlightOptionByValue(value);
+          if (searchInput) {
+            setTimeout(function () {
+              searchInput.focus();
+            }, 50);
+          }
+          return;
+        }
+        // Fallback when Popover not available
         document
-          .querySelectorAll(".enum-select, .custom-select, .record-select")
+          .querySelectorAll(".enum-select.open")
           .forEach(function (other) {
-            if (other !== container && other.popoverInstance) {
-              other.popoverInstance.hide();
+            if (other !== container) {
+              other.classList.remove("open");
+              var t = other.querySelector("button");
+              if (t) t.setAttribute("aria-expanded", "false");
             }
           });
-        popover.show();
+        isOpen = true;
+        container.classList.add("open");
         trigger.setAttribute("aria-expanded", "true");
         highlightOptionByValue(value);
         if (searchInput) {
@@ -8247,7 +8313,12 @@
       }
 
       function closeDropdown() {
-        popover.hide();
+        if (popover) {
+          popover.hide();
+        } else {
+          isOpen = false;
+          container.classList.remove("open");
+        }
         trigger.setAttribute("aria-expanded", "false");
         highlightedIndex = -1;
         clearSearch();
@@ -8255,7 +8326,9 @@
       }
 
       function toggleDropdown() {
-        var isVisible = popover.element && popover.element.classList.contains("visible");
+        var isVisible = popover
+          ? popover.element && popover.element.classList.contains("visible")
+          : isOpen;
         if (isVisible) {
           closeDropdown();
         } else {
@@ -8366,7 +8439,10 @@
 
       // Initialize Popover
       function initializePopover() {
-        popover = Popover.create({
+        if (!usePopover) {
+          return;
+        }
+        popover = global.Popover.create({
           trigger: trigger,
           content: content,
           placement: "bottom",
@@ -8382,12 +8458,6 @@
           onOpen: function () {
             trigger.setAttribute("aria-expanded", "true");
             chevron.style.transform = "rotate(180deg)";
-            if (popover.panel) {
-              var triggerWidthPx = trigger.offsetWidth + "px";
-              popover.panel.style.setProperty("--trigger-width", triggerWidthPx);
-              popover.panel.style.minWidth = triggerWidthPx;
-              popover.panel.style.width = triggerWidthPx;
-            }
           },
           bodyClassName: "p-0 overflow-hidden",
           panelClassName: "min-w-[var(--trigger-width)] overflow-hidden",
@@ -8395,6 +8465,13 @@
 
         // Store popover instance for cleanup
         container.popoverInstance = popover;
+        
+        // Set CSS variable for trigger width
+        var triggerWidth = trigger.offsetWidth;
+        if (popover.panel) {
+          popover.panel.style.setProperty("--trigger-width", triggerWidth + "px");
+          popover.panel.style.minWidth = triggerWidth + "px";
+        }
       }
 
       // Load options from SDK
@@ -8514,6 +8591,21 @@
       initializePopover();
       loadOptions();
 
+      if (!usePopover) {
+        trigger.addEventListener("click", function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+          if (disabled) return;
+          toggleDropdown();
+        });
+        document.addEventListener("click", function (e) {
+          if (isOpen && !container.contains(e.target)) closeDropdown();
+        });
+        document.addEventListener("keydown", function (e) {
+          if (e.key === "Escape" && isOpen) closeDropdown();
+        });
+      }
+
       // Public API
       container.updateValue = function (newValue) {
         value = newValue !== undefined && newValue !== null ? newValue : "";
@@ -8558,7 +8650,7 @@
         );
         updateClearButton();
         var isVisible = popover && popover.element && popover.element.classList.contains("visible");
-        if (disabled && isVisible) closeDropdown();
+        if (disabled && (isVisible || isOpen)) closeDropdown();
       };
 
       container.reload = function () {
@@ -8596,7 +8688,7 @@
   /**
    * Record Select Component (superleap-flow)
    * Single-record select with search; same trigger/content styling as Select.
-   * Uses Popover for dropdown (required), InputComponent (search), Spinner (loading), Avatar (vivid for user).
+   * Uses: Popover (dropdown), InputComponent (search), Spinner (loading), Avatar (vivid for user).
    * Fetches records via superleapClient.getSdk().model(objectSlug).
    * For objectSlug === 'user' shows Vivid Avatar; otherwise static icon from schema or object map (database fallback).
    * Does not use icon from backend payload.
@@ -8617,7 +8709,7 @@
       role: { iconStr: "IconShield", color: "info" },
       iframe: { iconStr: "IconLayout", color: "neutral" },
       lead: { iconStr: "IconUser", color: "primary" },
-      opportunity: { iconStr: "IconStar", color: "success" },
+      opportunity: { iconStr: "IconCurrencyDollar", color: "success" },
       call_log: { iconStr: "IconPhone", color: "info" },
       communication: { iconStr: "IconMessage", color: "primary" },
       history_field: { iconStr: "IconClock", color: "neutral" },
@@ -8764,12 +8856,6 @@
         errEl.textContent = "Record select: objectSlug is required.";
         return errEl;
       }
-      if (!Popover || typeof Popover.create !== "function") {
-        var popoverErr = document.createElement("div");
-        popoverErr.className = "text-reg-13 text-typography-quaternary-text";
-        popoverErr.textContent = "Record select: Popover is required.";
-        return popoverErr;
-      }
 
       var container = document.createElement("div");
       container.className = "record-select relative w-full group";
@@ -8782,11 +8868,16 @@
       var isOpen = false;
       var searchTerm = "";
       var searchDebounceTimer = null;
+      var usePopover = Popover && typeof Popover.create === "function";
       var popover = null;
       var hasMoreRecords = true;
       var currentPage = 1;
       var isFetchingMore = false;
       var totalFetched = 0;
+      var contentBase = "record-select-content min-w-[8rem] ";
+      if (!usePopover) {
+        contentBase += "absolute left-0 right-0 z-50 max-h-[30vh] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium opacity-0 invisible transition-all duration-150 ease-out group-[.open]:opacity-100 group-[.open]:visible ";
+      }
 
       // Trigger wrapper + button (same structure as Select)
       var triggerWrapper = document.createElement("span");
@@ -8852,7 +8943,7 @@
       // Dropdown content: search + list (same content pattern as Select)
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
-      content.className = "record-select-content  max-h-[30vh] overflow-hidden flex flex-col";
+      content.className = contentBase + (usePopover ? "max-h-[30vh] overflow-hidden flex flex-col" : "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0");
 
       var searchWrap = document.createElement("div");
       searchWrap.className = "py-8 border-b-1/2 border-border-primary";
@@ -8919,51 +9010,57 @@
       
       content.appendChild(optionsList);
 
-      popover = Popover.create({
-        trigger: trigger,
-        content: content,
-        placement: "bottom",
-        align: "start",
-        closeOnClickOutside: true,
-        bodyClassName: "p-0 overflow-hidden",
-        panelClassName: "max-h-[30vh] overflow-hidden",
-        onOpen: function () {
-          if (disabled) {
-            popover.hide();
-            return;
-          }
-          document.querySelectorAll(".custom-select.open, .record-select.open").forEach(function (other) {
-            if (other !== container) {
-              other.classList.remove("open");
-              var t = other.querySelector("button, .custom-select-trigger, .record-select-trigger");
-              if (t) t.setAttribute("aria-expanded", "false");
+      if (!usePopover) {
+        container.appendChild(content);
+      }
+
+      if (usePopover) {
+        popover = Popover.create({
+          trigger: trigger,
+          content: content,
+          placement: "bottom",
+          align: "start",
+          closeOnClickOutside: true,
+          bodyClassName: "p-0 overflow-hidden",
+          panelClassName: "max-h-[30vh] overflow-hidden",
+          onOpen: function () {
+            if (disabled) {
+              popover.hide();
+              return;
             }
-          });
-          isOpen = true;
-          container.classList.add("open");
-          trigger.setAttribute("aria-expanded", "true");
-          searchTerm = "";
-          if (searchInputWrapper) searchInputWrapper.setValue("");
-          else if (searchInputEl) searchInputEl.value = "";
-          content.style.minWidth = trigger.offsetWidth + "px";
-          loadInitialAndRender();
-          setTimeout(function () {
-            if (searchInputEl) searchInputEl.focus();
-          }, 0);
-        },
-        onClose: function () {
-          isOpen = false;
-          container.classList.remove("open");
-          trigger.setAttribute("aria-expanded", "false");
-          searchTerm = "";
-          if (searchInputWrapper) searchInputWrapper.setValue("");
-          else if (searchInputEl) searchInputEl.value = "";
-          if (searchDebounceTimer) {
-            clearTimeout(searchDebounceTimer);
-            searchDebounceTimer = null;
-          }
-        },
-      });
+            document.querySelectorAll(".custom-select.open, .record-select.open").forEach(function (other) {
+              if (other !== container) {
+                other.classList.remove("open");
+                var t = other.querySelector("button, .custom-select-trigger, .record-select-trigger");
+                if (t) t.setAttribute("aria-expanded", "false");
+              }
+            });
+            isOpen = true;
+            container.classList.add("open");
+            trigger.setAttribute("aria-expanded", "true");
+            searchTerm = "";
+            if (searchInputWrapper) searchInputWrapper.setValue("");
+            else if (searchInputEl) searchInputEl.value = "";
+            content.style.minWidth = trigger.offsetWidth + "px";
+            loadInitialAndRender();
+            setTimeout(function () {
+              if (searchInputEl) searchInputEl.focus();
+            }, 0);
+          },
+          onClose: function () {
+            isOpen = false;
+            container.classList.remove("open");
+            trigger.setAttribute("aria-expanded", "false");
+            searchTerm = "";
+            if (searchInputWrapper) searchInputWrapper.setValue("");
+            else if (searchInputEl) searchInputEl.value = "";
+            if (searchDebounceTimer) {
+              clearTimeout(searchDebounceTimer);
+              searchDebounceTimer = null;
+            }
+          },
+        });
+      }
 
       if (clearBtn) clearBtn.style.display = canClear && value && !disabled ? "" : "none";
 
@@ -9359,8 +9456,64 @@
         }, 500);
       }
 
+      function openDropdown() {
+        if (disabled) return;
+        if (usePopover && popover) {
+          popover.show();
+          return;
+        }
+        document
+          .querySelectorAll(".custom-select.open, .record-select.open")
+          .forEach(function (other) {
+            if (other !== container) {
+              other.classList.remove("open");
+              var t = other.querySelector(
+                "button, .custom-select-trigger, .record-select-trigger"
+              );
+              if (t) t.setAttribute("aria-expanded", "false");
+            }
+          });
+        isOpen = true;
+        container.classList.add("open");
+        trigger.setAttribute("aria-expanded", "true");
+        searchTerm = "";
+        if (searchInputWrapper) searchInputWrapper.setValue("");
+        else if (searchInputEl) searchInputEl.value = "";
+        loadInitialAndRender();
+        setTimeout(function () {
+          if (searchInputEl) searchInputEl.focus();
+        }, 0);
+        updatePosition();
+      }
+
       function closeDropdown() {
-        popover.hide();
+        if (usePopover && popover) {
+          popover.hide();
+          return;
+        }
+        isOpen = false;
+        container.classList.remove("open");
+        trigger.setAttribute("aria-expanded", "false");
+        searchTerm = "";
+        if (searchInputWrapper) searchInputWrapper.setValue("");
+        else if (searchInputEl) searchInputEl.value = "";
+        if (searchDebounceTimer) {
+          clearTimeout(searchDebounceTimer);
+          searchDebounceTimer = null;
+        }
+      }
+
+      function updatePosition() {
+        if (usePopover) return;
+        var rect = trigger.getBoundingClientRect();
+        var vh = window.innerHeight;
+        var below = vh - rect.bottom;
+        var above = rect.top;
+        if (below < 200 && above > below) {
+          content.className = contentBase + "bottom-full mb-1 translate-y-1 group-[.open]:translate-y-0";
+        } else {
+          content.className = contentBase + "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
+        }
       }
 
       if (!searchInputWrapper && searchInputEl) {
@@ -9379,14 +9532,41 @@
         });
       }
 
-      trigger.addEventListener("keydown", function (e) {
-        if (disabled) return;
-        if (e.key === "Enter" || e.key === " ") {
+      if (usePopover && popover) {
+        trigger.addEventListener("keydown", function (e) {
+          if (disabled) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            if (isOpen) popover.hide();
+            else popover.show();
+          }
+        });
+      } else {
+        trigger.addEventListener("click", function (e) {
           e.preventDefault();
-          if (isOpen) popover.hide();
-          else popover.show();
-        }
-      });
+          e.stopPropagation();
+          if (isOpen) closeDropdown();
+          else openDropdown();
+        });
+        trigger.addEventListener("keydown", function (e) {
+          if (disabled) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            if (isOpen) closeDropdown();
+            else openDropdown();
+          }
+          if (e.key === "Escape" && isOpen) {
+            e.preventDefault();
+            closeDropdown();
+          }
+        });
+        document.addEventListener("click", function (e) {
+          if (isOpen && !container.contains(e.target)) closeDropdown();
+        });
+        document.addEventListener("keydown", function (e) {
+          if (e.key === "Escape" && isOpen) closeDropdown();
+        });
+      }
 
       container.updateValue = function (newVal) {
         setValue(newVal);
@@ -9483,14 +9663,6 @@
       return opt.label || opt.name || opt.display_name || opt.value;
     }
 
-    function getDep(name) {
-      if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
-        var c = global.FlowUI._getComponent(name);
-        if (c) return c;
-      }
-      return global[name];
-    }
-
     /**
      * Create a multiselect dropdown component
      * @param {Object} config
@@ -9521,11 +9693,6 @@
           ? config.values.slice()
           : [];
 
-      var Popover = getDep("Popover");
-      if (!Popover || typeof Popover.create !== "function") {
-        throw new Error("MultiSelect requires Popover");
-      }
-
       var container = document.createElement("div");
       container.className = "custom-multiselect relative w-full group";
       if (fieldId) container.setAttribute("data-field-id", fieldId);
@@ -9574,10 +9741,14 @@
       triggerWrapper.appendChild(trigger);
       container.appendChild(triggerWrapper);
 
+      var contentBase =
+        "custom-multiselect-content absolute left-0 right-0 z-50 max-h-[200px] min-w-[8rem] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium opacity-0 invisible transition-all duration-150 ease-out " +
+        "group-[.open]:opacity-100 group-[.open]:visible ";
+
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
       content.setAttribute("aria-multiselectable", "true");
-      content.className = "custom-multiselect-content w-full  max-h-[200px] overflow-hidden flex flex-col";
+      content.className = contentBase + "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
 
       var optionsList = document.createElement("div");
       optionsList.className =
@@ -9678,68 +9849,47 @@
       buildOptionsList();
 
       content.appendChild(optionsList);
+      container.appendChild(content);
 
-      var popover = Popover.create({
-        trigger: trigger,
-        content: content,
-        placement: "bottom",
-        align: "start",
-        closeOnClickOutside: true,
-        bodyClassName: "p-0 overflow-hidden",
-        panelClassName: "min-w-[var(--trigger-width)] max-h-[200px] overflow-hidden",
-        onOpen: function () {
-          if (disabled) {
-            popover.hide();
-            return;
-          }
-          document
-            .querySelectorAll(".custom-select, .record-select, .custom-multiselect, .enum-select, .enum-multiselect, .record-multiselect")
-            .forEach(function (other) {
-              if (other !== container && other.popoverInstance) {
-                other.popoverInstance.hide();
-              }
-            });
-          trigger.setAttribute("aria-expanded", "true");
-          chevron.style.transform = "rotate(180deg)";
-          if (popover.panel) {
-            var triggerWidthPx = trigger.offsetWidth + "px";
-            popover.panel.style.setProperty("--trigger-width", triggerWidthPx);
-            popover.panel.style.minWidth = triggerWidthPx;
-            popover.panel.style.width = triggerWidthPx;
-          }
-        },
-        onClose: function () {
-          trigger.setAttribute("aria-expanded", "false");
-          chevron.style.transform = "";
-        },
-      });
-      container.popoverInstance = popover;
+      var isOpen = false;
 
       function openDropdown() {
         if (disabled) return;
-        popover.show();
+        document
+          .querySelectorAll(".custom-select.open, .record-select.open, .custom-multiselect.open")
+          .forEach(function (other) {
+            if (other !== container) {
+              other.classList.remove("open");
+              var t = other.querySelector(
+                "button, .custom-select-trigger, .record-select-trigger, .multiselect-trigger-wrapper button"
+              );
+              if (t) t.setAttribute("aria-expanded", "false");
+            }
+          });
+        isOpen = true;
+        container.classList.add("open");
+        trigger.setAttribute("aria-expanded", "true");
       }
 
       function closeDropdown() {
-        popover.hide();
+        isOpen = false;
+        container.classList.remove("open");
+        trigger.setAttribute("aria-expanded", "false");
       }
 
       function toggleDropdown() {
-        var isVisible = popover.element && popover.element.classList.contains("visible");
-        if (isVisible) closeDropdown();
+        if (isOpen) closeDropdown();
         else openDropdown();
       }
 
       trigger.addEventListener("click", function (e) {
-        if (disabled) {
-          e.preventDefault();
-          e.stopImmediatePropagation();
-        }
-      }, true);
+        e.preventDefault();
+        e.stopPropagation();
+        toggleDropdown();
+      });
 
       trigger.addEventListener("keydown", function (e) {
         if (disabled) return;
-        var isVisible = popover.element && popover.element.classList.contains("visible");
         switch (e.key) {
           case "Enter":
           case " ":
@@ -9748,14 +9898,14 @@
             break;
           case "ArrowDown":
             e.preventDefault();
-            if (!isVisible) openDropdown();
+            if (!isOpen) openDropdown();
             break;
           case "ArrowUp":
             e.preventDefault();
-            if (!isVisible) openDropdown();
+            if (!isOpen) openDropdown();
             break;
           case "Escape":
-            if (isVisible) {
+            if (isOpen) {
               e.preventDefault();
               closeDropdown();
             }
@@ -9763,6 +9913,13 @@
         }
       });
 
+      document.addEventListener("click", function (e) {
+        if (isOpen && !container.contains(e.target)) closeDropdown();
+      });
+      document.addEventListener("keydown", function (e) {
+        if (e.key === "Escape" && isOpen) closeDropdown();
+      });
+
       container.updateValues = function (newValues) {
         values = Array.isArray(newValues) ? newValues.slice() : [];
         renderTriggerContent();
@@ -9781,8 +9938,7 @@
         disabled = !!isDisabled;
         trigger.disabled = disabled;
         trigger.className = triggerClasses(variant, size, disabled, values.length === 0);
-        var isVisible = popover.element && popover.element.classList.contains("visible");
-        if (disabled && isVisible) closeDropdown();
+        if (disabled && isOpen) closeDropdown();
       };
 
       container.getValues = function () {
@@ -9880,14 +10036,6 @@
       return Array.prototype.filter.call(arguments, Boolean).join(" ");
     }
 
-    function getDep(name) {
-      if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
-        var c = global.FlowUI._getComponent(name);
-        if (c) return c;
-      }
-      return global[name];
-    }
-
     /** Resolve client: use FlowUI._getComponent when bundle has captured globals, else global.superleapClient */
     function getClient() {
       if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
@@ -9956,10 +10104,8 @@
       var error = null;
       var searchQuery = "";
       var popover = null;
-      var Popover = getDep("Popover");
-      if (!Popover || typeof Popover.create !== "function") {
-        throw new Error("EnumMultiSelect requires Popover");
-      }
+      var usePopover = !!(global.Popover && typeof global.Popover.create === "function");
+      var isOpen = false;
 
       var container = document.createElement("div");
       container.className = "enum-multiselect relative w-full group";
@@ -10061,7 +10207,13 @@
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
       content.setAttribute("aria-multiselectable", "true");
-      content.className = "w-full min-w-[200px] max-h-[30vh] overflow-hidden flex flex-col";
+      var contentBase = "w-full min-w-[200px]";
+      if (!usePopover) {
+        contentBase += " absolute left-0 right-0 z-50 max-h-[30vh] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium border-1/2 border-border-primary opacity-0 invisible transition-all duration-150 ease-out group-[.open]:opacity-100 group-[.open]:visible top-full mt-1 -translate-y-1 group-[.open]:translate-y-0 flex flex-col";
+      } else {
+        contentBase += " max-h-[30vh] overflow-hidden flex flex-col";
+      }
+      content.className = contentBase;
 
       // Search input (using InputComponent like enum-select)
       var searchContainer = document.createElement("div");
@@ -10127,6 +10279,10 @@
       content.appendChild(searchContainer);
       content.appendChild(optionsList);
 
+      if (!usePopover) {
+        container.appendChild(content);
+      }
+
       var highlightedIndex = -1;
 
       function showLoading() {
@@ -10299,14 +10455,34 @@
 
       function openDropdown() {
         if (disabled) return;
+        if (popover) {
+          document
+            .querySelectorAll(".enum-select, .enum-multiselect, .custom-select, .record-select, .custom-multiselect")
+            .forEach(function (other) {
+              if (other !== container && other.popoverInstance) {
+                other.popoverInstance.hide();
+              }
+            });
+          popover.show();
+          trigger.setAttribute("aria-expanded", "true");
+          if (searchInput) {
+            setTimeout(function () {
+              searchInput.focus();
+            }, 50);
+          }
+          return;
+        }
         document
-          .querySelectorAll(".enum-select, .enum-multiselect, .custom-select, .record-select, .custom-multiselect")
+          .querySelectorAll(".enum-multiselect.open, .enum-select.open")
           .forEach(function (other) {
-            if (other !== container && other.popoverInstance) {
-              other.popoverInstance.hide();
+            if (other !== container) {
+              other.classList.remove("open");
+              var t = other.querySelector("button");
+              if (t) t.setAttribute("aria-expanded", "false");
             }
           });
-        popover.show();
+        isOpen = true;
+        container.classList.add("open");
         trigger.setAttribute("aria-expanded", "true");
         if (searchInput) {
           setTimeout(function () {
@@ -10316,7 +10492,12 @@
       }
 
       function closeDropdown() {
-        popover.hide();
+        if (popover) {
+          popover.hide();
+        } else {
+          isOpen = false;
+          container.classList.remove("open");
+        }
         trigger.setAttribute("aria-expanded", "false");
         highlightedIndex = -1;
         clearSearch();
@@ -10324,7 +10505,9 @@
       }
 
       function toggleDropdown() {
-        var isVisible = popover.element && popover.element.classList.contains("visible");
+        var isVisible = popover
+          ? popover.element && popover.element.classList.contains("visible")
+          : isOpen;
         if (isVisible) {
           closeDropdown();
         } else {
@@ -10404,7 +10587,10 @@
 
       // Initialize Popover
       function initializePopover() {
-        popover = Popover.create({
+        if (!usePopover) {
+          return;
+        }
+        popover = global.Popover.create({
           trigger: trigger,
           content: content,
           placement: "bottom",
@@ -10420,12 +10606,6 @@
           onOpen: function () {
             trigger.setAttribute("aria-expanded", "true");
             chevron.style.transform = "rotate(180deg)";
-            if (popover.panel) {
-              var triggerWidthPx = trigger.offsetWidth + "px";
-              popover.panel.style.setProperty("--trigger-width", triggerWidthPx);
-              popover.panel.style.minWidth = triggerWidthPx;
-              popover.panel.style.width = triggerWidthPx;
-            }
           },
           bodyClassName: "p-0 overflow-hidden",
           panelClassName: "min-w-[var(--trigger-width)] overflow-hidden",
@@ -10433,6 +10613,13 @@
 
         // Store popover instance for cleanup
         container.popoverInstance = popover;
+        
+        // Set CSS variable for trigger width
+        var triggerWidth = trigger.offsetWidth;
+        if (popover.panel) {
+          popover.panel.style.setProperty("--trigger-width", triggerWidth + "px");
+          popover.panel.style.minWidth = triggerWidth + "px";
+        }
       }
 
       // Load options from SDK
@@ -10547,6 +10734,21 @@
       initializePopover();
       loadOptions();
 
+      if (!usePopover) {
+        trigger.addEventListener("click", function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+          if (disabled) return;
+          toggleDropdown();
+        });
+        document.addEventListener("click", function (e) {
+          if (isOpen && !container.contains(e.target)) closeDropdown();
+        });
+        document.addEventListener("keydown", function (e) {
+          if (e.key === "Escape" && isOpen) closeDropdown();
+        });
+      }
+
       // Public API
       container.updateValues = function (newValues) {
         values = Array.isArray(newValues) ? newValues.slice() : [];
@@ -10588,7 +10790,7 @@
         );
         updateClearButton();
         var isVisible = popover && popover.element && popover.element.classList.contains("visible");
-        if (disabled && isVisible) closeDropdown();
+        if (disabled && (isVisible || isOpen)) closeDropdown();
       };
 
       container.reload = function () {
@@ -10638,14 +10840,7 @@
 
   (function (global) {
 
-    function getDep(name) {
-      if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
-        var c = global.FlowUI._getComponent(name);
-        if (c) return c;
-      }
-      return global[name];
-    }
-
+    var Popover = global.Popover;
     var InputComponent = global.InputComponent;
     var Spinner = global.Spinner;
 
@@ -10658,7 +10853,7 @@
       role: { iconStr: "IconShield", color: "info" },
       iframe: { iconStr: "IconLayout", color: "neutral" },
       lead: { iconStr: "IconUser", color: "primary" },
-      opportunity: { iconStr: "IconStar", color: "success" },
+      opportunity: { iconStr: "IconCurrencyDollar", color: "success" },
       call_log: { iconStr: "IconPhone", color: "info" },
       communication: { iconStr: "IconMessage", color: "primary" },
       history_field: { iconStr: "IconClock", color: "neutral" },
@@ -10818,13 +11013,19 @@
       var selectedRecords = [];
       var allRecords = [];
       var filteredRecords = [];
+      var isOpen = false;
       var searchTerm = "";
       var searchDebounceTimer = null;
+      var usePopover = Popover && typeof Popover.create === "function";
       var popover = null;
       var hasMoreRecords = true;
       var currentPage = 1;
       var isFetchingMore = false;
       var totalFetched = 0;
+      var contentBase = "record-multiselect-content min-w-[8rem] ";
+      if (!usePopover) {
+        contentBase += "absolute left-0 right-0 z-50 max-h-[30vh] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium opacity-0 invisible transition-all duration-150 ease-out group-[.open]:opacity-100 group-[.open]:visible ";
+      }
 
       // Trigger wrapper + button
       var triggerWrapper = document.createElement("span");
@@ -10919,7 +11120,7 @@
       var content = document.createElement("div");
       content.setAttribute("role", "listbox");
       content.setAttribute("aria-multiselectable", "true");
-      content.className = "record-multiselect-content  max-h-[30vh] overflow-hidden flex flex-col";
+      content.className = contentBase + (usePopover ? "max-h-[30vh] overflow-hidden flex flex-col" : "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0");
 
       var searchWrap = document.createElement("div");
       searchWrap.className = "p-8 pb-4 border-b-1/2 border-border-primary ";
@@ -10986,58 +11187,57 @@
       
       content.appendChild(optionsList);
 
-      var Popover = getDep("Popover");
-      if (!Popover || typeof Popover.create !== "function") {
-        throw new Error("RecordMultiSelect requires Popover");
+      if (!usePopover) {
+        container.appendChild(content);
       }
-      popover = Popover.create({
-        trigger: trigger,
-        content: content,
-        placement: "bottom",
-        align: "start",
-        closeOnClickOutside: true,
-        bodyClassName: "p-0 overflow-hidden",
-        panelClassName: "max-h-[30vh] overflow-hidden",
-        onOpen: function () {
-          if (disabled) {
-            popover.hide();
-            return;
-          }
-          document.querySelectorAll(".custom-select.open, .record-select.open, .custom-multiselect.open, .record-multiselect.open, .enum-select, .enum-multiselect").forEach(function (other) {
-            if (other !== container && other.popoverInstance) {
-              other.popoverInstance.hide();
+
+      if (usePopover) {
+        popover = Popover.create({
+          trigger: trigger,
+          content: content,
+          placement: "bottom",
+          align: "start",
+          closeOnClickOutside: true,
+          bodyClassName: "p-0 overflow-hidden",
+          panelClassName: "max-h-[30vh] overflow-hidden",
+          onOpen: function () {
+            if (disabled) {
+              popover.hide();
+              return;
             }
-          });
-          container.classList.add("open");
-          trigger.setAttribute("aria-expanded", "true");
-          searchTerm = "";
-          if (searchInputWrapper) searchInputWrapper.setValue("");
-          else if (searchInputEl) searchInputEl.value = "";
-          var triggerWidthPx = trigger.offsetWidth + "px";
-          content.style.minWidth = triggerWidthPx;
-          content.style.width = triggerWidthPx;
-          if (popover.panel) {
-            popover.panel.style.width = triggerWidthPx;
-            popover.panel.style.minWidth = triggerWidthPx;
-          }
-          loadInitialAndRender();
-          setTimeout(function () {
-            if (searchInputEl) searchInputEl.focus();
-          }, 0);
-        },
-        onClose: function () {
-          container.classList.remove("open");
-          trigger.setAttribute("aria-expanded", "false");
-          searchTerm = "";
-          if (searchInputWrapper) searchInputWrapper.setValue("");
-          else if (searchInputEl) searchInputEl.value = "";
-          if (searchDebounceTimer) {
-            clearTimeout(searchDebounceTimer);
-            searchDebounceTimer = null;
-          }
-        },
-      });
-      container.popoverInstance = popover;
+            document.querySelectorAll(".custom-select.open, .record-select.open, .custom-multiselect.open, .record-multiselect.open").forEach(function (other) {
+              if (other !== container) {
+                other.classList.remove("open");
+                var t = other.querySelector("button, .custom-select-trigger, .record-select-trigger, .multiselect-trigger-wrapper button, .record-multiselect-trigger");
+                if (t) t.setAttribute("aria-expanded", "false");
+              }
+            });
+            isOpen = true;
+            container.classList.add("open");
+            trigger.setAttribute("aria-expanded", "true");
+            searchTerm = "";
+            if (searchInputWrapper) searchInputWrapper.setValue("");
+            else if (searchInputEl) searchInputEl.value = "";
+            content.style.minWidth = trigger.offsetWidth + "px";
+            loadInitialAndRender();
+            setTimeout(function () {
+              if (searchInputEl) searchInputEl.focus();
+            }, 0);
+          },
+          onClose: function () {
+            isOpen = false;
+            container.classList.remove("open");
+            trigger.setAttribute("aria-expanded", "false");
+            searchTerm = "";
+            if (searchInputWrapper) searchInputWrapper.setValue("");
+            else if (searchInputEl) searchInputEl.value = "";
+            if (searchDebounceTimer) {
+              clearTimeout(searchDebounceTimer);
+              searchDebounceTimer = null;
+            }
+          },
+        });
+      }
 
       function isSelected(recordId) {
         return values.some(function (v) {
@@ -11442,6 +11642,66 @@
         }, 500);
       }
 
+      function openDropdown() {
+        if (disabled) return;
+        if (usePopover && popover) {
+          popover.show();
+          return;
+        }
+        document
+          .querySelectorAll(".custom-select.open, .record-select.open, .custom-multiselect.open, .record-multiselect.open")
+          .forEach(function (other) {
+            if (other !== container) {
+              other.classList.remove("open");
+              var t = other.querySelector(
+                "button, .custom-select-trigger, .record-select-trigger, .multiselect-trigger-wrapper button, .record-multiselect-trigger"
+              );
+              if (t) t.setAttribute("aria-expanded", "false");
+            }
+          });
+        isOpen = true;
+        container.classList.add("open");
+        trigger.setAttribute("aria-expanded", "true");
+        searchTerm = "";
+        if (searchInputWrapper) searchInputWrapper.setValue("");
+        else if (searchInputEl) searchInputEl.value = "";
+        loadInitialAndRender();
+        setTimeout(function () {
+          if (searchInputEl) searchInputEl.focus();
+        }, 0);
+        updatePosition();
+      }
+
+      function closeDropdown() {
+        if (usePopover && popover) {
+          popover.hide();
+          return;
+        }
+        isOpen = false;
+        container.classList.remove("open");
+        trigger.setAttribute("aria-expanded", "false");
+        searchTerm = "";
+        if (searchInputWrapper) searchInputWrapper.setValue("");
+        else if (searchInputEl) searchInputEl.value = "";
+        if (searchDebounceTimer) {
+          clearTimeout(searchDebounceTimer);
+          searchDebounceTimer = null;
+        }
+      }
+
+      function updatePosition() {
+        if (usePopover) return;
+        var rect = trigger.getBoundingClientRect();
+        var vh = window.innerHeight;
+        var below = vh - rect.bottom;
+        var above = rect.top;
+        if (below < 200 && above > below) {
+          content.className = contentBase + "bottom-full mb-1 translate-y-1 group-[.open]:translate-y-0";
+        } else {
+          content.className = contentBase + "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
+        }
+      }
+
       if (!searchInputWrapper && searchInputEl) {
         searchInputEl.addEventListener("input", function () {
           searchTerm = this.value.trim();
@@ -11458,19 +11718,41 @@
         });
       }
 
-      trigger.addEventListener("keydown", function (e) {
-        if (disabled) return;
-        var isVisible = popover.element && popover.element.classList.contains("visible");
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          if (isVisible) popover.hide();
-          else popover.show();
-        }
-        if (e.key === "Escape" && isVisible) {
+      if (usePopover && popover) {
+        trigger.addEventListener("keydown", function (e) {
+          if (disabled) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            if (isOpen) popover.hide();
+            else popover.show();
+          }
+        });
+      } else {
+        trigger.addEventListener("click", function (e) {
           e.preventDefault();
-          popover.hide();
-        }
-      });
+          e.stopPropagation();
+          if (isOpen) closeDropdown();
+          else openDropdown();
+        });
+        trigger.addEventListener("keydown", function (e) {
+          if (disabled) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            if (isOpen) closeDropdown();
+            else openDropdown();
+          }
+          if (e.key === "Escape" && isOpen) {
+            e.preventDefault();
+            closeDropdown();
+          }
+        });
+        document.addEventListener("click", function (e) {
+          if (isOpen && !container.contains(e.target)) closeDropdown();
+        });
+        document.addEventListener("keydown", function (e) {
+          if (e.key === "Escape" && isOpen) closeDropdown();
+        });
+      }
 
       container.updateValues = function (newValues) {
         values = Array.isArray(newValues) ? newValues.slice() : [];
@@ -11481,8 +11763,7 @@
         disabled = !!isDisabled;
         trigger.disabled = disabled;
         trigger.className = triggerClasses(variant, size, disabled, values.length === 0);
-        var isVisible = popover.element && popover.element.classList.contains("visible");
-        if (disabled && isVisible) popover.hide();
+        if (disabled && isOpen) closeDropdown();
       };
 
       container.getValues = function () {
@@ -13315,12 +13596,12 @@
         if (periodColumn) periodColumn.scrollToSelected();
       }
 
-      // Trigger must be in DOM before Popover.create() so Popover can wrap it and insert its panel into the document.
-      container.appendChild(trigger);
-
       var Popover = getDep("Popover");
       if (!Popover || typeof Popover.create !== "function") {
-        throw new Error("TimePicker requires Popover");
+        container.appendChild(trigger);
+        container.updateValue = function (newVal) { value = typeof newVal === "string" ? newVal : ""; };
+        container.setDisabled = function (isDisabled) { trigger.disabled = !!isDisabled; };
+        return container;
       }
       var popover = Popover.create({
         trigger: trigger,
@@ -13341,6 +13622,8 @@
       });
       hidePopover = popover.hide;
 
+      container.appendChild(trigger);
+
       container.updateValue = function (newVal) {
         value = typeof newVal === "string" ? newVal : "";
         var p = parseValue(value);
@@ -14488,7 +14771,7 @@
             variant = "outline";
           }
           var btnClassName = join(
-            "!text-reg-12 my-2  flex-1",
+            "!text-reg-12 my-2  flex-1 !px-0 !py-0",
             cell.currentMonth ? "" : "text-typography-quaternary-text"
           );
           var btn = Button.create({
@@ -15633,13 +15916,15 @@
           e.stopPropagation();
           navigator.clipboard.writeText(fileUrl).then(
             function () {
-              if (global.FlowUI && global.FlowUI.showToast) {
-                global.FlowUI.showToast("Link copied", "success");
+              if (global.FlowUI && global.FlowUI.renderAlerts) {
+                const ac = document.getElementById("alerts");
+                if (ac) global.FlowUI.renderAlerts(ac, ["Link copied"], "success");
               }
             },
             function () {
-              if (global.FlowUI && global.FlowUI.showToast) {
-                global.FlowUI.showToast("Copy failed", "error");
+              if (global.FlowUI && global.FlowUI.renderAlerts) {
+                const ac = document.getElementById("alerts");
+                if (ac) global.FlowUI.renderAlerts(ac, ["Copy failed"], "error");
               }
             }
           );
@@ -15835,8 +16120,11 @@
       async function uploadFile(file) {
         const error = validateFile(file);
         if (error) {
-          if (global.FlowUI && global.FlowUI.showToast) {
-            global.FlowUI.showToast(error, "error");
+          if (global.FlowUI && global.FlowUI.renderAlerts) {
+            const alertsContainer = document.getElementById("alerts");
+            if (alertsContainer) {
+              global.FlowUI.renderAlerts(alertsContainer, [error], "error");
+            }
           }
           return;
         }
@@ -15864,8 +16152,15 @@
           uploadingFiles = uploadingFiles.filter((f) => f.file !== file);
           renderUploadingList();
           updateStatus();
-          if (global.FlowUI && global.FlowUI.showToast) {
-            global.FlowUI.showToast(`Failed to upload "${file.name}": ${error.message}`, "error");
+          if (global.FlowUI && global.FlowUI.renderAlerts) {
+            const alertsContainer = document.getElementById("alerts");
+            if (alertsContainer) {
+              global.FlowUI.renderAlerts(
+                alertsContainer,
+                [`Failed to upload "${file.name}": ${error.message}`],
+                "error"
+              );
+            }
           }
         }
       }
@@ -15878,8 +16173,11 @@
         // Check max files limit
         if (multiple && maxFiles && uploadedFiles.length + files.length > maxFiles) {
           const message = `You can only upload ${maxFiles} file${maxFiles !== 1 ? "s" : ""}`;
-          if (global.FlowUI && global.FlowUI.showToast) {
-            global.FlowUI.showToast(message, "error");
+          if (global.FlowUI && global.FlowUI.renderAlerts) {
+            const alertsContainer = document.getElementById("alerts");
+            if (alertsContainer) {
+              global.FlowUI.renderAlerts(alertsContainer, [message], "error");
+            }
           }
           input.value = "";
           return;
@@ -16526,7 +16824,7 @@
             },
           });
           document.dispatchEvent(event);
-          console.log("[Superleap-Flow] Library ready - v2.3.4");
+          console.log("[Superleap-Flow] Library ready - v2.2.9");
         }
 
         // Wait for DOM to be ready before dispatching event