fix(tile): compact link icon layout

.changeset/clever-webs-appear.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-tile>`: fixed layout of compact link tiles with icons

elements/rh-tile/demo/color-context.html

@@ -2,7 +2,19 @@
   <div class="wrap layout">
     <h2>Basic</h2>
     <rh-tile>
-      <img slot="image" src="https://fakeimg.pl/296x50" alt="296 X 50 placeholder image">
+      <svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 50">
+        <title>A placeholder image in a tile image slot</title>
+        <rect x="0"
+              y="0"
+              width="100%"
+              height="100%"
+              fill="var(--rh-color-interactive-primary-default)"
+              fill-opacity="0.2"
+              stroke="var(--rh-color-interactive-primary-hover)"
+              stroke-width="1"
+              stroke-dasharray="1 1"
+        />
+      </svg>
       <div slot="title">Title</div>
       <h2 slot="headline"><a href="#top">Link</a></h2>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -20,15 +32,39 @@ <h2 slot="headline"><a href="#top">Link</a></h2>
   <div class="wrap layout">
     <h2>Full-width images</h2>
     <rh-tile bleed>
-      <img slot="image" src="https://fakeimg.pl/300x200" alt="300 X 200 placeholder image">
+      <svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
+        <title>A placeholder image in a tile image slot</title>
+        <rect x="0"
+              y="0"
+              width="100%"
+              height="100%"
+              fill="var(--rh-color-interactive-primary-default)"
+              fill-opacity="0.2"
+              stroke="var(--rh-color-interactive-primary-hover)"
+              stroke-width="1"
+              stroke-dasharray="1 1"
+        />
+      </svg>
       <div slot="title">Title</div>
       <h2 slot="headline"><a href="#top">Link</a></h2>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       <div slot="footer">Suspendisse eu turpis elementum</div>
     </rh-tile>
 
     <rh-tile bleed>
-      <img slot="image" src="https://fakeimg.pl/300x170" alt="300 X 170 placeholder image">
+      <svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 170">
+        <title>A placeholder image in a tile image slot</title>
+        <rect x="0"
+              y="0"
+              width="100%"
+              height="100%"
+              fill="var(--rh-color-interactive-primary-default)"
+              fill-opacity="0.2"
+              stroke="var(--rh-color-interactive-primary-hover)"
+              stroke-width="1"
+              stroke-dasharray="1 1"
+        />
+      </svg>
       <rh-icon set="standard" icon="cloud-automation"></rh-icon>
       <h2 slot="headline"><a href="#top">Link</a></h2>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -39,7 +75,10 @@ <h2 slot="headline"><a href="#top">Link</a></h2>
   <div class="wrap layout">
     <h2>Desaturated heading</h2>
     <rh-tile desaturated>
-      <img slot="icon" src="logo-red-hat.svg" alt="Red Hat">
+      <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+        <path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"/>
+        <path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"/>
+      </svg>
       <div slot="title">Title</div>
       <h2 slot="headline"><a href="#top">Link</a></h2>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -66,35 +105,77 @@ <h2 slot="headline"><a href="#top">Link</a></h2>
     </rh-tile>
 
     <rh-tile compact>
-      <img slot="icon" src="logo-red-hat.svg" alt="Red Hat">
+      <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+        <path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"/>
+        <path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"/>
+      </svg>
       <h2 slot="headline"><a href="#top">Link</a></h2>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       <div slot="footer">Suspendisse eu turpis elementum</div>
     </rh-tile>
 
     <rh-tile compact>
-      <img slot="icon" src="logo-red-hat.svg" alt="Red Hat">
+      <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+        <path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"/>
+        <path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"/>
+      </svg>
       <h2 slot="headline"><a href="#top">Link</a></h2>
     </rh-tile>
 
     <rh-tile compact bleed>
-      <img slot="image" src="https://fakeimg.pl/300x50" alt="300 X 50 placeholder image">
+      <svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
+        <title>A placeholder image in a tile image slot</title>
+        <rect x="0"
+              y="0"
+              width="100%"
+              height="100%"
+              fill="var(--rh-color-interactive-primary-default)"
+              fill-opacity="0.2"
+              stroke="var(--rh-color-interactive-primary-hover)"
+              stroke-width="1"
+              stroke-dasharray="1 1"
+        />
+      </svg>
       <rh-icon set="standard" icon="cloud-automation"></rh-icon>
       <h2 slot="headline"><a href="#top">Link</a></h2>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       <div slot="footer">Suspendisse eu turpis elementum</div>
     </rh-tile>
 
     <rh-tile compact>
-      <img slot="image" src="https://fakeimg.pl/296x50" alt="300 X 50 placeholder image">
+      <svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
+        <title>A placeholder image in a tile image slot</title>
+        <rect x="0"
+              y="0"
+              width="100%"
+              height="100%"
+              fill="var(--rh-color-interactive-primary-default)"
+              fill-opacity="0.2"
+              stroke="var(--rh-color-interactive-primary-hover)"
+              stroke-width="1"
+              stroke-dasharray="1 1"
+        />
+      </svg>
       <h2 slot="headline"><a href="#top">Link</a></h2>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       <div slot="footer">Suspendisse eu turpis elementum</div>
     </rh-tile>
 
     <rh-tile compact bleed>
       <a href="#top" slot="image">
-        <img src="https://fakeimg.pl/300x50" alt="300 X 50 placeholder image">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
+          <title>A placeholder image in a tile image slot</title>
+          <rect x="0"
+                y="0"
+                width="100%"
+                height="100%"
+                fill="var(--rh-color-interactive-primary-default)"
+                fill-opacity="0.2"
+                stroke="var(--rh-color-interactive-primary-hover)"
+                stroke-width="1"
+                stroke-dasharray="1 1"
+          />
+        </svg>
       </a>
     </rh-tile>
   </div>

elements/rh-tile/demo/compact-link-with-fullwidth-image-and-icon.html

@@ -0,0 +1,32 @@
+<rh-tile compact bleed>
+  <rh-icon slot="icon" set="standard" icon="mug"></rh-icon>
+  <svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
+    <title>A placeholder image in a tile image slot</title>
+    <rect x="0"
+          y="0"
+          width="320"
+          height="120"
+          fill="var(--rh-color-interactive-primary-default)"
+          fill-opacity="0.2"
+          stroke="var(--rh-color-interactive-primary-hover)"
+          stroke-width="1"
+          stroke-dasharray="1 1"
+    />
+  </svg>
+  <h2 slot="headline"><a href="#top">Compact link tile</a></h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
+</rh-tile>
+
+
+<script type="module">
+  import '@rhds/elements/rh-tile/rh-tile.js';
+</script>
+
+<link rel="stylesheet" href="../rh-tile-lightdom.css">
+
+<style>
+  rh-tile rh-icon {
+    color: var(--rh-color-brand-red);
+  }
+</style>
+

elements/rh-tile/demo/compact-link-with-icon.html

@@ -0,0 +1,18 @@
+<rh-tile compact desaturated>
+  <h2 slot="headline"><a href="#top">Compact link tile</a></h2>
+  <rh-icon slot="icon" set="standard" icon="mug"></rh-icon>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
+</rh-tile>
+
+<script type="module">
+  import '@rhds/elements/rh-tile/rh-tile.js';
+</script>
+
+<link rel="stylesheet" href="../rh-tile-lightdom.css">
+
+<style>
+  rh-tile rh-icon {
+    color: var(--rh-color-brand-red);
+  }
+</style>
+

elements/rh-tile/demo/compact-link-with-image-and-icon.html

@@ -0,0 +1,32 @@
+<rh-tile compact>
+  <rh-icon slot="icon" set="standard" icon="mug"></rh-icon>
+  <svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
+    <title>A placeholder image in a card header slot</title>
+    <rect x="0"
+          y="0"
+          width="320"
+          height="120"
+          fill="var(--rh-color-interactive-primary-default)"
+          fill-opacity="0.2"
+          stroke="var(--rh-color-interactive-primary-hover)"
+          stroke-width="1"
+          stroke-dasharray="1 1"
+    />
+  </svg>
+  <h2 slot="headline"><a href="#top">Compact link tile</a></h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
+</rh-tile>
+
+
+<script type="module">
+  import '@rhds/elements/rh-tile/rh-tile.js';
+</script>
+
+<link rel="stylesheet" href="../rh-tile-lightdom.css">
+
+<style>
+  rh-tile rh-icon {
+    color: var(--rh-color-brand-red);
+  }
+</style>
+

elements/rh-tile/demo/compact-link-with-image.html

@@ -0,0 +1,18 @@
+<rh-tile compact desaturated>
+  <h2 slot="headline"><a href="#top">Compact link tile</a></h2>
+  <rh-icon slot="icon" set="standard" icon="mug"></rh-icon>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
+</rh-tile>
+
+<script type="module">
+  import '@rhds/elements/rh-tile/rh-tile.js';
+</script>
+
+<link rel="stylesheet" href="../rh-tile-lightdom.css">
+
+<style>
+  rh-tile rh-icon {
+    color: var(--rh-color-brand-red);
+  }
+</style>
+

elements/rh-tile/demo/compact.html

@@ -5,35 +5,79 @@ <h2 slot="headline"><a href="#top">Link</a></h2>
 </rh-tile>
 
 <rh-tile compact>
-  <img slot ="icon" src="logo-red-hat.svg" alt="Red Hat">
+  <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+    <title>Red Hat</title>
+    <path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"/>
+    <path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"/>
+  </svg>
   <h2 slot="headline"><a href="#top">Link</a></h2>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <div slot="footer">Suspendisse eu turpis elementum</div>
 </rh-tile>
 
 <rh-tile compact>
-  <img slot ="icon" src="logo-red-hat.svg" alt="Red Hat">
+  <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+    <title>Red Hat</title>
+    <path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"/>
+    <path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"/>
+  </svg>
   <h2 slot="headline"><a href="#top">Link</a></h2>
 </rh-tile>
 
 <rh-tile compact bleed>
-  <img slot="image" src="https://fakeimg.pl/300x50" alt="300 X 50 placeholder image">
-  <rh-icon set="standard" icon="cloud-automation"></rh-icon>
+  <svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
+    <title>A placeholder image in a tile image slot</title>
+    <rect x="0"
+          y="0"
+          width="300"
+          height="50"
+          fill="var(--rh-color-interactive-primary-default)"
+          fill-opacity="0.2"
+          stroke="var(--rh-color-interactive-primary-hover)"
+          stroke-width="1"
+          stroke-dasharray="1 1"
+    />
+  </svg>
+  <rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
   <h2 slot="headline"><a href="#top">Link</a></h2>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <div slot="footer">Suspendisse eu turpis elementum</div>
 </rh-tile>
 
 <rh-tile compact>
-  <img slot="image" src="https://fakeimg.pl/296x50" alt="300 X 50 placeholder image">
+  <svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 50">
+    <title>A placeholder image in a tile image slot</title>
+    <rect x="0"
+          y="0"
+          width="296"
+          height="50"
+          fill="var(--rh-color-interactive-primary-default)"
+          fill-opacity="0.2"
+          stroke="var(--rh-color-interactive-primary-hover)"
+          stroke-width="1"
+          stroke-dasharray="1 1"
+    />
+  </svg>
   <h2 slot="headline"><a href="#top">Link</a></h2>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <div slot="footer">Suspendisse eu turpis elementum</div>
 </rh-tile>
 
 <rh-tile compact bleed>
   <a href="#top" slot="image">
-    <img src="https://fakeimg.pl/300x50" alt="300 X 50 placeholder image">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
+      <title>A placeholder image in a tile image slot</title>
+      <rect x="0"
+            y="0"
+            width="300"
+            height="50"
+            fill="var(--rh-color-interactive-primary-default)"
+            fill-opacity="0.2"
+            stroke="var(--rh-color-interactive-primary-hover)"
+            stroke-width="1"
+            stroke-dasharray="1 1"
+      />
+    </svg>
   </a>
 </rh-tile>
 

elements/rh-tile/demo/desaturated-heading.html

@@ -1,5 +1,8 @@
 <rh-tile desaturated>
-  <img slot ="icon" src="logo-red-hat.svg" alt="Red Hat">
+  <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+    <path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"/>
+    <path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"/>
+  </svg>
   <div slot="title">Title</div>
   <h2 slot="headline"><a href="#top">Link</a></h2>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.

elements/rh-tile/demo/form-control.html

@@ -1,11 +1,11 @@
 <form id="form">
   <rh-tile-group radio>
-    <rh-tile name="radio" value="1">Radio 1</rh-tile>
-    <rh-tile name="radio" value="2">Radio 2</rh-tile>
+    <rh-tile name="radio" value="1"><span slot="headline">Radio 1</span></rh-tile>
+    <rh-tile name="radio" value="2"><span slot="headline">Radio 2</span></rh-tile>
   </rh-tile-group>
   <rh-tile-group checkable>
-    <rh-tile name="check" value="1">Check 1</rh-tile>
-    <rh-tile name="check" value="2">Check 2</rh-tile>
+    <rh-tile name="check" value="1"><span slot="headline">Check 1</span></rh-tile>
+    <rh-tile name="check" value="2"><span slot="headline">Check 2</span></rh-tile>
   </rh-tile-group>
   <rh-button type="submit">Submit</rh-button>
   <output name="output"></output>
@@ -18,9 +18,11 @@
   form.addEventListener('submit', function(event) {
     event.preventDefault();
     const data = new FormData(form);
-    form.output.value = JSON.stringify(Array.from(data.entries()).reduce((acc, [k, v]) => ({
-      ...acc, [k]: k in acc ? [acc[k], v].flat() : v,
-    }), {}), null, 2);
+    const mergedFormData = Array.from(data.entries())
+      .reduce((acc, [k, v]) => ({
+        ...acc, [k]: k in acc ? [acc[k], v].flat() : v,
+      }), {});
+    form.output.value = JSON.stringify(mergedFormData, null, 2);
   });
 </script>