Add component reference / cheatsheet

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

cspell.json

@@ -5,6 +5,7 @@
     "allowfullscreen",
     "animationend",
     "Animista",
+    "APG",
     "apos",
     "atrule",
     "autocorrect",

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,8 +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/layout.css" />
+    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />
     <link rel="stylesheet" href="/dist/themes/forms.css" />
 
     {# Docs styles #}
@@ -39,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>
@@ -64,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,6 +215,42 @@
   </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>
@@ -246,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/_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

@@ -280,6 +280,64 @@ wa-page > main:has(> .index-grid) {
   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;
@@ -293,6 +351,27 @@ wa-page > main:has(> .index-grid) {
   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/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/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/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

docs/docs/resources/changelog.md

@@ -14,7 +14,16 @@ During the alpha period, things might break! We take breaking changes very serio
 
 ## Next
 
+- Added support for <kbd>Enter</kbd> to `<sl-split-panel>` to align with ARIA APG's [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/)
+- Added more resilient support for lazy loaded options in `<wa-select>`
+- Added support for vertical button groups
+- Fixed a bug in `<wa-rating>` when using `precision`
 - Fixed a bug in `<wa-relative-time>` where the title attribute would show with redundant info
+- Fixed a bug in `<wa-tooltip>` that caused a memory leak in disconnected elements
+- Fixed a bug in `<wa-select>` that prevented label changes in `<wa-option>` from updating the controller
+- Fixed a bug in `<wa-carousel>` that caused interactive elements to be activated when dragging
+- Improved alignment of the play icon in `<wa-animated-image>`
+- Improved behavior of link buttons to not set `noreferrer noopener` by default
 
 ## 3.0.0-alpha.3
 

docs/docs/style-utilities/align-items.md

@@ -0,0 +1,34 @@
+---
+title: Align Items
+description: Align items utility classes set the gap property of flex and grid containers, like other Web Awesome layout utilities. 
+layout: page-outline
+---
+
+<style>
+  .preview-wrapper {
+    border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-s);
+    min-block-size: 3em;
+    padding: var(--wa-space-2xs);
+  }
+  .preview-block {
+    aspect-ratio: 1 / 1;
+    background-color: var(--wa-color-neutral-fill-loud);
+    border-radius: var(--wa-border-radius-xs);
+    min-block-size: 1em;
+  }
+</style>
+
+Web Awesome includes classes to set the `align-items` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to align children in container on the container's cross axis. 
+
+| Class Name          | `align-items` Value | Preview                                                                                                                            |
+| ------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `wa-align-items-baseline` | `baseline`          | <div class="wa-cluster wa-align-items-baseline preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `wa-align-items-center`   | `center`            | <div class="wa-cluster wa-align-items-center preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `wa-align-items-end`      | `flex-end`          | <div class="wa-cluster wa-align-items-end preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>      |
+| `wa-align-items-start`    | `flex-start`        | <div class="wa-cluster wa-align-items-start preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>    |
+| `wa-align-items-stretch`  | `stretch`           | <div class="wa-cluster wa-align-items-stretch preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>  |
+
+## What's a Cross Axis?
+
+The cross axis runs perpendicular to a flex container's content direction. For containers where `flex-direction` is `row` and content flows in the inline direction, the cross axis runs in the block direction. For containers where `flex-direction` is `column` and content flows in the block direction, the cross axis runs in the inline direction.

docs/docs/style-utilities/border-radius.md

@@ -0,0 +1,27 @@
+---
+title: Border Radius
+description: Border radius utility classes set an element's border radius property. 
+layout: page-outline
+---
+
+<style>
+  .preview-block {
+    background-color: var(--wa-color-neutral-fill-loud);
+    min-block-size: 2em;
+  }
+</style>
+
+Web Awesome includes classes to set an element's `border-radius` property. They can be used alongside Web Awesome layout utilities, like [frame](/docs/layout/frame), to round all corners of an element. 
+
+Each class corresponds to one of the [`--wa-border-radius-*`](/docs/theming/borders/#radius) properties in your theme.
+
+| Class Name                | `border-radius` Value       | Preview                                                                                 |
+| ------------------------- | --------------------------- | --------------------------------------------------------------------------------------- |
+| `wa-border-radius-xs`     | `--wa-border-radius-xs`     | <div class="preview-block" style="border-radius: var(--wa-border-radius-xs)"></div>     |
+| `wa-border-radius-s`      | `--wa-border-radius-s`      | <div class="preview-block" style="border-radius: var(--wa-border-radius-s)"></div>      |
+| `wa-border-radius-m`      | `--wa-border-radius-m`      | <div class="preview-block" style="border-radius: var(--wa-border-radius-m)"></div>      |
+| `wa-border-radius-l`      | `--wa-border-radius-l`      | <div class="preview-block" style="border-radius: var(--wa-border-radius-l)"></div>      |
+| `wa-border-radius-pill`   | `--wa-border-radius-pill`   | <div class="preview-block" style="border-radius: var(--wa-border-radius-pill)"></div>   |
+| `wa-border-radius-circle` | `--wa-border-radius-circle` | <div class="preview-block" style="border-radius: var(--wa-border-radius-circle)"></div> |
+| `wa-border-radius-square` | `--wa-border-radius-square` | <div class="preview-block" style="border-radius: var(--wa-border-radius-square)"></div> |
+

docs/docs/style-utilities/gap.md

@@ -0,0 +1,32 @@
+---
+title: Gap
+description: Gap utility classes set the gap property of flex and grid containers, like other Web Awesome layout utilities. 
+layout: page-outline
+---
+
+<style>
+  .preview-block {
+    aspect-ratio: 1 / 1;
+    background-color: var(--wa-color-neutral-fill-loud);
+    border-radius: var(--wa-border-radius-xs);
+    min-block-size: 1.5em;
+  }
+</style>
+
+Web Awesome includes classes to set the `gap` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to change the space between items. 
+
+Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/theming/space) properties in your theme.
+
+| Class Name   | `gap` Value      | Preview                                                                                                     |
+| ------------ | ---------------- | ----------------------------------------------------------------------------------------------------------- |
+| `wa-gap-0`   | `0`              | <div class="wa-cluster wa-gap-0"><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `wa-gap-3xs` | `--wa-space-3xs` | <div class="wa-cluster wa-gap-3xs"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `wa-gap-2xs` | `--wa-space-2xs` | <div class="wa-cluster wa-gap-2xs"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `wa-gap-xs`  | `--wa-space-xs`  | <div class="wa-cluster wa-gap-xs"><div class="preview-block"></div><div class="preview-block"></div></div>  |
+| `wa-gap-s`   | `--wa-space-s`   | <div class="wa-cluster wa-gap-s"><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `wa-gap-m`   | `--wa-space-m`   | <div class="wa-cluster wa-gap-m"><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `wa-gap-l`   | `--wa-space-l`   | <div class="wa-cluster wa-gap-l"><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `wa-gap-xl`  | `--wa-space-xl`  | <div class="wa-cluster wa-gap-xl"><div class="preview-block"></div><div class="preview-block"></div></div>  |
+| `wa-gap-2xl` | `--wa-space-2xl` | <div class="wa-cluster wa-gap-2xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `wa-gap-3xl` | `--wa-space-3xl` | <div class="wa-cluster wa-gap-3xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
+

docs/docs/style-utilities/text.md

@@ -0,0 +1,62 @@
+---
+title: Text
+description: Text utility classes combine custom properties from your Web Awesome theme to conveniently style text content.
+layout: page-outline
+---
+
+Web Awesome includes classes to set multiple text properties at once to style body text, headings, and captions.
+
+## Body
+
+Use body classes to style the main content of your pages. Each `wa-body-*` class specifies the following properties:
+- `font-family: var(--wa-font-family-body);`
+- `font-weight: var(--wa-font-weight-body);`
+- `line-height: var(--wa-line-height-normal);`
+
+Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme.
+
+| Class Name         | `font-size` Value    |  Preview                                                                  |
+| ------------------ | -------------------- | ------------------------------------------------------------------------- |
+| `wa-body-xs`  | `--wa-font-size-xs`  | <div class="wa-body-xs">Sphinx of black quartz, judge my vow.</div>  |
+| `wa-body-s`   | `--wa-font-size-s`   | <div class="wa-body-s">Sphinx of black quartz, judge my vow.</div>   |
+| `wa-body-m`   | `--wa-font-size-m`   | <div class="wa-body-m">Sphinx of black quartz, judge my vow.</div>   |
+| `wa-body-l`   | `--wa-font-size-l`   | <div class="wa-body-l">Sphinx of black quartz, judge my vow.</div>   |
+| `wa-body-xl`  | `--wa-font-size-xl`  | <div class="wa-body-xl">Sphinx of black quartz, judge my vow.</div>  |
+
+## Headings
+
+Use heading classes to style section titles and headings in your content. Each `wa-heading-*` class specifies the following properties:
+- `font-family: var(--wa-font-family-heading);`
+- `font-weight: var(--wa-font-weight-heading);`
+- `line-height: var(--wa-line-height-condensed);`
+- `text-wrap: balance;`
+
+Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
+
+| Class Name       | `font-size` Value    | Preview                                               |
+| ---------------- | -------------------- | ----------------------------------------------------- |
+| `wa-heading-xs`  | `--wa-font-size-s`   | <div class="wa-heading-xs">Five Boxing Wizards</div>  |
+| `wa-heading-s`   | `--wa-font-size-m`   | <div class="wa-heading-s">Five Boxing Wizards</div>   |
+| `wa-heading-m`   | `--wa-font-size-l`   | <div class="wa-heading-m">Five Boxing Wizards</div>   |
+| `wa-heading-l`   | `--wa-font-size-xl`  | <div class="wa-heading-l">Five Boxing Wizards</div>   |
+| `wa-heading-xl`  | `--wa-font-size-2xl` | <div class="wa-heading-xl">Five Boxing Wizards</div>  |
+| `wa-heading-2xl` | `--wa-font-size-3xl` | <div class="wa-heading-2xl">Five Boxing Wizards</div> |
+| `wa-heading-3xl` | `--wa-font-size-4xl` | <div class="wa-heading-3xl">Five Boxing Wizards</div> |
+
+## Captions
+
+Use caption classes to style descriptions or auxiliary text in your content. Each `wa-caption-*` class specifies the following properties:
+- `color: var(--wa-color-text-quiet);`
+- `font-family: var(--wa-font-family-body);`
+- `font-weight: var(--wa-font-weight-body);`
+- `line-height: var(--wa-line-height-condensed);`
+
+Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
+
+| Class Name       | `font-size` Value    | Preview                                                                        |
+| ---------------- | -------------------- | ------------------------------------------------------------------------------ |
+| `wa-caption-xs`  | `--wa-font-size-2xs` | <div class="wa-caption-xs">The quick brown fox jumps over the lazy dog.</div>  |
+| `wa-caption-s`   | `--wa-font-size-xs`  | <div class="wa-caption-s">The quick brown fox jumps over the lazy dog.</div>   |
+| `wa-caption-m`   | `--wa-font-size-s`   | <div class="wa-caption-m">The quick brown fox jumps over the lazy dog.</div>   |
+| `wa-caption-l`   | `--wa-font-size-m`   | <div class="wa-caption-l">The quick brown fox jumps over the lazy dog.</div>   |
+| `wa-caption-xl`  | `--wa-font-size-l`   | <div class="wa-caption-xl">The quick brown fox jumps over the lazy dog.</div>  |

docs/docs/themes.md

@@ -40,20 +40,20 @@ For example, the default theme is set up like this:
 You can import the default and classic themes from the Web Awesome CDN. Simply add the following code to the `<head>` of your page to import the **default** theme:
 
 ```html
-<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.2/dist/themes/default.css" />
+<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/themes/default.css" />
 ```
 
 Or import the **classic** theme:
 
 ```html
-<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.2/dist/themes/classic.css" />
+<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/themes/classic.css" />
 ```
 
 Both the default and classic themes include both light and dark color schemes. When importing either theme, the light color scheme is activated by default. To activate the dark color scheme, apply the appropriate class (`wa-theme-default-dark` or `wa-theme-classic-dark`, depending on theme) to the `<html>` element on your page, like this example for the default theme:
 ```html
 <html class="wa-theme-default-dark">
   <head>
-    <link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.2/dist/themes/default.css" />
+    <link rel="stylesheet" href="path/to/web-awesome/dist/themes/default.css" />
     <!-- other links, scripts, and metadata -->
   </head>
   <body>
@@ -62,6 +62,24 @@ Both the default and classic themes include both light and dark color schemes. W
 </html>
 ```
 
+Because themes are scoped to specific classes, you can activate different color schemes or entire themes on different containers throughout the page. This example uses the default theme with a dark sidebar.
+
+```html
+<html>
+  <head>
+    <link rel="stylesheet" href="path/to/web-awesome/dist/themes/default.css" />
+  </head>
+
+  <body>
+    <nav class="wa-theme-default-dark">
+      <!-- dark-themed sidebar -->
+    </nav>
+
+    <!-- light-themed content -->
+  </body>
+</html>
+```
+
 ## Creating Themes
 
 There are two ways to create themes. The easiest way is to customize the default theme. The advanced way is to create a new theme from scratch. Which method you choose depends on your project's requirements and the amount of effort you're willing to invest.

docs/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="astro/client" />
+/// <reference path="../.astro/types.d.ts" />

scripts/build.js

@@ -313,14 +313,9 @@ if (isDeveloping) {
 
     try {
       const isTestFile = filename.includes('.test.ts');
-      const isJsStylesheet = filename.includes('.styles.ts');
       const isCssStylesheet = filename.includes('.css');
       const isComponent =
-        filename.includes('components/') &&
-        filename.includes('.ts') &&
-        !isJsStylesheet &&
-        !isCssStylesheet &&
-        !isTestFile;
+        filename.includes('components/') && filename.includes('.ts') && !isCssStylesheet && !isTestFile;
 
       // Re-bundle when relevant files change
       if (!isTestFile && !isCssStylesheet) {

src/components/animated-image/animated-image.ts

@@ -108,8 +108,18 @@ export default class WaAnimatedImage extends WebAwesomeElement {
               />
 
               <div part="control-box" class="animated-image__control-box">
-                <slot name="play-icon"><wa-icon name="play" library="system" variant="solid"></wa-icon></slot>
-                <slot name="pause-icon"><wa-icon name="pause" library="system" variant="solid"></wa-icon></slot>
+                <slot name="play-icon">
+                  <wa-icon
+                    name="play"
+                    library="system"
+                    variant="solid"
+                    class="default"
+                    style="margin-inline-start: 3px;"
+                  ></wa-icon>
+                </slot>
+                <slot name="pause-icon">
+                  <wa-icon name="pause" library="system" variant="solid" class="default"></wa-icon>
+                </slot>
               </div>
             `
           : ''}

src/components/button-group/button-group.styles.ts

@@ -2,11 +2,22 @@ import { css } from 'lit';
 
 export default css`
   :host {
-    display: inline-block;
+    display: inline-flex;
   }
 
   .button-group {
     display: flex;
-    flex-wrap: nowrap;
+    position: relative;
+    flex-wrap: wrap;
+    isolation: isolate;
+  }
+
+  :host([orientation='vertical']) .button-group {
+    flex-direction: column;
+  }
+
+  /* Show the focus indicator above other buttons */
+  ::slotted(:focus) {
+    z-index: 1 !important;
   }
 `;

src/components/button-group/button-group.ts

@@ -21,6 +21,7 @@ export default class WaButtonGroup extends WebAwesomeElement {
 
   @query('slot') defaultSlot: HTMLSlotElement;
 
+  /** @internal */
   @state() disableRole = false;
 
   /**
@@ -29,6 +30,16 @@ export default class WaButtonGroup extends WebAwesomeElement {
    */
   @property() label = '';
 
+  /** The button group's orientation. */
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
+
+  updated(changedProps: Map<string, unknown>) {
+    if (changedProps.has('orientation')) {
+      this.setAttribute('aria-orientation', this.orientation);
+      this.updateClassNames();
+    }
+  }
+
   private handleFocus(event: Event) {
     const button = findButton(event.target as HTMLElement);
     button?.classList.add('wa-button-group__button--focus');
@@ -50,6 +61,10 @@ export default class WaButtonGroup extends WebAwesomeElement {
   }
 
   private handleSlotChange() {
+    this.updateClassNames();
+  }
+
+  private updateClassNames() {
     const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })] as HTMLElement[];
 
     slottedElements.forEach(el => {
@@ -58,6 +73,8 @@ export default class WaButtonGroup extends WebAwesomeElement {
 
       if (button) {
         button.classList.add('wa-button-group__button');
+        button.classList.toggle('wa-button-group-horizontal', this.orientation === 'horizontal');
+        button.classList.toggle('wa-button-group-vertical', this.orientation === 'vertical');
         button.classList.toggle('wa-button-group__button--first', index === 0);
         button.classList.toggle('wa-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
         button.classList.toggle('wa-button-group__button--last', index === slottedElements.length - 1);

src/components/button/button.styles.ts

@@ -440,36 +440,104 @@ export default css`
    * buttons and we style them here instead.
    */
 
-  :host(.wa-button-group__button--first:not(.wa-button-group__button--last)) .button {
+  /*
+  :host([data-button-group-middle]) #button {
+    border-radius: 0;
+  }
+
+  :host([data-button-group-horizontal][data-button-group-first]) #button {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
 
+  :host([data-button-group-horizontal][data-button-group-last]) #button {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  :host([data-button-group-vertical][data-button-group-first]) #button {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host([data-button-group-vertical][data-button-group-last]) #button {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+  */
+
   :host(.wa-button-group__button--inner) .button {
     border-radius: 0;
   }
 
-  :host(.wa-button-group__button--last:not(.wa-button-group__button--first)) .button {
+  :host(.wa-button-group-horizontal.wa-button-group__button--first:not(.wa-button-group__button--last)) .button {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host(.wa-button-group-horizontal.wa-button-group__button--last:not(.wa-button-group__button--first)) .button {
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
 
+  :host(.wa-button-group-vertical.wa-button-group__button--first:not(.wa-button-group__button--last)) .button {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host(.wa-button-group-vertical.wa-button-group__button--last:not(.wa-button-group__button--first)) .button {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+
   /* All except the first */
-  :host(.wa-button-group__button:not(.wa-button-group__button--first)) {
+  :host(
+      .wa-button-group-horizontal.wa-button-group-horizontal.wa-button-group__button:not(
+          .wa-button-group__button--first
+        )
+    ) {
     margin-inline-start: calc(-1 * var(--border-width));
   }
 
+  :host(
+      .wa-button-group-vertical.wa-button-group-horizontal.wa-button-group__button:not(.wa-button-group__button--first)
+    ) {
+    margin-block-start: calc(-1 * var(--border-width));
+  }
+
   /* Add a visual separator between filled buttons */
   :host(.wa-button-group__button:not(.wa-button-group__button--first, .wa-button-group__button--radio)) .button:after {
     content: '';
     position: absolute;
-    top: 0;
-    inset-inline-start: 0;
-    bottom: 0;
-    border-left: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
     z-index: 2; /* Keep separators visible on hover */
   }
 
+  :host(
+      .wa-button-group-horizontal.wa-button-group__button:not(
+          .wa-button-group__button--first,
+          .wa-button-group__button--radio
+        )
+    )
+    .button:after {
+    top: 0;
+    bottom: 0;
+    inset-inline-start: 0;
+    border-left: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
+  }
+
+  :host(
+      .wa-button-group-vertical.wa-button-group__button:not(
+          .wa-button-group__button--first,
+          .wa-button-group__button--radio
+        )
+    )
+    .button:after {
+    left: 0;
+    right: 0;
+    inset-block-start: 0;
+    border-top: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
+  }
+
   /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
   :host(.wa-button-group__button--hover) {
     z-index: 1;

src/components/button/button.ts

@@ -116,13 +116,8 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   /** Tells the browser where to open the link. Only used when `href` is present. */
   @property() target: '_blank' | '_parent' | '_self' | '_top';
 
-  /**
-   * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the
-   * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a
-   * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by
-   * setting the attribute to an empty string or a value of your choice, respectively.
-   */
-  @property() rel = 'noreferrer noopener';
+  /** When using `href`, this attribute will map to the underlying link's `rel` attribute. */
+  @property() rel?: string;
 
   /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */
   @property() download?: string;
@@ -281,7 +276,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
         href=${ifDefined(isLink ? this.href : undefined)}
         target=${ifDefined(isLink ? this.target : undefined)}
         download=${ifDefined(isLink ? this.download : undefined)}
-        rel=${ifDefined(isLink ? this.rel : undefined)}
+        rel=${ifDefined(isLink && this.rel ? this.rel : undefined)}
         role=${ifDefined(isLink ? undefined : 'button')}
         aria-disabled=${this.disabled ? 'true' : 'false'}
         tabindex=${this.disabled ? '-1' : '0'}

src/components/carousel/carousel.ts

@@ -99,6 +99,7 @@ export default class WaCarousel extends WebAwesomeElement {
   @state() dragging = false;
 
   private autoplayController = new AutoplayController(this, () => this.next());
+  private dragStartPosition: [number, number] = [-1, -1];
   private readonly localize = new LocalizeController(this);
   private mutationObserver: MutationObserver;
 
@@ -157,6 +158,20 @@ export default class WaCarousel extends WebAwesomeElement {
     ) as WaCarouselItem[];
   }
 
+  private handleClick(event: MouseEvent) {
+    if (this.dragging && this.dragStartPosition[0] > 0 && this.dragStartPosition[1] > 0) {
+      const deltaX = Math.abs(this.dragStartPosition[0] - event.clientX);
+      const deltaY = Math.abs(this.dragStartPosition[1] - event.clientY);
+      const delta = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+      // Prevents clicks on interactive elements while dragging if the click is within a small range. This prevents
+      // accidental drags from interfering with intentional clicks.
+      if (delta >= 10) {
+        event.preventDefault();
+      }
+    }
+  }
+
   private handleKeyDown(event: KeyboardEvent) {
     if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
       const target = event.target as HTMLElement;
@@ -214,6 +229,7 @@ export default class WaCarousel extends WebAwesomeElement {
       // Start dragging if it hasn't yet
       this.scrollContainer.style.setProperty('scroll-snap-type', 'none');
       this.dragging = true;
+      this.dragStartPosition = [event.clientX, event.clientY];
     }
 
     this.scrollContainer.scrollBy({
@@ -261,6 +277,7 @@ export default class WaCarousel extends WebAwesomeElement {
       scrollContainer.style.removeProperty('scroll-snap-type');
 
       this.dragging = false;
+      this.dragStartPosition = [-1, -1];
       this.handleScrollEnd();
     });
   };
@@ -359,10 +376,10 @@ export default class WaCarousel extends WebAwesomeElement {
       this.createClones();
     }
 
-    this.synchronizeSlides();
-
     // Because the DOM may be changed, restore the scroll position to the active slide
     this.goToSlide(this.activeSlide, 'auto');
+
+    this.synchronizeSlides();
   }
 
   private createClones() {
@@ -536,6 +553,7 @@ export default class WaCarousel extends WebAwesomeElement {
           @mousedown="${this.handleMouseDragStart}"
           @scroll="${this.handleScroll}"
           @scrollend=${this.handleScrollEnd}
+          @click=${this.handleClick}
         >
           <slot @slotchange=${() => this.requestUpdate()}></slot>
         </div>