@homebound/beam 3.71.0 → 3.72.1

package/dist/index.cjs

@@ -25662,65 +25662,86 @@ function StepperTab(props) {
     ...stepperTabStyles.baseStyles,
     ...getStateStyles(active, completed),
     ...isHovered && !disabled ? stepperTabStyles.hoverStyles : {},
-    ...collapsed ? getCollapsedStyles(active, completed) : {},
+    ...collapsed ? stepperTabStyles.collapsedStyles : {},
     ...disabled ? stepperTabStyles.disabledStyles : {},
     ...isFocusVisible ? stepperTabStyles.focusRingStyles : {}
   }), ...tid[defaultTestId(value)], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("span", { className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1", children: label }),
-    completed && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("span", { className: "fs0 ml1", children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Icon, { icon: "check", inc: 2.5, ...tid.check }) }),
+    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_jsx_runtime200.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)("span", { className: "dg jic mw0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("span", { className: "fw6 fz_14px lh_20px visibility_hidden gridArea_1_1 oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wordBreak_break_all", "aria-hidden": true, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("span", { ...(0, import_runtime123.trussProps)({
+          gridArea: "gridArea_1_1",
+          overflow: "oh",
+          display: "d_negwebkit_box",
+          WebkitBoxOrient: "wbo_vertical",
+          textOverflow: "to_ellipsis",
+          WebkitLineClamp: "wlc_1",
+          wordBreak: "wordBreak_break_all",
+          ...active ? {
+            fontWeight: "fw6",
+            fontSize: "fz_14px",
+            lineHeight: "lh_20px"
+          } : {}
+        }), children: label })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("span", { ...(0, import_runtime123.trussProps)({
+        flexShrink: "fs0",
+        marginLeft: "ml1",
+        transition: "transitionAll",
+        opacity: "o0",
+        transform: "transform_scale_0_75_translateY_100",
+        ...completed ? {
+          opacity: "o100",
+          transform: "transform_scale_1_translateY_0"
+        } : {}
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("span", { "aria-hidden": true, ...(0, import_runtime123.trussProps)(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
     /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_react_aria63.VisuallyHidden, { children: completed ? "Complete" : "Not Complete" })
   ] });
 }
-function withBorderBottom(color) {
+function getStateStyles(active, completed) {
   return {
-    ...{
-      borderBottomStyle: "bbs_solid",
-      borderBottomWidth: ["borderBottomWidth_var", {
-        "--borderBottomWidth": (0, import_runtime123.maybeCssVar)(`3px`)
+    color: ["color_var", {
+      "--color": "var(--b-on-surface-muted)"
+    }],
+    ...active || completed ? {
+      color: ["color_var", {
+        "--color": "var(--b-choice-selected)"
       }]
-    },
-    ...color
+    } : {}
   };
 }
-function getStateStyles(active, completed) {
+function getIndicatorStyles(active, completed, disabled) {
   return {
     ...{
-      color: "gray400",
-      ...active || completed ? {
-        color: "blue700"
-      } : {},
-      ...active ? {
-        fontWeight: "fw6",
-        fontSize: "fz_14px",
-        lineHeight: "lh_20px"
+      position: "absolute",
+      left: "left0",
+      right: "right0",
+      bottom: "bottom0",
+      height: ["h_var", {
+        "--height": `${active ? activeIndicatorHeightPx : inactiveIndicatorHeightPx}px`
+      }],
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-field-border-default)"
+      }],
+      ...(active || completed) && !disabled ? {
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-primary)"
+        }]
       } : {}
-    },
-    ...withBorderBottom(active || completed ? {
-      borderColor: "bcBlue600"
-    } : {
-      borderColor: "bcGray300"
-    })
-  };
-}
-function getCollapsedStyles(active, completed) {
-  return {
-    ...{
-      cursor: "cursor_default",
-      height: "h_0px",
-      paddingTop: "pt0",
-      paddingBottom: "pb0"
-    },
-    ...active || completed ? {
-      borderColor: "bcBlue600"
-    } : {
-      borderColor: "bcGray300"
     }
   };
 }
+var activeIndicatorHeightPx = 3;
+var inactiveIndicatorHeightPx = 2;
 var stepperTabStyles = {
+  // No overflow:hidden — collapsed indicators are absolute and must paint outside the 0-height box.
   baseStyles: {
+    position: "relative",
     display: "df",
     alignItems: "aic",
+    justifyContent: "jcfs",
     flexGrow: "fg1",
     paddingTop: "pt1",
     paddingBottom: "pb1",
@@ -25729,10 +25750,11 @@ var stepperTabStyles = {
     fontWeight: "fw4",
     fontSize: "fz_14px",
     lineHeight: "lh_20px",
-    overflow: "oh",
+    color: ["color_var", {
+      "--color": "var(--b-on-surface-muted)"
+    }],
     textAlign: "tal",
-    height: "h_48px",
-    transition: "transitionAll"
+    height: "h_40px"
   },
   hoverStyles: {
     backgroundColor: "bgGray100"
@@ -25741,11 +25763,17 @@ var stepperTabStyles = {
     boxShadow: "bshFocus",
     outline: "outline0"
   },
-  // Disabled always wins over both the state's and the collapsed border color.
+  collapsedStyles: {
+    cursor: "cursor_default",
+    height: "h_0px",
+    paddingTop: "pt0",
+    paddingBottom: "pb0"
+  },
   disabledStyles: {
-    color: "gray400",
-    cursor: "cursorNotAllowed",
-    borderColor: "bcGray300"
+    color: ["color_var", {
+      "--color": "var(--b-text-disabled)"
+    }],
+    cursor: "cursorNotAllowed"
   }
 };
 
@@ -25766,6 +25794,7 @@ function StepperTabs(props) {
   } = useBreakpoint();
   const collapsed = isMobile || !!forceCollapsed;
   const capWidth = steps.length <= 3;
+  const currentStepIndex = Math.max(0, steps.findIndex((step) => step.value === currentStep));
   return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("ol", { ...(0, import_runtime124.trussProps)({
     padding: "p_0",
     margin: "m_0",
@@ -25778,8 +25807,9 @@ function StepperTabs(props) {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: "bbw_1px",
     borderColor: "bcGray400"
-  }), children: steps.map((step) => {
-    const isCurrent = step.value === currentStep;
+  }), children: steps.map((step, idx) => {
+    const isCurrent = idx === currentStepIndex;
+    const isCompleted = idx < currentStepIndex;
     return /* @__PURE__ */ (0, import_react145.createElement)("li", { ...(0, import_runtime124.trussProps)({
       display: "df",
       flexGrow: "fg1",
@@ -25792,7 +25822,7 @@ function StepperTabs(props) {
           "--maxWidth": `${maxStepWidthPx}px`
         }]
       } : {}
-    }), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(StepperTab, { label: step.label, value: step.value, active: isCurrent, completed: step.completed, disabled: step.disabled, collapsed, onClick: onChange, ...tid.tab }));
+    }), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(StepperTab, { label: step.label, value: step.value, active: isCurrent, completed: isCompleted, disabled: step.disabled, collapsed, onClick: onChange, ...tid.tab }));
   }) }) });
 }
 var maxStepWidthPx = 280;
@@ -26936,7 +26966,7 @@ function PageHeaderLayout(props) {
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-var import_react155 = require("react");
+var import_react156 = require("react");
 
 // src/components/Headers/WorkflowHeader.tsx
 var import_jsx_runtime215 = require("react/jsx-runtime");
@@ -26946,16 +26976,67 @@ function WorkflowHeader(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(BaseHeader, { ...otherProps, bottomSlot: /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) });
 }
 
-// src/layouts/WorkflowLayout/useUnsavedChangesGuard.tsx
+// src/layouts/useScrollCollapse.ts
 var import_react154 = require("react");
+function useScrollCollapse(enabled, restingOffset) {
+  const [collapsed, setCollapsed] = (0, import_react154.useState)(() => typeof window !== "undefined" && window.scrollY > 0);
+  const collapsedRef = (0, import_react154.useRef)(collapsed);
+  collapsedRef.current = collapsed;
+  const restingOffsetRef = (0, import_react154.useRef)(restingOffset);
+  restingOffsetRef.current = restingOffset;
+  const lastScrollYRef = (0, import_react154.useRef)(Number.POSITIVE_INFINITY);
+  const lastScrollHeightRef = (0, import_react154.useRef)(0);
+  (0, import_react154.useLayoutEffect)(() => {
+    lastScrollHeightRef.current = document.documentElement.scrollHeight;
+  }, [restingOffset]);
+  (0, import_react154.useLayoutEffect)(() => {
+    if (!enabled) return;
+    const commit = (next) => {
+      if (next !== collapsedRef.current) {
+        collapsedRef.current = next;
+        setCollapsed(next);
+      }
+    };
+    const updateCollapsed = () => {
+      const doc = document.documentElement;
+      const currentY = window.scrollY;
+      if (currentY <= 0) {
+        lastScrollYRef.current = 0;
+        lastScrollHeightRef.current = doc.scrollHeight;
+        commit(false);
+        return;
+      }
+      const currentScrollHeight = doc.scrollHeight;
+      const scrollHeightChanged = lastScrollHeightRef.current !== 0 && currentScrollHeight !== lastScrollHeightRef.current;
+      const dy = currentY - lastScrollYRef.current;
+      lastScrollYRef.current = currentY;
+      lastScrollHeightRef.current = currentScrollHeight;
+      if (currentY <= restingOffsetRef.current) return;
+      if (scrollHeightChanged) {
+        commit(true);
+        return;
+      }
+      const atBottom = currentY >= doc.scrollHeight - doc.clientHeight;
+      if (dy > 0) commit(true);
+      else if (dy < 0 && !atBottom) commit(false);
+    };
+    updateCollapsed();
+    window.addEventListener("scroll", updateCollapsed, { passive: true });
+    return () => window.removeEventListener("scroll", updateCollapsed);
+  }, [enabled]);
+  return collapsed;
+}
+
+// src/layouts/WorkflowLayout/useUnsavedChangesGuard.tsx
+var import_react155 = require("react");
 var import_react_router_dom9 = require("react-router-dom");
 var import_jsx_runtime216 = require("react/jsx-runtime");
 function useUnsavedChangesGuard(options) {
   const { isDirty, onCancel } = options;
   const { openModal } = useModal();
-  const isDirtyRef = (0, import_react154.useRef)(isDirty);
+  const isDirtyRef = (0, import_react155.useRef)(isDirty);
   isDirtyRef.current = isDirty;
-  (0, import_react154.useEffect)(() => {
+  (0, import_react155.useEffect)(() => {
     const onBeforeUnload = (e) => {
       if (isDirtyRef.current?.()) {
         e.preventDefault();
@@ -26981,7 +27062,7 @@ function useUnsavedChangesGuard(options) {
 function UnsavedChangesNavigationModal(props) {
   const { proceed, cancelNavigation } = props;
   const { openModal, closeModal } = useModal();
-  (0, import_react154.useEffect)(() => {
+  (0, import_react155.useEffect)(() => {
     openModal({
       allowClosing: false,
       content: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
@@ -27033,11 +27114,11 @@ function WorkflowLayout(props) {
     isDirty,
     ...headerProps
   } = props;
-  const tabSteps = steps.map((step) => ({
+  const stepTabs = steps.map((step) => ({
     ...step,
     value: defaultTestId(step.label)
   }));
-  const [currentStep, setCurrentStep] = (0, import_react155.useState)(() => getInitialStep(tabSteps, defaultStep));
+  const [currentStep, setCurrentStep] = (0, import_react156.useState)(() => getInitialStep(stepTabs, defaultStep));
   const tid = useTestIds(props, "workflowLayout");
   const {
     sm: isMobile
@@ -27049,28 +27130,30 @@ function WorkflowLayout(props) {
     isDirty,
     onCancel
   });
-  const headerMetricsRef = (0, import_react155.useRef)(null);
+  const bannerAndNavbarHeight = useBannerAndNavbarHeight();
+  const headerMetricsRef = (0, import_react156.useRef)(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
-  const collapsed = isMobile;
+  const scrollCollapsed = useScrollCollapse(!isMobile, bannerAndNavbarHeight + headerHeight);
+  const collapsed = isMobile || scrollCollapsed;
   const headerWidth = documentScrollChromeWidth();
   const outerTop = bannerAndNavbarChromeTop();
   const cssVars = headerHeight > 0 ? {
     [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
   } : void 0;
-  const currentIndex = isValidStep(tabSteps, currentStep) ? tabSteps.findIndex((step) => step.value === currentStep) : 0;
+  const currentIndex = isValidStep(stepTabs, currentStep) ? stepTabs.findIndex((step) => step.value === currentStep) : 0;
   const isFirstStep = currentIndex <= 0;
-  const isLastStep = currentIndex === tabSteps.length - 1;
-  const activeStep = tabSteps[currentIndex];
-  const buttons = /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(tabSteps[currentIndex - 1].value), onCancel: onCancelClick, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.completed, onContinue: async () => {
+  const isLastStep = currentIndex === stepTabs.length - 1;
+  const activeStep = stepTabs[currentIndex];
+  const buttons = /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(stepTabs[currentIndex - 1].value), onCancel: onCancelClick, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.isValid, onContinue: async () => {
     const onContinue = activeStep?.onContinue;
     if (onContinue) {
       const allowed = await onContinue();
       if (allowed === false) return;
     }
-    setCurrentStep(tabSteps[currentIndex + 1].value);
+    setCurrentStep(stepTabs[currentIndex + 1].value);
   } });
   const showFooter = isMobile;
-  (0, import_react155.useLayoutEffect)(() => {
+  (0, import_react156.useLayoutEffect)(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
@@ -27083,7 +27166,7 @@ function WorkflowLayout(props) {
     };
   }, [showFooter]);
   const headerEl = /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(WorkflowHeader, { ...headerProps, rightSlot: isMobile ? void 0 : buttons, stepperTabs: {
-    steps: tabSteps,
+    steps: stepTabs,
     currentStep,
     onChange: setCurrentStep,
     collapsed