Merge pull request #859 from shoelace-style/kj/patterns-home-stretch

Kj/patterns home stretch

docs/_includes/svgs/action-panel.njk

@@ -0,0 +1,8 @@
+<svg width="96" height="57" viewBox="0 0 96 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1H84C90.0751 1 95 5.92487 95 12V45C95 51.0751 90.0751 56 84 56H12C5.92487 56 1 51.0751 1 45V12C1 5.92487 5.92487 1 12 1Z" fill="white" stroke="#E4E5E9" stroke-width="2"/>
+<rect x="7" y="39" width="50" height="11" rx="4" fill="#4895FD"/>
+<rect x="7" y="8" width="41" height="5" fill="#616D8A"/>
+<rect x="7" y="19.75" width="76" height="3" fill="#D9D9D9"/>
+<rect x="7" y="25" width="76" height="3" fill="#D9D9D9"/>
+<rect x="7" y="32" width="76" height="3" fill="#D9D9D9"/>
+</svg>

docs/_includes/svgs/preview.njk

@@ -0,0 +1,10 @@
+<svg width="120" height="87" viewBox="0 0 240 178" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="39" width="67" height="63" rx="12" fill="#D9D9D9"/>
+<rect y="115" width="67" height="63" rx="12" fill="#D9D9D9"/>
+<rect width="67" height="19" rx="6" fill="#D9D9D9"/>
+<rect x="87" y="39" width="67" height="63" rx="12" fill="#D9D9D9"/>
+<rect x="174" y="39" width="67" height="63" rx="12" fill="#D9D9D9"/>
+<rect x="174" y="7" width="67" height="4.75" rx="2.375" fill="#D9D9D9"/>
+<rect x="87" y="115" width="67" height="63" rx="12" fill="#D9D9D9"/>
+<rect x="174" y="115" width="67" height="63" rx="12" fill="#D9D9D9"/>
+</svg>

docs/_layouts/patterns.njk

@@ -0,0 +1,5 @@
+{% extends '../_layouts/block.njk' %}
+
+{% block head %}
+<link href="/docs/patterns/patterns.css" rel="stylesheet">
+{% endblock %}

docs/docs/patterns/app/action-panel.md

@@ -0,0 +1,66 @@
+---
+title: Action Panel
+description: 'Help users complete tasks efficiently with quick access to key actions.'
+icon: action-panel
+---
+
+## Simple
+
+```html {.example}
+<wa-card style="max-width: 60ch; margin: auto">
+  <div class="wa-stack wa-align-items-start">
+    <h3 class="wa-heading-m">New Dashboard</h3>
+    <p>Arrange your data into a single view to monitor trends and track performance.</p>
+    <wa-button variant="brand" size="small">Build Dashboard</wa-button>
+  </div>
+</wa-card>
+```
+
+## With Flanked Button
+
+```html {.example}
+<wa-card style="max-width: 60ch; margin: auto">
+  <div class="wa-flank:end">
+    <div class="wa-stack wa-gap-xs">
+      <h3 class="wa-heading-m">Query with SQL Runner</h3>
+      <p>Access your database to run ad hoc queries.</p>
+    </div>
+    <wa-button variant="brand">New Query</wa-button>
+  </div>
+</wa-card>
+```
+
+## With Switch
+
+```html {.example}
+<wa-card style="max-width: 70ch; margin: auto">
+  <div class="wa-stack">
+    <div class="wa-flank:end">
+      <h3 id="auto-renew-label" class="wa-heading-m">Auto-renew</h3>
+      <wa-switch size="large" aria-labelledby="auto-renew-label"></wa-switch>
+    </div>
+    <p class="wa-body-s">Automatically renew your subscription using your preferred payment method. We'll send you a reminder 30 days before we draft your account.</p>
+  </div>
+</wa-card>
+```
+
+## Avatar and Quick actions
+
+```html{.example}
+<wa-card style="margin: 0 auto; max-width: 45ch;">
+  <div class="wa-flank">
+    <wa-avatar image="https://images.unsplash.com/photo-1532202802379-df93d543bac3?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile-image"></wa-avatar>
+    <div class="wa-split">
+      <div class="wa-stack wa-gap-0">
+        <span class="wa-heading-s">Super Dog</span>
+        <span class="wa-caption-m">Online</span>
+      </div>
+      <div class="wa-cluster" style="font-size: var(--wa-font-size-l);">
+        <wa-icon-button name="microphone" label="audio-input"></wa-icon-button>
+        <wa-icon-button name="headphones" label="audio-output"></wa-icon-button>
+        <wa-icon-button name="gear" label="settings"></wa-icon-button>
+      </div>
+    </div>
+  </div>
+</wa-card>
+```

docs/docs/patterns/app/activity-log.md

@@ -0,0 +1,206 @@
+---
+title: Activity Log
+description: 'Track and organize recent user actions or events.'
+---
+
+## Simple
+
+```html {.example}
+<div class="wa-stack" style="max-width: 60ch; margin: auto">
+  <article class="wa-flank:end wa-align-items-baseline" style="--flank-size: 10ch">
+    <div class="wa-grid">
+      <div class="wa-cluster">
+        <wa-icon name="french-fries" fixed-width></wa-icon>
+        <span>Fast food</span>
+      </div>
+      <wa-relative-time sync></wa-relative-time>
+    </div>
+    <wa-tag variant="danger">- $5.00</wa-tag>
+  </article>
+  <wa-divider></wa-divider>
+  <article class="wa-flank:end wa-align-items-baseline" style="--flank-size: 10ch">
+    <div class="wa-grid">
+      <div class="wa-cluster">
+        <wa-icon name="piggy-bank" fixed-width></wa-icon>
+        <span>Refund</span>
+      </div>
+      <wa-relative-time date="2025-03-26T09:00:00-04:00"></wa-relative-time>
+    </div>
+    <wa-tag variant="success">+ $48.99</wa-tag>
+  </article>
+  <wa-divider></wa-divider>
+  <article class="wa-flank:end wa-align-items-baseline" style="--flank-size: 10ch">
+    <div class="wa-grid">
+      <div class="wa-cluster">
+        <wa-icon name="carrot" fixed-width></wa-icon>
+        <span>Groceries</span>
+      </div>
+      <wa-relative-time date="2025-03-24T09:00:00-04:00"></wa-relative-time>
+    </div>
+    <wa-tag variant="danger">- $115.37</wa-tag>
+  </article>
+  <wa-divider></wa-divider>
+  <article class="wa-flank:end wa-align-items-baseline" style="--flank-size: 10ch">
+    <div class="wa-grid">
+      <div class="wa-cluster">
+        <wa-icon name="shirt" fixed-width></wa-icon>
+        <span>Clothing</span>
+      </div>
+      <wa-relative-time date="2025-03-15T09:00:00-04:00"></wa-relative-time>
+    </div>
+    <wa-tag variant="danger">- $220.99</wa-tag>
+  </article>
+</div>
+```
+
+## Timeline with Icons
+
+```html {.example}
+<div class="wa-stack wa-gap-3xs" style="max-width: 60ch; margin: auto">
+  <article class="wa-flank" style="flex-wrap: nowrap">
+    <wa-avatar style="--size: 2rem">
+      <wa-icon slot="icon" name="acorn"></wa-icon>
+    </wa-avatar>
+    <div class="wa-flank:end wa-gap-xs">
+      <span>Buried by <strong>squirrel</strong></span>
+      <wa-format-date date="2025-04-01" month="short" day="numeric"></wa-format-date>
+    </div>
+  </article>
+  <wa-divider vertical style="height: 1em; margin-left: 1rem"></wa-divider>
+  <article class="wa-flank" style="flex-wrap: nowrap">
+    <wa-avatar style="--size: 2rem">
+      <wa-icon slot="icon" name="seedling"></wa-icon>
+    </wa-avatar>
+    <div class="wa-flank:end wa-gap-xs">
+      <span>Germinated in <strong>nutrient-rich soil</strong></span>
+      <wa-format-date date="2025-05-29" month="short" day="numeric"></wa-format-date>
+    </div>
+  </article>
+  <wa-divider vertical style="height: 1em; margin-left: 1rem"></wa-divider>
+  <article class="wa-flank" style="flex-wrap: nowrap">
+    <wa-avatar style="--size: 2rem">
+      <wa-icon slot="icon" name="tree-deciduous"></wa-icon>
+    </wa-avatar>
+    <div class="wa-flank:end wa-gap-xs">
+      <span>Matured by <strong>water</strong> and <strong>sunlight</strong></span>
+      <wa-format-date date="2025-09-15" month="short" day="numeric"></wa-format-date>
+    </div>
+  </article>
+  <wa-divider vertical style="height: 1em; margin-left: 1rem"></wa-divider>
+  <article class="wa-flank" style="flex-wrap: nowrap">
+    <wa-avatar style="--size: 2rem">
+      <wa-icon slot="icon" name="crate-apple"></wa-icon>
+    </wa-avatar>
+    <div class="wa-flank:end wa-gap-xs">
+      <span>Fruit harvested by <strong>you</strong></span>
+      <wa-format-date date="2025-10-18" month="short" day="numeric"></wa-format-date>
+    </div>
+  </article>
+</div>
+```
+
+## With Expandable Details
+
+```html {.example}
+<wa-card style="max-width: 70ch; margin: auto">
+  <h3 class="wa-heading-l">Monthly Activity</h3>
+  <div class="wa-stack">
+    <wa-details>
+      <span class="wa-heading-m" slot="summary">
+        February
+      </span>
+      <div class="wa-stack">
+        <article class="wa-flank">
+          <wa-icon style="font-size: var(--wa-font-size-xl)" name="envelope" fixed-width></wa-icon>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-0">
+              <span class="wa-heading-s">Email blasts</span>
+              <div class="wa-cluster wa-gap-2xs">
+                <a href="#">Nick Burkhart</a><span>sent to</span><a href="#">likely customers</a>
+              </div>
+            </div>
+            <wa-format-date date="2025-02-28" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
+          </div>
+        </article>
+        <wa-divider></wa-divider>
+        <article class="wa-flank">
+          <wa-icon style="font-size: var(--wa-font-size-xl)" name="phone" fixed-width></wa-icon>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-0">
+              <span class="wa-heading-s">Spoke with the Pope</span>
+              <div class="wa-cluster wa-gap-2xs">
+                <a href="#">Artur Fleck</a><span>for 1 hour</span>
+              </div>
+            </div>
+            <wa-format-date date="2025-02-23" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
+          </div>
+        </article>
+      </div>
+    </wa-details>
+    <wa-details>
+      <span class="wa-heading-m" slot="summary">
+        March
+      </span>
+      <div class="wa-stack">
+        <article class="wa-flank">
+          <wa-icon style="font-size: var(--wa-font-size-xl)" name="video" fixed-width></wa-icon>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-0">
+              <span class="wa-heading-s">Zoom Call with Northeast office</span>
+              <div class="wa-cluster wa-gap-2xs">
+                <a href="#">Axel Foley</a><span>for 47 minutes</span>
+              </div>
+            </div>
+            <wa-format-date date="2025-03-15" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
+          </div>
+        </article>
+        <wa-divider></wa-divider>
+        <article class="wa-flank">
+          <wa-icon style="font-size: var(--wa-font-size-xl)" name="calendar" fixed-width></wa-icon>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-0">
+              <span class="wa-heading-s">Scheduled birthday party</span>
+              <div class="wa-cluster wa-gap-2xs">
+                <a href="#">John Blaze</a><span>in</span><a href="#">Social Events</a>
+              </div>
+            </div>
+            <wa-format-date date="2025-03-03" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
+          </div>
+        </article>
+      </div>
+    </wa-details>
+    <wa-details>
+      <span class="wa-heading-m" slot="summary">
+        April
+      </span>
+      <div class="wa-stack">
+        <article class="wa-flank">
+          <wa-icon style="font-size: var(--wa-font-size-xl)" family="brands" name="intercom" fixed-width></wa-icon>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-0">
+              <span class="wa-heading-s">Got new lead</span>
+              <div class="wa-cluster wa-gap-2xs">
+                <a href="#">Jack Carter</a><span>on Intercom switchboard</span>
+              </div>
+            </div>
+            <wa-format-date date="2025-04-18" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
+          </div>
+        </article>
+        <wa-divider></wa-divider>
+        <article class="wa-flank">
+          <wa-icon style="font-size: var(--wa-font-size-xl)" name="list-check" fixed-width></wa-icon>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-0">
+              <span class="wa-heading-s">Completed Todo</span>
+              <div class="wa-cluster wa-gap-2xs">
+                <a href="#">Huey Freeman</a><span>marked complete on</span><a href="#">Daily Tasks</a>
+              </div>
+            </div>
+            <wa-format-date date="2025-04-02" month="short" day="numeric" class="wa-caption-m"></wa-format-date>
+          </div>
+        </article>
+      </div>
+    </wa-details>
+  </div>
+</wa-card>
+```

docs/docs/patterns/app/app.json

@@ -0,0 +1,3 @@
+{
+  "tags": ["app"]
+}

docs/docs/patterns/app/comments.md

@@ -0,0 +1,164 @@
+---
+title: Comments
+description: 'Enable users to engage in discussions, provide feedback, or record their thoughts.'
+---
+
+## Card with Header & Footer
+
+```html {.example}
+<form style="max-width: 60ch; margin: auto">
+  <wa-card>
+    <div slot="header" id="comment-area-label">
+      <span class="wa-heading-s">Leave a Comment</span>
+    </div>
+    <wa-textarea aria-labelledby="comment-area-label"></wa-textarea>
+    <div slot="footer" class="wa-cluster" style="justify-content: flex-end">
+      <wa-button appearance="filled">
+        <wa-icon slot="prefix" name="paperclip" variant="solid"></wa-icon>
+        Attach a file
+      </wa-button>
+      <wa-button variant="brand">Comment</wa-button>
+    </div>
+  </wa-card>
+</form>
+```
+
+## Card with Thread
+
+```html {.example}
+<wa-card style="max-width: 60ch; margin: auto">
+  <div class="wa-stack">
+    <h3 class="wa-heading-m">Comments</h3>
+    <wa-textarea aria-label="Comment"></wa-textarea>
+    <wa-button variant="brand">Add Comment</wa-button>
+    <wa-divider></wa-divider>
+    <ul class="wa-stack">
+      <li class="wa-stack wa-gap-2xs">
+        <div class="wa-flank">
+          <wa-avatar initials="RF" label="User avatar"></wa-avatar>
+          <div class="wa-cluster">
+            <strong>Robert Fox</strong>
+            <span class="wa-caption-m">commented <wa-relative-time date="2025-03-31T09:17:00-04:00"></wa-relative-time></span>
+          </div>
+        </div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec. Suspendisse potenti. Pellentesque lobortis pulvinar nulla non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
+      </li>
+      <div class="wa-flank wa-gap-xl">
+        <wa-divider vertical style="height: auto; align-self: stretch"></wa-divider>
+        <ul class="wa-stack">
+          <li class="wa-stack wa-gap-2xs">
+            <div class="wa-flank">
+              <wa-avatar initials="VF" label="User avatar"></wa-avatar>
+              <div class="wa-cluster">
+                <strong>Virginia Woolf</strong>
+                <span class="wa-caption-m">commented <wa-relative-time date="2025-03-31T12:32:00-04:00"></wa-relative-time></span>
+              </div>
+            </div>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.</p>
+          </li>
+          <li class="wa-stack wa-gap-2xs">
+            <div class="wa-flank">
+              <wa-avatar initials="CV" label="User avatar"></wa-avatar>
+              <div class="wa-cluster">
+                <strong>Clarissa Vaughan</strong>
+                <span class="wa-caption-m">commented <wa-relative-time></wa-relative-time></span>
+              </div>
+            </div>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.</p>
+          </li>
+          <li class="wa-cluster">
+            <wa-icon name="reply"></wa-icon>
+            <a href="">Leave a reply</a>
+          </li>
+        </ul>
+      </div>
+    </ul>
+  </div>
+</wa-card>
+```
+
+## With Avatar & Additional Actions
+
+```html {.example}
+<div class="wa-align-items-start wa-flank">
+  <wa-avatar image="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="User avatar"></wa-avatar>
+  <div class="wa-stack wa-gap-s">
+    <wa-textarea placeholder="Add to the conversation..." aria-label="Add comment"></wa-textarea>
+    <div class="wa-split">
+      <div class="wa-cluster wa-gap-s">
+        <wa-icon-button name="paperclip" label="Attach File" id="attach-button"></wa-icon-button>
+        <wa-tooltip for="attach-button">Attach File</wa-tooltip>
+        <wa-icon-button name="face-smile" label="Add Sticker" id="sticker-button"></wa-icon-button>
+        <wa-tooltip for="sticker-button">Add Sticker</wa-tooltip>
+      </div>
+      <wa-button variant="brand">Comment</wa-button>  
+    </div>
+  </div>
+</div>
+```
+
+## Rich Card with Multiple Actions
+
+```html {.example}
+<wa-card with-header with-footer style="max-width: 60ch; margin: auto">
+  <div slot="header">
+    <h3 class="wa-heading-s">I watched...</h3>
+  </div>
+  <div class="wa-stack">
+    <div class="wa-flank" style="--flank-size: 3rem">
+      <div class="wa-frame:portrait wa-border-radius-s">
+        <img 
+          src="https://images.unsplash.com/photo-1607675742178-f616ae75044b?q=80&w=3435&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
+          alt="" 
+        />
+      </div>
+      <span class="wa-heading-l">Heretic</span>
+    </div>
+    <wa-divider></wa-divider>
+    <dl class="wa-split">
+      <dt>Date</dt>
+      <dd>
+        <wa-format-date date="2025-03-13T00:00:00.000-04:00" weekday="long" month="long" day="numeric" year="numeric" class="wa-caption-m"></wa-format-date>
+      </dd>
+    </dl>
+    <wa-divider></wa-divider>
+    <div class="wa-split">
+      <wa-rating label="Rating"></wa-rating>
+      <wa-checkbox>Loved it!</wa-checkbox>
+    </div>
+    <wa-divider></wa-divider>
+    <wa-textarea placeholder="Add review..." aria-label="Add review"></wa-textarea>
+  </div>
+  <div slot="footer" class="wa-grid">
+    <wa-button appearance="outlined">Cancel</wa-button>
+    <wa-button variant="brand">Save</wa-button>
+  </div>
+</wa-card>
+```
+## With Preview Pane
+```html{.example}
+<div style="max-width: 60ch; margin: 0 auto;">
+  <wa-card class="wa-border-radius-square" with-footer>
+    <h3 class="wa-heading-m">Add a comment</h3>
+    <wa-tab-group>
+      <wa-tab panel="write">Write</wa-tab>
+      <wa-tab panel="preview">Preview</wa-tab>
+      <wa-tab-panel name="write">
+        <div class="wa-stack">
+          <div class="wa-cluster wa-gap-xs"  style="justify-content: flex-end;">
+            <wa-icon-button name="link" label="add link"></wa-icon-button>
+            <wa-icon-button name="at" label="mention collaborator"></wa-icon-button>
+            <wa-icon-button name="hashtag" label="change heading"></wa-icon-button>
+          </div>
+          <wa-textarea aria-label="Add a comment"></wa-textarea>
+        </div>
+      </wa-tab-panel>
+      <wa-tab-panel name="preview">Your content will render here.</wa-tab-panel>
+    </wa-tab-group>
+    <div slot="footer" class="wa-cluster" style="justify-content: flex-end;">
+      <wa-button appearance="outlined" size="small">Post</wa-button>
+    </div>
+  </wa-card>
+
+</div>
+```

docs/docs/patterns/app/data-display.md

@@ -0,0 +1,152 @@
+---
+title: Data Display
+description: 'Convey insights, metrics, and aggregate data at a glance.'
+---
+
+
+## Simple 
+```html {.example}
+<wa-card>
+  <div class="wa-grid wa-gap-3xl">
+    <div class="wa-stack">
+      <div class="wa-split">
+        <span>Revenue</span>
+        <span>+4.75%</span>
+      </div>
+      <div class="wa-heading-2xl">$400,000</div>
+    </div>
+    <div class="wa-stack">
+      <div class="wa-split">
+        <span>Revenue</span>
+        <span>+4.75%</span>
+      </div>
+      <div class="wa-heading-2xl">$400,000</div>
+    </div>
+    <div class="wa-stack">
+      <div class="wa-split">
+        <span>Revenue</span>
+        <span>+4.75%</span>
+      </div>
+      <div class="wa-heading-2xl">$400,000</div>
+    </div>
+    <div class="wa-stack">
+      <div class="wa-split">
+        <span>Revenue</span>
+        <span>+4.75%</span>
+      </div>
+      <div class="wa-heading-2xl">$400,000</div>
+    </div>
+  </div>
+</wa-card>
+```
+
+## Cards with Avatars
+```html {.example}
+<div class="wa-grid" style="--min-column-size: 30ch">
+  <wa-card>
+    <div class="wa-flank wa-align-items-start">
+      <wa-avatar shape="rounded">
+         <wa-icon slot="icon" name="user-group"></wa-icon>
+      </wa-avatar>
+      <div class="wa-stack wa-gap-2xs">
+        <h3 class="wa-caption-m">Total Subscribers</h3>
+        <div class="wa-cluster wa-gap-xs">
+          <span class="wa-heading-l">81,779</span>
+          <wa-badge variant="success" appearance="filled outlined" pill>
+            <wa-icon fixed-width name="arrow-up" label="Up"></wa-icon>
+            212
+          </wa-badge>
+        </div>
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank wa-align-items-start">
+      <wa-avatar shape="rounded">
+         <wa-icon slot="icon" name="envelope-open"></wa-icon>
+      </wa-avatar>
+      <div class="wa-stack wa-gap-2xs">
+        <h3 class="wa-caption-m">Open Rate</h3>
+        <div class="wa-cluster wa-gap-xs">
+          <span class="wa-heading-l">61.58%</span>
+          <wa-badge variant="success" appearance="filled outlined" pill>
+            <wa-icon fixed-width name="arrow-up" label="Up"></wa-icon>
+            4.5%
+          </wa-badge>
+        </div>
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank wa-align-items-start">
+      <wa-avatar shape="rounded">
+         <wa-icon slot="icon" name="arrow-pointer"></wa-icon>
+      </wa-avatar>
+      <div class="wa-stack wa-gap-2xs">
+        <h3 class="wa-caption-m">Click Rate</h3>
+        <div class="wa-cluster wa-gap-xs">
+          <span class="wa-heading-l">25.74%</span>
+          <wa-badge variant="danger" appearance="filled outlined" pill>
+            <wa-icon fixed-width name="arrow-down" label="Down"></wa-icon>
+            2.1%
+          </wa-badge>
+        </div>
+      </div>
+    </div>
+  </wa-card>
+</div>
+```
+
+## Condensed Card
+
+```html {.example}
+<wa-card style="max-width: 50ch; margin: auto">
+  <div slot="header" class="wa-split">
+    <h3 class="wa-heading-m"><span style="color: var(--wa-color-text-quiet)">query</span> getUser</h3>
+    <wa-icon-button id="go-to-query-button" name="chevron-right" label="Go to Query"></wa-icon-button>
+    <wa-tooltip for="go-to-query-button">Go to Query</wa-tooltip>
+  </div>
+  <div class="wa-stack wa-gap-xl">
+    <div class="wa-split wa-align-items-stretch">
+      <article class="wa-stack wa-align-items-start wa-gap-xs">
+        <h4 class="wa-caption-l">Cache Hit Rate</h4>
+        <div class="wa-cluster wa-heading-2xl">
+          <wa-progress-ring value="12.3" style="--size: 1em; --track-width: 0.125em"></wa-progress-ring>
+          <span>12.3%</span>
+        </div>
+        <wa-badge appearance="filled outlined" variant="danger"><wa-icon name="arrow-down"></wa-icon> down from 19.6%</wa-badge>
+      </article>
+      <article class="wa-stack wa-gap-xs wa-align-items-end">
+        <h4 class="wa-caption-l">Max CHR</h4>
+        <span class="wa-heading-2xl">72.6%</span>
+        <wa-badge appearance="filled outlined" variant="success"><wa-icon name="sparkles"></wa-icon> CHR Impact +5.4%</wa-badge>
+      </article>
+    </div>
+    <wa-divider></wa-divider>
+    <article class="wa-stack wa-gap-xl">
+      <div class="wa-stack wa-gap-xs">
+        <h4 class="wa-caption-l">Cacheable Bandwidth</h4>
+        <div class="wa-split">
+          <span class="wa-heading-2xl">90.5 GB</span>
+          <span class="wa-caption-xl">69.9%</span>
+        </div>
+        <wa-progress-bar value="30.1" label="Cached and non-cacheable bandwidth"></wa-progress-bar>
+      </div>
+      <dl class="wa-stack wa-caption-m">
+        <div class="wa-cluster">
+          <dt>Cached</dt>
+          <dd>12.8 GB (9.8%)</dd>
+        </div>
+        <div class="wa-cluster">
+          <dt>Non-Cacheable</dt>
+          <dd>26.3 GB (20.3%)</dd>
+        </div>
+        <div class="wa-cluster">
+          <dt>Total</dt>
+          <dd>129.6 GB</dd>
+        </div>
+      </dl>
+    </article>
+  </div>
+</wa-card>
+```

docs/docs/patterns/app/description-list.md

@@ -0,0 +1,252 @@
+---
+title: Description List
+description: 'Help users digest detailed information in a structured, easy-to-scan format.'
+---
+
+## Left Aligned
+
+```html {.example}
+<div class="wa-stack">
+  <h3 class="wa-heading-m">Applicant Info</h3>
+  <p class="wa-caption-m">Details about the applicant and attachments.</p>
+  <wa-divider></wa-divider>
+  <dl class="wa-stack wa-gap-2xl">
+    <div class="wa-flank" style="--flank-size: 20ch;">
+      <dt>Full name</dt>
+      <dd>Bucky Barnes</dd>
+    </div>
+    <div class="wa-flank" style="--flank-size: 20ch;">
+      <dt>Application for</dt>
+      <dd>Machine Learning Engineer</dd>
+    </div>
+    <div class="wa-flank" style="--flank-size: 20ch;">
+      <dt>Email address</dt>
+      <dd>winter_soldier@example.com</dd>
+    </div>
+    <div class="wa-flank" style="--flank-size: 20ch;">
+      <dt>Salary expectation</dt>
+      <dd>$240,000</dd>
+    </div>
+    <div class="wa-flank wa-align-items-start" style="--flank-size: 20ch;">
+      <dt>About</dt>
+      <dd>After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce warrior, loyal to those I love, and I'm always striving to atone for those dark days as the Winter Soldier.
+      </dd>
+    </div>
+    <div class="wa-flank wa-align-items-start" style="--flank-size: 20ch;">
+      <dt>Attachments</dt>
+      <dd>
+        <wa-card>
+          <div class="wa-stack">
+            <div class="wa-flank">
+              <wa-icon name="paperclip"></wa-icon>
+              <div class="wa-split">
+                <span class="wa-caption-m wa-cluster">
+                  <span>bb_resume.pdf</span>
+                  <span>2.4mb</span>
+                </span>
+                <wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
+              </div>
+            </div>
+            <wa-divider></wa-divider>
+            <div class="wa-flank">
+              <wa-icon name="paperclip"></wa-icon>
+              <div class="wa-split">
+                <span class="wa-caption-m wa-cluster">
+                  <span>bb_cover_letter.pdf</span>
+                  <span>2.4mb</span>
+                </span>
+                <wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
+              </div>
+            </div>
+          </div>
+        </wa-card>
+      </dd>
+    </div>
+  </dl>
+</div>
+```
+
+## Two Column
+
+```html{.example}
+<div class="wa-stack">
+  <h2 class="wa-heading-m">Applicant Info</h2>
+  <p class="wa-caption-m">Details about the applicant and attachments.</p>
+  <wa-divider></wa-divider>
+  <dl class="wa-grid wa-gap-2xl" style="--min-column-size: 40ch;">
+    <div class="wa-stack wa-gap-xs">
+      <dt>Full name</dt>
+      <dd>Bucky Barnes</dd>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <dt>Application for</dt>
+      <dd>Machine Learning Engineer</dd>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <dt>Email address</dt>
+      <dd>winter_soldier@example.com</dd>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <dt>Salary expectation</dt>
+      <dd>$240,000</dd>
+    </div>
+    <div class="wa-stack wa-gap-xs wa-span-grid">
+      <dt>About</dt>
+      <dd>After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce warrior, loyal to those I love, and I'm always striving to atone for those dark days as the Winter Soldier.
+      </dd>
+    </div>
+    <div class="wa-stack wa-gap-xs wa-span-grid">
+      <dt>Attachments</dt>
+      <dd>
+        <wa-card>
+          <div>
+            <div class="wa-flank">
+              <wa-icon name="paperclip"></wa-icon>
+              <div class="wa-split">
+                <span class="wa-caption-m wa-cluster">
+                   <span>bb_resume.pdf</span>
+                  <span>2.4mb</span>
+                </span>
+                <wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
+              </div>
+            </div>
+            <wa-divider></wa-divider>
+            <div class="wa-flank">
+              <wa-icon name="paperclip"></wa-icon>
+              <div class="wa-split">
+                <span class="wa-caption-m wa-cluster">
+                  <span>bb_cover_letter.pdf</span>
+                  <span>2.4mb</span>
+                </span>
+                <wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
+              </div>
+            </div>
+          </div>
+        </wa-card>
+      </dd>
+    </div>
+  </dl>
+</div>
+```
+
+## Left Aligned with Actions
+
+```html {.example}
+<div class="wa-stack">
+  <h3 class="wa-heading-m">Applicant Info</h3>
+  <p class="wa-caption-m">Details about the applicant and attachments.</p>
+  <wa-divider></wa-divider>
+  <dl class="wa-stack wa-gap-2xl">
+    <div class="wa-flank" style="--flank-size: 20ch;">
+      <dt>Full name</dt>
+      <div class="wa-flank:end">
+        <dd>Bucky Barnes</dd>
+        <wa-button appearance="plain" variant="brand" size="small">Edit</wa-button>
+      </div>
+    </div>
+    <div class="wa-flank" style="--flank-size: 20ch;">
+      <dt>Application for</dt>
+      <div class="wa-flank:end">
+        <dd>Machine Learning Engineer</dd>
+        <wa-button appearance="plain" variant="brand" size="small">Edit</wa-button>
+      </div>
+    </div>
+    <div class="wa-flank" style="--flank-size: 20ch;">
+      <dt>Email address</dt>
+      <div class="wa-flank:end">
+        <dd>winter_soldier@example.com</dd>
+        <wa-button appearance="plain" variant="brand" size="small">Edit</wa-button>
+      </div>
+    </div>
+    <div class="wa-flank" style="--flank-size: 20ch;">
+      <dt>Salary expectation</dt>
+      <div class="wa-flank:end">
+        <dd>$240,000</dd>
+        <wa-button appearance="plain" variant="brand" size="small">Edit</wa-button>
+      </div>
+    </div>
+    <div class="wa-flank wa-align-items-start" style="--flank-size: 20ch;">
+      <dt>About</dt>
+      <div class="wa-flank:end">
+        <dd>After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce warrior, loyal to those I love, and I'm always striving to atone for those dark days as the Winter Soldier.</dd>
+        <wa-button appearance="plain" variant="brand" size="small">Edit</wa-button>
+      </div>
+    </div>
+    <div class="wa-flank" style="--flank-size: 20ch;">
+      <dt>Attachments</dt>
+      <dd>
+        <wa-card>
+          <div class="wa-stack">
+            <div class="wa-flank">
+              <wa-icon name="paperclip"></wa-icon>
+              <div class="wa-split">
+                <span class="wa-caption-m wa-cluster">
+                  <span>bb_resume.pdf</span>
+                  <span>2.4mb</span>
+                </span>
+                <div class="wa-cluster wa-gap-2xs">
+                  <wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
+                  <wa-divider vertical style="height: 1em"></wa-divider>
+                  <wa-button appearance="plain" variant="danger" size="small">Delete</wa-button>
+                </div>
+              </div>
+            </div>
+            <wa-divider></wa-divider>
+            <div class="wa-flank">
+              <wa-icon name="paperclip"></wa-icon>
+              <div class="wa-split">
+                <span class="wa-caption-m wa-cluster">
+                  <span>bb_cover_letter.pdf</span>
+                  <span>2.4mb</span>
+                </span>
+                <div class="wa-cluster wa-gap-2xs">
+                  <wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
+                  <wa-divider vertical style="height: 1em"></wa-divider>
+                  <wa-button appearance="plain" variant="danger" size="small">Delete</wa-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </wa-card>
+      </dd>
+    </div>
+  </dl>
+</div>
+```
+
+## Condensed
+
+```html{.example}
+<wa-card appearance="filled" style="max-width: 45ch; margin: auto">
+  <div class="wa-stack">
+    <div class="wa-split wa-align-items-start">
+      <dl class="wa-stack wa-gap-2xs">
+        <dt class="wa-heading-s">Amount</dt>
+        <dd class="wa-heading-l">$5,610.00</dd>
+      </dl>
+      <wa-badge appearance="filled outlined" variant="success">Paid</wa-badge>
+    </div>
+    <wa-divider></wa-divider>
+    <dl class="wa-stack">
+      <div class="wa-flank wa-align-items-stretch">
+        <dt><wa-icon name="user" label="Name" fixed-width></wa-icon></dt>
+        <dd>Sam Wilson</dd>
+      </div>
+      <div class="wa-flank wa-align-items-stretch">
+        <dt><wa-icon name="calendar-days" label="Date" fixed-width></wa-icon></dt>
+        <dd><wa-format-date date="2025-03-15"></wa-format-date></dd>
+      </div>
+      <div class="wa-flank wa-align-items-stretch">
+        <dt><wa-icon family="brands" name="cc-visa" label="Credit Card" fixed-width></wa-icon></dt>
+        <dd>Paid with Visa 1234</dd>
+      </div>
+    </dl>
+  </div>
+  <div slot="footer">
+    <a href="" class="wa-cluster wa-gap-2xs">
+      <span>Download Receipt</span>
+      <wa-icon name="arrow-right"></wa-icon>
+    </a>
+  </div>
+</wa-card>
+```

docs/docs/patterns/app/empty-state.md

@@ -0,0 +1,207 @@
+---
+title: Empty State
+description: 'Guide users with helpful prompts and visuals when no content is available.'
+---
+
+## Simple
+
+```html {.example}
+<div class="wa-stack wa-align-items-center">
+  <wa-icon name="backpack" class="wa-caption-l" style="font-size: var(--wa-font-size-3xl)"></wa-icon>
+  <span class="wa-heading-m">No Kits</span>
+  <p class="wa-caption-l">Manage all of your project's icons in a kit.</p>
+  <wa-button>
+    <wa-icon slot="prefix" name="plus"></wa-icon>
+    Add Kit
+  </wa-button>
+</div>
+```
+
+## With Interactive Placeholder
+
+```html {.example}
+<a href="" class="wa-stack wa-align-items-center wa-placeholder wa-link-plain" style="max-width: 60ch; margin: auto">
+  <wa-icon name="ufo-beam" class="wa-caption-l" style="font-size: var(--wa-font-size-3xl)"></wa-icon>
+  <p class="wa-heading-m">No Custom Icons</p>
+  <p style="text-align: center">Add your own icon or logo to get started.</p>
+</a>
+```
+
+## With Templates
+
+```html {.example}
+<wa-card with-header with-footer style="max-width: 70ch; margin: auto">
+  <div slot="header" class="wa-stack wa-gap-xs">
+    <h2 class="wa-heading-m">Projects</h2>
+  </div>
+  <div class="wa-stack wa-gap-xl">
+    <p class="wa-caption-m">You haven’t created a project yet. Get started by selecting a template or start with a blank canvas.</p>
+    <div class="wa-grid wa-gap-xl" style="--min-column-size: 30ch;">
+      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
+        <wa-avatar shape="rounded">
+          <wa-icon slot="icon" name="note-sticky"></wa-icon>
+        </wa-avatar>
+        <div class="wa-stack wa-gap-2xs">
+          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
+            Create a Quick Note <wa-icon name="arrow-right"></wa-icon>
+          </span>
+          <p class="wa-caption-m">
+            Jot down any idea. Will it make sense later? Who knows.
+          </p>
+        </div>
+      </a>
+      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
+        <wa-avatar shape="rounded">
+          <wa-icon slot="icon" name="list-check"></wa-icon>
+        </wa-avatar>
+        <div class="wa-stack wa-gap-2xs">
+          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
+            Create a Checklist <wa-icon name="arrow-right"></wa-icon>
+          </span>
+          <p class="wa-caption-m">
+            The ultimate tool for looking busy.
+          </p>
+        </div>
+      </a>
+      <a href=""class="wa-flank wa-align-items-start wa-link-plain">
+        <wa-avatar shape="rounded">
+          <wa-icon slot="icon" name="table-cells"></wa-icon>
+        </wa-avatar>
+        <div class="wa-stack wa-gap-2xs">
+          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
+            Create a Spreadsheet <wa-icon name="arrow-right"></wa-icon>
+          </span>
+          <p class="wa-caption-m">
+            Endless rows and columns of tiny, soul-crushing numbers.
+          </p>
+        </div>
+      </a>
+      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
+        <wa-avatar shape="rounded">
+          <wa-icon slot="icon" name="presentation-screen"></wa-icon>
+        </wa-avatar>
+        <div class="wa-stack wa-gap-2xs">
+          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
+            Create a Slideshow <wa-icon name="arrow-right"></wa-icon>
+          </span>
+          <p class="wa-caption-m">
+            Dramatic transitions make everything seem more official.
+          </p>
+        </div>
+      </a>
+      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
+        <wa-avatar shape="rounded">
+          <wa-icon slot="icon" name="pen-field"></wa-icon>
+        </wa-avatar>
+        <div class="wa-stack wa-gap-2xs">
+          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
+            Create a Form <wa-icon name="arrow-right"></wa-icon>
+          </span>
+          <p class="wa-caption-m">
+            Collect the deepest personal details and darkest secrets.
+          </p>
+        </div>
+      </a>
+      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
+        <wa-avatar shape="rounded">
+          <wa-icon slot="icon" name="image"></wa-icon>
+        </wa-avatar>
+        <div class="wa-stack wa-gap-2xs">
+          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
+            Create a Photo Album <wa-icon name="arrow-right"></wa-icon>
+          </span>
+          <p class="wa-caption-m">
+            Curate your best memories or most basic food pictures.
+          </p>
+        </div>
+      </a>
+    </div>
+  </div>
+  <div slot="footer">
+    <a href="" class="wa-cluster wa-gap-xs">
+      <span>Or start with a blank canvas</span>
+      <wa-icon name="arrow-right"></wa-icon>
+    </a>
+  </div>
+</wa-card>
+```
+## Add people 
+```html{.example}
+<wa-card style="max-width: 60ch; margin: 0 auto;">
+  <div class="wa-stack">
+    <wa-icon></wa-icon>
+    <h1>Add team members</h1>
+    <p>You haven’t added any team members to your project yet. As the owner of this project, you can manage team member permissions.</p>
+    <div class="wa-flank:end">
+      <wa-input></wa-input><wa-button>Invite</wa-button>
+    </div>
+    <div class="wa-stack">
+      <span>Team members previously added to projects</span>
+      <wa-divider></wa-divider>
+      <section>
+        <div class="wa-flank">
+          <wa-avatar></wa-avatar>
+        <div class="wa-split">
+          <div class="wa-stack wa-gap-0">
+            <span>lindsey Walton</span>
+            <span>Front end Developer</span>
+          </div>
+          <wa-button appearance="plain">
+            <wa-icon name="plus" slot="prefix"></wa-icon>  
+            Invite
+          </wa-button>
+        </div>
+        </div>
+        <wa-divider></wa-divider>
+      </section>
+      <section>
+        <div class="wa-flank">
+          <wa-avatar></wa-avatar>
+        <div class="wa-split">
+          <div class="wa-stack wa-gap-0">
+            <span>lindsey Walton</span>
+            <span>Front end Developer</span>
+          </div>
+          <wa-button appearance="plain">
+            <wa-icon name="plus" slot="prefix"></wa-icon>  
+            Invite
+          </wa-button>
+        </div>
+        </div>
+        <wa-divider></wa-divider>
+      </section>
+      <section>
+        <div class="wa-flank">
+          <wa-avatar></wa-avatar>
+        <div class="wa-split">
+          <div class="wa-stack wa-gap-0">
+            <span>lindsey Walton</span>
+            <span>Front end Developer</span>
+          </div>
+          <wa-button appearance="plain">
+            <wa-icon name="plus" slot="prefix"></wa-icon>  
+            Invite
+          </wa-button>
+        </div>
+        </div>
+        <wa-divider></wa-divider>
+      </section><section>
+        <div class="wa-flank">
+          <wa-avatar></wa-avatar>
+        <div class="wa-split">
+          <div class="wa-stack wa-gap-0">
+            <span>lindsey Walton</span>
+            <span>Front end Developer</span>
+          </div>
+          <wa-button appearance="plain">
+            <wa-icon name="plus" slot="prefix"></wa-icon>  
+            Invite
+          </wa-button>
+        </div>
+        </div>
+        <wa-divider></wa-divider>
+      </section>
+    </div>
+  </div>
+</wa-card>
+```

docs/docs/patterns/app/faq.md

@@ -0,0 +1,118 @@
+---
+title: FAQ
+description: 'Empower users to learn more with a structured list of questions and answers.'
+---
+
+## With Flanked Heading & Description
+
+```html {.example}
+<div class="wa-flank wa-align-items-start wa-gap-2xl" style="--flank-size: 35ch">
+  <div>
+    <h2>Frequently Asked Questions</h2>
+    <p>Can’t find an answer? Reach out to your local <a href="">Operator</a>, or contact <a href="">the Oracle</a>, and enjoy a cookie. &#127850;</p>
+  </div>
+  <dl class="wa-stack wa-gap-2xl">
+    <div class="wa-stack wa-gap-xs">
+      <dt>Is Zion actually real, or just another Matrix?</dt>
+      <dd>Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t just another layer of the simulation?</dd>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <dt>Why do the Agents always wear suits?</dt>
+      <dd>Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also, intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.</dd>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <dt>Can I go back into the Matrix once I’m out?</dt>
+      <dd>Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing around you is real.</dd>
+    </div>
+  </dl>
+</div>
+```
+
+## With Expandable Answers
+
+```html {.example}
+<div class="wa-stack">
+  <h2>Frequently Asked Questions</h2>
+  <wa-details appearance="plain">
+    <h3 slot="summary" class="wa-heading-m" style="margin: 0">Is Zion actually real, or just another Matrix?</h3>
+    Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t just another layer of the simulation?
+  </wa-details>
+  <wa-divider></wa-divider>
+  <wa-details appearance="plain">
+    <h3 slot="summary" class="wa-heading-m" style="margin: 0">Why do the Agents always wear suits?</h3>
+    Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also, intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.
+  </wa-details>
+  <wa-divider></wa-divider>
+  <wa-details appearance="plain">
+    <h3 slot="summary" class="wa-heading-m" style="margin: 0">Can I go back into the Matrix once I’m out?</h3>
+    Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing around you is real.
+  </wa-details>
+</div>
+```
+
+## Two Column
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl">
+  <h2>Frequently Asked Questions</h2>
+  <dl class="wa-stack wa-gap-2xl">
+    <div class="wa-grid wa-gap-xs">
+      <dt class="wa-heading-m">Is Zion actually real, or just another Matrix?</dt>
+      <dd>Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t just another layer of the simulation?</dd>
+    </div>
+    <wa-divider></wa-divider>
+    <div class="wa-grid wa-gap-xs">
+      <dt class="wa-heading-m">Why do the Agents always wear suits?</dt>
+      <dd>Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also, intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.</dd>
+    </div>
+    <wa-divider></wa-divider>
+    <div class="wa-grid wa-gap-xs">
+      <dt class="wa-heading-m">Can I go back into the Matrix once I’m out?</dt>
+      <dd>Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing around you is real.</dd>
+    </div>
+  </dl>
+</div>
+```
+
+## 3 Column
+```html{.example}
+<div>
+
+    <h2>Frequently Asked Questions</h2>
+
+
+  <dl class="wa-grid wa-gap-m" style="--min-column-size: 30ch;">
+    <div class="wa-stack wa-gap-xs">
+      <dt class="wa-heading-m">How often do you update your courses?</dt>
+      <dd>A course is updated once there is a fundamental shift in the language or library’s underlying API. You can check our <a href="#">workshop</a> list to see if a new version of a given course is on the schedule. You may also write to us as <a href="#">support@frontendmasters.com</a> with suggestions for updates.</dd>
+    </div>
+   
+    <div class="wa-stack wa-gap-xs">
+      <dt class="wa-heading-m">Do you offer certificates of completion?</dt>
+      <dd>You can download certificates of completion from the <a href="#">Completed Courses</a> list in your Learning Library. Click the diploma icon next to the course to download the certificate in light or dark mode. A link to your Public Profile is included on each certificate if you’ve created one. Public Profiles showcase your learning journey and are a fantastic way to share progress with friends, co-workers, or employers. Public Profiles are available to members with an active Frontend Masters subscription who have watched ten or more hours of content. Visit the <a href="#">Public Profile</a> section in My Account to get started.</dd>
+    </div>
+
+    <div class="wa-stack wa-gap-xs">
+      <dt class="wa-heading-m">Do you offer a free trial?</dt>
+      <dd>
+         <p>We offer a free trial to first-time subscribers. You can find more about the trial here.</p>
+        <p>We also have the following opportunities to learn for free:</p>
+        <ul>
+          <li>The online bootcamp is a free, two-week curriculum to get you started with web development.</li>
+          <li>You can  create a free account to gain access to five full courses for free.</li>
+        </ul>
+      </dd>
+    </div>
+   
+    <div class="wa-stack wa-gap-xs">
+      <dt class="wa-heading-m">Do you have discounts for students?</dt>
+      <dd>We are part of the <a href="#">GitHub Student Developer Pack</a>, allowing students six months of free access to the entire platform.</dd>
+    </div>
+   
+    <div class="wa-stack wa-gap-xs">
+      <dt class="wa-heading-m">How do I cancel my plan?</dt>
+      <dd>You can cancel your Frontend Masters subscription by visiting the <a href="#">Subscription tab</a> in your My Account area.</dd>
+    </div>
+  </dl>
+</div>
+```

docs/docs/patterns/app/feed.md

@@ -0,0 +1,287 @@
+---
+title: Feed
+description: TODO
+---
+
+## Comment Section
+```html{.example}
+<wa-card style="max-width: 60ch; margin: 0 auto;">
+  <div class="wa-stack">
+  <h1 class="wa-heading-m">Activity</h1>
+  <wa-textarea></wa-textarea>
+  <wa-divider></wa-divider>
+  <section class="wa-stack">
+    <div class="wa-flank">
+      <wa-avatar label="User avatar"></wa-avatar>
+      <div>
+        <span class="wa-heading-s">Robert Fox</span>
+        <span class="wa-caption-m">commented 32 min ago</span>
+      </div>
+    </div>
+    <ul class="wa-stack wa-gap-xl" style="list-style-type: none; margin-inline-start: 1em;">
+      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec. Suspendisse potenti. Pellentesque lobortis pulvinar nulla non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</li>
+      <li class="wa-stack wa-gap-2xs">
+        <div class="wa-flank">
+          <wa-avatar label="User avatar"></wa-avatar>
+          <div>
+            <span>Robert Fox</span>
+            <span class="wa-caption-m">commented 32 min ago</span>
+          </div>
+        </div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.</p>
+      </li>
+       <li class="wa-stack wa-gap-2xs">
+        <div class="wa-flank">
+          <wa-avatar label="User avatar"></wa-avatar>
+          <div>
+            <span>Robert Fox</span>
+            <span class="wa-caption-m">commented 32 min ago</span>
+          </div>
+        </div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.</p>
+      </li>
+       <li class="wa-stack wa-gap-2xs">
+        <div class="wa-flank">
+          <wa-icon name="reply"></wa-icon>
+          <a href="#">Leave Comment</a>
+        </div>
+      </li>
+    </ul>
+  </section>
+  </div>
+</wa-card>
+```
+## With Summary Components
+```html{.example}
+<wa-card style="max-width: 68ch; margin: 0 auto;">
+  <h1 class="wa-heading-l">Monthly Activity</h1>
+  <div class="wa-stack">
+  <wa-details>
+  <span class="wa-heading-m" slot="summary">
+    February
+  </span>
+  <div class="wa-stack">
+  <section class="wa-flank wa-gap-xs">
+    <wa-icon style="font-size: var(--wa-font-size-xl)" name="envelope"></wa-icon>
+    <div class="wa-split">
+      <div class="wa-stack wa-gap-0">
+        <span class="wa-heading-s">Email blasts</span>
+        <div class="wa-cluster wa-gap-2xs">
+          <a href="#">Nick Burkhart</a><span>sent to</span><a href="#">likely customers</a>
+        </div>
+      </div>
+      <span class="wa-caption-m">Feb 28th</span>
+    </div>
+  </section>
+   <wa-divider></wa-divider>
+  <section class="wa-flank wa-gap-xs">
+    <wa-icon style="font-size: var(--wa-font-size-xl)" name="phone"></wa-icon>
+    <div class="wa-split">
+      <div class="wa-stack wa-gap-0">
+        <span class="wa-heading-s">Spoke with the Pope</span>
+        <div class="wa-cluster wa-gap-2xs">
+          <a href="#">Artur Fleck</a><span>for 1 hour</span>
+        </div>
+      </div>
+      <span class="wa-caption-m">Feb 23rd</span>
+    </div>
+  </section>
+  </div>
+</wa-details>
+<wa-details>
+  <span class="wa-heading-m" slot="summary">
+    March
+  </span>
+  <div class="wa-stack">
+  <section class="wa-flank wa-gap-xs">
+    <wa-icon style="font-size: var(--wa-font-size-xl)" name="video"></wa-icon>
+    <div class="wa-split">
+      <div class="wa-stack wa-gap-0">
+        <span class="wa-heading-s">Zoom Call with Northeast office</span>
+        <div class="wa-cluster wa-gap-2xs">
+          <a href="#">Axel Foley</a><span>for 47 minutes</span>
+        </div>
+      </div>
+      <span class="wa-caption-m">Mar 15th</span>
+    </div>
+  </section>
+   <wa-divider></wa-divider>
+  <section class="wa-flank wa-gap-s">
+    <wa-icon style="font-size: var(--wa-font-size-xl)" name="calendar"></wa-icon>
+    <div class="wa-split">
+      <div class="wa-stack wa-gap-0">
+        <span class="wa-heading-s">Scheduled birthday party</span>
+        <div class="wa-cluster wa-gap-2xs">
+          <a href="#">John Blaze</a><span>in</span><a href="#">Social Events</a>
+        </div>
+      </div>
+      <span class="wa-caption-m">Mar 3rd</span>
+    </div>
+  </section>
+  </div>
+</wa-details>
+<wa-details>
+  <span class="wa-heading-m" slot="summary">
+    April
+  </span>
+  <div class="wa-stack">
+  <section class="wa-flank wa-gap-s">
+    <wa-icon style="font-size: var(--wa-font-size-xl)" family="brands" name="intercom"></wa-icon>
+    <div class="wa-split">
+      <div class="wa-stack wa-gap-0">
+        <span class="wa-heading-s">Got new lead</span>
+        <div class="wa-cluster wa-gap-2xs">
+          <a href="#">Jack Carter</a><span>on Intercom switchboard</span>
+        </div>
+      </div>
+      <span class="wa-caption-m">Apr 18th</span>
+    </div>
+  </section>
+   <wa-divider></wa-divider>
+  <section class="wa-flank wa-gap-s">
+    <wa-icon style="font-size: var(--wa-font-size-xl)" name="list-check"></wa-icon>
+    <div class="wa-split">
+      <div class="wa-stack wa-gap-0">
+        <span class="wa-heading-s">Completed Todo</span>
+        <div class="wa-cluster wa-gap-2xs">
+          <a href="#">Huey Freeman</a><span>marked complete on</span><a href="#">Daily Tasks</a>
+        </div>
+      </div>
+      <span class="wa-caption-m">Apr 2nd</span>
+    </div>
+  </section>
+  </div>
+</wa-details>
+</div>
+</wa-card>
+```
+
+## Card Separated
+```html{.example}
+<div class="wa-stack" style="max-width: 45ch; margin: 0 auto;">
+  <div class="wa-stack">
+    <wa-card>
+      <div class="wa-flank">
+        <wa-avatar></wa-avatar>
+        <div class="wa-stack wa-gap-0">
+          <div class="wa-split">
+            <span class="wa-heading-s">Charlotte Parker</span>
+            <span class="wa-caption-s">4h</span>
+          </div>
+          <p>Who's on first?</p>
+          <a href="#" class="wa-cluster wa-gap-2xs">
+            <wa-icon name="reply"></wa-icon>
+            <span>Reply</span>
+          </a>
+        </div>
+      </div>
+    </wa-card>
+    <div class="wa-flank wa-gap-xl">
+      <wa-divider vertical style="height: auto; align-self: stretch"></wa-divider>
+      <ul class="wa-stack">
+      <li class="wa-stack wa-gap-2xs">
+        <wa-card>
+      <div class="wa-flank">
+        <wa-avatar></wa-avatar>
+        <div class="wa-stack wa-gap-0">
+          <div class="wa-split">
+            <span class="wa-heading-s">Charlotte Parker</span>
+            <span class="wa-caption-s">1h</span>
+          </div>
+          <p>What's on second?</p>
+          <a href="#" class="wa-cluster wa-gap-2xs">
+            <wa-icon name="reply"></wa-icon>
+            <span>Reply</span>
+          </a>
+        </div>
+      </div>
+    </wa-card>
+      </li>
+      <li class="wa-stack wa-gap-2xs">
+        <wa-card>
+      <div class="wa-flank wa-align-items-start">
+        <wa-avatar></wa-avatar>
+        <div class="wa-stack wa-gap-xs">
+          <div class="wa-split">
+            <span class="wa-heading-s">Charlotte Parker</span>
+          </div>
+          <wa-textarea size="small" aria-label="Add Your Comment"></wa-textarea>
+        </div>
+      </div>
+    </wa-card>
+      </li>
+    </ul>
+    </div>
+    
+  </div>
+</div>
+```
+## Divider Separated
+```html{.example}
+<wa-card with-header style="max-width: 54ch; margin: 0 auto;">
+  <div slot="header" class="wa-split">
+    <div>
+      <span>Notifications</span>
+      <wa-badge appearance="filled" variant="success" pill>2</wa-badge>
+    </div>
+    <wa-icon name="close"></wa-icon>
+  </div>
+  <div class="wa-stack">
+    <article>
+      <div class="wa-flank wa-align-items-start">
+        <wa-avatar></wa-avatar>
+        <div class="wa-stack wa-gap-xs">
+          <div class="wa-split">
+            <span><strong>Happy</strong> commented in <a href="#">Reporting Dashboard</a></span>
+            <wa-icon name="circle-dot" style="color: var(--wa-color-green-50);"></wa-icon>
+          </div>
+          <div class="wa-split">
+            <span class="wa-caption-m">Friday 3:12PM</span>
+            <span class="wa-caption-m">2 hours ago</span>
+          </div>
+          <wa-callout variant="neutral">
+            Really love this approach. I think this is the best solution for the sync issue.
+          </wa-callout>
+        </div>
+      </div>
+      <wa-divider></wa-divider>
+    </article>
+    <article>
+      <div class="wa-flank wa-align-items-start">
+        <wa-avatar></wa-avatar>
+        <div class="wa-stack wa-gap-xs">
+          <div class="wa-split">
+            <span><strong>Charlotte</strong> followed you</span>
+            <wa-icon name="circle-dot" style="color: var(--wa-color-green-50);"></wa-icon>
+          </div>
+          <div class="wa-split">
+            <span class="wa-caption-m">Friday 3:04PM</span>
+            <span class="wa-caption-m">2 hours ago</span>
+          </div>
+        </div>
+      </div>
+      <wa-divider></wa-divider>
+    </article>
+    <article>
+      <div class="wa-flank wa-align-items-start">
+        <wa-avatar></wa-avatar>
+        <div class="wa-stack wa-gap-xs">
+          <div class="wa-split">
+            <span><strong>Tavitian</strong> invited you to <a href="#">Homepage Redesign</a></span>
+          </div>
+          <div class="wa-split">
+            <span class="wa-caption-m">Friday 2:22PM</span>
+            <span class="wa-caption-m">3 hours ago</span>
+          </div>
+          <div class="wa-cluster wa-gap-xs">
+            <wa-button appearance="outlined" size="small">Decline</wa-button>
+            <wa-button variant="brand" size="small">Accept</wa-button>
+          </div>
+        </div>
+      </div>
+      <wa-divider></wa-divider>
+    </article>
+    
+  </div>
+</wa-card>
+```

docs/docs/patterns/app/grid-list.md

@@ -0,0 +1,525 @@
+---
+title: Grid List
+description: 'Improve browsing and selection by organizing data in a structured grid layout.'
+---
+
+## Cards with Footer Actions
+
+```html {.example}
+<div class="wa-grid" style="--min-column-size: 30ch;">
+  <wa-card with-footer>
+    <div class="wa-flank:end">
+      <div class="wa-stack wa-gap-xs">
+        <div class="wa-cluster wa-gap-xs">
+          <h3 class="wa-heading-s">Barklia Woofington</h3 class="wa-heading-s">
+          <wa-badge pill>Admin</wa-badge>
+        </div>
+        <span class="wa-caption-m">Canine Executive Officer</span>
+      </div>
+      <wa-avatar image="https://images.unsplash.com/photo-1593270379182-fe1b1f6d67e5?q=80&w=2175&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Avatar of black and white Border Collie"></wa-avatar>
+    </div>
+    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="at"></wa-icon>
+        Email
+      </wa-button>
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="phone"></wa-icon>
+        Phone
+      </wa-button>
+    </div>
+  </wa-card>
+  <wa-card with-footer>
+    <div class="wa-flank:end">
+      <div class="wa-stack wa-gap-xs">
+        <div class="wa-cluster wa-gap-xs">
+          <h3 class="wa-heading-s">Maggie Pawsworth</h3 class="wa-heading-s">
+          <wa-badge pill>Admin</wa-badge>
+        </div>
+        <span class="wa-caption-m">Canine Fetch Officer</span>
+      </div>
+      <wa-avatar image="https://images.unsplash.com/photo-1514479425649-0981aca9fe41?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Avatar of black collie mix"></wa-avatar>
+    </div>
+    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="at"></wa-icon>
+        Email
+      </wa-button>
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="phone"></wa-icon>
+        Phone
+      </wa-button>
+    </div>
+  </wa-card>
+  <wa-card with-footer>
+    <div class="wa-flank:end">
+      <div class="wa-stack wa-gap-xs">
+        <h3 class="wa-heading-s">Rex Tailwag</h3 class="wa-heading-s">
+        <span class="wa-caption-m">Head of Security</span>
+      </div>
+      <wa-avatar image="https://images.unsplash.com/photo-1610968755695-d7fcb5fd4b92?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Avatar of black and tan German Shepherd"></wa-avatar>
+    </div>
+    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="at"></wa-icon>
+        Email
+      </wa-button>
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="phone"></wa-icon>
+        Phone
+      </wa-button>
+    </div>
+  </wa-card>
+  <wa-card with-footer>
+    <div class="wa-flank:end">
+      <div class="wa-stack wa-gap-xs">
+        <h3 class="wa-heading-s">Luna Sniffington</h3 class="wa-heading-s">
+        <span class="wa-caption-m">Hound Relations</span>
+      </div>
+      <wa-avatar image="https://images.unsplash.com/photo-1526440847959-4e38e7f00b04?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Avatar of black and tan Yorkshire Terrier"></wa-avatar>
+    </div>
+    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="at"></wa-icon>
+        Email
+      </wa-button>
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="phone"></wa-icon>
+        Phone
+      </wa-button>
+    </div>
+  </wa-card>
+  <wa-card with-footer>
+    <div class="wa-flank:end">
+      <div class="wa-stack wa-gap-xs">
+        <h3 class="wa-heading-s">Charlie Drooler</h3 class="wa-heading-s">
+        <span class="wa-caption-m">Head of Sales</span>
+      </div>
+      <wa-avatar image="https://images.unsplash.com/photo-1554692844-6627ca340264?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Avatar of tan and white corgi"></wa-avatar>
+    </div>
+    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="at"></wa-icon>
+        Email
+      </wa-button>
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="phone"></wa-icon>
+        Phone
+      </wa-button>
+    </div>
+  </wa-card>
+  <wa-card with-footer>
+    <div class="wa-flank:end">
+      <div class="wa-stack wa-gap-xs">
+        <h3 class="wa-heading-s">Daisy Zoomley</h3 class="wa-heading-s">
+        <span class="wa-caption-m">IT Support</span>
+      </div>
+      <wa-avatar image="https://images.unsplash.com/photo-1544378062-0b74cc8b4713?q=80&w=3648&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Avatar of gray Weimaraner"></wa-avatar>
+    </div>
+    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="at"></wa-icon>
+        Email
+      </wa-button>
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="phone"></wa-icon>
+        Phone
+      </wa-button>
+    </div>
+  </wa-card>
+</div>
+```
+
+## Cards with Footer Actions
+
+```html {.example}
+<div class="wa-grid" style="--min-column-size: 29ch;">
+  <wa-card with-footer>
+    <div class="wa-stack wa-align-items-center">
+      <div class="wa-frame wa-border-radius-circle">
+        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+         </div>
+        <h2 class="wa-heading-m">Scott Summers</h2>
+        <p class="wa-caption-l">Product Designer</p>
+    </div>
+    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="at"></wa-icon>
+        Email
+      </wa-button>
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="phone"></wa-icon>
+        Phone
+      </wa-button>
+    </div>
+  </wa-card>
+  <wa-card with-footer>
+    <div class="wa-stack wa-align-items-center">
+      <div class="wa-frame wa-border-radius-circle">
+        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+         </div>
+        <h2 class="wa-heading-m">Scott Summers</h2>
+        <p class="wa-caption-l">Product Designer</p>
+    </div>
+    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="at"></wa-icon>
+        Email
+      </wa-button>
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="phone"></wa-icon>
+        Phone
+      </wa-button>
+    </div>
+  </wa-card>
+  <wa-card with-footer>
+    <div class="wa-stack wa-align-items-center">
+      <div class="wa-frame wa-border-radius-circle">
+        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+         </div>
+        <h2 class="wa-heading-m">Scott Summers</h2>
+        <p class="wa-caption-l">Product Designer</p>
+    </div>
+    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="at"></wa-icon>
+        Email
+      </wa-button>
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="phone"></wa-icon>
+        Phone
+      </wa-button>
+    </div>
+  </wa-card>
+<wa-card with-footer>
+    <div class="wa-stack wa-align-items-center">
+      <div class="wa-frame wa-border-radius-circle">
+        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+         </div>
+        <h2 class="wa-heading-m">Scott Summers</h2>
+        <p class="wa-caption-l">Product Designer</p>
+    </div>
+    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="at"></wa-icon>
+        Email
+      </wa-button>
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="phone"></wa-icon>
+        Phone
+      </wa-button>
+    </div>
+  </wa-card>
+</div>
+```
+## with Images
+```html {.example}
+<div class="wa-grid">
+  <article class="wa-stack">
+    <div class="wa-frame">
+      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+    </div>
+    <div class="wa-stack">
+      <span>Lindsay Walton</span>
+      <span>Developer</span>
+    </div>
+    <div class="wa-cluster">
+      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
+    </div>
+  </article>
+  <article class="wa-stack">
+    <div class="wa-frame">
+      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+    </div>
+    <div class="wa-stack">
+      <span>Lindsay Walton</span>
+      <span>Developer</span>
+    </div>
+    <div class="wa-cluster">
+      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
+    </div>
+  </article>
+  <article class="wa-stack">
+    <div class="wa-frame">
+      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+    </div>
+    <div class="wa-stack">
+      <span>Lindsay Walton</span>
+      <span>Developer</span>
+    </div>
+    <div class="wa-cluster">
+      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
+    </div>
+  </article>
+  <article class="wa-stack">
+    <div class="wa-frame">
+      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+    </div>
+    <div class="wa-stack">
+      <span>Lindsay Walton</span>
+      <span>Developer</span>
+    </div>
+    <div class="wa-cluster">
+      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
+    </div>
+  </article>
+  <article class="wa-stack">
+    <div class="wa-frame">
+      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+    </div>
+    <div class="wa-stack">
+      <span>Lindsay Walton</span>
+      <span>Developer</span>
+    </div>
+    <div class="wa-cluster">
+      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
+    </div>
+  </article>
+  <article class="wa-stack">
+    <div class="wa-frame">
+      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+    </div>
+    <div class="wa-stack">
+      <span>Lindsay Walton</span>
+      <span>Developer</span>
+    </div>
+    <div class="wa-cluster">
+      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
+    </div>
+  </article>
+</div>
+```
+## Linked Cards with Options Menu
+
+```html{.example}
+<div class="wa-grid" style="--min-column-size: 25ch">
+  <wa-card>
+    <div class="wa-flank:end">
+      <a href="" class="wa-flank wa-link-plain">
+        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-yellow-80); --text-color: var(--wa-color-yellow-40)">
+          <wa-icon slot="icon" name="pancakes"></wa-icon>
+        </wa-avatar>
+        <div class="wa-gap-2xs wa-stack">
+          <span class="wa-heading-s">Breakfast</span>
+          <span class="wa-caption-m">28 Items</span>
+        </div>
+      </a>
+      <wa-dropdown>
+        <wa-icon-button id="more-actions-1" slot="trigger" name="ellipsis-vertical" label="More actions"></wa-icon-button>
+        <wa-menu>
+          <wa-menu-item>Copy link</wa-menu-item>
+          <wa-menu-item>Rename</wa-menu-item>
+          <wa-menu-item>Move to trash</wa-menu-item>
+        </wa-menu>
+      </wa-dropdown>
+      <wa-tooltip for="more-actions-1">More actions</wa-tooltip>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank:end">
+      <a href="" class="wa-flank wa-link-plain">
+        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-orange-80); --text-color: var(--wa-color-orange-40)">
+          <wa-icon slot="icon" name="burger-cheese"></wa-icon>
+        </wa-avatar>
+        <div class="wa-gap-2xs wa-stack">
+          <span class="wa-heading-s">Lunch + Dinner</span>
+          <span class="wa-caption-m">40 Items</span>
+        </div>
+      </a>
+      <wa-dropdown>
+        <wa-icon-button id="more-actions-2" slot="trigger" name="ellipsis-vertical" label="More actions"></wa-icon-button>
+        <wa-menu>
+          <wa-menu-item>Copy link</wa-menu-item>
+          <wa-menu-item>Rename</wa-menu-item>
+          <wa-menu-item>Move to trash</wa-menu-item>
+        </wa-menu>
+      </wa-dropdown>
+      <wa-tooltip for="more-actions-2">More actions</wa-tooltip>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank:end">
+      <a href="" class="wa-flank wa-link-plain">
+        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-indigo-80); --text-color: var(--wa-color-indigo-40)">
+          <wa-icon slot="icon" name="martini-glass-citrus"></wa-icon>
+        </wa-avatar>
+        <div class="wa-gap-2xs wa-stack">
+          <span class="wa-heading-s">Beverages</span>
+          <span class="wa-caption-m">19 Items</span>
+        </div>
+      </a>
+      <wa-dropdown>
+        <wa-icon-button id="more-actions-3" slot="trigger" name="ellipsis-vertical" label="More actions"></wa-icon-button>
+        <wa-menu>
+          <wa-menu-item>Copy link</wa-menu-item>
+          <wa-menu-item>Rename</wa-menu-item>
+          <wa-menu-item>Move to trash</wa-menu-item>
+        </wa-menu>
+      </wa-dropdown>
+      <wa-tooltip for="more-actions-3">More actions</wa-tooltip>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank:end">
+      <a href="" class="wa-flank wa-link-plain">
+        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-pink-80); --text-color: var(--wa-color-pink-40)">
+          <wa-icon slot="icon" name="cake-slice"></wa-icon>
+        </wa-avatar>
+        <div class="wa-gap-2xs wa-stack">
+          <span class="wa-heading-s">Dessert</span>
+          <span class="wa-caption-m">11 Items</span>
+        </div>
+      </a>
+      <wa-dropdown>
+        <wa-icon-button id="more-actions-4" slot="trigger" name="ellipsis-vertical" label="More actions"></wa-icon-button>
+        <wa-menu>
+          <wa-menu-item>Copy link</wa-menu-item>
+          <wa-menu-item>Rename</wa-menu-item>
+          <wa-menu-item>Move to trash</wa-menu-item>
+        </wa-menu>
+      </wa-dropdown>
+      <wa-tooltip for="more-actions-4">More actions</wa-tooltip>
+    </div>
+  </wa-card>
+</div>
+```
+## Kanban
+```html {.example}
+<div>
+  <h2>Project #487</h2>
+  <div class="wa-grid wa-gap-2xl">
+    <div class="wa-stack">
+      <div class="wa-cluster wa-gap-s"><span>Draft</span>  <wa-badge appearance="filled outlined" variant="neutral">1</wa-badge></div>
+
+       
+     
+          <wa-card>
+            <div class="wa-flank:end">
+              <div class="wa-stack wa-gap-2xs">
+                <div class="wa-cluster wa-gap-2xs">
+                  <span class="wa-heading-s">Unit Testing</span>
+                  <wa-dropdown>
+                    <wa-icon-button id="task-action-4" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
+                    <wa-menu>
+                      <wa-menu-item>Copy link</wa-menu-item>
+                      <wa-menu-item>Rename</wa-menu-item>
+                      <wa-menu-item>Move to trash</wa-menu-item>
+                    </wa-menu>
+                  </wa-dropdown>
+                  <wa-tooltip for="task-action-4">More actions</wa-tooltip>
+                </div>
+                <div class="wa-cluster wa-gap-2xs">
+                <wa-badge appearance="outlined" pill>DevOps</wa-badge>  <wa-badge variant="neutral" appearance="outlined" pill>Priority: Low</wa-badge>
+                </div>
+              </div>
+              <wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+  label="Avatar of a gray tabby kitten looking down"></wa-avatar>
+            </div>
+          </wa-card>
+      <wa-button appearance="plain">
+        <wa-icon name="plus"></wa-icon>
+        Add Task
+        </wa-button>
+      
+    </div>
+
+    <div class="wa-stack">
+      <div class="wa-cluster wa-gap-s"><span>In Progress</span>  <wa-badge appearance="filled outlined" variant="neutral">2</wa-badge></div>
+      
+          <wa-card>
+            <div class="wa-flank:end">
+              <div class="wa-stack wa-gap-2xs">
+                <div class="wa-cluster wa-gap-2xs">
+                  <span class="wa-heading-s">UX Audit</span>
+                  <wa-dropdown>
+                    <wa-icon-button id="task-action-2" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
+                    <wa-menu>
+                      <wa-menu-item>Copy link</wa-menu-item>
+                      <wa-menu-item>Rename</wa-menu-item>
+                      <wa-menu-item>Move to trash</wa-menu-item>
+                    </wa-menu>
+                  </wa-dropdown>
+                  <wa-tooltip for="task-action-2">More actions</wa-tooltip>
+                </div>
+                <div class="wa-cluster wa-gap-2xs">
+                <wa-badge appearance="outlined" pill>Design</wa-badge>  <wa-badge variant="warning" appearance="outlined" pill>Priority: Medium</wa-badge>
+                </div>
+              </div>
+              <wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+  label="Avatar of a gray tabby kitten looking down"></wa-avatar>
+            </div>
+          </wa-card>
+          <wa-card>
+            <div class="wa-flank:end">
+              <div class="wa-stack wa-gap-2xs">
+                <div class="wa-cluster wa-gap-2xs">
+                  <span class="wa-heading-s">Visual Testing</span>
+                  <wa-dropdown>
+                    <wa-icon-button id="task-action-3" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
+                    <wa-menu>
+                      <wa-menu-item>Copy link</wa-menu-item>
+                      <wa-menu-item>Rename</wa-menu-item>
+                      <wa-menu-item>Move to trash</wa-menu-item>
+                    </wa-menu>
+                  </wa-dropdown>
+                  <wa-tooltip for="task-action-3">More actions</wa-tooltip>
+                </div>
+                <div class="wa-cluster wa-gap-2xs">
+                <wa-badge appearance="outlined" pill>Design</wa-badge>  <wa-badge variant="danger" appearance="outlined" pill>Priority: High</wa-badge>
+                </div>
+              </div>
+              <wa-avatar></wa-avatar>
+            </div>
+          </wa-card>
+      <wa-button appearance="plain">
+        <wa-icon name="plus"></wa-icon>
+        Add Task
+        </wa-button>
+      
+    </div>
+
+    <div class="wa-stack">
+      <div class="wa-cluster wa-gap-s"><span>Ready for Review</span>  <wa-badge appearance="filled outlined" variant="neutral">1</wa-badge></div>
+          <wa-card>
+            <div class="wa-flank:end">
+              <div class="wa-stack wa-gap-2xs">
+                <div class="wa-cluster wa-gap-2xs">
+                  <span class="wa-heading-s">Deploy Bug Fixes</span>
+                  <wa-dropdown>
+                    <wa-icon-button id="task-action-1" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
+                    <wa-menu>
+                      <wa-menu-item>Copy link</wa-menu-item>
+                      <wa-menu-item>Rename</wa-menu-item>
+                      <wa-menu-item>Move to trash</wa-menu-item>
+                    </wa-menu>
+                  </wa-dropdown>
+                  <wa-tooltip for="task-action-1">More actions</wa-tooltip>
+                </div>
+                <div class="wa-cluster wa-gap-2xs">
+                  <wa-badge appearance="outlined" pill>Development</wa-badge>  <wa-badge variant="warning" appearance="outlined" pill>Priority: Medium</wa-badge>
+                </div>
+              </div>
+              <wa-avatar initials="KK" label="Avatar with initials: KK"></wa-avatar>
+            </div>
+          </wa-card>
+     
+        
+      <wa-button appearance="plain">
+        <wa-icon name="plus"></wa-icon>
+        Add Task
+        </wa-button>
+      
+    </div>
+
+
+  
+  </div>
+</div>
+```
+

docs/docs/patterns/app/index.njk

@@ -0,0 +1,8 @@
+---
+title: App
+description: Pre-built action panels, data displays, and more ready to drop into your web app.
+parent: patterns
+layout: overview
+override:tags: []
+listChildren: true
+---

docs/docs/patterns/app/leaderboard.md

@@ -0,0 +1,265 @@
+---
+title: Leaderboard
+description: 'Engage and motivate users by highlighting top performers, scores, and achievements.'
+---
+
+## Simple
+
+```html {.example}
+<div class="wa-stack">
+  <h3>Daily Crossword</h3>
+  <div class="wa-grid">
+    <wa-callout variant="warning" appearance="filled">
+      <wa-icon slot="icon" name="timer"></wa-icon>
+      <div class="wa-stack wa-gap-xs">
+        <span class="wa-heading-l">11h 54m 52s</span>
+        <span class="wa-caption-m">until play ends</span>
+      </div>
+    </wa-callout>
+    <wa-callout variant="neutral" appearance="filled">
+      <wa-icon slot="icon" name="user-group"></wa-icon>
+      <div class="wa-stack wa-gap-xs">
+        <span class="wa-heading-l">304</span>
+        <span class="wa-caption-m">players on this leaderboard</span>
+      </div>
+    </wa-callout>
+  </div>
+  <wa-card>
+    <div class="wa-stack">
+      <ol class="wa-stack">
+        <li class="wa-flank">
+          <div class="wa-cluster">
+            <wa-icon name="1" fixed-width></wa-icon>
+            <wa-avatar>
+              <wa-icon slot="icon" name="hat-wizard"></wa-icon>
+            </wa-avatar>
+          </div>
+          <div class="wa-split wa-gap-xs">
+            <span>wordwiz</span>
+            <small class="wa-caption-l">00:01:41</small>
+          </div>
+        </li>
+        <wa-divider></wa-divider>
+        <li class="wa-flank">
+          <div class="wa-cluster">
+            <wa-icon name="2" fixed-width></wa-icon>
+            <wa-avatar initials="A"></wa-avatar>
+          </div>
+          <div class="wa-split wa-gap-xs">
+            <span>acrossNdown</span>
+            <small class="wa-caption-l">00:01:58</small>
+          </div>
+        </li>
+        <wa-divider></wa-divider>
+        <li class="wa-flank">
+          <div class="wa-cluster">
+            <wa-icon name="3" fixed-width></wa-icon>
+            <wa-avatar initials="X"></wa-avatar>
+          </div>
+          <div class="wa-split wa-gap-xs">
+            <span>XwordChamp</span>
+            <small class="wa-caption-l">00:02:14</small>
+          </div>
+        </li>
+        <wa-divider></wa-divider>
+        <li class="wa-flank">
+          <div class="wa-cluster">
+            <wa-icon name="4" fixed-width></wa-icon>
+            <wa-avatar>
+              <wa-icon slot="icon" name="chess-knight"></wa-icon>
+            </wa-avatar>
+          </div>
+          <div class="wa-split wa-gap-xs">
+            <span>puzzlepoet</span>
+            <small class="wa-caption-l">00:02:16</small>
+          </div>
+        </li>
+        <wa-divider></wa-divider>
+        <li class="wa-flank">
+          <div class="wa-cluster">
+            <wa-icon name="5" fixed-width></wa-icon>
+            <wa-avatar initials="R"></wa-avatar>
+          </div>
+          <div class="wa-split wa-gap-xs">
+            <span>RiddleMeThis</span>
+            <small class="wa-caption-l">00:02:34</small>
+          </div>
+        </li>
+      </ol>
+    </div>
+    <div slot="footer">
+      <a href="" class="wa-cluster wa-gap-xs wa-caption-m">
+        <span>View all standings</span>
+        <wa-icon name="arrow-right"></wa-icon>
+      </a>
+    </div>
+  </wa-card>
+</div>
+```
+
+## Two Column
+
+```html {.example}
+<div class="wa-stack">
+  <h3>Collective Activity for Yesterday</h3>
+  <div class="wa-grid">
+    <wa-callout variant="neutral" appearance="filled">
+      <wa-icon slot="icon" name="book"></wa-icon>
+      <div class="wa-stack wa-gap-0">
+        <h4 class="wa-heading-xs">Items Studied</h4>
+        <div class="wa-heading-2xl">482,813</div>
+      </div>
+    </wa-callout>
+    <wa-callout variant="brand" appearance="filled">
+      <wa-icon slot="icon" name="diploma"></wa-icon>
+      <div class="wa-stack wa-gap-0">
+        <h4 class="wa-heading-xs">Items Mastered</h4>
+        <div class="wa-heading-2xl">67,106</div>
+      </div>
+    </wa-callout>
+    <wa-callout variant="success" appearance="filled">
+      <wa-icon slot="icon" name="wand-sparkles"></wa-icon>
+      <div class="wa-stack wa-gap-0">
+        <h4 class="wa-heading-xs">Items Created</h4>
+        <div class="wa-heading-2xl">2,080</div>
+      </div>
+    </wa-callout>
+  </div>
+  <div class="wa-grid">
+    <wa-card>
+      <div slot="header" class="wa-flank wa-gap-xl">
+        <wa-icon name="graduation-cap" class="wa-heading-xl"></wa-icon>
+        <span class="wa-gap-2xs wa-stack">
+          <h4>Study Leaders</h4>
+          <span class="wa-caption-m">Items mastered in the last 7 days</span>
+        </span>
+      </div>
+      <div class="wa-stack">
+        <ol class="wa-stack">
+          <li class="wa-flank">
+            <div class="wa-cluster">
+              <wa-icon name="1" fixed-width></wa-icon>
+              <wa-avatar image="https://images.unsplash.com/photo-1620428268482-cf1851a36764?q=80&w=3418&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+            </div>
+            <div class="wa-split wa-gap-xs">
+              <span>mitsuwo</span>
+              <small class="wa-caption-l">2,753</small>
+            </div>
+          </li>
+          <wa-divider></wa-divider>
+          <li class="wa-flank">
+            <div class="wa-cluster">
+              <wa-icon name="2" fixed-width></wa-icon>
+              <wa-avatar image="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+            </div>
+            <div class="wa-split wa-gap-xs">
+              <span>knowledgeninja</span>
+              <small class="wa-caption-l">2,298</small>
+            </div>
+          </li>
+          <wa-divider></wa-divider>
+          <li class="wa-flank">
+            <div class="wa-cluster">
+              <wa-icon name="3" fixed-width></wa-icon>
+              <wa-avatar image="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?q=80&w=2592&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+            </div>
+            <div class="wa-split wa-gap-xs">
+              <span>NxtLvl</span>
+              <small class="wa-caption-l">2,008</small>
+            </div>
+          </li>
+          <wa-divider></wa-divider>
+          <li class="wa-flank">
+            <div class="wa-cluster">
+              <wa-icon name="4" fixed-width></wa-icon>
+              <wa-avatar image="https://images.unsplash.com/photo-1630549316063-7ae02749d2cc?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+            </div>
+            <div class="wa-split wa-gap-xs">
+              <span>brainiac</span>
+              <small class="wa-caption-l">1,954</small>
+            </div>
+          </li>
+          <wa-divider></wa-divider>
+          <li class="wa-flank">
+            <div class="wa-cluster">
+              <wa-icon name="5" fixed-width></wa-icon>
+              <wa-avatar image="https://images.unsplash.com/photo-1582845512747-e42001c95638?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+            </div>
+            <div class="wa-split wa-gap-xs">
+              <span>eduexplorer</span>
+              <small class="wa-caption-l">1,897</small>
+            </div>
+          </li>
+        </ol>
+      </div>
+    </wa-card>
+    <wa-card>
+      <div slot="header" class="wa-flank wa-gap-xl">
+        <wa-icon name="hat-wizard" class="wa-heading-xl"></wa-icon>
+        <span class="wa-gap-2xs wa-stack">
+          <h4>Creation Leaders</h4>
+          <span class="wa-caption-m">Items created in the last 7 days</span>
+        </span>
+      </div>
+      <div class="wa-stack">
+        <ol class="wa-stack">
+          <li class="wa-flank">
+            <div class="wa-cluster">
+              <wa-icon name="1" fixed-width></wa-icon>
+              <wa-avatar image="https://images.unsplash.com/photo-1630549316063-7ae02749d2cc?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+            </div>
+            <div class="wa-split wa-gap-xs">
+              <span>brainiac</span>
+              <small class="wa-caption-l">134</small>
+            </div>
+          </li>
+          <wa-divider></wa-divider>
+          <li class="wa-flank">
+            <div class="wa-cluster">
+              <wa-icon name="2" fixed-width></wa-icon>
+              <wa-avatar image="https://images.unsplash.com/photo-1546776230-bb86256870ce?q=80&w=3368&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+            </div>
+            <div class="wa-split wa-gap-xs">
+              <span>LessonLegend</span>
+              <small class="wa-caption-l">115</small>
+            </div>
+          </li>
+          <wa-divider></wa-divider>
+          <li class="wa-flank">
+            <div class="wa-cluster">
+              <wa-icon name="3" fixed-width></wa-icon>
+              <wa-avatar image="https://images.unsplash.com/photo-1620428268482-cf1851a36764?q=80&w=3418&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+            </div>
+            <div class="wa-split wa-gap-xs">
+              <span>mitsuwo</span>
+              <small class="wa-caption-l">98</small>
+            </div>
+          </li>
+          <wa-divider></wa-divider>
+          <li class="wa-flank">
+            <div class="wa-cluster">
+              <wa-icon name="4" fixed-width></wa-icon>
+              <wa-avatar image="https://images.unsplash.com/photo-1586374579358-9d19d632b6df?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+            </div>
+            <div class="wa-split wa-gap-xs">
+              <span>wiswiz</span>
+              <small class="wa-caption-l">79</small>
+            </div>
+          </li>
+          <wa-divider></wa-divider>
+          <li class="wa-flank">
+            <div class="wa-cluster">
+              <wa-icon name="5" fixed-width></wa-icon>
+              <wa-avatar image="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" shape="rounded"></wa-avatar>
+            </div>
+            <div class="wa-split wa-gap-xs">
+              <span>knowledgeninja</span>
+              <small class="wa-caption-l">77</small>
+            </div>
+          </li>
+        </ol>
+      </div>
+    </wa-card>
+  </div>
+</div>
+```

docs/docs/patterns/app/pagination.md

@@ -0,0 +1,51 @@
+---
+title: Pagination
+description: 'Improve navigation and performance by breaking long lists or content into manageable pages.'
+---
+
+## Simple
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-placeholder"></div>
+  <wa-divider></wa-divider>
+  <div class="wa-split">
+    <span class="wa-caption-l">Showing 1 to 10 of 50 Results</span>
+    <div class="wa-cluster wa-gap-xs">
+      <wa-button appearance="outlined">
+        <wa-icon slot="prefix" name="chevron-left"></wa-icon>
+        Prev
+      </wa-button>
+      <wa-button appearance="outlined">
+        <wa-icon slot="suffix" name="chevron-right"></wa-icon>
+        Next
+      </wa-button>
+    </div>
+  </div>
+</div>
+```
+
+## With Button Group
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-placeholder"></div>
+  <wa-divider></wa-divider>
+  <div class="wa-split">
+    <span class="wa-caption-l">Showing 1 to 10 of 50 Results</span>
+    <wa-button-group orientation="horizontal">
+      <wa-button appearance="outlined">
+        <wa-icon name="chevron-left"></wa-icon>
+      </wa-button>
+      <wa-button appearance="accent" variant="brand">1</wa-button>
+      <wa-button appearance="outlined">2</wa-button>
+      <wa-button appearance="outlined">3</wa-button>
+      <wa-button appearance="outlined" disabled>...</wa-button>
+      <wa-button appearance="outlined">10</wa-button>
+      <wa-button appearance="outlined">
+        <wa-icon name="chevron-right"></wa-icon>
+      </wa-button>
+    </wa-button-group>
+  </div>
+</div>
+```

docs/docs/patterns/app/permissions.md

@@ -0,0 +1,228 @@
+---
+title: Permissions
+description: 'Permission patterns provide or restrict access to users.'
+---
+
+## With Form Inputs
+```html{.example}
+<wa-card with-header style="max-width: 72ch; margin: 0 auto;">
+  <div slot="header" class="wa-split">
+    <h2 class="wa-heading-m">Invite Team Members</h2>
+    <wa-icon name="close"></wa-icon>
+  </div>
+  <div class="wa-stack wa-gap-2xl">
+    <div class="wa-align-items-end wa-flank:end wa-gap-2xs">
+      <wa-input label="Email" placeholder="contact@example.com"></wa-input>
+      <wa-button variant="success">Send Invite</wa-button>
+    </div>
+
+    <div class="wa-stack">
+      <span class="wa-heading-s">Project Members</span>
+      <div class="wa-stack wa-gap-xl">
+        <div class="wa-flank">
+          <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=1961&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-0">
+              <span class="wa-heading-xs">Jessica Jones</span>
+              <span class="wa-caption-m" style="word-break: break-word">jessica.jones@example.com</span>
+            </div>
+            <wa-select value="owner">
+              <wa-option value="owner">Owner</wa-option>
+              <wa-option value="admin">Admin</wa-option>
+              <wa-option value="can-edit">Can Edit</wa-option>
+              <wa-option value="view-only">View Only</wa-option>
+            </wa-select>
+          </div>
+        </div>
+        <div class="wa-flank">
+          <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1566492031773-4f4e44671857?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-0">
+              <span class="wa-heading-xs">Foggy Nelson</span>
+              <span class="wa-caption-m" style="word-break: break-word">foggy.nelson@example.com</span>
+            </div>
+            <wa-select value="admin">
+              <wa-option value="owner">Owner</wa-option>
+              <wa-option value="admin">Admin</wa-option>
+              <wa-option value="can-edit">Can Edit</wa-option>
+              <wa-option value="view-only">View Only</wa-option>
+            </wa-select>
+          </div>
+        </div>
+        <div class="wa-flank">
+          <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-0">
+              <span class="wa-heading-xs">Karen Page</span>
+              <span class="wa-caption-m" style="word-break: break-word">karen.page@example.com</span>
+            </div>
+            <wa-select value="can-edit">
+              <wa-option value="owner">Owner</wa-option>
+              <wa-option value="admin">Admin</wa-option>
+              <wa-option value="can-edit">Can Edit</wa-option>
+              <wa-option value="view-only">View Only</wa-option>
+            </wa-select>
+          </div>
+        </div>
+        <div class="wa-flank">
+          <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <div class="wa-split">
+            <div class="wa-stack wa-gap-0">
+              <span class="wa-heading-xs">Matt Murdock</span>
+              <span class="wa-caption-m" style="word-break: break-word">matt.murdock@example.com</span>
+            </div>
+            <wa-select value="view-only">
+              <wa-option value="owner">Owner</wa-option>
+              <wa-option value="admin">Admin</wa-option>
+              <wa-option value="can-edit">Can Edit</wa-option>
+              <wa-option value="view-only">View Only</wa-option>
+            </wa-select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="wa-align-items-end wa-flank:end wa-gap-2xs">
+      <wa-input label="Share Link" value="https://sharelink3435re.com" disabled></wa-input>
+      <wa-button variant="brand" appearance="filled outlined">
+        <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+        Copy Link
+      </wa-button>
+    </div>
+  </div>
+</wa-card>
+```
+
+## Link Settings
+```html {.example}
+<wa-card style="max-width: 45ch; margin: 0 auto;">
+  <div class="wa-stack">
+     <h2 class="wa-heading-m">Manage Link</h2>
+    <wa-input label="Expiration Date" type="date"></wa-input>
+    <wa-radio-group
+      label="Share Limit"
+      orientation="horizontal"
+      name="share-limit"
+      value="0"
+    >
+      <wa-radio-button value="0">None</wa-radio-button>
+      <wa-radio-button value="5">5</wa-radio-button>
+      <wa-radio-button value="10">10</wa-radio-button>
+      <wa-radio-button value="50">50</wa-radio-button>
+      <wa-radio-button value="100">100</wa-radio-button>
+    </wa-radio-group>
+     <wa-divider></wa-divider>
+    <wa-switch hint="Members are removed after logging out." checked>Temporary Access</wa-switch>
+    <div class="wa-cluster wa-gap-xs" style="justify-content: flex-end">
+    <wa-button size="small" appearance="outlined" pill>Cancel</wa-button>
+    <wa-button size="small" variant="brand" pill>Generate</wa-button>
+  </div>
+  </div>
+  
+</wa-card>
+```
+
+## Role Settings
+```html {.example}
+<div style="max-width: 78ch; margin: 0 auto;">
+  <h2>Settings</h2>
+  <p>Update settings for this server.</p>
+  <wa-tab-group>
+  <wa-tab panel="general">
+    <div class="wa-cluster">
+      <wa-icon name="user"></wa-icon>
+      <span>User Permissions</span>
+    </div>
+  </wa-tab>
+  <wa-tab-panel name="general">
+    <wa-card>
+      <div class="wa-flank">
+        <wa-avatar image="https://images.unsplash.com/photo-1741289308283-feba56f857cc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGJlYXJkfGVufDB8MnwwfHx8Mg%3D%3D" alt="image avatar"></wa-avatar>
+        <div class="wa-split">
+          <div class="wa-stack wa-gap-xs">
+            <span class="wa-heading-s">Kris Kringle</span>
+            <span class="wa-caption-m">Admin</span>
+          </div>
+          <wa-button appearance="plain">
+            <wa-icon slot="prefix" name="edit"></wa-icon>
+            Edit Profile
+          </wa-button>
+        </div>
+      </div>
+    </wa-card>
+    <table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Role</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+         <div class="wa-flank">
+            <wa-avatar image="https://images.unsplash.com/photo-1579824894326-77ec5aaf8703?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fHJlaW5kZWVyfGVufDB8MnwwfHx8Mg%3D%3D"></wa-avatar>
+            <span class="wa-caption-m">Dasher</span>
+          </div>
+      </td>
+      <td>
+        <wa-select value="moderator">
+          <wa-option value="moderator">Moderator</wa-option>
+          <wa-option value="contributor">Contributor</wa-option>
+          <wa-option value="reader">Reader</wa-option>
+        </wa-select>  
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="wa-flank">
+            <wa-avatar image="https://images.unsplash.com/photo-1691065686144-916ff29d1b4f?q=80&w=2666&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+            <span class="wa-caption-m">Dancer</span>
+          </div>
+      </td>
+
+      <td>
+        <wa-select value="moderator">
+          <wa-option value="moderator">Moderator</wa-option>
+          <wa-option value="contributor">Contributor</wa-option>
+          <wa-option value="reader">Reader</wa-option>
+        </wa-select>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="wa-flank">
+            <wa-avatar image="https://images.unsplash.com/photo-1616742618872-9e8a890d90b2?q=80&w=2712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+            <span class="wa-caption-m">Prancer</span>
+          </div>
+      </td>
+      <td>
+        <wa-select value="contributor">
+          <wa-option value="moderator">Moderator</wa-option>
+          <wa-option value="contributor">Contributor</wa-option>
+          <wa-option value="reader">Reader</wa-option>
+        </wa-select>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="wa-flank">
+            <wa-avatar image="https://images.unsplash.com/photo-1728290403857-1b7909db2baa?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+            <span class="wa-caption-m">Vixen</span>
+          </div>
+      </td>
+      <td>
+        <wa-select value="reader">
+          <wa-option value="moderator">Moderator</wa-option>
+          <wa-option value="contributor">Contributor</wa-option>
+          <wa-option value="reader">Reader</wa-option>
+        </wa-select>
+      </td>
+    </tr>
+  </tbody>
+</table>
+  </wa-tab-panel>
+ 
+</wa-tab-group>
+</div>
+```

docs/docs/patterns/app/pricing.md

@@ -0,0 +1,167 @@
+---
+title: Pricing
+description: 'Help users make informed purchasing decisions with clear, structured pricing.'
+---
+
+## Three Tiers
+
+```html{.example}
+<div class="wa-grid">
+  <wa-card>
+    <div class="wa-stack">
+      <div class="wa-cluster wa-heading-l">
+        <wa-icon name="apple-core"></wa-icon>
+        <h3>Lite</h3>
+      </div>
+      <span class="wa-flank wa-align-items-baseline wa-gap-2xs">
+        <span class="wa-heading-2xl">$60</span>
+        <span class="wa-caption-l">per year</span>
+      </span>
+      <p class="wa-caption-l">An online-only plan for web-based projects.</p>
+      <wa-button variant="brand" appearance="outlined">Get Lite</wa-button>
+    </div>
+    <div slot="footer" class="wa-stack">
+      <h4 class="wa-heading-s">What You Get</h4>
+      <div class="wa-stack">
+        <div class="wa-flank">
+          <wa-icon name="user" fixed-width></wa-icon>
+          <span class="wa-caption-m">1 user</span>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="suitcase" fixed-width></wa-icon>
+          <span class="wa-caption-m">2 custom kits</span>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="chart-simple" fixed-width></wa-icon>
+          <span class="wa-caption-m">Up to 100k pageviews</span>
+        </div>
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-stack">
+      <div class="wa-split">
+        <div class="wa-cluster wa-heading-l">
+          <wa-icon name="apple-whole"></wa-icon>
+          <h3>Pro</h3>
+        </div>
+        <wa-badge>Most Popular</wa-badge>
+      </div>
+      <span class="wa-flank wa-align-items-baseline wa-gap-2xs">
+        <span class="wa-heading-2xl">$120</span>
+        <span class="wa-caption-l">per year</span>
+      </span>
+      <p class="wa-caption-l">A great all-around plan for online or desktop use.</p>
+      <wa-button variant="brand">Get Pro</wa-button>
+    </div>
+    <div slot="footer" class="wa-stack">
+      <h4 class="wa-heading-s">What You Get</h4>
+      <div class="wa-stack">
+        <div class="wa-flank">
+          <wa-icon name="user" fixed-width></wa-icon>
+          <span class="wa-caption-m">5 users</span>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="suitcase" fixed-width></wa-icon>
+          <span class="wa-caption-m">20 custom kits</span>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="chart-simple" fixed-width></wa-icon>
+          <span class="wa-caption-m">Up to 1M pageviews</span>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="arrow-down-to-line" fixed-width></wa-icon>
+          <span class="wa-caption-m">Kit downloads</span>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="cloud-plus" fixed-width></wa-icon>
+          <span class="wa-caption-m">Cloud hosting</span>
+        </div>
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-stack">
+      <div class="wa-cluster wa-heading-l">
+        <wa-icon name="crate-apple"></wa-icon>
+        <h3>Max</h3>
+      </div>
+      <span class="wa-flank wa-align-items-baseline wa-gap-2xs">
+        <span class="wa-heading-2xl">$600</span>
+        <span class="wa-caption-l">per year</span>
+      </span>
+      <p class="wa-caption-l">Our biggest plan with more of everything.</p>
+      <wa-button variant="brand" appearance="outlined">Get Max</wa-button>
+    </div>
+    <div slot="footer" class="wa-stack">
+      <h4 class="wa-heading-s">What You Get</h4>
+      <div class="wa-stack">
+        <div class="wa-flank">
+          <wa-icon name="user" fixed-width></wa-icon>
+          <span class="wa-caption-m">50 users</span>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="suitcase" fixed-width></wa-icon>
+          <span class="wa-caption-m">Unlimited custom kits</span>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="chart-simple" fixed-width></wa-icon>
+          <span class="wa-caption-m">Up to 10M pageviews</span>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="arrow-down-to-line" fixed-width></wa-icon>
+          <span class="wa-caption-m">Kit downloads</span>
+        </div>
+        <div class="wa-flank">
+          <wa-icon name="cloud-plus" fixed-width></wa-icon>
+          <span class="wa-caption-m">Cloud hosting</span>
+        </div>
+      </div>
+    </div>
+  </wa-card>
+</div>
+```
+
+## Single Tier
+
+```html {.example}
+<wa-card>
+  <div class="wa-grid">
+    <div class="wa-stack">
+      <h3 class="wa-heading-l">Lifetime Membership</h3>
+      <p>Learn at your own pace with expert-led content, exclusive resources, and a community of like-minded learners.</p>
+      <wa-divider></wa-divider>
+      <h4 class="wa-heading-s">Membership Includes:</h4>
+      <div class="wa-grid">
+        <div class="wa-flank wa-gap-xs">
+          <wa-icon name="check"></wa-icon>
+          <span class="wa-caption-m">Private forum access</span>
+        </div>
+        <div class="wa-flank wa-gap-xs">
+          <wa-icon name="check"></wa-icon>
+          <span class="wa-caption-m">Priority admission to events</span>
+        </div>
+        <div class="wa-flank wa-gap-xs">
+          <wa-icon name="check"></wa-icon>
+          <span class="wa-caption-m">Yearly skill assessment</span>
+        </div>
+        <div class="wa-flank wa-gap-xs">
+          <wa-icon name="check"></wa-icon>
+          <span class="wa-caption-m">Members-only swag</span>
+        </div>
+      </div>
+    </div>
+    <wa-callout variant="neutral" appearance="filled">
+      <div class="wa-stack wa-align-items-center" style="justify-content: center">
+        <h4 class="wa-heading-s">Pay Once, Own it Forever</h4>
+        <div class="wa-cluster wa-align-items-baseline wa-gap-2xs">
+          <span class="wa-heading-3xl">$459</span>
+          <span>USD</span>
+        </div>
+        <wa-button variant="brand" style="width: 100%">Get Access</wa-button>
+        <small class="wa-caption-m">30-day money back guarantee</small>
+      </div>
+    </wa-callout>
+  </div>
+</wa-card>
+```

docs/docs/patterns/blog.md

@@ -1,6 +1,7 @@
 ---
 title: Blog
 description: TODO
+unlisted: true
 ---
 
 TODO Page Description

docs/docs/patterns/business.md

@@ -1,6 +1,7 @@
 ---
 title: Business
 description: TODO
+unlisted: true
 ---
 
 TODO Page Description

docs/docs/patterns/ecommerce-category-filter.md

@@ -1,13 +0,0 @@
----
-title: Category Filter
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-TODO Page Description
-
-## With inline actions and expandable sidebar filters
-```html{.example}
-
-```

docs/docs/patterns/ecommerce-category-preview.md

@@ -1,12 +0,0 @@
----
-title: Category Preview
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-TODO Page Description
-
-## Three Column (WIP)
-
-```

docs/docs/patterns/ecommerce-order-history.md

@@ -1,14 +0,0 @@
----
-title: Order History
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-TODO Page Description
-
-## Invoice panels
-
-```html{.example}
-
-```

docs/docs/patterns/ecommerce-order-summary.md

@@ -1,13 +0,0 @@
----
-title: Product List
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-TODO Page Description
-
-## With split image
-```html{.example}
-
-```

docs/docs/patterns/ecommerce-product-detail.md

@@ -1,129 +0,0 @@
----
-title: Product Detail
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-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" hint="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" hint="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>
-```

docs/docs/patterns/ecommerce-product-list.md

@@ -1,166 +0,0 @@
----
-title: Product Lists
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-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}
-
-```

docs/docs/patterns/ecommerce-product-review.md

@@ -1,465 +0,0 @@
----
-title: Product Reviews
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-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" hint="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" hint="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" hint="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" hint="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" hint="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" hint="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 panel="general">General</wa-tab>
-  <wa-tab panel="custom">Custom</wa-tab>
-  <wa-tab panel="advanced">Advanced</wa-tab>
-  <wa-tab 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>
-
-```

docs/docs/patterns/ecommerce-shopping-cart.md

@@ -1,10 +0,0 @@
----
-title: Shopping Cart
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/ecommerce/category-filter.md

@@ -0,0 +1,83 @@
+---
+title: Category Filter
+description: 'Helps the user find the right products with filters to refine search results by specific attributes.'
+icon: checkbox
+---
+
+## Sidebar with Checkboxes & Expandable Filters
+
+```html{.example}
+  <h1>New Arrivals</h1>
+  <div class="wa-flank wa-align-items-start" style="--flank-size: 200px;">
+    <form class="wa-stack">
+      <wa-checkbox checked>All Products</wa-checkbox>
+      <wa-checkbox>Sale</wa-checkbox>
+      <wa-checkbox>Travel</wa-checkbox>
+      <wa-checkbox>Organization</wa-checkbox>
+      <wa-checkbox>Accessories</wa-checkbox>
+      <wa-details summary="Color" open>
+        <div class="wa-stack">
+          <wa-checkbox>White</wa-checkbox>
+          <wa-checkbox>Beige</wa-checkbox>
+          <wa-checkbox>Blue</wa-checkbox>
+          <wa-checkbox>Brown</wa-checkbox>
+          <wa-checkbox>Green</wa-checkbox>
+        </div>
+      </wa-details>
+      <wa-details summary="Category">
+        <div class="wa-stack">
+          <wa-checkbox>Outdoor</wa-checkbox>
+          <wa-checkbox>Indoor</wa-checkbox>
+          <wa-checkbox>All Weather</wa-checkbox>
+        </div>
+      </wa-details>
+      <wa-details summary="Size">
+        <div class="wa-stack">
+          <wa-checkbox>Small</wa-checkbox>
+          <wa-checkbox>Medium</wa-checkbox>
+          <wa-checkbox>Large</wa-checkbox>
+          <wa-checkbox>XL</wa-checkbox>
+          <wa-checkbox>XXL</wa-checkbox>
+        </div>
+      </wa-details>
+    </form>
+    <div class="wa-placeholder"></div>
+  </div>
+</div>
+```
+
+## Sidebar with Dropdowns
+
+```html{.example}
+  <h1>New Arrivals</h1>
+ <div class="wa-flank wa-align-items-start">
+  <div class="wa-stack">
+    <wa-select label="Product Type" placeholder="Products" value="all-products">
+      <wa-option value="all-products">All Products</wa-option>
+      <wa-option value="sale">Sale</wa-option>
+      <wa-option value="travel">Travel</wa-option>
+      <wa-option value="organization">Organization</wa-option>
+      <wa-option value="accessories">Accessories</wa-option>
+    </wa-select>
+    <wa-divider></wa-divider>
+    <wa-select label="Color" placeholder="Color" value="black" multiple>
+      <wa-option value="black">Black</wa-option>
+      <wa-option value="white">White</wa-option>
+      <wa-option value="gray">Gray</wa-option>
+    </wa-select>
+    <wa-select label="Category" placeholder="Category" value="outdoor" multiple>
+      <wa-option value="outdoor">Outdoor</wa-option>
+      <wa-option value="indoor">Indoor</wa-option>
+      <wa-option value="all-weather">All Weather</wa-option>
+    </wa-select>
+    <wa-select label="Size" placeholder="Size" value="xl xxl" multiple>
+      <wa-option value="s">Small</wa-option>
+      <wa-option value="m">Medium</wa-option>
+      <wa-option value="l">Large</wa-option>
+      <wa-option value="xl">XL</wa-option>
+      <wa-option value="xxl">XXL</wa-option>
+    </wa-select>
+  </div>
+  <div class="wa-placeholder"></div>
+</div>
+```

docs/docs/patterns/ecommerce/category-preview.md

@@ -0,0 +1,162 @@
+---
+title: Category Preview
+description: 'Help shoppers discover your product offerings with showcases of product categories.'
+icon: preview
+---
+
+## Split with Image Grid
+
+```html {.example}
+<div class="wa-flank wa-align-items-start" style="--flank-size: 20rem;">
+  <div class="wa-stack wa-gap-2xl">
+    <h2 class="wa-heading-xl">Casual Collection</h2>
+    <p class="wa-body-s">Look good &mdash; without looking like you're trying too hard. Our casual collection includes laid back styles that work in <em>almost</em> any situation.</p>
+    <wa-button>View the Collection</wa-button>
+  </div>
+  <div class="wa-stack">
+    <div class="wa-frame:landscape wa-border-radius-s">
+      <img
+        src="https://images.unsplash.com/photo-1544441893-675973e31985?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="An analog watch, cotton pants, crew neck tee, and pair of tennis shoes (Photograph by Mnz)"
+      />
+    </div>
+    <div class="wa-grid">
+      <div class="wa-frame:landscape wa-border-radius-s">
+        <img
+          src="https://images.unsplash.com/photo-1548768041-2fceab4c0b85?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="Stack of three folded solid color tees (Photograph by Mnz)"
+        />
+      </div>
+      <div class="wa-frame:landscape wa-border-radius-s">
+        <img
+          src="https://images.unsplash.com/photo-1544441892-794166f1e3be?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="Pair of bright white tennis shoes(Photograph by Mnz)"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Columns with Tall Images
+
+```html {.example}
+<div class="wa-stack">
+  <h2 class="wa-heading-xl">Shop by Category</h2>
+  <div class="wa-grid">
+    <a href="" class="wa-stack wa-link-plain">
+      <div class="wa-frame:portrait wa-border-radius-s">
+        <img
+          src="https://uploads.webawesome.com/organization.jpg"
+          alt="Inside of a closet filled with clothes on wooden hangers and integrated shelving with shoes"
+        />
+      </div>
+      <span class="wa-caption-xl">Organization</span>
+    </a>
+    <a href="" class="wa-stack wa-link-plain">
+      <div class="wa-frame:portrait wa-border-radius-s">
+        <img
+          src="https://uploads.webawesome.com/bags.jpg"
+          alt="Young person hugging a small floral patterned book bag between their arms"
+        />
+      </div>
+      <span class="wa-caption-xl">Bags</span>
+    </a>
+    <a href="" class="wa-stack wa-link-plain">
+      <div class="wa-frame:portrait wa-border-radius-s">
+        <img
+          src="https://uploads.webawesome.com/outdoor-2.jpg"
+          alt="Person in a mountain clearing wearing a waterproof hooded windbreaker in black and orange"
+        />
+      </div>
+      <span class="wa-caption-xl">Outdoor</span>
+    </a>
+  </div>
+</div>
+```
+
+## Columns with Cards
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-split">
+    <h2 class="wa-heading-xl">Shop by Category</h2>
+    <a href="" class="wa-cluster">
+      <span>Browse All Categories</span>
+      <wa-icon name="arrow-right"></wa-icon>
+    </a>
+  </div>
+  <div class="wa-grid">
+    <a href="" class="wa-link-plain">
+      <wa-card style="height: 100%">
+        <img
+          slot="image"
+          src="https://img.fortawesome.com/cfa83f3c/outdoor-3x.jpg"
+          alt="Two hikers wearing long canvas pants, weatherproof jackets, and backpacks"
+        />
+        <div class="wa-stack wa-gap-xs">
+          <span class="wa-heading-m">Outdoor</span>
+          <p class="wa-caption-m">Durable canvas gear for all conditions.</p>
+        </div>
+      </wa-card>
+    </a>
+    <a href="" class="wa-link-plain">
+      <wa-card style="height: 100%">
+        <img
+          slot="image"
+          src="https://img.fortawesome.com/cfa83f3c/home.jpg"
+          alt="Woman sitting on a couch in a bright home, wearing a thick knit sweater"
+        />
+        <div class="wa-stack wa-gap-xs">
+          <span class="wa-heading-m">Home</span>
+          <p class="wa-caption-m">Cozy up on the couch and relax in soft cotton.</p>
+        </div>
+      </wa-card>
+    </a>
+    <a href="" class="wa-link-plain">
+      <wa-card style="height: 100%">
+        <img
+          slot="image"
+          src="https://img.fortawesome.com/cfa83f3c/fitness.jpg"
+          alt="Athlete training in fitted active wear tee and shorts"
+        />
+        <div class="wa-stack wa-gap-xs">
+          <span class="wa-heading-m">Active</span>
+          <p class="wa-caption-m">Get fit in style with breathable poly blends.</p>
+        </div>
+      </wa-card>
+    </a>
+  </div>
+</div>
+```
+
+## Square Image Grid
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl">
+  <div class="wa-stack wa-gap-xs wa-align-items-center">
+    <h2 class="wa-heading-xl">New Arrivals</h2>
+    <p class="wa-caption-l">Explore brand new furniture to accentuate your home aesthetic &mdash; just for you.</p>
+  </div>
+<div class="wa-grid">
+  <div class="wa-stack">
+    <div class="wa-frame wa-border-radius-m">
+      <img
+        src="https://uploads.webawesome.com/indoor-furniture.jpg"
+        alt="Sunny room with a mid-century modern couch, accent chair, and elegant lamp"
+      />
+    </div>
+    <wa-button appearance="outlined">View Indoor Furniture</wa-button>
+  </div>
+  <div class="wa-stack">
+    <div class="wa-frame wa-border-radius-m">
+      <img
+        src="https://uploads.webawesome.com/outdoor-furniture.jpg"
+        alt="Covered patio with rustic wooden cabinets, writing desk, and stool"
+      />
+    </div>
+    <wa-button appearance="outlined">View Outdoor Furniture</wa-button>
+  </div>
+</div>
+</div>
+```

docs/docs/patterns/ecommerce/checkout-form.md

@@ -0,0 +1,244 @@
+---
+title: Checkout Form
+description: 'Let shoppers checkout with ease with streamlined forms to capture shipping and payment info.'
+---
+
+
+## Full Form with Order Summary Card
+
+```html {.example}
+<div class="wa-grid wa-gap-3xl">
+  <div class="wa-stack">
+    <h4>Contact</h4>
+    <wa-input type="email" label="Email Address"></wa-input>
+    <wa-divider></wa-divider>
+    <h4>Shipping</h4>
+    <wa-select label="Country" value="us">
+      <wa-option value="ca">Canada</wa-option>
+      <wa-option value="mx">Mexico</wa-option>
+      <wa-option value="us">United States</wa-option>
+    </wa-select>
+    <div class="wa-grid">
+      <wa-input label="First Name"></wa-input>
+      <wa-input label="Last Name"></wa-input>
+    </div>
+    <wa-input label="Company"></wa-input>
+    <wa-input label="Address"></wa-input>
+    <div class="wa-grid" style="--min-column-size: 10ch;">
+      <wa-input label="City"></wa-input>
+      <wa-input label="State"></wa-input>
+      <wa-input label="Postal Code"></wa-input>
+    </div>
+    <wa-input label="Phone"></wa-input>
+    <wa-divider></wa-divider>
+      <wa-radio-group label="Shipping Method" name="shipping-method" value="standard" orientation="horizontal">
+      <wa-radio value="standard" hint="7-10  business days">Standard</wa-radio>
+      <wa-radio value="express" hint="2-5 business days">Express</wa-radio>
+    </wa-radio-group>
+    <wa-divider></wa-divider>
+    <h4>Payment</h4>
+    <wa-radio-group label="Payment Method" name="payment-method" value="credit" orientation="horizontal">
+      <wa-radio value="credit">Credit Card</wa-radio>
+      <wa-radio value="paypal">Paypal</wa-radio>
+    </wa-radio-group>
+    <wa-input label="Card Number"></wa-input>
+    <wa-input label="Name on Card"></wa-input>
+    <div class="wa-grid">
+      <wa-input label="Expiration Date" placeholder="MM/YY"></wa-input>
+      <wa-input label="CVC"></wa-input>
+    </div>
+  </div>
+  <div class="wa-stack">
+    <h4>Order Summary</h4>
+    <wa-card>
+      <div class="wa-stack">
+        <div class="wa-flank wa-align-items-start" style="--flank-size: 7rem">
+          <div class="wa-frame wa-border-radius-s">
+            <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM1MzB8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
+          </div>
+          <div class="wa-stack wa-gap-xs">
+            <div class="wa-split">
+              <span class="wa-heading-s">Dolce Runners</span>
+              <wa-icon-button name="trash" label="Remove from cart"></wa-icon-button>
+            </div>
+            <span class="wa-caption-m">Cream/Seafoam</span>
+            <span class="wa-caption-m">12.5</span>
+            <div class="wa-split">
+              <span>$135.00</span>
+              <wa-select value="1" size="small" style="max-width: 8ch">
+                <wa-option value="1">1</wa-option>
+                <wa-option value="2">2</wa-option>
+                <wa-option value="3">3</wa-option>
+              </wa-select>
+            </div>
+          </div>
+        </div>
+        <wa-divider></wa-divider>
+        <div class="wa-flank wa-align-items-start" style="--flank-size: 7rem">
+          <div class="wa-frame wa-border-radius-s">
+            <img src="https://images.unsplash.com/photo-1514989940723-e8e51635b782?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM1Njh8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
+          </div>
+          <div class="wa-stack wa-gap-xs">
+            <div class="wa-split">
+              <span class="wa-heading-s">Dunk High</span>
+              <wa-icon-button name="trash" label="Remove from cart"></wa-icon-button>
+            </div>
+            <span class="wa-caption-m">Sand/Amber/Black</span>
+            <span class="wa-caption-m">12.5</span>
+            <div class="wa-split">
+              <span>$180.00</span>
+              <wa-select value="1" size="small" style="max-width: 8ch">
+                <wa-option value="1">1</wa-option>
+                <wa-option value="2">2</wa-option>
+                <wa-option value="3">3</wa-option>
+              </wa-select>
+            </div>
+          </div>
+        </div>
+        <wa-divider></wa-divider>
+        <div class="wa-flank wa-align-items-start" style="--flank-size: 7rem">
+          <div class="wa-frame wa-border-radius-s">
+            <img src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM2MTF8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
+          </div>
+          <div class="wa-stack wa-gap-xs">
+            <div class="wa-split">
+              <span class="wa-heading-s">NB Runner</span>
+              <wa-icon-button name="trash" label="Remove from cart"></wa-icon-button>
+            </div>
+            <span class="wa-caption-m">Forrest Green</span>
+            <span class="wa-caption-m">12.5</span>
+            <div class="wa-split">
+              <span>$48.99</span>
+              <wa-select value="1" size="small" style="max-width: 8ch">
+                <wa-option value="1">1</wa-option>
+                <wa-option value="2">2</wa-option>
+                <wa-option value="3">3</wa-option>
+              </wa-select>
+            </div>
+          </div>
+        </div>
+        <wa-divider></wa-divider>
+        <div class="wa-stack">
+          <div class="wa-split wa-caption-m">
+            <span>Subtotal</span>
+            <span>$363.99</span>
+          </div>
+          <div class="wa-split wa-caption-m">
+            <span>Shipping</span>
+            <span>FREE</span>
+          </div>
+          <div class="wa-split wa-heading-m">
+            <span>Total</span>
+            <span>$363.99</span>
+          </div>
+        </div>
+        <wa-divider></wa-divider>
+        <wa-button variant="brand">Confirm Order</wa-button>
+      </div>
+    </wa-card>
+  </div>
+</div>
+```
+
+## Short Form with Order Summary
+
+```html {.example}
+<div class="wa-grid wa-gap-3xl">
+  <div class="wa-stack wa-gap-xl">
+    <h2>Payment</h2>
+    <wa-input type="email" label="Email" placeholder="ex. tanderson@metacortex.com">
+      <wa-icon slot="prefix" name="envelope"></wa-icon>
+    </wa-input>
+    <wa-input label="Card Number" placeholder="1234 1234 1234 1234">
+      <wa-icon slot="prefix" name="credit-card"></wa-icon>
+    </wa-input>
+    <div class="wa-grid" style="--min-column-size: 12ch">
+      <wa-input label="Expiration" placeholder="MM/YY">
+        <wa-icon slot="prefix" name="calendar"></wa-icon>
+      </wa-input>
+      <wa-input label="CVC" placeholder="CVC">
+        <wa-icon slot="prefix" name="lock"></wa-icon>
+      </wa-input>
+    </div>
+    <wa-input label="Cardholder Name" placeholder="Thomas Anderson">
+      <wa-icon slot="prefix" name="user"></wa-icon>
+    </wa-input>
+    <div class="wa-grid" style="--min-column-size: 12ch">
+      <wa-select label="Country" value="us">
+        <wa-icon slot="prefix" name="globe"></wa-icon>
+        <wa-option value="ca">Canada</wa-option>
+        <wa-option value="us">United States</wa-option>
+        <wa-option value="mx">Mexico</wa-option>
+      </wa-select>
+      <wa-input label="ZIP" placeholder="12345">
+        <wa-icon slot="prefix" name="location-dot"></wa-icon>
+      </wa-input>
+    </div>
+    <wa-switch checked>Sign me up for more offers from this store</wa-switch>
+    <wa-button variant="brand">Pay Now</wa-button>
+  </div>
+  <div class="wa-stack wa-gap-xl">
+    <h2>Order Summary</h2>
+    <div class="wa-split">
+      <div class="wa-cluster">
+        <div class="wa-frame wa-border-radius-m" style="max-width: 4rem">
+          <img src="https://images.unsplash.com/photo-1618677366787-9727aacca7ea?q=80&w=3255&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Glasses with black wire frames and dark tinted, circular lenses (Photograph by Colin Lloyd)">
+        </div>
+        <strong>Morpheus</strong>
+      </div>
+      <div class="wa-cluster">
+        <wa-input type="number" value="1" style="max-width: 5rem"></wa-input>
+        <span>$120.00</span>
+      </div>
+    </div>
+    <div class="wa-split">
+      <div class="wa-cluster">
+        <div class="wa-frame wa-border-radius-m" style="max-width: 4rem">
+          <img src="https://images.unsplash.com/photo-1511499767150-a48a237f0083?q=80&w=3558&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Glasses with rose gold wire frames and green tinted, circular lenses (Photograph by Charles Deluvio)">
+        </div>
+        <div class="wa-stack wa-gap-3xs">
+          <strong>Seraph</strong>
+          <em class="wa-caption-m">Tinted</em>
+        </div>
+      </div>
+      <div class="wa-cluster">
+        <wa-input type="number" value="1" style="max-width: 5rem"></wa-input>
+        <span>$180.00</span>
+      </div>
+    </div>
+    <div class="wa-split">
+      <div class="wa-cluster">
+        <div class="wa-frame wa-border-radius-m" style="max-width: 4rem">
+          <img src="https://images.unsplash.com/photo-1547104442-a40f335740cb?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Glasses with tortoise shell half frames and large, rounded lenses (Photograph by Sincerely Media)">
+        </div>
+        <div class="wa-stack wa-gap-3xs">
+          <strong>Keymaker</strong>
+          <em class="wa-caption-m">Glossy</em>
+        </div>
+      </div>
+      <div class="wa-cluster">
+        <wa-input type="number" value="1" style="max-width: 5rem"></wa-input>
+        <span>$50.00</span>
+      </div>
+    </div>
+    <div class="wa-flank:end">
+      <wa-input placeholder="Discount code or gift card"></wa-input>
+      <wa-button appearance="filled">Apply</wa-button>
+    </div>
+    <div class="wa-stack wa-gap-s">
+      <div class="wa-split">
+        <span>Subtotal</span>
+        <strong>$530.00</strong>
+      </div>
+      <div class="wa-split">
+        <span>Shipping</span>
+        <span>$8.00</span>
+      </div>
+      <div class="wa-split">
+        <strong>Total</strong>
+        <strong>$538.00</strong>
+      </div>
+    </div>
+  </div>
+</div>
+```

docs/docs/patterns/ecommerce/ecommerce.json

@@ -0,0 +1,3 @@
+{
+  "tags": ["ecommerce"]
+}

docs/docs/patterns/ecommerce/incentives.md

@@ -0,0 +1,123 @@
+---
+title: Incentives
+description: 'Encourage shoppers to buy your products with value propositions, discounts, and promotions.'
+---
+
+## 3 Column
+
+```html{.example}
+<div class="wa-gap-3xl wa-stack" style="max-width: 960px; margin: 0 auto;">
+  <div class="wa-align-items-center wa-grid">
+    <div>
+      <span class="wa-heading-xl">Get the Best Instruction from our Educators.</span>
+      <p class="wa-caption-l">At the beginning at least, but then we realized we could make a lot more money if we kinda stopped caring about that. Our new strategy is to write a bunch of things that look really good in the headlines, then clarify in the small print but hope people don't actually read it.</p>
+    </div>
+    <div class="wa-frame wa-border-radius-l">
+      <img src="https://uploads.webawesome.com/online-learning.jpg" />
+    </div>
+
+  </div>
+  <div class="wa-grid">
+    <div class="wa-stack wa-gap-xs">
+      <wa-icon name="stopwatch" style="font-size: 32px;"></wa-icon>
+      <span class="wa-heading-s">Learn at your Speed</span>
+      <p class="wa-caption-m">It's not actually free we just price it into the products. Someone's paying for it, and it's not us.</p>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <wa-icon name="chart-line" style="font-size: 32px;"></wa-icon>
+      <span class="wa-heading-s">Track Progress</span>
+      <p class="wa-caption-m">If it breaks in the first 10 years we'll replace it. After that you're on your own though.</p>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <wa-icon name="people-group" style="font-size: 32px;"></wa-icon>
+      <span class="wa-heading-s">Active Community</span>
+      <p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
+    </div>
+  </div>
+</div>
+```
+## 2 Column with Cards
+
+```html{.example}
+<div class="wa-grid" style="--min-column-size: 41ch;">
+  <wa-card>
+    <div class="wa-flank">
+    <div>
+      <wa-icon name="hands" style="font-size: 2.5rem;"></wa-icon>
+    </div>
+    <div class="wa-gap-s wa-stack">
+      <span class="wa-heading-m">Hands-on training</span>
+      <p class="wa-caption-l">Upskill effectively with AI-powered coding exercises, practice tests, and quizzes.</p>
+    </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank">
+    <div>
+      <wa-icon name="medal" style="font-size: 2.5rem;"></wa-icon>
+    </div>
+    <div class="wa-gap-s wa-stack">
+      <span class="wa-heading-m">Certification prep</span>
+      <p class="wa-caption-l">Prep for industry-recognized certifications by solving real-world challenges and earn badges along the way</p>
+    </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank">
+    <div>
+      <wa-icon name="chart-line" style="font-size: 2.5rem;"></wa-icon>
+    </div>
+    <div class="wa-gap-s wa-stack">
+      <div class="wa-split wa-gap-2xs">
+        <span class="wa-heading-m">Insights and analytics</span>
+        <wa-badge appearance="filled outlined" variant="warning">Pro Plan</wa-badge>
+      </div>
+      <p class="wa-caption-l">Fast-track goals with advanced insights plus a dedicated customer success team to help drive effective learning.</p>
+    </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank">
+      <div>
+        <wa-icon name="puzzle-piece" style="font-size: 2.5rem;"></wa-icon>
+      </div>
+      <div class="wa-gap-s wa-stack">
+        <div class="wa-split wa-gap-2xs">
+          <span class="wa-heading-m">Customizable content</span>
+          <wa-badge appearance="filled outlined" variant="warning">Pro Plan</wa-badge>
+        </div>
+        <p class="wa-caption-l">Create tailored learning paths for team and organization goals and even host your own content and resources.</p>
+      </div>
+    </div>
+  </wa-card>
+</div>
+```
+
+## 4 Column
+
+```html{.example}
+<div>
+<div class="wa-grid">
+  <div class="wa-stack wa-gap-xs">
+      <wa-icon name="magnifying-glass" style="font-size: 32px;"></wa-icon>
+      <span class="wa-heading-s">SEO Consulting</span>
+      <p class="wa-caption-m">It's not actually free we just price it into the products. Someone's paying for it, and it's not us.</p>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <wa-icon name="chalkboard-user" style="font-size: 32px;"></wa-icon>
+      <span class="wa-heading-s">In Person Training</span>
+      <p class="wa-caption-m">If it breaks in the first 10 years we'll replace it. After that you're on your own though.</p>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <wa-icon name="people-arrows" style="font-size: 32px;"></wa-icon>
+      <span class="wa-heading-s">1 on 1 Sessions</span>
+      <p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <wa-icon name="code" style="font-size: 32px;"></wa-icon>
+      <span class="wa-heading-s">Web Development</span>
+      <p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
+    </div>
+</div>
+</div>
+```

docs/docs/patterns/ecommerce/index.njk

@@ -0,0 +1,7 @@
+---
+title: Ecommerce
+description: Pre-built product overviews, shopping carts, and more to help you build high-converting storefronts.
+parent: patterns
+layout: overview
+override:tags: []
+---

docs/docs/patterns/ecommerce/order-history.md

@@ -0,0 +1,244 @@
+---
+title: Order History
+description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
+---
+
+## List
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl">
+  <h2>Order History</h2>
+  <p class="wa-caption-m">Check the status of recent orders, manage returns, and download invoices.</p>
+  <dl class="wa-split">
+    <span class="wa-stack wa-gap-0">
+      <dt>Order number</dt>
+      <dd>WU88191111</dd>
+    </span>
+    <span class="wa-stack wa-gap-0">
+      <dt>Date placed</dt>
+      <dd>January 22, 2021</dd>
+    </span>
+    <span class="wa-stack wa-gap-0">
+      <dt>Total amount</dt>
+      <dd>$590.00</dd>
+    </span>
+    <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>
+  </dl>
+  <wa-divider></wa-divider>
+  <div class="wa-flank" style="--flank-size: 12rem">
+    <div class="wa-frame wa-border-radius-s" style="aspect-ratio: 3 / 2">
+      <img
+        src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg"
+        alt=""
+      />
+    </div>
+    <div class="wa-stack">
+      <div class="wa-split">
+        <span><strong>Dome Light Fixtures</strong></span>
+        <span><strong>$215.00</strong></span>
+      </div>
+      <p class="wa-caption-m">Illuminate your space with elegance and style with stunning Dome Light Fixtures. The shape of these lights complements both modern and traditional interiors.</p>
+      <div class="wa-split">
+        <wa-badge appearance="filled" variant="success">Delivered</wa-badge>
+        <div class="wa-cluster">
+          <wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
+          <wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <wa-divider></wa-divider>
+  <div class="wa-flank" style="--flank-size: 12rem">
+    <div class="wa-frame wa-border-radius-s" style="aspect-ratio: 3 / 2">
+      <img
+        src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg"
+        alt=""
+      />
+    </div>
+    <div class="wa-stack">
+      <div class="wa-split">
+        <span><strong>Reading Chair</strong></span>
+        <span><strong>$115.00</strong></span>
+      </div>
+      <p class="wa-caption-m">Add a pop of color and a touch of elegance to any room with our Reading Chair featuring vibrant yellow fabric upholstery.</p>
+      <div class="wa-split">
+        <wa-badge appearance="filled" variant="brand">Out for delivery</wa-badge>
+        <div class="wa-cluster">
+          <wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
+          <wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <wa-divider></wa-divider>
+  <div class="wa-flank" style="--flank-size: 12rem">
+    <div class="wa-frame wa-border-radius-s" style="aspect-ratio: 3 / 2">
+      <img
+        src="https://img.fortawesome.com/cfa83f3c/sofa.jpg"
+        alt=""
+      />
+    </div>
+    <div class="wa-stack">
+      <div class="wa-split">
+        <span><strong>Custom Sofa</strong></span>
+        <span><strong>$260.00</strong></span>
+      </div>
+      <p class="wa-caption-m">Experience luxury and comfort like never before with our Custom Sofa, designed to elevate any living space. This sofa features exquisite velvet upholstery for an air of sophistication.</p>
+      <div class="wa-split">
+        <wa-badge appearance="filled" variant="neutral">Preparing to ship</wa-badge>
+        <div class="wa-cluster">
+          <wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
+          <wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Invoice Table
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl">
+  <wa-callout appearance="filled" variant="neutral">
+    <div class="wa-flank:end wa-align-items-center">
+      <dl class="wa-grid">
+        <div class="wa-stack wa-gap-0">
+          <dt>Date Placed</dt>
+          <dd>
+            <wa-format-date date="2021-01-22" month="long" day="numeric" year="numeric"></wa-format-date>
+          </dd>
+        </div>
+        <div class="wa-stack wa-gap-0">
+          <dt>Order Number</dt>
+          <dd>WU88191111</dd>
+        </div>
+        <div class="wa-stack wa-gap-0">
+          <dt>Total Amount</dt>
+          <dd>$590.00</dd>
+        </div>
+      </dl>
+      <wa-button>View Invoice</wa-button>
+    </div>
+  </wa-callout>
+  <table>
+    <thead>
+      <tr>
+        <th>Product</th>
+        <th>Price</th>
+        <th>Status</th>
+        <th>Info</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <div class="wa-cluster wa-align-items-start">
+            <div class="wa-frame:landscape wa-border-radius-s" style="max-width: 8rem">
+              <img
+                src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg"
+                alt=""
+              />
+            </div>
+            <span>Dome Light Fixtures</span>
+          </div>
+        </td>
+        <td>$215.00</td>
+        <td>Delivered Jan 25, 2021</td>
+        <td><a href="">View</a></td>
+      </tr>
+      <tr>
+        <td>
+          <div class="wa-cluster wa-align-items-start">
+            <div class="wa-frame:landscape wa-border-radius-s" style="max-width: 8rem">
+              <img
+                src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg"
+                alt=""
+              />
+            </div>
+            <span>Reading Chair</span>
+          </div>
+        </td>
+        <td>$115.00</td>
+        <td>Delivered Jan 25, 2021</td>
+        <td><a href="">View</a></td>
+      </tr>
+      <tr>
+        <td>
+          <div class="wa-cluster wa-align-items-start">
+            <div class="wa-frame:landscape wa-border-radius-s" style="max-width: 8rem">
+              <img
+                src="https://img.fortawesome.com/cfa83f3c/sofa.jpg"
+                alt=""
+              />
+            </div>
+            <span>Custom Sofa</span>
+          </div>
+        </td>
+        <td>$260.00</td>
+        <td>Delivered Jan 25, 2021</td>
+        <td><a href="">View</a></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```
+## Card separated
+```html{.example}
+<div class="wa-stack" style="max-width: 60ch; margin: 0 auto;">
+  <wa-card>
+    <div class="wa-flank:end">
+      <div class="wa-stack">
+        <div class="wa-cluster wa-gap-xs">
+          <wa-icon family="brands" name="amazon"></wa-icon>
+          <span class="wa-heading-s">Amazon</span>
+        </div>
+        <div class="wa-stack wa-gap-xs">
+          <span>Expected Tomorrow</span>
+          <wa-progress-bar value="75" label="delivery progress" style="height: 1rem;"></wa-progress-bar>
+        </div>
+      </div>
+      <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
+        <img src="https://images.unsplash.com/photo-1589810635657-232948472d98?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank:end">
+      <div class="wa-stack">
+        <div class="wa-cluster wa-gap-xs">
+          <wa-icon family="brands" name="amazon"></wa-icon>
+          <span class="wa-heading-s">Amazon</span>
+        </div>
+        <div class="wa-stack wa-gap-xs">
+          <span>Expected Tomorrow</span>
+          <wa-progress-bar value="75" label="delivery progress" style="height: 1rem;"></wa-progress-bar>
+        </div>
+      </div>
+      <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
+        <img src="https://images.unsplash.com/photo-1589810635657-232948472d98?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank:end">
+      <div class="wa-stack">
+        <div class="wa-cluster wa-gap-xs">
+          <wa-icon family="brands" name="amazon"></wa-icon>
+          <span class="wa-heading-s">Amazon</span>
+        </div>
+        <div class="wa-stack wa-gap-xs">
+          <span>Expected Tomorrow</span>
+          <wa-progress-bar value="75" label="delivery progress" style="height: 1rem;"></wa-progress-bar>
+        </div>
+      </div>
+      <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
+        <img src="https://images.unsplash.com/photo-1589810635657-232948472d98?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      </div>
+    </div>
+  </wa-card>
+</div>
+```

docs/docs/patterns/ecommerce/order-summary.md

@@ -0,0 +1,294 @@
+---
+title: Order Summary
+description: 'Give shoppers confidence in their purchases with summaries of everything included in their order.'
+---
+
+## Simple
+```html {.example}
+<div class="wa-stack wa-gap-xl">
+  <wa-callout variant="success">
+    <em>Payment Successful</em>
+    <wa-icon slot="icon" name="circle-check"></wa-icon>
+  </wa-callout>
+  <wa-card>
+    <div class="wa-stack wa-gap-xl">
+      <h2>Thank you for ordering from us!</h2>
+      <p class="wa-caption-l">We're processing your order now. A confirmation email will be sent to you momentarily!</p>
+      <dl class="wa-cluster">
+        <dt>Order #</dt>
+        <dd>49548790-24545</dd>
+      </dl>
+      <wa-divider></wa-divider>
+      <div class="wa-flank:end wa-align-items-start wa-gap-xl" style="--flank-size: 14em">
+        <div class="wa-stack wa-gap-xl">
+          <ul class="wa-stack wa-gap-xl">
+            <li class="wa-flank wa-align-items-start">
+              <div class="wa-frame wa-border-radius-s">
+                <img
+                  src="https://uploads.webawesome.com/vase-1.jpg"
+                  alt=""
+                />
+              </div>
+              <div class="wa-split">
+                <span class="wa-heading-s">Spotted Flower Pot</span>
+                <span>$75.00</span>
+              </div>
+            </li>
+            <wa-divider></wa-divider>
+            <li class="wa-flank wa-align-items-start">
+              <div class="wa-frame wa-border-radius-s">
+                <img
+                  src="https://uploads.webawesome.com/decorative-vase.jpg"
+                  alt=""
+                />
+              </div>
+              <div class="wa-split">
+                <span class="wa-heading-s">Decorative Vase</span>
+                <span>$51.00</span>
+              </div>
+            </li>
+          </ul>
+          <wa-divider></wa-divider>
+          <dl class="wa-stack wap-gap-2xs wa-caption-l">
+            <div class="wa-split">
+              <dt>Subtotal</dt>
+              <dd>$126.00</dd>
+            </div>
+            <div class="wa-split">
+              <dt>Shipping</dt>
+              <dd>$8.00</dd>
+            </div>
+            <div class="wa-split">
+              <dt>Taxes</dt>
+              <dd>$6.40</dd>
+            </div>
+            <div class="wa-split">
+              <dt>Total</dt>
+              <dd>$140.40</dd>
+            </div>
+          </dl>
+        </div>
+        <wa-callout variant="neutral" appearance="filled">
+          <dl class="wa-stack" style="margin: 0">
+            <dt>Shipping Address</dt>
+            <dd>
+              <address class="wa-stack wa-gap-2xs">
+                <span>Donna Noble</span>
+                <span>56 Front Street</span>
+                <span>Las Cruces, NM 56929</span>
+              </address>
+            </dd>
+            <dt>Payment Information</dt>
+            <dd class="wa-flank wa-gap-s">
+                <wa-icon label="Visa" class="wa-body-xl" family="brands" name="cc-visa" style="color: #224DBA;"></wa-icon>
+                <span>Ending with 9065</span>
+            </dd>
+          </dl>
+        </wa-callout>
+      </div>
+    </div>
+  </wa-card>
+  <wa-button size="large" variant="brand" appearance="plain">
+    <wa-icon slot="suffix" name="arrow-right" variant="solid"></wa-icon>
+    Continue Shopping
+  </wa-button>
+</div>
+```
+
+## With Details
+
+```html {.example}
+<div class="wa-stack">
+  <h2>Order Details</h2>
+  <div class="wa-split">
+    <div class="wa-cluster">
+      <span>Order placed <wa-format-date date="2025-02-26T09:00:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date></span>
+      <wa-divider vertical style="height: 2em"></wa-divider>
+      <span>Order # 45646456-4656-4542</span>
+    </div>
+    <wa-button size="small" appearance="outlined" pill>View Invoice</wa-button>
+  </div>
+  <wa-card>
+    <div class="wa-split wa-align-items-start">
+      <div class="wa-stack">
+        <h3 class="wa-heading-s">Shipping Address</h3>
+        <address class="wa-stack wa-gap-xs wa-caption-m">
+          <span>Johnny Blaze</span>
+          <span>200 Park Avenue</span>
+          <span>Manhattan, NY 45789-3412</span>
+          <span>United States</span>
+        </address>
+        <wa-button size="small" appearance="outlined" pill>Change</wa-button>
+      </div>
+      <div class="wa-stack">
+        <h3 class="wa-heading-s">Payment Method</h3>
+        <div class="wa-flank wa-gap-s">
+          <wa-icon class="wa-body-xl" family="brands" name="cc-visa" style="color: #224DBA;"></wa-icon>
+          <span class="wa-caption-m">Visa ending in 9542</span>
+        </div>
+      </div>
+      <div class="wa-stack">
+        <h3 class="wa-heading-s">Order Summary</h3>
+        <dl class="wa-stack wa-gap-xs wa-caption-m">
+          <div class="wa-split">
+            <dt>Item(s) Subtotal</dt>
+            <dd>$39.00</dd>
+          </div>
+          <div class="wa-split">
+            <dt>Shipping & Handling</dt>
+            <dd>$0.00</dd>
+          </div>
+          <div class="wa-split">
+            <dt>Pre-tax Total</dt>
+            <dd>$39.00</dd>
+          </div>
+          <div class="wa-split">
+            <dt>Tax</dt>
+            <dd>$39.00</dd>
+          </div>
+          <wa-divider></wa-divider>
+          <div class="wa-split wa-body-m">
+            <dt>Grand Total</dt>
+            <dd>$39.00</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank:end wa-align-items-start" style="--flank-size: 12rem">
+      <div class="wa-stack">
+        <h3 class="wa-heading-s">Arriving Saturday</h3>
+        <div class="wa-flank wa-align-items-start">
+          <div class="wa-frame wa-border-radius-s">
+            <img
+              src="https://uploads.webawesome.com/sparkling-water.jpg"
+              alt=""
+            />
+          </div>
+          <div class="wa-stack">
+            <a href="" class="wa-caption-m">Mineragua Sparkling Water 12 Count</a>
+            <span class="wa-caption-s">Sold by: <a href="">Mineragua</a></span>
+            <div class="wa-cluster">
+              <span class="wa-heading-s">$39.00</span>
+              <wa-button appearance="outlined" size="small" pill>
+                <wa-icon slot="prefix" name="rotate" variant="solid"></wa-icon>
+                Buy Again
+              </wa-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wa-stack wa-gap-xs">
+        <wa-button size="small" variant="brand" pill>Track Package</wa-button>
+        <wa-button size="small" appearance="outlined" variant="neutral" pill>Cancel Item(s)</wa-button>
+        <wa-button size="small" appearance="outlined" variant="neutral" pill>Ask Question</wa-button>
+        <wa-button size="small" appearance="outlined" variant="neutral" pill>Write Review</wa-button>
+      </div>
+    </div>
+  </wa-card>
+</div>
+```
+
+## With Status & Description
+
+```html {.example}
+<div class="wa-stack wa-gap-xl">
+  <div class="wa-split">
+    <div class="wa-cluster">
+      <h2>Order #7093</h2>
+      <a href="">View Invoice</a>
+    </div>
+    <p class="wa-caption-m">Order placed <wa-format-date date="2025-06-12T09:00:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date></p>
+  </div>
+  <wa-card>
+    <div class="wa-flank wa-align-items-start">
+      <div class="wa-frame wa-border-radius-s">
+        <img
+          src="https://uploads.webawesome.com/vase-1.jpg"
+          alt=""
+        />
+      </div>
+      <div class="wa-stack wa-align-items-start wa-gap-s">
+        <div class="wa-split wa-gap-s">
+          <h3 class="wa-heading-m">Spotted Flower Pot</h3>
+          <span>$75.00</span>
+        </div>
+        <p class="wa-caption-m">Wood fired, salt glaze</p>
+        <wa-tag variant="success" appearance="filled" size="small">Delivered</wa-tag>
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank wa-align-items-start">
+      <div class="wa-frame wa-border-radius-s">
+        <img
+          src="https://uploads.webawesome.com/decorative-vase.jpg"
+          alt=""
+        />
+      </div>
+      <div class="wa-stack wa-align-items-start wa-gap-s">
+        <div class="wa-split wa-gap-s">
+          <h3 class="wa-heading-m">Decorative Vase</h3>
+          <span>$51.00</span>
+        </div>
+        <p class="wa-caption-m">High quality Japanese Kutani-yaki ceramic-ware</p>
+        <wa-tag variant="neutral" appearance="filled" size="small">Shipping Soon</wa-tag>
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank wa-align-items-start">
+      <div class="wa-frame wa-border-radius-s">
+        <img
+          src="https://uploads.webawesome.com/cuong-duyen-ceramic.jpg"
+          alt=""
+        />
+      </div>
+      <div class="wa-stack wa-align-items-start wa-gap-s">
+        <div class="wa-split wa-gap-s">
+          <h3 class="wa-heading-m">Cuong Duyen Ceramic</h3>
+          <span>$48.00</span>
+        </div>
+        <p class="wa-caption-m">Koishiwara-yaki style with crystalline glaze</p>
+        <wa-tag variant="brand" appearance="filled" size="small">Out for Delivery</wa-tag>
+      </div>
+    </div>
+  </wa-card>
+  <wa-divider></wa-divider>
+  <wa-callout variant="neutral" appearance="filled">
+    <div class="wa-grid">
+      <div class="wa-stack">
+        <h3 class="wa-heading-s">Shipping Address</h3>
+        <address class="wa-stack wa-gap-xs wa-caption-m">
+          <span>Donna Noble</span>
+          <span>56 Front Street</span>
+          <span>Las Cruces, NM 56929</span>
+        </address>
+      </div>
+      <div class="wa-stack">
+        <h3 class="wa-heading-s">Order Summary</h3>
+        <dl class="wa-stack wa-gap-xs wa-caption-m">
+          <div class="wa-split">
+            <dt>Item(s) Subtotal</dt>
+            <dd>$174.00</dd>
+          </div>
+          <div class="wa-split">
+            <dt>Shipping & Handling</dt>
+            <dd>$0.00</dd>
+          </div>
+          <div class="wa-split">
+            <dt>Tax</dt>
+            <dd>$17.40</dd>
+          </div>
+          <wa-divider></wa-divider>
+          <div class="wa-split wa-body-m">
+            <dt>Total</dt>
+            <dd>$191.40</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  </wa-callout>
+</div>
+```

docs/docs/patterns/ecommerce/product-list.md

@@ -0,0 +1,182 @@
+---
+title: Product Lists
+description: 'Let shoppers browse and compare products with detailed lists of the products in your store.'
+---
+
+## Simple Grid with Ratings
+
+```html {.example}
+<div class="wa-grid wa-gap-2xl">
+  <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
+    <div class="wa-frame wa-border-radius-m">
+      <img
+        src="https://images.unsplash.com/photo-1633933329864-5d4c4423ad54?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Bunch of fresh basil leaves with purple veins (Photograph by Svitlana)"
+      />
+    </div>
+    <strong>Basil</strong>
+    <wa-rating label="Rating" size="small" readonly value="5"></wa-rating>
+    <span class="wa-caption-m">41 Reviews</span>
+    <strong>$8.59</strong>
+  </a>
+  <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
+    <div class="wa-frame wa-border-radius-m">
+      <img
+        src="https://images.unsplash.com/photo-1662892194342-f95c33cc16e3?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Bunch of cut chamomile blooms (Photograph by Rootnot Creations)"
+      />
+    </div>
+    <strong>Chamomile</strong>
+    <wa-rating label="Rating" size="small" readonly value="3"></wa-rating>
+    <span class="wa-caption-m">17 Reviews</span>
+    <strong>$10.29</strong>
+  </a>
+  <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
+    <div class="wa-frame wa-border-radius-m">
+      <img
+        src="https://images.unsplash.com/photo-1636396279461-f875646332d9?q=80&w=3360&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Canvas bundle of cut lavender blooms (Photograph by volant)"
+      />
+    </div>
+    <strong>Lavender</strong>
+    <wa-rating label="Rating" size="small" readonly value="4"></wa-rating>
+    <span class="wa-caption-m">29 Reviews</span>
+    <strong>$9.99</strong>
+  </a>
+  <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
+    <div class="wa-frame wa-border-radius-m">
+      <img
+        src="https://images.unsplash.com/photo-1501085934018-450c8e615dbc?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Blooming marjoram plant (Photograph by Monika Grabkowska)"
+      />
+    </div>
+    <strong>Marjoram</strong>
+    <wa-rating label="Rating" size="small" readonly value="4"></wa-rating>
+    <span class="wa-caption-m">11 Reviews</span>
+    <strong>$8.59</strong>
+  </a>
+  <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
+    <div class="wa-frame wa-border-radius-m">
+      <img
+        src="https://images.unsplash.com/photo-1688633767797-455f59c98272?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Group of mature oregano plants (Photograph Nikolett Emmert)"
+      />
+    </div>
+    <strong>Oregano</strong>
+    <wa-rating label="Rating" size="small" readonly value="5"></wa-rating>
+    <span class="wa-caption-m">38 Reviews</span>
+    <strong>$8.59</strong>
+  </a>
+  <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
+    <div class="wa-frame wa-border-radius-m">
+      <img
+        src="https://images.unsplash.com/photo-1603109731710-dba41b1096a7?q=80&w=2259&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Cluster of peppermint plants (Photograph by Josefin)"
+      />
+    </div>
+    <strong>Peppermint</strong>
+    <wa-rating label="Rating" size="small" readonly value="5"></wa-rating>
+    <span class="wa-caption-m">26 Reviews</span>
+    <strong>$9.99</strong>
+  </a>
+  <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
+    <div class="wa-frame wa-border-radius-m">
+      <img
+        src="https://images.unsplash.com/photo-1726994803809-0e065bd4b25b?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Mature rosemary stems (Photograph by 360floralflaves)"
+      />
+    </div>
+    <strong>Rosemary</strong>
+    <wa-rating label="Rating" size="small" readonly value="4"></wa-rating>
+    <span class="wa-caption-m">34 Reviews</span>
+    <strong>$8.59</strong>
+  </a>
+  <a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
+    <div class="wa-frame wa-border-radius-m">
+      <img
+        src="https://images.unsplash.com/photo-1659834742696-44573974981b?q=80&w=3542&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Group of sage plants (Photograph by Susie Burleson)"
+      />
+    </div>
+    <strong>Sage</strong>
+    <wa-rating label="Rating" size="small" readonly value="5"></wa-rating>
+    <span class="wa-caption-m">24 Reviews</span>
+    <strong>$9.29</strong>
+  </a>
+</div>
+```
+
+## Even Card Grid with Details
+
+```html {.example}
+<div class="wa-grid" style="--min-column-size: 50ch">
+  <div class="wa-grid">
+    <a href="" class="wa-link-plain">
+      <wa-card>
+        <img slot="image"
+          src="https://images.unsplash.com/photo-1622445272461-c6580cab8755?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="Man in a relaxed fit, white, crew neck t-shirt (Photography by Mediamodifier)"
+        />
+        <div class="wa-stack">
+          <div class="wa-flank:end wa-align-items-start wa-heading-m">
+            <span>Plain Classic Tee</span>
+            <span>$24</span>
+          </div>
+          <p class="wa-caption-m">Keep it casual or dress it up. Soft, 100% cotton with a crew neckline, perfect for any occasion.</p>
+          <em class="wa-caption-m">8 colors</em>
+        </div>
+      </wa-card>
+    </a>
+    <a href="" class="wa-link-plain">
+      <wa-card>
+        <img slot="image"
+          src="https://images.unsplash.com/photo-1554568218-0f1715e72254?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="Woman in a light heather t-shirt printed with sharp black ink (Photograph by Christian Bolt)"
+        />
+        <div class="wa-stack">
+          <div class="wa-flank:end wa-align-items-start wa-heading-m">
+            <span>One-color Graphic Tee</span>
+            <span>$32</span>
+          </div>
+          <p class="wa-caption-m">Your own spin on our classic tee. Hand screen printed for the ultimate accuracy and quality.</p>
+          <em class="wa-caption-m">6 colors</em>
+        </div>
+      </wa-card>
+    </a>
+  </div>
+  <div class="wa-grid">
+    <a href="" class="wa-link-plain">
+      <wa-card>
+        <img slot="image"
+          src="https://images.unsplash.com/photo-1567098260939-5d9cee055592?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="Man in a black t-shirt printed with many-colored gradients (Photograph by Marcel)"
+        />
+        <div class="wa-stack">
+          <div class="wa-flank:end wa-align-items-start wa-heading-m">
+            <span>Multi-color Graphic Tee</span>
+            <span>$36</span>
+          </div>
+          <p class="wa-caption-m">Make a statement. Screen printed with vibrant, quality inks to last wash after wash.</p>
+          <em class="wa-caption-m">4 colors</em>
+        </div>
+      </wa-card>
+    </a>
+    <a href="" class="wa-link-plain">
+      <wa-card>
+        <img slot="image"
+          src="https://images.unsplash.com/photo-1709185727063-c3caae752a64?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="Woman in a black t-shirt with a bright white logo printed on the pocket (Photograph by SASI)"
+        />
+        <div class="wa-stack">
+          <div class="wa-flank:end wa-align-items-start wa-heading-m">
+            <span>Pocket Graphic Tee</span>
+            <span>$29</span>
+          </div>
+          <p class="wa-caption-m">Go classic with a bit of your own flair. Screen printed, eye-catching detail on the pocket.</p>
+          <em class="wa-caption-m">6 colors</em>
+        </div>
+      </wa-card>
+    </a>
+  </div>
+</div>
+```

docs/docs/patterns/ecommerce/product-overview.md

@@ -0,0 +1,429 @@
+---
+title: Product Overview
+description: 'Showcase your products with overviews including images, ratings, features, options, and more.'
+---
+
+## Split with Image
+
+```html {.example}
+<div class="wa-grid wa-gap-2xl">
+  <div class="wa-stack wa-gap-2xl">
+    <h2>San Ignacio Pache</h2>
+    <p>A smooth, balanced Arabica varietal, grown and roasted on the Guerrero family's farm. Rich caramel and malt flavors blend with bright citrus for a complex brew suitable for drip, pour over, espresso, or however you take your coffee.</p>
+    <div class="wa-stack">
+      <wa-select label="Bag Size" value="12oz">
+        <wa-option value="12oz">12 oz &ndash; $19.95</wa-option>
+        <wa-option value="3lb">3 lb &ndash; $72.00</wa-option>
+        <wa-option value="5lb">5 lb &ndash; $99.75</wa-option>
+      </wa-select>
+      <wa-select label="Bean Type" value="whole">
+        <wa-option value="whole">Whole</wa-option>
+        <wa-option value="drip">Drip Grind</wa-option>
+        <wa-option value="espresso">Espresso Grind</wa-option>
+      </wa-select>
+    </div>
+    <div class="wa-stack">
+      <div class="wa-flank">
+        <wa-input type="number" aria-label="Quantity" value="1" min="1" style="max-width: 8ch"></wa-input>
+        <wa-button variant="brand">
+          <wa-icon slot="prefix" name="basket-shopping"></wa-icon>
+          Add to Basket
+        </wa-button>
+      </div>
+      <div class="wa-flank wa-caption-m">
+        <wa-icon name="truck"></wa-icon>
+        <span>Free shipping on orders over $60</span>
+      </div>
+    </div>
+    <dl class="wa-grid">
+      <div class="wa-flank">
+        <wa-avatar>
+          <wa-icon slot="icon" name="coffee-bean"></wa-icon>
+        </wa-avatar>
+        <div class="wa-stack wa-gap-0">
+          <dt>Roast</dt>
+          <dd>Medium</dd>
+        </div>
+      </div>
+      <div class="wa-flank">
+        <wa-avatar>
+          <wa-icon slot="icon" name="earth-americas"></wa-icon>
+        </wa-avatar>
+        <div class="wa-stack wa-gap-0">
+          <dt>Origin</dt>
+          <dd>San Ignacio, Peru</dd>
+        </div>
+      </div>
+      <div class="wa-flank">
+        <wa-avatar>
+          <wa-icon slot="icon" name="sun-haze"></wa-icon>
+        </wa-avatar>
+        <div class="wa-stack wa-gap-0">
+          <dt>Process</dt>
+          <dd>Washed</dd>
+        </div>
+      </div>
+      <div class="wa-flank">
+        <wa-avatar>
+          <wa-icon slot="icon" name="mug-hot"></wa-icon>
+        </wa-avatar>
+        <div class="wa-stack wa-gap-0">
+          <dt>Tasting Notes</dt>
+          <dd>Caramel, malt, orange</dd>
+        </div>
+      </div>
+    </dl>
+  </div>
+  <div class="wa-frame wa-border-radius-m">
+    <img
+      src="https://images.unsplash.com/photo-1600396538702-d234dbb79139?q=80&w=3833&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      alt="Whole roasted coffee beans (Photograph by Jocelyn Morales)"
+    />
+  </div>
+</div>
+```
+
+## With Image Grid
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl">
+  <wa-breadcrumb>
+    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Women's</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
+  </wa-breadcrumb>
+  <div class="wa-grid wa-gap-xs" style="--min-column-size: 10ch">
+    <div class="wa-frame" style="height: 100%; width: 100%">
+      <img class="wa-border-radius-s"
+        src="https://images.unsplash.com/photo-1614792568992-ded1c487c1dd?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="(Photograph by Patrick Perkins)"
+      />
+    </div>
+    <div class="wa-grid wa-gap-xs">
+      <div class="wa-frame" style="aspect-ratio: 3 / 2">
+        <img class="wa-border-radius-s"
+          src="https://images.unsplash.com/photo-1614725078749-29c421fd0e51?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="(Photograph by Patrick Perkins)"
+        />
+      </div>
+      <div class="wa-frame" style="aspect-ratio: 3 / 2">
+        <img class="wa-border-radius-s"
+          src="https://images.unsplash.com/photo-1614725808713-e6bbe418fc5d?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="(Photograph by Patrick Perkins)"
+        />
+      </div>
+    </div>
+    <div class="wa-frame" style="height: 100%; width: 100%">
+      <img class="wa-border-radius-s"
+        src="https://images.unsplash.com/photo-1614725078379-9d1330a08c95?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="(Photograph by Patrick Perkins)"
+      />
+    </div>
+  </div>
+  <div class="wa-grid wa-gap-xl" style="--min-column-size: 30ch">
+    <h2 class="wa-heading-l">Cropped Fitted Tank Top</h2>
+    <span class="wa-body-xl">$59</span>
+  </div>
+  <div class="wa-grid wa-gap-xl" style="--min-column-size: 30ch">
+    <div class="wa-stack wa-gap-xl">
+      <div class="wa-cluster">
+        <wa-rating label="Rating" readonly value="3.5"></wa-rating>
+        <a href="">117 Reviews</a>
+      </div>
+      <p>Made with a breathable, stretchy fabric blend for unparalleled comfort and flattering style. Pairs perfectly with your favorite high-waisted jeans for lazy summer weekends or lively nights out.</p>
+      <div class="wa-stack wa-gap-xs">
+        <h3 class="wa-heading-xs">Good to Know</h3>
+        <p class="wa-body-xs">95% cotton, 5% elastane. Our tops are pre-shrunk to ensure a consistent fit with no surprises. Machine wash cold. Tumble dry low.</p>
+      </div>
+    </div>
+    <div class="wa-stack">
+      <wa-radio-group label="Color" name="color" value="black" orientation="horizontal">
+        <wa-radio-button id="radio-black" value="black">
+          <wa-icon name="square" label="Black" style="color: black;"></wa-icon>
+          <wa-tooltip for="radio-black">Black</wa-tooltip>
+        </wa-radio-button>
+        <wa-radio-button id="radio-gray" value="gray">
+          <wa-icon name="square" label="Gray" style="color: gray;"></wa-icon>
+          <wa-tooltip for="radio-gray">Gray</wa-tooltip>
+        </wa-radio-button>
+        <wa-radio-button id="radio-indigo" value="indigo">
+          <wa-icon name="square" label="Indigo" style="color: indigo;"></wa-icon>
+          <wa-tooltip for="radio-indigo">Indigo</wa-tooltip>
+        </wa-radio-button>
+        <wa-radio-button id="radio-olive" value="olive">
+          <wa-icon name="square" label="Olive" style="color: olive;"></wa-icon>
+          <wa-tooltip for="radio-olive">Olive</wa-tooltip>
+        </wa-radio-button>
+      </wa-radio-group>
+      <wa-radio-group label="Size" name="size" value="s" orientation="horizontal">
+        <wa-radio-button value="xs">XS</wa-radio-button>
+        <wa-radio-button value="s">S</wa-radio-button>
+        <wa-radio-button value="m">M</wa-radio-button>
+        <wa-radio-button value="l">L</wa-radio-button>
+        <wa-radio-button value="xl">XL</wa-radio-button>
+      </wa-radio-group>
+      <wa-button variant="brand">
+        <wa-icon slot="prefix" name="cart-plus" variant="solid"></wa-icon>
+        Add to Cart
+      </wa-button>
+    </div>
+  </div>
+</div>
+```
+
+## With Tiered Images
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl">
+  <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="wa-grid wa-gap-2xl" style="--min-column-size: 35ch">
+    <div class="wa-stack wa-gap-xs">
+      <img class="wa-border-radius-s"
+        src="https://images.unsplash.com/photo-1630643583573-c68623718072?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="(Photograph by Gervyn Louis)"
+      />
+      <div class="wa-grid wa-gap-xs" style="--min-column-size: 0ch">
+        <img class="wa-border-radius-s"
+          src="https://images.unsplash.com/photo-1571666274590-f8cc87006500?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="(Photograph by Gervyn Louis)"
+        />
+        <img class="wa-border-radius-s"
+          src="https://images.unsplash.com/photo-1630643591760-a6ed60ef499f?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="(Photograph by Gervyn Louis)"
+        />
+      </div>
+    </div>
+    <div class="wa-stack">
+      <div class="wa-split">
+        <h2 class="wa-heading-l">Graphic Cutoff Tee</h2>
+        <span class="wa-body-xl">$65</span>
+      </div>
+      <div class="wa-split">
+        <div class="wa-cluster">
+          <wa-rating label="Rating" readonly value="4.2"></wa-rating>
+          <span>4.2</span>
+        </div>
+        <a href="#">144 Reviews</a>
+      </div>
+      <wa-radio-group label="Color" name="color" value="black" orientation="horizontal">
+        <wa-radio-button value="black">
+          <wa-icon slot="prefix" name="shirt" style="color: black;"></wa-icon>
+          Vintage Black
+        </wa-radio-button>
+        <wa-radio-button value="gray">
+          <wa-icon slot="prefix" name="shirt" style="color: gray;"></wa-icon>
+          Faded Gray
+        </wa-radio-button>
+      </wa-radio-group>
+      <wa-radio-group label="Size" name="size" value="s" orientation="horizontal">
+        <wa-radio-button value="xs">XS</wa-radio-button>
+        <wa-radio-button value="s">S</wa-radio-button>
+        <wa-radio-button value="m">M</wa-radio-button>
+        <wa-radio-button value="l">L</wa-radio-button>
+        <wa-radio-button value="xl">XL</wa-radio-button>
+      </wa-radio-group>
+      <wa-button variant="brand">
+        <wa-icon slot="prefix" name="bag-shopping" variant="solid"></wa-icon>
+        Add to Bag
+      </wa-button>
+      <wa-divider></wa-divider>
+      <h3 class="wa-heading-s">Description</h3>
+      <p>Stay cool, <em>slay</em> cool. Train hard and recover in style with this ultra-breathable cutoff tee. Made from 100% organic, quick-drying cotton to keep the air flowing whether you're lifting, sprinting, or crushing HIIT sessions.</p>
+      <wa-divider></wa-divider>
+      <h3 class="wa-heading-s">Highlights</h3>
+      <div class="wa-grid">
+        <wa-card class="wa-span-grid">
+          <div class="wa-stack">
+            <wa-icon name="hand-holding-heart"></wa-icon>
+            <h4 class="wa-heading-s">People and Planet First</h4>
+            <p class="wa-caption-m">Ethical production, fair wages, and sustainable materials empower every part of our supply chain.</p>
+          </div>
+        </wa-card>
+        <wa-card>
+          <div class="wa-stack">
+            <wa-icon name="earth-americas"></wa-icon>
+            <h4 class="wa-heading-s">International Shipping</h4>
+            <p class="wa-caption-m">Wherever you are, your order will meet you there.</p>
+          </div>
+        </wa-card>
+        <wa-card>
+          <div class="wa-stack">
+            <wa-icon name="arrow-right-arrow-left"></wa-icon>
+            <h4 class="wa-heading-s">90-day Returns</h4>
+            <p class="wa-caption-m">Not happy? Return your item and get a full refund.</p>
+          </div>
+        </wa-card>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## With Carousel and Collapsible Details
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl">
+  <wa-carousel pagination navigation loop style="--aspect-ratio: 3 / 2;">
+    <wa-carousel-item>
+      <img
+        src="https://images.unsplash.com/photo-1601379327928-bedfaf9da2d0?q=80&w=3456&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Four folded and stacked knit sweaters in three colors (Photograph by Tijana Drndarski)"
+      />
+    </wa-carousel-item>
+    <wa-carousel-item>
+      <img
+        src="https://images.unsplash.com/photo-1519804270019-39e929a7afb5?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Knit sweater in sand color full view, showing waffle knit pattern, relaxed fit, and crew neckline (Photograph by Jonathan Zerger)"
+      />
+    </wa-carousel-item>
+    <wa-carousel-item>
+      <img
+        src="https://images.unsplash.com/photo-1519805614447-6f49142e6697?q=80&w=3633&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Knit sweater in sand color shoulder detail, showing relaxed fit on broader shoulders (Photograph by Jonathan Zerger)"
+      />
+    </wa-carousel-item>
+    <wa-carousel-item>
+      <img
+        src="https://images.unsplash.com/photo-1522230130022-498e355165c5?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Knit sweater in sand color sleeve detail, showing loose fit around the arms (Photograph by Jonathan Zerger)"
+      />
+    </wa-carousel-item>
+  </wa-carousel>
+  <div class="wa-grid wa-gap-2xl" style="--min-column-size: 30ch;">
+    <div class="wa-stack">
+      <div class="wa-split">
+        <h3>Pullover Sweater</h3>
+        <span class="wa-body-xl">$140</span>
+      </div>
+      <wa-rating label="Rating" precision="0.5" value="4.5" readonly></wa-rating>
+      <p>Wrap yourself in warmth and effortless style with this wool knit Pullover Sweater. Designed for unparalleled comfort. The relaxed fit and classic crew neckline make it a versatile staple for layering or wearing solo.</p>
+      <wa-radio-group label="Color" name="color" value="sand" orientation="horizontal">
+        <wa-radio-button value="sand">
+          <wa-icon slot="prefix" name="circle" style="color: burlywood;"></wa-icon>
+          Sand
+        </wa-radio-button>
+        <wa-radio-button value="shale">
+          <wa-icon slot="prefix" name="circle" style="color: silver;"></wa-icon>
+          Shale
+        </wa-radio-button>
+        <wa-radio-button value="slate">
+          <wa-icon slot="prefix" name="circle" style="color: dimgray;"></wa-icon>
+          Slate
+        </wa-radio-button>
+      </wa-radio-group>
+      <wa-radio-group label="Size" name="size" value="s" orientation="horizontal">
+        <wa-radio-button value="xs">XS</wa-radio-button>
+        <wa-radio-button value="s">S</wa-radio-button>
+        <wa-radio-button value="m">M</wa-radio-button>
+        <wa-radio-button value="l">L</wa-radio-button>
+        <wa-radio-button value="xl">XL</wa-radio-button>
+      </wa-radio-group>
+      <wa-button variant="brand">Add to Cart</wa-button>
+    </div>
+    <div class="wa-stack">
+      <wa-details summary="Size and Fit" open>
+        <ul class="wa-body-s">
+          <li>True to size with a relaxed fit</li>
+          <li>Fits all shoulder shapes, broad to narrow</li>
+          <li>No pinching in the arms or irritating seams</li>
+          <li>Ribbed cuffs and hem</li>
+        </ul>
+      </wa-details>
+      <wa-details summary="Materials and Care">
+        <ul class="wa-body-s">
+          <li>Durable Merino and Yak wool blend</li>
+          <li>Machine wash cold on delicate cycle</li>
+          <li>Lay flat to dry</li>
+          <li>Made with <wa-icon name="heart" label="love"></wa-icon> in Bentonville, USA</li>
+        </ul>
+      </wa-details>
+      <wa-details summary="Shipping">
+        <ul class="wa-body-s">
+          <li>Flat $9 shipping free for orders under $200.</li>
+          <li>Free shipping on orders over $200, anywhere in the world.</li>
+        </ul>
+      </wa-details>
+    </div>
+  </div>
+</div>
+```
+
+
+## With Tabs
+
+```html {.example}
+<div class="wa-flank:end wa-align-items-start wa-gap-2xl" style="--flank-size: 30ch">
+  <div class="wa-stack">
+    <img class="wa-border-radius-l"
+      src="https://img.fortawesome.com/cfa83f3c/icon-grid-wallpaper.png"
+      alt="Sample of 48 line-style icons"
+    />
+    <wa-tab-group>
+      <wa-tab panel="license">License</wa-tab>
+      <wa-tab panel="faq">FAQ</wa-tab>
+      <wa-tab-panel name="license">
+        <p class="wa-body-s">Your purchase includes a perpetual Font Awesome Pro License to use Classic Light icons on unlimited projects. <a href="">Read the full license terms.</a></p>
+      </wa-tab-panel>
+      <wa-tab-panel name="faq">
+        <dl class="wa-stack wa-body-s">
+          <dt>Do I need to renew my subscription to receive fixes?</dt>
+          <dd>We split up Font Awesome releases into regular updates and bug-fix updates. With a Font Awesome Pro plan that has a perpetual license, you'll always be entitled to bug-fix updates for your last version, even after your subscription has expired.</dd>
+          <dt>Can I use Font Awesome Pro in themes, plug-ins, or open source projects?</dt>
+          <dd>For themes and open source projects, right now it's best to just use Font Awesome Free. We are working a better solution, so feel free to get in touch if you have thoughts.</dd>
+          <dt>Do you offer enterprise licenses for Font Awesome Pro?</dt>
+          <dd>We don't currently offer Enterprise-level licenses, but we may do so in the future. Get in touch if interested.</dd>
+        </dl>
+      </wa-tab-panel>
+    </wa-tab-group>
+  </div>
+  <div class="wa-stack wa-gap-l">
+    <wa-badge appearance="filled">Sale</wa-badge>
+    <h2>Icon Pack: Classic Light</h2>
+    <p class="wa-body-l">Easy, readable icons with a lighter touch.</p>
+    <div class="wa-cluster wa-gap-xs wa-body-l">
+      <s>$60</s>
+      <strong>$49</strong>
+    </div>
+    <wa-button variant="brand" size="large">
+      <wa-icon slot="prefix" name="arrow-down-to-line" variant="solid"></wa-icon>
+      Get Icons
+    </wa-button>
+    <wa-divider></wa-divider>
+    <h3 class="wa-heading-m">What's in the Pack</h3>
+      <ul class="wa-stack wa-gap-xs">
+        <li class="wa-flank">
+          <wa-icon name="badge-check"></wa-icon>
+          <span>3,323 icons</span>
+        </li>
+        <li class="wa-flank">
+          <wa-icon name="badge-check"></wa-icon>
+          <span>Pre-bundled Font Awesome kit</span>
+        </li>
+        <li class="wa-flank">
+          <wa-icon name="badge-check"></wa-icon>
+          <span>Ligature-based desktop font files</span>
+        </li>
+        <li class="wa-flank">
+          <wa-icon name="badge-check"></wa-icon>
+          <span>Individual SVGs + SVG sprites</span>
+        </li>
+        <li class="wa-flank">
+          <wa-icon name="badge-check"></wa-icon>
+          <span>Web fonts + SVG framework</span>
+        </li>
+        <li class="wa-flank">
+          <wa-icon name="badge-check"></wa-icon>
+          <span>SCSS/LESS CSS preprocessor files</span>
+        </li>
+        <li class="wa-flank">
+          <wa-icon name="badge-check"></wa-icon>
+          <span>Perpetual Pro license</span>
+        </li>
+      </ul>
+  </div>
+</div>
+```

docs/docs/patterns/ecommerce/product-preview.md

@@ -0,0 +1,160 @@
+---
+title: Product Preview
+description: 'Give shoppers a quick look at your products as they browse with modal previews.'
+icon: preview
+---
+
+## With Product Options
+
+```html {.example}
+<wa-card with-header>
+  <div class="wa-split" slot="header">
+    <h3 class="wa-heading-l">Stan Smith® Camo Tongue Tee</h3>
+    <wa-icon-button name="close" label="Close Preview"></wa-icon-button>
+  </div>
+  <div class="wa-grid wa-gap-xl">
+    <div class="wa-frame wa-border-radius-l" style="aspect-ratio: auto">
+      <img
+        src="https://images.unsplash.com/photo-1660997351262-6c31d8a35b6c?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Stan Smith graphic crew-neck tee in honeydew color"
+      />
+    </div>
+    <div class="wa-split:column wa-align-items-stretch wa-gap-xl">
+      <div class="wa-stack wa-gap-xl">
+        <div class="wa-cluster">
+        <span class="wa-heading-2xl">$32</span>
+          <wa-divider vertical style="height: 2em"></wa-divider>
+          <wa-rating label="Rating" value="3.75" readonly></wa-rating>
+          <a href="" class="wa-caption-m">36 Reviews</a>
+        </div>
+        <p>An ode to the “Sneaker that go with everything” …even this tee.</p>
+        <wa-divider></wa-divider>
+        <div class="wa-stack wa-gap-s">
+          <h4 class="wa-heading-s">Categories</h4>
+          <div class="wa-cluster wa-gap-2xs">
+            <a href=""><wa-tag appearance="outlined" size="small" pill>Men's</wa-tag></a>
+            <a href=""><wa-tag appearance="outlined" size="small" pill>Sneakers</wa-tag></a>
+            <a href=""><wa-tag appearance="outlined" size="small" pill>Tees</wa-tag></a>
+            <a href=""><wa-tag appearance="outlined" size="small" pill>Lifestyle</wa-tag></a>
+            <a href=""><wa-tag appearance="outlined" size="small" pill>Fashion</wa-tag></a>
+            <a href=""><wa-tag appearance="outlined" size="small" pill>Casual</wa-tag></a>
+            <a href=""><wa-tag appearance="outlined" size="small" pill>Stan Smith</wa-tag></a>
+            <a href=""><wa-tag appearance="outlined" size="small" pill>Tennis</wa-tag></a>
+            <a href=""><wa-tag appearance="outlined" size="small" pill>Sports</wa-tag></a>
+          </div>
+        </div>
+        <wa-divider></wa-divider>
+        <div class="wa-stack wa-gap-s">
+          <wa-select label="Color" value="honeydew">
+            <wa-option value="hotpink">
+              <wa-icon slot="prefix" name="circle" style="color: hotpink;"></wa-icon>
+              Hot Pink
+            </wa-option>
+            <wa-option value="honeydew">
+              <wa-icon slot="prefix" name="circle" style="color: honeydew;"></wa-icon>
+              Honeydew
+            </wa-option>
+            <wa-option value="coral">
+              <wa-icon slot="prefix" name="circle" style="color: lightcoral;"></wa-icon>
+              Coral
+            </wa-option>
+            <wa-option value="wheat">
+              <wa-icon slot="prefix" name="circle" style="color: wheat;"></wa-icon>
+              Wheat
+            </wa-option>
+            <wa-option value="lilac">
+              <wa-icon slot="prefix" name="circle" style="color: #C8A2C8;"></wa-icon>
+              Lilac
+            </wa-option>
+            <wa-option value="burnt-orange">
+              <wa-icon slot="prefix" name="circle" style="color: #FF5733"></wa-icon>
+              Burnt Orange
+            </wa-option>
+          </wa-select>
+          <wa-select label="Size" value="large">
+            <wa-option value="small">Small</wa-option>
+            <wa-option value="medium">Medium</wa-option>
+            <wa-option value="large">Large</wa-option>
+            <wa-option value="xl">XL</wa-option>
+            <wa-option value="xxl">XXL</wa-option>
+          </wa-select>
+        </div>
+      </div>
+      <wa-button variant="brand">
+        Add to Cart
+        <wa-icon slot="suffix" name="cart-shopping" variant="solid"></wa-icon>
+      </wa-button>
+    </div>
+  </div>
+</wa-card>
+```
+
+## With Description & Details
+
+```html{.example}
+<wa-card>
+  <div class="wa-split" slot="header">
+    <h3 class="wa-heading-l">Champion® Crossbody Bag</h3>
+    <wa-icon-button name="close" label="Close Preview"></wa-icon-button>
+  </div>
+  <div class="wa-grid wa-gap-xl">
+    <div class="wa-frame wa-border-radius-l" style="aspect-ratio: auto">
+      <img
+        src="https://images.unsplash.com/photo-1643467358005-899641cab7b5?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Black weatherproof crossbody bag with two large zipper pockets"
+      />
+    </div>
+    <div class="wa-split:column wa-align-items-stretch wa-gap-xl">
+      <div class="wa-stack wa-gap-xl">
+        <div class="wa-split wa-align-items-start">
+          <span class="wa-heading-2xl">$40</span>
+          <wa-icon-button id="favorite" label="Favorite" name="heart" variant="regular"></wa-icon-button>
+          <wa-tooltip for="favorite">Add to Favorites</wa-tooltip>
+        </div>
+        <div class="wa-split">
+          <div class="wa-cluster wa-gap-xs">
+            <span>3.9</span>
+            <wa-rating value="3.9" readonly></wa-rating>
+          </div>
+          <a href="">See 512 Reviews</a>
+        </div>
+        <wa-divider></wa-divider>
+        <wa-callout size="small">
+          <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+          You purchased this item on <wa-format-date date="2023-02-20T09:00:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date>
+        </wa-callout>
+        <div class="wa-gap-xs wa-stack">
+          <h4 class="wa-heading-m">About</h4>
+          <p class="wa-body-s">The Champion® Crossbody Bag is crafted for the trendsetter. Its sleek silhouette, paired with a tonal branded adjustable sling strap, ensures you look effortlessly cool no matter where you go.</p>
+        </div>
+        <wa-divider></wa-divider>
+        <div class="wa-gap-xs wa-stack">
+          <h4 class="wa-heading-m">Details</h4>
+          <dl class="wa-grid" style="--min-column-size: 15ch">
+            <div class="wa-gap-2xs wa-stack">
+              <dt class="wa-body-s">Care Instructions</dt>
+              <dd class="wa-caption-m">Hand Wash Only</dd>
+            </div>
+            <div class="wa-gap-2xs wa-stack">
+              <dt class="wa-body-s">Origin</dt>
+              <dd class="wa-caption-m">Imported</dd>
+            </div>
+            <div class="wa-gap-2xs wa-stack">
+              <dt class="wa-body-s">Country of Origin</dt>
+              <dd class="wa-caption-m">China</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+      <div class="wa-flank:end wa-align-items-end">
+        <wa-button variant="brand" size="medium">
+          <wa-icon slot="suffix" name="cart-shopping" variant="solid"></wa-icon>Add to Cart
+        </wa-button>
+        <wa-button appearance="outlined" size="medium">
+          <wa-icon slot="suffix" name="arrow-right" variant="solid"></wa-icon>View Full Details
+        </wa-button>
+      </div>
+    </div>
+  </div>
+</wa-card>
+```

docs/docs/patterns/ecommerce/review.md

@@ -0,0 +1,211 @@
+---
+title: Product Reviews
+description: 'Help shoppers make informed decisions with ratings, reviews, and testimonials from your customers.'
+---
+## Multi column
+
+```html{.example}
+<div style="max-width: 960px; margin: 0 auto;">
+  <span class="wa-heading-m">Recent Reviews</span>
+  <wa-divider></wa-divider>
+  <div class="wa-flank wa-gap-s" style="--flank-size: 20%">
+    <div class="wa-stack wa-gap-2xs">
+      <span class="wa-heading-s">Viktor Vaughn</span>
+      <span class="wa-caption-m"><em>September 23rd, 2023</em></span>
+    </div>
+    <div class="wa-flank">
+      <wa-rating label="Rating" readonly value="5"></wa-rating>
+    <div class="wa-stack wa-gap-2xs">
+      <span class="wa-heading-s">Rating Title</span>
+      <p class="wa-caption-m">Best treadmill I've ever owned! It has a sleek design, and the features are top-notch. I use it daily for my cardio workouts, and the motor is powerful enough to keep up with my running. It’s easy to adjust the speed and incline, and the display is clear and simple to read. Worth every penny!</p>
+    </div>
+    </div>
+  </div>
+  <wa-divider></wa-divider>
+  <div class="wa-flank wa-gap-s" style="--flank-size: 20%">
+    <div class="wa-stack wa-gap-2xs">
+      <span class="wa-heading-s">Ben Grimm</span>
+      <span class="wa-caption-m"><em>May 5th, 2023</em></span>
+    </div>
+    <div class="wa-flank">
+      <wa-rating label="Rating" readonly value="4"></wa-rating>
+    <div class="wa-stack wa-gap-2xs">
+      <span class="wa-heading-s">Rating Title</span>
+      <p class="wa-caption-m">Decent treadmill for the price, but I feel like the belt could be a little wider for comfort. The cushioning is good, but sometimes I experience a slight wobble when running at high speeds. For casual walking, it's fine, but I’m not sure it’s built for intense runners.</p>
+    </div>
+    </div>
+  </div>
+  <wa-divider></wa-divider>
+  <div class="wa-flank wa-gap-s" style="--flank-size: 20%">
+    <div class="wa-stack wa-gap-2xs">
+      <span class="wa-heading-s">Johnny Storm</span>
+      <span class="wa-caption-m"><em>March 3rd, 2023</em></span>
+    </div>
+    <div class="wa-flank">
+      <wa-rating label="Rating" readonly value="4"></wa-rating>
+    <div class="wa-stack wa-gap-2xs">
+      <span class="wa-heading-s">Rating Title</span>
+      <p class="wa-caption-m">This treadmill has been a great addition to my home gym. It's sturdy, easy to use, and I like that it tracks my steps and heart rate. The only downside is that it's a bit bulky, so I had to rearrange my space to make room for it. Overall, I'm happy with the performance and would recommend it.</p>
+    </div>
+    </div>
+  </div>
+  <wa-divider></wa-divider>
+  <div class="wa-flank wa-gap-s" style="--flank-size: 20%">
+    <div class="wa-stack wa-gap-2xs">
+      <span class="wa-heading-s">Sue Storm</span>
+      <span class="wa-caption-m"><em>February 26th, 2023</em></span>
+    </div>
+    <div class="wa-flank">
+      <wa-rating label="Rating" readonly value="4"></wa-rating>
+    <div class="wa-stack wa-gap-2xs">
+      <span class="wa-heading-s">Rating Title</span>
+      <p class="wa-caption-m">I absolutely love my new treadmill! It’s perfect for my daily workouts. The setup was quick, and it’s so quiet that I can use it while watching TV without any interruptions. The different incline levels really help mix up my routine, and the built-in programs keep things interesting. Highly recommend for anyone looking to stay fit at home!</p>
+    </div>
+    </div>
+  </div>
+</div>
+```
+## With Ratings Distribution
+
+```html {.example}
+<div style="max-width: 960px; margin: 0 auto;">
+  <div class="wa-align-items-start wa-flank wa-gap-2xl">
+    <div class="wa-gap-s wa-stack">
+      <span class="wa-heading-m">Customer Reviews</span>
+      <div class="wa-stack wa-gap-xs"><wa-rating label="Rating" precision="0.5" value="4.6" size="small"></wa-rating> <span class="wa-caption-m">Based on 1624 reviews</span></div>
+      <div class="wa-stack">
+        <span class="wa-cluster wa-gap-2xs">
+          <span>5</span>
+          <wa-icon name="star" style="font-size: 12px;"></wa-icon>
+          <wa-progress-bar value="63" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
+          <span>63%</span>
+        </span>
+        <span class="wa-cluster wa-gap-2xs">
+          <span>4</span>
+          <wa-icon name="star" style="font-size: 12px;"></wa-icon>
+          <wa-progress-bar value="17" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
+          <span>17%</span>
+        </span>
+        <span class="wa-cluster wa-gap-2xs">
+          <span>3</span>
+          <wa-icon name="star" style="font-size: 12px;"></wa-icon>
+          <wa-progress-bar value="15" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
+          <span>15%</span>
+        </span>
+        <span class="wa-cluster wa-gap-2xs">
+          <span>2</span>
+          <wa-icon name="star" style="font-size: 12px;"></wa-icon>
+          <wa-progress-bar value="3" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
+          <span>3%</span>
+        </span>
+        <span class="wa-cluster wa-gap-2xs">
+          <span>1</span>
+          <wa-icon name="star" style="font-size: 12px;"></wa-icon>
+          <wa-progress-bar value="2" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
+          <span>2%</span>
+        </span>
+      </div>
+    </div>
+    <div>
+      <div>
+        <div class="wa-flank">
+          <wa-avatar image="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <div class="wa-stack wa-gap-2xs">
+            <span class="wa-heading-s">Emily Selman</span>
+            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
+          </div>
+        </div>
+        <p class="wa-caption-l"><em>This is the bag of my dreams. I took it on my last vacation and was able to fit an absurd amount of snacks for the many long and hungry flights.</em></p>
+      </div>
+      <wa-divider></wa-divider>
+      <div>
+        <div class="wa-flank">
+          <wa-avatar image="https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <div class="wa-stack wa-gap-2xs">
+            <span class="wa-heading-s">Emily Selman</span>
+            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
+          </div>
+        </div>
+        <p class="wa-caption-l"><em>This is the bag of my dreams. I took it on my last vacation and was able to fit an absurd amount of snacks for the many long and hungry flights.</em></p>
+      </div>
+      <wa-divider></wa-divider>
+      <div>
+        <div class="wa-flank">
+          <wa-avatar image="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=2561&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <div class="wa-stack wa-gap-2xs">
+            <span class="wa-heading-s">Emily Selman</span>
+            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
+          </div>
+        </div>
+        <p class="wa-caption-l"><em>This is the bag of my dreams. I took it on my last vacation and was able to fit an absurd amount of snacks for the many long and hungry flights.</em></p>
+      </div>
+      <wa-divider></wa-divider>
+      <div>
+        <div class="wa-flank">
+          <wa-avatar image="https://images.unsplash.com/photo-1566492031773-4f4e44671857?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+          <div class="wa-stack wa-gap-2xs">
+            <span class="wa-heading-s">Emily Selman</span>
+            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
+          </div>
+        </div>
+        <p class="wa-caption-l"><em>This is the bag of my dreams. I took it on my last vacation and was able to fit an absurd amount of snacks for the many long and hungry flights.</em></p>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Two Column
+
+```html{.example}
+<div class="wa-stack" style="max-width: 960px; margin: 0 auto;">
+  <div class="wa-flank wa-align-items-center">
+    <div class="wa-stack wa-align-items-center wa-gap-xs">
+      <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1607746882042-944635dfe10e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+      <p>Ripley</p>
+      <div>
+      <wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
+      <wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
+    </div>
+    </div>
+    <div>
+      <wa-rating label="Rating" precision="0.5" value="5" readonly></wa-rating>
+      <p>I recently purchased the Modern Sofa Couch, and I couldn't be happier with my decision! The process from ordering to delivery was smooth and hassle-free</p>
+    </div>
+
+  </div>
+  <wa-divider></wa-divider>
+  <div class="wa-flank wa-align-items-center">
+    <div class="wa-stack wa-align-items-center wa-gap-xs">
+      <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+      <p>Kane</p>
+      <div>
+      <wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
+      <wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
+    </div>
+    </div>
+    <div>
+      <wa-rating label="Rating" precision="0.5" value="3.4" readonly></wa-rating>
+      <p>The cushions are soft yet supportive, and the sectional layout gives plenty of space to stretch out. It’s perfect for movie nights or just lounging with a good book.</p>
+    </div>
+
+  </div>
+  <wa-divider></wa-divider>
+  <div class="wa-flank wa-align-items-center">
+    <div class="wa-stack wa-align-items-center wa-gap-xs">
+      <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1728577740843-5f29c7586afe?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
+      <p>Parker</p>
+      <div>
+      <wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
+      <wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
+    </div>
+    </div>
+    <div>
+      <wa-rating label="Rating" precision="0.5" value="3.8" readonly></wa-rating>
+      <p>The leather is high quality, but it’s a little firmer than I thought. That said, after sitting on it for a while, it does soften up and feels more comfortable. It’s perfect if you’re looking for a more structured seating experience.</p>
+    </div>
+
+  </div>
+  <wa-divider></wa-divider>
+</div>
+```

docs/docs/patterns/ecommerce/shopping-cart.md

@@ -0,0 +1,277 @@
+---
+title: Shopping Cart
+description: 'Give shoppers an overview of selected items with shopping carts that let them edit items and proceed to checkout.'
+---
+
+## Two Columns with Summary Card
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl">
+  <h2>Shopping Cart</h2>
+  <div class="wa-grid wa-align-items-start wa-gap-2xl">
+    <div class="wa-stack wa-gap-xl">
+      <article class="wa-flank wa-gap-xl" style="--flank-size: 8rem">
+        <div class="wa-frame wa-border-radius-m">
+          <img
+            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=""
+          />
+        </div>
+        <div class="wa-flank:end wa-align-items-baseline">
+          <div class="wa-stack wa-gap-xs">
+            <h3 class="wa-heading-s">Classic Tee</h3>
+            <span class="wa-caption-m">Sage Green</span>
+            <span class="wa-caption-m">Large</span>
+            <span>$20.00</span>
+          </div>
+          <wa-icon-button name="xmark" label="Remove" id="remove-1"></wa-icon-button>
+          <wa-tooltip for="remove-1">Remove</wa-tooltip>
+        </div>
+      </article>
+      <article class="wa-flank wa-gap-xl" style="--flank-size: 8rem">
+        <div class="wa-frame wa-border-radius-m">
+          <img
+            src="https://images.unsplash.com/photo-1564859227552-81fde4a1df0b?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+        </div>
+        <div class="wa-flank:end wa-align-items-baseline">
+          <div class="wa-stack wa-gap-xs">
+            <h3 class="wa-heading-s">RVCA Graphic</h3>
+            <span class="wa-caption-m">White</span>
+            <span class="wa-caption-m">Large</span>
+            <span>$25.00</span>
+          </div>
+          <wa-icon-button name="xmark" label="Remove" id="remove-2"></wa-icon-button>
+          <wa-tooltip for="remove-2">Remove</wa-tooltip>
+        </div>
+      </article>
+      <article class="wa-flank wa-gap-xl" style="--flank-size: 8rem">
+        <div class="wa-frame wa-border-radius-m">
+          <img
+            src="https://images.unsplash.com/photo-1503341733017-1901578f9f1e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+        </div>
+        <div class="wa-flank:end wa-align-items-baseline">
+          <div class="wa-stack wa-gap-xs">
+            <h3 class="wa-heading-s">Stay Wild Graphic</h3>
+            <span class="wa-caption-m">Black</span>
+            <span class="wa-caption-m">Large</span>
+            <span>$18.00</span>
+          </div>
+          <wa-icon-button name="xmark" label="Remove" id="remove-3"></wa-icon-button>
+          <wa-tooltip for="remove-3">Remove</wa-tooltip>
+        </div>
+      </article>
+    </div>
+    <wa-card>
+      <div slot="header">
+        <h3 class="wa-heading-m">Order Summary</h3>
+      </div>
+      <div class="wa-stack">
+        <div class="wa-split">
+          <span class="wa-caption-l">Subtotal</span>
+          <strong>$63.00</strong>
+        </div>
+        <wa-divider></wa-divider>
+        <div class="wa-split">
+          <span class="wa-caption-l">Shipping</span>
+          <strong>$5.00</strong>
+        </div>
+        <wa-divider></wa-divider>
+        <div class="wa-split">
+          <span class="wa-caption-l">Tax</span>
+          <strong>$5.50</strong>
+        </div>
+        <wa-divider></wa-divider>
+        <div class="wa-split wa-body-l">
+          <span>Total</span>
+          <strong>$73.50</strong>
+        </div>
+        <wa-button variant="brand">Checkout</wa-button>
+      </div>
+    </wa-card>
+  </div>
+</div>
+</div>
+```
+
+## Single Column
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl" style="max-width: 60ch; margin: auto">
+  <h2>Your Cart</h2>
+  <wa-divider></wa-divider>
+  <article class="wa-flank" style="--flank-size: 12rem">
+    <div class="wa-frame wa-border-radius-m" style="aspect-ratio: 3 / 2">
+      <img
+        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>
+    <div class="wa-split:column wa-align-items-stretch wa-gap-xs">
+      <div class="wa-stack wa-gap-xs">
+        <span class="wa-split wa-gap-xs">
+          <h3 class="wa-heading-m">Convertible</h3>
+          <span>$32.00</span>
+        </span>
+        <wa-tag size="small" variant="neutral" appearance="filled" pill style="width: fit-content">Cherry Red</wa-tag>
+      </div>
+      <div class="wa-split">
+        <wa-badge appearance="filled" variant="success">In Stock</wa-badge>
+        <wa-button appearance="plain" size="small" variant="danger">
+          <wa-icon slot="suffix" name="trash"></wa-icon>
+          Remove
+        </wa-button>
+      </div>
+    </div>
+  </article>
+  <wa-divider></wa-divider>
+  <article class="wa-flank" style="--flank-size: 12rem">
+    <div class="wa-frame wa-border-radius-m" style="aspect-ratio: 3 / 2">
+      <img
+        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>
+    <div class="wa-split:column wa-align-items-stretch wa-gap-xs">
+      <div class="wa-stack wa-gap-xs">
+        <span class="wa-split wa-gap-xs">
+          <h3 class="wa-heading-m">Racers (3 Pack)</h3>
+          <span>$80.00</span>
+        </span>
+        <wa-tag size="small" variant="neutral" appearance="filled" pill style="width: fit-content">Assorted Colors</wa-tag>
+      </div>
+      <div class="wa-split">
+        <wa-badge appearance="filled" variant="success">In Stock</wa-badge>
+        <wa-button appearance="plain" size="small" variant="danger">
+          <wa-icon slot="suffix" name="trash"></wa-icon>
+          Remove
+        </wa-button>
+      </div>
+    </div>
+  </article>
+  <wa-divider></wa-divider>
+  <article class="wa-flank" style="--flank-size: 12rem">
+    <div class="wa-frame wa-border-radius-m" style="aspect-ratio: 3 / 2">
+      <img
+        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>
+    <div class="wa-split:column wa-align-items-stretch wa-gap-xs">
+      <div class="wa-stack wa-gap-xs">
+        <span class="wa-split wa-gap-xs">
+          <h3 class="wa-heading-m">Volkswagen T2</h3>
+          <span>$60.00</span>
+        </span>
+        <wa-tag size="small" variant="neutral" appearance="filled" pill style="width: fit-content">Red/White</wa-tag>
+      </div>
+      <div class="wa-split">
+        <wa-badge appearance="filled" variant="warning">Low Stock</wa-badge>
+        <wa-button appearance="plain" size="small" variant="danger">
+          <wa-icon slot="suffix" name="trash"></wa-icon>
+          Remove
+        </wa-button>
+      </div>
+    </div>
+  </article>
+  <wa-divider></wa-divider>
+  <div class="wa-stack">
+    <div class="wa-split">
+      <h3 class="wa-heading-m">Subtotal</h3>
+      <span class="wa-body-l">$172.00</span>
+    </div>
+    <span class="wa-caption-m">Shipping and taxes calculated at checkout</span>
+    <wa-button size="large" variant="brand">Checkout</wa-button>
+    <div class="cluster">
+      <span class="wa-caption-m">Not quite ready?</span>
+      <wa-button appearance="plain" size="small" variant="brand">
+        Continue Shopping
+        <wa-icon name="arrow-right"></wa-icon>
+      </wa-button>
+    </div>
+  </div>
+</div>
+```
+
+## Drawer
+
+```html {.example viewport}
+<wa-drawer label="Shopping Cart" with-header with-footer open>
+  <div class="wa-stack">
+    <article class="wa-flank" style="--flank-size: 6rem">
+      <div class="wa-frame wa-border-radius-m">
+        <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=""
+        />
+      </div>
+      <div class="wa-stack wa-gap-2xs">
+        <div class="wa-split wa-gap-2xs">
+          <strong>AJ1 Low</strong>
+          <strong>$170.00</strong>
+        </div>
+        <span class="wa-caption-m">Multi-color</span>
+        <div class="wa-split wa-gap-2xs">
+          <span class="wa-body-s">Qty: 1</span>
+          <wa-button appearance="plain" size="small">Remove</wa-button>
+        </div>
+      </div>
+    </article>
+    <wa-divider></wa-divider>
+    <article class="wa-flank" style="--flank-size: 6rem">
+      <div class="wa-frame wa-border-radius-m">
+        <img
+          src="https://images.unsplash.com/photo-1672908615254-71a0b373eaba?q=80&w=3560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="(Photograph by Hamed darzi)"
+        />
+      </div>
+      <div class="wa-stack wa-gap-2xs">
+        <div class="wa-split wa-gap-2xs">
+          <strong>The Trails</strong>
+          <strong>$35.00</strong>
+        </div>
+        <span class="wa-caption-m">Twilight Blue</span>
+        <div class="wa-split wa-gap-2xs">
+          <span class="wa-body-s">Qty: 1</span>
+          <wa-button appearance="plain" size="small">Remove</wa-button>
+        </div>
+      </div>
+    </article>
+    <wa-divider></wa-divider>
+    <article class="wa-flank" style="--flank-size: 6rem">
+      <div class="wa-frame wa-border-radius-m">
+        <img
+          src="https://images.unsplash.com/photo-1693443687750-611ad77f3aba?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="(Photograph by tian dayong)"
+        />
+      </div>
+      <div class="wa-stack wa-gap-2xs">
+        <div class="wa-split wa-gap-2xs">
+          <strong>Outcast 2-pack</strong>
+          <strong>$27.00</strong>
+        </div>
+        <span class="wa-caption-m">Black / White</span>
+        <div class="wa-split wa-gap-2xs">
+          <span class="wa-body-s">Qty: 1</span>
+          <wa-button appearance="plain" size="small">Remove</wa-button>
+        </div>
+      </div>
+    </article>
+  </div>
+  <div slot="footer" class="wa-stack" style="width: 100%">
+    <div class="wa-split">
+      <strong>Subtotal</strong>
+      <strong>$232.00</strong>
+    </div>
+    <span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
+    <wa-button variant="brand">Checkout</wa-button>
+    <wa-button appearance="plain" size="small" variant="brand">
+      Continue Shopping
+      <wa-icon name="arrow-right"></wa-icon>
+    </wa-button>
+  </div>
+</wa-drawer>
+```

docs/docs/patterns/ecommerce/store-navigation.md

@@ -0,0 +1,84 @@
+---
+title: Store Navigation
+description: 'Help shoppers explore categories and find products with all of the links they need to navigate your store.'
+unlisted: true
+---
+
+## Popup 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>
+```

docs/docs/patterns/education.md

@@ -1,6 +1,7 @@
 ---
 title: Business
 description: TODO
+unlisted: true
 ---
 
 TODO Page Description

docs/docs/patterns/entertainement.md

@@ -1,6 +1,7 @@
 ---
 title: Entertainment
 description: TODO
+unlisted: true
 ---
 
 TODO Page Description

docs/docs/patterns/index.njk

@@ -1,6 +1,27 @@
 ---
 title: Patterns
-description: Patterns are reusable solutions to common design problems.
+description: Patterns are reusable UI solutions to common design problems, ready to copy and paste into any project.
 layout: overview
 override:tags: []
 ---
+
+<div class="max-line-length">
+{% markdown %}
+
+## What's a Pattern?
+
+A pattern is a code snippet composed of components, style utilities, and native HTML that you can copy and paste into any project that uses Web Awesome.
+It's a chunk of a user interface, rather than a single component, that allows you to implement UI solutions without designing something from scratch.
+
+Patterns are designed according to proven usability practices so they're responsive, accessible, and cohesive out-of-the-box. Importantly, patterns don't handle business logic or functionality like form submissions, data processing, encryption, etc. It's up to you to implement the logic you need for your project.
+
+Patterns are written as standard HTML, so you can use them just as you would any ol' HTML and customize them to fit your specific needs.
+
+## Using Patterns
+
+To use a pattern in your project, refer to each pattern's docs for a copyable code snippet. Paste the snippet wherever you'd like the pattern to appear in your project.
+
+Because patterns use a combination of Web Awesome features, they work best when you have [native styles](/docs/native), [style utilities](/docs/utilities), and a [theme](/docs/themes) installed in addition to Web Awesome [components](/docs/components). Refer to the [Installation page](/docs/installation) to set up all of these features in your project.
+
+{% endmarkdown %}
+</div>

docs/docs/patterns/information/call-to-action.md

@@ -0,0 +1,47 @@
+---
+title: Call To Action
+description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
+parent: information
+tags: information
+---
+
+## Simple
+```html {.example}
+<div style="margin-block: 5rem;">
+    <h2 style="font-size: 3rem;">Unlock Your Future: <br/>Start Learning Web Development Today!</h2>
+    <div class="wa-cluster wa-gap-xs">
+        <wa-button>Get Started</wa-button>
+        <wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
+    </div>
+</div>
+```
+
+## Centered
+```html {.example}
+<div class="wa-stack wa-align-items-center wa-gap-xl" style="margin-block: 5rem;">
+    <h2 style="font-size: 3rem; text-align: center">Unlock Your Future: <br/>Start Learning Web Development Today!</h2>
+    <div class="wa-cluster wa-gap-xs">
+        <wa-button>Get Started</wa-button>
+        <wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
+    </div>
+</div>
+```
+
+## 2 Column
+```html {.example}
+<div style="margin-block: 5rem;">
+    <div class="wa-grid wa-align-items-center">
+        <div  class="wa-stack wa-align-items-center wa-gap-3xl">
+            <h2 style="font-size: 3rem; text-align: center">Unlock Your Future: <br/>Start Learning Web Development Today!</h2>
+            <div class="wa-cluster wa-gap-xs">
+                <wa-button>Get Started</wa-button>
+                <wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
+            </div>
+        </div>
+        <div class="wa-frame wa-border-radius-l">
+            <img src="https://images.unsplash.com/photo-1586864387634-2f33030dab41?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
+         </div>
+    </div>
+    
+</div>
+```

docs/docs/patterns/information/footer.md

@@ -0,0 +1,87 @@
+---
+title: Footer
+description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
+parent: information
+tags: information
+---
+## Simple
+```html {.example}
+<div class="wa-stack wa-gap-xl" style="max-width: 102ch; margin: 0 auto;">
+    <div class="wa-split">
+        <div class="wa-cluster wa-gap-xs wa-heading-xl">
+            <wa-icon name="gears"></wa-icon>
+            <span>Widget UI</span>
+        </div>
+        <form class="wa-flank:end wa-gap-xs">
+            <wa-input placeholder="Enter your email" type="email"></wa-input>
+            <wa-button>Subscribe</wa-button>
+        </form>
+    </div>
+    <wa-divider></wa-divider>
+    <div class="wa-cluster" style="justify-content: flex-end">
+        <p>© 2025 All Rights reserved.</p>
+    </div>
+</div>
+```
+## Centered
+```html {.example}
+<div class="wa-stack wa-align-items-center">
+    <div class="wa-cluster wa-gap-xl">
+        <a href="#">Home</a>
+            <a href="#">Get Started</a>
+            <a href="#">Services</a>
+            <a href="#">Portfolio</a>
+    </div>
+    <div class="wa-cluster wa-gap-s">
+                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="facebook" family="brands" label="Share on Facebook" href="#" target="_blank"></wa-icon-button></a>
+                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="bluesky" family="brands" label="Share on Bluesky" href="#" target="_blank"></wa-icon-button></a>
+                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="linkedin" family="brands" label="Share on LinkedIn" href="#" target="_blank"></wa-icon-button></a>
+                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="envelope-open" label="Share with email" href="#" target="_blank"></wa-icon-button></a>
+        </div>
+    <p>© 2025 All Rights reserved.</p>
+</div>
+```
+## Corporate
+```html{.example}
+<div>
+    <div class="wa-flank wa-align-items-baseline wa-gap-3xl" style="--flank-size: 36ch;">
+        <div>
+            <p>We are committed to providing you with the best products and services. If you have any questions or need assistance, feel free to reach out to our team. Stay connected with us through our social media channels for updates, news, and more. Your satisfaction is our top priority, and we look forward to serving you again soon!</p>
+        </div>
+        <div class="wa-grid">
+        <section class="wa-stack wa-gap-xs">
+            <h2 class="wa-heading-s">Links</h2>
+            <a href="#">Home</a>
+            <a href="#">Get Started</a>
+            <a href="#">Services</a>
+            <a href="#">Portfolio</a>
+        </section>
+        <section class="wa-stack wa-gap-xs">
+            <h2 class="wa-heading-s">Others</h2>
+            <a href="#">Corporate</a>
+            <a href="#">Terms of Service</a>
+            <a href="#">Privacy Policy</a>
+        </section>
+        <section class="wa-stack">
+            <h2 class="wa-heading-s">Social</h2>
+            <div class="wa-cluster">
+                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="facebook" family="brands" label="Share on Facebook" href="#" target="_blank"></wa-icon-button></a>
+                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="bluesky" family="brands" label="Share on Bluesky" href="#" target="_blank"></wa-icon-button></a>
+                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="linkedin" family="brands" label="Share on LinkedIn" href="#" target="_blank"></wa-icon-button></a>
+                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="envelope-open" label="Share with email" href="#" target="_blank"></wa-icon-button></a>
+            </div>
+        </section>
+        </div>
+    </div>
+    <wa-divider></wa-divider>
+    <div class="wa-split">
+        <p>© 2025 All Rights reserved.</p>
+        <wa-select label="Language" value="english">
+  <wa-option value="english">English</wa-option>
+  <wa-option value="spanish">Spanish</wa-option>
+  <wa-option value="french">French</wa-option>
+</wa-select>
+
+    </div>
+</div>
+```

docs/docs/patterns/information/index.njk

@@ -0,0 +1,8 @@
+---
+title: Information
+description: ''
+parent: patterns
+layout: overview
+override:tags: []
+listChildren: true
+---

docs/docs/patterns/information/information.json

@@ -0,0 +1,3 @@
+{
+  "tags": ["information"]
+}

docs/docs/patterns/information/login.md

@@ -0,0 +1,76 @@
+---
+title: Login
+description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
+parent: information
+tags: information
+---
+
+## Login/ Sign Up
+```html{.example}
+<wa-card style="max-width: 45ch; margin: 0 auto">
+    <div class="wa-stack">
+        <h2 class="wa-heading-m">Agent Login</h2>
+        <wa-input placeholder="email" type="email"></wa-input>
+        <wa-input placeholder="password" type="password"></wa-input>
+        <a href="#">Having trouble signing in?</a>
+        <wa-button>Sign in</wa-button>
+        
+        <wa-divider></wa-divider>
+        <p>Or sign in with:</p>
+        <div class="wa-grid" style="--min-column-size: 12ch;">
+            <wa-button appearance="outlined">
+                <wa-icon slot="prefix" name="google" family="brands"></wa-icon>
+                Google
+            </wa-button>
+            <wa-button appearance="outlined">
+                <wa-icon slot="prefix" name="apple" family="brands"></wa-icon>
+                Apple ID
+            </wa-button>
+            <wa-button appearance="outlined">
+                <wa-icon slot="prefix" name="facebook" family="brands"></wa-icon>
+                Facebook
+            </wa-button>
+        </div>
+        <p>Don't have an account? <a href="#">Request Now</a>
+    </div>
+</wa-card>
+```
+## Password Recovery
+```html{.example}
+<wa-card style="max-width: 45ch; margin: 0 auto">
+    <div class="wa-stack wa-gap-l">
+        <h2 class="wa-heading-m">Password Recovery</h2>
+        <wa-radio-group
+            label="Choose your recovery method"
+            orientation="horizontal"
+            name="recovery-method"
+            value="crypto-keys"
+        >
+            <wa-radio-button value="qr-code">QR Code</wa-radio-button>
+            <wa-radio-button value="crypto-keys">Crypto Keys</wa-radio-button>
+        </wa-radio-group>
+        <p class="wa-caption-m">Store your keys in a password manager to back them up in case you need to restore your account.</p>
+        <div class="wa-stack">
+            <wa-input label="Public Key" value="dsjfaklsjfkwejrl4wj5646uotue789f7ew8rtuewfsd" disabled></wa-input>
+            <wa-input label="Secret Key" value="dfkdfkdfdsofkdsofjs" disabled></wa-input>
+        </div>
+        <wa-button>Submit</wa-button>
+        <wa-button appearance="outlined">Or try to login again</wa-button>
+    </div>
+</wa-card>
+```
+## Two Factor Authentication
+```html{.example}
+<wa-card style="max-width: 45ch; margin: 0 auto">
+    <div class="wa-stack wa-gap-l wa-align-items-center">
+        <h2 class="wa-heading-m">Set up using an Authenticator app</h2>
+         <p class="wa-caption-m">Use an authenticator app to get the authentication codes</p>
+        <wa-qr-code value="https://shoelace.style/" label="Scan this code to visit Web Awesome on the web!"></wa-qr-code>
+        <p class="wa-caption-m">If you can't scan the QR Code above, enter this text instead</p>
+        <wa-input value="dsjfaklsjfkwejrl4wj5646uotue789f7ew8rtuewfsd" disabled></wa-input>
+        <h3 class="wa-heading-s">Set up using an Authenticator app</h3>
+        <p class="wa-caption-m">After scanning the QR Code image, the app will display a code that you can enter.</p>
+        <span class="wa-heading-3xl">123466</span>
+    </div>
+</wa-card>
+```

docs/docs/patterns/information/newsletter.md

@@ -0,0 +1,110 @@
+---
+title: Newsletter
+description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
+parent: information
+tags: information
+---
+
+## Simple
+```html{.example}
+<wa-card style="margin: 0 auto; max-width: 45ch;">
+  <div class="wa-stack">
+    <h2 class="wa-heading-m">Subscribe to our Newsletter</h2>
+    <p>To get the latest and most quality design resources</p>
+    <form class="wa-flank:end wa-gap-2xs">
+      <wa-input placeholder="email@example.com"></wa-input>
+      <wa-button>Subscribe</wa-button>
+    </form>
+  </div>
+</wa-card>
+```
+
+## 2 Column
+```html{.example}
+<wa-card style="margin: 0 auto; max-width: 75ch;">
+  <div class="wa-grid">
+    <div class="wa-stack wa-gap-2xs">
+    <h2 class="wa-heading-m">Subscribe to our Newsletter</h2>
+    <p>To get the latest and most quality design resources</p>
+    </div>
+    <form class="wa-flank:end wa-gap-2xs">
+      <wa-input placeholder="email@example.com"></wa-input>
+      <wa-button>Subscribe</wa-button>
+    </form>
+  </div>
+</wa-card>
+```
+## With Incentives
+```html {.example}
+<wa-card style="margin: 0 auto; max-width: 75ch;">
+    <div class="wa-grid">
+    <dl class="wa-stack">
+      <div class="wa-cluster wa-gap-xs">
+        <dt><wa-icon name="calendar"></wa-icon></dt><dd>Daily News in your Inbox</dd>
+      </div>
+       <div class="wa-cluster wa-gap-xs">
+        <dt><wa-icon name="shield-halved"></wa-icon></dt><dd>Spam Free</dd>
+      </div>
+      <div class="wa-cluster wa-gap-xs">
+        <dt><wa-icon name="shield-halved"></wa-icon></dt><dd>The Most trusted source in the industry.</dd>
+      </div>
+       <div class="wa-cluster wa-gap-xs">
+        <dt><wa-icon name="shield-halved"></wa-icon></dt><dd>Easy to Unsubscribe</dd>
+      </div>
+    </dl>
+  
+  <div class="wa-stack">
+    <h2 class="wa-heading-m">Subscribe to our Newsletter</h2>
+    <p>To get the latest and most quality design resources</p>
+    <form class="wa-flank:end wa-gap-2xs">
+      <wa-input placeholder="email@example.com"></wa-input>
+      <wa-button>Subscribe</wa-button>
+    </form>
+  </div>
+  </div>
+</wa-card>
+```
+## With Image card
+```html{.example}
+<wa-card with-image style="max-width: 45ch; margin: 0 auto">
+  <img slot="image" src="https://images.unsplash.com/photo-1595087012935-124877078142?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="mailbox" />
+  <div class="wa-stack wa-align-items-center wa-gap-2xl">
+    <div class="wa-stack wa-align-items-center wa-gap-xs">
+      <h2 class="wa-heading-l">Subscribe!</h2>
+      <p class="wa-caption-l" style="text-align: center; word-break: break-word">Get the best new products in your inbox, everyday. Get the latest content first.</p>
+    </div>
+    <form class="wa-flank:end wa-gap-2xs">
+      <wa-input placeholder="email@example.com"></wa-input>
+      <wa-button appearance="outlined">Signup</wa-button>
+    </form>
+  </div>
+
+</wa-card>
+```
+
+## 2 column
+```html{.example}
+<wa-card style="margin: 0 auto; max-width: 84ch;">
+  <div class="wa-grid wa-align-items-center">
+    <form class="wa-stack wa-align-items-center wa-gap-2xl">
+      <h2 class="wa-heading-xl" style="text-align: center;">Be the first to know</h2>
+      <p class="wa-caption-xl" style="text-align: center;">Don't miss out on exclusive savings, new arrivals, and more.</p>
+      <div class="wa-stack">
+      <wa-input placeholder="email address (required)"></wa-input>
+      <wa-input type="tel" placeholder="phone number (optional)"></wa-input>
+      <wa-checkbox>
+        <p class="wa-caption-s" style="margin: 0"> Enter your mobile number and select to receive automated marketing text messages about new items, great savings and more. You understand that consent is not required to make a purchase. Message and data rates may apply. Message frequency varies. Wireless Carriers are not liable for delayed or undelivered messages. Text HELP for help and STOP to cancel.
+For questions, Please <a href="#">contact us</a>. <a href="#">Terms</a></div>
+      </wa-checkbox>
+      </div>
+      <div class="wa-stack wa-align-items-center wa-gap-s">
+        <wa-button appearance="outlined">Sign up now</wa-button>
+        <a href="#">no, thanks</a>
+      </div>
+    </form>
+    <div class="wa-frame:portrait wa-border-radius-l">
+      <img src="https://images.unsplash.com/photo-1552558636-f6a8f071c2b3?q=80&w=2268&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+    </div>
+  </div>
+</wa-card>
+```

docs/docs/patterns/information/paywall.md

@@ -0,0 +1,122 @@
+---
+title: Paywall
+description: ''
+parent: information
+tags: information
+---
+
+## Meter
+```html {.example}
+<div style="max-width: 45ch; margin: 0 auto;">
+  <wa-card>
+    <div class="wa-flank">
+      <wa-avatar shape="rounded" style="--background-color: var(--wa-color-purple-80); --text-color: var(--wa-color-purple-40)">
+          <wa-icon slot="icon" name="newspaper" family="regular"></wa-icon>
+        </wa-avatar>
+      <div class="wa-stack wa-gap-2xs">
+        <p class="wa-caption-m">You've read <span style="font-weight: var(--wa-font-weight-bold);">9 out of 10 articles</span> this month.</p>
+        <p>Already a subscriber? <a href="#">Log in here</a>.</p>
+        <a href="#">Get Unlimited access for just 99¢</a>
+      </div>
+    </div>
+  </wa-card>
+</div>
+```
+## Modal
+
+```html {.example viewport}
+<div style="position: relative;">
+  
+  <div style="max-width: 90ch; margin: 0 auto; filter: blur(5px); padding: var(--wa-size)">
+    <h2>The Great Gatsby</h2>
+    <p>In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.</p>
+    <p>‘Whenever you feel like criticizing any one,’ he told me, ‘just remember that all the people in this world haven’t had the advantages that you’ve had.’</p>
+    <p>He didn’t say any more but we’ve always been unusually
+    communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought—frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon—for the intimate revelations of young men or at least the terms in which they express them are usually plagiaristic and marred by obvious suppressions. Reserving judgments is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat a sense of the fundamental decencies is parcelled out unequally at birth.</p>
+    <p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes but after a certain point I don’t care what it’s founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction—Gatsby who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the ‘creative temperament’— it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No—Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and shortwinded elations of men.</p>
+  </div>
+ <div style="background:rgba(24, 49, 83, 0.5);position: fixed; top: 0; right: 0; width: 100%; height: 100%;z-index: 1;">
+  <wa-card style="max-width: 84ch;margin: 10% auto 0;">
+    <div class="wa-stack wa-gap-xl">
+      <h2 class="wa-heading-m">Want to subscribe or continue using our Products for free with ads?</h2>
+      <p>Laws are changing in your region, so we're introducing a new choice about how we use your info for ads. You'll learn more about what each option means for you before you confirm your choice.</p>
+      <p>Your choice will apply to the <a href="#">accounts in this Accounts Center</a>.</p>
+      <div class="wa-grid">
+      <article class="wa-stack wa-gap-s">
+        <span class="wa-heading-s">Subscribe without ads</span>
+          <p>Subscribe to our accounts without ads, starting at 5.99/month (inclusive of applicable taxes). Your info won't be use for ads.</p>
+          <wa-button variant="success">Subscribe</wa-button>
+      </article>
+      <article class="wa-stack wa-gap-s">
+        <span class="wa-heading-s">Free with ads</span>
+     
+        <p>Discover products and brands through personalized ads, while using your accounts for free. Your info will be used for ads</p>
+        <wa-button appearance="outlined">Use for Free</wa-button>
+      </article>
+      </div>
+    </div>
+  </wa-card>
+ </div>
+</div>
+```
+
+## Footer
+
+```html {.example viewport}
+<div style="position: relative;">
+  <div style="max-width: 90ch; margin: 0 auto; filter: blur(5px); padding: var(--wa-size)">
+    <h2>The Great Gatsby</h2>
+    <p>In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.</p>
+    <p>‘Whenever you feel like criticizing any one,’ he told me, ‘just remember that all the people in this world haven’t had the advantages that you’ve had.’</p>
+    <p>He didn’t say any more but we’ve always been unusually
+    communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought—frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon—for the intimate revelations of young men or at least the terms in which they express them are usually plagiaristic and marred by obvious suppressions. Reserving judgments is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat a sense of the fundamental decencies is parcelled out unequally at birth.</p>
+    <p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes but after a certain point I don’t care what it’s founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction—Gatsby who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the ‘creative temperament’— it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No—Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and shortwinded elations of men.</p>
+  </div>
+ <div style="background:rgba(24, 49, 83, 0.5);position: fixed; top: 0; right: 0; width: 100%; height: 100%;z-index: 1;">
+  <wa-card class="wa-border-radius-square" style="width: 75%;position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);">
+    <div>
+      <h2 class="wa-heading-m">You've hit your free article limit.</h2>
+      <wa-divider></wa-divider>
+      <div class="wa-grid">
+        <div class="wa-stack wa-gap-s wa-align-items-start">
+          <span class="wa-heading-s">Standard Digital</span>
+          <span class="wa-heading-xl">$45/month</span>
+          <p>Essential digital access to quality journalism on any device. Makes a great gift.</p>
+          <wa-button size="small" variant="brand">Select</wa-button>
+          <a href="#">What's Included?</a>
+        </div>
+        <div class="wa-stack wa-gap-s wa-align-items-start">
+          <span class="wa-heading-s">Premium Digital</span>
+          <span class="wa-heading-xl">$75/month</span>
+          <p>Complete digital access to quality journalism with expert analysis from industry leaders.</p>
+          <wa-button size="small" variant="brand">Select</wa-button>
+          <a href="#">What's Included?</a>
+        </div>
+      </div>
+    </div>
+  </wa-card>
+ </div>
+</div>
+```
+
+
+<!-- ### Paywall
+
+```html {.example viewport}
+<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>
+``` -->

docs/docs/patterns/information/post-list.md

@@ -0,0 +1,198 @@
+---
+title: Post List
+description: ''
+parent: information
+tags: information
+---
+
+## Text Based
+```html {.example}
+<div class="wa-stack wa-gap-2xl" style="max-width: 60ch; margin: 0 auto;">
+    <div class="wa-split">
+        <h2 class="wa-heading-l">Trending Articles</h2>
+        <span class="wa-cluster">
+            <wa-icon name="search"></wa-icon>
+            <a href="#">See all</a>
+        </span>
+    </div>
+    <article class="wa-stack wa-gap-s">
+        <section class="wa-stack wa-gap-xs">
+            <h3 class="wa-heading-m"><a href="#" style="text-decoration: none;">Worst Idioms</a></h3>
+            <span class="wa-caption-m">by <strong><em><a href="#">Paisley Darts</a></em></strong> • 4 min</span>
+        </section>
+        <p>"You can't have your cake and eat it too"... This on needs to be buried in a shallow grave.</p>
+        <a href="#" class="wa-cluster wa-gap-2xs"><span>Read More</span><wa-icon name="angle-right"></wa-icon></a>
+        <wa-divider></wa-divider>
+    </article>
+    <article class="wa-stack wa-gap-s">
+        <section class="wa-stack wa-gap-xs">
+            <h3 class="wa-heading-m"><a href="#" style="text-decoration: none;">Boost Your Productivity with These 5 Simple Habits</a></h3>
+            <span class="wa-caption-m">by <strong><em><a href="#">Michael Sur</a></em></strong> • 3 min</span>
+        </section>
+        <p>Small changes, big results—master the art of productivity in your daily routine.</p>
+        <a href="#" class="wa-cluster wa-gap-2xs"><span>Read More</span><wa-icon name="angle-right"></wa-icon></a>
+        <wa-divider></wa-divider>
+    </article>
+    <article class="wa-stack wa-gap-s">
+        <section class="wa-stack wa-gap-xs">
+            <h3 class="wa-heading-m"><a href="#" style="text-decoration: none;">Why Sustainable Fashion Is the Future of the Industry</a></h3>
+            <span class="wa-caption-m">by <strong><em><a href="#">Stacy Magnolia</a></em></strong> • 7 min</span>
+        </section>
+        <p>From eco-friendly materials to ethical brands, sustainability is shaping the way we dress.</p>
+        <a href="#" class="wa-cluster wa-gap-2xs"><span>Read More</span><wa-icon name="angle-right"></wa-icon></a>
+        <wa-divider></wa-divider>
+    </article>
+</div>
+```
+## Single Column with Images
+```html {.example}
+<div class="wa-stack" style="max-width: 78ch; margin: 0 auto;">
+    <div class="wa-split">
+        <h2 class="wa-heading-l">Trending Articles</h2>
+        <span class="wa-cluster">
+            <wa-icon name="search"></wa-icon>
+            <a href="#">See all</a>
+        </span>
+    </div>
+    <div>
+        <article class="wa-flank:end wa-align-items-center">
+            <div class="wa-stack wa-gap-s wa-align-items-start">
+                <h3 class="wa-heading-m">Worst Idioms <span class="wa-caption-s">4 min</span></h3>
+                <div class="wa-stack wa-gap-2xs">
+                    <p class="wa-caption-l">"You can't have your cake and eat it too"... This on needs to be buried in a shallow grave.</p>
+                    <span class="wa-caption-m">by <a href="#"><strong><em>Paisley Darts</em></strong></a></span>
+                </div>
+                <wa-tag size="small" appearance="filled">Opinion</wa-tag>
+            </div>
+            <div class="wa-frame wa-border-radius-m" style="width: 10ch;">
+                <img src="https://images.unsplash.com/photo-1720170060678-7c30a36937cd?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+            </div>
+        </article>
+        <wa-divider></wa-divider>
+        <article class="wa-flank:end wa-align-items-center">
+            <div class="wa-stack wa-gap-s wa-align-items-start">
+                <h3 class="wa-heading-m">Boost Your Productivity with These 5 Simple Habits <span class="wa-caption-s">3 min</span></h3>
+                <div class="wa-stack wa-gap-2xs">
+                    <p class="wa-caption-l">"Small changes, big results—master the art of productivity in your daily routine.</p>
+                    <span class="wa-caption-m">by <a href="#"><strong><em>Michael Sur</em></strong></a></span>
+                </div>
+                <div class="wa-cluster">
+                <wa-tag size="small" appearance="filled">Self Improvement</wa-tag>
+                </div>
+            </div>
+            <div class="wa-frame wa-border-radius-m" style="width: 10ch;">
+                <img src="https://images.unsplash.com/photo-1507099985932-87a4520ed1d5?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+            </div>
+        </article>
+        <wa-divider></wa-divider>
+        <article class="wa-flank:end wa-align-items-center">
+            <div class="wa-stack wa-gap-s wa-align-items-start">
+                <h3 class="wa-heading-m">Sustainable Fashion Is the Future of the Industry <span class="wa-caption-s">7 min</span></h3>
+                <div class="wa-stack wa-gap-2xs">
+                    <p class="wa-caption-l">From eco-friendly materials to ethical brands, sustainability is shaping the way we dress.</p>
+                    <span class="wa-caption-m">by <a href="#"><strong><em>Stacy Magnolia</em></strong></a></span>
+                </div>
+                <div class="wa-cluster wa-gap-xs">
+                    <wa-tag size="small" appearance="filled">Style</wa-tag><wa-tag size="small" appearance="filled">Environmental</wa-tag>
+                </div>
+            </div>
+            <div class="wa-frame wa-border-radius-m" style="width: 10ch;">
+                <img src="https://images.unsplash.com/photo-1631775512414-160ae648c209?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+            </div>
+        </article>
+        <wa-divider></wa-divider>
+        <article class="wa-flank:end wa-align-items-center">
+            <div class="wa-stack wa-gap-s wa-align-items-start">
+                <h3 class="wa-heading-m">The Power of Mindfulness <span class="wa-caption-s">5 min</span></h3>
+                <div class="wa-stack wa-gap-2xs">
+                    <p class="wa-caption-l">Discover how being present in the moment can lead to lasting mental well being.</p>
+                    <span class="wa-caption-m">by <a href="#"><strong><em>Desean Ivy</em></strong></a></span>
+                </div>
+                <div class="wa-cluster wa-gap-xs">
+                    <wa-tag size="small" appearance="filled">Meditation</wa-tag><wa-tag size="small" appearance="filled">Self Care</wa-tag>
+                </div>
+            </div>
+            <div class="wa-frame wa-border-radius-m" style="width: 10ch;">
+                <img src="https://images.unsplash.com/photo-1591228127791-8e2eaef098d3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+            </div>
+        </article>
+        <wa-divider></wa-divider>
+    </div>
+</div>
+```
+## With Image Card
+```html {.example}
+<div class="wa-stack wa-align-items-center" style="max-width: 105ch; margin: 0 auto;">
+    <h2 class="wa-heading-l">Trending Articles</h2>
+    <wa-input placeholder="Search Articles">
+        <wa-icon name="search" slot="suffix"></wa-icon>
+    </wa-input>
+    <div class="wa-grid" style="--min-column-size: 40ch;">
+    <a href="#" style="text-decoration: none;">
+        <wa-card with-image>
+            <img slot="image" src="https://images.unsplash.com/photo-1720170060678-7c30a36937cd?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+            <div class="wa-stack">
+                <h2 class="wa-heading-m">Worst Idioms</h2>
+                <p class="wa-caption-l">"You can't have your cake and eat it too"... This on needs to be buried in a shallow grave.</p>
+                <div class="wa-cluster wa-gap-s">
+                    <wa-avatar image="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="author avatar"></wa-avatar>
+                    <div class="wa-stack wa-gap-2xs">
+                        <span class="wa-heading-s">Paisley Darts</span>
+                        <span class="wa-caption-s">March 12th 2023</span>
+                    </div>
+                </div>
+            </div>
+        </wa-card>
+    </a>
+     <a href="#" style="text-decoration: none;">
+        <wa-card with-image>
+            <img slot="image" src="https://images.unsplash.com/photo-1507099985932-87a4520ed1d5?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+            <div class="wa-stack">
+                <h2 class="wa-heading-m">Boost Your Productivity with These 5 Simple Habits</h2>
+                <p class="wa-caption-l">Small changes, big results—master the art of productivity in your daily routine.</p>
+                <div class="wa-cluster wa-gap-s">
+                    <wa-avatar image="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="author avatar"></wa-avatar>
+                    <div class="wa-stack wa-gap-2xs">
+                        <span class="wa-heading-s">Michael Sur</span>
+                        <span class="wa-caption-s">March 13th 2023</span>
+                    </div>
+                </div>
+            </div>
+        </wa-card>
+    </a>
+     <a href="#" style="text-decoration: none;">
+        <wa-card with-image>
+            <img slot="image" src="https://images.unsplash.com/photo-1631775512414-160ae648c209?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+            <div class="wa-stack">
+                <h2 class="wa-heading-m">Sustainable Fashion Is the Future of the Industry</h2>
+                <p class="wa-caption-l">From eco-friendly materials to ethical brands, sustainability is shaping the way we dress.</p>
+                <div class="wa-cluster wa-gap-s">
+                    <wa-avatar image="https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="author avatar"></wa-avatar>
+                    <div class="wa-stack wa-gap-2xs">
+                        <span class="wa-heading-s">Stacy Magnolia</span>
+                        <span class="wa-caption-s">March 14th 2023</span>
+                    </div>
+                </div>
+            </div>
+        </wa-card>
+    </a>
+     <a href="#" style="text-decoration: none;">
+        <wa-card with-image>
+            <img slot="image" src="https://images.unsplash.com/photo-1591228127791-8e2eaef098d3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
+            <div class="wa-stack">
+                <h2 class="wa-heading-m">The Power of Mindfulness</h2>
+                <p class="wa-caption-l">Discover how being present in the moment can lead to lasting mental well being.</p>
+                <div class="wa-cluster wa-gap-s">
+                    <wa-avatar image="https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="author avatar"></wa-avatar>
+                    <div class="wa-stack wa-gap-2xs">
+                        <span class="wa-heading-s">Desean Ivy</span>
+                        <span class="wa-caption-s">March 12th 2023</span>
+                    </div>
+                </div>
+            </div>
+        </wa-card>
+    </a>
+    </div>
+    <a href="#" style="text-align: center;">See All</a>
+</div>
+```

docs/docs/patterns/information/social-share.md

@@ -0,0 +1,101 @@
+---
+title: Social Share
+description: 'Allow users to easily share content with social networks and platform.'
+parent: information
+tags: information
+---
+
+## Horizontal
+```html{.example}
+<wa-card style="max-width: fit-content; margin: 0 auto;">
+  <div class="wa-stack">
+    <span class="wa-heading-s">Share Video</span>
+    <div class="wa-cluster">
+      <span class="wa-align-items-center wa-stack wa-gap-2xs">
+        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="code" label="Embed video" href="#" target="_blank"></wa-icon-button>
+        <span class="wa-caption-s">Embed</span>
+      </span>
+      <span class="wa-align-items-center wa-stack wa-gap-2xs">
+        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="facebook" family="brands" label="Share on Facebook" href="#" target="_blank"></wa-icon-button>
+        <span class="wa-caption-s">Facebook</span>
+      </span>
+      <span class="wa-align-items-center wa-stack wa-gap-2xs">
+        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="bluesky" family="brands" label="Share on Bluesky" href="#" target="_blank"></wa-icon-button>
+        <span class="wa-caption-s">Bluesky</span>
+      </span>
+      <span class="wa-align-items-center wa-stack wa-gap-2xs">
+        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="linkedin" family="brands" label="Share on LinkedIn" href="#" target="_blank"></wa-icon-button>
+        <span class="wa-caption-s">LinkedIn</span>
+      </span>
+      <span class="wa-align-items-center wa-stack wa-gap-2xs">
+        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="envelope-open" label="Share with email" href="#" target="_blank"></wa-icon-button>
+        <span class="wa-caption-s">Email</span>
+      </span>
+    </div>
+    <wa-button appearance="outlined">
+      <wa-icon slot="prefix" name="link"></wa-icon>
+      Copy Link
+    </wa-button>
+  </div>
+</wa-card>
+```
+
+## Vertical
+```html{.example}
+<wa-card class="wa-border-radius-pill" style="max-width: 8ch; margin: 0 auto;">
+  <div class="wa-stack">
+    <span class="wa-align-items-center wa-stack wa-gap-2xs">
+      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="code" label="Embed video" href="#" target="_blank"></wa-icon-button>
+      <span class="wa-caption-s">Embed</span>
+    </span>
+    <span class="wa-align-items-center wa-stack wa-gap-2xs">
+      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="facebook" family="brands" label="facebook" href="#" target="_blank"></wa-icon-button>
+      <span class="wa-caption-s">Facebook</span>
+    </span>
+    <span class="wa-align-items-center wa-stack wa-gap-2xs">
+      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="bluesky" family="brands" label="bluesky" href="#" target="_blank"></wa-icon-button>
+      <span class="wa-caption-s">Bluesky</span>
+    </span>
+    <span class="wa-align-items-center wa-stack wa-gap-2xs">
+      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="linkedin" family="brands" label="LinkedIn" href="#" target="_blank"></wa-icon-button>
+      <span class="wa-caption-s">LinkedIn</span>
+    </span>
+    <span class="wa-align-items-center wa-stack wa-gap-2xs">
+      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="envelope-open" label="email" href="#" target="_blank"></wa-icon-button>
+      <span class="wa-caption-s">Email</span>
+    </span>
+  </div>
+</wa-card>
+```
+## With Image Card
+```html {.example}
+<wa-card with-image style="max-width: 45ch; margin: 0 auto;">
+  <img
+    slot="image"
+    src="https://images.unsplash.com/photo-1578269174936-2709b6aeb913?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    alt="Super special awesome trophy"
+  />
+  <div class="wa-stack wa-align-items-center">
+      <div class="wa-stack wa-gap-2xs wa-align-items-center">
+        <h2 class="wa-heading-l">Flawless!</h2>
+        <span class="wa-caption-l">
+          10 of 10</span>
+      </div>
+    <p style="text-align: center;">You got a perfect score in this section. Tell your friends, family, really... just anyone who will listen.</p>
+    <div class="wa-cluster" style="margin-top: var(--wa-font-size-xl);">
+      <wa-avatar label="Avatar with an image icon">
+        <wa-icon-button slot="icon" style="font-size: var(--wa-font-size-2xl);" name="facebook" family="brands" label="Share on Facebook" href="#" target="_blank"></wa-icon-button>
+      </wa-avatar>
+      <wa-avatar label="Avatar with an image icon">
+        <wa-icon-button slot="icon" style="font-size: var(--wa-font-size-2xl);" name="bluesky" family="brands" label="Share on Bluesky" href="#" target="_blank"></wa-icon-button>
+      </wa-avatar>
+      <wa-avatar label="Avatar with an image icon">
+        <wa-icon-button slot="icon" style="font-size: var(--wa-font-size-2xl);" name="instagram" family="brands" label="Share on Instagram" href="#" target="_blank"></wa-icon-button>
+      </wa-avatar>
+      <wa-avatar label="Avatar with an image icon">
+        <wa-icon-button slot="icon" style="font-size: var(--wa-font-size-2xl);" name="linkedin" family="brands" label="Share on LinkedIn" href="#" target="_blank"></wa-icon-button>
+      </wa-avatar>
+    </div>
+  </div>
+</wa-card>
+```

docs/docs/patterns/membership.md

@@ -1,6 +1,7 @@
 ---
 title: Membership
 description: TODO
+unlisted: true
 ---
 
 TODO Page Description

docs/docs/patterns/news.md

@@ -1,6 +1,7 @@
 ---
 title: News
 description: TODO
+unlisted: true
 ---
 
 TODO Page Description

docs/docs/patterns/non-profit.md

@@ -1,6 +1,7 @@
 ---
 title: Non-profit
 description: TODO
+unlisted: true
 ---
 
 TODO Page Description

docs/docs/patterns/patterns.css

@@ -0,0 +1,7 @@
+.anchor-heading:has(+ wa-code-demo, + template + wa-code-demo) {
+  font-size: var(--wa-font-size-l);
+}
+
+wa-code-demo:has(+ .anchor-heading) {
+  margin-block-end: var(--wa-space-3xl);
+}

docs/docs/patterns/patterns.json

@@ -1,5 +1,5 @@
 {
-  "layout": "block.njk",
+  "layout": "patterns.njk",
   "tags": ["patterns"],
   "wide": true,
   "noAlpha": true

docs/docs/patterns/portfolio.md

@@ -1,6 +1,7 @@
 ---
 title: Portfolio
 description: TODO
+unlisted: true
 ---
 
 TODO Page Description

docs/docs/patterns/product-landing.md

@@ -1,6 +1,7 @@
 ---
 title: Product Landing
 description: TODO
+unlisted: true
 ---
 
 TODO Page Description

src/styles/utilities.css

@@ -1,6 +1,7 @@
 @import url('utilities/fouce.css');
 @import url('utilities/visually-hidden.css');
 @import url('utilities/scroll-lock.css');
+@import url('utilities/placeholder.css');
 @import url('utilities/align-items.css');
 @import url('utilities/border-radius.css');
 @import url('utilities/gap.css');

src/styles/utilities/placeholder.css

@@ -0,0 +1,7 @@
+.wa-placeholder {
+  align-self: stretch;
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
+  border-radius: var(--wa-border-radius-l);
+  padding: var(--wa-space-3xl);
+}

src/styles/utilities/text.css

@@ -99,3 +99,25 @@
 .wa-caption-xl {
   font-size: var(--wa-font-size-l);
 }
+
+.wa-link {
+  color: var(--wa-color-text-link);
+  text-decoration: var(--wa-link-decoration-default);
+  -webkit-text-decoration: var(--wa-link-decoration-default);
+
+  &:hover {
+    color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
+    text-decoration: var(--wa-link-decoration-hover);
+    -webkit-text-decoration: var(--wa-link-decoration-hover);
+  }
+}
+
+.wa-link-plain {
+  color: var(--wa-color-text-normal);
+  text-decoration: none;
+
+  &:hover {
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+    text-decoration: none;
+  }
+}