renamed some files

switching to change input label styling
2026-01-13 04:29:14 +00:00 · 2024-12-18 20:40:35 -06:00 · 2024-12-18 20:11:41 -06:00
524 changed files with 14387 additions and 19914 deletions
--- a/.github/workflows/client_tests.js.yml
+++ b/.github/workflows/client_tests.js.yml
@@ -31,7 +31,7 @@ jobs:
      - name: Lint
        run: npm run prettier
      - name: Build
-        run: npm run build:alpha
+        run: npm run build
      - name: Install Playwright
        run: npx playwright install --with-deps
      - name: Run CSR tests
--- a/.github/workflows/ssr_tests.js.yml
+++ b/.github/workflows/ssr_tests.js.yml
@@ -30,7 +30,7 @@ jobs:
        run: npm run prettier

      - name: Build
-        run: npm run build:alpha
+        run: npm run build

      - name: Install Playwright
        run: npx playwright install --with-deps
--- a/.prettierignore
+++ b/.prettierignore
@@ -13,4 +13,3 @@ package-lock.json
 tsconfig.json
 cdn
 _site
-docs/assets/scripts/prism-downloaded.js
--- a/README.md
+++ b/README.md
@@ -59,8 +59,6 @@ To generate a production build, run the following command.
 npm run build
 ```

-You can also run `npm run build:serve` to start an [`http-server`](https://www.npmjs.com/package/http-server) instance on `http://localhost:4000` after the build completes, so you can preview the production build.
-
 ### Creating New Components

 To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -20,15 +20,6 @@ const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
 const isAlpha = process.argv.includes('--alpha');
 const isDev = process.argv.includes('--develop');

-const globalData = {
-  package: packageData,
-  isAlpha,
-  layout: 'page.njk',
-};
-
-const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
-const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
-
 export default function (eleventyConfig) {
  // NOTE - alpha setting removes certain pages
  if (isAlpha) {
@@ -41,9 +32,8 @@ export default function (eleventyConfig) {
  }

  // Add template data
-  for (let name in globalData) {
-    eleventyConfig.addGlobalData(name, globalData[name]);
-  }
+  eleventyConfig.addGlobalData('package', packageData);
+  eleventyConfig.addGlobalData('isAlpha', isAlpha);

  // Template filters - {{ content | filter }}
  eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
@@ -53,14 +43,20 @@ export default function (eleventyConfig) {
    eleventyConfig.addFilter(name, filters[name]);
  }

+  eleventyConfig.addFilter('sort', (arr, key = 'data.title') => {
+    key = key.split('.');
+    return arr.sort((a, b) => {
+      let aVal = key.reduce((obj, i) => obj?.[i], a);
+      let bVal = key.reduce((obj, i) => obj?.[i], b);
+      return aVal.localeCompare(bVal);
+    });
+  });
+
  // Shortcodes - {% shortCode arg1, arg2 %}
  eleventyConfig.addShortcode('cdnUrl', location => {
    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
  });

-  // Paired shortcodes - {% shortCode %}content{% endShortCode %}
-  eleventyConfig.addPairedShortcode('markdown', content => markdown.render(content || ''));
-
  // Helpers

  // Remove elements that have [data-alpha="remove"]
@@ -94,7 +90,7 @@ export default function (eleventyConfig) {
  eleventyConfig.addPlugin(highlightCodePlugin());

  // Add copy code buttons to code blocks
-  eleventyConfig.addPlugin(copyCodePlugin);
+  eleventyConfig.addPlugin(copyCodePlugin());

  // Various text replacements
  eleventyConfig.addPlugin(
@@ -158,18 +154,9 @@ export default function (eleventyConfig) {
  //   eleventyConfig.addPlugin(formatCodePlugin());
  // }

-  eleventyConfig.addPassthroughCopy({
-    'docs/assets': 'assets',
-  });
-
-  for (let glob of passThrough) {
-    eleventyConfig.addPassthroughCopy(glob);
-  }
-
  return {
    markdownTemplateEngine: 'njk',
    dir: {
-      input: 'docs',
      includes: '_includes',
      layouts: '_layouts',
    },
--- a/docs/_data/hueRanges.js
+++ b/docs/_data/hueRanges.js
@@ -1 +0,0 @@
-export { hueRanges as default } from '../assets/scripts/tweak/data.js';
--- a/docs/_data/hues.json
+++ b/docs/_data/hues.json
@@ -1 +0,0 @@
-["red", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]
--- a/docs/_data/palettes.js
+++ b/docs/_data/palettes.js
@@ -1 +0,0 @@
-export { default as default } from '../../src/styles/color/scripts/palettes-analyzed.js';
--- a/docs/_includes/base-wide.njk
+++ b/docs/_includes/base-wide.njk
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -1,27 +1,91 @@
 <!DOCTYPE html>
 <html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
  <head>
-    {% include 'head.njk' %}
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="{{ description }}">
    <meta name="theme-color" content="#f36944">
+    {% if noindex %}<meta name="robots" content="noindex">{% endif %}
+
+    <title>{{ title }}</title>
+
+    <link rel="icon" href="/assets/images/webawesome-logo.svg" />
+    <link rel="apple-touch-icon" href="/assets/images/app-icon.png">
+
+    {# Scripts #}
+    {# Hydration stuff #}
+    <script src="/assets/scripts/hydration-errors.js"></script>
+    <link rel="stylesheet" href="/assets/styles/hydration-errors.css">
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>

    <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>
    <script type="module" src="/assets/scripts/outline.js"></script>
-    {% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar-tweaks.js"></script>{% endif %}
    <script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>

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

-    {% block head %}{% endblock %}
+    {# 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 oldStylesheet = document.querySelector("#theme-stylesheet")
+
+      const newStylesheet = document.createElement("link")
+
+      let preset = getPresetTheme()
+      newStylesheet.href = `/dist/styles/themes/${preset}.css`
+      newStylesheet.rel = "preload"
+      newStylesheet.as = "style"
+
+      document.head.append(newStylesheet)
+
+      function updateStylesheet () {
+        newStylesheet.rel = "stylesheet"
+        newStylesheet.id = "theme-stylesheet"
+        requestAnimationFrame(() => oldStylesheet.remove())
+      }
+
+      newStylesheet.addEventListener("load", updateStylesheet)
+
+      document.documentElement.classList.toggle(
+        `wa-theme-${preset}-dark`,
+        isDark()
+      );
+    </script>
  </head>
-  <body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
+  <body class="layout-{{ layout | stripExtension }}">
    <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
    <wa-page view="desktop" disable-navigation-toggle="">
-      <header slot="header" class="wa-split">
+      <header slot="header">
        {# Logo #}
        <div id="docs-branding">
          {# Nav toggle #}
@@ -30,16 +94,16 @@
          </wa-button>

          <a href="/" aria-label="Web Awesome">
-            <span class="wa-desktop-only">{% include "logo.njk" %}</span>
-            <span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
+            <span class="only-desktop">{% include "logo.njk" %}</span>
+            <span class="only-mobile">{% include "logo-simple.njk" %}</span>
          </a>
          <small id="version-number" class="only-desktop">{{ package.version }}</small>
          <wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
        </div>

-        <div id="docs-toolbar" class="wa-cluster wa-gap-xs">
+        <div id="docs-toolbar">
          {# Desktop selectors #}
-          <div class="only-desktop wa-cluster wa-gap-xs">
+          <div class="only-desktop">
            {% include "preset-theme-selector.njk" %}
            {% include "color-scheme-selector.njk" %}
          </div>
@@ -56,8 +120,8 @@
      {# Sidebar #}
      {% if hasSidebar %}
        {# Mobile selectors #}
-        <div class="wa-mobile-only" slot="navigation-header">
-          <div class="wa-cluster wa-gap-xs">
+        <div class="only-mobile" slot="navigation-header">
+          <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
            {% include "preset-theme-selector.njk" %}
            {% include "color-scheme-selector.njk" %}
          </div>
@@ -85,12 +149,22 @@
          </details>
        </nav>

-        {% block header %}
-          {% include 'breadcrumbs.njk' %}
-          <h1 class="title">{{ title }}</h1>
-        {% endblock %}
+        {% set breadcrumbs = page.url | breadcrumbs %}
+        {% if breadcrumbs.length > 0 %}
+          <wa-breadcrumb id="docs-breadcrumbs">
+            {% for crumb in breadcrumbs %}
+              <wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
+            {% endfor %}
+            <wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
+          </wa-breadcrumb>
+          {% else %}
+        {% endif %}
+
+        {% block beforeContent %}{% endblock %}

        {% block content %}
+          <h1 class="title">{{ title }}</h1>
+
          {{ content | safe }}
        {% endblock %}

--- a/docs/_includes/breadcrumbs.njk
+++ b/docs/_includes/breadcrumbs.njk
@@ -1,10 +0,0 @@
-{% set breadcrumbs = page.url | breadcrumbs %}
-{% if breadcrumbs.length > 0 %}
-  <wa-breadcrumb id="docs-breadcrumbs">
-  {% for crumb in breadcrumbs %}
-    <wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
-  {% endfor %}
-  <wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
-  </wa-breadcrumb>
-  {% else %}
-{% endif %}
--- a/docs/_includes/color-scheme-selector.njk
+++ b/docs/_includes/color-scheme-selector.njk
@@ -1,19 +1,15 @@
 {# Color scheme selector #}
-<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" pill title="Press \ to toggle">
-  <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
-  <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
-  <wa-option value="light">
-    <wa-icon slot="prefix" name="sun" variant="regular"></wa-icon>
-    Light
-  </wa-option>
-  <wa-option value="dark">
-    <wa-icon slot="prefix" name="moon" variant="regular"></wa-icon>
-    Dark
-  </wa-option>
-  <wa-divider></wa-divider>
-  <wa-option value="auto">
+<wa-dropdown id="color-scheme-selector">
+  <wa-button slot="trigger" appearance="filled" size="small" pill caret title="Press \ to toggle">
    <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
    <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
-    System
-  </wa-option>
-</wa-select>
+    <span class="only-light">Light</span>
+    <span class="only-dark">Dark</span>
+  </wa-button>
+  <wa-menu>
+    <wa-menu-item type="checkbox" value="light">Light</wa-menu-item>
+    <wa-menu-item type="checkbox" value="dark">Dark</wa-menu-item>
+    <wa-divider></wa-divider>
+    <wa-menu-item type="checkbox" value="auto">System</wa-menu-item>
+  </wa-menu>
+</wa-dropdown>
--- a/docs/_includes/contrast-table.njk
+++ b/docs/_includes/contrast-table.njk
@@ -1,52 +0,0 @@
-<table class="colors wa-palette-{{ paletteId }} contrast-table" data-min-contrast="{{ minContrast }}">
-  <thead>
-    <tr>
-      <th></th>
-      {% for tint_bg in tints -%}
-        {% for tint_fg in tints | reverse -%}
-          {% if (tint_fg - tint_bg) | abs == difference %}
-          <th>{{ tint_fg }} on {{ tint_bg }}</th>
-          {% endif %}
-        {%- endfor -%}
-      {%- endfor %}
-    </tr>
-  </thead>
-{% for hue in hues -%}
-<tr data-hue="{{ hue }}">
-  <th>{{ hue | capitalize }}</th>
-  {% for tint_bg in tints -%}
-    {% set color_bg = palettes[paletteId][hue][tint_bg] %}
-    {% for tint_fg in tints | reverse -%}
-      {% set color_fg = palettes[paletteId][hue][tint_fg] %}
-      {% if (tint_fg - tint_bg) | abs == difference %}
-      {% set contrast_wcag = '' %}
-      {% if color_fg and color_bg -%}
-        {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
-      {%- endif %}
-      <td v-for="contrast of [contrasts.{{ hue }}['{{ tint_bg }}']['{{ tint_fg }}']]"
-      data-tint-bg="{{ tint_bg }}" data-tint-fg="{{ tint_fg }}" data-original-contrast="{{ contrast_wcag }}">
-        <div v-content:number="contrast.value"
-        class="color swatch" :class="{
-          'value-up': contrast.value - contrast.original > 0.0001,
-          'value-down': contrast.original - contrast.value > 0.0001,
-          'contrast-fail': contrast.value < {{ minContrast }}
-        }"
-        style="--color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})"
-        :style="{
-          '--color': contrast.bgColor,
-          color: contrast.fgColor,
-        }"
-        >
-          {% if contrast_wcag %}
-          {{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
-          {% else %}
-          {{ tint_fg }} on {{ tint_bg }}
-          {% endif %}
-        </div>
-      </td>
-      {% endif %}
-    {%- endfor -%}
-  {%- endfor -%}
-</tr>
-{%- endfor %}
-</table>
--- a/docs/_includes/grouped-pages.njk
+++ b/docs/_includes/grouped-pages.njk
@@ -1,12 +0,0 @@
-{# Cards for pages listed by category #}
-
-<section id="grid" class="index-grid">
-{% for category, pages in allPages | groupByTags(categories) -%}
-  <h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
-    {%- for page in pages -%}
-      {%- if not page.data.parent or listChildren -%}
-        {% include "page-card.njk" %}
-      {%- endif -%}
-    {%- endfor -%}
-{%- endfor -%}
-</section>
--- a/docs/_includes/head.njk
+++ b/docs/_includes/head.njk
@@ -1,49 +0,0 @@
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="description" content="{{ description }}">
-{% if noindex %}<meta name="robots" content="noindex">{% endif %}
-
-<title>{{ title }}</title>
-
-{# Dark mode #}
-<script>
-	let colorScheme = localStorage.colorScheme;
-	let isDark = localStorage.colorScheme === "dark";
-	if (!colorScheme || colorScheme === "auto") {
-		isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-	}
-	document.documentElement.classList.toggle('wa-dark', isDark);
-</script>
-
-<link rel="icon" href="/assets/images/webawesome-logo.svg" />
-<link rel="apple-touch-icon" href="/assets/images/app-icon.png">
-
-{# Scripts #}
-{# Hydration stuff #}
-<script src="/assets/scripts/hydration-errors.js"></script>
-<link rel="stylesheet" href="/assets/styles/hydration-errors.css">
-<link rel="preconnect" href="https://cdn.jsdelivr.net">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
-
-{# Web Awesome #}
-<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
-
-<script type="module" src="/assets/scripts/theme-picker.js"></script>
-{# Preset Theme #}
-{% if forceTheme %}
-<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme }}.css" render="blocking" fetchpriority="high" />
-{% else %}
-<noscript><link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high" /></noscript>
-<script>
-{
-	let preset = localStorage.presetTheme ?? 'default';
-	let script = document.currentScript;
-	script.insertAdjacentHTML('beforebegin', `<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/${ preset }.css" render="blocking" fetchpriority="high" />`);
-}
-</script>
-<script type="module" src="/assets/scripts/preset-theme-picker.js"></script>
-{% endif %}
-
-<link rel="stylesheet" href="/dist/styles/webawesome.css" />
-<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
-<link rel="stylesheet" href="/dist/styles/forms.css" />
--- a/docs/_includes/import-stylesheet-code.md.njk
+++ b/docs/_includes/import-stylesheet-code.md.njk
@@ -1,18 +0,0 @@
-<wa-tab-group class="import-stylesheet-code">
-<wa-tab panel="html">In HTML</wa-tab>
-<wa-tab panel="css">In CSS</wa-tab>
-<wa-tab-panel name="html">
-
-Add the following code to the `<head>` of your page:
-```html
-<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
-```
-</wa-tab-panel>
-<wa-tab-panel name="css">
-
-Add the following code at the top of your CSS file:
-```css
-@import url('{% cdnUrl stylesheet %}');
-```
-</wa-tab-panel>
-</wa-tab-group>
--- a/docs/_includes/page-card.njk
+++ b/docs/_includes/page-card.njk
@@ -1,13 +0,0 @@
-{%- if not page.data.unlisted -%}
-<a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
-	<wa-card with-header>
-		<div slot="header">
-		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
-		</div>
-		<span class="page-name">{{ page.data.title }}</span>
-		{% if pageSubtitle -%}
-		<div class="wa-caption-s">{{ pageSubtitle }}</div>
-		{%- endif %}
-	</wa-card>
-</a>
-{% endif %}
--- a/docs/_includes/page-demo.njk
+++ b/docs/_includes/page-demo.njk
@@ -1,5 +1,5 @@
 <div id="page_slots_demo">
-<link rel="stylesheet" href="./demo.css">
+<link rel="stylesheet" href="/assets/examples/page-demo/demo.css">
 {% set slots = components.page.slots %}

 <fieldset id="page_slots_fieldset">
@@ -22,5 +22,5 @@

 <script type="module">
  const cacheBust = new Date().toString()
-  import(`./demo.js?${cacheBust}`)
+  import(`/assets/examples/page-demo/demo.js?${cacheBust}`)
 </script>
--- a/docs/_includes/preset-theme-selector.njk
+++ b/docs/_includes/preset-theme-selector.njk
@@ -1,9 +1,18 @@
 {# Preset theme selector #}
-<wa-select appearance="filled" size="small" value="default" pill class="preset-theme-selector">
-  <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
-  {% for theme in collections.theme | sort %}
-    <wa-option value="{{ theme.page.fileSlug }}"{{ ' data-alpha="remove"' if theme.noAlpha }}>
-      {{ theme.data.title }}
-    </wa-option>
-  {% endfor %}
-</wa-select>
+<wa-dropdown id="preset-theme-selector">
+  <wa-button slot="trigger" appearance="filled" size="small" pill caret>
+    <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
+    <span id="preset-theme-selector__text">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 data-alpha="remove" type="checkbox" value="fa">Font Awesome</wa-menu-item>
+    <wa-menu-item data-alpha="remove" type="checkbox" value="active">Active</wa-menu-item>
+    <wa-menu-item data-alpha="remove" type="checkbox" value="brutalist">Brutalism</wa-menu-item>
+    <wa-menu-item data-alpha="remove" type="checkbox" value="glassy">Glassy</wa-menu-item>
+    <wa-menu-item data-alpha="remove" type="checkbox" value="migration">Migration</wa-menu-item>
+    <wa-menu-item data-alpha="remove" type="checkbox" value="playful">Playful</wa-menu-item>
+    <wa-menu-item data-alpha="remove" type="checkbox" value="premium">Premium</wa-menu-item>
+  </wa-menu>
+</wa-dropdown>
--- a/docs/_includes/sidebar-group.njk
+++ b/docs/_includes/sidebar-group.njk
@@ -1,22 +0,0 @@
-{# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
-{% if collections[tag] -%}
-  {% set groupUrl %}/docs/{{ tag }}/{% endset %}
-  <wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
-    <h2 slot="summary">
-      {% if groupUrl | getCollectionItemFromUrl %}
-        <a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
-          <wa-icon name="grid-2"></wa-icon>
-        </a>
-      {% else %}
-        {{ title or (tag | capitalize) }}
-      {% endif %}
-    </h2>
-    <ul>
-      {% for page in collections[tag] | sort %}
-        {% if not page.data.parent -%}
-          {% include 'sidebar-link.njk' %}
-        {%- endif %}
-      {% endfor %}
-    </ul>
-  </wa-details>
-{%- endif %}
--- a/docs/_includes/sidebar-link.njk
+++ b/docs/_includes/sidebar-link.njk
@@ -1,16 +0,0 @@
-{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
-	<li>
-		<a href="{{ page.url }}">{{ page.data.title }}</a>
-		{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
-		{% if page.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
-
-		{% set children = page.data.children %}
-		{% if children.length > 0 %}
-			<ul>
-				{% for page in children %}
-					{% include 'sidebar-link.njk' %}
-				{% endfor %}
-			</ul>
-		{% endif %}
-	</li>
-{%- endif %}
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -3,6 +3,7 @@
 <ul>
  <li><a href="/docs/installation">Installation</a></li>
  <li><a href="/docs/usage">Usage</a></li>
+  <li><a href="/docs/themes">Themes</a></li>
  <li><a href="/docs/customizing">Customizing</a></li>
  <li><a href="/docs/form-controls">Form Controls</a></li>
  <li><a href="/docs/localization">Localization</a></li>
@@ -16,18 +17,134 @@
  <li><a href="/docs/resources/accessibility">Accessibility</a></li>
  <li><a href="/docs/resources/contributing">Contributing</a></li>
  <li><a href="/docs/resources/changelog">Changelog</a></li>
-  <li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
 </ul>

-{% for tag, title in {
-  'themes': 'Themes',
-  'components': 'Components',
-  'native': 'Native Styles',
-  'utilities': 'Style Utilities',
-  'layout': 'Layout',
-  'patterns': 'Patterns',
-  'palettes': 'Color Palettes',
-  'tokens': 'Design Tokens'
-} %}
-  {% include 'sidebar-group.njk' %}
-{% endfor %}
+{# Components #}
+<wa-details{{ ' open' if '/components/' in page.url }}>
+  <h2 slot=summary>
+    <a href="/docs/components/" title="Overview">Components
+      <wa-icon name="grid-2"></wa-icon>
+    </a>
+  </h2>
+
+  <ul>
+    {% for component in collections.component | sort %}
+    {% if not component.data.parent and not (isAlpha and component.data.isAlpha) %}
+    <li>
+      <a href="/docs/components/{{ component.fileSlug }}">{{ component.data.title }}</a>
+
+      {% if components[component.fileSlug].status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
+      {% if component.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
+      <ul>
+      {% for child in collections.component | sort %}
+        {% if child.data.parent == component.fileSlug and not (isAlpha and child.data.isAlpha) %}
+          <li>
+            <a href="/docs/components/{{ child.fileSlug }}">{{ child.data.title }}</a>
+          </li>
+        {% endif %}
+      {% endfor %}
+      </ul>
+    </li>
+    {% endif %}
+    {% endfor %}
+  </ul>
+</wa-details>
+
+<wa-details{{ ' open' if '/natives/' in page.url }}>
+  <h2 slot=summary>
+    <a href="/docs/natives/" title="Overview">Natives
+      <wa-icon name="grid-2"></wa-icon>
+    </a>
+  </h2>
+  <ul>
+    {% for page in collections.natives | sort %}
+    <li>
+      <a href="/docs/natives/{{ page.fileSlug }}">{{ page.data.title }}</a>
+    </li>
+    {% endfor %}
+  </ul>
+</wa-details>
+
+{# Layout #}
+{% if not isAlpha %}
+<h2>
+  <a href="/docs/layout" title="Overview">Layout
+    <wa-icon name="grid-2"></wa-icon>
+  </a>
+</h2>
+<ul>
+  <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>
+{% endif %}
+
+{# Patterns #}
+{% if not isAlpha %}
+<h2>Patterns</h2>
+<ul>
+  <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-summary">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>
+{% endif %}
+
+{# Theming #}
+<h2>
+  <a href="/docs/theming" title="Overview">Theming
+    <wa-icon name="grid-2"></wa-icon>
+  </a>
+</h2>
+<ul>
+  <li>
+    <a href="/docs/theming/color">Color</a>
+  </li>
+  <li>
+    <a href="/docs/theming/typography">Typography</a>
+  </li>
+  <li>
+    <a href="/docs/theming/space">Space</a>
+  </li>
+  <li>
+    <a href="/docs/theming/borders">Borders</a>
+  </li>
+  <li>
+    <a href="/docs/theming/focus">Focus</a>
+  </li>
+  <li>
+    <a href="/docs/theming/shadows">Shadows</a>
+  </li>
+  <li>
+    <a href="/docs/theming/transitions">Transitions</a>
+  </li>
+  <li>
+    <a href="/docs/theming/component-groups">Component Groups</a>
+  </li>
+</ul>
+
+{# Style Utilities #}
+{% if not isAlpha %}
+<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>
+{% endif %}
--- a/docs/_includes/status.njk
+++ b/docs/_includes/status.njk
@@ -1,25 +0,0 @@
-{% if since -%}
-	<wa-badge variant="neutral">Since {{ since }}</wa-badge>
-{% endif -%}
-
-{%- if status %}
-	{%- if status == "wip" %}
-	<wa-badge variant="danger">
-		<wa-icon name="pickaxe"></wa-icon>
-		Work In Progress
-	</wa-badge>
-	{%- elif status == "experimental" %}
-	<wa-badge variant="warning">
-		<wa-icon name="flask"></wa-icon>
-		Experimental
-	</wa-badge>
-	{%- elif status == "stable" %}
-	<wa-badge variant="brand">Stable</wa-badge>
-	{%- else %}
-	<wa-badge>{{ status}}</wa-badge>
-	{%- endif -%}
-{%- endif %}
-
-{%- if isPro %}
-	<wa-badge class="pro">PRO</wa-badge>
-{%- endif -%}
--- a/docs/_includes/svgs/palette.njk
+++ b/docs/_includes/svgs/palette.njk
@@ -1,31 +0,0 @@
-{% set paletteId = palette.fileSlug or page.fileSlug %}
-{% set suffixes = ['-80', '', '-20'] %}
-{% set width = 20 %}
-{% set height = 12 %}
-{% set height_core = 20 %}
-{% set gap_x = 4 %}
-{% set gap_y = 4 %}
-
-{% set total_width = (width + gap_x) * hues|length %}
-{% set total_height = (height + gap_y) * suffixes|length + (height_core - height) %}
-<svg viewBox="0 0 {{ total_width }} {{ total_height }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
-<style>
-	@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
-	.palette-icon {
-		height: 8ch;
-	}
-</style>
-
-{% for hue in hues -%}
-  {% set hueIndex = loop.index0 %}
-  {% set y = 0 %}
-  {% for suffix in suffixes -%}
-    {% set swatch_height = height if suffix else height_core %}
-
-    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ y }}"
-	      width="{{ width }}" height="{{ swatch_height }}"
-	      fill="var(--wa-color-{{ hue }}{{ suffix }})" rx="2" />
-	{% set y = y + swatch_height + gap_y %}
-  {%- endfor %}
-{% endfor %}
-</svg>
--- a/docs/_includes/svgs/slider.njk
+++ b/docs/_includes/svgs/slider.njk
--- a/docs/_includes/svgs/theme-color.njk
+++ b/docs/_includes/svgs/theme-color.njk
@@ -1,24 +0,0 @@
-{% set themeId = theme.fileSlug %}
-
-<div>
-  <template shadowrootmode="open">
-    <link rel="stylesheet" href="/dist/styles/utilities.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/color.css">
-    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-    <div class="theme-color-icon wa-theme-{{ themeId }}">
-      <div class="wa-brand wa-accent">A</div>
-      <div class="wa-brand wa-outlined">A</div>
-      <div class="wa-brand wa-filled">A</div>
-      <div class="wa-brand wa-plain">A</div>
-      {# <div class="wa-danger wa-outlined wa-filled"><wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon></div> #}
-
-      <div class="wa-neutral wa-accent">A</div>
-      <div class="wa-neutral wa-outlined">A</div>
-      <div class="wa-neutral wa-filled">A</div>
-      <div class="wa-neutral wa-plain">A</div>
-      {# <div class="wa-warning wa-outlined wa-filled"><wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon></div> #}
-    </div>
-  </template>
-</div>
--- a/docs/_includes/svgs/theme-typography.njk
+++ b/docs/_includes/svgs/theme-typography.njk
@@ -1,16 +0,0 @@
-{% set themeId = theme.fileSlug %}
-
-<div>
-  <template shadowrootmode="open">
-    <link rel="stylesheet" href="/dist/styles/native/content.css">
-    <link rel="stylesheet" href="/dist/styles/native/blockquote.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/typography.css">
-    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-    <div class="theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
-      <h3>Title</h3>
-      <p>Body text</p>
-    </div>
-  </template>
-</div>
--- a/docs/_includes/svgs/theming/borders.njk
+++ b/docs/_includes/svgs/theming/borders.njk
--- a/docs/_includes/svgs/theming/color.njk
+++ b/docs/_includes/svgs/theming/color.njk
@@ -2,7 +2,7 @@
 <path fill-rule="evenodd" clip-rule="evenodd" d="M48.8665 59.1993L33.7329 33H64C63.8352 38.2705 62.3694 43.4244 59.7264 48C57.0833 52.5756 53.3507 56.4213 48.8665 59.1993Z" fill="var(--wa-color-green-70)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M32 64C26.714 64 21.5155 62.6919 16.8665 60.1993L32 34L47.1336 60.1993C42.4845 62.6919 37.286 64 32 64Z" fill="var(--wa-color-blue-60)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 48C1.63063 43.4244 0.164839 38.2706 0 33L30.2671 33L15.1336 59.1993C10.6493 56.4213 6.91666 52.5756 4.27365 48Z" fill="var(--wa-color-indigo-60)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-purple-60)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-violet-60)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M32 30L16.8665 3.80072C21.5155 1.30813 26.714 0 32 0C37.286 0 42.4845 1.30813 47.1336 3.80072L32 30Z" fill="var(--wa-color-red-60)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M33.7329 31L48.8665 4.80072C53.3507 7.57868 57.0833 11.4244 59.7264 16C62.3694 20.5756 63.8352 25.7294 64 31L33.7329 31Z" fill="var(--wa-color-yellow-80)"/>
 </svg>
--- a/docs/_includes/svgs/theming/component-groups.njk
+++ b/docs/_includes/svgs/theming/component-groups.njk
--- a/docs/_includes/svgs/theming/focus.njk
+++ b/docs/_includes/svgs/theming/focus.njk
--- a/docs/_includes/svgs/theming/shadows.njk
+++ b/docs/_includes/svgs/theming/shadows.njk
--- a/docs/_includes/svgs/theming/space.njk
+++ b/docs/_includes/svgs/theming/space.njk
--- a/docs/_includes/svgs/theming/transitions.njk
+++ b/docs/_includes/svgs/theming/transitions.njk
--- a/docs/_includes/svgs/theming/typography.njk
+++ b/docs/_includes/svgs/theming/typography.njk
--- a/docs/_includes/theme-showcase.njk
+++ b/docs/_includes/theme-showcase.njk
@@ -1,144 +0,0 @@
-<div class="showcase-examples-wrapper" aria-hidden="true" data-no-outline>
-  <div class="showcase-examples">
-    <wa-card with-header with-footer>
-      <div slot="header" class="wa-split">
-        <h3 class="wa-heading-m">Your Cart</h3>
-        <wa-icon-button name="xmark" tabindex="-1"></wa-icon-button>
-      </div>
-      <div class="wa-stack wa-gap-xl">
-        <div class="wa-flank">
-          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95);">
-            <wa-icon slot="icon" name="sword-laser" family="duotone" style="font-size: 1.5em;"></wa-icon>
-          </wa-avatar>
-          <div class="wa-stack wa-gap-2xs">
-            <div class="wa-split wa-gap-2xs">
-              <strong>Initiate Saber</strong>
-              <strong>$179.99</strong>
-            </div>
-            <div class="wa-split wa-gap-2xs wa-caption-m">
-              <span>Green</span>
-              <a href="#" tabindex="-1">Remove</a>
-            </div>
-          </div>
-        </div>
-        <wa-divider></wa-divider>
-        <div class="wa-flank">
-          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-95);">
-            <wa-icon slot="icon" name="robot-astromech" family="duotone" style="font-size: 1.5em;"></wa-icon>
-          </wa-avatar>
-          <div class="wa-stack wa-gap-2xs">
-            <div class="wa-split wa-gap-2xs">
-              <strong>Repair Droid</strong>
-              <strong>$3,049.99</strong>
-            </div>
-            <div class="wa-split wa-gap-2xs wa-caption-m">
-              <span>R-series</span>
-              <a href="#" tabindex="-1">Remove</a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div slot="footer" class="wa-stack">
-        <div class="wa-split">
-          <strong>Subtotal</strong>
-          <strong>$3,229.98</strong>
-        </div>
-        <span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
-        <wa-button tabindex="-1" variant="brand">
-          <wa-icon slot="prefix" name="shopping-bag"></wa-icon>
-          Checkout
-        </wa-button>
-      </div>
-    </wa-card>
-    <wa-card>
-      <wa-avatar shape="rounded" style="--size: 1.9lh; float: left; margin-right: var(--wa-space-m);">
-        <wa-icon slot="icon" name="hat-wizard" family="duotone" style="font-size: 1.75em;"></wa-icon>
-      </wa-avatar>
-      <p class="wa-body-l" style="margin: 0;">&ldquo;All we have to decide is what to do with the time that is given to us. There are other forces at work in this world, Frodo, besides the will of evil.&rdquo;</p>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <h3 class="wa-heading-m">Sign In</h3>
-        <wa-input tabindex="-1" label="Email" placeholder="ddjarin@mandalore.gov">
-          <wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
-        </wa-input>
-        <wa-input tabindex="-1" label="Password" type="password">
-          <wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
-        </wa-input>
-        <wa-button tabindex="-1" variant="brand">Sign In</wa-button>
-        <a href="#" tabindex="-1" class="wa-body-s">I forgot my password</a>
-      </div>
-    </wa-card>
-    <wa-card with-footer>
-      <div class="wa-stack">
-        <div class="wa-split">
-          <h3 class="wa-heading-m">To-Do</h3>
-          <wa-icon-button tabindex="-1" name="plus" label="Add task"></wa-icon-button>
-        </div>
-        <wa-checkbox tabindex="-1" checked>Umbrella for Adelard</wa-checkbox>
-        <wa-checkbox tabindex="-1" checked>Waste-paper basket for Dora</wa-checkbox>
-        <wa-checkbox tabindex="-1" checked>Pen and ink for Milo</wa-checkbox>
-        <wa-checkbox tabindex="-1">Mirror for Angelica</wa-checkbox>
-        <wa-checkbox tabindex="-1">Silver spoons for Lobelia</wa-checkbox>
-      </div>
-      <div slot="footer">
-        <a href="" tabindex="-1">View all completed</a>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-frame wa-border-radius-m" style="align-self: center; max-inline-size: 25ch;">
-          <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="Album art">
-        </div>
-        <div class="wa-flank:end wa-align-items-start">
-          <div class="wa-stack wa-gap-3xs">
-            <div class="wa-cluster wa-gap-xs" style="height: 2.25em;">
-              <strong>The Stone Troll</strong>
-              <small><wa-badge variant="neutral" appearance="filled">E</wa-badge></small>
-            </div>
-            <span class="wa-caption-m">Samwise G</span>
-          </div>
-          <wa-icon-button tabindex="-1" name="ellipsis" label="Options"></wa-icon-button>
-        </div>
-        <div class="wa-stack wa-gap-2xs">
-          <wa-progress-bar value="34" style="height: 0.5em"></wa-progress-bar>
-          <div class="wa-split">
-            <span class="wa-caption-xs">1:01</span>
-            <span class="wa-caption-xs">-1:58</span>
-          </div>
-        </div>
-        <div class="wa-grid wa-align-items-center" style="--min-column-size: 1em; justify-items: center;">
-          <wa-icon-button tabindex="-1" name="backward" label="Skip backward"></wa-icon-button>
-          <wa-icon-button tabindex="-1" name="pause" style="font-size: var(--wa-font-size-2xl);" label="Pause"></wa-icon-button>
-          <wa-icon-button tabindex="-1" name="forward" label="Skip forward"></wa-icon-button>
-        </div>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <h3 class="wa-heading-m">Chalmun's Spaceport Cantina</h3>
-        <div class="wa-cluster wa-gap-xs">
-          <wa-rating value="4.6" read-only></wa-rating>
-          <strong>4.6</strong>
-          <span>(419 reviews)</span>
-        </div>
-        <div class="wa-cluster wa-gap-xs">
-          <div class="wa-cluster wa-gap-3xs">
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-          </div>
-          <span class="wa-caption-m">&bull;</span>
-          <wa-tag size="small">Cocktail Bar</wa-tag>
-          <wa-tag size="small">Gastropub</wa-tag>
-          <wa-tag size="small">Local Fare</wa-tag>
-          <wa-tag size="small">Gluten Free</wa-tag>
-        </div>
-        <div class="wa-flank wa-gap-xs">
-          <wa-icon name="location-dot"></wa-icon>
-          <a href="#" class="wa-caption-m" tabindex="-1">Mos Eisley, Tatooine</a>
-        </div>
-      </div>
-    </wa-card>
-  </div>
-</div>
--- a/docs/_includes/visual-tests/alignment.njk
+++ b/docs/_includes/visual-tests/alignment.njk
@@ -1,77 +0,0 @@
-```html {.example}
-<style>
-  div.alignment {
-    background: linear-gradient(to bottom, lightblue, lightblue 1px, transparent 1px, transparent), linear-gradient(to top, lightblue, lightblue 1px, transparent 1px, transparent);
-    position: relative;
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-  }
-  div.alignment::after {
-    content: '';
-    position: absolute;
-    top: calc(50% - 0.5px);
-    width: 100%;
-    height: 1px;
-    background-color: red;
-  }
-</style>
-<div class="wa-stack wa-gap-xl">
-  <div class="alignment">
-    <wa-switch size="small">Switch</wa-switch>
-    <wa-checkbox size="small">Checkbox</wa-checkbox>
-    <wa-radio value="1" size="small">Radio</wa-radio>
-  </div>
-  <div class="alignment">
-    <wa-switch>Switch</wa-switch>
-    <wa-checkbox>Checkbox</wa-checkbox>
-    <wa-radio value="1">Radio</wa-radio>
-  </div>
-  <div class="alignment">
-    <wa-switch size="large">Switch</wa-switch>
-    <wa-checkbox size="large">Checkbox</wa-checkbox>
-    <wa-radio value="1" size="large">Radio</wa-radio>
-  </div>
-  <div class="alignment">
-    <wa-textarea placeholder="textarea" size="small" rows="1"></wa-textarea>
-    <wa-input placeholder="input" size="small"></wa-input>
-    <wa-select size="small" value="1" multiple>
-      <wa-option value="1">Option</wa-option>
-    </wa-select>
-    <wa-color-picker size="small"></wa-color-picker>
-    <wa-button size="small">Button</wa-button>
-  </div>
-  <div class="alignment">
-    <wa-textarea placeholder="textarea" size="medium" rows="1"></wa-textarea>
-    <wa-input placeholder="input" size="medium"></wa-input>
-    <wa-select size="medium" value="1" multiple>
-      <wa-option value="1">Option</wa-option>
-    </wa-select>
-    <wa-color-picker size="medium"></wa-color-picker>
-    <wa-button size="medium">Button</wa-button>
-  </div>
-  <div class="alignment">
-    <wa-textarea placeholder="textarea" size="large" rows="1"></wa-textarea>
-    <wa-input placeholder="input" size="large"></wa-input>
-    <wa-select size="large" value="1" multiple>
-      <wa-option value="1">Option</wa-option>
-    </wa-select>
-    <wa-color-picker size="large"></wa-color-picker>
-    <wa-button size="large">Button</wa-button>
-  </div>
-  <div class="alignment">
-    <wa-badge>Badge</wa-badge>
-    <code>Code</code>
-    <kbd>Keyboard</kbd>
-    <ins>Inserted</ins>
-    <del>Deleted</del>
-    <mark>Highlighted</mark>
-  </div>
-  <div class="alignment">
-    <wa-avatar></wa-avatar>
-    <wa-rating></wa-rating>
-    <wa-icon-button name="gear" label="Settings"></wa-icon-button>
-    <wa-spinner></wa-spinner>
-  </div>
-</div>
-```
--- a/docs/_includes/visual-tests/appearance.njk
+++ b/docs/_includes/visual-tests/appearance.njk
@@ -1,799 +0,0 @@
-<h3>Badge</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>appearance=""</code></th>
-    <th><code>.wa-[appearance]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>accent</code> + <code>outlined</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" appearance="accent outlined">Brand</wa-badge>
-          <wa-badge variant="neutral" appearance="accent outlined">Neutral</wa-badge>
-          <wa-badge variant="success" appearance="accent outlined">Success</wa-badge>
-          <wa-badge variant="warning" appearance="accent outlined">Warning</wa-badge>
-          <wa-badge variant="danger" appearance="accent outlined">Danger</wa-badge>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" class="wa-accent wa-outlined">Brand</wa-badge>
-          <wa-badge variant="neutral" class="wa-accent wa-outlined">Neutral</wa-badge>
-          <wa-badge variant="success" class="wa-accent wa-outlined">Success</wa-badge>
-          <wa-badge variant="warning" class="wa-accent wa-outlined">Warning</wa-badge>
-          <wa-badge variant="danger" class="wa-accent wa-outlined">Danger</wa-badge>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>accent</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" appearance="accent">Brand</wa-badge>
-          <wa-badge variant="neutral" appearance="accent">Neutral</wa-badge>
-          <wa-badge variant="success" appearance="accent">Success</wa-badge>
-          <wa-badge variant="warning" appearance="accent">Warning</wa-badge>
-          <wa-badge variant="danger" appearance="accent">Danger</wa-badge>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" class="wa-accent">Brand</wa-badge>
-          <wa-badge variant="neutral" class="wa-accent">Neutral</wa-badge>
-          <wa-badge variant="success" class="wa-accent">Success</wa-badge>
-          <wa-badge variant="warning" class="wa-accent">Warning</wa-badge>
-          <wa-badge variant="danger" class="wa-accent">Danger</wa-badge>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>filled</code> + <code>outlined</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" appearance="filled outlined">Brand</wa-badge>
-          <wa-badge variant="neutral" appearance="filled outlined">Neutral</wa-badge>
-          <wa-badge variant="success" appearance="filled outlined">Success</wa-badge>
-          <wa-badge variant="warning" appearance="filled outlined">Warning</wa-badge>
-          <wa-badge variant="danger" appearance="filled outlined">Danger</wa-badge>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" class="wa-filled wa-outlined">Brand</wa-badge>
-          <wa-badge variant="neutral" class="wa-filled wa-outlined">Neutral</wa-badge>
-          <wa-badge variant="success" class="wa-filled wa-outlined">Success</wa-badge>
-          <wa-badge variant="warning" class="wa-filled wa-outlined">Warning</wa-badge>
-          <wa-badge variant="danger" class="wa-filled wa-outlined">Danger</wa-badge>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>filled</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" appearance="filled">Brand</wa-badge>
-          <wa-badge variant="neutral" appearance="filled">Neutral</wa-badge>
-          <wa-badge variant="success" appearance="filled">Success</wa-badge>
-          <wa-badge variant="warning" appearance="filled">Warning</wa-badge>
-          <wa-badge variant="danger" appearance="filled">Danger</wa-badge>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" class="wa-filled">Brand</wa-badge>
-          <wa-badge variant="neutral" class="wa-filled">Neutral</wa-badge>
-          <wa-badge variant="success" class="wa-filled">Success</wa-badge>
-          <wa-badge variant="warning" class="wa-filled">Warning</wa-badge>
-          <wa-badge variant="danger" class="wa-filled">Danger</wa-badge>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>outlined</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" appearance="outlined">Brand</wa-badge>
-          <wa-badge variant="neutral" appearance="outlined">Neutral</wa-badge>
-          <wa-badge variant="success" appearance="outlined">Success</wa-badge>
-          <wa-badge variant="warning" appearance="outlined">Warning</wa-badge>
-          <wa-badge variant="danger" appearance="outlined">Danger</wa-badge>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" class="wa-outlined">Brand</wa-badge>
-          <wa-badge variant="neutral" class="wa-outlined">Neutral</wa-badge>
-          <wa-badge variant="success" class="wa-outlined">Success</wa-badge>
-          <wa-badge variant="warning" class="wa-outlined">Warning</wa-badge>
-          <wa-badge variant="danger" class="wa-outlined">Danger</wa-badge>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>plain</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" appearance="plain">Brand</wa-badge>
-          <wa-badge variant="neutral" appearance="plain">Neutral</wa-badge>
-          <wa-badge variant="success" appearance="plain">Success</wa-badge>
-          <wa-badge variant="warning" appearance="plain">Warning</wa-badge>
-          <wa-badge variant="danger" appearance="plain">Danger</wa-badge>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" class="wa-plain">Brand</wa-badge>
-          <wa-badge variant="neutral" class="wa-plain">Neutral</wa-badge>
-          <wa-badge variant="success" class="wa-plain">Success</wa-badge>
-          <wa-badge variant="warning" class="wa-plain">Warning</wa-badge>
-          <wa-badge variant="danger" class="wa-plain">Danger</wa-badge>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Button</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>appearance=""</code></th>
-    <th><code>.wa-[appearance]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>accent</code> + <code>outlined</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="accent outlined">Brand</wa-button>
-          <wa-button variant="neutral" appearance="accent outlined">Neutral</wa-button>
-          <wa-button variant="success" appearance="accent outlined">Success</wa-button>
-          <wa-button variant="warning" appearance="accent outlined">Warning</wa-button>
-          <wa-button variant="danger" appearance="accent outlined">Danger</wa-button>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" class="wa-accent wa-outlined">Brand</wa-button>
-          <wa-button variant="neutral" class="wa-accent wa-outlined">Neutral</wa-button>
-          <wa-button variant="success" class="wa-accent wa-outlined">Success</wa-button>
-          <wa-button variant="warning" class="wa-accent wa-outlined">Warning</wa-button>
-          <wa-button variant="danger" class="wa-accent wa-outlined">Danger</wa-button>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>accent</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="accent">Brand</wa-button>
-          <wa-button variant="neutral" appearance="accent">Neutral</wa-button>
-          <wa-button variant="success" appearance="accent">Success</wa-button>
-          <wa-button variant="warning" appearance="accent">Warning</wa-button>
-          <wa-button variant="danger" appearance="accent">Danger</wa-button>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" class="wa-accent">Brand</wa-button>
-          <wa-button variant="neutral" class="wa-accent">Neutral</wa-button>
-          <wa-button variant="success" class="wa-accent">Success</wa-button>
-          <wa-button variant="warning" class="wa-accent">Warning</wa-button>
-          <wa-button variant="danger" class="wa-accent">Danger</wa-button>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>filled</code> + <code>outlined</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="filled outlined">Brand</wa-button>
-          <wa-button variant="neutral" appearance="filled outlined">Neutral</wa-button>
-          <wa-button variant="success" appearance="filled outlined">Success</wa-button>
-          <wa-button variant="warning" appearance="filled outlined">Warning</wa-button>
-          <wa-button variant="danger" appearance="filled outlined">Danger</wa-button>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" class="wa-filled wa-outlined">Brand</wa-button>
-          <wa-button variant="neutral" class="wa-filled wa-outlined">Neutral</wa-button>
-          <wa-button variant="success" class="wa-filled wa-outlined">Success</wa-button>
-          <wa-button variant="warning" class="wa-filled wa-outlined">Warning</wa-button>
-          <wa-button variant="danger" class="wa-filled wa-outlined">Danger</wa-button>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>filled</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="filled">Brand</wa-button>
-          <wa-button variant="neutral" appearance="filled">Neutral</wa-button>
-          <wa-button variant="success" appearance="filled">Success</wa-button>
-          <wa-button variant="warning" appearance="filled">Warning</wa-button>
-          <wa-button variant="danger" appearance="filled">Danger</wa-button>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" class="wa-filled">Brand</wa-button>
-          <wa-button variant="neutral" class="wa-filled">Neutral</wa-button>
-          <wa-button variant="success" class="wa-filled">Success</wa-button>
-          <wa-button variant="warning" class="wa-filled">Warning</wa-button>
-          <wa-button variant="danger" class="wa-filled">Danger</wa-button>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>outlined</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="outlined">Brand</wa-button>
-          <wa-button variant="neutral" appearance="outlined">Neutral</wa-button>
-          <wa-button variant="success" appearance="outlined">Success</wa-button>
-          <wa-button variant="warning" appearance="outlined">Warning</wa-button>
-          <wa-button variant="danger" appearance="outlined">Danger</wa-button>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" class="wa-outlined">Brand</wa-button>
-          <wa-button variant="neutral" class="wa-outlined">Neutral</wa-button>
-          <wa-button variant="success" class="wa-outlined">Success</wa-button>
-          <wa-button variant="warning" class="wa-outlined">Warning</wa-button>
-          <wa-button variant="danger" class="wa-outlined">Danger</wa-button>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>plain</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="plain">Brand</wa-button>
-          <wa-button variant="neutral" appearance="plain">Neutral</wa-button>
-          <wa-button variant="success" appearance="plain">Success</wa-button>
-          <wa-button variant="warning" appearance="plain">Warning</wa-button>
-          <wa-button variant="danger" appearance="plain">Danger</wa-button>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" class="wa-plain">Brand</wa-button>
-          <wa-button variant="neutral" class="wa-plain">Neutral</wa-button>
-          <wa-button variant="success" class="wa-plain">Success</wa-button>
-          <wa-button variant="warning" class="wa-plain">Warning</wa-button>
-          <wa-button variant="danger" class="wa-plain">Danger</wa-button>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Callout</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>appearance=""</code></th>
-    <th><code>.wa-[appearance]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>accent</code> + <code>outlined</code></th>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Brand
-          </wa-callout>
-          <wa-callout variant="neutral" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Neutral
-          </wa-callout>
-          <wa-callout variant="success" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Success
-          </wa-callout>
-          <wa-callout variant="warning" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Warning
-          </wa-callout>
-          <wa-callout variant="danger" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Danger
-          </wa-callout>
-        </div>
-      </td>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" class="wa-accent wa-outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Brand
-          </wa-callout>
-          <wa-callout variant="neutral" class="wa-accent wa-outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Neutral
-          </wa-callout>
-          <wa-callout variant="success" class="wa-accent wa-outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Success
-          </wa-callout>
-          <wa-callout variant="warning" class="wa-accent wa-outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Warning
-          </wa-callout>
-          <wa-callout variant="danger" class="wa-accent wa-outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Danger
-          </wa-callout>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>accent</code></th>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" appearance="accent">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Brand
-          </wa-callout>
-          <wa-callout variant="neutral" appearance="accent">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Neutral
-          </wa-callout>
-          <wa-callout variant="success" appearance="accent">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Success
-          </wa-callout>
-          <wa-callout variant="warning" appearance="accent">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Warning
-          </wa-callout>
-          <wa-callout variant="danger" appearance="accent">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Danger
-          </wa-callout>
-        </div>
-      </td>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" class="wa-accent">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Brand
-          </wa-callout>
-          <wa-callout variant="neutral" class="wa-accent">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Neutral
-          </wa-callout>
-          <wa-callout variant="success" class="wa-accent">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Success
-          </wa-callout>
-          <wa-callout variant="warning" class="wa-accent">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Warning
-          </wa-callout>
-          <wa-callout variant="danger" class="wa-accent">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Danger
-          </wa-callout>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>filled</code> + <code>outlined</code></th>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Brand
-          </wa-callout>
-          <wa-callout variant="neutral" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Neutral
-          </wa-callout>
-          <wa-callout variant="success" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Success
-          </wa-callout>
-          <wa-callout variant="warning" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Warning
-          </wa-callout>
-          <wa-callout variant="danger" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Danger
-          </wa-callout>
-        </div>
-      </td>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" class="wa-filled wa-outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Brand
-          </wa-callout>
-          <wa-callout variant="neutral" class="wa-filled wa-outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Neutral
-          </wa-callout>
-          <wa-callout variant="success" class="wa-filled wa-outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Success
-          </wa-callout>
-          <wa-callout variant="warning" class="wa-filled wa-outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Warning
-          </wa-callout>
-          <wa-callout variant="danger" class="wa-filled wa-outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Danger
-          </wa-callout>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>filled</code></th>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" appearance="filled">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Brand
-          </wa-callout>
-          <wa-callout variant="neutral" appearance="filled">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Neutral
-          </wa-callout>
-          <wa-callout variant="success" appearance="filled">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Success
-          </wa-callout>
-          <wa-callout variant="warning" appearance="filled">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Warning
-          </wa-callout>
-          <wa-callout variant="danger" appearance="filled">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Danger
-          </wa-callout>
-        </div>
-      </td>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" class="wa-filled">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Brand
-          </wa-callout>
-          <wa-callout variant="neutral" class="wa-filled">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Neutral
-          </wa-callout>
-          <wa-callout variant="success" class="wa-filled">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Success
-          </wa-callout>
-          <wa-callout variant="warning" class="wa-filled">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Warning
-          </wa-callout>
-          <wa-callout variant="danger" class="wa-filled">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Danger
-          </wa-callout>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>outlined</code></th>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" appearance="outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Brand
-          </wa-callout>
-          <wa-callout variant="neutral" appearance="outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Neutral
-          </wa-callout>
-          <wa-callout variant="success" appearance="outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Success
-          </wa-callout>
-          <wa-callout variant="warning" appearance="outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Warning
-          </wa-callout>
-          <wa-callout variant="danger" appearance="outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Danger
-          </wa-callout>
-        </div>
-      </td>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" class="wa-outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Brand
-          </wa-callout>
-          <wa-callout variant="neutral" class="wa-outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Neutral
-          </wa-callout>
-          <wa-callout variant="success" class="wa-outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Success
-          </wa-callout>
-          <wa-callout variant="warning" class="wa-outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Warning
-          </wa-callout>
-          <wa-callout variant="danger" class="wa-outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Danger
-          </wa-callout>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>plain</code></th>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" appearance="plain">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Brand
-          </wa-callout>
-          <wa-callout variant="neutral" appearance="plain">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Neutral
-          </wa-callout>
-          <wa-callout variant="success" appearance="plain">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Success
-          </wa-callout>
-          <wa-callout variant="warning" appearance="plain">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Warning
-          </wa-callout>
-          <wa-callout variant="danger" appearance="plain">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Danger
-          </wa-callout>
-        </div>
-      </td>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" class="wa-plain">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Brand
-          </wa-callout>
-          <wa-callout variant="neutral" class="wa-plain">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Neutral
-          </wa-callout>
-          <wa-callout variant="success" class="wa-plain">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Success
-          </wa-callout>
-          <wa-callout variant="warning" class="wa-plain">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Warning
-          </wa-callout>
-          <wa-callout variant="danger" class="wa-plain">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Danger
-          </wa-callout>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Tag</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>appearance=""</code></th>
-    <th><code>.wa-[appearance]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>accent</code> + <code>outlined</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" appearance="accent outlined">Brand</wa-tag>
-          <wa-tag variant="neutral" appearance="accent outlined">Neutral</wa-tag>
-          <wa-tag variant="success" appearance="accent outlined">Success</wa-tag>
-          <wa-tag variant="warning" appearance="accent outlined">Warning</wa-tag>
-          <wa-tag variant="danger" appearance="accent outlined">Danger</wa-tag>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" class="wa-accent wa-outlined">Brand</wa-tag>
-          <wa-tag variant="neutral" class="wa-accent wa-outlined">Neutral</wa-tag>
-          <wa-tag variant="success" class="wa-accent wa-outlined">Success</wa-tag>
-          <wa-tag variant="warning" class="wa-accent wa-outlined">Warning</wa-tag>
-          <wa-tag variant="danger" class="wa-accent wa-outlined">Danger</wa-tag>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>accent</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" appearance="accent">Brand</wa-tag>
-          <wa-tag variant="neutral" appearance="accent">Neutral</wa-tag>
-          <wa-tag variant="success" appearance="accent">Success</wa-tag>
-          <wa-tag variant="warning" appearance="accent">Warning</wa-tag>
-          <wa-tag variant="danger" appearance="accent">Danger</wa-tag>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" class="wa-accent">Brand</wa-tag>
-          <wa-tag variant="neutral" class="wa-accent">Neutral</wa-tag>
-          <wa-tag variant="success" class="wa-accent">Success</wa-tag>
-          <wa-tag variant="warning" class="wa-accent">Warning</wa-tag>
-          <wa-tag variant="danger" class="wa-accent">Danger</wa-tag>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>filled</code> + <code>outlined</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" appearance="filled outlined">Brand</wa-tag>
-          <wa-tag variant="neutral" appearance="filled outlined">Neutral</wa-tag>
-          <wa-tag variant="success" appearance="filled outlined">Success</wa-tag>
-          <wa-tag variant="warning" appearance="filled outlined">Warning</wa-tag>
-          <wa-tag variant="danger" appearance="filled outlined">Danger</wa-tag>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" class="wa-filled wa-outlined">Brand</wa-tag>
-          <wa-tag variant="neutral" class="wa-filled wa-outlined">Neutral</wa-tag>
-          <wa-tag variant="success" class="wa-filled wa-outlined">Success</wa-tag>
-          <wa-tag variant="warning" class="wa-filled wa-outlined">Warning</wa-tag>
-          <wa-tag variant="danger" class="wa-filled wa-outlined">Danger</wa-tag>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>filled</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" appearance="filled">Brand</wa-tag>
-          <wa-tag variant="neutral" appearance="filled">Neutral</wa-tag>
-          <wa-tag variant="success" appearance="filled">Success</wa-tag>
-          <wa-tag variant="warning" appearance="filled">Warning</wa-tag>
-          <wa-tag variant="danger" appearance="filled">Danger</wa-tag>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" class="wa-filled">Brand</wa-tag>
-          <wa-tag variant="neutral" class="wa-filled">Neutral</wa-tag>
-          <wa-tag variant="success" class="wa-filled">Success</wa-tag>
-          <wa-tag variant="warning" class="wa-filled">Warning</wa-tag>
-          <wa-tag variant="danger" class="wa-filled">Danger</wa-tag>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>outlined</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" appearance="outlined">Brand</wa-tag>
-          <wa-tag variant="neutral" appearance="outlined">Neutral</wa-tag>
-          <wa-tag variant="success" appearance="outlined">Success</wa-tag>
-          <wa-tag variant="warning" appearance="outlined">Warning</wa-tag>
-          <wa-tag variant="danger" appearance="outlined">Danger</wa-tag>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" class="wa-outlined">Brand</wa-tag>
-          <wa-tag variant="neutral" class="wa-outlined">Neutral</wa-tag>
-          <wa-tag variant="success" class="wa-outlined">Success</wa-tag>
-          <wa-tag variant="warning" class="wa-outlined">Warning</wa-tag>
-          <wa-tag variant="danger" class="wa-outlined">Danger</wa-tag>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>plain</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" appearance="plain">Brand</wa-tag>
-          <wa-tag variant="neutral" appearance="plain">Neutral</wa-tag>
-          <wa-tag variant="success" appearance="plain">Success</wa-tag>
-          <wa-tag variant="warning" appearance="plain">Warning</wa-tag>
-          <wa-tag variant="danger" appearance="plain">Danger</wa-tag>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" class="wa-plain">Brand</wa-tag>
-          <wa-tag variant="neutral" class="wa-plain">Neutral</wa-tag>
-          <wa-tag variant="success" class="wa-plain">Success</wa-tag>
-          <wa-tag variant="warning" class="wa-plain">Warning</wa-tag>
-          <wa-tag variant="danger" class="wa-plain">Danger</wa-tag>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Form Controls</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>appearance=""</code></th>
-    <th><code>.wa-[appearance]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>outlined</code></th>
-      <td>
-        <div class="wa-stack">
-          <wa-input appearance="outlined" placeholder="Input"></wa-input>
-          <wa-select appearance="outlined" placeholder="Select">
-            <wa-option value="1">Option</wa-option>
-          </wa-select>
-          <wa-textarea appearance="outlined" placeholder="Textarea"></wa-textarea>
-        </div>
-      </td>
-      <td>
-        <div class="wa-stack">
-          <wa-input class="wa-outlined" placeholder="Input"></wa-input>
-          <wa-select class="wa-outlined" placeholder="Select">
-            <wa-option value="1">Option</wa-option>
-          </wa-select>
-          <wa-textarea class="wa-outlined" placeholder="Textarea"></wa-textarea>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>filled</code></th>
-      <td>
-        <div class="wa-stack">
-          <wa-input appearance="filled" placeholder="Input"></wa-input>
-          <wa-select appearance="filled" placeholder="Select">
-            <wa-option value="1">Option</wa-option>
-          </wa-select>
-          <wa-textarea appearance="filled" placeholder="Textarea"></wa-textarea>
-        </div>
-      </td>
-      <td>
-        <div class="wa-stack">
-          <wa-input class="wa-filled" placeholder="Input"></wa-input>
-          <wa-select class="wa-filled" placeholder="Select">
-            <wa-option value="1">Option</wa-option>
-          </wa-select>
-          <wa-textarea class="wa-filled" placeholder="Textarea"></wa-textarea>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
--- a/docs/_includes/visual-tests/color.njk
+++ b/docs/_includes/visual-tests/color.njk
@@ -1,698 +0,0 @@
-<h3>Badge</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>variant=""</code></th>
-    <th><code>.wa-[variant]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>brand</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" appearance="accent outlined">A+O</wa-badge>
-          <wa-badge variant="brand" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="brand" appearance="filled outlined">F+O</wa-badge>
-          <wa-badge variant="brand" appearance="filled">Filled</wa-badge>
-          <wa-badge variant="brand" appearance="outlined">Outlined</wa-badge>
-          <wa-badge variant="brand" appearance="plain">Plain</wa-badge>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-brand" appearance="accent outlined">A+O</wa-badge>
-          <wa-badge class="wa-brand" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-brand" appearance="filled outlined">F+O</wa-badge>
-          <wa-badge class="wa-brand" appearance="filled">Filled</wa-badge>
-          <wa-badge class="wa-brand" appearance="outlined">Outlined</wa-badge>
-          <wa-badge class="wa-brand" appearance="plain">Plain</wa-badge>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>neutral</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="neutral" appearance="accent outlined">A+O</wa-badge>
-          <wa-badge variant="neutral" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="neutral" appearance="filled outlined">F+O</wa-badge>
-          <wa-badge variant="neutral" appearance="filled">Filled</wa-badge>
-          <wa-badge variant="neutral" appearance="outlined">Outlined</wa-badge>
-          <wa-badge variant="neutral" appearance="plain">Plain</wa-badge>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-neutral" appearance="accent outlined">A+O</wa-badge>
-          <wa-badge class="wa-neutral" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-neutral" appearance="filled outlined">F+O</wa-badge>
-          <wa-badge class="wa-neutral" appearance="filled">Filled</wa-badge>
-          <wa-badge class="wa-neutral" appearance="outlined">Outlined</wa-badge>
-          <wa-badge class="wa-neutral" appearance="plain">Plain</wa-badge>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>success</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="success" appearance="accent outlined">A+O</wa-badge>
-          <wa-badge variant="success" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="success" appearance="filled outlined">F+O</wa-badge>
-          <wa-badge variant="success" appearance="filled">Filled</wa-badge>
-          <wa-badge variant="success" appearance="outlined">Outlined</wa-badge>
-          <wa-badge variant="success" appearance="plain">Plain</wa-badge>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-success" appearance="accent outlined">A+O</wa-badge>
-          <wa-badge class="wa-success" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-success" appearance="filled outlined">F+O</wa-badge>
-          <wa-badge class="wa-success" appearance="filled">Filled</wa-badge>
-          <wa-badge class="wa-success" appearance="outlined">Outlined</wa-badge>
-          <wa-badge class="wa-success" appearance="plain">Plain</wa-badge>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>warning</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="warning" appearance="accent outlined">A+O</wa-badge>
-          <wa-badge variant="warning" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="warning" appearance="filled outlined">F+O</wa-badge>
-          <wa-badge variant="warning" appearance="filled">Filled</wa-badge>
-          <wa-badge variant="warning" appearance="outlined">Outlined</wa-badge>
-          <wa-badge variant="warning" appearance="plain">Plain</wa-badge>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-warning" appearance="accent outlined">A+O</wa-badge>
-          <wa-badge class="wa-warning" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-warning" appearance="filled outlined">F+O</wa-badge>
-          <wa-badge class="wa-warning" appearance="filled">Filled</wa-badge>
-          <wa-badge class="wa-warning" appearance="outlined">Outlined</wa-badge>
-          <wa-badge class="wa-warning" appearance="plain">Plain</wa-badge>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>danger</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="danger" appearance="accent outlined">A+O</wa-badge>
-          <wa-badge variant="danger" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="danger" appearance="filled outlined">F+O</wa-badge>
-          <wa-badge variant="danger" appearance="filled">Filled</wa-badge>
-          <wa-badge variant="danger" appearance="outlined">Outlined</wa-badge>
-          <wa-badge variant="danger" appearance="plain">Plain</wa-badge>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-danger" appearance="accent outlined">A+O</wa-badge>
-          <wa-badge class="wa-danger" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-danger" appearance="filled outlined">F+O</wa-badge>
-          <wa-badge class="wa-danger" appearance="filled">Filled</wa-badge>
-          <wa-badge class="wa-danger" appearance="outlined">Outlined</wa-badge>
-          <wa-badge class="wa-danger" appearance="plain">Plain</wa-badge>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Button</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>variant=""</code></th>
-    <th><code>.wa-[variant]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>brand</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="accent outlined">A+O</wa-button>
-          <wa-button variant="brand" appearance="accent">Accent</wa-button>
-          <wa-button variant="brand" appearance="filled outlined">F+O</wa-button>
-          <wa-button variant="brand" appearance="filled">Filled</wa-button>
-          <wa-button variant="brand" appearance="outlined">Outlined</wa-button>
-          <wa-button variant="brand" appearance="plain">Plain</wa-button>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-brand" appearance="accent outlined">A+O</wa-button>
-          <wa-button class="wa-brand" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-brand" appearance="filled outlined">F+O</wa-button>
-          <wa-button class="wa-brand" appearance="filled">Filled</wa-button>
-          <wa-button class="wa-brand" appearance="outlined">Outlined</wa-button>
-          <wa-button class="wa-brand" appearance="plain">Plain</wa-button>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>neutral</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="neutral" appearance="accent outlined">A+O</wa-button>
-          <wa-button variant="neutral" appearance="accent">Accent</wa-button>
-          <wa-button variant="neutral" appearance="filled outlined">F+O</wa-button>
-          <wa-button variant="neutral" appearance="filled">Filled</wa-button>
-          <wa-button variant="neutral" appearance="outlined">Outlined</wa-button>
-          <wa-button variant="neutral" appearance="plain">Plain</wa-button>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-neutral" appearance="accent outlined">A+O</wa-button>
-          <wa-button class="wa-neutral" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-neutral" appearance="filled outlined">F+O</wa-button>
-          <wa-button class="wa-neutral" appearance="filled">Filled</wa-button>
-          <wa-button class="wa-neutral" appearance="outlined">Outlined</wa-button>
-          <wa-button class="wa-neutral" appearance="plain">Plain</wa-button>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>success</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="success" appearance="accent outlined">A+O</wa-button>
-          <wa-button variant="success" appearance="accent">Accent</wa-button>
-          <wa-button variant="success" appearance="filled outlined">F+O</wa-button>
-          <wa-button variant="success" appearance="filled">Filled</wa-button>
-          <wa-button variant="success" appearance="outlined">Outlined</wa-button>
-          <wa-button variant="success" appearance="plain">Plain</wa-button>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-success" appearance="accent outlined">A+O</wa-button>
-          <wa-button class="wa-success" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-success" appearance="filled outlined">F+O</wa-button>
-          <wa-button class="wa-success" appearance="filled">Filled</wa-button>
-          <wa-button class="wa-success" appearance="outlined">Outlined</wa-button>
-          <wa-button class="wa-success" appearance="plain">Plain</wa-button>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>warning</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="warning" appearance="accent outlined">A+O</wa-button>
-          <wa-button variant="warning" appearance="accent">Accent</wa-button>
-          <wa-button variant="warning" appearance="filled outlined">F+O</wa-button>
-          <wa-button variant="warning" appearance="filled">Filled</wa-button>
-          <wa-button variant="warning" appearance="outlined">Outlined</wa-button>
-          <wa-button variant="warning" appearance="plain">Plain</wa-button>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-warning" appearance="accent outlined">A+O</wa-button>
-          <wa-button class="wa-warning" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-warning" appearance="filled outlined">F+O</wa-button>
-          <wa-button class="wa-warning" appearance="filled">Filled</wa-button>
-          <wa-button class="wa-warning" appearance="outlined">Outlined</wa-button>
-          <wa-button class="wa-warning" appearance="plain">Plain</wa-button>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>danger</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="danger" appearance="accent outlined">A+O</wa-button>
-          <wa-button variant="danger" appearance="accent">Accent</wa-button>
-          <wa-button variant="danger" appearance="filled outlined">F+O</wa-button>
-          <wa-button variant="danger" appearance="filled">Filled</wa-button>
-          <wa-button variant="danger" appearance="outlined">Outlined</wa-button>
-          <wa-button variant="danger" appearance="plain">Plain</wa-button>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-danger" appearance="accent outlined">A+O</wa-button>
-          <wa-button class="wa-danger" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-danger" appearance="filled outlined">F+O</wa-button>
-          <wa-button class="wa-danger" appearance="filled">Filled</wa-button>
-          <wa-button class="wa-danger" appearance="outlined">Outlined</wa-button>
-          <wa-button class="wa-danger" appearance="plain">Plain</wa-button>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Callout</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>variant=""</code></th>
-    <th><code>.wa-[variant]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>brand</code></th>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            A+O
-          </wa-callout>
-          <wa-callout variant="brand" appearance="accent">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Accent
-          </wa-callout>
-          <wa-callout variant="brand" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            F+O
-          </wa-callout>
-          <wa-callout variant="brand" appearance="filled">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Filled
-          </wa-callout>
-          <wa-callout variant="brand" appearance="outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Outlined
-          </wa-callout>
-          <wa-callout variant="brand" appearance="plain">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Plain
-          </wa-callout>
-        </div>
-      </td>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-brand" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            A+O
-          </wa-callout>
-          <wa-callout class="wa-brand" appearance="accent">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Accent
-          </wa-callout>
-          <wa-callout class="wa-brand" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            F+O
-          </wa-callout>
-          <wa-callout class="wa-brand" appearance="filled">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Filled
-          </wa-callout>
-          <wa-callout class="wa-brand" appearance="outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Outlined
-          </wa-callout>
-          <wa-callout class="wa-brand" appearance="plain">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Plain
-          </wa-callout>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>neutral</code></th>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="neutral" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            A+O
-          </wa-callout>
-          <wa-callout variant="neutral" appearance="accent">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Accent
-          </wa-callout>
-          <wa-callout variant="neutral" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            F+O
-          </wa-callout>
-          <wa-callout variant="neutral" appearance="filled">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Filled
-          </wa-callout>
-          <wa-callout variant="neutral" appearance="outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Outlined
-          </wa-callout>
-          <wa-callout variant="neutral" appearance="plain">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Plain
-          </wa-callout>
-        </div>
-      </td>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-neutral" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            A+O
-          </wa-callout>
-          <wa-callout class="wa-neutral" appearance="accent">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Accent
-          </wa-callout>
-          <wa-callout class="wa-neutral" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            F+O
-          </wa-callout>
-          <wa-callout class="wa-neutral" appearance="filled">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Filled
-          </wa-callout>
-          <wa-callout class="wa-neutral" appearance="outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Outlined
-          </wa-callout>
-          <wa-callout class="wa-neutral" appearance="plain">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Plain
-          </wa-callout>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>success</code></th>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="success" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            A+O
-          </wa-callout>
-          <wa-callout variant="success" appearance="accent">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Accent
-          </wa-callout>
-          <wa-callout variant="success" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            F+O
-          </wa-callout>
-          <wa-callout variant="success" appearance="filled">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Filled
-          </wa-callout>
-          <wa-callout variant="success" appearance="outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Outlined
-          </wa-callout>
-          <wa-callout variant="success" appearance="plain">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Plain
-          </wa-callout>
-        </div>
-      </td>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-success" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            A+O
-          </wa-callout>
-          <wa-callout class="wa-success" appearance="accent">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Accent
-          </wa-callout>
-          <wa-callout class="wa-success" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            F+O
-          </wa-callout>
-          <wa-callout class="wa-success" appearance="filled">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Filled
-          </wa-callout>
-          <wa-callout class="wa-success" appearance="outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Outlined
-          </wa-callout>
-          <wa-callout class="wa-success" appearance="plain">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Plain
-          </wa-callout>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>warning</code></th>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="warning" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            A+O
-          </wa-callout>
-          <wa-callout variant="warning" appearance="accent">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Accent
-          </wa-callout>
-          <wa-callout variant="warning" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            F+O
-          </wa-callout>
-          <wa-callout variant="warning" appearance="filled">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Filled
-          </wa-callout>
-          <wa-callout variant="warning" appearance="outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Outlined
-          </wa-callout>
-          <wa-callout variant="warning" appearance="plain">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Plain
-          </wa-callout>
-        </div>
-      </td>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-warning" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            A+O
-          </wa-callout>
-          <wa-callout class="wa-warning" appearance="accent">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Accent
-          </wa-callout>
-          <wa-callout class="wa-warning" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            F+O
-          </wa-callout>
-          <wa-callout class="wa-warning" appearance="filled">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Filled
-          </wa-callout>
-          <wa-callout class="wa-warning" appearance="outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Outlined
-          </wa-callout>
-          <wa-callout class="wa-warning" appearance="plain">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Plain
-          </wa-callout>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>danger</code></th>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="danger" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            A+O
-          </wa-callout>
-          <wa-callout variant="danger" appearance="accent">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Accent
-          </wa-callout>
-          <wa-callout variant="danger" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            F+O
-          </wa-callout>
-          <wa-callout variant="danger" appearance="filled">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Filled
-          </wa-callout>
-          <wa-callout variant="danger" appearance="outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Outlined
-          </wa-callout>
-          <wa-callout variant="danger" appearance="plain">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Plain
-          </wa-callout>
-        </div>
-      </td>
-      <td>
-        <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-danger" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            A+O
-          </wa-callout>
-          <wa-callout class="wa-danger" appearance="accent">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Accent
-          </wa-callout>
-          <wa-callout class="wa-danger" appearance="filled outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            F+O
-          </wa-callout>
-          <wa-callout class="wa-danger" appearance="filled">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Filled
-          </wa-callout>
-          <wa-callout class="wa-danger" appearance="outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Outlined
-          </wa-callout>
-          <wa-callout class="wa-danger" appearance="plain">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Plain
-          </wa-callout>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Tag</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>variant=""</code></th>
-    <th><code>.wa-[variant]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>brand</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" appearance="accent outlined">A+O</wa-tag>
-          <wa-tag variant="brand" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="brand" appearance="filled outlined">F+O</wa-tag>
-          <wa-tag variant="brand" appearance="filled">Filled</wa-tag>
-          <wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
-          <wa-tag variant="brand" appearance="plain">Plain</wa-tag>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-brand" appearance="accent outlined">A+O</wa-tag>
-          <wa-tag class="wa-brand" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-brand" appearance="filled outlined">F+O</wa-tag>
-          <wa-tag class="wa-brand" appearance="filled">Filled</wa-tag>
-          <wa-tag class="wa-brand" appearance="outlined">Outlined</wa-tag>
-          <wa-tag class="wa-brand" appearance="plain">Plain</wa-tag>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>neutral</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="neutral" appearance="accent outlined">A+O</wa-tag>
-          <wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="neutral" appearance="filled outlined">F+O</wa-tag>
-          <wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
-          <wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
-          <wa-tag variant="neutral" appearance="plain">Plain</wa-tag>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-neutral" appearance="accent outlined">A+O</wa-tag>
-          <wa-tag class="wa-neutral" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-neutral" appearance="filled outlined">F+O</wa-tag>
-          <wa-tag class="wa-neutral" appearance="filled">Filled</wa-tag>
-          <wa-tag class="wa-neutral" appearance="outlined">Outlined</wa-tag>
-          <wa-tag class="wa-neutral" appearance="plain">Plain</wa-tag>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>success</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="success" appearance="accent outlined">A+O</wa-tag>
-          <wa-tag variant="success" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="success" appearance="filled outlined">F+O</wa-tag>
-          <wa-tag variant="success" appearance="filled">Filled</wa-tag>
-          <wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
-          <wa-tag variant="success" appearance="plain">Plain</wa-tag>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-success" appearance="accent outlined">A+O</wa-tag>
-          <wa-tag class="wa-success" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-success" appearance="filled outlined">F+O</wa-tag>
-          <wa-tag class="wa-success" appearance="filled">Filled</wa-tag>
-          <wa-tag class="wa-success" appearance="outlined">Outlined</wa-tag>
-          <wa-tag class="wa-success" appearance="plain">Plain</wa-tag>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>warning</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="warning" appearance="accent outlined">A+O</wa-tag>
-          <wa-tag variant="warning" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="warning" appearance="filled outlined">F+O</wa-tag>
-          <wa-tag variant="warning" appearance="filled">Filled</wa-tag>
-          <wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
-          <wa-tag variant="warning" appearance="plain">Plain</wa-tag>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-warning" appearance="accent outlined">A+O</wa-tag>
-          <wa-tag class="wa-warning" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-warning" appearance="filled outlined">F+O</wa-tag>
-          <wa-tag class="wa-warning" appearance="filled">Filled</wa-tag>
-          <wa-tag class="wa-warning" appearance="outlined">Outlined</wa-tag>
-          <wa-tag class="wa-warning" appearance="plain">Plain</wa-tag>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>danger</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="danger" appearance="accent outlined">A+O</wa-tag>
-          <wa-tag variant="danger" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="danger" appearance="filled outlined">F+O</wa-tag>
-          <wa-tag variant="danger" appearance="filled">Filled</wa-tag>
-          <wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
-          <wa-tag variant="danger" appearance="plain">Plain</wa-tag>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-danger" appearance="accent outlined">A+O</wa-tag>
-          <wa-tag class="wa-danger" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-danger" appearance="filled outlined">F+O</wa-tag>
-          <wa-tag class="wa-danger" appearance="filled">Filled</wa-tag>
-          <wa-tag class="wa-danger" appearance="outlined">Outlined</wa-tag>
-          <wa-tag class="wa-danger" appearance="plain">Plain</wa-tag>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
--- a/docs/_includes/visual-tests/harmony.njk
+++ b/docs/_includes/visual-tests/harmony.njk
@@ -1,32 +0,0 @@
-<h3>Form Controls</h3>
-
-```html {.example}
-<form class="wa-stack">
-  <wa-input label="Input" placeholder="Placeholder"></wa-input>
-  <wa-select label="Select" value="option-1">
-    <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-textarea label="Textarea" placeholder="Placeholder"></wa-textarea>
-  <wa-radio-group label="Radio group" name="a" value="1">
-    <wa-radio value="1">Option 1</wa-radio>
-    <wa-radio value="2">Option 2</wa-radio>
-    <wa-radio value="3">Option 3</wa-radio>
-  </wa-radio-group>
-  <wa-checkbox>Checkbox</wa-checkbox>
-  <wa-switch>Switch</wa-switch>
-  <wa-slider label="Range"></wa-slider>
-  <wa-button>Button</wa-button>
-</form>
-```
-
-<h3>Progress</h3>
-
-```html {.example}
-<div class="wa-stack">
-  <wa-progress-bar value="50" max="100"></wa-progress-bar>
-  <wa-progress-ring value="50" max="100"></wa-progress-ring>
-  <wa-spinner></wa-spinner>
-</div>
-```
--- a/docs/_includes/visual-tests/native.njk
+++ b/docs/_includes/visual-tests/native.njk
@@ -1,745 +0,0 @@
-<h3>Button</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>&lt;wa-button&gt;</code></th>
-    <th><code>&lt;button&gt;</code></th>
-    <th><code>.wa-button</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><em>default</em></th>
-      <td>
-        <wa-button>Button</wa-button>
-      </td>
-      <td>
-        <button>Button</button>
-      </td>
-      <td>
-        <div class="wa-button">Button</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-brand</code></th>
-      <td>
-        <wa-button class="wa-brand">Brand</wa-button>
-      </td>
-      <td>
-        <button class="wa-brand">Brand</button>
-      </td>
-      <td>
-        <div class="wa-button wa-brand">Brand</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-neutral</code></th>
-      <td>
-        <wa-button class="wa-neutral">Neutral</wa-button>
-      </td>
-      <td>
-        <button class="wa-neutral">Neutral</button>
-      </td>
-      <td>
-        <div class="wa-button wa-neutral">Neutral</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-success</code></th>
-      <td>
-        <wa-button class="wa-success">Success</wa-button>
-      </td>
-      <td>
-        <button class="wa-success">Success</button>
-      </td>
-      <td>
-        <div class="wa-button wa-success">Success</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-warning</code></th>
-      <td>
-        <wa-button class="wa-warning">Warning</wa-button>
-      </td>
-      <td>
-        <button class="wa-warning">Warning</button>
-      </td>
-      <td>
-        <div class="wa-button wa-warning">Warning</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-danger</code></th>
-      <td>
-        <wa-button class="wa-danger">Danger</wa-button>
-      </td>
-      <td>
-        <button class="wa-danger">Danger</button>
-      </td>
-      <td>
-        <div class="wa-button wa-danger">Danger</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-accent</code></th>
-      <td>
-        <wa-button class="wa-accent">Accent</wa-button>
-      </td>
-      <td>
-        <button class="wa-accent">Accent</button>
-      </td>
-      <td>
-        <div class="wa-button wa-accent">Accent</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-filled</code></th>
-      <td>
-        <wa-button class="wa-filled">Filled</wa-button>
-      </td>
-      <td>
-        <button class="wa-filled">Filled</button>
-      </td>
-      <td>
-        <div class="wa-button wa-filled">Filled</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-outlined</code></th>
-      <td>
-        <wa-button class="wa-outlined">Outlined</wa-button>
-      </td>
-      <td>
-        <button class="wa-outlined">Outlined</button>
-      </td>
-      <td>
-        <div class="wa-button wa-outlined">Outlined</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-plain</code></th>
-      <td>
-        <wa-button class="wa-plain">Plain</wa-button>
-      </td>
-      <td>
-        <button class="wa-plain">Plain</button>
-      </td>
-      <td>
-        <div class="wa-button wa-plain">Plain</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-s</code></th>
-      <td>
-        <wa-button class="wa-size-s">Small</wa-button>
-      </td>
-      <td>
-        <button class="wa-size-s">Small</button>
-      </td>
-      <td>
-        <div class="wa-button wa-size-s">Small</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-m</code></th>
-      <td>
-        <wa-button class="wa-size-m">Medium</wa-button>
-      </td>
-      <td>
-        <button class="wa-size-m">Medium</button>
-      </td>
-      <td>
-        <div class="wa-button wa-size-m">Medium</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-l</code></th>
-      <td>
-        <wa-button class="wa-size-l">Large</wa-button>
-      </td>
-      <td>
-        <button class="wa-size-l">Large</button>
-      </td>
-      <td>
-        <div class="wa-button wa-size-l">Large</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-pill</code></th>
-      <td>
-        <wa-button class="wa-pill">Pill</wa-button>
-      </td>
-      <td>
-        <button class="wa-pill">Pill</button>
-      </td>
-      <td>
-        <div class="wa-button wa-pill">Pill</div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Callout</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>&lt;wa-callout&gt;</code></th>
-    <th><code>.wa-callout</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th class="test-failure"><em>default</em></th>
-      <td>
-        <wa-callout>Callout</wa-callout>
-      </td>
-      <td>
-        <div class="wa-callout">Callout</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-brand</code></th>
-      <td>
-        <wa-callout class="wa-brand">Brand</wa-callout>
-      </td>
-      <td>
-        <div class="wa-callout wa-brand">Brand</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-neutral</code></th>
-      <td>
-        <wa-callout class="wa-neutral">Neutral</wa-callout>
-      </td>
-      <td>
-        <div class="wa-callout wa-neutral">Neutral</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-success</code></th>
-      <td>
-        <wa-callout class="wa-success">Success</wa-callout>
-      </td>
-      <td>
-        <div class="wa-callout wa-success">Success</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-warning</code></th>
-      <td>
-        <wa-callout class="wa-warning">Warning</wa-callout>
-      </td>
-      <td>
-        <div class="wa-callout wa-warning">Warning</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-danger</code></th>
-      <td>
-        <wa-callout class="wa-danger">Danger</wa-callout>
-      </td>
-      <td>
-        <div class="wa-callout wa-danger">Danger</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-accent</code></th>
-      <td>
-        <wa-callout class="wa-accent">Accent</wa-callout>
-      </td>
-      <td>
-        <div class="wa-callout wa-accent">Accent</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-filled</code></th>
-      <td>
-        <wa-callout class="wa-filled">Filled</wa-callout>
-      </td>
-      <td>
-        <div class="wa-callout wa-filled">Filled</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-outlined</code></th>
-      <td>
-        <wa-callout class="wa-outlined">Outlined</wa-callout>
-      </td>
-      <td>
-        <div class="wa-callout wa-outlined">Outlined</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-plain</code></th>
-      <td>
-        <wa-callout class="wa-plain">Plain</wa-callout>
-      </td>
-      <td>
-        <div class="wa-callout wa-plain">Plain</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-s</code></th>
-      <td>
-        <wa-callout class="wa-size-s">Small</wa-callout>
-      </td>
-      <td>
-        <div class="wa-callout wa-size-s">Small</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-m</code></th>
-      <td>
-        <wa-callout class="wa-size-m">Medium</wa-callout>
-      </td>
-      <td>
-        <div class="wa-callout wa-size-m">Medium</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-l</code></th>
-      <td>
-        <wa-callout class="wa-size-l">Large</wa-callout>
-      </td>
-      <td>
-        <div class="wa-callout wa-size-l">Large</div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-pill</code></th>
-      <td>
-        <wa-callout class="wa-pill">Pill</wa-callout>
-      </td>
-      <td>
-        <div class="wa-callout wa-pill">Pill</div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Checkbox</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>&lt;wa-checkbox&gt;</code></th>
-    <th><code>&lt;input type="checkbox"&gt;</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><em>default</em></th>
-      <td>
-        <wa-checkbox>Checkbox</wa-checkbox>
-      </td>
-      <td>
-        <label><input type="checkbox"></input> Checkbox</label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>checked</code></th>
-      <td>
-        <wa-checkbox checked>Checkbox</wa-checkbox>
-      </td>
-      <td>
-        <label><input type="checkbox" checked></input> Checkbox</label>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Color Picker</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>&lt;wa-color-picker&gt;</code></th>
-    <th><code>&lt;input type="color"&gt;</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><em>default</em></th>
-      <td>
-        <wa-color-picker label="Color Picker" value="#ffa07a"></wa-color-picker>
-      </td>
-      <td>
-        <label>Color Picker <input type="color" value="#ffa07a"></input></label>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Details</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>&lt;wa-details&gt;</code></th>
-    <th><code>&lt;details&gt;</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><em>default</em></th>
-      <td>
-        <wa-details summary="Summary">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </wa-details>
-      </td>
-      <td>
-        <details>
-          <summary>Summary</summary>
-          <p>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.</p>
-        </details>
-      </td>
-    </tr>
-    <tr>
-      <th><code>dir="rtl"</code></th>
-      <td>
-        <wa-details summary="تبديلني" lang="ar" dir="rtl">
-          استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
-        </wa-details>
-      </td>
-      <td>
-        <details lang="ar" dir="rtl">
-          <summary>تبديلني</summary>
-          <p>استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن</p>
-        </details>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3 class="test-failure">Input</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>&lt;wa-input&gt;</code></th>
-    <th><code>&lt;input&gt;</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><em>default</em></th>
-      <td>
-        <wa-input label="Input" placeholder="Placeholder"></wa-input>
-      </td>
-      <td>
-        <label>Input <input type="text" placeholder="Placeholder"></input></label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>type="password"</code></th>
-      <td>
-        <wa-input label="Input (password)" type="password"></wa-input>
-      </td>
-      <td>
-        <label>Input (password) <input type="password"></input></label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>type="date"</code></th>
-      <td>
-        <wa-input label="Input (date)" type="date"></wa-input>
-      </td>
-      <td>
-        <label>Input (date) <input type="date"></input></label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>type="time"</code></th>
-      <td>
-        <wa-input label="Input (time)" type="time"></wa-input>
-      </td>
-      <td>
-        <label>Input (time) <input type="time"></input></label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-filled</code></th>
-      <td>
-        <wa-input label="Input (filled)" placeholder="Placeholder" class="wa-filled"></wa-input>
-      </td>
-      <td>
-        <label>Input (filled) <input type="text" placeholder="Placeholder" class="wa-filled"></input></label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-s</code></th>
-      <td>
-        <wa-input label="Input (small)" placeholder="Placeholder" class="wa-size-s"></wa-input>
-      </td>
-      <td>
-        <label class="wa-size-s">Input (small) <input type="text" placeholder="Placeholder"></input></label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-m</code></th>
-      <td>
-        <wa-input label="Input (medium)" placeholder="Placeholder" class="wa-size-m"></wa-input>
-      </td>
-      <td>
-        <label class="wa-size-m">Input (medium) <input type="text" placeholder="Placeholder"></input></label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-l</code></th>
-      <td>
-        <wa-input label="Input (large)" placeholder="Placeholder" class="wa-size-l"></wa-input>
-      </td>
-      <td>
-        <label class="wa-size-l">Input (large) <input type="text" placeholder="Placeholder"></input></label>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Progress Bar</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>&lt;wa-progress-bar&gt;</code></th>
-    <th><code>&lt;progress&gt;</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><em>default</em></th>
-      <td>
-        <wa-progress-bar value="50" max="100"></wa-progress-bar>
-      </td>
-      <td>
-        <progress value="50" max="100"></progress>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Radio</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>&lt;wa-radio&gt;</code></th>
-    <th><code>&lt;input type="radio"&gt;</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><em>default</em></th>
-      <td>
-        <wa-radio>Radio</wa-radio>
-      </td>
-      <td>
-        <label><input type="radio"></input> Radio</label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>checked</code></th>
-      <td>
-        <wa-radio-group value="1">
-          <wa-radio value="1">Radio</wa-radio>
-        </wa-radio-group>
-      </td>
-      <td>
-        <label><input type="radio" checked></input> Radio</label>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Select</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>&lt;wa-select&gt;</code></th>
-    <th><code>&lt;select&gt;</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><em>default</em></th>
-      <td>
-        <wa-select label="Select" value="1">
-          <wa-option value="1">Option</wa-option>
-        </wa-select>
-      </td>
-      <td>
-        <label>Select 
-          <select value="1">
-            <option value="1">Option</option>
-          </select>
-        </label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-filled</code></th>
-      <td>
-        <wa-select label="Select (filled)" value="1" class="wa-filled">
-          <wa-option value="1">Option</wa-option>
-        </wa-select>
-      </td>
-      <td>
-        <label class="wa-filled">Select (filled) 
-          <select value="1">
-            <option value="1">Option</option>
-          </select>
-        </label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-s</code></th>
-      <td>
-        <wa-select label="Select (small)" value="1" class="wa-size-s">
-          <wa-option value="1">Option</wa-option>
-        </wa-select>
-      </td>
-      <td>
-        <label class="wa-size-s">Select (small) 
-          <select value="1">
-            <option value="1">Option</option>
-          </select>
-        </label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-m</code></th>
-      <td>
-        <wa-select label="Select (medium)" value="1" class="wa-size-m">
-          <wa-option value="1">Option</wa-option>
-        </wa-select>
-      </td>
-      <td>
-        <label class="wa-size-m">Select (medium) 
-          <select value="1">
-            <option value="1">Option</option>
-          </select>
-        </label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-l</code></th>
-      <td>
-        <wa-select label="Select (large)" value="1" class="wa-size-l">
-          <wa-option value="1">Option</wa-option>
-        </wa-select>
-      </td>
-      <td>
-        <label class="wa-size-l">Select (large) 
-          <select value="1">
-            <option value="1">Option</option>
-          </select>
-        </label>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3 class="test-failure">Slider</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>&lt;wa-slider&gt;</code></th>
-    <th><code>&lt;input type="range"&gt;</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><em>default</em></th>
-      <td>
-        <wa-slider label="Slider"></wa-slider>
-      </td>
-      <td>
-        <label>Slider <input type="range"></input></label>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3 class="test-failure">Textarea</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>&lt;wa-textarea&gt;</code></th>
-    <th><code>&lt;textarea&gt;</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><em>default</em></th>
-      <td>
-        <wa-textarea label="Textarea" placeholder="Placeholder" rows="2"></wa-textarea>
-      </td>
-      <td>
-        <label>Textarea <textarea placeholder="Placeholder" rows="2"></textarea></label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-filled</code></th>
-      <td>
-        <wa-textarea label="Textarea (filled)" placeholder="Placeholder" class="wa-filled" rows="2"></wa-textarea>
-      </td>
-      <td>
-        <label>Textarea (filled) <textarea placeholder="Placeholder" class="wa-filled" rows="2"></textarea></label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-s</code></th>
-      <td>
-        <wa-textarea label="Textarea (small)" placeholder="Placeholder" class="wa-size-s" rows="2"></wa-textarea>
-      </td>
-      <td>
-        <label class="wa-size-s">Textarea (small) <textarea placeholder="Placeholder" rows="2"></textarea></label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-m</code></th>
-      <td>
-        <wa-textarea label="Textarea (medium)" placeholder="Placeholder" class="wa-size-m" rows="2"></wa-textarea>
-      </td>
-      <td>
-        <label class="wa-size-m">Textarea (medium) <textarea placeholder="Placeholder" rows="2"></textarea></label>
-      </td>
-    </tr>
-    <tr>
-      <th><code>.wa-size-l</code></th>
-      <td>
-        <wa-textarea label="Textarea (large)" placeholder="Placeholder" class="wa-size-l" rows="2"></wa-textarea>
-      </td>
-      <td>
-        <label class="wa-size-l">Textarea (large) <textarea placeholder="Placeholder" rows="2"></textarea></label>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
--- a/docs/_includes/visual-tests/size.njk
+++ b/docs/_includes/visual-tests/size.njk
@@ -1,856 +0,0 @@
-<h3>Button</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-button size="small">Button</wa-button>
-      </td>
-      <td>
-        <wa-button class="wa-size-s">Button</wa-button>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-button size="medium">Button</wa-button>
-      </td>
-      <td>
-        <wa-button class="wa-size-m">Button</wa-button>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-button size="large">Button</wa-button>
-      </td>
-      <td>
-        <wa-button class="wa-size-l">Button</wa-button>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Button Group</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-button-group orientation="horizontal" size="small">
-          <wa-button value="1">Button L</wa-button>
-          <wa-button value="2">Button R</wa-button>
-        </wa-button-group>
-      </td>
-      <td>
-        <wa-button-group orientation="horizontal" class="wa-size-s">
-          <wa-button value="1">Button L</wa-button>
-          <wa-button value="2">Button R</wa-button>
-        </wa-button-group>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-button-group orientation="horizontal" size="medium">
-          <wa-button value="1">Button L</wa-button>
-          <wa-button value="2">Button R</wa-button>
-        </wa-button-group>
-      </td>
-      <td>
-        <wa-button-group orientation="horizontal" class="wa-size-m">
-          <wa-button value="1">Button L</wa-button>
-          <wa-button value="2">Button R</wa-button>
-        </wa-button-group>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-button-group orientation="horizontal" size="large">
-          <wa-button value="1">Button L</wa-button>
-          <wa-button value="2">Button R</wa-button>
-        </wa-button-group>
-      </td>
-      <td>
-        <wa-button-group orientation="horizontal" class="wa-size-l">
-          <wa-button value="1">Button L</wa-button>
-          <wa-button value="2">Button R</wa-button>
-        </wa-button-group>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Callout</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-callout size="small">
-          <wa-icon slot="icon" name="circle-star"></wa-icon>
-          Callout
-        </wa-callout>
-      </td>
-      <td>
-        <wa-callout class="wa-size-s">
-          <wa-icon slot="icon" name="circle-star"></wa-icon>
-          Callout
-        </wa-callout>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-callout size="medium">
-          <wa-icon slot="icon" name="circle-star"></wa-icon>
-          Callout
-        </wa-callout>
-      </td>
-      <td>
-        <wa-callout class="wa-size-m">
-          <wa-icon slot="icon" name="circle-star"></wa-icon>
-          Callout
-        </wa-callout>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-callout size="large">
-          <wa-icon slot="icon" name="circle-star"></wa-icon>
-          Callout
-        </wa-callout>
-      </td>
-      <td>
-        <wa-callout class="wa-size-l">
-          <wa-icon slot="icon" name="circle-star"></wa-icon>
-          Callout
-        </wa-callout>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Card</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-card size="small">
-          Card
-        </wa-card>
-      </td>
-      <td>
-        <wa-card class="wa-size-s">
-          Card
-        </wa-card>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-card size="medium">
-          Card
-        </wa-card>
-      </td>
-      <td>
-        <wa-card class="wa-size-m">
-          Card
-        </wa-card>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-card size="large">
-          Card
-        </wa-card>
-      </td>
-      <td>
-        <wa-card class="wa-size-l">
-          Card
-        </wa-card>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Checkbox</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-checkbox hint="Hint" size="small">Checkbox</wa-checkbox>
-      </td>
-      <td>
-        <wa-checkbox hint="Hint" class="wa-size-s">Checkbox</wa-checkbox>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-checkbox hint="Hint" size="medium">Checkbox</wa-checkbox>
-      </td>
-      <td>
-        <wa-checkbox hint="Hint" class="wa-size-m">Checkbox</wa-checkbox>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-checkbox hint="Hint" size="large">Checkbox</wa-checkbox>
-      </td>
-      <td>
-        <wa-checkbox hint="Hint" class="wa-size-l">Checkbox</wa-checkbox>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Color Picker</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-color-picker size="small" label="Color Picker" hint="Hint"></wa-color-picker>
-      </td>
-      <td>
-        <wa-color-picker class="wa-size-s" label="Color Picker" hint="Hint"></wa-color-picker>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-color-picker size="medium" label="Color Picker" hint="Hint"></wa-color-picker>
-      </td>
-      <td>
-        <wa-color-picker class="wa-size-m" label="Color Picker" hint="Hint"></wa-color-picker>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-color-picker size="large" label="Color Picker" hint="Hint"></wa-color-picker>
-      </td>
-      <td>
-        <wa-color-picker class="wa-size-l" label="Color Picker" hint="Hint"></wa-color-picker>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Dropdown</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-dropdown size="small">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
-          <wa-menu>
-            <wa-menu-item>Menu Item 1</wa-menu-item>
-            <wa-menu-item>Menu Item 2</wa-menu-item>
-          </wa-menu>
-        </wa-dropdown>
-      </td>
-      <td>
-        <wa-dropdown class="wa-size-s">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
-          <wa-menu>
-            <wa-menu-item>Menu Item 1</wa-menu-item>
-            <wa-menu-item>Menu Item 2</wa-menu-item>
-          </wa-menu>
-        </wa-dropdown>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-dropdown size="medium">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
-          <wa-menu>
-            <wa-menu-item>Menu Item 1</wa-menu-item>
-            <wa-menu-item>Menu Item 2</wa-menu-item>
-          </wa-menu>
-        </wa-dropdown>
-      </td>
-      <td>
-        <wa-dropdown class="wa-size-m">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
-          <wa-menu>
-            <wa-menu-item>Menu Item 1</wa-menu-item>
-            <wa-menu-item>Menu Item 2</wa-menu-item>
-          </wa-menu>
-        </wa-dropdown>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-dropdown size="large">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
-          <wa-menu>
-            <wa-menu-item>Menu Item 1</wa-menu-item>
-            <wa-menu-item>Menu Item 2</wa-menu-item>
-          </wa-menu>
-        </wa-dropdown>
-      </td>
-      <td>
-        <wa-dropdown class="wa-size-l">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
-          <wa-menu>
-            <wa-menu-item>Menu Item 1</wa-menu-item>
-            <wa-menu-item>Menu Item 2</wa-menu-item>
-          </wa-menu>
-        </wa-dropdown>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Menu</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-menu size="small">
-          <wa-menu-item>Menu Item 1</wa-menu-item>
-          <wa-menu-item>Menu Item 2</wa-menu-item>
-        </wa-menu>
-      </td>
-      <td>
-        <wa-menu class="wa-size-s">
-          <wa-menu-item>Menu Item 1</wa-menu-item>
-          <wa-menu-item>Menu Item 2</wa-menu-item>
-        </wa-menu>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-menu size="medium">
-          <wa-menu-item>Menu Item 1</wa-menu-item>
-          <wa-menu-item>Menu Item 2</wa-menu-item>
-        </wa-menu>
-      </td>
-      <td>
-        <wa-menu class="wa-size-m">
-          <wa-menu-item>Menu Item 1</wa-menu-item>
-          <wa-menu-item>Menu Item 2</wa-menu-item>
-        </wa-menu>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-menu size="large">
-          <wa-menu-item>Menu Item 1</wa-menu-item>
-          <wa-menu-item>Menu Item 2</wa-menu-item>
-        </wa-menu>
-      </td>
-      <td>
-        <wa-menu class="wa-size-l">
-          <wa-menu-item>Menu Item 1</wa-menu-item>
-          <wa-menu-item>Menu Item 2</wa-menu-item>
-        </wa-menu>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Input</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-input size="small" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
-      </td>
-      <td>
-        <wa-input class="wa-size-s" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-input size="medium" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
-      </td>
-      <td>
-        <wa-input class="wa-size-m" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-input size="large" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
-      </td>
-      <td>
-        <wa-input class="wa-size-l" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Radio</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-radio size="small">Radio</wa-radio>
-      </td>
-      <td>
-        <wa-radio class="wa-size-s">Radio</wa-radio>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-radio size="medium">Radio</wa-radio>
-      </td>
-      <td>
-        <wa-radio class="wa-size-m">Radio</wa-radio>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-radio size="large">Radio</wa-radio>
-      </td>
-      <td>
-        <wa-radio class="wa-size-l">Radio</wa-radio>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Radio Button</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-radio-group orientation="horizontal">
-          <wa-radio-button size="small" value="1">Radio</wa-radio-button>
-          <wa-radio-button size="small" value="2">Button</wa-radio-button>
-        </wa-radio-group>
-      </td>
-      <td>
-        <wa-radio-group orientation="horizontal">
-          <wa-radio-button class="wa-size-s" value="1">Radio</wa-radio-button>
-          <wa-radio-button class="wa-size-s" value="2">Button</wa-radio-button>
-        </wa-radio-group>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-radio-group orientation="horizontal">
-          <wa-radio-button size="medium" value="1">Radio</wa-radio-button>
-          <wa-radio-button size="medium" value="2">Button</wa-radio-button>
-        </wa-radio-group>
-      </td>
-      <td>
-        <wa-radio-group orientation="horizontal">
-          <wa-radio-button class="wa-size-m" value="1">Radio</wa-radio-button>
-          <wa-radio-button class="wa-size-m" value="2">Button</wa-radio-button>
-        </wa-radio-group>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-radio-group orientation="horizontal">
-          <wa-radio-button size="large" value="1">Radio</wa-radio-button>
-          <wa-radio-button size="large" value="2">Button</wa-radio-button>
-        </wa-radio-group>
-      </td>
-      <td>
-        <wa-radio-group orientation="horizontal">
-          <wa-radio-button class="wa-size-l" value="1">Radio</wa-radio-button>
-          <wa-radio-button class="wa-size-l" value="2">Button</wa-radio-button>
-        </wa-radio-group>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Radio Group</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <div class="wa-stack">
-          <wa-radio-group label="Radio Group" hint="Hint" size="small">
-            <wa-radio value="1">Radio 1</wa-radio>
-            <wa-radio value="2">Radio 2</wa-radio>
-          </wa-radio-group>
-          <wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" size="small">
-            <wa-radio-button value="1">Radio 1</wa-radio-button>
-            <wa-radio-button value="2">Radio 2</wa-radio-button>
-          </wa-radio-group>
-        </div>
-      </td>
-      <td>
-        <div class="wa-stack">
-          <wa-radio-group label="Radio Group" hint="Hint" class="wa-size-s">
-            <wa-radio value="1">Radio 1</wa-radio>
-            <wa-radio value="2">Radio 2</wa-radio>
-          </wa-radio-group>
-          <wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" class="wa-size-s">
-            <wa-radio-button value="1">Radio 1</wa-radio-button>
-            <wa-radio-button value="2">Radio 2</wa-radio-button>
-          </wa-radio-group>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <div class="wa-stack">
-          <wa-radio-group label="Radio Group" hint="Hint" size="medium">
-            <wa-radio value="1">Radio 1</wa-radio>
-            <wa-radio value="2">Radio 2</wa-radio>
-          </wa-radio-group>
-          <wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" size="medium">
-            <wa-radio-button value="1">Radio 1</wa-radio-button>
-            <wa-radio-button value="2">Radio 2</wa-radio-button>
-          </wa-radio-group>
-        </div>
-      </td>
-      <td>
-        <div class="wa-stack">
-          <wa-radio-group label="Radio Group" hint="Hint" class="wa-size-m">
-            <wa-radio value="1">Radio 1</wa-radio>
-            <wa-radio value="2">Radio 2</wa-radio>
-          </wa-radio-group>
-          <wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" class="wa-size-m">
-            <wa-radio-button value="1">Radio 1</wa-radio-button>
-            <wa-radio-button value="2">Radio 2</wa-radio-button>
-          </wa-radio-group>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <div class="wa-stack">
-          <wa-radio-group label="Radio Group" hint="Hint" size="large">
-            <wa-radio value="1">Radio 1</wa-radio>
-            <wa-radio value="2">Radio 2</wa-radio>
-          </wa-radio-group>
-          <wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" size="large">
-            <wa-radio-button value="1">Radio 1</wa-radio-button>
-            <wa-radio-button value="2">Radio 2</wa-radio-button>
-          </wa-radio-group>
-        </div>
-      </td>
-      <td>
-        <div class="wa-stack">
-          <wa-radio-group label="Radio Group" hint="Hint" class="wa-size-l">
-            <wa-radio value="1">Radio 1</wa-radio>
-            <wa-radio value="2">Radio 2</wa-radio>
-          </wa-radio-group>
-          <wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" class="wa-size-l">
-            <wa-radio-button value="1">Radio 1</wa-radio-button>
-            <wa-radio-button value="2">Radio 2</wa-radio-button>
-          </wa-radio-group>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Rating</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-rating size="small"></wa-rating>
-      </td>
-      <td>
-        <wa-rating class="wa-size-s"></wa-rating>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-rating size="medium"></wa-rating>
-      </td>
-      <td>
-        <wa-rating class="wa-size-m"></wa-rating>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-rating size="large"></wa-rating>
-      </td>
-      <td>
-        <wa-rating class="wa-size-l"></wa-rating>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Select</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-select size="small" label="Select" placeholder="Placeholder" hint="Hint">
-          <wa-option value="1">Option</wa-option>
-        </wa-select>
-      </td>
-      <td>
-        <wa-select class="wa-size-s" label="Select" placeholder="Placeholder" hint="Hint">
-          <wa-option value="1">Option</wa-option>
-        </wa-select>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-select size="medium" label="Select" placeholder="Placeholder" hint="Hint">
-          <wa-option value="1">Option</wa-option>
-        </wa-select>
-      </td>
-      <td>
-        <wa-select class="wa-size-m" label="Select" placeholder="Placeholder" hint="Hint">
-          <wa-option value="1">Option</wa-option>
-        </wa-select>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-select size="large" label="Select" placeholder="Placeholder" hint="Hint">
-          <wa-option value="1">Option</wa-option>
-        </wa-select>
-      </td>
-      <td>
-        <wa-select class="wa-size-l" label="Select" placeholder="Placeholder" hint="Hint">
-          <wa-option value="1">Option</wa-option>
-        </wa-select>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Switch</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-switch hint="Hint" size="small">Switch</wa-switch>
-      </td>
-      <td>
-        <wa-switch hint="Hint" class="wa-size-s">Switch</wa-switch>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-switch hint="Hint" size="medium">Switch</wa-switch>
-      </td>
-      <td>
-        <wa-switch hint="Hint" class="wa-size-m">Switch</wa-switch>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-switch hint="Hint" size="large">Switch</wa-switch>
-      </td>
-      <td>
-        <wa-switch hint="Hint" class="wa-size-l">Switch</wa-switch>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
-<h3>Textarea</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-textarea size="small" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
-      </td>
-      <td>
-        <wa-textarea class="wa-size-s" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-textarea size="medium" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
-      </td>
-      <td>
-        <wa-textarea class="wa-size-m" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-textarea size="large" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
-      </td>
-      <td>
-        <wa-textarea class="wa-size-l" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
--- a/docs/_layouts/blank.njk
+++ b/docs/_layouts/blank.njk
@@ -1,11 +1,62 @@
 <!DOCTYPE html>
 <html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
  <head>
-    {% include 'head.njk' %}
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="{{ description }}">
+    {% if noindex %}<meta name="robots" content="noindex">{% endif %}
+
+    <title>{{ title }}</title>
+
+    <link rel="icon" href="/assets/images/webawesome-logo.svg" />
+    <link rel="apple-touch-icon" href="/assets/images/app-icon.png">
+
+    {# Scripts #}
+    {# Hydration stuff #}
+    <script src="/assets/scripts/hydration-errors.js"></script>
+    <link rel="stylesheet" href="/assets/styles/hydration-errors.css">
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
+
+    {# Web Awesome #}
+    <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
+    <link rel="stylesheet" id="theme-stylesheet" />
+    <link rel="stylesheet" href="/dist/styles/applied.css" />
+    <link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
+    <link rel="stylesheet" href="/dist/styles/forms.css" />
+
+    {# 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/styles/themes/${preset}.css`
+
+      document.documentElement.classList.toggle(
+        `wa-theme-${preset}-dark`,
+        isDark()
+      );
+    </script>
  </head>
  <body class="layout-{{ layout | stripExtension }}">

-        {% block header %}{% endblock %}
+        {% block beforeContent %}{% endblock %}

        {% block content %}
          {{ content | safe }}
--- a/docs/_layouts/block.njk
+++ b/docs/_layouts/block.njk
@@ -1,38 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-
-{% extends '../_includes/base.njk' %}
-
-{# Component header #}
-{% block header %}
-  {% include 'breadcrumbs.njk' %}
-  <h1 class="title">{{ title }}</h1>
-  <div class="block-info">
-    {% set snippets = (elements or element or snippets or snippet) | dict  %}
-
-    {% for snippet, link in snippets %}
-      {% if snippet %}
-        <code class="class">
-          {%- if link -%}
-            <a href="{{ link }}">{{ snippet }}</a>
-          {%- else -%}
-            {{ snippet }}
-          {%- endif-%}
-        </code>
-      {%- endif %}
-    {% endfor %}
-
-    {% include '../_includes/status.njk' %}
-  </div>
-  {% if description %}
-  <p class="summary">
-    {{ description | inlineMarkdown | safe }}
-  </p>
-  {% endif %}
-  {% block notes %}{% endblock %}
-{% endblock %}
-
-{# Content #}
-{% block content %}
-  {{ content | safe }}
-{% endblock %}
--- a/docs/_layouts/component.njk
+++ b/docs/_layouts/component.njk
@@ -1,17 +1,42 @@
-{% extends '../_layouts/block.njk' %}
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
 {% set component = components[page.fileSlug] %}
+{% set description = component.summary %}
+
+{% extends '../_includes/base.njk' %}

 {# Component header #}
-{% block notes %}
-  {% if native %}
+{% block beforeContent %}
+  <h1 class="title">{{ title }}</h1>
+  <div class="component-info">
+    <code class="tag">&lt;{{ component.tagName }}&gt;</code>
+    <wa-badge variant="neutral">Since {{ component.since }}</wa-badge>
+    <wa-badge
+      {% if component.status == 'stable' %}variant="brand"{% endif %}
+      {% if component.status == 'experimental' %}variant="warning"{% endif %}
+    >
+      {{ component.status }}
+    </wa-badge>
+
+    {% if isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
+  </div>
+  <p class="summary">
+    {{ component.summary | inlineMarkdown | safe }}
+  </p>
+  {% if natives %}
  <wa-callout variant="success">
    <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
    Just want the styles?
-    Check out the <a href="/docs/native/{{ native }}/">{{ ('/docs/native/' + native + '/') | getTitleFromUrl }} native styles</a>!
+    Check out <a href="/docs/natives/{{ natives }}/">{{ ('/docs/natives/' + natives + '/') | getTitleFromUrl }} natives</a>!
  </wa-callout>
  {% endif %}
 {% endblock %}

+{# Content #}
+{% block content %}
+  {{ content | safe }}
+{% endblock %}
+
 {# Component API #}
 {% block afterContent %}
  {# Slots #}
@@ -255,7 +280,7 @@
  {# Importing #}
  <h2>Importing</h2>
  <p>
-    The <a href="/docs/installation/#quick-start-autoloading-via-cdn">autoloader</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
+    The <a href="/docs/#autoloading">autoloader</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
  </p>

  <wa-tab-group label="How would you like to import this component?">
--- a/docs/_layouts/element.njk
+++ b/docs/_layouts/element.njk
@@ -1,32 +1,55 @@
-{% extends '../_layouts/block.njk' %}
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+
+{% extends '../_includes/base.njk' %}

 {# Component header #}
-{% block notes %}
+{% block beforeContent %}
+  <h1 class="title">{{ title }}</h1>
+  <div class="component-info">
+    {% for tag, url in elements %}
+      <code class="tag"><a href="{{ url }}">{{ tag }}</a></code>
+    {% endfor %}
+    {% if since %}<wa-badge variant="neutral">Since {{ since }}</wa-badge>{% endif %}
+    {% if status %}
+      <wa-badge
+        {% if status == 'stable' %}variant="brand"{% endif %}
+        {% if status == 'experimental' %}variant="warning"{% endif %}
+      >
+        {{ status }}
+      </wa-badge>
+    {% endif %}
+
+    {% if isPro %}
+      <wa-badge class="pro">PRO</wa-badge>
+    {% endif %}
+  </div>
+  {% if description -%}
+    <p class="summary">{{ description | inlineMarkdown | safe }}</p>
+  {%- endif %}
  {% if component %}
  <wa-callout variant="success">
    <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
    Want to do more?
-    Check out the {% for name in (component | toList) -%}
+    Check out the {% for name in (component | toArray) -%}
      {{ ' and ' if loop.last and not loop.first }}<a href="/docs/components/{{ name }}"><code>&lt;wa-{{ name }}&gt;</code></a>{{ ', ' if not loop.last }}
-      {%- endfor %} component{{ 's' if (component | isList) }}</a>!
+      {%- endfor %} component{{ 's' if (component | isArray) }}</a>!
  </wa-callout>
  {% endif %}
 {% endblock %}

-{% block afterContent %}
-{% if file %}
-{% markdown %}
-## Opting In to Native {{ title }} Styles
-
-If you want to use the Native {{ title }} styles **without including the entirety of Web Awesome Native Styles**,
- you can include the following CSS files from the Web Awesome CDN.
-
-{% set stylesheet = file %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-To use all of Web Awesome Native styles, follow the [instructions on the Native Styles overview page](../).
-
-{% endmarkdown %}
-{% endif %}
-
+{# Content #}
+{% block content %}
+  {{ content | safe }}
+{% endblock %}
+
+{# Component API #}
+{% block afterContent %}
+  {# Slots #}
+  {% if css_file %}
+    <h2>Using these styles</h2>
+    <p>If you want to use these styles without using the entirety of Web Awesome Natives, you can include the following CSS files:</p>
+
+
+  {% endif %}
 {% endblock %}
--- a/docs/_layouts/overview.njk
+++ b/docs/_layouts/overview.njk
@@ -1,25 +0,0 @@
---
-layout: page-outline
-tags: ["overview"]
---
-{% set forTag = forTag or (page.url | split('/') | last) %}
-{% if description %}
-  <div class="index-summary">{{ description | markdown | safe }}</div>
-{% endif %}
-
-<div id="block-filter">
-  <wa-input type="search" placeholder="Search {{ title }}" clearable autofocus>
-	<wa-icon slot="prefix" name="search"></wa-icon>
-  </wa-input>
-</div>
-
-{% set allPages = collections[forTag] %}
-{% include "grouped-pages.njk" %}
-
-<link href="/assets/styles/filter.css" rel="stylesheet">
-<script type="module" src="/assets/scripts/filter.js"></script>
-
-{% if content | trim %}
-<wa-divider style="--spacing: var(--wa-space-3xl)"></wa-divider> {# Temp fix for spacing issue #}
-{{ content | safe }}
-{% endif %}
--- a/docs/_layouts/page-wide.njk
+++ b/docs/_layouts/page-wide.njk
@@ -0,0 +1,4 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+
+{% extends "../_includes/base-wide.njk" %}
--- a/docs/_layouts/palette.njk
+++ b/docs/_layouts/palette.njk
@@ -1,266 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-{% set paletteId = page.fileSlug %}
-{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
-
-{% extends '../_includes/base.njk' %}
-
-{% block head %}
-<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
-<link href="{{ page.url }}../tweak.css" rel="stylesheet">
-<script type="module" src="{{ page.url }}../tweak.js"></script>
-{% endblock %}
-
-{% block header %}
-<div id="palette-app" data-palette-id="{{ paletteId }}">
-  <div
-  :class="{
-    tweaking: tweaking.chroma,
-    'tweaking-chroma': tweaking.chroma,
-    'tweaking-hue': tweaking.chroma,
-    'tweaked-chroma': tweaked.chroma,
-    'tweaked-hue': tweaked.hue,
-    'tweaked-any': tweaked.chroma || tweaked.hue
-  }"
-  :style="{ '--chroma-scale': chromaScale }">
-
-  {% include 'breadcrumbs.njk' %}
-
-  <h1 v-if="saved" class="title">
-    {% raw %}{{ saved.title }}{% endraw %}
-    <wa-icon-button name="pencil" label="Rename palette" @click="rename"></wa-icon-button>
-    <wa-icon-button class="delete" name="trash" label="Delete palette" @click="deleteSaved"></wa-icon-button>
-  </h1>
-  <h1 v-if="!saved" class="title">{{ title }}</h1>
-
-  <div class="block-info">
-    <code class="class">.wa-palette-{{ paletteId }}</code>
-    {% include '../_includes/status.njk' %}
-  </div>
-  {% if description %}
-  <p class="summary">
-    {{ description | inlineMarkdown | safe }}
-  </p>
-  {% endif %}
-{% endblock %}
-
-{% block afterContent %}
-
-{% set maxChroma = 0 %}
-
-<wa-callout size="small" class="tweaked-callout" variant="brand">
-  <wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
-   This palette has been tweaked.
-   <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="removeTweak(param)">{% raw %}{{ tweakHumanReadable }}{% endraw %}</wa-tag>
-
-  <wa-button @click="reset" appearance="outlined">
-    <span slot="prefix" class="icon-modifier">
-      <wa-icon name="circle-xmark" variant="regular"></wa-icon>
-    </span>
-    Reset
-  </wa-button>
-  <wa-button v-if="!saved" @click="save">
-    <span slot="prefix" class="icon-modifier">
-      <wa-icon name="sidebar" variant="regular"></wa-icon>
-      <wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
-    </span>
-    Save
-  </wa-button>
-</wa-callout>
-
-<table class="colors main wa-palette-{{ paletteId }}">
-  <thead>
-    <tr>
-      <th></th>
-      <th class="core-column">Core tint</th>
-      {% for tint in tints -%}
-      <th>{{ tint }}</th>
-      {%- endfor %}
-    </tr>
-  </thead>
-{# Initialize to last hue before gray #}
-{%- set hueBefore = hues[hues|length - 2] -%}
-{% for hue in hues -%}
-{%- set coreColor = palettes[paletteId][hue][palettes[paletteId][hue].maxChromaTint] -%}
-{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
-<tr data-hue="{{ hue }}" class="color-scale" :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
-    :style="{ '--hue-shift': hueShifts.{{ hue }} || '' }">
-  <th>
-    {{ hue | capitalize }}
-  </th>
-  <td class="core-column" style="--color: var(--wa-color-{{ hue }})">
-    {% if hue !== 'gray' %}
-    {%- set hueAfter = hues[loop.index0 + 1] -%}
-    {%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
-    {%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
-    {%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
-    <wa-dropdown>
-    <div slot="trigger" id="core-{{ hue }}-swatch" data-tint="core" class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});">
-      {{ palettes[paletteId][hue].maxChromaTint }}
-      <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
-    </div>
-    <div class="popup">
-      <div class="decorated-slider hue-shift-slider" style="--min: {{ minShift }}; --max: {{ maxShift }};">
-        <wa-slider name="{{ hue }}-shift" v-model="hueShifts.{{ hue }}" value="0"
-          min="{{ minShift }}" max="{{ maxShift }}" step="1"
-          @input="tweaking.hue = tweaking.{{hue}} = true"
-          @change="tweaking.hue = tweaking.{{ hue }} = false">
-          <div slot="label">
-            Tweak {{ hue }} hue
-            <wa-icon-button @click="hueShifts.{{ hue }} = 0" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
-          </div>
-        </wa-slider>
-        <div class="label-min">More {{hueBefore}}</div>
-        <div class="label-max">More {{hueAfter}}</div>
-      </div>
-      <div class="wa-gap-s">
-        <code>--wa-color-{{ hue }}</code>
-        <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
-      </div>
-    </div>`
-    </wa-dropdown>
-    {%- set hueBefore = hue -%}
-    {% else %}
-    <div id="core-{{ hue }}-swatch" class="color swatch" data-tint="core" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});">
-      {{ palettes[paletteId][hue].maxChromaTint }}
-    </div>
-    {% endif %}
-  </td>
-  {% for tint in tints -%}
-    {%- set color = palettes[paletteId][hue][tint] -%}
-    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
-      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
-        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
-      </div>
-    </td>
-  {%- endfor -%}
-</tr>
-{%- endfor %}
-</table>
-
-{% set chromaScaleBounds = [
-(0.08 / maxChroma) | number({maximumFractionDigits: 2}),
-(0.3 / maxChroma]) | number({maximumFractionDigits: 2}) -%}
-<div class="decorated-slider chroma-scale-slider wa-palette-{{ paletteId }}"
-:class="{ tweaked: chromaScale !== 1 }"
-style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};">
-  <wa-slider name="chroma-scale" v-model="chromaScale" value="1" step="0.01"
-    min="{{ chromaScaleBounds[0] }}" max="{{ chromaScaleBounds[1] }}"
-    @input="tweaking.chroma = true"
-    @change="tweaking.chroma = false">
-    <div slot="label">
-      Overall colorfulness
-      <wa-icon-button @click="chromaScale = 1" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
-    </div>
-  </wa-slider>
-  <div class="label-min">More muted</div>
-  <div class="label-max">More vibrant</div>
-</div>
-
-<h2>Used By</h2>
-
-<section class="index-grid">
-{% for page in collections.theme %}
-  {%- if page.data.palette == paletteId -%}
-    {% include "page-card.njk" %}
-  {%- endif -%}
-{% endfor %}
-</section>
-
-{% markdown %}
-## Color Contrast
-
-Web Awesome color scales are designed to guarantee certain contrast ratios,
-both per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum)
-as well as the emergent APCA specification _(planned)_,
-so you can ensure that text is both legible to all users, and legally conformant.
-
-### Level 1
-
-A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for large text and icons (AA).
-{% endmarkdown %}
-
-{% set difference = 40 %}
-{% set minContrast = 3 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `45`:
-
-{% endmarkdown %}
-
-{% set difference = 45 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-### Level 2
-
-A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for normal text (AA) and large text (AAA)
-{% endmarkdown %}
-
-{% set difference = 50 %}
-{% set minContrast = 4.5 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `55`:
-
-{% endmarkdown %}
-
-{% set difference = 55 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-### Level 3
-
-A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all text (AAA)
-{% endmarkdown %}
-
-{% set difference = 60 %}
-{% set minContrast = 7 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `65`:
-
-{% endmarkdown %}
-
-{% set difference = 65 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-## How to use this palette { #usage }
-
-If you are using a Web Awesome theme that uses this palette, it will already be included.
-To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
-
-{% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
-<wa-tab-group class="import-stylesheet-code">
-<wa-tab panel="html">In HTML</wa-tab>
-<wa-tab panel="css">In CSS</wa-tab>
-<wa-tab-panel name="html">
-
-Add the following code to the `<head>` of your page:
-```html { v-content:html="code.html.highlighted" }
-<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
-```
-</wa-tab-panel>
-<wa-tab-panel name="css">
-
-Add the following code at the top of your CSS file:
-```css { v-content:html="code.css.highlighted" }
-@import url('{% cdnUrl stylesheet %}');
-```
-</wa-tab-panel>
-</wa-tab-group>
-
-
-{% endmarkdown %}
-</div></div> {# end palette app #}
-{% endblock %}
-
-
--- a/docs/_layouts/pattern.njk
+++ b/docs/_layouts/pattern.njk
@@ -0,0 +1,4 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+
+{% extends "../_includes/base.njk" %}
--- a/docs/_layouts/theme.njk
+++ b/docs/_layouts/theme.njk
@@ -1,207 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-{# {% set forceTheme = page.fileSlug %} #}
-
-{% extends '../_includes/base.njk' %}
-
-{% block head %}
-<script>
-globalThis.wa_data ??= {};
-wa_data.baseTheme = "{{ page.fileSlug }}";
-wa_data.themes = {
-  {% for theme in collections.theme -%}
-  "{{ theme.fileSlug }}": {
-    "title": "{{ theme.data.title }}",
-    "palette": "{{ theme.data.palette }}",
-    "brand": "{{ theme.data.brand }}"
-  },
-  {% endfor %}
-};
-wa_data.palettes = {
-  {% for palette in collections.palette -%}
-  "{{ palette.fileSlug }}": {
-    "title": "{{ palette.data.title }}",
-  },
-  {% endfor %}
-};
-</script>
-<link href="{{ page.url }}../remix.css" rel="stylesheet">
-<script src="{{ page.url }}../remix.js" type="module"></script>
-{% endblock %}
-
-{% block header %}
-
-<iframe src='{{ page.url }}demo.html' id="demo"></iframe>
-
-<wa-details id="mix_and_match" class="wa-gap-m" >
-  <h4 slot="summary" data-no-anchor data-no-outline id="remix">
-    <wa-icon name="arrows-rotate"></wa-icon>
-    Remix this theme
-    <wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="suffix" variant="regular"></wa-icon>
-    <wa-tooltip for="what-is-remixing">Customize this theme by changing its colors and/or remixing it with design elements from other themes!</wa-tooltip>
-  </h4>
-
-  <wa-select name="colors" label="Colors from…" value="" clearable>
-    <wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
-    {% for theme in collections.theme | sort %}
-      {% set currentTheme = theme.fileSlug == page.fileSlug %}
-      <wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
-        <wa-card with-header>
-          <div slot="header">
-          {% include "svgs/theme-color.njk" %}
-          </div>
-          <span class="page-name">
-            {{ theme.data.title }}
-            {% if theme.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
-            {% if currentTheme %}<wa-badge variant="neutral" appearance="outlined">This theme</wa-badge>{% endif %}
-          </span>
-        </wa-card>
-      </wa-option>
-    {% endfor %}
-  </wa-select>
-
-  <wa-select name="palette" label="Palette" clearable>
-    <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
-    {% set defaultPalette = palette %}
-    {% for palette in collections.palette | sort %}
-      {% set currentPalette = palette.fileSlug == defaultPalette %}
-      <wa-option label="{{ palette.data.title }}" value="{{ palette.fileSlug if not currentPalette }}" {{ (palette.fileSlug if currentPalette) | attr('data-id') }}>
-        <wa-card with-header>
-          <div slot="header">
-          {% include "svgs/" + (palette.data.icon or "thumbnail-placeholder") + ".njk" %}
-          </div>
-          <span class="page-name">
-            {{ palette.data.title }}
-            {% if palette.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
-            {% if currentPalette %}<wa-badge variant="neutral" appearance="outlined">Theme default</wa-badge>{% endif %}
-          </span>
-        </wa-card>
-      </wa-option>
-    {% endfor %}
-    {% set palette = defaultPalette %}
-  </wa-select>
-
-  <wa-select name="brand" label="Brand color" value="" clearable>
-    <div class="selected-swatch" slot="prefix"></div>
-    {% for hue in hues %}
-      {% set currentBrand = hue == brand %}
-      <wa-option label="{{ hue | capitalize }}" value="{{ hue if not currentBrand }}" {{ (hue if currentBrand) | attr('data-id') }} style="--color: var(--wa-color-{{ hue }})">
-        {{ hue | capitalize }}
-        {% if currentBrand %}<wa-badge variant="neutral" appearance="outlined">Theme default</wa-badge>{% endif %}
-      </wa-option>
-    {% endfor %}
-  </wa-select>
-
-  <wa-select name="typography" label="Typography from…" clearable>
-    <wa-icon name="font-case" slot="prefix"></wa-icon>
-    {% for theme in collections.theme | sort %}
-      {% set currentTheme = theme.fileSlug == page.fileSlug %}
-      <wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
-        <wa-card with-header>
-          <div slot="header">
-          {% include "svgs/theme-typography.njk" %}
-          </div>
-          <span class="page-name">
-            {{ theme.data.title }}
-            {% if theme.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
-            {% if currentTheme %}<wa-badge variant="neutral" appearance="outlined">This theme</wa-badge>{% endif %}
-          </span>
-        </wa-card>
-      </wa-option>
-    {% endfor %}
-  </wa-select>
-</wa-details>
-
-<h2>Color</h2>
-{% set paletteURL = '/docs/palettes/' + palette + '/' %}
-
-
-<div class="index-grid">
-  {% set themePage = page %}
-  {% set page = paletteURL | getCollectionItemFromUrl %}
-  {% set pageSubtitle = "Default color palette" %}
-  {% include 'page-card.njk' %}
-  {% set page = themePage %}
-
-  <wa-card style="--header-background: var(--wa-color-{{ brand }})" class="wa-palette-{{ palette }}">
-    <div slot="header"></div>
-    <div class="page-name">{{ brand | capitalize }}</div>
-    <div class="wa-caption-s">Default brand color</div>
-  </wa-card>
-</div>
-{% endblock %}
-
-{% block afterContent %}
-
-<h2 id="usage">How to use this theme</h2>
-
-{% markdown %}
-You can import this theme from the Web Awesome CDN.
-
-{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-## Dark mode
-
-To activate the dark color scheme of the theme on any element and its contents, apply the class `wa-dark` to it.
-This means you can use different color schemes throughout the page.
-Here, we use the default theme with a dark sidebar:
-
-```html
-<html>
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
-  </head>
-
-  <body>
-    <nav class="wa-dark">
-      <!-- dark-themed sidebar -->
-    </nav>
-
-    <!-- light-themed content -->
-  </body>
-</html>
-```
-
-You can apply the class to the `<html>` element on your page to activate the dark color scheme for the entire page.
-
-```html
-<html class="wa-dark">
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/{{ page.fileSlug }}.css" />
-    <!-- other links, scripts, and metadata -->
-  </head>
-  <body>
-    <!-- page content -->
-  </body>
-</html>
-```
-### Detecting Color Scheme Preference
-
-Web Awesome's themes have both light and dark styles built in.
-However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
-This should be done at the application level.
-
-As a best practice, to provide a dark theme in your app, you should:
-
- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
- Allow the user to override the setting in your app
- Remember the user's preference and restore it on subsequent logins
-
-Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
-
-Assuming the user's preference is in a variable called `colorScheme` (values: `auto`, `light`, `dark`),
-you can use the following JS snippet to apply the `wa-dark` class to the `<html>` element accordingly:
-
-```js
-const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
-const applyDark = function (event = systemDark) {
-  const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
-  document.documentElement.classList.toggle('wa-dark', isDark);
-};
-systemDark.addEventListener('change', applyDark);
-applyDark();
-```
-
-{% endmarkdown %}
-{% endblock %}
--- a/docs/_layouts/utility.njk
+++ b/docs/_layouts/utility.njk
@@ -1,19 +0,0 @@
-{% extends '../_layouts/block.njk' %}
-
-{% block afterContent %}
-{% if file %}
-{% markdown %}
-## Opting In
-
-If you want to use this utility **only** without [all others](../), you can include the following CSS file from the Web Awesome CDN.
-
-{% set stylesheet = file %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-Want them all?
-Follow the [instructions on the Utilities overview page](../) to get all Web Awesome utilities.
-
-{% endmarkdown %}
-{% endif %}
-
-{% endblock %}
--- a/docs/_utils/anchor-headings.js
+++ b/docs/_utils/anchor-headings.js
@@ -37,8 +37,7 @@ export function anchorHeadingsPlugin(options = {}) {
      }

      // Look for headings
-      let selector = `:is(${options.headingSelector}):not([data-no-anchor], [data-no-anchor] *)`;
-      container.querySelectorAll(selector).forEach(heading => {
+      container.querySelectorAll(options.headingSelector).forEach(heading => {
        const hasAnchor = heading.querySelector('a');
        const existingId = heading.getAttribute('id');
        const clone = parse(heading.outerHTML);
--- a/docs/_utils/copy-code.js
+++ b/docs/_utils/copy-code.js
@@ -3,39 +3,30 @@ import { parse } from 'node-html-parser';
 /**
 * Eleventy plugin to add copy buttons to code blocks.
 */
-export function copyCodePlugin(eleventyConfig, options = {}) {
+export function copyCodePlugin(options = {}) {
  options = {
    container: 'body',
    ...options,
  };

-  let codeCount = 0;
-  eleventyConfig.addTransform('copy-code', content => {
-    const doc = parse(content, { blockTextElements: { code: true } });
-    const container = doc.querySelector(options.container);
+  return function (eleventyConfig) {
+    eleventyConfig.addTransform('copy-code', content => {
+      const doc = parse(content, { blockTextElements: { code: true } });
+      const container = doc.querySelector(options.container);

-    if (!container) {
-      return content;
-    }
-
-    // Look for code blocks
-    container.querySelectorAll('pre > code').forEach(code => {
-      const pre = code.closest('pre');
-      let preId = pre.getAttribute('id') || `code-block-${++codeCount}`;
-      let codeId = code.getAttribute('id') || `${preId}-inner`;
-
-      if (!code.getAttribute('id')) {
-        code.setAttribute('id', codeId);
-      }
-      if (!pre.getAttribute('id')) {
-        pre.setAttribute('id', preId);
+      if (!container) {
+        return content;
      }

-      // Add a copy button
-      pre.innerHTML += `<wa-icon-button href="#${preId}" class="block-link-icon" name="link"></wa-icon-button>
-        <wa-copy-button from="${codeId}" class="copy-button" hoist></wa-copy-button>`;
+      // Look for code blocks
+      container.querySelectorAll('pre > code').forEach(code => {
+        const pre = code.closest('pre');
+
+        // Add a copy button (we set the copy data at runtime to reduce page bloat)
+        pre.innerHTML = `<wa-copy-button class="copy-button" hoist></wa-copy-button>` + pre.innerHTML;
+      });
+
+      return doc.toString();
    });
-
-    return doc.toString();
-  });
+  };
 }
--- a/docs/_utils/filters.js
+++ b/docs/_utils/filters.js
@@ -38,12 +38,8 @@ export function getTitleFromUrl(url, collection) {
  return item?.data.title || '';
 }

-export function split(text, separator) {
-  return (text + '').split(separator).filter(Boolean);
-}
-
 export function breadcrumbs(url, { withCurrent = false } = {}) {
-  const parts = split(url, '/');
+  const parts = url.split('/').filter(Boolean);
  const ret = [];

  while (parts.length) {
@@ -74,211 +70,10 @@ export function breadcrumbs(url, { withCurrent = false } = {}) {
  return ret;
 }

-export function isObject(value) {
-  return typeof value === 'object' && value !== null && !Array.isArray(value);
+export function isArray(value) {
+  return Array.isArray(value);
 }

-export function isList(value) {
-  return Array.isArray(value) || value instanceof Set;
-}
-
-/** Get an Array or Set */
-export function toList(value) {
-  return isList(value) ? value : [value];
-}
-
-/**
- * Convert any value to something that can be iterated over with a for key, value loop.
- * Arrays and sets will be converted to a Map of value -> undefined
- */
-export function dict(value) {
-  if (value instanceof Map || isObject(value)) {
-    return value;
-  }
-
-  let list = toList(value);
-  return new Map([...list].map(item => [item, undefined]));
-}
-
-export function deepValue(obj, key) {
-  key = Array.isArray(key) ? key : key.split('.');
-  return key.reduce((subObj, property) => subObj?.[property], obj);
-}
-
-export function number(value, options) {
-  if (typeof value !== 'number' && isNaN(value)) {
-    return value;
-  }
-
-  let lang = options?.lang ?? 'en';
-  if (options?.lang) {
-    delete options.lang;
-  }
-
-  if (!options || Object.keys(options).length === 0) {
-    options = { maximumSignificantDigits: 3 };
-  }
-
-  return Number(value).toLocaleString(lang, options);
-}
-
-export function isNumeric(value) {
-  return typeof value === 'number' || (typeof value === 'string' && !isNaN(value));
-}
-
-export function isString(value) {
-  return typeof value === 'string';
-}
-
-export function isEmpty(value) {
-  return value === null || value === undefined || value === '';
-}
-
-function compare(a, b) {
-  let isEmptyA = isEmpty(a);
-  let isEmptyB = isEmpty(b);
-
-  if (isEmptyA) {
-    if (isEmptyB) {
-      return 0;
-    } else {
-      return 1;
-    }
-  } else if (isEmptyB) {
-    return -1;
-  }
-
-  // Both strings, and at least one non-numeric
-  if (isNumeric(a) || isNumeric(b)) {
-    return a - b;
-  }
-
-  return (a + '').localeCompare(b);
-}
-
-/** Sort an array of objects by one or more of their properties */
-export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
-  let keys = Array.isArray(by) ? by : Object.keys(by);
-
-  return arr.sort((a, b) => {
-    let aValues = keys.map(key => deepValue(a, key) ?? by[key]);
-    let bValues = keys.map(key => deepValue(b, key) ?? by[key]);
-
-    for (let i = 0; i < aValues.length; i++) {
-      let aVal = aValues[i];
-      let bVal = bValues[i];
-      let result = compare(aVal, bVal);
-
-      // They are not equal in terms of comparison OR we're at the last key
-      if (result !== 0 || i === aValues.length - 1) {
-        return result;
-      }
-    }
-  });
-}
-
-/**
- * Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
- * @param {object[]} collection
- * @param { Object<string, string> | (string | Object<string, string>)[]} [tags] The tags to group by. If not provided/empty, defaults to grouping by all tags.
- * @returns { Object.<string, object[]> } An object with keys for each tag, and an array of items for each tag.
- */
-export function groupByTags(collection, tags) {
-  if (!collection) {
-    console.error(`Empty collection passed to groupByTags() to group by ${JSON.stringify(tags)}`);
-  }
-  if (!tags) {
-    // Default to grouping by union of all tags
-    tags = Array.from(new Set(collection.flatMap(item => item.data.tags)));
-  } else if (Array.isArray(tags)) {
-    // May contain objects of one-off tag -> label mappings
-    tags = tags.map(tag => (typeof tag === 'object' ? Object.keys(tag)[0] : tag));
-  } else if (typeof tags === 'object') {
-    // tags is an object of tags to labels, so we just want the keys
-    tags = Object.keys(tags);
-  }
-
-  let ret = Object.fromEntries(tags.map(tag => [tag, []]));
-  ret.other = [];
-
-  for (let item of collection) {
-    let categorized = false;
-
-    for (let tag of tags) {
-      if (item.data.tags.includes(tag)) {
-        ret[tag].push(item);
-        categorized = true;
-      }
-    }
-
-    if (!categorized) {
-      ret.other.push(item);
-    }
-  }
-
-  // Remove empty categories
-  for (let category in ret) {
-    if (ret[category].length === 0) {
-      delete ret[category];
-    }
-  }
-
-  return ret;
-}
-
-export function getCategoryTitle(category, categories) {
-  let title;
-  if (Array.isArray(categories)) {
-    // Find relevant entry
-    // [{id: "Title"}, id2, ...]
-    title = categories.find(entry => typeof entry === 'object' && entry?.[category])?.[category];
-  } else if (typeof categories === 'object') {
-    // {id: "Title", id2: "Title 2", ...}
-    title = categories[category];
-  }
-
-  if (title) {
-    return title;
-  }
-
-  // Capitalized
-  return category.charAt(0).toUpperCase() + category.slice(1);
-}
-
-const IDENTITY = x => x;
-
-/**
- * Helper to print out one or more HTML attributes, especially conditional ones.
- * Usage in 11ty:
- * - Single attribute: `<foo{{ value | attr(name) }}>`
- * - Multiple attributes: `<foo{{ { name1: value1, name2: value2 } | attr }}>`
- *
- * @overload
- * @param {any} value - The attribute value If falsey, the attribute is not printed. If `true` the attribute is printed without a value.
- * @param {string} name - The name of the attribute
- *
- * @overload
- * @param {Object<string, any>} obj - Map of attribute names to values
- *
- * @returns {string} The attribute string. No `| safe` is needed.
- */
-export function attr(value, name) {
-  const safe = this?.env.filters.safe ?? IDENTITY;
-
-  if (arguments.length === 1 && value && typeof value === 'object') {
-    // Called with a single object argument of names to values
-    let ret = Object.entries(obj)
-      .map(([name, value]) => attr(value, name))
-      .join('');
-    return safe(ret);
-  }
-
-  if (!value) {
-    // false, "", null, undefined
-    return '';
-  }
-
-  let ret = ' ' + name + (value === true ? '' : `="${value}"`);
-
-  return safe(ret);
+export function toArray(value) {
+  return isArray(value) ? value : [value];
 }
--- a/docs/assets/examples/page-demo/demo.css
+++ b/docs/assets/examples/page-demo/demo.css
--- a/docs/assets/examples/page-demo/demo.js
+++ b/docs/assets/examples/page-demo/demo.js
@@ -1,3 +1,4 @@
+await customElements.whenDefined('wa-checkbox');
 let container = document.getElementById('page_slots_demo');

 let fieldset = container.querySelector('fieldset');
@@ -7,18 +8,9 @@ let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][hre
  .join('\n');
 let includes = `${stylesheets}
  <script src="/dist/webawesome.loader.js" type="module"></script>
-  <link rel="stylesheet" href="./demo-page.css">`;
-
-async function render() {
-  await customElements.whenDefined('wa-checkbox');
-
-  // Let checkboxes update their "state"
-  await Promise.allSettled(
-    Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]')).map(checkbox => {
-      return checkbox.updateComplete;
-    }),
-  );
+  <link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;

+function render() {
  let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:state(checked)'));
  let slotsHTML = slots
    .map(slot => {
@@ -47,5 +39,5 @@ async function render() {
    iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
  }
 }
-await render();
 fieldset?.addEventListener('input', render);
+render();
--- a/docs/assets/examples/page-demo/page.css
+++ b/docs/assets/examples/page-demo/page.css
@@ -26,7 +26,7 @@ wa-page {

 .slot-content {
  padding: var(--wa-space-m);
-  border-radius: var(--wa-border-radius-m);
+  border-radius: var(--wa-border-radius-s);
  align-content: center;
  justify-content: center;
  text-align: center;
@@ -52,8 +52,8 @@ wa-page {
  }

  &[slot^='navigation'] {
-    background: var(--wa-color-purple-80);
-    color: var(--wa-color-purple-20);
+    background: var(--wa-color-violet-80);
+    color: var(--wa-color-violet-20);
  }

  strong {
--- a/docs/assets/images/themer/migration/blog_feature.jpg
+++ b/docs/assets/images/themer/migration/blog_feature.jpg
--- a/docs/assets/images/themer/migration/carousel-1.jpg
+++ b/docs/assets/images/themer/migration/carousel-1.jpg
--- a/docs/assets/images/themer/migration/carousel-2.jpg
+++ b/docs/assets/images/themer/migration/carousel-2.jpg
--- a/docs/assets/images/themer/migration/carousel-3.jpg
+++ b/docs/assets/images/themer/migration/carousel-3.jpg
--- a/docs/assets/images/themer/migration/keymaker.jpg
+++ b/docs/assets/images/themer/migration/keymaker.jpg
--- a/docs/assets/images/themer/migration/morpheus.jpg
+++ b/docs/assets/images/themer/migration/morpheus.jpg
--- a/docs/assets/images/themer/migration/seraph.jpg
+++ b/docs/assets/images/themer/migration/seraph.jpg
--- a/docs/docs/components/cheatsheet/cheatsheet.js
+++ b/docs/docs/components/cheatsheet/cheatsheet.js
@@ -73,4 +73,4 @@ if (name_search.value) {
  filterByName(name_search.value);
 }

-name_search_group.addEventListener('input', e => filterByName(name_search.value));
+name_search_group.addEventListener('wa-input', e => filterByName(name_search.value));
--- a/docs/assets/scripts/code-examples.js
+++ b/docs/assets/scripts/code-examples.js
@@ -19,10 +19,10 @@ document.addEventListener('click', event => {
    const html =
      `<script type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
      `<link rel="stylesheet" href="${cdnUrl}styles/themes/default.css">\n` +
-      `<link rel="stylesheet" href="${cdnUrl}styles/webawesome.css">\n` +
+      `<link rel="stylesheet" href="${cdnUrl}styles/applied.css">\n` +
      `<link rel="stylesheet" href="${cdnUrl}styles/utilities.css">\n\n` +
      `${code.textContent}`;
-    const css = 'html > body {\n  padding: 2rem !important;\n}';
+    const css = 'html > body {\n  font: 16px sans-serif;\n  padding: 2rem;\n}';
    const js = '';

    const form = document.createElement('form');
--- a/docs/assets/scripts/color-scheme.js
+++ b/docs/assets/scripts/color-scheme.js
@@ -0,0 +1,59 @@
+//
+// Color scheme selector
+//
+(() => {
+  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-${presetTheme}-dark`, window.isDark());
+  }
+
+  function updateSelection() {
+    const menu = document.querySelector('#color-scheme-selector wa-menu');
+    if (!menu) return;
+    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
+      await customElements.whenDefined(item.localName);
+      await item.updateComplete;
+      item.checked = item.getAttribute('value') === colorScheme;
+    });
+  }
+
+  let colorScheme = window.getColorScheme();
+
+  // Selection is not preserved when changing page, so update when opening dropdown
+  document.addEventListener('wa-show', event => {
+    const colorSchemeSelector = event.target.closest('#color-scheme-selector');
+    if (!colorSchemeSelector) return;
+    updateSelection();
+  });
+
+  // Listen for selections
+  document.addEventListener('wa-select', event => {
+    const menu = event.target.closest('#color-scheme-selector wa-menu');
+    if (!menu) return;
+    setColorScheme(event.detail.item.value);
+  });
+
+  // Update the color scheme when the preference changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setColorScheme(colorScheme));
+
+  // Toggle with backslash
+  document.addEventListener('keydown', event => {
+    if (
+      event.key === '\\' &&
+      !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
+    ) {
+      event.preventDefault();
+      setColorScheme(window.isDark() ? 'light' : 'dark');
+    }
+  });
+
+  // Set the initial color scheme and sync the UI
+  setColorScheme(colorScheme);
+})();
--- a/docs/assets/scripts/copy-code.js
+++ b/docs/assets/scripts/copy-code.js
@@ -0,0 +1,15 @@
+function setCopyValue() {
+  document.querySelectorAll('.copy-button').forEach(copyButton => {
+    const pre = copyButton.closest('pre');
+    const code = pre?.querySelector('code');
+
+    if (code) {
+      copyButton.value = code.textContent;
+    }
+  });
+}
+
+// Set data for all copy buttons when the page loads
+setCopyValue();
+
+document.addEventListener('turbo:load', setCopyValue);
--- a/docs/assets/scripts/filter.js
+++ b/docs/assets/scripts/filter.js
@@ -1,25 +0,0 @@
-function updateResults(input) {
-  const filter = input.value.toLowerCase().trim();
-  let filtered = Boolean(filter);
-
-  for (let grid of document.querySelectorAll('.index-grid')) {
-    grid.classList.toggle('filtered', filtered);
-
-    for (let item of grid.querySelectorAll('a:has(> wa-card)')) {
-      let isMatch = true;
-
-      if (filter) {
-        const content = item.textContent.toLowerCase() + ' ' + (item.getAttribute('data-keywords') + ' ');
-        isMatch = content.includes(filter);
-      }
-
-      item.hidden = !isMatch;
-    }
-  }
-}
-
-document.documentElement.addEventListener('input', e => {
-  if (e.target?.matches('#block-filter wa-input')) {
-    updateResults(e.target);
-  }
-});
--- a/docs/assets/scripts/preset-theme-picker.js
+++ b/docs/assets/scripts/preset-theme-picker.js
@@ -1,52 +0,0 @@
-import { domChange, nextFrame, ThemeAspect } from './theme-picker.js';
-
-const presetTheme = new ThemeAspect({
-  defaultValue: 'default',
-  key: 'presetTheme',
-  picker: 'wa-select.preset-theme-selector',
-
-  applyChange(options = {}) {
-    const oldStylesheets = [...document.querySelectorAll('#theme-stylesheet')];
-    const oldStylesheet = oldStylesheets.pop();
-
-    if (oldStylesheets.length > 0) {
-      // Remove all but the last one
-      for (let stylesheet of oldStylesheets) {
-        stylesheet.remove();
-      }
-    }
-
-    const href = `/dist/styles/themes/${this.value}.css`;
-
-    if (!oldStylesheet || oldStylesheet.getAttribute('href') !== href) {
-      const newStylesheet = document.createElement('link');
-      Object.assign(newStylesheet, { href, id: 'theme-stylesheet', rel: 'preload', as: 'style' });
-      oldStylesheet.after(newStylesheet);
-
-      newStylesheet.addEventListener(
-        'load',
-        e => {
-          domChange(
-            async instant => {
-              // Swap stylesheets
-              newStylesheet.rel = 'stylesheet';
-
-              if (instant) {
-                // If no VT, delay by 1 frame to make it smoother
-                await nextFrame();
-              }
-
-              oldStylesheet.remove();
-            },
-            { behavior: 'smooth', ...options },
-          );
-        },
-        { once: true },
-      );
-    }
-  },
-});
-
-window.addEventListener('turbo:render', e => {
-  presetTheme.applyChange({ behavior: 'instant' });
-});
--- a/docs/assets/scripts/preset-theme.js
+++ b/docs/assets/scripts/preset-theme.js
@@ -0,0 +1,86 @@
+//
+// Preset theme selector
+//
+(() => {
+  function setPresetTheme(newPresetTheme) {
+    presetTheme = newPresetTheme;
+    localStorage.setItem('presetTheme', presetTheme);
+
+    const stylesheet = document.getElementById('theme-stylesheet');
+
+    const newStylesheet = Object.assign(document.createElement('link'), {
+      href: `/dist/styles/themes/${presetTheme}.css`,
+      rel: 'preload',
+      as: 'style',
+    });
+
+    newStylesheet.addEventListener(
+      'load',
+      () => {
+        newStylesheet.rel = 'stylesheet';
+        newStylesheet.id = stylesheet.id;
+        requestAnimationFrame(() => {
+          stylesheet.remove();
+        });
+      },
+      { once: true },
+    );
+
+    document.head.append(newStylesheet);
+
+    // Update the UI
+    updateSelection();
+
+    // Toggle the dark mode class
+    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
+  }
+
+  function updateSelection(container = document) {
+    const menu = container.querySelector('#preset-theme-selector wa-menu');
+    if (!menu) return;
+    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
+      const isChecked = item.getAttribute('value') === presetTheme;
+      if (isChecked) {
+        container.querySelector('#preset-theme-selector__text').textContent = item.innerText;
+      }
+      await customElements.whenDefined(item.localName);
+      await item.updateComplete;
+      item.checked = isChecked;
+    });
+  }
+
+  let presetTheme = window.getPresetTheme();
+
+  // Selection is not preserved when changing page, so update when opening dropdown
+  document.addEventListener('wa-show', event => {
+    const presetThemeSelector = event.target.closest('#preset-theme-selector');
+    if (!presetThemeSelector) return;
+    updateSelection();
+  });
+
+  // Listen for selections
+  document.addEventListener('wa-select', event => {
+    const menu = event.target.closest('#preset-theme-selector wa-menu');
+    if (!menu) return;
+    setPresetTheme(event.detail.item.value);
+  });
+
+  // Update the color scheme when the preference changes
+  window.matchMedia('(prefers-preset-theme: dark)').addEventListener('change', () => setPresetTheme(presetTheme));
+  updateSelection();
+
+  /**
+   * Without this, there's a flash of the incorrect preset theme.
+   */
+  function updateSelectionBeforeTurboLoad(e) {
+    const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
+    if (!newElement) {
+      return;
+    }
+    updateSelection(newElement);
+  }
+
+  ['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
+    document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
+  });
+})();
--- a/docs/assets/scripts/prism-downloaded.js
+++ b/docs/assets/scripts/prism-downloaded.js
--- a/docs/assets/scripts/prism.js
+++ b/docs/assets/scripts/prism.js
@@ -1,8 +0,0 @@
-globalThis.Prism = globalThis.Prism || {};
-globalThis.Prism.manual = true;
-
-await import('./prism-downloaded.js');
-
-Prism.plugins.customClass.prefix('code-');
-
-export default Prism;
--- a/docs/assets/scripts/search.js
+++ b/docs/assets/scripts/search.js
@@ -9,7 +9,6 @@ const icons = {
  component: 'puzzle-piece',
  document: 'file',
  home: 'house',
-  native: 'code',
  theme: 'palette',
 };
 let searchTimeout;
@@ -167,7 +166,6 @@ async function updateResults(query = '') {
      li.setAttribute('data-selected', index === 0 ? 'true' : 'false');

      if (page.url === '/') icon = icons.home;
-      if (page.url.startsWith('/docs/native')) icon = icons.native;
      if (page.url.startsWith('/docs/components')) icon = icons.component;
      if (page.url.startsWith('/docs/theme') || page.url.startsWith('/docs/restyle')) icon = icons.theme;

--- a/docs/assets/scripts/sidebar-tweaks.js
+++ b/docs/assets/scripts/sidebar-tweaks.js
@@ -1,206 +0,0 @@
-const sidebar = (globalThis.sidebar = {});
-
-sidebar.palettes = {
-  render() {
-    if (this.saved.length === 0) {
-      return;
-    }
-
-    for (let palette of this.saved) {
-      sidebar.palette.render(palette);
-    }
-
-    sidebar.updateCurrent();
-  },
-
-  saved: localStorage.savedPalettes ? JSON.parse(localStorage.savedPalettes) : [],
-
-  save(saved = this.saved) {
-    this.saved = saved ?? [];
-
-    if (saved.length > 0) {
-      localStorage.savedPalettes = JSON.stringify(saved);
-    } else {
-      delete localStorage.savedPalettes;
-    }
-  },
-};
-
-sidebar.palette = {
-  getUid() {
-    let savedPalettes = sidebar.palettes.saved;
-    let uids = new Set(savedPalettes.map(p => p.uid));
-
-    if (savedPalettes.length === 0) {
-      return 1;
-    }
-
-    // Find first available number
-    for (let i = 1; i < savedPalettes.length + 1; i++) {
-      if (!uids.has(i)) {
-        return i;
-      }
-    }
-  },
-
-  equals(p1, p2) {
-    if (!p1 || !p2) {
-      return false;
-    }
-
-    return p1.id === p2.id && p1.uid === p2.uid;
-  },
-
-  delete(palette) {
-    let savedPalettes = sidebar.palettes.saved;
-    let count = savedPalettes.length;
-    if (count === 0) {
-      return;
-    }
-
-    // TODO improve UX of this
-    if (!confirm(`Are you sure you want to delete palette “${palette.title}”?`)) {
-      return;
-    }
-
-    savedPalettes = savedPalettes.filter(p => !sidebar.palette.equals(palette, p));
-
-    if (savedPalettes.length === count) {
-      // Nothing was removed
-      return;
-    }
-
-    // Update UI
-    let pathname = `/docs/palettes/${palette.id}/`;
-    let url = pathname + palette.search;
-    let uls = new Set();
-
-    for (let a of document.querySelectorAll(`#sidebar a[href="${url}"]`)) {
-      let li = a.closest('li');
-      let ul = li.closest('ul');
-      uls.add(ul);
-      li.remove();
-    }
-
-    // Remove empty lists
-    for (let ul of uls) {
-      if (!ul.children.length) {
-        ul.remove();
-      }
-    }
-
-    sidebar.updateCurrent();
-
-    sidebar.palettes.save(savedPalettes);
-
-    if (sidebar.palette.equals(globalThis.paletteApp?.saved, palette)) {
-      paletteApp.saved = null;
-    }
-  },
-
-  getSaved(palette, savedPalettes = sidebar.palettes.saved) {
-    return savedPalettes.find(p => sidebar.palette.equals(p, palette));
-  },
-
-  render(palette) {
-    // Find existing <a>
-    let { title, id, search, uid } = palette;
-
-    for (let a of document.querySelectorAll(`#sidebar a[href^="/docs/palettes/${id}/"][data-uid="${uid}"]`)) {
-      // Palette already in sidebar, just update it
-      a.textContent = palette.title;
-      a.href = `/docs/palettes/${id}/${search}`;
-      return;
-    }
-
-    let pathname = `/docs/palettes/${id}/`;
-    let url = pathname + search;
-    let parentA = document.querySelector(`a[href="${pathname}"]`);
-    let parentLi = parentA?.closest('li');
-    let a;
-
-    if (parentLi) {
-      a = Object.assign(document.createElement('a'), { href: url, textContent: title });
-      a.dataset.uid = uid;
-      let badges = [...parentLi.querySelectorAll('wa-badge')].map(badge => badge.cloneNode(true));
-      let ul = parentLi.querySelector('ul') ?? parentLi.appendChild(document.createElement('ul'));
-      let li = document.createElement('li');
-      let deleteButton = Object.assign(document.createElement('wa-icon-button'), {
-        name: 'trash',
-        label: 'Delete',
-        className: 'delete',
-      });
-
-      deleteButton.addEventListener('click', () => {
-        let palette = { id, uid, title: a.textContent, search: a.search };
-        sidebar.palette.delete(palette);
-      });
-
-      li.append(a, ' ', ...badges, deleteButton);
-      ul.appendChild(li);
-    }
-  },
-
-  save(palette, saved) {
-    let savedPalettes = sidebar.palettes.saved;
-    let existing = this.getSaved(saved ?? palette, savedPalettes);
-    let oldValues;
-
-    if (existing) {
-      // Rename
-      oldValues = { ...existing };
-      Object.assign(existing, palette);
-    } else {
-      savedPalettes.push(palette);
-    }
-
-    this.render(palette, oldValues);
-    sidebar.updateCurrent();
-
-    sidebar.palettes.save(savedPalettes);
-  },
-};
-
-sidebar.updateCurrent = function () {
-  // Find the sidebar link with the longest shared prefix with the current URL
-  let pathParts = location.pathname.split('/').filter(Boolean);
-  let prefixes = [];
-
-  if (pathParts.length === 1) {
-    // If at /docs/ we just use that, otherwise we want at least two parts (/docs/xxx/)
-    prefixes.push('/' + pathParts[0] + '/');
-  } else {
-    for (let i = 2; i <= pathParts.length; i++) {
-      prefixes.push('/' + pathParts.slice(0, i).join('/') + '/');
-    }
-  }
-
-  // Last prefix includes the search too (if any)
-  if (location.search) {
-    let params = new URLSearchParams(location.search);
-    params.sort();
-    prefixes.push(prefixes.at(-1) + location.search);
-  }
-
-  // We want to start from the longest prefix
-  prefixes.reverse();
-
-  for (let prefix of prefixes) {
-    let a = document.querySelector(`#sidebar a[href^="${prefix}"]`);
-
-    if (a) {
-      for (let current of document.querySelectorAll('#sidebar a.current')) {
-        current.classList.remove('current');
-      }
-      a.classList.add('current');
-      break;
-    }
-  }
-};
-
-sidebar.render = function () {
-  this.palettes.render();
-};
-
-sidebar.render();
-window.addEventListener('turbo:render', () => sidebar.render());
--- a/docs/assets/scripts/sync-iframe-height.js
+++ b/docs/assets/scripts/sync-iframe-height.js
@@ -1,37 +0,0 @@
-/**
- * Sync iframe height with its content page (for same-origin iframes)
- * NOT CURRENTLY USED ANYWHERE
- */
-for (let iframe of document.querySelectorAll('iframe')) {
-  if (iframe.contentDocument) {
-    // Already loaded
-    syncIframeHeight(iframe);
-  }
-
-  iframe.onload = () => {
-    console.log('iframe loaded');
-    if (iframe.contentDocument) {
-      // Same origin
-      iframe.contentWindow.iframe = iframe;
-      syncIframeHeight(iframe);
-      const resizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-          if (entry.target === iframe.contentDocument.body) {
-            syncIframeHeight(iframe);
-          }
-        }
-      });
-
-      resizeObserver.observe(iframe.contentDocument.body);
-      window.addEventListener('turbo:render', syncIframeHeight(iframe));
-    }
-  };
-}
-
-function syncIframeHeight(iframe) {
-  iframe.style.height = '0px';
-
-  requestAnimationFrame(() => {
-    iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
-  });
-}
--- a/docs/assets/scripts/theme-picker.js
+++ b/docs/assets/scripts/theme-picker.js
@@ -1,119 +0,0 @@
-// Helper for view transitions
-export function domChange(fn, { behavior = 'smooth' } = {}) {
-  const canUseViewTransitions =
-    document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-  if (canUseViewTransitions && behavior === 'smooth') {
-    document.startViewTransition(fn);
-  } else {
-    fn(true);
-  }
-}
-
-export function nextFrame() {
-  return new Promise(resolve => requestAnimationFrame(resolve));
-}
-
-export class ThemeAspect {
-  constructor(options) {
-    Object.assign(this, options);
-    this.set();
-
-    // Update when local storage changes.
-    // That way changes in one window will propagate to others (including iframes).
-    window.addEventListener('storage', event => {
-      if (event.key === this.key) {
-        this.set();
-      }
-    });
-
-    // Listen for selections
-    document.addEventListener('change', event => {
-      const picker = event.target.closest(this.picker);
-      if (picker) {
-        this.set(picker.value);
-      }
-    });
-
-    ['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
-      document.addEventListener(eventName, e => {
-        const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
-        if (newElement) {
-          this.syncUI(newElement);
-        }
-      });
-    });
-  }
-
-  get() {
-    return localStorage.getItem(this.key) ?? this.defaultValue;
-  }
-
-  computed = {};
-
-  get computedValue() {
-    if (this.value in this.computed) {
-      return this.computed[this.value];
-    }
-
-    return this.value;
-  }
-
-  set(value = this.get()) {
-    if (value === this.value) {
-      return;
-    }
-
-    this.value = value;
-
-    if (this.value === this.defaultValue) {
-      localStorage.removeItem(this.key);
-    } else {
-      localStorage.setItem(this.key, this.value);
-    }
-
-    this.applyChange();
-    this.syncUI();
-  }
-
-  syncUI(container = document) {
-    for (let picker of container.querySelectorAll(this.picker)) {
-      picker.setAttribute('value', this.value);
-      picker.value = this.value;
-    }
-  }
-}
-
-const colorScheme = new ThemeAspect({
-  defaultValue: 'auto',
-  key: 'colorScheme',
-  picker: 'wa-select.color-scheme-selector',
-
-  computed: {
-    get auto() {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    },
-  },
-
-  applyChange() {
-    // Toggle the dark mode class
-    domChange(() => {
-      let dark = this.computedValue === 'dark';
-      document.documentElement.classList.toggle(`wa-dark`, dark);
-    });
-  },
-});
-
-// Update the color scheme when the preference changes
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => colorScheme.set());
-
-// Toggle color scheme with backslash
-document.addEventListener('keydown', event => {
-  if (
-    event.key === '\\' &&
-    !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
-  ) {
-    event.preventDefault();
-    colorScheme.set(theming.colorScheme.resolvedValue === 'dark' ? 'light' : 'dark');
-  }
-});
--- a/docs/assets/scripts/tweak.js
+++ b/docs/assets/scripts/tweak.js
@@ -1,6 +0,0 @@
-/**
- * Get import code for remixed themes and tweaked palettes.
- */
-export { theme as getThemeCode } from './tweak/code.js';
-export { cdnUrl, hueRanges, hues, selectors, tints, urls } from './tweak/data.js';
-export { default as Permalink } from './tweak/permalink.js';
--- a/docs/assets/scripts/tweak/code.js
+++ b/docs/assets/scripts/tweak/code.js
@@ -1,49 +0,0 @@
-/**
- * Get import code for remixed themes and tweaked palettes.
- */
-import { urls } from './data.js';
-
-export function cssImport(url, options = {}) {
-  let { language = 'html', cdnUrl = '/dist/', attributes } = options;
-  url = cdnUrl + url;
-
-  if (language === 'css') {
-    return `@import url('${url}');`;
-  } else {
-    attributes = attributes ? ` ${attributes}` : '';
-    return `<link rel="stylesheet" href="${url}"${attributes} />`;
-  }
-}
-
-export function cssLiteral(value, options = {}) {
-  let { language = 'html' } = options;
-
-  if (language === 'css') {
-    return value;
-  } else {
-    return `<style>\n${value}\n</style>`;
-  }
-}
-
-export function theme(base, params, options) {
-  let ret = [];
-
-  if (base) {
-    ret.push(urls.theme(base));
-  }
-
-  ret.push(
-    ...Object.entries(params)
-      .filter(([aspect, id]) => Boolean(id))
-      .map(([aspect, id]) => urls[aspect](id)),
-  );
-
-  return ret.map(url => cssImport(url, options)).join('\n');
-}
-
-export function cssRule(selector, declarations, { indent = '  ' } = {}) {
-  selector = Array.isArray(selector) ? selector.flat().join(',\n') : selector;
-  declarations = Array.isArray(declarations) ? declarations.flat() : declarations;
-  declarations = declarations.map(declaration => indent + declaration.trim()).join('\n');
-  return `${selector} {\n${declarations.trimEnd()}\n}`;
-}
--- a/docs/assets/scripts/tweak/data.js
+++ b/docs/assets/scripts/tweak/data.js
@@ -1,34 +0,0 @@
-/**
- * Data related to theme remixing and palette tweaking
- * Must work in both browser and Node.js
- */
-export const cdnUrl = globalThis.document ? document.documentElement.dataset.cdnUrl : '/dist/';
-
-export const urls = {
-  theme: id => `styles/themes/${id}.css`,
-  colors: id => `styles/themes/${id}/color.css`,
-  palette: id => `styles/color/${id}.css`,
-  brand: id => `styles/brand/${id}.css`,
-  typography: id => `styles/themes/${id}/typography.css`,
-};
-
-export const selectors = {
-  palette: id =>
-    [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${id}`].join(',\n'),
-};
-
-export const hueRanges = {
-  red: { min: 5, max: 35 }, // 30
-  orange: { min: 35, max: 60 }, // 25
-  yellow: { min: 60, max: 112 }, // 45
-  green: { min: 112, max: 170 }, // 55
-  cyan: { min: 170, max: 220 }, // 50
-  blue: { min: 220, max: 265 }, // 45
-  indigo: { min: 265, max: 290 }, // 25
-  purple: { min: 290, max: 320 }, // 30
-  pink: { min: 320, max: 365 }, // 45
-};
-
-export const hues = Object.keys(hueRanges);
-
-export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];
--- a/docs/assets/scripts/tweak/permalink.js
+++ b/docs/assets/scripts/tweak/permalink.js
@@ -1,81 +0,0 @@
-const IDENTITY = x => x;
-
-export default class Permalink extends URLSearchParams {
-  /** Params changed since last URL I/O */
-  changed = false;
-
-  constructor(params) {
-    super(location.search);
-    this.params = params;
-  }
-
-  toJSON() {
-    return Object.fromEntries(this.entries());
-  }
-
-  #mappings = new WeakMap();
-
-  mapObject(obj, mapping = {}) {
-    this.#mappings.set(obj, mapping);
-  }
-
-  readFrom(obj) {
-    let mapping = this.#mappings.get(obj) ?? {};
-    let { keyFrom = IDENTITY, valueFrom = IDENTITY } = mapping;
-
-    for (let key in obj) {
-      let value = obj[key];
-      let mappedValue = valueFrom(value);
-      let mappedKey = keyFrom(key);
-      this.set(mappedKey, mappedValue);
-    }
-  }
-
-  writeTo(obj) {
-    let mapping = this.#mappings.get(obj) ?? {};
-    let { keyTo = IDENTITY, valueTo = IDENTITY, canExtend = false } = mapping;
-
-    for (let [key, value] of this) {
-      let mappedKey = keyTo(key);
-      let mappedValue = valueTo(value);
-
-      if (canExtend || mappedKey in obj) {
-        obj[mappedKey] = mappedValue;
-      }
-    }
-  }
-
-  set(key, value, defaultValue) {
-    let oldValue = this.get(key);
-
-    if (!value || value == defaultValue) {
-      super.delete(key);
-
-      if (oldValue) {
-        this.changed = true;
-      }
-    } else {
-      super.set(key, value);
-
-      if (String(value) !== String(oldValue)) {
-        this.changed = true;
-      }
-    }
-
-    this.sort();
-  }
-
-  /**
-   * Update page URL if it has changed since last time
-   */
-  updateLocation() {
-    if (this.changed) {
-      // If there’s already a search, replace it.
-      // We don’t want to clog the user’s history while they iterate
-      let search = this.toString();
-      let historyAction = location.search && search ? 'replaceState' : 'pushState';
-      history[historyAction](null, '', `?${search}`);
-      this.changed = false;
-    }
-  }
-}
--- a/docs/assets/styles/code-examples.css
+++ b/docs/assets/styles/code-examples.css
@@ -1,6 +1,6 @@
 .code-example {
  border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-  border-radius: var(--wa-border-radius-l);
+  border-radius: var(--wa-border-radius-m);
  color: var(--wa-color-text-normal);
  margin-block-end: var(--wa-flow-spacing);
 }
@@ -41,8 +41,8 @@
  border-bottom: none;

  pre {
-    border-bottom-right-radius: var(--wa-border-radius-l);
-    border-bottom-left-radius: var(--wa-border-radius-l);
+    border-bottom-right-radius: var(--wa-border-radius-m);
+    border-bottom-left-radius: var(--wa-border-radius-m);
  }
 }

@@ -62,11 +62,11 @@

    &:first-of-type {
      border-left: none;
-      border-bottom-left-radius: var(--wa-border-radius-l);
+      border-bottom-left-radius: var(--wa-border-radius-m);
    }

    &:last-of-type {
-      border-bottom-right-radius: var(--wa-border-radius-l);
+      border-bottom-right-radius: var(--wa-border-radius-m);
    }

    &:focus-visible {
--- a/docs/assets/styles/code-highlighter.css
+++ b/docs/assets/styles/code-highlighter.css
@@ -1,12 +1,6 @@
 pre {
  background-color: var(--wa-color-gray-20);
  color: white;
-
-  /* Ensures a discernible background color in dark mode
-   * Useful for themes that use gray-20 as --wa-color-surface-default  */
-  .wa-dark & {
-    background-color: var(--wa-color-surface-lowered);
-  }
 }
 .code-comment,
 .code-prolog,
--- a/docs/assets/styles/copy-code.css
+++ b/docs/assets/styles/copy-code.css
@@ -6,7 +6,7 @@ wa-copy-button.copy-button {
  right: 0.25rem;
  font-family: var(--wa-font-family-body);
  color: var(--wa-color-gray-80);
-  border-radius: var(--wa-border-radius-m);
+  border-radius: var(--wa-border-radius-s);
  padding: 0.25rem;

  &:hover {
@@ -27,19 +27,3 @@ wa-copy-button.copy-button {
    opacity: 1;
  }
 }
-
-.block-link-icon {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-end: calc(100% + var(--wa-space-s));
-
-  transition: var(--wa-transition-slow);
-
-  &:not(:hover, :focus) {
-    opacity: 50%;
-  }
-
-  :not(:hover, :focus-within) > & {
-    opacity: 0;
-  }
-}
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -10,8 +10,8 @@
  --wa-brand-grey: #30323b;
 }

-.wa-dark .only-light,
-.only-dark:not(.wa-dark, .wa-dark *) {
+html.wa-theme-default-dark .only-light,
+html:not(.wa-theme-default-dark) .only-dark {
  display: none;
 }

@@ -22,7 +22,7 @@ wa-page {
 /* Header */
 wa-page::part(header) {
  background-color: var(--wa-color-surface-default);
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
+  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
 }

 wa-page::part(body) {
@@ -34,6 +34,10 @@ wa-page::part(header-actions) {
 }

 wa-page > header {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
  padding-inline: var(--wa-space-xl);

  a[href='/'] {
@@ -77,7 +81,7 @@ wa-page > header {
  }
  wa-button#search-trigger {
    --background-color: var(--wa-form-control-background-color);
-    --border-color: var(--wa-form-control-border-color);
+    --border-color: var(--wa-form-control-resting-color);
  }
  #search-trigger kbd {
    font-size: var(--wa-font-size-2xs);
@@ -100,9 +104,17 @@ wa-page > header {
  wa-details {
    border: none;
    background: none;
+  }
+
+  wa-details::part(header) {
    padding: 0;
  }

+  wa-details::part(content) {
+    padding-inline: 0;
+    padding-block-end: 0;
+  }
+
  ul {
    border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    font-size: var(--wa-font-size-s);
@@ -156,7 +168,7 @@ wa-page > header {
 }

 /* Pro badges */
-wa-badge.pro {
+wa-badge.pro::part(base) {
  background-color: var(--wa-brand-orange);
  border-color: var(--wa-brand-orange);
 }
@@ -188,29 +200,6 @@ wa-badge.pro {
      }
    }
  }
-
-  wa-icon-button.delete {
-    vertical-align: -0.2em;
-    margin-inline-start: var(--wa-space-xs);
-
-    &:not(li:hover > *, :focus) {
-      opacity: 0;
-    }
-  }
-}
-
-wa-icon-button.delete {
-  &:hover {
-    color: var(--wa-color-danger-on-quiet);
-  }
-
-  &::part(base):hover {
-    background: var(--wa-color-danger-fill-quiet);
-  }
-
-  &:not(:hover, :focus) {
-    opacity: 0.5;
-  }
 }

 #sidebar-close-button {
@@ -234,20 +223,6 @@ wa-page::part(menu) {
  scrollbar-width: thin;
 }

-wa-page[view='mobile'] :is([slot='navigation-header'], [slot='navigation']) {
-  padding: 0;
-
-  & wa-details::part(icon) {
-    padding-inline: var(--wa-space-xs); /* aligns details icons with drawer close icon */
-  }
-}
-
-[slot='navigation-header'] wa-menu {
-  font-family: var(--wa-font-family-body);
-  font-size: var(--wa-font-size-m);
-  font-weight: var(--wa-font-weight-normal);
-}
-
 /* Main content */
 wa-page > main {
  max-width: 80ch;
@@ -255,32 +230,16 @@ wa-page > main {
  margin-inline: auto;
 }

-h1.title {
-  wa-icon-button {
-    font-size: var(--wa-font-size-l);
-    color: var(--wa-color-text-quiet);
+h1.title wa-badge {
+  vertical-align: middle;

-    &:not(:hover, :focus) {
-      opacity: 0.5;
-    }
-  }
-
-  wa-badge {
-    vertical-align: middle;
+  &::part(base) {
    font-size: 1.5rem;
  }
 }

-.block-info {
-  display: flex;
-  gap: var(--wa-space-xs);
-  flex-wrap: wrap;
-  align-items: center;
+.component-info {
  margin-block-end: var(--wa-flow-spacing);
-
-  code {
-    line-height: var(--wa-line-height-condensed);
-  }
 }

 /* Current link */
@@ -310,7 +269,7 @@ h1.title {
  display: flex;
  gap: 1rem;
  border: var(--wa-border-style) var(--wa-border-width-s);
-  border-radius: var(--wa-border-radius-l);
+  border-radius: var(--wa-border-radius-m);
  padding: 1rem;
  margin-block-end: var(--wa-flow-spacing);

@@ -370,48 +329,8 @@ wa-page > main:has(> .index-grid) {

 .index-grid {
  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
  gap: var(--wa-space-2xl);
-  margin-block-end: var(--wa-space-3xl);
-
-  a {
-    border-radius: var(--wa-border-radius-l);
-    text-decoration: none;
-  }
-
-  wa-card {
-    box-shadow: none;
-    --spacing: var(--wa-space-m);
-    inline-size: 100%;
-
-    &:hover {
-      --border-color: var(--wa-color-brand-border-loud);
-      border-color: var(--border-color);
-      box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
-
-      .page-name {
-        color: var(--wa-color-brand-on-quiet);
-      }
-    }
-
-    [slot='header'] {
-      display: flex;
-    }
-
-    &::part(header) {
-      background-color: var(--header-background, var(--wa-color-neutral-fill-quiet));
-      border-bottom: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-block-size: calc(6rem + var(--spacing));
-    }
-  }
-
-  .page-name {
-    font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-action);
-  }
 }

 .index-category {
@@ -420,156 +339,123 @@ wa-page > main:has(> .index-grid) {
  margin-block-start: var(--wa-space-2xl);
 }

-/* Swatches */
-.swatch {
-  position: relative;
+.index-grid a {
+  border-radius: var(--wa-border-radius-m);
+}
+
+.index-grid wa-card {
+  --box-shadow: none;
+  --spacing: var(--wa-space-m);
+  inline-size: 100%;
+}
+
+.index-grid wa-card:hover {
+  --border-color: var(--wa-color-brand-border-loud);
+  --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
+  & .page-name {
+    color: var(--wa-color-brand-on-quiet);
+  }
+}
+
+.index-grid wa-card [slot='header'] {
+  display: flex;
+}
+
+.index-grid wa-card::part(header) {
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
+  min-block-size: calc(6rem + var(--spacing));
+}
+
+.index-grid .page-name {
+  font-size: var(--wa-font-size-s);
+  font-weight: var(--wa-font-weight-action);
+}
+
+/* Index Pages */
+wa-page > main:has(> .index-grid) {
+  max-width: 120ch;
+  margin-inline: auto;
+}
+
+.index-summary {
+  max-inline-size: 80ch;
+}
+
+.index-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
+  gap: var(--wa-space-2xl);
+}
+
+.index-category {
+  grid-column: 1 / -1;
+  margin-block-end: 0;
+  margin-block-start: var(--wa-space-2xl);
+}
+
+.index-grid a {
+  border-radius: var(--wa-border-radius-m);
+}
+
+.index-grid wa-card {
+  --box-shadow: none;
+  --spacing: var(--wa-space-m);
+  inline-size: 100%;
+}
+
+.index-grid wa-card:hover {
+  --border-color: var(--wa-color-brand-border-loud);
+  --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
+  & .page-name {
+    color: var(--wa-color-brand-on-quiet);
+  }
+}
+
+.index-grid wa-card [slot='header'] {
+  display: flex;
+}
+
+.index-grid wa-card::part(header) {
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-bottom: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: calc(6rem + var(--spacing));
+}
+
+.index-grid .page-name {
+  font-size: var(--wa-font-size-s);
+  font-weight: var(--wa-font-weight-action);
+}
+
+/* Swatches */
+.swatch {
  background-color: transparent;
  border-color: var(--wa-color-neutral-border-normal);
  border-style: var(--wa-border-style);
  border-width: var(--wa-border-width-s);
-  border-radius: var(--wa-border-radius-m);
+  border-radius: var(--wa-border-radius-s);
  box-sizing: border-box;
-  min-height: 2.5em;
-  padding: var(--wa-space-xs);
-  font-weight: var(--wa-font-weight-semibold);
-  line-height: var(--wa-line-height-condensed);
-
-  &.color {
-    border-color: transparent;
-    transition: background var(--wa-transition-slow);
-    background: linear-gradient(var(--color-2, transparent) 0% 100%) no-repeat border-box var(--color,);
-    background-position: var(--color-2-position, bottom);
-    background-size: var(--color-2-width, 100%) var(--color-2-height, 50%);
-
-    &.contrast-fail {
-      outline: 1px dashed var(--wa-color-red);
-      outline-offset: calc(-1 * var(--wa-space-2xs));
-    }
-  }
-
-  > wa-copy-button {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-    --background-color-hover: transparent;
-    font-family: var(--wa-font-family-code);
-
-    &::part(button) {
-      display: block;
-      height: 100%;
-      width: 100%;
-    }
-
-    &::part(button):hover {
-      cursor: copy;
-    }
-
-    &::part(copy-icon),
-    &::part(success-icon),
-    &::part(error-icon) {
-      opacity: 0 !important;
-    }
-  }
-}
-
-table.colors {
-  thead {
-    th {
-      text-align: center;
-      padding-block: 0;
-    }
-  }
-
-  tbody {
-    tr {
-      border: none;
-      &:hover {
-        background: transparent;
-      }
-    }
-
-    th {
-      width: 0;
-      vertical-align: middle;
-      text-align: right;
-    }
-
-    td {
-      padding-inline: var(--wa-space-3xs);
-      padding-block: var(--wa-space-s);
-    }
-  }
-
-  .core-column {
-    padding-inline-end: var(--wa-space-xl);
-  }
-}
-
-.value-up,
-.value-down {
-  position: relative;
-
-  &::after {
-    content: ' ' var(--icon);
-    position: absolute;
-    margin-inline-start: 3em;
-    scale: 1 0.6;
-    color: color-mix(in oklch, oklch(from var(--icon-color) none c h) 0%, oklch(from currentColor l none none));
-    font-size: 90%;
-  }
-}
-
-.value-down {
-  --icon: '▼';
-  --icon-color: var(--wa-color-danger-fill-quiet);
-
-  &::after {
-    margin-block-end: -0.2em;
-  }
-}
-
-.value-up {
-  --icon: '▲';
-  --icon-color: var(--wa-color-success-fill-quiet);
-}
-
-.icon-modifier {
-  position: relative;
-  display: inline-flex;
-
-  .modifier {
-    position: absolute;
-    bottom: -0.1em;
-    right: -0.3em;
-    font-size: 60%;
-
-    &::part(svg) {
-      stroke: var(--background-color, var(--wa-color-surface-default));
-      stroke-width: 100px;
-      paint-order: stroke;
-      overflow: visible;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-  }
+  line-height: 2.5;
+  height: 2.5em;
+  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-l);
+  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-m);
+  border-radius: var(--wa-border-radius-s);
  min-block-size: 4rem;
  min-inline-size: 4rem;
 }
@@ -605,9 +491,14 @@ table.colors {

 /** desktop */
@media screen and not (max-width: 768px) {
+  wa-page [data-toggle-nav],
+  wa-page .only-mobile {
+    display: none;
+  }
+
  /* Navigation sidebar */
  wa-page::part(navigation) {
-    border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
+    border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
  }

  wa-page > #sidebar {
@@ -622,22 +513,3 @@ table.colors {
    padding: var(--wa-space-3xl);
  }
 }
-
-.page-wide {
-  wa-page > main {
-    max-width: 140ch;
-
-    .max-line-length {
-      max-width: 80ch;
-    }
-  }
-}
-
-.layout-theme {
-  iframe {
-    width: 100%;
-    min-height: 16lh;
-    height: 65vh;
-    max-height: 21lh;
-  }
-}
--- a/docs/assets/styles/filter.css
+++ b/docs/assets/styles/filter.css
@@ -1,37 +0,0 @@
-wa-card#drawer-card::part(header) {
-  --spacing: 0;
-  justify-content: flex-end;
-  overflow: hidden;
-}
-
-#block-filter {
-  margin-block-end: var(--wa-space-xl);
-}
-
-.index-grid.filtered {
-  h2 {
-    /* Hide headings while filtering */
-    display: none;
-  }
-
-  &:not(:has(> a:not([hidden]))) {
-    /* We’re filtering and there are no results */
-
-    &::before {
-      content: var(--empty-message);
-      grid-column: 1 / -1;
-      color: var(--wa-color-on-quiet);
-      font-style: italic;
-      font-weight: var(--wa-font-weight-action);
-    }
-
-    /* Show empty state when there's a search filter and no results */
-    &[data-empty] {
-      --empty-message: attr(data-empty);
-    }
-
-    &:not([data-empty]) {
-      --empty-message: 'No results';
-    }
-  }
-}
--- a/docs/assets/styles/hydration-errors.css
+++ b/docs/assets/styles/hydration-errors.css
@@ -18,7 +18,7 @@
 .diff-grid > * {
  height: 100%;
 }
-.diff-dialog {
+.diff-dialog::part(dialog) {
  max-width: 90vw;
  width: 90vw;
 }
--- a/docs/assets/styles/outline.css
+++ b/docs/assets/styles/outline.css
@@ -31,9 +31,6 @@
 }

@media screen and (max-width: 1199px) {
-  wa-page [slot='aside'] {
-    display: none;
-  }
  #outline {
    padding-block: 0.25rem;
    margin-block-end: -1rem;
@@ -45,6 +42,5 @@

  #outline-expandable {
    display: block;
-    margin-block-end: var(--wa-space-xl);
  }
 }
--- a/docs/assets/styles/search.css
+++ b/docs/assets/styles/search.css
@@ -1,14 +1,13 @@
 #site-search {
-  width: 38rem;
-  position: absolute;
-  top: 0;
-  border-radius: var(--wa-border-radius-l);
-  padding: 0;
-  margin: 0 auto;
-  overflow: hidden;
+  --width: 38rem;

-  &::part(base) {
-    margin-block: 10rem;
+  &::part(dialog) {
+    position: absolute;
+    top: 0;
+    border-radius: var(--wa-border-radius-m);
+    padding: 0;
+    margin: 10rem auto;
+    overflow: hidden;
  }

  &::part(body) {
@@ -19,22 +18,21 @@
    justify-content: center;
    gap: 0.5rem;
  }
-
-  @media screen and (max-width: 900px) {
-    max-width: calc(100% - 2rem);
-
-    &::part(base) {
-      margin-block: 1rem;
-    }
-  }
 }

 #site-search-container {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 20rem);
+}

-  @media screen and (max-width: 900px) {
+@media screen and (max-width: 900px) {
+  #site-search::part(dialog) {
+    max-width: calc(100% - 2rem);
+    margin-block: 1rem;
+  }
+
+  #site-search-container {
    max-height: calc(100dvh - 2rem);
  }
 }
@@ -231,8 +229,8 @@ header {
  gap: 2rem;
  color: var(--wa-color-text-quiet);
  border-top: var(--wa-panel-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-  border-bottom-left-radius: var(--wa-border-radius-l);
-  border-bottom-right-radius: var(--wa-border-radius-l);
+  border-bottom-left-radius: var(--wa-border-radius-m);
+  border-bottom-right-radius: var(--wa-border-radius-m);
  padding: 1rem;

  kbd {
--- a/docs/assets/styles/theme-headers.css
+++ b/docs/assets/styles/theme-headers.css
@@ -1,14 +1,5 @@
-/* Theme Builder Headers
- * These styles control the appearance of the header of the theme builder,
- * allowing each theme to have a unique hero section.
- */
-
-/* #region Default */
-html.wa-theme-default .preview-container {
-  container-name: default-theme;
-}
-
-@container default-theme (min-width: 0) {
+/* #region Custom Styles */
+@container preview (min-width: 0) {
  .hero-background {
    height: 47rem;
    background-color: var(--wa-color-brand-fill-loud);
@@ -31,7 +22,7 @@ html.wa-theme-default .preview-container {
  }

  .hero wa-button[variant='brand'] {
-    --background-color: var(--wa-color-neutral-fill-quiet);
+    --background: var(--wa-color-neutral-fill-quiet);
    --text-color: var(--wa-color-neutral-on-normal);
  }

@@ -50,733 +41,10 @@ html.wa-theme-default .preview-container {
 }

 /* responsive */
-@container default-theme (min-width: 1040px) {
+@container preview (min-width: 1040px) {
  .hero-background::after {
    background-position: right bottom;
    background-size: 90%;
  }
 }
 /* #endregion */
-
-/* #region Tailspin */
-html.wa-theme-tailspin .preview-container {
-  container-name: tailspin-theme;
-}
-
-@container tailspin-theme (min-width: 0) {
-  .project-header {
-    background: var(--wa-color-surface-default);
-  }
-
-  .hero {
-    --hero-background-color: var(--wa-color-surface-default);
-    --hero-lines-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 30%);
-    background: linear-gradient(to top, var(--wa-color-surface-lowered), transparent 40%),
-      radial-gradient(circle at 10% 70%, color-mix(in oklab, var(--wa-color-red-50) 16%, transparent), transparent 30%),
-      radial-gradient(
-        circle at 40% 50%,
-        color-mix(in oklab, var(--wa-color-indigo-40) 16%, transparent),
-        transparent 40%
-      ),
-      radial-gradient(circle at 80% 25%, color-mix(in oklab, var(--wa-color-red-50) 8%, transparent), transparent 20%),
-      radial-gradient(
-        circle at 80% 80%,
-        color-mix(in oklab, var(--wa-color-indigo-40) 16%, transparent),
-        transparent 40%
-      ),
-      radial-gradient(circle at 90% 30%, color-mix(in oklab, var(--wa-color-red-60) 8%, transparent), transparent 10%),
-      linear-gradient(176deg, var(--hero-background-color), transparent 6rem),
-      linear-gradient(90deg, var(--hero-background-color), transparent),
-      repeating-linear-gradient(
-        var(--hero-lines-color),
-        var(--hero-lines-color) 1px,
-        transparent 1px,
-        transparent 10rem,
-        var(--hero-lines-color) 10rem
-      ),
-      repeating-linear-gradient(
-        90deg,
-        var(--hero-lines-color),
-        var(--hero-lines-color) 1px,
-        transparent 1px,
-        transparent 10rem,
-        var(--hero-lines-color) 10rem
-      ),
-      var(--hero-background-color);
-
-    & .title {
-      padding-block: calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 10);
-
-      & .hero-title {
-        font-size: calc((var(--wa-font-size-4xl) * 1.125) * 1.125);
-        margin-block: 0 var(--wa-space-3xl);
-      }
-    }
-  }
-  .badge-stock {
-    position: absolute;
-    top: var(--wa-space-l);
-    left: var(--wa-space-l);
-  }
-
-  .message-composer wa-card {
-    &::part(footer) {
-      border: none;
-    }
-    & wa-icon-button {
-      color: var(--wa-color-base-50);
-    }
-  }
-
-  .products {
-    margin-top: calc(var(--wa-space-3xl) * -8);
-  }
-
-  pre.codeblock {
-    background-color: var(--wa-color-neutral-fill-normal);
-  }
-}
-/* #endregion */
-
-/* #region Brutalist */
-html.wa-theme-brutalist .preview-container {
-  container-name: brutalist-theme;
-}
-
-@container brutalist-theme (min-width: 0) {
-  .overlap {
-    background: var(--wa-color-surface-lowered) url('/assets/images/themer/brutalist/hero.png') 50% 3% no-repeat;
-  }
-
-  .strata.hero {
-    height: 42rem;
-    padding-top: 8rem;
-    padding-right: 50%;
-    --wa-font-weight-heading: var(--wa-font-weight-normal);
-  }
-
-  .hero wa-button {
-    --background: var(--wa-color-neutral-fill-loud);
-    margin-block-start: var(--wa-space-xl);
-    font-size: var(--wa-font-size-l);
-  }
-
-  /* imitating the large button styles */
-  .hero wa-button::part(label) {
-    padding: 0 var(--wa-space-l);
-  }
-
-  .strata.products {
-    margin-top: -20rem;
-    padding-top: 10rem;
-  }
-
-  .product-card .badge-stock {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  .product-card::part(footer) {
-    --wa-shadow-offset-x-s: 0;
-    --wa-shadow-offset-y-s: 0;
-    border-width: 0;
-    text-align: right;
-  }
-
-  .product-card wa-button::part(prefix) {
-    padding-inline-start: var(--wa-space-xs);
-  }
-
-  .product-card wa-button::part(suffix) {
-    padding-inline-end: var(--wa-space-xs);
-  }
-
-  .product-card wa-button:not(:last-child) {
-    margin-inline-end: var(--wa-space-xs);
-  }
-
-  /* imitating the rounded avatar */
-  .blog wa-avatar {
-    background-color: transparent;
-  }
-
-  .blog wa-avatar::part(image) {
-    border: var(--wa-border-width-s) solid var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-circle);
-  }
-
-  .blog .landscape-frame {
-    box-shadow: var(--wa-shadow-s);
-    border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
-    margin-block-end: var(--wa-shadow-offset-y-s);
-  }
-
-  .post-meta .categories {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .message-composer wa-card::part(header) {
-    background-color: var(--wa-color-neutral-fill-loud);
-  }
-
-  .message-composer .grouped-buttons {
-    --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-30), white 40%);
-  }
-
-  .message-composer [slot='header'] wa-icon-button::part(base) {
-    color: var(--wa-color-neutral-on-loud);
-  }
-
-  .message-composer .grouped-buttons wa-icon-button::part(base):hover {
-    background-color: var(--wa-color-neutral-fill-normal);
-    color: var(--wa-color-text-normal);
-  }
-
-  .message-composer wa-tooltip::part(body) {
-    background-color: var(--wa-color-brand-fill-loud);
-    color: var(--wa-color-brand-on-loud);
-  }
-
-  .message-composer wa-tooltip::part(base__arrow) {
-    --arrow-color: var(--wa-color-brand-fill-loud);
-  }
-
-  .message-composer wa-card::part(footer) {
-    border-width: 0;
-    --padding: 0 var(--wa-space-s) var(--wa-space-s) var(--wa-space-s);
-  }
-
-  .support-table th {
-    background-color: var(--wa-color-neutral-fill-loud);
-    color: var(--wa-color-neutral-on-loud);
-  }
-
-  .support-table th wa-checkbox {
-    --background: transparent;
-    --border-color: var(--wa-color-neutral-on-loud);
-    --border-color-checked: var(--wa-color-neutral-on-loud);
-  }
-
-  .checkout-form {
-    font-size: var(--wa-font-size-s);
-  }
-
-  .checkout-form .square-frame {
-    box-shadow: var(--wa-shadow-s);
-    border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
-  }
-
-  .wa-theme-brutalist.wa-dark {
-    & p a::before {
-      background: var(--wa-color-yellow-40);
-    }
-
-    & wa-rating {
-      --symbol-color: color-mix(in oklab, var(--wa-color-base-80), transparent 50%);
-      --symbol-color-active: var(--wa-color-gray-80);
-    }
-
-    & wa-alert {
-      &[variant='brand'] {
-        --icon-color: var(--wa-color-brand-on-quiet);
-      }
-      &[variant='success'] {
-        --icon-color: var(--wa-color-success-on-quiet);
-      }
-      &[variant='warning'] {
-        --icon-color: var(--wa-color-warning-on-quiet);
-      }
-      &[variant='danger'] {
-        --icon-color: var(--wa-color-danger-on-quiet);
-      }
-      &[variant='neutral'] {
-        --icon-color: var(--wa-color-neutral-on-quiet);
-      }
-    }
-  }
-
-  .preview-container pre {
-    border-inline-start: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-neutral-border-quiet);
-  }
-
-  p a,
-  a.highlite-link {
-    position: relative;
-    --wa-link-decoration-default: none;
-    --wa-link-decoration-hover: none;
-
-    &:before {
-      position: absolute;
-      z-index: -1;
-      content: '';
-      background: var(--wa-color-yellow-80);
-      width: 100%;
-      bottom: 0;
-      height: 50%;
-      opacity: 0.7;
-      transition: all var(--wa-transition-fast) ease-in-out;
-    }
-
-    &:hover:before {
-      height: 100%;
-    }
-  }
-}
-@container brutalist-theme (min-width: 1040px) and (max-width: 1140px) {
-  .product-card wa-button {
-    font-size: 80%;
-  }
-}
-/* #endregion */
-
-/* #region Playful */
-html.wa-theme-playful .preview-container {
-  container-name: playful-theme;
-}
-
-@container playful-theme (min-width: 0) {
-  .project-header {
-    color: var(--wa-color-success-on-normal);
-  }
-
-  .hero-background {
-    position: absolute;
-    z-index: -1;
-    top: -60rem;
-    left: 50%;
-    width: 250rem;
-    height: 250rem;
-    transform: translate(-50%, -50%);
-    flex-shrink: 0;
-    border-radius: 50%;
-    background: linear-gradient(180deg, var(--wa-color-green-90) 69.42%, var(--wa-color-green-80) 100%);
-  }
-
-  .hero-background::after {
-    background: url(/assets/images/themer/playful/hero.png) 0 50% no-repeat;
-    content: '';
-    position: absolute;
-    width: 520px;
-    height: 600px;
-    transform: translateX(-50%);
-    left: 50%;
-    bottom: 33rem;
-  }
-
-  .strata.hero {
-    padding-top: 19rem;
-    text-align: center;
-  }
-
-  .hero .hero-title {
-    color: var(--wa-color-success-on-normal);
-    font-size: var(--wa-font-size-4xl);
-  }
-
-  .hero .hero-cta {
-    font-size: var(--wa-font-size-l);
-  }
-
-  .product-card .badge-stock {
-    position: absolute;
-    top: var(--wa-space-xl);
-    right: var(--wa-space-xl);
-  }
-
-  .product-card {
-    --wa-panel-border-radius: var(--wa-border-radius-l);
-  }
-
-  .product-card::part(footer) {
-    border-width: 0;
-  }
-
-  .product-card wa-button {
-    margin-inline-end: var(--wa-space-xs);
-  }
-
-  .blog wa-avatar {
-    --size: 2rem;
-  }
-
-  .blog .landscape-frame {
-    border-radius: var(--wa-border-radius-l);
-    box-shadow: var(--wa-shadow-s);
-  }
-
-  .message-composer wa-card {
-    --background: var(--wa-color-surface-raised);
-  }
-
-  .message-composer wa-card::part(header) {
-    --wa-color-neutral-border-quiet: var(--wa-color-gray-70);
-    border-width: 0;
-    background-color: var(--wa-color-neutral-fill-quiet);
-  }
-
-  &:not(.wa-theme-premium.wa-dark) .message-composer wa-card {
-    --wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
-  }
-
-  .message-composer wa-icon-button {
-    color: var(--wa-text-color-normal);
-    font-size: var(--wa-font-size-l);
-  }
-
-  .message-composer wa-card::part(footer) {
-    padding-top: 0;
-  }
-
-  .product-detail .price {
-    font-weight: var(--wa-font-weight-bold);
-  }
-
-  .support-table wa-card {
-    background: var(--wa-color-surface-raised);
-  }
-
-  .support-table th {
-    font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-bold);
-    background-color: var(--wa-color-surface-lowered);
-  }
-
-  .support-table tr {
-    border-top-color: var(--wa-color-surface-lowered);
-  }
-
-  .support-table .excerpt {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .order-item img {
-    border-radius: var(--wa-border-radius-m);
-  }
-
-  .checkout-form {
-    font-size: var(--wa-font-size-s);
-  }
-
-  .checkout-form h2 {
-    font-size: var(--wa-font-size-3xl);
-  }
-
-  .checkout-form wa-input::part(form-control-label),
-  .checkout-form wa-select::part(form-control-label) {
-    font-size: var(--wa-font-size-s);
-    padding-block-end: var(--wa-space-xs);
-  }
-
-  .wa-theme-playful.wa-dark {
-    & .hero-background {
-      background: linear-gradient(180deg, var(--wa-color-green-60) 69.42%, var(--wa-color-green-30) 100%);
-    }
-
-    & .message-composer wa-card {
-      border-color: var(--wa-color-gray-30);
-    }
-
-    & .message-composer wa-card::part(header) {
-      background: var(--wa-color-gray-40);
-    }
-
-    & .message-composer wa-card::part(footer) {
-      border-top: 0;
-    }
-
-    & .message-composer .tools .grouped-buttons:not(:last-of-type) {
-      --wa-color-neutral-border-quiet: var(--wa-color-gray-40);
-    }
-
-    & .support-table th {
-      background: var(--wa-color-surface-lowered);
-    }
-  }
-}
-/* responsive */
-@container playful-theme (min-width: 1040px) and (max-width: 1140px) {
-  .product-card wa-button {
-    font-size: 80%;
-    margin-inline-end: 0;
-  }
-}
-/* #endregion */
-
-/* #region Active */
-html.wa-theme-active .preview-container {
-  container-name: active-theme;
-}
-
-@container active-theme (min-width: 0) {
-  .hero-background::after {
-    backdrop-filter: brightness(0.8);
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  .hero-background {
-    background: linear-gradient(
-      var(--wa-color-green-80) 20%,
-      var(--wa-color-primary-80) 80.5%,
-      var(--wa-color-base-10) 80.5%,
-      var(--wa-color-primary-80) 100%
-    );
-    background: url(/assets/images/themer/active/hero.png) 50% 0px / cover no-repeat;
-    height: 40rem;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: -1;
-  }
-
-  .strata.hero {
-    height: 24rem;
-  }
-
-  .hero .title {
-    text-align: right;
-    margin-inline-start: 55%;
-  }
-
-  .hero .hero-title {
-    font-style: italic;
-    font-weight: var(--wa-font-weight-black);
-    font-size: var(--wa-font-size-2xl);
-  }
-
-  .hero wa-button[variant='brand'] {
-    --background: var(--wa-color-neutral-fill-quiet);
-    --text-color: var(--wa-color-neutral-on-normal);
-  }
-
-  wa-rating {
-    --symbol-color-active: var(--wa-color-brand-on-quiet);
-  }
-}
-
-/* responsive */
-@container preview (min-width: 1100px) {
-  .hero-background {
-    height: 47rem;
-  }
-
-  .strata.hero {
-    height: 30rem;
-  }
-
-  .hero .title {
-    margin-block-start: 10%;
-  }
-}
-/* #endregion */
-
-/* #region Premium */
-html.wa-theme-premium .preview-container {
-  container-name: premium-theme;
-}
-
-@container premium-theme (min-width: 0) {
-  .project-header {
-    background-color: var(--wa-color-warning-fill-normal);
-  }
-
-  .strata.hero {
-    height: 60rem;
-    background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 12rem no-repeat;
-    background-size: cover;
-    padding-top: var(--wa-space-2xl);
-    padding-left: var(--wa-space-s);
-    text-align: right;
-  }
-
-  .hero .hero-title {
-    color: var(--wa-color-warning-on-normal);
-    font-style: italic;
-  }
-
-  .blog wa-avatar {
-    border-radius: var(--wa-border-radius-circle);
-    overflow: hidden;
-  }
-
-  .strata.products {
-    margin-top: -25rem;
-    padding-top: 10rem;
-    background: linear-gradient(0deg, var(--wa-color-surface-lowered) 80%, rgba(255, 255, 255, 0) 100%);
-  }
-
-  .product-card .badge-stock {
-    position: absolute;
-    top: var(--wa-space-xl);
-    right: var(--wa-space-xl);
-  }
-
-  .product-card wa-rating {
-    --symbol-size: var(--wa-font-size-m);
-  }
-
-  .product-card .title {
-    font-size: var(--wa-font-size-2xl);
-  }
-
-  .product-card .description {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .product-card::part(footer) {
-    border-width: 0;
-  }
-
-  .product-card wa-button:not(:last-child) {
-    margin-inline-end: var(--wa-space-xs);
-  }
-
-  .blog .authors a {
-    --wa-color-text-link: var(--wa-color-text-quiet);
-    --wa-link-decoration-default: none;
-  }
-
-  .message-composer wa-card {
-    background: var(--wa-color-surface-raised);
-  }
-
-  .message-composer wa-card::part(header) {
-    border-width: 0;
-    background-color: var(--wa-color-neutral-fill-quiet);
-  }
-
-  &:not(.wa-theme-premium.wa-dark) .message-composer wa-card {
-    --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
-  }
-
-  .message-composer wa-card::part(footer) {
-    border-width: 0;
-    --padding: var(--wa-space-s) var(--wa-space-xl);
-  }
-
-  .message-composer .grouped-buttons wa-icon-button::part(base) {
-    block-size: var(--wa-form-control-height-s);
-    inline-size: var(--wa-form-control-height-s);
-    justify-content: center;
-  }
-  .message-composer .grouped-buttons wa-icon-button::part(base):hover {
-    background-color: var(--wa-color-neutral-fill-normal);
-    color: var(--wa-color-text-normal);
-  }
-
-  .support-table th {
-    text-transform: uppercase;
-    font-weight: var(--wa-font-weight-normal);
-    color: var(--wa-color-text-quiet);
-    background-color: var(--wa-color-surface-lowered);
-  }
-
-  .support-table th:first-child {
-    border-radius: var(--wa-border-radius-l) 0 0 0;
-  }
-
-  .support-table th:last-child {
-    border-radius: 0 var(--wa-border-radius-l) 0 0;
-  }
-
-  .support-table tr {
-    --wa-color-surface-border: var(--wa-color-surface-lowered);
-  }
-
-  .checkout-form wa-input::part(form-control-label),
-  .checkout-form wa-select::part(form-control-label) {
-    font-size: var(--wa-font-size-s);
-    margin-block-end: var(--wa-space-xs);
-  }
-
-  .order-item .finish {
-    color: var(--wa-color-text-quiet);
-    font-size: var(--wa-font-size-s);
-    font-style: italic;
-  }
-
-  .wa-theme-premium.wa-dark {
-    & .message-composer .tools .grouped-buttons:not(:last-of-type) {
-      --wa-color-neutral-border-quiet: var(--wa-color-base-40);
-    }
-
-    & .preview-container pre,
-    & .preview-container code {
-      background-color: var(--wa-color-base-20);
-    }
-
-    /* syntax highlighting */
-    & .token {
-      &.selector {
-        color: var(--wa-color-green-80);
-      }
-
-      &.tag {
-        color: var(--wa-color-primary-80);
-      }
-
-      &.punctuation {
-        color: var(--wa-color-base-95);
-      }
-
-      &.attr-name {
-        color: var(--wa-color-green-80);
-      }
-
-      &.attr-value {
-        color: var(--wa-color-yellow-80);
-      }
-    }
-  }
-  .preview-container pre,
-  .preview-container code {
-    background-color: var(--wa-color-base-90);
-    font-size: var(--font-size-m);
-  }
-
-  /* syntax highlighting */
-  .token {
-    &.selector {
-      color: var(--wa-color-green-30);
-    }
-
-    &.tag {
-      color: var(--wa-color-primary-30);
-    }
-
-    &.punctuation {
-      color: var(--wa-color-base-10);
-    }
-
-    &.attr-name {
-      color: var(--wa-color-green-30);
-    }
-
-    &.attr-value {
-      color: var(--wa-color-yellow-30);
-    }
-  }
-}
-
-/* responsive */
-@container preview (min-width: 1040px) {
-  .strata.hero {
-    background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 35% no-repeat;
-    padding-top: 15rem;
-    padding-left: 50%;
-  }
-
-  .strata.products {
-    margin-top: -25rem;
-    padding-top: 10rem;
-    background: linear-gradient(0deg, var(--wa-color-surface-lowered) 60%, rgba(255, 255, 255, 0) 100%);
-  }
-}
-/* #endregion */
--- a/docs/assets/styles/theme-icons.css
+++ b/docs/assets/styles/theme-icons.css
@@ -1,34 +0,0 @@
-.theme-color-icon {
-  display: grid;
-  gap: var(--wa-space-xs);
-  grid-template-columns: repeat(4, auto);
-
-  div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    border-radius: var(--wa-border-radius-m);
-    background-color: var(--background-color);
-    border: var(--wa-border-width-s) var(--wa-border-style) var(--border-color);
-    padding: var(--wa-space-2xs) var(--wa-space-xs);
-    color: var(--text-color);
-    font-weight: var(--wa-font-weight-semibold);
-
-    &.plain {
-      font-weight: var(--wa-font-weight-bold);
-    }
-  }
-}
-
-.theme-typography-icon {
-  display: flex;
-  flex-direction: column;
-  gap: var(--wa-space-xs);
-
-  h3,
-  p {
-    margin-block: 0;
-    padding: 0;
-  }
-}
--- a/docs/docs/components/animated-image.md
+++ b/docs/docs/components/animated-image.md
@@ -1,8 +1,7 @@
 ---
 title: Animated Image
 description: A component for displaying animated GIFs and WEBPs that play and pause on interaction.
-tags: [imagery, niche]
-icon: animated-image
+tags: component
 ---

 ```html {.example}
--- a/docs/docs/components/animation.md
+++ b/docs/docs/components/animation.md
@@ -1,8 +1,7 @@
 ---
 title: Animation
 description: Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.
-tags: [helpers, primitives]
-icon: animation
+tags: component
 ---

 To animate an element, wrap it in `<wa-animation>` and set an animation `name`. The animation will not start until you add the `play` attribute. Refer to the [properties table](#properties) for a list of all animation options.
@@ -77,9 +76,9 @@ This example demonstrates all of the baked-in animations and easings. Animations
    easingName.appendChild(option);
  });

-  animationName.addEventListener('change', () => (animation.name = animationName.value));
-  easingName.addEventListener('change', () => (animation.easing = easingName.value));
-  playbackRate.addEventListener('input', () => (animation.playbackRate = playbackRate.value));
+  animationName.addEventListener('wa-change', () => (animation.name = animationName.value));
+  easingName.addEventListener('wa-change', () => (animation.easing = easingName.value));
+  playbackRate.addEventListener('wa-input', () => (animation.playbackRate = playbackRate.value));
 </script>

 <style>
@@ -197,3 +196,4 @@ Animations won't play until you apply the `play` attribute. You can omit it init
    animation.play = true;
  });
 </script>
+```
--- a/docs/docs/components/avatar.md
+++ b/docs/docs/components/avatar.md
@@ -1,8 +1,7 @@
 ---
 title: Avatar
 description: Avatars are used to represent a person or object.
-tags: [imagery, apps, content]
-icon: avatar
+tags: component
 ---

 By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a `label` for assistive devices.
--- a/docs/docs/components/badge.md
+++ b/docs/docs/components/badge.md
@@ -1,8 +1,7 @@
 ---
 title: Badge
 description: Badges are used to draw attention and display statuses or counts.
-tags: [feedback, content]
-icon: badge
+tags: component
 ---

 ```html {.example}
@@ -128,3 +127,4 @@ When including badges in menu items, use the `suffix` slot to make sure they're
  <wa-menu-item>Comments <wa-badge slot="suffix" variant="neutral" pill>4</wa-badge></wa-menu-item>
  <wa-menu-item>Replies <wa-badge slot="suffix" variant="neutral" pill>12</wa-badge></wa-menu-item>
 </wa-menu>
+```
--- a/docs/docs/components/breadcrumb.md
+++ b/docs/docs/components/breadcrumb.md
@@ -1,8 +1,7 @@
 ---
 title: Breadcrumb
 description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
-tags: [navigation]
-icon: breadcrumb
+tags: component
 ---

 Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.
@@ -172,3 +171,4 @@ Alternatively, you can place dropdown menus in a prefix or suffix slot.
    </wa-dropdown>
  </wa-breadcrumb-item>
 </wa-breadcrumb>
+```
--- a/docs/docs/components/button-group.md
+++ b/docs/docs/components/button-group.md
@@ -1,8 +1,7 @@
 ---
 title: Button Group
 description: Button groups can be used to group related buttons into sections.
-tags: [actions, forms, apps]
-icon: button-group
+tags: component
 ---

 ```html {.example}
@@ -17,39 +16,32 @@ icon: button-group

 ### Button Sizes

-Unless otherwise specified,
-the size of [buttons](/docs/components/button) will be determined by the Button Group's `size` attribute.
+All button sizes are supported, but avoid mixing sizes within the same button group.

 ```html {.example}
-<wa-button-group size="small" label="Alignment">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
+<wa-button-group label="Alignment">
+  <wa-button size="small">Left</wa-button>
+  <wa-button size="small">Center</wa-button>
+  <wa-button size="small">Right</wa-button>
 </wa-button-group>

 <br /><br />

-<wa-button-group size="medium" label="Alignment">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
+<wa-button-group label="Alignment">
+  <wa-button size="medium">Left</wa-button>
+  <wa-button size="medium">Center</wa-button>
+  <wa-button size="medium">Right</wa-button>
 </wa-button-group>

 <br /><br />

-<wa-button-group size="large" label="Alignment">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
+<wa-button-group label="Alignment">
+  <wa-button size="large">Left</wa-button>
+  <wa-button size="large">Center</wa-button>
+  <wa-button size="large">Right</wa-button>
 </wa-button-group>
 ```

-:::info
-While you can still set the size of [buttons](/docs/components/button) individually,
-and it will override the inherited size,
-it is rarely a good idea to mix sizes within the same button group.
-:::
-
 ### Vertical button groups

 Set the `orientation` attribute to `vertical` to make a vertical button group.
@@ -77,21 +69,21 @@ Set the `orientation` attribute to `vertical` to make a vertical button group.

 ### Theme Buttons

-Theme buttons are supported through the button group's `variant` attribute.
+Theme buttons are supported through the button's `variant` attribute.

 ```html {.example}
-<wa-button-group label="Alignment" variant="brand">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
+<wa-button-group label="Alignment">
+  <wa-button variant="brand">Left</wa-button>
+  <wa-button variant="brand">Center</wa-button>
+  <wa-button variant="brand">Right</wa-button>
 </wa-button-group>

 <br /><br />

-<wa-button-group label="Alignment" variant="success">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
+<wa-button-group label="Alignment">
+  <wa-button variant="success">Left</wa-button>
+  <wa-button variant="success">Center</wa-button>
+  <wa-button variant="success">Right</wa-button>
 </wa-button-group>

 <br /><br />
@@ -104,28 +96,18 @@ Theme buttons are supported through the button group's `variant` attribute.

 <br /><br />

-<wa-button-group label="Alignment" variant="warning">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
+<wa-button-group label="Alignment">
+  <wa-button variant="warning">Left</wa-button>
+  <wa-button variant="warning">Center</wa-button>
+  <wa-button variant="warning">Right</wa-button>
 </wa-button-group>

 <br /><br />

-<wa-button-group label="Alignment" variant="danger">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
-</wa-button-group>
-```
-
-You can still use the buttons’ own `variant` attribute to override the inherited variant.
-
-```html {.example}
-<wa-button-group label="Alignment" variant="brand">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button variant="neutral">Right</wa-button>
+<wa-button-group label="Alignment">
+  <wa-button variant="danger">Left</wa-button>
+  <wa-button variant="danger">Center</wa-button>
+  <wa-button variant="danger">Right</wa-button>
 </wa-button-group>
 ```

@@ -157,17 +139,15 @@ Pill buttons are supported through the button's `pill` attribute.
 </wa-button-group>
 ```

-### Dropdowns and Native Buttons in Button Groups
+### Dropdowns in Button Groups

-Other elements can also be placed inside button groups:
- Native buttons as long as their [native styles](/docs/native/button) are included
- Dropdowns as long as the trigger is either a `<wa-button>`, or a `<button>` with [native styles](/docs/native/button) included.
+Dropdowns can be placed inside button groups as long as the trigger is an `<wa-button>` element.

 ```html {.example}
 <wa-button-group label="Example Button Group">
  <wa-button>Button</wa-button>
-  <button>Native Button</button>
-  <wa-dropdown hoist>
+  <wa-button>Button</wa-button>
+  <wa-dropdown>
    <wa-button slot="trigger" caret>Dropdown</wa-button>
    <wa-menu>
      <wa-menu-item>Item 1</wa-menu-item>
@@ -185,9 +165,9 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/do
 ```html {.example}
 <wa-button-group label="Example Button Group">
  <wa-button variant="brand">Save</wa-button>
-  <wa-dropdown placement="bottom-end" hoist>
+  <wa-dropdown placement="bottom-end">
    <wa-button slot="trigger" variant="brand" caret>
-      <span class="wa-visually-hidden">More options</span>
+      <wa-visually-hidden>More options</wa-visually-hidden>
    </wa-button>
    <wa-menu>
      <wa-menu-item>Save</wa-menu-item>
--- a/docs/docs/components/button.md
+++ b/docs/docs/components/button.md
@@ -1,9 +1,8 @@
 ---
 title: Button
 description: Buttons represent actions that are available to the user.
-tags: [actions, forms]
-native: button
-icon: button
+tags: component
+natives: button
 ---

 ```html {.example}
@@ -29,47 +28,35 @@ Use the `variant` attribute to set the button's semantic variant.
 Use the `appearance` attribute to change the button's visual appearance.

 ```html {.example}
-<div class="wa-stack">
-  <div class="wa-gap-2xs">
-    <wa-button appearance="accent outlined" variant="neutral">A + O</wa-button>
-    <wa-button appearance="accent" variant="neutral">Accent</wa-button>
-    <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
-    <wa-button appearance="filled outlined" variant="neutral">F + O</wa-button>
-    <wa-button appearance="filled" variant="neutral">Filled</wa-button>
-    <wa-button appearance="plain" variant="neutral">Plain</wa-button>
-  </div>
-  <div class="wa-gap-2xs">
-    <wa-button appearance="accent outlined" variant="brand">A + O</wa-button>
-    <wa-button appearance="accent" variant="brand">Accent</wa-button>
-    <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
-    <wa-button appearance="filled outlined" variant="brand">F + O</wa-button>
-    <wa-button appearance="filled" variant="brand">Filled</wa-button>
-    <wa-button appearance="plain" variant="brand">Plain</wa-button>
-  </div>
-  <div class="wa-gap-2xs">
-    <wa-button appearance="accent outlined" variant="success">A + O</wa-button>
-    <wa-button appearance="accent" variant="success">Accent</wa-button>
-    <wa-button appearance="outlined" variant="success">Outlined</wa-button>
-    <wa-button appearance="filled outlined" variant="success">F + O</wa-button>
-    <wa-button appearance="filled" variant="success">Filled</wa-button>
-    <wa-button appearance="plain" variant="success">Plain</wa-button>
-  </div>
-  <div class="wa-gap-2xs">
-    <wa-button appearance="accent outlined" variant="warning">A + O</wa-button>
-    <wa-button appearance="accent" variant="warning">Accent</wa-button>
-    <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
-    <wa-button appearance="filled outlined" variant="warning">F + O</wa-button>
-    <wa-button appearance="filled" variant="warning">Filled</wa-button>
-    <wa-button appearance="plain" variant="warning">Plain</wa-button>
-  </div>
-  <div class="wa-gap-2xs">
-    <wa-button appearance="accent outlined" variant="danger">A + O</wa-button>
-    <wa-button appearance="accent" variant="danger">Accent</wa-button>
-    <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
-    <wa-button appearance="filled outlined" variant="danger">F + O</wa-button>
-    <wa-button appearance="filled" variant="danger">Filled</wa-button>
-    <wa-button appearance="plain" variant="danger">Plain</wa-button>
-  </div>
+<div style="margin-block-end: 1rem;">
+  <wa-button appearance="accent" variant="neutral">Accent</wa-button>
+  <wa-button appearance="filled" variant="neutral">Filled</wa-button>
+  <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
+  <wa-button appearance="plain" variant="neutral">Text</wa-button>
+</div>
+<div style="margin-block-end: 1rem;">
+  <wa-button appearance="accent" variant="brand">Accent</wa-button>
+  <wa-button appearance="filled" variant="brand">Filled</wa-button>
+  <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
+  <wa-button appearance="plain" variant="brand">Text</wa-button>
+</div>
+<div style="margin-block-end: 1rem;">
+  <wa-button appearance="accent" variant="success">Accent</wa-button>
+  <wa-button appearance="filled" variant="success">Filled</wa-button>
+  <wa-button appearance="outlined" variant="success">Outlined</wa-button>
+  <wa-button appearance="plain" variant="success">Text</wa-button>
+</div>
+<div style="margin-block-end: 1rem;">
+  <wa-button appearance="accent" variant="warning">Accent</wa-button>
+  <wa-button appearance="filled" variant="warning">Filled</wa-button>
+  <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
+  <wa-button appearance="plain" variant="warning">Text</wa-button>
+</div>
+<div>
+  <wa-button appearance="accent" variant="danger">Accent</wa-button>
+  <wa-button appearance="filled" variant="danger">Filled</wa-button>
+  <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
+  <wa-button appearance="plain" variant="danger">Text</wa-button>
 </div>
 ```

--- a/docs/docs/components/callout.md
+++ b/docs/docs/components/callout.md
@@ -1,9 +1,7 @@
 ---
 title: Callout
 description: Callouts are used to display important messages inline.
-tags: [feedback, content]
-icon: callout
-native: callout
+tags: component
 ---

 ```html {.example}
@@ -59,71 +57,6 @@ Set the `variant` attribute to change the callout's variant.
 </wa-callout>
 ```

-### Appearance
-
-Use the `appearance` attribute to change the callout's visual appearance (the default is `outlined filled`).
-
-```html {.example}
-<wa-callout variant="brand" appearance="outlined accent">
-  <wa-icon slot="icon" name="check-to-slot"></wa-icon>
-  This <strong>accent</strong> callout is also <strong>outlined</strong>
-</wa-callout>
-
-<br />
-
-<wa-callout variant="brand" appearance="accent">
-  <wa-icon slot="icon" name="square-check"></wa-icon>
-  This <strong>accent</strong> callout draws attention without an outline
-</wa-callout>
-
-<br />
-
-<wa-callout variant="brand" appearance="outlined filled">
-  <wa-icon slot="icon" name="fill-drip" variant="regular"></wa-icon>
-  This callout is both <strong>filled</strong> and <strong>outlined</strong>
-</wa-callout>
-
-<br />
-
-<wa-callout variant="brand" appearance="filled">
-  <wa-icon slot="icon" name="fill" variant="regular"></wa-icon>
-  This callout is only <strong>filled</strong>
-</wa-callout>
-
-<br />
-
-<wa-callout variant="brand" appearance="outlined">
-  <wa-icon slot="icon" name="lines-leaning" variant="regular"></wa-icon>
-  Here's an <strong>outlined</strong> callout
-</wa-callout>
-
-<br />
-
-<wa-callout variant="brand" appearance="plain">
-  <wa-icon slot="icon" name="font" variant="regular"></wa-icon>
-  No bells and whistles on this <strong>plain</strong> callout
-</wa-callout>
-```
-
-### Sizes
-
-Use the `size` attribute to change a callout's size.
-
-```html {.example}
-<wa-callout variant="brand" appearance="outlined accent" size="large">
-  <wa-icon slot="icon" name="circle-info" variant="solid"></wa-icon>
-  This is meant to be very emphasized.
-</wa-callout>
-<wa-callout>
-  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
-  Normal-sized callout.
-</wa-callout>
-<wa-callout variant="plain" appearance="plain" size="small">
-  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
-  Just a small tip!
-</wa-callout>
-```
-
 ### Without Icons

 Icons are optional. Simply omit the `icon` slot if you don't want them.
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Kelsey Jackson	ed10f36b28	renamed some files	2024-12-18 20:40:35 -06:00
Kelsey Jackson	a13be817db	switching to change input label styling	2024-12-18 20:11:41 -06:00
				`@@ -1 +0,0 @@`
				`export { hueRanges as default } from '../assets/scripts/tweak/data.js';`
				`@@ -1 +0,0 @@`
				`["red", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]`
				`@@ -1 +0,0 @@`
				`export { default as default } from '../../src/styles/color/scripts/palettes-analyzed.js';`