Enforce style containment to <Steps> list items (#1948)

HiDeoo · web-flow · commit 68c0c077a9ca · 2024-06-04T20:33:47.000+02:00
diff --git a/.changeset/cuddly-bugs-count.md b/.changeset/cuddly-bugs-count.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes a `<Steps>` component numbering issue with the next Chrome stable version when a step contains a nested list.
diff --git a/packages/starlight/user-components/Steps.astro b/packages/starlight/user-components/Steps.astro
@@ -23,6 +23,8 @@ const { html } = processSteps(content);
 		padding-bottom: 1px;
 		/* Prevent bullets from touching in short list items. */
 		min-height: calc(var(--bullet-size) + var(--bullet-margin));
+		/* Enforce style containment so that nested lists CSS counters are scoped to the contained element. */
+		contain: style;
 	}
 	.sl-steps > li + li {
 		/* Remove margin between steps. */

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@astrojs/starlight': patch
 +---
++
 +Fixes a `<Steps>` component numbering issue with the next Chrome stable version when a step contains a nested list.
Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,8 @@ const { html } = processSteps(content);`
`23`	`23`	`padding-bottom: 1px;`
`24`	`24`	`/* Prevent bullets from touching in short list items. */`
`25`	`25`	`min-height: calc(var(--bullet-size) + var(--bullet-margin));`
	`26`	`+ /* Enforce style containment so that nested lists CSS counters are scoped to the contained element. */`
	`27`	`+ contain: style;`
`26`	`28`	`}`
`27`	`29`	`.sl-steps > li + li {`
`28`	`30`	`/* Remove margin between steps. */`