@superleapai/flow-ui 2.3.4 → 2.3.6

package/components/checkbox.js

@@ -35,10 +35,18 @@
   };
 
   var CHECKBOX_BASE_CLASS =
-    "flex items-center justify-center rounded-2 border-1/2 border-borderColor-border-primary bg-fill-quarternary-fill-white p-4 transition-all hover:border-primary-base hover:shadow-primary-focused disabled:cursor-not-allowed disabled:border-borderColor-border-primary disabled:opacity-50 disabled:hover:shadow-none";
+    "flex items-center justify-center rounded-2 border-1/2 border-borderColor-border-primary bg-fill-quarternary-fill-white p-4 transition-all";
+
+  var CHECKBOX_ACTIVE_CLASS =
+    "hover:border-primary-base hover:shadow-primary-focused cursor-pointer";
+
+  var CHECKBOX_DISABLED_CLASS =
+    "cursor-not-allowed opacity-50";
 
   var CHECKBOX_CHECKED_CLASS =
-    "data-checked:border-transparent data-checked:bg-primary-base data-checked:hover:border-primary-base data-checked:hover:shadow-primary-focused data-checked:disabled:border-borderColor-border-primary";
+    "data-checked:border-transparent data-checked:bg-primary-base";
+  var CHECKBOX_CHECKED_ACTIVE_CLASS =
+    "data-checked:hover:border-primary-base data-checked:hover:shadow-primary-focused";
 
   var LABEL_BASE_CLASS =
     "cursor-pointer pb-0 text-reg-12 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
@@ -102,12 +110,16 @@
 
     // Custom checkbox visual
     var checkboxBox = document.createElement("div");
-    checkboxBox.className = join(
-      CHECKBOX_BASE_CLASS,
-      CHECKBOX_CHECKED_CLASS,
-      CHECKBOX_SIZES[size] || CHECKBOX_SIZES.default,
-      "cursor-pointer"
-    );
+    function applyCheckboxBoxClasses() {
+      var sizeClass = CHECKBOX_SIZES[size] || CHECKBOX_SIZES.default;
+      checkboxBox.className = join(
+        CHECKBOX_BASE_CLASS,
+        disabled ? CHECKBOX_DISABLED_CLASS : join(CHECKBOX_ACTIVE_CLASS, CHECKBOX_CHECKED_ACTIVE_CLASS),
+        CHECKBOX_CHECKED_CLASS,
+        sizeClass
+      );
+    }
+    applyCheckboxBoxClasses();
     checkboxBox.setAttribute("role", "checkbox");
     checkboxBox.setAttribute("tabindex", disabled ? "-1" : "0");
     checkboxBox.setAttribute("aria-checked", indeterminate ? "mixed" : checked ? "true" : "false");
@@ -224,6 +236,7 @@
       } else {
         checkboxBox.removeAttribute("aria-disabled");
       }
+      applyCheckboxBoxClasses();
       updateCheckedState();
     };
 

package/components/currency.js

@@ -26,7 +26,7 @@
     sizeLarge: "",
     sizeSmall: "",
     disabled:
-      "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
+      "pointer-events-none cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
   };
 
   // Currency type label: fit-content, separator (border-r) on type only, full height
@@ -213,7 +213,12 @@
     wrapper.setDisabled = function (d) {
       disabled = !!d;
       input.disabled = disabled;
-      wrapper.classList.toggle("cursor-not-allowed", disabled);
+      wrapper.className = join(
+        WRAPPER_CLASS.base,
+        WRAPPER_CLASS[variant] != null ? WRAPPER_CLASS[variant] : WRAPPER_CLASS.default,
+        disabled ? WRAPPER_CLASS.disabled : "",
+        config.className || ""
+      );
     };
 
     return wrapper;

package/components/date-time-picker/date-time-picker.js

@@ -243,13 +243,15 @@
     var displayMonth = validDate ? new Date(validDate.getTime()) : new Date();
 
     var triggerWrapper = document.createElement("div");
-    var triggerClasses = join(
-      "group flex items-center border-1/2 border-border-primary rounded-4 text-typography-primary-text gap-x-8 w-full transition-all ease-in-out",
-      "bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
-      size === "large" ? "px-12 py-8" : size === "small" ? "px-12 py-4" : "px-12 py-6",
-      disabled ? "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary" : "cursor-pointer"
-    );
-    triggerWrapper.className = triggerClasses;
+    function getTriggerClassName(disabledState) {
+      return join(
+        "group flex items-center border-1/2 border-border-primary rounded-4 text-typography-primary-text gap-x-8 w-full transition-all ease-in-out",
+        "bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
+        size === "large" ? "px-12 py-8" : size === "small" ? "px-12 py-4" : "px-12 py-6",
+        disabledState ? "pointer-events-none cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary" : "cursor-pointer"
+      );
+    }
+    triggerWrapper.className = getTriggerClassName(disabled);
     triggerWrapper.setAttribute("role", "button");
     triggerWrapper.setAttribute("tabindex", disabled ? "-1" : "0");
     triggerWrapper.setAttribute("aria-haspopup", "dialog");
@@ -517,8 +519,7 @@
     };
     container.setDisabled = function (d) {
       disabled = !!d;
-      triggerWrapper.classList.toggle("cursor-not-allowed", disabled);
-      triggerWrapper.classList.toggle("opacity-60", disabled);
+      triggerWrapper.className = getTriggerClassName(disabled);
       triggerWrapper.setAttribute("tabindex", disabled ? "-1" : "0");
       if (disabled) popoverApi.hide();
     };

package/components/duration/duration.js

@@ -40,7 +40,7 @@
     sizeLarge: "px-12 py-8",
     sizeSmall: "px-12 py-4",
     disabled:
-      "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary opacity-60",
+      "pointer-events-none cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
   };
 
   function join() {
@@ -433,8 +433,13 @@
     };
     container.setDisabled = function (d) {
       disabled = !!d;
-      triggerWrapper.classList.toggle("cursor-not-allowed", disabled);
-      triggerWrapper.classList.toggle("opacity-60", disabled);
+      triggerWrapper.className = join(
+        TRIGGER_CLASS.base,
+        TRIGGER_CLASS[variant] != null ? TRIGGER_CLASS[variant] : TRIGGER_CLASS.default,
+        size === "large" ? TRIGGER_CLASS.sizeLarge : size === "small" ? TRIGGER_CLASS.sizeSmall : TRIGGER_CLASS.sizeDefault,
+        disabled ? TRIGGER_CLASS.disabled : "",
+        className
+      );
       triggerWrapper.setAttribute("tabindex", disabled ? "-1" : "0");
       if (disabled) popoverApi.hide();
     };

package/components/enumeration.js

@@ -8,7 +8,7 @@
   "use strict";
 
   var BASE_CLASS =
-    "flex items-center border rounded-4 text-typography-primary-text gap-4 !text-reg-13";
+    "flex items-center border-1/2 rounded-4 text-typography-primary-text gap-4 !text-reg-13";
 
   var VARIANTS = {
     default:
@@ -32,7 +32,7 @@
   };
 
   var DISABLED_CLASS =
-    "pointer-events-none !cursor-not-allowed opacity-50";
+    "pointer-events-none !cursor-not-allowed opacity-50 bg-fill-tertiary-fill-light-gray";
   var READONLY_CLASS = "pointer-events-none";
 
   var ITEM_BASE_CLASS =
@@ -97,14 +97,17 @@
     var children = opts.children;
 
     var wrapper = document.createElement("div");
-    wrapper.className = join(
-      BASE_CLASS,
-      VARIANTS[variant] != null ? VARIANTS[variant] : VARIANTS.default,
-      SIZES[size] != null ? SIZES[size] : SIZES.default,
-      disabled ? DISABLED_CLASS : "",
-      readOnly ? READONLY_CLASS : "",
-      className
-    );
+    function applyWrapperClasses() {
+      wrapper.className = join(
+        BASE_CLASS,
+        VARIANTS[variant] != null ? VARIANTS[variant] : VARIANTS.default,
+        SIZES[size] != null ? SIZES[size] : SIZES.default,
+        disabled ? DISABLED_CLASS : "",
+        readOnly ? READONLY_CLASS : "",
+        className
+      );
+    }
+    applyWrapperClasses();
     wrapper.setAttribute("data-enumeration-variant", variant);
 
     var count =
@@ -174,6 +177,22 @@
       }
     }
 
+    wrapper.setDisabled = function (d) {
+      disabled = d === true;
+      for (var j = 0; j < itemElements.length; j++) {
+        itemElements[j].setAttribute("tabindex", disabled || readOnly ? "-1" : "0");
+      }
+      applyWrapperClasses();
+    };
+
+    wrapper.setReadOnly = function (r) {
+      readOnly = r === true;
+      for (var j = 0; j < itemElements.length; j++) {
+        itemElements[j].setAttribute("tabindex", disabled || readOnly ? "-1" : "0");
+      }
+      applyWrapperClasses();
+    };
+
     return wrapper;
   }
 

package/components/file-input.js

@@ -114,8 +114,36 @@
    * @param {boolean} config.isPrivate - Whether files should be private
    * @param {number} config.maxFiles - Maximum number of files (for multiple mode)
    * @param {number} config.maxFileSize - Maximum file size in bytes
+   * @param {boolean} [config.disabled] - Whether the file upload is disabled
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'success' | 'borderless' | 'inline'
+   * @param {string} [config.inputSize] - 'default' | 'large' | 'small'
+   * @param {string} [config.className] - Extra class on upload wrapper
    * @returns {HTMLElement} Field element
    */
+  var UPLOAD_WRAPPER_CLASS = {
+    base:
+      "group relative flex w-full items-center justify-between border-1/2 rounded-4 text-typography-primary-text w-full transition-all ease-in-out focus-within:outline-none group-has-[:disabled]:cursor-not-allowed group-has-[:disabled]:border-border-primary group-has-[:disabled]:bg-fill-tertiary-fill-light-gray group-has-[:disabled]:text-typography-quaternary-text group-has-[:disabled]:hover:border-border-primary",
+    default:
+      "border-border-primary bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
+    error:
+      "border-error-base bg-fill-quarternary-fill-white hover:border-error-base focus-within:border-error-base",
+    warning:
+      "border-warning-base bg-fill-quarternary-fill-white hover:border-warning-base focus-within:border-warning-base",
+    success:
+      "border-success-base bg-fill-quarternary-fill-white hover:border-success-base focus-within:border-success-base",
+    borderless:
+      "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
+    inline:
+      "border-transparent shadow-none rounded-0 bg-fill-quarternary-fill-white hover:bg-fill-tertiary-fill-light-gray focus-within:border-transparent focus-within:bg-fill-tertiary-fill-light-gray",
+    sizeDefault: "px-12 py-4",
+    sizeLarge: "px-12 py-6",
+    sizeSmall: "px-12 py-2",
+  };
+
+  function joinClasses() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
   function create(config) {
     const {
       label,
@@ -127,7 +155,14 @@
       isPrivate = false,
       maxFiles = null,
       maxFileSize = 10 * 1024 * 1024, // 10MB default
+      disabled = false,
+      variant = "default",
+      inputSize = "default",
+      className = "",
     } = config;
+    let disabledState = !!disabled;
+    let currentVariant = variant;
+    let currentInputSize = inputSize;
 
     if (!global.FlowUI) {
       throw new Error("FlowUI not available");
@@ -145,12 +180,33 @@
 
     // Upload row: button + status + optional end spinner (match Select/MultiSelect trigger)
     const uploadWrapper = document.createElement("div");
-    uploadWrapper.className = "relative flex w-full items-center justify-between rounded-4 border-1/2 border-border-primary bg-fill-quarternary-fill-white px-8 py-4 hover:border-primary-border focus-within:outline-none focus-within:border-1/2 focus-within:border-primary-border";
+    var sizeClass =
+      currentInputSize === "large"
+        ? UPLOAD_WRAPPER_CLASS.sizeLarge
+        : currentInputSize === "small"
+          ? UPLOAD_WRAPPER_CLASS.sizeSmall
+          : UPLOAD_WRAPPER_CLASS.sizeDefault;
+    function applyWrapperClasses() {
+      uploadWrapper.className = joinClasses(
+        UPLOAD_WRAPPER_CLASS.base,
+        UPLOAD_WRAPPER_CLASS[currentVariant] || UPLOAD_WRAPPER_CLASS.default,
+        sizeClass,
+        className
+      );
+    }
+    applyWrapperClasses();
+    uploadWrapper.setAttribute("data-file-input-variant", currentVariant);
+    uploadWrapper.setAttribute("data-file-input-size", currentInputSize);
+    uploadWrapper.setAttribute("data-disabled", disabledState ? "true" : "false");
 
     // Left content (button + status) – pointer-events-none so overlay input receives clicks
     const leftContent = document.createElement("div");
     leftContent.className = "pointer-events-none flex min-w-0 flex-1 items-center gap-8 truncate";
 
+    var disabledChildClasses =
+      "group-has-[:disabled]:text-typography-quaternary-text group-has-[:disabled]:bg-fill-tertiary-fill-light-gray group-has-[:disabled]:hover:bg-fill-tertiary-fill-light-gray";
+    var statusTextBaseClass = "text-reg-13 min-w-0 flex-1 truncate";
+    var statusTextDisabledClass = " group-has-[:disabled]:text-typography-quaternary-text";
     const useButtonComponent = global.Button && typeof global.Button.create === "function";
     const initialButtonText = multiple ? "Choose files" : "Choose a file";
     const btn = useButtonComponent
@@ -158,31 +214,41 @@
           variant: "outline",
           size: "small",
           text: initialButtonText,
-          className: "shrink-0 truncate",
+          className: "shrink-0 truncate " + disabledChildClasses,
         })
       : (function () {
           const el = document.createElement("div");
-          el.className = "shrink-0 truncate rounded-2 border-1/2 border-border-primary bg-fill-tertiary-fill-light-gray px-8 py-1 text-reg-13 text-typography-primary-text transition-colors duration-150 hover:bg-fill-secondary-fill-gray";
+          el.className =
+            "shrink-0 truncate rounded-2 border-1/2 border-border-primary bg-fill-tertiary-fill-light-gray px-8 py-1 text-reg-13 text-typography-primary-text transition-colors duration-150 hover:bg-fill-secondary-fill-gray " +
+            disabledChildClasses;
           el.textContent = initialButtonText;
           return el;
         })();
 
     // Status text: "No files chosen" (quaternary) or "X file(s) selected"
     const statusText = document.createElement("p");
-    statusText.className = "text-reg-13 min-w-0 flex-1 truncate text-typography-quaternary-text";
+    statusText.className = statusTextBaseClass + " text-typography-quaternary-text" + statusTextDisabledClass;
 
     // Hidden file input – overlays row, high z-index so it receives clicks
     const input = document.createElement("input");
     input.type = "file";
-    input.className = "absolute inset-0 z-10 w-full cursor-pointer opacity-0";
+    const inputBaseClass = "absolute inset-0 z-10 w-full opacity-0";
+    function applyInputClasses() {
+      input.className =
+        inputBaseClass +
+        (disabledState ? " !pointer-events-none !cursor-not-allowed" : " cursor-pointer");
+    }
+    applyInputClasses();
     input.multiple = multiple;
+    input.disabled = disabledState;
     if (accept !== "*") {
       input.accept = accept;
     }
 
     // End icon slot: spinner when uploading (match Select chevron position)
     const endIconSlot = document.createElement("div");
-    endIconSlot.className = "ml-4 flex size-16 items-center justify-center shrink-0 text-typography-quaternary-text";
+    endIconSlot.className =
+      "ml-4 flex size-16 items-center justify-center shrink-0 text-typography-quaternary-text group-has-[:disabled]:text-typography-quaternary-text";
     endIconSlot.style.display = "none";
 
     // Uploaded files: badge list (match UploadedFilePreviewer – flex-wrap gap-2)
@@ -363,13 +429,13 @@
 
       if (!filesChosen) {
         statusText.textContent = "No files chosen";
-        statusText.className = "text-reg-13 min-w-0 flex-1 truncate text-typography-quaternary-text";
+        statusText.className = statusTextBaseClass + " text-typography-quaternary-text" + statusTextDisabledClass;
       } else if (uploadingCount > 0) {
         statusText.textContent = "Uploading…";
-        statusText.className = "text-reg-13 min-w-0 flex-1 truncate text-typography-quaternary-text";
+        statusText.className = statusTextBaseClass + " text-typography-quaternary-text" + statusTextDisabledClass;
       } else {
         statusText.textContent = `${uploadedCount} file${uploadedCount !== 1 ? "s" : ""} selected`;
-        statusText.className = "text-reg-13 min-w-0 flex-1 truncate text-typography-primary-text";
+        statusText.className = statusTextBaseClass + " text-typography-primary-text" + statusTextDisabledClass;
       }
 
       endIconSlot.style.display = uploadingCount > 0 ? "flex" : "none";
@@ -506,6 +572,32 @@
     loadExistingFiles();
     updateStatus();
 
+    field.setDisabled = function (d) {
+      disabledState = !!d;
+      input.disabled = disabledState;
+      applyInputClasses();
+      applyWrapperClasses();
+      uploadWrapper.setAttribute("data-disabled", disabledState ? "true" : "false");
+    };
+
+    field.setVariant = function (v) {
+      currentVariant = v || "default";
+      uploadWrapper.setAttribute("data-file-input-variant", currentVariant);
+      applyWrapperClasses();
+    };
+
+    field.setInputSize = function (s) {
+      currentInputSize = s || "default";
+      sizeClass =
+        currentInputSize === "large"
+          ? UPLOAD_WRAPPER_CLASS.sizeLarge
+          : currentInputSize === "small"
+            ? UPLOAD_WRAPPER_CLASS.sizeSmall
+            : UPLOAD_WRAPPER_CLASS.sizeDefault;
+      uploadWrapper.setAttribute("data-file-input-size", currentInputSize);
+      applyWrapperClasses();
+    };
+
     return field;
   }
 

package/components/input.js

@@ -23,7 +23,7 @@
 
   var WRAPPER_CLASS = {
     base:
-      "group flex items-center border-1/2 border-border-primary rounded-4 text-typography-primary-text gap-x-8 w-full transition-all ease-in-out",
+      "group flex items-center border-1/2 border-border-primary rounded-4 text-typography-primary-text gap-x-8 w-full transition-all ease-in-out group-has-[:disabled]:cursor-not-allowed group-has-[:disabled]:border-border-primary group-has-[:disabled]:bg-fill-tertiary-fill-light-gray group-has-[:disabled]:text-typography-quaternary-text group-has-[:disabled]:hover:border-border-primary group-has-[:disabled]:[&_input]:cursor-not-allowed group-has-[:disabled]:[&_input]:text-typography-quaternary-text",
     default:
       "bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
     error:
@@ -98,13 +98,16 @@
     var isPassword = type === "password";
 
     var wrapper = document.createElement("div");
-    wrapper.className = join(
-      WRAPPER_CLASS.base,
-      WRAPPER_CLASS[variant] || WRAPPER_CLASS.default,
-      inputSize === "large" ? WRAPPER_CLASS.sizeLarge : inputSize === "small" ? WRAPPER_CLASS.sizeSmall : WRAPPER_CLASS.sizeDefault,
-      disabled ? WRAPPER_CLASS.disabled : "",
-      config.className || ""
-    );
+    var sizeClass = inputSize === "large" ? WRAPPER_CLASS.sizeLarge : inputSize === "small" ? WRAPPER_CLASS.sizeSmall : WRAPPER_CLASS.sizeDefault;
+    function applyWrapperClasses() {
+      wrapper.className = join(
+        WRAPPER_CLASS.base,
+        disabled ? WRAPPER_CLASS.disabled : (WRAPPER_CLASS[variant] || WRAPPER_CLASS.default),
+        sizeClass,
+        config.className || ""
+      );
+    }
+    applyWrapperClasses();
     wrapper.setAttribute("data-input-variant", variant);
 
     if (config.prefixNode) {
@@ -234,19 +237,12 @@
     wrapper.setVariant = function (v) {
       variant = v;
       wrapper.setAttribute("data-input-variant", v);
-      wrapper.className = join(
-        WRAPPER_CLASS.base,
-        WRAPPER_CLASS[variant] || WRAPPER_CLASS.default,
-        inputSize === "large" ? WRAPPER_CLASS.sizeLarge : inputSize === "small" ? WRAPPER_CLASS.sizeSmall : WRAPPER_CLASS.sizeDefault,
-        disabled ? WRAPPER_CLASS.disabled : "",
-        config.className || ""
-      );
+      applyWrapperClasses();
     };
     wrapper.setDisabled = function (d) {
       disabled = !!d;
       input.disabled = disabled;
-      wrapper.classList.toggle("cursor-not-allowed", disabled);
-      wrapper.classList.toggle("opacity-60", disabled);
+      applyWrapperClasses();
     };
 
     return wrapper;

package/components/popover.js

@@ -19,6 +19,7 @@
    * @param {Function} [config.onOpen] - Called when popover opens (before positioning)
    * @param {string} [config.bodyClassName] - Optional class for body wrapper (overrides default padding)
    * @param {string} [config.panelClassName] - Optional class to add to panel (e.g. for width)
+   * @param {boolean} [config.modal=false] - If true, lock body scroll and show backdrop; only popover and trigger are interactive
    * @returns {Object} Popover API {show, hide, destroy, element}
    */
   function create(config = {}) {
@@ -33,6 +34,7 @@
       onOpen = null,
       bodyClassName = "",
       panelClassName = "",
+      modal = true,
     } = config;
 
     const triggerEl =
@@ -91,20 +93,68 @@
     wrapper.appendChild(panel);
     container.appendChild(wrapper);
 
+    var backdropEl = null;
+
+    function onBackdropWheel(e) {
+      e.preventDefault();
+    }
+
+    function applyModalOpen() {
+      if (!modal) return;
+      if (!backdropEl) {
+        backdropEl = document.createElement("div");
+        backdropEl.className = "fixed inset-0 z-[9998] bg-transparent pointer-events-auto";
+        backdropEl.setAttribute("aria-hidden", "true");
+        backdropEl.addEventListener("click", function () {
+          hide();
+        });
+        backdropEl.addEventListener("wheel", onBackdropWheel, { passive: false });
+      }
+      document.body.appendChild(backdropEl);
+      container.style.zIndex = "9999";
+    }
+
+    function applyModalClose() {
+      if (!modal) return;
+      if (backdropEl && backdropEl.parentNode) {
+        backdropEl.parentNode.removeChild(backdropEl);
+      }
+      container.style.zIndex = "";
+    }
+
     function noop() {}
 
     function position() {
       const triggerRect = triggerEl.getBoundingClientRect();
       const panelRect = panel.getBoundingClientRect();
       const gap = 8;
+      const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+      const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+      const spaceBelow = viewportHeight - triggerRect.bottom;
+      const spaceAbove = triggerRect.top;
+      const spaceRight = viewportWidth - triggerRect.right;
+      const spaceLeft = triggerRect.left;
+
+      // Flip placement when there is not enough space (prefer requested side, flip only when needed)
+      let effectivePlacement = placement;
+      if (placement === "bottom" && spaceBelow < panelRect.height + gap && spaceAbove >= panelRect.height + gap) {
+        effectivePlacement = "top";
+      } else if (placement === "top" && spaceAbove < panelRect.height + gap && spaceBelow >= panelRect.height + gap) {
+        effectivePlacement = "bottom";
+      } else if (placement === "right" && spaceRight < panelRect.width + gap && spaceLeft >= panelRect.width + gap) {
+        effectivePlacement = "left";
+      } else if (placement === "left" && spaceLeft < panelRect.width + gap && spaceRight >= panelRect.width + gap) {
+        effectivePlacement = "right";
+      }
+
+      panel.setAttribute("data-side", effectivePlacement);
+
       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);
 
-      switch (placement) {
+      switch (effectivePlacement) {
         case "bottom":
           top = triggerRect.height + gap;
           left = alignLeft;
@@ -137,11 +187,13 @@
       wrapper.classList.add("invisible", "opacity-0", "pointer-events-none");
       wrapper.classList.remove("visible", "opacity-100", "pointer-events-auto");
       wrapper.setAttribute("aria-hidden", "true");
+      applyModalClose();
       if (onClose) onClose();
     }
 
     function show() {
       if (onOpen) onOpen();
+      applyModalOpen();
       requestAnimationFrame(function () {
         position();
         wrapper.classList.remove("invisible", "opacity-0", "pointer-events-none");
@@ -157,6 +209,10 @@
 
     function destroy() {
       hide();
+      applyModalClose();
+      if (backdropEl && backdropEl.parentNode) {
+        backdropEl.parentNode.removeChild(backdropEl);
+      }
       if (wrapper.parentNode) {
         wrapper.parentNode.removeChild(wrapper);
       }

package/components/textarea.js

@@ -21,7 +21,7 @@
     warning:
       "min-h-[80px] border-warning-base hover:border-warning-base focus:border-warning-base",
     disabled:
-      "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
+      "pointer-events-none cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
   };
 
   function join() {

package/core/flow.js

@@ -1494,6 +1494,34 @@
     return field;
   }
 
+  // ============================================================================
+  // ALERTS
+  // ============================================================================
+
+  /**
+   * Render multiple alert messages into a container
+   * @param {HTMLElement} container - Container to append alerts to
+   * @param {string[]} messages - Array of message strings
+   * @param {string} [variant='default'] - 'default' | 'error' | 'warning' | 'success' | 'info' | 'destructive'
+   */
+  function renderAlerts(container, messages, variant = "default") {
+    if (!container || !Array.isArray(messages)) return;
+    const Alert = getComponent("Alert");
+    if (Alert && typeof Alert.simple === "function") {
+      messages.forEach((msg) => {
+        const el = Alert.simple(msg, variant);
+        if (el) container.appendChild(el);
+      });
+    } else {
+      messages.forEach((msg) => {
+        const div = document.createElement("div");
+        div.className = "rounded border p-2 text-sm " + (variant === "error" ? "bg-red-50 border-red-200 text-red-800" : "bg-gray-50 border-gray-200");
+        div.textContent = msg;
+        container.appendChild(div);
+      });
+    }
+  }
+
   // ============================================================================
   // TOAST NOTIFICATIONS
   // ============================================================================
@@ -1667,6 +1695,7 @@
     renderStepper,
 
     // Alerts
+    renderAlerts,
     showToast,
 
     // Table