From 8b17b3d3e0406a7c11ae9f2b4ceb4b1cac0e0970 Mon Sep 17 00:00:00 2001
From: Kelsey Jackson <kelseythej@gmail.com>
Date: Mon, 19 May 2025 10:32:13 -0500
Subject: [PATCH] Kj/blog news patterns (#916)

* initial commit to this pr

* updated patterns

* category lists

* post headers

* WIP

* made some content updates

* deleted rogue file

* updated descriptions

* ran prettier

* updated padding

* updated prettierignore

* updated element

* swtiched to token

* updated with category list feedback

* updated with category list feedback

* updated with feedback for featurd post

* updated with feedback for footer

* updated with newsletter feedback'

* updated with feedback to the paywall

* updated with updates for post footer

* more footer updates

* updated with feedback for the post header

* updated with feedback for post list

* updated social share

* updated sign up and login

* added logic to elements to prevent them from closing on escape

* Fix typo (incomplete `<h2>` tag)

* Add missing input labels, fix capitalization and punctuation

* Add description to Blog & News index

* ran prettier on markdown files

* ignored the post list file

* changed hierarchy

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
Co-authored-by: lindsaym-fa <dev@lindsaym.design>
---
 .prettierignore                               |   2 +
 docs/_includes/svgs/call-to-action.njk        |   3 +
 docs/_includes/svgs/category-list.njk         |  10 +
 docs/docs/patterns/app/action-panel.md        |  12 +-
 docs/docs/patterns/app/activity-log.md        | 121 +++---
 docs/docs/patterns/app/comments.md            |  42 +-
 docs/docs/patterns/app/data-display.md        |  57 ++-
 docs/docs/patterns/app/description-list.md    |  14 +-
 docs/docs/patterns/app/empty-state.md         | 153 ++++----
 docs/docs/patterns/app/faq.md                 |  82 +++-
 docs/docs/patterns/app/grid-list.md           | 331 +++++++++-------
 docs/docs/patterns/app/leaderboard.md         |  52 ++-
 docs/docs/patterns/app/pagination.md          |   2 +-
 docs/docs/patterns/app/permissions.md         | 239 +++++------
 docs/docs/patterns/app/pricing.md             |   8 +-
 .../docs/patterns/blog-news/call-to-action.md |  55 +++
 docs/docs/patterns/blog-news/category-list.md | 143 +++++++
 docs/docs/patterns/blog-news/featured-post.md | 167 ++++++++
 docs/docs/patterns/blog-news/footer.md        | 162 ++++++++
 docs/docs/patterns/blog-news/index.njk        |   9 +
 docs/docs/patterns/blog-news/information.json |   3 +
 docs/docs/patterns/blog-news/login.md         |  65 +++
 docs/docs/patterns/blog-news/newsletter.md    | 125 ++++++
 docs/docs/patterns/blog-news/paywall.md       | 121 ++++++
 docs/docs/patterns/blog-news/post-footer.md   | 292 ++++++++++++++
 docs/docs/patterns/blog-news/post-header.md   |  74 ++++
 docs/docs/patterns/blog-news/post-list.md     | 257 ++++++++++++
 docs/docs/patterns/blog-news/social-share.md  | 130 ++++++
 docs/docs/patterns/blog.md                    | 371 ------------------
 docs/docs/patterns/business.md                |   2 +-
 .../patterns/ecommerce/category-filter.md     |  10 +-
 .../patterns/ecommerce/category-preview.md    |  41 +-
 docs/docs/patterns/ecommerce/checkout-form.md |  35 +-
 docs/docs/patterns/ecommerce/incentives.md    | 112 +++---
 docs/docs/patterns/ecommerce/order-history.md |  67 ++--
 docs/docs/patterns/ecommerce/order-summary.md |  47 +--
 docs/docs/patterns/ecommerce/product-list.md  |  30 +-
 .../patterns/ecommerce/product-overview.md    | 139 ++++---
 .../patterns/ecommerce/product-preview.md     |  14 +-
 docs/docs/patterns/ecommerce/review.md        | 154 +++++---
 docs/docs/patterns/ecommerce/shopping-cart.md |   6 +-
 .../patterns/ecommerce/store-navigation.md    |  77 ++--
 docs/docs/patterns/education.md               |   2 +-
 docs/docs/patterns/entertainement.md          |   2 +-
 docs/docs/patterns/membership.md              |   2 +-
 docs/docs/patterns/news.md                    | 171 ++++----
 docs/docs/patterns/non-profit.md              |   2 +-
 docs/docs/patterns/portfolio.md               |   2 +-
 docs/docs/patterns/product-landing.md         |   2 +-
 src/styles/themes/default/space.css           |   1 +
 50 files changed, 2837 insertions(+), 1183 deletions(-)
 create mode 100644 docs/_includes/svgs/call-to-action.njk
 create mode 100644 docs/_includes/svgs/category-list.njk
 create mode 100644 docs/docs/patterns/blog-news/call-to-action.md
 create mode 100644 docs/docs/patterns/blog-news/category-list.md
 create mode 100644 docs/docs/patterns/blog-news/featured-post.md
 create mode 100644 docs/docs/patterns/blog-news/footer.md
 create mode 100644 docs/docs/patterns/blog-news/index.njk
 create mode 100644 docs/docs/patterns/blog-news/information.json
 create mode 100644 docs/docs/patterns/blog-news/login.md
 create mode 100644 docs/docs/patterns/blog-news/newsletter.md
 create mode 100644 docs/docs/patterns/blog-news/paywall.md
 create mode 100644 docs/docs/patterns/blog-news/post-footer.md
 create mode 100644 docs/docs/patterns/blog-news/post-header.md
 create mode 100644 docs/docs/patterns/blog-news/post-list.md
 create mode 100644 docs/docs/patterns/blog-news/social-share.md
 delete mode 100644 docs/docs/patterns/blog.md

diff --git a/.prettierignore b/.prettierignore
index ea9f78b56..52ba57889 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,5 +1,7 @@
 *.hbs
 *.md
+!docs/docs/patterns/**/*.md
+docs/docs/patterns/blog-news/post-list.md
 .cache
 .github
 cspell.json
diff --git a/docs/_includes/svgs/call-to-action.njk b/docs/_includes/svgs/call-to-action.njk
new file mode 100644
index 000000000..d577af287
--- /dev/null
+++ b/docs/_includes/svgs/call-to-action.njk
@@ -0,0 +1,3 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M63 6.32811V61.3125C63 66.375 56.6719 68.9062 53.2969 65.25L49.9219 61.7344C43.7344 55.2656 35.7188 51.1875 27 50.0625V64.125C27 68.4844 23.3438 72 19.125 72H16.875C12.5156 72 9 68.4844 9 64.125V49.5C3.9375 49.5 0 45.5625 0 40.5V27C0 22.0781 3.9375 18 9 18H20.1094L24.1875 17.8594C34.0312 17.2969 43.1719 13.0781 49.9219 5.90624L53.2969 2.39061C56.6719 -1.26564 63 1.12499 63 6.32811ZM22.5 49.6406L20.1094 49.5H13.5V64.125C13.5 66.0937 14.9062 67.5 16.875 67.5H19.125C20.9531 67.5 22.5 66.0937 22.5 64.125V49.6406ZM56.5312 5.48436L53.1562 8.99999C47.25 15.1875 39.6562 19.5469 31.5 21.375V46.2656C39.6562 48.0937 47.25 52.3125 53.1562 58.6406L56.5312 62.1562C57.2344 62.8594 58.5 62.2969 58.5 61.3125V6.32811C58.5 5.20311 57.2344 4.78124 56.5312 5.48436ZM27 22.0781C26.1562 22.2187 25.3125 22.3594 24.4688 22.3594L20.25 22.5H9C6.46875 22.5 4.5 24.6094 4.5 27V40.5C4.5 43.0312 6.46875 45 9 45H20.25L24.4688 45.2812C25.3125 45.4219 26.1562 45.4219 27 45.5625V22.0781ZM69.75 27C70.875 27 72 28.125 72 29.25V38.25C72 39.5156 70.875 40.5 69.75 40.5C68.4844 40.5 67.5 39.5156 67.5 38.25V29.25C67.5 28.125 68.4844 27 69.75 27Z" fill="var(--wa-color-neutral-on-quiet"/>
+</svg>
diff --git a/docs/_includes/svgs/category-list.njk b/docs/_includes/svgs/category-list.njk
new file mode 100644
index 000000000..a40ead60d
--- /dev/null
+++ b/docs/_includes/svgs/category-list.njk
@@ -0,0 +1,10 @@
+<svg width="96" height="57" viewBox="0 0 96 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1H84C90.0751 1 95 5.92487 95 12V45C95 51.0751 90.0751 56 84 56H12C5.92487 56 1 51.0751 1 45V12C1 5.92487 5.92487 1 12 1Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="7" y="8" width="41" height="5" fill="var(--wa-color-neutral-on-quiet)"/>
+<rect x="7" y="19" width="23" height="14" rx="3" fill="var(--wa-color-neutral-fill-normal)"/>
+<rect x="35" y="19" width="23" height="14" rx="3" fill="var(--wa-color-neutral-fill-normal)"/>
+<rect x="63" y="19" width="23" height="14" rx="3" fill="var(--wa-color-neutral-fill-normal)"/>
+<rect x="7" y="36" width="23" height="14" rx="3" fill="var(--wa-color-neutral-fill-normal)"/>
+<rect x="35" y="36" width="23" height="14" rx="3" fill="var(--wa-color-neutral-fill-normal)"/>
+<rect x="63" y="36" width="23" height="14" rx="3" fill="var(--wa-color-neutral-fill-normal)"/>
+</svg>
diff --git a/docs/docs/patterns/app/action-panel.md b/docs/docs/patterns/app/action-panel.md
index 988e82020..994067e90 100644
--- a/docs/docs/patterns/app/action-panel.md
+++ b/docs/docs/patterns/app/action-panel.md
@@ -40,7 +40,10 @@ isPro: true
       <h3 id="auto-renew-label" class="wa-heading-m">Auto-renew</h3>
       <wa-switch size="large" aria-labelledby="auto-renew-label"></wa-switch>
     </div>
-    <p class="wa-body-s">Automatically renew your subscription using your preferred payment method. We'll send you a reminder 30 days before we draft your account.</p>
+    <p class="wa-body-s">
+      Automatically renew your subscription using your preferred payment method. We'll send you a reminder 30 days
+      before we draft your account.
+    </p>
   </div>
 </wa-card>
 ```
@@ -50,7 +53,10 @@ isPro: true
 ```html {.example}
 <wa-card style="margin: 0 auto; max-width: 45ch;">
   <div class="wa-flank">
-    <wa-avatar image="https://images.unsplash.com/photo-1532202802379-df93d543bac3?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile-image"></wa-avatar>
+    <wa-avatar
+      image="https://images.unsplash.com/photo-1532202802379-df93d543bac3?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      label="profile-image"
+    ></wa-avatar>
     <div class="wa-split">
       <div class="wa-stack wa-gap-2xs">
         <span class="wa-heading-s">Super Dog</span>
@@ -67,4 +73,4 @@ isPro: true
     </div>
   </div>
 </wa-card>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/activity-log.md b/docs/docs/patterns/app/activity-log.md
index ddbb75ca4..15dd48432 100644
--- a/docs/docs/patterns/app/activity-log.md
+++ b/docs/docs/patterns/app/activity-log.md
@@ -1,7 +1,6 @@
 ---
 title: Activity Log
 description: 'Track and organize recent user actions or events.'
-
 ---
 
 ## Simple
@@ -107,9 +106,7 @@ description: 'Track and organize recent user actions or events.'
   <h3 class="wa-heading-m">Monthly Activity</h3>
   <div class="wa-stack">
     <wa-details>
-      <span class="wa-heading-m" slot="summary">
-        February
-      </span>
+      <span class="wa-heading-m" slot="summary"> February </span>
       <div class="wa-stack">
         <article class="wa-flank">
           <wa-icon style="font-size: var(--wa-font-size-l)" name="envelope" fixed-width></wa-icon>
@@ -129,9 +126,7 @@ description: 'Track and organize recent user actions or events.'
           <div class="wa-split">
             <div class="wa-stack wa-gap-0">
               <span class="wa-heading-s">Spoke with the Pope</span>
-              <div class="wa-cluster wa-gap-2xs">
-                <a href="#">Artur Fleck</a><span>for 1 hour</span>
-              </div>
+              <div class="wa-cluster wa-gap-2xs"><a href="#">Artur Fleck</a><span>for 1 hour</span></div>
             </div>
             <wa-format-date date="2025-02-23" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
           </div>
@@ -139,18 +134,14 @@ description: 'Track and organize recent user actions or events.'
       </div>
     </wa-details>
     <wa-details>
-      <span class="wa-heading-m" slot="summary">
-        March
-      </span>
+      <span class="wa-heading-m" slot="summary"> March </span>
       <div class="wa-stack">
         <article class="wa-flank">
           <wa-icon style="font-size: var(--wa-font-size-l)" name="video" fixed-width></wa-icon>
           <div class="wa-split">
             <div class="wa-stack wa-gap-0">
               <span class="wa-heading-s">Zoom Call with Northeast office</span>
-              <div class="wa-cluster wa-gap-2xs">
-                <a href="#">Axel Foley</a><span>for 47 minutes</span>
-              </div>
+              <div class="wa-cluster wa-gap-2xs"><a href="#">Axel Foley</a><span>for 47 minutes</span></div>
             </div>
             <wa-format-date date="2025-03-15" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
           </div>
@@ -171,18 +162,14 @@ description: 'Track and organize recent user actions or events.'
       </div>
     </wa-details>
     <wa-details>
-      <span class="wa-heading-m" slot="summary">
-        April
-      </span>
+      <span class="wa-heading-m" slot="summary"> April </span>
       <div class="wa-stack">
         <article class="wa-flank">
           <wa-icon style="font-size: var(--wa-font-size-l)" family="brands" name="intercom" fixed-width></wa-icon>
           <div class="wa-split">
             <div class="wa-stack wa-gap-0">
               <span class="wa-heading-s">Got new lead</span>
-              <div class="wa-cluster wa-gap-2xs">
-                <a href="#">Jack Carter</a><span>on Intercom switchboard</span>
-              </div>
+              <div class="wa-cluster wa-gap-2xs"><a href="#">Jack Carter</a><span>on Intercom switchboard</span></div>
             </div>
             <wa-format-date date="2025-04-18" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
           </div>
@@ -205,13 +192,18 @@ description: 'Track and organize recent user actions or events.'
   </div>
 </wa-card>
 ```
+
 ## Card Separated
+
 ```html {.example}
 <div class="wa-stack" style="max-width: 45ch; margin: 0 auto;">
   <div class="wa-stack">
     <wa-card>
       <div class="wa-flank">
-        <wa-avatar image="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
+        <wa-avatar
+          image="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          label="profile image"
+        ></wa-avatar>
         <div class="wa-stack wa-gap-0">
           <div class="wa-split">
             <span class="wa-heading-s">Isaiah Hamilton</span>
@@ -228,45 +220,51 @@ description: 'Track and organize recent user actions or events.'
     <div class="wa-flank wa-gap-xl">
       <wa-divider vertical style="height: auto; align-self: stretch"></wa-divider>
       <ul class="wa-stack">
-      <li class="wa-stack wa-gap-2xs">
-        <wa-card>
-      <div class="wa-flank">
-        <wa-avatar image="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
-        <div class="wa-stack wa-gap-0">
-          <div class="wa-split">
-            <span class="wa-heading-s">Melvin Hurst</span>
-            <wa-relative-time class="wa-caption-s" date="2025-02-15T09:17:00-04:00"></wa-relative-time>
-          </div>
-          <p>What's on second?</p>
-          <a href="#" class="wa-cluster wa-gap-2xs">
-            <wa-icon name="reply" family="sharp" variant="regular"></wa-icon>
-            <span>Reply</span>
-          </a>
-        </div>
-      </div>
-    </wa-card>
-      </li>
-      <li class="wa-stack wa-gap-2xs">
-        <wa-card>
-      <div class="wa-flank wa-align-items-start">
-        <wa-avatar image="https://images.unsplash.com/photo-1674044494331-8db2ecf18d46?q=80&w=3019&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
-        <div class="wa-stack wa-gap-xs">
-          <div class="wa-split">
-            <span class="wa-heading-s">Vanessa Wright</span>
-          </div>
-          <wa-textarea size="small" aria-label="Add Your Comment"></wa-textarea>
-        </div>
-      </div>
-    </wa-card>
-      </li>
-    </ul>
+        <li class="wa-stack wa-gap-2xs">
+          <wa-card>
+            <div class="wa-flank">
+              <wa-avatar
+                image="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                label="profile image"
+              ></wa-avatar>
+              <div class="wa-stack wa-gap-0">
+                <div class="wa-split">
+                  <span class="wa-heading-s">Melvin Hurst</span>
+                  <wa-relative-time class="wa-caption-s" date="2025-02-15T09:17:00-04:00"></wa-relative-time>
+                </div>
+                <p>What's on second?</p>
+                <a href="#" class="wa-cluster wa-gap-2xs">
+                  <wa-icon name="reply" family="sharp" variant="regular"></wa-icon>
+                  <span>Reply</span>
+                </a>
+              </div>
+            </div>
+          </wa-card>
+        </li>
+        <li class="wa-stack wa-gap-2xs">
+          <wa-card>
+            <div class="wa-flank wa-align-items-start">
+              <wa-avatar
+                image="https://images.unsplash.com/photo-1674044494331-8db2ecf18d46?q=80&w=3019&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                label="profile image"
+              ></wa-avatar>
+              <div class="wa-stack wa-gap-xs">
+                <div class="wa-split">
+                  <span class="wa-heading-s">Vanessa Wright</span>
+                </div>
+                <wa-textarea size="small" aria-label="Add Your Comment"></wa-textarea>
+              </div>
+            </div>
+          </wa-card>
+        </li>
+      </ul>
     </div>
-
   </div>
 </div>
 ```
 
 ## Divider Separated
+
 ```html {.example}
 <wa-card style="max-width: 54ch; margin: 0 auto;">
   <div slot="header" class="wa-split">
@@ -279,7 +277,10 @@ description: 'Track and organize recent user actions or events.'
   <div class="wa-stack">
     <article>
       <div class="wa-flank wa-align-items-start">
-        <wa-avatar image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
+        <wa-avatar
+          image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          label="profile image"
+        ></wa-avatar>
         <div class="wa-stack wa-gap-2xs">
           <div class="wa-split">
             <span><strong>Happy</strong> commented in <a href="#">Reporting Dashboard</a></span>
@@ -298,7 +299,10 @@ description: 'Track and organize recent user actions or events.'
     </article>
     <article>
       <div class="wa-flank wa-align-items-start">
-        <wa-avatar image="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
+        <wa-avatar
+          image="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          label="profile image"
+        ></wa-avatar>
         <div class="wa-stack wa-gap-2xs">
           <div class="wa-split">
             <span><strong>Charlotte</strong> followed you</span>
@@ -314,7 +318,10 @@ description: 'Track and organize recent user actions or events.'
     </article>
     <article>
       <div class="wa-flank wa-align-items-start">
-        <wa-avatar image="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Profile image"></wa-avatar>
+        <wa-avatar
+          image="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          label="Profile image"
+        ></wa-avatar>
         <div class="wa-stack wa-gap-2xs">
           <div class="wa-split">
             <span><strong>Tavitian</strong> invited you to <a href="#">Homepage Redesign</a></span>
@@ -333,4 +340,4 @@ description: 'Track and organize recent user actions or events.'
     </article>
   </div>
 </wa-card>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/comments.md b/docs/docs/patterns/app/comments.md
index fa46e825a..b9e77716b 100644
--- a/docs/docs/patterns/app/comments.md
+++ b/docs/docs/patterns/app/comments.md
@@ -39,10 +39,16 @@ isPro: true
           <wa-avatar initials="RF" label="User avatar"></wa-avatar>
           <div class="wa-cluster">
             <strong>Robert Fox</strong>
-            <span class="wa-caption-m">commented <wa-relative-time date="2025-03-31T09:17:00-04:00"></wa-relative-time></span>
+            <span class="wa-caption-m"
+              >commented <wa-relative-time date="2025-03-31T09:17:00-04:00"></wa-relative-time
+            ></span>
           </div>
         </div>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec. Suspendisse potenti. Pellentesque lobortis pulvinar nulla non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus
+          nec. Suspendisse potenti. Pellentesque lobortis pulvinar nulla non tempor. Interdum et malesuada fames ac ante
+          ipsum primis in faucibus.
+        </p>
       </li>
       <div class="wa-flank wa-gap-xl">
         <wa-divider vertical style="height: auto; align-self: stretch"></wa-divider>
@@ -52,10 +58,15 @@ isPro: true
               <wa-avatar initials="VF" label="User avatar"></wa-avatar>
               <div class="wa-cluster">
                 <strong>Virginia Woolf</strong>
-                <span class="wa-caption-m">commented <wa-relative-time date="2025-03-31T12:32:00-04:00"></wa-relative-time></span>
+                <span class="wa-caption-m"
+                  >commented <wa-relative-time date="2025-03-31T12:32:00-04:00"></wa-relative-time
+                ></span>
               </div>
             </div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.</p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem
+              faucibus nec.
+            </p>
           </li>
           <li class="wa-stack wa-gap-2xs">
             <div class="wa-flank">
@@ -65,7 +76,10 @@ isPro: true
                 <span class="wa-caption-m">commented <wa-relative-time></wa-relative-time></span>
               </div>
             </div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.</p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem
+              faucibus nec.
+            </p>
           </li>
           <li class="wa-cluster">
             <wa-icon name="reply"></wa-icon>
@@ -82,7 +96,10 @@ isPro: true
 
 ```html {.example}
 <div class="wa-align-items-start wa-flank">
-  <wa-avatar image="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="User avatar"></wa-avatar>
+  <wa-avatar
+    image="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    label="User avatar"
+  ></wa-avatar>
   <div class="wa-stack wa-gap-s">
     <wa-textarea placeholder="Add to the conversation..." aria-label="Add comment"></wa-textarea>
     <div class="wa-split">
@@ -119,7 +136,14 @@ isPro: true
     <dl class="wa-split">
       <dt>Date</dt>
       <dd>
-        <wa-format-date date="2025-03-13T00:00:00.000-04:00" weekday="long" month="long" day="numeric" year="numeric" class="wa-caption-m"></wa-format-date>
+        <wa-format-date
+          date="2025-03-13T00:00:00.000-04:00"
+          weekday="long"
+          month="long"
+          day="numeric"
+          year="numeric"
+          class="wa-caption-m"
+        ></wa-format-date>
       </dd>
     </dl>
     <wa-divider></wa-divider>
@@ -136,7 +160,9 @@ isPro: true
   </div>
 </wa-card>
 ```
+
 ## With Preview Pane
+
 ```html{.example}
 <div style="max-width: 60ch; margin: 0 auto;">
   <wa-card class="wa-border-radius-square">
@@ -162,4 +188,4 @@ isPro: true
   </wa-card>
 
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/data-display.md b/docs/docs/patterns/app/data-display.md
index 6b26fd14c..c6600edf6 100644
--- a/docs/docs/patterns/app/data-display.md
+++ b/docs/docs/patterns/app/data-display.md
@@ -4,8 +4,8 @@ description: 'Convey insights, metrics, and aggregate data at a glance.'
 isPro: true
 ---
 
-
 ## Simple
+
 ```html {.example}
 <wa-card>
   <div class="wa-grid wa-gap-3xl" style="--min-column-size: 24ch;">
@@ -20,8 +20,13 @@ isPro: true
           <wa-format-number class="wa-heading-s" type="percent" value=".475"></wa-format-number>
         </div>
       </div>
-      <wa-format-number class="wa-heading-xl" type="currency" currency="USD" value="175000000" lang="en-US"></wa-format-number>
-
+      <wa-format-number
+        class="wa-heading-xl"
+        type="currency"
+        currency="USD"
+        value="175000000"
+        lang="en-US"
+      ></wa-format-number>
     </div>
     <div class="wa-stack">
       <div class="wa-split">
@@ -29,12 +34,19 @@ isPro: true
           <wa-icon name="credit-card"></wa-icon>
           <span>Expenses</span>
         </div>
-         <div class="wa-cluster wa-gap-xs" style="color: var(--wa-color-red);">
+        <div class="wa-cluster wa-gap-xs" style="color: var(--wa-color-red);">
           <wa-icon name="arrow-trend-down"></wa-icon>
           <wa-format-number class="wa-heading-s" type="percent" value=".27"></wa-format-number>
         </div>
       </div>
-      <wa-format-number class="wa-heading-xl" class="wa-heading-xl" type="currency" currency="USD" value="289472" lang="en-US"></wa-format-number>
+      <wa-format-number
+        class="wa-heading-xl"
+        class="wa-heading-xl"
+        type="currency"
+        currency="USD"
+        value="289472"
+        lang="en-US"
+      ></wa-format-number>
     </div>
     <div class="wa-stack">
       <div class="wa-split">
@@ -47,7 +59,14 @@ isPro: true
           <wa-format-number class="wa-heading-s" type="percent" value=".14"></wa-format-number>
         </div>
       </div>
-      <wa-format-number class="wa-heading-xl" class="wa-heading-xl" type="currency" currency="USD" value="569213" lang="en-US"></wa-format-number>
+      <wa-format-number
+        class="wa-heading-xl"
+        class="wa-heading-xl"
+        type="currency"
+        currency="USD"
+        value="569213"
+        lang="en-US"
+      ></wa-format-number>
     </div>
     <div class="wa-stack">
       <div class="wa-split">
@@ -56,19 +75,27 @@ isPro: true
           <span>Mortgages & Loans</span>
         </div>
       </div>
-      <wa-format-number class="wa-heading-xl" class="wa-heading-xl" type="currency" currency="USD" value="23904" lang="en-US"></wa-format-number>
+      <wa-format-number
+        class="wa-heading-xl"
+        class="wa-heading-xl"
+        type="currency"
+        currency="USD"
+        value="23904"
+        lang="en-US"
+      ></wa-format-number>
     </div>
   </div>
 </wa-card>
 ```
 
 ## Cards with Avatars
+
 ```html {.example}
 <div class="wa-grid" style="--min-column-size: 30ch">
   <wa-card>
     <div class="wa-flank wa-align-items-start">
       <wa-avatar shape="rounded">
-         <wa-icon slot="icon" name="user-group"></wa-icon>
+        <wa-icon slot="icon" name="user-group"></wa-icon>
       </wa-avatar>
       <div class="wa-stack wa-gap-2xs">
         <h3 class="wa-caption-m">Total Subscribers</h3>
@@ -85,7 +112,7 @@ isPro: true
   <wa-card>
     <div class="wa-flank wa-align-items-start">
       <wa-avatar shape="rounded">
-         <wa-icon slot="icon" name="envelope-open"></wa-icon>
+        <wa-icon slot="icon" name="envelope-open"></wa-icon>
       </wa-avatar>
       <div class="wa-stack wa-gap-2xs">
         <h3 class="wa-caption-m">Open Rate</h3>
@@ -102,7 +129,7 @@ isPro: true
   <wa-card>
     <div class="wa-flank wa-align-items-start">
       <wa-avatar shape="rounded">
-         <wa-icon slot="icon" name="arrow-pointer"></wa-icon>
+        <wa-icon slot="icon" name="arrow-pointer"></wa-icon>
       </wa-avatar>
       <div class="wa-stack wa-gap-2xs">
         <h3 class="wa-caption-m">Click Rate</h3>
@@ -136,12 +163,16 @@ isPro: true
           <wa-progress-ring value="12.3" style="--size: 1em; --track-width: 0.125em"></wa-progress-ring>
           <span>12.3%</span>
         </div>
-        <wa-badge appearance="filled outlined" variant="danger"><wa-icon name="arrow-down"></wa-icon> down from 19.6%</wa-badge>
+        <wa-badge appearance="filled outlined" variant="danger"
+          ><wa-icon name="arrow-down"></wa-icon> down from 19.6%</wa-badge
+        >
       </article>
       <article class="wa-stack wa-gap-xs wa-align-items-end">
         <h4 class="wa-caption-l">Max CHR</h4>
         <span class="wa-heading-2xl">72.6%</span>
-        <wa-badge appearance="filled outlined" variant="success"><wa-icon name="sparkles"></wa-icon> CHR Impact +5.4%</wa-badge>
+        <wa-badge appearance="filled outlined" variant="success"
+          ><wa-icon name="sparkles"></wa-icon> CHR Impact +5.4%</wa-badge
+        >
       </article>
     </div>
     <wa-divider></wa-divider>
@@ -171,4 +202,4 @@ isPro: true
     </article>
   </div>
 </wa-card>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/description-list.md b/docs/docs/patterns/app/description-list.md
index e7be82cf9..63d9b6fa8 100644
--- a/docs/docs/patterns/app/description-list.md
+++ b/docs/docs/patterns/app/description-list.md
@@ -30,7 +30,10 @@ isPro: true
     </div>
     <div class="wa-flank wa-align-items-start" style="--flank-size: 20ch;">
       <dt>About</dt>
-      <dd>After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce warrior, loyal to those I love, and I'm always striving to atone for those dark days as the Winter Soldier.
+      <dd>
+        After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of
+        redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce
+        warrior, loyal to those I love, and I'm always striving to atone for those dark days as the Winter Soldier.
       </dd>
     </div>
     <div class="wa-flank wa-align-items-start" style="--flank-size: 20ch;">
@@ -169,7 +172,12 @@ isPro: true
     <div class="wa-flank wa-align-items-start" style="--flank-size: 20ch;">
       <dt>About</dt>
       <div class="wa-flank:end">
-        <dd>After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce warrior, loyal to those I love, and I'm always striving to atone for those dark days as the Winter Soldier.</dd>
+        <dd>
+          After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of
+          redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a
+          fierce warrior, loyal to those I love, and I'm always striving to atone for those dark days as the Winter
+          Soldier.
+        </dd>
         <wa-button appearance="plain" variant="brand" size="small">Edit</wa-button>
       </div>
     </div>
@@ -250,4 +258,4 @@ isPro: true
     </a>
   </div>
 </wa-card>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/empty-state.md b/docs/docs/patterns/app/empty-state.md
index bb11f8d1e..a449b009b 100644
--- a/docs/docs/patterns/app/empty-state.md
+++ b/docs/docs/patterns/app/empty-state.md
@@ -36,19 +36,22 @@ isPro: true
     <h2 class="wa-heading-m">Projects</h2>
   </div>
   <div class="wa-stack wa-gap-xl">
-    <p class="wa-caption-m">You haven’t created a project yet. Get started by selecting a template or start with a blank canvas.</p>
+    <p class="wa-caption-m">
+      You haven’t created a project yet. Get started by selecting a template or start with a blank canvas.
+    </p>
     <div class="wa-grid wa-gap-xl" style="--min-column-size: 30ch;">
       <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-yellow-90);color: var(--wa-color-yellow-40);">
+        <wa-avatar
+          shape="rounded"
+          style="--background-color: var(--wa-color-yellow-90);color: var(--wa-color-yellow-40);"
+        >
           <wa-icon slot="icon" name="note-sticky"></wa-icon>
         </wa-avatar>
         <div class="wa-stack wa-gap-2xs">
           <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
             Create a Quick Note <wa-icon name="arrow-right"></wa-icon>
           </span>
-          <p class="wa-caption-m">
-            Jot down any idea. Will it make sense later? Who knows.
-          </p>
+          <p class="wa-caption-m">Jot down any idea. Will it make sense later? Who knows.</p>
         </div>
       </a>
       <a href="" class="wa-flank wa-align-items-start wa-link-plain">
@@ -59,48 +62,49 @@ isPro: true
           <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
             Create a Checklist <wa-icon name="arrow-right"></wa-icon>
           </span>
-          <p class="wa-caption-m">
-            The ultimate tool for looking busy.
-          </p>
+          <p class="wa-caption-m">The ultimate tool for looking busy.</p>
         </div>
       </a>
-      <a href=""class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-purple-90);color: var(--wa-color-purple-40);">
+      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
+        <wa-avatar
+          shape="rounded"
+          style="--background-color: var(--wa-color-purple-90);color: var(--wa-color-purple-40);"
+        >
           <wa-icon slot="icon" name="table-cells"></wa-icon>
         </wa-avatar>
         <div class="wa-stack wa-gap-2xs">
           <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
             Create a Spreadsheet <wa-icon name="arrow-right"></wa-icon>
           </span>
-          <p class="wa-caption-m">
-            Endless rows and columns of tiny, soul-crushing numbers.
-          </p>
+          <p class="wa-caption-m">Endless rows and columns of tiny, soul-crushing numbers.</p>
         </div>
       </a>
       <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-orange-90);color: var(--wa-color-orange-40);">
+        <wa-avatar
+          shape="rounded"
+          style="--background-color: var(--wa-color-orange-90);color: var(--wa-color-orange-40);"
+        >
           <wa-icon slot="icon" name="presentation-screen"></wa-icon>
         </wa-avatar>
         <div class="wa-stack wa-gap-2xs">
           <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
             Create a Slideshow <wa-icon name="arrow-right"></wa-icon>
           </span>
-          <p class="wa-caption-m">
-            Dramatic transitions make everything seem more official.
-          </p>
+          <p class="wa-caption-m">Dramatic transitions make everything seem more official.</p>
         </div>
       </a>
       <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-green-90);color: var(--wa-color-green-40);">
+        <wa-avatar
+          shape="rounded"
+          style="--background-color: var(--wa-color-green-90);color: var(--wa-color-green-40);"
+        >
           <wa-icon slot="icon" name="pen-field"></wa-icon>
         </wa-avatar>
         <div class="wa-stack wa-gap-2xs">
           <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
             Create a Form <wa-icon name="arrow-right"></wa-icon>
           </span>
-          <p class="wa-caption-m">
-            Collect the deepest personal details and darkest secrets.
-          </p>
+          <p class="wa-caption-m">Collect the deepest personal details and darkest secrets.</p>
         </div>
       </a>
       <a href="" class="wa-flank wa-align-items-start wa-link-plain">
@@ -111,9 +115,7 @@ isPro: true
           <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
             Create a Photo Album <wa-icon name="arrow-right"></wa-icon>
           </span>
-          <p class="wa-caption-m">
-            Curate your best memories or most basic food pictures.
-          </p>
+          <p class="wa-caption-m">Curate your best memories or most basic food pictures.</p>
         </div>
       </a>
     </div>
@@ -126,82 +128,95 @@ isPro: true
   </div>
 </wa-card>
 ```
+
 ## Add people
+
 ```html {.example}
 <wa-card style="max-width: 60ch; margin: 0 auto;">
   <div class="wa-stack wa-gap-xs">
     <h3 class="wa-heading-m">Add team members</h3>
     <p>This project is awful lonely. Invite some team members to liven up the joint.</p>
-    <div class="wa-flank:end wa-gap-xs">
-      <wa-input></wa-input><wa-button>Invite</wa-button>
-    </div>
+    <div class="wa-flank:end wa-gap-xs"><wa-input></wa-input><wa-button>Invite</wa-button></div>
     <div class="wa-stack">
       <em class="wa-caption-l">Team members previously added to projects</em>
       <wa-divider></wa-divider>
       <section>
         <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
-        <div class="wa-split">
-          <div class="wa-stack wa-gap-0">
-            <span class="wa-heading-s">Earl Upton</span>
-            <span class="wa-caption-m">DevOps</span>
+          <wa-avatar
+            image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            label="profile image"
+          ></wa-avatar>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-0">
+              <span class="wa-heading-s">Earl Upton</span>
+              <span class="wa-caption-m">DevOps</span>
+            </div>
+            <wa-button appearance="plain">
+              <wa-icon name="user-plus" slot="prefix"></wa-icon>
+              Invite
+            </wa-button>
           </div>
-          <wa-button appearance="plain">
-            <wa-icon name="user-plus" slot="prefix"></wa-icon>
-            Invite
-          </wa-button>
-        </div>
         </div>
         <wa-divider></wa-divider>
       </section>
       <section>
         <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" lable="profile image"></wa-avatar>
-        <div class="wa-split">
-          <div class="wa-stack wa-gap-0">
-            <span class="wa-heading-s">Steamboat Willie</span>
-            <span class="wa-caption-m">Captain</span>
+          <wa-avatar
+            image="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            lable="profile image"
+          ></wa-avatar>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-0">
+              <span class="wa-heading-s">Steamboat Willie</span>
+              <span class="wa-caption-m">Captain</span>
+            </div>
+            <wa-button appearance="plain">
+              <wa-icon name="user-plus" slot="prefix"></wa-icon>
+              Invite
+            </wa-button>
           </div>
-          <wa-button appearance="plain">
-            <wa-icon name="user-plus" slot="prefix"></wa-icon>
-            Invite
-          </wa-button>
-        </div>
         </div>
         <wa-divider></wa-divider>
       </section>
       <section>
         <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1678582967399-bf558533f5eb?q=80&w=3029&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
-        <div class="wa-split">
-          <div class="wa-stack wa-gap-0">
-            <span class="wa-heading-s">Melissa Eckers</span>
-            <span class="wa-caption-m">Cloud Engineer</span>
+          <wa-avatar
+            image="https://images.unsplash.com/photo-1678582967399-bf558533f5eb?q=80&w=3029&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            label="profile image"
+          ></wa-avatar>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-0">
+              <span class="wa-heading-s">Melissa Eckers</span>
+              <span class="wa-caption-m">Cloud Engineer</span>
+            </div>
+            <wa-button appearance="plain">
+              <wa-icon name="user-plus" slot="prefix"></wa-icon>
+              Invite
+            </wa-button>
           </div>
-          <wa-button appearance="plain">
-            <wa-icon name="user-plus" slot="prefix"></wa-icon>
-            Invite
-          </wa-button>
-        </div>
         </div>
         <wa-divider></wa-divider>
-      </section><section>
+      </section>
+      <section>
         <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
-        <div class="wa-split">
-          <div class="wa-stack wa-gap-0">
-            <span class="wa-heading-s">Devin Shears</span>
-            <span class="wa-caption-m">UX Writer</span>
+          <wa-avatar
+            image="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            label="profile image"
+          ></wa-avatar>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-0">
+              <span class="wa-heading-s">Devin Shears</span>
+              <span class="wa-caption-m">UX Writer</span>
+            </div>
+            <wa-button appearance="plain">
+              <wa-icon name="user-plus" slot="prefix"></wa-icon>
+              Invite
+            </wa-button>
           </div>
-          <wa-button appearance="plain">
-            <wa-icon name="user-plus" slot="prefix"></wa-icon>
-            Invite
-          </wa-button>
-        </div>
         </div>
         <wa-divider></wa-divider>
       </section>
     </div>
   </div>
 </wa-card>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/faq.md b/docs/docs/patterns/app/faq.md
index cbdcdb81f..cb1be3411 100644
--- a/docs/docs/patterns/app/faq.md
+++ b/docs/docs/patterns/app/faq.md
@@ -10,20 +10,32 @@ isPro: true
 <div class="wa-flank wa-align-items-start wa-gap-2xl" style="--flank-size: 35ch">
   <div>
     <h2>Frequently Asked Questions</h2>
-    <p>Can’t find an answer? Reach out to your local <a href="">Operator</a>, or contact <a href="">the Oracle</a>, and enjoy a cookie. &#127850;</p>
+    <p>
+      Can’t find an answer? Reach out to your local <a href="">Operator</a>, or contact <a href="">the Oracle</a>, and
+      enjoy a cookie. &#127850;
+    </p>
   </div>
   <dl class="wa-stack wa-gap-2xl">
     <div class="wa-stack wa-gap-xs">
       <dt>Is Zion actually real, or just another Matrix?</dt>
-      <dd>Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t just another layer of the simulation?</dd>
+      <dd>
+        Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t
+        just another layer of the simulation?
+      </dd>
     </div>
     <div class="wa-stack wa-gap-xs">
       <dt>Why do the Agents always wear suits?</dt>
-      <dd>Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also, intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.</dd>
+      <dd>
+        Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also,
+        intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.
+      </dd>
     </div>
     <div class="wa-stack wa-gap-xs">
       <dt>Can I go back into the Matrix once I’m out?</dt>
-      <dd>Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing around you is real.</dd>
+      <dd>
+        Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing
+        around you is real.
+      </dd>
     </div>
   </dl>
 </div>
@@ -36,17 +48,20 @@ isPro: true
   <h2>Frequently Asked Questions</h2>
   <wa-details appearance="plain">
     <h3 slot="summary" class="wa-heading-m" style="margin: 0">Is Zion actually real, or just another Matrix?</h3>
-    Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t just another layer of the simulation?
+    Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t
+    just another layer of the simulation?
   </wa-details>
   <wa-divider></wa-divider>
   <wa-details appearance="plain">
     <h3 slot="summary" class="wa-heading-m" style="margin: 0">Why do the Agents always wear suits?</h3>
-    Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also, intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.
+    Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also,
+    intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.
   </wa-details>
   <wa-divider></wa-divider>
   <wa-details appearance="plain">
     <h3 slot="summary" class="wa-heading-m" style="margin: 0">Can I go back into the Matrix once I’m out?</h3>
-    Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing around you is real.
+    Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing around
+    you is real.
   </wa-details>
 </div>
 ```
@@ -59,61 +74,86 @@ isPro: true
   <dl class="wa-stack wa-gap-2xl">
     <div class="wa-grid wa-gap-xs">
       <dt class="wa-heading-m">Is Zion actually real, or just another Matrix?</dt>
-      <dd>Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t just another layer of the simulation?</dd>
+      <dd>
+        Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t
+        just another layer of the simulation?
+      </dd>
     </div>
     <wa-divider></wa-divider>
     <div class="wa-grid wa-gap-xs">
       <dt class="wa-heading-m">Why do the Agents always wear suits?</dt>
-      <dd>Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also, intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.</dd>
+      <dd>
+        Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also,
+        intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.
+      </dd>
     </div>
     <wa-divider></wa-divider>
     <div class="wa-grid wa-gap-xs">
       <dt class="wa-heading-m">Can I go back into the Matrix once I’m out?</dt>
-      <dd>Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing around you is real.</dd>
+      <dd>
+        Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing
+        around you is real.
+      </dd>
     </div>
   </dl>
 </div>
 ```
 
 ## Multiple Columns
-```html{.example}
+
+```html {.example}
 <div>
-
-    <h2>Frequently Asked Questions</h2>
-
+  <h2>Frequently Asked Questions</h2>
 
   <dl class="wa-grid wa-gap-m" style="--min-column-size: 30ch;">
     <div class="wa-stack wa-gap-xs">
       <dt class="wa-heading-m">How often do you update your courses?</dt>
-      <dd>A course is updated once there is a fundamental shift in the language or library’s underlying API. You can check our <a href="#">workshop</a> list to see if a new version of a given course is on the schedule. You may also write to us as <a href="#">support@frontendmasters.com</a> with suggestions for updates.</dd>
+      <dd>
+        A course is updated once there is a fundamental shift in the language or library’s underlying API. You can check
+        our <a href="#">workshop</a> list to see if a new version of a given course is on the schedule. You may also
+        write to us as <a href="#">support@frontendmasters.com</a> with suggestions for updates.
+      </dd>
     </div>
 
     <div class="wa-stack wa-gap-xs">
       <dt class="wa-heading-m">Do you offer certificates of completion?</dt>
-      <dd>You can download certificates of completion from the <a href="#">Completed Courses</a> list in your Learning Library. Click the diploma icon next to the course to download the certificate in light or dark mode. A link to your Public Profile is included on each certificate if you’ve created one. Public Profiles showcase your learning journey and are a fantastic way to share progress with friends, co-workers, or employers. Public Profiles are available to members with an active Frontend Masters subscription who have watched ten or more hours of content. Visit the <a href="#">Public Profile</a> section in My Account to get started.</dd>
+      <dd>
+        You can download certificates of completion from the <a href="#">Completed Courses</a> list in your Learning
+        Library. Click the diploma icon next to the course to download the certificate in light or dark mode. A link to
+        your Public Profile is included on each certificate if you’ve created one. Public Profiles showcase your
+        learning journey and are a fantastic way to share progress with friends, co-workers, or employers. Public
+        Profiles are available to members with an active Frontend Masters subscription who have watched ten or more
+        hours of content. Visit the <a href="#">Public Profile</a> section in My Account to get started.
+      </dd>
     </div>
 
     <div class="wa-stack wa-gap-xs">
       <dt class="wa-heading-m">Do you offer a free trial?</dt>
       <dd>
-         <p>We offer a free trial to first-time subscribers. You can find more about the trial here.</p>
+        <p>We offer a free trial to first-time subscribers. You can find more about the trial here.</p>
         <p>We also have the following opportunities to learn for free:</p>
         <ul>
           <li>The online bootcamp is a free, two-week curriculum to get you started with web development.</li>
-          <li>You can  create a free account to gain access to five full courses for free.</li>
+          <li>You can create a free account to gain access to five full courses for free.</li>
         </ul>
       </dd>
     </div>
 
     <div class="wa-stack wa-gap-xs">
       <dt class="wa-heading-m">Do you have discounts for students?</dt>
-      <dd>We are part of the <a href="#">GitHub Student Developer Pack</a>, allowing students six months of free access to the entire platform.</dd>
+      <dd>
+        We are part of the <a href="#">GitHub Student Developer Pack</a>, allowing students six months of free access to
+        the entire platform.
+      </dd>
     </div>
 
     <div class="wa-stack wa-gap-xs">
       <dt class="wa-heading-m">How do I cancel my plan?</dt>
-      <dd>You can cancel your Frontend Masters subscription by visiting the <a href="#">Subscription tab</a> in your My Account area.</dd>
+      <dd>
+        You can cancel your Frontend Masters subscription by visiting the <a href="#">Subscription tab</a> in your My
+        Account area.
+      </dd>
     </div>
   </dl>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/grid-list.md b/docs/docs/patterns/app/grid-list.md
index 0de1fa46b..4da9d5334 100644
--- a/docs/docs/patterns/app/grid-list.md
+++ b/docs/docs/patterns/app/grid-list.md
@@ -138,10 +138,12 @@ isPro: true
   <wa-card>
     <div class="wa-stack wa-align-items-center wa-gap-xs">
       <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-         </div>
-        <h2 class="wa-heading-m">Scott Summers</h2>
-        <p class="wa-caption-l">DevOps</p>
+        <img
+          src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        />
+      </div>
+      <h2 class="wa-heading-m">Scott Summers</h2>
+      <p class="wa-caption-l">DevOps</p>
     </div>
     <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
       <wa-button appearance="outlined">
@@ -157,10 +159,12 @@ isPro: true
   <wa-card>
     <div class="wa-stack wa-align-items-center wa-gap-xs">
       <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-         </div>
-        <h2 class="wa-heading-m">Kaitlin Moore</h2>
-        <p class="wa-caption-l">Systems Engineer</p>
+        <img
+          src="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        />
+      </div>
+      <h2 class="wa-heading-m">Kaitlin Moore</h2>
+      <p class="wa-caption-l">Systems Engineer</p>
     </div>
     <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
       <wa-button appearance="outlined">
@@ -176,10 +180,12 @@ isPro: true
   <wa-card>
     <div class="wa-stack wa-align-items-center wa-gap-xs">
       <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-         </div>
-        <h2 class="wa-heading-m">Nessa Riley</h2>
-        <p class="wa-caption-l">Cloud Engineer</p>
+        <img
+          src="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        />
+      </div>
+      <h2 class="wa-heading-m">Nessa Riley</h2>
+      <p class="wa-caption-l">Cloud Engineer</p>
     </div>
     <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
       <wa-button appearance="outlined">
@@ -192,13 +198,15 @@ isPro: true
       </wa-button>
     </div>
   </wa-card>
-<wa-card>
+  <wa-card>
     <div class="wa-stack wa-align-items-center wa-gap-xs">
       <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-         </div>
-        <h2 class="wa-heading-m">Veronica Staley</h2>
-        <p class="wa-caption-l">Machine Learning Engineer</p>
+        <img
+          src="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        />
+      </div>
+      <h2 class="wa-heading-m">Veronica Staley</h2>
+      <p class="wa-caption-l">Machine Learning Engineer</p>
     </div>
     <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
       <wa-button appearance="outlined">
@@ -213,12 +221,16 @@ isPro: true
   </wa-card>
 </div>
 ```
+
 ## with Images
+
 ```html {.example}
 <div class="wa-grid">
   <article class="wa-stack">
     <div class="wa-frame wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      <img
+        src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      />
     </div>
     <div class="wa-stack wa-gap-3xs">
       <span>Jeff Hanks</span>
@@ -231,7 +243,9 @@ isPro: true
   </article>
   <article class="wa-stack">
     <div class="wa-frame wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1674044494331-8db2ecf18d46?q=80&w=3019&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      <img
+        src="https://images.unsplash.com/photo-1674044494331-8db2ecf18d46?q=80&w=3019&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      />
     </div>
     <div class="wa-stack wa-gap-3xs">
       <span>Allen Bryant</span>
@@ -244,7 +258,9 @@ isPro: true
   </article>
   <article class="wa-stack">
     <div class="wa-frame wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      <img
+        src="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      />
     </div>
     <div class="wa-stack wa-gap-3xs">
       <span>Mariah Greene</span>
@@ -257,7 +273,9 @@ isPro: true
   </article>
   <article class="wa-stack">
     <div class="wa-frame wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      <img
+        src="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      />
     </div>
     <div class="wa-stack wa-gap-3xs">
       <span>Beverly Winslow</span>
@@ -270,7 +288,9 @@ isPro: true
   </article>
   <article class="wa-stack">
     <div class="wa-frame wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      <img
+        src="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      />
     </div>
     <div class="wa-stack wa-gap-3xs">
       <span>Eric Masterson</span>
@@ -283,7 +303,9 @@ isPro: true
   </article>
   <article class="wa-stack">
     <div class="wa-frame wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      <img
+        src="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      />
     </div>
     <div class="wa-stack wa-gap-3xs">
       <span>Stephen Coffee</span>
@@ -296,14 +318,18 @@ isPro: true
   </article>
 </div>
 ```
+
 ## Linked Cards with Options Menu
 
-```html{.example}
+```html {.example}
 <div class="wa-grid" style="--min-column-size: 25ch">
   <wa-card>
     <div class="wa-flank:end">
       <a href="" class="wa-flank wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-yellow-80); --text-color: var(--wa-color-yellow-40)">
+        <wa-avatar
+          shape="rounded"
+          style="--background-color: var(--wa-color-yellow-80); --text-color: var(--wa-color-yellow-40)"
+        >
           <wa-icon slot="icon" name="pancakes"></wa-icon>
         </wa-avatar>
         <div class="wa-gap-2xs wa-stack">
@@ -312,7 +338,12 @@ isPro: true
         </div>
       </a>
       <wa-dropdown>
-        <wa-icon-button id="more-actions-1" slot="trigger" name="ellipsis-vertical" label="More actions"></wa-icon-button>
+        <wa-icon-button
+          id="more-actions-1"
+          slot="trigger"
+          name="ellipsis-vertical"
+          label="More actions"
+        ></wa-icon-button>
         <wa-menu>
           <wa-menu-item>Copy link</wa-menu-item>
           <wa-menu-item>Rename</wa-menu-item>
@@ -325,7 +356,10 @@ isPro: true
   <wa-card>
     <div class="wa-flank:end">
       <a href="" class="wa-flank wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-orange-80); --text-color: var(--wa-color-orange-40)">
+        <wa-avatar
+          shape="rounded"
+          style="--background-color: var(--wa-color-orange-80); --text-color: var(--wa-color-orange-40)"
+        >
           <wa-icon slot="icon" name="burger-cheese"></wa-icon>
         </wa-avatar>
         <div class="wa-gap-2xs wa-stack">
@@ -334,7 +368,12 @@ isPro: true
         </div>
       </a>
       <wa-dropdown>
-        <wa-icon-button id="more-actions-2" slot="trigger" name="ellipsis-vertical" label="More actions"></wa-icon-button>
+        <wa-icon-button
+          id="more-actions-2"
+          slot="trigger"
+          name="ellipsis-vertical"
+          label="More actions"
+        ></wa-icon-button>
         <wa-menu>
           <wa-menu-item>Copy link</wa-menu-item>
           <wa-menu-item>Rename</wa-menu-item>
@@ -347,7 +386,10 @@ isPro: true
   <wa-card>
     <div class="wa-flank:end">
       <a href="" class="wa-flank wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-indigo-80); --text-color: var(--wa-color-indigo-40)">
+        <wa-avatar
+          shape="rounded"
+          style="--background-color: var(--wa-color-indigo-80); --text-color: var(--wa-color-indigo-40)"
+        >
           <wa-icon slot="icon" name="martini-glass-citrus"></wa-icon>
         </wa-avatar>
         <div class="wa-gap-2xs wa-stack">
@@ -356,7 +398,12 @@ isPro: true
         </div>
       </a>
       <wa-dropdown>
-        <wa-icon-button id="more-actions-3" slot="trigger" name="ellipsis-vertical" label="More actions"></wa-icon-button>
+        <wa-icon-button
+          id="more-actions-3"
+          slot="trigger"
+          name="ellipsis-vertical"
+          label="More actions"
+        ></wa-icon-button>
         <wa-menu>
           <wa-menu-item>Copy link</wa-menu-item>
           <wa-menu-item>Rename</wa-menu-item>
@@ -369,7 +416,10 @@ isPro: true
   <wa-card>
     <div class="wa-flank:end">
       <a href="" class="wa-flank wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-pink-80); --text-color: var(--wa-color-pink-40)">
+        <wa-avatar
+          shape="rounded"
+          style="--background-color: var(--wa-color-pink-80); --text-color: var(--wa-color-pink-40)"
+        >
           <wa-icon slot="icon" name="cake-slice"></wa-icon>
         </wa-avatar>
         <div class="wa-gap-2xs wa-stack">
@@ -378,7 +428,12 @@ isPro: true
         </div>
       </a>
       <wa-dropdown>
-        <wa-icon-button id="more-actions-4" slot="trigger" name="ellipsis-vertical" label="More actions"></wa-icon-button>
+        <wa-icon-button
+          id="more-actions-4"
+          slot="trigger"
+          name="ellipsis-vertical"
+          label="More actions"
+        ></wa-icon-button>
         <wa-menu>
           <wa-menu-item>Copy link</wa-menu-item>
           <wa-menu-item>Rename</wa-menu-item>
@@ -390,136 +445,146 @@ isPro: true
   </wa-card>
 </div>
 ```
+
 ## Kanban
+
 ```html {.example}
 <div>
   <h2>Project #487</h2>
   <div class="wa-grid wa-gap-2xl">
     <div class="wa-stack">
-      <div class="wa-cluster wa-gap-s"><span>Draft</span>  <wa-badge appearance="filled outlined" variant="neutral">1</wa-badge></div>
+      <div class="wa-cluster wa-gap-s">
+        <span>Draft</span> <wa-badge appearance="filled outlined" variant="neutral">1</wa-badge>
+      </div>
 
-
-
-          <wa-card>
-            <div class="wa-flank:end">
-              <div class="wa-stack wa-gap-2xs">
-                <div class="wa-cluster wa-gap-2xs">
-                  <span class="wa-heading-s">Unit Testing</span>
-                  <wa-dropdown>
-                    <wa-icon-button id="task-action-4" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
-                    <wa-menu>
-                      <wa-menu-item>Copy link</wa-menu-item>
-                      <wa-menu-item>Rename</wa-menu-item>
-                      <wa-menu-item>Move to trash</wa-menu-item>
-                    </wa-menu>
-                  </wa-dropdown>
-                  <wa-tooltip for="task-action-4">More actions</wa-tooltip>
-                </div>
-                <div class="wa-cluster wa-gap-2xs">
-                <wa-badge appearance="outlined" pill>DevOps</wa-badge>  <wa-badge variant="neutral" appearance="outlined" pill>Priority: Low</wa-badge>
-                </div>
-              </div>
-              <wa-avatar image="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-  label="profile image"></wa-avatar>
+      <wa-card>
+        <div class="wa-flank:end">
+          <div class="wa-stack wa-gap-2xs">
+            <div class="wa-cluster wa-gap-2xs">
+              <span class="wa-heading-s">Unit Testing</span>
+              <wa-dropdown>
+                <wa-icon-button id="task-action-4" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
+                <wa-menu>
+                  <wa-menu-item>Copy link</wa-menu-item>
+                  <wa-menu-item>Rename</wa-menu-item>
+                  <wa-menu-item>Move to trash</wa-menu-item>
+                </wa-menu>
+              </wa-dropdown>
+              <wa-tooltip for="task-action-4">More actions</wa-tooltip>
             </div>
-          </wa-card>
+            <div class="wa-cluster wa-gap-2xs">
+              <wa-badge appearance="outlined" pill>DevOps</wa-badge>
+              <wa-badge variant="neutral" appearance="outlined" pill>Priority: Low</wa-badge>
+            </div>
+          </div>
+          <wa-avatar
+            image="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            label="profile image"
+          ></wa-avatar>
+        </div>
+      </wa-card>
       <wa-button appearance="plain">
         <wa-icon name="plus"></wa-icon>
         Add Task
-        </wa-button>
-
+      </wa-button>
     </div>
 
     <div class="wa-stack">
-      <div class="wa-cluster wa-gap-s"><span>In Progress</span>  <wa-badge appearance="filled outlined" variant="neutral">2</wa-badge></div>
+      <div class="wa-cluster wa-gap-s">
+        <span>In Progress</span> <wa-badge appearance="filled outlined" variant="neutral">2</wa-badge>
+      </div>
 
-          <wa-card>
-            <div class="wa-flank:end">
-              <div class="wa-stack wa-gap-2xs">
-                <div class="wa-cluster wa-gap-2xs">
-                  <span class="wa-heading-s">UX Audit</span>
-                  <wa-dropdown>
-                    <wa-icon-button id="task-action-2" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
-                    <wa-menu>
-                      <wa-menu-item>Copy link</wa-menu-item>
-                      <wa-menu-item>Rename</wa-menu-item>
-                      <wa-menu-item>Move to trash</wa-menu-item>
-                    </wa-menu>
-                  </wa-dropdown>
-                  <wa-tooltip for="task-action-2">More actions</wa-tooltip>
-                </div>
-                <div class="wa-cluster wa-gap-2xs">
-                <wa-badge appearance="outlined" pill>Design</wa-badge>  <wa-badge variant="warning" appearance="outlined" pill>Priority: Medium</wa-badge>
-                </div>
-              </div>
-              <wa-avatar image="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-  label="profile image"></wa-avatar>
+      <wa-card>
+        <div class="wa-flank:end">
+          <div class="wa-stack wa-gap-2xs">
+            <div class="wa-cluster wa-gap-2xs">
+              <span class="wa-heading-s">UX Audit</span>
+              <wa-dropdown>
+                <wa-icon-button id="task-action-2" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
+                <wa-menu>
+                  <wa-menu-item>Copy link</wa-menu-item>
+                  <wa-menu-item>Rename</wa-menu-item>
+                  <wa-menu-item>Move to trash</wa-menu-item>
+                </wa-menu>
+              </wa-dropdown>
+              <wa-tooltip for="task-action-2">More actions</wa-tooltip>
             </div>
-          </wa-card>
-          <wa-card>
-            <div class="wa-flank:end">
-              <div class="wa-stack wa-gap-2xs">
-                <div class="wa-cluster wa-gap-2xs">
-                  <span class="wa-heading-s">Visual Testing</span>
-                  <wa-dropdown>
-                    <wa-icon-button id="task-action-3" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
-                    <wa-menu>
-                      <wa-menu-item>Copy link</wa-menu-item>
-                      <wa-menu-item>Rename</wa-menu-item>
-                      <wa-menu-item>Move to trash</wa-menu-item>
-                    </wa-menu>
-                  </wa-dropdown>
-                  <wa-tooltip for="task-action-3">More actions</wa-tooltip>
-                </div>
-                <div class="wa-cluster wa-gap-2xs">
-                <wa-badge appearance="outlined" pill>Design</wa-badge>  <wa-badge variant="danger" appearance="outlined" pill>Priority: High</wa-badge>
-                </div>
-              </div>
-              <wa-avatar image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
+            <div class="wa-cluster wa-gap-2xs">
+              <wa-badge appearance="outlined" pill>Design</wa-badge>
+              <wa-badge variant="warning" appearance="outlined" pill>Priority: Medium</wa-badge>
             </div>
-          </wa-card>
+          </div>
+          <wa-avatar
+            image="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            label="profile image"
+          ></wa-avatar>
+        </div>
+      </wa-card>
+      <wa-card>
+        <div class="wa-flank:end">
+          <div class="wa-stack wa-gap-2xs">
+            <div class="wa-cluster wa-gap-2xs">
+              <span class="wa-heading-s">Visual Testing</span>
+              <wa-dropdown>
+                <wa-icon-button id="task-action-3" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
+                <wa-menu>
+                  <wa-menu-item>Copy link</wa-menu-item>
+                  <wa-menu-item>Rename</wa-menu-item>
+                  <wa-menu-item>Move to trash</wa-menu-item>
+                </wa-menu>
+              </wa-dropdown>
+              <wa-tooltip for="task-action-3">More actions</wa-tooltip>
+            </div>
+            <div class="wa-cluster wa-gap-2xs">
+              <wa-badge appearance="outlined" pill>Design</wa-badge>
+              <wa-badge variant="danger" appearance="outlined" pill>Priority: High</wa-badge>
+            </div>
+          </div>
+          <wa-avatar
+            image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            label="profile image"
+          ></wa-avatar>
+        </div>
+      </wa-card>
       <wa-button appearance="plain">
         <wa-icon name="plus"></wa-icon>
         Add Task
-        </wa-button>
-
+      </wa-button>
     </div>
 
     <div class="wa-stack">
-      <div class="wa-cluster wa-gap-s"><span>Ready for Review</span>  <wa-badge appearance="filled outlined" variant="neutral">1</wa-badge></div>
-          <wa-card>
-            <div class="wa-flank:end">
-              <div class="wa-stack wa-gap-2xs">
-                <div class="wa-cluster wa-gap-2xs">
-                  <span class="wa-heading-s">Deploy Bug Fixes</span>
-                  <wa-dropdown>
-                    <wa-icon-button id="task-action-1" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
-                    <wa-menu>
-                      <wa-menu-item>Copy link</wa-menu-item>
-                      <wa-menu-item>Rename</wa-menu-item>
-                      <wa-menu-item>Move to trash</wa-menu-item>
-                    </wa-menu>
-                  </wa-dropdown>
-                  <wa-tooltip for="task-action-1">More actions</wa-tooltip>
-                </div>
-                <div class="wa-cluster wa-gap-2xs">
-                  <wa-badge appearance="outlined" pill>Development</wa-badge>  <wa-badge variant="warning" appearance="outlined" pill>Priority: Medium</wa-badge>
-                </div>
-              </div>
-              <wa-avatar initials="KK" label="Avatar with initials: KK"></wa-avatar>
+      <div class="wa-cluster wa-gap-s">
+        <span>Ready for Review</span> <wa-badge appearance="filled outlined" variant="neutral">1</wa-badge>
+      </div>
+      <wa-card>
+        <div class="wa-flank:end">
+          <div class="wa-stack wa-gap-2xs">
+            <div class="wa-cluster wa-gap-2xs">
+              <span class="wa-heading-s">Deploy Bug Fixes</span>
+              <wa-dropdown>
+                <wa-icon-button id="task-action-1" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
+                <wa-menu>
+                  <wa-menu-item>Copy link</wa-menu-item>
+                  <wa-menu-item>Rename</wa-menu-item>
+                  <wa-menu-item>Move to trash</wa-menu-item>
+                </wa-menu>
+              </wa-dropdown>
+              <wa-tooltip for="task-action-1">More actions</wa-tooltip>
             </div>
-          </wa-card>
-
+            <div class="wa-cluster wa-gap-2xs">
+              <wa-badge appearance="outlined" pill>Development</wa-badge>
+              <wa-badge variant="warning" appearance="outlined" pill>Priority: Medium</wa-badge>
+            </div>
+          </div>
+          <wa-avatar initials="KK" label="Avatar with initials: KK"></wa-avatar>
+        </div>
+      </wa-card>
 
       <wa-button appearance="plain">
         <wa-icon name="plus"></wa-icon>
         Add Task
-        </wa-button>
-
+      </wa-button>
     </div>
-
-
-
   </div>
 </div>
 ```
diff --git a/docs/docs/patterns/app/leaderboard.md b/docs/docs/patterns/app/leaderboard.md
index 51e9dd8eb..6f97e7c44 100644
--- a/docs/docs/patterns/app/leaderboard.md
+++ b/docs/docs/patterns/app/leaderboard.md
@@ -140,7 +140,10 @@ isPro: true
           <li class="wa-flank">
             <div class="wa-cluster">
               <wa-icon name="1" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1620428268482-cf1851a36764?q=80&w=3418&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+              <wa-avatar
+                image="https://images.unsplash.com/photo-1620428268482-cf1851a36764?q=80&w=3418&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                shape="rounded"
+              ></wa-avatar>
             </div>
             <div class="wa-split wa-gap-xs">
               <span>mitsuwo</span>
@@ -151,7 +154,10 @@ isPro: true
           <li class="wa-flank">
             <div class="wa-cluster">
               <wa-icon name="2" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+              <wa-avatar
+                image="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                shape="rounded"
+              ></wa-avatar>
             </div>
             <div class="wa-split wa-gap-xs">
               <span>knowledgeninja</span>
@@ -162,7 +168,10 @@ isPro: true
           <li class="wa-flank">
             <div class="wa-cluster">
               <wa-icon name="3" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?q=80&w=2592&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+              <wa-avatar
+                image="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?q=80&w=2592&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                shape="rounded"
+              ></wa-avatar>
             </div>
             <div class="wa-split wa-gap-xs">
               <span>NxtLvl</span>
@@ -173,7 +182,10 @@ isPro: true
           <li class="wa-flank">
             <div class="wa-cluster">
               <wa-icon name="4" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1630549316063-7ae02749d2cc?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+              <wa-avatar
+                image="https://images.unsplash.com/photo-1630549316063-7ae02749d2cc?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                shape="rounded"
+              ></wa-avatar>
             </div>
             <div class="wa-split wa-gap-xs">
               <span>brainiac</span>
@@ -184,7 +196,10 @@ isPro: true
           <li class="wa-flank">
             <div class="wa-cluster">
               <wa-icon name="5" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1582845512747-e42001c95638?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+              <wa-avatar
+                image="https://images.unsplash.com/photo-1582845512747-e42001c95638?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                shape="rounded"
+              ></wa-avatar>
             </div>
             <div class="wa-split wa-gap-xs">
               <span>eduexplorer</span>
@@ -207,7 +222,10 @@ isPro: true
           <li class="wa-flank">
             <div class="wa-cluster">
               <wa-icon name="1" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1630549316063-7ae02749d2cc?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+              <wa-avatar
+                image="https://images.unsplash.com/photo-1630549316063-7ae02749d2cc?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                shape="rounded"
+              ></wa-avatar>
             </div>
             <div class="wa-split wa-gap-xs">
               <span>brainiac</span>
@@ -218,7 +236,10 @@ isPro: true
           <li class="wa-flank">
             <div class="wa-cluster">
               <wa-icon name="2" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1546776230-bb86256870ce?q=80&w=3368&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+              <wa-avatar
+                image="https://images.unsplash.com/photo-1546776230-bb86256870ce?q=80&w=3368&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                shape="rounded"
+              ></wa-avatar>
             </div>
             <div class="wa-split wa-gap-xs">
               <span>LessonLegend</span>
@@ -229,7 +250,10 @@ isPro: true
           <li class="wa-flank">
             <div class="wa-cluster">
               <wa-icon name="3" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1620428268482-cf1851a36764?q=80&w=3418&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+              <wa-avatar
+                image="https://images.unsplash.com/photo-1620428268482-cf1851a36764?q=80&w=3418&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                shape="rounded"
+              ></wa-avatar>
             </div>
             <div class="wa-split wa-gap-xs">
               <span>mitsuwo</span>
@@ -240,7 +264,10 @@ isPro: true
           <li class="wa-flank">
             <div class="wa-cluster">
               <wa-icon name="4" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1586374579358-9d19d632b6df?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+              <wa-avatar
+                image="https://images.unsplash.com/photo-1586374579358-9d19d632b6df?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                shape="rounded"
+              ></wa-avatar>
             </div>
             <div class="wa-split wa-gap-xs">
               <span>wiswiz</span>
@@ -251,7 +278,10 @@ isPro: true
           <li class="wa-flank">
             <div class="wa-cluster">
               <wa-icon name="5" fixed-width></wa-icon>
-              <wa-avatar image="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+              <wa-avatar
+                image="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                shape="rounded"
+              ></wa-avatar>
             </div>
             <div class="wa-split wa-gap-xs">
               <span>knowledgeninja</span>
@@ -263,4 +293,4 @@ isPro: true
     </wa-card>
   </div>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/pagination.md b/docs/docs/patterns/app/pagination.md
index 43a834afe..0097b6cdc 100644
--- a/docs/docs/patterns/app/pagination.md
+++ b/docs/docs/patterns/app/pagination.md
@@ -49,4 +49,4 @@ isPro: true
     </wa-button-group>
   </div>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/permissions.md b/docs/docs/patterns/app/permissions.md
index da64f1fd9..1a4f62f5e 100644
--- a/docs/docs/patterns/app/permissions.md
+++ b/docs/docs/patterns/app/permissions.md
@@ -5,7 +5,8 @@ isPro: true
 ---
 
 ## With Form Inputs
-```html{.example}
+
+```html {.example}
 <wa-card style="max-width: 72ch; margin: 0 auto;">
   <div slot="header" class="wa-split">
     <h2 class="wa-heading-m">Invite Team Members</h2>
@@ -21,7 +22,10 @@ isPro: true
       <span class="wa-heading-s">Project Members</span>
       <div class="wa-stack wa-gap-xl">
         <div class="wa-flank">
-          <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=1961&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <wa-avatar
+            label="User avatar"
+            image="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=1961&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          ></wa-avatar>
           <div class="wa-split">
             <div class="wa-stack wa-gap-0">
               <span class="wa-heading-xs">Jessica Jones</span>
@@ -36,7 +40,10 @@ isPro: true
           </div>
         </div>
         <div class="wa-flank">
-          <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1566492031773-4f4e44671857?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <wa-avatar
+            label="User avatar"
+            image="https://images.unsplash.com/photo-1566492031773-4f4e44671857?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          ></wa-avatar>
           <div class="wa-split">
             <div class="wa-stack wa-gap-0">
               <span class="wa-heading-xs">Foggy Nelson</span>
@@ -51,7 +58,10 @@ isPro: true
           </div>
         </div>
         <div class="wa-flank">
-          <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <wa-avatar
+            label="User avatar"
+            image="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          ></wa-avatar>
           <div class="wa-split">
             <div class="wa-stack wa-gap-0">
               <span class="wa-heading-xs">Karen Page</span>
@@ -66,7 +76,10 @@ isPro: true
           </div>
         </div>
         <div class="wa-flank">
-          <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <wa-avatar
+            label="User avatar"
+            image="https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          ></wa-avatar>
           <div class="wa-split">
             <div class="wa-stack wa-gap-0">
               <span class="wa-heading-xs">Matt Murdock</span>
@@ -95,135 +108,141 @@ isPro: true
 ```
 
 ## Link Settings
+
 ```html {.example}
 <wa-card style="max-width: 45ch; margin: 0 auto;">
   <div class="wa-stack">
-     <h2 class="wa-heading-m">Manage Link</h2>
+    <h2 class="wa-heading-m">Manage Link</h2>
     <wa-input label="Expiration Date" type="date"></wa-input>
-    <wa-radio-group
-      label="Share Limit"
-      orientation="horizontal"
-      name="share-limit"
-      value="0"
-    >
+    <wa-radio-group label="Share Limit" orientation="horizontal" name="share-limit" value="0">
       <wa-radio-button value="0">None</wa-radio-button>
       <wa-radio-button value="5">5</wa-radio-button>
       <wa-radio-button value="10">10</wa-radio-button>
       <wa-radio-button value="50">50</wa-radio-button>
       <wa-radio-button value="100">100</wa-radio-button>
     </wa-radio-group>
-     <wa-divider></wa-divider>
+    <wa-divider></wa-divider>
     <wa-switch hint="Members are removed after logging out." checked>Temporary Access</wa-switch>
     <div class="wa-cluster wa-gap-xs" style="justify-content: flex-end">
-    <wa-button size="small" appearance="outlined" pill>Cancel</wa-button>
-    <wa-button size="small" variant="brand" pill>Generate</wa-button>
+      <wa-button size="small" appearance="outlined" pill>Cancel</wa-button>
+      <wa-button size="small" variant="brand" pill>Generate</wa-button>
+    </div>
   </div>
-  </div>
-
 </wa-card>
 ```
 
 ## Role Settings
+
 ```html {.example}
 <div style="max-width: 78ch; margin: 0 auto;">
   <h2>Settings</h2>
   <p>Update settings for this server.</p>
   <wa-tab-group>
-  <wa-tab panel="general">
-    <div class="wa-cluster">
-      <wa-icon name="user"></wa-icon>
-      <span>User Permissions</span>
-    </div>
-  </wa-tab>
-  <wa-tab-panel name="general">
-    <wa-card>
-      <div class="wa-flank">
-        <wa-avatar image="https://images.unsplash.com/photo-1741289308283-feba56f857cc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGJlYXJkfGVufDB8MnwwfHx8Mg%3D%3D" alt="image avatar"></wa-avatar>
-        <div class="wa-split">
-          <div class="wa-stack wa-gap-xs">
-            <span class="wa-heading-s">Kris Kringle</span>
-            <span class="wa-caption-m">Admin</span>
-          </div>
-          <wa-button appearance="plain">
-            <wa-icon slot="prefix" name="edit"></wa-icon>
-            Edit Profile
-          </wa-button>
-        </div>
+    <wa-tab panel="general">
+      <div class="wa-cluster">
+        <wa-icon name="user"></wa-icon>
+        <span>User Permissions</span>
       </div>
-    </wa-card>
-    <table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Role</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-         <div class="wa-flank">
-            <wa-avatar image="https://images.unsplash.com/photo-1579824894326-77ec5aaf8703?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fHJlaW5kZWVyfGVufDB8MnwwfHx8Mg%3D%3D"></wa-avatar>
-            <span class="wa-caption-m">Dasher</span>
-          </div>
-      </td>
-      <td>
-        <wa-select value="moderator">
-          <wa-option value="moderator">Moderator</wa-option>
-          <wa-option value="contributor">Contributor</wa-option>
-          <wa-option value="reader">Reader</wa-option>
-        </wa-select>
-      </td>
-    </tr>
-    <tr>
-      <td>
+    </wa-tab>
+    <wa-tab-panel name="general">
+      <wa-card>
         <div class="wa-flank">
-            <wa-avatar image="https://images.unsplash.com/photo-1691065686144-916ff29d1b4f?q=80&w=2666&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
-            <span class="wa-caption-m">Dancer</span>
+          <wa-avatar
+            image="https://images.unsplash.com/photo-1741289308283-feba56f857cc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGJlYXJkfGVufDB8MnwwfHx8Mg%3D%3D"
+            alt="image avatar"
+          ></wa-avatar>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-xs">
+              <span class="wa-heading-s">Kris Kringle</span>
+              <span class="wa-caption-m">Admin</span>
+            </div>
+            <wa-button appearance="plain">
+              <wa-icon slot="prefix" name="edit"></wa-icon>
+              Edit Profile
+            </wa-button>
           </div>
-      </td>
+        </div>
+      </wa-card>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Role</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <div class="wa-flank">
+                <wa-avatar
+                  image="https://images.unsplash.com/photo-1579824894326-77ec5aaf8703?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fHJlaW5kZWVyfGVufDB8MnwwfHx8Mg%3D%3D"
+                ></wa-avatar>
+                <span class="wa-caption-m">Dasher</span>
+              </div>
+            </td>
+            <td>
+              <wa-select value="moderator">
+                <wa-option value="moderator">Moderator</wa-option>
+                <wa-option value="contributor">Contributor</wa-option>
+                <wa-option value="reader">Reader</wa-option>
+              </wa-select>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div class="wa-flank">
+                <wa-avatar
+                  image="https://images.unsplash.com/photo-1691065686144-916ff29d1b4f?q=80&w=2666&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                ></wa-avatar>
+                <span class="wa-caption-m">Dancer</span>
+              </div>
+            </td>
 
-      <td>
-        <wa-select value="moderator">
-          <wa-option value="moderator">Moderator</wa-option>
-          <wa-option value="contributor">Contributor</wa-option>
-          <wa-option value="reader">Reader</wa-option>
-        </wa-select>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <div class="wa-flank">
-            <wa-avatar image="https://images.unsplash.com/photo-1616742618872-9e8a890d90b2?q=80&w=2712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
-            <span class="wa-caption-m">Prancer</span>
-          </div>
-      </td>
-      <td>
-        <wa-select value="contributor">
-          <wa-option value="moderator">Moderator</wa-option>
-          <wa-option value="contributor">Contributor</wa-option>
-          <wa-option value="reader">Reader</wa-option>
-        </wa-select>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <div class="wa-flank">
-            <wa-avatar image="https://images.unsplash.com/photo-1728290403857-1b7909db2baa?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
-            <span class="wa-caption-m">Vixen</span>
-          </div>
-      </td>
-      <td>
-        <wa-select value="reader">
-          <wa-option value="moderator">Moderator</wa-option>
-          <wa-option value="contributor">Contributor</wa-option>
-          <wa-option value="reader">Reader</wa-option>
-        </wa-select>
-      </td>
-    </tr>
-  </tbody>
-</table>
-  </wa-tab-panel>
-
-</wa-tab-group>
+            <td>
+              <wa-select value="moderator">
+                <wa-option value="moderator">Moderator</wa-option>
+                <wa-option value="contributor">Contributor</wa-option>
+                <wa-option value="reader">Reader</wa-option>
+              </wa-select>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div class="wa-flank">
+                <wa-avatar
+                  image="https://images.unsplash.com/photo-1616742618872-9e8a890d90b2?q=80&w=2712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                ></wa-avatar>
+                <span class="wa-caption-m">Prancer</span>
+              </div>
+            </td>
+            <td>
+              <wa-select value="contributor">
+                <wa-option value="moderator">Moderator</wa-option>
+                <wa-option value="contributor">Contributor</wa-option>
+                <wa-option value="reader">Reader</wa-option>
+              </wa-select>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div class="wa-flank">
+                <wa-avatar
+                  image="https://images.unsplash.com/photo-1728290403857-1b7909db2baa?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                ></wa-avatar>
+                <span class="wa-caption-m">Vixen</span>
+              </div>
+            </td>
+            <td>
+              <wa-select value="reader">
+                <wa-option value="moderator">Moderator</wa-option>
+                <wa-option value="contributor">Contributor</wa-option>
+                <wa-option value="reader">Reader</wa-option>
+              </wa-select>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </wa-tab-panel>
+  </wa-tab-group>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/app/pricing.md b/docs/docs/patterns/app/pricing.md
index f21102550..6ed74585a 100644
--- a/docs/docs/patterns/app/pricing.md
+++ b/docs/docs/patterns/app/pricing.md
@@ -6,7 +6,7 @@ isPro: true
 
 ## Three Tiers
 
-```html{.example}
+```html {.example}
 <div class="wa-grid">
   <wa-card>
     <div class="wa-stack">
@@ -130,7 +130,9 @@ isPro: true
   <div class="wa-grid">
     <div class="wa-stack">
       <h3 class="wa-heading-l">Lifetime Membership</h3>
-      <p>Learn at your own pace with expert-led content, exclusive resources, and a community of like-minded learners.</p>
+      <p>
+        Learn at your own pace with expert-led content, exclusive resources, and a community of like-minded learners.
+      </p>
       <wa-divider></wa-divider>
       <h4 class="wa-heading-s">Membership Includes:</h4>
       <div class="wa-grid">
@@ -165,4 +167,4 @@ isPro: true
     </wa-callout>
   </div>
 </wa-card>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/blog-news/call-to-action.md b/docs/docs/patterns/blog-news/call-to-action.md
new file mode 100644
index 000000000..ca68907c5
--- /dev/null
+++ b/docs/docs/patterns/blog-news/call-to-action.md
@@ -0,0 +1,55 @@
+---
+title: Call To Action
+description: 'Solicits a user to take action.'
+parent: blog-news
+icon: call-to-action
+tags: blog-news
+---
+
+## Simple
+
+```html {.example}
+<div style="margin-block: var(--wa-space-4xl);">
+  <h2 class="wa-heading-3xl">Unlock Your Future: <br />Start Learning Web Development Today!</h2>
+  <div class="wa-cluster wa-gap-xs">
+    <wa-button>Get Started</wa-button>
+    <wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
+  </div>
+</div>
+```
+
+## Centered
+
+```html {.example}
+<div class="wa-stack wa-align-items-center wa-gap-xl" style="margin-block: var(--wa-space-4xl);">
+  <h2 class="wa-heading-3xl" style="text-align: center">
+    Unlock Your Future: <br />Start Learning Web Development Today!
+  </h2>
+  <div class="wa-cluster wa-gap-xs">
+    <wa-button>Get Started</wa-button>
+    <wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
+  </div>
+</div>
+```
+
+## 2 Column
+
+```html {.example}
+<div style="margin-block: var(--wa-space-4xl);">
+  <div class="wa-grid wa-align-items-center wa-gap-3xl">
+    <div class="wa-stack wa-gap-3xl">
+      <h2 class="wa-heading-3xl">Unlock Your Future: <br />Start Learning Web Development Today!</h2>
+      <div class="wa-cluster wa-gap-xs">
+        <wa-button>Get Started</wa-button>
+        <wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
+      </div>
+    </div>
+    <div class="wa-frame wa-border-radius-l">
+      <img
+        src="https://images.unsplash.com/photo-1586864387634-2f33030dab41?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt=""
+      />
+    </div>
+  </div>
+</div>
+```
diff --git a/docs/docs/patterns/blog-news/category-list.md b/docs/docs/patterns/blog-news/category-list.md
new file mode 100644
index 000000000..2bd5d3c6d
--- /dev/null
+++ b/docs/docs/patterns/blog-news/category-list.md
@@ -0,0 +1,143 @@
+---
+title: Category List
+description: 'Organize your site and allow readers to find the information they want.'
+parent: blog-news
+icon: category-list
+tags: blog-news
+---
+
+## Grid
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl wa-align-items-center">
+  <h2 class="wa-heading-2xl">Discover the Latest in...</h2>
+  <div>
+    <div class="wa-split">
+      <h3 class="wa-heading-l">Customer Service</h3>
+      <a class="wa-cluster wa-gap-2xs" href="#"><span>View More</span> <wa-icon name="arrow-right"></wa-icon></a>
+    </div>
+    <wa-divider></wa-divider>
+    <div class="wa-grid">
+      <a href="#">
+        <wa-card with-image style="height: 100%">
+          <img
+            slot="image"
+            src="https://images.unsplash.com/photo-1560264357-8d9202250f21?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt="Group of customer service reps working on computers in a shared office space"
+          />
+          <div class="wa-stack wa-gap-xs">
+            <span class="wa-caption-l">Articles</span>
+            <span class="wa-heading-m">Creating Memorable Customer Moments: The Secret Sauce to Loyalty</span>
+          </div>
+        </wa-card>
+      </a>
+      <a href="#">
+        <wa-card with-image style="height: 100%">
+          <img
+            slot="image"
+            src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?q=80&w=5070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt="A hand pinching a pin on string, making connections between data on a corkboard"
+          />
+          <div class="wa-stack wa-gap-xs">
+            <span class="wa-caption-l">Software & Systems</span>
+            <span class="wa-heading-m">Crafting a Seamless Customer Journey</span>
+          </div>
+        </wa-card>
+      </a>
+      <a href="#">
+        <wa-card with-image style="height: 100%">
+          <img
+            slot="image"
+            src="https://images.unsplash.com/photo-1561323587-7464f7689886?q=80&w=5070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt="A chess board with all pieces in starting position"
+          />
+          <div class="wa-stack wa-gap-xs">
+            <span class="wa-caption-l">Engagement</span>
+            <span class="wa-heading-m">Customer Delight vs. Satisfaction: What’s the Real Goal?</span>
+          </div>
+        </wa-card>
+      </a>
+    </div>
+  </div>
+  <div>
+    <div class="wa-split">
+      <h3 class="wa-heading-l">Growth & Culture</h3>
+      <a class="wa-cluster wa-gap-2xs" href="#"><span>View More</span> <wa-icon name="arrow-right"></wa-icon></a>
+    </div>
+    <wa-divider></wa-divider>
+    <div class="wa-grid">
+      <a href="#">
+        <wa-card with-image style="height: 100%">
+          <img
+            slot="image"
+            src="https://images.unsplash.com/photo-1493599124325-e628361046af?q=80&w=4470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt="Viewpoint from the middle of a forest, looking upwards towards the canopy of towering evergreen"
+          />
+          <div class="wa-stack wa-gap-xs">
+            <span class="wa-caption-l">Hiring & Culture</span>
+            <span class="wa-heading-m">Scaling with Soul: How to Grow Without Losing Your Culture</span>
+          </div>
+        </wa-card>
+      </a>
+      <a href="#">
+        <wa-card with-image style="height: 100%">
+          <img
+            slot="image"
+            src="https://images.unsplash.com/photo-1466629437334-b4f6603563c5?q=80&w=4478&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt="Sunset over a vast grassy field with many prominent wind turbines"
+          />
+          <div class="wa-stack wa-gap-xs">
+            <span class="wa-caption-l">Articles</span>
+            <span class="wa-heading-m">Culture Is Your Growth Engine: Why Values Drive Performance</span>
+          </div>
+        </wa-card>
+      </a>
+      <a href="#">
+        <wa-card with-image style="height: 100%">
+          <img
+            slot="image"
+            src="https://images.unsplash.com/photo-1455849318743-b2233052fcff?q=80&w=4469&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt="Viewpoint of two people side-by-side looking down towards their shoes, PASSION LED US HERE written on the sidewalk"
+          />
+          <div class="wa-stack wa-gap-xs">
+            <span class="wa-caption-l">Behind the Scenes</span>
+            <span class="wa-heading-m">From Start-Up to Standout: Building a Culture That Attracts Top Talent</span>
+          </div>
+        </wa-card>
+      </a>
+    </div>
+  </div>
+</div>
+```
+
+## Links with Background Images
+
+```html {.example}
+<div class="wa-stack wa-align">
+  <h2 class="wa-heading-2xl">Recipes</h2>
+  <div class="wa-grid">
+    <a
+      href="#"
+      class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
+      style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1548340748-6d2b7d7da280?q=80&w=3027&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center;"
+    >
+      Appetizers and Snacks
+    </a>
+    <a
+      href="#"
+      class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
+      style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1644704265419-96ddaf628e71?q=80&w=5340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center"
+    >
+      Main Dishes
+    </a>
+    <a
+      href="#"
+      class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
+      style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1551024506-0bccd828d307?q=80&w=3200&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center;"
+    >
+      Desserts
+    </a>
+  </div>
+  <wa-button appearance="plain"><wa-icon slot="suffix" name="arrow-right"></wa-icon>View More Recipes</wa-button>
+</div>
+```
diff --git a/docs/docs/patterns/blog-news/featured-post.md b/docs/docs/patterns/blog-news/featured-post.md
new file mode 100644
index 000000000..44f33a378
--- /dev/null
+++ b/docs/docs/patterns/blog-news/featured-post.md
@@ -0,0 +1,167 @@
+---
+title: Featured Post
+description: 'Highlight important, timely, or high-impact content.'
+parent: blog-news
+tags:
+---
+
+## Single Column
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl" style="max-width: 90ch; margin: 0 auto;">
+  <article class="wa-stack">
+    <div class="wa-grid wa-gap-2xl">
+      <div class="wa-frame wa-border-radius-l">
+        <img
+          src="https://images.unsplash.com/photo-1673255745677-e36f618550d1?q=80&w=5000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="Futuristic humanoid robot holding a metallic brain in its right hand"
+        />
+      </div>
+      <div class="wa-stack">
+        <span><a href="#">Catherine Rigby</a> wrote</span>
+        <h2 class="wa-heading-3xl">How Artificial Intelligence Is Quietly Transforming Your Daily Life</h2>
+        <span>
+          <wa-format-date month="long" day="numeric" year="numeric"></wa-format-date> in
+          <a href="#">Artificial Intelligence</a>, <a href="#">Large Language Model</a>,
+          <a href="#">Machine Learning</a>
+        </span>
+      </div>
+    </div>
+    <p>From your morning playlist to your grocery list, AI is everywhere—and you might not even notice it.</p>
+    <wa-button href="#" appearance="filled" variant="brand">
+      Continue reading
+      <wa-icon name="arrow-right" slot="suffix"></wa-icon>
+    </wa-button>
+  </article>
+  <wa-divider></wa-divider>
+  <article class="wa-stack">
+    <span>
+      <a href="#">Freddie Smith</a><wa-format-date month="long" day="numeric" year="numeric"></wa-format-date> in
+      <a href="#">Artificial Intelligence</a>, <a href="#">Large Language Model</a>,
+      <a href="#">Machine Learning</a>
+    </span>
+    <div class="wa-flank">
+      <wa-avatar
+        image="https://images.unsplash.com/photo-1654110455429-cf322b40a906?q=80&w=3178&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        label="Avatar of author"
+      ></wa-avatar>
+      <h2 class="wa-heading-l">What Generative AI Means for Creativity, Work, and the Future of Content</h2>
+    </div>
+  </article>
+  <wa-divider></wa-divider>
+  <article class="wa-stack">
+    <span>
+      <a href="#">Michelle Starling</a><wa-format-date month="long" day="numeric" year="numeric"></wa-format-date> in
+      <a href="#">Artificial Intelligence</a>, <a href="#">Large Language Model</a>,
+      <a href="#">Machine Learning</a>
+    </span>
+    <div class="wa-flank">
+      <wa-avatar
+        image="https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?q=80&w=4000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        label="Avatar of author"
+      ></wa-avatar>
+      <h2 class="wa-heading-l">The Ethics of Intelligence: Who’s Accountable When AI Gets It Wrong</h2>
+    </div>
+  </article>
+</div>
+```
+
+## Two Column
+
+```html {.example}
+<div style="max-width: 84ch; margin: 0 auto;">
+  <div class="wa-gap-3xl wa-grid">
+    <div class="wa-stack">
+      <div class="wa-frame wa-border-radius-l">
+        <img
+          src="https://images.unsplash.com/photo-1741208296373-27b4438d0654?q=80&w=2794&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        />
+      </div>
+      <div>
+        <h2 class="wa-heading-l">Masters and Movements: A Journey Through Art History’s Most Defining Eras</h2>
+        <p class="wa-caption-l">
+          Discover the pivotal artists, styles, and moments that shaped the world of fine art—from the Renaissance to
+          the rise of modernism.
+        </p>
+        <span class="wa-cluster">
+          <a href="#">Stephanie Howard</a>
+          <wa-format-date month="long" day="numeric" date="2020-07-15T09:17:00-04:00"></wa-format-date> |
+          <wa-icon name="comment"></wa-icon> 3
+        </span>
+      </div>
+    </div>
+    <div class="wa-stack">
+      <span>Top Stories</span>
+      <ol class="wa-stack">
+        <li class="wa-stack">
+          <div class="wa-flank:end" style="--flank-size: 8ch">
+            <h3 class="wa-heading-m">How Fine Art Captures Emotion Beyond Words</h3>
+            <div class="wa-frame wa-border-radius-m">
+              <img
+                src="https://images.unsplash.com/photo-1717501219402-4444fcef55e7?q=80&w=4096&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="article thumbnail"
+              />
+            </div>
+          </div>
+          <span class="wa-cluster">
+            <a href="#">Emma Wilson</a>
+            <wa-format-date month="long" day="numeric" date="2020-05-15T09:17:00-04:00"></wa-format-date> |
+            <wa-icon name="comment"></wa-icon> 20
+          </span>
+        </li>
+        <wa-divider></wa-divider>
+        <li class="wa-stack wa-gap-2xs">
+          <div class="wa-flank:end" style="--flank-size: 8ch">
+            <h3 class="wa-heading-m">From Brush to Pixel: The Evolving Identity of Fine Art in the Digital Age</h3>
+            <div class="wa-frame wa-border-radius-m">
+              <img
+                src="https://images.unsplash.com/photo-1697560415980-8cc04e055cdb?q=80&w=3600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="article thumbnail"
+              />
+            </div>
+          </div>
+          <span class="wa-cluster">
+            <a href="#">Eddie Kane</a>
+            <wa-format-date month="long" day="numeric" date="2020-04-15T09:17:00-04:00"></wa-format-date> |
+            <wa-icon name="comment"></wa-icon> 12
+          </span>
+        </li>
+        <wa-divider></wa-divider>
+        <li class="wa-stack wa-gap-2xs">
+          <div class="wa-flank:end" style="--flank-size: 8ch">
+            <h3 class="wa-heading-m">What Makes It ‘Fine’? Unpacking the Line Between Art and Craft</h3>
+            <div class="wa-frame wa-border-radius-m">
+              <img
+                src="https://images.unsplash.com/photo-1738533614668-0a1a2501a138?q=80&w=3464&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="article thumbnail"
+              />
+            </div>
+          </div>
+          <span class="wa-cluster">
+            <a href="#">Gill Scott</a>
+            <wa-format-date month="long" day="numeric" date="2020-03-20T09:17:00-04:00"></wa-format-date> |
+            <wa-icon name="comment"></wa-icon> 8
+          </span>
+        </li>
+        <wa-divider></wa-divider>
+        <li class="wa-stack wa-gap-2xs">
+          <div class="wa-flank:end" style="--flank-size: 8ch">
+            <h3 class="wa-heading-m">Studio Stories: Inside the Creative Rituals of Contemporary Fine Artists</h3>
+            <div class="wa-frame wa-border-radius-m">
+              <img
+                src="https://images.unsplash.com/photo-1600999116700-5a50973983e8?q=80&w=2292&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="article thumbnail"
+              />
+            </div>
+          </div>
+          <span class="wa-cluster">
+            <a href="#">Festus Armond</a>
+            <wa-format-date month="long" day="numeric" date="2020-02-20T09:17:00-04:00"></wa-format-date> |
+            <wa-icon name="comment"></wa-icon> 16
+          </span>
+        </li>
+      </ol>
+    </div>
+  </div>
+</div>
+```
diff --git a/docs/docs/patterns/blog-news/footer.md b/docs/docs/patterns/blog-news/footer.md
new file mode 100644
index 000000000..2f9b565ff
--- /dev/null
+++ b/docs/docs/patterns/blog-news/footer.md
@@ -0,0 +1,162 @@
+---
+title: Footer
+description: 'Provide useful information at the bottom of a webpage.'
+parent: blog-news
+tags: blog-news
+---
+
+## Simple
+
+```html {.example}
+<div class="wa-stack wa-gap-xl">
+  <div class="wa-split">
+    <div class="wa-cluster wa-gap-xs wa-heading-xl">
+      <wa-icon name="gears"></wa-icon>
+      <span>Widget UI</span>
+    </div>
+    <form class="wa-flank:end wa-gap-xs wa-align-items-end">
+      <wa-input placeholder="Enter your email" label="Stay in the Know" type="email"></wa-input>
+      <wa-button>Subscribe</wa-button>
+    </form>
+  </div>
+  <wa-divider></wa-divider>
+  <p style="text-align: right">© 2025 All rights reserved.</p>
+</div>
+```
+
+## Centered
+
+```html {.example}
+<div class="wa-stack wa-align-items-center">
+  <div class="wa-cluster wa-gap-xl">
+    <a href="#">Home</a>
+    <a href="#">Get Started</a>
+    <a href="#">Services</a>
+    <a href="#">Portfolio</a>
+  </div>
+  <div class="wa-cluster wa-gap-s">
+    <a href="#"
+      ><wa-icon-button
+        style="font-size: var(--wa-font-size-l);"
+        name="facebook"
+        family="brands"
+        label="Follow on Facebook"
+        href="#"
+        target="_blank"
+      ></wa-icon-button
+    ></a>
+    <a href="#"
+      ><wa-icon-button
+        style="font-size: var(--wa-font-size-l);"
+        name="bluesky"
+        family="brands"
+        label="Follow on Bluesky"
+        href="#"
+        target="_blank"
+      ></wa-icon-button
+    ></a>
+    <a href="#"
+      ><wa-icon-button
+        style="font-size: var(--wa-font-size-l);"
+        name="linkedin"
+        family="brands"
+        label="Follow on LinkedIn"
+        href="#"
+        target="_blank"
+      ></wa-icon-button
+    ></a>
+    <a href="#"
+      ><wa-icon-button
+        style="font-size: var(--wa-font-size-l);"
+        name="envelope-open"
+        label="Email us"
+        href="#"
+        target="_blank"
+      ></wa-icon-button
+    ></a>
+  </div>
+  <p>© 2025 All Rights reserved.</p>
+</div>
+```
+
+## Corporate
+
+```html {.example}
+<div>
+  <div class="wa-flank wa-align-items-baseline wa-gap-3xl" style="--flank-size: 36ch;">
+    <p>
+      We are committed to providing you with the best products and services. If you have any questions or need
+      assistance, feel free to reach out to our team. Stay connected with us through our social media channels for
+      updates, news, and more. Your satisfaction is our top priority, and we look forward to serving you again soon!
+    </p>
+    <div class="wa-grid">
+      <section class="wa-stack wa-gap-xs">
+        <h2 class="wa-heading-s">Links</h2>
+        <a href="#">Home</a>
+        <a href="#">Get Started</a>
+        <a href="#">Services</a>
+        <a href="#">Portfolio</a>
+      </section>
+      <section class="wa-stack wa-gap-xs">
+        <h2 class="wa-heading-s">Others</h2>
+        <a href="#">Corporate</a>
+        <a href="#">Terms of Service</a>
+        <a href="#">Privacy Policy</a>
+      </section>
+      <section class="wa-stack">
+        <h2 class="wa-heading-s">Social</h2>
+        <div class="wa-cluster">
+          <a href="#">
+            <wa-icon-button
+              style="font-size: var(--wa-font-size-l);"
+              name="facebook"
+              family="brands"
+              label="Follow on Facebook"
+              href="#"
+              target="_blank"
+            ></wa-icon-button>
+          </a>
+          <a href="#">
+            <wa-icon-button
+              style="font-size: var(--wa-font-size-l);"
+              name="bluesky"
+              family="brands"
+              label="Follow on Bluesky"
+              href="#"
+              target="_blank"
+            ></wa-icon-button>
+          </a>
+          <a href="#">
+            <wa-icon-button
+              style="font-size: var(--wa-font-size-l);"
+              name="linkedin"
+              family="brands"
+              label="Follow on LinkedIn"
+              href="#"
+              target="_blank"
+            ></wa-icon-button>
+          </a>
+          <a href="#">
+            <wa-icon-button
+              style="font-size: var(--wa-font-size-l);"
+              name="envelope-open"
+              label="Email us"
+              href="#"
+              target="_blank"
+            ></wa-icon-button>
+          </a>
+        </div>
+      </section>
+    </div>
+  </div>
+  <wa-divider></wa-divider>
+  <div class="wa-split">
+    <p>© 2025 All rights reserved.</p>
+    <wa-select label="Language" value="english">
+      <wa-option value="english">English</wa-option>
+      <wa-option value="spanish">Spanish</wa-option>
+      <wa-option value="french">French</wa-option>
+    </wa-select>
+  </div>
+</div>
+```
diff --git a/docs/docs/patterns/blog-news/index.njk b/docs/docs/patterns/blog-news/index.njk
new file mode 100644
index 000000000..b64907027
--- /dev/null
+++ b/docs/docs/patterns/blog-news/index.njk
@@ -0,0 +1,9 @@
+---
+title: Blog & News
+description: 'Post lists, social sharing, paywalls, and more to bring your written content to the right audience.'
+parent: patterns
+layout: overview
+override:tags: []
+listChildren: true
+isPro: false
+---
diff --git a/docs/docs/patterns/blog-news/information.json b/docs/docs/patterns/blog-news/information.json
new file mode 100644
index 000000000..b7e0c916a
--- /dev/null
+++ b/docs/docs/patterns/blog-news/information.json
@@ -0,0 +1,3 @@
+{
+  "tags": ["blog-news"]
+}
diff --git a/docs/docs/patterns/blog-news/login.md b/docs/docs/patterns/blog-news/login.md
new file mode 100644
index 000000000..86769eeff
--- /dev/null
+++ b/docs/docs/patterns/blog-news/login.md
@@ -0,0 +1,65 @@
+---
+title: Sign Up & Login
+description: 'Verify the identity of a user and ensures that only authorized individuals can access specific content, features, or account data.'
+parent: blog-news
+tags: blog-news
+---
+
+## Sign Up
+
+```html {.example}
+<wa-card style="max-width: 45ch; margin: 0 auto">
+  <div class="wa-stack">
+    <h2 class="wa-heading-m">Sign up with Email</h2>
+    <p>Let's get your account started. Enter your email below.</p>
+    <wa-input label="Email" type="email"></wa-input>
+    <wa-button>Continue</wa-button>
+    <p class="wa-caption-s">By clicking continue, you agree to our <a href="#">Terms of Service</a></p>
+  </div>
+</wa-card>
+```
+
+## Login
+
+```html {.example}
+<wa-card style="max-width: 45ch; margin: 0 auto">
+  <div class="wa-stack">
+    <h2 class="wa-heading-m">Login</h2>
+    <wa-input label="Email" type="email"></wa-input>
+    <wa-input label="Password" type="password"></wa-input>
+    <a href="#">Having trouble signing in?</a>
+    <wa-button>Sign in</wa-button>
+  </div>
+</wa-card>
+```
+
+## With Third Party Login
+
+```html {.example}
+<wa-card style="max-width: 45ch; margin: 0 auto">
+  <div class="wa-stack">
+    <h2 class="wa-heading-m">Login</h2>
+    <wa-input label="Email" type="email"></wa-input>
+    <wa-input label="Password" type="password"></wa-input>
+    <a href="#">Having trouble signing in?</a>
+    <wa-button>Sign in</wa-button>
+    <wa-divider></wa-divider>
+    <p>Or sign in with:</p>
+    <div class="wa-grid" style="--min-column-size: 12ch;">
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="google" family="brands"></wa-icon>
+        Google
+      </wa-button>
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="apple" family="brands"></wa-icon>
+        Apple ID
+      </wa-button>
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="facebook" family="brands"></wa-icon>
+        Facebook
+      </wa-button>
+    </div>
+    <p>Don't have an account? <a href="#">Create one</a></p>
+  </div>
+</wa-card>
+```
diff --git a/docs/docs/patterns/blog-news/newsletter.md b/docs/docs/patterns/blog-news/newsletter.md
new file mode 100644
index 000000000..1fde6deda
--- /dev/null
+++ b/docs/docs/patterns/blog-news/newsletter.md
@@ -0,0 +1,125 @@
+---
+title: Newsletter
+description: 'Convert site visitors into engaged subscribers or customers.'
+parent: blog-news
+tags: blog-news
+---
+
+## Simple
+
+```html{.example}
+<wa-card style="margin: 0 auto; max-width: 45ch;">
+  <div class="wa-stack">
+    <h2 class="wa-heading-m" id="subscribe-label-1">Subscribe to our Newsletter</h2>
+    <p>To get the latest and most quality design resources</p>
+    <form class="wa-flank:end wa-gap-2xs">
+      <wa-input placeholder="email@example.com" aria-labelledby="subscribe-label-1"></wa-input>
+      <wa-button>Subscribe</wa-button>
+    </form>
+  </div>
+</wa-card>
+```
+
+## 2 Column
+
+```html{.example}
+<wa-card style="margin: 0 auto; max-width: 75ch;">
+  <div class="wa-grid">
+    <div class="wa-stack wa-gap-2xs">
+    <h2 class="wa-heading-m" id="subscribe-label-2">Subscribe to our Newsletter</h2>
+    <p>To get the latest and most quality design resources</p>
+    </div>
+    <form class="wa-flank:end wa-gap-2xs">
+      <wa-input placeholder="email@example.com" aria-labelledby="subscribe-label-2"></wa-input>
+      <wa-button>Subscribe</wa-button>
+    </form>
+  </div>
+</wa-card>
+```
+
+## With Incentives
+
+```html {.example}
+<wa-card style="margin: 0 auto; max-width: 75ch;">
+  <div class="wa-grid">
+    <dl class="wa-stack">
+      <div class="wa-cluster wa-gap-xs">
+        <dt><wa-icon name="calendar"></wa-icon></dt>
+        <dd>Daily news in your inbox</dd>
+      </div>
+      <div class="wa-cluster wa-gap-xs">
+        <dt><wa-icon name="trash"></wa-icon></dt>
+        <dd>Spam-free</dd>
+      </div>
+      <div class="wa-cluster wa-gap-xs">
+        <dt><wa-icon name="shield-halved"></wa-icon></dt>
+        <dd>The most trusted source in the industry</dd>
+      </div>
+      <div class="wa-cluster wa-gap-xs">
+        <dt><wa-icon name="user-xmark"></wa-icon></dt>
+        <dd>Easy to unsubscribe</dd>
+      </div>
+    </dl>
+
+    <div class="wa-stack">
+      <h2 class="wa-heading-m" id="subscribe-label-3">Subscribe to our Newsletter</h2>
+      <p>To get the latest and most quality design resources</p>
+      <form class="wa-flank:end wa-gap-2xs wa-align-items-end">
+        <wa-input placeholder="email@example.com" aria-labelledby="subscribe-label-3"></wa-input>
+        <wa-button>Subscribe</wa-button>
+      </form>
+    </div>
+  </div>
+</wa-card>
+```
+
+## With Image card
+
+```html {.example}
+<wa-card with-image style="max-width: 45ch; margin: 0 auto">
+  <img
+    slot="image"
+    src="https://images.unsplash.com/photo-1595087012935-124877078142?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    alt="mailbox"
+  />
+  <div class="wa-stack wa-gap-2xl">
+    <div class="wa-stack wa-align-items-center wa-gap-xs">
+      <h2 class="wa-heading-l">Subscribe!</h2>
+      <p class="wa-caption-l" style="text-align: center; word-break: break-word">
+        Get the best new products in your inbox, everyday. Get the latest content first.
+      </p>
+    </div>
+    <form class="wa-stack">
+      <wa-input placeholder="email@example.com" label="Sign up with email"></wa-input>
+      <wa-button appearance="filled" variant="brand">Sign up</wa-button>
+    </form>
+  </div>
+</wa-card>
+```
+
+## 2 column
+
+```html {.example}
+<wa-card style="margin: 0 auto; max-width: 84ch;">
+  <div class="wa-grid wa-align-items-center">
+    <form class="wa-stack wa-align-items-center wa-gap-2xl">
+      <h2 class="wa-heading-xl" style="text-align: center;">Be the first to know</h2>
+      <p class="wa-caption-xl" style="text-align: center;">Don't miss out on exclusive savings, new arrivals, and more.</p>
+      <div class="wa-stack">
+      <wa-input label="Email address" required></wa-input>
+      <wa-input label="Phone number" type="tel" placeholder="(optional)"></wa-input>
+      <wa-checkbox>
+        <p class="wa-caption-s" style="margin: 0">Enter your mobile number and select to receive automated marketing text messages about new items, great savings and more. You understand that consent is not required to make a purchase. Message and data rates may apply. Message frequency varies. Wireless Carriers are not liable for delayed or undelivered messages. Text HELP for help and STOP to cancel. For questions, please <a href="#">contact us</a>. <a href="#">Terms</a></div>
+      </wa-checkbox>
+      </div>
+      <div class="wa-stack wa-align-items-center wa-gap-s" style="width: 100%;">
+        <wa-button appearance="outlined"  style="width: 100%;">Sign up now</wa-button>
+        <wa-button href="#" appearance="plain" variant="brand" style="width: 100%;">No, thanks</wa-button>
+      </div>
+    </form>
+    <div class="wa-frame:portrait wa-border-radius-l">
+      <img src="https://images.unsplash.com/photo-1552558636-f6a8f071c2b3?q=80&w=2268&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+    </div>
+  </div>
+</wa-card>
+```
diff --git a/docs/docs/patterns/blog-news/paywall.md b/docs/docs/patterns/blog-news/paywall.md
new file mode 100644
index 000000000..d384d1a7b
--- /dev/null
+++ b/docs/docs/patterns/blog-news/paywall.md
@@ -0,0 +1,121 @@
+---
+title: Paywall
+description: 'Monetize value and encourage commitment from readers, viewers, or users.'
+parent: blog-news
+tags: blog-news
+---
+
+## Meter
+
+```html {.example}
+<div style="max-width: 45ch; margin: 0 auto;">
+  <wa-card>
+    <div class="wa-flank">
+      <wa-avatar
+        shape="rounded"
+        style="--background-color: var(--wa-color-purple-80); --text-color: var(--wa-color-purple-40)"
+      >
+        <wa-icon slot="icon" name="newspaper" family="regular"></wa-icon>
+      </wa-avatar>
+      <div class="wa-stack wa-gap-2xs">
+        <p>
+          You've read <span style="font-weight: var(--wa-font-weight-bold);">9 out of 10 articles</span> this month.
+        </p>
+        <p>Already a subscriber? <a href="#">Log in here</a>.</p>
+        <a href="#">Get Unlimited access for just 99¢</a>
+      </div>
+    </div>
+  </wa-card>
+</div>
+```
+
+## Modal
+
+```html {.example viewport}
+<wa-dialog without-header label="Subscribe or continue with ads" class="dialog-deny-close" style="--width: 90ch;" open>
+  <div class="wa-stack wa-gap-xl">
+    <h2 class="wa-heading-m">Want to subscribe or continue using our Products for free with ads?</h2>
+    <p>
+      Laws are changing in your region, so we're introducing a new choice about how we use your info for ads. You'll
+      learn more about what each option means for you before you confirm your choice.
+    </p>
+    <p>Your choice will apply to the <a href="#">accounts in this Accounts Center</a>.</p>
+    <div class="wa-grid">
+      <article class="wa-stack wa-gap-s">
+        <span class="wa-heading-s">Subscribe without ads</span>
+        <p>
+          Subscribe to our accounts without ads, starting at 5.99/month (inclusive of applicable taxes). Your info won't
+          be use for ads.
+        </p>
+        <wa-button variant="success">Subscribe</wa-button>
+      </article>
+      <article class="wa-stack wa-gap-s">
+        <span class="wa-heading-s">Free with ads</span>
+        <p>
+          Discover products and brands through personalized ads, while using your accounts for free. Your info will be
+          used for ads
+        </p>
+        <wa-button appearance="outlined">Use for Free</wa-button>
+      </article>
+    </div>
+  </div>
+</wa-dialog>
+<script>
+  const dialog = document.querySelector('.dialog-deny-close');
+
+  // Prevent the dialog from closing
+  dialog.addEventListener('wa-hide', event => {
+    if (event.detail.source.hasAttribute('open')) {
+      event.preventDefault();
+    }
+  });
+</script>
+```
+
+## Footer
+
+```html {.example viewport}
+<wa-drawer
+  without-header
+  label="Free article limit reached"
+  placement="bottom"
+  class="drawer-placement-bottom"
+  style="--size: 21rem;"
+  open
+>
+  <div>
+    <h2 class="wa-heading-m">You've hit your free article limit.</h2>
+    <wa-divider></wa-divider>
+    <div class="wa-grid">
+      <div class="wa-stack wa-gap-s wa-align-items-start">
+        <span class="wa-heading-s">Standard Digital</span>
+        <span class="wa-heading-xl">$45/month</span>
+        <p style="text-wrap: pretty">
+          Essential digital access to quality journalism on any device. Makes a great gift.
+        </p>
+        <wa-button variant="brand">Select</wa-button>
+        <a href="#" class="wa-caption-m">What's Included?</a>
+      </div>
+      <div class="wa-stack wa-gap-s wa-align-items-start">
+        <span class="wa-heading-s">Premium Digital</span>
+        <span class="wa-heading-xl">$75/month</span>
+        <p style="text-wrap: pretty">
+          Complete digital access to quality journalism with expert analysis from industry leaders.
+        </p>
+        <wa-button variant="brand">Select</wa-button>
+        <a href="#" class="wa-caption-m">What's Included?</a>
+      </div>
+    </div>
+  </div>
+</wa-drawer>
+<script>
+  const drawer = document.querySelector('.drawer-placement-bottom');
+
+  // Prevent the drawer from closing
+  drawer.addEventListener('wa-hide', event => {
+    if (event.detail.source.hasAttribute('open')) {
+      event.preventDefault();
+    }
+  });
+</script>
+```
diff --git a/docs/docs/patterns/blog-news/post-footer.md b/docs/docs/patterns/blog-news/post-footer.md
new file mode 100644
index 000000000..3f9200275
--- /dev/null
+++ b/docs/docs/patterns/blog-news/post-footer.md
@@ -0,0 +1,292 @@
+---
+title: Post Footer
+description: 'Helps reduce bounce rate and keep users in your content loop.'
+parent: blog-news
+tags:
+---
+
+## Two Column
+
+```html {.example}
+<div class="wa-align-items-start wa-flank:end wa-gap-3xl" style="--flank-size: 40ch;">
+  <div class="wa-stack">
+    <span class="wa-heading-s">More in <a href="#" class="wa-link-plain">Politics</a></span>
+    <div class="wa-grid">
+      <a href="#" class="wa-stack wa-gap-xs wa-link-plain">
+        <div class="wa-frame">
+          <img
+            src="https://images.unsplash.com/photo-1580128637215-659d70729ad0?q=80&w=4637&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+        </div>
+        <span class="wa-heading-m">FDR: The President Who Redefined American Leadership</span>
+      </a>
+      <a href="#" class="wa-stack wa-gap-xs wa-link-plain">
+        <div class="wa-frame">
+          <img
+            src="https://images.unsplash.com/photo-1719310215903-c39aaf139746?q=80&w=3520&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+        </div>
+        <span class="wa-heading-m">The Rise of Populism: Global Trends and Local Consequences</span>
+      </a>
+      <a href="#" class="wa-stack wa-gap-xs wa-link-plain">
+        <div class="wa-frame">
+          <img
+            src="https://images.unsplash.com/photo-1587315214098-b132e659dda9?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+        </div>
+        <span class="wa-heading-m">From Ballots to Blockchain: The Future of Voting Technology</span>
+      </a>
+      <a href="#" class="wa-stack wa-gap-xs wa-link-plain">
+        <div class="wa-frame">
+          <img
+            src="https://images.unsplash.com/photo-1631540698890-6bfd5d47671a?q=80&w=4000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+        </div>
+        <span class="wa-heading-m">Why Every Vote Matters in a Democracy</span>
+      </a>
+      <a href="#" class="wa-stack wa-gap-xs wa-link-plain">
+        <div class="wa-frame">
+          <img
+            src="https://images.unsplash.com/photo-1681810553931-39b5bc2acf3d?q=80&w=3536&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+        </div>
+        <span class="wa-heading-m">Power and Policy: How Political Agendas Shape Our Everyday Lives</span>
+      </a>
+      <a href="#" class="wa-stack wa-gap-xs wa-link-plain">
+        <div class="wa-frame">
+          <img
+            src="https://images.unsplash.com/photo-1681810546872-0f0e6eea6206?q=80&w=3617&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+        </div>
+        <span class="wa-heading-m">Digital Democracy or Data Dystopia? Politics in the Age of Social Media</span>
+      </a>
+    </div>
+  </div>
+  <div class="wa-stack">
+    <span class="wa-heading-s">Top Stories</span>
+    <ul style="list-style-type: none;">
+      <li>
+        <a href="#" class="wa-stack wa-gap-2xs wa-link-plain">
+          <wa-format-date month="long" day="numeric" date="2020-07-15T09:17:00-04:00"></wa-format-date>
+          <h1 class="wa-heading-l">Why We Love Getting Lost: The Psychology of Wandering</h1>
+        </a>
+        <wa-divider></wa-divider>
+      </li>
+      <li>
+        <a href="#" class="wa-stack wa-gap-2xs wa-link-plain">
+          <wa-format-date month="long" day="numeric" date="2020-07-08T09:17:00-04:00"></wa-format-date>
+          <h1 class="wa-heading-l">You’ve Been Scrolling for Hours: What Doomscrolling Does to Your Brain</h1>
+        </a>
+        <wa-divider></wa-divider>
+      </li>
+      <li>
+        <a href="#" class="wa-stack wa-gap-2xs wa-link-plain">
+          <wa-format-date month="long" day="numeric" date="2020-06-10T09:17:00-04:00"></wa-format-date>
+          <h1 class="wa-heading-l">The Salt Myth: What We Get Wrong About Flavor</h1>
+        </a>
+        <wa-divider></wa-divider>
+      </li>
+      <li>
+        <a href="#" class="wa-stack wa-gap-2xs wa-link-plain">
+          <wa-format-date month="long" day="numeric" date="2020-05-09T09:17:00-04:00"></wa-format-date>
+          <h1 class="wa-heading-l">Night Owls Unite: The Secret Productivity of the Late-Night Mind</h1>
+        </a>
+        <wa-divider></wa-divider>
+      </li>
+    </ul>
+  </div>
+</div>
+```
+
+## With Share buttons and Carousel
+
+```html {.example}
+<div class="wa-stack" style="text-align: center;">
+  <div class="wa-stack wa-gap-2xl">
+    <h3 class="wa-heading-xl">Don't forget to share this post!</h3>
+    <div class="wa-cluster" style="justify-content: center;">
+      <span class="wa-align-items-center wa-stack wa-gap-2xs">
+        <wa-icon-button
+          style="font-size: var(--wa-font-size-2xl);"
+          name="facebook"
+          family="brands"
+          label="Share on Facebook"
+          href="#"
+          target="_blank"
+        ></wa-icon-button>
+        <span class="wa-caption-s">Facebook</span>
+      </span>
+      <span class="wa-align-items-center wa-stack wa-gap-2xs">
+        <wa-icon-button
+          style="font-size: var(--wa-font-size-2xl);"
+          name="bluesky"
+          family="brands"
+          label="Share on Bluesky"
+          href="#"
+          target="_blank"
+        ></wa-icon-button>
+        <span class="wa-caption-s">Bluesky</span>
+      </span>
+      <span class="wa-align-items-center wa-stack wa-gap-2xs">
+        <wa-icon-button
+          style="font-size: var(--wa-font-size-2xl);"
+          name="linkedin"
+          family="brands"
+          label="Share on LinkedIn"
+          href="#"
+          target="_blank"
+        ></wa-icon-button>
+        <span class="wa-caption-s">LinkedIn</span>
+      </span>
+      <span class="wa-align-items-center wa-stack wa-gap-2xs">
+        <wa-icon-button
+          style="font-size: var(--wa-font-size-2xl);"
+          name="envelope-open"
+          label="Share with email"
+          href="#"
+          target="_blank"
+        ></wa-icon-button>
+        <span class="wa-caption-s">Email</span>
+      </span>
+    </div>
+  </div>
+  <wa-divider></wa-divider>
+  <div class="wa-stack">
+    <h3 class="wa-heading-xl">Related Articles</h3>
+    <wa-carousel navigation pagination slides-per-page="3" slides-per-move="3" style="--aspect-ratio: initial">
+      <wa-carousel-item>
+        <a href="#" class="wa-link-plain">
+          <wa-card with-image>
+            <div class="wa-frame:landscape" slot="image">
+              <img
+                src="https://images.unsplash.com/photo-1490410006060-e1dc82ab0a70?q=80&w=5340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="Customer service reps"
+              />
+            </div>
+            <div class="wa-stack wa-gap-xs">
+              <wa-format-date
+                class="wa-caption-l"
+                month="long"
+                day="numeric"
+                date="2020-07-15T09:17:00-04:00"
+              ></wa-format-date>
+              <span class="wa-heading-m">Grids with Purpose: Mastering Layout in Web Design</span>
+            </div>
+          </wa-card>
+        </a>
+      </wa-carousel-item>
+      <wa-carousel-item>
+        <a href="#" class="wa-link-plain">
+          <wa-card with-image>
+            <div class="wa-frame:landscape" slot="image">
+              <img
+                src="https://images.unsplash.com/photo-1559757175-0eb30cd8c063?q=80&w=5231&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="Customer service reps"
+              />
+            </div>
+            <div class="wa-stack wa-gap-xs">
+              <wa-format-date
+                class="wa-caption-l"
+                month="long"
+                day="numeric"
+                date="2020-07-15T09:17:00-04:00"
+              ></wa-format-date>
+              <span class="wa-heading-m">UI That Feels Right: The Psychology of Good Design</span>
+            </div>
+          </wa-card>
+        </a>
+      </wa-carousel-item>
+      <wa-carousel-item>
+        <a href="#" class="wa-link-plain">
+          <wa-card with-image>
+            <div class="wa-frame:landscape" slot="image">
+              <img
+                src="https://images.unsplash.com/photo-1581464668854-0da56c32393c?q=80&w=5340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="Customer service reps"
+              />
+            </div>
+            <div class="wa-stack wa-gap-xs">
+              <wa-format-date
+                class="wa-caption-l"
+                month="long"
+                day="numeric"
+                date="2020-07-15T09:17:00-04:00"
+              ></wa-format-date>
+              <span class="wa-heading-m">Design Is Never Done: Why Iteration Always Matters</span>
+            </div>
+          </wa-card>
+        </a>
+      </wa-carousel-item>
+      <wa-carousel-item>
+        <a href="#" class="wa-link-plain">
+          <wa-card with-image>
+            <div class="wa-frame:landscape" slot="image">
+              <img
+                src="https://images.unsplash.com/photo-1628595351029-c2bf17511435?q=80&w=5232&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="Customer service reps"
+              />
+            </div>
+            <div class="wa-stack wa-gap-xs">
+              <wa-format-date
+                class="wa-caption-l"
+                month="long"
+                day="numeric"
+                date="2020-07-15T09:17:00-04:00"
+              ></wa-format-date>
+              <span class="wa-heading-m">Tiny Details Matter: The Power of Microinteractions</span>
+            </div>
+          </wa-card>
+        </a>
+      </wa-carousel-item>
+      <wa-carousel-item>
+        <a href="#" class="wa-link-plain">
+          <wa-card with-image>
+            <div class="wa-frame:landscape" slot="image">
+              <img
+                src="https://images.unsplash.com/photo-1576595580361-90a855b84b20?q=80&w=4032&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="Customer service reps"
+              />
+            </div>
+            <div class="wa-stack wa-gap-xs">
+              <wa-format-date
+                class="wa-caption-l"
+                month="long"
+                day="numeric"
+                date="2020-07-15T09:17:00-04:00"
+              ></wa-format-date>
+              <span class="wa-heading-m">From Wireframe to Wow: Building Functional Design</span>
+            </div>
+          </wa-card>
+        </a>
+      </wa-carousel-item>
+      <wa-carousel-item>
+        <a href="#" class="wa-link-plain">
+          <wa-card with-image>
+            <div class="wa-frame:landscape" slot="image">
+              <img
+                src="https://images.unsplash.com/photo-1539541417736-3d44c90da315?q=80&w=5338&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="Customer service reps"
+              />
+            </div>
+            <div class="wa-stack wa-gap-xs">
+              <wa-format-date
+                class="wa-caption-l"
+                month="long"
+                day="numeric"
+                date="2020-07-15T09:17:00-04:00"
+              ></wa-format-date>
+              <span class="wa-heading-m">Designing with Empathy: Creating for Real People</span>
+            </div>
+          </wa-card>
+        </a>
+      </wa-carousel-item>
+    </wa-carousel>
+  </div>
+</div>
+```
diff --git a/docs/docs/patterns/blog-news/post-header.md b/docs/docs/patterns/blog-news/post-header.md
new file mode 100644
index 000000000..ba7c11a49
--- /dev/null
+++ b/docs/docs/patterns/blog-news/post-header.md
@@ -0,0 +1,74 @@
+---
+title: Post Header
+description: 'Post headers deliver visual impact and emotional engagement right at the start of the reader’s journey.'
+parent: blog-news
+tags:
+---
+
+## Simple
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl">
+  <em
+    >File under <a href="#"><strong>Design</strong></a></em
+  >
+  <div class="wa-flank:end wa-align-items-end">
+    <h2 class="wa-heading-3xl">How to Earn a Living Selling Digital Products in 2025</h2>
+    <span>by <a href="#">Alphonso Roberts</a></span>
+  </div>
+  <div class="wa-frame:landscape wa-border-radius-l">
+    <img
+      src="https://images.unsplash.com/photo-1622737133809-d95047b9e673?q=80&w=5232&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      alt="A collection of 3D shapes tumbling towards a blank surface"
+    />
+  </div>
+</div>
+```
+
+## With Avatar and Tags
+
+```html {.example}
+<div class="wa-stack wa-gap-xl">
+  <div class="wa-grid wa-align-items-center">
+    <div class="wa-stack wa-gap-2xl">
+      <h2 class="wa-heading-3xl">Understanding UX makes you a better [insert your job here]</h2>
+      <p class="wa-caption-xl" style="text-wrap: pretty">
+        User experience and accessibility isn't just for designers, it affects everyone. Understanding UX and Usability
+        can make you a better human.
+      </p>
+      <div class="wa-stack wa-gap-l">
+        <div class="wa-flank">
+          <wa-avatar
+            image="https://images.unsplash.com/photo-1728577740843-5f29c7586afe?q=80&w=4167&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            label="Avatar of author"
+          ></wa-avatar>
+          <div class="wa-stack wa-gap-3xs">
+            <span class="wa-heading-m">Earl Tyler</span>
+            <span class="wa-caption-l wa-cluster wa-gap-xs"
+              ><span>Published</span>
+              <wa-format-date
+                month="long"
+                day="numeric"
+                year="numeric"
+                date="2020-07-15T09:17:00-04:00"
+              ></wa-format-date
+            ></span>
+          </div>
+        </div>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-tag size="small" pill>Design</wa-tag>
+          <wa-tag size="small" pill>UX</wa-tag>
+          <wa-tag size="small" pill>Usability</wa-tag>
+          <wa-tag size="small" pill>Accessibility</wa-tag>
+        </div>
+      </div>
+    </div>
+    <div class="wa-frame wa-border-radius-l">
+      <img
+        src="https://images.unsplash.com/photo-1461709444300-a6217cec3dff?q=80&w=5346&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Five people's hands delicately holding colorful autumn leaves"
+      />
+    </div>
+  </div>
+</div>
+```
diff --git a/docs/docs/patterns/blog-news/post-list.md b/docs/docs/patterns/blog-news/post-list.md
new file mode 100644
index 000000000..84953fdf9
--- /dev/null
+++ b/docs/docs/patterns/blog-news/post-list.md
@@ -0,0 +1,257 @@
+---
+title: Post List
+description: 'Organize and showcase content in a way that helps users discover, browse, and engage with articles.'
+parent: blog-news
+tags: blog-news
+---
+
+## Text Based
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl" style="max-width: 60ch; margin: 0 auto;">
+  <div class="wa-split">
+    <h2 class="wa-heading-l">Trending Articles</h2>
+    <span class="wa-cluster">
+      <wa-icon name="search"></wa-icon>
+      <a href="#" class="wa-link-plain">See all</a>
+    </span>
+  </div>
+  <article class="wa-stack wa-gap-s">
+    <section class="wa-stack wa-gap-xs">
+      <h3 class="wa-heading-m"><a href="#" class="wa-link-plain">Worst Idioms</a></h3>
+      <span class="wa-caption-m">by <strong><em><a href="#">Paisley Darts</a></em></strong> • 4 min</span>
+    </section>
+    <p>"You can't have your cake and eat it too"... This one needs to be buried in a shallow grave.</p>
+    <a href="#" class="wa-cluster wa-gap-2xs"><span>Read More</span><wa-icon name="angle-right"></wa-icon></a>
+    <wa-divider></wa-divider>
+  </article>
+  <article class="wa-stack wa-gap-s">
+    <section class="wa-stack wa-gap-xs">
+      <h3 class="wa-heading-m">
+        <a href="#" class="wa-link-plain">Boost Your Productivity with These 5 Simple Habits</a>
+      </h3>
+      <span class="wa-caption-m">by <strong><em><a href="#">Michael Sur</a></em></strong> • 3 min</span>
+    </section>
+    <p>Small changes, big results—master the art of productivity in your daily routine.</p>
+    <a href="#" class="wa-cluster wa-gap-2xs"><span>Read More</span><wa-icon name="angle-right"></wa-icon></a>
+    <wa-divider></wa-divider>
+  </article>
+  <article class="wa-stack wa-gap-s">
+    <section class="wa-stack wa-gap-xs">
+      <h3 class="wa-heading-m">
+        <a href="#" class="wa-link-plain">Why Sustainable Fashion is the Future of the Industry</a>
+      </h3>
+      <span class="wa-caption-m">by <strong><em><a href="#">Stacy Magnolia</a></em></strong> • 7 min</span>
+    </section>
+    <p>From eco-friendly materials to ethical brands, sustainability is shaping the way we dress.</p>
+    <a href="#" class="wa-cluster wa-gap-2xs"><span>Read More</span><wa-icon name="angle-right"></wa-icon></a>
+    <wa-divider></wa-divider>
+  </article>
+</div>
+```
+
+## Single Column with Images
+
+```html {.example}
+<div class="wa-stack" style="max-width: 78ch; margin: 0 auto;">
+  <div class="wa-split">
+    <h2 class="wa-heading-l">Trending Articles</h2>
+    <span class="wa-cluster">
+      <wa-icon name="search"></wa-icon>
+      <a href="#" class="wa-link-plain">See all</a>
+    </span>
+  </div>
+  <div class="wa-stack">
+    <article class="wa-flank:end wa-align-items-center">
+      <div class="wa-stack wa-gap-s wa-align-items-start">
+        <h3 class="wa-heading-m"><a href="#" class="wa-link-plain">Worst Idioms <span class="wa-caption-s">4 min</span></a></h3>
+        <div class="wa-stack wa-gap-2xs">
+          <p class="wa-caption-l">
+            "You can't have your cake and eat it too"... This one needs to be buried in a shallow grave.
+          </p>
+          <span class="wa-caption-m">by<a href="#"><strong><em> Paisley Darts</em></strong></a></span>
+        </div>
+        <wa-tag size="small" appearance="filled">Opinion</wa-tag>
+      </div>
+      <div class="wa-frame wa-border-radius-m" style="width: 10ch;">
+        <img
+          src="https://images.unsplash.com/photo-1720170060678-7c30a36937cd?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        />
+      </div>
+    </article>
+    <wa-divider></wa-divider>
+    <article class="wa-flank:end wa-align-items-center">
+      <div class="wa-stack wa-gap-s wa-align-items-start">
+        <h3 class="wa-heading-m">
+          <a href="#" class="wa-link-plain">Boost Your Productivity with These 5 Simple Habits <span class="wa-caption-s">3 min</span></a>
+        </h3>
+        <div class="wa-stack wa-gap-2xs">
+          <p class="wa-caption-l">"Small changes, big results—master the art of productivity in your daily routine.</p>
+          <span class="wa-caption-m">by<a href="#"><strong><em> Michael Sur</em></strong></a></span>
+        </div>
+        <div class="wa-cluster">
+          <wa-tag size="small" appearance="filled">Self Improvement</wa-tag>
+        </div>
+      </div>
+      <div class="wa-frame wa-border-radius-m" style="width: 10ch;">
+        <img
+          src="https://images.unsplash.com/photo-1507099985932-87a4520ed1d5?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        />
+      </div>
+    </article>
+    <wa-divider></wa-divider>
+    <article class="wa-flank:end wa-align-items-center">
+      <div class="wa-stack wa-gap-s wa-align-items-start">
+        <h3 class="wa-heading-m">
+          <a href="#" class="wa-link-plain">Sustainable Fashion Is the Future of the Industry <span class="wa-caption-s">7 min</span></a>
+        </h3>
+        <div class="wa-stack wa-gap-2xs">
+          <p class="wa-caption-l">
+            From eco-friendly materials to ethical brands, sustainability is shaping the way we dress.
+          </p>
+          <span class="wa-caption-m">by<a href="#"><strong><em> Stacy Magnolia</em></strong></a></span>
+        </div>
+        <div class="wa-cluster wa-gap-xs">
+          <wa-tag size="small" appearance="filled">Style</wa-tag
+          ><wa-tag size="small" appearance="filled">Environmental</wa-tag>
+        </div>
+      </div>
+      <div class="wa-frame wa-border-radius-m" style="width: 10ch;">
+        <img
+          src="https://images.unsplash.com/photo-1631775512414-160ae648c209?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        />
+      </div>
+    </article>
+    <wa-divider></wa-divider>
+    <article class="wa-flank:end wa-align-items-center">
+      <div class="wa-stack wa-gap-s wa-align-items-start">
+        <h3 class="wa-heading-m"><a href="#" class="wa-link-plain">The Power of Mindfulness <span class="wa-caption-s">5 min</span></a></h3>
+        <div class="wa-stack wa-gap-2xs">
+          <p class="wa-caption-l">Discover how being present in the moment can lead to lasting mental well being.</p>
+          <span class="wa-caption-m">by<a href="#"><strong><em> Desean Ivy</em></strong></a></span>
+        </div>
+        <div class="wa-cluster wa-gap-xs">
+          <wa-tag size="small" appearance="filled">Meditation</wa-tag
+          ><wa-tag size="small" appearance="filled">Self Care</wa-tag>
+        </div>
+      </div>
+      <div class="wa-frame wa-border-radius-m" style="width: 10ch;">
+        <img
+          src="https://images.unsplash.com/photo-1591228127791-8e2eaef098d3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        />
+      </div>
+    </article>
+    <wa-divider></wa-divider>
+  </div>
+</div>
+```
+
+## With Image Card
+
+```html {.example}
+<div class="wa-stack wa-align-items-center" style="max-width: 105ch; margin: 0 auto;">
+  <h2 class="wa-heading-l">Trending Articles</h2>
+  <wa-input placeholder="Search Articles">
+    <wa-icon name="search" slot="suffix"></wa-icon>
+  </wa-input>
+  <div class="wa-grid" style="--min-column-size: 40ch;">
+    <a href="#" class="wa-link-plain">
+      <wa-card with-image style="height: 100%">
+        <img
+          slot="image"
+          src="https://images.unsplash.com/photo-1720170060678-7c30a36937cd?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt=""
+        />
+        <div class="wa-stack">
+          <h2 class="wa-heading-m">Worst Idioms</h2>
+          <p class="wa-caption-l">
+            "You can't have your cake and eat it too"... This one needs to be buried in a shallow grave.
+          </p>
+          <div class="wa-cluster wa-gap-s">
+            <wa-avatar
+              image="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              label="author avatar"
+            ></wa-avatar>
+            <div class="wa-stack wa-gap-2xs">
+              <span class="wa-heading-s">Paisley Darts</span>
+              <wa-format-date class="wa-caption-s" month="long" day="numeric" date="2020-07-08T09:17:00-04:00"></wa-format-date>
+            </div>
+          </div>
+        </div>
+      </wa-card>
+    </a>
+    <a href="#" class="wa-link-plain">
+      <wa-card with-image style="height: 100%">
+        <img
+          slot="image"
+          src="https://images.unsplash.com/photo-1507099985932-87a4520ed1d5?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt=""
+        />
+        <div class="wa-stack">
+          <h2 class="wa-heading-m">Boost Your Productivity with These 5 Simple Habits</h2>
+          <p class="wa-caption-l">Small changes, big results—master the art of productivity in your daily routine.</p>
+          <div class="wa-cluster wa-gap-s">
+            <wa-avatar
+              image="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              label="author avatar"
+            ></wa-avatar>
+            <div class="wa-stack wa-gap-2xs">
+              <span class="wa-heading-s">Michael Sur</span>
+              <wa-format-date class="wa-caption-s" month="long" day="numeric" date="2020-06-20T09:17:00-04:00"></wa-format-date>
+            </div>
+          </div>
+        </div>
+      </wa-card>
+    </a>
+    <a href="#" class="wa-link-plain">
+      <wa-card with-image style="height: 100%">
+        <img
+          slot="image"
+          src="https://images.unsplash.com/photo-1631775512414-160ae648c209?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt=""
+        />
+        <div class="wa-stack">
+          <h2 class="wa-heading-m">Sustainable Fashion Is the Future of the Industry</h2>
+          <p class="wa-caption-l">
+            From eco-friendly materials to ethical brands, sustainability is shaping the way we dress.
+          </p>
+          <div class="wa-cluster wa-gap-s">
+            <wa-avatar
+              image="https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              label="author avatar"
+            ></wa-avatar>
+            <div class="wa-stack wa-gap-2xs">
+              <span class="wa-heading-s">Stacy Magnolia</span>
+              <wa-format-date class="wa-caption-s" month="long" day="numeric" date="2020-05-03T09:17:00-04:00"></wa-format-date>
+            </div>
+          </div>
+        </div>
+      </wa-card>
+    </a>
+    <a href="#" class="wa-link-plain">
+      <wa-card with-image style="height: 100%">
+        <img
+          slot="image"
+          src="https://images.unsplash.com/photo-1591228127791-8e2eaef098d3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt=""
+        />
+        <div class="wa-stack">
+          <h2 class="wa-heading-m">The Power of Mindfulness</h2>
+          <p class="wa-caption-l">Discover how being present in the moment can lead to lasting mental well being.</p>
+          <div class="wa-cluster wa-gap-s">
+            <wa-avatar
+              image="https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              label="author avatar"
+            ></wa-avatar>
+            <div class="wa-stack wa-gap-2xs">
+              <span class="wa-heading-s">Desean Ivy</span>
+              <wa-format-date class="wa-caption-s" month="long" day="numeric" date="2020-04-12T09:17:00-04:00"></wa-format-date>
+            </div>
+          </div>
+        </div>
+      </wa-card>
+    </a>
+  </div>
+  <a href="#" class="wa-link-plain" style="text-align: center;">See All</a>
+</div>
+```
diff --git a/docs/docs/patterns/blog-news/social-share.md b/docs/docs/patterns/blog-news/social-share.md
new file mode 100644
index 000000000..7be6af334
--- /dev/null
+++ b/docs/docs/patterns/blog-news/social-share.md
@@ -0,0 +1,130 @@
+---
+title: Social Share
+description: 'Allow users to easily share content with social networks and platform.'
+parent: blog-news
+tags: blog-news
+---
+
+## Horizontal
+
+```html{.example}
+<wa-card style="max-width: fit-content; margin: 0 auto;">
+  <div class="wa-stack">
+    <span class="wa-heading-s">Share Video</span>
+    <div class="wa-cluster">
+      <span class="wa-align-items-center wa-stack wa-gap-2xs">
+        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="code" label="Embed video" href="#" target="_blank"></wa-icon-button>
+        <span class="wa-caption-s">Embed</span>
+      </span>
+      <span class="wa-align-items-center wa-stack wa-gap-2xs">
+        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="facebook" family="brands" label="Share on Facebook" href="#" target="_blank"></wa-icon-button>
+        <span class="wa-caption-s">Facebook</span>
+      </span>
+      <span class="wa-align-items-center wa-stack wa-gap-2xs">
+        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="bluesky" family="brands" label="Share on Bluesky" href="#" target="_blank"></wa-icon-button>
+        <span class="wa-caption-s">Bluesky</span>
+      </span>
+      <span class="wa-align-items-center wa-stack wa-gap-2xs">
+        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="linkedin" family="brands" label="Share on LinkedIn" href="#" target="_blank"></wa-icon-button>
+        <span class="wa-caption-s">LinkedIn</span>
+      </span>
+      <span class="wa-align-items-center wa-stack wa-gap-2xs">
+        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="envelope-open" label="Share with email" href="#" target="_blank"></wa-icon-button>
+        <span class="wa-caption-s">Email</span>
+      </span>
+    </div>
+    <wa-button appearance="outlined">
+      <wa-icon slot="prefix" name="link"></wa-icon>
+      Copy Link
+    </wa-button>
+  </div>
+</wa-card>
+```
+
+## Vertical
+
+```html{.example}
+<wa-card class="wa-border-radius-pill" style="max-width: 8ch; margin: 0 auto;">
+  <div class="wa-stack">
+    <span class="wa-align-items-center wa-stack wa-gap-2xs">
+      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="code" label="Embed video" href="#" target="_blank"></wa-icon-button>
+      <span class="wa-caption-s">Embed</span>
+    </span>
+    <span class="wa-align-items-center wa-stack wa-gap-2xs">
+      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="facebook" family="brands" label="facebook" href="#" target="_blank"></wa-icon-button>
+      <span class="wa-caption-s">Facebook</span>
+    </span>
+    <span class="wa-align-items-center wa-stack wa-gap-2xs">
+      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="bluesky" family="brands" label="bluesky" href="#" target="_blank"></wa-icon-button>
+      <span class="wa-caption-s">Bluesky</span>
+    </span>
+    <span class="wa-align-items-center wa-stack wa-gap-2xs">
+      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="linkedin" family="brands" label="LinkedIn" href="#" target="_blank"></wa-icon-button>
+      <span class="wa-caption-s">LinkedIn</span>
+    </span>
+    <span class="wa-align-items-center wa-stack wa-gap-2xs">
+      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="envelope-open" label="email" href="#" target="_blank"></wa-icon-button>
+      <span class="wa-caption-s">Email</span>
+    </span>
+  </div>
+</wa-card>
+```
+
+## With Image Card
+
+```html {.example}
+<wa-card with-image style="max-width: 45ch; margin: 0 auto;">
+  <img
+    slot="image"
+    src="https://images.unsplash.com/photo-1578269174936-2709b6aeb913?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    alt="Super special awesome trophy"
+  />
+  <div class="wa-stack wa-align-items-center">
+    <div class="wa-stack wa-gap-2xs wa-align-items-center">
+      <h2 class="wa-heading-l">Flawless!</h2>
+      <span class="wa-caption-l"> 10 of 10</span>
+    </div>
+    <p style="text-align: center;">
+      You got a perfect score in this section. Tell your friends, family, really... just anyone who will listen.
+    </p>
+    <div class="wa-cluster" style="margin-top: var(--wa-font-size-xl);">
+      <wa-icon-button
+        slot="icon"
+        style="font-size: var(--wa-font-size-2xl);"
+        name="facebook"
+        family="brands"
+        label="Share on Facebook"
+        href="#"
+        target="_blank"
+      ></wa-icon-button>
+      <wa-icon-button
+        slot="icon"
+        style="font-size: var(--wa-font-size-2xl);"
+        name="bluesky"
+        family="brands"
+        label="Share on Bluesky"
+        href="#"
+        target="_blank"
+      ></wa-icon-button>
+      <wa-icon-button
+        slot="icon"
+        style="font-size: var(--wa-font-size-2xl);"
+        name="instagram"
+        family="brands"
+        label="Share on Instagram"
+        href="#"
+        target="_blank"
+      ></wa-icon-button>
+      <wa-icon-button
+        slot="icon"
+        style="font-size: var(--wa-font-size-2xl);"
+        name="linkedin"
+        family="brands"
+        label="Share on LinkedIn"
+        href="#"
+        target="_blank"
+      ></wa-icon-button>
+    </div>
+  </div>
+</wa-card>
+```
diff --git a/docs/docs/patterns/blog.md b/docs/docs/patterns/blog.md
deleted file mode 100644
index a9b9148b4..000000000
--- a/docs/docs/patterns/blog.md
+++ /dev/null
@@ -1,371 +0,0 @@
----
-title: Blog
-description: TODO
-unpublished: true
-isPro: true
----
-
-TODO Page Description
-
-## Examples
-
-### Hero
-```html{.example}
-<wa-carousel pagination>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #fe53a0;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-5.jpg"
-    />
-      </div>
-      <h2><span>Do you see any Teletubbies in here?</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #5a90f3;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-1.jpg"
-    />
-      </div>
-      <h2><span>The path of the righteous man is beset on all sides</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #8c431e;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-2.jpg"
-    />
-      </div>
-      <h2><span>Article Title</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #37b3e6;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-3.jpg"
-    />
-      </div>
-      <h2><span>Article Title</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #f993d6;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-4.jpg"
-    />
-      </div>
-      <h2><span>Article Title</span></h2>
-    </a>
-  </wa-carousel-item>
-
-</wa-carousel>
-<style>
-  .hero-link {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    h2 {
-      position: absolute;
-      color: white;
-      top: 25%;
-      left: 15%;
-      width: 200px;
-      padding: .5rem;
-      line-height: 1.15;
-
-      span {
-        background-color: black;
-      }
-    }
-
-    div:first-of-type {
-      width: 30%;
-    }
-    div:last-of-type {
-      width: 70%;
-    }
-  }
-</style>
-```
-
-### Newsletter signup
-```html{.example}
-<wa-card class="news-letter-signup">
-  <h2>Subscribe to our Newsletter</h2>
-  <p>To get the latest and most quality design resources</p>
-  <div class="subscribe-input"> <wa-input></wa-input><wa-button>Subscribe</wa-button></div>
-</wa-card>
-<style>
-  .news-letter-signup {
-        display: block;
-    width: fit-content;
-    margin: 0 auto;
-  }
-  .subscribe-input {
-    display: flex;
-    width: 100%;
-
-    wa-input {
-      width: inherit;
-    }
-
-    wa-button {
-      margin-left: 0.5rem;
-    }
-  }
-</style>
-```
-
-### Posts List
-```html{.example}
-<wa-card>
-  <div slot="header">
-    Recent Articles
-  </div>
-  <div class="body">
-    <div class="post-list">
-      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-1.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;"> <wa-icon fixed-width name="mug-hot"></wa-icon> Lifestyle</span>
-          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Jules</span>
-        </div>
-      </div>
-      <div class="post-list-item" style="display: flex; align-items: center; flex-direction: row-reverse;justify-content: flex-end">
-        <img class="last" src="/assets/images/patterns/flower-crop-2.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column; margin-right: 1rem;">
-          <span style="font-size: small;"><wa-icon fixed-width name="user-nurse"> </wa-icon>Health</span>
-          <span style="font-size: larger;font-weight: 600;">That's clear. Your cells react to bacteria</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Mr. Glass</span>
-        </div>
-      </div>
-      <div  class="post-list-item" style="display: flex; align-items: center; flex-direction: row-reverse;justify-content: flex-end">
-        <img style="display:none;" src="#"/>
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;"><wa-icon fixed-width name="football"></wa-icon> Sports</span>
-          <span style="font-size: larger;font-weight: 600;">Do you see any Teletubbies in here?</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Nick Fury</span>
-        </div>
-      </div>
-      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-3.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;">Lifestyle</span>
-          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Jules</span>
-        </div>
-      </div>
-      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-1.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;">Lifestyle</span>
-          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Jules</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</wa-card>
-<style>
-  .post-list {
-    .post-list-item {
-      border-bottom: 1px solid var(--wa-color-surface-border);
-      margin-bottom: 1rem;
-      padding-bottom: 1rem;
-
-      img {
-        margin-right: 1rem;
-        object-fit: cover;
-        min-width: 50px;
-        min-height: 50px;
-        width: 100px;
-        height: 100px;
-        border-radius: var(--wa-border-radius-circle);
-      }
-      img.last {
-        margin-right: 0;
-      }
-
-      .post-list-item-info span:first-of-type {
-        display: flex;
-        align-items: center;
-      }
-
-      .post-list-item-info span wa-icon {
-        margin-right: 0.25rem;
-      }
-    }
-    .post-list-item:last-of-type {
-      border-bottom: none;
-      margin-bottom: 0;
-      padding-bottom: 0;
-    }
-  }
-</style>
-```
-
-### Related Posts
-```html{.example}
-<wa-card class="card-overview">
-  <img
-    slot="image"
-    src="https://plus.unsplash.com/premium_photo-1661382011487-cd3d6b1d9dff?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDc0ODd8&ixlib=rb-4.0.3&q=80&w=1080"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-
-  <strong>Color Advancements</strong><br />
-  Lot of new and exciting features in web colors<br />
-  <small>2d ago</small>
-
-  <div slot="footer">
-    <wa-button variant="brand" pill>Read More</wa-button>
-
-  </div>
-</wa-card>
-
-
-
-<style>
-  .card-overview {
-    max-width: 300px;
-  }
-
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-
-```
-### Article footer
-```html{.example}
-<div class="article-footer">
-  <div class="article-tags">
-    <a href="#"><wa-tag size="medium" pill>UX</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Product Design</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Design</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Prototyping</wa-tag></a>
-  </div>
-  <div class="article-actions">
-    <wa-icon-button name="hands-clapping"></wa-icon-button>
-  </div>
-</div>
-```
-
-## Social Share
-
-### Vertical
-```html{.example}
-<wa-card class="social-share-vertical" style="--border-radius: 4rem;">
-  <wa-icon-button name="facebook" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-   <wa-icon-button name="x-twitter" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-    <wa-icon-button name="threads" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-    <wa-icon-button name="mastodon" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-    <wa-icon-button name="paper-plane" family="solid" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-</wa-card>
-<style>
-  .social-share-vertical {
-    display: block;
-    margin: 0 auto;
-    width: fit-content;
-
-    wa-icon-button {
-      font-size: 2.5rem;
-      display: block;
-      margin-bottom: .5rem;
-    }
-     wa-icon-button:last-of-type {
-      margin-bottom: initial;
-    }
-  }
-</style>
-```
-
-### Horizontal
-```html{.example}
-<wa-card class="social-share-horizontal">
-  <div slot="header">
-    Share this Article
-  </div>
-  <wa-icon-button name="facebook" family="brands" variant="solid" label="Edit" style="--background: #1877f225; --color: #1877f2"></wa-icon-button>
-   <wa-icon-button name="x-twitter" family="brands" variant="solid" label="Edit" style="--background: #00000025; --color: #000000"></wa-icon-button>
-    <wa-icon-button name="threads" family="brands" variant="solid" label="Edit" style="--background: #c32aa325; --color: #c32aa3"></wa-icon-button>
-        <wa-icon-button name="mastodon" family="brands" variant="solid" label="Edit" style="--background: #6364ff25; --color: #6364ff"></wa-icon-button>
-
-    <wa-icon-button name="instagram" family="brands" variant="solid" label="Edit" style="--background: #c32aa325; --color: #c32aa3"></wa-icon-button>
-
-    <wa-icon-button name="pinterest" family="brands" variant="solid" label="Edit" style="--background: #bd081c25; --color: #bd081c"></wa-icon-button>
-    <wa-icon-button name="linkedin" family="brands" variant="solid" label="Edit" style="--background: #0a66c225; --color: #0a66c2"></wa-icon-button>
-    <div slot="footer">
-      <div class="share-input">
-         <wa-input value="https://fontawesome.com"></wa-input>
-    <wa-button variant="brand"> <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>Copy</wa-button>
-      </div>
-
-  </div>
-</wa-card>
-<style>
-  .social-share-horizontal {
-    margin: 0 auto;
-    display: block;
-    width: fit-content;
-
-    wa-icon-button {
-      --background: transparent;
-      --color: initial;
-      font-size: 1.5rem;
-      border-radius: .25rem;
-      background: var(--background);
-    }
-    wa-icon-button::part(base) {
-
-      color: var(--color);
-    }
-
-    .share-input {
-    display: flex;
-
-    wa-input {
-          --border-radius: var(--wa-form-control-border-radius) 0 0 var(--wa-form-control-border-radius);
-    }
-    wa-button {
-      --border-radius:  0 var(--wa-form-control-border-radius)  var(--wa-form-control-border-radius) 0;
-    }
-  }
-  }
-
-</style>
-```
\ No newline at end of file
diff --git a/docs/docs/patterns/business.md b/docs/docs/patterns/business.md
index dcd6ade2b..d6f15e3f1 100644
--- a/docs/docs/patterns/business.md
+++ b/docs/docs/patterns/business.md
@@ -7,4 +7,4 @@ isPro: true
 
 TODO Page Description
 
-## Examples
\ No newline at end of file
+## Examples
diff --git a/docs/docs/patterns/ecommerce/category-filter.md b/docs/docs/patterns/ecommerce/category-filter.md
index 59c4b8606..b117fa931 100644
--- a/docs/docs/patterns/ecommerce/category-filter.md
+++ b/docs/docs/patterns/ecommerce/category-filter.md
@@ -7,7 +7,7 @@ isPro: true
 
 ## Sidebar with Checkboxes & Expandable Filters
 
-```html{.example}
+```html {.example}
   <h1>New Arrivals</h1>
   <div class="wa-flank wa-align-items-start" style="--flank-size: 200px;">
     <form class="wa-stack">
@@ -49,9 +49,9 @@ isPro: true
 
 ## Sidebar with Dropdowns
 
-```html{.example}
-  <h1>New Arrivals</h1>
- <div class="wa-flank wa-align-items-start">
+```html {.example}
+<h1>New Arrivals</h1>
+<div class="wa-flank wa-align-items-start">
   <div class="wa-stack">
     <wa-select label="Product Type" placeholder="Products" value="all-products">
       <wa-option value="all-products">All Products</wa-option>
@@ -81,4 +81,4 @@ isPro: true
   </div>
   <div class="wa-placeholder"></div>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/category-preview.md b/docs/docs/patterns/ecommerce/category-preview.md
index b71f18315..bb73a00f6 100644
--- a/docs/docs/patterns/ecommerce/category-preview.md
+++ b/docs/docs/patterns/ecommerce/category-preview.md
@@ -11,7 +11,10 @@ isPro: true
 <div class="wa-flank wa-align-items-start" style="--flank-size: 20rem;">
   <div class="wa-stack wa-gap-2xl">
     <h2 class="wa-heading-xl">Casual Collection</h2>
-    <p class="wa-body-s">Look good &mdash; without looking like you're trying too hard. Our casual collection includes laid back styles that work in <em>almost</em> any situation.</p>
+    <p class="wa-body-s">
+      Look good &mdash; without looking like you're trying too hard. Our casual collection includes laid back styles
+      that work in <em>almost</em> any situation.
+    </p>
     <wa-button>View the Collection</wa-button>
   </div>
   <div class="wa-stack">
@@ -139,25 +142,25 @@ isPro: true
     <h2 class="wa-heading-xl">New Arrivals</h2>
     <p class="wa-caption-l">Explore brand new furniture to accentuate your home aesthetic &mdash; just for you.</p>
   </div>
-<div class="wa-grid">
-  <div class="wa-stack">
-    <div class="wa-frame wa-border-radius-m">
-      <img
-        src="https://uploads.webawesome.com/indoor-furniture.jpg"
-        alt="Sunny room with a mid-century modern couch, accent chair, and elegant lamp"
-      />
+  <div class="wa-grid">
+    <div class="wa-stack">
+      <div class="wa-frame wa-border-radius-m">
+        <img
+          src="https://uploads.webawesome.com/indoor-furniture.jpg"
+          alt="Sunny room with a mid-century modern couch, accent chair, and elegant lamp"
+        />
+      </div>
+      <wa-button appearance="outlined">View Indoor Furniture</wa-button>
     </div>
-    <wa-button appearance="outlined">View Indoor Furniture</wa-button>
-  </div>
-  <div class="wa-stack">
-    <div class="wa-frame wa-border-radius-m">
-      <img
-        src="https://uploads.webawesome.com/outdoor-furniture.jpg"
-        alt="Covered patio with rustic wooden cabinets, writing desk, and stool"
-      />
+    <div class="wa-stack">
+      <div class="wa-frame wa-border-radius-m">
+        <img
+          src="https://uploads.webawesome.com/outdoor-furniture.jpg"
+          alt="Covered patio with rustic wooden cabinets, writing desk, and stool"
+        />
+      </div>
+      <wa-button appearance="outlined">View Outdoor Furniture</wa-button>
     </div>
-    <wa-button appearance="outlined">View Outdoor Furniture</wa-button>
   </div>
 </div>
-</div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/checkout-form.md b/docs/docs/patterns/ecommerce/checkout-form.md
index e3b8413b1..0669d811d 100644
--- a/docs/docs/patterns/ecommerce/checkout-form.md
+++ b/docs/docs/patterns/ecommerce/checkout-form.md
@@ -4,7 +4,6 @@ description: 'Let shoppers checkout with ease with streamlined forms to capture
 isPro: true
 ---
 
-
 ## Full Form with Order Summary Card
 
 ```html {.example}
@@ -32,7 +31,7 @@ isPro: true
     </div>
     <wa-input label="Phone"></wa-input>
     <wa-divider></wa-divider>
-      <wa-radio-group label="Shipping Method" name="shipping-method" value="standard" orientation="horizontal">
+    <wa-radio-group label="Shipping Method" name="shipping-method" value="standard" orientation="horizontal">
       <wa-radio value="standard" hint="7-10  business days">Standard</wa-radio>
       <wa-radio value="express" hint="2-5 business days">Express</wa-radio>
     </wa-radio-group>
@@ -55,7 +54,10 @@ isPro: true
       <div class="wa-stack">
         <div class="wa-flank wa-align-items-start" style="--flank-size: 7rem">
           <div class="wa-frame wa-border-radius-s">
-            <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM1MzB8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
+            <img
+              src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM1MzB8&ixlib=rb-4.0.3&q=80&w=1080"
+              alt=""
+            />
           </div>
           <div class="wa-stack wa-gap-xs">
             <div class="wa-split">
@@ -77,7 +79,10 @@ isPro: true
         <wa-divider></wa-divider>
         <div class="wa-flank wa-align-items-start" style="--flank-size: 7rem">
           <div class="wa-frame wa-border-radius-s">
-            <img src="https://images.unsplash.com/photo-1514989940723-e8e51635b782?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM1Njh8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
+            <img
+              src="https://images.unsplash.com/photo-1514989940723-e8e51635b782?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM1Njh8&ixlib=rb-4.0.3&q=80&w=1080"
+              alt=""
+            />
           </div>
           <div class="wa-stack wa-gap-xs">
             <div class="wa-split">
@@ -99,7 +104,10 @@ isPro: true
         <wa-divider></wa-divider>
         <div class="wa-flank wa-align-items-start" style="--flank-size: 7rem">
           <div class="wa-frame wa-border-radius-s">
-            <img src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM2MTF8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
+            <img
+              src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM2MTF8&ixlib=rb-4.0.3&q=80&w=1080"
+              alt=""
+            />
           </div>
           <div class="wa-stack wa-gap-xs">
             <div class="wa-split">
@@ -183,7 +191,10 @@ isPro: true
     <div class="wa-split">
       <div class="wa-cluster">
         <div class="wa-frame wa-border-radius-m" style="max-width: 4rem">
-          <img src="https://images.unsplash.com/photo-1618677366787-9727aacca7ea?q=80&w=3255&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Glasses with black wire frames and dark tinted, circular lenses (Photograph by Colin Lloyd)">
+          <img
+            src="https://images.unsplash.com/photo-1618677366787-9727aacca7ea?q=80&w=3255&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt="Glasses with black wire frames and dark tinted, circular lenses (Photograph by Colin Lloyd)"
+          />
         </div>
         <strong>Morpheus</strong>
       </div>
@@ -195,7 +206,10 @@ isPro: true
     <div class="wa-split">
       <div class="wa-cluster">
         <div class="wa-frame wa-border-radius-m" style="max-width: 4rem">
-          <img src="https://images.unsplash.com/photo-1511499767150-a48a237f0083?q=80&w=3558&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Glasses with rose gold wire frames and green tinted, circular lenses (Photograph by Charles Deluvio)">
+          <img
+            src="https://images.unsplash.com/photo-1511499767150-a48a237f0083?q=80&w=3558&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt="Glasses with rose gold wire frames and green tinted, circular lenses (Photograph by Charles Deluvio)"
+          />
         </div>
         <div class="wa-stack wa-gap-3xs">
           <strong>Seraph</strong>
@@ -210,7 +224,10 @@ isPro: true
     <div class="wa-split">
       <div class="wa-cluster">
         <div class="wa-frame wa-border-radius-m" style="max-width: 4rem">
-          <img src="https://images.unsplash.com/photo-1547104442-a40f335740cb?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Glasses with tortoise shell half frames and large, rounded lenses (Photograph by Sincerely Media)">
+          <img
+            src="https://images.unsplash.com/photo-1547104442-a40f335740cb?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt="Glasses with tortoise shell half frames and large, rounded lenses (Photograph by Sincerely Media)"
+          />
         </div>
         <div class="wa-stack wa-gap-3xs">
           <strong>Keymaker</strong>
@@ -242,4 +259,4 @@ isPro: true
     </div>
   </div>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/incentives.md b/docs/docs/patterns/ecommerce/incentives.md
index 870262e86..1c117885f 100644
--- a/docs/docs/patterns/ecommerce/incentives.md
+++ b/docs/docs/patterns/ecommerce/incentives.md
@@ -6,75 +6,93 @@ isPro: true
 
 ## 3 Column
 
-```html{.example}
+```html {.example}
 <div class="wa-gap-3xl wa-stack" style="max-width: 960px; margin: 0 auto;">
   <div class="wa-align-items-center wa-grid">
     <div>
       <span class="wa-heading-xl">Unlock your Superpower</span>
-      <p class="wa-caption-l">Web development is like a superpower—you can turn your ideas into actual products online, and learning it from home means you don’t need a fancy degree or expensive tuition to start building your future.</p>
+      <p class="wa-caption-l">
+        Web development is like a superpower—you can turn your ideas into actual products online, and learning it from
+        home means you don’t need a fancy degree or expensive tuition to start building your future.
+      </p>
     </div>
     <div class="wa-frame wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1551981878-4c70c3e64135?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      <img
+        src="https://images.unsplash.com/photo-1551981878-4c70c3e64135?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      />
     </div>
-
   </div>
   <div class="wa-grid">
     <div class="wa-stack wa-gap-xs">
       <wa-icon name="briefcase" variant="light" style="font-size: 32px;"></wa-icon>
       <span class="wa-heading-s">Career Opportunities</span>
-      <p class="wa-caption-m">Mastering web development can lead to high-paying jobs, freelancing gigs, or even launching your own business or app.</p>
+      <p class="wa-caption-m">
+        Mastering web development can lead to high-paying jobs, freelancing gigs, or even launching your own business or
+        app.
+      </p>
     </div>
     <div class="wa-stack wa-gap-xs">
       <wa-icon name="laptop-code" variant="light" style="font-size: 32px;"></wa-icon>
       <span class="wa-heading-s">Flexibility of Online Learning</span>
-      <p class="wa-caption-m">Perfect for people balancing school, work, or other responsibilities—no need to attend in-person classes</p>
+      <p class="wa-caption-m">
+        Perfect for people balancing school, work, or other responsibilities—no need to attend in-person classes
+      </p>
     </div>
     <div class="wa-stack wa-gap-xs">
       <wa-icon name="palette" variant="light" style="font-size: 32px;"></wa-icon>
       <span class="wa-heading-s">Creative & Practical Skillset</span>
-      <p class="wa-caption-m">You can build real, functional things like personal portfolios, blogs, or web apps—and immediately see your progress.</p>
+      <p class="wa-caption-m">
+        You can build real, functional things like personal portfolios, blogs, or web apps—and immediately see your
+        progress.
+      </p>
     </div>
   </div>
 </div>
 ```
+
 ## 2 Column with Cards
 
-```html{.example}
+```html {.example}
 <div class="wa-grid" style="--min-column-size: 24ch;">
   <wa-card>
     <div class="wa-flank">
-    <div>
-      <wa-icon name="hands" style="font-size: 2.5rem;"></wa-icon>
-    </div>
-    <div class="wa-gap-s wa-stack">
-      <span class="wa-heading-m">Hands-on training</span>
-      <p class="wa-caption-l">Upskill effectively with AI-powered coding exercises, practice tests, and quizzes.</p>
-    </div>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-flank">
-    <div>
-      <wa-icon name="medal" style="font-size: 2.5rem;"></wa-icon>
-    </div>
-    <div class="wa-gap-s wa-stack">
-      <span class="wa-heading-m">Certification prep</span>
-      <p class="wa-caption-l">Prep for industry-recognized certifications by solving real-world challenges and earn badges along the way</p>
-    </div>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-flank">
-    <div>
-      <wa-icon name="chart-line" style="font-size: 2.5rem;"></wa-icon>
-    </div>
-    <div class="wa-gap-s wa-stack">
-      <div class="wa-split wa-gap-2xs">
-        <span class="wa-heading-m">Insights and analytics</span>
-        <wa-badge appearance="filled outlined" variant="warning">Pro Plan</wa-badge>
+      <div>
+        <wa-icon name="hands" style="font-size: 2.5rem;"></wa-icon>
+      </div>
+      <div class="wa-gap-s wa-stack">
+        <span class="wa-heading-m">Hands-on training</span>
+        <p class="wa-caption-l">Upskill effectively with AI-powered coding exercises, practice tests, and quizzes.</p>
       </div>
-      <p class="wa-caption-l">Fast-track goals with advanced insights plus a dedicated customer success team to help drive effective learning.</p>
     </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank">
+      <div>
+        <wa-icon name="medal" style="font-size: 2.5rem;"></wa-icon>
+      </div>
+      <div class="wa-gap-s wa-stack">
+        <span class="wa-heading-m">Certification prep</span>
+        <p class="wa-caption-l">
+          Prep for industry-recognized certifications by solving real-world challenges and earn badges along the way
+        </p>
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank">
+      <div>
+        <wa-icon name="chart-line" style="font-size: 2.5rem;"></wa-icon>
+      </div>
+      <div class="wa-gap-s wa-stack">
+        <div class="wa-split wa-gap-2xs">
+          <span class="wa-heading-m">Insights and analytics</span>
+          <wa-badge appearance="filled outlined" variant="warning">Pro Plan</wa-badge>
+        </div>
+        <p class="wa-caption-l">
+          Fast-track goals with advanced insights plus a dedicated customer success team to help drive effective
+          learning.
+        </p>
+      </div>
     </div>
   </wa-card>
   <wa-card>
@@ -87,7 +105,9 @@ isPro: true
           <span class="wa-heading-m">Customizable content</span>
           <wa-badge appearance="filled outlined" variant="warning">Pro Plan</wa-badge>
         </div>
-        <p class="wa-caption-l">Create tailored learning paths for team and organization goals and even host your own content and resources.</p>
+        <p class="wa-caption-l">
+          Create tailored learning paths for team and organization goals and even host your own content and resources.
+        </p>
       </div>
     </div>
   </wa-card>
@@ -96,10 +116,10 @@ isPro: true
 
 ## 4 Column
 
-```html{.example}
+```html {.example}
 <div>
-<div class="wa-grid" style="--min-column-size: 16ch;">
-  <div class="wa-stack wa-gap-xs">
+  <div class="wa-grid" style="--min-column-size: 16ch;">
+    <div class="wa-stack wa-gap-xs">
       <wa-icon family="duotone" name="magnifying-glass" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
       <span class="wa-heading-s">In-Demand Skills</span>
       <p class="wa-caption-m">Learn skills that lead to well-paying jobs, freelance work, or remote opportunities.</p>
@@ -107,7 +127,9 @@ isPro: true
     <div class="wa-stack wa-gap-xs">
       <wa-icon family="duotone" name="chalkboard-user" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
       <span class="wa-heading-s">Learn Anytime, Anywhere</span>
-      <p class="wa-caption-m">Flexible learning fits into any schedule—perfect for students, parents, or full-time workers.</p>
+      <p class="wa-caption-m">
+        Flexible learning fits into any schedule—perfect for students, parents, or full-time workers.
+      </p>
     </div>
     <div class="wa-stack wa-gap-xs">
       <wa-icon family="duotone" name="people-arrows" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
@@ -119,6 +141,6 @@ isPro: true
       <span class="wa-heading-s">Low-Cost Entry</span>
       <p class="wa-caption-m">You don’t need a tech degree or expensive tools to get started</p>
     </div>
+  </div>
 </div>
-</div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/order-history.md b/docs/docs/patterns/ecommerce/order-history.md
index b2dca8b54..ac5026e7d 100644
--- a/docs/docs/patterns/ecommerce/order-history.md
+++ b/docs/docs/patterns/ecommerce/order-history.md
@@ -31,17 +31,17 @@ isPro: true
   <wa-divider></wa-divider>
   <div class="wa-flank" style="--flank-size: 12rem">
     <div class="wa-frame wa-border-radius-s" style="aspect-ratio: 3 / 2">
-      <img
-        src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg"
-        alt=""
-      />
+      <img src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg" alt="" />
     </div>
     <div class="wa-stack">
       <div class="wa-split">
         <span><strong>Dome Light Fixtures</strong></span>
         <span><strong>$215.00</strong></span>
       </div>
-      <p class="wa-caption-m">Illuminate your space with elegance and style with stunning Dome Light Fixtures. The shape of these lights complements both modern and traditional interiors.</p>
+      <p class="wa-caption-m">
+        Illuminate your space with elegance and style with stunning Dome Light Fixtures. The shape of these lights
+        complements both modern and traditional interiors.
+      </p>
       <div class="wa-split">
         <wa-badge appearance="filled" variant="success">Delivered</wa-badge>
         <div class="wa-cluster">
@@ -54,17 +54,17 @@ isPro: true
   <wa-divider></wa-divider>
   <div class="wa-flank" style="--flank-size: 12rem">
     <div class="wa-frame wa-border-radius-s" style="aspect-ratio: 3 / 2">
-      <img
-        src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg"
-        alt=""
-      />
+      <img src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg" alt="" />
     </div>
     <div class="wa-stack">
       <div class="wa-split">
         <span><strong>Reading Chair</strong></span>
         <span><strong>$115.00</strong></span>
       </div>
-      <p class="wa-caption-m">Add a pop of color and a touch of elegance to any room with our Reading Chair featuring vibrant yellow fabric upholstery.</p>
+      <p class="wa-caption-m">
+        Add a pop of color and a touch of elegance to any room with our Reading Chair featuring vibrant yellow fabric
+        upholstery.
+      </p>
       <div class="wa-split">
         <wa-badge appearance="filled" variant="brand">Out for delivery</wa-badge>
         <div class="wa-cluster">
@@ -77,17 +77,17 @@ isPro: true
   <wa-divider></wa-divider>
   <div class="wa-flank" style="--flank-size: 12rem">
     <div class="wa-frame wa-border-radius-s" style="aspect-ratio: 3 / 2">
-      <img
-        src="https://img.fortawesome.com/cfa83f3c/sofa.jpg"
-        alt=""
-      />
+      <img src="https://img.fortawesome.com/cfa83f3c/sofa.jpg" alt="" />
     </div>
     <div class="wa-stack">
       <div class="wa-split">
         <span><strong>Custom Sofa</strong></span>
         <span><strong>$260.00</strong></span>
       </div>
-      <p class="wa-caption-m">Experience luxury and comfort like never before with our Custom Sofa, designed to elevate any living space. This sofa features exquisite velvet upholstery for an air of sophistication.</p>
+      <p class="wa-caption-m">
+        Experience luxury and comfort like never before with our Custom Sofa, designed to elevate any living space. This
+        sofa features exquisite velvet upholstery for an air of sophistication.
+      </p>
       <div class="wa-split">
         <wa-badge appearance="filled" variant="neutral">Preparing to ship</wa-badge>
         <div class="wa-cluster">
@@ -139,10 +139,7 @@ isPro: true
         <td>
           <div class="wa-cluster wa-align-items-start">
             <div class="wa-frame:landscape wa-border-radius-s" style="max-width: 8rem">
-              <img
-                src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg"
-                alt=""
-              />
+              <img src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg" alt="" />
             </div>
             <span>Dome Light Fixtures</span>
           </div>
@@ -155,10 +152,7 @@ isPro: true
         <td>
           <div class="wa-cluster wa-align-items-start">
             <div class="wa-frame:landscape wa-border-radius-s" style="max-width: 8rem">
-              <img
-                src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg"
-                alt=""
-              />
+              <img src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg" alt="" />
             </div>
             <span>Reading Chair</span>
           </div>
@@ -171,10 +165,7 @@ isPro: true
         <td>
           <div class="wa-cluster wa-align-items-start">
             <div class="wa-frame:landscape wa-border-radius-s" style="max-width: 8rem">
-              <img
-                src="https://img.fortawesome.com/cfa83f3c/sofa.jpg"
-                alt=""
-              />
+              <img src="https://img.fortawesome.com/cfa83f3c/sofa.jpg" alt="" />
             </div>
             <span>Custom Sofa</span>
           </div>
@@ -187,15 +178,17 @@ isPro: true
   </table>
 </div>
 ```
+
 ## Card separated
-```html{.example}
+
+```html {.example}
 <div class="wa-stack" style="max-width: 60ch; margin: 0 auto;">
   <wa-card>
     <div class="wa-flank:end">
       <div class="wa-stack">
         <div class="wa-cluster wa-gap-xs">
           <wa-avatar shape="rounded" label="Avatar with an image icon">
-            <wa-icon slot="icon"family="brands" name="amazon"></wa-icon>
+            <wa-icon slot="icon" family="brands" name="amazon"></wa-icon>
           </wa-avatar>
           <span class="wa-heading-s">Amazon</span>
         </div>
@@ -205,7 +198,9 @@ isPro: true
         </div>
       </div>
       <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
-        <img src="https://images.unsplash.com/photo-1589810635657-232948472d98?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        <img
+          src="https://images.unsplash.com/photo-1589810635657-232948472d98?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        />
       </div>
     </div>
   </wa-card>
@@ -224,7 +219,9 @@ isPro: true
         </div>
       </div>
       <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
-        <img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?q=80&w=2400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        <img
+          src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?q=80&w=2400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        />
       </div>
     </div>
   </wa-card>
@@ -233,7 +230,7 @@ isPro: true
       <div class="wa-stack">
         <div class="wa-cluster wa-gap-xs">
           <wa-avatar shape="rounded" label="Avatar with an image icon">
-            <wa-icon slot="icon"  variant="duotone" name="gamepad-modern"></wa-icon>
+            <wa-icon slot="icon" variant="duotone" name="gamepad-modern"></wa-icon>
           </wa-avatar>
           <span class="wa-heading-s">Game Theory</span>
         </div>
@@ -243,9 +240,11 @@ isPro: true
         </div>
       </div>
       <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
-        <img src="https://images.unsplash.com/photo-1627421383054-488d9c9828f5?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        <img
+          src="https://images.unsplash.com/photo-1627421383054-488d9c9828f5?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        />
       </div>
     </div>
   </wa-card>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/order-summary.md b/docs/docs/patterns/ecommerce/order-summary.md
index 61717a9ca..d8688073f 100644
--- a/docs/docs/patterns/ecommerce/order-summary.md
+++ b/docs/docs/patterns/ecommerce/order-summary.md
@@ -5,6 +5,7 @@ isPro: true
 ---
 
 ## Simple
+
 ```html {.example}
 <div class="wa-stack wa-gap-xl">
   <wa-callout variant="success">
@@ -25,10 +26,7 @@ isPro: true
           <ul class="wa-stack wa-gap-xl">
             <li class="wa-flank wa-align-items-start">
               <div class="wa-frame wa-border-radius-s">
-                <img
-                  src="https://uploads.webawesome.com/vase-1.jpg"
-                  alt=""
-                />
+                <img src="https://uploads.webawesome.com/vase-1.jpg" alt="" />
               </div>
               <div class="wa-split">
                 <span class="wa-heading-s">Spotted Flower Pot</span>
@@ -38,10 +36,7 @@ isPro: true
             <wa-divider></wa-divider>
             <li class="wa-flank wa-align-items-start">
               <div class="wa-frame wa-border-radius-s">
-                <img
-                  src="https://uploads.webawesome.com/decorative-vase.jpg"
-                  alt=""
-                />
+                <img src="https://uploads.webawesome.com/decorative-vase.jpg" alt="" />
               </div>
               <div class="wa-split">
                 <span class="wa-heading-s">Decorative Vase</span>
@@ -81,8 +76,8 @@ isPro: true
             </dd>
             <dt>Payment Information</dt>
             <dd class="wa-flank wa-gap-s">
-                <wa-icon label="Visa" class="wa-body-xl" family="brands" name="cc-visa" style="color: #224DBA;"></wa-icon>
-                <span>Ending with 9065</span>
+              <wa-icon label="Visa" class="wa-body-xl" family="brands" name="cc-visa" style="color: #224DBA;"></wa-icon>
+              <span>Ending with 9065</span>
             </dd>
           </dl>
         </wa-callout>
@@ -103,7 +98,10 @@ isPro: true
   <h2>Order Details</h2>
   <div class="wa-split">
     <div class="wa-cluster">
-      <span>Order placed <wa-format-date date="2025-02-26T09:00:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date></span>
+      <span
+        >Order placed
+        <wa-format-date date="2025-02-26T09:00:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date
+      ></span>
       <wa-divider vertical style="height: 2em"></wa-divider>
       <span>Order # 45646456-4656-4542</span>
     </div>
@@ -162,10 +160,7 @@ isPro: true
         <h3 class="wa-heading-s">Arriving Saturday</h3>
         <div class="wa-flank wa-align-items-start">
           <div class="wa-frame wa-border-radius-s">
-            <img
-              src="https://uploads.webawesome.com/sparkling-water.jpg"
-              alt=""
-            />
+            <img src="https://uploads.webawesome.com/sparkling-water.jpg" alt="" />
           </div>
           <div class="wa-stack">
             <a href="" class="wa-caption-m">Mineragua Sparkling Water 12 Count</a>
@@ -200,15 +195,15 @@ isPro: true
       <h2>Order #7093</h2>
       <a href="">View Invoice</a>
     </div>
-    <p class="wa-caption-m">Order placed <wa-format-date date="2025-06-12T09:00:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date></p>
+    <p class="wa-caption-m">
+      Order placed
+      <wa-format-date date="2025-06-12T09:00:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date>
+    </p>
   </div>
   <wa-card>
     <div class="wa-flank wa-align-items-start">
       <div class="wa-frame wa-border-radius-s">
-        <img
-          src="https://uploads.webawesome.com/vase-1.jpg"
-          alt=""
-        />
+        <img src="https://uploads.webawesome.com/vase-1.jpg" alt="" />
       </div>
       <div class="wa-stack wa-align-items-start wa-gap-s">
         <div class="wa-split wa-gap-s">
@@ -223,10 +218,7 @@ isPro: true
   <wa-card>
     <div class="wa-flank wa-align-items-start">
       <div class="wa-frame wa-border-radius-s">
-        <img
-          src="https://uploads.webawesome.com/decorative-vase.jpg"
-          alt=""
-        />
+        <img src="https://uploads.webawesome.com/decorative-vase.jpg" alt="" />
       </div>
       <div class="wa-stack wa-align-items-start wa-gap-s">
         <div class="wa-split wa-gap-s">
@@ -241,10 +233,7 @@ isPro: true
   <wa-card>
     <div class="wa-flank wa-align-items-start">
       <div class="wa-frame wa-border-radius-s">
-        <img
-          src="https://uploads.webawesome.com/cuong-duyen-ceramic.jpg"
-          alt=""
-        />
+        <img src="https://uploads.webawesome.com/cuong-duyen-ceramic.jpg" alt="" />
       </div>
       <div class="wa-stack wa-align-items-start wa-gap-s">
         <div class="wa-split wa-gap-s">
@@ -292,4 +281,4 @@ isPro: true
     </div>
   </wa-callout>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/product-list.md b/docs/docs/patterns/ecommerce/product-list.md
index 3be40f4c4..2165ac775 100644
--- a/docs/docs/patterns/ecommerce/product-list.md
+++ b/docs/docs/patterns/ecommerce/product-list.md
@@ -114,7 +114,8 @@ isPro: true
   <div class="wa-grid">
     <a href="" class="wa-link-plain">
       <wa-card>
-        <img slot="image"
+        <img
+          slot="image"
           src="https://images.unsplash.com/photo-1622445272461-c6580cab8755?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Man in a relaxed fit, white, crew neck t-shirt (Photography by Mediamodifier)"
         />
@@ -123,14 +124,17 @@ isPro: true
             <span>Plain Classic Tee</span>
             <span>$24</span>
           </div>
-          <p class="wa-caption-m">Keep it casual or dress it up. Soft, 100% cotton with a crew neckline, perfect for any occasion.</p>
+          <p class="wa-caption-m">
+            Keep it casual or dress it up. Soft, 100% cotton with a crew neckline, perfect for any occasion.
+          </p>
           <em class="wa-caption-m">8 colors</em>
         </div>
       </wa-card>
     </a>
     <a href="" class="wa-link-plain">
       <wa-card>
-        <img slot="image"
+        <img
+          slot="image"
           src="https://images.unsplash.com/photo-1554568218-0f1715e72254?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Woman in a light heather t-shirt printed with sharp black ink (Photograph by Christian Bolt)"
         />
@@ -139,7 +143,9 @@ isPro: true
             <span>One-color Graphic Tee</span>
             <span>$32</span>
           </div>
-          <p class="wa-caption-m">Your own spin on our classic tee. Hand screen printed for the ultimate accuracy and quality.</p>
+          <p class="wa-caption-m">
+            Your own spin on our classic tee. Hand screen printed for the ultimate accuracy and quality.
+          </p>
           <em class="wa-caption-m">6 colors</em>
         </div>
       </wa-card>
@@ -148,7 +154,8 @@ isPro: true
   <div class="wa-grid">
     <a href="" class="wa-link-plain">
       <wa-card>
-        <img slot="image"
+        <img
+          slot="image"
           src="https://images.unsplash.com/photo-1567098260939-5d9cee055592?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Man in a black t-shirt printed with many-colored gradients (Photograph by Marcel)"
         />
@@ -157,14 +164,17 @@ isPro: true
             <span>Multi-color Graphic Tee</span>
             <span>$36</span>
           </div>
-          <p class="wa-caption-m">Make a statement. Screen printed with vibrant, quality inks to last wash after wash.</p>
+          <p class="wa-caption-m">
+            Make a statement. Screen printed with vibrant, quality inks to last wash after wash.
+          </p>
           <em class="wa-caption-m">4 colors</em>
         </div>
       </wa-card>
     </a>
     <a href="" class="wa-link-plain">
       <wa-card>
-        <img slot="image"
+        <img
+          slot="image"
           src="https://images.unsplash.com/photo-1709185727063-c3caae752a64?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Woman in a black t-shirt with a bright white logo printed on the pocket (Photograph by SASI)"
         />
@@ -173,11 +183,13 @@ isPro: true
             <span>Pocket Graphic Tee</span>
             <span>$29</span>
           </div>
-          <p class="wa-caption-m">Go classic with a bit of your own flair. Screen printed, eye-catching detail on the pocket.</p>
+          <p class="wa-caption-m">
+            Go classic with a bit of your own flair. Screen printed, eye-catching detail on the pocket.
+          </p>
           <em class="wa-caption-m">6 colors</em>
         </div>
       </wa-card>
     </a>
   </div>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/product-overview.md b/docs/docs/patterns/ecommerce/product-overview.md
index 9f5d9e579..1bd92eb22 100644
--- a/docs/docs/patterns/ecommerce/product-overview.md
+++ b/docs/docs/patterns/ecommerce/product-overview.md
@@ -10,7 +10,11 @@ isPro: true
 <div class="wa-grid wa-gap-2xl">
   <div class="wa-stack wa-gap-2xl">
     <h2>San Ignacio Pache</h2>
-    <p>A smooth, balanced Arabica varietal, grown and roasted on the Guerrero family's farm. Rich caramel and malt flavors blend with bright citrus for a complex brew suitable for drip, pour over, espresso, or however you take your coffee.</p>
+    <p>
+      A smooth, balanced Arabica varietal, grown and roasted on the Guerrero family's farm. Rich caramel and malt
+      flavors blend with bright citrus for a complex brew suitable for drip, pour over, espresso, or however you take
+      your coffee.
+    </p>
     <div class="wa-stack">
       <wa-select label="Bag Size" value="12oz">
         <wa-option value="12oz">12 oz &ndash; $19.95</wa-option>
@@ -95,27 +99,31 @@ isPro: true
   </wa-breadcrumb>
   <div class="wa-grid wa-gap-xs" style="--min-column-size: 10ch">
     <div class="wa-frame" style="height: 100%; width: 100%">
-      <img class="wa-border-radius-s"
+      <img
+        class="wa-border-radius-s"
         src="https://images.unsplash.com/photo-1614792568992-ded1c487c1dd?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="(Photograph by Patrick Perkins)"
       />
     </div>
     <div class="wa-grid wa-gap-xs">
       <div class="wa-frame" style="aspect-ratio: 3 / 2">
-        <img class="wa-border-radius-s"
+        <img
+          class="wa-border-radius-s"
           src="https://images.unsplash.com/photo-1614725078749-29c421fd0e51?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="(Photograph by Patrick Perkins)"
         />
       </div>
       <div class="wa-frame" style="aspect-ratio: 3 / 2">
-        <img class="wa-border-radius-s"
+        <img
+          class="wa-border-radius-s"
           src="https://images.unsplash.com/photo-1614725808713-e6bbe418fc5d?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="(Photograph by Patrick Perkins)"
         />
       </div>
     </div>
     <div class="wa-frame" style="height: 100%; width: 100%">
-      <img class="wa-border-radius-s"
+      <img
+        class="wa-border-radius-s"
         src="https://images.unsplash.com/photo-1614725078379-9d1330a08c95?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="(Photograph by Patrick Perkins)"
       />
@@ -131,10 +139,16 @@ isPro: true
         <wa-rating label="Rating" readonly value="3.5"></wa-rating>
         <a href="">117 Reviews</a>
       </div>
-      <p>Made with a breathable, stretchy fabric blend for unparalleled comfort and flattering style. Pairs perfectly with your favorite high-waisted jeans for lazy summer weekends or lively nights out.</p>
+      <p>
+        Made with a breathable, stretchy fabric blend for unparalleled comfort and flattering style. Pairs perfectly
+        with your favorite high-waisted jeans for lazy summer weekends or lively nights out.
+      </p>
       <div class="wa-stack wa-gap-xs">
         <h3 class="wa-heading-xs">Good to Know</h3>
-        <p class="wa-body-xs">95% cotton, 5% elastane. Our tops are pre-shrunk to ensure a consistent fit with no surprises. Machine wash cold. Tumble dry low.</p>
+        <p class="wa-body-xs">
+          95% cotton, 5% elastane. Our tops are pre-shrunk to ensure a consistent fit with no surprises. Machine wash
+          cold. Tumble dry low.
+        </p>
       </div>
     </div>
     <div class="wa-stack">
@@ -183,16 +197,19 @@ isPro: true
   </wa-breadcrumb>
   <div class="wa-grid wa-gap-2xl" style="--min-column-size: 35ch">
     <div class="wa-stack wa-gap-xs">
-      <img class="wa-border-radius-s"
+      <img
+        class="wa-border-radius-s"
         src="https://images.unsplash.com/photo-1630643583573-c68623718072?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="(Photograph by Gervyn Louis)"
       />
       <div class="wa-grid wa-gap-xs" style="--min-column-size: 0ch">
-        <img class="wa-border-radius-s"
+        <img
+          class="wa-border-radius-s"
           src="https://images.unsplash.com/photo-1571666274590-f8cc87006500?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="(Photograph by Gervyn Louis)"
         />
-        <img class="wa-border-radius-s"
+        <img
+          class="wa-border-radius-s"
           src="https://images.unsplash.com/photo-1630643591760-a6ed60ef499f?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="(Photograph by Gervyn Louis)"
         />
@@ -233,7 +250,11 @@ isPro: true
       </wa-button>
       <wa-divider></wa-divider>
       <h3 class="wa-heading-s">Description</h3>
-      <p>Stay cool, <em>slay</em> cool. Train hard and recover in style with this ultra-breathable cutoff tee. Made from 100% organic, quick-drying cotton to keep the air flowing whether you're lifting, sprinting, or crushing HIIT sessions.</p>
+      <p>
+        Stay cool, <em>slay</em> cool. Train hard and recover in style with this ultra-breathable cutoff tee. Made from
+        100% organic, quick-drying cotton to keep the air flowing whether you're lifting, sprinting, or crushing HIIT
+        sessions.
+      </p>
       <wa-divider></wa-divider>
       <h3 class="wa-heading-s">Highlights</h3>
       <div class="wa-grid">
@@ -241,7 +262,9 @@ isPro: true
           <div class="wa-stack">
             <wa-icon name="hand-holding-heart"></wa-icon>
             <h4 class="wa-heading-s">People and Planet First</h4>
-            <p class="wa-caption-m">Ethical production, fair wages, and sustainable materials empower every part of our supply chain.</p>
+            <p class="wa-caption-m">
+              Ethical production, fair wages, and sustainable materials empower every part of our supply chain.
+            </p>
           </div>
         </wa-card>
         <wa-card>
@@ -301,7 +324,10 @@ isPro: true
         <span class="wa-body-xl">$140</span>
       </div>
       <wa-rating label="Rating" precision="0.5" value="4.5" readonly></wa-rating>
-      <p>Wrap yourself in warmth and effortless style with this wool knit Pullover Sweater. Designed for unparalleled comfort. The relaxed fit and classic crew neckline make it a versatile staple for layering or wearing solo.</p>
+      <p>
+        Wrap yourself in warmth and effortless style with this wool knit Pullover Sweater. Designed for unparalleled
+        comfort. The relaxed fit and classic crew neckline make it a versatile staple for layering or wearing solo.
+      </p>
       <wa-radio-group label="Color" name="color" value="sand" orientation="horizontal">
         <wa-radio-button value="sand">
           <wa-icon slot="prefix" name="circle" style="color: burlywood;"></wa-icon>
@@ -353,13 +379,13 @@ isPro: true
 </div>
 ```
 
-
 ## With Tabs
 
 ```html {.example}
 <div class="wa-flank:end wa-align-items-start wa-gap-2xl" style="--flank-size: 30ch">
   <div class="wa-stack">
-    <img class="wa-border-radius-l"
+    <img
+      class="wa-border-radius-l"
       src="https://img.fortawesome.com/cfa83f3c/icon-grid-wallpaper.png"
       alt="Sample of 48 line-style icons"
     />
@@ -367,16 +393,29 @@ isPro: true
       <wa-tab panel="license">License</wa-tab>
       <wa-tab panel="faq">FAQ</wa-tab>
       <wa-tab-panel name="license">
-        <p class="wa-body-s">Your purchase includes a perpetual Font Awesome Pro License to use Classic Light icons on unlimited projects. <a href="">Read the full license terms.</a></p>
+        <p class="wa-body-s">
+          Your purchase includes a perpetual Font Awesome Pro License to use Classic Light icons on unlimited projects.
+          <a href="">Read the full license terms.</a>
+        </p>
       </wa-tab-panel>
       <wa-tab-panel name="faq">
         <dl class="wa-stack wa-body-s">
           <dt>Do I need to renew my subscription to receive fixes?</dt>
-          <dd>We split up Font Awesome releases into regular updates and bug-fix updates. With a Font Awesome Pro plan that has a perpetual license, you'll always be entitled to bug-fix updates for your last version, even after your subscription has expired.</dd>
+          <dd>
+            We split up Font Awesome releases into regular updates and bug-fix updates. With a Font Awesome Pro plan
+            that has a perpetual license, you'll always be entitled to bug-fix updates for your last version, even after
+            your subscription has expired.
+          </dd>
           <dt>Can I use Font Awesome Pro in themes, plug-ins, or open source projects?</dt>
-          <dd>For themes and open source projects, right now it's best to just use Font Awesome Free. We are working a better solution, so feel free to get in touch if you have thoughts.</dd>
+          <dd>
+            For themes and open source projects, right now it's best to just use Font Awesome Free. We are working a
+            better solution, so feel free to get in touch if you have thoughts.
+          </dd>
           <dt>Do you offer enterprise licenses for Font Awesome Pro?</dt>
-          <dd>We don't currently offer Enterprise-level licenses, but we may do so in the future. Get in touch if interested.</dd>
+          <dd>
+            We don't currently offer Enterprise-level licenses, but we may do so in the future. Get in touch if
+            interested.
+          </dd>
         </dl>
       </wa-tab-panel>
     </wa-tab-group>
@@ -395,36 +434,36 @@ isPro: true
     </wa-button>
     <wa-divider></wa-divider>
     <h3 class="wa-heading-m">What's in the Pack</h3>
-      <ul class="wa-stack wa-gap-xs">
-        <li class="wa-flank">
-          <wa-icon name="badge-check"></wa-icon>
-          <span>3,323 icons</span>
-        </li>
-        <li class="wa-flank">
-          <wa-icon name="badge-check"></wa-icon>
-          <span>Pre-bundled Font Awesome kit</span>
-        </li>
-        <li class="wa-flank">
-          <wa-icon name="badge-check"></wa-icon>
-          <span>Ligature-based desktop font files</span>
-        </li>
-        <li class="wa-flank">
-          <wa-icon name="badge-check"></wa-icon>
-          <span>Individual SVGs + SVG sprites</span>
-        </li>
-        <li class="wa-flank">
-          <wa-icon name="badge-check"></wa-icon>
-          <span>Web fonts + SVG framework</span>
-        </li>
-        <li class="wa-flank">
-          <wa-icon name="badge-check"></wa-icon>
-          <span>SCSS/LESS CSS preprocessor files</span>
-        </li>
-        <li class="wa-flank">
-          <wa-icon name="badge-check"></wa-icon>
-          <span>Perpetual Pro license</span>
-        </li>
-      </ul>
+    <ul class="wa-stack wa-gap-xs">
+      <li class="wa-flank">
+        <wa-icon name="badge-check"></wa-icon>
+        <span>3,323 icons</span>
+      </li>
+      <li class="wa-flank">
+        <wa-icon name="badge-check"></wa-icon>
+        <span>Pre-bundled Font Awesome kit</span>
+      </li>
+      <li class="wa-flank">
+        <wa-icon name="badge-check"></wa-icon>
+        <span>Ligature-based desktop font files</span>
+      </li>
+      <li class="wa-flank">
+        <wa-icon name="badge-check"></wa-icon>
+        <span>Individual SVGs + SVG sprites</span>
+      </li>
+      <li class="wa-flank">
+        <wa-icon name="badge-check"></wa-icon>
+        <span>Web fonts + SVG framework</span>
+      </li>
+      <li class="wa-flank">
+        <wa-icon name="badge-check"></wa-icon>
+        <span>SCSS/LESS CSS preprocessor files</span>
+      </li>
+      <li class="wa-flank">
+        <wa-icon name="badge-check"></wa-icon>
+        <span>Perpetual Pro license</span>
+      </li>
+    </ul>
   </div>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/product-preview.md b/docs/docs/patterns/ecommerce/product-preview.md
index e3a7059cf..c143a79c4 100644
--- a/docs/docs/patterns/ecommerce/product-preview.md
+++ b/docs/docs/patterns/ecommerce/product-preview.md
@@ -23,7 +23,7 @@ isPro: true
     <div class="wa-split:column wa-align-items-stretch wa-gap-xl">
       <div class="wa-stack wa-gap-xl">
         <div class="wa-cluster">
-        <span class="wa-heading-2xl">$32</span>
+          <span class="wa-heading-2xl">$32</span>
           <wa-divider vertical style="height: 2em"></wa-divider>
           <wa-rating label="Rating" value="3.75" readonly></wa-rating>
           <a href="" class="wa-caption-m">36 Reviews</a>
@@ -92,7 +92,7 @@ isPro: true
 
 ## With Description & Details
 
-```html{.example}
+```html {.example}
 <wa-card>
   <div class="wa-split" slot="header">
     <h3 class="wa-heading-l">Champion® Crossbody Bag</h3>
@@ -122,11 +122,15 @@ isPro: true
         <wa-divider></wa-divider>
         <wa-callout size="small">
           <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
-          You purchased this item on <wa-format-date date="2023-02-20T09:00:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date>
+          You purchased this item on
+          <wa-format-date date="2023-02-20T09:00:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date>
         </wa-callout>
         <div class="wa-gap-xs wa-stack">
           <h4 class="wa-heading-m">About</h4>
-          <p class="wa-body-s">The Champion® Crossbody Bag is crafted for the trendsetter. Its sleek silhouette, paired with a tonal branded adjustable sling strap, ensures you look effortlessly cool no matter where you go.</p>
+          <p class="wa-body-s">
+            The Champion® Crossbody Bag is crafted for the trendsetter. Its sleek silhouette, paired with a tonal
+            branded adjustable sling strap, ensures you look effortlessly cool no matter where you go.
+          </p>
         </div>
         <wa-divider></wa-divider>
         <div class="wa-gap-xs wa-stack">
@@ -158,4 +162,4 @@ isPro: true
     </div>
   </div>
 </wa-card>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/review.md b/docs/docs/patterns/ecommerce/review.md
index 4b051882c..6746b1ce1 100644
--- a/docs/docs/patterns/ecommerce/review.md
+++ b/docs/docs/patterns/ecommerce/review.md
@@ -3,9 +3,10 @@ title: Product Reviews
 description: 'Help shoppers make informed decisions with ratings, reviews, and testimonials from your customers.'
 isPro: true
 ---
+
 ## Multi column
 
-```html{.example}
+```html {.example}
 <div style="max-width: 960px; margin: 0 auto;">
   <span class="wa-heading-m">Recent Reviews</span>
   <wa-divider></wa-divider>
@@ -16,10 +17,14 @@ isPro: true
     </div>
     <div class="wa-flank">
       <wa-rating label="Rating" readonly value="5"></wa-rating>
-    <div class="wa-stack wa-gap-2xs">
-      <span class="wa-heading-s">Solid treadmill for home workouts!</span>
-      <p>Best treadmill I've ever owned! It has a sleek design, and the features are top-notch. I use it daily for my cardio workouts, and the motor is powerful enough to keep up with my running. It’s easy to adjust the speed and incline, and the display is clear and simple to read. Worth every penny!</p>
-    </div>
+      <div class="wa-stack wa-gap-2xs">
+        <span class="wa-heading-s">Solid treadmill for home workouts!</span>
+        <p>
+          Best treadmill I've ever owned! It has a sleek design, and the features are top-notch. I use it daily for my
+          cardio workouts, and the motor is powerful enough to keep up with my running. It’s easy to adjust the speed
+          and incline, and the display is clear and simple to read. Worth every penny!
+        </p>
+      </div>
     </div>
   </div>
   <wa-divider></wa-divider>
@@ -30,10 +35,14 @@ isPro: true
     </div>
     <div class="wa-flank">
       <wa-rating label="Rating" readonly value="4"></wa-rating>
-    <div class="wa-stack wa-gap-2xs">
-      <span class="wa-heading-s">Good value, a few minor flaws</span>
-      <p>Decent treadmill for the price, but I feel like the belt could be a little wider for comfort. The cushioning is good, but sometimes I experience a slight wobble when running at high speeds. For casual walking, it's fine, but I’m not sure it’s built for intense runners.</p>
-    </div>
+      <div class="wa-stack wa-gap-2xs">
+        <span class="wa-heading-s">Good value, a few minor flaws</span>
+        <p>
+          Decent treadmill for the price, but I feel like the belt could be a little wider for comfort. The cushioning
+          is good, but sometimes I experience a slight wobble when running at high speeds. For casual walking, it's
+          fine, but I’m not sure it’s built for intense runners.
+        </p>
+      </div>
     </div>
   </div>
   <wa-divider></wa-divider>
@@ -44,10 +53,14 @@ isPro: true
     </div>
     <div class="wa-flank">
       <wa-rating label="Rating" readonly value="4"></wa-rating>
-    <div class="wa-stack wa-gap-2xs">
-      <span class="wa-heading-s">Decent, but could use upgrades</span>
-      <p>This treadmill has been a great addition to my home gym. It's sturdy, easy to use, and I like that it tracks my steps and heart rate. The only downside is that it's a bit bulky, so I had to rearrange my space to make room for it. Overall, I'm happy with the performance and would recommend it.</p>
-    </div>
+      <div class="wa-stack wa-gap-2xs">
+        <span class="wa-heading-s">Decent, but could use upgrades</span>
+        <p>
+          This treadmill has been a great addition to my home gym. It's sturdy, easy to use, and I like that it tracks
+          my steps and heart rate. The only downside is that it's a bit bulky, so I had to rearrange my space to make
+          room for it. Overall, I'm happy with the performance and would recommend it.
+        </p>
+      </div>
     </div>
   </div>
   <wa-divider></wa-divider>
@@ -58,14 +71,20 @@ isPro: true
     </div>
     <div class="wa-flank">
       <wa-rating label="Rating" readonly value="4"></wa-rating>
-    <div class="wa-stack wa-gap-2xs">
-      <span class="wa-heading-s">Perfect for small spaces</span>
-      <p>I absolutely love my new treadmill! It’s perfect for my daily workouts. The setup was quick, and it’s so quiet that I can use it while watching TV without any interruptions. The different incline levels really help mix up my routine, and the built-in programs keep things interesting. Highly recommend for anyone looking to stay fit at home!</p>
-    </div>
+      <div class="wa-stack wa-gap-2xs">
+        <span class="wa-heading-s">Perfect for small spaces</span>
+        <p>
+          I absolutely love my new treadmill! It’s perfect for my daily workouts. The setup was quick, and it’s so quiet
+          that I can use it while watching TV without any interruptions. The different incline levels really help mix up
+          my routine, and the built-in programs keep things interesting. Highly recommend for anyone looking to stay fit
+          at home!
+        </p>
+      </div>
     </div>
   </div>
 </div>
 ```
+
 ## With Ratings Distribution
 
 ```html {.example}
@@ -73,7 +92,10 @@ isPro: true
   <div class="wa-align-items-start wa-flank wa-gap-2xl">
     <div class="wa-gap-s wa-stack">
       <span class="wa-heading-m">Customer Reviews</span>
-      <div class="wa-stack wa-gap-xs"><wa-rating label="Rating" precision="0.5" value="4.6" size="small"></wa-rating> <span class="wa-caption-m">Based on 1624 reviews</span></div>
+      <div class="wa-stack wa-gap-xs">
+        <wa-rating label="Rating" precision="0.5" value="4.6" size="small"></wa-rating>
+        <span class="wa-caption-m">Based on 1624 reviews</span>
+      </div>
       <div class="wa-stack">
         <span class="wa-cluster wa-gap-2xs">
           <span>5</span>
@@ -110,46 +132,70 @@ isPro: true
     <div>
       <div>
         <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <wa-avatar
+            image="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          ></wa-avatar>
           <div class="wa-stack wa-gap-2xs">
             <span class="wa-heading-s">Michelle Jasper</span>
             <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
           </div>
         </div>
-        <p>I bought this grow light for my herbs and succulents, and wow—what a difference. After just a week, my basil perked up, and new leaves started popping up. Super easy to set up and doesn’t get too hot. Highly recommend for anyone growing indoors!</p>
+        <p>
+          I bought this grow light for my herbs and succulents, and wow—what a difference. After just a week, my basil
+          perked up, and new leaves started popping up. Super easy to set up and doesn’t get too hot. Highly recommend
+          for anyone growing indoors!
+        </p>
       </div>
       <wa-divider></wa-divider>
       <div>
         <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <wa-avatar
+            image="https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          ></wa-avatar>
           <div class="wa-stack wa-gap-2xs">
             <span class="wa-heading-s">Doug Michaels</span>
             <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
           </div>
         </div>
-        <p>This light really helps my plants grow during the winter months. The brightness is strong, and I love the adjustable height. The only downside is the timer—it resets if you unplug it. Otherwise, great value for the price!</p>
+        <p>
+          This light really helps my plants grow during the winter months. The brightness is strong, and I love the
+          adjustable height. The only downside is the timer—it resets if you unplug it. Otherwise, great value for the
+          price!
+        </p>
       </div>
       <wa-divider></wa-divider>
       <div>
         <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=2561&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <wa-avatar
+            image="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=2561&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          ></wa-avatar>
           <div class="wa-stack wa-gap-2xs">
             <span class="wa-heading-s">Stephanie Hurst</span>
             <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
           </div>
         </div>
-        <p>I don’t get much natural light in my apartment, so this grow light has been a game-changer. I’m using it for my small tomato plants and some lettuce, and they’re growing faster than expected. Plus, the light isn’t too harsh on the eyes</p>
+        <p>
+          I don’t get much natural light in my apartment, so this grow light has been a game-changer. I’m using it for
+          my small tomato plants and some lettuce, and they’re growing faster than expected. Plus, the light isn’t too
+          harsh on the eyes
+        </p>
       </div>
       <wa-divider></wa-divider>
       <div>
         <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1566492031773-4f4e44671857?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <wa-avatar
+            image="https://images.unsplash.com/photo-1566492031773-4f4e44671857?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          ></wa-avatar>
           <div class="wa-stack wa-gap-2xs">
             <span class="wa-heading-s">Miles Rogers</span>
             <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
           </div>
         </div>
-        <p>I’ve tried a few grow lights, and this one is my favorite. It stays cool, uses less power, and my peace lilies and spider plants are growing beautifully. I just wish it came in more color options for the stand, but performance-wise, it’s excellent.</p>
+        <p>
+          I’ve tried a few grow lights, and this one is my favorite. It stays cool, uses less power, and my peace lilies
+          and spider plants are growing beautifully. I just wish it came in more color options for the stand, but
+          performance-wise, it’s excellent.
+        </p>
       </div>
     </div>
   </div>
@@ -158,55 +204,71 @@ isPro: true
 
 ## Two Column
 
-```html{.example}
+```html {.example}
 <div class="wa-stack" style="max-width: 960px; margin: 0 auto;">
   <div class="wa-flank wa-align-items-center">
     <div class="wa-stack wa-align-items-center wa-gap-xs">
-      <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1607746882042-944635dfe10e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+      <wa-avatar
+        label="User avatar"
+        image="https://images.unsplash.com/photo-1607746882042-944635dfe10e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      ></wa-avatar>
       <p>Ripley</p>
       <div>
-      <wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
-      <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
-    </div>
+        <wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
+        <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
+      </div>
     </div>
     <div>
       <wa-rating label="Rating" precision="0.5" value="5" readonly></wa-rating>
-      <p>I recently purchased the Modern Sofa Couch, and I couldn't be happier with my decision! The process from ordering to delivery was smooth and hassle-free</p>
+      <p>
+        I recently purchased the Modern Sofa Couch, and I couldn't be happier with my decision! The process from
+        ordering to delivery was smooth and hassle-free
+      </p>
     </div>
-
   </div>
   <wa-divider></wa-divider>
   <div class="wa-flank wa-align-items-center">
     <div class="wa-stack wa-align-items-center wa-gap-xs">
-      <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+      <wa-avatar
+        label="User avatar"
+        image="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      ></wa-avatar>
       <p>Kane</p>
       <div>
-      <wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
-      <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
-    </div>
+        <wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
+        <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
+      </div>
     </div>
     <div>
       <wa-rating label="Rating" precision="0.5" value="3.4" readonly></wa-rating>
-      <p>The cushions are soft yet supportive, and the sectional layout gives plenty of space to stretch out. It’s perfect for movie nights or just lounging with a good book.</p>
+      <p>
+        The cushions are soft yet supportive, and the sectional layout gives plenty of space to stretch out. It’s
+        perfect for movie nights or just lounging with a good book.
+      </p>
     </div>
-
   </div>
   <wa-divider></wa-divider>
   <div class="wa-flank wa-align-items-center">
     <div class="wa-stack wa-align-items-center wa-gap-xs">
-      <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1728577740843-5f29c7586afe?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+      <wa-avatar
+        label="User avatar"
+        image="https://images.unsplash.com/photo-1728577740843-5f29c7586afe?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      ></wa-avatar>
       <p>Parker</p>
       <div>
-      <wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
-      <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
-    </div>
+        <wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
+        <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
+      </div>
     </div>
     <div>
       <wa-rating label="Rating" precision="0.5" value="3.8" readonly></wa-rating>
-      <p>The leather is high quality, but it’s a little firmer than I thought. That said, after sitting on it for a while, it does soften up and feels more comfortable. It’s perfect if you’re looking for a more structured seating experience.</p>
+      <p>
+        The leather is high quality, but it’s a little firmer than I thought. That said, after sitting on it for a
+        while, it does soften up and feels more comfortable. It’s perfect if you’re looking for a more structured
+        seating experience.
+      </p>
     </div>
-
   </div>
   <wa-divider></wa-divider>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/shopping-cart.md b/docs/docs/patterns/ecommerce/shopping-cart.md
index a6544f00b..5eaf90879 100644
--- a/docs/docs/patterns/ecommerce/shopping-cart.md
+++ b/docs/docs/patterns/ecommerce/shopping-cart.md
@@ -142,7 +142,9 @@ isPro: true
           <h3 class="wa-heading-m">Racers (3 Pack)</h3>
           <span>$80.00</span>
         </span>
-        <wa-tag size="small" variant="neutral" appearance="filled" pill style="width: fit-content">Assorted Colors</wa-tag>
+        <wa-tag size="small" variant="neutral" appearance="filled" pill style="width: fit-content"
+          >Assorted Colors</wa-tag
+        >
       </div>
       <div class="wa-split">
         <wa-badge appearance="filled" variant="success">In Stock</wa-badge>
@@ -275,4 +277,4 @@ isPro: true
     </wa-button>
   </div>
 </wa-drawer>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/ecommerce/store-navigation.md b/docs/docs/patterns/ecommerce/store-navigation.md
index 4c873101b..576ef7212 100644
--- a/docs/docs/patterns/ecommerce/store-navigation.md
+++ b/docs/docs/patterns/ecommerce/store-navigation.md
@@ -7,7 +7,7 @@ isPro: true
 
 ## Popup Menu
 
-```html{.example}
+```html {.example}
 <wa-dropdown>
   <wa-button slot="trigger" caret>Shop</wa-button>
   <wa-menu class="mm-grid">
@@ -18,68 +18,57 @@ isPro: true
       <wa-menu-item value="orange">Kids</wa-menu-item>
       <wa-menu-item value="orange">
         Infants
-         <wa-menu slot="submenu">
-      <wa-menu-item value="uppercase">Newborns</wa-menu-item>
-      <wa-menu-item value="lowercase">6 Months</wa-menu-item>
-      <wa-menu-item value="capitalize">12 Months</wa-menu-item>
-    </wa-menu>
+        <wa-menu slot="submenu">
+          <wa-menu-item value="uppercase">Newborns</wa-menu-item>
+          <wa-menu-item value="lowercase">6 Months</wa-menu-item>
+          <wa-menu-item value="capitalize">12 Months</wa-menu-item>
+        </wa-menu>
       </wa-menu-item>
       <wa-menu-item value="orange">Big & Tall</wa-menu-item>
     </div>
-  <div>
-    <wa-menu-label>Shop by Category</wa-menu-label>
-    <wa-menu-item value="apple">Shirts</wa-menu-item>
-    <wa-menu-item value="banana">Pants</wa-menu-item>
-    <wa-menu-item value="orange">Shoes</wa-menu-item>
-  </div>
+    <div>
+      <wa-menu-label>Shop by Category</wa-menu-label>
+      <wa-menu-item value="apple">Shirts</wa-menu-item>
+      <wa-menu-item value="banana">Pants</wa-menu-item>
+      <wa-menu-item value="orange">Shoes</wa-menu-item>
+    </div>
 
-  <div>
-    <wa-menu-label>Just Arrived</wa-menu-label>
-
-
-    <wa-menu-item>
-      <a href="#">
-       <img style="width: 100%; max-width: 200px;" src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDIzNDd8&ixlib=rb-4.0.3&q=80&w=1080" />
-     </a>
-
-    </wa-menu-item>
-
-
-
-  </div>
+    <div>
+      <wa-menu-label>Just Arrived</wa-menu-label>
 
+      <wa-menu-item>
+        <a href="#">
+          <img
+            style="width: 100%; max-width: 200px;"
+            src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDIzNDd8&ixlib=rb-4.0.3&q=80&w=1080"
+          />
+        </a>
+      </wa-menu-item>
+    </div>
 
     <wa-menu-item style="grid-column: 1/-1;">
       <div style="display: flex; justify-content: space-between; align-items: center;">
         <p style="margin:0;">footer with something cool in it</p>
         <wa-button variant="brand" size="small">Signup now</wa-button>
       </div>
-
     </wa-menu-item>
-
   </wa-menu>
-
-
 </wa-dropdown>
 <style>
   .mm-grid {
-        display: grid;
+    display: grid;
     grid-template-columns: repeat(3, auto);
     gap: 1rem;
 
+    .card-overview small {
+      color: var(--wa-color-text-quiet);
+    }
 
-
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
+    .card-overview [slot='footer'] {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
   }
-
-  .card-overview [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  }
-
-
 </style>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/education.md b/docs/docs/patterns/education.md
index dcd6ade2b..d6f15e3f1 100644
--- a/docs/docs/patterns/education.md
+++ b/docs/docs/patterns/education.md
@@ -7,4 +7,4 @@ isPro: true
 
 TODO Page Description
 
-## Examples
\ No newline at end of file
+## Examples
diff --git a/docs/docs/patterns/entertainement.md b/docs/docs/patterns/entertainement.md
index 484f9acb8..0ec23236e 100644
--- a/docs/docs/patterns/entertainement.md
+++ b/docs/docs/patterns/entertainement.md
@@ -7,4 +7,4 @@ isPro: true
 
 TODO Page Description
 
-## Examples
\ No newline at end of file
+## Examples
diff --git a/docs/docs/patterns/membership.md b/docs/docs/patterns/membership.md
index d75eb9cc3..988adb2b4 100644
--- a/docs/docs/patterns/membership.md
+++ b/docs/docs/patterns/membership.md
@@ -7,4 +7,4 @@ isPro: true
 
 TODO Page Description
 
-## Examples
\ No newline at end of file
+## Examples
diff --git a/docs/docs/patterns/news.md b/docs/docs/patterns/news.md
index c351e710d..0d4df7379 100644
--- a/docs/docs/patterns/news.md
+++ b/docs/docs/patterns/news.md
@@ -8,52 +8,65 @@ isPro: true
 TODO Page Description
 
 ## Examples
+
 ### Paywall
 
-```html{.example}
+```html {.example}
 <div>
   <wa-dialog label="You've run out of free articles..." class="dialog-header">
     <wa-button href="#">Register</wa-button>
-  Already a subscriber? <a href="#">Login</a>
-</wa-dialog>
+    Already a subscriber? <a href="#">Login</a>
+  </wa-dialog>
 
-<wa-button>Open Paywall</wa-button>
+  <wa-button>Open Paywall</wa-button>
 
-<script>
-  const dialog = document.querySelector('.dialog-header');
-  const openButton = dialog.nextElementSibling;
-
-  openButton.addEventListener('click', () => dialog.open = true);
-</script>
+  <script>
+    const dialog = document.querySelector('.dialog-header');
+    const openButton = dialog.nextElementSibling;
 
+    openButton.addEventListener('click', () => (dialog.open = true));
+  </script>
 </div>
 ```
+
 ## Related articles
-```html{.example}
+
+```html {.example}
 <div>
   <wa-card>
     <div class="card-body">
       <div style="border-bottom: 1px solid var(--wa-color-surface-border);margin-bottom: 1rem; padding-bottom: 1rem;">
-        <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
+        <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="" />
         <h2 style="margin-bottom: var(--wa-space-s);">Title</h2>
-        <p style="margin-bottom: var(--wa-space-3xs);">Fusce lectus lorem, tincidunt non semper sit amet, laoreet vitae nunc. Morbi egestas, libero vitae elementum pretium, nibh ipsum faucibus lacus, id pretium urna ligula eu mauris. Aliquam erat volutpat. Mauris pharetra lacus rhoncus ligula bibendum, at consectetur erat auctor.</p>
+        <p style="margin-bottom: var(--wa-space-3xs);">
+          Fusce lectus lorem, tincidunt non semper sit amet, laoreet vitae nunc. Morbi egestas, libero vitae elementum
+          pretium, nibh ipsum faucibus lacus, id pretium urna ligula eu mauris. Aliquam erat volutpat. Mauris pharetra
+          lacus rhoncus ligula bibendum, at consectetur erat auctor.
+        </p>
 
-      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
+        <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
       </div>
       <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
         <div>
-            <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
+          <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="" />
 
-        <p style="margin-bottom: var(--wa-space-3xs);">Etiam et tincidunt est, sollicitudin fermentum ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut suscipit libero at velit fringilla, ac pretium lorem rutrum. Cras luctus blandit semper.</p>
+          <p style="margin-bottom: var(--wa-space-3xs);">
+            Etiam et tincidunt est, sollicitudin fermentum ligula. Class aptent taciti sociosqu ad litora torquent per
+            conubia nostra, per inceptos himenaeos. Ut suscipit libero at velit fringilla, ac pretium lorem rutrum. Cras
+            luctus blandit semper.
+          </p>
 
-      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
+          <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
         </div>
         <div>
-            <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
+          <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="" />
 
-        <p style="margin-bottom: var(--wa-space-3xs);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in fringilla ante. In mattis sapien ac aliquet mattis.</p>
+          <p style="margin-bottom: var(--wa-space-3xs);">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in fringilla ante. In mattis sapien ac
+            aliquet mattis.
+          </p>
 
-      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
+          <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
         </div>
       </div>
     </div>
@@ -62,66 +75,72 @@ TODO Page Description
 ```
 
 ## Footer
-```html{.example}
+
+```html {.example}
 <div class="news-footer">
   <div class="container">
-  <!-- <div class="logo"> <wa-icon name="user-secret"></wa-icon> <h1 style="--wa-space-xl: 0;">Daily Snoop</h1></div> -->
-  <div class="nav">
-    <section>
-      <h4 style="--wa-space-xl: 0;">News</h4>
-      <ul>
-      <li><a href="#">U.S.</a></li>
-      <li><a href="#">World</a></li>
-      <li><a href="#">Politics</a></li>
-      <li><a href="#">Education</a></li>
-      <li><a href="#">Sports</a></li>
-      <li><a href="#">Business</a></li>
-      <li><a href="#">Tech</a></li>
-      <li><a href="#">Science</a></li>
-    </ul>
-    </section>
-    <section>
-      <h4 style="--wa-space-xl: 0;">Arts</h4>
-      <ul>
-      <li><a href="#">Book Review</a></li>
-      <li><a href="#">Dance</a></li>
-      <li><a href="#">Movies</a></li>
-      <li><a href="#">Pop Culture</a></li>
-    </ul>
-    </section>
-    <section>
-      <h4 style="--wa-space-xl: 0;">Subscriptions</h4>
-      <ul class="list">
-      <li><a href="#"><wa-icon fixed-width name="game-board-simple"></wa-icon> Crossword</a></li>
-      <li><a href="#"><wa-icon fixed-width name="paper-plane"></wa-icon> Newsletters</a></li>
-      <li><a href="#"><wa-icon fixed-width name="microphone-lines"></wa-icon> Podcast</a></li>
-    </ul>
-    </section>
-  </div>
-  <div class="social">
-    <a href="">
-      <wa-icon family="brands" name="bluesky"></wa-icon>
-    </a>
-    <a href="">
-      <wa-icon family="brands" name="instagram"></wa-icon>
-    </a>
-    <a href="">
-      <wa-icon family="brands" name="facebook"></wa-icon>
-    </a>
-    <a href="">
-      <wa-icon family="brands" name="mastodon"></wa-icon>
-    </a>
-  </div>
-  <div>
-    <img src="https://img.fortawesome.com/cfa83f3c/app_store.svg" alt="">
-    <img src="https://img.fortawesome.com/cfa83f3c/google_play.svg" alt="">
-  </div>
-  <div class="legal">&#169; 2024 All rights reserved.</div>
+    <!-- <div class="logo"> <wa-icon name="user-secret"></wa-icon> <h1 style="--wa-space-xl: 0;">Daily Snoop</h1></div> -->
+    <div class="nav">
+      <section>
+        <h4 style="--wa-space-xl: 0;">News</h4>
+        <ul>
+          <li><a href="#">U.S.</a></li>
+          <li><a href="#">World</a></li>
+          <li><a href="#">Politics</a></li>
+          <li><a href="#">Education</a></li>
+          <li><a href="#">Sports</a></li>
+          <li><a href="#">Business</a></li>
+          <li><a href="#">Tech</a></li>
+          <li><a href="#">Science</a></li>
+        </ul>
+      </section>
+      <section>
+        <h4 style="--wa-space-xl: 0;">Arts</h4>
+        <ul>
+          <li><a href="#">Book Review</a></li>
+          <li><a href="#">Dance</a></li>
+          <li><a href="#">Movies</a></li>
+          <li><a href="#">Pop Culture</a></li>
+        </ul>
+      </section>
+      <section>
+        <h4 style="--wa-space-xl: 0;">Subscriptions</h4>
+        <ul class="list">
+          <li>
+            <a href="#"><wa-icon fixed-width name="game-board-simple"></wa-icon> Crossword</a>
+          </li>
+          <li>
+            <a href="#"><wa-icon fixed-width name="paper-plane"></wa-icon> Newsletters</a>
+          </li>
+          <li>
+            <a href="#"><wa-icon fixed-width name="microphone-lines"></wa-icon> Podcast</a>
+          </li>
+        </ul>
+      </section>
+    </div>
+    <div class="social">
+      <a href="">
+        <wa-icon family="brands" name="bluesky"></wa-icon>
+      </a>
+      <a href="">
+        <wa-icon family="brands" name="instagram"></wa-icon>
+      </a>
+      <a href="">
+        <wa-icon family="brands" name="facebook"></wa-icon>
+      </a>
+      <a href="">
+        <wa-icon family="brands" name="mastodon"></wa-icon>
+      </a>
+    </div>
+    <div>
+      <img src="https://img.fortawesome.com/cfa83f3c/app_store.svg" alt="" />
+      <img src="https://img.fortawesome.com/cfa83f3c/google_play.svg" alt="" />
+    </div>
+    <div class="legal">&#169; 2024 All rights reserved.</div>
   </div>
 </div>
 <style>
   .news-footer {
-
     .container {
       max-width: 960px;
       margin: auto;
@@ -153,9 +172,9 @@ TODO Page Description
       --wa-color-text-link: var(--wa-color-gray-20);
 
       wa-icon {
-        margin-right: .5rem;
+        margin-right: 0.5rem;
       }
     }
   }
 </style>
-```
\ No newline at end of file
+```
diff --git a/docs/docs/patterns/non-profit.md b/docs/docs/patterns/non-profit.md
index 66f43212d..791122472 100644
--- a/docs/docs/patterns/non-profit.md
+++ b/docs/docs/patterns/non-profit.md
@@ -7,4 +7,4 @@ isPro: true
 
 TODO Page Description
 
-## Examples
\ No newline at end of file
+## Examples
diff --git a/docs/docs/patterns/portfolio.md b/docs/docs/patterns/portfolio.md
index df5847a4a..57ab8514f 100644
--- a/docs/docs/patterns/portfolio.md
+++ b/docs/docs/patterns/portfolio.md
@@ -7,4 +7,4 @@ isPro: true
 
 TODO Page Description
 
-## Examples
\ No newline at end of file
+## Examples
diff --git a/docs/docs/patterns/product-landing.md b/docs/docs/patterns/product-landing.md
index d3484b48c..0adf2a63a 100644
--- a/docs/docs/patterns/product-landing.md
+++ b/docs/docs/patterns/product-landing.md
@@ -7,4 +7,4 @@ isPro: true
 
 TODO Page Description
 
-## Examples
\ No newline at end of file
+## Examples
diff --git a/src/styles/themes/default/space.css b/src/styles/themes/default/space.css
index a07d37f31..5682c652b 100644
--- a/src/styles/themes/default/space.css
+++ b/src/styles/themes/default/space.css
@@ -14,4 +14,5 @@
   --wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
   --wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
   --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
+  --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
 }