Merge branch 'next' into popover

* fix scroll on reload

* fix comment

.github/workflows/client_tests.yml

@@ -9,6 +9,7 @@ on:
   pull_request:
     branches: [next]
 
+
 jobs:
   client_test:
     runs-on: ubuntu-latest
@@ -30,10 +31,17 @@ jobs:
         run: npm ci
       - name: Lint
         run: npm run prettier
+        working-directory: ./packages/webawesome
+
       - name: Build
-        run: npm run build:alpha
+        run: npm run build
+        working-directory: ./packages/webawesome
+
       - name: Install Playwright
         run: npx playwright install --with-deps
+        working-directory: ./packages/webawesome
+
       - name: Run CSR tests
         # FAIL_FAST to fail on first failing test.
         run: FAIL_FAST="true" CSR_ONLY="true" npm run test
+        working-directory: ./packages/webawesome

.github/workflows/ssr_tests.yml

@@ -26,17 +26,17 @@ jobs:
           cache: 'npm'
       - name: Install dependencies
         run: npm ci
-      # Just lint here too. Save some GH Action minutes and not need to use "depends_on" or anything.
-      - name: Lint
-        run: npm run prettier
 
       - name: Build
-        run: npm run build:alpha
+        run: npm run build
+        working-directory: ./packages/webawesome
 
       - name: Install Playwright
         run: npx playwright install --with-deps
+        working-directory: ./packages/webawesome
 
       - name: Run SSR tests
         # FAIL_FAST to fail on first failing test.
         run: FAIL_FAST="true" SSR_ONLY="true" npm run test
+        working-directory: ./packages/webawesome
 

.gitignore

@@ -1,12 +1,12 @@
 _site
 .cache
 .DS_Store
-package.json
-package-lock.json
 dist/
 dist-cdn/
-docs/public/pagefind
 node_modules
-src/react
-.astro
+packages/**/*/src/react
 cdn/
+yarn.lock
+_bundle_
+/packages/webawesome-pro
+/packages/webawesome-app

.prettierignore

@@ -1,5 +1,7 @@
 *.hbs
 *.md
+!docs/docs/patterns/**/*.md
+docs/docs/patterns/blog-news/post-list.md
 .cache
 .github
 cspell.json

README.md

@@ -31,6 +31,30 @@ If that's not what you're trying to do, the [documentation website](https://weba
 
 Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).
 
+### Understanding the Web Awesome monorepo
+
+Web Awesome uses [NPM workspaces](https://docs.npmjs.com/cli/v11/using-npm/workspaces) for its monorepo structure and is fairly minimal in what it provides.
+
+By using a NPM workspaces and a monorepo structure, we can get consistent builds, shared configurations, and reduced duplication across repositories which reduces regressions and forces consistency across `webawesome`, `webawesome-pro`, and `webawesome-app`.
+
+Generally, if you plan to only work with the free version of `webawesome` it is easiest to go to `packages/webawesome` and run all commands from there.
+
+### Where do NPM dependencies go?
+
+Any dependencies intended to be used across all packages (IE: `prettier`, `eslint`) that are _NOT_ used at runtime should be in the root `devDependencies` of `package.json`.
+
+```bash
+npm install -D -w prettier
+```
+
+Any dependencies that will be used at runtime by a package should be part of the specific package's `"dependencies"` such as `lit`. This is required because if that dependency is not in the `packages/*/package.json`, it will not be installed when used via NPM.
+
+Individual packages are also free to install devDependencies as needed as long as they are specific to that package only.
+
+To do install a package specific to a package, change your working directory to that package's root
+
+IE: `cd packages/webawesome && npm install <package-name>`
+
 ### Forking the Repo
 
 Start by [forking the repo](https://github.com/shoelace-style/webawesome/fork) on GitHub, then clone it locally and install dependencies.
@@ -43,9 +67,10 @@ npm install
 
 ### Developing
 
-Once you've cloned the repo, run the following command.
+Once you've cloned the repo, run the following command from the respective directory within `packages/*`
 
 ```bash
+cd packages/webawesome
 npm start
 ```
 
@@ -56,6 +81,7 @@ This will spin up the dev server. After the initial build, a browser will open a
 To generate a production build, run the following command.
 
 ```bash
+cd packages/webawesome
 npm run build
 ```
 
@@ -66,15 +92,24 @@ You can also run `npm run build:serve` to start an [`http-server`](https://www.n
 To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
 
 ```bash
+cd packages/webawesome
 npm run create wa-tag-name
 ```
 
 This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
 
+### Adding additional packages
+
+Right now the only additional packages are in private repositories.
+
+To add additional packages from other repositories, run: `git clone <url> packages/<package-name>` to clone your repo into `packages/`.
+
+Make sure to run `npm install` at the root of the monorepo after adding your package!
+
 ### Contributing
 
 Web Awesome is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
 
 ## License
 
-Web Awesome is available under the terms of the MIT license.
+Web Awesome is available under the terms of the MIT license.

cspell.json

@@ -15,16 +15,19 @@
     "autoloading",
     "autoplay",
     "bezier",
+    "Blockquotes",
     "boxicons",
     "CACHEABLE",
     "callout",
     "callouts",
+    "canvastext",
     "chatbubble",
     "checkmark",
     "Clippy",
     "codebases",
     "codepen",
     "colocated",
+    "colorjs",
     "colour",
     "combobox",
     "Commonmark",
@@ -58,6 +61,8 @@
     "exportmaps",
     "exportparts",
     "fieldsets",
+    "focusin",
+    "focusout",
     "fontawesome",
     "formaction",
     "formdata",
@@ -67,6 +72,7 @@
     "formtarget",
     "FOUC",
     "FOUCE",
+    "Frontmatter",
     "fullscreen",
     "gestern",
     "giga",
@@ -128,6 +134,7 @@
     "petabit",
     "Preact",
     "preconnect",
+    "prerendered",
     "prismjs",
     "progressbar",
     "radiogroup",
@@ -148,6 +155,7 @@
     "scrollbars",
     "scrollend",
     "scroller",
+    "Scrollers",
     "Segoe",
     "semibold",
     "shadowrootmode",

docs/_data/hueRanges.js

@@ -1 +0,0 @@
-export { hueRanges as default } from '../assets/scripts/tweak/data.js';

docs/_includes/sidebar-group.njk

@@ -1,23 +0,0 @@
-{# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
-{% if collections[tag] -%}
-  {% set groupUrl %}/docs/{{ tag }}/{% endset %}
-  {% set groupItem = groupUrl | getCollectionItemFromUrl %}
-  {% set children = groupItem.data.children if groupItem.data.children.length > 0 else (collections[tag] | sort) %}
-
-  <wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
-    <h2 slot="summary">
-      {% if groupItem %}
-        <a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
-          <wa-icon name="grid-2"></wa-icon>
-        </a>
-      {% else %}
-        {{ title or (tag | capitalize) }}
-      {% endif %}
-    </h2>
-    <ul>
-      {% for page in children %}
-          {% include 'sidebar-link.njk' %}
-      {% endfor %}
-    </ul>
-  </wa-details>
-{%- endif %}

docs/_includes/sidebar-link.njk

@@ -1,16 +0,0 @@
-{% if page | show -%}
-	<li>
-		<a href="{{ page.url }}">{{ page.data.title }}</a>
-		{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
-		{% if page.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
-
-		{% set children = page.data.children %}
-		{% if children.length > 0 %}
-			<ul>
-				{% for page in children %}
-					{% include 'sidebar-link.njk' %}
-				{% endfor %}
-			</ul>
-		{% endif %}
-	</li>
-{%- endif %}

docs/_includes/sidebar.njk

@@ -1,33 +0,0 @@
-{# Getting started #}
-<h2>Getting Started</h2>
-<ul>
-  <li><a href="/docs/">Installation</a></li>
-  <li><a href="/docs/usage">Usage</a></li>
-  <li><a href="/docs/customizing">Customizing</a></li>
-  <li><a href="/docs/form-controls">Form Controls</a></li>
-  <li><a href="/docs/localization">Localization</a></li>
-</ul>
-
-{# Resources #}
-<h2>Resources</h2>
-<ul>
-  <li><a href="https://github.com/shoelace-style/webawesome-alpha/discussions" target="_blank">Help &amp; Support</a></li>
-  <li><a href="/docs/resources/community">Community</a></li>
-  <li><a href="/docs/resources/accessibility">Accessibility</a></li>
-  <li><a href="/docs/resources/contributing">Contributing</a></li>
-  <li><a href="/docs/resources/changelog">Changelog</a></li>
-  <li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
-</ul>
-
-{% for tag, title in {
-  'themes': 'Themes',
-  'components': 'Components',
-  'native': 'Native Styles',
-  'utilities': 'Style Utilities',
-  'layout': 'Layout',
-  'patterns': 'Patterns',
-  'palettes': 'Color Palettes',
-  'tokens': 'Design Tokens'
-} %}
-  {% include 'sidebar-group.njk' %}
-{% endfor %}

docs/_includes/theme-showcase.njk

@@ -1,144 +0,0 @@
-<div class="showcase-examples-wrapper" aria-hidden="true" data-no-outline>
-  <div class="showcase-examples">
-    <wa-card with-header with-footer>
-      <div slot="header" class="wa-split">
-        <h3 class="wa-heading-m">Your Cart</h3>
-        <wa-icon-button name="xmark" tabindex="-1"></wa-icon-button>
-      </div>
-      <div class="wa-stack wa-gap-xl">
-        <div class="wa-flank">
-          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95);">
-            <wa-icon slot="icon" name="sword-laser" family="duotone" style="font-size: 1.5em;"></wa-icon>
-          </wa-avatar>
-          <div class="wa-stack wa-gap-2xs">
-            <div class="wa-split wa-gap-2xs">
-              <strong>Initiate Saber</strong>
-              <strong>$179.99</strong>
-            </div>
-            <div class="wa-split wa-gap-2xs wa-caption-m">
-              <span>Green</span>
-              <a href="#" tabindex="-1">Remove</a>
-            </div>
-          </div>
-        </div>
-        <wa-divider></wa-divider>
-        <div class="wa-flank">
-          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-95);">
-            <wa-icon slot="icon" name="robot-astromech" family="duotone" style="font-size: 1.5em;"></wa-icon>
-          </wa-avatar>
-          <div class="wa-stack wa-gap-2xs">
-            <div class="wa-split wa-gap-2xs">
-              <strong>Repair Droid</strong>
-              <strong>$3,049.99</strong>
-            </div>
-            <div class="wa-split wa-gap-2xs wa-caption-m">
-              <span>R-series</span>
-              <a href="#" tabindex="-1">Remove</a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div slot="footer" class="wa-stack">
-        <div class="wa-split">
-          <strong>Subtotal</strong>
-          <strong>$3,229.98</strong>
-        </div>
-        <span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
-        <wa-button tabindex="-1" variant="brand">
-          <wa-icon slot="prefix" name="shopping-bag"></wa-icon>
-          Checkout
-        </wa-button>
-      </div>
-    </wa-card>
-    <wa-card>
-      <wa-avatar shape="rounded" style="--size: 1.9lh; float: left; margin-right: var(--wa-space-m);">
-        <wa-icon slot="icon" name="hat-wizard" family="duotone" style="font-size: 1.75em;"></wa-icon>
-      </wa-avatar>
-      <p class="wa-body-l" style="margin: 0;">&ldquo;All we have to decide is what to do with the time that is given to us. There are other forces at work in this world, Frodo, besides the will of evil.&rdquo;</p>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <h3 class="wa-heading-m">Sign In</h3>
-        <wa-input tabindex="-1" label="Email" placeholder="ddjarin@mandalore.gov">
-          <wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
-        </wa-input>
-        <wa-input tabindex="-1" label="Password" type="password">
-          <wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
-        </wa-input>
-        <wa-button tabindex="-1" variant="brand">Sign In</wa-button>
-        <a href="#" tabindex="-1" class="wa-body-s">I forgot my password</a>
-      </div>
-    </wa-card>
-    <wa-card with-footer>
-      <div class="wa-stack">
-        <div class="wa-split">
-          <h3 class="wa-heading-m">To-Do</h3>
-          <wa-icon-button tabindex="-1" name="plus" label="Add task"></wa-icon-button>
-        </div>
-        <wa-checkbox tabindex="-1" checked>Umbrella for Adelard</wa-checkbox>
-        <wa-checkbox tabindex="-1" checked>Waste-paper basket for Dora</wa-checkbox>
-        <wa-checkbox tabindex="-1" checked>Pen and ink for Milo</wa-checkbox>
-        <wa-checkbox tabindex="-1">Mirror for Angelica</wa-checkbox>
-        <wa-checkbox tabindex="-1">Silver spoons for Lobelia</wa-checkbox>
-      </div>
-      <div slot="footer">
-        <a href="" tabindex="-1">View all completed</a>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-frame wa-border-radius-m" style="align-self: center; max-inline-size: 25ch;">
-          <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="Album art">
-        </div>
-        <div class="wa-flank:end wa-align-items-start">
-          <div class="wa-stack wa-gap-3xs">
-            <div class="wa-cluster wa-gap-xs" style="height: 2.25em;">
-              <strong>The Stone Troll</strong>
-              <small><wa-badge variant="neutral" appearance="filled">E</wa-badge></small>
-            </div>
-            <span class="wa-caption-m">Samwise G</span>
-          </div>
-          <wa-icon-button tabindex="-1" name="ellipsis" label="Options"></wa-icon-button>
-        </div>
-        <div class="wa-stack wa-gap-2xs">
-          <wa-progress-bar value="34" style="height: 0.5em"></wa-progress-bar>
-          <div class="wa-split">
-            <span class="wa-caption-xs">1:01</span>
-            <span class="wa-caption-xs">-1:58</span>
-          </div>
-        </div>
-        <div class="wa-grid wa-align-items-center" style="--min-column-size: 1em; justify-items: center;">
-          <wa-icon-button tabindex="-1" name="backward" label="Skip backward"></wa-icon-button>
-          <wa-icon-button tabindex="-1" name="pause" style="font-size: var(--wa-font-size-2xl);" label="Pause"></wa-icon-button>
-          <wa-icon-button tabindex="-1" name="forward" label="Skip forward"></wa-icon-button>
-        </div>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <h3 class="wa-heading-m">Chalmun's Spaceport Cantina</h3>
-        <div class="wa-cluster wa-gap-xs">
-          <wa-rating value="4.6" read-only></wa-rating>
-          <strong>4.6</strong>
-          <span>(419 reviews)</span>
-        </div>
-        <div class="wa-cluster wa-gap-xs">
-          <div class="wa-cluster wa-gap-3xs">
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-          </div>
-          <span class="wa-caption-m">&bull;</span>
-          <wa-tag size="small">Cocktail Bar</wa-tag>
-          <wa-tag size="small">Gastropub</wa-tag>
-          <wa-tag size="small">Local Fare</wa-tag>
-          <wa-tag size="small">Gluten Free</wa-tag>
-        </div>
-        <div class="wa-flank wa-gap-xs">
-          <wa-icon name="location-dot"></wa-icon>
-          <a href="#" class="wa-caption-m" tabindex="-1">Mos Eisley, Tatooine</a>
-        </div>
-      </div>
-    </wa-card>
-  </div>
-</div>

docs/_layouts/patterns.njk

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

docs/_layouts/theme.njk

@@ -1,207 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-{# {% set forceTheme = page.fileSlug %} #}
-
-{% extends '../_includes/base.njk' %}
-
-{% block head %}
-<script>
-globalThis.wa_data ??= {};
-wa_data.baseTheme = "{{ page.fileSlug }}";
-wa_data.themes = {
-  {% for theme in collections.theme -%}
-  "{{ theme.fileSlug }}": {
-    "title": "{{ theme.data.title }}",
-    "palette": "{{ theme.data.palette }}",
-    "brand": "{{ theme.data.brand }}"
-  },
-  {% endfor %}
-};
-wa_data.palettes = {
-  {% for palette in collections.palette -%}
-  "{{ palette.fileSlug }}": {
-    "title": "{{ palette.data.title }}",
-  },
-  {% endfor %}
-};
-</script>
-<link href="/docs/themes/remix.css" rel="stylesheet">
-<script src="/docs/themes/remix.js" type="module"></script>
-{% endblock %}
-
-{% block header %}
-
-<iframe src='{{ page.url }}demo.html' id="demo"></iframe>
-
-<wa-details id="mix_and_match" class="wa-gap-m" >
-  <h4 slot="summary" data-no-anchor data-no-outline id="remix">
-    <wa-icon name="arrows-rotate"></wa-icon>
-    Remix this theme
-    <wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="suffix" variant="regular"></wa-icon>
-    <wa-tooltip for="what-is-remixing">Customize this theme by changing its colors and/or remixing it with design elements from other themes!</wa-tooltip>
-  </h4>
-
-  <wa-select name="colors" label="Colors from…" value="" clearable>
-    <wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
-    {% for theme in collections.theme | sort %}
-      {% set currentTheme = theme.fileSlug == page.fileSlug %}
-      <wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
-        <wa-card with-header>
-          <div slot="header">
-          {% include "svgs/theme-color.njk" %}
-          </div>
-          <span class="page-name">
-            {{ theme.data.title }}
-            {% if theme.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
-            {% if currentTheme %}<wa-badge variant="neutral" appearance="outlined">This theme</wa-badge>{% endif %}
-          </span>
-        </wa-card>
-      </wa-option>
-    {% endfor %}
-  </wa-select>
-
-  <wa-select name="palette" label="Palette" clearable>
-    <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
-    {% set defaultPalette = palette %}
-    {% for palette in collections.palette | sort %}
-      {% set currentPalette = palette.fileSlug == defaultPalette %}
-      <wa-option label="{{ palette.data.title }}" value="{{ palette.fileSlug if not currentPalette }}" {{ (palette.fileSlug if currentPalette) | attr('data-id') }}>
-        <wa-card with-header>
-          <div slot="header">
-          {% include "svgs/" + (palette.data.icon or "thumbnail-placeholder") + ".njk" ignore missing %}
-          </div>
-          <span class="page-name">
-            {{ palette.data.title }}
-            {% if palette.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
-            {% if currentPalette %}<wa-badge variant="neutral" appearance="outlined">Theme default</wa-badge>{% endif %}
-          </span>
-        </wa-card>
-      </wa-option>
-    {% endfor %}
-    {% set palette = defaultPalette %}
-  </wa-select>
-
-  <wa-select name="brand" label="Brand color" value="" clearable>
-    <div class="selected-swatch" slot="prefix"></div>
-    {% for hue in hues %}
-      {% set currentBrand = hue == brand %}
-      <wa-option label="{{ hue | capitalize }}" value="{{ hue if not currentBrand }}" {{ (hue if currentBrand) | attr('data-id') }} style="--color: var(--wa-color-{{ hue }})">
-        {{ hue | capitalize }}
-        {% if currentBrand %}<wa-badge variant="neutral" appearance="outlined">Theme default</wa-badge>{% endif %}
-      </wa-option>
-    {% endfor %}
-  </wa-select>
-
-  <wa-select name="typography" label="Typography from…" clearable>
-    <wa-icon name="font-case" slot="prefix"></wa-icon>
-    {% for theme in collections.theme | sort %}
-      {% set currentTheme = theme.fileSlug == page.fileSlug %}
-      <wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
-        <wa-card with-header>
-          <div slot="header">
-          {% include "svgs/theme-typography.njk" %}
-          </div>
-          <span class="page-name">
-            {{ theme.data.title }}
-            {% if theme.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
-            {% if currentTheme %}<wa-badge variant="neutral" appearance="outlined">This theme</wa-badge>{% endif %}
-          </span>
-        </wa-card>
-      </wa-option>
-    {% endfor %}
-  </wa-select>
-</wa-details>
-
-<h2>Color</h2>
-{% set paletteURL = '/docs/palettes/' + palette + '/' %}
-
-
-<div class="index-grid">
-  {% set themePage = page %}
-  {% set page = paletteURL | getCollectionItemFromUrl %}
-  {% set pageSubtitle = "Default color palette" %}
-  {% include 'page-card.njk' %}
-  {% set page = themePage %}
-
-  <wa-card style="--header-background: var(--wa-color-{{ brand }})" class="wa-palette-{{ palette }}">
-    <div slot="header"></div>
-    <div class="page-name">{{ brand | capitalize }}</div>
-    <div class="wa-caption-s">Default brand color</div>
-  </wa-card>
-</div>
-{% endblock %}
-
-{% block afterContent %}
-
-<h2 id="usage">How to use this theme</h2>
-
-{% markdown %}
-You can import this theme from the Web Awesome CDN.
-
-{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-## Dark mode
-
-To activate the dark color scheme of the theme on any element and its contents, apply the class `wa-dark` to it.
-This means you can use different color schemes throughout the page.
-Here, we use the default theme with a dark sidebar:
-
-```html
-<html>
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
-  </head>
-
-  <body>
-    <nav class="wa-dark">
-      <!-- dark-themed sidebar -->
-    </nav>
-
-    <!-- light-themed content -->
-  </body>
-</html>
-```
-
-You can apply the class to the `<html>` element on your page to activate the dark color scheme for the entire page.
-
-```html
-<html class="wa-dark">
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/{{ page.fileSlug }}.css" />
-    <!-- other links, scripts, and metadata -->
-  </head>
-  <body>
-    <!-- page content -->
-  </body>
-</html>
-```
-### Detecting Color Scheme Preference
-
-Web Awesome's themes have both light and dark styles built in.
-However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
-This should be done at the application level.
-
-As a best practice, to provide a dark theme in your app, you should:
-
-- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
-- Allow the user to override the setting in your app
-- Remember the user's preference and restore it on subsequent logins
-
-Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
-
-Assuming the user's preference is in a variable called `colorScheme` (values: `auto`, `light`, `dark`),
-you can use the following JS snippet to apply the `wa-dark` class to the `<html>` element accordingly:
-
-```js
-const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
-const applyDark = function (event = systemDark) {
-  const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
-  document.documentElement.classList.toggle('wa-dark', isDark);
-};
-systemDark.addEventListener('change', applyDark);
-applyDark();
-```
-
-{% endmarkdown %}
-{% endblock %}

docs/_utils/code-examples.js

@@ -1,190 +0,0 @@
-import { parse } from 'node-html-parser';
-import { v4 as uuid } from 'uuid';
-
-const templates = {
-  old(pre, code, { open, buttons, edit }) {
-    const id = `code-example-${uuid().slice(-12)}`;
-    let preview = code.textContent;
-
-    // Run preview scripts as modules to prevent collisions
-    const root = parse(preview, { blockTextElements: { script: true } });
-    root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
-    preview = root.toString();
-
-    return `
-      <div class="code-example ${open ? 'open' : ''}">
-        <div class="code-example-preview">
-          ${preview}
-        </div>
-        <div class="code-example-source" id="${id}">
-          ${pre.outerHTML}
-        </div>
-        ${
-          buttons
-            ? `
-            <div class="code-example-buttons">
-              <button
-                class="code-example-toggle"
-                type="button"
-                aria-expanded="${open ? 'true' : 'false'}"
-                aria-controls="${id}"
-              >
-                Code
-                <wa-icon name="chevron-down"></wa-icon>
-              </button>
-              ${
-                edit
-                  ? `
-                    <button class="code-example-pen" type="button">
-                      <wa-icon name="pen-to-square"></wa-icon>
-                      Edit
-                    </button>
-                  `
-                  : ''
-              }
-            `
-            : ''
-        }
-        </div>
-      </div>
-    `;
-  },
-  new(pre, code, { open, first, attributes }) {
-    attributes = {
-      open,
-      include: `link[rel=stylesheet][href^='/dist/']`,
-      ...attributes,
-    };
-
-    const attributesString = Object.entries(attributes)
-      .map(([key, value]) => {
-        if (value === true) {
-          return key;
-        }
-        if (value === false || value === null) {
-          return '';
-        }
-        return `${key}="${value}"`;
-      })
-      .join(' ');
-
-    let includes = '';
-    if (first) {
-      includes = `
-        <template class="wa-code-demo-include-isolated">
-          <script src="/dist/webawesome.loader.js" type="module"></script>
-        </template>`;
-    }
-
-    let preview = '';
-    if (attributes.viewport === undefined) {
-      // Slot in pre-rendered preview
-      preview = `<div style="display:contents" slot="preview">${code.textContent}</div>`;
-
-      // Run preview scripts as modules to prevent collisions
-      const root = parse(preview, { blockTextElements: { script: true } });
-      root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
-      preview = root.toString();
-    }
-
-    return `${includes}
-      <wa-code-demo ${attributesString}>
-        ${preview}
-        ${pre.outerHTML}
-      </wa-code-demo>
-    `;
-  },
-};
-
-/**
- * Eleventy plugin to turn `<code class="example">` blocks into live examples.
- */
-export function codeExamplesPlugin(eleventyConfig, options = {}) {
-  const defaultOptions = {
-    container: 'body',
-    defaultOpen: (code, { outputPathIndex }) => {
-      return (
-        outputPathIndex === 1 && // is first
-        code.textContent.length < 500
-      ); // is short
-    },
-  };
-  options = { ...defaultOptions, ...options };
-
-  const stats = {
-    inputPaths: {},
-    outputPaths: {},
-  };
-
-  eleventyConfig.addTransform('code-examples', function (content) {
-    const { inputPath, outputPath } = this.page;
-
-    const doc = parse(content, { blockTextElements: { code: true } });
-    const container = doc.querySelector(options.container);
-
-    if (!container) {
-      return content;
-    }
-
-    // Look for external links
-    container.querySelectorAll('code.example').forEach(code => {
-      stats.inputPaths[inputPath] ??= 0;
-      stats.outputPaths[outputPath] ??= 0;
-      stats.inputPaths[inputPath]++;
-      stats.outputPaths[outputPath]++;
-
-      const pre = code.closest('pre');
-      const first = stats.inputPaths[inputPath] === 1;
-
-      const localOptions = {
-        ...options,
-        first,
-
-        // Modifier defaults
-        edit: true,
-        buttons: true,
-        new: true, // comment this line to default back to the old demos
-        attributes: {},
-      };
-
-      for (const prop of ['new', 'open', 'buttons', 'edit']) {
-        if (code.classList.contains(prop)) {
-          localOptions[prop] = true;
-        } else if (code.classList.contains(`no-${prop}`)) {
-          localOptions[prop] = false;
-        }
-      }
-
-      for (const attribute of ['viewport', 'include']) {
-        if (code.hasAttribute(attribute)) {
-          localOptions.attributes[attribute] = code.getAttribute(attribute);
-          code.removeAttribute(attribute);
-        }
-      }
-
-      if (Object.keys(localOptions.attributes).length > 0) {
-        // attributes only work on the new syntax
-        localOptions.new = true;
-      }
-
-      if (localOptions.open === undefined) {
-        if (localOptions.defaultOpen === true) {
-          localOptions.open = localOptions.defaultOpen;
-        } else if (typeof localOptions.defaultOpen === 'function') {
-          localOptions.open = localOptions.defaultOpen(code, {
-            pre,
-            inputPathIndex: stats.inputPaths[inputPath],
-            outputPathIndex: stats.outputPaths[outputPath],
-          });
-        }
-      }
-
-      const template = localOptions.new ? 'new' : 'old';
-      const codeExample = parse(templates[template](pre, code, localOptions));
-
-      pre.replaceWith(codeExample);
-    });
-
-    return doc.toString();
-  });
-}

docs/_utils/remove-data-alpha-elements.js

@@ -1,23 +0,0 @@
-import { parse } from 'node-html-parser';
-
-/**
- * Eleventy plugin to add remove elements with <div data-alpha="remove"> from the alpha build.
- */
-export function removeDataAlphaElements(options = {}) {
-  options = {
-    isAlpha: false,
-    ...options,
-  };
-
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('remove-data-alpha-elements', content => {
-      const doc = parse(content, { blockTextElements: { code: true } });
-
-      if (options.isAlpha) {
-        doc.querySelectorAll('[data-alpha="remove"]').forEach(el => el.remove());
-      }
-
-      return doc.toString();
-    });
-  };
-}

docs/assets/scripts/scroll.js

@@ -1,33 +0,0 @@
-// Smooth links
-document.addEventListener('click', event => {
-  const link = event.target.closest('a');
-  if (!link || link.getAttribute('data-smooth-link') === 'off') {
-    return;
-  }
-
-  const id = (link.hash ?? '').substr(1);
-
-  // Only handle smooth scroll if there's a hash and the link points to the current page
-  if (id && link.pathname === window.location.pathname) {
-    const target = document.getElementById(id);
-    const headerHeight = document.querySelector('wa-page > header').clientHeight;
-
-    if (target) {
-      event.preventDefault();
-      window.scroll({
-        top: target.offsetTop - headerHeight,
-        behavior: 'smooth',
-      });
-      history.pushState(undefined, undefined, `#${id}`);
-    }
-  }
-});
-
-// Scroll classes
-function updateScrollClass() {
-  document.body.classList.toggle('scrolled-down', window.scrollY >= 10);
-}
-
-window.addEventListener('scroll', updateScrollClass);
-window.addEventListener('turbo:render', updateScrollClass);
-updateScrollClass();

docs/assets/scripts/tweak/code.js

@@ -1,54 +0,0 @@
-/**
- * Get import code for remixed themes and tweaked palettes.
- */
-import { urls } from './data.js';
-
-export function cssImport(url, options = {}) {
-  let { language = 'html', cdnUrl = '/dist/', attributes } = options;
-  url = cdnUrl + url;
-
-  if (language === 'css') {
-    return `@import url('${url}');`;
-  } else {
-    attributes = attributes ? ` ${attributes}` : '';
-    return `<link rel="stylesheet" href="${url}"${attributes} />`;
-  }
-}
-
-export function cssLiteral(value, options = {}) {
-  let { language = 'html' } = options;
-
-  if (language === 'css') {
-    return value;
-  } else {
-    return `<style>\n${value}\n</style>`;
-  }
-}
-
-// Params in correct order
-export const themeParams = ['colors', 'palette', 'brand', 'typography'];
-
-export function getThemeCode(base, params, options) {
-  let ret = [];
-
-  if (base) {
-    ret.push(urls.theme(base));
-  }
-
-  for (let aspect of themeParams) {
-    let value = params[aspect];
-
-    if (value) {
-      ret.push(urls[aspect](value));
-    }
-  }
-
-  return ret.map(url => cssImport(url, options)).join('\n');
-}
-
-export function cssRule(selector, declarations, { indent = '  ' } = {}) {
-  selector = Array.isArray(selector) ? selector.flat().join(',\n') : selector;
-  declarations = Array.isArray(declarations) ? declarations.flat() : declarations;
-  declarations = declarations.map(declaration => indent + declaration.trim()).join('\n');
-  return `${selector} {\n${declarations.trimEnd()}\n}`;
-}

docs/assets/styles/code-examples.css

@@ -1,87 +0,0 @@
-.code-example {
-  border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-  border-radius: var(--wa-border-radius-l);
-  color: var(--wa-color-text-normal);
-  margin-block-end: var(--wa-flow-spacing);
-}
-
-.code-example-preview {
-  padding: 2rem;
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-
-  > :first-child {
-    margin-block-start: 0;
-  }
-
-  > :last-child {
-    margin-block-end: 0;
-  }
-}
-
-.code-example-source {
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-}
-
-.code-example:not(.open) .code-example-source {
-  display: none;
-}
-
-.code-example.open .code-example-toggle wa-icon {
-  rotate: 180deg;
-}
-
-.code-example-source pre {
-  position: relative;
-  border-radius: 0;
-  margin: 0;
-  white-space: normal;
-}
-
-.code-example-source:not(:has(+ .code-example-buttons)) {
-  border-bottom: none;
-
-  pre {
-    border-bottom-right-radius: var(--wa-border-radius-l);
-    border-bottom-left-radius: var(--wa-border-radius-l);
-  }
-}
-
-.code-example-buttons {
-  display: flex;
-  align-items: stretch;
-
-  button {
-    all: unset;
-    flex: 1 0 auto;
-    font-size: 0.875rem;
-    color: var(--wa-color-text-quiet);
-    border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-    text-align: center;
-    padding: 0.5rem;
-    cursor: pointer;
-
-    &:first-of-type {
-      border-left: none;
-      border-bottom-left-radius: var(--wa-border-radius-l);
-    }
-
-    &:last-of-type {
-      border-bottom-right-radius: var(--wa-border-radius-l);
-    }
-
-    &:focus-visible {
-      outline: var(--wa-focus-ring);
-    }
-  }
-
-  .code-example-pen {
-    flex: 0 0 100px;
-    white-space: nowrap;
-  }
-
-  wa-icon {
-    width: 1em;
-    height: 1em;
-    vertical-align: -2px;
-  }
-}

docs/docs/components/code-demo.md

@@ -1,213 +0,0 @@
----
-title: Code Demo
-description: Code demos can be used to render code examples as inline live demos.
-tags: component
-noAlpha: true
-isPro: true
----
-
-```html {.example}
-<wa-code-demo>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-This component is used right here in the docs to render code examples.
-
-:::warning
-Do not render untrusted content in a `<wa-code-demo>` element. This component renders the content as HTML, which introduces XSS vulnerabilities if used with untrusted content.
-:::
-
-## Examples
-
-### Open by default
-
-```html {.example}
-<wa-code-demo open>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-### Custom previews
-
-In some cases you may want to preprocess the code displayed, for example to sanitize HTML, remove irrelevant elements or attributes, fix whitespace, or do server-side rendering (SSR).
-For these cases, you can slot in a custom preview:
-
-```html {.example}
-<wa-code-demo>
-  <wa-button slot="preview">Click me!</wa-button>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-Note that this means the preview will be in the light DOM, and can conflict with other things on the page.
-To only render the custom preview within the component’s shadow DOM, or to display raw text, you can wrap it in a `<template>` element:
-
-```html {.example}
-<wa-code-demo>
-  <template slot="preview">
-    <wa-button>Click me!</wa-button>
-  </template>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-### Including resources (CSS, scripts, etc.)
-
-Demos are rendered in the shadow DOM of the component, so any resources (stylesheets, scripts, etc.) must be included anew.
-The same applies to isolated demos (see below), opening demos in a new tab, or editing them on CodePen.
-
-While you _could_ manually include all of these on every single demo, it would get tedious to write,
-and it would add noise for the reader.
-
-Instead, `<wa-code-demo>` provides several better ways to include resources.
-The core idea is that rather than specifying these resources over and over on each demo,
-you would **point to elements** which would then be cloned into the demo, at the beginning.
-
-There are two ways to point to elements:
-- Add a `wa-code-demo-include` class to them
-- Specify a CSS selector for which resources to look for in the demo’s `include` attribute.
-
-There are certain types of elements that are handled specially:
-- `<template>`: contents are cloned instead of the element itself.
-This is useful for including resources in your demo that you don't want rendered outside the demo.
-
-The following example shows both methods.
-It includes all stylesheets on this page whose URLs start with `/dist/styles/themes/`,
-plus any other elements with the class `.demo-import`, plus a CSS file with the class `wa-code-demo-include`:
-
-```html {.example}
-<template class="wa-code-demo-include-isolated">
-  <script type="module" src="/dist/webawesome.loader.js"></script>
-  <style>wa-callout { font-size: var(--wa-font-size-2xl) }</style>
-  <script>console.log('Hello!')</script>
-</template>
-<wa-code-demo include="link[rel=stylesheet]">
-  <pre><code class="language-html">
-    &lt;wa-callout&gt;Helloooo!&lt;/wa-callout&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-
-### Isolated viewports
-
-Often you may want to render your demo in a separate viewport, e.g. when it’s about a whole page.
-Or, you may want to sandbox it.
-For these cases, you can use the `viewport` attribute, which renders the demo in an iframe:
-
-```html {.example}
-<wa-code-demo viewport>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-### Viewport Emulation
-
-When you use the `viewport` attribute, `<wa-code-demo>` uses [`<wa-viewport-demo>`](../viewport-demo/) internally, and passes the value of `viewport` to it.
-This allows you to also also provide a width value to emulate and it will be scaled accordingly:
-
-```html {.example}
-<wa-code-demo viewport="300">
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-Or both a width and a height value:
-
-```html {.example}
-<wa-code-demo viewport="1600 x 1000">
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-  </code></pre>
-</wa-code-demo>
-```
-
-If you only provide a width value, the viewport will be rendered to an initial 16:9 aspect ratio,
-which can be changed via resizing.
-You can customize this via the `--viewport-initial-aspect-ratio` property.
-
-### Isolated demos with resources
-
-Including resources in isolated demos works the same way.
-Any relative URLs are still resolved relative to the host document.
-In addition to the `wa-code-demo-include` class, which specifies resources to be included in *every* demo,
-you can also use the `wa-code-demo-include-isolated` class which specifies resources to be included in every *isolated* demo,
-i.e. the previews of demos using the `viewport` attribute, but also opening demos in a new tab or editing them on CodePen.
-
-```html {.example}
-<template class="wa-code-demo-include-isolated">
-  <script type="module" src="{% cdnUrl 'webawesome.loader.js' %}"></script>
-  <style>
-    body {
-      padding: var(--wa-space-l);
-    }
-    wa-callout { font-size: var(--wa-font-size-2xl) }
-  </style>
-  <script>console.log('Hello from iframe!')</script>
-</template>
-<wa-code-demo viewport include="link[rel=stylesheet]">
-  <pre><code class="language-html">
-    &lt;wa-callout&gt;Helloooo!&lt;/wa-callout&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-## Styling
-
-Just setting `border-radius` or `border` should work as expected:
-
-```html{.example}
-<wa-code-demo style="border: 2px dotted var(--wa-color-blue-50); border-radius: var(--wa-border-radius-m)">
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-The divider width is controlled separately via `--divider-width`:
-
-```html{.example}
-<wa-code-demo open style="border-width: var(--wa-border-width-l); --divider-width: var(--wa-border-width-m);">
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-## Roadmap
-
-This component is a work in progress.
-Some of the things that are not yet implemented are listed below.
-It goes without saying that this list is a rough plan and subject to change.
-
-### High priority
-
-- Make the component dynamic so that when the code changes, the demo is updated
-
-### Low priority
-
-- Horizontal layout
-- Tabbed layout
-- Provide a way to display CSS and JS separately
-- Provide a way to customize the playground used (currently it is hardcoded to CodePen)
-- Provide a way to customize the buttons shown

docs/docs/components/page-samples/documentation.md

@@ -1,237 +0,0 @@
----
-title: Sample Documentation Page
-description: A sample page for a documentation website using Web Awesome's page component.
-layout: blank
-eleventyExcludeFromCollections: true
----
-
-<style>
-  wa-page {
-    --menu-width: 15rem;
-    --aside-width: 15rem;
-  }
-
-  wa-page[view='mobile'] {
-    --menu-width: auto;
-    --aside-width: auto;
-  }
-  wa-page[view='mobile'] [slot='aside'] {
-    display: none;
-  }
-  wa-page[view='mobile'] #brand-name {
-    display: none;
-  }
-  wa-page[view='mobile'] #search {
-    display: none;
-  }
-  [slot='banner'] {
-    --wa-color-text-link: var(--wa-color-neutral-on-loud);
-    background-color: var(--wa-color-neutral-fill-loud);
-  }
-  [slot='header'] {
-    --wa-link-decoration-default: none;
-    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot*='header'] a {
-    font-weight: var(--wa-font-weight-action);
-  }
-  [slot='subheader'] {
-    background-color: var(--wa-color-surface-lowered);
-    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot='navigation-header'] {
-    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  wa-page[view='desktop'] [slot*='navigation'] {
-    border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot*='navigation'] a {
-    --wa-color-text-link: var(--wa-color-text-normal);
-  }
-  [slot='navigation-footer'] {
-    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot='main-header'],
-  main,
-  [slot='main-footer'] {
-    max-inline-size: 60rem;
-    margin-inline: auto;
-  }
-  [slot='main-footer'] {
-    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot='footer'] {
-    --wa-color-text-link: var(--wa-color-text-quiet);
-    background-color: var(--wa-color-surface-lowered);
-    font-size: var(--wa-font-size-s);
-  }
-</style>
-
-<wa-page mobile-breakpoint="920">
-  <div slot="banner" class="wa-body-s">
-    <a href="#" class="wa-cluster wa-align-items-baseline wa-gap-xs" style="flex-wrap: nowrap;">
-      <wa-icon name="gift"></wa-icon>
-      <span>Give a Hoot for the Holidays: Donate now and double your impact.</span>
-    </a>
-  </div>
-  <header slot="header" class="wa-split">
-    <div class="wa-cluster">
-      <wa-icon name="feather-pointed" style="color: var(--wa-color-brand-fill-loud); font-size: 1.5em;"></wa-icon>
-      <span id="brand-name" class="wa-heading-s">Audubon Worldwide</span>
-      <a href="#">Our Work</a>
-      <a href="#">About Us</a>
-      <a href="#">Discover</a>
-      <a href="#">Get Involved</a>
-    </div>
-    <div class="wa-cluster wa-gap-xs">
-      <wa-button size="small" variant="brand" appearance="outlined">Find Your Local Audubon</wa-button>
-      <wa-button size="small" variant="brand">Donate</wa-button>
-    </div>
-  </header>
-  <nav slot="subheader">
-    <div class="wa-cluster" style="flex-wrap: nowrap;">
-      <wa-icon-button data-toggle-nav name="bars" label="Menu"></wa-icon-button>
-      <wa-breadcrumb style="font-size: var(--wa-font-size-s);">
-        <wa-breadcrumb-item>Field Guides</wa-breadcrumb-item>
-        <wa-breadcrumb-item>Owls</wa-breadcrumb-item>
-        <wa-breadcrumb-item>Great Horned Owl</wa-breadcrumb-item>
-      </wa-breadcrumb>
-    </div>
-    <wa-input id="search" placeholder="Search" size="small" style="max-inline-size: 12rem;">
-      <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
-    </wa-input>
-  </nav>
-  <nav slot="navigation-header">
-    <div class="wa-flank">
-      <wa-avatar image="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" label=""></wa-avatar>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Great Horned Owl</span>
-        <span class="wa-caption-s" lang="la"><em>Bubo virginianus</em></span>
-      </div>
-    </div>
-  </nav>
-  <nav slot="navigation">
-    <a href="#identification">Identification</a>
-    <a href="#range">Range and Habitat</a>
-    <a href="#behavior">Behavior</a>
-    <a href="#conservation">Conservation</a>
-  </nav>
-  <nav slot="navigation-footer">
-    <a href="#" class="wa-flank" style="--flank-size: 1.25em;">
-      <wa-icon name="camera"></wa-icon>
-      <span>Photo Gallery</span>
-    </a>
-    <a href="#" class="wa-flank" style="--flank-size: 1.25em;">
-      <wa-icon name="map-location-dot"></wa-icon>
-      <span>Interactive Range Map</span>
-    </a>
-  </nav>
-  <header slot="main-header">
-    <div class="wa-flank:end wa-border-radius-l wa-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
-      <div class="wa-stack" style="margin: var(--wa-space-2xl);">
-        <h1>Great Horned Owl</h1>
-        <wa-divider></wa-divider>
-        <div class="wa-cluster wa-gap-xs">
-          <wa-tag size="small">Owls</wa-tag>
-          <wa-tag size="small">Birds of Prey</wa-tag>
-          <wa-tag size="small">Pleistocene Birds</wa-tag>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="ruler"></wa-icon>
-          <span class="wa-caption-m">L 21.5" | WS 48.5"</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="earth-americas"></wa-icon>
-          <span class="wa-caption-m">North America (Widespread), Central America (Limited), South America (Limited)</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="shield-heart"></wa-icon>
-          <span class="wa-caption-m">Least Concern</span>
-        </div>
-      </div>
-      <div class="wa-frame" style="wa-border-radius-l max-inline-size: 40ch;">
-        <img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
-      </div>
-    </div>
-  </header>
-  <main class="wa-body-l">
-    <h2 id="identification">Identification</h2>
-    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Eget habitant scelerisque lectus ultrices nascetur aliquet sapien primis. Cursus sapien fusce semper nulla elit sociosqu lectus per sem. Sem ad porttitor dictum nisl pharetra tortor convallis. Sit molestie hendrerit porta dictum tortor posuere euismod magna. Mauris suspendisse pharetra finibus; eleifend etiam ridiculus.</p>
-    <h2 id="range">Range and Habitat</h2>
-    <p>Diam sed ipsum pretium porttitor class cubilia elementum. Blandit felis ligula habitant ultricies vulputate rutrum lacus commodo pulvinar. Nostra semper placerat lectus in dis eu. Sagittis ipsum placerat rhoncus lacus id eget. Erat pharetra aptent enim, augue accumsan ultricies inceptos habitasse. Senectus id maximus parturient tellus; fermentum posuere vulputate luctus. Ac tempus dapibus vehicula ligula ullamcorper sit duis.</p>
-    <h2 id="behavior">Behavior</h2>
-    <p>Erat vitae luctus arcu taciti malesuada pretium arcu justo primis. Cubilia vitae maecenas congue velit id netus arcu. Dictum vel pellentesque taciti fermentum risus consectetur amet. Faucibus commodo habitasse sem maximus praesent purus, dignissim tristique porta. Platea magna justo ipsum ut metus ac facilisi. Imperdiet laoreet pharetra maximus lacus tortor suscipit. Nam quisque iaculis orci porttitor pellentesque rhoncus. Molestie sagittis tincidunt quisque nisi non urna conubia.</p>
-    <h2 id="conservation">Conservation</h2>
-    <p>Nullam magna quam quisque eu varius integer. Inceptos donec facilisi risus himenaeos semper mollis habitasse. Vehicula lacus vivamus euismod pharetra mollis dictum. Ante ex tortor elementum eleifend habitasse orci aliquam. Fames erat senectus fames etiam dapibus cursus.</p>
-  </main>
-  <footer slot="main-footer">
-    <section>
-      <h2 class="wa-heading-m">Sources</h2>
-      <ul class="wa-body-s">
-        <li><cite><a href="https://www.audubon.org/field-guide/bird/great-horned-owl" target="_blank" rel="noopener">Great Horned Owl</a></cite>, National Audubon Society. Retrieved 5 December 2024.</li>
-        <li><cite><a href="https://www.allaboutbirds.org/guide/Great_Horned_Owl/" target="_blank" rel="noopener">Great Horned Owl</a></cite>, All About Birds by CornellLab. Retrieved 5 December 2024.</li>
-        <li>Armistead, G. L. (2015). <cite>Field guide to birds of Pennsylvania</cite>. Scott & Nix, Inc.</li>
-      </ul>
-    </section>
-  </footer>
-  <aside slot="aside">
-    <h2 class="wa-heading-m">Discover More Birds</h2>
-    <wa-card with-image>
-      <div slot="image" class="wa-frame">
-        <img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
-      </div>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Long-eared Owl</span>
-        <span class="wa-caption-s" lang="la"><em>Asio otus</em></span>
-      </div>
-    </wa-card>
-    <wa-card with-image>
-      <div slot="image" class="wa-frame">
-        <img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
-      </div>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Northen Hawk Owl</span>
-        <span class="wa-caption-s" lang="la"><em>Surnia ulula</em></span>
-      </div>
-    </wa-card>
-    <wa-card with-image>
-      <div slot="image" class="wa-frame">
-        <img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
-      </div>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Golden Eagle</span>
-        <span class="wa-caption-s" lang="la"><em>Aquila chrysaetos</em></span>
-      </div>
-    </wa-card>
-  </aside>
-  <footer slot="footer" class="wa-grid wa-gap-xl">
-    <div class="wa-cluster" style="flex-wrap: nowrap;">
-      <wa-icon name="feather-pointed" style="font-size: 1.5em;"></wa-icon>
-      <span class="wa-heading-s">Audubon Worldwide</span>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">Our Work</h3>
-      <a href="#">Habitat Restoration</a>
-      <a href="#">Migration Science</a>
-      <a href="#">Advocacy</a>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">About Us</h3>
-      <a href="#">Our History</a>
-      <a href="#">Leadership</a>
-      <a href="#">Fiscal Reports</a>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">Discover</h3>
-      <a href="#">Field Guides</a>
-      <a href="#">Photo Search</a>
-      <a href="#">Gear and Resources</a>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">Get Involved</h3>
-      <a href="#">Adopt a Bird</a>
-      <a href="#">Your Local Audubon</a>
-      <a href="#">Youth Audubon Camps</a>
-    </div>
-  </footer>
-</wa-page>

docs/docs/components/page-samples/media-app.md

@@ -1,400 +0,0 @@
----
-title: Sample Media App Page
-description: A sample page for a media app using Web Awesome's page component.
-layout: blank
-eleventyExcludeFromCollections: true
----
-
-<wa-page class="wa-dark">
-  <header slot="header">
-    <div class="wa-cluster">
-      <wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
-      <wa-icon name="record-vinyl" family="duotone"></wa-icon>
-      <span class="wa-heading-m">radiogaga</span>
-    </div>
-    <wa-input placeholder="Search" style="max-inline-size: 100%;">
-      <wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
-    </wa-input>
-    <div class="wa-cluster">
-      <wa-button appearance="outlined">Log In</wa-button>
-      <wa-button>Sign Up</wa-button>
-    </div>
-  </header>
-  <div slot="navigation-header" class="wa-split">
-    <h2 class="wa-heading-s">For You</h2>
-    <wa-icon-button id="settings" name="gear" label="Settings"></wa-icon-button>
-  </div>
-  <nav slot="navigation">
-    <h3 class="wa-heading-xs">Discover</h3>
-    <ul class="wa-stack wa-gap-0">
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="house"></wa-icon>
-          <span>Home</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="sparkles"></wa-icon>
-          <span>New</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="tower-broadcast"></wa-icon>
-          <span>Stations</span>
-        </a>
-      </li>
-    </ul>
-    <h3 class="wa-heading-xs">Library</h3>
-    <ul class="wa-stack wa-gap-0">
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="heart"></wa-icon>
-          <span>Favorites</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="list-music"></wa-icon>
-          <span>Playlists</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="microphone-stand"></wa-icon>
-          <span>Artists</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="grid-2"></wa-icon>
-          <span>Albums</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="podcast"></wa-icon>
-          <span>Podcasts</span>
-        </a>
-      </li>
-    </ul>
-    <h3 class="wa-heading-xs">Recently Played</h3>
-    <ul id="recent" class="wa-stack wa-gap-0">
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="cassette-tape" style="background: var(--wa-color-red-90); color: var(--wa-color-red-60);"></wa-icon>
-          <span>Lo-Fi Station</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="face-awesome" style="background: var(--wa-color-blue-30); color: var(--wa-color-yellow-90);"></wa-icon>
-          <span>Podcast Awesome</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="seedling" style="background: var(--wa-color-green-70); color: var(--wa-color-green-90);"></wa-icon>
-          <div class="wa-stack wa-gap-0">
-            <span>Seasons</span>
-            <span class="wa-caption-s">Blister Soul</span>
-          </div>
-        </a>
-      </li>
-    </ul>
-  </nav>
-  <div slot="main-header">
-    <wa-icon-button id="back" name="chevron-left" label="Back"></wa-icon-button>
-    <wa-tooltip for="back" placement="bottom" distance="2">Back</wa-tooltip>
-    <div class="wa-cluster">
-      <wa-icon-button id="favorite" name="heart" variant="regular" label="Favorite"></wa-icon-button>
-      <wa-tooltip for="favorite" placement="bottom" distance="2">Favorite</wa-tooltip>
-      <wa-icon-button id="options" name="ellipsis" label="Options"></wa-icon-button>
-      <wa-tooltip for="options" placement="bottom" distance="2">Options</wa-tooltip>
-    </div>
-  </div>
-  <main>
-    <div class="wa-stack wa-gap-3xl">
-      <div class="wa-flank wa-gap-3xl" style="--flank-size: 35%; --content-percentage: 55%;">
-        <div class="wa-frame wa-border-radius-l" style="max-inline-size: 40ch;">
-          <img src="https://images.unsplash.com/photo-1732430579016-8d5e5ebd3c99?q=20" alt="Home for the Holidays album artwork" />
-        </div>
-        <div class="wa-split:column wa-align-items-start">
-          <div class="wa-stack" style="margin-block: auto;">
-            <h1 class="wa-heading-3xl">Home for the Holidays</h1>
-            <a href="#" class="wa-heading-m">The Shire Choir</a>
-            <div class="wa-cluster wa-caption-m wa-gap-2xs">
-              <span>Holiday</span>
-              <span>&bull;</span>
-              <span>2024</span>
-              <span>&bull;</span>
-              <span>12 songs, 41 minutes 9 seconds</span>
-            </div>
-          </div>
-          <div id="play-controls" class="wa-split wa-gap-xl">
-            <div class="wa-cluster wa-gap-xl">
-              <wa-icon-button name="play" label="Play"></wa-icon-button>
-              <wa-icon-button name="shuffle" label="Shuffle"></wa-icon-button>
-            </div>
-            <wa-icon-button name="plus" label="Add to Library"></wa-icon-button>
-          </div>
-        </div>
-      </div>
-      <ol class="wa-stack wa-gap-0">
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="1"></wa-icon>
-            <span>Fa-La-La-Fellowship</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:27</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="2"></wa-icon>
-            <span>Sleigh Ride</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:36</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="3"></wa-icon>
-            <span>All I Want For Christmas Is Stew</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:51</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="4"></wa-icon>
-            <span>Rockin' Around the Christmas Ent</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:05</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="5"></wa-icon>
-            <span>Merry, Did You Know?</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">1:56</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="6"></wa-icon>
-            <span>Run Run Shadowfax</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:32</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="7"></wa-icon>
-            <span>You're a Mean One, Mr. Grima</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:46</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="8"></wa-icon>
-            <span>O Come, All Ye Faithful</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:27</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="9"></wa-icon>
-            <span>Do You Hear What I Hear</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:13</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <span class="wa-cluster wa-gap-3xs">
-              <wa-icon name="1"></wa-icon>
-              <wa-icon name="0"></wa-icon>
-            </span>
-            <span>Carol of the Horns</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:55</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <span class="wa-cluster wa-gap-3xs">
-              <wa-icon name="1"></wa-icon>
-              <wa-icon name="1"></wa-icon>
-            </span>
-            <span>Silent Night</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:10</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <span class="wa-cluster wa-gap-3xs">
-              <wa-icon name="1"></wa-icon>
-              <wa-icon name="2"></wa-icon>
-            </span>
-            <span>Wizard Wonderland</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:22</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-      </ol>
-    </div>
-  </main>
-  <div slot="main-footer" class="wa-grid wa-gap-xl">
-    <h2 class="wa-heading-2xl">More You Might Like</h2>
-    <div class="wa-stack wa-gap-xs">
-      <div class="wa-frame wa-border-radius-l">
-        <img src="https://images.unsplash.com/photo-1675219119611-40323b738563?q=20" alt="" />
-      </div>
-      <span class="wa-heading-s">Festival of Lights</span>
-      <span class="wa-caption-s">Station</span>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <div class="wa-frame wa-border-radius-l">
-        <img src="https://images.unsplash.com/photo-1481930916222-5ec4696fc0f2?q=20" alt="" />
-      </div>
-      <span class="wa-heading-s">Holiday Cheer</span>
-      <span class="wa-caption-s">Essential Playlist</span>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <div class="wa-frame wa-border-radius-l">
-        <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="" />
-      </div>
-      <span class="wa-heading-s">Nursery Rhymes from the Shire</span>
-      <span class="wa-caption-s">The Shire Choir</span>
-    </div>
-  </div>
-</wa-page>
-
-<style>
-  wa-page {
-    --menu-width: 18rem;
-    --wa-tooltip-arrow-size: 0;
-    background-color: var(--wa-color-surface-lowered);
-  }
-
-  wa-page[view='mobile'] {
-    --menu-width: auto;
-  }
-  wa-page,
-  [slot='header'],
-  wa-page[view='desktop'] [slot*='navigation'] {
-    background-color: var(--wa-color-surface-lowered);
-  }
-  wa-page[view='mobile'] [slot*='navigation'] {
-    padding: 0;
-  }
-  wa-page::part(base) {
-    background-color: var(--wa-color-surface-lowered);
-  }
-  [slot='header'] {
-    background: linear-gradient(to bottom, var(--wa-color-surface-raised), var(--wa-color-surface-lowered));
-  }
-  [slot='navigation-header'],
-  [slot='main-header'] {
-    padding-block-end: 0;
-  }
-  [slot='navigation'] a {
-    --wa-color-text-link: var(--wa-color-text-normal);
-    --wa-link-decoration-default: none;
-    --wa-link-decoration-hover: none;
-    --flank-size: 2rem;
-    font-weight: var(--wa-font-weight-action);
-    gap: 0.5rem;
-  }
-  [slot='navigation'] ul {
-    list-style: none;
-    margin: 0;
-  }
-  [slot='navigation'] ul a {
-    border-radius: var(--wa-border-radius-m);
-    padding: var(--wa-space-xs);
-  }
-  [slot='navigation'] ul a:hover,
-  main ol li:hover {
-    background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
-  }
-  [slot='navigation'] wa-icon {
-    align-items: center;
-    aspect-ratio: 1;
-    color: var(--wa-color-brand-fill-loud);
-    display: flex;
-    height: var(--flank-size);
-    justify-content: center;
-  }
-  [slot='navigation'] #recent wa-icon {
-    border-radius: var(--wa-border-radius-s);
-  }
-  [slot='main-header'] {
-    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-    border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0
-  }
-  main,
-  [slot*='main'] {
-    margin-inline: var(--wa-space-m);
-  }
-  main ol li {
-    padding: var(--wa-space-m);
-  }
-  main ol li .wa-flank {
-    --flank-size: 2rem;
-  }
-  main ol li:not(:first-child) {
-    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  main,
-  [slot='main-footer'] {
-    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  main,
-  [slot='main-header'] {
-    background-color: var(--wa-color-surface-raised);
-  }
-  #play-controls wa-icon-button::part(base) {
-    border: var(--wa-border-width-l) var(--wa-border-style) currentColor;
-    border-radius: var(--wa-border-radius-circle);
-    font-size: 1.5rem;
-  }
-  #play-controls wa-icon-button[name="play"]::part(base) {
-    background-color: var(--wa-color-brand-fill-loud);
-    border: none;
-    color: var(--wa-color-brand-on-loud);
-    font-size: 3rem;
-    padding: 1.5rem;
-  }
-</style>

docs/docs/components/page.md

@@ -1,888 +0,0 @@
----
-title: Page
-description: Pages offer an easy way to scaffold entire page layouts using minimal markup.
-tags: [pro, organization, layout]
-isPro: true
-order: 0
-# icon: page
----
-
-The page component is designed to power full webpages. It is flexible enough to handle most modern designs and includes a simple mechanism for handling desktop and mobile navigation.
-
-## Layout Anatomy
-
-This image depicts a page's anatomy, including the default positions of each section. The labels represent the [named slots](#slots) you can use to populate them.
-
-Most slots are optional. Slots that have no content will not be shown, allowing you to opt-in to just the sections you actually need.
-
-{% include "page-demo.njk" %}
-
-<!-- ![Screenshot of Layout Anatomy showing various slots](/assets/images/layout-anatomy.svg) -->
-
-## Using `wa-page`
-
-:::info
-If you're not familiar with how slots work in HTML, you might want to [learn more about slots](/docs/usage/#slots) before using this component.
-:::
-
-A number of sections are available as part of the page component, most of which are optional. Content is populated by [slotting elements](/docs/usage/#slots) into various locations.
-
-This component _does not_ implement any [content sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning) or "semantic elements" internally (such as `<main>`, `<header>`, `<footer>`, etc.). Instead, we recommended that you slot in content sectioning elements wherever you feel they're appropriate.
-
-When using `<wa-page>`, make sure to zero out all paddings and margins on `<html>` and `<body>`, otherwise you may see unexpected gaps. We highly recommend adding the following styles when using `<wa-page>`:
-
-```css
-html,
-body {
-  min-height: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-}
-```
-
-::info
-If you use [native styles](/docs/native/), this is already taken care of.
-:::
-
-## Examples
-
-:::warning
-Open demos in a new tab to examine their behavior in different window sizes.
-The previews below use simulated zooming which, depending on your browser, may not be accurate.
-:::
-
-### Documentation
-
-A sample documentation page using [all available slots](#slots).
-The navigation menu collapses into a drawer at a custom `mobile-breakpoint` of 920px.
-It can be opened using a button with `[data-toggle-nav]` that appears in the `subheader` slot. The `aside` slot is also hidden below 920px.
-
-```html {.example viewport="1600"}
-<wa-page mobile-breakpoint="920">
-  <div slot="banner" class="wa-body-s">
-    <a href="#" class="wa-cluster wa-align-items-baseline wa-gap-xs" style="flex-wrap: nowrap;">
-      <wa-icon name="gift"></wa-icon>
-      <span>Give a Hoot for the Holidays: Donate now and double your impact.</span>
-    </a>
-  </div>
-  <header slot="header" class="wa-split">
-    <div class="wa-cluster">
-      <wa-icon name="feather-pointed" style="color: var(--wa-color-brand-fill-loud); font-size: 1.5em;"></wa-icon>
-      <span id="brand-name" class="wa-heading-s wa-desktop-only">Audubon Worldwide</span>
-      <a href="#">Our Work</a>
-      <a href="#">About Us</a>
-      <a href="#">Discover</a>
-      <a href="#">Get Involved</a>
-    </div>
-    <div class="wa-cluster wa-gap-xs">
-      <wa-button size="small" variant="brand" appearance="outlined">Find Your Local Audubon</wa-button>
-      <wa-button size="small" variant="brand">Donate</wa-button>
-    </div>
-  </header>
-  <nav slot="subheader">
-    <div class="wa-cluster" style="flex-wrap: nowrap;">
-      <wa-icon-button data-toggle-nav name="bars" label="Menu"></wa-icon-button>
-      <wa-breadcrumb style="font-size: var(--wa-font-size-s);">
-        <wa-breadcrumb-item>Field Guides</wa-breadcrumb-item>
-        <wa-breadcrumb-item>Owls</wa-breadcrumb-item>
-        <wa-breadcrumb-item>Great Horned Owl</wa-breadcrumb-item>
-      </wa-breadcrumb>
-    </div>
-    <wa-input id="search" class="wa-desktop-only" placeholder="Search" size="small" style="max-inline-size: 12rem;">
-      <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
-    </wa-input>
-  </nav>
-  <nav slot="navigation-header">
-    <div class="wa-flank">
-      <wa-avatar image="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" label=""></wa-avatar>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Great Horned Owl</span>
-        <span class="wa-caption-s" lang="la"><em>Bubo virginianus</em></span>
-      </div>
-    </div>
-  </nav>
-  <nav slot="navigation">
-    <a href="#identification">Identification</a>
-    <a href="#range">Range and Habitat</a>
-    <a href="#behavior">Behavior</a>
-    <a href="#conservation">Conservation</a>
-  </nav>
-  <nav slot="navigation-footer">
-    <a href="#" class="wa-flank">
-      <wa-icon name="camera"></wa-icon>
-      <span>Photo Gallery</span>
-    </a>
-    <a href="#" class="wa-flank">
-      <wa-icon name="map-location-dot"></wa-icon>
-      <span>Interactive Range Map</span>
-    </a>
-  </nav>
-  <header slot="main-header">
-    <div class="wa-flank:end wa-border-radius-l wa-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
-      <div class="wa-stack" style="margin: var(--wa-space-2xl);">
-        <h1>Great Horned Owl</h1>
-        <wa-divider></wa-divider>
-        <div class="wa-cluster wa-gap-xs">
-          <wa-tag size="small">Owls</wa-tag>
-          <wa-tag size="small">Birds of Prey</wa-tag>
-          <wa-tag size="small">Pleistocene Birds</wa-tag>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="ruler"></wa-icon>
-          <span class="wa-caption-m">L 21.5" | WS 48.5"</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="earth-americas"></wa-icon>
-          <span class="wa-caption-m">North America (Widespread), Central America (Limited), South America (Limited)</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="shield-heart"></wa-icon>
-          <span class="wa-caption-m">Least Concern</span>
-        </div>
-      </div>
-      <div class="wa-frame" style="border-radius: var(--wa-border-radius-l); max-inline-size: 40ch;">
-        <img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
-      </div>
-    </div>
-  </header>
-  <main class="wa-body-l">
-    <h2 id="identification">Identification</h2>
-    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Eget habitant scelerisque lectus ultrices nascetur aliquet sapien primis. Cursus sapien fusce semper nulla elit sociosqu lectus per sem. Sem ad porttitor dictum nisl pharetra tortor convallis. Sit molestie hendrerit porta dictum tortor posuere euismod magna. Mauris suspendisse pharetra finibus; eleifend etiam ridiculus.</p>
-    <h2 id="range">Range and Habitat</h2>
-    <p>Diam sed ipsum pretium porttitor class cubilia elementum. Blandit felis ligula habitant ultricies vulputate rutrum lacus commodo pulvinar. Nostra semper placerat lectus in dis eu. Sagittis ipsum placerat rhoncus lacus id eget. Erat pharetra aptent enim, augue accumsan ultricies inceptos habitasse. Senectus id maximus parturient tellus; fermentum posuere vulputate luctus. Ac tempus dapibus vehicula ligula ullamcorper sit duis.</p>
-    <h2 id="behavior">Behavior</h2>
-    <p>Erat vitae luctus arcu taciti malesuada pretium arcu justo primis. Cubilia vitae maecenas congue velit id netus arcu. Dictum vel pellentesque taciti fermentum risus consectetur amet. Faucibus commodo habitasse sem maximus praesent purus, dignissim tristique porta. Platea magna justo ipsum ut metus ac facilisi. Imperdiet laoreet pharetra maximus lacus tortor suscipit. Nam quisque iaculis orci porttitor pellentesque rhoncus. Molestie sagittis tincidunt quisque nisi non urna conubia.</p>
-    <h2 id="conservation">Conservation</h2>
-    <p>Nullam magna quam quisque eu varius integer. Inceptos donec facilisi risus himenaeos semper mollis habitasse. Vehicula lacus vivamus euismod pharetra mollis dictum. Ante ex tortor elementum eleifend habitasse orci aliquam. Fames erat senectus fames etiam dapibus cursus.</p>
-  </main>
-  <footer slot="main-footer">
-    <section>
-      <h2 class="wa-heading-m">Sources</h2>
-      <ul class="wa-body-s">
-        <li><cite><a href="https://www.audubon.org/field-guide/bird/great-horned-owl" target="_blank" rel="noopener">Great Horned Owl</a></cite>, National Audubon Society. Retrieved 5 December 2024.</li>
-        <li><cite><a href="https://www.allaboutbirds.org/guide/Great_Horned_Owl/" target="_blank" rel="noopener">Great Horned Owl</a></cite>, All About Birds by CornellLab. Retrieved 5 December 2024.</li>
-        <li>Armistead, G. L. (2015). <cite>Field guide to birds of Pennsylvania</cite>. Scott & Nix, Inc.</li>
-      </ul>
-    </section>
-  </footer>
-  <aside slot="aside" class="wa-desktop-only">
-    <h2 class="wa-heading-m">Discover More Birds</h2>
-    <wa-card with-image>
-      <div slot="image" class="wa-frame">
-        <img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
-      </div>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Long-eared Owl</span>
-        <span class="wa-caption-s" lang="la"><em>Asio otus</em></span>
-      </div>
-    </wa-card>
-    <wa-card with-image>
-      <div slot="image" class="wa-frame">
-        <img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
-      </div>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Northen Hawk Owl</span>
-        <span class="wa-caption-s" lang="la"><em>Surnia ulula</em></span>
-      </div>
-    </wa-card>
-    <wa-card with-image>
-      <div slot="image" class="wa-frame">
-        <img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
-      </div>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Golden Eagle</span>
-        <span class="wa-caption-s" lang="la"><em>Aquila chrysaetos</em></span>
-      </div>
-    </wa-card>
-  </aside>
-  <footer slot="footer" class="wa-grid wa-gap-xl">
-    <div class="wa-cluster" style="flex-wrap: nowrap;">
-      <wa-icon name="feather-pointed" style="font-size: 1.5em;"></wa-icon>
-      <span class="wa-heading-s">Audubon Worldwide</span>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">Our Work</h3>
-      <a href="#">Habitat Restoration</a>
-      <a href="#">Migration Science</a>
-      <a href="#">Advocacy</a>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">About Us</h3>
-      <a href="#">Our History</a>
-      <a href="#">Leadership</a>
-      <a href="#">Fiscal Reports</a>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">Discover</h3>
-      <a href="#">Field Guides</a>
-      <a href="#">Photo Search</a>
-      <a href="#">Gear and Resources</a>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">Get Involved</h3>
-      <a href="#">Adopt a Bird</a>
-      <a href="#">Your Local Audubon</a>
-      <a href="#">Youth Audubon Camps</a>
-    </div>
-  </footer>
-</wa-page>
-
-<style>
-  wa-page {
-    --menu-width: 15rem;
-    --aside-width: 15rem;
-  }
-  wa-page[view='desktop'] {
-    [slot*='navigation'] {
-      border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-    }
-  }
-  wa-page[view='mobile'] {
-    --menu-width: auto;
-    --aside-width: auto;
-  }
-
-  [slot='banner'] {
-    --wa-color-text-link: var(--wa-color-neutral-on-loud);
-    background-color: var(--wa-color-neutral-fill-loud);
-  }
-  [slot='header'] {
-    --wa-link-decoration-default: none;
-    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot*='header'] a {
-    font-weight: var(--wa-font-weight-action);
-  }
-  [slot='subheader'] {
-    background-color: var(--wa-color-surface-lowered);
-    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot='navigation-header'] {
-    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-
-  [slot*='navigation'] a {
-    --wa-color-text-link: var(--wa-color-text-normal);
-  }
-  [slot='navigation-footer'] {
-    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-
-    .wa-flank {
-      --flank-size: 1.25em;
-    }
-  }
-  [slot='main-header'],
-  main,
-  [slot='main-footer'] {
-    max-inline-size: 60rem;
-    margin-inline: auto;
-  }
-  [slot='main-footer'] {
-    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot='footer'] {
-    --wa-color-text-link: var(--wa-color-text-quiet);
-    background-color: var(--wa-color-surface-lowered);
-    font-size: var(--wa-font-size-s);
-  }
-</style>
-
-<script>
-  const sectionAnchors = document.querySelectorAll("[slot*='navigation'] a[href*='#']");
-  sectionAnchors.forEach((sectionAnchor) => sectionAnchor.setAttribute("data-drawer", "close"));
-</script>
-```
-
-### Media
-
-A sample media app page using `header`, `navigation-header`, `main-header`, and `main-footer` along with the default slot. The navigation menu collapses into a drawer at the default `mobile-breakpoint` and can be opened using a button with `[data-toggle-nav]` that appears in the `header` slot.
-
-```html {.example viewport="1600"}
-<wa-page class="wa-dark">
-  <header slot="header">
-    <div class="wa-cluster">
-      <wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
-      <wa-icon name="record-vinyl"></wa-icon>
-      <span class="wa-heading-m">radiogaga</span>
-    </div>
-    <wa-input id="search-header" placeholder="Search" class="wa-desktop-only" style="max-inline-size: 100%;">
-      <wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
-    </wa-input>
-    <div class="wa-cluster">
-      <wa-button appearance="outlined">Log In</wa-button>
-      <wa-button>Sign Up</wa-button>
-    </div>
-  </header>
-  <div slot="navigation-header" class="wa-split">
-    <wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%;" class="wa-mobile-only">
-      <wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
-    </wa-input>
-    <div class="wa-split">
-      <h2 class="wa-heading-s">For You</h2>
-      <wa-icon-button id="settings" name="gear" label="Settings"></wa-icon-button>
-    </div>
-  </div>
-  <nav slot="navigation">
-    <h3 class="wa-heading-xs">Discover</h3>
-    <ul class="wa-stack wa-gap-0">
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="house"></wa-icon>
-          <span>Home</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="star"></wa-icon>
-          <span>New</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="tower-broadcast"></wa-icon>
-          <span>Stations</span>
-        </a>
-      </li>
-    </ul>
-    <h3 class="wa-heading-xs">Library</h3>
-    <ul class="wa-stack wa-gap-0">
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="heart"></wa-icon>
-          <span>Favorites</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="bars-staggered"></wa-icon>
-          <span>Playlists</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="microphone-lines"></wa-icon>
-          <span>Artists</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="layer-group"></wa-icon>
-          <span>Albums</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="podcast"></wa-icon>
-          <span>Podcasts</span>
-        </a>
-      </li>
-    </ul>
-    <h3 class="wa-heading-xs">Recently Played</h3>
-    <ul id="recent" class="wa-stack wa-gap-0">
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="radio" style="background: var(--wa-color-red-90); color: var(--wa-color-red-60);"></wa-icon>
-          <span>Lo-Fi Station</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="font-awesome" style="background: var(--wa-color-blue-30); color: var(--wa-color-yellow-90);"></wa-icon>
-          <span>Podcast Awesome</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="seedling" style="background: var(--wa-color-green-70); color: var(--wa-color-green-90);"></wa-icon>
-          <div class="wa-stack wa-gap-0">
-            <span>Seasons</span>
-            <span class="wa-caption-s">Blister Soul</span>
-          </div>
-        </a>
-      </li>
-    </ul>
-  </nav>
-  <div slot="main-header">
-    <wa-icon-button id="back" name="chevron-left" label="Back"></wa-icon-button>
-    <wa-tooltip for="back" placement="bottom" distance="2">Back</wa-tooltip>
-    <div class="wa-cluster">
-      <wa-icon-button id="favorite" name="heart" variant="regular" label="Favorite"></wa-icon-button>
-      <wa-tooltip for="favorite" placement="bottom" distance="2">Favorite</wa-tooltip>
-      <wa-icon-button id="options" name="ellipsis" label="Options"></wa-icon-button>
-      <wa-tooltip for="options" placement="bottom" distance="2">Options</wa-tooltip>
-    </div>
-  </div>
-  <main>
-    <div class="wa-stack wa-gap-3xl">
-      <div class="wa-flank wa-gap-3xl" style="--content-percentage: 40%;">
-        <div class="wa-frame wa-border-radius-l" style="max-inline-size: 40ch;">
-          <img src="https://images.unsplash.com/photo-1732430579016-8d5e5ebd3c99?q=20" alt="Home for the Holidays album artwork" />
-        </div>
-        <div class="wa-split:column wa-align-items-start">
-          <div class="wa-stack" style="margin-block: auto;">
-            <h1 class="wa-heading-3xl">Home for the Holidays</h1>
-            <a href="#" class="wa-heading-m">The Shire Choir</a>
-            <div class="wa-cluster wa-caption-m wa-gap-2xs">
-              <span>Holiday</span>
-              <span>&bull;</span>
-              <span>2024</span>
-              <span>&bull;</span>
-              <span>12 songs, 41 minutes 9 seconds</span>
-            </div>
-          </div>
-          <div id="play-controls" class="wa-split wa-gap-xl">
-            <div class="wa-cluster wa-gap-xl">
-              <wa-icon-button name="play" label="Play"></wa-icon-button>
-              <wa-icon-button name="shuffle" label="Shuffle"></wa-icon-button>
-            </div>
-            <wa-icon-button name="plus" label="Add to Library"></wa-icon-button>
-          </div>
-        </div>
-      </div>
-      <ol class="wa-stack wa-gap-0">
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="1"></wa-icon>
-            <span>Fa-La-La-Fellowship</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:27</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="2"></wa-icon>
-            <span>Sleigh Ride</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:36</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="3"></wa-icon>
-            <span>All I Want For Christmas Is Stew</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:51</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="4"></wa-icon>
-            <span>Rockin' Around the Christmas Ent</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:05</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="5"></wa-icon>
-            <span>Merry, Did You Know?</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">1:56</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="6"></wa-icon>
-            <span>Run Run Shadowfax</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:32</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="7"></wa-icon>
-            <span>You're a Mean One, Mr. Grima</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:46</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="8"></wa-icon>
-            <span>O Come, All Ye Faithful</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:27</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="9"></wa-icon>
-            <span>Do You Hear What I Hear</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:13</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <span class="wa-cluster wa-gap-3xs">
-              <wa-icon name="1"></wa-icon>
-              <wa-icon name="0"></wa-icon>
-            </span>
-            <span>Carol of the Horns</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:55</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <span class="wa-cluster wa-gap-3xs">
-              <wa-icon name="1"></wa-icon>
-              <wa-icon name="1"></wa-icon>
-            </span>
-            <span>Silent Night</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:10</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <span class="wa-cluster wa-gap-3xs">
-              <wa-icon name="1"></wa-icon>
-              <wa-icon name="2"></wa-icon>
-            </span>
-            <span>Wizard Wonderland</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:22</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-      </ol>
-    </div>
-  </main>
-  <div slot="main-footer" class="wa-grid wa-gap-xl wa-align-items-center">
-    <h2 class="wa-heading-2xl">More You Might Like</h2>
-    <div class="wa-stack wa-gap-xs">
-      <div class="wa-frame wa-border-radius-l">
-        <img src="https://images.unsplash.com/photo-1675219119611-40323b738563?q=20" alt="" />
-      </div>
-      <span class="wa-heading-s">Festival of Lights</span>
-      <span class="wa-caption-s">Station</span>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <div class="wa-frame wa-border-radius-l">
-        <img src="https://images.unsplash.com/photo-1481930916222-5ec4696fc0f2?q=20" alt="" />
-      </div>
-      <span class="wa-heading-s">Holiday Cheer</span>
-      <span class="wa-caption-s">Essential Playlist</span>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <div class="wa-frame wa-border-radius-l">
-        <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="" />
-      </div>
-      <span class="wa-heading-s">Nursery Rhymes from the Shire</span>
-      <span class="wa-caption-s">The Shire Choir</span>
-    </div>
-  </div>
-</wa-page>
-
-<style>
-  wa-page {
-    --menu-width: 30ch;
-    --wa-tooltip-arrow-size: 0;
-    background-color: var(--wa-color-surface-lowered);
-  }
-
-  wa-page[view='mobile'] {
-    --menu-width: auto;
-
-    [slot*='main'], main {
-      padding: var(--wa-space-xl);
-    }
-  }
-
-  wa-page,
-  [slot='header'],
-  wa-page[view='desktop'] [slot*='navigation'] {
-    background-color: var(--wa-color-surface-lowered);
-  }
-  wa-page[view='mobile'] [slot*='navigation'] {
-    padding: 0;
-  }
-  wa-page::part(base) {
-    background-color: var(--wa-color-surface-lowered);
-  }
-  [slot='header'] {
-    background: linear-gradient(to bottom, var(--wa-color-surface-raised), var(--wa-color-surface-lowered));
-  }
-  [slot='navigation-header'],
-  [slot='main-header'] {
-    padding-block-end: 0 !important;
-    padding-block-start: var(--wa-space-3xl);
-  }
-  [slot='navigation'] {
-    a {
-      --wa-color-text-link: var(--wa-color-text-normal);
-      --wa-link-decoration-default: none;
-      --wa-link-decoration-hover: none;
-      --flank-size: 2rem;
-      font-weight: var(--wa-font-weight-action);
-      gap: 0.5rem;
-    }
-    ul {
-      list-style: none;
-      margin: 0;
-
-      a {
-        border-radius: var(--wa-border-radius-m);
-        padding: var(--wa-space-xs);
-
-        &:hover {
-          background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
-        }
-      }
-    }
-    wa-icon {
-      align-items: center;
-      aspect-ratio: 1;
-      color: var(--wa-color-brand-fill-loud);
-      display: flex;
-      height: var(--flank-size);
-      justify-content: center;
-    }
-    #recent wa-icon {
-      border-radius: var(--wa-border-radius-s);
-    }
-  }
-
-  [slot='main-header'] {
-    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-    border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0
-  }
-  main,
-  [slot*='main'] {
-    margin-inline: var(--wa-space-m);
-  }
-  main ol li {
-    padding: var(--wa-space-m);
-
-    &:hover {
-      background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
-    }
-
-    &:not(:first-child) {
-      border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-    }
-
-    .wa-flank {
-      --flank-size: 2rem;
-    }
-  }
-  main,
-  [slot='main-footer'] {
-    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  main,
-  [slot='main-header'] {
-    background-color: var(--wa-color-surface-raised);
-  }
-  #play-controls wa-icon-button::part(base) {
-    border: var(--wa-border-width-l) var(--wa-border-style) currentColor;
-    border-radius: var(--wa-border-radius-circle);
-    font-size: 1.5rem;
-  }
-  #play-controls wa-icon-button[name="play"]::part(base) {
-    background-color: var(--wa-color-brand-fill-loud);
-    border: none;
-    color: var(--wa-color-brand-on-loud);
-    font-size: 3rem;
-    padding: 0.5em 0.45em 0.5em 0.55em;
-  }
-  [slot='main-footer'].wa-grid > * {
-    max-inline-size: 30ch;
-  }
-</style>
-
-<script>
-  const sectionAnchors = document.querySelectorAll("[slot*='navigation'] a[href*='#']");
-  sectionAnchors.forEach((sectionAnchor) => sectionAnchor.setAttribute("data-drawer", "close"));
-</script>
-```
-
-
-## Customization
-
-### Sticky Sections
-
-The following sections of a page are "sticky" by default, meaning they remain in position as the user scrolls.
-
-- `banner`
-- `header`
-- `sub-header`
-- `menu` (`navigation` itself is not sticky, but its parent `menu` is)
-- `aside`
-
-This is often desirable, but you can change this behavior using the `disable-sticky` attribute. Use a space-delimited list of names to tell the page which sections should not be sticky.
-
-```html
-<wa-page disable-sticky="header aside"> ... </wa-page>
-```
-
-### Skip To Content
-
-The layout provides a "skip to content" link that's visually hidden until the user tabs into it. You don't have to do anything to configure this, unless you want to change the text displayed in the link. In that case, you can slot in your own text using the `skip-to-content` slot.
-
-This example localizes the "skip to content" link for German users.
-
-```html
-<wa-page>
-  ...
-  <span slot="skip-to-content">Zum Inhalt springen</span>
-  ...
-</wa-page>
-```
-
-### Responsiveness
-
-A page isn't very opinionated when it comes to responsive behaviors, but there are tools in place to help make responsiveness easy.
-
-#### Default Slot Styles
-
-Each slot is a [flex container](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container) and specifies some flex properties so that your content is reasonably responsive by default.
-
-The following slots specify `justify-content: space-between` and `flex-wrap: wrap` to evenly distribute child elements horizontally and allow them to wrap when space is limited:
-- `header`
-- `subheader`
-- `main-header`
-- `main-footer`
-- `footer`
-
-The following slots specify `flex-direction: column` to arrange child elements vertically:
-- `navigation-header`
-- `navigation` (or `menu`)
-- `navigation-footer`
-- `aside`
-
-And the `banner` slot specifies `justify-content: center` to horizontally center its child elements.
-
-You can override the default display and flex properties for each slot with your own CSS.
-
-#### Responsive Navigation
-
-When you use the `navigation` slot, your slotted content automatically collapses into a drawer on smaller screens.
-The breakpoint at which this occurs is `768px` by default, but you can change it using the `mobile-breakpoint` attribute,
-which takes either a number or a [CSS length](https://developer.mozilla.org/en-US/docs/Web/CSS/length).
-
-```html
-<wa-page mobile-breakpoint="600"> ... </wa-page>
-```
-```html {.example viewport}
-<wa-page mobile-breakpoint="50ch">
-  <div slot=navigation>Nav</div>
-  <header slot=header>
-    <div style="width: 50ch; background: gold">I’m 50ch wide</div>
-  </header>
-</wa-page>
-<style>
-html,
-body {
-  min-height: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-}
-</style>
-```
-
-By default, a "hamburger" button appears in the `header` slot to toggle the navigation menu on smaller screens.
-You can customize what this looks like by slotting your own button in the `toggle-navigation` slot,
-or place the `data-toggle-nav` attribute on any button on your page (This _does not_ have to be a Web Awesome element.).
-The default button not be shown when using either of these methods — if you want to use multiple navigation toggles on your page, simply add the `data-toggle-nav` attribute to multiple elements.
-
-```html
-<wa-page mobile-breakpoint="600">
-  ...
-  <wa-button data-toggle-nav>Menu</wa-button>
-  ...
-</wa-page>
-```
-
-Alternatively, you can apply `nav-state="open"` and `nav-state="closed"` to the layout component to show and hide the navigation, respectively.
-
-```html
-<wa-page nav-state="open"> ... </wa-page>
-```
-
-`<wa-page>` is given the attribute `view="mobile"` or `view="desktop"` when the viewport narrower or wider than the `mobile-breakpoint` value, respectively. You can leverage these attributes to change styles depending on the size of the viewport.
-This is especially useful to hide your `data-toggle-nav` button when the viewport is wider:
-```css
-wa-page[view='desktop'] [data-toggle-nav] {
-  display: none;
-}
-```
-
-::info
-If you use [native styles](/docs/native/), this is already taken care for you, and the `data-toggle-nav` button is already hidden on wider screens.
-:::
-
-#### Custom Widths
-
-You specify widths for some slots on your page with [CSS custom properties](#css-custom-properties) for `--menu-width`, `--main-width`, and `--aside-width`.
-
-If you specify `--menu-width` to apply a specific width to your `navigation` slot, space will still be reserved on the page even below the `mobile-breakpoint`. To collapse this space on smaller screens, add the following code to your styles:
-```css
-wa-page[view='mobile'] {
-  --menu-width: auto;
-}
-```
-
-You can use a similar approach for `--aside-width` to hide the `aside` slot on smaller screens. Be sure to also specify `display: none` for the slot:
-```css
-wa-page[view='mobile'] {
-  --aside-width: auto;
-
-   [slot='aside'] {
-    display: none;
-  }
-}
-```
-
-### Spacing
-
-A page specifies default `padding` within each slot and a `gap` between the slot's direct children. You can drop elements into any slot, and reasonable spacing is already applied for you.
-
-You can override the default spacing for each slot with your own CSS. In this example, we're setting custom `gap` and `padding` for the `footer` slot:
-```css
-[slot="footer"] {
-  gap: var(--wa-space-xl);
-  padding: var(--wa-space-xl);
-}
-```
-
-## Utility classes
-
-[Native styles](/docs/native/) define a few useful defaults for `<wa-page>`, as well as
-two utility classes you can use for common responsive design tasks:
-- `.wa-mobile-only` hides an element on the desktop view
-- `.wa-desktop-only` hides an element on the mobile view
-
-
-If you don’t want to use [native styles](/docs/native/), you can include this stylesheet in your project to use these:
-
-```html
-<link rel="stylesheet" href="{% cdnUrl 'styles/components/page.css' %}" />
-```

docs/docs/components/page/demo-page.css

@@ -1,66 +0,0 @@
-body {
-  padding: 0;
-  margin: 0;
-}
-
-wa-page {
-  margin: var(--wa-space-xs);
-  margin-inline-start: 0;
-  &::part(base),
-  &::part(main),
-  &::part(navigation),
-  &::part(body) {
-    gap: var(--wa-space-xs);
-  }
-}
-
-:is([slot='banner'], [slot='header'], [slot='subheader'], [slot='footer'], [slot*='navigation']) {
-  margin-inline-start: var(--wa-space-xs);
-}
-
-.slot-content[slot='banner'],
-.slot-content[slot='header'],
-.slot-content[slot='subheader'] {
-  outline: 2px solid var(--wa-color-surface-default);
-}
-
-.slot-content {
-  padding: var(--wa-space-m);
-  border-radius: var(--wa-border-radius-m);
-  align-content: center;
-  justify-content: center;
-  text-align: center;
-  height: 100%;
-  box-sizing: border-box;
-  background: var(--wa-color-blue-80);
-  color: var(--wa-color-blue-20);
-
-  &[slot='banner'] {
-    background: var(--wa-color-blue-50);
-    color: white;
-  }
-
-  &[slot='header'] {
-    background: var(--wa-color-blue-60);
-    color: var(--wa-color-blue-10);
-  }
-
-  &[slot^='main'],
-  &[slot=''] {
-    background: var(--wa-color-gray-80);
-    color: var(--wa-color-gray-20);
-  }
-
-  &[slot^='navigation'] {
-    background: var(--wa-color-purple-80);
-    color: var(--wa-color-purple-20);
-  }
-
-  strong {
-    display: block;
-  }
-
-  &:not([slot='']) p {
-    display: none;
-  }
-}

docs/docs/components/page/demo.css

@@ -1,23 +0,0 @@
-#page_slots_demo {
-  display: flex;
-  flex-flow: column;
-  gap: 1em;
-  margin-bottom: var(--wa-space-xl);
-
-  fieldset .options {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
-    gap: 0.2em 1em;
-
-    wa-checkbox {
-      white-space: nowrap;
-    }
-
-    p {
-      display: contents;
-    }
-  }
-
-  wa-viewport-demo {
-  }
-}

docs/docs/components/page/demo.js

@@ -1,51 +0,0 @@
-let container = document.getElementById('page_slots_demo');
-
-let fieldset = container.querySelector('fieldset');
-let iframe = container.querySelector('iframe');
-let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][href^='/dist/']"))
-  .map(i => i.outerHTML)
-  .join('\n');
-let includes = `${stylesheets}
-  <script src="/dist/webawesome.loader.js" type="module"></script>
-  <link rel="stylesheet" href="./demo-page.css">`;
-
-async function render() {
-  await customElements.whenDefined('wa-checkbox');
-
-  // Let checkboxes update their "state"
-  await Promise.allSettled(
-    Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]')).map(checkbox => {
-      return checkbox.updateComplete;
-    }),
-  );
-
-  let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:state(checked)'));
-  let slotsHTML = slots
-    .map(slot => {
-      let name = slot.getAttribute('value');
-      let description = slot.getAttribute('data-description');
-
-      let tag = 'div';
-      if (name.endsWith('header')) {
-        tag = 'header';
-      }
-      if (name.endsWith('footer')) {
-        tag = 'footer';
-      }
-
-      return `<${tag} class="slot-content" slot="${name}">
-		<strong>${name || 'main <em>(default)</em>'}</strong>
-		<p>${description}</p>
-	</${tag}>`;
-    })
-    .join('\n');
-  let page = iframe.contentDocument?.querySelector('wa-page');
-
-  if (page) {
-    page.innerHTML = slotsHTML;
-  } else {
-    iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
-  }
-}
-await render();
-fieldset?.addEventListener('input', render);

docs/docs/components/radio-button.md

@@ -1,151 +0,0 @@
----
-title: Radio Button
-description: Radios buttons allow the user to select a single option from a group using a button-like control.
-tags: forms
-parent: radio-group
-icon: radio-group
----
-
-Radio buttons are designed to be used with [radio groups](/docs/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
-
-```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal"  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>
-```
-
-## Examples
-
-### Checked States
-
-To set the initial value and checked state, use the `value` attribute on the containing radio group.
-
-```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal"  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>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a radio button.
-
-```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal"  name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2" disabled>Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-```
-
-### Sizes
-
-Use the `size` attribute to change a radio button's size.
-
-```html {.example}
-<wa-radio-group size="small" label="Select an option" orientation="horizontal"  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>
-
-<br />
-
-<wa-radio-group size="medium" label="Select an option" orientation="horizontal"  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>
-
-<br />
-
-<wa-radio-group size="large" label="Select an option" orientation="horizontal"  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>
-```
-
-### Pill Buttons
-
-Use the `pill` attribute to give radio buttons rounded edges.
-
-```html {.example}
-<wa-radio-group size="small" label="Select an option" orientation="horizontal"  name="a" value="1">
-  <wa-radio-button pill value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-
-<br />
-
-<wa-radio-group size="medium" label="Select an option" orientation="horizontal" name="a" value="1">
-  <wa-radio-button pill value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-
-<br />
-
-<wa-radio-group size="large" label="Select an option" orientation="horizontal"  name="a" value="1">
-  <wa-radio-button pill value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-```
-
-### Prefix and Suffix Icons
-
-Use the `prefix` and `suffix` slots to add icons.
-
-```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal"  name="a" value="1">
-  <wa-radio-button value="1">
-    <wa-icon slot="prefix" name="archive" variant="solid"></wa-icon>
-    Option 1
-  </wa-radio-button>
-
-  <wa-radio-button value="2">
-    <wa-icon slot="suffix" name="bag-shopping" variant="solid"></wa-icon>
-    Option 2
-  </wa-radio-button>
-
-  <wa-radio-button value="3">
-    <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
-    <wa-icon slot="suffix" name="shopping-cart" variant="solid"></wa-icon>
-    Option 3
-  </wa-radio-button>
-</wa-radio-group>
-```
-
-### Buttons with Icons
-
-You can omit button labels and use icons instead. Make sure to set a `label` attribute on each icon so screen readers will announce each option correctly.
-
-```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="neutral">
-  <wa-radio-button value="angry">
-    <wa-icon name="face-angry" variant="solid" label="Angry"></wa-icon>
-  </wa-radio-button>
-
-  <wa-radio-button value="sad">
-    <wa-icon name="face-frown" variant="solid" label="Sad"></wa-icon>
-  </wa-radio-button>
-
-  <wa-radio-button value="neutral">
-    <wa-icon name="face-meh" variant="solid" label="Neutral"></wa-icon>
-  </wa-radio-button>
-
-  <wa-radio-button value="happy">
-    <wa-icon name="face-smile" variant="solid" label="Happy"></wa-icon>
-  </wa-radio-button>
-
-  <wa-radio-button value="laughing">
-    <wa-icon name="face-laugh" variant="solid" label="Laughing"></wa-icon>
-  </wa-radio-button>
-</wa-radio-group>
-```

docs/docs/components/viewport-demo.md

@@ -1,71 +0,0 @@
----
-title: Viewport Demo
-description: Viewport demos can be used to display an iframe as a resizable, zoomable preview.
-tags: component
-noAlpha: true
-isPro: true
----
-
-```html {.example}
-<wa-viewport-demo viewport="1200">
-  <iframe src="."></iframe>
-</wa-viewport-demo>
-```
-
-:::warning
-A lot of the functionality of this component will not work on cross-origin iframes.
-:::
-
-## Examples
-
-### Arbitrary HTML content
-
-You can render arbitrary HTML content in the iframe by using the `srcdoc` attribute:
-
-```html {.example}
-<wa-viewport-demo>
-  <iframe srcdoc="
-    &lt;button&gt;Click me!&lt;/button&gt;
-  "></iframe>
-</wa-viewport-demo>
-```
-
-### Viewport Emulation
-
-You can also provide a width value to emulate and it will be scaled accordingly:
-
-```html {.example}
-<wa-viewport-demo viewport="300">
-  <iframe srcdoc="
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  "></iframe>
-</wa-viewport-demo>
-```
-
-By default, the viewport will be rendered to an initial 16:9 aspect ratio,
-which can be changed via resizing.
-You can customize this via the `--viewport-initial-aspect-ratio` property.
-Or, you could add a height value:
-
-```html {.example}
-<wa-viewport-demo viewport="1600 x 1000">
-  <iframe srcdoc="
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-"></iframe>
-</wa-viewport-demo>
-```
-
-## Roadmap
-
-This component is a work in progress.
-Some of the things that are not yet implemented are listed below.
-It goes without saying that this list is a rough plan and subject to change.
-
-- Non-linear zoom scale
-- Extend to general content, not just iframes
-- Styles for mobile and tablet frames and an attribute to switch between them
-- Automatic iframe height

docs/docs/native/button.md

@@ -1,144 +0,0 @@
----
-title: Button
-description: 'Button styles apply your Web Awesome theme to native HTML buttons. Buttons are activated by users to perform actions, such as submitting a form.'
-tags: forms
-component: button
-icon: button
-snippets:
-  '<button>': https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
-  '.wa-button': false
-file: styles/native/button.css
----
-
-```html {.example}
-<button>Button</button>
-<input type="button" value="Input (button)">
-<input type="reset" value="Input (reset)">
-<input type="submit" value="Input (submit)">
-```
-
-## Examples
-
-### Variants
-
-Use the [variant utility classes](../utilities/color.md) to set the button's semantic variant.
-
-```html {.example}
-<button class="wa-neutral">Neutral</button>
-<button class="wa-brand">Brand</button>
-<button class="wa-success">Success</button>
-<button class="wa-warning">Warning</button>
-<button class="wa-danger">Danger</button>
-```
-
-### Appearance
-
-Use the [appearance utility classes](/docs/utilities/appearance) to change the button's visual appearance:
-
-```html {.example}
-<div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-outlined wa-neutral">A + O</button>
-  <button class="wa-accent wa-neutral">Accent</button>
-  <button class="wa-outlined wa-neutral">Outlined</button>
-  <button class="wa-filled wa-outlined wa-neutral">F + O</button>
-  <button class="wa-filled wa-neutral">Filled</button>
-  <button class="wa-plain wa-neutral">Plain</button>
-</div>
-<div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-outlined wa-brand">A + O</button>
-  <button class="wa-accent wa-brand">Accent</button>
-  <button class="wa-outlined wa-brand">Outlined</button>
-  <button class="wa-filled wa-outlined wa-brand">F + O</button>
-  <button class="wa-filled wa-brand">Filled</button>
-  <button class="wa-plain wa-brand">Plain</button>
-</div>
-<div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-outlined wa-success">A + O</button>
-  <button class="wa-accent wa-success">Accent</button>
-  <button class="wa-outlined wa-success">Outlined</button>
-  <button class="wa-filled wa-outlined wa-success">F + O</button>
-  <button class="wa-filled wa-success">Filled</button>
-  <button class="wa-plain wa-success">Plain</button>
-</div>
-<div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-outlined wa-warning">A + O</button>
-  <button class="wa-accent wa-warning">Accent</button>
-  <button class="wa-outlined wa-warning">Outlined</button>
-  <button class="wa-filled wa-outlined wa-warning">F + O</button>
-  <button class="wa-filled wa-warning">Filled</button>
-  <button class="wa-plain wa-warning">Plain</button>
-</div>
-<div>
-  <button class="wa-accent wa-outlined wa-danger">A + O</button>
-  <button class="wa-accent wa-danger">Accent</button>
-  <button class="wa-outlined wa-danger">Outlined</button>
-  <button class="wa-filled wa-outlined wa-danger">F + O</button>
-  <button class="wa-filled wa-danger">Filled</button>
-  <button class="wa-plain wa-danger">Plain</button>
-</div>
-```
-
-### Sizes
-
-Use the [size utility classes](../utilities/size.md) to change a button's size.
-
-```html {.example}
-<button class="wa-size-s">Small</button>
-<button class="wa-size-m">Medium</button>
-<button class="wa-size-l">Large</button>
-```
-
-### Pill Buttons
-
-Use the `wa-pill` class to give buttons rounded edges.
-
-```html {.example}
-<button class="wa-size-s wa-pill">Small</button>
-<button class="wa-size-m wa-pill">Medium</button>
-<button class="wa-size-l wa-pill">Large</button>
-```
-
-### Link Buttons
-
-It's often helpful to have a link that looks like a button.
-This is possible by adding a `wa-button` class to your link.
-
-```html {.example}
-<a href="https://example.com/" class="wa-button">Link</a>
-<a href="https://example.com/" target="_blank" class="wa-button">New Window</a>
-<a href="/assets/images/logo.svg" download="shoelace.svg" class="wa-button">Download</a>
-```
-
-### Setting a Custom Width
-
-As expected, buttons can be given a custom width by setting the `width` CSS property. This is useful for making buttons span the full width of their container on smaller screens.
-
-```html {.example}
-<button class="wa-size-s" style="width: 100%; margin-bottom: 1rem;">Small</button>
-<button class="wa-size-m" style="width: 100%; margin-bottom: 1rem;">Medium</button>
-<button class="wa-size-l" style="width: 100%;">Large</button>
-```
-<!--
-
-### Loading
-
-Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
-
-```html {.example}
-<button class="wa-brand" loading>Brand</button>
-<button class="wa-success" loading>Success</button>
-<button class="wa-neutral" loading>Neutral</button>
-<button class="wa-warning" loading>Warning</button>
-<button class="wa-danger" loading>Danger</button>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a button.
-
-```html {.example}
-<button class="wa-brand" disabled>Brand</button>
-<button class="wa-success" disabled>Success</button>
-<button class="wa-neutral" disabled>Neutral</button>
-<button class="wa-warning" disabled>Warning</button>
-``` -->

docs/docs/native/callout.md

@@ -1,118 +0,0 @@
----
-title: Callout
-description: Callouts are used to display important messages inline.
-component: callout
-icon: callout
-snippets: '.wa-callout'
-noAlpha: true
-file: styles/native/callout.css
----
-
-```html {.example}
-<article class="wa-callout">
-  This is a callout style, applied to a standard article element.
-</article>
-```
-
-## Examples
-
-### Variants
-
-Use the [variant utility classes](../utilities/color.md) to set the callout's color variant.
-
-```html {.example}
-<article class="wa-callout wa-brand">
-  <strong>This is super informative</strong><br />
-  You can tell by how pretty the callout is.
-</article>
-
-<br />
-
-<article class="wa-callout wa-success">
-  <strong>Your changes have been saved</strong><br />
-  You can safely exit the app now.
-</article>
-
-<br />
-
-<article class="wa-callout wa-neutral">
-  <strong>Your settings have been updated</strong><br />
-  Settings will take effect on next login.
-</article>
-
-<br />
-
-<article class="wa-callout wa-warning">
-  <strong>Your session has ended</strong><br />
-  Please login again to continue.
-</article>
-
-<br />
-
-<article class="wa-callout wa-danger">
-  <strong>Your account has been deleted</strong><br />
-  We're very sorry to see you go!
-</article>
-```
-
-### Appearance
-
-Use the [appearance utility classes](/docs/utilities/appearance) to change the callout's visual appearance (the default is `outlined filled`).
-
-```html {.example}
-<article class="wa-callout wa-brand wa-outlined wa-accent">
-  This <strong>accent</strong> callout is also <strong>outlined</strong>
-</article>
-
-<br />
-
-<article class="wa-callout wa-brand wa-accent">
-  This <strong>accent</strong> callout draws attention without an outline
-</article>
-
-<br />
-
-<article class="wa-callout wa-brand wa-outlined wa-filled">
-  This callout is both <strong>filled</strong> and <strong>outlined</strong>
-</article>
-
-<br />
-
-<article class="wa-callout wa-brand wa-filled">
-  This callout is only <strong>filled</strong>
-</article>
-
-<br />
-
-<article class="wa-callout wa-brand wa-outlined">
-  Here's an <strong>outlined</strong> callout
-</article>
-
-<br />
-
-<article class="wa-callout wa-brand wa-plain">
-  No bells and whistles on this <strong>plain</strong> callout
-</article>
-```
-
-### Sizes
-
-Use the [size utility classes](../utilities/size.md) to change a callout's size.
-
-```html {.example}
-<article class="wa-callout wa-brand wa-outlined wa-accent wa-size-l">
-  This is meant to be very emphasized.
-</article>
-
-<br />
-
-<article class="wa-callout">
-  Normal-sized callout.
-</article>
-
-<br />
-
-<article class="wa-callout wa-plain wa-plain wa-size-s">
-  Just a small tip!
-</article>
-```

docs/docs/native/checkbox.md

@@ -1,90 +0,0 @@
----
-title: Checkbox
-description: Checkboxes allow the user to toggle an option on or off.
-tags: forms
-component: checkbox
-icon: checkbox
-elements:
-  "<input type=checkbox>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
-file: styles/native/checkbox.css
----
-
-```html {.example}
-<label><input type="checkbox"> Checkbox</label>
-```
-
-## Examples
-
-### Checked
-
-Use the `checked` attribute to activate the checkbox.
-
-```html {.example}
-<label><input type="checkbox" checked> Checked</label>
-```
-
-<!--
-### Indeterminate
-
-Use the `indeterminate` JS property to make the checkbox indeterminate.
-
-```html {.example}
-<label><input type="checkbox" class="indeterminate"> Indeterminate</label>
-<script>
-  document.querySelector(".indeterminate").indeterminate = true;
-</script>
-```
--->
-
-### Disabled
-
-Use the `disabled` attribute to disable the checkbox.
-
-```html {.example}
-<label><input type="checkbox" disabled> Disabled</label>
-```
-
-<!--
-### Sizes
-
-Use the [size utilities](/docs/utilities/size) to change a checkbox's size.
-
-```html {.example}
-<label><input type="checkbox" class="wa-size-s"> Small</label>
-<br />
-<label><input type="checkbox" class="wa-size-m"> Medium</label>
-<br />
-<label><input type="checkbox" class="wa-size-l"> Large</label>
-```
--->
-
-### Custom Validity
-
-Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
-
-```html {.example}
-<form class="custom-validity">
-  <label><input type="checkbox"> Check me</label>
-  <br />
-  <button type="submit" variant="brand" style="margin-top: 1rem;">Submit</button>
-</form>
-<script>
-  const form = document.querySelector('.custom-validity');
-  const checkbox = form.querySelector('input[type=checkbox]');
-  const errorMessage = `Don't forget to check me!`;
-
-  // Set initial validity
-  checkbox.setCustomValidity(errorMessage);
-
-  // Update validity on change
-  checkbox.addEventListener('change', () => {
-    checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
-  });
-
-  // Handle submit
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!');
-  });
-</script>
-```

docs/docs/native/content.md

@@ -1,92 +0,0 @@
----
-title: Content
-description: 'Content styles apply your Web Awesome theme to HTML text content, code, and images.'
-tags: content
-layout: element
-icon: skeleton
-elements:
-  "<h1>-<h6>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
-  "<blockquote>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
-  "<strong>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
-  "<em>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
-  "<u>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u
-  "<del>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
-  "<ins>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins
-  "<s>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s
-  "<small>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small
-  "<sub>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub
-  "<sup>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup
-  "<abbr>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
-  "<kbd>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
-  "<mark>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark
-  "<a>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
-  "<code>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
-  "<img>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
-file: styles/native/content.css
----
-
-
-## Typography
-
-Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Amet mauris commodo quis imperdiet. Bibendum ut tristique et egestas quis ipsum suspendisse. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat.
-
-Cras pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci. Scelerisque eleifend donec pretium vulputate sapien nec. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque.
-
-> What is a Web year now, about three months? And when people can browse around, discover new things, and download them fast, when we all have agents - then Web years could slip by before human beings can notice.
->
-> — Tim Berners-Lee
-
-## Inline Text
-
-```html
-Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id.
-```
-
-<div class="two-columns">
-  <p><strong>Bold</strong></p>
-  <p><em>Italics</em></p>
-  <p><u>Underline</u></p>
-  <p><del>Deleted</del></p>
-  <p><ins>Inserted</ins></p>
-  <p><s>Strike-through</s></p>
-  <p><small>Small</small></p>
-  <p><span>Text <sub>Sub</sub></span></p>
-  <p><span>Text <sup>Sup</sup></span></p>
-  <p><abbr title="Abbreviation">Abbr.</abbr></p>
-  <p><kbd>Keyboard</kbd></p>
-  <p><mark>Highlighted</mark></p>
-  <p><a href="#">Link text</a></p>
-  <p><code>Inline code</code></p>
-</div>
-
-## Headings
-
-### Heading 3
-
-Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id.
-
-#### Heading 4
-
-Gravida arcu ac tortor dignissim convallis aenean. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Donec adipiscing tristique risus nec feugiat in.
-
-##### Heading 5
-
-Enim diam vulputate ut pharetra sit. Enim facilisis gravida neque convallis a cras. Enim neque volutpat ac tincidunt vitae semper. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.
-
-###### Heading 6
-
-Tincidunt ornare massa eget egestas purus viverra accumsan in nisl. Facilisis mauris sit amet massa vitae. Nunc faucibus a pellentesque sit amet porttitor. Adipiscing tristique risus nec feugiat in fermentum.
-
-
-## Code Blocks
-
-```
-// do a thing
-export function thing() {
-  return true;
-}
-```
-
-## Images
-
-![A gray kitten lays next to a toy](https://images.unsplash.com/photo-1620196244888-d31ff5bbf163?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)

docs/docs/native/details.md

@@ -1,82 +0,0 @@
----
-title: Details
-description: 'Details styles apply your Web Awesome theme to the HTML `<details>` element. Details show a brief summary and expand to show additional content.'
-tags: apps
-layout: element
-component: details
-icon: details
-elements:
-  "<details>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
-file: styles/native/details.css
----
-
-```html {.example}
-<details>
-  <summary>Tincidunt nunc pulvinar</summary>
-  <p>Ut lectus arcu bibendum at varius. Convallis a cras semper auctor neque vitae. Odio pellentesque diam volutpat commodo sed egestas. Amet dictum sit amet justo donec enim diam vulputate ut.</p>
-</details>
-```
-
-## Examples
-
-### Appearance
-
-Use the [appearance utility classes](/docs/utilities/appearance) to change the element's visual appearance:
-
-```html {.example}
-<div class="wa-stack">
-<details>
-  <summary>Outlined (default)</summary>
-  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.
-</details>
-<details class="wa-filled">
-  <summary>Filled</summary>
-  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.
-</details>
-<details class="wa-filled wa-outlined">
-  <summary>Filled + Outlined</summary>
-  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.
-</details>
-<details class="wa-plain">
-  <summary>Plain</summary>
-  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.
-</details>
-</div>
-```
-
-### Right-to-Left Languages
-
-The details styling automatically adapts to right-to-left languages:
-
-```html {.example}
-<details lang="ar" dir="rtl">
-  <summary>تبديلني</summary>
-  استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
-</details>
-```
-
-## Accordions
-
-In [modern browsers](https://caniuse.com/mdn-html_elements_details_name),
-grouping `<details>` elements via the `name` attribute provides accordion-style functionality:
-
-```html {.example}
-<details name="details-accordion">
-  <summary>Enim diam</summary>
-  <p>Nunc faucibus a pellentesque sit amet porttitor. Adipiscing tristique risus nec feugiat in fermentum. Leo duis ut diam quam nulla porttitor massa id. Mauris nunc congue nisi vitae.</p>
-</details>
-
-<details name="details-accordion">
-  <summary>Arcu non odio</summary>
-  <p>Sed libero enim sed faucibus turpis in eu mi bibendum. Nunc mi ipsum faucibus vitae aliquet nec. Ultricies tristique nulla aliquet enim tortor. Tellus at urna condimentum mattis pellentesque.</p>
-</details>
-
-<details name="details-accordion">
-  <summary>Ut porttitor</summary>
-  <p>Eu facilisis sed odio morbi quis commodo odio aenean sed. Sit amet purus gravida quis blandit turpis cursus. Eu consequat ac felis donec et odio pellentesque diam volutpat.</p>
-</details>
-```

docs/docs/native/dialog.md

@@ -1,37 +0,0 @@
----
-title: Dialog
-description: 'Dialog styles apply your Web Awesome theme to the HTML `<dialog>` element. Dialogs, also called "modals", appear above the page and interrupt a user''s focus.'
-tags: apps
-icon: dialog
-elements:
-  "<dialog>":  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
-component: dialog
-file: styles/native/dialog.css
----
-
-```html {.example}
-<dialog id="dialog-overview">
-	<header>
-		<h2>Dialog</h2>
-		<button data-dialog="close" class="wa-plain">✖️</button>
-	</header>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-  <footer>
-	<button class="wa-brand" data-dialog="close">Close</button>
-  </footer>
-</dialog>
-
-<button>Open Dialog</button>
-
-<script>
-  const dialog = document.querySelector('#dialog-overview');
-  const openButton = dialog.nextElementSibling;
-
-  openButton.addEventListener('click', () => dialog.showModal());
-  dialog.addEventListener('click', event => {
-	if (event.target.closest('[data-dialog="close"]')) {
-		dialog.close();
-	}
-  });
-</script>
-```

docs/docs/native/index.njk

@@ -1,86 +0,0 @@
----
-title: Native Styles
-description: Native styles apply your theme to native HTML elements so they match the look and feel of Web Awesome components. 
-  See the [installation instructions](#installation) to use native styles in your project.
-layout: overview
-categories: ['forms', 'apps', 'content']
-override:tags: []
----
-
-{% markdown %}
-Web Awesome works _with_ the platform, rather than trying to reinvent it.
-If all you need is styles, you don’t need to use new `<wa-*>` elements!
-We also provide styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.
-
-## Installation
-
-To use all Web Awesome page styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project:
-
-```html
-<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
-```
-
-Or, to _only_ include styles for native elements:
-
-```html
-<link rel="stylesheet" href="{% cdnUrl 'styles/native.css' %}" />
-```
-
-## Opting Out of Native Styles
-
-So you've decided to use Native Styles and now you need to style an element or a part of a page completely differently, what to do?
-You can create an opt-out with the power of [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers)!
-
-Instead of including Native Styles with a `<link>` element, you can include it like this:
-
-```html
-<style>
-@import url('{% cdnUrl 'styles/webawesome.css' %}') layer(wa);
-
-@layer wa {
-  .wa-off,
-  .wa-off-deep,
-  .wa-off-deep * {
-    all: revert-layer;
-  }
-}
-</style>
-```
-
-Then you can opt-out of Native Styles styling by using a `wa-off` class on individual elements or `wa-off-deep` for entire subtrees:
-
-```html
-<p>
-  <button>I’m Awesome</button>
-  <button class="wa-off">I’m not</button>
-</p>
-
-<blockquote>
-  <p>Lorem Ipsum dolor sit amet</p>
-  <button>I’m also awesome</button>
-</blockquote>
-<blockquote class="wa-off">
-  <p>Lorem Ipsum dolor sit amet</p>
-  <button >I’m also not</button>
-</blockquote>
-<blockquote class="wa-off-deep">
-  <p>Lorem Ipsum dolor sit amet</p>
-  <button>I’m also not</button>
-</blockquote>
-```
-
-You could even design opt-outs for specific elements!
-E.g. to opt-out of `<details>` styling:
-
-```css
-@layer wa {
-  details.wa-details-off,
-  .wa-details-off details,{
-    all: revert-layer;
-  }
-}
-```
-
-If you find yourself opting out of entire element types too much, you could consider only including the parts of Native Styles you need instead of the whole thing.
-You can find instructions for how to do that on the individual Native Styles pages.
-{% endmarkdown %}

docs/docs/native/input.md

@@ -1,93 +0,0 @@
----
-title: Input
-description: Inputs collect data from the user.
-tags: forms
-icon: input
-component: input
-elements:
-  "<input>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
-file: styles/native/input.css
----
-
-<style>
-wa-code-demo::part(preview) {
-  display: grid;
-  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
-  gap: 2rem;
-}
-</style>
-
-## Text Fields
-
-```html {.example}
-<label>Input (text) <input type="text" placeholder="placeholder"></label>
-<wa-input label="WA Input (text)" type="text" placeholder="placeholder"></wa-input>
-
-<label>Input (number) <input type="number"></label>
-<wa-input label="WA Input (number)" type="number"></wa-input>
-
-<label>Input (password) <input type="password" required></label>
-<wa-input label="WA Input (password)" type="password" required></wa-input>
-
-<label>Input (email) <input type="email"></label>
-<wa-input label="WA Input (email)" type="email"></wa-input>
-
-<label>Input (search) <input type="search"></label>
-<wa-input label="WA Input (search)" type="search"></wa-input>
-
-<label>Input (tel) <input type="tel"></label>
-<wa-input label="WA Input (tel)" type="tel"></wa-input>
-
-<label>Input (url) <input type="url"></label>
-<wa-input label="WA Input (url)" type="url"></wa-input>
-```
-
-## Pill shaped text fields
-
-Add the `wa-pill` class to an `<input>` to make it pill-shaped.
-
-```html {.example}
-<label>Input <input type="text" placeholder="placeholder" class="wa-pill"></label>
-```
-
-## Color Picker
-
-Basic:
-
-```html {.example}
-<label>Input (color) <input type="color" value="#ff0066"></label>
-<wa-color-picker label="WA Color Picker" value="#ff0066"></wa-color-picker>
-```
-
-With swatches:
-
-```html {.example}
-<label>Input (color) <input type="color" value="#ff0066" list="swatches"></label>
-<datalist id="swatches">
-  <option value="#0070ef">Web Awesome Blue</option>
-  <option>#f5a623</option>
-  <option>#f8e71c</option>
-  <option>#8b572a</option>
-  <option>#7ed321</option>
-  <option>#417505</option>
-  <option>#bd10e0</option>
-  <option>#9013fe</option>
-</datalist>
-
-<wa-color-picker label="WA Color Picker" value="#ff0066"
- swatches="#0070ef; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;"></wa-color-picker>
-```
-
-## Time and Date Pickers
-
-```html {.example}
-<label>Input (datetime-local) <input type="datetime-local"></label>
-<wa-input label="WA Input (datetime-local)" type="datetime-local"></wa-input>
-
-<label>Input (date) <input type="date"></label>
-<wa-input label="WA Input (date)" type="date"></wa-input>
-
-<label>Input (time) <input type="time"></label>
-<wa-input label="WA Input (time)" type="time"></wa-input>
-```
-

docs/docs/native/lists.md

@@ -1,38 +0,0 @@
----
-title: Lists
-description: 'List styles apply your Web Awesome theme to HTML lists, such as bulleted, numbered, or description lists.'
-tags: content
-layout: element
-elements:
-  "<ul>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
-  "<ol>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
-  "<dl>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
-file: styles/native/lists.css
----
-
-## Unordered Lists
-
-- List item 1
-- List item 2
-- List item 3
-  - Subitem a
-  - Subitem b
-
-## Ordered Lists
-
-1. List item 1
-2. List item 2
-3. List item 3
-   - Subitem a
-   - Subitem b
-
-## Definition Lists
-
-<dl>
-  <dt>Definition 1</dt>
-  <dd>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.</dd>
-  <dt>Definition 2</dt>
-  <dd>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
-  <dt>Definition 3</dt>
-  <dd>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</dd>
-</dl>

docs/docs/native/native.json

@@ -1,4 +0,0 @@
-{
-  "layout": "element.njk",
-  "tags": ["native"]
-}

docs/docs/native/progress.md

@@ -1,31 +0,0 @@
----
-title: Progress Bar
-description: Progress bars are used to show the status of an ongoing operation.
-tags: apps
-icon: progress-bar
-status: experimental
-component: progress-bar
-elements:
-  "<progress>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
-file: styles/native/progress.css
----
-
-
-```html {.example}
-<progress value="40" max="100"></progress>
-```
-
-Indeterminate:
-
-
-```html {.example}
-<progress></progress>
-```
-
-### Custom Height
-
-Use the `height` CSS property to set the progress bar's height.
-
-```html {.example}
-<wa-progress-bar value="50" style="height: 6px;"></wa-progress-bar>
-```

docs/docs/native/radio.md

@@ -1,93 +0,0 @@
----
-title: Radio
-description: Radios allow the user to select a single option from a group.
-tags: forms
-icon: radio-group
-component: radio
-elements:
-  "<input type=radio>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
-file: styles/native/radio.css
----
-
-```html {.example}
-<div class="wa-cluster">
-  <label><input type="radio" name="radio" value="1"> Option 1</label>
-  <label><input type="radio" name="radio" value="2"> Option 2</label>
-</div>
-```
-
-## Examples
-
-### Initial Value
-
-To set the initial value and checked state, use the `checked` attribute on the corresponding radio.
-
-```html {.example}
-<div class="wa-cluster">
-  <label><input type="radio" name="radio" value="1"> Option 1</label>
-  <label><input type="radio" name="radio" value="2"> Option 2</label>
-  <label><input type="radio" name="radio" value="3" checked> Option 3</label>
-</div>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a radio.
-
-```html {.example}
-<div class="wa-cluster">
-  <label><input type="radio" name="radio" value="1"> Option 1</label>
-  <label><input type="radio" name="radio" value="2" disabled> Option 2</label>
-  <label><input type="radio" name="radio" value="3"> Option 3</label>
-</div>
-```
-
-### Sizes
-
-Use the [size utilities](/docs/utilities/size) to change the radios' size.
-
-```html {.example}
-<fieldset class="wa-size-s wa-cluster">
-  <legend>Small</legend>
-  <label><input type="radio" name="radio" value="1"> Option 1</label>
-  <label><input type="radio" name="radio" value="2"> Option 2</label>
-  <label><input type="radio" name="radio" value="3"> Option 3</label>
-</fieldset>
-
-<br />
-<fieldset class="wa-size-m wa-cluster">
-  <legend>Medium</legend>
-  <label><input type="radio" name="radio" value="1"> Option 1</label>
-  <label><input type="radio" name="radio" value="2"> Option 2</label>
-  <label><input type="radio" name="radio" value="3"> Option 3</label>
-</fieldset>
-
-<br />
-
-<fieldset class="wa-size-l wa-cluster">
-	  <legend>Large</legend>
-    <label><input type="radio" name="radio" value="1"> Option 1</label>
-    <label><input type="radio" name="radio" value="2"> Option 2</label>
-    <label><input type="radio" name="radio" value="3"> Option 3</label>
-</fieldset>
-```
-
-### Orientation
-
-You can wrap native radios in a flex container to give them a horizontal or vertical orientation with even spacing. The convenience [`wa-cluster`](/docs/utilities/cluster) and [`wa-stack`](/docs/utilities/stack) utilities make this easy.
-
-```html {.example}
-<div class="wa-cluster">
-  <label><input type="radio" name="radio" value="1"> Option 1</label>
-  <label><input type="radio" name="radio" value="2"> Option 2</label>
-  <label><input type="radio" name="radio" value="3" checked> Option 3</label>
-</div>
-```
-
-```html {.example}
-<div class="wa-stack">
-  <label><input type="radio" name="radio" value="1"> Option 1</label>
-  <label><input type="radio" name="radio" value="2"> Option 2</label>
-  <label><input type="radio" name="radio" value="3" checked> Option 3</label>
-</div>
-```

docs/docs/native/select.md

@@ -1,72 +0,0 @@
----
-title: Select
-description: Selects allow you to choose items from a menu of predefined options.
-tags: forms
-icon: select
-component: select
-elements:
-  "<select>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
-file: styles/native/select.css
----
-
-```html {.example}
-<label>Select
-  <select id="select">
-    <option value="option-1">Option 1</option>
-    <option value="option-2">Option 2</option>
-    <option value="option-3">Option 3</option>
-  </select>
-</label>
-```
-
-## Examples
-
-### Appearance
-
-Use the [appearance utilities](/docs/utilities/appearance/) to change the select's visual appearance.
-
-```html {.example}
-<label>Select
-  <select id="select" class="wa-filled">
-    <option value="option-1">Option 1</option>
-    <option value="option-2">Option 2</option>
-    <option value="option-3">Option 3</option>
-  </select>
-</label>
-```
-
-### Grouping options
-
-In [modern browsers](https://caniuse.com/mdn-html_elements_select_hr_in_select), you can use the `<hr>` element as a divider:
-
-```html {.example}
-<select>
-  <small>Section 1</small>
-  <option value="option-1">Option 1</option>
-  <option value="option-2">Option 2</option>
-  <option value="option-3">Option 3</option>
-  <hr />
-  <small>Section 2</small>
-  <option value="option-4">Option 4</option>
-  <option value="option-5">Option 5</option>
-  <option value="option-6">Option 6</option>
-</select>
-```
-
-To provide labels, you can use the `<optgroup>` element (with or without dividers):
-
-```html {.example}
-<select>
-  <optgroup label="Section 1">
-  <option value="option-1">Option 1</option>
-  <option value="option-2">Option 2</option>
-  <option value="option-3">Option 3</option>
-  </optgroup>
-  <optgroup label="Section 2">
-  <option value="option-4">Option 4</option>
-  <option value="option-5">Option 5</option>
-  <hr />
-  <option value="option-6">Option 6</option>
-  </optgroup>
-</select>
-```

docs/docs/native/slider.md

@@ -1,54 +0,0 @@
----
-title: Slider
-description: Sliders allow the user to select a single value within a given range using a slider.
-tags: forms
-layout: element
-icon: slider
-component: slider
-elements:
-  "<input type=range>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
-file: styles/native/slider.css
----
-
-```html {.example}
-<label>Select a value: <input type="range"></label>
-```
-
-### Min, Max, and Step
-
-Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.
-
-```html {.example}
-<input type="range" min="0" max="10" step="1">
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a slider.
-
-```html {.example}
-<input type="range" disabled>
-```
-
-<!--
-### Custom Track Colors
-
-You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.
-
-```html {.example}
-<input type="range"
-  style="
-  --track-color-active: var(--wa-color-brand-fill-loud);
-  --track-color-inactive: var(--wa-color-brand-fill-normal);
-"
->
-```
-
-### Right-to-Left languages
-
-The styles adapt to right-to-left (RTL) languages as you would expect.
-
-```html {.example}
-<input type="range" dir=rtl>
-```
--->

docs/docs/native/table.md

@@ -1,136 +0,0 @@
----
-title: Table
-description: 'Table styles apply your Web Awesome theme to the HTML table content. Tables structure data in rows and columns, making it easy to look up information in a complex data set.'
-tags: content
-elements:
-  "<table>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
-file: styles/native/tables.css
----
-
-```html {.example}
-<table>
-  <caption>I'm just a table</caption>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-## Alternating Rows
-
-You can use the `wa-zebra-rows` class to add alternating row colors to your table:
-
-```html {.example}
-<table class="wa-zebra-rows">
-  <caption>I'm just a table</caption>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-## Variants
-
-You can use [color utility classes](/docs/utilities/colors) to apply different colors to your table:
-
-```html {.example}
-<table class="wa-zebra-rows wa-brand">
-  <caption>I'm just a table</caption>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-  </tbody>
-</table>
-```

docs/docs/native/textarea.md

@@ -1,38 +0,0 @@
----
-title: Textarea
-description: Textareas collect data from the user and allow multiple lines of text.
-tags: forms
-icon: textarea
-component: textarea
-elements:
-  "<textarea>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
-file: styles/native/input.css
----
-
-```html {.example}
-<label>Textarea <textarea></textarea></label>
-```
-
-### Placeholders
-
-Use the `placeholder` attribute to add a placeholder.
-
-```html {.example}
-<textarea placeholder="Type something"></textarea>
-```
-
-### Appearance
-
-Use the [appearence utilities](/docs/utilities/appearance/) to change the textarea's visual appearance.
-
-```html {.example}
-<textarea placeholder="Type something" class="wa-filled"></textarea>
-```
-
-### Expand with Content
-
-You can use `field-sizing: content` in [browsers that support it](https://caniuse.com/mdn-css_properties_field-sizing) to make the textarea grow as the user types:
-
-```html {.example}
-<textarea placeholder="Type something" style="field-sizing: content"></textarea>
-```

docs/docs/palettes/anodized.md

@@ -1,5 +0,0 @@
----
-title: Anodized
-isPro: true
-tags: pro
----

docs/docs/palettes/data.json.njk

@@ -1,27 +0,0 @@
----
-layout: null
-permalink: "/docs/palettes/data.json"
-eleventyExcludeFromCollections: true
----
-{
-{% for palette in collections.palettes %}
-  {% set paletteId = palette.fileSlug -%}
-  {% set colors = palettes[paletteId] -%}
-  "{{ paletteId }}": {
-    "title": "{{ palette.data.title }}",
-    "colors": {
-      {% for hue, tints in colors -%}
-        "{{ hue }}": {
-          {% for tint, value in tints -%}
-            {% if tint != "05" -%}
-              {% set value = value.coords or value -%}
-              {% set key = "05" if tint == "5" else tint -%}
-              "{{ key }}": {{ value | dump | safe }}{{ ', ' if not loop.last }}
-            {%- endif %}
-          {% endfor -%}
-        }{{ ', ' if not loop.last }}
-      {% endfor %} {# end of hue #}
-    }
-  }{{ ', ' if not loop.last }} {# end of palette #}
-{% endfor %}
-}

docs/docs/palettes/elegant.md

@@ -1,5 +0,0 @@
----
-title: Elegant
-isPro: true
-tags: pro
----

docs/docs/palettes/mild.md

@@ -1,5 +0,0 @@
----
-title: Mild
-isPro: true
-tags: pro
----

docs/docs/palettes/natural.md

@@ -1,5 +0,0 @@
----
-title: Natural
-isPro: true
-tags: pro
----

docs/docs/palettes/rudimentary.md

@@ -1,5 +0,0 @@
----
-title: Rudimentary
-isPro: true
-tags: pro
----

docs/docs/palettes/vogue.md

@@ -1,5 +0,0 @@
----
-title: Vogue
-isPro: true
-tags: pro
----

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

@@ -1,70 +0,0 @@
----
-title: Action Panel
-description: 'Help users complete tasks efficiently with quick access to key actions.'
-icon: action-panel
-isPro: true
----
-
-## 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" size="small">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-2xs">
-        <span class="wa-heading-s">Super Dog</span>
-        <div class="wa-caption-m wa-cluster wa-gap-xs">
-          <span>Online</span>
-          <wa-icon name="circle" style="color: var(--wa-color-green); font-size: 10px;"></wa-icon>
-        </div>
-      </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

@@ -1,336 +0,0 @@
----
-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-m">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-l)" 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-l)" 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-l)" name="video" fixed-width></wa-icon>
-          <div class="wa-split">
-            <div class="wa-stack wa-gap-0">
-              <span class="wa-heading-s">Zoom Call with Northeast office</span>
-              <div class="wa-cluster wa-gap-2xs">
-                <a href="#">Axel Foley</a><span>for 47 minutes</span>
-              </div>
-            </div>
-            <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-l)" 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-l)" family="brands" name="intercom" fixed-width></wa-icon>
-          <div class="wa-split">
-            <div class="wa-stack wa-gap-0">
-              <span class="wa-heading-s">Got new lead</span>
-              <div class="wa-cluster wa-gap-2xs">
-                <a href="#">Jack Carter</a><span>on Intercom switchboard</span>
-              </div>
-            </div>
-            <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-l)" 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>
-```
-## Card Separated
-```html {.example}
-<div class="wa-stack" style="max-width: 45ch; margin: 0 auto;">
-  <div class="wa-stack">
-    <wa-card>
-      <div class="wa-flank">
-        <wa-avatar image="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
-        <div class="wa-stack wa-gap-0">
-          <div class="wa-split">
-            <span class="wa-heading-s">Isaiah Hamilton</span>
-            <wa-relative-time class="wa-caption-s" date="2025-01-15T09:17:00-04:00"></wa-relative-time>
-          </div>
-          <p>Who's on first?</p>
-          <a href="#" class="wa-cluster wa-gap-2xs">
-            <wa-icon name="reply" family="sharp" variant="regular"></wa-icon>
-            <span>Reply</span>
-          </a>
-        </div>
-      </div>
-    </wa-card>
-    <div class="wa-flank wa-gap-xl">
-      <wa-divider vertical style="height: auto; align-self: stretch"></wa-divider>
-      <ul class="wa-stack">
-      <li class="wa-stack wa-gap-2xs">
-        <wa-card>
-      <div class="wa-flank">
-        <wa-avatar image="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
-        <div class="wa-stack wa-gap-0">
-          <div class="wa-split">
-            <span class="wa-heading-s">Melvin Hurst</span>
-            <wa-relative-time class="wa-caption-s" date="2025-02-15T09:17:00-04:00"></wa-relative-time>
-          </div>
-          <p>What's on second?</p>
-          <a href="#" class="wa-cluster wa-gap-2xs">
-            <wa-icon name="reply" family="sharp" variant="regular"></wa-icon>
-            <span>Reply</span>
-          </a>
-        </div>
-      </div>
-    </wa-card>
-      </li>
-      <li class="wa-stack wa-gap-2xs">
-        <wa-card>
-      <div class="wa-flank wa-align-items-start">
-        <wa-avatar image="https://images.unsplash.com/photo-1674044494331-8db2ecf18d46?q=80&w=3019&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
-        <div class="wa-stack wa-gap-xs">
-          <div class="wa-split">
-            <span class="wa-heading-s">Vanessa Wright</span>
-          </div>
-          <wa-textarea size="small" aria-label="Add Your Comment"></wa-textarea>
-        </div>
-      </div>
-    </wa-card>
-      </li>
-    </ul>
-    </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 image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
-        <div class="wa-stack wa-gap-2xs">
-          <div class="wa-split">
-            <span><strong>Happy</strong> commented in <a href="#">Reporting Dashboard</a></span>
-            <wa-icon name="circle" style="color: var(--wa-color-green);"></wa-icon>
-          </div>
-          <div class="wa-split">
-            <span class="wa-caption-m">Friday 3:12PM</span>
-            <wa-relative-time class="wa-caption-m" date="2025-02-15T09:17:00-04:00"></wa-relative-time>
-          </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 image="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
-        <div class="wa-stack wa-gap-2xs">
-          <div class="wa-split">
-            <span><strong>Charlotte</strong> followed you</span>
-            <wa-icon name="circle" style="color: var(--wa-color-green);"></wa-icon>
-          </div>
-          <div class="wa-split">
-            <span class="wa-caption-m">Friday 3:04PM</span>
-            <wa-relative-time class="wa-caption-m" date="2025-02-15T09:17:00-04:00"></wa-relative-time>
-          </div>
-        </div>
-      </div>
-      <wa-divider></wa-divider>
-    </article>
-    <article>
-      <div class="wa-flank wa-align-items-start">
-        <wa-avatar image="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Profile image"></wa-avatar>
-        <div class="wa-stack wa-gap-2xs">
-          <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>
-            <wa-relative-time class="wa-caption-m" date="2025-02-15T09:17:00-04:00"></wa-relative-time>
-          </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/app.json

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

docs/docs/patterns/app/comments.md

@@ -1,165 +0,0 @@
----
-title: Comments
-description: 'Enable users to engage in discussions, provide feedback, or record their thoughts.'
-isPro: true
----
-
-## 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" size="small">
-        <wa-icon slot="prefix" name="paperclip" variant="solid"></wa-icon>
-        Attach a file
-      </wa-button>
-      <wa-button variant="brand" size="small">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="the cover image for the film"
-        />
-      </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

@@ -1,174 +0,0 @@
----
-title: Data Display
-description: 'Convey insights, metrics, and aggregate data at a glance.'
-isPro: true
----
-
-
-## Simple
-```html {.example}
-<wa-card>
-  <div class="wa-grid wa-gap-3xl" style="--min-column-size: 24ch;">
-    <div class="wa-stack">
-      <div class="wa-split">
-        <div class="wa-cluster wa-gap-xs">
-          <wa-icon name="sack-dollar"></wa-icon>
-          <span>Incomes</span>
-        </div>
-        <div class="wa-cluster wa-gap-xs" style="color: var(--wa-color-green);">
-          <wa-icon name="arrow-trend-up"></wa-icon>
-          <wa-format-number class="wa-heading-s" type="percent" value=".475"></wa-format-number>
-        </div>
-      </div>
-      <wa-format-number class="wa-heading-xl" type="currency" currency="USD" value="175000000" lang="en-US"></wa-format-number>
-
-    </div>
-    <div class="wa-stack">
-      <div class="wa-split">
-        <div class="wa-cluster wa-gap-xs">
-          <wa-icon name="credit-card"></wa-icon>
-          <span>Expenses</span>
-        </div>
-         <div class="wa-cluster wa-gap-xs" style="color: var(--wa-color-red);">
-          <wa-icon name="arrow-trend-down"></wa-icon>
-          <wa-format-number class="wa-heading-s" type="percent" value=".27"></wa-format-number>
-        </div>
-      </div>
-      <wa-format-number class="wa-heading-xl" class="wa-heading-xl" type="currency" currency="USD" value="289472" lang="en-US"></wa-format-number>
-    </div>
-    <div class="wa-stack">
-      <div class="wa-split">
-        <div class="wa-cluster wa-gap-xs">
-          <wa-icon name="seedling"></wa-icon>
-          <span>Investments</span>
-        </div>
-        <div class="wa-cluster wa-gap-xs" style="color: var(--wa-color-green);">
-          <wa-icon name="arrow-trend-up"></wa-icon>
-          <wa-format-number class="wa-heading-s" type="percent" value=".14"></wa-format-number>
-        </div>
-      </div>
-      <wa-format-number class="wa-heading-xl" class="wa-heading-xl" type="currency" currency="USD" value="569213" lang="en-US"></wa-format-number>
-    </div>
-    <div class="wa-stack">
-      <div class="wa-split">
-        <div class="wa-cluster wa-gap-xs">
-          <wa-icon name="landmark"></wa-icon>
-          <span>Mortgages & Loans</span>
-        </div>
-      </div>
-      <wa-format-number class="wa-heading-xl" class="wa-heading-xl" type="currency" currency="USD" value="23904" lang="en-US"></wa-format-number>
-    </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

@@ -1,253 +0,0 @@
----
-title: Description List
-description: 'Help users digest detailed information in a structured, easy-to-scan format.'
-isPro: true
----
-
-## 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

@@ -1,207 +0,0 @@
----
-title: Empty State
-description: 'Guide users with helpful prompts and visuals when no content is available.'
-isPro: true
----
-
-## 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" family="sharp" 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" style="--background-color: var(--wa-color-yellow-90);color: var(--wa-color-yellow-40);">
-          <wa-icon slot="icon" name="note-sticky"></wa-icon>
-        </wa-avatar>
-        <div class="wa-stack wa-gap-2xs">
-          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-            Create a Quick Note <wa-icon name="arrow-right"></wa-icon>
-          </span>
-          <p class="wa-caption-m">
-            Jot down any idea. Will it make sense later? Who knows.
-          </p>
-        </div>
-      </a>
-      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-red-90);color: var(--wa-color-red-40);">
-          <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" style="--background-color: var(--wa-color-purple-90);color: var(--wa-color-purple-40);">
-          <wa-icon slot="icon" name="table-cells"></wa-icon>
-        </wa-avatar>
-        <div class="wa-stack wa-gap-2xs">
-          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-            Create a Spreadsheet <wa-icon name="arrow-right"></wa-icon>
-          </span>
-          <p class="wa-caption-m">
-            Endless rows and columns of tiny, soul-crushing numbers.
-          </p>
-        </div>
-      </a>
-      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-orange-90);color: var(--wa-color-orange-40);">
-          <wa-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" style="--background-color: var(--wa-color-green-90);color: var(--wa-color-green-40);">
-          <wa-icon slot="icon" name="pen-field"></wa-icon>
-        </wa-avatar>
-        <div class="wa-stack wa-gap-2xs">
-          <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-            Create a Form <wa-icon name="arrow-right"></wa-icon>
-          </span>
-          <p class="wa-caption-m">
-            Collect the deepest personal details and darkest secrets.
-          </p>
-        </div>
-      </a>
-      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-blue-90);color: var(--wa-color-blue-40);">
-          <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-gap-xs">
-    <h3 class="wa-heading-m">Add team members</h3>
-    <p>This project is awful lonely. Invite some team members to liven up the joint.</p>
-    <div class="wa-flank:end wa-gap-xs">
-      <wa-input></wa-input><wa-button>Invite</wa-button>
-    </div>
-    <div class="wa-stack">
-      <em class="wa-caption-l">Team members previously added to projects</em>
-      <wa-divider></wa-divider>
-      <section>
-        <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
-        <div class="wa-split">
-          <div class="wa-stack wa-gap-0">
-            <span class="wa-heading-s">Earl Upton</span>
-            <span class="wa-caption-m">DevOps</span>
-          </div>
-          <wa-button appearance="plain">
-            <wa-icon name="user-plus" slot="prefix"></wa-icon>
-            Invite
-          </wa-button>
-        </div>
-        </div>
-        <wa-divider></wa-divider>
-      </section>
-      <section>
-        <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" lable="profile image"></wa-avatar>
-        <div class="wa-split">
-          <div class="wa-stack wa-gap-0">
-            <span class="wa-heading-s">Steamboat Willie</span>
-            <span class="wa-caption-m">Captain</span>
-          </div>
-          <wa-button appearance="plain">
-            <wa-icon name="user-plus" slot="prefix"></wa-icon>
-            Invite
-          </wa-button>
-        </div>
-        </div>
-        <wa-divider></wa-divider>
-      </section>
-      <section>
-        <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1678582967399-bf558533f5eb?q=80&w=3029&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
-        <div class="wa-split">
-          <div class="wa-stack wa-gap-0">
-            <span class="wa-heading-s">Melissa Eckers</span>
-            <span class="wa-caption-m">Cloud Engineer</span>
-          </div>
-          <wa-button appearance="plain">
-            <wa-icon name="user-plus" slot="prefix"></wa-icon>
-            Invite
-          </wa-button>
-        </div>
-        </div>
-        <wa-divider></wa-divider>
-      </section><section>
-        <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
-        <div class="wa-split">
-          <div class="wa-stack wa-gap-0">
-            <span class="wa-heading-s">Devin Shears</span>
-            <span class="wa-caption-m">UX Writer</span>
-          </div>
-          <wa-button appearance="plain">
-            <wa-icon name="user-plus" slot="prefix"></wa-icon>
-            Invite
-          </wa-button>
-        </div>
-        </div>
-        <wa-divider></wa-divider>
-      </section>
-    </div>
-  </div>
-</wa-card>
-```

docs/docs/patterns/app/faq.md

@@ -1,119 +0,0 @@
----
-title: FAQ
-description: 'Empower users to learn more with a structured list of questions and answers.'
-isPro: true
----
-
-## 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>
-```
-
-## Multiple Columns
-```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/grid-list.md

@@ -1,525 +0,0 @@
----
-title: Grid List
-description: 'Improve browsing and selection by organizing data in a structured grid layout.'
-isPro: true
----
-
-## 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 & Large Image
-
-```html {.example}
-<div class="wa-grid" style="--min-column-size: 29ch;">
-  <wa-card with-footer>
-    <div class="wa-stack wa-align-items-center wa-gap-xs">
-      <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-         </div>
-        <h2 class="wa-heading-m">Scott Summers</h2>
-        <p class="wa-caption-l">DevOps</p>
-    </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 wa-gap-xs">
-      <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-         </div>
-        <h2 class="wa-heading-m">Kaitlin Moore</h2>
-        <p class="wa-caption-l">Systems Engineer</p>
-    </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 wa-gap-xs">
-      <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-         </div>
-        <h2 class="wa-heading-m">Nessa Riley</h2>
-        <p class="wa-caption-l">Cloud Engineer</p>
-    </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 wa-gap-xs">
-      <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-         </div>
-        <h2 class="wa-heading-m">Veronica Staley</h2>
-        <p class="wa-caption-l">Machine Learning Engineer</p>
-    </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 wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-    </div>
-    <div class="wa-stack wa-gap-3xs">
-      <span>Jeff Hanks</span>
-      <span>Product Designer</span>
-    </div>
-    <div class="wa-cluster wa-gap-3xs">
-      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
-    </div>
-  </article>
-  <article class="wa-stack">
-    <div class="wa-frame wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1674044494331-8db2ecf18d46?q=80&w=3019&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-    </div>
-    <div class="wa-stack wa-gap-3xs">
-      <span>Allen Bryant</span>
-      <span>Staff Engineer</span>
-    </div>
-    <div class="wa-cluster wa-gap-3xs">
-      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
-    </div>
-  </article>
-  <article class="wa-stack">
-    <div class="wa-frame wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-    </div>
-    <div class="wa-stack wa-gap-3xs">
-      <span>Mariah Greene</span>
-      <span>DevOps</span>
-    </div>
-    <div class="wa-cluster wa-gap-3xs">
-      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
-    </div>
-  </article>
-  <article class="wa-stack">
-    <div class="wa-frame wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-    </div>
-    <div class="wa-stack wa-gap-3xs">
-      <span>Beverly Winslow</span>
-      <span>Design Systems Lead</span>
-    </div>
-    <div class="wa-cluster wa-gap-3xs">
-      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
-    </div>
-  </article>
-  <article class="wa-stack">
-    <div class="wa-frame wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-    </div>
-    <div class="wa-stack wa-gap-3xs">
-      <span>Eric Masterson</span>
-      <span>Copy Writer</span>
-    </div>
-    <div class="wa-cluster wa-gap-3xs">
-      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
-    </div>
-  </article>
-  <article class="wa-stack">
-    <div class="wa-frame wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-    </div>
-    <div class="wa-stack wa-gap-3xs">
-      <span>Stephen Coffee</span>
-      <span>Visual Designer</span>
-    </div>
-    <div class="wa-cluster wa-gap-3xs">
-      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></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-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-  label="profile image"></wa-avatar>
-            </div>
-          </wa-card>
-      <wa-button appearance="plain">
-        <wa-icon name="plus"></wa-icon>
-        Add Task
-        </wa-button>
-
-    </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-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-  label="profile image"></wa-avatar>
-            </div>
-          </wa-card>
-          <wa-card>
-            <div class="wa-flank:end">
-              <div class="wa-stack wa-gap-2xs">
-                <div class="wa-cluster wa-gap-2xs">
-                  <span class="wa-heading-s">Visual Testing</span>
-                  <wa-dropdown>
-                    <wa-icon-button id="task-action-3" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
-                    <wa-menu>
-                      <wa-menu-item>Copy link</wa-menu-item>
-                      <wa-menu-item>Rename</wa-menu-item>
-                      <wa-menu-item>Move to trash</wa-menu-item>
-                    </wa-menu>
-                  </wa-dropdown>
-                  <wa-tooltip for="task-action-3">More actions</wa-tooltip>
-                </div>
-                <div class="wa-cluster wa-gap-2xs">
-                <wa-badge appearance="outlined" pill>Design</wa-badge>  <wa-badge variant="danger" appearance="outlined" pill>Priority: High</wa-badge>
-                </div>
-              </div>
-              <wa-avatar image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
-            </div>
-          </wa-card>
-      <wa-button appearance="plain">
-        <wa-icon name="plus"></wa-icon>
-        Add Task
-        </wa-button>
-
-    </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

@@ -1,9 +0,0 @@
----
-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
-isPro: false
----

docs/docs/patterns/app/leaderboard.md

@@ -1,266 +0,0 @@
----
-title: Leaderboard
-description: 'Engage and motivate users by highlighting top performers, scores, and achievements.'
-isPro: true
----
-
-## 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

@@ -1,52 +0,0 @@
----
-title: Pagination
-description: 'Improve navigation and performance by breaking long lists or content into manageable pages.'
-isPro: true
----
-
-## 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

@@ -1,229 +0,0 @@
----
-title: Permissions
-description: 'Permission patterns provide or restrict access to users.'
-isPro: true
----
-
-## 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

@@ -1,168 +0,0 @@
----
-title: Pricing
-description: 'Help users make informed purchasing decisions with clear, structured pricing.'
-isPro: true
----
-
-## 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,371 +0,0 @@
----
-title: Blog
-description: TODO
-unlisted: true
-isPro: true
----
-
-TODO Page Description
-
-## Examples
-
-### Hero
-```html{.example}
-<wa-carousel pagination>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #fe53a0;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-5.jpg"
-    />
-      </div>
-      <h2><span>Do you see any Teletubbies in here?</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #5a90f3;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-1.jpg"
-    />
-      </div>
-      <h2><span>The path of the righteous man is beset on all sides</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #8c431e;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-2.jpg"
-    />
-      </div>
-      <h2><span>Article Title</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #37b3e6;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-3.jpg"
-    />
-      </div>
-      <h2><span>Article Title</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #f993d6;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-4.jpg"
-    />
-      </div>
-      <h2><span>Article Title</span></h2>
-    </a>
-  </wa-carousel-item>
-
-</wa-carousel>
-<style>
-  .hero-link {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    h2 {
-      position: absolute;
-      color: white;
-      top: 25%;
-      left: 15%;
-      width: 200px;
-      padding: .5rem;
-      line-height: 1.15;
-
-      span {
-        background-color: black;
-      }
-    }
-
-    div:first-of-type {
-      width: 30%;
-    }
-    div:last-of-type {
-      width: 70%;
-    }
-  }
-</style>
-```
-
-### Newsletter signup
-```html{.example}
-<wa-card class="news-letter-signup">
-  <h2>Subscribe to our Newsletter</h2>
-  <p>To get the latest and most quality design resources</p>
-  <div class="subscribe-input"> <wa-input></wa-input><wa-button>Subscribe</wa-button></div>
-</wa-card>
-<style>
-  .news-letter-signup {
-        display: block;
-    width: fit-content;
-    margin: 0 auto;
-  }
-  .subscribe-input {
-    display: flex;
-    width: 100%;
-
-    wa-input {
-      width: inherit;
-    }
-
-    wa-button {
-      margin-left: 0.5rem;
-    }
-  }
-</style>
-```
-
-### Posts List
-```html{.example}
-<wa-card with-header>
-  <div slot="header">
-    Recent Articles
-  </div>
-  <div class="body">
-    <div class="post-list">
-      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-1.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;"> <wa-icon fixed-width name="mug-hot"></wa-icon> Lifestyle</span>
-          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Jules</span>
-        </div>
-      </div>
-      <div class="post-list-item" style="display: flex; align-items: center; flex-direction: row-reverse;justify-content: flex-end">
-        <img class="last" src="/assets/images/patterns/flower-crop-2.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column; margin-right: 1rem;">
-          <span style="font-size: small;"><wa-icon fixed-width name="user-nurse"> </wa-icon>Health</span>
-          <span style="font-size: larger;font-weight: 600;">That's clear. Your cells react to bacteria</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Mr. Glass</span>
-        </div>
-      </div>
-      <div  class="post-list-item" style="display: flex; align-items: center; flex-direction: row-reverse;justify-content: flex-end">
-        <img style="display:none;" src="#"/>
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;"><wa-icon fixed-width name="football"></wa-icon> Sports</span>
-          <span style="font-size: larger;font-weight: 600;">Do you see any Teletubbies in here?</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Nick Fury</span>
-        </div>
-      </div>
-      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-3.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;">Lifestyle</span>
-          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Jules</span>
-        </div>
-      </div>
-      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-1.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;">Lifestyle</span>
-          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Jules</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</wa-card>
-<style>
-  .post-list {
-    .post-list-item {
-      border-bottom: 1px solid var(--wa-color-surface-border);
-      margin-bottom: 1rem;
-      padding-bottom: 1rem;
-
-      img {
-        margin-right: 1rem;
-        object-fit: cover;
-        min-width: 50px;
-        min-height: 50px;
-        width: 100px;
-        height: 100px;
-        border-radius: var(--wa-border-radius-circle);
-      }
-      img.last {
-        margin-right: 0;
-      }
-
-      .post-list-item-info span:first-of-type {
-        display: flex;
-        align-items: center;
-      }
-
-      .post-list-item-info span wa-icon {
-        margin-right: 0.25rem;
-      }
-    }
-    .post-list-item:last-of-type {
-      border-bottom: none;
-      margin-bottom: 0;
-      padding-bottom: 0;
-    }
-  }
-</style>
-```
-
-### Related Posts
-```html{.example}
-<wa-card with-image with-footer class="card-overview">
-  <img
-    slot="image"
-    src="https://plus.unsplash.com/premium_photo-1661382011487-cd3d6b1d9dff?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDc0ODd8&ixlib=rb-4.0.3&q=80&w=1080"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-
-  <strong>Color Advancements</strong><br />
-  Lot of new and exciting features in web colors<br />
-  <small>2d ago</small>
-
-  <div slot="footer">
-    <wa-button variant="brand" pill>Read More</wa-button>
-
-  </div>
-</wa-card>
-
-
-
-<style>
-  .card-overview {
-    max-width: 300px;
-  }
-
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-
-```
-### Article footer
-```html{.example}
-<div class="article-footer">
-  <div class="article-tags">
-    <a href="#"><wa-tag size="medium" pill>UX</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Product Design</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Design</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Prototyping</wa-tag></a>
-  </div>
-  <div class="article-actions">
-    <wa-icon-button name="hands-clapping"></wa-icon-button>
-  </div>
-</div>
-```
-
-## Social Share
-
-### Vertical
-```html{.example}
-<wa-card class="social-share-vertical" style="--border-radius: 4rem;">
-  <wa-icon-button name="facebook" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-   <wa-icon-button name="x-twitter" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-    <wa-icon-button name="threads" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-    <wa-icon-button name="mastodon" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-    <wa-icon-button name="paper-plane" family="solid" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-</wa-card>
-<style>
-  .social-share-vertical {
-    display: block;
-    margin: 0 auto;
-    width: fit-content;
-
-    wa-icon-button {
-      font-size: 2.5rem;
-      display: block;
-      margin-bottom: .5rem;
-    }
-     wa-icon-button:last-of-type {
-      margin-bottom: initial;
-    }
-  }
-</style>
-```
-
-### Horizontal
-```html{.example}
-<wa-card with-header with-footer class="social-share-horizontal">
-  <div slot="header">
-    Share this Article
-  </div>
-  <wa-icon-button name="facebook" family="brands" variant="solid" label="Edit" style="--background: #1877f225; --color: #1877f2"></wa-icon-button>
-   <wa-icon-button name="x-twitter" family="brands" variant="solid" label="Edit" style="--background: #00000025; --color: #000000"></wa-icon-button>
-    <wa-icon-button name="threads" family="brands" variant="solid" label="Edit" style="--background: #c32aa325; --color: #c32aa3"></wa-icon-button>
-        <wa-icon-button name="mastodon" family="brands" variant="solid" label="Edit" style="--background: #6364ff25; --color: #6364ff"></wa-icon-button>
-
-    <wa-icon-button name="instagram" family="brands" variant="solid" label="Edit" style="--background: #c32aa325; --color: #c32aa3"></wa-icon-button>
-
-    <wa-icon-button name="pinterest" family="brands" variant="solid" label="Edit" style="--background: #bd081c25; --color: #bd081c"></wa-icon-button>
-    <wa-icon-button name="linkedin" family="brands" variant="solid" label="Edit" style="--background: #0a66c225; --color: #0a66c2"></wa-icon-button>
-    <div slot="footer">
-      <div class="share-input">
-         <wa-input value="https://fontawesome.com"></wa-input>
-    <wa-button variant="brand"> <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>Copy</wa-button>
-      </div>
-
-  </div>
-</wa-card>
-<style>
-  .social-share-horizontal {
-    margin: 0 auto;
-    display: block;
-    width: fit-content;
-
-    wa-icon-button {
-      --background: transparent;
-      --color: initial;
-      font-size: 1.5rem;
-      border-radius: .25rem;
-      background: var(--background);
-    }
-    wa-icon-button::part(base) {
-
-      color: var(--color);
-    }
-
-    .share-input {
-    display: flex;
-
-    wa-input {
-          --border-radius: var(--wa-form-control-border-radius) 0 0 var(--wa-form-control-border-radius);
-    }
-    wa-button {
-      --border-radius:  0 var(--wa-form-control-border-radius)  var(--wa-form-control-border-radius) 0;
-    }
-  }
-  }
-
-</style>
-```

docs/docs/patterns/business.md

@@ -1,10 +0,0 @@
----
-title: Business
-description: TODO
-unlisted: true
-isPro: true
----
-
-TODO Page Description
-
-## Examples

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

@@ -1,84 +0,0 @@
----
-title: Category Filter
-description: 'Helps the user find the right products with filters to refine search results by specific attributes.'
-icon: checkbox
-isPro: true
----
-
-## 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

@@ -1,163 +0,0 @@
----
-title: Category Preview
-description: 'Help shoppers discover your product offerings with showcases of product categories.'
-icon: preview
-isPro: true
----
-
-## 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

@@ -1,245 +0,0 @@
----
-title: Checkout Form
-description: 'Let shoppers checkout with ease with streamlined forms to capture shipping and payment info.'
-isPro: true
----
-
-
-## 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

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

docs/docs/patterns/ecommerce/incentives.md

@@ -1,124 +0,0 @@
----
-title: Incentives
-description: 'Encourage shoppers to buy your products with value propositions, discounts, and promotions.'
-isPro: true
----
-
-## 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">Unlock your Superpower</span>
-      <p class="wa-caption-l">Web development is like a superpower—you can turn your ideas into actual products online, and learning it from home means you don’t need a fancy degree or expensive tuition to start building your future.</p>
-    </div>
-    <div class="wa-frame wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1551981878-4c70c3e64135?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-    </div>
-
-  </div>
-  <div class="wa-grid">
-    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="briefcase" variant="light" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Career Opportunities</span>
-      <p class="wa-caption-m">Mastering web development can lead to high-paying jobs, freelancing gigs, or even launching your own business or app.</p>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="laptop-code" variant="light" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Flexibility of Online Learning</span>
-      <p class="wa-caption-m">Perfect for people balancing school, work, or other responsibilities—no need to attend in-person classes</p>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="palette" variant="light" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Creative & Practical Skillset</span>
-      <p class="wa-caption-m">You can build real, functional things like personal portfolios, blogs, or web apps—and immediately see your progress.</p>
-    </div>
-  </div>
-</div>
-```
-## 2 Column with Cards
-
-```html{.example}
-<div class="wa-grid" style="--min-column-size: 24ch;">
-  <wa-card>
-    <div class="wa-flank">
-    <div>
-      <wa-icon name="hands" style="font-size: 2.5rem;"></wa-icon>
-    </div>
-    <div class="wa-gap-s wa-stack">
-      <span class="wa-heading-m">Hands-on training</span>
-      <p class="wa-caption-l">Upskill effectively with AI-powered coding exercises, practice tests, and quizzes.</p>
-    </div>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-flank">
-    <div>
-      <wa-icon name="medal" style="font-size: 2.5rem;"></wa-icon>
-    </div>
-    <div class="wa-gap-s wa-stack">
-      <span class="wa-heading-m">Certification prep</span>
-      <p class="wa-caption-l">Prep for industry-recognized certifications by solving real-world challenges and earn badges along the way</p>
-    </div>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-flank">
-    <div>
-      <wa-icon name="chart-line" style="font-size: 2.5rem;"></wa-icon>
-    </div>
-    <div class="wa-gap-s wa-stack">
-      <div class="wa-split wa-gap-2xs">
-        <span class="wa-heading-m">Insights and analytics</span>
-        <wa-badge appearance="filled outlined" variant="warning">Pro Plan</wa-badge>
-      </div>
-      <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" style="--min-column-size: 16ch;">
-  <div class="wa-stack wa-gap-xs">
-      <wa-icon family="duotone" name="magnifying-glass" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
-      <span class="wa-heading-s">In-Demand Skills</span>
-      <p class="wa-caption-m">Learn skills that lead to well-paying jobs, freelance work, or remote opportunities.</p>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <wa-icon family="duotone" name="chalkboard-user" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
-      <span class="wa-heading-s">Learn Anytime, Anywhere</span>
-      <p class="wa-caption-m">Flexible learning fits into any schedule—perfect for students, parents, or full-time workers.</p>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <wa-icon family="duotone" name="people-arrows" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
-      <span class="wa-heading-s">Build and Launch Your Own Projects</span>
-      <p class="wa-caption-m">You’re not just learning theory—you’re creating real, functional websites and apps.</p>
-    </div>
-    <div class="wa-stack wa-gap-xs">
-      <wa-icon family="duotone" name="code" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
-      <span class="wa-heading-s">Low-Cost Entry</span>
-      <p class="wa-caption-m">You don’t need a tech degree or expensive tools to get started</p>
-    </div>
-</div>
-</div>
-```

docs/docs/patterns/ecommerce/index.njk

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

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

@@ -1,251 +0,0 @@
----
-title: Order History
-description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
-isPro: true
----
-
-## 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-avatar shape="rounded" label="Avatar with an image icon">
-            <wa-icon slot="icon"family="brands" name="amazon"></wa-icon>
-          </wa-avatar>
-          <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: 0.5rem;"></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-avatar shape="rounded" label="Avatar with an image icon">
-            <wa-icon slot="icon" family="sharp" variant="light" name="shirt"></wa-icon>
-          </wa-avatar>
-          <span class="wa-heading-s">T-shirt Depot</span>
-        </div>
-        <div class="wa-stack wa-gap-xs">
-          <span>Out for Delivery</span>
-          <wa-progress-bar value="95" label="delivery progress" style="height: 0.5rem;"></wa-progress-bar>
-        </div>
-      </div>
-      <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
-        <img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?q=80&w=2400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-      </div>
-    </div>
-  </wa-card>
-  <wa-card>
-    <div class="wa-flank:end">
-      <div class="wa-stack">
-        <div class="wa-cluster wa-gap-xs">
-          <wa-avatar shape="rounded" label="Avatar with an image icon">
-            <wa-icon slot="icon"  variant="duotone" name="gamepad-modern"></wa-icon>
-          </wa-avatar>
-          <span class="wa-heading-s">Game Theory</span>
-        </div>
-        <div class="wa-stack wa-gap-xs">
-          <span>Shipping Soon</span>
-          <wa-progress-bar value="15" label="delivery progress" style="height: 0.5rem;"></wa-progress-bar>
-        </div>
-      </div>
-      <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
-        <img src="https://images.unsplash.com/photo-1627421383054-488d9c9828f5?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
-      </div>
-    </div>
-  </wa-card>
-</div>
-```

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

@@ -1,295 +0,0 @@
----
-title: Order Summary
-description: 'Give shoppers confidence in their purchases with summaries of everything included in their order.'
-isPro: true
----
-
-## 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

@@ -1,183 +0,0 @@
----
-title: Product Lists
-description: 'Let shoppers browse and compare products with detailed lists of the products in your store.'
-isPro: true
----
-
-## 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

@@ -1,430 +0,0 @@
----
-title: Product Overview
-description: 'Showcase your products with overviews including images, ratings, features, options, and more.'
-isPro: true
----
-
-## 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

@@ -1,161 +0,0 @@
----
-title: Product Preview
-description: 'Give shoppers a quick look at your products as they browse with modal previews.'
-icon: preview
-isPro: true
----
-
-## 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

@@ -1,212 +0,0 @@
----
-title: Product Reviews
-description: 'Help shoppers make informed decisions with ratings, reviews, and testimonials from your customers.'
-isPro: true
----
-## 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>
-      <wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
-    </div>
-    <div class="wa-flank">
-      <wa-rating label="Rating" readonly value="5"></wa-rating>
-    <div class="wa-stack wa-gap-2xs">
-      <span class="wa-heading-s">Solid treadmill for home workouts!</span>
-      <p>Best treadmill I've ever owned! It has a sleek design, and the features are top-notch. I use it daily for my cardio workouts, and the motor is powerful enough to keep up with my running. It’s easy to adjust the speed and incline, and the display is clear and simple to read. Worth every penny!</p>
-    </div>
-    </div>
-  </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>
-      <wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
-    </div>
-    <div class="wa-flank">
-      <wa-rating label="Rating" readonly value="4"></wa-rating>
-    <div class="wa-stack wa-gap-2xs">
-      <span class="wa-heading-s">Good value, a few minor flaws</span>
-      <p>Decent treadmill for the price, but I feel like the belt could be a little wider for comfort. The cushioning is good, but sometimes I experience a slight wobble when running at high speeds. For casual walking, it's fine, but I’m not sure it’s built for intense runners.</p>
-    </div>
-    </div>
-  </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>
-      <wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
-    </div>
-    <div class="wa-flank">
-      <wa-rating label="Rating" readonly value="4"></wa-rating>
-    <div class="wa-stack wa-gap-2xs">
-      <span class="wa-heading-s">Decent, but could use upgrades</span>
-      <p>This treadmill has been a great addition to my home gym. It's sturdy, easy to use, and I like that it tracks my steps and heart rate. The only downside is that it's a bit bulky, so I had to rearrange my space to make room for it. Overall, I'm happy with the performance and would recommend it.</p>
-    </div>
-    </div>
-  </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>
-      <wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
-    </div>
-    <div class="wa-flank">
-      <wa-rating label="Rating" readonly value="4"></wa-rating>
-    <div class="wa-stack wa-gap-2xs">
-      <span class="wa-heading-s">Perfect for small spaces</span>
-      <p>I absolutely love my new treadmill! It’s perfect for my daily workouts. The setup was quick, and it’s so quiet that I can use it while watching TV without any interruptions. The different incline levels really help mix up my routine, and the built-in programs keep things interesting. Highly recommend for anyone looking to stay fit at home!</p>
-    </div>
-    </div>
-  </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>
-          <wa-format-number type="percent" value=".63"></wa-format-number>
-        </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>
-          <wa-format-number type="percent" value=".17"></wa-format-number>
-        </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>
-          <wa-format-number type="percent" value=".15"></wa-format-number>
-        </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>
-          <wa-format-number type="percent" value=".03"></wa-format-number>
-        </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>
-          <wa-format-number type="percent" value=".02"></wa-format-number>
-        </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">Michelle Jasper</span>
-            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
-          </div>
-        </div>
-        <p>I bought this grow light for my herbs and succulents, and wow—what a difference. After just a week, my basil perked up, and new leaves started popping up. Super easy to set up and doesn’t get too hot. Highly recommend for anyone growing indoors!</p>
-      </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">Doug Michaels</span>
-            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
-          </div>
-        </div>
-        <p>This light really helps my plants grow during the winter months. The brightness is strong, and I love the adjustable height. The only downside is the timer—it resets if you unplug it. Otherwise, great value for the price!</p>
-      </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">Stephanie Hurst</span>
-            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
-          </div>
-        </div>
-        <p>I don’t get much natural light in my apartment, so this grow light has been a game-changer. I’m using it for my small tomato plants and some lettuce, and they’re growing faster than expected. Plus, the light isn’t too harsh on the eyes</p>
-      </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">Miles Rogers</span>
-            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
-          </div>
-        </div>
-        <p>I’ve tried a few grow lights, and this one is my favorite. It stays cool, uses less power, and my peace lilies and spider plants are growing beautifully. I just wish it came in more color options for the stand, but performance-wise, it’s excellent.</p>
-      </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"></wa-icon-button>
-      <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
-    </div>
-    </div>
-    <div>
-      <wa-rating label="Rating" precision="0.5" value="5" readonly></wa-rating>
-      <p>I recently purchased the Modern Sofa Couch, and I couldn't be happier with my decision! The process from ordering to delivery was smooth and hassle-free</p>
-    </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"></wa-icon-button>
-      <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
-    </div>
-    </div>
-    <div>
-      <wa-rating label="Rating" precision="0.5" value="3.4" readonly></wa-rating>
-      <p>The cushions are soft yet supportive, and the sectional layout gives plenty of space to stretch out. It’s perfect for movie nights or just lounging with a good book.</p>
-    </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"></wa-icon-button>
-      <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
-    </div>
-    </div>
-    <div>
-      <wa-rating label="Rating" precision="0.5" value="3.8" readonly></wa-rating>
-      <p>The leather is high quality, but it’s a little firmer than I thought. That said, after sitting on it for a while, it does soften up and feels more comfortable. It’s perfect if you’re looking for a more structured seating experience.</p>
-    </div>
-
-  </div>
-  <wa-divider></wa-divider>
-</div>
-```

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

@@ -1,278 +0,0 @@
----
-title: Shopping Cart
-description: 'Give shoppers an overview of selected items with shopping carts that let them edit items and proceed to checkout.'
-isPro: true
----
-
-## 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

@@ -1,85 +0,0 @@
----
-title: Store Navigation
-description: 'Help shoppers explore categories and find products with all of the links they need to navigate your store.'
-unlisted: true
-isPro: 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,10 +0,0 @@
----
-title: Business
-description: TODO
-unlisted: true
-isPro: true
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/entertainement.md

@@ -1,10 +0,0 @@
----
-title: Entertainment
-description: TODO
-unlisted: true
-isPro: true
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/index.njk

@@ -1,28 +0,0 @@
----
-title: Patterns
-description: Patterns are reusable UI solutions to common design problems, ready to copy and paste into any project.
-layout: overview
-override:tags: []
-isPro: false
----
-
-<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/) to set up all of these features in your project.
-
-{% endmarkdown %}
-</div>

docs/docs/patterns/membership.md

@@ -1,10 +0,0 @@
----
-title: Membership
-description: TODO
-unlisted: true
-isPro: true
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/news.md

@@ -1,161 +0,0 @@
----
-title: News
-description: TODO
-unlisted: true
-isPro: true
----
-
-TODO Page Description
-
-## Examples
-### Paywall
-
-```html{.example}
-<div>
-  <wa-dialog label="You've run out of free articles... loser" with-header class="dialog-header">
-    <wa-button href="#">Register</wa-button>
-  Already a subscriber? <a href="#">Login</a>
-</wa-dialog>
-
-<wa-button>Open Paywall</wa-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-header');
-  const openButton = dialog.nextElementSibling;
-
-  openButton.addEventListener('click', () => dialog.open = true);
-</script>
-
-</div>
-```
-## Related articles
-```html{.example}
-<div>
-  <wa-card>
-    <div class="card-body">
-      <div style="border-bottom: 1px solid var(--wa-color-surface-border);margin-bottom: 1rem; padding-bottom: 1rem;">
-        <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
-        <h2 style="margin-bottom: var(--wa-space-s);">Title</h2>
-        <p style="margin-bottom: var(--wa-space-3xs);">Fusce lectus lorem, tincidunt non semper sit amet, laoreet vitae nunc. Morbi egestas, libero vitae elementum pretium, nibh ipsum faucibus lacus, id pretium urna ligula eu mauris. Aliquam erat volutpat. Mauris pharetra lacus rhoncus ligula bibendum, at consectetur erat auctor.</p>
-
-      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
-      </div>
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
-        <div>
-            <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
-
-        <p style="margin-bottom: var(--wa-space-3xs);">Etiam et tincidunt est, sollicitudin fermentum ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut suscipit libero at velit fringilla, ac pretium lorem rutrum. Cras luctus blandit semper.</p>
-
-      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
-        </div>
-        <div>
-            <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
-
-        <p style="margin-bottom: var(--wa-space-3xs);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in fringilla ante. In mattis sapien ac aliquet mattis.</p>
-
-      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
-        </div>
-      </div>
-    </div>
-  </wa-card>
-</div>
-```
-
-## Footer
-```html{.example}
-<div class="news-footer">
-  <div class="container">
-  <!-- <div class="logo"> <wa-icon name="user-secret"></wa-icon> <h1 style="--wa-space-xl: 0;">Daily Snoop</h1></div> -->
-  <div class="nav">
-    <section>
-      <h4 style="--wa-space-xl: 0;">News</h4>
-      <ul>
-      <li><a href="#">U.S.</a></li>
-      <li><a href="#">World</a></li>
-      <li><a href="#">Politics</a></li>
-      <li><a href="#">Education</a></li>
-      <li><a href="#">Sports</a></li>
-      <li><a href="#">Business</a></li>
-      <li><a href="#">Tech</a></li>
-      <li><a href="#">Science</a></li>
-    </ul>
-    </section>
-    <section>
-      <h4 style="--wa-space-xl: 0;">Arts</h4>
-      <ul>
-      <li><a href="#">Book Review</a></li>
-      <li><a href="#">Dance</a></li>
-      <li><a href="#">Movies</a></li>
-      <li><a href="#">Pop Culture</a></li>
-    </ul>
-    </section>
-    <section>
-      <h4 style="--wa-space-xl: 0;">Subscriptions</h4>
-      <ul class="list">
-      <li><a href="#"><wa-icon fixed-width name="game-board-simple"></wa-icon> Crossword</a></li>
-      <li><a href="#"><wa-icon fixed-width name="paper-plane"></wa-icon> Newsletters</a></li>
-      <li><a href="#"><wa-icon fixed-width name="microphone-lines"></wa-icon> Podcast</a></li>
-    </ul>
-    </section>
-  </div>
-  <div class="social">
-    <a href="">
-      <wa-icon family="brands" name="bluesky"></wa-icon>
-    </a>
-    <a href="">
-      <wa-icon family="brands" name="instagram"></wa-icon>
-    </a>
-    <a href="">
-      <wa-icon family="brands" name="facebook"></wa-icon>
-    </a>
-    <a href="">
-      <wa-icon family="brands" name="mastodon"></wa-icon>
-    </a>
-  </div>
-  <div>
-    <img src="https://img.fortawesome.com/cfa83f3c/app_store.svg" alt="">
-    <img src="https://img.fortawesome.com/cfa83f3c/google_play.svg" alt="">
-  </div>
-  <div class="legal">&#169; 2024 All rights reserved.</div>
-  </div>
-</div>
-<style>
-  .news-footer {
-
-    .container {
-      max-width: 960px;
-      margin: auto;
-    }
-    .logo {
-      display: flex;
-      align-items: center;
-    }
-    .nav {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-
-    .nav ul {
-      list-style-type: none;
-      margin-left: 0;
-    }
-    .social a {
-      text-decoration: none;
-      display: inline-block;
-    }
-    .social a:not(:last-child) {
-      margin-right: 1rem;
-    }
-    section ul li a {
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-      --wa-color-text-link: var(--wa-color-gray-20);
-
-      wa-icon {
-        margin-right: .5rem;
-      }
-    }
-  }
-</style>
-```

docs/docs/patterns/non-profit.md

@@ -1,10 +0,0 @@
----
-title: Non-profit
-description: TODO
-unlisted: true
-isPro: true
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/patterns.css

@@ -1,7 +0,0 @@
-.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,7 +0,0 @@
-{
-  "layout": "patterns.njk",
-  "tags": ["patterns"],
-  "wide": true,
-  "noAlpha": true,
-  "isPro": true
-}

docs/docs/patterns/portfolio.md

@@ -1,10 +0,0 @@
----
-title: Portfolio
-description: TODO
-unlisted: true
-isPro: true
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/product-landing.md

@@ -1,10 +0,0 @@
----
-title: Product Landing
-description: TODO
-unlisted: true
-isPro: true
----
-
-TODO Page Description
-
-## Examples

docs/docs/test/benchmark.njk

@@ -1,71 +0,0 @@
----
-title: CSS Properties Benchmark
-unlisted: true
-wide: true
----
-
-{% set icons = {
-    check: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>',
-    'chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>',
-    'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>',
-    'chevron-right': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>',
-    circle: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>',
-    'eye-dropper': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>',
-    'grip-vertical': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>',
-    indeterminate: '<svg part="indeterminate-icon" class="icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>',
-    minus: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>',
-    pause: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>',
-    play: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>',
-    star: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>',
-    user: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>',
-    xmark: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>'
-} %}
-
-<style>
-.icon-tests {
-	font-size: .5rem;
-	line-height: 1;
-}
-
-wa-icon {
-	transition: 1s font-size;
-	&:hover {
-		font-size: 1rem;
-	}
-}
-</style>
-
-{% set repetitions = 200 %}
-
-<h2>Setting everything via attributes</h2>
-
-<div class="icon-tests">
-{% for icon, svg in icons %}
-	{% for i in range(repetitions) %}
-	<wa-icon name="{{ icon }}" variant="solid" family="classic"></wa-icon>
-	{% endfor %}
-{% endfor %}
-</div>
-
-<h2>Setting variant & family via CSS</h2>
-
-<div class="icon-tests" style="--wa-icon-variant: regular; --wa-icon-family: classic">
-{% for icon, svg in icons %}
-	{% for i in range(repetitions) %}
-	<wa-icon name="{{ icon }}"></wa-icon>
-	{% endfor %}
-{% endfor %}
-</div>
-
-<h2>Setting name via CSS</h2>
-
-<div class="icon-tests">
-{% for icon, svg in icons %}
-<span style="--wa-icon-name: {{ icon }}">
-	{% for i in range(repetitions) %}
-	<wa-icon variant="solid" family="classic"></wa-icon>
-	{% endfor %}
-</span>
-{% endfor %}
-</div>
-

docs/docs/themes/active.md

@@ -1,8 +0,0 @@
----
-title: Active
-description: Energetic and tactile, always in motion.
-isPro: true
-tags: pro
-palette: rudimentary
-brand: green
----

docs/docs/themes/brutalist.md

@@ -1,8 +0,0 @@
----
-title: Brutalist
-description: Sharp, square, and unapologetically bold.
-isPro: true
-tags: pro
-palette: default
-brand: blue
----

docs/docs/themes/classic.md

@@ -1,6 +0,0 @@
----
-title: Classic
-description: Timeless elegance that never goes out of style.
-order: 0.1
-palette: classic
----

docs/docs/themes/demo.njk

@@ -1,90 +0,0 @@
----
-layout: blank
-pagination:
-  data: collections.theme
-  size: 1
-  alias: theme
-permalink: '/docs/themes/{{ theme.fileSlug }}/demo.html'
-eleventyExcludeFromCollections: true
-override:tags: []
-eleventyComputed:
-  forceTheme: "{{ theme.fileSlug }}"
----
-{% set isPro = theme.data.isPro %}
-{% set status = theme.data.status %}
-{% set since = theme.data.since %}
-<link rel="stylesheet" href="/docs/themes/showcase.css" />
-
-{% set content %}
-<header>
-  {% include 'breadcrumbs.njk' %}
-  <h1 class="title">{{ theme.data.title }}</h1>
-  <p id="mix_and_match" class="wa-size-s"></p>
-  <p id="theme-status">{% include 'status.njk' %}</p>
-  <p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
-</header>
-{% include 'theme-showcase.njk' %}
-{% endset %}
-
-<wa-image-comparer style="width: 100%" position="90">
-<div slot="after" class="theme-showcase wa-gap-xl">
-{{ content | safe }}
-</div>
-<div slot="before" class="theme-showcase wa-gap-xl wa-invert">
-  {{ content | safe }}
-</div>
-</wa-image-comparer>
-
-<script type="module">
-import { urls as stylesheetURLs, docsURLs, icons } from "/assets/scripts/tweak/data.js";
-import { getThemeCode } from "/assets/scripts/tweak/code.js";
-
-function updateTheme() {
-  let params = new URLSearchParams(window.location.search);
-  params = Object.fromEntries(params.entries());
-
-  for (let link of document.querySelectorAll('link.mix-and-match')) {
-    link.remove();
-  }
-
-  let tweaks = [];
-  let code = getThemeCode("{{ theme.fileSlug }}", params, {attributes: 'class="mix-and-match"'});
-  document.head.insertAdjacentHTML('beforeend', code);
-
-  for (let name in stylesheetURLs) {
-    let override = params[name];
-    if (override) {
-      let docsURL = docsURLs[name] ? docsURLs[name] + override + '/' : '';
-      let title = override.replace(/^[a-z]/g, c => c.toUpperCase());
-
-      if (docsURL) {
-        title = `<a href="${ docsURL }">${ title }</a>`;
-      }
-
-      let icon = icons[name];
-      tweaks.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> ${ title }`);
-    }
-  }
-
-  let isRemixed = tweaks.length > 0;
-  document.documentElement.classList.toggle('is-remixed', isRemixed);
-
-  if (isRemixed) {
-    for (let p of document.querySelectorAll("#theme-status")) {
-        let proBadge = p.querySelector(".pro");
-        if (!proBadge) {
-          p.insertAdjacentHTML('beforeend', '<wa-badge class="pro">PRO</wa-badge>');
-        }
-    }
-
-    for (let p of mix_and_match) {
-      if (tweaks.length) {
-        p.innerHTML = `<strong><wa-icon name="arrows-rotate"></wa-icon> Remixed</strong> ` + tweaks.map(msg => `<wa-badge appearance=outlined>
-          ${ msg }</wa-badge>`).join(' ');
-      }
-    }
-  }
-
-}
-updateTheme();
-</script>

docs/docs/themes/glossy.md

@@ -1,8 +0,0 @@
----
-title: Glossy
-description: Bustling with plenty of luster and shine.
-isPro: true
-tags: pro
-palette: elegant
-brand: indigo
----

docs/docs/themes/matter.md

@@ -1,86 +0,0 @@
----
-title: Matter
-description: Digital design inspired by the real world.
-isPro: true
-tags: pro
-palette: mild
-brand: indigo
----
-
-Set the page theme to "{{ title }}" from the top right to preview the following examples.
-
-## Floating Labels
-
-This theme implements "floating labels" for `wa-input`, `wa-textarea`, `wa-select`,
-which makes labels look like placeholders when the input is empty, does not have an actual placeholder, and is not focused.
-
-```html {.example}
-<wa-input label="What is your name?"></wa-input>
-<br>
-<wa-input label="What is your name?" appearance="filled"></wa-input>
-```
-
-## Ripple Effect
-
-This theme implements a ripple effect for buttons, including native buttons.
-Click on the following buttons to observe it:
-
-```html {.example}
-<wa-button variant="brand">Button</wa-button>
-<button class="wa-brand">Button</button>
-```
-
-
-
-### Customization
-
-You can use several properties to customize the ripple effect.
-
-These properties can be set on any ancestor, including the root element:
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `--wa-ripple-start-radius` | `<length>` | `0.1em` | The starting radius of the ripple effect. |
-| `--wa-ripple-start-opacity` | `<number>` | `0.1` | The starting opacity of the ripple effect. |
-| `--wa-ripple-duration` | `<time>` | `calc(2 * var(--wa-transition-slow))` | The duration of the ripple effect transition. |
-
-Any of these can be used to disable the ripple effect:
-
-```css
---wa-ripple-start-radius: 0em;
-```
-```css
---wa-ripple-start-opacity: 0;
-```
-```css
---wa-ripple-duration: 0s;
-```
-
-These properties would only work on the button itself:
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `--wa-ripple-center-x` | `<percentage>` | `50%` | The x-coordinate of the ripple center point as a percentage of the button width. |
-| `--wa-ripple-center-y` | `<percentage>` | `50%` | The y-coordinate of the ripple center point as a percentage of the button height. |
-
-### Ripple Center Point
-
-By default the ripple effect starts from the center of the button.
-If you want it to start from the position the button was clicked, you can use this JS snippet:
-
-```js
-document.addEventListener("mousedown", evt => {
-	let target = evt.target;
-
-	if (!target.matches?.('wa-button, button, .wa-button')) {
-		return;
-	}
-
-	let rect = target.getBoundingClientRect();
-	let x = (evt.clientX - rect.left) / rect.width;
-	let y = (evt.clientY - rect.top) / rect.height;
-
-	target.style.setProperty("--mouse-local-x", x);
-	target.style.setProperty("--mouse-local-y", y);
-});
-```

docs/docs/themes/mellow.md

@@ -1,7 +0,0 @@
----
-title: Mellow
-description: Soft and soothing, like a lazy Sunday morning.
-isPro: true
-tags: pro
-palette: natural
----

docs/docs/themes/playful.md

@@ -1,8 +0,0 @@
----
-title: Playful
-description: Cheerful and engaging, like a playground on screen.
-isPro: true
-tags: pro
-palette: rudimentary
-brand: purple
----

docs/docs/themes/premium.md

@@ -1,8 +0,0 @@
----
-title: Premium
-description: The ultimate in sophistication and style.
-isPro: true
-tags: pro
-palette: anodized
-brand: cyan
----