feat(components): multi-level headings in steps

Signed-off-by: ZTL-UwU <[email protected]>

components/content/Steps.vue

@@ -1,7 +1,25 @@
 <template>
   <div
-    class="[&>h3]:step [&>li]:step ml-4 border-l pl-8 [counter-reset:step] [&:not(:first-child)]:mt-6 [&:not(:last-child)]:mb-12"
+    class="[&>li]:step ml-4 border-l pl-8 [counter-reset:step] [&:not(:first-child)]:mt-6 [&:not(:last-child)]:mb-12"
+    :class="levelClass[level]"
   >
     <slot />
   </div>
 </template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  level?: '1' | '2' | '3' | '4' | '5' | '6';
+}>(), {
+  level: '3',
+});
+
+const levelClass = {
+  1: '[&>h1]:step',
+  2: '[&>h2]:step',
+  3: '[&>h3]:step',
+  4: '[&>h4]:step',
+  5: '[&>h5]:step',
+  6: '[&>h6]:step',
+};
+</script>

content/1.getting-started/3.writing/2.components.md

@@ -494,6 +494,35 @@ npm i -D @iconify-json/collection-name
   ```
 ::
 
+::code-group
+  ::div{label="Preview"}
+    ::steps{level=5}
+      ##### Multi-level headings
+
+      ```mdc
+      ::steps{level=5}
+      ```
+
+      ##### Available Headings
+
+      `h1` through `h6`. Defaults to `h3`.
+    ::
+  ::
+  ```mdc[Code]
+  ::steps{level=5}
+    ##### Multi-level headings
+
+    ```mdc
+    ::steps{level=5}
+    ```
+
+    ##### Available Headings
+
+    `h1` through `h6`. Defaults to `h3`.
+  ::
+  ```
+::
+
 ### Field
 
 :badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/field" target="_blank"}