From 9d82749abb9c655a614266efe267f04b39a4935a Mon Sep 17 00:00:00 2001
From: Brian Talbot <hi.talbs@gmail.com>
Date: Wed, 20 Aug 2025 17:24:36 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=20Docs:=20Sidebar=20Visual=20+=20U?=
 =?UTF-8?q?I=20Polish=20(#1341)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* using layout utilities for sidebar heading link styling
* syncing up sidebar heading + general link styles
* updating sidebar heading text + icon alignment
* updating layout of experimental + pro badge decoratives
* increasing visual padding of `#search-trigger`'s `<kbd>`
* fixing `<li>` indentations
---
 .../webawesome/docs/_includes/sidebar.njk     | 90 ++++++++++++-------
 .../webawesome/docs/assets/styles/docs.css    | 17 +---
 2 files changed, 58 insertions(+), 49 deletions(-)

diff --git a/packages/webawesome/docs/_includes/sidebar.njk b/packages/webawesome/docs/_includes/sidebar.njk
index 6af15e91a..18ed29c1f 100644
--- a/packages/webawesome/docs/_includes/sidebar.njk
+++ b/packages/webawesome/docs/_includes/sidebar.njk
@@ -31,16 +31,19 @@
 <!-- Components -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a href="/docs/components/" title="Overview">
-      Components
+    <a class="wa-cluster wa-gap-xs" href="/docs/components/" title="Overview">
       <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Components
     </a>
   </h2>
   <ul>
     <li>
-      <a href="/docs/components/page/">Page</a>
-      <wa-icon name="flask" aria-hidden="true"></wa-icon>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <span class="wa-split">
+        <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
+          Page <wa-icon name="flask" aria-hidden="true"></wa-icon>
+        </a>
+        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      </span>
     </li>
     <li><a href="/docs/components/animated-image/">Animated Image</a></li>
     <li><a href="/docs/components/animation/">Animation</a></li>
@@ -57,12 +60,16 @@
     <li><a href="/docs/components/callout/">Callout</a></li>
     <li><a href="/docs/components/card/">Card</a></li>
     <li>
-      <a href="/docs/components/carousel/">Carousel</a>
-      <wa-icon name="flask" aria-hidden="true"></wa-icon>
+      <a class="wa-cluster wa-gap-xs" href="/docs/components/carousel/">
+        Carousel
+        <wa-icon name="flask" aria-hidden="true"></wa-icon>
+      </a>
       <ul>
         <li>
-          <a href="/docs/components/carousel-item/">Carousel Item</a>
-          <wa-icon name="flask" aria-hidden="true"></wa-icon>
+          <a class="wa-cluster wa-gap-xs" href="/docs/components/carousel-item/">
+            Carousel Item
+            <wa-icon name="flask" aria-hidden="true"></wa-icon>
+          </a>
         </li>
       </ul>
     </li>
@@ -70,8 +77,10 @@
     <li><a href="/docs/components/color-picker/">Color Picker</a></li>
     <li><a href="/docs/components/comparison/">Comparison</a></li>
     <li>
-      <a href="/docs/components/copy-button/">Copy Button</a>
-      <wa-icon name="flask" aria-hidden="true"></wa-icon>
+      <a class="wa-cluster wa-gap-xs" href="/docs/components/copy-button/">
+        Copy Button
+        <wa-icon name="flask" aria-hidden="true"></wa-icon>
+      </a>
     </li>
     <li><a href="/docs/components/details/">Details</a></li>
     <li><a href="/docs/components/dialog/">Dialog</a></li>
@@ -136,9 +145,9 @@
 <!-- Style utilities -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a href="/docs/utilities/" title="Overview">
-      Style Utilities
+    <a class="wa-cluster wa-gap-xs" href="/docs/utilities/" title="Overview">
       <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Style Utilities
     </a>
   </h2>
   <ul>
@@ -154,9 +163,9 @@
 <!-- Layout -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a href="/docs/layout/" title="Overview">
-      Layout
+    <a class="wa-cluster wa-gap-xs" href="/docs/layout/" title="Overview">
       <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Layout
     </a>
   </h2>
   <ul>
@@ -169,9 +178,12 @@
     <li><a href="/docs/utilities/split/">Split</a></li>
     <li><a href="/docs/utilities/stack/">Stack</a></li>
     <li>
-      <a href="/docs/components/page/">Page</a>
-      <wa-icon name="flask" aria-hidden="true"></wa-icon>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <span class="wa-split">
+        <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
+          Page <wa-icon name="flask" aria-hidden="true"></wa-icon>
+        </a>
+        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      </span>
     </li>
   </ul>
 </wa-details>
@@ -179,15 +191,17 @@
 <!-- Patterns -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a href="/docs/patterns/" title="Overview">
-      Patterns
+    <a class="wa-cluster wa-gap-xs" href="/docs/patterns/" title="Overview">
       <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Patterns
     </a>
   </h2>
   <ul>
     <li>
-      <a href="/docs/patterns/app/">App</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <span class="wa-split">
+        <a href="/docs/patterns/app/">App</a>
+        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      </span>
       <ul>
         <li>
           <a href="/docs/patterns/app/action-panel/">Action Panel</a>
@@ -230,8 +244,10 @@
       </ul>
     </li>
     <li>
-      <a href="/docs/patterns/blog-news/">Blog &amp; News</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <span class="wa-split">
+        <a href="/docs/patterns/blog-news/">Blog &amp; News</a>
+        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      </span>
       <ul>
       <li>
           <a href="/docs/patterns/blog-news/banners/">Banners</a>
@@ -275,7 +291,7 @@
         <li>
           <a href="/docs/patterns/blog-news/login/">Sign Up &amp; Login</a>
         </li>
-         <li>
+        <li>
           <a href="/docs/patterns/blog-news/numbers/">Numbers</a>
         </li>
         <li>
@@ -284,14 +300,16 @@
         <li>
           <a href="/docs/patterns/blog-news/teams/">Teams</a>
         </li>
-         <li>
+        <li>
           <a href="/docs/patterns/blog-news/testimonials/">Testimonials</a>
         </li>
       </ul>
     </li>
     <li>
-      <a href="/docs/patterns/ecommerce/">Ecommerce</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <span class="wa-split">
+        <a href="/docs/patterns/ecommerce/">Ecommerce</a>
+        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      </span>
       <ul>
         <li>
           <a href="/docs/patterns/ecommerce/category-filter/">Category Filter</a>
@@ -329,8 +347,10 @@
       </ul>
     </li>
     <li>
-      <a href="/docs/patterns/layouts/">Layouts</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <span class="wa-split">
+        <a href="/docs/patterns/layouts/">Layouts</a>
+        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      </span>
       <ul>
         <li>
           <a href="/docs/patterns/layouts/ecommerce/">Ecommerce</a>
@@ -352,17 +372,19 @@
   <li><a href="/docs/color-palettes">Color Palettes</a></li>
   <li><a href="/docs/themes">Themes</a></li>
   <li>
-    <a href="/themer" data-turbo="false">Theme Builder</a>
-    <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    <span class="wa-split">
+      <a href="/themer" data-turbo="false">Theme Builder</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </span>
   </li>
 </ul>
 
 <!-- Design tokens -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a href="/docs/tokens/" title="Overview">
-      Design Tokens
+    <a class="wa-cluster wa-gap-xs" href="/docs/tokens/" title="Overview">
       <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Design Tokens
     </a>
   </h2>
   <ul>
diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css
index 93ebd9527..dfd417d68 100644
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -181,11 +181,6 @@ wa-page > header {
 
   li wa-icon {
     color: var(--wa-color-text-quiet);
-    vertical-align: middle;
-
-    &[name='flask'] {
-      margin-inline: 0.125em;
-    }
   }
 }
 
@@ -205,25 +200,16 @@ wa-badge.pro {
     color: var(--wa-color-text-quiet);
 
     a {
-      display: flex;
-      align-items: center;
-      gap: 0.4em;
       color: var(--wa-color-text-normal);
       text-decoration: none;
 
       wa-icon {
-        margin-block-end: -0.15em;
         font-size: var(--wa-font-size-s);
         font-weight: var(--wa-font-weight-action);
-        color: var(--wa-color-gray-70);
       }
 
       &:hover {
-        color: var(--wa-color-brand-on-normal);
-
-        wa-icon {
-          color: var(--wa-color-brand-on-quiet);
-        }
+        text-decoration: underline;
       }
     }
   }
@@ -415,6 +401,7 @@ wa-button#search-trigger {
 #search-trigger kbd {
   font-size: var(--wa-font-size-2xs);
   line-height: var(--wa-form-control-value-line-height);
+  padding-inline: 0.33em;
 }
 
 /* Search list pages */