@homebound/beam 3.71.0 → 3.72.1

package/dist/index.d.cts

@@ -9963,7 +9963,7 @@ type WorkflowActionsProps = {
     primaryDisabled?: boolean;
 };
 
-type StepperTabsStep = Pick<StepperTabProps, "label" | "value" | "completed" | "disabled"> & Partial<Pick<WorkflowActionsProps, "onContinue">>;
+type StepperTabsStep = Pick<StepperTabProps, "label" | "value" | "disabled"> & Partial<Pick<WorkflowActionsProps, "onContinue">>;
 type StepperTabsProps = {
     steps: StepperTabsStep[];
     currentStep: StepperTabsStep["value"];
@@ -10256,10 +10256,16 @@ type PageHeaderLayoutProps<V extends string, X> = {
 /** Page header + body shell with auto-hide chrome. Contract: `docs/layouts.md`. */
 declare function PageHeaderLayout<V extends string, X extends Only<TabsContentXss, X>>(props: PageHeaderLayoutProps<V, X>): JSX.Element;
 
-/** A `WorkflowLayout` step: a `StepperTabsStep` (minus `value`, which is derived from `label`) plus the page content rendered while it's active — `completed` also gates the Continue/Complete CTA when this is the active step. */
+/**
+ * A `WorkflowLayout` step: a `StepperTabsStep` (minus `value`, which is derived from `label`) plus
+ * page content. Stepper chrome marks prior steps complete via current-step index; `isValid` only
+ * gates the Continue/Complete CTA for the active step.
+ */
 type WorkflowLayoutStep = Omit<StepperTabsStep, "value"> & {
     /** Rendered as the page body while this is the active step. */
     content: ReactNode;
+    /** Gates Continue/Complete for the active step (form validity) */
+    isValid: boolean;
 };
 type WorkflowLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuffix" | "breadcrumbs"> & Pick<WorkflowActionsProps, "onCancel" | "completeLabel" | "onComplete" | "onSaveAndExit"> & {
     /** The workflow's steps; the active step's `content` is the body, and it drives the header's tab strip. */
@@ -10274,8 +10280,9 @@ type WorkflowLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuffix"
  *
  * A standalone, full-page layout for step-based workflow pages — nest it directly under
  * `EnvironmentBannerLayout`, never under `NavbarLayout`/`SideNavLayout`/`PageHeaderLayout`. Unlike
- * `PageHeaderLayout`, the header here never auto-hides; the stepper tabs collapse to a condensed
- * indicator bar on mobile instead.
+ * `PageHeaderLayout`, the header here never auto-hides. The stepper tabs always collapse to a condensed
+ * indicator bar on mobile, and on larger viewports also collapse once scrolled past a threshold,
+ * re-expanding on scroll-up (even before reaching the top).
  *
  * Owns the workflow's fixed CTA set (Back/Cancel/Save & Exit/Continue-or-Complete) via `WorkflowActions`
  * so it can move them into a mobile footer at the `sm` breakpoint — `WorkflowHeader` itself is not part

package/dist/index.d.ts

@@ -9963,7 +9963,7 @@ type WorkflowActionsProps = {
     primaryDisabled?: boolean;
 };
 
-type StepperTabsStep = Pick<StepperTabProps, "label" | "value" | "completed" | "disabled"> & Partial<Pick<WorkflowActionsProps, "onContinue">>;
+type StepperTabsStep = Pick<StepperTabProps, "label" | "value" | "disabled"> & Partial<Pick<WorkflowActionsProps, "onContinue">>;
 type StepperTabsProps = {
     steps: StepperTabsStep[];
     currentStep: StepperTabsStep["value"];
@@ -10256,10 +10256,16 @@ type PageHeaderLayoutProps<V extends string, X> = {
 /** Page header + body shell with auto-hide chrome. Contract: `docs/layouts.md`. */
 declare function PageHeaderLayout<V extends string, X extends Only<TabsContentXss, X>>(props: PageHeaderLayoutProps<V, X>): JSX.Element;
 
-/** A `WorkflowLayout` step: a `StepperTabsStep` (minus `value`, which is derived from `label`) plus the page content rendered while it's active — `completed` also gates the Continue/Complete CTA when this is the active step. */
+/**
+ * A `WorkflowLayout` step: a `StepperTabsStep` (minus `value`, which is derived from `label`) plus
+ * page content. Stepper chrome marks prior steps complete via current-step index; `isValid` only
+ * gates the Continue/Complete CTA for the active step.
+ */
 type WorkflowLayoutStep = Omit<StepperTabsStep, "value"> & {
     /** Rendered as the page body while this is the active step. */
     content: ReactNode;
+    /** Gates Continue/Complete for the active step (form validity) */
+    isValid: boolean;
 };
 type WorkflowLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuffix" | "breadcrumbs"> & Pick<WorkflowActionsProps, "onCancel" | "completeLabel" | "onComplete" | "onSaveAndExit"> & {
     /** The workflow's steps; the active step's `content` is the body, and it drives the header's tab strip. */
@@ -10274,8 +10280,9 @@ type WorkflowLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuffix"
  *
  * A standalone, full-page layout for step-based workflow pages — nest it directly under
  * `EnvironmentBannerLayout`, never under `NavbarLayout`/`SideNavLayout`/`PageHeaderLayout`. Unlike
- * `PageHeaderLayout`, the header here never auto-hides; the stepper tabs collapse to a condensed
- * indicator bar on mobile instead.
+ * `PageHeaderLayout`, the header here never auto-hides. The stepper tabs always collapse to a condensed
+ * indicator bar on mobile, and on larger viewports also collapse once scrolled past a threshold,
+ * re-expanding on scroll-up (even before reaching the top).
  *
  * Owns the workflow's fixed CTA set (Back/Cancel/Save & Exit/Continue-or-Complete) via `WorkflowActions`
  * so it can move them into a mobile footer at the `sm` breakpoint — `WorkflowHeader` itself is not part

package/dist/index.js

@@ -25159,8 +25159,8 @@ function StepIcon({
 // src/components/StepperTabs/StepperTab.tsx
 import { useRef as useRef62 } from "react";
 import { mergeProps as mergeProps30, useButton as useButton13, useFocusRing as useFocusRing18, useHover as useHover22, VisuallyHidden as VisuallyHidden10 } from "react-aria";
-import { trussProps as trussProps113, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
-import { jsx as jsx200, jsxs as jsxs100 } from "react/jsx-runtime";
+import { trussProps as trussProps113 } from "@homebound/truss/runtime";
+import { Fragment as Fragment45, jsx as jsx200, jsxs as jsxs100 } from "react/jsx-runtime";
 function StepperTab(props) {
   const {
     label,
@@ -25195,65 +25195,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__ */ jsx200("span", { className: "oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1", children: label }),
-    completed && /* @__PURE__ */ jsx200("span", { className: "fs0 ml1", children: /* @__PURE__ */ jsx200(Icon, { icon: "check", inc: 2.5, ...tid.check }) }),
+    !collapsed && /* @__PURE__ */ jsxs100(Fragment45, { children: [
+      /* @__PURE__ */ jsxs100("span", { className: "dg jic mw0", children: [
+        /* @__PURE__ */ jsx200("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__ */ jsx200("span", { ...trussProps113({
+          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__ */ jsx200("span", { ...trussProps113({
+        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__ */ jsx200(Icon, { icon: "check", inc: 2.5, ...tid.check }) })
+    ] }),
+    /* @__PURE__ */ jsx200("span", { "aria-hidden": true, ...trussProps113(getIndicatorStyles(active, completed, disabled)), ...tid.indicator }),
     /* @__PURE__ */ jsx200(VisuallyHidden10, { children: completed ? "Complete" : "Not Complete" })
   ] });
 }
-function withBorderBottom(color) {
+function getStateStyles(active, completed) {
   return {
-    ...{
-      borderBottomStyle: "bbs_solid",
-      borderBottomWidth: ["borderBottomWidth_var", {
-        "--borderBottomWidth": maybeCssVar53(`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",
@@ -25262,10 +25283,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"
@@ -25274,11 +25296,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"
   }
 };
 
@@ -25299,6 +25327,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__ */ jsx201("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ jsx201("ol", { ...trussProps114({
     padding: "p_0",
     margin: "m_0",
@@ -25311,8 +25340,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__ */ createElement7("li", { ...trussProps114({
       display: "df",
       flexGrow: "fg1",
@@ -25325,7 +25355,7 @@ function StepperTabs(props) {
           "--maxWidth": `${maxStepWidthPx}px`
         }]
       } : {}
-    }), key: step.value, "aria-current": isCurrent, ...tid.step }, /* @__PURE__ */ jsx201(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__ */ jsx201(StepperTab, { label: step.label, value: step.value, active: isCurrent, completed: isCompleted, disabled: step.disabled, collapsed, onClick: onChange, ...tid.tab }));
   }) }) });
 }
 var maxStepWidthPx = 280;
@@ -25512,7 +25542,7 @@ function canClose(canCloseCheck) {
 
 // src/components/SuperDrawer/SuperDrawerContent.tsx
 import { trussProps as trussProps116, mergeProps as mergeProps31 } from "@homebound/truss/runtime";
-import { Fragment as Fragment45, jsx as jsx204, jsxs as jsxs102 } from "react/jsx-runtime";
+import { Fragment as Fragment46, jsx as jsx204, jsxs as jsxs102 } from "react/jsx-runtime";
 var SuperDrawerContent = ({
   children,
   actions
@@ -25571,7 +25601,7 @@ var SuperDrawerContent = ({
       }) }, "content");
     }
   }
-  return /* @__PURE__ */ jsxs102(Fragment45, { children: [
+  return /* @__PURE__ */ jsxs102(Fragment46, { children: [
     wrapWithMotionAndMaybeBack(children),
     actions && /* @__PURE__ */ jsx204("footer", { ...trussProps116({
       borderTopStyle: "bts_solid",
@@ -25634,13 +25664,13 @@ import { useEffect as useEffect37, useMemo as useMemo55, useRef as useRef63, use
 import { mergeProps as mergeProps32, useFocusRing as useFocusRing19, useHover as useHover23 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
-import { trussProps as trussProps117, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
-import { Fragment as Fragment46, jsx as jsx205, jsxs as jsxs103 } from "react/jsx-runtime";
+import { trussProps as trussProps117, maybeCssVar as maybeCssVar53 } from "@homebound/truss/runtime";
+import { Fragment as Fragment47, jsx as jsx205, jsxs as jsxs103 } from "react/jsx-runtime";
 function TabsWithContent(props) {
   const styles = hideTabs(props) ? {} : {
     paddingTop: "pt3"
   };
-  return /* @__PURE__ */ jsxs103(Fragment46, { children: [
+  return /* @__PURE__ */ jsxs103(Fragment47, { children: [
     /* @__PURE__ */ jsx205(Tabs, { ...props }),
     /* @__PURE__ */ jsx205(TabContent, { ...props, contentXss: {
       ...styles,
@@ -25791,7 +25821,7 @@ function TabImpl(props) {
       onClick: () => onClick(tab.value)
     }
   });
-  const tabLabel = /* @__PURE__ */ jsxs103(Fragment46, { children: [
+  const tabLabel = /* @__PURE__ */ jsxs103(Fragment47, { children: [
     label,
     (icon || endAdornment) && /* @__PURE__ */ jsx205("span", { className: "ml1", children: icon ? /* @__PURE__ */ jsx205(Icon, { icon }) : endAdornment })
   ] });
@@ -25812,7 +25842,7 @@ function getTabStyles() {
   const borderBottomStyles = {
     borderBottomStyle: "bbs_solid",
     borderBottomWidth: ["borderBottomWidth_var", {
-      "--borderBottomWidth": maybeCssVar54(`${borderBottomWidthPx}px`)
+      "--borderBottomWidth": maybeCssVar53(`${borderBottomWidthPx}px`)
     }],
     paddingBottom: ["pb_var", {
       "--paddingBottom": `${verticalPaddingPx - borderBottomWidthPx}px`
@@ -25932,7 +25962,7 @@ function useToast() {
 }
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
-import { trussProps as trussProps118, mergeProps as mergeProps33, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
+import { trussProps as trussProps118, mergeProps as mergeProps33, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
 import { jsx as jsx207, jsxs as jsxs105 } from "react/jsx-runtime";
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -25986,14 +26016,14 @@ function SideNavLayoutContent(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar55(zIndices.sideNav)
+        "--zIndex": maybeCssVar54(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": maybeCssVar55(__maybeInc23(navTop))
+        "--top": maybeCssVar54(__maybeInc23(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": maybeCssVar55(__maybeInc23(railViewportHeight))
+        "--height": maybeCssVar54(__maybeInc23(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -26003,11 +26033,11 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": maybeCssVar55(__maybeInc23(navTop))
+          "--top": maybeCssVar54(__maybeInc23(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar55(zIndices.sideNav)
+          "--zIndex": maybeCssVar54(zIndices.sideNav)
         }]
       },
       ...collapsed ? {
@@ -26046,7 +26076,7 @@ function SideNavLayoutContent(props) {
 }
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
-import { trussProps as trussProps119, mergeProps as mergeProps34, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
+import { trussProps as trussProps119, mergeProps as mergeProps34, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
 import { jsx as jsx208, jsxs as jsxs106 } from "react/jsx-runtime";
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -26079,10 +26109,10 @@ function EnvironmentBannerLayout(props) {
       top: "top0",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar56(zIndices.environmentBanner)
+        "--zIndex": maybeCssVar55(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar56(__maybeInc24(innerWidth))
+        "--width": maybeCssVar55(__maybeInc24(innerWidth))
       }]
     }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx208(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
@@ -26125,7 +26155,7 @@ function FormSectionLayout(props) {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { useMemo as useMemo56, useRef as useRef65 } from "react";
-import { mergeProps as mergeProps35, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps35, maybeCssVar as maybeCssVar56 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
 import { useLayoutEffect as useLayoutEffect8, useRef as useRef64, useState as useState57 } from "react";
@@ -26275,10 +26305,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar57(zIndices.navbar)
+        "--zIndex": maybeCssVar56(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar57(__maybeInc25(innerWidth))
+        "--width": maybeCssVar56(__maybeInc25(innerWidth))
       }]
     }
   ) : (
@@ -26287,10 +26317,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar57(zIndices.navbar)
+        "--zIndex": maybeCssVar56(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar57(__maybeInc25(innerWidth))
+        "--width": maybeCssVar56(__maybeInc25(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -26396,7 +26426,7 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps36, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps36, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
 import { jsx as jsx214, jsxs as jsxs110 } from "react/jsx-runtime";
 var __maybeInc26 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -26428,24 +26458,24 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": maybeCssVar58(__maybeInc26(headerLeft))
+      "--left": maybeCssVar57(__maybeInc26(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar58(__maybeInc26(headerWidth))
+      "--width": maybeCssVar57(__maybeInc26(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar58(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar57(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": maybeCssVar58(__maybeInc26(headerLeft))
+      "--left": maybeCssVar57(__maybeInc26(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar58(__maybeInc26(headerWidth))
+      "--width": maybeCssVar57(__maybeInc26(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar58(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar57(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
@@ -26469,7 +26499,7 @@ function PageHeaderLayout(props) {
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-import { useLayoutEffect as useLayoutEffect10, useRef as useRef68, useState as useState59 } from "react";
+import { useLayoutEffect as useLayoutEffect11, useRef as useRef69, useState as useState60 } from "react";
 
 // src/components/Headers/WorkflowHeader.tsx
 import { jsx as jsx215 } from "react/jsx-runtime";
@@ -26479,14 +26509,65 @@ function WorkflowHeader(props) {
   return /* @__PURE__ */ jsx215(BaseHeader, { ...otherProps, bottomSlot: /* @__PURE__ */ jsx215(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) });
 }
 
+// src/layouts/useScrollCollapse.ts
+import { useLayoutEffect as useLayoutEffect10, useRef as useRef67, useState as useState59 } from "react";
+function useScrollCollapse(enabled, restingOffset) {
+  const [collapsed, setCollapsed] = useState59(() => typeof window !== "undefined" && window.scrollY > 0);
+  const collapsedRef = useRef67(collapsed);
+  collapsedRef.current = collapsed;
+  const restingOffsetRef = useRef67(restingOffset);
+  restingOffsetRef.current = restingOffset;
+  const lastScrollYRef = useRef67(Number.POSITIVE_INFINITY);
+  const lastScrollHeightRef = useRef67(0);
+  useLayoutEffect10(() => {
+    lastScrollHeightRef.current = document.documentElement.scrollHeight;
+  }, [restingOffset]);
+  useLayoutEffect10(() => {
+    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
-import { useEffect as useEffect38, useRef as useRef67 } from "react";
+import { useEffect as useEffect38, useRef as useRef68 } from "react";
 import { useBlocker } from "react-router-dom";
 import { jsx as jsx216 } from "react/jsx-runtime";
 function useUnsavedChangesGuard(options) {
   const { isDirty, onCancel } = options;
   const { openModal } = useModal();
-  const isDirtyRef = useRef67(isDirty);
+  const isDirtyRef = useRef68(isDirty);
   isDirtyRef.current = isDirty;
   useEffect38(() => {
     const onBeforeUnload = (e) => {
@@ -26550,7 +26631,7 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-import { trussProps as trussProps123, mergeProps as mergeProps37, maybeCssVar as maybeCssVar59 } from "@homebound/truss/runtime";
+import { trussProps as trussProps123, mergeProps as mergeProps37, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
 import { jsx as jsx218, jsxs as jsxs112 } from "react/jsx-runtime";
 var __maybeInc27 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -26566,11 +26647,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] = useState59(() => getInitialStep(tabSteps, defaultStep));
+  const [currentStep, setCurrentStep] = useState60(() => getInitialStep(stepTabs, defaultStep));
   const tid = useTestIds(props, "workflowLayout");
   const {
     sm: isMobile
@@ -26582,28 +26663,30 @@ function WorkflowLayout(props) {
     isDirty,
     onCancel
   });
-  const headerMetricsRef = useRef68(null);
+  const bannerAndNavbarHeight = useBannerAndNavbarHeight();
+  const headerMetricsRef = useRef69(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__ */ jsx218(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__ */ jsx218(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;
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
@@ -26616,7 +26699,7 @@ function WorkflowLayout(props) {
     };
   }, [showFooter]);
   const headerEl = /* @__PURE__ */ jsx218(WorkflowHeader, { ...headerProps, rightSlot: isMobile ? void 0 : buttons, stepperTabs: {
-    steps: tabSteps,
+    steps: stepTabs,
     currentStep,
     onChange: setCurrentStep,
     collapsed
@@ -26631,13 +26714,13 @@ function WorkflowLayout(props) {
         position: "sticky",
         left: "left0",
         width: ["w_var", {
-          "--width": maybeCssVar59(__maybeInc27(headerWidth))
+          "--width": maybeCssVar58(__maybeInc27(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar59(zIndices.pageStickyHeader)
+          "--zIndex": maybeCssVar58(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": maybeCssVar59(__maybeInc27(outerTop))
+          "--top": maybeCssVar58(__maybeInc27(outerTop))
         }]
       }), ...tid.header, children: headerEl }),
       /* @__PURE__ */ jsx218("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children: activeStep?.content }),
@@ -26652,13 +26735,13 @@ function WorkflowLayout(props) {
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": maybeCssVar59(__maybeInc27(headerWidth))
+            "--width": maybeCssVar58(__maybeInc27(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": maybeCssVar59(zIndices.pageStickyFooter)
+            "--zIndex": maybeCssVar58(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",