@homebound/beam 3.72.0 → 3.73.0

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;
@@ -26586,7 +26616,7 @@ function FormSectionLayout(props) {
       ] }),
       initialFields
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
+    sections && /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
   ] });
 }
 
@@ -27084,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_react156.useState)(() => getInitialStep(tabSteps, defaultStep));
+  const [currentStep, setCurrentStep] = (0, import_react156.useState)(() => getInitialStep(stepTabs, defaultStep));
   const tid = useTestIds(props, "workflowLayout");
   const {
     sm: isMobile
@@ -27110,17 +27140,17 @@ function WorkflowLayout(props) {
   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_react156.useLayoutEffect)(() => {
@@ -27136,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