Fix nested list counter

scss/_patterns_lists.scss

@@ -3,23 +3,32 @@ $list-status-icon-height: $default-icon-size;
 $list-step-bullet-margin: $sph--x-large;
 
 @mixin vf-p-list-placeholders {
+  // container for stepped lists (`ol`)
+  // defines the layout and resets the native browser counter
   %numbered-step-container {
-    counter-reset: li;
+    counter-reset: list-item;
     display: flex;
     flex-direction: column;
     list-style: none;
     padding-left: 0;
   }
 
+  // list item for stepped lists (`li`)
+  // increments the default browser counter
+  %numbered-step-item {
+    counter-increment: list-item;
+  }
+
+  // title for stepped lists
+  // displays the title and step counter
   %numbered-step-title {
     list-style: none;
     margin-left: 0;
     padding-left: calc(map-get($line-heights, default-text) + $list-step-bullet-margin);
     position: relative;
 
     &::before {
-      content: counter(li) '.';
-      counter-increment: li;
+      content: counter(list-item) '.';
       display: block;
       height: map-get($line-heights, default-text);
       left: 0;
@@ -30,6 +39,7 @@ $list-step-bullet-margin: $sph--x-large;
     }
   }
 
+  // used with .p-list--nested-counter
   %nested-counter {
     // Counter is named and it will be reset for each "ol" element.
     counter-reset: list-item;
@@ -283,6 +293,8 @@ $list-step-bullet-margin: $sph--x-large;
   }
 
   .p-stepped-list__item {
+    @extend %numbered-step-item;
+
     // override unecessary col-8 class in markup; layout is handled with css below
     float: none;
     margin-left: 0;
@@ -356,7 +368,6 @@ $list-step-bullet-margin: $sph--x-large;
 @mixin vf-p-stepped-list-detailed {
   .p-stepped-list--detailed {
     @extend %numbered-step-container;
-
     margin-left: auto;
 
     @supports (display: grid) {
@@ -374,6 +385,7 @@ $list-step-bullet-margin: $sph--x-large;
     }
 
     .p-stepped-list__item {
+      @extend %numbered-step-item;
       @extend %vf-row;
       @include vf-b-row-reset;
 

templates/docs/examples/patterns/lists/list-nested-stepped-detailed.html

@@ -0,0 +1,55 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Ordered list nested in stepped list{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+<ol class="p-stepped-list--detailed">
+    <li class="p-stepped-list__item">
+      <h2 class="p-stepped-list__title">
+        Log in to JAAS
+      </h2>
+      <p class="p-stepped-list__content">Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.</p>
+    </li>
+
+    <li class="p-stepped-list__item">
+      <h2 class="p-stepped-list__title">
+        Configure a model
+      </h2>
+      <div class="p-stepped-list__content">
+        <p>Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.</p>
+        <ol class="p-list--divided">
+          <li class="p-list__item">Insert the USB flash drive in the NUC.</li>
+          <li class="p-list__item">Start the NUC and push F10 to enter the boot menu.</li>
+          <li class="p-list__item">Select the USB flash drive as a boot option.</li>
+        </ol>
+      </div>
+    </li>
+
+    <li class="p-stepped-list__item">
+      <h2 class="p-stepped-list__title">
+        Credentials and SSH keys
+      </h2>
+      <p class="p-stepped-list__content">After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.</p>
+    </li>
+
+    <li class="p-stepped-list__item">
+      <h2 class="p-stepped-list__title">
+        Design and&nbsp;<strong>build</strong>
+      </h2>
+      <div class="p-stepped-list__content">
+        <p>Together, we design your Kubernetes cluster based on your hardware, scale, roadmap, applications and monitoring system. We'll guide you through the hardware specification process to maximise the efficiency of your CAPEX, and we'll tailor the architecture of your cloud to meet your application, security, regulatory and integration requirements.</p>
+        <ol class="p-list--divided">
+          <li class="p-list__item">Insert the USB flash drive in the NUC.</li>
+          <li class="p-list__item">Start the NUC and push F10 to enter the boot menu.</li>
+          <li class="p-list__item">Select the USB flash drive as a boot option.</li>
+          <li class="p-list__item">The system will automatically execute the first stage of installation and prompt for an acknowledgement of a complete system recovery.</li>
+          <li class="p-list__item">Follow the instructions and enter appropriate options for language, WiFi, location (timezone), and keyboard layout.</li>
+          <li class="p-list__item">Pick a hostname, user account and password.</li>
+          <li class="p-list__item">Wait for the configuration to finish. If you are connected to an active network, it will take several minutes to download and apply additional updates.</li>
+          <li class="p-list__item">Ubuntu is installed. Use your account and password to log in.</li>
+        </ol>
+      </div>
+    </li>
+  </ol>
+{% endblock %}