Using [%step] on colist works the same as on ulist

Rakefile

@@ -153,6 +153,7 @@ namespace :examples do
     FileUtils.cp 'examples/a11y-dark.css', "#{PUBLIC_DIR}/a11y-dark.css"
     FileUtils.cp 'examples/release-5.1.html', "#{PUBLIC_DIR}/release-5.1.html"
     FileUtils.cp 'examples/release-5.1.css', "#{PUBLIC_DIR}/release-5.1.css"
+    FileUtils.cp 'examples/release-5.2.html', "#{PUBLIC_DIR}/release-5.2.html"
   end
 end
 

examples/release-5.2.adoc

@@ -0,0 +1,35 @@
+= Asciidoctor reveal.js 5.2
+//:stem:
+:source-highlighter: highlight.js
+:highlightjs-theme: a11y-dark.css
+:highlightjs-languages: asciidoc
+:icons: font
+:imagesdir: images/
+// reveal.js config
+:customcss: release-5.1.css
+:revealjs_theme: moon
+:revealjs_hash: true
+:revealjs_width: 1080
+
+== New Features icon:rocket[set=fas]
+
+== Iterating through callouts
+[source, javascript]
+----
+let a = 2; <1>
+let b = 3; <2>
+console.log(a+b); <3>
+----
+[%step]
+<1> It is now possible to iterate through callout lists...
+<2> using the `%step` attribute...
+<3> to explain code more easily !
+
+[transition=fade,transition-speed=slow]
+== Learn More!
+
+* https://github.com/asciidoctor/asciidoctor-reveal.js/[Asciidoctor reveal.js]
+* https://revealjs.com[reveal.js]
+* https://github.com/asciidoctor/asciidoctor/[Asciidoctor]
+* https://asciidoc.org/[What is AsciiDoc?]
+* https://github.com/asciidoctor/asciidoctor-reveal.js/raw/master/examples/release-5.1.adoc[Source of this presentation (AsciiDoc)]

examples/steps.adoc

@@ -85,3 +85,16 @@ but in [.step.highlight-red]#rising every time we fall#.
 . [.step]#Protons#
 . [.step]#Electrons#
 . [.step]#Neutrons#
+
+== On a code callout list
+
+[source, html]
+----
+<b>complex code</b> <!--1-->
+<b>more complex code</b> <!--2-->
+<b>most complex code</b> <!--3-->
+----
+[%step]
+<1> complex code needs a callout
+<2> as much as a more complex code
+<3> but less than the most complex code

src/index.html

@@ -21,6 +21,7 @@ <h1 class="title">
     <div class="container">
       <div class="content">
         <ul>
+          <li><a href="./release-5.2.html">Asciidoctor reveal.js 5.2</a></li>
           <li><a href="./release-5.1.html">Asciidoctor reveal.js 5.1</a></li>
           <li><a href="./release-4.1.html">Asciidoctor reveal.js 4.1</a></li>
           <li><a href="./release-4.0.html">Asciidoctor reveal.js 4.0</a></li>

templates/colist.html.slim

@@ -1,12 +1,12 @@
-= html_tag('div', { :id => @id, :class => ['colist', @style, role, ('fragment' if (option? :step) || (attr? 'step'))] }.merge(data_attrs(@attributes)))
+= html_tag('div', { :id => @id, :class => ['colist', @style, role] }.merge(data_attrs(@attributes)))
   - if title?
     .title=title
   - if @document.attr? :icons
     - font_icons = @document.attr? :icons, 'font'
     table
       - items.each_with_index do |item, i|
         - num = i + 1
-        tr
+        tr class=('fragment' if (option? :step) || (has_role? 'step') || (attr? 'step'))
           td
             - if font_icons
               i.conum data-value=num
@@ -17,4 +17,5 @@
   - else
     ol
       - items.each do |item|
-        li: p=item.text
+        li class=('fragment' if (option? :step) || (has_role? 'step') || (attr? 'step'))
+          p=item.text

test/doctest/steps.html

@@ -137,4 +137,29 @@ <h2>Inside a List</h2>
       </div>
     </div>
   </section>
+  <section id="_on_a_code_callout_list">
+    <h2>On a code callout list</h2>
+    <div class="slide-content">
+      <div class="listingblock">
+        <div class="content">
+          <pre class="highlight"><code class="language-html" data-lang="html">&lt;b&gt;complex code&lt;/b&gt; <b>(1)</b>
+&lt;b&gt;more complex code&lt;/b&gt; <b>(2)</b>
+&lt;b&gt;most complex code&lt;/b&gt; <b>(3)</b></code></pre>
+        </div>
+      </div>
+      <div class="colist arabic">
+        <ol>
+          <li class="fragment">
+            <p>complex code needs a callout</p>
+          </li>
+          <li class="fragment">
+            <p>as much as a more complex code</p>
+          </li>
+          <li class="fragment">
+            <p>but less than the most complex code</p>
+          </li>
+        </ol>
+      </div>
+    </div>
+  </section>
 </div>