From db592194fdee4d2cc139196a8f63219028c08efe Mon Sep 17 00:00:00 2001
From: Kelsey Jackson <kelseythej@gmail.com>
Date: Fri, 21 Feb 2025 09:45:19 -0600
Subject: [PATCH] updtated content

---
 .../patterns/ecommerce-category-preview.md    | 101 +++++++++++++-----
 docs/docs/patterns/ecommerce-incentives.md    |   6 +-
 docs/docs/patterns/ecommerce-order-history.md |  19 ++--
 docs/docs/patterns/ecommerce-product-list.md  |  83 +++++++++-----
 4 files changed, 146 insertions(+), 63 deletions(-)

diff --git a/docs/docs/patterns/ecommerce-category-preview.md b/docs/docs/patterns/ecommerce-category-preview.md
index f5682edf7..2e2a98eb7 100644
--- a/docs/docs/patterns/ecommerce-category-preview.md
+++ b/docs/docs/patterns/ecommerce-category-preview.md
@@ -6,29 +6,48 @@ tags: e-commerce
 icon: preview
 ---
 
-<style>
-  [class*='wa-'] div:empty {
-    --aspect-ratio: 1/1;
-    background-color: var(--wa-color-indigo-60);
-    border-radius: var(--wa-border-radius-m);
-    min-block-size: 4rem;
-    min-inline-size: 4rem;
-    aspect-ratio: var(--aspect-ratio);
-  }
-</style>
-
 ## Grid Tiles
 
 ```html{.example}
-<div class="three-column wa-stack">
-  <div class="wa-split" sty>
+<div class="wa-stack">
+  <div class="wa-split">
     <h1>Shop by Category</h1>
-    <a href="#">Browse all Categories</a>
+    <a href="#" class="wa-cluster">Browse all Categories  <wa-icon name="arrow-right"></wa-icon></a>
   </div>
-  <div class="category-grid wa-grid">
-    <div></div>
-    <div></div>
-    <div></div>
+  <div class="wa-grid">
+    <a href="*" style="--wa-link-decoration-default: none;">
+      <wa-card with-image>
+        <img
+          slot="image"
+          src="https://img.fortawesome.com/cfa83f3c/outdoor.jpg"
+          alt="Durable gear for all conditions"
+        />
+        <span class="wa-heading-m">Outdoor</span>
+        <p class="wa-caption-l"><em>Durable gear for all conditions</em></p>
+      </wa-card>
+    </a>
+    <a href="*" style="--wa-link-decoration-default: none;">
+      <wa-card with-image>
+        <img
+          slot="image"
+          src="https://img.fortawesome.com/cfa83f3c/home.jpg"
+          alt="Cozy up on the couch and relax"
+        />
+      <span class="wa-heading-m">Home</span>
+      <p class="wa-caption-l"><em>Cozy up on the couch and relax</em></p>
+      </wa-card>
+    </a>
+    <a href="*" style="--wa-link-decoration-default: none;">
+      <wa-card with-image>
+        <img
+          slot="image"
+          src="https://img.fortawesome.com/cfa83f3c/fitness.jpg"
+          alt="Get fit in style with our breathable poly blends"
+        />
+        <span class="wa-heading-m">Active</span>
+        <p class="wa-caption-l"><em>Get fit in style with our breathable poly blends</em></p>
+      </wa-card>
+    </a>
   </div>
 </div>
 ```
@@ -36,18 +55,50 @@ icon: preview
 ## Mosaic Tiles
 
 ```html{.example}
-<div class="mosaic wa-stack">
-  <div class="wa-split" sty>
+<div class="wa-stack" style="max-width: 960px; margin: 0 auto;">
+  <div class="wa-split">
     <h1>Shop by Category</h1>
-    <a href="#">Browse all Categories</a>
+    <a href="#" class="wa-cluster">Browse all Categories  <wa-icon name="arrow-right"></wa-icon></a>
   </div>
   <div class="wa-stack">
-    <div style="--aspect-ratio: 1/.25"></div>
+    <wa-card with-image class="card-image">
+      <img
+        slot="image"
+        src="https://img.fortawesome.com/cfa83f3c/outdoor.jpg"
+        alt="Durable gear for all conditions"
+      />
+      <span class="wa-heading-m">Outdoor</span>
+      <p class="wa-caption-l"><em>Durable gear for all conditions</em></p>
+    </wa-card>
     <div class="wa-grid">
-      <div></div>
-      <div></div>
+      <wa-card with-image>
+        <img
+          slot="image"
+          src="https://img.fortawesome.com/cfa83f3c/home.jpg"
+          alt="Cozy up on the couch and relax"
+        />
+      <span class="wa-heading-m">Home</span>
+      <p class="wa-caption-l"><em>Cozy up on the couch and relax</em></p>
+      </wa-card>
+      <wa-card with-image>
+        <img
+          slot="image"
+          src="https://img.fortawesome.com/cfa83f3c/fitness.jpg"
+          alt="Get fit in style with our breathable poly blends"
+        />
+        <span class="wa-heading-m">Active</span>
+        <p class="wa-caption-l"><em>Get fit in style with our breathable poly blends</em></p>
+      </wa-card>
     </div>
-     <div style="--aspect-ratio: 1/.25"></div>
+     <wa-card with-image class="card-image">
+      <img
+        slot="image"
+        src="https://img.fortawesome.com/cfa83f3c/outdoor.jpg"
+        alt="Durable gear for all conditions"
+      />
+      <span class="wa-heading-m">Outdoor</span>
+      <p class="wa-caption-l"><em>Durable gear for all conditions</em></p>
+    </wa-card>
   </div>
 </div>
 ```
diff --git a/docs/docs/patterns/ecommerce-incentives.md b/docs/docs/patterns/ecommerce-incentives.md
index b39d01fbf..6051d14c3 100644
--- a/docs/docs/patterns/ecommerce-incentives.md
+++ b/docs/docs/patterns/ecommerce-incentives.md
@@ -2,13 +2,13 @@
 title: Incentives
 description: 'Encourage shoppers to buy your products with value propositions, discounts, and promotions.'
 parent: ecommerce
-unlisted: true
+tags: e-commerce
 ---
 
 ## Promotion Dialog
 
 ```html {.example}
-<wa-dialog label="New Here?" with-header class="coupon" style="--width: 50rem;" open>
+
   <div class="coupon-split">
     <img style="height: 100%" src="/assets/images/patterns/coupon.jpg" />
     <div>
@@ -22,7 +22,7 @@ unlisted: true
       <p style="font-size: xx-small;font-style: italic;">*The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
     </div>
   </div>
-</wa-dialog>
+
 
 <style>
   .coupon {
diff --git a/docs/docs/patterns/ecommerce-order-history.md b/docs/docs/patterns/ecommerce-order-history.md
index 956f34692..2ef1ef0c5 100644
--- a/docs/docs/patterns/ecommerce-order-history.md
+++ b/docs/docs/patterns/ecommerce-order-history.md
@@ -23,7 +23,7 @@ tags: e-commerce
       <strong>Total amount</strong>
       <span>$590.00</span>
     </span>
-      <span style="display: grid;grid-template-columns: 1fr 1fr;column-gap: 1rem;">
+      <span class="wa-cluster">
         <wa-button variant="neutral" appearance="outlined">View Order</wa-button>
         <wa-button variant="neutral" appearance="outlined">View Invoice</wa-button>
       </span>
@@ -36,10 +36,11 @@ tags: e-commerce
           <span><strong>Dome Light Fixtures</strong></span>
           <span><strong>$215.00</strong></span>
         </span>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
+        <p class="wa-caption-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
         <div class="wa-split">
           <span>
-            <wa-button appearance="plain" variant="neutral">View Product</wa-button><wa-button appearance="accent" variant="brand">Buy Again</wa-button>
+            <wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
+            <wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
         </span>
         <wa-badge appearance="filled" variant="success">Delivered</wa-badge>
         </div> 
@@ -52,10 +53,11 @@ tags: e-commerce
           <span><strong>Reading Chair</strong></span>
           <span><strong>$115.00</strong></span>
         </span>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
+        <p class="wa-caption-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
         <div class="wa-split">
           <span>
-          <wa-button appearance="plain" variant="neutral">View Product</wa-button><wa-button appearance="accent" variant="brand">Buy Again</wa-button>
+          <wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
+          <wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
         </span>
         <wa-badge appearance="filled" variant="brand">Out for delivery</wa-badge>
         </div>
@@ -68,10 +70,11 @@ tags: e-commerce
           <span><strong>Custom Sofa</strong></span>
           <span><strong>$260.00</strong></span>
         </span>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
+        <p class="wa-caption-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
         <div class="wa-split">
           <span>
-          <wa-button appearance="plain" variant="neutral">View Product</wa-button><wa-button appearance="accent" variant="brand">Buy Again</wa-button>
+          <wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
+          <wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
         </span>
          <wa-badge appearance="filled" variant="neutral">Preparing to ship</wa-badge>
         </div>
@@ -89,7 +92,7 @@ tags: e-commerce
 ## Invoice Table
 ```html{.example}
 <div style="max-width: 960px; margin: 0 auto;">
-  <div class="invoice-totals wa-split" style="background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)); padding-inline: 1rem; padding-block: 1rem;">
+  <div class="wa-split" style="background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)); padding-inline: 1rem; padding-block: 1rem;">
     <dl class="wa-grid" style="grid-template-columns: repeat(3, 1fr); --wa-space-xl: 0;">
       <div>
         <dt>Date Placed</dt>
diff --git a/docs/docs/patterns/ecommerce-product-list.md b/docs/docs/patterns/ecommerce-product-list.md
index 8d7489263..7a62e43ac 100644
--- a/docs/docs/patterns/ecommerce-product-list.md
+++ b/docs/docs/patterns/ecommerce-product-list.md
@@ -8,74 +8,103 @@ tags: e-commerce
 ## With Product Grid
 
 ```html{.example}
-  <div class="wa-grid wa-gap-0" style="--min-column-size: 50ch;border: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);">
+  <div class="wa-grid wa-gap-0" style="max-width: 960px; margin: 0 auto;">
     <div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
-      <img style="width: 100%;object-fit: cover;height: 100%;" src="https://img.fortawesome.com/cfa83f3c/mad-rabbit-tattoo-7n4fmowsgek-unsplash.jpg" />
-      <div style="margin-top: 1rem;font-weight: var(--wa-font-weight-bold);">Shirt</div>
+      <img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/mad-rabbit-tattoo-7n4fmowsgek-unsplash.jpg" />
+      <strong style="margin-top: 1rem;">Shirt</strong>
       <wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
-      <a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
-      <div style="font-size: var(--wa-font-size-2xl);font-weight: var(--wa-font-weight-bold);">$170</div>
+      <a class="wa-caption-l" href="#">38 Reviews</a>
+      <strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
     </div>
     <div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
-      <img style="width: 100%;object-fit: cover;height: 100%;" src="https://img.fortawesome.com/cfa83f3c/disruptivo-c2trroai5fa-unsplash.jpg" />
-      <div style="margin-top: 1rem;font-weight: var(--wa-font-weight-bold);">Shirt</div>
+      <img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/disruptivo-c2trroai5fa-unsplash.jpg" />
+      <strong style="margin-top: 1rem;">Shirt</strong>
       <wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
       <a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
-      <div style="font-size: var(--wa-font-size-2xl);font-weight: var(--wa-font-weight-bold);">$170</div>
+      <strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
     </div>
     <div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
-      <img style="width: 100%;object-fit: cover;height: 100%;" src="https://img.fortawesome.com/cfa83f3c/christian-bolt-vw5vjsknxz8-unsplash.jpg" />
-      <div style="margin-top: 1rem;font-weight: var(--wa-font-weight-bold);">Shirt</div>
+      <img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/christian-bolt-vw5vjsknxz8-unsplash.jpg" />
+      <strong style="margin-top: 1rem;">Shirt</strong>
       <wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
       <a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
-      <div style="font-size: var(--wa-font-size-2xl);font-weight: var(--wa-font-weight-bold);">$170</div>
+      <strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
     </div>
     <div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
-      <img style="width: 100%;object-fit: cover;height: 100%;" src="https://img.fortawesome.com/cfa83f3c/marcel-j-uwrcdb5sm-unsplash.jpg" />
-      <div style="margin-top: 1rem;font-weight: var(--wa-font-weight-bold);">Shirt</div>
+      <img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/marcel-j-uwrcdb5sm-unsplash.jpg" />
+      <strong style="margin-top: 1rem;">Shirt</strong>
       <wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
       <a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
-      <div style="font-size: var(--wa-font-size-2xl);font-weight: var(--wa-font-weight-bold);">$170</div>
+      <strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
+    </div>
+
+     <div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
+      <img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/mad-rabbit-tattoo-7n4fmowsgek-unsplash.jpg" />
+      <strong style="margin-top: 1rem;">Shirt</strong>
+      <wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
+      <a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
+      <strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
+    </div>
+    <div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
+      <img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/disruptivo-c2trroai5fa-unsplash.jpg" />
+      <strong style="margin-top: 1rem;">Shirt</strong>
+      <wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
+      <a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
+      <strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
+    </div>
+    <div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
+      <img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/christian-bolt-vw5vjsknxz8-unsplash.jpg" />
+      <strong style="margin-top: 1rem;">Shirt</strong>
+      <wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
+      <a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
+      <strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
+    </div>
+    <div class="wa-stack wa-align-items-center" style="padding: 1.5rem">
+      <img class="wa-frame" style="object-fit: contain;" src="https://img.fortawesome.com/cfa83f3c/marcel-j-uwrcdb5sm-unsplash.jpg" />
+      <strong style="margin-top: 1rem;">Shirt</strong>
+      <wa-rating label="Rating" readonly value="3" style="--symbol-size: var(--wa-font-size-m);margin-top: .5rem;"></wa-rating>
+      <a style="--wa-link-decoration-default: none;--wa-color-text-link: var(--wa-color-gray-50);font-size: var(--wa-font-size-m);" href="#">38 Reviews</a>
+      <strong style="font-size: var(--wa-font-size-2xl);">$170</strong>
     </div>
   </div>
 ```
 ## Card with Details
 ```html{.example}
-  <div class="wa-grid card-with-details" style="--min-column-size: 50ch">
+  <div class="wa-grid card-with-details" style="--min-column-size: 32ch; max-width: 960px; margin: 0 auto;">
    <wa-card with-image with-footer>
     <img slot="image" src="https://img.fortawesome.com/cfa83f3c/mad-rabbit-tattoo-7n4fmowsgek-unsplash.jpg" alt="">
     <div slot="footer" class="wa-stack">
-      <span style="font-size: var(--wa-font-size-l);font-weight: var(--wa-font-weight-action);">Basic Tee 8-pack</span>
-      <p style="color: var(--wa-color-gray-50);">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <strong style="font-size: var(--wa-font-size-l);">Basic Tee 8-pack</strong>
+      <p class="wa-caption-l">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
       <span style="color: var(--wa-color-gray-50);font-style: italic;">8 colors</span>
-      <span style="font-size: var(--wa-font-size-xl);font-weight: var(--wa-font-weight-action);">$256</span>
+      <strong style="font-size: var(--wa-font-size-xl);">$256</strong>
     </div>
    </wa-card>
     <wa-card with-image with-footer>
     <img slot="image" src="https://img.fortawesome.com/cfa83f3c/creative.jpg" />
     <div slot="footer" class="wa-stack">
-      <span style="font-size: var(--wa-font-size-l);font-weight: var(--wa-font-weight-action);">Basic Tee 8-pack</span>
-      <p style="color: var(--wa-color-gray-50);">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <strong style="font-size: var(--wa-font-size-l);">Basic Tee 8-pack</strong>
+      <p class="wa-caption-l">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
       <span style="color: var(--wa-color-gray-50);font-style: italic;">8 colors</span>
-      <span style="font-size: var(--wa-font-size-xl);font-weight: var(--wa-font-weight-action);">$256</span>
+      <strong style="font-size: var(--wa-font-size-xl);">$256</strong>
     </div>
    </wa-card>
     <wa-card with-image with-footer>
     <img slot="image" src="https://img.fortawesome.com/cfa83f3c/christian-bolt-vw5vjsknxz8-unsplash.jpg" />
     <div slot="footer" class="wa-stack">
-      <span style="font-size: var(--wa-font-size-l);font-weight: var(--wa-font-weight-action);">Basic Tee 8-pack</span>
-      <p style="color: var(--wa-color-gray-50);">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <strong style="font-size: var(--wa-font-size-l);">Basic Tee 8-pack</strong>
+      <p class="wa-caption-l">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
       <span style="color: var(--wa-color-gray-50);font-style: italic;">8 colors</span>
-      <span style="font-size: var(--wa-font-size-xl);font-weight: var(--wa-font-weight-action);">$256</span>
+      <strong style="font-size: var(--wa-font-size-xl);">$256</strong>
     </div>
    </wa-card>
     <wa-card with-image with-footer>
     <img slot="image" src="https://img.fortawesome.com/cfa83f3c/marcel-j-uwrcdb5sm-unsplash.jpg" />
     <div slot="footer" class="wa-stack">
-      <span style="font-size: var(--wa-font-size-l);font-weight: var(--wa-font-weight-action);">Basic Tee 8-pack</span>
-      <p style="color: var(--wa-color-gray-50);">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <strong style="font-size: var(--wa-font-size-l);">Basic Tee 8-pack</strong>
+      <p class="wa-caption-l">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
       <span style="color: var(--wa-color-gray-50);font-style: italic;">8 colors</span>
-      <span style="font-size: var(--wa-font-size-xl);font-weight: var(--wa-font-weight-action);">$256</span>
+      <strong style="font-size: var(--wa-font-size-xl);">$256</strong>
     </div>
    </wa-card>
   </div>