Align prefix for stepped lists

[ClementChaumel]

Done

Align stepped lists prefixes

/docs/examples/patterns/lists/lists-stepped-detailed

Screenshots

[webteam-app]

Demo starting at https://vanilla-framework-4735.demos.haus/docs/examples/patterns/lists/lists-stepped-detailed

[bartaz]

As discussed with Lyubo:

• font size of number same as heading, on same baseline, same font style
• circle size of line height (or .5rem bigger)
• spacing between circle and heading fixed (1.5rem?)

[lyubomir-popov]

@bartaz mockups here, to confirm circles == line-height + .5rem

[lyubomir-popov]

I wonder whether we even need the circle. Thjis looks good to me (increased margin-right to 1.5rem):

[bartaz]

I wonder whether we even need the circle. Thjis looks good to me (increased margin-right to 1.5rem):

@lyubomir-popov No separator at all? Dot at least for consistency with default ordered list styling?

1. something
2. something

[bartaz]

@lyubomir-popov And don't forget about default "stacked" version, also on small screens, where content is below, and needs to be aligned. Circle gives us consistent alignment, numbers will differ when every step has a number in different width:

[ClementChaumel]

LGTM! I can't approve since it's originally my PR but I think it's in a good state!

[lyubomir-popov]

@bartaz just one thing, can we please make the stepped list example use h2s? This way people who copy-paste from here will get a better, non-bold default. I mostly use h2s for these so chances are it will be the right choice.

[lyubomir-popov]

+1 for an easy merge after the above hasbeen adressed