fix(StepGroup): correct icon-label alignment for first item in nested StepGroup

[rzp-slash]

Problem

The icon and label are misaligned for the first item in a nested StepGroup. The icon appears ~6px above the label text.

Reported in: Slack (channel CMQ3RBHEU)

---

Root Cause

StepLineStart (used for stepType = 'start' — the first item in any nested StepGroup) renders a flex column:

[ StepTopCurveVertical SVG  ]  ← 14px tall (solid) / 20px tall (dotted)
[ <Box marginTop={-13px}>  ]  ← marker icon
[ connector line ↓         ]

markerTopAlignment = -13px was designed to overlap the curve endpoint with the marker center. But this puts the marker top at 1px from the container, while every other step type (StepLineVertical, StepLineEnd) uses a plain 6px spacer. Since the content column's text padding (paddingY: spacing.3) is fixed across all step types, the result is:

Component	Marker top	Marker center	Text center	Gap
StepLineStart (bug)	1 px	~12 px	~18 px	6 px ❌
StepLineVertical	6 px	~17 px	~18 px	~1 px ✅

The same bug exists in StepLineSingleItem (nested group with exactly one item).

---

Fix

Compute correctedMarkerTopAlignment = itemTopMargin - curveHeight so the marker top always lands at itemTopMargin = 6px from the container, consistent with all other step types.

Curve type	Before	After	Marker center
Solid (14 px)	-13 px	-8 px	17 px ✅
Dotted (20 px)	-13 px	-14 px	17 px ✅

Changed files:

• packages/blade/src/components/StepGroup/StepLine.web.tsx — StepLineStart + StepLineSingleItem
• packages/blade/src/components/StepGroup/__tests__/StepGroup.web.test.tsx — regression tests

Unchanged: tokens.ts, StepLineVertical, StepLineEnd, StepLineHorizontal

---

Before / After

Before	After

---

Tests Added

• Snapshot: solid-curve first nested item
• Snapshot: dotted-curve first nested item (stepProgress=none)
• Snapshot: single-item nested group (StepLineSingleItem)
• Snapshot: large-size nested group
• Style assertion: marginTop = -8px on solid-curve marker box
• Style assertion: marginTop = -14px on dotted-curve marker box
• Guard: middle nested items (StepLineVertical) are NOT regressed

---

Edge Case Audit

Scenario	Marker center before	Marker center after
StepLineStart solid, medium	12 px ❌	17 px ✅
StepLineStart dotted, medium	18 px (1 px off)	17 px ✅
StepLineStart solid, large	12 px ❌	19 px ✅
StepLineSingleItem solid, medium	12 px ❌	17 px ✅
StepLineVertical (middle / default)	17 px ✅	unchanged
StepLineEnd (last nested)	17 px ✅	unchanged
Horizontal StepGroup	N/A	not touched

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3a1602e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

✅ PR title follows Conventional Commits specification.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3a1602e:

Sandbox	Source
razorpay/blade: basic	Configuration