@superleapai/flow-ui 2.5.4 → 2.5.5

package/components/card-select.js

@@ -88,7 +88,7 @@
     var wrapper = document.createElement("div");
     wrapper.setAttribute("role", "radiogroup");
     wrapper.setAttribute("dir", "ltr");
-    wrapper.className = join("flex flex-col gap-3 w-full", className);
+    wrapper.className = join("flex flex-col gap-8 w-full", className);
 
     function updateAllCards(newValue) {
       var cards = wrapper.querySelectorAll("[data-card-value]");

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

@@ -35,10 +35,37 @@
     return Array.prototype.filter.call(arguments, Boolean).join(" ");
   }
 
+  // Mirror input wrapper variant + size behaviour for visual consistency
+  var TRIGGER_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-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:
+      "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:bg-fill-tertiary-fill-light-gray focus-within:bg-fill-tertiary-fill-light-gray",
+    sizeDefault: "px-12 py-6",
+    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",
+  };
+
   /**
    * Create the calendar caption (month + year selects) and nav buttons
+   * @param {Object} [options] - Optional. nestedPopoverClass: string to add to Select/TimePicker popover wrappers so parent can ignore outside click
    */
-  function createCaption(displayMonth, fromDate, toDate, yearRange, onMonthChange, onPrev, onNext) {
+  function createCaption(displayMonth, fromDate, toDate, yearRange, onMonthChange, onPrev, onNext, options) {
+    options = options || {};
+    var nestedPopoverClass = options.nestedPopoverClass || "";
+    var closeTimePickerFn = null;
     var Utils = global.DateTimePickerUtils;
     if (!Utils) throw new Error("DateTimePickerUtils required");
     var MONTHS = Utils.genMonths();
@@ -49,6 +76,8 @@
     var captionWrap = document.createElement("div");
     captionWrap.className = "flex justify-between relative items-center p-6";
 
+    var monthSelect = null;
+    var yearSelect = null;
     var Select = getDep("Select");
     if (Select && typeof Select.create === "function") {
       var monthValue = displayMonth.getMonth();
@@ -61,22 +90,32 @@
       });
       var selectWrap = document.createElement("div");
       selectWrap.className = "inline-flex gap-x-8";
-      var monthSelect = Select.create({
+      monthSelect = Select.create({
         options: monthOptions,
         value: monthValue,
         placeholder: "Month",
         size: "small",
+        dropdownMaxHeightVh: 20,
+        popoverWrapperClassName: nestedPopoverClass,
+        onOpenCallback: function () {
+          if (closeTimePickerFn) closeTimePickerFn();
+        },
         onChange: function (val) {
           var d = new Date(displayMonth.getTime());
           d.setMonth(Number(val));
           onMonthChange(d);
         },
       });
-      var yearSelect = Select.create({
+      yearSelect = Select.create({
         options: yearOptions,
         value: yearValue,
         placeholder: "Year",
         size: "small",
+        dropdownMaxHeightVh: 20,
+        popoverWrapperClassName: nestedPopoverClass,
+        onOpenCallback: function () {
+          if (closeTimePickerFn) closeTimePickerFn();
+        },
         onChange: function (val) {
           var d = new Date(displayMonth.getTime());
           d.setFullYear(Number(val));
@@ -88,13 +127,18 @@
       captionWrap.appendChild(selectWrap);
     }
 
+    function closeDropdowns() {
+      if (monthSelect && monthSelect.popoverInstance) monthSelect.popoverInstance.hide();
+      if (yearSelect && yearSelect.popoverInstance) yearSelect.popoverInstance.hide();
+    }
+
     var Button = getDep("Button");
     if (!Button || typeof Button.create !== "function") {
       var fallbackNav = document.createElement("div");
       fallbackNav.className = "flex items-center gap-x-8";
       fallbackNav.textContent = "Button component required";
       captionWrap.appendChild(fallbackNav);
-      return { element: captionWrap, setMonth: function () {} };
+      return { element: captionWrap, setMonth: function () {}, closeDropdowns: function () {}, setCloseTimePicker: function () {} };
     }
     var nav = document.createElement("div");
     nav.className = "flex items-center gap-x-8";
@@ -120,6 +164,36 @@
     nav.appendChild(nextBtn);
     captionWrap.appendChild(nav);
 
+    /**
+     * Keep nav chevron disabled state in sync with current month
+     * so that when we move away from fromDate/toDate month they re-enable.
+     */
+    function updateNavDisabled(d) {
+      var prevDisabled = Utils.isPreviousMonthDisabled(d, fromDate);
+      var nextDisabled = Utils.isNextMonthDisabled(d, toDate);
+
+      if (prevBtn) {
+        prevBtn.disabled = prevDisabled;
+        if (prevDisabled) {
+          prevBtn.setAttribute("disabled", "disabled");
+        } else {
+          prevBtn.removeAttribute("disabled");
+        }
+      }
+
+      if (nextBtn) {
+        nextBtn.disabled = nextDisabled;
+        if (nextDisabled) {
+          nextBtn.setAttribute("disabled", "disabled");
+        } else {
+          nextBtn.removeAttribute("disabled");
+        }
+      }
+    }
+
+    // Ensure initial state is correct
+    updateNavDisabled(displayMonth);
+
     return {
       element: captionWrap,
       setMonth: function (d) {
@@ -128,6 +202,11 @@
           if (selects[0].updateValue) selects[0].updateValue(d.getMonth());
           if (selects[1].updateValue) selects[1].updateValue(d.getFullYear());
         }
+        updateNavDisabled(d);
+      },
+      closeDropdowns: closeDropdowns,
+      setCloseTimePicker: function (fn) {
+        closeTimePickerFn = fn;
       },
     };
   }
@@ -244,11 +323,19 @@
 
     var triggerWrapper = document.createElement("div");
     function getTriggerClassName(disabledState) {
+      var sizeClass =
+        size === "large"
+          ? TRIGGER_WRAPPER_CLASS.sizeLarge
+          : size === "small"
+          ? TRIGGER_WRAPPER_CLASS.sizeSmall
+          : TRIGGER_WRAPPER_CLASS.sizeDefault;
+
       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"
+        TRIGGER_WRAPPER_CLASS.base,
+        disabledState
+          ? TRIGGER_WRAPPER_CLASS.disabled
+          : TRIGGER_WRAPPER_CLASS[variant] || TRIGGER_WRAPPER_CLASS.default,
+        sizeClass
       );
     }
     triggerWrapper.className = getTriggerClassName(disabled);
@@ -289,8 +376,14 @@
     var calendarEl;
     var timePickerEl;
     var quickRow;
+    var isTimeDropdownOpen = false;
 
     function handleSelectDay(dayDate) {
+      // If time picker dropdown is open, close it first and ignore this click.
+      if (isTimeDropdownOpen) {
+        if (timePickerEl && timePickerEl.closeDropdown) timePickerEl.closeDropdown();
+        return;
+      }
       var out;
       if (granularity === "day") {
         out = Utils.startOfDay(dayDate);
@@ -339,7 +432,7 @@
     function buildPanelContent() {
       var fragment = document.createDocumentFragment();
 
-      // Caption (month/year dropdowns then nav chevrons)
+      // Caption (month/year dropdowns then nav chevrons); nested popover class so main popover does not close when selecting month/year/time
       captionEl = createCaption(
         displayMonth,
         fromDate,
@@ -363,7 +456,8 @@
             refreshCalendar();
             if (captionEl && captionEl.setMonth) captionEl.setMonth(displayMonth);
           }
-        }
+        },
+        { nestedPopoverClass: "dtp-nested-popover" }
       );
       fragment.appendChild(captionEl.element);
 
@@ -392,6 +486,13 @@
           placeholder: "Time",
           use24Hour: hourCycle === 24,
           size: "small",
+          popoverWrapperClassName: "dtp-nested-popover",
+          onDropdownOpen: function () {
+            isTimeDropdownOpen = true;
+          },
+          onDropdownClose: function () {
+            isTimeDropdownOpen = false;
+          },
           onChange: function (timeStr) {
             var base = value ? new Date(value.getTime()) : new Date();
             Utils.setTimeFromString(base, timeStr);
@@ -402,6 +503,16 @@
           },
         });
         timeRow.appendChild(timePickerEl);
+        // When opening time picker, close month/year selects; when opening month/year, close time picker
+        if (captionEl && captionEl.setCloseTimePicker) {
+          captionEl.setCloseTimePicker(function () {
+            if (timePickerEl && timePickerEl.closeDropdown) timePickerEl.closeDropdown();
+            isTimeDropdownOpen = false;
+          });
+        }
+        timePickerEl.addEventListener("click", function () {
+          if (captionEl && captionEl.closeDropdowns) captionEl.closeDropdowns();
+        }, true);
         fragment.appendChild(timeRow);
       }
 
@@ -416,6 +527,10 @@
           text: "Today",
           startIcon: ICON_CALENDAR_DOT,
           onClick: function () {
+            if (isTimeDropdownOpen) {
+              if (timePickerEl && timePickerEl.closeDropdown) timePickerEl.closeDropdown();
+              return;
+            }
             var t = granularity === "day" ? Utils.startOfDay(new Date()) : new Date();
             value = Utils.getValidDate(t, fromDate, toDate);
             validDate = value;
@@ -437,6 +552,10 @@
           text: "Tomorrow",
           startIcon: ICON_CALENDAR_UP,
           onClick: function () {
+            if (isTimeDropdownOpen) {
+              if (timePickerEl && timePickerEl.closeDropdown) timePickerEl.closeDropdown();
+              return;
+            }
             var t = Utils.addDays(new Date(), 1);
             t = granularity === "day" ? Utils.startOfDay(t) : t;
             value = Utils.getValidDate(t, fromDate, toDate);
@@ -458,6 +577,10 @@
         text: "No date",
         startIcon: ICON_CALENDAR_MINUS,
         onClick: function () {
+          if (isTimeDropdownOpen) {
+            if (timePickerEl && timePickerEl.closeDropdown) timePickerEl.closeDropdown();
+            return;
+          }
           value = undefined;
           validDate = undefined;
           setMonth(new Date());
@@ -479,7 +602,10 @@
       content: panelInner,
       placement: "bottom",
       align: align,
+      modal: true,
+      zIndex: 998,
       closeOnClickOutside: true,
+      outsideClickIgnoreSelector: ".dtp-nested-popover",
       onOpen: function () {
         triggerWrapper.setAttribute("aria-expanded", "true");
         displayMonth = validDate ? new Date(validDate.getTime()) : new Date();
@@ -490,13 +616,19 @@
       },
     });
 
-    // Popover already toggles on trigger click; we only block when disabled (use capture so we run first)
+    // Popover already toggles on trigger click; we block when disabled, and when time dropdown is open we close it instead of toggling date popover.
     triggerWrapper.addEventListener(
       "click",
       function (e) {
         if (disabled) {
           e.preventDefault();
           e.stopImmediatePropagation();
+          return;
+        }
+        if (isTimeDropdownOpen) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          if (timePickerEl && timePickerEl.closeDropdown) timePickerEl.closeDropdown();
         }
       },
       true

package/components/popover.js

@@ -20,6 +20,9 @@
    * @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
+   * @param {number} [config.zIndex=999] - z-index for the wrapper when modal (use lower e.g. 998 so nested popovers open above)
+   * @param {string} [config.wrapperClassName] - Optional class to add to the wrapper (e.g. for nested popovers so parent can ignore outside click)
+   * @param {string} [config.outsideClickIgnoreSelector] - If click target is inside this selector, do not close (e.g. ".dtp-nested-popover")
    * @returns {Object} Popover API {show, hide, destroy, element}
    */
   function create(config = {}) {
@@ -35,6 +38,9 @@
       bodyClassName = "",
       panelClassName = "",
       modal = true,
+      zIndex = 999,
+      wrapperClassName = "",
+      outsideClickIgnoreSelector = "",
     } = config;
 
     const triggerEl =
@@ -55,7 +61,8 @@
 
     const wrapper = document.createElement("div");
     wrapper.className =
-      "fixed 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" +
+      (wrapperClassName ? " " + wrapperClassName : "");
     wrapper.setAttribute("aria-hidden", "true");
 
     const panel = document.createElement("div");
@@ -119,7 +126,7 @@
         });
       }
       document.body.appendChild(backdropEl);
-      wrapper.style.zIndex = "999";
+      wrapper.style.zIndex = String(zIndex);
     }
 
     function applyModalClose() {
@@ -190,15 +197,28 @@
             ? triggerRect.height - panelRect.height
             : 0;
 
+      // Clear top-placement max-height when not opening above
+      if (effectivePlacement !== "top") {
+        panel.style.maxHeight = "";
+      }
+
       switch (effectivePlacement) {
         case "bottom":
           top = triggerRect.bottom + gap;
           left = triggerRect.left + alignLeft;
           break;
-        case "top":
-          top = triggerRect.top - panelRect.height - gap;
+        case "top": {
+          // Larger gap when above the trigger so the popover doesn't overlap it.
+          const topGap = 24;
+          top = triggerRect.top - panelRect.height - topGap;
           left = triggerRect.left + alignLeft;
+          // Cap panel height so when content loads/tall it doesn't grow downward into the trigger.
+          const maxHeightAbove = triggerRect.top - topGap - 12;
+          if (maxHeightAbove > 0) {
+            panel.style.maxHeight = maxHeightAbove + "px";
+          }
           break;
+        }
         case "right":
           top = triggerRect.top + alignTop;
           left = triggerRect.right + gap;
@@ -242,6 +262,9 @@
       applyModalOpen();
       requestAnimationFrame(function () {
         position();
+        // Set panel to open state before making wrapper visible so we never show
+        // the closed state (avoids 2–3 frame flicker of fade-out/zoom-out then open).
+        panel.setAttribute("data-state", "open");
         wrapper.classList.remove(
           "invisible",
           "opacity-0",
@@ -258,11 +281,6 @@
           });
           resizeObserver.observe(panel);
         }
-        requestAnimationFrame(function () {
-          requestAnimationFrame(function () {
-            panel.setAttribute("data-state", "open");
-          });
-        });
       });
     }
 
@@ -302,13 +320,10 @@
     }
 
     function outsideClick(e) {
-      if (
-        wrapper.classList.contains("visible") &&
-        !wrapper.contains(e.target) &&
-        !triggerEl.contains(e.target)
-      ) {
-        hide();
-      }
+      if (!wrapper.classList.contains("visible")) return;
+      if (wrapper.contains(e.target) || triggerEl.contains(e.target)) return;
+      if (outsideClickIgnoreSelector && e.target.closest && e.target.closest(outsideClickIgnoreSelector)) return;
+      hide();
     }
 
     function handleKeyDown(e) {

package/components/select.js

@@ -84,6 +84,9 @@
     var size = config.size || "default";
     var canClear = !!config.canClear;
     var onClear = config.onClear;
+    var popoverWrapperClassName = config.popoverWrapperClassName || "";
+    var onOpenCallback = config.onOpenCallback || null;
+    var dropdownMaxHeightVh = config.dropdownMaxHeightVh != null ? config.dropdownMaxHeightVh : 45;
 
     var disabled = config.disabled === true;
     var value =
@@ -193,11 +196,13 @@
 
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
-    content.className = "custom-select-content w-full max-h-[45vh] overflow-hidden flex flex-col";
+    content.className = "custom-select-content w-full overflow-hidden flex flex-col";
+    content.style.maxHeight = dropdownMaxHeightVh + "vh";
 
     var optionsList = document.createElement("div");
     optionsList.className =
-      "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
+      "overflow-y-auto p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
+    optionsList.style.maxHeight = dropdownMaxHeightVh + "vh";
 
     if (options.length === 0) {
       var noOpt = document.createElement("div");
@@ -257,11 +262,13 @@
       closeOnClickOutside: true,
       bodyClassName: "p-0 overflow-hidden",
       panelClassName: "min-w-[var(--trigger-width)] max-h-[45vh] overflow-hidden",
+      wrapperClassName: popoverWrapperClassName,
       onOpen: function () {
         if (disabled) {
           popover.hide();
           return;
         }
+        if (onOpenCallback) onOpenCallback();
         document
           .querySelectorAll(".custom-select, .record-select, .enum-select, .enum-multiselect, .custom-multiselect, .record-multiselect")
           .forEach(function (other) {

package/components/time-picker.js

@@ -47,16 +47,50 @@
     return pad(h12) + " : " + pad(minute) + " " + amPm;
   }
 
-  function triggerClasses(disabled, hasValue, size) {
-    var 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 " +
-      "bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base focus:outline-none min-h-0 h-full truncate hover:cursor-pointer ";
-    var sizeClass = size === "small" ? "px-12 py-4 !text-reg-12" : "px-12 py-6 !text-reg-13";
+  // Mirror input wrapper variant + size for visual consistency
+  var TRIGGER_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 focus:outline-none min-h-0 h-full truncate hover:cursor-pointer " +
+      "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:
+      "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:bg-fill-tertiary-fill-light-gray focus-within:bg-fill-tertiary-fill-light-gray",
+    sizeDefault: "px-12 py-6 !text-reg-13",
+    sizeSmall: "px-12 py-4 !text-reg-12",
+    sizeLarge: "px-12 py-8 !text-reg-14",
+    disabled:
+      "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() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  function triggerClasses(disabled, hasValue, size, variant) {
+    variant = variant || "default";
+    var sizeClass =
+      size === "small"
+        ? TRIGGER_CLASS.sizeSmall
+        : size === "large"
+        ? TRIGGER_CLASS.sizeLarge
+        : TRIGGER_CLASS.sizeDefault;
     var valueClass = hasValue ? "text-inherit" : "text-typography-quaternary-text";
-    var disabledClass = disabled
-      ? " pointer-events-none cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary"
-      : "";
-    return base + sizeClass + " " + valueClass + disabledClass;
+    var variantClass = disabled ? TRIGGER_CLASS.disabled : (TRIGGER_CLASS[variant] || TRIGGER_CLASS.default);
+    return join(
+      TRIGGER_CLASS.base,
+      variantClass,
+      sizeClass,
+      valueClass
+    );
   }
 
   /**
@@ -132,7 +166,8 @@
    * @param {Function} config.onChange - Change handler (value: string "HH:mm")
    * @param {boolean} config.disabled - Whether the picker is disabled
    * @param {boolean} config.use24Hour - Use 24-hour format (default: false, i.e. 12-hour AM/PM)
-   * @param {string} [config.size] - 'default' | 'small' (matches Input/Select sizes)
+   * @param {string} [config.size] - 'default' | 'small' | 'large' (matches Input/Select sizes)
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'success' | 'borderless' | 'inline' (matches Input trigger styles)
    * @returns {HTMLElement} Time picker container element
    */
   function create(config) {
@@ -140,9 +175,13 @@
     var initialValue = config.value !== undefined ? config.value : "";
     var placeholder = config.placeholder || "Select time";
     var onChange = config.onChange;
+    var onDropdownOpen = typeof config.onDropdownOpen === "function" ? config.onDropdownOpen : null;
+    var onDropdownClose = typeof config.onDropdownClose === "function" ? config.onDropdownClose : null;
     var disabled = config.disabled === true;
     var use24Hour = config.use24Hour === true;
-    var size = config.size === "small" ? "small" : "default";
+    var size = config.size === "small" ? "small" : config.size === "large" ? "large" : "default";
+    var variant = config.variant || "default";
+    var popoverWrapperClassName = config.popoverWrapperClassName || "";
 
     var value = typeof initialValue === "string" ? initialValue : "";
     var parsed = parseValue(value);
@@ -161,7 +200,7 @@
     trigger.setAttribute("aria-haspopup", "listbox");
     trigger.setAttribute("aria-expanded", "false");
     trigger.setAttribute("aria-label", placeholder);
-    trigger.className = triggerClasses(disabled, !!value, size);
+    trigger.className = triggerClasses(disabled, !!value, size, variant);
 
     var triggerText = document.createElement("span");
     triggerText.className =
@@ -192,6 +231,8 @@
     }
     var periodOptions = [{ value: "AM", label: "AM" }, { value: "PM", label: "PM" }];
 
+    var isOpen = false;
+
     var hourColVal = use24Hour ? hour : hour12;
     var hourColumn = createColumn(hourOptions, hourColVal, function (v) {
       if (use24Hour) {
@@ -207,7 +248,7 @@
       triggerText.className =
         "flex-1 truncate text-left tabular-nums " +
         (value ? "text-inherit" : "text-typography-quaternary-text");
-      trigger.className = triggerClasses(disabled, !!value, size);
+      trigger.className = triggerClasses(disabled, !!value, size, variant);
       if (onChange) onChange(value);
     }, true);
     var minuteColumn = createColumn(minuteOptions, minute, function (v) {
@@ -219,7 +260,7 @@
       triggerText.className =
         "flex-1 truncate text-left tabular-nums " +
         (value ? "text-inherit" : "text-typography-quaternary-text");
-      trigger.className = triggerClasses(disabled, !!value, size);
+      trigger.className = triggerClasses(disabled, !!value, size, variant);
       if (onChange) onChange(value);
     }, true);
     var periodColumn = null;
@@ -234,7 +275,7 @@
         triggerText.className =
           "flex-1 truncate text-left tabular-nums " +
           (value ? "text-inherit" : "text-typography-quaternary-text");
-        trigger.className = triggerClasses(disabled, !!value, size);
+        trigger.className = triggerClasses(disabled, !!value, size, variant);
         if (onChange) onChange(value);
       }, false);
     }
@@ -310,17 +351,29 @@
       closeOnClickOutside: true,
       bodyClassName: "p-0",
       panelClassName: "!w-auto min-w-max",
+      wrapperClassName: popoverWrapperClassName,
       onOpen: function () {
         trigger.setAttribute("aria-expanded", "true");
         container.classList.add("open");
+        isOpen = true;
+        if (onDropdownOpen) onDropdownOpen();
         syncColumnsAndScroll();
       },
       onClose: function () {
         trigger.setAttribute("aria-expanded", "false");
         container.classList.remove("open");
+        isOpen = false;
+        if (onDropdownClose) onDropdownClose();
       },
     });
     hidePopover = popover.hide;
+    container.closeDropdown = function () {
+      popover.hide();
+    };
+
+    container.isDropdownOpen = function () {
+      return isOpen;
+    };
 
     container.updateValue = function (newVal) {
       value = typeof newVal === "string" ? newVal : "";
@@ -333,7 +386,7 @@
       triggerText.className =
         "flex-1 truncate text-left tabular-nums " +
         (value ? "text-inherit" : "text-typography-quaternary-text");
-      trigger.className = triggerClasses(disabled, !!value, size);
+      trigger.className = triggerClasses(disabled, !!value, size, variant);
       hourColumn.setSelected(use24Hour ? hour : hour12);
       minuteColumn.setSelected(minute);
       if (periodColumn) periodColumn.setSelected(period);
@@ -342,7 +395,7 @@
     container.setDisabled = function (isDisabled) {
       disabled = !!isDisabled;
       trigger.disabled = disabled;
-      trigger.className = triggerClasses(disabled, !!value, size);
+      trigger.className = triggerClasses(disabled, !!value, size, variant);
       if (disabled) popover.hide();
     };
 

package/core/flow.js

@@ -386,10 +386,13 @@
    * @param {Function} config.onChange - Optional change handler
    * @param {boolean} config.disabled - Whether time picker is disabled
    * @param {boolean} config.use24Hour - Use 24-hour format (default: false, i.e. 12-hour AM/PM)
+   * @param {string} [config.size] - 'default' | 'small' | 'large'
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'success' | 'borderless' | 'inline'
+   * @param {string} [config.helpText] - Optional help text for tooltip
    * @returns {HTMLElement} Field element
    */
   function createTimePicker(config) {
-    const { label, fieldId, value: initialValue, placeholder, required = false, onChange, disabled = false, use24Hour = false, helpText = null } = config;
+    const { label, fieldId, value: initialValue, placeholder, required = false, onChange, disabled = false, use24Hour = false, size, variant, helpText = null } = config;
 
     const field = createFieldWrapper(label, required, helpText);
 
@@ -402,6 +405,8 @@
         placeholder: placeholder || `Select ${label}`,
         disabled,
         use24Hour,
+        size,
+        variant,
         onChange: (value) => {
           set(fieldId, value);
           if (onChange) { onChange(value); }
@@ -441,6 +446,7 @@
    * @param {12|24} config.hourCycle - 12 or 24 hour format
    * @param {string} config.granularity - 'day' | 'hour' | 'minute' | 'second'
    * @param {string} config.size - 'small' | 'default' | 'large'
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'success' | 'borderless' | 'inline'
    * @param {Date} config.fromDate - Min selectable date
    * @param {Date} config.toDate - Max selectable date
    * @param {string} config.helpText - Optional help text for tooltip
@@ -458,6 +464,7 @@
       hourCycle = 12,
       granularity = "minute",
       size = "default",
+      variant,
       fromDate,
       toDate,
       helpText = null,
@@ -488,6 +495,7 @@
         hourCycle,
         granularity,
         size,
+        variant,
         fromDate,
         toDate,
         onChange: (date) => {