From d88f27f3e16498c0fa7c8a71a71928c368f3f2f4 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 17 Jun 2024 12:27:10 -0400
Subject: [PATCH] update docs

---
 docs/assets/styles/docs.css           | 7 ++++++-
 docs/docs/experimental/style-guide.md | 9 ++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index ff5d93d6b..356a333d5 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -222,7 +222,6 @@ wa-page > main {
 }
 
 /* Swatches */
-
 .swatch {
   background-color: transparent;
   border-color: var(--wa-color-neutral-border-normal);
@@ -234,3 +233,9 @@ wa-page > main {
   height: 2.5em;
   padding-inline: var(--wa-space-xs);
 }
+
+/* Utilities */
+.two-columns {
+  columns: 2;
+  gap: 1rem;
+}
diff --git a/docs/docs/experimental/style-guide.md b/docs/docs/experimental/style-guide.md
index 3004c7a48..5efbf2593 100644
--- a/docs/docs/experimental/style-guide.md
+++ b/docs/docs/experimental/style-guide.md
@@ -21,11 +21,10 @@ Cras pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci.
 ## Inline Text
 
 ```html
-
 Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id.
 ```
 
-<div class="docs-grid">
+<div class="two-columns">
   <p><strong>Bold</strong></p>
   <p><em>Italics</em></p>
   <p><u>Underline</u></p>
@@ -85,17 +84,17 @@ Individual details look like this.
 
 Grouping them provides accordion-style functionality.
 
-<details>
+<details name="details-accordion">
   <summary>Enim diam</summary>
   <p>Nunc faucibus a pellentesque sit amet porttitor. Adipiscing tristique risus nec feugiat in fermentum. Leo duis ut diam quam nulla porttitor massa id. Mauris nunc congue nisi vitae.</p>
 </details>
 
-<details>
+<details name="details-accordion">
   <summary>Arcu non odio</summary>
   <p>Sed libero enim sed faucibus turpis in eu mi bibendum. Nunc mi ipsum faucibus vitae aliquet nec. Ultricies tristique nulla aliquet enim tortor. Tellus at urna condimentum mattis pellentesque.</p>
 </details>
 
-<details>
+<details name="details-accordion">
   <summary>Ut porttitor</summary>
   <p>Eu facilisis sed odio morbi quis commodo odio aenean sed. Sit amet purus gravida quis blandit turpis cursus. Eu consequat ac felis donec et odio pellentesque diam volutpat.</p>
 </details>