content: generateAdditionalFilesList: use <details> elements

3 files changed, 37 insertions, 8 deletions

diff --git a/src/content/dependencies/generateAdditionalFilesList.js b/src/content/dependencies/generateAdditionalFilesList.js
index 2737a410..f504cf80 100644
--- a/src/content/dependencies/generateAdditionalFilesList.js
+++ b/src/content/dependencies/generateAdditionalFilesList.js
@@ -14,7 +14,7 @@ export default {
   },
 
   generate: (slots, {html}) =>
-    html.tag('dl',
+    html.tag('ul', {class: 'additional-files-list'},
       stitchArrays({
         chunk: slots.chunks,
         items: slots.chunkItems,
diff --git a/src/content/dependencies/generateAdditionalFilesListChunk.js b/src/content/dependencies/generateAdditionalFilesListChunk.js
index bb16b778..86e40062 100644
--- a/src/content/dependencies/generateAdditionalFilesListChunk.js
+++ b/src/content/dependencies/generateAdditionalFilesListChunk.js
@@ -26,14 +26,21 @@ export default {
       titleOptions.description = slots.description;
     }
 
-    const dt =
-      html.tag('dt',
-        language.$(...titleParts, titleOptions));
+    const summary =
+      html.tag('summary',
+        html.tag('span',
+          language.$(...titleParts, titleOptions)));
 
-    const dd =
-      html.tag('dd',
-        html.tag('ul', slots.items));
+    const content =
+      html.tag('ul', slots.items);
 
-    return html.tags([dt, dd]);
+    const details =
+      html.tag('details',
+        slots.items.length <= 5 &&
+          {open: true},
+
+        [summary, content]);
+
+    return html.tag('li', details);
   },
 };
diff --git a/src/static/site6.css b/src/static/site6.css
index e47bb1fa..0f765586 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -1074,6 +1074,28 @@ li > ul {
   margin-top: 5px;
 }
 
+.additional-files-list {
+  padding-left: 0;
+}
+
+.additional-files-list > li {
+  list-style-type: none;
+}
+
+.additional-files-list summary {
+  /* Sorry, Safari!
+   * https://bugs.webkit.org/show_bug.cgi?id=157323
+   */
+  list-style-position: outside;
+  margin-left: 40px;
+}
+
+.additional-files-list details ul {
+  margin-left: 40px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+
 .group-contributions-table {
   display: inline-block;
 }