Merge pull request #182 from shoelace-style/kj/app-patterns

Kj/app patterns
2026-01-12 04:09:12 +00:00 · 2024-11-14 12:31:27 -06:00
parent 0245429d78 6c0c8843c8
commit 413c478f19
62 changed files with 3059 additions and 48 deletions
--- a/docs/_includes/base-wide.njk
+++ b/docs/_includes/base-wide.njk
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-cdn-url="{% cdnUrl %}">
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -22,6 +22,7 @@
    <script type="module" src="/assets/scripts/code-examples.js"></script>
    <script type="module" src="/assets/scripts/color-scheme.js"></script>
    <script type="module" src="/assets/scripts/copy-code.js"></script>
+    <script type="module" src="/assets/scripts/preset-theme.js"></script>
    <script type="module" src="/assets/scripts/scroll.js"></script>
    <script type="module" src="/assets/scripts/turbo.js"></script>
    <script type="module" src="/assets/scripts/search.js"></script>
@@ -30,7 +31,7 @@

    {# Web Awesome #}
    <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
-    <link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
+    <link rel="stylesheet" id="theme-stylesheet" />
    <link rel="stylesheet" href="/dist/themes/applied.css" />
    <link rel="stylesheet" href="/dist/themes/forms.css" />

@@ -39,9 +40,30 @@

    {# Set the theme to prevent flashing #}
    <script>
+      function getColorScheme() {
+        return localStorage.getItem('colorScheme') || 'auto';
+      }
+
+      function getPresetTheme () {
+        return localStorage.getItem('presetTheme') || 'default';
+      }
+
+      function isDark() {
+        const colorScheme = getColorScheme()
+        if (colorScheme === 'auto') {
+          return window.matchMedia('(prefers-color-scheme: dark)').matches;
+        }
+        return colorScheme === 'dark';
+      }
+
+      const stylesheet = document.getElementById("theme-stylesheet")
+      let preset = getPresetTheme()
+
+      stylesheet.href = `/dist/themes/${preset}.css`
+
      document.documentElement.classList.toggle(
-        'wa-theme-default-dark',
-        sessionStorage.getItem('colorScheme') === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches
+        `wa-theme-${preset}-dark`,
+        isDark()
      );
    </script>
  </head>
@@ -64,6 +86,25 @@
        </div>

        <div id="docs-toolbar">
+          {# Preset theme selector #}
+          <wa-dropdown id="preset-theme-selector">
+            <wa-button slot="trigger" appearance="tinted" size="small" pill caret>
+              <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
+              <span id="preset-theme-selector__text" class="only-desktop">Default</span>
+            </wa-button>
+            <wa-menu>
+              <wa-menu-item type="checkbox" value="default">Default</wa-menu-item>
+              <wa-menu-item type="checkbox" value="classic">Classic</wa-menu-item>
+              <wa-menu-item type="checkbox" value="fa">Font Awesome</wa-menu-item>
+
+              <wa-menu-item type="checkbox" value="active">Active</wa-menu-item>
+              <wa-menu-item type="checkbox" value="brutalist">Brutalism</wa-menu-item>
+              <wa-menu-item type="checkbox" value="glassy">Glassy</wa-menu-item>
+              <wa-menu-item type="checkbox" value="migration">Migration</wa-menu-item>
+              <wa-menu-item type="checkbox" value="playful">Playful</wa-menu-item>
+              <wa-menu-item type="checkbox" value="premium">Premium</wa-menu-item>
+            </wa-menu>
+          </wa-dropdown>
          {# Color scheme selector #}
          <wa-dropdown id="color-scheme-selector">
            <wa-button slot="trigger" appearance="tinted" size="small" pill caret title="Press \ to toggle">
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -246,3 +246,26 @@
    <a href="/docs/theming/component-groups">Component Groups</a>
  </li>
 </ul>
+
+<h2>Patterns</h2>
+
+<ul>
+  <li>
+    <a href="/docs/patterns/">Pattern Overview</a>
+  </li>
+  <li><a href="/docs/patterns/app">Web App</a></li>
+  <li><a href="/docs/patterns/ecommerce">E-commerce</a>
+    <ul>
+      <li><a href="/docs/patterns/ecommerce-product-review">Product Reviews</a></li>
+      <li><a href="/docs/patterns/ecommerce-product-list">Product Lists</a></li>
+      <li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
+      <li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
+       <li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
+      <li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
+      <li><a href="/docs/patterns/ecommerce-order-summmary">Order Summaries</a></li>
+      <li><a href="/docs/patterns/ecommerce-order-history">Order History</a></li>
+    </ul>
+  </li>
+  <li><a href="/docs/patterns/blog">Blog</a></li>
+  <li><a href="/docs/patterns/news">News</a></li>
+</ul>
--- a/docs/_layouts/page-wide.njk
+++ b/docs/_layouts/page-wide.njk
@@ -0,0 +1,4 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+
+{% extends "../_includes/base-wide.njk" %}
--- a/docs/_layouts/page.njk
+++ b/docs/_layouts/page.njk
@@ -1,4 +1,4 @@
 {% set hasSidebar = true %}
-{% set hasOutline = false %}
+{% set hasOutline = true %}

 {% extends "../_includes/base.njk" %}
--- a/docs/assets/examples/carousel/blog-carousel-1.jpg
+++ b/docs/assets/examples/carousel/blog-carousel-1.jpg
--- a/docs/assets/examples/carousel/blog-carousel-2.jpg
+++ b/docs/assets/examples/carousel/blog-carousel-2.jpg
--- a/docs/assets/examples/carousel/blog-carousel-3.jpg
+++ b/docs/assets/examples/carousel/blog-carousel-3.jpg
--- a/docs/assets/examples/carousel/blog-carousel-4.jpg
+++ b/docs/assets/examples/carousel/blog-carousel-4.jpg
--- a/docs/assets/examples/carousel/blog-carousel-5.jpg
+++ b/docs/assets/examples/carousel/blog-carousel-5.jpg
--- a/docs/assets/examples/carousel/blog-carousel-6.jpg
+++ b/docs/assets/examples/carousel/blog-carousel-6.jpg
--- a/docs/assets/examples/carousel/blog-carousel-7.jpg
+++ b/docs/assets/examples/carousel/blog-carousel-7.jpg
--- a/docs/assets/examples/carousel/pullover-1.jpg
+++ b/docs/assets/examples/carousel/pullover-1.jpg
--- a/docs/assets/examples/carousel/pullover-2.jpg
+++ b/docs/assets/examples/carousel/pullover-2.jpg
--- a/docs/assets/examples/carousel/pullover-3.jpg
+++ b/docs/assets/examples/carousel/pullover-3.jpg
--- a/docs/assets/examples/carousel/pullover-4.jpg
+++ b/docs/assets/examples/carousel/pullover-4.jpg
--- a/docs/assets/examples/carousel/pullover-5.jpg
+++ b/docs/assets/examples/carousel/pullover-5.jpg
--- a/docs/assets/images/patterns/article-1.jpg
+++ b/docs/assets/images/patterns/article-1.jpg
--- a/docs/assets/images/patterns/article-2.jpg
+++ b/docs/assets/images/patterns/article-2.jpg
--- a/docs/assets/images/patterns/article-flower.jpg
+++ b/docs/assets/images/patterns/article-flower.jpg
--- a/docs/assets/images/patterns/bird-1.jpg
+++ b/docs/assets/images/patterns/bird-1.jpg
--- a/docs/assets/images/patterns/bird-2.jpg
+++ b/docs/assets/images/patterns/bird-2.jpg
--- a/docs/assets/images/patterns/bird-3.jpg
+++ b/docs/assets/images/patterns/bird-3.jpg
--- a/docs/assets/images/patterns/bird-4.jpg
+++ b/docs/assets/images/patterns/bird-4.jpg
--- a/docs/assets/images/patterns/coupon.jpg
+++ b/docs/assets/images/patterns/coupon.jpg
--- a/docs/assets/images/patterns/flower-crop-1.jpg
+++ b/docs/assets/images/patterns/flower-crop-1.jpg
--- a/docs/assets/images/patterns/flower-crop-2.jpg
+++ b/docs/assets/images/patterns/flower-crop-2.jpg
--- a/docs/assets/images/patterns/flower-crop-3.jpg
+++ b/docs/assets/images/patterns/flower-crop-3.jpg
--- a/docs/assets/images/patterns/flowers-1.jpg
+++ b/docs/assets/images/patterns/flowers-1.jpg
--- a/docs/assets/images/patterns/flowers-2.jpg
+++ b/docs/assets/images/patterns/flowers-2.jpg
--- a/docs/assets/images/patterns/flowers-3.jpg
+++ b/docs/assets/images/patterns/flowers-3.jpg
--- a/docs/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg
+++ b/docs/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg
--- a/docs/assets/images/patterns/gervyn-louis-KXvd7y7AU6Q-unsplash.jpg
+++ b/docs/assets/images/patterns/gervyn-louis-KXvd7y7AU6Q-unsplash.jpg
--- a/docs/assets/images/patterns/gervyn-louis-semwwyXFQho-unsplash.jpg
+++ b/docs/assets/images/patterns/gervyn-louis-semwwyXFQho-unsplash.jpg
--- a/docs/assets/images/patterns/gianandrea-villa-t4cSB-InqGY-unsplash.jpg
+++ b/docs/assets/images/patterns/gianandrea-villa-t4cSB-InqGY-unsplash.jpg
--- a/docs/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg
+++ b/docs/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg
--- a/docs/assets/images/sprite.svg
+++ b/docs/assets/images/sprite.svg
--- a/docs/assets/scripts/code-examples.js
+++ b/docs/assets/scripts/code-examples.js
@@ -19,8 +19,9 @@ document.addEventListener('click', event => {
    const html =
      `<script type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
      `<link rel="stylesheet" href="${cdnUrl}themes/default.css">\n\n` +
+      `<link rel="stylesheet" href="${cdnUrl}themes/applied.css">\n\n` +
      `${code.textContent}`;
-    const css = 'body {\n  font: 16px sans-serif;\n  padding: 1rem;\n}';
+    const css = 'body {\n  font: 16px sans-serif;\n  padding: 2rem;\n}';
    const js = '';

    const form = document.createElement('form');
--- a/docs/assets/scripts/color-scheme.js
+++ b/docs/assets/scripts/color-scheme.js
@@ -2,35 +2,29 @@
 // Color scheme selector
 //
 (() => {
-  function getColorScheme() {
-    return localStorage.getItem('colorScheme') || 'auto';
-  }
-
-  function isDark() {
-    if (colorScheme === 'auto') {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-    return colorScheme === 'dark';
-  }
-
  function setColorScheme(newColorScheme) {
    colorScheme = newColorScheme;
    localStorage.setItem('colorScheme', colorScheme);
+    const presetTheme = window.getPresetTheme();

    // Update the UI
    updateSelection();

    // Toggle the dark mode class
-    document.documentElement.classList.toggle('wa-theme-default-dark', isDark());
+    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
  }

  function updateSelection() {
    const menu = document.querySelector('#color-scheme-selector wa-menu');
    if (!menu) return;
-    [...menu.querySelectorAll('wa-menu-item')].map(item => (item.checked = item.getAttribute('value') === colorScheme));
+    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
+      await customElements.whenDefined(item.localName);
+      await item.updateComplete;
+      item.checked = item.getAttribute('value') === colorScheme;
+    });
  }

-  let colorScheme = getColorScheme();
+  let colorScheme = window.getColorScheme();

  // Selection is not preserved when changing page, so update when opening dropdown
  document.addEventListener('wa-show', event => {
@@ -56,7 +50,7 @@
      !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
    ) {
      event.preventDefault();
-      setColorScheme(isDark() ? 'light' : 'dark');
+      setColorScheme(window.isDark() ? 'light' : 'dark');
    }
  });

--- a/docs/assets/scripts/preset-theme.js
+++ b/docs/assets/scripts/preset-theme.js
@@ -0,0 +1,86 @@
+//
+// Preset theme selector
+//
+(() => {
+  function setPresetTheme(newPresetTheme) {
+    presetTheme = newPresetTheme;
+    localStorage.setItem('presetTheme', presetTheme);
+
+    const stylesheet = document.getElementById('theme-stylesheet');
+
+    const newStylesheet = Object.assign(document.createElement('link'), {
+      href: `/dist/themes/${presetTheme}.css`,
+      rel: 'preload',
+      as: 'style'
+    });
+
+    newStylesheet.addEventListener(
+      'load',
+      () => {
+        newStylesheet.rel = 'stylesheet';
+        newStylesheet.id = stylesheet.id;
+        requestAnimationFrame(() => {
+          stylesheet.remove();
+        });
+      },
+      { once: true }
+    );
+
+    document.head.append(newStylesheet);
+
+    // Update the UI
+    updateSelection();
+
+    // Toggle the dark mode class
+    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
+  }
+
+  function updateSelection(container = document) {
+    const menu = container.querySelector('#preset-theme-selector wa-menu');
+    if (!menu) return;
+    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
+      const isChecked = item.getAttribute('value') === presetTheme;
+      if (isChecked) {
+        container.querySelector('#preset-theme-selector__text').textContent = item.innerText;
+      }
+      await customElements.whenDefined(item.localName);
+      await item.updateComplete;
+      item.checked = isChecked;
+    });
+  }
+
+  let presetTheme = window.getPresetTheme();
+
+  // Selection is not preserved when changing page, so update when opening dropdown
+  document.addEventListener('wa-show', event => {
+    const presetThemeSelector = event.target.closest('#preset-theme-selector');
+    if (!presetThemeSelector) return;
+    updateSelection();
+  });
+
+  // Listen for selections
+  document.addEventListener('wa-select', event => {
+    const menu = event.target.closest('#preset-theme-selector wa-menu');
+    if (!menu) return;
+    setPresetTheme(event.detail.item.value);
+  });
+
+  // Update the color scheme when the preference changes
+  window.matchMedia('(prefers-preset-theme: dark)').addEventListener('change', () => setPresetTheme(presetTheme));
+  updateSelection();
+
+  /**
+   * Without this, there's a flash of the incorrect preset theme.
+   */
+  function updateSelectionBeforeTurboLoad(e) {
+    const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
+    if (!newElement) {
+      return;
+    }
+    updateSelection(newElement);
+  }
+
+  ['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
+    document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
+  });
+})();
--- a/docs/docs/patterns/app.md
+++ b/docs/docs/patterns/app.md
--- a/docs/docs/patterns/blog.md
+++ b/docs/docs/patterns/blog.md
@@ -1,4 +1,370 @@
 ---
 title: Blog
 description: TODO
+layout: page.njk
 ---
+
+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 with-header>
+  <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 with-image with-footer 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 with-header with-footer 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>
+```
--- a/docs/docs/patterns/business.md
+++ b/docs/docs/patterns/business.md
@@ -1,4 +1,9 @@
 ---
 title: Business
 description: TODO
+layout: page.njk
 ---
+
+TODO Page Description
+
+## Examples
--- a/docs/docs/patterns/ecommerce-category-filter.md
+++ b/docs/docs/patterns/ecommerce-category-filter.md
@@ -0,0 +1,12 @@
+---
+title: E-commerce - Category Filter
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## With inline actions and expandable sidebar filters
+```html{.example}
+ 
+```
--- a/docs/docs/patterns/ecommerce-category-preview.md
+++ b/docs/docs/patterns/ecommerce-category-preview.md
@@ -0,0 +1,11 @@
+---
+title: E-commerce - Category Preview
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## Three Column (WIP)
+
+```
--- a/docs/docs/patterns/ecommerce-order-history.md
+++ b/docs/docs/patterns/ecommerce-order-history.md
@@ -0,0 +1,13 @@
+---
+title: E-commerce - Order History
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## Invoice panels
+
+```html{.example}
+  
+```
--- a/docs/docs/patterns/ecommerce-order-summmary.md
+++ b/docs/docs/patterns/ecommerce-order-summmary.md
@@ -0,0 +1,12 @@
+---
+title: E-commerce - Product List
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## With split image
+```html{.example}
+
+```
--- a/docs/docs/patterns/ecommerce-product-detail.md
+++ b/docs/docs/patterns/ecommerce-product-detail.md
@@ -0,0 +1,128 @@
+---
+title: E-commerce - Product Detail
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## With color and size selector
+```html{.example}
+  <div class="with-inline-price">
+   <wa-card with-header>
+    <div class="card-header" slot="header">
+      <span class="card-title">Graphic Tank</span>
+      <wa-icon-button name="close" label="close-modal"></wa-icon-button>
+    </div>
+    <div class="card-body">
+      <img style="border-radius: var(--border-radius)" src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+      <form class="detail">
+        <span class="price">$32</span>
+        <span class="rating"><wa-rating></wa-rating><a style="margin-left: .5rem; " href="*">36 Reviews</a></span>
+        <wa-radio-group style="margin-bottom: 1rem;" label="Select an option" name="a" value="1">
+  <wa-radio-button value="Black">Black</wa-radio-button>
+  <wa-radio-button value="White">White</wa-radio-button>
+  <wa-radio-button value="Gray">Gray</wa-radio-button>
+</wa-radio-group>
+<wa-select label="Sizes" placeholder="select size">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
+<wa-button size="medium" style="width: 100%; margin-top: auto;">Medium</wa-button>
+      </form>
+    </div>
+   </wa-card>
+  </div>
+  <style>
+    .with-inline-price { 
+      wa-card {
+        width: 100%;
+        .card-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .card-title {
+            font-size: large;
+            font-weight: 600;
+          }
+        }
+        .card-body {
+          display: grid;
+          grid-template-columns: 35% 1fr;
+          gap: 1rem;
+
+          .detail {
+            display: flex;
+            flex-direction: column;
+
+            .price {
+              font-size: xx-large;
+              font-weight: 600;
+            }
+            .rating {
+              margin-bottom: 1rem;
+            }
+          }
+        }
+      }
+    }
+  </style>
+```
+
+## with large selector
+```html{.example}
+  <wa-card class="large-selector">
+    <div class="card-body">
+      <div style="grid-column: 1/6">
+      <img style="border-radius: var(--border-radius); height: 100%; object-fit: cover;" src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+      </div>
+      <div style="grid-column: 6/-1" class="info">
+        <h2>Basic Tank</h2>
+        <wa-icon-button name="close" label="close-modal"></wa-icon-button>
+        <section>
+          <p style="font-size: x-large;font-weight: 600;">$32</p>
+          <div style="display: flex; align-items: flex-start">
+            <p>3.9</p>
+            <wa-rating></wa-rating>
+            <a href="*" style="margin-left: auto;">See all 512 Reviews</a>
+          </div>
+        </section>
+        <section>
+          <form>
+            <wa-radio-group label="Color" help-text="Choose the most appropriate option." name="a" value="black" style="margin-bottom: 1rem;">
+              <wa-radio value="black">Black</wa-radio>
+              <wa-radio value="gray">Gray</wa-radio>
+            </wa-radio-group>
+            <wa-radio-group label="Size" help-text="Select an option that makes you proud." name="a" value="medium"  style="margin-bottom: 1rem;">
+              <wa-radio-button value="small">S</wa-radio-button>
+              <wa-radio-button value="medium">M</wa-radio-button>
+              <wa-radio-button value="large">L</wa-radio-button>
+              <wa-radio-button value="extra-large">XL</wa-radio-button>
+            </wa-radio-group>
+            <wa-button size="medium" style="width: 100%; margin-top: auto;margin-bottom: 1rem;">Medium</wa-button>
+            <a href="*" style="display: inline-block;width: 100%;text-align: center;">View full details</a>
+          </form>
+        </section>
+      </div>
+    </div>
+  </wa-card>
+<style>
+  .large-selector .card-body {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 1rem;
+
+    .info {
+      position: relative;
+
+      wa-icon-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    }
+  }
+</style>
+```
--- a/docs/docs/patterns/ecommerce-product-list.md
+++ b/docs/docs/patterns/ecommerce-product-list.md
@@ -0,0 +1,166 @@
+---
+title: E-commerce - Product Lists
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+## With Product Grid
+
+```html{.example}
+  <div class="with-product-grid">
+    <div class="grid-item">
+      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+      <div class="grid-item-name">Shirt</div>
+      <wa-rating label="Rating" readonly value="3"></wa-rating>
+      <a class="grid-item-reviews" href="#">38 Reviews</a>
+      <div class="grid-item-price">$170</div>
+    </div>
+    <div class="grid-item">
+      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+      <div class="grid-item-name">Shirt</div>
+      <wa-rating label="Rating" readonly value="3"></wa-rating>
+      <a class="grid-item-reviews" href="#">38 Reviews</a>
+      <div class="grid-item-price">$170</div>
+    </div>
+    <div class="grid-item">
+      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+      <div class="grid-item-name">Shirt</div>
+      <wa-rating label="Rating" readonly value="3"></wa-rating>
+      <a class="grid-item-reviews" href="#">38 Reviews</a>
+      <div class="grid-item-price">$170</div>
+    </div>
+    <div class="grid-item">
+      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+      <div class="grid-item-name">Shirt</div>
+      <wa-rating label="Rating" readonly value="3"></wa-rating>
+      <a class="grid-item-reviews" href="#">38 Reviews</a>
+      <div class="grid-item-price">$170</div>
+    </div>
+  </div>
+  <style>
+    .with-product-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      border: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
+
+      .grid-item {
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      .grid-item:nth-of-type(odd) {
+       
+        border-right: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
+      }
+      .grid-item:not(:nth-last-child(-n + 2)) {
+        border-bottom: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
+      }
+
+      .grid-item-image {
+        width: 100%;
+        object-fit: cover;
+      }
+
+      .grid-item-name {
+        margin-top: 1rem;
+        font-weight: var(--wa-font-weight-bold);
+      }
+
+      .grid-item wa-rating {
+        --symbol-size: var(--wa-font-size-m);
+        margin-top: .5rem;
+      }
+      .grid-item-reviews {
+        --wa-link-decoration-default: none;
+        --wa-color-text-link: var(--wa-color-gray-50);
+        font-size: var(--wa-font-size-m);
+      }
+      .grid-item-price {
+        font-size: var(--wa-font-size-2xl);
+        font-weight: var(--wa-font-weight-bold);
+      }
+    }
+  </style>
+```
+## Card with full details
+```html{.example}
+  <div class="card-with-details">
+   <wa-card with-footer>
+    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+    <div slot="footer" class="card-footer details">
+      <span class="detail-name">Basic Tee 8-pack</span>
+      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <span class="detail-color">8 colors</span>
+      <span class="detail-price">$256</span>
+    </div>
+   </wa-card>
+   <wa-card with-footer>
+    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+    <div slot="footer" class="card-footer details">
+      <span class="detail-name">Basic Tee 8-pack</span>
+      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <span class="detail-color">8 colors</span>
+      <span class="detail-price">$256</span>
+    </div>
+   </wa-card>
+   <wa-card with-footer>
+    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+    <div slot="footer" class="card-footer details">
+      <span class="detail-name">Basic Tee 8-pack</span>
+      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <span class="detail-color">8 colors</span>
+      <span class="detail-price">$256</span>
+    </div>
+   </wa-card>
+   <wa-card with-footer>
+    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+    <div slot="footer" class="card-footer details">
+      <span class="detail-name">Basic Tee 8-pack</span>
+      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <span class="detail-color">8 colors</span>
+      <span class="detail-price">$256</span>
+    </div>
+   </wa-card>
+  </div>
+  <style>
+    .card-with-details {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1rem;
+    }
+    .card-with-details wa-card::part(body) {
+        padding: 0;
+      }
+    .card-with-details .card-footer {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .details {
+      .detail-description {
+        color: var(--wa-color-gray-50);
+      }
+      .detail-name {
+        font-size: var(--wa-font-size-l);
+        font-weight: var(--wa-font-weight-action);
+      }
+      .detail-color {
+        color: var(--wa-color-gray-50);
+        font-style: italic;
+      }
+      .detail-price {
+        font-size: var(--wa-font-size-xl);
+        font-weight: var(--wa-font-weight-action);
+      }
+    }
+    
+  </style>
+```
+## With color swatches (WIP)
+```html{.example}
+
+```
+
--- a/docs/docs/patterns/ecommerce-product-review.md
+++ b/docs/docs/patterns/ecommerce-product-review.md
@@ -0,0 +1,464 @@
+---
+title: E-commerce - Product Reviews
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## With images grid
+```html{.example}
+<div class="with-image-grid">
+  <wa-breadcrumb>
+    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
+  </wa-breadcrumb>
+  <div class="image-grid">
+    <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+    <img src="/assets/images/patterns/gervyn-louis-KXvd7y7AU6Q-unsplash.jpg" />
+    <img src="/assets/images/patterns/gervyn-louis-semwwyXFQho-unsplash.jpg" />
+    <img src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+  </div>
+  <div>
+    <h2>Tank top</h2>
+    <p>The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Feeling adventurous? Put on a heather gray tee. Want to be a trendsetter? Try our exclusive colorway: "Black". Need to add an extra pop of color to your outfit? Our white tee has you covered.</p>
+    <h3>Highlights</h3>
+    <ul>
+      <li>Hand cut and sewn locally</li>
+    </ul>
+
+    <h3>Highlights</h3>
+    <p>The 6-Pack includes two black, two white, and two heather gray Basic Tees. Sign up for our subscription service and be the first to get new, exciting colors, like our upcoming "Charcoal Gray" limited release.</p>
+
+    <span>$192</span>
+    <div>
+      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
+      <a href="#">117 Reviews</a>
+    </div>
+    <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+  <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+  <wa-button>Add to Cart</wa-button>
+  </div>
+</div>
+<style>
+  .with-image-grid {
+    wa-breadcrumb::part(base) {
+      margin-bottom: 1rem;
+    }
+
+    .image-grid {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 1rem;
+    }
+
+    .image-grid img:nth-of-type(1) {
+      grid-column: 1/-1;
+    }
+
+    .image-grid img:nth-of-type(2) {
+      grid-column: 1/7;
+    }
+    .image-grid img:nth-of-type(3) {
+      grid-column: 7/-1;
+    }
+     .image-grid img:nth-of-type(4) {
+      grid-column: 1/-1;
+    }
+  }
+</style>
+```
+
+## With Tiered Images
+
+```html{.example}
+<div class="with-tiered-images">
+  <wa-breadcrumb>
+    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
+  </wa-breadcrumb>
+  <div>
+    <div class="heading">
+      <h2>Basic Tee</h2>
+      <span style="font-size: var(--wa-font-size-2xl)">$35</span>
+    </div>
+    <div class="rating">
+      <span>3.9</span>
+       <wa-rating label="Rating" precision="0.5" value="3.9"></wa-rating>
+      <a href="#">117 Reviews</a>
+    </div>
+    <div class="tiered-images">
+      <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+      <img src="/assets/images/patterns/gervyn-louis-KXvd7y7AU6Q-unsplash.jpg" />
+      <img src="/assets/images/patterns/gervyn-louis-semwwyXFQho-unsplash.jpg" />
+    </div>
+  </div>
+  <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+  <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+ <wa-button>Add to Cart</wa-button>
+ <h3>Description</h3>
+ <p>The Basic tee is an honest new take on a classic. The tee uses super soft, pre-shrunk cotton for true comfort and a dependable fit. They are hand cut and sewn locally, with a special dye technique that gives each tee it's own look.</p>
+ <p>Looking to stock your closet? The Basic tee also comes in a 3-pack or 5-pack at a bundle discount.</p>
+ <hr />
+ <h3>Highlights</h3>
+    <ul>
+      <li>Hand cut and sewn locally</li>
+    </ul>
+  <div>
+    <wa-card>
+      <wa-icon family="solid" name="earth-americas"></wa-icon>
+      <h3>International delivery</h3>
+      <p>Get your order in 2 years</p>
+    </wa-card>
+    <wa-card>
+      <wa-icon family="solid" name="earth-americas"></wa-icon>
+      <h3>International delivery</h3>
+      <p>Get your order in 2 years</p>
+  
+    </wa-card>
+  </div>
+</div>
+<style>
+  .with-tiered-images {
+    wa-breadcrumb::part(base) {
+      margin-bottom: 1rem;
+    }
+    .heading {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .rating {
+      display: flex;
+
+      span {
+        display: inline-block;
+        margin-right: 1rem;
+      }
+
+      wa-rating {
+        margin-right: 1rem;
+      }
+    }
+
+    .tiered-images {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 1rem;
+    }
+
+    .tiered-images img:nth-of-type(1) {
+      grid-column: 1/-1;
+    }
+
+    .tiered-images img:nth-of-type(2) {
+      grid-column: 1/7;
+    }
+    .tiered-images img:nth-of-type(3) {
+      grid-column: 7/-1;
+  }
+</style>
+```
+## with images and expandable details
+
+```html {.example}
+<wa-carousel class="carousel-thumbnails" navigation loop>
+  <wa-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+      src="/assets/examples/carousel/pullover-1.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+      src="/assets/examples/carousel/pullover-2.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+      src="/assets/examples/carousel/pullover-3.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+      src="/assets/examples/carousel/pullover-4.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+      src="/assets/examples/carousel/pullover-5.jpg"
+    />
+  </wa-carousel-item>
+</wa-carousel>
+
+<div class="thumbnails">
+  <div class="thumbnails__scroller">
+    <img alt="Thumbnail by 1" class="thumbnails__image active" src="/assets/examples/carousel/pullover-1.jpg" />
+    <img alt="Thumbnail by 2" class="thumbnails__image" src="/assets/examples/carousel/pullover-2.jpg" />
+    <img alt="Thumbnail by 3" class="thumbnails__image" src="/assets/examples/carousel/pullover-3.jpg" />
+    <img alt="Thumbnail by 4" class="thumbnails__image" src="/assets/examples/carousel/pullover-4.jpg" />
+    <img alt="Thumbnail by 5" class="thumbnails__image" src="/assets/examples/carousel/pullover-5.jpg" />
+  </div>
+</div>
+<div>
+  <h3 style="--wa-space-xl: 0;">Pullover Sweater</h3>
+  <span class="price-big">$140</span>
+  <wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
+  <p>The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.</p>
+  <wa-radio-group label="Select Color" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1"></wa-radio-button>
+  <wa-radio-button value="2"></wa-radio-button>
+  <wa-radio-button value="3"></wa-radio-button>
+</wa-radio-group>
+<div>
+  <wa-button>Add to cart</wa-button>
+  <wa-icon-button name="gear" label="Settings"></wa-icon-button>
+</div>
+<div class="details-group-example">
+  <wa-details summary="First" open>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+
+  <wa-details summary="Second">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+
+  <wa-details summary="Third">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+</div>
+</div>
+
+<style>
+  .carousel-thumbnails {
+    --slide-aspect-ratio: 3 / 2;
+  }
+
+  wa-radio-button #shadow-root div .button--medium {
+    padding: var(--wa-space-xs) var(--wa-space-xs);
+  }
+  
+  .color-circle {
+    --background: #000;
+    background: var(--background);
+ 
+    width: 50px;
+    height: 100%;
+  }
+
+  .sweater-rating {
+    margin-bottom: 1rem;
+  }
+  .price-big {
+    display: block;
+    font-size: 32px;
+  }
+
+  .thumbnails {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+  }
+
+  .thumbnails__scroller {
+    display: flex;
+    gap: var(--wa-space-s);
+    overflow-x: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    scroll-padding: var(--wa-space-s);
+  }
+
+  .thumbnails__scroller::-webkit-scrollbar {
+    display: none;
+  }
+
+  .thumbnails__image {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+
+    opacity: 0.3;
+    will-change: opacity;
+    transition: 250ms opacity;
+
+    cursor: pointer;
+  }
+
+  .thumbnails__image.active {
+    opacity: 1;
+  }
+  .details-group-example wa-details:not(:last-of-type) {
+    margin-bottom: var(--wa-space-2xs);
+  }
+</style>
+
+<script>
+  {
+    const carousel = document.querySelector('.carousel-thumbnails');
+    const scroller = document.querySelector('.thumbnails__scroller');
+    const thumbnails = document.querySelectorAll('.thumbnails__image');
+
+    scroller.addEventListener('click', e => {
+      const target = e.target;
+
+      if (target.matches('.thumbnails__image')) {
+        const index = [...thumbnails].indexOf(target);
+        carousel.goToSlide(index);
+      }
+    });
+
+    carousel.addEventListener('wa-slide-change', e => {
+      const slideIndex = e.detail.index;
+
+      [...thumbnails].forEach((thumb, i) => {
+        thumb.classList.toggle('active', i === slideIndex);
+        if (i === slideIndex) {
+          thumb.scrollIntoView({
+            block: 'nearest'
+          });
+        }
+      });
+    });
+  }
+
+    const container = document.querySelector('.details-group-example');
+
+  // Close all other details when one is shown
+  container.addEventListener('wa-show', event => {
+    if (event.target.localName === 'wa-details') {
+      [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
+    }
+  });
+</script>
+```
+
+## Split with image
+
+```html {.example}
+<div class="split-with-image">
+  <div class="div-1">
+    <wa-breadcrumb>
+    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
+    </wa-breadcrumb>
+    <h2>Everyday Ruck Snack</h2>
+    <span>
+      <span>$220</span> |
+      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating> 
+      <span>1624 reviews</span>
+    </span>
+    <p>Don't compromise on snack-carrying capacity with this lightweight and spacious bag. The drawstring top keeps all your favorite chips, crisps, fries, biscuits, crackers, and cookies secure.</p>
+    <span><wa-icon family="solid" name="check"></wa-icon> In stock and ready to ship</span>
+   
+
+  </div>
+  <div class="div-2">
+    <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+  </div>
+  <div class="div-3">
+     <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+  </div>
+</div>
+<style>
+  .split-with-image {
+    display: grid;
+    /* grid-template-columns: repeat(2, 1fr); */
+    /* height: 1000px; */
+    /* gap: 1rem; */
+    .div-1 {
+   
+    }
+    .div-2 {
+      /* background-color: black;
+      grid-column-start: 2;
+      grid-row: span 2 / span 2; */
+    }
+    .div-3 {
+   
+    }
+  }
+</style>
+```
+## With tabs
+
+```html{.example}
+<div>
+  <wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
+  <h2>Application UI Icon Pack</h2>
+  <img alt="Sample of 30 icons with friendly and fun details in outline, filled, and brand color styles." src="https://tailwindui.com/img/ecommerce-images/product-page-05-product-01.jpg" class="aqk aql">
+  <p>The Application UI Icon Pack comes with over 200 icons in 3 styles: outline, filled, and branded. This playful icon pack is tailored for complex application user interfaces with a friendly and legible look.</p>
+  <wa-button variant="brand">Brand</wa-button>
+
+<wa-button variant="success">Success</wa-button>
+<hr />
+<h3>Highlights</h3>
+<ul>
+  <li>200+ SVG icons in 3 unique styles</li>
+  <li>Compatible with Figma, Sketch, and Adobe XD</li>
+  <li>Drawn on 24 x 24 pixel grid</li>
+</ul>
+<hr />
+<h3>License</h3>
+<p>For personal and professional use. You cannot resell or redistribute these icons in their original or modified state. <a href="#">Read full license</a></p>
+<hr />
+<h3>Share</h3>
+
+
+<wa-icon family="brands" name="facebook"></wa-icon>
+<wa-icon family="brands" name="instagram"></wa-icon>
+<wa-icon family="brands" name="x-twitter"></wa-icon>
+  <wa-tab-group>
+  <wa-tab slot="nav" panel="general">General</wa-tab>
+  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
+  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
+  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
+
+  <wa-tab-panel name="general">
+    <div></div>
+    <div>
+      <h3>Hector Gibbons</h3>
+      <p>July 12, 2021</p>
+      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
+      <p>Blown away by how polished this icon pack is. Everything looks so consistent and each SVG is optimized out of the box so I can use it directly with confidence. It would take me several hours to create a single icon this good, so it's a steal at this price.</p>
+    </div>
+  </wa-tab-panel>
+  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
+  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
+  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
+</wa-tab-group>
+
+</div>
+
+```
--- a/docs/docs/patterns/ecommerce-shopping-cart.md
+++ b/docs/docs/patterns/ecommerce-shopping-cart.md
@@ -0,0 +1,9 @@
+---
+title: E-commerce - Shopping Cart
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## Examples
--- a/docs/docs/patterns/ecommerce.md
+++ b/docs/docs/patterns/ecommerce.md
@@ -8,16 +8,133 @@ TODO Page Description

 ## Examples

+## Coupon
+
+```html{.example}
+<wa-dialog label="New Here?" with-header class="coupon" style="--width: 50rem;">
+  <div class="coupon-split">
+    <img style="height: 100%" src="/assets/images/patterns/coupon.jpg" />
+    <div>
+      <span>help us start you off on the right foot.</span>
+      <h1 style="margin-bottom: 0;">Get 15% Off...*</h1>
+      <p>...your first online order when you signup for emails.</p>
+      <wa-input label="Email" style="margin-bottom: 1rem;">
+        <div slot="help-text">What would you <a href='#'>link</a> like people to call you?</div>
+      </wa-input>
+      <wa-button size="medium" style="width: 100%; margin-bottom: 1rem;" variant="danger">Email me discount</wa-button>
+      <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>
+
+<wa-button>Open Dialog</wa-button>
+
+<style>
+  .coupon {
+    .coupon-split {
+      display: grid;
+      grid-template-columns: 40% 1fr;
+      gap: 1rem;
+    }
+  }
+</style>
+<script>
+  const dialog = document.querySelector('.coupon');
+  const openButton = dialog.nextElementSibling;
+
+  openButton.addEventListener('click', () => dialog.open = true);
+</script>
+
+```
+
+## Mega Menu
+
+```html{.example}
+<wa-dropdown>
+  <wa-button slot="trigger" caret>Shop</wa-button>
+  <wa-menu class="mm-grid">
+    <div>
+      <wa-menu-label>Shop by Department</wa-menu-label>
+      <wa-menu-item value="apple">Mens</wa-menu-item>
+      <wa-menu-item value="banana">Womens</wa-menu-item>
+      <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-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>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;
+    grid-template-columns: repeat(3, auto);
+    gap: 1rem;
+
+  
+
+  .card-overview small {
+    color: var(--wa-color-text-quiet);
+  }
+
+  .card-overview [slot='footer'] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  }
+
+    
+</style>
+```
 ### Slide Over

 ```html {.example}
-<wa-card class="card-header" style="width: 500px;">
+<wa-card with-header with-footer class="card-header" style="width: 500px;">
  <div slot="header">
    <strong>Shopping Cart</strong>
    <wa-icon-button name="close" variant="solid" label="Settings"></wa-icon-button>
  </div>
    <section class="cart-item">
-    <img src="https://source.unsplash.com/white-and-red-nike-air-force-1-high--iJgjj33eEk" alt="" width="300">
+    <img src="https://images.unsplash.com/photo-1704677982224-89cd6d039fa6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDEwOTJ8&ixlib=rb-4.0.3&q=80&w=1080" alt="" width="300">
    <div>
      <div style="display:flex; justify-content: space-between; font-weight: 600;">
        <span>AJ1</span>
@@ -31,7 +148,7 @@ TODO Page Description
    </div>
  </section>
   <section class="cart-item">
-    <img src="https://source.unsplash.com/smiling-woman-in-black-and-white-print-t-shirt-VW5VjskNXZ8" alt="" width="300">
+    <img src="https://plus.unsplash.com/premium_photo-1707932485795-1d0aed727376?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDE2NDl8&ixlib=rb-4.0.3&q=80&w=1080" alt="" width="300">
    <div>
      <div style="display:flex; justify-content: space-between; font-weight: 600;">
        <span>The Trails</span>
@@ -45,7 +162,7 @@ TODO Page Description
    </div>
  </section>
   <section class="cart-item">
-    <img src="https://source.unsplash.com/man-standing-in-front-of-door-dG4Eb_oC5iM" alt="" width="300">
+    <img src="https://plus.unsplash.com/premium_photo-1690347839113-b5db143123b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDE5MTB8&ixlib=rb-4.0.3&q=80&w=1080" alt="" width="300">
    <div>
      <div style="display:flex; justify-content: space-between; font-weight: 600;">
        <span>Outcast</span>
@@ -120,7 +237,7 @@ TODO Page Description
  <h1>Shopping Cart</h1>
  <div class="first-column">
    <section class="cart-item">
-     <img class="cart-item-image" src="https://source.unsplash.com/white-crew-neck-t-shirt-acn5ERAeSb4" alt="" width="300">
+     <img class="cart-item-image" 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" alt="" width="300">
    <div class="cart-item-info">
      <div class="cart-item-meta">
        <div>
@@ -144,7 +261,7 @@ TODO Page Description
    </div>
  </section>
  <section class="cart-item">
-     <img class="cart-item-image" src="https://source.unsplash.com/blue-and-white-checkered-dress-shirt-RqYTuWkTdEs" alt="" width="300">
+     <img class="cart-item-image" src="https://images.unsplash.com/photo-1624378440847-4a64ee1a889d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDI0MDd8&ixlib=rb-4.0.3&q=80&w=1080" alt="" width="300">
    <div class="cart-item-info">
      <div class="cart-item-meta">
        <div>
@@ -168,7 +285,7 @@ TODO Page Description
    </div>
  </section>
  <section class="cart-item">
-     <img class="cart-item-image" src="https://source.unsplash.com/white-and-blue-cat-printed-crew-neck-t-shirt-fEt6Wd4t4j0" alt="" width="300">
+     <img class="cart-item-image" src="https://images.unsplash.com/photo-1511551203524-9a24350a5771?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDI0OTB8&ixlib=rb-4.0.3&q=80&w=1080" alt="" width="300">
    <div class="cart-item-info">
      <div class="cart-item-meta">
        <div>
@@ -194,7 +311,7 @@ TODO Page Description


  </div>
-  <wa-card class="card-header second-column">
+  <wa-card with-header class="card-header second-column">
  <div slot="header">
    Order Summary

@@ -224,6 +341,9 @@ TODO Page Description
 </wa-card>

 <style>
+  :root {
+    --border-color: var(--wa-color-surface-border);
+  }
  .two-column {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
@@ -245,7 +365,7 @@ TODO Page Description

       &:not(:last-of-type) {
      padding-bottom: 1rem;
-      border-bottom: 1px solid rgb(48, 50, 59);
+      border-bottom: 1px solid var(--border-color);
    }


@@ -274,7 +394,7 @@ TODO Page Description
  <h1>Shopping Cart</h1>
  <div class="first-half half">
    <section class="cart-item">
-    <img class="cart-item-image" src="https://source.unsplash.com/black-convertible-coupe-0CZwuZhiC84" alt="" >
+    <img class="cart-item-image" src="https://images.unsplash.com/photo-1594787317357-dcda50fd1d78?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDI4MDd8&ixlib=rb-4.0.3&q=80&w=1080" alt="" >
    <div>
      <span style="display: flex;justify-content: space-between;">
        <span><strong>Convertible</strong></span>
@@ -291,7 +411,7 @@ TODO Page Description

  </section>
  <section class="cart-item">
-    <img class="cart-item-image" src="https://source.unsplash.com/blue-open-door-pickup-truck-BCKgFzJbwz4" alt="" >
+    <img class="cart-item-image" src="https://images.unsplash.com/photo-1597670250484-0e9aff7f8804?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDI4NTB8&ixlib=rb-4.0.3&q=80&w=1080" alt="" >
    <div>
      <span style="display: flex;justify-content: space-between;">
        <span><strong>Pickup</strong></span>
@@ -308,7 +428,7 @@ TODO Page Description

  </section>
  <section class="cart-item">
-    <img class="cart-item-image" src="https://source.unsplash.com/red-and-white-volkswagen-t-2-scale-model-GlDRYsruYJ8" alt="" >
+    <img class="cart-item-image" src="https://images.unsplash.com/photo-1594787826350-19386fdb2363?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDI4ODV8&ixlib=rb-4.0.3&q=80&w=1080" alt="" >
    <div>
      <span style="display: flex;justify-content: space-between;">
        <span><strong>Volkswagon T2</strong></span>
@@ -337,6 +457,9 @@ TODO Page Description
  </div>
 </div>
 <style>
+  :root {
+    --border-color: var(--wa-color-surface-border);
+  }
  .single-column {
    .cart-item {
      display: grid;
@@ -346,7 +469,7 @@ TODO Page Description

       &:not(:last-of-type) {
      padding-bottom: 1rem;
-      border-bottom: 1px solid rgb(48, 50, 59);
+      border-bottom: 1px solid var(--border-color);
    }

    img {
@@ -367,20 +490,22 @@ TODO Page Description
 </style>
 ```

-### Product Quickview
+<!-- ## Product Quickviews
+
+### Basic

 ```html {.example}
-<wa-card class="card-header">
+<wa-card with-header class="card-header">
  <div slot="header">
    <strong>Quickview</strong>
    <wa-icon-button name="close" variant="solid" label="Settings"></wa-icon-button>
  </div>
  <div style="
    display: grid;
-    grid-template-columns: 35% 65%;
+    grid-template-columns: 35% 1fr;
    grid-column-gap: 1rem;
 ">
-  <img class="cart-item-image" src="https://source.unsplash.com/white-crew-neck-t-shirt-acn5ERAeSb4" alt="" width="300">
+  <img class="cart-item-image" src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDI5OTJ8&ixlib=rb-4.0.3&q=80&w=1080" alt="" >
  <div>
    <h3>Quality Cotton Tee</h3>
    <span>$45.00</span>
@@ -403,6 +528,189 @@ TODO Page Description
  </div>
  </div>
 </wa-card>
+``` -->
+
+### With Carousel
+
+```html {.example}
+<wa-carousel class="carousel-thumbnails" navigation loop>
+  <wa-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+      src="/assets/examples/carousel/pullover-1.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+      src="/assets/examples/carousel/pullover-2.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+      src="/assets/examples/carousel/pullover-3.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+      src="/assets/examples/carousel/pullover-4.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+      src="/assets/examples/carousel/pullover-5.jpg"
+    />
+  </wa-carousel-item>
+</wa-carousel>
+
+<div class="thumbnails">
+  <div class="thumbnails__scroller">
+    <img alt="Thumbnail by 1" class="thumbnails__image active" src="/assets/examples/carousel/pullover-1.jpg" />
+    <img alt="Thumbnail by 2" class="thumbnails__image" src="/assets/examples/carousel/pullover-2.jpg" />
+    <img alt="Thumbnail by 3" class="thumbnails__image" src="/assets/examples/carousel/pullover-3.jpg" />
+    <img alt="Thumbnail by 4" class="thumbnails__image" src="/assets/examples/carousel/pullover-4.jpg" />
+    <img alt="Thumbnail by 5" class="thumbnails__image" src="/assets/examples/carousel/pullover-5.jpg" />
+  </div>
+</div>
+<div>
+  <h3 style="--wa-space-xl: 0;">Pullover Sweater</h3>
+  <span class="price-big">$140</span>
+  <wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
+  <p>The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.</p>
+  <wa-radio-group label="Select Color" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Black
+  </wa-radio-button>
+  <wa-radio-button value="2">White</wa-radio-button>
+  <wa-radio-button value="3">Gray</wa-radio-button>
+</wa-radio-group>
+<div>
+  <wa-button>Add to cart</wa-button>
+  <wa-icon-button name="gear" label="Settings"></wa-icon-button>
+</div>
+<div class="details-group-example">
+  <wa-details summary="First" open>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+
+  <wa-details summary="Second">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+
+  <wa-details summary="Third">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+</div>
+</div>
+
+<style>
+  .carousel-thumbnails {
+    --slide-aspect-ratio: 3 / 2;
+  }
+
+  wa-radio-button #shadow-root div .button--medium {
+    padding: var(--wa-space-xs) var(--wa-space-xs);
+  }
+  
+  .color-circle {
+    --background: #000;
+    background: var(--background);
+ 
+    width: 50px;
+    height: 100%;
+  }
+
+  .sweater-rating {
+    margin-bottom: 1rem;
+  }
+  .price-big {
+    display: block;
+    font-size: 32px;
+  }
+
+  .thumbnails {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+  }
+
+  .thumbnails__scroller {
+    display: flex;
+    gap: var(--wa-space-s);
+    overflow-x: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    scroll-padding: var(--wa-space-s);
+  }
+
+  .thumbnails__scroller::-webkit-scrollbar {
+    display: none;
+  }
+
+  .thumbnails__image {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+
+    opacity: 0.3;
+    will-change: opacity;
+    transition: 250ms opacity;
+
+    cursor: pointer;
+  }
+
+  .thumbnails__image.active {
+    opacity: 1;
+  }
+  .details-group-example wa-details:not(:last-of-type) {
+    margin-bottom: var(--wa-space-2xs);
+  }
+</style>
+
+<script>
+  {
+    const carousel = document.querySelector('.carousel-thumbnails');
+    const scroller = document.querySelector('.thumbnails__scroller');
+    const thumbnails = document.querySelectorAll('.thumbnails__image');
+
+    scroller.addEventListener('click', e => {
+      const target = e.target;
+
+      if (target.matches('.thumbnails__image')) {
+        const index = [...thumbnails].indexOf(target);
+        carousel.goToSlide(index);
+      }
+    });
+
+    carousel.addEventListener('wa-slide-change', e => {
+      const slideIndex = e.detail.index;
+
+      [...thumbnails].forEach((thumb, i) => {
+        thumb.classList.toggle('active', i === slideIndex);
+        if (i === slideIndex) {
+          thumb.scrollIntoView({
+            block: 'nearest'
+          });
+        }
+      });
+    });
+  }
+
+    const container = document.querySelector('.details-group-example');
+
+  // Close all other details when one is shown
+  container.addEventListener('wa-show', event => {
+    if (event.target.localName === 'wa-details') {
+      [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
+    }
+  });
+</script>
+
 ```

 ### Product Review
@@ -423,21 +731,21 @@ TODO Page Description
  </div>
  <div style="margin-top: 1rem;">
    <div>
-      <div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
+      <div class="customer-list-item">
        <span style="display: flex; align-items: center;">
          <wa-avatar image="https://source.unsplash.com/bman-wearing-henley-top-portrait-7YVZYZeITc8" label="man-wearing-henley" style="margin-right: 1rem;"></wa-avatar>
          <span style="display: flex; flex-direction: column">Mark Henry <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
        </span>
        <p><em>I initially had my doubts, but once I got the widgets and played around with them, I became a believer.</em></p>
      </div>
-      <div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
+      <div class="customer-list-item">
        <span style="display: flex; align-items: center;">
          <wa-avatar image="https://source.unsplash.com/woman-wearing-black-crew-neck-shirt-3TLl_97HNJo" label="lady-in-turtleneck" style="margin-right: 1rem;"></wa-avatar>
          <span style="display: flex; flex-direction: column">Liz Michaels <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
        </span>
        <p><em>I'd definitely but these again.</em></p>
      </div>
-      <div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
+      <div class="customer-list-item">
        <span style="display: flex; align-items: center;">
          <wa-avatar image="https://source.unsplash.com/man-with-index-finger-on-lips-RukI4qZGlQs" label="man-with-hair" style="margin-right: 1rem;"></wa-avatar>
          <span style="display: flex; flex-direction: column">Todd Smith <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
@@ -447,6 +755,21 @@ TODO Page Description
    </div>
  </div>
 </div>
+
+<style>
+  :root {
+    --border-color: var(--wa-color-surface-border);
+  }
+
+  .customer-list-item {
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 1rem;
+  }
+
+  .cart-item-image {
+    width: 100%;
+  }
+</style>
 ```

 ### Order History
@@ -475,7 +798,7 @@ TODO Page Description
  </div>
  <div>
    <div class="order-history-list-item" style="align-items: center;">
-      <img class="cart-item-image" src="https://source.unsplash.com/beige-wooden-bar-stool-4kTbAMRAHtQ" alt="">
+      <img class="cart-item-image" src="https://images.unsplash.com/photo-1628304433247-804066a9864c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDMxODN8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
      <div>
        <span style="display: flex;justify-content: space-between;">
          <span><strong>Kitchen Stool</strong></span>
@@ -490,7 +813,7 @@ TODO Page Description
      </div>
    </div>
    <div class="order-history-list-item" style="margin-top: 1rem; align-items: center;">
-      <img class="cart-item-image" src="https://source.unsplash.com/green-succulent-in-teal-ceramic-vase-miziNqvJx5M" alt="">
+      <img class="cart-item-image" src="https://plus.unsplash.com/premium_photo-1675705062445-0c14a42d4289?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDMwODJ8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
      <div>
        <span style="display: flex;justify-content: space-between;">
          <span><strong>Succulent</strong></span>
@@ -505,7 +828,7 @@ TODO Page Description
      </div>
    </div>
    <div class="order-history-list-item" style="margin-top: 1rem; align-items: center;">
-      <img class="cart-item-image" src="https://source.unsplash.com/battercreek-coffee-pack-rsnzc-8dVs0" alt="">
+      <img class="cart-item-image" src="https://images.unsplash.com/photo-1613536844480-ac5d7b1b6ed1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDMyMzh8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
      <div>
        <span style="display: flex;justify-content: space-between;">
          <span><strong>French Roast</strong></span>
@@ -522,6 +845,9 @@ TODO Page Description
  </div>
 </div>
 <style>
+   :root {
+    --border-color: var(--wa-color-surface-border);
+  }
  .order-history-meta {
    display: flex;
    justify-content: space-between;
@@ -538,7 +864,7 @@ TODO Page Description
        display: grid;
    grid-template-columns: 18% 79%;
    column-gap: 1rem;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
  }
 </style>
@@ -586,7 +912,7 @@ TODO Page Description
  <h4>Order Summary</h4>
  <wa-card class="card-basic">
    <div class="summary-item">
-      <img src="https://source.unsplash.com/pair-of-white-and-orange-athletic-shoes-on-white-box-dwKiHoqqxk8">
+      <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">
      <div class="summary-item-info">
        <span style="display: flex; justify-content: space-between;">
          <span class="item-heading">Dolce Runners</span>
@@ -607,7 +933,7 @@ TODO Page Description
      <hr style="grid-column: 1 / -1;">
    </div>
    <div class="summary-item">
-      <img src="https://source.unsplash.com/white-and-brown-nike-sneaker-LV_4qM5Gf9c">
+      <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">
      <div class="summary-item-info">
        <span style="display: flex; justify-content: space-between;">
          <span class="item-heading">Dunk High</span>
@@ -628,7 +954,7 @@ TODO Page Description
      <hr style="grid-column: 1 / -1;">
    </div>
    <div class="summary-item">
-      <img src="https://source.unsplash.com/black-and-white-new-balance-low-top-sneaker-6zO5VKogoZE">
+      <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">
      <div class="summary-item-info">
        <span style="display: flex; justify-content: space-between;">
          <span class="item-heading">NB Runner</span>
@@ -671,6 +997,7 @@ TODO Page Description

        img {
          grid-column: 1/4;
+          width: 100%;
        }

        .summary-item-info {
--- a/docs/docs/patterns/education.md
+++ b/docs/docs/patterns/education.md
@@ -0,0 +1,9 @@
+---
+title: Business
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## Examples
--- a/docs/docs/patterns/entertainement.md
+++ b/docs/docs/patterns/entertainement.md
@@ -1,4 +1,9 @@
 ---
 title: Entertainment
 description: TODO
+layout: page.njk
 ---
+
+TODO Page Description
+
+## Examples
--- a/docs/docs/patterns/index.md
+++ b/docs/docs/patterns/index.md
@@ -0,0 +1,5 @@
+---
+title: Patterns
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: page-outline
+---
--- a/docs/docs/patterns/membership.md
+++ b/docs/docs/patterns/membership.md
@@ -1,4 +1,9 @@
 ---
 title: Membership
 description: TODO
+layout: page.njk
 ---
+
+TODO Page Description
+
+## Examples
--- a/docs/docs/patterns/news.md
+++ b/docs/docs/patterns/news.md
@@ -1,4 +1,160 @@
 ---
 title: News
 description: TODO
+layout: page.njk
 ---
+
+TODO Page Description
+
+## Examples
+### Paywall
+
+```html{.example}
+<div>
+  <wa-dialog label="You've run out of free articles... loser" with-header class="dialog-header">
+    <wa-button href="#">Register</wa-button>
+  Already a subscriber? <a href="#">Login</a>
+</wa-dialog>
+
+<wa-button>Open Paywall</wa-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-header');
+  const openButton = dialog.nextElementSibling;
+
+  openButton.addEventListener('click', () => dialog.open = true);
+</script>
+
+</div>
+```
+## Related articles
+```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="">
+        <h2 style="margin-bottom: var(--wa-space-s);">Title</h2>
+        <p style="margin-bottom: var(--wa-space-3xs);">Well, the way they make shows is, they make one show. That show's called a pilot.</p>
+      
+      <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="">
+       
+        <p style="margin-bottom: var(--wa-space-3xs);">Normally, both your asses would be dead as fucking fried chicken.</p>
+      
+      <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="">
+       
+        <p style="margin-bottom: var(--wa-space-3xs);">Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
+      
+      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
+        </div>
+      </div>
+    </div>
+  </wa-card>
+</div>
+```
+
+## Footer 
+```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>
+</div>
+<style>
+  .news-footer {
+  
+    .container {
+      max-width: 960px;
+      margin: auto;
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+    }
+    .nav {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    .nav ul {
+      list-style-type: none;
+      margin-left: 0;
+    }
+    .social a {
+      text-decoration: none;
+      display: inline-block;
+    }
+    .social a:not(:last-child) {
+      margin-right: 1rem;
+    }
+    section ul li a {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      --wa-color-text-link: var(--wa-color-gray-20);
+
+      wa-icon {
+        margin-right: .5rem;
+      }
+    }
+  }
+</style>
+```
--- a/docs/docs/patterns/non-profit.md
+++ b/docs/docs/patterns/non-profit.md
@@ -1,4 +1,9 @@
 ---
 title: Non-profit
 description: TODO
+layout: page.njk
 ---
+
+TODO Page Description
+
+## Examples
--- a/docs/docs/patterns/portfilio.md
+++ b/docs/docs/patterns/portfilio.md
@@ -0,0 +1,9 @@
+---
+title: Business
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## Examples
--- a/docs/docs/patterns/portfolio.md
+++ b/docs/docs/patterns/portfolio.md
@@ -1,4 +1,9 @@
 ---
 title: Portfolio
 description: TODO
+layout: page.njk
 ---
+
+TODO Page Description
+
+## Examples
--- a/docs/docs/patterns/product-landing.md
+++ b/docs/docs/patterns/product-landing.md
@@ -1,4 +1,9 @@
 ---
 title: Product Landing
 description: TODO
+layout: page.njk
 ---
+
+TODO Page Description
+
+## Examples
--- a/docs/src/env.d.ts
+++ b/docs/src/env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="astro/client" />
+/// <reference path="../.astro/types.d.ts" />