Add component reference / cheatsheet

No need for functions or computing multiple times, that's what data is for!

.github/workflows/node.js.yml

@@ -1,37 +1,6 @@
 # # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
 # # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-# name: Node.js CI
-
-# on:
-#   push:
-#     branches: [next]
-#   pull_request:
-#     branches: [next]
-
-# jobs:
-#   build:
-#     runs-on: ubuntu-latest
-
-#     strategy:
-#       matrix:
-#         node-version: [20.x]
-#         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-#     steps:
-#       - uses: actions/checkout@v4
-#       - name: Use Node.js ${{ matrix.node-version }}
-#         uses: actions/setup-node@v4
-#         with:
-#           node-version: ${{ matrix.node-version }}
-#           cache: 'npm'
-#       - run: npm ci
-#       - run: npx playwright install-deps
-#       - run: npm run verify
-
-# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: Node.js CI
 
 on:
@@ -41,7 +10,7 @@ on:
     branches: [next]
 
 jobs:
-  lint:
+  client_test:
     runs-on: ubuntu-latest
 
     strategy:
@@ -56,10 +25,19 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
-      - run: npm ci
-      - run: npm run prettier && npm run lint
 
-  test_client:
+      - name: Install dependencies
+        run: npm ci
+      - name: Lint
+        run: npm run prettier && npm run lint
+      - name: Build
+        run: npm run build
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Run CSR tests
+        # FAIL_FAST to fail on first failing test.
+        run: FAIL_FAST="true" CSR_ONLY="true" npm run test
+  ssr_test:
     runs-on: ubuntu-latest
 
     strategy:
@@ -74,28 +52,19 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
-      - run: npm ci
-      - run: npx playwright uninstall --all && npx playwright install --force chromium firefox webkit --with-deps
-      - run: npm run build
-      # --bail to fail on first failing test.
-      - run: CSR_ONLY="true" npm run test -- --bail
+      - 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 && npm run lint
 
-  test_ssr:
-    runs-on: ubuntu-latest
+      - name: Build
+        run: npm run build
 
-    strategy:
-      matrix:
-        node-version: [20.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Run SSR tests
+        # FAIL_FAST to fail on first failing test.
+        run: FAIL_FAST="true" SSR_ONLY="true" npm run test
 
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-      - run: npm ci
-      - run: npx playwright uninstall --all && npx playwright install --force chromium firefox webkit --with-deps
-      - run: npm run build
-      - run: SSR_ONLY="true" npm run test -- --bail

cspell.json

@@ -5,6 +5,7 @@
     "allowfullscreen",
     "animationend",
     "Animista",
+    "APG",
     "apos",
     "atrule",
     "autocorrect",
@@ -71,6 +72,7 @@
     "haspopup",
     "heroicons",
     "hexa",
+    "Hotwire",
     "Iconoir",
     "Iframes",
     "iife",
@@ -79,7 +81,6 @@
     "ionicons",
     "jsDelivr",
     "jsfiddle",
-    "jsonata",
     "keydown",
     "keyframes",
     "Kool",
@@ -96,6 +97,7 @@
     "Menlo",
     "menuitemcheckbox",
     "menuitemradio",
+    "metaframeworks",
     "middlewares",
     "minlength",
     "monospace",
@@ -140,6 +142,7 @@
     "scroller",
     "Segoe",
     "semibold",
+    "shadowrootmode",
     "Shortcode",
     "Shortcodes",
     "sitedir",

docs/.eleventy.js

@@ -10,7 +10,7 @@ import { replaceTextPlugin } from './_utils/replace-text.js';
 import { searchPlugin } from './_utils/search.js';
 import { readFile } from 'fs/promises';
 import { outlinePlugin } from './_utils/outline.js';
-import { getComponents } from './_utils/manifest.js';
+import componentList from './_data/componentList.js';
 import litPlugin from '@lit-labs/eleventy-plugin-lit';
 
 import process from 'process';
@@ -46,16 +46,6 @@ export default function (eleventyConfig) {
   });
 
   // Helpers
-  eleventyConfig.addNunjucksGlobal('getComponent', tagName => {
-    const component = getComponents().find(c => c.tagName === tagName);
-
-    if (!component) {
-      throw new Error(
-        `Unable to find "<${tagName}>". Make sure the file name is the same as the tag name (without prefix).`
-      );
-    }
-    return component;
-  });
 
   // Use our own markdown instance
   eleventyConfig.setLibrary('md', markdown);
@@ -115,8 +105,7 @@ export default function (eleventyConfig) {
   // mutation-observer (why SSR this?)
   // resize-observer (why SSR this?)
   // tooltip (why SSR this?)
-
-  const componentModules = getComponents()
+  const componentModules = componentList
     // .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
     .map(component => {
       const name = component.tagName.split(/wa-/)[1];

docs/_data/componentList.js

@@ -0,0 +1,75 @@
+/**
+ * @module components Fetches components from custom-elements.json and exposes them in a saner format.
+ */
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { readFileSync } from 'fs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const manifest = JSON.parse(readFileSync(resolve(__dirname, '../../dist/custom-elements.json'), 'utf-8'));
+
+const components = manifest.modules.flatMap(module => {
+  return module.declarations
+    .filter(c => c?.customElement)
+    .map(declaration => {
+      // Generate the dist path based on the src path and attach it to the component
+      declaration.path = module.path.replace(/^src\//, 'dist/').replace(/\.ts$/, '.js');
+
+      // Remove private members and those that lack a description
+      const members = declaration.members?.filter(member => member.description && member.privacy !== 'private');
+
+      const methods = members?.filter(prop => prop.kind === 'method' && prop.privacy !== 'private');
+      const attributes = declaration.attributes ?? [];
+      const properties = members?.filter(prop => {
+        // Look for a corresponding attribute
+        const attribute = attributes?.find(attr => attr.fieldName === prop.name);
+        if (attribute) {
+          prop.attribute = attribute.name || attribute.fieldName;
+        }
+
+        return prop.kind === 'field' && prop.privacy !== 'private';
+      });
+
+      return {
+        ...declaration,
+        slug: declaration.tagName.replace(/^wa-/, ''),
+        methods,
+        attributes,
+        properties
+      };
+    });
+});
+
+// Build dependency graphs
+components.forEach(component => {
+  const dependencies = [];
+
+  // Recursively fetch sub-dependencies
+  function getDependencies(tag) {
+    const cmp = components.find(c => c.tagName === tag);
+    if (!cmp || !Array.isArray(component.dependencies)) {
+      return;
+    }
+
+    cmp.dependencies?.forEach(dependentTag => {
+      if (!dependencies.includes(dependentTag)) {
+        dependencies.push(dependentTag);
+      }
+      getDependencies(dependentTag);
+    });
+  }
+
+  getDependencies(component.tagName);
+
+  component.dependencies = dependencies.sort();
+});
+
+// Sort by name
+components.sort((a, b) => {
+  if (a.name < b.name) return -1;
+  if (a.name > b.name) return 1;
+  return 0;
+});
+
+export default components;

docs/_data/components.js

@@ -0,0 +1,3 @@
+import componentList from './componentList.js';
+
+export default Object.fromEntries(componentList.map(component => [component.slug, component]));

docs/_data/componentsBy.js

@@ -0,0 +1,43 @@
+import components from './components.js';
+
+const by = {
+  attribute: {},
+  slot: {},
+  event: {},
+  method: {},
+  cssPart: {},
+  cssProperty: {}
+};
+
+function getAll(component, type) {
+  let prop = type + 's';
+  if (type === 'cssProperty') {
+    prop = 'cssProperties';
+  }
+
+  return component[prop] ?? [];
+}
+
+for (const componentName in components) {
+  const component = components[componentName];
+
+  for (const type of ['attribute', 'slot', 'event', 'method', 'cssPart', 'cssProperty']) {
+    for (const item of getAll(component, type)) {
+      by[type][item.name] ??= [];
+      by[type][item.name].push(component);
+    }
+  }
+}
+
+// Sort by descending number of components
+const sortByLengthDesc = (a, b) => b[1].length - a[1].length;
+
+for (const key in by) {
+  by[key] = sortObject(by[key], sortByLengthDesc);
+}
+
+export default by;
+
+function sortObject(obj, sorter) {
+  return Object.fromEntries(Object.entries(obj).sort(sorter));
+}

docs/_includes/base.njk

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-cdn-url="{% cdnUrl %}">
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -22,6 +22,7 @@
     <script type="module" src="/assets/scripts/code-examples.js"></script>
     <script type="module" src="/assets/scripts/color-scheme.js"></script>
     <script type="module" src="/assets/scripts/copy-code.js"></script>
+    <script type="module" src="/assets/scripts/preset-theme.js"></script>
     <script type="module" src="/assets/scripts/scroll.js"></script>
     <script type="module" src="/assets/scripts/turbo.js"></script>
     <script type="module" src="/assets/scripts/search.js"></script>
@@ -30,9 +31,10 @@
 
     {# Web Awesome #}
     <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
-    <link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
+    <link rel="stylesheet" id="theme-stylesheet" />
     <link rel="stylesheet" href="/dist/themes/applied.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/color_standard.css" />
+    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
+    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />
     <link rel="stylesheet" href="/dist/themes/forms.css" />
 
     {# Docs styles #}
@@ -40,9 +42,30 @@
 
     {# Set the theme to prevent flashing #}
     <script>
+      function getColorScheme() {
+        return localStorage.getItem('colorScheme') || 'auto';
+      }
+
+      function getPresetTheme () {
+        return localStorage.getItem('presetTheme') || 'default';
+      }
+
+      function isDark() {
+        const colorScheme = getColorScheme()
+        if (colorScheme === 'auto') {
+          return window.matchMedia('(prefers-color-scheme: dark)').matches;
+        }
+        return colorScheme === 'dark';
+      }
+
+      const stylesheet = document.getElementById("theme-stylesheet")
+      let preset = getPresetTheme()
+
+      stylesheet.href = `/dist/themes/${preset}.css`
+
       document.documentElement.classList.toggle(
-        'wa-theme-default-dark',
-        sessionStorage.getItem('colorScheme') === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches
+        `wa-theme-${preset}-dark`,
+        isDark()
       );
     </script>
   </head>
@@ -65,6 +88,25 @@
         </div>
 
         <div id="docs-toolbar">
+          {# Preset theme selector #}
+          <wa-dropdown id="preset-theme-selector">
+            <wa-button slot="trigger" appearance="tinted" size="small" pill caret>
+              <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
+              <span id="preset-theme-selector__text" class="only-desktop">Default</span>
+            </wa-button>
+            <wa-menu>
+              <wa-menu-item type="checkbox" value="default">Default</wa-menu-item>
+              <wa-menu-item type="checkbox" value="classic">Classic</wa-menu-item>
+              <wa-menu-item type="checkbox" value="fa">Font Awesome</wa-menu-item>
+
+              <wa-menu-item type="checkbox" value="active">Active</wa-menu-item>
+              <wa-menu-item type="checkbox" value="brutalist">Brutalism</wa-menu-item>
+              <wa-menu-item type="checkbox" value="glassy">Glassy</wa-menu-item>
+              <wa-menu-item type="checkbox" value="migration">Migration</wa-menu-item>
+              <wa-menu-item type="checkbox" value="playful">Playful</wa-menu-item>
+              <wa-menu-item type="checkbox" value="premium">Premium</wa-menu-item>
+            </wa-menu>
+          </wa-dropdown>
           {# Color scheme selector #}
           <wa-dropdown id="color-scheme-selector">
             <wa-button slot="trigger" appearance="tinted" size="small" pill caret title="Press \ to toggle">

docs/_includes/sidebar.njk

@@ -215,9 +215,48 @@
   </li>
 </ul>
 
+{# Layout #}
+<h2>Layout</h2>
+<ul>
+  <li><a href="/docs/layout">Layout Overview</a></li>
+  <li><a href="/docs/components/page">Page</a></li>
+  <li><a href="/docs/layout/cluster">Cluster</a></li>
+  <li><a href="/docs/layout/flank">Flank</a></li>
+  <li><a href="/docs/layout/frame">Frame</a></li>
+  <li><a href="/docs/layout/grid">Grid</a></li>
+  <li><a href="/docs/layout/split">Split</a></li>
+  <li><a href="/docs/layout/stack">Stack</a></li>
+</ul>
+
+{# Patterns #}
+<h2>Patterns</h2>
+<ul>
+  <li>
+    <a href="/docs/patterns/">Pattern Overview</a>
+  </li>
+  <li><a href="/docs/patterns/app">Web App</a></li>
+  <li><a href="/docs/patterns/ecommerce">E-commerce</a>
+    <ul>
+      <li><a href="/docs/patterns/ecommerce-product-review">Product Reviews</a></li>
+      <li><a href="/docs/patterns/ecommerce-product-list">Product Lists</a></li>
+      <li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
+      <li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
+       <li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
+      <li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
+      <li><a href="/docs/patterns/ecommerce-order-summmary">Order Summaries</a></li>
+      <li><a href="/docs/patterns/ecommerce-order-history">Order History</a></li>
+    </ul>
+  </li>
+  <li><a href="/docs/patterns/blog">Blog</a></li>
+  <li><a href="/docs/patterns/news">News</a></li>
+</ul>
+
 {# Theming #}
 <h2>Theming</h2>
 <ul>
+  <li>
+    <a href="/docs/theming/">Theming Overview</a>
+  </li>
   <li>
     <a href="/docs/theming/color">Color</a>
   </li>
@@ -243,3 +282,12 @@
     <a href="/docs/theming/component-groups">Component Groups</a>
   </li>
 </ul>
+
+{# Style Utilities #}
+<h2>Style Utilities</h2>
+<ul>
+  <li><a href="/docs/style-utilities/align-items">Align Items</a></li>
+  <li><a href="/docs/style-utilities/border-radius">Border Radius</a></li>
+  <li><a href="/docs/style-utilities/gap">Gap</a></li>
+  <li><a href="/docs/style-utilities/text">Text</a></li>
+</ul>

docs/_includes/svgs/layout/cluster.njk

@@ -0,0 +1,11 @@
+<svg width="88" height="64" viewBox="0 0 88 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V10C24 13.3137 21.3137 16 18 16H6C2.68629 16 0 13.3137 0 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M0 30C0 26.6863 2.68629 24 6 24H10C13.3137 24 16 26.6863 16 30V34C16 37.3137 13.3137 40 10 40H6C2.68629 40 0 37.3137 0 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M0 54C0 50.6863 2.68629 48 6 48H26C29.3137 48 32 50.6863 32 54V58C32 61.3137 29.3137 64 26 64H6C2.68629 64 0 61.3137 0 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M32 6C32 2.68629 34.6863 0 38 0H42C45.3137 0 48 2.68629 48 6V10C48 13.3137 45.3137 16 42 16H38C34.6863 16 32 13.3137 32 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M24 30C24 26.6863 26.6863 24 30 24H42C45.3137 24 48 26.6863 48 30V34C48 37.3137 45.3137 40 42 40H30C26.6863 40 24 37.3137 24 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M40 54C40 50.6863 42.6863 48 46 48H58C61.3137 48 64 50.6863 64 54V58C64 61.3137 61.3137 64 58 64H46C42.6863 64 40 61.3137 40 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M56 6C56 2.68629 58.6863 0 62 0H82C85.3137 0 88 2.68629 88 6V10C88 13.3137 85.3137 16 82 16H62C58.6863 16 56 13.3137 56 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M56 30C56 26.6863 58.6863 24 62 24H66C69.3137 24 72 26.6863 72 30V34C72 37.3137 69.3137 40 66 40H62C58.6863 40 56 37.3137 56 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M72 54C72 50.6863 74.6863 48 78 48H82C85.3137 48 88 50.6863 88 54V58C88 61.3137 85.3137 64 82 64H78C74.6863 64 72 61.3137 72 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+</svg>

docs/_includes/svgs/layout/flank.njk

@@ -0,0 +1,4 @@
+<svg width="128" height="24" viewBox="0 0 128 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V18C24 21.3137 21.3137 24 18 24H6C2.68629 24 0 21.3137 0 18V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M32 6C32 2.68629 34.6863 0 38 0H122C125.314 0 128 2.68629 128 6V18C128 21.3137 125.314 24 122 24H38C34.6863 24 32 21.3137 32 18V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+</svg>

docs/_includes/svgs/layout/frame.njk

@@ -0,0 +1,6 @@
+<svg width="82" height="66" viewBox="0 0 82 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 15C17 11.6863 19.6863 9 23 9H59C62.3137 9 65 11.6863 65 15V51C65 54.3137 62.3137 57 59 57H23C19.6863 57 17 54.3137 17 51V15Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M1 7C1 3.68629 3.68629 1 7 1H75C78.3137 1 81 3.68629 81 7V59C81 62.3137 78.3137 65 75 65H7C3.68629 65 1 62.3137 1 59V7Z" stroke="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 6"/>
+<path d="M25 40.6444L30.3333 35.3111L35.6667 40.6444L46.3333 28.8444L57 40.6444" stroke="var(--wa-color-neutral-fill-quiet)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.8889 29.5556C32.8889 30.9669 31.7447 32.1111 30.3333 32.1111C28.9219 32.1111 27.7778 30.9669 27.7778 29.5556C27.7778 28.1442 28.9219 27 30.3333 27C31.7447 27 32.8889 28.1442 32.8889 29.5556Z" stroke="var(--wa-color-neutral-fill-quiet)" stroke-width="2"/>
+</svg>

docs/_includes/svgs/layout/grid.njk

@@ -0,0 +1,11 @@
+<svg width="88" height="64" viewBox="0 0 88 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V10C24 13.3137 21.3137 16 18 16H6C2.68629 16 0 13.3137 0 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M0 30C0 26.6863 2.68629 24 6 24H18C21.3137 24 24 26.6863 24 30V34C24 37.3137 21.3137 40 18 40H6C2.68629 40 0 37.3137 0 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M0 54C0 50.6863 2.68629 48 6 48H18C21.3137 48 24 50.6863 24 54V58C24 61.3137 21.3137 64 18 64H6C2.68629 64 0 61.3137 0 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M32 6C32 2.68629 34.6863 0 38 0H50C53.3137 0 56 2.68629 56 6V10C56 13.3137 53.3137 16 50 16H38C34.6863 16 32 13.3137 32 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M32 30C32 26.6863 34.6863 24 38 24H50C53.3137 24 56 26.6863 56 30V34C56 37.3137 53.3137 40 50 40H38C34.6863 40 32 37.3137 32 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M32 54C32 50.6863 34.6863 48 38 48H50C53.3137 48 56 50.6863 56 54V58C56 61.3137 53.3137 64 50 64H38C34.6863 64 32 61.3137 32 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M64 6C64 2.68629 66.6863 0 70 0H82C85.3137 0 88 2.68629 88 6V10C88 13.3137 85.3137 16 82 16H70C66.6863 16 64 13.3137 64 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M64 30C64 26.6863 66.6863 24 70 24H82C85.3137 24 88 26.6863 88 30V34C88 37.3137 85.3137 40 82 40H70C66.6863 40 64 37.3137 64 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M64 54C64 50.6863 66.6863 48 70 48H82C85.3137 48 88 50.6863 88 54V58C88 61.3137 85.3137 64 82 64H70C66.6863 64 64 61.3137 64 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+</svg>

docs/_includes/svgs/layout/split.njk

@@ -0,0 +1,4 @@
+<svg width="128" height="24" viewBox="0 0 128 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V18C24 21.3137 21.3137 24 18 24H6C2.68629 24 0 21.3137 0 18V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M104 6C104 2.68629 106.686 0 110 0H122C125.314 0 128 2.68629 128 6V18C128 21.3137 125.314 24 122 24H110C106.686 24 104 21.3137 104 18V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+</svg>

docs/_includes/svgs/layout/stack.njk

@@ -0,0 +1,5 @@
+<svg width="88" height="64" viewBox="0 0 88 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H82C85.3137 0 88 2.68629 88 6V10C88 13.3137 85.3137 16 82 16H6C2.68629 16 0 13.3137 0 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M0 30C0 26.6863 2.68629 24 6 24H82C85.3137 24 88 26.6863 88 30V34C88 37.3137 85.3137 40 82 40H6C2.68629 40 0 37.3137 0 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+<path d="M0 54C0 50.6863 2.68629 48 6 48H82C85.3137 48 88 50.6863 88 54V58C88 61.3137 85.3137 64 82 64H6C2.68629 64 0 61.3137 0 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
+</svg>

docs/_includes/svgs/theming/borders.njk

@@ -0,0 +1,6 @@
+<svg width="64" height="49" viewBox="0 0 64 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="0.5" y1="0.5" x2="63.5" y2="0.5" stroke="var(--wa-color-neutral-border-normal)" stroke-linecap="round"/>
+<line x1="1" y1="16" x2="63" y2="16" stroke="var(--wa-color-neutral-border-normal)" stroke-width="2" stroke-linecap="round"/>
+<line x1="2" y1="31" x2="62" y2="31" stroke="var(--wa-color-neutral-border-normal)" stroke-width="4" stroke-linecap="round"/>
+<line x1="3" y1="46" x2="61" y2="46" stroke="var(--wa-color-neutral-border-normal)" stroke-width="6" stroke-linecap="round"/>
+</svg>

docs/_includes/svgs/theming/color.njk

@@ -0,0 +1,8 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.8665 59.1993L33.7329 33H64C63.8352 38.2705 62.3694 43.4244 59.7264 48C57.0833 52.5756 53.3507 56.4213 48.8665 59.1993Z" fill="var(--wa-color-green-70)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32 64C26.714 64 21.5155 62.6919 16.8665 60.1993L32 34L47.1336 60.1993C42.4845 62.6919 37.286 64 32 64Z" fill="var(--wa-color-blue-60)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 48C1.63063 43.4244 0.164839 38.2706 0 33L30.2671 33L15.1336 59.1993C10.6493 56.4213 6.91666 52.5756 4.27365 48Z" fill="var(--wa-color-indigo-60)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-violet-60)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32 30L16.8665 3.80072C21.5155 1.30813 26.714 0 32 0C37.286 0 42.4845 1.30813 47.1336 3.80072L32 30Z" fill="var(--wa-color-red-60)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.7329 31L48.8665 4.80072C53.3507 7.57868 57.0833 11.4244 59.7264 16C62.3694 20.5756 63.8352 25.7294 64 31L33.7329 31Z" fill="var(--wa-color-yellow-80)"/>
+</svg>

docs/_includes/svgs/theming/component-groups.njk

@@ -0,0 +1,10 @@
+<svg width="80" height="37" viewBox="0 0 80 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="26" width="28" height="16" rx="8" fill="var(--wa-color-brand-fill-loud)"/>
+<circle cx="46" cy="8" r="4" fill="var(--wa-color-surface-default)"/>
+<circle cx="72" cy="8" r="7" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-brand-fill-loud)" stroke-width="2"/>
+<circle cx="72" cy="8" r="4" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M0 3C0 1.34315 1.34315 0 3 0H13C14.6569 0 16 1.34315 16 3V13C16 14.6569 14.6569 16 13 16H3C1.34315 16 0 14.6569 0 13V3Z" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M12.5977 4.65234C12.877 4.91016 12.877 5.36133 12.5977 5.61914L7.09766 11.1191C6.83984 11.3984 6.38867 11.3984 6.13086 11.1191L3.38086 8.36914C3.10156 8.11133 3.10156 7.66016 3.38086 7.40234C3.63867 7.12305 4.08984 7.12305 4.34766 7.40234L6.625 9.6582L11.6309 4.65234C11.8887 4.37305 12.3398 4.37305 12.5977 4.65234Z" fill="var(--wa-color-brand-on-loud)"/>
+<rect y="24" width="80" height="8" rx="4" fill="var(--wa-color-neutral-fill-normal)"/>
+<rect x="49" y="20" width="16" height="16" rx="8" fill="var(--wa-color-brand-fill-loud)" stroke="var(--wa-color-surface-default)" stroke-width="2"/>
+</svg>

docs/_includes/svgs/theming/focus.njk

@@ -0,0 +1,5 @@
+<svg width="76" height="44" viewBox="0 0 76 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12C6 8.68629 8.68629 6 12 6H64C67.3137 6 70 8.68629 70 12V32C70 35.3137 67.3137 38 64 38H12C8.68629 38 6 35.3137 6 32V12Z" fill="var(--wa-color-neutral-fill-normal)"/>
+<path d="M18.375 19.125C18.375 18.4414 18.9219 17.875 19.625 17.875H21.5C23.2188 17.875 24.625 19.2812 24.625 21C24.625 22.7383 23.2188 24.125 21.5 24.125H19.625V26C19.625 26.3516 19.332 26.625 19 26.625C18.6484 26.625 18.375 26.3516 18.375 26V23.5V19.125ZM19.625 22.875H21.5C22.5352 22.875 23.375 22.0352 23.375 21C23.375 19.9648 22.5352 19.125 21.5 19.125H19.625V22.875ZM27.875 17.875H30.0625C31.6055 17.875 32.875 19.1445 32.875 20.6875C32.875 21.8789 32.1328 22.8945 31.1172 23.3047L32.7578 25.6484C32.9531 25.9414 32.875 26.332 32.6016 26.5273C32.3086 26.7227 31.918 26.6445 31.7227 26.3711L29.7305 23.5H27.875V26C27.875 26.3516 27.582 26.625 27.25 26.625C26.8984 26.625 26.625 26.3516 26.625 26V22.875V19.125C26.625 18.4414 27.1719 17.875 27.875 17.875ZM30.0625 22.25C30.9219 22.25 31.625 21.5664 31.625 20.6875C31.625 19.8281 30.9219 19.125 30.0625 19.125H27.875V22.25H30.0625ZM36.125 17.875H40.5C40.832 17.875 41.125 18.168 41.125 18.5C41.125 18.8516 40.832 19.125 40.5 19.125H36.125V21.625H39.25C39.582 21.625 39.875 21.918 39.875 22.25C39.875 22.6016 39.582 22.875 39.25 22.875H36.125V25.375H40.5C40.832 25.375 41.125 25.668 41.125 26C41.125 26.3516 40.832 26.625 40.5 26.625H36.125C35.4219 26.625 34.875 26.0781 34.875 25.375V22.25V19.125C34.875 18.4414 35.4219 17.875 36.125 17.875ZM45.0586 19.3203C44.668 19.4766 44.4531 19.75 44.3945 20.082C44.3359 20.3555 44.375 20.5312 44.4336 20.668C44.4922 20.7852 44.5898 20.9023 44.7461 21.0195C45.1367 21.293 45.7031 21.4492 46.4062 21.6641C46.4258 21.6641 46.4453 21.6641 46.4648 21.6836C47.1094 21.8594 47.8711 22.0742 48.4375 22.4648C48.75 22.6797 49.0234 22.9727 49.1992 23.3438C49.375 23.7344 49.4141 24.1641 49.3164 24.6523C49.1797 25.4727 48.6328 26.0391 47.9297 26.3516C47.2266 26.6445 46.3672 26.7031 45.5078 26.5664C45.0391 26.4883 44.2773 26.2344 43.7891 26.0586C43.6914 26.0391 43.6133 26 43.5352 25.9805C43.2227 25.8633 43.0469 25.5117 43.1445 25.1797C43.2617 24.8672 43.6133 24.6914 43.9453 24.7891C44.043 24.8281 44.1406 24.8477 44.2578 24.8867C44.7461 25.0625 45.3516 25.2773 45.7031 25.3359C46.4258 25.4336 47.0117 25.375 47.4219 25.1992C47.832 25.0234 48.0273 24.7695 48.0859 24.4375C48.1445 24.1641 48.1055 23.9688 48.0469 23.8516C48.0078 23.7344 47.8906 23.6172 47.7344 23.5C47.3438 23.2266 46.7773 23.0703 46.0742 22.8555C46.0547 22.8555 46.0352 22.8555 46.0156 22.8359C45.3711 22.6602 44.6094 22.4453 44.043 22.0547C43.7305 21.8398 43.457 21.5469 43.2812 21.1758C43.125 20.7852 43.0859 20.3555 43.1641 19.8672L43.7695 19.9844L43.1641 19.8672C43.3008 19.0469 43.8477 18.4805 44.5508 18.168C45.2539 17.875 46.1133 17.8164 46.9727 17.9531C47.2266 17.9922 48.0078 18.1484 48.2812 18.2266C48.6133 18.3047 48.8086 18.6562 48.7109 18.9883C48.6328 19.3203 48.2812 19.5156 47.9492 19.418C47.7344 19.3594 47.0117 19.2227 46.7773 19.1836L46.875 18.5781L46.7773 19.1836C46.0547 19.0859 45.4688 19.1445 45.0586 19.3203ZM53.3086 19.3203C52.918 19.4766 52.7031 19.75 52.6445 20.082C52.5859 20.3555 52.625 20.5312 52.6836 20.668C52.7422 20.7852 52.8398 20.9023 52.9961 21.0195C53.3867 21.293 53.9531 21.4492 54.6562 21.6641C54.6758 21.6641 54.6953 21.6641 54.7148 21.6836C55.3594 21.8594 56.1211 22.0742 56.6875 22.4648C57 22.6797 57.2734 22.9727 57.4492 23.3438C57.625 23.7344 57.6641 24.1641 57.5664 24.6523C57.4297 25.4727 56.8828 26.0391 56.1797 26.3516C55.4766 26.6445 54.6172 26.7031 53.7578 26.5664C53.2891 26.4883 52.5273 26.2344 52.0391 26.0586C51.9414 26.0391 51.8633 26 51.7852 25.9805C51.4727 25.8633 51.2969 25.5117 51.3945 25.1797C51.5117 24.8672 51.8633 24.6914 52.1953 24.7891C52.293 24.8281 52.3906 24.8477 52.5078 24.8867C52.9961 25.0625 53.6016 25.2773 53.9531 25.3359C54.6758 25.4336 55.2617 25.375 55.6719 25.1992C56.082 25.0234 56.2773 24.7695 56.3359 24.4375C56.3945 24.1641 56.3555 23.9688 56.2969 23.8516C56.2578 23.7344 56.1406 23.6172 55.9844 23.5C55.5938 23.2266 55.0273 23.0703 54.3242 22.8555C54.3047 22.8555 54.2852 22.8555 54.2656 22.8359C53.6211 22.6602 52.8594 22.4453 52.293 22.0547C51.9805 21.8398 51.707 21.5469 51.5312 21.1758C51.375 20.7852 51.3359 20.3555 51.4141 19.8672L52.0195 19.9844L51.4141 19.8672C51.5508 19.0469 52.0977 18.4805 52.8008 18.168C53.5039 17.875 54.3633 17.8164 55.2227 17.9531C55.4766 17.9922 56.2578 18.1484 56.5312 18.2266C56.8633 18.3047 57.0586 18.6562 56.9609 18.9883C56.8828 19.3203 56.5312 19.5156 56.1992 19.418C55.9844 19.3594 55.2617 19.2227 55.0273 19.1836L55.125 18.5781L55.0273 19.1836C54.3047 19.0859 53.7188 19.1445 53.3086 19.3203Z" fill="var(--wa-color-neutral-on-normal)"/>
+<rect x="2" y="2" width="72" height="40" rx="10" stroke="var(--wa-color-focus)" stroke-width="4"/>
+</svg>

docs/_includes/svgs/theming/shadows.njk

@@ -0,0 +1,4 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 20C8 13.3726 13.3726 8 20 8H44C50.6274 8 56 13.3726 56 20V44C56 50.6274 50.6274 56 44 56H20C13.3726 56 8 50.6274 8 44V20Z" fill="var(--wa-color-shadow)"/>
+<path d="M12 1H36C42.0751 1 47 5.92487 47 12V36C47 42.0751 42.0751 47 36 47H12C5.92487 47 1 42.0751 1 36V12C1 5.92487 5.92487 1 12 1Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+</svg>

docs/_includes/svgs/theming/space.njk

@@ -0,0 +1,11 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="4" cy="32" r="4" fill="var(--wa-color-neutral-on-normal)"/>
+<circle cx="4" cy="8" r="4" fill="var(--wa-color-neutral-on-normal)"/>
+<circle cx="4" cy="56" r="4" fill="var(--wa-color-neutral-on-normal)"/>
+<circle cx="44" cy="32" r="4" fill="var(--wa-color-neutral-on-normal)"/>
+<circle cx="28" cy="8" r="4" fill="var(--wa-color-neutral-on-normal)"/>
+<circle cx="60" cy="56" r="4" fill="var(--wa-color-neutral-on-normal)"/>
+<rect x="8" y="24" width="32" height="16" fill="var(--wa-color-neutral-fill-normal)"/>
+<rect x="8" width="16" height="16" fill="var(--wa-color-neutral-fill-normal)"/>
+<rect x="8" y="48" width="48" height="16" fill="var(--wa-color-neutral-fill-normal)"/>
+</svg>

docs/_includes/svgs/theming/transitions.njk

@@ -0,0 +1,6 @@
+<svg width="50" height="37" viewBox="0 0 50 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="48" y1="7.15686" x2="2" y2="7.15686" stroke="var(--wa-color-neutral-border-loud)" stroke-width="2" stroke-linecap="round"/>
+<path d="M6.65685 1.50001L1 7.15686L6.65685 12.8137" stroke="var(--wa-color-neutral-border-loud)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="2" y1="29.8431" x2="48" y2="29.8431" stroke="var(--wa-color-neutral-border-loud)" stroke-width="2" stroke-linecap="round"/>
+<path d="M43.3431 35.5L49 29.8431L43.3431 24.1863" stroke="var(--wa-color-neutral-border-loud)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

docs/_includes/svgs/theming/typography.njk

@@ -0,0 +1,4 @@
+<svg width="64" height="40" viewBox="0 0 64 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.306 35.1952C34.5982 35.8965 34.7735 36.4809 34.7735 36.9484C34.7735 38.5848 33.4293 39.929 31.7345 39.929C30.3319 39.929 29.3968 39.1693 28.8123 37.7666L26.4162 32.3314H8.24045L5.96118 37.7666C5.43519 39.1693 4.44166 39.929 3.03903 39.929C1.34419 39.929 0 38.5848 0 36.9484C0 36.4809 0.116886 35.8965 0.467543 35.1952L14.4354 2.17491C15.0198 0.772281 16.0134 0.0709686 17.3575 0.0709686C18.7602 0.0709686 19.7537 0.772281 20.3381 2.17491L34.306 35.1952ZM17.3575 9.12962L10.4028 27.0716H24.1954L17.3575 9.12962Z" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M52.1945 9.94782C59.6168 9.94782 64 14.3895 64 21.9286V36.8316C64 38.6433 62.7143 39.929 60.961 39.929C59.2077 39.929 57.9219 38.5848 57.9219 36.8316V36.4809C55.818 38.7017 52.779 39.929 49.0971 39.929C43.1359 39.929 39.1033 36.5978 39.1033 31.6301C39.1033 26.604 43.1943 23.4481 49.6815 23.4481H57.805V21.578C57.805 17.6623 55.5842 15.4414 51.6685 15.4414C49.2724 15.4414 47.11 16.3181 45.2983 18.1298C44.5385 18.7727 43.8956 19.0649 43.1943 19.0649C41.7333 19.0649 40.506 17.8376 40.506 16.4934C40.506 15.6168 40.915 14.7986 41.7333 13.9804C44.1879 11.4089 47.9866 9.94782 52.1945 9.94782ZM50.3828 35.1952C54.5323 35.1952 57.805 32.2146 57.805 28.4158V27.8898H50.4412C47.11 27.8898 45.3567 29.1171 45.3567 31.3964C45.3567 33.7341 47.3438 35.1952 50.3828 35.1952Z" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

docs/_layouts/component.njk

@@ -1,6 +1,6 @@
 {% set hasSidebar = true %}
 {% set hasOutline = true %}
-{% set component = getComponent('wa-' + page.fileSlug) %}
+{% set component = components[page.fileSlug] %}
 {% set description = component.summary %}
 
 {% extends '../_includes/base.njk' %}

docs/_layouts/page-wide.njk

@@ -0,0 +1,4 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+
+{% extends "../_includes/base-wide.njk" %}

docs/_layouts/page.njk

@@ -1,4 +1,4 @@
 {% set hasSidebar = true %}
-{% set hasOutline = false %}
+{% set hasOutline = true %}
 
 {% extends "../_includes/base.njk" %}

docs/_utils/manifest.js

@@ -1,71 +0,0 @@
-import { fileURLToPath } from 'url';
-import { dirname, resolve } from 'path';
-import { readFileSync } from 'fs';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-const manifest = JSON.parse(readFileSync(resolve(__dirname, '../../dist/custom-elements.json'), 'utf-8'));
-/**
- * @returns Fetches components from custom-elements.json and returns them in more sane format.
- */
-export function getComponents() {
-  const components = [];
-
-  manifest.modules?.forEach(module => {
-    module.declarations?.forEach(declaration => {
-      if (declaration.customElement) {
-        // Generate the dist path based on the src path and attach it to the component
-        declaration.path = module.path.replace(/^src\//, 'dist/').replace(/\.ts$/, '.js');
-
-        // Remove private members and those that lack a description
-        const members = declaration.members?.filter(member => member.description && member.privacy !== 'private');
-        const methods = members?.filter(prop => prop.kind === 'method' && prop.privacy !== 'private');
-        const properties = members?.filter(prop => {
-          // Look for a corresponding attribute
-          const attribute = declaration.attributes?.find(attr => attr.fieldName === prop.name);
-          if (attribute) {
-            prop.attribute = attribute.name || attribute.fieldName;
-          }
-
-          return prop.kind === 'field' && prop.privacy !== 'private';
-        });
-        components.push({
-          ...declaration,
-          methods,
-          properties
-        });
-      }
-    });
-  });
-
-  // Build dependency graphs
-  components.forEach(component => {
-    const dependencies = [];
-
-    // Recursively fetch sub-dependencies
-    function getDependencies(tag) {
-      const cmp = components.find(c => c.tagName === tag);
-      if (!cmp || !Array.isArray(component.dependencies)) {
-        return;
-      }
-
-      cmp.dependencies?.forEach(dependentTag => {
-        if (!dependencies.includes(dependentTag)) {
-          dependencies.push(dependentTag);
-        }
-        getDependencies(dependentTag);
-      });
-    }
-
-    getDependencies(component.tagName);
-
-    component.dependencies = dependencies.sort();
-  });
-
-  // Sort by name
-  return components.sort((a, b) => {
-    if (a.name < b.name) return -1;
-    if (a.name > b.name) return 1;
-    return 0;
-  });
-}

docs/assets/scripts/code-examples.js

@@ -19,8 +19,9 @@ document.addEventListener('click', event => {
     const html =
       `<script type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
       `<link rel="stylesheet" href="${cdnUrl}themes/default.css">\n\n` +
+      `<link rel="stylesheet" href="${cdnUrl}themes/applied.css">\n\n` +
       `${code.textContent}`;
-    const css = 'body {\n  font: 16px sans-serif;\n  padding: 1rem;\n}';
+    const css = 'body {\n  font: 16px sans-serif;\n  padding: 2rem;\n}';
     const js = '';
 
     const form = document.createElement('form');

docs/assets/scripts/color-scheme.js

@@ -2,35 +2,29 @@
 // Color scheme selector
 //
 (() => {
-  function getColorScheme() {
-    return localStorage.getItem('colorScheme') || 'auto';
-  }
-
-  function isDark() {
-    if (colorScheme === 'auto') {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-    return colorScheme === 'dark';
-  }
-
   function setColorScheme(newColorScheme) {
     colorScheme = newColorScheme;
     localStorage.setItem('colorScheme', colorScheme);
+    const presetTheme = window.getPresetTheme();
 
     // Update the UI
     updateSelection();
 
     // Toggle the dark mode class
-    document.documentElement.classList.toggle('wa-theme-default-dark', isDark());
+    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
   }
 
   function updateSelection() {
     const menu = document.querySelector('#color-scheme-selector wa-menu');
     if (!menu) return;
-    [...menu.querySelectorAll('wa-menu-item')].map(item => (item.checked = item.getAttribute('value') === colorScheme));
+    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
+      await customElements.whenDefined(item.localName);
+      await item.updateComplete;
+      item.checked = item.getAttribute('value') === colorScheme;
+    });
   }
 
-  let colorScheme = getColorScheme();
+  let colorScheme = window.getColorScheme();
 
   // Selection is not preserved when changing page, so update when opening dropdown
   document.addEventListener('wa-show', event => {
@@ -56,7 +50,7 @@
       !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
     ) {
       event.preventDefault();
-      setColorScheme(isDark() ? 'light' : 'dark');
+      setColorScheme(window.isDark() ? 'light' : 'dark');
     }
   });
 

docs/assets/scripts/preset-theme.js

@@ -0,0 +1,86 @@
+//
+// Preset theme selector
+//
+(() => {
+  function setPresetTheme(newPresetTheme) {
+    presetTheme = newPresetTheme;
+    localStorage.setItem('presetTheme', presetTheme);
+
+    const stylesheet = document.getElementById('theme-stylesheet');
+
+    const newStylesheet = Object.assign(document.createElement('link'), {
+      href: `/dist/themes/${presetTheme}.css`,
+      rel: 'preload',
+      as: 'style'
+    });
+
+    newStylesheet.addEventListener(
+      'load',
+      () => {
+        newStylesheet.rel = 'stylesheet';
+        newStylesheet.id = stylesheet.id;
+        requestAnimationFrame(() => {
+          stylesheet.remove();
+        });
+      },
+      { once: true }
+    );
+
+    document.head.append(newStylesheet);
+
+    // Update the UI
+    updateSelection();
+
+    // Toggle the dark mode class
+    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
+  }
+
+  function updateSelection(container = document) {
+    const menu = container.querySelector('#preset-theme-selector wa-menu');
+    if (!menu) return;
+    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
+      const isChecked = item.getAttribute('value') === presetTheme;
+      if (isChecked) {
+        container.querySelector('#preset-theme-selector__text').textContent = item.innerText;
+      }
+      await customElements.whenDefined(item.localName);
+      await item.updateComplete;
+      item.checked = isChecked;
+    });
+  }
+
+  let presetTheme = window.getPresetTheme();
+
+  // Selection is not preserved when changing page, so update when opening dropdown
+  document.addEventListener('wa-show', event => {
+    const presetThemeSelector = event.target.closest('#preset-theme-selector');
+    if (!presetThemeSelector) return;
+    updateSelection();
+  });
+
+  // Listen for selections
+  document.addEventListener('wa-select', event => {
+    const menu = event.target.closest('#preset-theme-selector wa-menu');
+    if (!menu) return;
+    setPresetTheme(event.detail.item.value);
+  });
+
+  // Update the color scheme when the preference changes
+  window.matchMedia('(prefers-preset-theme: dark)').addEventListener('change', () => setPresetTheme(presetTheme));
+  updateSelection();
+
+  /**
+   * Without this, there's a flash of the incorrect preset theme.
+   */
+  function updateSelectionBeforeTurboLoad(e) {
+    const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
+    if (!newElement) {
+      return;
+    }
+    updateSelection(newElement);
+  }
+
+  ['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
+    document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
+  });
+})();

docs/assets/styles/docs.css

@@ -222,6 +222,122 @@ wa-page > main {
   }
 }
 
+/* Index Pages */
+wa-page > main:has(> .index-grid) {
+  max-width: 120ch;
+  margin-inline: auto;
+}
+
+.index-summary {
+  max-inline-size: 80ch;
+}
+
+.index-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
+  gap: var(--wa-space-2xl);
+}
+
+.index-category {
+  grid-column: 1 / -1;
+  margin-block-end: 0;
+  margin-block-start: var(--wa-space-2xl);
+}
+
+.index-grid a {
+  border-radius: var(--wa-border-radius-m);
+}
+
+.index-grid wa-card {
+  --box-shadow: none;
+  --spacing: var(--wa-space-m);
+  inline-size: 100%;
+}
+
+.index-grid wa-card:hover {
+  --border-color: var(--wa-color-brand-border-loud);
+  --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
+  & .page-name {
+    color: var(--wa-color-brand-on-quiet);
+  }
+}
+
+.index-grid wa-card [slot='header'] {
+  display: flex;
+}
+
+.index-grid wa-card::part(header) {
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-bottom: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: calc(6rem + var(--spacing));
+}
+
+.index-grid .page-name {
+  font-size: var(--wa-font-size-s);
+  font-weight: var(--wa-font-weight-action);
+}
+
+/* Index Pages */
+wa-page > main:has(> .index-grid) {
+  max-width: 120ch;
+  margin-inline: auto;
+}
+
+.index-summary {
+  max-inline-size: 80ch;
+}
+
+.index-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
+  gap: var(--wa-space-2xl);
+}
+
+.index-category {
+  grid-column: 1 / -1;
+  margin-block-end: 0;
+  margin-block-start: var(--wa-space-2xl);
+}
+
+.index-grid a {
+  border-radius: var(--wa-border-radius-m);
+}
+
+.index-grid wa-card {
+  --box-shadow: none;
+  --spacing: var(--wa-space-m);
+  inline-size: 100%;
+}
+
+.index-grid wa-card:hover {
+  --border-color: var(--wa-color-brand-border-loud);
+  --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
+  & .page-name {
+    color: var(--wa-color-brand-on-quiet);
+  }
+}
+
+.index-grid wa-card [slot='header'] {
+  display: flex;
+}
+
+.index-grid wa-card::part(header) {
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-bottom: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: calc(6rem + var(--spacing));
+}
+
+.index-grid .page-name {
+  font-size: var(--wa-font-size-s);
+  font-weight: var(--wa-font-weight-action);
+}
+
 /* Swatches */
 .swatch {
   background-color: transparent;
@@ -235,6 +351,27 @@ wa-page > main {
   padding-inline: var(--wa-space-xs);
 }
 
+/* Layout Examples */
+.layout-example-boundary {
+  border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+  border-radius: var(--wa-border-radius-m);
+  padding: var(--wa-space-s);
+}
+
+.layout-example-block {
+  background-color: var(--wa-color-indigo-60);
+  border-radius: var(--wa-border-radius-s);
+  min-block-size: 4rem;
+  min-inline-size: 4rem;
+}
+
+.layout-example-mixed-sizing .layout-example-block:nth-child(3n) {
+  min-inline-size: 6rem;
+}
+.layout-example-mixed-sizing .layout-example-block:nth-child(3n + 2) {
+  min-inline-size: 8rem;
+}
+
 /* Utilities */
 .two-columns {
   columns: 2;

docs/docs/components/breadcrumb.md

@@ -35,6 +35,36 @@ For websites, you'll probably want to use links instead. You can make any breadc
 </wa-breadcrumb>
 ```
 
+### Prefixes
+
+Use the `prefix` slot to add content before any breadcrumb item.
+
+```html {.example}
+<wa-breadcrumb>
+  <wa-breadcrumb-item>
+    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
+    Home
+  </wa-breadcrumb-item>
+  <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Traveling</wa-breadcrumb-item>
+</wa-breadcrumb>
+```
+
+### Suffixes
+
+Use the `suffix` slot to add content after any breadcrumb item.
+
+```html {.example}
+<wa-breadcrumb>
+  <wa-breadcrumb-item>Documents</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Policies</wa-breadcrumb-item>
+  <wa-breadcrumb-item>
+    Security
+    <wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
+  </wa-breadcrumb-item>
+</wa-breadcrumb>
+```
+
 ### Custom Separators
 
 Use the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
@@ -66,12 +96,27 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
 </wa-breadcrumb>
 ```
 
-### Prefixes
+### Custom Colors
 
-Use the `prefix` slot to add content before any breadcrumb item.
+Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Prefixes, suffixes, and separators can be styled using CSS parts.
 
 ```html {.example}
-<wa-breadcrumb>
+<style>
+  .redcrumbs wa-breadcrumb-item {
+    color: firebrick;
+  }
+  .redcrumbs wa-breadcrumb-item:last-of-type {
+    color: crimson;
+  }
+  .redcrumbs wa-breadcrumb-item::part(separator) {
+    color: pink;
+  }
+  .redcrumbs wa-breadcrumb-item::part(prefix),
+  .redcrumbs wa-breadcrumb-item::part(suffix) {
+    color: currentColor;
+  }
+</style>
+<wa-breadcrumb class="redcrumbs">
   <wa-breadcrumb-item>
     <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
     Home
@@ -81,21 +126,6 @@ Use the `prefix` slot to add content before any breadcrumb item.
 </wa-breadcrumb>
 ```
 
-### Suffixes
-
-Use the `suffix` slot to add content after any breadcrumb item.
-
-```html {.example}
-<wa-breadcrumb>
-  <wa-breadcrumb-item>Documents</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Policies</wa-breadcrumb-item>
-  <wa-breadcrumb-item>
-    Security
-    <wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
-  </wa-breadcrumb-item>
-</wa-breadcrumb>
-```
-
 ### With Dropdowns
 
 Dropdown menus can be placed in the default slot to provide additional options.

docs/docs/components/button-group.md

@@ -42,6 +42,31 @@ All button sizes are supported, but avoid mixing sizes within the same button gr
 </wa-button-group>
 ```
 
+### Vertical button groups
+
+Set the `orientation` attribute to `vertical` to make a vertical button group.
+
+```html {.example}
+<wa-button-group orientation="vertical" label="Options" style="max-width: 80px;">
+  <wa-button>
+    <wa-icon slot="prefix" name="plus"></wa-icon>
+    New
+  </wa-button>
+  <wa-button>
+    <wa-icon slot="prefix" name="folder-open"></wa-icon>
+    Open
+  </wa-button>
+  <wa-button>
+    <wa-icon slot="prefix" name="save"></wa-icon>
+    Save
+  </wa-button>
+  <wa-button>
+    <wa-icon slot="prefix" name="print"></wa-icon>
+    Print
+  </wa-button>
+</wa-button-group>
+```
+
 ### Theme Buttons
 
 Theme buttons are supported through the button's `variant` attribute.

docs/docs/components/button.md

@@ -81,7 +81,7 @@ Use the `pill` attribute to give buttons rounded edges.
 
 ### Link Buttons
 
-It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `<a>` under the hood. This gives you all the default link behavior the browser provides (e.g. [[CMD/CTRL/SHIFT]] + [[CLICK]]) and exposes the `target` and `download` attributes.
+It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `<a>` under the hood. This gives you all the default link behavior the browser provides (e.g. [[CMD/CTRL/SHIFT]] + [[CLICK]]) and exposes the `rel`, `target`, and `download` attributes.
 
 ```html {.example}
 <wa-button href="https://example.com/">Link</wa-button>
@@ -89,10 +89,6 @@ It's often helpful to have a button that works like a link. This is possible by
 <wa-button href="/assets/images/logo.svg" download="shoelace.svg">Download</wa-button>
 ```
 
-:::info
-When a `target` is set, the link will receive `rel="noreferrer noopener"` for [security reasons](https://mathiasbynens.github.io/rel-noopener/).
-:::
-
 ### Setting a Custom Width
 
 As expected, buttons can be given a custom width by setting the `width` attribute. This is useful for making buttons span the full width of their container on smaller screens.

docs/docs/components/index.md

@@ -5,58 +5,14 @@ layout: page-outline
 ---
 
 <style>
-  wa-page > main {
-    max-width: 120ch;
-    margin-inline: auto;
-  }
-  .index-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
-    gap: var(--wa-space-2xl);
-  }
-  .index-category {
-    grid-column: 1 / -1;
-    margin-bottom: 0;
-    margin-top: var(--wa-space-2xl);
-  }
-  .index-grid a {
-    border-radius: var(--wa-border-radius-m);
-  }
-  .index-grid wa-card {
-    --box-shadow: none;
-    --spacing: var(--wa-space-m);
-    width: 100%;
-  }
-  .index-grid wa-card:hover {
-    --border-color: var(--wa-color-brand-border-loud);
-    --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
-    & .component-name {
-      color: var(--wa-color-brand-on-quiet);
-    }
-  }
-  .index-grid wa-card [slot='header'] {
-    display: flex;
-  }
-  .index-grid wa-card::part(header) {
-    background-color: var(--wa-color-neutral-fill-quiet);
-    border-bottom: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: calc(6rem + var(--spacing));
-  }
   wa-card#drawer-card::part(header) {
     --spacing: 0;
     justify-content: flex-end;
     overflow: hidden;
   }
-  wa-card .component-name {
-    font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-action);
-  }
 </style>
 
-<p style="max-width: 80ch">Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.</p>
+<p class="index-summary">Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.</p>
 
 <div class="index-grid">
   <h2 class="index-category">Actions</h2>
@@ -65,7 +21,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/button.njk" %}
       </div>
-      <span class="component-name">Button</span>
+      <span class="page-name">Button</span>
     </wa-card>
   </a>
   <a href="/docs/components/button-group">
@@ -73,7 +29,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/button-group.njk" %}
       </div>
-      <span class="component-name">Button Group</span>
+      <span class="page-name">Button Group</span>
     </wa-card>
   </a>
   <a href="/docs/components/copy-button">
@@ -81,7 +37,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/copy-button.njk" %}
       </div>
-      <span class="component-name">Copy Button</span>
+      <span class="page-name">Copy Button</span>
     </wa-card>
   </a>
   <a href="/docs/components/dropdown">
@@ -89,7 +45,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/dropdown.njk" %}
       </div>
-      <span class="component-name">Dropdown</span>
+      <span class="page-name">Dropdown</span>
     </wa-card>
   </a>
   <a href="/docs/components/icon-button">
@@ -97,7 +53,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/icon-button.njk" %}
       </div>
-      <span class="component-name">Icon Button</span>
+      <span class="page-name">Icon Button</span>
     </wa-card>
   </a>
   <a href="/docs/components/menu">
@@ -105,7 +61,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/menu.njk" %}
       </div>
-      <span class="component-name">Menu</span>
+      <span class="page-name">Menu</span>
     </wa-card>
   </a>
   <a href="/docs/components/qr-code">
@@ -113,7 +69,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/qr-code.njk" %}
       </div>
-      <span class="component-name">QR Code</span>
+      <span class="page-name">QR Code</span>
     </wa-card>
   </a>
 
@@ -123,7 +79,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/badge.njk" %}
       </div>
-      <span class="component-name">Badge</span>
+      <span class="page-name">Badge</span>
     </wa-card>
   </a>
   <a href="/docs/components/callout">
@@ -131,7 +87,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/callout.njk" %}
       </div>
-      <span class="component-name">Callout</span>
+      <span class="page-name">Callout</span>
     </wa-card>
   </a>
   <a href="/docs/components/progress-bar">
@@ -139,7 +95,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/progress-bar.njk" %}
       </div>
-      <span class="component-name">Progress Bar</span>
+      <span class="page-name">Progress Bar</span>
     </wa-card>
   </a>
   <a href="/docs/components/progress-ring">
@@ -147,7 +103,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/progress-ring.njk" %}
       </div>
-      <span class="component-name">Progress Ring</span>
+      <span class="page-name">Progress Ring</span>
     </wa-card>
   </a>
   <a href="/docs/components/skeleton">
@@ -155,7 +111,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/skeleton.njk" %}
       </div>
-      <span class="component-name">Skeleton</span>
+      <span class="page-name">Skeleton</span>
     </wa-card>
   </a>
   <a href="/docs/components/spinner">
@@ -163,7 +119,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/spinner.njk" %}
       </div>
-      <span class="component-name">Spinner</span>
+      <span class="page-name">Spinner</span>
     </wa-card>
   </a>
   <a href="/docs/components/tag">
@@ -171,7 +127,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/tag.njk" %}
       </div>
-      <span class="component-name">Tag</span>
+      <span class="page-name">Tag</span>
     </wa-card>
   </a>
   <a href="/docs/components/tooltip">
@@ -179,7 +135,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/tooltip.njk" %}
       </div>
-      <span class="component-name">Tooltip</span>
+      <span class="page-name">Tooltip</span>
     </wa-card>
   </a>
 
@@ -189,7 +145,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/animated-image.njk" %}
       </div>
-      <span class="component-name">Animated Image</span>
+      <span class="page-name">Animated Image</span>
     </wa-card>
   </a>
   <a href="/docs/components/avatar">
@@ -197,7 +153,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/avatar.njk" %}
       </div>
-      <span class="component-name">Avatar</span>
+      <span class="page-name">Avatar</span>
     </wa-card>
   </a>
   <a href="/docs/components/carousel">
@@ -205,7 +161,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/carousel.njk" %}
       </div>
-      <span class="component-name">Carousel</span>
+      <span class="page-name">Carousel</span>
     </wa-card>
   </a>
   <a href="/docs/components/icon">
@@ -213,7 +169,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/icon.njk" %}
       </div>
-      <span class="component-name">Icon</span>
+      <span class="page-name">Icon</span>
     </wa-card>
   </a>
   <a href="/docs/components/image-comparer">
@@ -221,7 +177,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/image-comparer.njk" %}
       </div>
-      <span class="component-name">Image Comparer</span>
+      <span class="page-name">Image Comparer</span>
     </wa-card>
   </a>
 
@@ -231,7 +187,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/checkbox.njk" %}
       </div>
-      <span class="component-name">Checkbox</span>
+      <span class="page-name">Checkbox</span>
     </wa-card>
   </a>
   <a href="/docs/components/color-picker">
@@ -239,7 +195,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/color-picker.njk" %}
       </div>
-      <span class="component-name">Color Picker</span>
+      <span class="page-name">Color Picker</span>
     </wa-card>
   </a>
   <a href="/docs/components/input">
@@ -247,7 +203,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/input.njk" %}
       </div>
-      <span class="component-name">Input</span>
+      <span class="page-name">Input</span>
     </wa-card>
   </a>
   <a href="/docs/components/radio-group">
@@ -255,7 +211,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/radio-group.njk" %}
       </div>
-      <span class="component-name">Radio Group</span>
+      <span class="page-name">Radio Group</span>
     </wa-card>
   </a>
   <a href="/docs/components/range">
@@ -263,7 +219,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/range.njk" %}
       </div>
-      <span class="component-name">Range</span>
+      <span class="page-name">Range</span>
     </wa-card>
   </a>
   <a href="/docs/components/rating">
@@ -271,7 +227,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/rating.njk" %}
       </div>
-      <span class="component-name">Rating</span>
+      <span class="page-name">Rating</span>
     </wa-card>
   </a>
   <a href="/docs/components/select">
@@ -279,7 +235,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/select.njk" %}
       </div>
-      <span class="component-name">Select</span>
+      <span class="page-name">Select</span>
     </wa-card>
   </a>
   <a href="/docs/components/switch">
@@ -287,7 +243,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/switch.njk" %}
       </div>
-      <span class="component-name">Switch</span>
+      <span class="page-name">Switch</span>
     </wa-card>
   </a>
   <a href="/docs/components/textarea">
@@ -295,7 +251,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/textarea.njk" %}
       </div>
-      <span class="component-name">Textarea</span>
+      <span class="page-name">Textarea</span>
     </wa-card>
   </a>
 
@@ -305,7 +261,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/breadcrumb.njk" %}
       </div>
-      <span class="component-name">Breadcrumb</span>
+      <span class="page-name">Breadcrumb</span>
     </wa-card>
   </a>
   <a href="/docs/components/tab-group">
@@ -313,7 +269,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/tab-group.njk" %}
       </div>
-      <span class="component-name">Tab Group</span>
+      <span class="page-name">Tab Group</span>
     </wa-card>
   </a>
   <a href="/docs/components/tree">
@@ -321,7 +277,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/tree.njk" %}
       </div>
-      <span class="component-name">Tree</span>
+      <span class="page-name">Tree</span>
     </wa-card>
   </a>
 
@@ -331,7 +287,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/card.njk" %}
       </div>
-      <span class="component-name">Card</span>
+      <span class="page-name">Card</span>
     </wa-card>
   </a>
   <a href="/docs/components/details">
@@ -339,7 +295,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/details.njk" %}
       </div>
-      <span class="component-name">Details</span>
+      <span class="page-name">Details</span>
     </wa-card>
   </a>
   <a href="/docs/components/dialog">
@@ -347,7 +303,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/dialog.njk" %}
       </div>
-      <span class="component-name">Dialog</span>
+      <span class="page-name">Dialog</span>
     </wa-card>
   </a>
   <a href="/docs/components/divider">
@@ -355,7 +311,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/divider.njk" %}
       </div>
-      <span class="component-name">Divider</span>
+      <span class="page-name">Divider</span>
     </wa-card>
   </a>
   <a href="/docs/components/drawer">
@@ -363,7 +319,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/drawer.njk" %}
       </div>
-      <span class="component-name">Drawer</span>
+      <span class="page-name">Drawer</span>
     </wa-card>
   </a>
   <a href="/docs/components/split-panel">
@@ -371,7 +327,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/split-panel.njk" %}
       </div>
-      <span class="component-name">Split Panel</span>
+      <span class="page-name">Split Panel</span>
     </wa-card>
   </a>
 
@@ -381,7 +337,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/animation.njk" %}
       </div>
-      <span class="component-name">Animation</span>
+      <span class="page-name">Animation</span>
     </wa-card>
   </a>
   <a href="/docs/components/format-bytes">
@@ -389,7 +345,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/format-bytes.njk" %}
       </div>
-      <span class="component-name">Format Bytes</span>
+      <span class="page-name">Format Bytes</span>
     </wa-card>
   </a>
   <a href="/docs/components/format-date">
@@ -397,7 +353,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/format-date.njk" %}
       </div>
-      <span class="component-name">Format Date</span>
+      <span class="page-name">Format Date</span>
     </wa-card>
   </a>
   <a href="/docs/components/format-number">
@@ -405,7 +361,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/format-number.njk" %}
       </div>
-      <span class="component-name">Format Number</span>
+      <span class="page-name">Format Number</span>
     </wa-card>
   </a>
     <a href="/docs/components/include">
@@ -413,7 +369,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/include.njk" %}
       </div>
-      <span class="component-name">Include</span>
+      <span class="page-name">Include</span>
     </wa-card>
   </a>
   <a href="/docs/components/mutation-observer">
@@ -421,7 +377,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/mutation-observer.njk" %}
       </div>
-      <span class="component-name">Mutation Observer</span>
+      <span class="page-name">Mutation Observer</span>
     </wa-card>
   </a>
   <a href="/docs/components/popup">
@@ -429,7 +385,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/popup.njk" %}
       </div>
-      <span class="component-name">Popup</span>
+      <span class="page-name">Popup</span>
     </wa-card>
   </a>
   <a href="/docs/components/relative-time">
@@ -437,7 +393,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/relative-time.njk" %}
       </div>
-      <span class="component-name">Relative Time</span>
+      <span class="page-name">Relative Time</span>
     </wa-card>
   </a>
   <a href="/docs/components/resize-observer">
@@ -445,7 +401,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/resize-observer.njk" %}
       </div>
-      <span class="component-name">Resize Observer</span>
+      <span class="page-name">Resize Observer</span>
     </wa-card>
   </a>
   <a href="/docs/components/visually-hidden">
@@ -453,7 +409,7 @@ layout: page-outline
       <div slot="header">
         {% include "svgs/visually-hidden.njk" %}
       </div>
-      <span class="component-name">Visually Hidden</span>
+      <span class="page-name">Visually Hidden</span>
     </wa-card>
   </a>
 </div>

docs/docs/components/reference.njk

@@ -0,0 +1,34 @@
+---
+title: Component Reference
+layout: docs
+---
+
+<style>
+table code {
+	white-space: nowrap;
+}
+</style>
+
+{% for type, all in componentsBy -%}
+<h2>All {{ "CSS custom properties" if type == "cssProperty" else ("CSS parts" if type == "cssPart" else (type | title) + "s") }}</h2>
+
+<table>
+	<thead>
+		<tr>
+			<th>Name</th>
+			<th>Components</th>
+		</tr>
+	</thead>
+	{% for name, thingComponents in all -%}
+	<tr>
+		<th><code>{{ name }}{{ "()" if type == "method" }}</code></th>
+		<td>
+			{% for component in thingComponents  %}
+				<a href="../{{ component.slug }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
+			{%- endfor -%}
+		</td>
+	</tr>
+	{%- endfor %}
+</table>
+
+{%- endfor %}

docs/docs/components/select.md

@@ -280,7 +280,9 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
 </wa-select>
 
 <script type="module">
+  await customElements.whenDefined("wa-select")
   const select = document.querySelector('.custom-tag');
+  await select.updateComplete
 
   select.getTag = (option, index) => {
     // Use the same icon used in wa-option
@@ -299,4 +301,115 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
 
 :::warning
 Be sure you trust the content you are outputting! Passing unsanitized user input to `getTag()` can result in XSS vulnerabilities.
-:::
+:::
+
+### Lazy loading options
+
+Lazy loading options is very hard to get right. `<wa-select>` largely follows how a native `<select>` works.
+
+Here are the following conditions:
+
+- If a `<wa-select>` is created without any options, but is given a `value` attribute, its `value` will be `""`, and then when options are added, if any of the options have a value equal to the `<wa-select>` value, the value of the `<wa-select>` will equal that of the option.
+
+EX: `<wa-select value="foo">` will have a value of `""` until `<wa-option value="foo">Foo</wa-option>` connects, at which point its value will become `"foo"` when submitting.
+
+- If a `<wa-select multiple>` with an initial value has multiple values, but only some of the options are present, it will only respect the options that are present, and if a selected option is loaded in later, *AND* the value of the select has not changed via user interaction or direct property assignment, it will add the selected option to the form value and to the `.value` of the select.
+
+This can be hard to conceptualize, so heres a fairly large example showing how lazy loaded options work with `<wa-select>` and `<wa-select multiple>` when given initial value attributes. Feel free to play around with it in a codepen.
+
+```html {.example}
+<form id="lazy-options-example">
+  <div>
+    <wa-select name="select-1" value="foo" label="Single select (with existing options)">
+      <wa-option value="bar">Bar</wa-option>
+      <wa-option value="baz">Baz</wa-option>
+    </wa-select>
+    <br>
+    <wa-button type="button">Add "foo" option</wa-button>
+  </div>
+
+  <br>
+
+  <div>
+    <wa-select name="select-2" value="foo" label="Single select (with no existing options)">
+    </wa-select>
+    <br>
+    <wa-button type="button">Add "foo" option</wa-button>
+  </div>
+
+  <br>
+
+  <div>
+    <wa-select name="select-3" value="foo bar baz" multiple label="Multiple Select (with existing options)">
+      <wa-option value="bar">Bar</wa-option>
+      <wa-option value="baz">Baz</wa-option>
+    </wa-select>
+    <br>
+    <wa-button type="button">Add "foo" option</wa-button>
+  </div>
+
+  <br>
+
+  <div>
+    <wa-select name="select-4" value="foo" multiple label="Multiple Select (with no existing options)">
+    </wa-select>
+    <br>
+    <wa-button type="button">Add "foo" option</wa-button>
+  </div>
+
+  <br><br>
+
+  <div style="display: flex; gap: 16px;">
+    <wa-button type="reset">Reset</wa-button>
+    <wa-button type="submit" variant="brand">Show FormData</wa-button>
+  </div>
+
+  <br>
+
+  <pre hidden><code id="lazy-options-example-form-data"></code></pre>
+
+  <br>
+</form>
+
+<script type="module">
+  function addFooOption(e) {
+    const addFooButton = e.target.closest("wa-button[type='button']")
+    if (!addFooButton) {
+      return
+    }
+    const select = addFooButton.parentElement.querySelector("wa-select")
+
+    if (select.querySelector("wa-option[value='foo']")) {
+      // Foo already exists. no-op.
+      return
+    }
+
+    const option = document.createElement("wa-option")
+    option.setAttribute("value", "foo")
+    option.innerText = "Foo"
+    select.append(option)
+  }
+
+  function handleLazySubmit (event) {
+    event.preventDefault()
+
+    const formData = new FormData(event.target)
+    const codeElement = document.querySelector("#lazy-options-example-form-data")
+
+    const obj = {}
+    for (const key of formData.keys()) {
+      const val = formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key)
+      obj[key] = val
+    }
+
+    codeElement.textContent = JSON.stringify(obj, null, 2)
+
+    const preElement = codeElement.parentElement
+    preElement.removeAttribute("hidden")
+  }
+
+  const container = document.querySelector("#lazy-options-example")
+  container.addEventListener("click", addFooOption)
+  container.addEventListener("submit", handleLazySubmit)
+</script>
+```

docs/docs/components/tree.md

@@ -4,6 +4,20 @@ description: Trees allow you to display a hierarchical list of selectable tree i
 layout: component
 ---
 
+```html {.example}
+<wa-tree selection="multiple">
+  <wa-tree-item>
+    Parent Node
+    <wa-tree-item selected>Child Node 1</wa-tree-item>
+    <wa-tree-item>
+      Child Node 2
+      <wa-tree-item>Child Node 2 - 1</wa-tree-item>
+      <wa-tree-item>Child Node 2 - 2</wa-tree-item>
+    </wa-tree-item>
+  </wa-tree-item>
+</wa-tree>
+```
+
 ```html {.example}
 <wa-tree>
   <wa-tree-item>
@@ -241,4 +255,4 @@ Decorative icons can be used before labels to provide hints for each node.
     </wa-tree-item>
   </wa-tree-item>
 </wa-tree>
-```
+```

docs/docs/experimental/ssr.md

@@ -1,23 +1,25 @@
 ---
 title: Server Side Rendering
 description: A document on how to get started with SSR in Web Awesome.
-layout: page
+layout: page-outline
 ---
 
-## Caveats
+Server Side Rendering ("SSR") means your webpage is rendered on the server before being sent to the user's browser. This provides a fully formed HTML page right from the start, which is great for SEO and initial load times. Once the page is rendered, JavaScript kicks in to "hydrate" the components which makes them interactive. The Web platform supports this through a feature called [Declarative Shadow DOM](https://web.dev/articles/declarative-shadow-dom).
 
-SSR in Web Awesome is to be considered experimental. There are bugs and timing issues. There are things to iron out. Please bear with us. Part of the experimental status comes from Lit SSR being experimental, and all of our components originally being designed as client only.
+:::warning
+SSR in Web Awesome is experimental! There are some known bugs and timing issues. Part of the experimental status comes from Lit's SSR package also being experimental.
+:::
 
-## Adding hydration to the Frontend
+## Enable Hydration
 
-If you're using the `webawesome.loader.js` file which automatically loads , make sure to change it to `webawesome.ssr-loader.js`
+If you're using the `webawesome.loader.js` file which automatically loads, make sure to change it to `webawesome.ssr-loader.js`.
 
 ```diff
 - <script type="module" src="https://early.webawesome.com/webawesome@3.0.0-alpha.2/dist/webawesome.loader.js"></script>
 + <script type="module" src="https://early.webawesome.com/webawesome@3.0.0-alpha.2/dist/webawesome.ssr-loader.js"></script>
 ```
 
-If you're using a bundler:
+If you're using a bundler, make sure it comes _before_ any components are imported.
 
 ```js
 // Make sure this import is first.
@@ -27,15 +29,11 @@ import "webawesome/dist/components/button/button.js"
 import "webawesome/dist/components/input/input.js"
 ```
 
-## Server rendering
+## Enable Server Rendering
 
-SSR on your backend is largely dependent on what backend you're using.
+How to implement SSR on the backend is largely dependent on what stack you're using. For docs on how to hook up your backend, refer to [this document from Lit](https://lit.dev/docs/ssr/server-usage/).
 
-For docs on how to hook up your backend, checkout this document from Lit:
-
-<https://lit.dev/docs/ssr/server-usage/>
-
-For example, here's roughly what the 11ty integration looks like:
+For example, here's what the [11ty](https://www.11ty.dev/) integration looks like using [Lit's 11ty plugin](https://www.npmjs.com/package/@lit-labs/eleventy-plugin-lit).
 
 ```js
 // eleventy.config.js
@@ -51,31 +49,39 @@ import litPlugin from '@lit-labs/eleventy-plugin-lit';
 });
 ```
 
-## Hydration
+:::info
+As SSR becomes more stable, we'll work to add more instructions for various frameworks and metaframeworks.
+:::
 
-All Web Awesome components that get SSR'ed will have `did-ssr=""` on them.
+## Helpful Tips
 
-For example: `<wa-button did-ssr="">`
+### The `did-ssr` Attribute
+
+All Web Awesome components that get rendered for SSR will receive the `did-ssr` attribute.
+
+```html
+<wa-button did-ssr>
+```
 
 This can help if you need some styling prior to the element connecting.
 
-## Timing issues
+### Timing Issues
 
-Before setting any properties on your frontend, it is important to first wait for the element to be defined, and then wait for its update to complete.
+Before setting any properties on your frontend, it is important to first wait for the element to be defined and then wait for its first update to complete.
 
 ```js
-const rating = document.querySelector("wa-rating")
+const rating = document.querySelector('wa-rating');
 
-// If we dont want for the component to be defined, and for the initial hydration to finish, we will get a hydration error from Lit.
-await customElements.whenDefined("wa-rating")
-await rating.updateComplete
+// If we don't wait for the component to be defined the initial hydration, we will get a hydration error from Lit!
+await customElements.whenDefined('wa-rating');
+await rating.updateComplete;
 
 rating.getSymbol = () => '<wa-icon name="heart" variant="solid"></wa-icon>';
 ```
 
-## Usage with Turbo
+### Usage with Turbo
 
-Turbo, the Hotwire library, has an issue with SSR + declarative shadow dom. To fix this, you can add the following.
+The Hotwire library [Turbo](https://github.com/hotwired/turbo) has an issue with SSR + declarative shadow DOM. To fix this, you can add the following to every page that runs Turbo.
 
 ```js
 function fixDeclarativeShadowDOM(e) {
@@ -96,16 +102,18 @@ function fixDeclarativeShadowDOM(e) {
   })(newElement);
 }
 
-// Fixes an issue with DSD keeping the `<template>` elements hanging around in the lightdom.
+// Fixes an issue with DSD keeping the `<template>` elements hanging around in the light DOM.
 // https://github.com/hotwired/turbo/issues/1292
 ['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
   document.addEventListener(eventName, fixDeclarativeShadowDOM);
 });
 ```
 
-## Additional TODOs
+## Known Issues
 
-- [ ] - `@shoelace-style/localize` (our localization library) has no way to set a language currently so it always falls back to `en`.
-- [ ] - `<wa-icon>` has no fallback if there's no JS besides a blank `<svg>`. There's perhaps some backend mechanisms we can use to fetch. But requires altering APIs. Should also have a way to set height / widths, but we dont want to increase pain for SSR users.
-- [ ] - `<wa-qr-code>` QR Code will not error on the backend and will render a blank canvas at the appropriate size, but will not render the canvas until the client component connects.
-- [ ] - `setBasePath` and `kit codes` may need reconfiguring to work with SSR.
+Here are some known issues and things we're still working on.
+
+- `@shoelace-style/localize` (our localization library) has no way to set a language currently so it always falls back to `en`.
+- `<wa-icon>` has no fallback if there's no JS besides a blank `<svg>`. There's perhaps some backend mechanisms we can use to fetch. But requires altering APIs. Should also have a way to set height / widths, but we don't want to increase pain for SSR users.
+- `<wa-qr-code>` QR Code will not error on the backend and will render a blank canvas at the appropriate size, but will not render the canvas until the client component connects.
+- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.

docs/docs/installation.md

@@ -76,7 +76,7 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
 
 ## Using Font Awesome Kit Codes
 
-Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You can provide it through the `data-fa-kit-code` attribute or by calling the `setKitCode()` method.
+Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You can provide it by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
 
 ```html
 <!-- Option 1: the data-fa-kit-code attribute -->
@@ -85,7 +85,7 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You
 <!-- Option 2: the setKitCode() method -->
 <script type="module">
   import { setKitCode } from '/path/to/web-awesome/dist/webawesome.js';
-  setBasePath('/path/to/web-awesome/dist');
+  setKitCode('YOUR_KIT_CODE_HERE');
 </script>
 ```
 

docs/docs/layout/cluster.md

@@ -0,0 +1,147 @@
+---
+title: Cluster
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: page-outline
+---
+
+<style>
+  :is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-cluster']:has(div:empty) {
+    border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-m);
+    padding: var(--wa-space-s);
+  }
+
+  [class*='wa-cluster'] div:empty {
+    background-color: var(--wa-color-indigo-60);
+    border-radius: var(--wa-border-radius-s);
+    min-block-size: 4rem;
+    min-inline-size: 4rem;
+  }
+</style>
+
+Use the `wa-cluster` class to arrange elements inline with even spacing, allowing items to wrap when space is limited.
+
+```html {.example}
+<div class="wa-cluster">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<!-- We'll vary the div sizes to show the flow of cluster elements -->
+<style>
+  .wa-cluster div:empty:nth-child(3n) {
+    min-inline-size: 6rem;
+  }
+  .wa-cluster div:empty:nth-child(3n + 2) {
+    min-inline-size: 8rem;
+  }
+</style>
+```
+
+## Examples
+
+Clusters are great for inline lists and aligning items of varying sizes.
+
+```html {.example}
+<div class="wa-cluster">
+  <wa-icon name="web-awesome"></wa-icon>
+  <a href="#">Components</a>
+  <a href="#">Layout</a>
+  <a href="#">Patterns</a>
+  <a href="#">Theming</a>
+</div>
+```
+
+```html {.example}
+<div class="wa-stack">
+  <h3 class="wa-heading-xl">Withywindle Pub and Eatery</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">Comfort Food</wa-tag>
+    <wa-tag size="small">Gastropub</wa-tag>
+    <wa-tag size="small">Cocktail Bar</wa-tag>
+    <wa-tag size="small">Vegetarian</wa-tag>
+    <wa-tag size="small">Gluten Free</wa-tag>
+  </div>
+</div>
+```
+
+## Align Items
+
+By default, items are centered in the block direction of the `wa-cluster` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/align-items) classes to an element with `wa-cluster` to specify how items are aligned in the block direction:
+- `wa-align-items-start`
+- `wa-align-items-end`
+- `wa-align-items-center`
+- `wa-align-items-stretch`
+- `wa-align-items-baseline`
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-cluster wa-align-items-start" style="min-height: 8rem;">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-cluster wa-align-items-end" style="min-height: 8rem;">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-cluster wa-align-items-center" style="min-height: 8rem;">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-cluster wa-align-items-stretch" style="min-height: 8rem;">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Gap
+
+By default, the gap between cluster items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-cluster` to specify the gap between items:
+- `wa-gap-0`
+- `wa-gap-3xs`
+- `wa-gap-2xs`
+- `wa-gap-xs`
+- `wa-gap-s`
+- `wa-gap-m`
+- `wa-gap-l`
+- `wa-gap-xl`
+- `wa-gap-2xl`
+- `wa-gap-3xl`
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-cluster wa-gap-2xs">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-cluster wa-gap-2xl">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```

docs/docs/layout/flank.md

@@ -0,0 +1,174 @@
+---
+title: Flank
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: page-outline
+---
+
+<style>
+  :is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-flank']:has(div:empty) {
+    border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-m);
+    padding: var(--wa-space-s);
+  }
+
+  [class*='wa-flank'] div:empty {
+    background-color: var(--wa-color-indigo-60);
+    border-radius: var(--wa-border-radius-s);
+    min-block-size: 4rem;
+    min-inline-size: 4rem;
+  }
+</style>
+
+Use the `wa-flank` class to position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space. When space is limited, the items wrap.
+
+```html {.example}
+<div class="wa-flank">
+  <div></div>
+  <div></div>
+</div>
+```
+
+## Examples
+
+Flanks work especially well for asides, inputs with adjacent buttons, and rich description lists.
+
+```html {.example}
+<div class="wa-flank:end wa-gap-xs">
+  <wa-input>
+    <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
+  </wa-input>
+  <wa-button>Search</wa-button>
+</div>
+```
+
+```html {.example}
+<div class="wa-stack wa-gap-xl">
+  <div class="wa-flank wa-align-items-start">
+    <wa-avatar image="https://images.unsplash.com/photo-1553284966-19b8815c7817?q=20" label="Gandalf's avatar"></wa-avatar>
+    <div class="wa-stack wa-gap-3xs">
+      <strong>Gandalf</strong>
+      <p class="wa-body-s">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.</p>
+    </div>
+  </div>
+  <div class="wa-flank wa-align-items-start">
+    <wa-avatar image="https://images.unsplash.com/photo-1542403764-c26462c4697e?q=20" label="Boromir's avatar"></wa-avatar>
+    <div class="wa-stack wa-gap-3xs">
+      <strong>Boromir</strong>
+      <p class="wa-body-s">One does not simply walk into Mordor. Its Black Gates are guarded by more than just Orcs. There is evil there that does not sleep, and the Great Eye is ever watchful.</p>
+    </div>
+  </div>
+  <div class="wa-flank wa-align-items-start">
+    <wa-avatar image="https://images.unsplash.com/photo-1518495973542-4542c06a5843?q=20" label="Galadriel's avatar"></wa-avatar>
+    <div class="wa-stack wa-gap-3xs">
+      <strong>Galadriel</strong>
+      <p class="wa-body-s">The world is changed. I feel it in the water. I feel it in the earth. I smell it in the air. Much that once was is lost, for none now live who remember it.</p>
+    </div>
+  </div>
+</div>
+```
+
+## Position
+
+By default, the first item in the `wa-flank` container will flank the other content. You can specify whether the first or last item will flank the remaining content by appending `:start` or `:end` to the `wa-flank` class.
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-flank:start">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-flank:end">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Sizing
+
+The flank's inline size is determined by the size of its content, but you can set a target size using the `--flank-size` property. When the flank wraps, it stretches to fill the inline size of the container.
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-flank" style="--flank-size: 200px;">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-flank" style="--flank-size: 6rem;">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+The main content fills the remaining inline space of the container. By default, the items wrap when the main content is less than 50% of the container. You can change the minimum size of the main content with the `--content-percentage` property.
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-flank" style="--content-percentage: 70%;">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-flank" style="--content-percentage: 85%;">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Align Items
+
+By default, items are centered in the block direction of the `wa-flank` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/align-items) classes to an element with `wa-flank` to specify how items are aligned in the block direction:
+- `wa-align-items-start`
+- `wa-align-items-end`
+- `wa-align-items-center`
+- `wa-align-items-stretch`
+- `wa-align-items-baseline`
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-flank wa-align-items-start" style="min-height: 8rem;">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-flank wa-align-items-end" style="min-height: 8rem;">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-flank wa-align-items-center" style="min-height: 8rem;">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-flank wa-align-items-stretch" style="min-height: 8rem;">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Gap
+
+By default, the gap between flank items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-flank` to specify the gap between items:
+- `wa-gap-0`
+- `wa-gap-3xs`
+- `wa-gap-2xs`
+- `wa-gap-xs`
+- `wa-gap-s`
+- `wa-gap-m`
+- `wa-gap-l`
+- `wa-gap-xl`
+- `wa-gap-2xl`
+- `wa-gap-3xl`
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-flank wa-gap-2xs">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-flank wa-gap-2xl">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```

docs/docs/layout/frame.md

@@ -0,0 +1,156 @@
+---
+title: Frame
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: page-outline
+---
+
+<style>
+  [class*='wa-frame']:has(div:empty) {
+    border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+    padding: var(--wa-space-s);
+  }
+
+  [class*='wa-frame'] div:empty {
+    background-color: var(--wa-color-indigo-60);
+    border-radius: var(--wa-border-radius-s);
+    min-block-size: 4rem;
+    min-inline-size: 4rem;
+  }
+</style>
+
+Use the `wa-frame` class to create a responsive container with consistent proportions to enclose content.
+
+```html {.example}
+<div class="wa-frame" style="max-inline-size: 20rem;">
+  <div></div>
+</div>
+```
+
+## Examples
+
+Frames are well-suited for images and image placeholders.
+
+```html {.example}
+<div class="wa-flank" style="--flank-size: 8rem;">
+  <div class="wa-frame wa-border-radius-m">
+    <img src="https://images.unsplash.com/photo-1523593288094-3ccfb6b2c192?q=20" alt=""/>
+  </div>
+  <div class="wa-flank:end" style="--content-percentage: 70%">
+    <div class="wa-stack wa-gap-xs">
+      <h3>The Lord of the Rings: The Fellowship of the Ring</h3>
+      <span>J.R.R. Tolkien</span>
+    </div>
+    <wa-icon-button id="options-menu" name="ellipsis"></wa-icon-button>
+    <wa-tooltip for="options-menu">Options</wa-tooltip>
+  </div>
+</div>
+```
+
+```html {.example}
+<div class="wa-grid" style="--min-column-size: 25ch;">
+  <wa-card with-image>
+    <div class="wa-frame:landscape" slot="image">
+      <img src="https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?q=20" alt="Grey and white tabby kitten" />
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <h3 class="wa-heading-s">White-socks</h3>
+      <span class="wa-body-s">Kitten &bull; Male</span>
+      <div class="wa-flank:end wa-gap-xs">
+        <wa-button size="small" appearance="tinted" variant="brand">Adopt this pet</wa-button>
+        <wa-icon-button id="fav-whitesocks" name="heart" variant="regular"></wa-icon-button>
+        <wa-tooltip for="fav-whitesocks">Favorite</wa-tooltip>
+      </div>
+    </div>
+  </wa-card>
+  <wa-card with-header>
+    <div class="wa-frame:landscape" slot="header">
+      <div class="wa-stack wa-align-items-center wa-gap-xs wa-caption-m">
+        <wa-icon name="paw"></wa-icon>
+        <span>Photo coming soon</span>
+      </div>
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <h3 class="wa-heading-s">Bumpkin</h3>
+      <span class="wa-body-s">Adult &bull; Male</span>
+      <div class="wa-flank:end wa-gap-xs">
+        <wa-button size="small" appearance="tinted" variant="brand">Adopt this pet</wa-button>
+        <wa-icon-button id="fav-bumpkin" name="heart" variant="regular"></wa-icon-button>
+        <wa-tooltip for="fav-bumpkin">Favorite</wa-tooltip>
+      </div>
+    </div>
+  </wa-card>
+  <wa-card with-image>
+    <div class="wa-frame:landscape" slot="image">
+      <img src="https://images.unsplash.com/photo-1445499348736-29b6cdfc03b9?q=20" alt="Diluted calico kitten" />
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <h3 class="wa-heading-s">Swish-tail</h3>
+      <span class="wa-body-s">Kitten &bull; Female</span>
+      <div class="wa-flank:end wa-gap-xs">
+        <wa-button size="small" appearance="tinted" variant="brand">Adopt this pet</wa-button>
+        <wa-icon-button id="fav-swishtail" name="heart" variant="regular"></wa-icon-button>
+        <wa-tooltip for="fav-swishtail">Favorite</wa-tooltip>
+      </div>
+    </div>
+  </wa-card>
+  <wa-card with-image>
+    <div class="wa-frame:landscape" slot="image">
+      <img src="https://images.unsplash.com/photo-1517451330947-7809dead78d5?q=20" alt="Short-haired tabby cat" />
+    </div>
+    <div class="wa-stack wa-gap-xs">
+      <h3 class="wa-heading-s">Sharp-ears</h3>
+      <span class="wa-body-s">Adult &bull; Female</span>
+      <div class="wa-flank:end wa-gap-xs">
+        <wa-button size="small" appearance="tinted" variant="brand">Adopt this pet</wa-button>
+        <wa-icon-button id="fav-sharpears" name="heart" variant="regular"></wa-icon-button>
+        <wa-tooltip for="fav-sharpears">Favorite</wa-tooltip>
+      </div>
+    </div>
+  </wa-card>
+</div>
+```
+
+## Aspect Ratio
+
+Frames have a square aspect ratio by default. You can append `:square` (1 / 1), `:landscape` (16 / 9), or `:portrait` (9 / 16) to the `wa-frame` class in your markup to specify an aspect ratio for the frame. Alternatively, you can define the `aspect-ratio` property to set a custom proportion.
+
+```html {.example}
+<div class="wa-grid">
+  <div class="wa-frame:landscape">
+    <div></div>
+  </div>
+  <div class="wa-frame:portrait">
+    <div></div>
+  </div>
+  <div class="wa-frame" style="aspect-ratio: 4 / 3;">
+    <div></div>
+  </div>
+</div>
+```
+
+## Border Radius
+
+Frames have a square border radius by default. You can add any of the following [`wa-border-radius-*`](/docs/style-utilities/border-radius) classes to an element with `wa-frame` to specify the border radius:
+- `wa-border-radius-xs`
+- `wa-border-radius-s`
+- `wa-border-radius-m`
+- `wa-border-radius-l`
+- `wa-border-radius-pill`
+- `wa-border-radius-circle`
+- `wa-border-radius-square`
+
+Alternatively, you can define the `border-radius` property to set custom rounding.
+
+```html {.example}
+<div class="wa-grid">
+  <div class="wa-frame wa-border-radius-l">
+    <div></div>
+  </div>
+  <div class="wa-frame wa-border-radius-circle">
+    <div></div>
+  </div>
+  <div class="wa-frame" style="border-radius: 50% 0%;">
+    <div></div>
+  </div>
+</div>
+```

docs/docs/layout/grid.md

@@ -0,0 +1,218 @@
+---
+title: Grid
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: page-outline
+---
+
+<style>
+  :is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-grid']:has(div:empty) {
+    border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-m);
+    padding: var(--wa-space-s);
+  }
+
+  [class*='wa-grid'] div:empty {
+    background-color: var(--wa-color-indigo-60);
+    border-radius: var(--wa-border-radius-s);
+    min-block-size: 4rem;
+    min-inline-size: 4rem;
+  }
+</style>
+
+Use the `wa-grid` class to arrange elements into rows and columns that automatically adapt to the available space.
+
+```html {.example}
+<div class="wa-grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
+
+## Examples
+
+Grids work especially well for card lists and content designed for browsing.
+
+```html {.example}
+<div class="wa-grid">
+  <div class="wa-stack wa-gap-s">
+    <div class="wa-frame wa-border-radius-m">
+      <img src="https://images.unsplash.com/photo-1520763185298-1b434c919102?q=20" alt="" />
+    </div>
+    <h3 class="wa-heading-s">Tulip</h3>
+    <em>Tulipa gesneriana</em>
+  </div>
+  <div class="wa-stack wa-gap-s">
+    <div class="wa-frame wa-border-radius-m">
+      <img src="https://images.unsplash.com/photo-1591767134492-338e62f7b5a2?q=20" alt="" />
+    </div>
+    <h3 class="wa-heading-s">Peony</h3>
+    <em>Paeonia officinalis</em>
+  </div>
+  <div class="wa-stack wa-gap-s">
+    <div class="wa-frame wa-border-radius-m">
+      <img src="https://images.unsplash.com/photo-1590872000386-4348c6393115?q=20" alt="" />
+    </div>
+    <h3 class="wa-heading-s">Poppy</h3>
+    <em>Papaver rhoeas</em>
+  </div>
+  <div class="wa-stack wa-gap-s">
+    <div class="wa-frame wa-border-radius-m">
+      <img src="https://images.unsplash.com/photo-1516723338795-324c7c33f700?q=20" alt="" />
+    </div>
+    <h3 class="wa-heading-s">Sunflower</h3>
+    <em>Helianthus annuus</em>
+  </div>
+  <div class="wa-stack wa-gap-s">
+    <div class="wa-frame wa-border-radius-m">
+      <img src="https://images.unsplash.com/photo-1563601841845-74a0a8ab7c8a?q=20" alt="" />
+    </div>
+    <h3 class="wa-heading-s">Daisy</h3>
+    <em>Bellis perennis</em>
+  </div>
+</div>
+```
+
+```html {.example}
+<div class="wa-grid" style="--min-column-size: 30ch;">
+  <wa-card>
+    <div class="wa-flank">
+      <wa-avatar shape="rounded">
+        <wa-icon slot="icon" name="globe"></wa-icon>
+      </wa-avatar>
+      <div class="wa-stack wa-gap-3xs">
+        <span class="wa-caption-s">Population (Zion)</span>
+        <span class="wa-cluster wa-gap-xs">
+          <span class="wa-heading-xl">251,999</span>
+          <wa-badge variant="danger">-3%&nbsp;<wa-icon name="arrow-trend-down"></wa-icon></wa-badge>
+        </span>
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank">
+      <wa-avatar shape="rounded">
+        <wa-icon slot="icon" name="brain-circuit"></wa-icon>
+      </wa-avatar>
+      <div class="wa-stack wa-gap-3xs">
+        <span class="wa-caption-s">Minds Freed</span>
+        <span class="wa-cluster wa-gap-xs">
+          <span class="wa-heading-xl">0.36%</span>
+          <wa-badge variant="success">+0.03%&nbsp;<wa-icon name="arrow-trend-up"></wa-icon></wa-badge>
+        </span>
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank">
+      <wa-avatar shape="rounded">
+        <wa-icon slot="icon" name="robot"></wa-icon>
+      </wa-avatar>
+      <div class="wa-stack wa-gap-3xs">
+        <span class="wa-caption-s">Agents Discovered</span>
+        <span class="wa-cluster wa-gap-xs">
+          <span class="wa-heading-xl">3</span>
+          <wa-badge variant="neutral">±0%&nbsp;<wa-icon name="wave-triangle"></wa-icon></wa-badge>
+        </span>
+      </div>
+    </div>
+  </wa-card>
+  <wa-card>
+    <div class="wa-flank">
+      <wa-avatar shape="rounded">
+        <wa-icon slot="icon" name="spaghetti-monster-flying"></wa-icon>
+      </wa-avatar>
+      <div class="wa-stack wa-gap-3xs">
+        <span class="wa-caption-s">Sentinels Controlled</span>
+        <span class="wa-cluster wa-gap-xs">
+          <span class="wa-heading-xl">208</span>
+          <wa-badge variant="success">+1%&nbsp;<wa-icon name="arrow-trend-up"></wa-icon></wa-badge>
+        </span>
+      </div>
+    </div>
+  </wa-card>
+</div>
+
+<style>
+  wa-badge > wa-icon {
+    color: color-mix(in oklab, currentColor, transparent 40%);
+  }
+</style>
+```
+
+## Sizing
+
+By default, grid items will wrap when the grid's column size is less than `20ch`, but you can set a custom minimum column size using the `--min-column-size` property.
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-grid" style="--min-column-size: 200px;">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-grid" style="--min-column-size: 6rem;">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Gap
+
+By default, the gap between grid items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-grid` to specify the gap between items:
+- `wa-gap-0`
+- `wa-gap-3xs`
+- `wa-gap-2xs`
+- `wa-gap-xs`
+- `wa-gap-s`
+- `wa-gap-m`
+- `wa-gap-l`
+- `wa-gap-xl`
+- `wa-gap-2xl`
+- `wa-gap-3xl`
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-grid wa-gap-2xs">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-grid wa-gap-2xl">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Span Grid
+
+You can add `wa-span-grid` to any grid item to allow it to span all grid columns. With this, the grid item occupies its own grid row.
+
+```html {.example}
+<div class="wa-grid">
+  <div></div>
+  <div></div>
+  <div class="wa-span-grid"></div>
+  <div></div>
+  <div></div>
+</div>
+```

docs/docs/layout/index.md

@@ -0,0 +1,83 @@
+---
+title: Layout
+description: Browse Web Awesome's components and utilities for creating responsive web layouts.
+layout: page-outline
+---
+
+<style>
+  wa-page > main {
+    max-width: 120ch;
+    margin-inline: auto;
+  }
+  .index-grid wa-card::part(header) {
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border-bottom: none;
+  }
+  wa-card .component-name {
+    font-size: var(--wa-font-size-s);
+    font-weight: var(--wa-font-weight-action);
+  }
+</style>
+
+<p style="max-width: 80ch">Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro.</p>
+
+<div class="index-grid wa-grid wa-gap-2xl">
+  <h2 class="index-category wa-span-grid">Components</h2>
+  <a href="/docs/components/page">
+    <wa-card with-header>
+      <div slot="header">
+        {% include "svgs/thumbnail-placeholder.njk" %}
+      </div>
+      <span class="component-name">Page</span>
+    </wa-card>
+  </a>
+  <h2 class="index-category wa-span-grid">Utilities</h2>
+  <a href="/docs/layout/cluster">
+    <wa-card with-header>
+      <div slot="header">
+        {% include "svgs/layout/cluster.njk" %}
+      </div>
+      <span class="component-name">Cluster</span>
+    </wa-card>
+  </a>
+  <a href="/docs/layout/flank">
+    <wa-card with-header>
+      <div slot="header">
+        {% include "svgs/layout/flank.njk" %}
+      </div>
+      <span class="component-name">Flank</span>
+    </wa-card>
+  </a>
+  <a href="/docs/layout/frame">
+    <wa-card with-header>
+      <div slot="header">
+        {% include "svgs/layout/frame.njk" %}
+      </div>
+      <span class="component-name">Frame</span>
+    </wa-card>
+  </a>
+  <a href="/docs/layout/grid">
+    <wa-card with-header>
+      <div slot="header">
+        {% include "svgs/layout/grid.njk" %}
+      </div>
+      <span class="component-name">Grid</span>
+    </wa-card>
+  </a>
+  <a href="/docs/layout/split">
+    <wa-card with-header>
+      <div slot="header">
+        {% include "svgs/layout/split.njk" %}
+      </div>
+      <span class="component-name">Split</span>
+    </wa-card>
+  </a>
+  <a href="/docs/layout/stack">
+    <wa-card with-header>
+      <div slot="header">
+        {% include "svgs/layout/stack.njk" %}
+      </div>
+      <span class="component-name">Stack</span>
+    </wa-card>
+  </a>
+</div>

docs/docs/layout/split.md

@@ -0,0 +1,159 @@
+---
+title: Split
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: page-outline
+---
+
+<style>
+  :is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-split']:has(div:empty) {
+    border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-m);
+    padding: var(--wa-space-s);
+  }
+
+  [class*='wa-split'] div:empty {
+    background-color: var(--wa-color-indigo-60);
+    border-radius: var(--wa-border-radius-s);
+    min-block-size: 4rem;
+    min-inline-size: 4rem;
+  }
+</style>
+
+Use the `wa-split` class to distribute two or more items evenly across available space, either in a row or a column.
+
+```html {.example}
+<div class="wa-split">
+  <div></div>
+  <div></div>
+</div>
+```
+
+## Examples
+
+Splits are especially helpful for navigation, header, and footer layouts.
+
+```html {.example}
+<div class="wa-flank">
+  <div class="wa-split:column">
+    <div class="wa-stack">
+      <wa-icon-button name="house" label="Home"></wa-icon-button>
+      <wa-icon-button name="calendar" label="Calendar"></wa-icon-button>
+      <wa-icon-button name="envelope" label="Mail"></wa-icon-button>
+    </div>
+    <div class="wa-stack">
+      <wa-divider></wa-divider>
+      <wa-icon-button name="right-from-bracket" label="Sign Out"></wa-icon-button>
+    </div>
+  </div>
+  <div class="placeholder">
+  </div>
+</div>
+
+<style>
+  .placeholder {
+    min-block-size: 300px;
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-m);
+  }
+</style>
+```
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-split">
+    <wa-icon name="web-awesome" label="Web Awesome" style="font-size: var(--wa-font-size-xl);"></wa-icon>
+    <div class="wa-cluster">
+      <wa-button>Sign Up</wa-button>
+      <wa-button appearance="outlined">Log In</wa-button>
+    </div>
+  </div>
+  <div class="placeholder">
+  </div>
+</div>
+
+<style>
+  .placeholder {
+    min-block-size: 300px;
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-m);
+  }
+</style>
+```
+
+## Direction
+
+Items can be split across a row or a column by appending `:row` or `:column` to the `wa-split` class.
+
+```html {.example}
+<div class="wa-flank wa-align-items-start" style="block-size: 16rem;">
+  <div class="wa-split:column">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-split:row">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Align Items
+
+By default, items are centered on the cross axis of the `wa-split` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/align-items) classes to an element with `wa-split` to specify how items are aligned:
+- `wa-align-items-start`
+- `wa-align-items-end`
+- `wa-align-items-center`
+- `wa-align-items-stretch`
+- `wa-align-items-baseline`
+
+These modifiers specify how items are aligned in the block direction for `wa-split:row` and in the inline direction for `wa-split:column`.
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-split wa-align-items-start" style="height: 8rem;">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-split wa-align-items-end" style="height: 8rem;">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-split wa-align-items-center" style="height: 8rem;">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-split wa-align-items-stretch" style="height: 8rem;">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```
+
+## Gap
+
+A split's gap determines how close items can be before they wrap. By default, the gap between split items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-split` to specify the gap between items:
+- `wa-gap-0`
+- `wa-gap-3xs`
+- `wa-gap-2xs`
+- `wa-gap-xs`
+- `wa-gap-s`
+- `wa-gap-m`
+- `wa-gap-l`
+- `wa-gap-xl`
+- `wa-gap-2xl`
+- `wa-gap-3xl`
+
+```html {.example}
+<div class="wa-stack">
+  <div class="wa-split wa-gap-3xs">
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-split wa-gap-3xl">
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```

docs/docs/layout/stack.md

@@ -0,0 +1,113 @@
+---
+title: Stack
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: page-outline
+---
+
+<style>
+  :is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-stack']:has(div:empty) {
+    border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-m);
+    padding: var(--wa-space-s);
+  }
+
+  [class*='wa-stack'] div:empty {
+    background-color: var(--wa-color-indigo-60);
+    border-radius: var(--wa-border-radius-s);
+    min-block-size: 4rem;
+    min-inline-size: 4rem;
+  }
+</style>
+
+Use `wa-stack` to arrange elements in the block direction with even spacing.
+
+```html {.example}
+<div class="wa-stack">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
+
+## Examples
+
+Stacks are well suited for forms, text, and ensuring consistent spacing between elements in the document flow.
+
+```html {.example}
+<div class="wa-stack">
+  <wa-input label="Email">
+    <wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
+  </wa-input>
+  <wa-input label="Password" type="password">
+    <wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
+  </wa-input>
+  <wa-checkbox>Remember me on this device</wa-checkbox>
+  <wa-button>Log In</wa-button>
+</div>
+```
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl">
+  <h3>Aragorn's Squash</h3>
+  <p>Altogether unleash weasel mainly well-protected hiding Farthing excuse. Falling pits oil em Hasufel levels weight rides vagabonds? Gamgee hard-won thunder merrier forests treasury. Past birthday lasts lowly there'd woe Woodland pa sun's slaying most handling.</p>
+  <p>Even the smallest person can change the course of the future. They tempted completely other caves cloven wisest draught scrumptious cook Undómiel friends. Dory crunchy huge sleepless. Unmade took nerves liquor defeated Arathorn.</p>
+</div>
+```
+
+## Align Items
+
+By default, items stretch to fill the inline size of the `wa-stack` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/align-items) classes to an element with `wa-stack` to specify how items are aligned in the inline direction:
+- `wa-align-items-start`
+- `wa-align-items-end`
+- `wa-align-items-center`
+- `wa-align-items-stretch`
+- `wa-align-items-baseline`
+
+```html {.example}
+<div class="wa-grid">
+  <div class="wa-stack wa-align-items-start">
+    <div style="min-inline-size: 4rem;"></div>
+    <div style="min-inline-size: 8rem;"></div>
+    <div style="min-inline-size: 6rem;"></div>
+  </div>
+  <div class="wa-stack wa-align-items-center">
+    <div style="min-inline-size: 4rem;"></div>
+    <div style="min-inline-size: 8rem;"></div>
+    <div style="min-inline-size: 6rem;"></div>
+  </div>
+  <div class="wa-stack wa-align-items-end">
+    <div style="min-inline-size: 4rem;"></div>
+    <div style="min-inline-size: 8rem;"></div>
+    <div style="min-inline-size: 6rem;"></div>
+  </div>
+</div>
+```
+
+## Gap
+
+By default, the gap between stack items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-stack` to specify the gap between items:
+- `wa-gap-0`
+- `wa-gap-3xs`
+- `wa-gap-2xs`
+- `wa-gap-xs`
+- `wa-gap-s`
+- `wa-gap-m`
+- `wa-gap-l`
+- `wa-gap-xl`
+- `wa-gap-2xl`
+- `wa-gap-3xl`
+
+```html {.example}
+<div class="wa-grid">
+  <div class="wa-stack wa-gap-2xs">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="wa-stack wa-gap-2xl">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+```

docs/docs/patterns/blog.md

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

docs/docs/patterns/business.md

@@ -1,4 +1,9 @@
 ---
 title: Business
 description: TODO
+layout: page.njk
 ---
+
+TODO Page Description
+
+## Examples

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

@@ -0,0 +1,12 @@
+---
+title: E-commerce - Category Filter
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## With inline actions and expandable sidebar filters
+```html{.example}
+ 
+```

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

@@ -0,0 +1,11 @@
+---
+title: E-commerce - Category Preview
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## Three Column (WIP)
+
+```

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

@@ -0,0 +1,13 @@
+---
+title: E-commerce - Order History
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## Invoice panels
+
+```html{.example}
+  
+```

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

@@ -0,0 +1,12 @@
+---
+title: E-commerce - Product List
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## With split image
+```html{.example}
+
+```

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

@@ -0,0 +1,128 @@
+---
+title: E-commerce - Product Detail
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## With color and size selector
+```html{.example}
+  <div class="with-inline-price">
+   <wa-card with-header>
+    <div class="card-header" slot="header">
+      <span class="card-title">Graphic Tank</span>
+      <wa-icon-button name="close" label="close-modal"></wa-icon-button>
+    </div>
+    <div class="card-body">
+      <img style="border-radius: var(--border-radius)" src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+      <form class="detail">
+        <span class="price">$32</span>
+        <span class="rating"><wa-rating></wa-rating><a style="margin-left: .5rem; " href="*">36 Reviews</a></span>
+        <wa-radio-group style="margin-bottom: 1rem;" label="Select an option" name="a" value="1">
+  <wa-radio-button value="Black">Black</wa-radio-button>
+  <wa-radio-button value="White">White</wa-radio-button>
+  <wa-radio-button value="Gray">Gray</wa-radio-button>
+</wa-radio-group>
+<wa-select label="Sizes" placeholder="select size">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
+<wa-button size="medium" style="width: 100%; margin-top: auto;">Medium</wa-button>
+      </form>
+    </div>
+   </wa-card>
+  </div>
+  <style>
+    .with-inline-price { 
+      wa-card {
+        width: 100%;
+        .card-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .card-title {
+            font-size: large;
+            font-weight: 600;
+          }
+        }
+        .card-body {
+          display: grid;
+          grid-template-columns: 35% 1fr;
+          gap: 1rem;
+
+          .detail {
+            display: flex;
+            flex-direction: column;
+
+            .price {
+              font-size: xx-large;
+              font-weight: 600;
+            }
+            .rating {
+              margin-bottom: 1rem;
+            }
+          }
+        }
+      }
+    }
+  </style>
+```
+
+## with large selector
+```html{.example}
+  <wa-card class="large-selector">
+    <div class="card-body">
+      <div style="grid-column: 1/6">
+      <img style="border-radius: var(--border-radius); height: 100%; object-fit: cover;" src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+      </div>
+      <div style="grid-column: 6/-1" class="info">
+        <h2>Basic Tank</h2>
+        <wa-icon-button name="close" label="close-modal"></wa-icon-button>
+        <section>
+          <p style="font-size: x-large;font-weight: 600;">$32</p>
+          <div style="display: flex; align-items: flex-start">
+            <p>3.9</p>
+            <wa-rating></wa-rating>
+            <a href="*" style="margin-left: auto;">See all 512 Reviews</a>
+          </div>
+        </section>
+        <section>
+          <form>
+            <wa-radio-group label="Color" help-text="Choose the most appropriate option." name="a" value="black" style="margin-bottom: 1rem;">
+              <wa-radio value="black">Black</wa-radio>
+              <wa-radio value="gray">Gray</wa-radio>
+            </wa-radio-group>
+            <wa-radio-group label="Size" help-text="Select an option that makes you proud." name="a" value="medium"  style="margin-bottom: 1rem;">
+              <wa-radio-button value="small">S</wa-radio-button>
+              <wa-radio-button value="medium">M</wa-radio-button>
+              <wa-radio-button value="large">L</wa-radio-button>
+              <wa-radio-button value="extra-large">XL</wa-radio-button>
+            </wa-radio-group>
+            <wa-button size="medium" style="width: 100%; margin-top: auto;margin-bottom: 1rem;">Medium</wa-button>
+            <a href="*" style="display: inline-block;width: 100%;text-align: center;">View full details</a>
+          </form>
+        </section>
+      </div>
+    </div>
+  </wa-card>
+<style>
+  .large-selector .card-body {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 1rem;
+
+    .info {
+      position: relative;
+
+      wa-icon-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    }
+  }
+</style>
+```

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

@@ -0,0 +1,166 @@
+---
+title: E-commerce - Product Lists
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+## With Product Grid
+
+```html{.example}
+  <div class="with-product-grid">
+    <div class="grid-item">
+      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+      <div class="grid-item-name">Shirt</div>
+      <wa-rating label="Rating" readonly value="3"></wa-rating>
+      <a class="grid-item-reviews" href="#">38 Reviews</a>
+      <div class="grid-item-price">$170</div>
+    </div>
+    <div class="grid-item">
+      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+      <div class="grid-item-name">Shirt</div>
+      <wa-rating label="Rating" readonly value="3"></wa-rating>
+      <a class="grid-item-reviews" href="#">38 Reviews</a>
+      <div class="grid-item-price">$170</div>
+    </div>
+    <div class="grid-item">
+      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+      <div class="grid-item-name">Shirt</div>
+      <wa-rating label="Rating" readonly value="3"></wa-rating>
+      <a class="grid-item-reviews" href="#">38 Reviews</a>
+      <div class="grid-item-price">$170</div>
+    </div>
+    <div class="grid-item">
+      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+      <div class="grid-item-name">Shirt</div>
+      <wa-rating label="Rating" readonly value="3"></wa-rating>
+      <a class="grid-item-reviews" href="#">38 Reviews</a>
+      <div class="grid-item-price">$170</div>
+    </div>
+  </div>
+  <style>
+    .with-product-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      border: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
+
+      .grid-item {
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      .grid-item:nth-of-type(odd) {
+       
+        border-right: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
+      }
+      .grid-item:not(:nth-last-child(-n + 2)) {
+        border-bottom: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
+      }
+
+      .grid-item-image {
+        width: 100%;
+        object-fit: cover;
+      }
+
+      .grid-item-name {
+        margin-top: 1rem;
+        font-weight: var(--wa-font-weight-bold);
+      }
+
+      .grid-item wa-rating {
+        --symbol-size: var(--wa-font-size-m);
+        margin-top: .5rem;
+      }
+      .grid-item-reviews {
+        --wa-link-decoration-default: none;
+        --wa-color-text-link: var(--wa-color-gray-50);
+        font-size: var(--wa-font-size-m);
+      }
+      .grid-item-price {
+        font-size: var(--wa-font-size-2xl);
+        font-weight: var(--wa-font-weight-bold);
+      }
+    }
+  </style>
+```
+## Card with full details
+```html{.example}
+  <div class="card-with-details">
+   <wa-card with-footer>
+    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+    <div slot="footer" class="card-footer details">
+      <span class="detail-name">Basic Tee 8-pack</span>
+      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <span class="detail-color">8 colors</span>
+      <span class="detail-price">$256</span>
+    </div>
+   </wa-card>
+   <wa-card with-footer>
+    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+    <div slot="footer" class="card-footer details">
+      <span class="detail-name">Basic Tee 8-pack</span>
+      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <span class="detail-color">8 colors</span>
+      <span class="detail-price">$256</span>
+    </div>
+   </wa-card>
+   <wa-card with-footer>
+    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+    <div slot="footer" class="card-footer details">
+      <span class="detail-name">Basic Tee 8-pack</span>
+      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <span class="detail-color">8 colors</span>
+      <span class="detail-price">$256</span>
+    </div>
+   </wa-card>
+   <wa-card with-footer>
+    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+    <div slot="footer" class="card-footer details">
+      <span class="detail-name">Basic Tee 8-pack</span>
+      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
+      <span class="detail-color">8 colors</span>
+      <span class="detail-price">$256</span>
+    </div>
+   </wa-card>
+  </div>
+  <style>
+    .card-with-details {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1rem;
+    }
+    .card-with-details wa-card::part(body) {
+        padding: 0;
+      }
+    .card-with-details .card-footer {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .details {
+      .detail-description {
+        color: var(--wa-color-gray-50);
+      }
+      .detail-name {
+        font-size: var(--wa-font-size-l);
+        font-weight: var(--wa-font-weight-action);
+      }
+      .detail-color {
+        color: var(--wa-color-gray-50);
+        font-style: italic;
+      }
+      .detail-price {
+        font-size: var(--wa-font-size-xl);
+        font-weight: var(--wa-font-weight-action);
+      }
+    }
+    
+  </style>
+```
+## With color swatches (WIP)
+```html{.example}
+
+```
+

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

@@ -0,0 +1,464 @@
+---
+title: E-commerce - Product Reviews
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## With images grid
+```html{.example}
+<div class="with-image-grid">
+  <wa-breadcrumb>
+    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
+  </wa-breadcrumb>
+  <div class="image-grid">
+    <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+    <img src="/assets/images/patterns/gervyn-louis-KXvd7y7AU6Q-unsplash.jpg" />
+    <img src="/assets/images/patterns/gervyn-louis-semwwyXFQho-unsplash.jpg" />
+    <img src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
+  </div>
+  <div>
+    <h2>Tank top</h2>
+    <p>The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Feeling adventurous? Put on a heather gray tee. Want to be a trendsetter? Try our exclusive colorway: "Black". Need to add an extra pop of color to your outfit? Our white tee has you covered.</p>
+    <h3>Highlights</h3>
+    <ul>
+      <li>Hand cut and sewn locally</li>
+    </ul>
+
+    <h3>Highlights</h3>
+    <p>The 6-Pack includes two black, two white, and two heather gray Basic Tees. Sign up for our subscription service and be the first to get new, exciting colors, like our upcoming "Charcoal Gray" limited release.</p>
+
+    <span>$192</span>
+    <div>
+      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
+      <a href="#">117 Reviews</a>
+    </div>
+    <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+  <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+  <wa-button>Add to Cart</wa-button>
+  </div>
+</div>
+<style>
+  .with-image-grid {
+    wa-breadcrumb::part(base) {
+      margin-bottom: 1rem;
+    }
+
+    .image-grid {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 1rem;
+    }
+
+    .image-grid img:nth-of-type(1) {
+      grid-column: 1/-1;
+    }
+
+    .image-grid img:nth-of-type(2) {
+      grid-column: 1/7;
+    }
+    .image-grid img:nth-of-type(3) {
+      grid-column: 7/-1;
+    }
+     .image-grid img:nth-of-type(4) {
+      grid-column: 1/-1;
+    }
+  }
+</style>
+```
+
+## With Tiered Images
+
+```html{.example}
+<div class="with-tiered-images">
+  <wa-breadcrumb>
+    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
+  </wa-breadcrumb>
+  <div>
+    <div class="heading">
+      <h2>Basic Tee</h2>
+      <span style="font-size: var(--wa-font-size-2xl)">$35</span>
+    </div>
+    <div class="rating">
+      <span>3.9</span>
+       <wa-rating label="Rating" precision="0.5" value="3.9"></wa-rating>
+      <a href="#">117 Reviews</a>
+    </div>
+    <div class="tiered-images">
+      <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+      <img src="/assets/images/patterns/gervyn-louis-KXvd7y7AU6Q-unsplash.jpg" />
+      <img src="/assets/images/patterns/gervyn-louis-semwwyXFQho-unsplash.jpg" />
+    </div>
+  </div>
+  <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+  <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+ <wa-button>Add to Cart</wa-button>
+ <h3>Description</h3>
+ <p>The Basic tee is an honest new take on a classic. The tee uses super soft, pre-shrunk cotton for true comfort and a dependable fit. They are hand cut and sewn locally, with a special dye technique that gives each tee it's own look.</p>
+ <p>Looking to stock your closet? The Basic tee also comes in a 3-pack or 5-pack at a bundle discount.</p>
+ <hr />
+ <h3>Highlights</h3>
+    <ul>
+      <li>Hand cut and sewn locally</li>
+    </ul>
+  <div>
+    <wa-card>
+      <wa-icon family="solid" name="earth-americas"></wa-icon>
+      <h3>International delivery</h3>
+      <p>Get your order in 2 years</p>
+    </wa-card>
+    <wa-card>
+      <wa-icon family="solid" name="earth-americas"></wa-icon>
+      <h3>International delivery</h3>
+      <p>Get your order in 2 years</p>
+  
+    </wa-card>
+  </div>
+</div>
+<style>
+  .with-tiered-images {
+    wa-breadcrumb::part(base) {
+      margin-bottom: 1rem;
+    }
+    .heading {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .rating {
+      display: flex;
+
+      span {
+        display: inline-block;
+        margin-right: 1rem;
+      }
+
+      wa-rating {
+        margin-right: 1rem;
+      }
+    }
+
+    .tiered-images {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 1rem;
+    }
+
+    .tiered-images img:nth-of-type(1) {
+      grid-column: 1/-1;
+    }
+
+    .tiered-images img:nth-of-type(2) {
+      grid-column: 1/7;
+    }
+    .tiered-images img:nth-of-type(3) {
+      grid-column: 7/-1;
+  }
+</style>
+```
+## with images and expandable details
+
+```html {.example}
+<wa-carousel class="carousel-thumbnails" navigation loop>
+  <wa-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+      src="/assets/examples/carousel/pullover-1.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+      src="/assets/examples/carousel/pullover-2.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+      src="/assets/examples/carousel/pullover-3.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+      src="/assets/examples/carousel/pullover-4.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+      src="/assets/examples/carousel/pullover-5.jpg"
+    />
+  </wa-carousel-item>
+</wa-carousel>
+
+<div class="thumbnails">
+  <div class="thumbnails__scroller">
+    <img alt="Thumbnail by 1" class="thumbnails__image active" src="/assets/examples/carousel/pullover-1.jpg" />
+    <img alt="Thumbnail by 2" class="thumbnails__image" src="/assets/examples/carousel/pullover-2.jpg" />
+    <img alt="Thumbnail by 3" class="thumbnails__image" src="/assets/examples/carousel/pullover-3.jpg" />
+    <img alt="Thumbnail by 4" class="thumbnails__image" src="/assets/examples/carousel/pullover-4.jpg" />
+    <img alt="Thumbnail by 5" class="thumbnails__image" src="/assets/examples/carousel/pullover-5.jpg" />
+  </div>
+</div>
+<div>
+  <h3 style="--wa-space-xl: 0;">Pullover Sweater</h3>
+  <span class="price-big">$140</span>
+  <wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
+  <p>The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.</p>
+  <wa-radio-group label="Select Color" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1"></wa-radio-button>
+  <wa-radio-button value="2"></wa-radio-button>
+  <wa-radio-button value="3"></wa-radio-button>
+</wa-radio-group>
+<div>
+  <wa-button>Add to cart</wa-button>
+  <wa-icon-button name="gear" label="Settings"></wa-icon-button>
+</div>
+<div class="details-group-example">
+  <wa-details summary="First" open>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+
+  <wa-details summary="Second">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+
+  <wa-details summary="Third">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+</div>
+</div>
+
+<style>
+  .carousel-thumbnails {
+    --slide-aspect-ratio: 3 / 2;
+  }
+
+  wa-radio-button #shadow-root div .button--medium {
+    padding: var(--wa-space-xs) var(--wa-space-xs);
+  }
+  
+  .color-circle {
+    --background: #000;
+    background: var(--background);
+ 
+    width: 50px;
+    height: 100%;
+  }
+
+  .sweater-rating {
+    margin-bottom: 1rem;
+  }
+  .price-big {
+    display: block;
+    font-size: 32px;
+  }
+
+  .thumbnails {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+  }
+
+  .thumbnails__scroller {
+    display: flex;
+    gap: var(--wa-space-s);
+    overflow-x: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    scroll-padding: var(--wa-space-s);
+  }
+
+  .thumbnails__scroller::-webkit-scrollbar {
+    display: none;
+  }
+
+  .thumbnails__image {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+
+    opacity: 0.3;
+    will-change: opacity;
+    transition: 250ms opacity;
+
+    cursor: pointer;
+  }
+
+  .thumbnails__image.active {
+    opacity: 1;
+  }
+  .details-group-example wa-details:not(:last-of-type) {
+    margin-bottom: var(--wa-space-2xs);
+  }
+</style>
+
+<script>
+  {
+    const carousel = document.querySelector('.carousel-thumbnails');
+    const scroller = document.querySelector('.thumbnails__scroller');
+    const thumbnails = document.querySelectorAll('.thumbnails__image');
+
+    scroller.addEventListener('click', e => {
+      const target = e.target;
+
+      if (target.matches('.thumbnails__image')) {
+        const index = [...thumbnails].indexOf(target);
+        carousel.goToSlide(index);
+      }
+    });
+
+    carousel.addEventListener('wa-slide-change', e => {
+      const slideIndex = e.detail.index;
+
+      [...thumbnails].forEach((thumb, i) => {
+        thumb.classList.toggle('active', i === slideIndex);
+        if (i === slideIndex) {
+          thumb.scrollIntoView({
+            block: 'nearest'
+          });
+        }
+      });
+    });
+  }
+
+    const container = document.querySelector('.details-group-example');
+
+  // Close all other details when one is shown
+  container.addEventListener('wa-show', event => {
+    if (event.target.localName === 'wa-details') {
+      [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
+    }
+  });
+</script>
+```
+
+## Split with image
+
+```html {.example}
+<div class="split-with-image">
+  <div class="div-1">
+    <wa-breadcrumb>
+    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
+    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
+    </wa-breadcrumb>
+    <h2>Everyday Ruck Snack</h2>
+    <span>
+      <span>$220</span> |
+      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating> 
+      <span>1624 reviews</span>
+    </span>
+    <p>Don't compromise on snack-carrying capacity with this lightweight and spacious bag. The drawstring top keeps all your favorite chips, crisps, fries, biscuits, crackers, and cookies secure.</p>
+    <span><wa-icon family="solid" name="check"></wa-icon> In stock and ready to ship</span>
+   
+
+  </div>
+  <div class="div-2">
+    <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
+  </div>
+  <div class="div-3">
+     <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+  </div>
+</div>
+<style>
+  .split-with-image {
+    display: grid;
+    /* grid-template-columns: repeat(2, 1fr); */
+    /* height: 1000px; */
+    /* gap: 1rem; */
+    .div-1 {
+   
+    }
+    .div-2 {
+      /* background-color: black;
+      grid-column-start: 2;
+      grid-row: span 2 / span 2; */
+    }
+    .div-3 {
+   
+    }
+  }
+</style>
+```
+## With tabs
+
+```html{.example}
+<div>
+  <wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
+  <h2>Application UI Icon Pack</h2>
+  <img alt="Sample of 30 icons with friendly and fun details in outline, filled, and brand color styles." src="https://tailwindui.com/img/ecommerce-images/product-page-05-product-01.jpg" class="aqk aql">
+  <p>The Application UI Icon Pack comes with over 200 icons in 3 styles: outline, filled, and branded. This playful icon pack is tailored for complex application user interfaces with a friendly and legible look.</p>
+  <wa-button variant="brand">Brand</wa-button>
+
+<wa-button variant="success">Success</wa-button>
+<hr />
+<h3>Highlights</h3>
+<ul>
+  <li>200+ SVG icons in 3 unique styles</li>
+  <li>Compatible with Figma, Sketch, and Adobe XD</li>
+  <li>Drawn on 24 x 24 pixel grid</li>
+</ul>
+<hr />
+<h3>License</h3>
+<p>For personal and professional use. You cannot resell or redistribute these icons in their original or modified state. <a href="#">Read full license</a></p>
+<hr />
+<h3>Share</h3>
+
+
+<wa-icon family="brands" name="facebook"></wa-icon>
+<wa-icon family="brands" name="instagram"></wa-icon>
+<wa-icon family="brands" name="x-twitter"></wa-icon>
+  <wa-tab-group>
+  <wa-tab slot="nav" panel="general">General</wa-tab>
+  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
+  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
+  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
+
+  <wa-tab-panel name="general">
+    <div></div>
+    <div>
+      <h3>Hector Gibbons</h3>
+      <p>July 12, 2021</p>
+      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
+      <p>Blown away by how polished this icon pack is. Everything looks so consistent and each SVG is optimized out of the box so I can use it directly with confidence. It would take me several hours to create a single icon this good, so it's a steal at this price.</p>
+    </div>
+  </wa-tab-panel>
+  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
+  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
+  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
+</wa-tab-group>
+
+</div>
+
+```

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

@@ -0,0 +1,9 @@
+---
+title: E-commerce - Shopping Cart
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## Examples

docs/docs/patterns/ecommerce.md

@@ -8,16 +8,133 @@ TODO Page Description
 
 ## Examples
 
+## Coupon
+
+```html{.example}
+<wa-dialog label="New Here?" with-header class="coupon" style="--width: 50rem;">
+  <div class="coupon-split">
+    <img style="height: 100%" src="/assets/images/patterns/coupon.jpg" />
+    <div>
+      <span>help us start you off on the right foot.</span>
+      <h1 style="margin-bottom: 0;">Get 15% Off...*</h1>
+      <p>...your first online order when you signup for emails.</p>
+      <wa-input label="Email" style="margin-bottom: 1rem;">
+        <div slot="help-text">What would you <a href='#'>link</a> like people to call you?</div>
+      </wa-input>
+      <wa-button size="medium" style="width: 100%; margin-bottom: 1rem;" variant="danger">Email me discount</wa-button>
+      <p style="font-size: xx-small;font-style: italic;">*The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
+    </div>
+  </div>
+</wa-dialog>
+
+<wa-button>Open Dialog</wa-button>
+
+<style>
+  .coupon {
+    .coupon-split {
+      display: grid;
+      grid-template-columns: 40% 1fr;
+      gap: 1rem;
+    }
+  }
+</style>
+<script>
+  const dialog = document.querySelector('.coupon');
+  const openButton = dialog.nextElementSibling;
+
+  openButton.addEventListener('click', () => dialog.open = true);
+</script>
+
+```
+
+## Mega Menu
+
+```html{.example}
+<wa-dropdown>
+  <wa-button slot="trigger" caret>Shop</wa-button>
+  <wa-menu class="mm-grid">
+    <div>
+      <wa-menu-label>Shop by Department</wa-menu-label>
+      <wa-menu-item value="apple">Mens</wa-menu-item>
+      <wa-menu-item value="banana">Womens</wa-menu-item>
+      <wa-menu-item value="orange">Kids</wa-menu-item>
+      <wa-menu-item value="orange">
+        Infants
+         <wa-menu slot="submenu">
+      <wa-menu-item value="uppercase">Newborns</wa-menu-item>
+      <wa-menu-item value="lowercase">6 Months</wa-menu-item>
+      <wa-menu-item value="capitalize">12 Months</wa-menu-item>
+    </wa-menu>
+      </wa-menu-item>
+      <wa-menu-item value="orange">Big & Tall</wa-menu-item>
+    </div>
+  <div>
+    <wa-menu-label>Shop by Category</wa-menu-label>
+    <wa-menu-item value="apple">Shirts</wa-menu-item>
+    <wa-menu-item value="banana">Pants</wa-menu-item>
+    <wa-menu-item value="orange">Shoes</wa-menu-item>
+  </div>
+ 
+  <div>
+    <wa-menu-label>Just Arrived</wa-menu-label>
+    
+   
+    <wa-menu-item>
+      <a href="#">
+       <img style="width: 100%; max-width: 200px;" src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDIzNDd8&ixlib=rb-4.0.3&q=80&w=1080" />
+     </a>
+      
+    </wa-menu-item>
+    
+
+
+  </div>
+ 
+ 
+    <wa-menu-item style="grid-column: 1/-1;">
+      <div style="display: flex; justify-content: space-between; align-items: center;">
+        <p style="margin:0;">footer with something cool in it</p>
+        <wa-button variant="brand" size="small">Signup now</wa-button>
+      </div>
+      
+    </wa-menu-item>
+
+  </wa-menu>
+    
+  
+</wa-dropdown>
+<style>
+  .mm-grid {
+        display: grid;
+    grid-template-columns: repeat(3, auto);
+    gap: 1rem;
+
+  
+
+  .card-overview small {
+    color: var(--wa-color-text-quiet);
+  }
+
+  .card-overview [slot='footer'] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  }
+
+    
+</style>
+```
 ### Slide Over
 
 ```html {.example}
-<wa-card class="card-header" style="width: 500px;">
+<wa-card with-header with-footer class="card-header" style="width: 500px;">
   <div slot="header">
     <strong>Shopping Cart</strong>
     <wa-icon-button name="close" variant="solid" label="Settings"></wa-icon-button>
   </div>
     <section class="cart-item">
-    <img src="https://source.unsplash.com/white-and-red-nike-air-force-1-high--iJgjj33eEk" alt="" width="300">
+    <img src="https://images.unsplash.com/photo-1704677982224-89cd6d039fa6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDEwOTJ8&ixlib=rb-4.0.3&q=80&w=1080" alt="" width="300">
     <div>
       <div style="display:flex; justify-content: space-between; font-weight: 600;">
         <span>AJ1</span>
@@ -31,7 +148,7 @@ TODO Page Description
     </div>
   </section>
    <section class="cart-item">
-    <img src="https://source.unsplash.com/smiling-woman-in-black-and-white-print-t-shirt-VW5VjskNXZ8" alt="" width="300">
+    <img src="https://plus.unsplash.com/premium_photo-1707932485795-1d0aed727376?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDE2NDl8&ixlib=rb-4.0.3&q=80&w=1080" alt="" width="300">
     <div>
       <div style="display:flex; justify-content: space-between; font-weight: 600;">
         <span>The Trails</span>
@@ -45,7 +162,7 @@ TODO Page Description
     </div>
   </section>
    <section class="cart-item">
-    <img src="https://source.unsplash.com/man-standing-in-front-of-door-dG4Eb_oC5iM" alt="" width="300">
+    <img src="https://plus.unsplash.com/premium_photo-1690347839113-b5db143123b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDE5MTB8&ixlib=rb-4.0.3&q=80&w=1080" alt="" width="300">
     <div>
       <div style="display:flex; justify-content: space-between; font-weight: 600;">
         <span>Outcast</span>
@@ -120,7 +237,7 @@ TODO Page Description
   <h1>Shopping Cart</h1>
   <div class="first-column">
     <section class="cart-item">
-     <img class="cart-item-image" src="https://source.unsplash.com/white-crew-neck-t-shirt-acn5ERAeSb4" alt="" width="300">
+     <img class="cart-item-image" src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDIzNDd8&ixlib=rb-4.0.3&q=80&w=1080" alt="" width="300">
     <div class="cart-item-info">
       <div class="cart-item-meta">
         <div>
@@ -144,7 +261,7 @@ TODO Page Description
     </div>
   </section>
   <section class="cart-item">
-     <img class="cart-item-image" src="https://source.unsplash.com/blue-and-white-checkered-dress-shirt-RqYTuWkTdEs" alt="" width="300">
+     <img class="cart-item-image" src="https://images.unsplash.com/photo-1624378440847-4a64ee1a889d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDI0MDd8&ixlib=rb-4.0.3&q=80&w=1080" alt="" width="300">
     <div class="cart-item-info">
       <div class="cart-item-meta">
         <div>
@@ -168,7 +285,7 @@ TODO Page Description
     </div>
   </section>
   <section class="cart-item">
-     <img class="cart-item-image" src="https://source.unsplash.com/white-and-blue-cat-printed-crew-neck-t-shirt-fEt6Wd4t4j0" alt="" width="300">
+     <img class="cart-item-image" src="https://images.unsplash.com/photo-1511551203524-9a24350a5771?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDI0OTB8&ixlib=rb-4.0.3&q=80&w=1080" alt="" width="300">
     <div class="cart-item-info">
       <div class="cart-item-meta">
         <div>
@@ -194,7 +311,7 @@ TODO Page Description
 
 
   </div>
-  <wa-card class="card-header second-column">
+  <wa-card with-header class="card-header second-column">
   <div slot="header">
     Order Summary
 
@@ -224,6 +341,9 @@ TODO Page Description
 </wa-card>
 
 <style>
+  :root {
+    --border-color: var(--wa-color-surface-border);
+  }
   .two-column {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
@@ -245,7 +365,7 @@ TODO Page Description
 
        &:not(:last-of-type) {
       padding-bottom: 1rem;
-      border-bottom: 1px solid rgb(48, 50, 59);
+      border-bottom: 1px solid var(--border-color);
     }
 
 
@@ -274,7 +394,7 @@ TODO Page Description
   <h1>Shopping Cart</h1>
   <div class="first-half half">
     <section class="cart-item">
-    <img class="cart-item-image" src="https://source.unsplash.com/black-convertible-coupe-0CZwuZhiC84" alt="" >
+    <img class="cart-item-image" src="https://images.unsplash.com/photo-1594787317357-dcda50fd1d78?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDI4MDd8&ixlib=rb-4.0.3&q=80&w=1080" alt="" >
     <div>
       <span style="display: flex;justify-content: space-between;">
         <span><strong>Convertible</strong></span>
@@ -291,7 +411,7 @@ TODO Page Description
 
   </section>
   <section class="cart-item">
-    <img class="cart-item-image" src="https://source.unsplash.com/blue-open-door-pickup-truck-BCKgFzJbwz4" alt="" >
+    <img class="cart-item-image" src="https://images.unsplash.com/photo-1597670250484-0e9aff7f8804?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDI4NTB8&ixlib=rb-4.0.3&q=80&w=1080" alt="" >
     <div>
       <span style="display: flex;justify-content: space-between;">
         <span><strong>Pickup</strong></span>
@@ -308,7 +428,7 @@ TODO Page Description
 
   </section>
   <section class="cart-item">
-    <img class="cart-item-image" src="https://source.unsplash.com/red-and-white-volkswagen-t-2-scale-model-GlDRYsruYJ8" alt="" >
+    <img class="cart-item-image" src="https://images.unsplash.com/photo-1594787826350-19386fdb2363?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDI4ODV8&ixlib=rb-4.0.3&q=80&w=1080" alt="" >
     <div>
       <span style="display: flex;justify-content: space-between;">
         <span><strong>Volkswagon T2</strong></span>
@@ -337,6 +457,9 @@ TODO Page Description
   </div>
 </div>
 <style>
+  :root {
+    --border-color: var(--wa-color-surface-border);
+  }
   .single-column {
     .cart-item {
       display: grid;
@@ -346,7 +469,7 @@ TODO Page Description
 
        &:not(:last-of-type) {
       padding-bottom: 1rem;
-      border-bottom: 1px solid rgb(48, 50, 59);
+      border-bottom: 1px solid var(--border-color);
     }
 
     img {
@@ -367,20 +490,22 @@ TODO Page Description
 </style>
 ```
 
-### Product Quickview
+<!-- ## Product Quickviews
+
+### Basic
 
 ```html {.example}
-<wa-card class="card-header">
+<wa-card with-header class="card-header">
   <div slot="header">
     <strong>Quickview</strong>
     <wa-icon-button name="close" variant="solid" label="Settings"></wa-icon-button>
   </div>
   <div style="
     display: grid;
-    grid-template-columns: 35% 65%;
+    grid-template-columns: 35% 1fr;
     grid-column-gap: 1rem;
 ">
-  <img class="cart-item-image" src="https://source.unsplash.com/white-crew-neck-t-shirt-acn5ERAeSb4" alt="" width="300">
+  <img class="cart-item-image" src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDI5OTJ8&ixlib=rb-4.0.3&q=80&w=1080" alt="" >
   <div>
     <h3>Quality Cotton Tee</h3>
     <span>$45.00</span>
@@ -403,6 +528,189 @@ TODO Page Description
   </div>
   </div>
 </wa-card>
+``` -->
+
+### With Carousel
+
+```html {.example}
+<wa-carousel class="carousel-thumbnails" navigation loop>
+  <wa-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+      src="/assets/examples/carousel/pullover-1.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+      src="/assets/examples/carousel/pullover-2.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+      src="/assets/examples/carousel/pullover-3.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+      src="/assets/examples/carousel/pullover-4.jpg"
+    />
+  </wa-carousel-item>
+  <wa-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+      src="/assets/examples/carousel/pullover-5.jpg"
+    />
+  </wa-carousel-item>
+</wa-carousel>
+
+<div class="thumbnails">
+  <div class="thumbnails__scroller">
+    <img alt="Thumbnail by 1" class="thumbnails__image active" src="/assets/examples/carousel/pullover-1.jpg" />
+    <img alt="Thumbnail by 2" class="thumbnails__image" src="/assets/examples/carousel/pullover-2.jpg" />
+    <img alt="Thumbnail by 3" class="thumbnails__image" src="/assets/examples/carousel/pullover-3.jpg" />
+    <img alt="Thumbnail by 4" class="thumbnails__image" src="/assets/examples/carousel/pullover-4.jpg" />
+    <img alt="Thumbnail by 5" class="thumbnails__image" src="/assets/examples/carousel/pullover-5.jpg" />
+  </div>
+</div>
+<div>
+  <h3 style="--wa-space-xl: 0;">Pullover Sweater</h3>
+  <span class="price-big">$140</span>
+  <wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
+  <p>The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.</p>
+  <wa-radio-group label="Select Color" help-text="Select an option that makes you proud." name="a" value="1">
+  <wa-radio-button value="1">Black
+  </wa-radio-button>
+  <wa-radio-button value="2">White</wa-radio-button>
+  <wa-radio-button value="3">Gray</wa-radio-button>
+</wa-radio-group>
+<div>
+  <wa-button>Add to cart</wa-button>
+  <wa-icon-button name="gear" label="Settings"></wa-icon-button>
+</div>
+<div class="details-group-example">
+  <wa-details summary="First" open>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+
+  <wa-details summary="Second">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+
+  <wa-details summary="Third">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+</div>
+</div>
+
+<style>
+  .carousel-thumbnails {
+    --slide-aspect-ratio: 3 / 2;
+  }
+
+  wa-radio-button #shadow-root div .button--medium {
+    padding: var(--wa-space-xs) var(--wa-space-xs);
+  }
+  
+  .color-circle {
+    --background: #000;
+    background: var(--background);
+ 
+    width: 50px;
+    height: 100%;
+  }
+
+  .sweater-rating {
+    margin-bottom: 1rem;
+  }
+  .price-big {
+    display: block;
+    font-size: 32px;
+  }
+
+  .thumbnails {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+  }
+
+  .thumbnails__scroller {
+    display: flex;
+    gap: var(--wa-space-s);
+    overflow-x: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    scroll-padding: var(--wa-space-s);
+  }
+
+  .thumbnails__scroller::-webkit-scrollbar {
+    display: none;
+  }
+
+  .thumbnails__image {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+
+    opacity: 0.3;
+    will-change: opacity;
+    transition: 250ms opacity;
+
+    cursor: pointer;
+  }
+
+  .thumbnails__image.active {
+    opacity: 1;
+  }
+  .details-group-example wa-details:not(:last-of-type) {
+    margin-bottom: var(--wa-space-2xs);
+  }
+</style>
+
+<script>
+  {
+    const carousel = document.querySelector('.carousel-thumbnails');
+    const scroller = document.querySelector('.thumbnails__scroller');
+    const thumbnails = document.querySelectorAll('.thumbnails__image');
+
+    scroller.addEventListener('click', e => {
+      const target = e.target;
+
+      if (target.matches('.thumbnails__image')) {
+        const index = [...thumbnails].indexOf(target);
+        carousel.goToSlide(index);
+      }
+    });
+
+    carousel.addEventListener('wa-slide-change', e => {
+      const slideIndex = e.detail.index;
+
+      [...thumbnails].forEach((thumb, i) => {
+        thumb.classList.toggle('active', i === slideIndex);
+        if (i === slideIndex) {
+          thumb.scrollIntoView({
+            block: 'nearest'
+          });
+        }
+      });
+    });
+  }
+
+    const container = document.querySelector('.details-group-example');
+
+  // Close all other details when one is shown
+  container.addEventListener('wa-show', event => {
+    if (event.target.localName === 'wa-details') {
+      [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
+    }
+  });
+</script>
+
 ```
 
 ### Product Review
@@ -423,21 +731,21 @@ TODO Page Description
   </div>
   <div style="margin-top: 1rem;">
     <div>
-      <div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
+      <div class="customer-list-item">
         <span style="display: flex; align-items: center;">
           <wa-avatar image="https://source.unsplash.com/bman-wearing-henley-top-portrait-7YVZYZeITc8" label="man-wearing-henley" style="margin-right: 1rem;"></wa-avatar>
           <span style="display: flex; flex-direction: column">Mark Henry <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
         </span>
         <p><em>I initially had my doubts, but once I got the widgets and played around with them, I became a believer.</em></p>
       </div>
-      <div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
+      <div class="customer-list-item">
         <span style="display: flex; align-items: center;">
           <wa-avatar image="https://source.unsplash.com/woman-wearing-black-crew-neck-shirt-3TLl_97HNJo" label="lady-in-turtleneck" style="margin-right: 1rem;"></wa-avatar>
           <span style="display: flex; flex-direction: column">Liz Michaels <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
         </span>
         <p><em>I'd definitely but these again.</em></p>
       </div>
-      <div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
+      <div class="customer-list-item">
         <span style="display: flex; align-items: center;">
           <wa-avatar image="https://source.unsplash.com/man-with-index-finger-on-lips-RukI4qZGlQs" label="man-with-hair" style="margin-right: 1rem;"></wa-avatar>
           <span style="display: flex; flex-direction: column">Todd Smith <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
@@ -447,6 +755,21 @@ TODO Page Description
     </div>
   </div>
 </div>
+
+<style>
+  :root {
+    --border-color: var(--wa-color-surface-border);
+  }
+
+  .customer-list-item {
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 1rem;
+  }
+
+  .cart-item-image {
+    width: 100%;
+  }
+</style>
 ```
 
 ### Order History
@@ -475,7 +798,7 @@ TODO Page Description
   </div>
   <div>
     <div class="order-history-list-item" style="align-items: center;">
-      <img class="cart-item-image" src="https://source.unsplash.com/beige-wooden-bar-stool-4kTbAMRAHtQ" alt="">
+      <img class="cart-item-image" src="https://images.unsplash.com/photo-1628304433247-804066a9864c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDMxODN8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
       <div>
         <span style="display: flex;justify-content: space-between;">
           <span><strong>Kitchen Stool</strong></span>
@@ -490,7 +813,7 @@ TODO Page Description
       </div>
     </div>
     <div class="order-history-list-item" style="margin-top: 1rem; align-items: center;">
-      <img class="cart-item-image" src="https://source.unsplash.com/green-succulent-in-teal-ceramic-vase-miziNqvJx5M" alt="">
+      <img class="cart-item-image" src="https://plus.unsplash.com/premium_photo-1675705062445-0c14a42d4289?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDMwODJ8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
       <div>
         <span style="display: flex;justify-content: space-between;">
           <span><strong>Succulent</strong></span>
@@ -505,7 +828,7 @@ TODO Page Description
       </div>
     </div>
     <div class="order-history-list-item" style="margin-top: 1rem; align-items: center;">
-      <img class="cart-item-image" src="https://source.unsplash.com/battercreek-coffee-pack-rsnzc-8dVs0" alt="">
+      <img class="cart-item-image" src="https://images.unsplash.com/photo-1613536844480-ac5d7b1b6ed1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDMyMzh8&ixlib=rb-4.0.3&q=80&w=1080" alt="">
       <div>
         <span style="display: flex;justify-content: space-between;">
           <span><strong>French Roast</strong></span>
@@ -522,6 +845,9 @@ TODO Page Description
   </div>
 </div>
 <style>
+   :root {
+    --border-color: var(--wa-color-surface-border);
+  }
   .order-history-meta {
     display: flex;
     justify-content: space-between;
@@ -538,7 +864,7 @@ TODO Page Description
         display: grid;
     grid-template-columns: 18% 79%;
     column-gap: 1rem;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--border-color);
     padding-bottom: 1rem;
   }
 </style>
@@ -586,7 +912,7 @@ TODO Page Description
   <h4>Order Summary</h4>
   <wa-card class="card-basic">
     <div class="summary-item">
-      <img src="https://source.unsplash.com/pair-of-white-and-orange-athletic-shoes-on-white-box-dwKiHoqqxk8">
+      <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM1MzB8&ixlib=rb-4.0.3&q=80&w=1080">
       <div class="summary-item-info">
         <span style="display: flex; justify-content: space-between;">
           <span class="item-heading">Dolce Runners</span>
@@ -607,7 +933,7 @@ TODO Page Description
       <hr style="grid-column: 1 / -1;">
     </div>
     <div class="summary-item">
-      <img src="https://source.unsplash.com/white-and-brown-nike-sneaker-LV_4qM5Gf9c">
+      <img src="https://images.unsplash.com/photo-1514989940723-e8e51635b782?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM1Njh8&ixlib=rb-4.0.3&q=80&w=1080">
       <div class="summary-item-info">
         <span style="display: flex; justify-content: space-between;">
           <span class="item-heading">Dunk High</span>
@@ -628,7 +954,7 @@ TODO Page Description
       <hr style="grid-column: 1 / -1;">
     </div>
     <div class="summary-item">
-      <img src="https://source.unsplash.com/black-and-white-new-balance-low-top-sneaker-6zO5VKogoZE">
+      <img src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM2MTF8&ixlib=rb-4.0.3&q=80&w=1080">
       <div class="summary-item-info">
         <span style="display: flex; justify-content: space-between;">
           <span class="item-heading">NB Runner</span>
@@ -671,6 +997,7 @@ TODO Page Description
 
         img {
           grid-column: 1/4;
+          width: 100%;
         }
 
         .summary-item-info {

docs/docs/patterns/education.md

@@ -0,0 +1,9 @@
+---
+title: Business
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## Examples

docs/docs/patterns/entertainement.md

@@ -1,4 +1,9 @@
 ---
 title: Entertainment
 description: TODO
+layout: page.njk
 ---
+
+TODO Page Description
+
+## Examples

docs/docs/patterns/index.md

@@ -0,0 +1,5 @@
+---
+title: Patterns
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: page-outline
+---

docs/docs/patterns/membership.md

@@ -1,4 +1,9 @@
 ---
 title: Membership
 description: TODO
+layout: page.njk
 ---
+
+TODO Page Description
+
+## Examples

docs/docs/patterns/news.md

@@ -1,4 +1,160 @@
 ---
 title: News
 description: TODO
+layout: page.njk
 ---
+
+TODO Page Description
+
+## Examples
+### Paywall
+
+```html{.example}
+<div>
+  <wa-dialog label="You've run out of free articles... loser" with-header class="dialog-header">
+    <wa-button href="#">Register</wa-button>
+  Already a subscriber? <a href="#">Login</a>
+</wa-dialog>
+
+<wa-button>Open Paywall</wa-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-header');
+  const openButton = dialog.nextElementSibling;
+
+  openButton.addEventListener('click', () => dialog.open = true);
+</script>
+
+</div>
+```
+## Related articles
+```html{.example}
+<div>
+  <wa-card>
+    <div class="card-body">
+      <div style="border-bottom: 1px solid var(--wa-color-surface-border);margin-bottom: 1rem; padding-bottom: 1rem;">
+        <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
+        <h2 style="margin-bottom: var(--wa-space-s);">Title</h2>
+        <p style="margin-bottom: var(--wa-space-3xs);">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,4 +1,9 @@
 ---
 title: Non-profit
 description: TODO
+layout: page.njk
 ---
+
+TODO Page Description
+
+## Examples

docs/docs/patterns/portfilio.md

@@ -0,0 +1,9 @@
+---
+title: Business
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## Examples

docs/docs/patterns/portfolio.md

@@ -1,4 +1,9 @@
 ---
 title: Portfolio
 description: TODO
+layout: page.njk
 ---
+
+TODO Page Description
+
+## Examples

docs/docs/patterns/product-landing.md

@@ -1,4 +1,9 @@
 ---
 title: Product Landing
 description: TODO
+layout: page.njk
 ---
+
+TODO Page Description
+
+## Examples