Merge pull request #102 from w3c/hotfix/#195-ordered-lists

Hotfix/#195 ordered lists

assets-src/styles/sass/30-base/_lists.scss

@@ -14,41 +14,21 @@ ul[class] {
 }
 
 ul:not([class]),
-ol:not([class]) {
+ol:not([class]),
+ol.counter {
+	padding-inline-start: 2.4em;
 
 	> * + *,
 	li ul,
 	li ol {
-
 		margin-top: 0.75em;
-
 	}
-
-}
-
-ul:not([class]) {
-
-	padding-inline-start: 2.4em;
-
 }
 
-ol:not([class]) {
-
-	counter-reset: count;
-	list-style-type: none;
-	padding-inline-start: 1.25em;
-
-	> li {
-
-		counter-increment: count;
-
-		&::before {
-
-			content: counters(count, ".") " ";
-			padding-inline-end: 0.5em;
-
-		}
+ol.counter {
 
+	::marker {
+		content: counters(list-item, ".") ". ";
 	}
 
 }

design-system-templates/components/list-ol-counter.html.twig

@@ -0,0 +1,14 @@
+<ol class="counter">
+    <li>Level 1 list item 1</li>
+    <li>Level 1 list item 2</li>
+    <li>Level 1 list item 3
+        <ol>
+            <li>Level 2 list item 1</li>
+            <li>Level 2 list item 2</li>
+            <li>Level 2 list item 3</li>
+        </ol>
+    </li>
+    <li>Level 1 list item 4</li>
+    <li>Level 1 list item 5</li>
+    <li>Level 1 list item 6</li>
+</ol>

design-system-templates/components/list-ol.html.twig

@@ -2,7 +2,7 @@
 	<li>Level 1 list item 1</li>
 	<li>Level 1 list item 2</li>
 	<li>Level 1 list item 3
-		<ol>
+		<ol type="a">
 			<li>Level 2 list item 1</li>
 			<li>Level 2 list item 2</li>
 			<li>Level 2 list item 3</li>

design-system.md

@@ -34,10 +34,12 @@ in the `package.json` file. The compiled assets can be found in the `public/dist
 
 #### Installing the build tools and running them
 
+Make sure you are using the right version of npm to both install packages and run scripts. We strongly recommend using [nvm](https://github.com/nvm-sh/nvm)
+to do so.
+
 The npm version to use is defined in  the `.nvmrc` file. To switch to that version, use the command:
 
 ```bash
-nvm install --lts
 nvm use
 ```
 

docs/styles/lists.md

@@ -2,13 +2,23 @@
 
 Use lists to make blocks of text easier to read, and to break information into manageable chunks.
 
-## Bulleted lists
+## Unordered lists
 
-<example title="Unordered list with bullets" src="components/list-ul.html.twig" />
+<example title="Unordered list with markers" src="components/list-ul.html.twig" />
 
-## Numbered lists
+## Ordered lists
 
-<example title="Ordered list with bullets" src="components/list-ol.html.twig" />
+<example title="Ordered list with markers" src="components/list-ol.html.twig" />
+
+### Using a counter for decimal numbering
+
+Adding the `.counter` class to an ordered list will ensure that any nested ordered lists are displayed as decimals, with the first digit corresponding to the number of the parent list item:
+
+<example title="Ordered list with a counter" src="components/list-ol-counter.html.twig" />
+
+#### Considerations
+
+The counter supports the `"start"` and `"reversed"` attributes on the ordered list, but does not support the `"type"` attribute, e.g. for roman numerals. Ordered lists with the `.counter` class will always use decimal numbers for the markers.
 
 ## Clean list
 

public/dist/assets/styles/core.css

@@ -1709,33 +1709,26 @@ ul[class] {
   padding: 0;
 }
 
+ul:not([class]),
+ol:not([class]),
+ol.counter {
+  -webkit-padding-start: 2.4em;
+          padding-inline-start: 2.4em;
+}
 ul:not([class]) > * + *,
 ul:not([class]) li ul,
 ul:not([class]) li ol,
 ol:not([class]) > * + *,
 ol:not([class]) li ul,
-ol:not([class]) li ol {
+ol:not([class]) li ol,
+ol.counter > * + *,
+ol.counter li ul,
+ol.counter li ol {
   margin-top: 0.75em;
 }
 
-ul:not([class]) {
-  -webkit-padding-start: 2.4em;
-          padding-inline-start: 2.4em;
-}
-
-ol:not([class]) {
-  counter-reset: count;
-  list-style-type: none;
-  -webkit-padding-start: 1.25em;
-          padding-inline-start: 1.25em;
-}
-ol:not([class]) > li {
-  counter-increment: count;
-}
-ol:not([class]) > li::before {
-  content: counters(count, ".") " ";
-  -webkit-padding-end: 0.5em;
-          padding-inline-end: 0.5em;
+ol.counter ::marker {
+  content: counters(list-item, ".") ". ";
 }
 
 .clean-list li {