From 210d5b062a6bb8ce63ad0408bcef315a000ab619 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Mon, 17 Jun 2024 10:37:01 +0300
Subject: [PATCH] docs(health-index): format demos

---
 .../rh-health-index/demo/rh-health-index.html | 111 +++++++++---------
 1 file changed, 55 insertions(+), 56 deletions(-)

diff --git a/elements/rh-health-index/demo/rh-health-index.html b/elements/rh-health-index/demo/rh-health-index.html
index 2b7b8dc147..6be6e804a1 100644
--- a/elements/rh-health-index/demo/rh-health-index.html
+++ b/elements/rh-health-index/demo/rh-health-index.html
@@ -1,51 +1,52 @@
 <ul class="demo">
-    <li>
-      <h2>SM</h2>
-      <div><rh-health-index grade="A" size="sm">A</rh-health-index></div>
-      <div><rh-health-index grade="B" size="sm">B</rh-health-index></div>
-      <div><rh-health-index grade="C" size="sm">C</rh-health-index></div>
-      <div><rh-health-index grade="D" size="sm">D</rh-health-index></div>
-      <div><rh-health-index grade="E" size="sm">E</rh-health-index></div>
-      <div><rh-health-index grade="F" size="sm">F</rh-health-index></div>
-    </li>
-    <li>
-      <h2>Default</h2>
-      <div><rh-health-index grade="A">A</rh-health-index></div>
-      <div><rh-health-index grade="B">B</rh-health-index></div>
-      <div><rh-health-index grade="C">C</rh-health-index></div>
-      <div><rh-health-index grade="D">D</rh-health-index></div>
-      <div><rh-health-index grade="E">E</rh-health-index></div>
-      <div><rh-health-index grade="F">F</rh-health-index></div>
-    </li>
-    
-    <li>
-      <h2>LG</h2>
-      <div><rh-health-index grade="A" size="lg">A</rh-health-index></div>
-      <div><rh-health-index grade="B" size="lg">B</rh-health-index></div>
-      <div><rh-health-index grade="C" size="lg">C</rh-health-index></div>
-      <div><rh-health-index grade="D" size="lg">D</rh-health-index></div>
-      <div><rh-health-index grade="E" size="lg">E</rh-health-index></div>
-      <div><rh-health-index grade="F" size="lg">F</rh-health-index></div>
-    </li>
-    
-    <li>
-      <h2>XL</h2>
-      <div><rh-health-index grade="A" size="xl">A</rh-health-index></div>
-      <div><rh-health-index grade="B" size="xl">B</rh-health-index></div>
-      <div><rh-health-index grade="C" size="xl">C</rh-health-index></div>
-      <div><rh-health-index grade="D" size="xl">D</rh-health-index></div>
-      <div><rh-health-index grade="E" size="xl">E</rh-health-index></div>
-      <div><rh-health-index grade="F" size="xl">F</rh-health-index></div>
-    </li>
-  </ul>
+  <li>
+    <h2>SM</h2>
+    <rh-health-index grade="A" size="sm">A</rh-health-index>
+    <rh-health-index grade="B" size="sm">B</rh-health-index>
+    <rh-health-index grade="C" size="sm">C</rh-health-index>
+    <rh-health-index grade="D" size="sm">D</rh-health-index>
+    <rh-health-index grade="E" size="sm">E</rh-health-index>
+    <rh-health-index grade="F" size="sm">F</rh-health-index>
+  </li>
+
+  <li>
+    <h2>Default</h2>
+    <rh-health-index grade="A">A</rh-health-index>
+    <rh-health-index grade="B">B</rh-health-index>
+    <rh-health-index grade="C">C</rh-health-index>
+    <rh-health-index grade="D">D</rh-health-index>
+    <rh-health-index grade="E">E</rh-health-index>
+    <rh-health-index grade="F">F</rh-health-index>
+  </li>
+
+  <li>
+    <h2>LG</h2>
+    <rh-health-index grade="A" size="lg">A</rh-health-index>
+    <rh-health-index grade="B" size="lg">B</rh-health-index>
+    <rh-health-index grade="C" size="lg">C</rh-health-index>
+    <rh-health-index grade="D" size="lg">D</rh-health-index>
+    <rh-health-index grade="E" size="lg">E</rh-health-index>
+    <rh-health-index grade="F" size="lg">F</rh-health-index>
+  </li>
+
+  <li>
+    <h2>XL</h2>
+    <rh-health-index grade="A" size="xl">A</rh-health-index>
+    <rh-health-index grade="B" size="xl">B</rh-health-index>
+    <rh-health-index grade="C" size="xl">C</rh-health-index>
+    <rh-health-index grade="D" size="xl">D</rh-health-index>
+    <rh-health-index grade="E" size="xl">E</rh-health-index>
+    <rh-health-index grade="F" size="xl">F</rh-health-index>
+  </li>
+</ul>
 
 <script type="module">
-    import '@rhds/elements/rh-surface/rh-surface.js';
-    import '@rhds/elements/rh-health-index/rh-health-index.js';
+  import '@rhds/elements/rh-surface/rh-surface.js';
+  import '@rhds/elements/rh-health-index/rh-health-index.js';
 </script>
 
 <style>
-.demo {
+  .demo {
     margin: 2rem;
     padding: 0;
     list-style: none;
@@ -53,19 +54,17 @@ <h2>XL</h2>
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: 2rem;
-}
+    & h2 {
+      font-size: var(--rh-font-size-body-text-lg, 1.125rem);
+    }
+    & li {
+      display: flex;
+      flex-flow: column;
+      gap: var(--rh-space-lg, 16px);
+      margin: 0;
+      padding: 0;
+    }
+  }
+</style>
 
-.demo h2 {
-  font-size: var(--rh-font-size-body-text-lg, 1.125rem);
-}
-
-.demo li {
-    margin: 0;
-    padding: 0;
-}
 
-.demo rh-surface,
-.demo div {
-    margin-block-end: 1rem;
-}
-</style>
\ No newline at end of file