Refactor <Steps> counter

docs/src/content/docs/guides/steps.mdx

@@ -0,0 +1,257 @@
+---
+title: ⚠️ Steps ⚠️
+---
+
+:::danger
+Delete this page
+:::
+
+import { Tabs, TabItem, FileTree, Steps } from '@astrojs/starlight/components';
+
+<Steps>
+
+1. A step
+
+2. A step with some code bloc
+
+   ```js
+   // astro.config.mjs
+   import { defineConfig } from 'astro/config';
+   import starlight from '@astrojs/starlight';
+
+   export default defineConfig({
+   	integrations: [
+   		starlight({
+   			title: 'Amazing',
+   		}),
+   	],
+   });
+   ```
+
+3. A step with a file tree
+
+   <FileTree>
+
+   - src/
+     - assets/
+       - **my-logo.svg**
+     - content/
+   - astro.config.mjs
+
+   </FileTree>
+
+4. A step with an unordered list
+
+   - A
+   - B
+     - B1
+     - B2
+   - C
+
+5. A step with some tabs
+
+   <Tabs syncKey="pkg">
+
+   <TabItem label="npm">
+
+   ```sh
+   npx astro add tailwind
+   ```
+
+   </TabItem>
+
+   <TabItem label="pnpm">
+
+   ```sh
+   pnpm astro add tailwind
+   ```
+
+   </TabItem>
+
+   <TabItem label="Yarn">
+
+   ```sh
+   yarn astro add tailwind
+   ```
+
+   </TabItem>
+
+   </Tabs>
+
+6. A step with an ordered list
+
+   1. A
+   2. B
+      1. B1
+      2. B2
+   3. C
+
+7. A step with nested steps
+
+   <Steps>
+
+   1. A step
+   2. A step with some code bloc
+
+      ```js
+      // astro.config.mjs
+      import { defineConfig } from 'astro/config';
+      import starlight from '@astrojs/starlight';
+
+      export default defineConfig({
+      	integrations: [
+      		starlight({
+      			title: 'Amazing',
+      		}),
+      	],
+      });
+      ```
+
+   3. A step with a file tree
+
+      <FileTree>
+
+      - src/
+        - assets/
+          - **my-logo.svg**
+        - content/
+      - astro.config.mjs
+
+      </FileTree>
+
+   4. A step with an unordered list
+
+      - A
+      - B
+        - B1
+        - B2
+      - C
+
+   5. A step with some tabs
+
+      <Tabs syncKey="pkg">
+
+      <TabItem label="npm">
+
+      ```sh
+      npx astro add tailwind
+      ```
+
+      </TabItem>
+
+      <TabItem label="pnpm">
+
+      ```sh
+      pnpm astro add tailwind
+      ```
+
+      </TabItem>
+
+      <TabItem label="Yarn">
+
+      ```sh
+      yarn astro add tailwind
+      ```
+
+      </TabItem>
+
+      </Tabs>
+
+   6. A step with an ordered list
+
+      1. A
+      2. B
+         1. B1
+         2. B2
+      3. C
+
+   7. A step
+
+   </Steps>
+
+8. A step with nested steps starting at 4
+
+   <Steps>
+
+   4. A step
+   5. A step with some code bloc
+
+      ```js
+      // astro.config.mjs
+      import { defineConfig } from 'astro/config';
+      import starlight from '@astrojs/starlight';
+
+      export default defineConfig({
+      	integrations: [
+      		starlight({
+      			title: 'Amazing',
+      		}),
+      	],
+      });
+      ```
+
+   6. A step with a file tree
+
+      <FileTree>
+
+      - src/
+        - assets/
+          - **my-logo.svg**
+        - content/
+      - astro.config.mjs
+
+      </FileTree>
+
+   7. A step with an unordered list
+
+      - A
+      - B
+        - B1
+        - B2
+      - C
+
+   8. A step with some tabs
+
+      <Tabs syncKey="pkg">
+
+      <TabItem label="npm">
+
+      ```sh
+      npx astro add tailwind
+      ```
+
+      </TabItem>
+
+      <TabItem label="pnpm">
+
+      ```sh
+      pnpm astro add tailwind
+      ```
+
+      </TabItem>
+
+      <TabItem label="Yarn">
+
+      ```sh
+      yarn astro add tailwind
+      ```
+
+      </TabItem>
+
+      </Tabs>
+
+   9. A step with an ordered list
+
+      1. A
+      2. B
+         1. B1
+         2. B2
+      3. C
+
+   10. A step
+
+   </Steps>
+
+9. A step
+
+</Steps>

packages/starlight/user-components/Steps.astro

@@ -13,10 +13,12 @@ const { html } = processSteps(content);
 		--bullet-margin: 0.375rem;
 
 		list-style: none;
+		counter-reset: steps-counter var(--sl-steps-start, 0);
 		padding-inline-start: 0;
 	}
 
 	.sl-steps > li {
+		counter-increment: steps-counter;
 		position: relative;
 		padding-inline-start: calc(var(--bullet-size) + 1rem);
 		/* HACK: Keeps any `margin-bottom` inside the `<li>`’s padding box to avoid gaps in the hairline border. */
@@ -31,7 +33,7 @@ const { html } = processSteps(content);
 
 	/* Custom list marker element. */
 	.sl-steps > li::before {
-		content: counter(list-item);
+		content: counter(steps-counter);
 		position: absolute;
 		top: 0;
 		inset-inline-start: 0;

packages/starlight/user-components/rehype-steps.ts

@@ -44,6 +44,12 @@ const stepsProcessor = rehype()
 			} else {
 				rootElement.properties.className.push('sl-steps');
 			}
+
+			// Add the `start` attribute as a CSS custom property so we can use it as the starting index
+			// of the steps custom counter.
+			if (typeof rootElement.properties.start === 'number') {
+				rootElement.properties.style = `${rootElement.properties.style ?? ''} --sl-steps-start: ${rootElement.properties.start - 1};`;
+			}
 		};
 	});