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

withastro · Jun 4, 2024 · 68c0c07 · 68c0c07
1 parent c4ef620
commit 68c0c07
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
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. */