Merge branch 'styling-attributes' of https://github.com/shoelace-style/webawesome into styling-attributes

.github/workflows/ssr_tests.js.yml

@@ -1,12 +1,11 @@
-# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
 name: SSR Tests
 
 on:
-  # push:
-  #   branches: [next]
-  workflow_dispatch:
+  push:
+    branches: [next]
 
 jobs:
   ssr_test:

.prettierignore

@@ -13,4 +13,3 @@ package-lock.json
 tsconfig.json
 cdn
 _site
-docs/assets/scripts/prism-downloaded.js

docs/.eleventy.js

@@ -1,4 +1,3 @@
-import * as path from 'node:path';
 import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
 import { codeExamplesPlugin } from './_utils/code-examples.js';
 import { copyCodePlugin } from './_utils/copy-code.js';
@@ -7,10 +6,9 @@ import { highlightCodePlugin } from './_utils/highlight-code.js';
 import { markdown } from './_utils/markdown.js';
 import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js';
 // import { formatCodePlugin } from './_utils/format-code.js';
-// import litPlugin from '@lit-labs/eleventy-plugin-lit';
+import litPlugin from '@lit-labs/eleventy-plugin-lit';
 import { readFile } from 'fs/promises';
-import nunjucks from 'nunjucks';
-// import componentList from './_data/componentList.js';
+import componentList from './_data/componentList.js';
 import * as filters from './_utils/filters.js';
 import { outlinePlugin } from './_utils/outline.js';
 import { replaceTextPlugin } from './_utils/replace-text.js';
@@ -18,10 +16,7 @@ import { searchPlugin } from './_utils/search.js';
 
 import process from 'process';
 
-import * as url from 'url';
-const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
-
-const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
+const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
 const isAlpha = process.argv.includes('--alpha');
 const isDev = process.argv.includes('--develop');
 
@@ -29,22 +24,12 @@ const globalData = {
   package: packageData,
   isAlpha,
   layout: 'page.njk',
-  server: {
-    head: '',
-    loginOrAvatar: '',
-    flashes: '',
-  },
 };
 
 const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
 const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
 
 export default function (eleventyConfig) {
-  /**
-   * This is the guard we use for now to make sure our final built files dont need a 2nd pass by the server. This keeps us able to still deploy the bare HTML files on Vercel until the app is ready.
-   */
-  const serverBuild = process.env.WEBAWESOME_SERVER === 'true';
-
   // NOTE - alpha setting removes certain pages
   if (isAlpha) {
     eleventyConfig.ignores.add('**/experimental/**');
@@ -70,38 +55,7 @@ export default function (eleventyConfig) {
 
   // Shortcodes - {% shortCode arg1, arg2 %}
   eleventyConfig.addShortcode('cdnUrl', location => {
-    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
-  });
-
-  // Turns `{% server "foo" %} into `{{ server.foo | safe }}` when the WEBAWESOME_SERVER variable is set to "true"
-  eleventyConfig.addShortcode('server', function (property) {
-    if (serverBuild) {
-      return `{{ server.${property} | safe }}`;
-    }
-
-    return '';
-  });
-
-  eleventyConfig.addTransform('second-nunjucks-transform', function NunjucksTransform(content) {
-    // For a server build, we expect a server to run the second transform.
-    if (serverBuild) {
-      return content;
-    }
-
-    // Only run the transform on files nunjucks would transform.
-    if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
-      return content;
-    }
-
-    /** This largely mimics what an app would do and just stubs out what we don't care about. */
-    return nunjucks.renderString(content, {
-      // Stub the server EJS shortcodes.
-      server: {
-        head: '',
-        loginOrAvatar: '',
-        flashes: '',
-      },
-    });
+    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
   });
 
   // Paired shortcodes - {% shortCode %}content{% endShortCode %}
@@ -140,7 +94,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(
@@ -163,6 +117,29 @@ export default function (eleventyConfig) {
     ]),
   );
 
+  // SSR plugin
+  if (!isDev) {
+    //
+    // Problematic components in SSR land:
+    //  - animation (breaks on navigation + ssr with Turbo)
+    //  - mutation-observer (why SSR this?)
+    //  - resize-observer (why SSR this?)
+    //  - tooltip (why SSR this?)
+    //
+    const omittedModules = [];
+    const componentModules = componentList
+      .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
+      .map(component => {
+        const name = component.tagName.split(/wa-/)[1];
+        return `./dist/components/${name}/${name}.js`;
+      });
+
+    eleventyConfig.addPlugin(litPlugin, {
+      mode: 'worker',
+      componentModules,
+    });
+  }
+
   // Build the search index
   eleventyConfig.addPlugin(
     searchPlugin({
@@ -189,31 +166,6 @@ export default function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy(glob);
   }
 
-  // // SSR plugin
-  // // Make sure this is the last thing, we don't want to run the risk of accidentally transforming shadow roots with the nunjucks 2nd transform.
-  // if (!isDev) {
-  //   //
-  //   // Problematic components in SSR land:
-  //   //  - animation (breaks on navigation + ssr with Turbo)
-  //   //  - mutation-observer (why SSR this?)
-  //   //  - resize-observer (why SSR this?)
-  //   //  - tooltip (why SSR this?)
-  //   //
-  //   const omittedModules = [];
-  //   const componentModules = componentList
-  //     .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
-  //     .map(component => {
-  //       const name = component.tagName.split(/wa-/)[1];
-  //       const componentDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join('.', 'dist');
-  //       return path.join(componentDirectory, 'components', name, `${name}.js`);
-  //     });
-  //
-  //   eleventyConfig.addPlugin(litPlugin, {
-  //     mode: 'worker',
-  //     componentModules,
-  //   });
-  // }
-
   return {
     markdownTemplateEngine: 'njk',
     dir: {

docs/_data/componentList.js

@@ -31,13 +31,25 @@ const components = manifest.modules.flatMap(module => {
         return prop.kind === 'field' && prop.privacy !== 'private';
       });
 
-      return {
+      let ret = {
         ...declaration,
         slug: declaration.tagName.replace(/^wa-/, ''),
         methods,
         attributes,
         properties,
       };
+
+      // Add named keys to these arrays
+      for (let thing of ['methods', 'attributes', 'properties', 'cssProperties', 'cssParts', 'cssStates', 'events']) {
+        if (ret[thing]) {
+          ret[thing] = ret[thing].reduce((acc, item) => {
+            acc[item.name] = item;
+            return acc;
+          }, ret[thing]);
+        }
+      }
+
+      return ret;
     });
 });
 

docs/_data/hueRanges.js

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

docs/_data/hues.json

@@ -1 +0,0 @@
-["red", "orange", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]

docs/_data/palettes.js

@@ -1 +0,0 @@
-export { default as default } from '../../src/styles/color/scripts/palettes-analyzed.js';

docs/_includes/base.njk

@@ -1,24 +1,22 @@
 <!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
   <head>
     {% include 'head.njk' %}
     <meta name="theme-color" content="#f36944">
 
     <script type="module" src="/assets/scripts/code-examples.js"></script>
+    <script type="module" src="/assets/scripts/copy-code.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>
 
     {# Docs styles #}
     <link rel="stylesheet" href="/assets/styles/docs.css" />
-
-    {% block head %}{% endblock %}
   </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">
@@ -50,9 +48,6 @@
             Search
             <kbd slot="suffix" class="only-desktop">/</kbd>
           </wa-button>
-
-          {# Login #}
-          {% server "loginOrAvatar" %}
         </div>
       </header>
 
@@ -79,19 +74,16 @@
         </aside>
       {% endif %}
 
-
       {# Main #}
       <main id="content">
         {# Expandable outline #}
-        {% if hasOutline %}
         <nav id="outline-expandable">
           <details class="outline-links">
             <summary>On this page</summary>
           </details>
         </nav>
-        {% endif %}
 
-        <div id="flashes">{% server "flashes" %}</div>
+
 
         {% block header %}
           {% include 'breadcrumbs.njk' %}

docs/_includes/breadcrumbs.njk

@@ -1,11 +1,8 @@
-{% set ancestors = page.url | ancestors %}
-
-{% if ancestors.length > 0 %}
+{% set breadcrumbs = page.url | breadcrumbs %}
+{% if breadcrumbs.length > 0 %}
   <wa-breadcrumb id="docs-breadcrumbs">
-  {% for ancestor in ancestors %}
-    {% if ancestor.page.url != "/" %}
-    <wa-breadcrumb-item href="{{ ancestor.page.url }}">{{ ancestor.data.title }}</wa-breadcrumb-item>
-    {% endif %}
+  {% 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>

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>

docs/_includes/grouped-pages.njk

@@ -1,18 +1,12 @@
 {# Cards for pages listed by category #}
 
 <section id="grid" class="index-grid">
-{% set groupedPages = allPages | groupPages(categories, page) %}
-{% for category, pages in groupedPages -%}
-  {% if groupedPages.meta.groupCount > 1 and pages.length > 0 %}
-  <h2 class="index-category" id="{{ category | slugify }}">
-    {% if pages.meta.url %}<a href="{{ pages.meta.url }}">{{ pages.meta.title }}</a>
-    {% else %}
-    {{ pages.meta.title }}
-    {% endif %}
-  </h2>
-  {% endif %}
-  {%- for page in pages -%}
-      {% include "page-card.njk" %}
-  {%- endfor -%}
+{% 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>

docs/_includes/head.njk

@@ -23,24 +23,26 @@
 <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">
-
-{# Internal components #}
-<script type="module" src="/assets/components/scoped.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
 
 {# Web Awesome #}
-<script type="module" src="/dist/webawesome.loader.js"></script>
+<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>
+<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme or 'default' }}.css" render="blocking" fetchpriority="high" />
+{% if not forceTheme %}
 <script>
-{
-	let preset = localStorage.presetTheme ?? 'default';
+if (localStorage.presetTheme) {
+	let preset = localStorage.presetTheme;
 	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" />`);
+	let link = script.previousElementSibling;
+	let newLink = link.cloneNode();
+	newLink.href = link.href.replace("/default.css", `/${preset}.css`);
+	newLink.addEventListener('load', () => {
+		link.remove();
+	});
+	link.after(newLink);
 }
 </script>
 <script type="module" src="/assets/scripts/preset-theme-picker.js"></script>
@@ -49,6 +51,3 @@
 <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" />
-
-{# Used by Web Awesome App to inject other assets into the head. #}
-{% server "head" %}

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>

docs/_includes/page-card.njk

@@ -2,12 +2,9 @@
 <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" ignore missing %}
+		{% 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 %}

docs/_includes/sidebar-group.njk

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

docs/_includes/sidebar-link.njk

@@ -1,4 +1,4 @@
-{% if page | show -%}
+{% 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 %}

docs/_includes/sidebar.njk

@@ -16,7 +16,6 @@
   <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 {
@@ -26,8 +25,7 @@
   'utilities': 'Style Utilities',
   'layout': 'Layout',
   'patterns': 'Patterns',
-  'palettes': 'Color Palettes',
-  'tokens': 'Design Tokens'
+  'theming': 'Theming'
 } %}
   {% include 'sidebar-group.njk' %}
 {% endfor %}

docs/_includes/svgs/palette.njk

@@ -1,20 +0,0 @@
-{% set paletteId = palette.fileSlug or page.fileSlug %}
-{% set suffixes = ['-80', '', '-20'] %}
-
-<wa-scoped class="palette-icon-host">
-  <template>
-    <link rel="stylesheet" href="/dist/styles/color/{{ paletteId }}.css">
-    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-    <div class="palette-icon" style="--hues: {{ hues|length }}; --suffixes: {{ suffixes|length }}">
-      {% for hue in hues -%}
-        {% set hueIndex = loop.index %}
-        {% for suffix in suffixes -%}
-          <div class="swatch"
-               data-hue="{{ hue }}" data-suffix="{{ suffix }}"
-               style="--color: var(--wa-color-{{ hue }}{{ suffix }}); grid-column: {{ hueIndex }}; grid-row: {{ loop.index }}">&nbsp;</div>
-        {%- endfor %}
-      {%- endfor %}
-    </div>
-  </template>
-</wa-scoped>

docs/_includes/svgs/theme-color.njk

@@ -1,24 +0,0 @@
-{% set themeId = theme.fileSlug %}
-
-<wa-scoped class="theme-icon-host theme-color-icon-host">
-  <template>
-    <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-icon 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>
-</wa-scoped>

docs/_includes/svgs/theme-typography.njk

@@ -1,16 +0,0 @@
-{% set themeId = theme.fileSlug or page.fileSlug %}
-
-<wa-scoped class="theme-icon-host theme-typography-icon-host">
-  <template>
-    <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-icon theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
-      <h3>Title</h3>
-      <p>Body text</p>
-    </div>
-  </template>
-</wa-scoped>

docs/_includes/svgs/theme.njk

@@ -1,29 +0,0 @@
-{% set themeId = theme.fileSlug or page.fileSlug %}
-
-
-<wa-scoped class="theme-icon-host theme-overall-icon-host">
-  <template>
-    <link rel="stylesheet" href="/dist/styles/utilities.css">
-    <link rel="stylesheet" href="/dist/styles/native/content.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}.css">
-    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-    <div class="theme-icon theme-overall-icon" role="presentation" data-no-anchor data-no-outline>
-      <div class="row row-1">
-        <h2>Aa</h2>
-        <div class="swatches">
-          <div class="wa-brand"></div>
-
-          <div class="wa-success"></div>
-          <div class="wa-warning"></div>
-          <div class="wa-danger"></div>
-          <div class="wa-neutral"></div>
-        </div>
-      </div>
-      <div class="row row-2">
-        <wa-input value="Input" size="small"></wa-input>
-        <wa-button size="small" variant="brand">Go</wa-button>
-      </div>
-    </div>
-  </template>
-</wa-scoped>

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>

docs/_includes/theme-showcase.njk

@@ -23,7 +23,7 @@
         </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-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-teal-60); --text-color: var(--wa-color-teal-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">

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>
-```

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>

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>

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>
-```

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>

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>

docs/_layouts/component.njk

@@ -255,7 +255,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?">

docs/_layouts/element.njk

@@ -14,19 +14,11 @@
 {% endblock %}
 
 {% block afterContent %}
-{% if file %}
-{% markdown %}
-## Opting In to Native {{ title }} Styles
+  {# Slots #}
+  {% if css_file %}
+    <h2>Using these styles</h2>
+    <p>If you want to use these styles without using the entirety of Web Awesome Native Styles, you can include the following CSS files:</p>
 
-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 %}
 
+  {% endif %}
 {% endblock %}

docs/_layouts/overview.njk

@@ -1,5 +1,6 @@
 ---
 layout: page-outline
+tags: ["overview"]
 ---
 {% set forTag = forTag or (page.url | split('/') | last) %}
 {% if description %}
@@ -12,15 +13,13 @@ layout: page-outline
   </wa-input>
 </div>
 
-{% set allPages = allPages or collections[forTag] %}
-{% if allPages and allPages.length > 0 %}
+{% set allPages = collections[forTag] %}
 {% include "grouped-pages.njk" %}
-{% endif %}
 
 <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 #}
+<br> {# Temp fix for spacing issue #}
 {{ content | safe }}
 {% endif %}

docs/_layouts/page.njk

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

docs/_layouts/palette.njk

@@ -1,318 +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,
-    'tweaking-gray-chroma': tweaking.grayChroma,
-    'tweaked-chroma': tweaked?.chroma,
-    'tweaked-hue': tweaked?.hue,
-    'tweaked-any': tweaked
-  }"
-  :style="{
-    '--chroma-scale': chromaScale,
-    '--gray-chroma': tweaked?.grayChroma ? grayChroma : '',
-    }">
-
-  {% 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' %}
-    {% if not isPro %}
-    <wa-badge class="pro" v-if="tweaked">PRO</wa-badge>
-    {% endif %}
-  </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="warning">
-  <wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
-   This palette has been tweaked.
-   <div class="wa-cluster wa-gap-xs">
-    <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="reset(param)">{% raw %}{{ tweakHumanReadable }}{% endraw %}</wa-tag>
-   </div>
-
-  <wa-button @click="reset()" appearance="outlined" variant="danger">
-    <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" variant="success">
-    <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 coreTint = palettes[paletteId][hue].maxChromaTint %}
-{%- set coreColor = palettes[paletteId][hue][coreTint] -%}
-{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
-{% if hue === 'gray' %}
-<tr data-hue="{{ hue }}" class="color-scale"
-    :class="{tweaking: tweaking.grayChroma, tweaked: tweaked.grayChroma || tweaked.grayColor }">
-{% else %}
-<tr data-hue="{{ hue }}" class="color-scale"
-    :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
-    :style="{ '--hue-shift': hueShifts.{{ hue }} || '' }">
-{% endif %}
-  <th>
-    {{ hue | capitalize }}
-  </th>
-  <td class="core-column"
-      style="--color: var(--wa-color-{{ hue }})"
-      :style="{
-        '--color-tweaked': colors.{{ hue }}[{{ coreTint }}],
-        '--color-gray-undertone': colors[grayColor][{{coreTint}}],
-        '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ coreTint }}],
-      }">
-    <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">
-      {% if hue === 'gray' %}
-        <wa-radio-group class="core-color" orientation="horizontal" v-model="grayColor">
-          {% for h in hues -%}
-            {%- if h !== 'gray' -%}
-              <wa-radio-button id="gray-undertone-{{ h }}" value="{{ h }}" label="{{ h | capitalize }}" style="--color: var(--wa-color-{{ h }})"></wa-radio-button>
-              <wa-tooltip for="gray-undertone-{{ h }}" hoist>
-                {{ h | capitalize }}
-              </wa-tooltip>
-            {%- endif -%}
-          {%- endfor -%}
-          <div slot="label">
-            Gray undertone
-          </div>
-        </wa-radio-group>
-        <div class="decorated-slider gray-chroma-slider" :style="{'--max': maxGrayChroma}">
-          <wa-slider name="gray-chroma" v-model="grayChroma" ref="grayChromaSlider"
-          value="0" min="0" :max="maxGrayChroma" step="0.01"
-            @input="tweaking.grayChroma = true" @change="tweaking.grayChroma = false">
-            <div slot="label">
-              Gray colorfulness
-              <wa-icon-button @click="grayChroma = originalGrayChroma" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
-            </div>
-          </wa-slider>
-          <div class="label-min">Neutral</div>
-          <div class="label-max" v-content="moreHue[grayColor]">Warmer/Cooler</div>
-        </div>
-      {% else %}
-      {%- 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 -%}
-
-      <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>
-      {%- set hueBefore = hue -%}
-      {% endif %}
-      <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>
-  </td>
-  {% for tint in tints -%}
-    {%- set color = palettes[paletteId][hue][tint] -%}
-    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})"
-        :style="{
-          '--color-tweaked': colors.{{ hue }}[{{ tint }}],
-          '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ tint }}],
-        }">
-      <div class="color swatch" style="--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" ref="chromaScaleSlider"
-    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 %}
-
-

docs/_layouts/theme.njk

@@ -4,142 +4,34 @@
 
 {% 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" ignore missing %}
-          </div>
-          <span class="page-name">
-            {{ palette.data.title }}
-            {% if palette.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
-            {% if currentPalette %}<wa-badge variant="neutral" appearance="outlined">Theme default</wa-badge>{% endif %}
-          </span>
-        </wa-card>
-      </wa-option>
-    {% endfor %}
-    {% set palette = defaultPalette %}
-  </wa-select>
-
-  <wa-select name="brand" label="Brand color" value="" clearable>
-    <div class="selected-swatch" slot="prefix"></div>
-    {% for hue in hues %}
-      {% set currentBrand = hue == brand %}
-      <wa-option label="{{ hue | capitalize }}" value="{{ hue if not currentBrand }}" {{ (hue if currentBrand) | attr('data-id') }} style="--color: var(--wa-color-{{ hue }})">
-        {{ hue | capitalize }}
-        {% if currentBrand %}<wa-badge variant="neutral" appearance="outlined">Theme default</wa-badge>{% endif %}
-      </wa-option>
-    {% endfor %}
-  </wa-select>
-
-  <wa-select name="typography" label="Typography from…" clearable>
-    <wa-icon name="font-case" slot="prefix"></wa-icon>
-    {% for theme in collections.theme | sort %}
-      {% set currentTheme = theme.fileSlug == page.fileSlug %}
-      <wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
-        <wa-card with-header>
-          <div slot="header">
-          {% include "svgs/theme-typography.njk" %}
-          </div>
-          <span class="page-name">
-            {{ theme.data.title }}
-            {% if theme.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
-            {% if currentTheme %}<wa-badge variant="neutral" appearance="outlined">This theme</wa-badge>{% endif %}
-          </span>
-        </wa-card>
-      </wa-option>
-    {% endfor %}
-  </wa-select>
-</wa-details>
-
-<h2>Color</h2>
-{% set paletteURL = '/docs/palettes/' + palette + '/' %}
-
-
-<div class="index-grid">
-  {% set themePage = page %}
-  {% set page = paletteURL | getCollectionItemFromUrl %}
-  {% set pageSubtitle = "Default color palette" %}
-  {% include 'page-card.njk' %}
-  {% set page = themePage %}
-
-  <wa-card style="--header-background: var(--wa-color-{{ brand }})" class="wa-palette-{{ palette }}">
-    <div slot="header"></div>
-    <div class="page-name">{{ brand | capitalize }}</div>
-    <div class="wa-caption-s">Default brand color</div>
-  </wa-card>
-</div>
+<iframe src='{{ page.url }}demo.html'></iframe>
 {% endblock %}
 
 {% block afterContent %}
-
-<h2 id="usage">How to use this theme</h2>
-
 {% markdown %}
+## How to use this theme
+
 You can import this theme from the Web Awesome CDN.
 
-{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
-{% include 'import-stylesheet-code.md.njk' %}
+<wa-tab-group>
+<wa-tab panel="html">In HTML</wa-tab>
+<wa-tab panel="css">In CSS</wa-tab>
+<wa-tab-panel name="html">
+
+Simply add the following code to the `<head>` of your page:
+```html
+<link rel="stylesheet" href="{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}" />
+```
+</wa-tab-panel>
+<wa-tab-panel name="css">
+
+Simply add the following code at the top of your CSS file:
+```css
+@import url('{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}');
+```
+</wa-tab-panel>
+</wa-tab-group>
 
 ## Dark mode
 
@@ -181,7 +73,6 @@ You can apply the class to the `<html>` element on your page to activate the dar
 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
@@ -190,18 +81,5 @@ As a best practice, to provide a dark theme in your app, you should:
 
 Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
 
-Assuming the user's preference is in a variable called `colorScheme` (values: `auto`, `light`, `dark`),
-you can use the following JS snippet to apply the `wa-dark` class to the `<html>` element accordingly:
-
-```js
-const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
-const applyDark = function (event = systemDark) {
-  const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
-  document.documentElement.classList.toggle('wa-dark', isDark);
-};
-systemDark.addEventListener('change', applyDark);
-applyDark();
-```
-
 {% endmarkdown %}
 {% endblock %}

docs/_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 %}

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);

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();
-  });
+  };
 }

docs/_utils/filters.js

@@ -14,6 +14,18 @@ export function trimPipes(content) {
   return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
 }
 
+export function stripQuotes(content) {
+  return content.replace(/^(['"])(.+)\1$/g, '$2');
+}
+
+export function getEnumValues(type) {
+  return type
+    .split('|')
+    .map(value => value.trim())
+    .filter(Boolean)
+    .map(stripQuotes);
+}
+
 export function keys(obj) {
   return Object.keys(obj);
 }
@@ -29,9 +41,6 @@ function getCollection(name) {
 }
 
 export function getCollectionItemFromUrl(url, collection) {
-  if (!url) {
-    return null;
-  }
   collection ??= getCollection.call(this, 'all') || [];
   return collection.find(item => item.url === url);
 }
@@ -45,33 +54,35 @@ export function split(text, separator) {
   return (text + '').split(separator).filter(Boolean);
 }
 
-export function ancestors(url, { withCurrent = false, withRoot = false } = {}) {
-  let ret = [];
-  let currentUrl = url;
-  let currentItem = getCollectionItemFromUrl.call(this, url);
+export function breadcrumbs(url, { withCurrent = false } = {}) {
+  const parts = split(url, '/');
+  const ret = [];
 
-  if (!currentItem) {
-    // Might have eleventyExcludeFromCollections, jump to parent
-    let parentUrl = this.ctx.parentUrl;
-    if (parentUrl) {
-      url = parentUrl;
+  while (parts.length) {
+    let partialUrl = '/' + parts.join('/') + '/';
+    let item = getCollectionItemFromUrl.call(this, partialUrl);
+
+    if (item && (partialUrl !== url || withCurrent)) {
+      let title = item.data.title;
+      if (title) {
+        ret.unshift({ url: partialUrl, title });
+      }
+    }
+
+    parts.pop();
+
+    if (item?.data.parent) {
+      let parentURL = item.data.parent;
+      if (!item.data.parent.startsWith('/')) {
+        // Parent is in the same directory
+        parts.push(item.data.parent);
+        parentURL = '/' + parts.join('/') + '/';
+      }
+
+      let parentBreadcrumbs = breadcrumbs.call(this, parentURL, { withCurrent: true });
+      return [...parentBreadcrumbs, ...ret];
     }
   }
-
-  for (let item; (item = getCollectionItemFromUrl.call(this, url)); url = item.data.parentUrl) {
-    ret.unshift(item);
-  }
-
-  if (!withRoot && ret[0]?.page.url === '/') {
-    // Remove root
-    ret.shift();
-  }
-
-  if (!withCurrent && ret.at(-1)?.page.url === currentUrl) {
-    // Remove current page
-    ret.pop();
-  }
-
   return ret;
 }
 
@@ -106,23 +117,6 @@ export function deepValue(obj, key) {
   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));
 }
@@ -178,196 +172,72 @@ export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
   });
 }
 
-export function show(page) {
-  return !(page.data.noAlpha && page.data.isAlpha) && !page.data.unlisted;
-}
-
 /**
  * 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[]} [options] Options object or array of tags to group by.
- * @param {string[] | true} [options.tags] Tags to group by. If true, groups by all tags.
- *                            If not provided/empty, defaults to grouping by page hierarchy, with any pages with more than 1 children becoming groups.
- * @param {string[]} [options.groups] The groups to use if only a subset or a specific order is desired. Defaults to `options.tags`.
- * @param {string[]} [options.titles] Any title overrides for groups.
- * @param {string | false} [options.other="Other"] The title to use for the "Other" group. If `false`, the "Other" group is removed..
- * @returns { Object.<string, object[]> } An object of group ids to arrays of page objects.
+ * @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 groupPages(collection, options = {}, page) {
+export function groupByTags(collection, tags) {
   if (!collection) {
-    console.error(`Empty collection passed to groupPages() to group by ${JSON.stringify(options)}`);
+    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);
   }
 
-  if (Array.isArray(options)) {
-    options = { tags: options };
-  }
-
-  let { tags, groups, titles = {}, other = 'Other', filter = show } = options;
-
-  if (groups === undefined && Array.isArray(tags)) {
-    groups = tags;
-  }
-
-  let grouping;
-
-  if (tags) {
-    grouping = {
-      isGroup: item => undefined,
-      getCandidateGroups: item => item.data.tags,
-      getGroupMeta: group => ({}),
-    };
-  } else {
-    grouping = {
-      isGroup: item => (item.data.children.length >= 2 ? item.page.url : undefined),
-      getCandidateGroups: item => {
-        let parentUrl = item.data.parentUrl;
-        if (page?.url === parentUrl) {
-          return [];
-        }
-        return [parentUrl];
-      },
-      getGroupMeta: group => {
-        let item = byUrl[group] || getCollectionItemFromUrl.call(this, group);
-        return {
-          title: item?.data.title,
-          url: group,
-          item,
-        };
-      },
-      sortGroups: groups => sort(groups.map(url => byUrl[url]).filter(Boolean)).map(item => item.page.url),
-    };
-  }
-
-  let byUrl = {};
-  let byParentUrl = {};
-
-  if (filter) {
-    collection = collection.filter(filter);
-  }
+  let ret = Object.fromEntries(tags.map(tag => [tag, []]));
+  ret.other = [];
 
   for (let item of collection) {
-    let url = item.page.url;
-    let parentUrl = item.data.parentUrl;
+    let categorized = false;
 
-    byUrl[url] = item;
-
-    if (parentUrl) {
-      byParentUrl[parentUrl] ??= [];
-      byParentUrl[parentUrl].push(item);
-    }
-  }
-
-  let urlToGroups = {};
-
-  for (let item of collection) {
-    let url = item.page.url;
-    let parentUrl = item.data.parentUrl;
-
-    if (grouping.isGroup(item)) {
-      continue;
-    }
-
-    let parentItem = byUrl[parentUrl];
-    if (parentItem && !grouping.isGroup(parentItem)) {
-      // Their parent is also here and is not a group
-      continue;
-    }
-
-    let candidateGroups = grouping.getCandidateGroups(item);
-
-    if (groups) {
-      candidateGroups = candidateGroups.filter(group => groups.includes(group));
-    }
-
-    urlToGroups[url] ??= [];
-
-    for (let group of candidateGroups) {
-      urlToGroups[url].push(group);
-    }
-  }
-
-  let ret = {};
-
-  for (let url in urlToGroups) {
-    let groups = urlToGroups[url];
-    let item = byUrl[url];
-
-    if (groups.length === 0) {
-      // Not filtered out but also not categorized
-      groups = ['other'];
-    }
-
-    for (let group of groups) {
-      ret[group] ??= [];
-      ret[group].push(item);
-
-      if (!ret[group].meta) {
-        if (group === 'other') {
-          ret[group].meta = { title: other };
-        } else {
-          ret[group].meta = grouping.getGroupMeta(group);
-          ret[group].meta.title = titles[group] ?? ret[group].meta.title ?? capitalize(group);
-        }
+    for (let tag of tags) {
+      if (item.data.tags.includes(tag)) {
+        ret[tag].push(item);
+        categorized = true;
       }
     }
-  }
 
-  if (other === false) {
-    delete ret.other;
-  }
-
-  // Sort
-  let sortedGroups = groups ?? grouping.sortGroups?.(Object.keys(ret));
-
-  if (sortedGroups) {
-    ret = sortObject(ret, sortedGroups);
-  } else {
-    // At least make sure other is last
-    if (ret.other) {
-      let otherGroup = ret.other;
-      delete ret.other;
-      ret.other = otherGroup;
+    if (!categorized) {
+      ret.other.push(item);
     }
   }
 
-  Object.defineProperty(ret, 'meta', {
-    value: {
-      groupCount: Object.keys(ret).length,
-    },
-    enumerable: false,
-  });
-
-  return ret;
-}
-
-/**
- * Sort an object by its keys
- * @param {*} obj
- * @param {function | string[]} order
- */
-function sortObject(obj, order) {
-  let ret = {};
-  let sortedKeys = Array.isArray(order) ? order : Object.keys(obj).sort(order);
-
-  for (let key of sortedKeys) {
-    if (key in obj) {
-      ret[key] = obj[key];
-    }
-  }
-
-  // Add any keys that weren't in the order
-  for (let key in obj) {
-    if (!(key in ret)) {
-      ret[key] = obj[key];
+  // Remove empty categories
+  for (let category in ret) {
+    if (ret[category].length === 0) {
+      delete ret[category];
     }
   }
 
   return ret;
 }
 
-function capitalize(str) {
-  str += '';
-  return str.charAt(0).toUpperCase() + str.slice(1);
+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;

docs/_utils/outline.js

@@ -39,7 +39,7 @@ export function outlinePlugin(options = {}) {
         }
 
         // Create a clone of the heading so we can remove links and [data-no-outline] elements from the text content
-        clone.querySelectorAll('.wa-visually-hidden, [hidden], [aria-hidden="true"]').forEach(el => el.remove());
+        clone.querySelectorAll('a').forEach(a => a.remove());
         clone.querySelectorAll('[data-no-outline]').forEach(el => el.remove());
 
         // Generate the link

docs/_utils/search.js

@@ -2,7 +2,6 @@
 import { mkdir, writeFile } from 'fs/promises';
 import lunr from 'lunr';
 import { parse } from 'node-html-parser';
-import * as path from 'path';
 import { dirname, join } from 'path';
 
 function collapseWhitespace(string) {
@@ -53,9 +52,8 @@ export function searchPlugin(options = {}) {
       return content;
     });
 
-    eleventyConfig.on('eleventy.after', ({ directories }) => {
-      const { output } = directories;
-      const outputFilename = path.resolve(join(output, 'search.json'));
+    eleventyConfig.on('eleventy.after', ({ dir }) => {
+      const outputFilename = join(dir.output, 'search.json');
       const map = [];
       const searchIndex = lunr(async function () {
         let index = 0;

docs/assets/components/scoped.js

@@ -1,171 +0,0 @@
-/**
- * Low-level utility to encapsulate a bit of HTML (mainly to apply certain stylesheets to it without them leaking to the rest of the page)
- * Usage: <wa-scoped><template><!-- your HTML here --></template></wa-scoped>
- */
-import { discover } from '/dist/webawesome.js';
-
-const imports = new Set();
-const fontFaceRules = new Set();
-
-export default class WaScoped extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-
-    this.observer = new MutationObserver(() => this.render());
-    this.observer.observe(this, { childList: true, subtree: true, characterData: true });
-  }
-
-  connectedCallback() {
-    this.render();
-    this.ownerDocument.documentElement.addEventListener('wa-color-scheme-change', e =>
-      this.#applyDarkMode(e.detail.dark),
-    );
-  }
-
-  render() {
-    this.observer.takeRecords();
-    this.observer.disconnect();
-
-    this.shadowRoot.innerHTML = '';
-
-    // To avoid mutating this.childNodes while iterating over it
-    let nodes = [];
-
-    for (let template of this.childNodes) {
-      // Other solutions we can try if needed: <script type="text/html">, or comment nodes
-      if (template instanceof HTMLTemplateElement) {
-        if (template.content.childNodes.length > 0) {
-          nodes.push(template.content.cloneNode(true));
-        } else if (template.childNodes.length > 0) {
-          // Fake template, suck its children out of the light DOM
-          nodes.push(...template.childNodes);
-        }
-      } else {
-        // Regular child, suck it out of the light DOM
-        nodes.push(template);
-      }
-    }
-
-    this.shadowRoot.append(...nodes);
-
-    this.#fixStyles();
-    this.#applyDarkMode();
-
-    discover(this.shadowRoot);
-
-    this.observer.observe(this, { childList: true, subtree: true, characterData: true });
-  }
-
-  #applyDarkMode(isDark = getComputedStyle(this).colorScheme === 'dark') {
-    // Hack to make dark mode work
-    // NOTE If any child nodes actually have .wa-dark, this will override it
-    for (let node of this.shadowRoot.children) {
-      node.classList.toggle('wa-dark', isDark);
-    }
-    this.classList.toggle('wa-dark', isDark);
-  }
-
-  /**
-   * @font-face does not work in shadow DOM in Chrome & FF, as of March 2025 https://issues.chromium.org/issues/41085401
-   * This works around this issue by traversing the shadow DOM CSS looking
-   * for @font-face rules or CSS imports to known font providers and copies them to the main document
-   */
-  async #fixStyles() {
-    let styleElements = [...this.shadowRoot.querySelectorAll('link[rel="stylesheet"], style')];
-
-    let loadStates = styleElements.map(element => {
-      try {
-        if (element.sheet?.cssRules) {
-          // Already loaded
-          return Promise.resolve(element.sheet);
-        }
-      } catch (e) {
-        // CORS
-        return Promise.resolve(null);
-      }
-
-      return new Promise((resolve, reject) => {
-        element.addEventListener('load', e => resolve(element.sheet));
-        element.addEventListener('error', e => reject(null));
-      });
-    });
-
-    await Promise.allSettled(loadStates);
-
-    let fontRules = findFontFaceRules(...this.shadowRoot.styleSheets);
-
-    if (!fontRules.length) {
-      return;
-    }
-
-    let doc = this.ownerDocument;
-    // Why not adoptedStyleSheets? Can't have @import in those yet
-    let id = `wa-scoped-hoisted-fonts`;
-    let style = doc.head.querySelector('style#' + id);
-    if (!style) {
-      style = Object.assign(doc.createElement('style'), { id, textContent: ' ' });
-      doc.head.append(style);
-    }
-    let sheet = style.sheet;
-
-    for (let rule of fontRules) {
-      let cssText = rule.cssText;
-      if (rule.type === CSSRule.FONT_FACE_RULE) {
-        if (fontFaceRules.has(cssText)) {
-          continue;
-        }
-        fontFaceRules.add(cssText);
-        sheet.insertRule(cssText);
-      } else if (rule.type === CSSRule.IMPORT_RULE) {
-        if (imports.has(rule.href)) {
-          continue;
-        }
-        imports.add(rule.href);
-        sheet.insertRule(cssText, 0);
-      }
-    }
-  }
-
-  static observedAttributes = [];
-}
-
-customElements.define('wa-scoped', WaScoped);
-
-export const WEB_FONT_HOSTS = [
-  'fonts.googleapis.com',
-  'fonts.gstatic.com',
-  'use.typekit.net',
-  'fonts.adobe.com',
-  'kit.fontawesome.com',
-  'pro.fontawesome.com',
-  'cdn.materialdesignicons.com',
-];
-
-function findFontFaceRules(...stylesheets) {
-  let ret = [];
-
-  for (let sheet of stylesheets) {
-    let rules;
-    try {
-      rules = sheet.cssRules;
-    } catch (e) {
-      // CORS
-      continue;
-    }
-
-    for (let rule of rules) {
-      if (rule.type === CSSRule.FONT_FACE_RULE) {
-        ret.push(rule);
-      } else if (rule.type === CSSRule.IMPORT_RULE) {
-        if (WEB_FONT_HOSTS.some(host => rule.href.includes(host))) {
-          ret.push(rule);
-        } else if (rule.styleSheet) {
-          ret.push(...findFontFaceRules(rule.styleSheet));
-        }
-      }
-    }
-  }
-
-  return ret;
-}

docs/assets/scripts/code-examples.js

@@ -17,7 +17,7 @@ document.addEventListener('click', event => {
     const code = codeExample.querySelector('code');
     const cdnUrl = document.documentElement.dataset.cdnUrl;
     const html =
-      `<script data-fa-kit-code="b10bfbde90" type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
+      `<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/utilities.css">\n\n` +

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);

docs/assets/scripts/filter.js

@@ -1,11 +1,3 @@
-function debounce(func, wait) {
-  let timeout;
-  return function (...args) {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => func.apply(this, args), wait);
-  };
-}
-
 function updateResults(input) {
   const filter = input.value.toLowerCase().trim();
   let filtered = Boolean(filter);
@@ -26,10 +18,8 @@ function updateResults(input) {
   }
 }
 
-const debouncedUpdateResults = debounce(updateResults, 300);
-
-document.documentElement.addEventListener('input', e => {
+document.documentElement.addEventListener('wa-input', e => {
   if (e.target?.matches('#block-filter wa-input')) {
-    debouncedUpdateResults(e.target);
+    updateResults(e.target);
   }
 });

docs/assets/scripts/preset-theme-picker.js

@@ -5,7 +5,7 @@ const presetTheme = new ThemeAspect({
   key: 'presetTheme',
   picker: 'wa-select.preset-theme-selector',
 
-  applyChange(options = {}) {
+  applyChange() {
     const oldStylesheets = [...document.querySelectorAll('#theme-stylesheet')];
     const oldStylesheet = oldStylesheets.pop();
 
@@ -38,7 +38,7 @@ const presetTheme = new ThemeAspect({
 
               oldStylesheet.remove();
             },
-            { behavior: 'smooth', ...options },
+            { behavior: 'smooth' },
           );
         },
         { once: true },
@@ -47,6 +47,18 @@ const presetTheme = new ThemeAspect({
   },
 });
 
-window.addEventListener('turbo:render', e => {
-  presetTheme.applyChange({ behavior: 'instant' });
+/**
+ * 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) {
+    presetTheme.syncUI(newElement);
+  }
+}
+
+['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
+  document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
 });
+
+window.presetTheme = presetTheme;

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;

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;
 

docs/assets/scripts/sidebar-tweaks.js

@@ -1,254 +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();
-  },
-
-  updateSaved() {
-    this.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.palettes.updateSaved();
-addEventListener('storage', event => sidebar.palettes.updateSaved());
-
-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.postDelete();
-    }
-  },
-
-  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();
-  let candidates;
-  let matchingPrefix;
-
-  for (let prefix of prefixes) {
-    candidates = document.querySelectorAll(`#sidebar a[href^="${prefix}"]`);
-
-    if (candidates.length > 0) {
-      matchingPrefix = prefix;
-      break;
-    }
-  }
-
-  if (!matchingPrefix) {
-    // Abort mission
-    return;
-  }
-
-  if (matchingPrefix === pathParts.at(-1)) {
-    // Full path matches, check search
-    if (location.search) {
-      candidates = [...candidates];
-
-      let searchParams = new URLSearchParams(location.search);
-
-      if (searchParams.has('uid')) {
-        // Only consider candidates with the same uid
-        candidates = candidates.filter(a => {
-          let params = new URLSearchParams(a.search);
-          return params.get('uid') === searchParams.get('uid');
-        });
-      } else {
-        // Sort candidates based on how many params they have in common, in descending order
-        candidates = candidates.sort((a, b) => {
-          return countSharedSearchParams(searchParams, b.search) - countSharedSearchParams(searchParams, a.search);
-        });
-      }
-    }
-  }
-
-  if (candidates.length > 0) {
-    for (let current of document.querySelectorAll('#sidebar a.current')) {
-      current.classList.remove('current');
-    }
-
-    candidates[0].classList.add('current');
-  }
-};
-
-sidebar.render = function () {
-  this.palettes.render();
-};
-
-sidebar.render();
-window.addEventListener('turbo:render', () => sidebar.render());
-
-function countSharedSearchParams(searchParams, search) {
-  if (!search || search === '?') {
-    return 0;
-  }
-
-  let params = new URLSearchParams(search);
-  return [...searchParams.keys()].filter(k => params.get(k) === searchParams.get(k)).length;
-}

docs/assets/scripts/theme-picker.js

@@ -1,32 +1,12 @@
-let initialPageLoadComplete = document.readyState === 'complete';
-
-if (!initialPageLoadComplete) {
-  window.addEventListener('load', () => {
-    initialPageLoadComplete = true;
-  });
-}
-
 // Helper for view transitions
-export function domChange(fn, { behavior = 'smooth', ignoreInitialLoad = true } = {}) {
+export function domChange(fn, { behavior = 'smooth' } = {}) {
   const canUseViewTransitions =
     document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
-  // Skip transitions on initial page load
-  if (!initialPageLoadComplete && ignoreInitialLoad) {
-    fn(false);
-    return null;
-  }
-
   if (canUseViewTransitions && behavior === 'smooth') {
-    const transition = document.startViewTransition(() => {
-      fn(true);
-      // Wait a brief delay before finishing the transition to prevent jumpiness
-      return new Promise(resolve => setTimeout(resolve, 200));
-    });
-    return transition;
+    document.startViewTransition(fn);
   } else {
-    fn(false);
-    return null;
+    fn(true);
   }
 }
 
@@ -48,21 +28,12 @@ export class ThemeAspect {
     });
 
     // Listen for selections
-    document.addEventListener('change', event => {
+    document.addEventListener('wa-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() {
@@ -120,7 +91,11 @@ const colorScheme = new ThemeAspect({
     domChange(() => {
       let dark = this.computedValue === 'dark';
       document.documentElement.classList.toggle(`wa-dark`, dark);
-      document.documentElement.dispatchEvent(new CustomEvent('wa-color-scheme-change', { detail: { dark } }));
+
+      for (let el of document.querySelectorAll('.wa-invert')) {
+        el.classList.toggle('wa-dark', !dark);
+        el.classList.toggle('wa-light', dark);
+      }
     });
   },
 });

docs/assets/scripts/turbo.js

@@ -1,6 +1,3 @@
-import 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm';
-import { preventTurboFouce } from '/dist/webawesome.js';
-
 if (!window.___turboScrollPositions___) {
   window.___turboScrollPositions___ = {};
 }
@@ -73,4 +70,3 @@ function fixDSD(e) {
 window.addEventListener('turbo:before-cache', saveScrollPosition);
 window.addEventListener('turbo:before-render', restoreScrollPosition);
 window.addEventListener('turbo:render', restoreScrollPosition);
-preventTurboFouce();

docs/assets/scripts/tweak.js

@@ -1,6 +0,0 @@
-/**
- * Get import code for remixed themes and tweaked palettes.
- */
-export { getThemeCode } from './tweak/code.js';
-export { cdnUrl, hueRanges, hues, selectors, tints, urls } from './tweak/data.js';
-export { default as Permalink } from './tweak/permalink.js';

docs/assets/scripts/tweak/code.js

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

docs/assets/scripts/tweak/data.js

@@ -1,73 +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 moreHue = {
-  red: 'Redder',
-  orange: 'More orange', // https://www.reddit.com/r/grammar/comments/u9n0uo/is_it_oranger_or_more_orange/
-  yellow: 'Yellower',
-  green: 'Greener',
-  cyan: 'More cyan',
-  blue: 'Bluer',
-  indigo: 'More indigo',
-  pink: 'Pinker',
-};
-
-/**
- * Max gray chroma (% of chroma of undertone) per hue
- */
-export const maxGrayChroma = {
-  red: 0.2,
-  orange: 0.2,
-  yellow: 0.25,
-  green: 0.25,
-  cyan: 0.3,
-  blue: 0.35,
-  indigo: 0.35,
-  purple: 0.3,
-  pink: 0.25,
-};
-
-export const docsURLs = {
-  colors: '/docs/themes/',
-  palette: '/docs/palettes/',
-  typography: '/docs/themes/',
-};
-
-export const icons = {
-  colors: 'palette',
-  palette: 'swatchbook',
-  brand: 'droplet',
-  typography: 'font-case',
-};
-
-export const hues = Object.keys(hueRanges);
-
-export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];

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;
-    }
-  }
-}

docs/assets/scripts/tweak/util.js

@@ -1,36 +0,0 @@
-export function normalizeAngles(angles) {
-  // First, normalize
-  angles = angles.map(h => ((h % 360) + 360) % 360);
-
-  // Remove top and bottom 25% and find average
-  let averageHue =
-    angles
-      .toSorted((a, b) => a - b)
-      .slice(angles.length / 4, -angles.length / 4)
-      .reduce((a, b) => a + b, 0) / angles.length;
-
-  for (let i = 0; i < angles.length; i++) {
-    let h = angles[i];
-    let prevHue = angles[i - 1];
-    let delta = h - prevHue;
-
-    if (Math.abs(delta) > 180) {
-      let equivalent = [h + 360, h - 360];
-      // Offset hue to minimize difference in the direction that brings it closer to the average
-      let delta = h - averageHue;
-
-      if (Math.abs(equivalent[0] - prevHue) <= Math.abs(equivalent[1] - prevHue)) {
-        angles[i] = equivalent[0];
-      } else {
-        angles[i] = equivalent[1];
-      }
-    }
-  }
-
-  return angles;
-}
-
-export function subtractAngles(θ1, θ2) {
-  let [a, b] = normalizeAngles([θ1, θ2]);
-  return a - 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,

docs/assets/styles/copy-code.css

@@ -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;
-  }
-}

docs/assets/styles/docs.css

@@ -4,7 +4,6 @@
 @import 'outline.css';
 @import 'search.css';
 @import 'cera_typeface.css';
-@import 'theme-icons.css';
 
 :root {
   --wa-brand-orange: #f36944;
@@ -157,7 +156,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);
 }
@@ -189,29 +188,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 {
@@ -256,32 +232,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;
   margin-block-end: var(--wa-flow-spacing);
-
-  code {
-    line-height: var(--wa-line-height-condensed);
-  }
 }
 
 /* Current link */
@@ -371,21 +331,8 @@ wa-page > main:has(> .index-grid) {
 
 .index-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
   gap: var(--wa-space-2xl);
-  margin-block-end: var(--wa-space-3xl);
-
-  @media screen and (max-width: 1470px) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  @media screen and (max-width: 960px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media screen and (max-width: 500px) {
-    grid-template-columns: repeat(1, 1fr);
-  }
 
   a {
     border-radius: var(--wa-border-radius-l);
@@ -412,7 +359,8 @@ wa-page > main:has(> .index-grid) {
     }
 
     &::part(header) {
-      background-color: var(--header-background, var(--wa-color-neutral-fill-quiet));
+      background-color: var(--wa-color-neutral-fill-quiet);
+      border-bottom: none;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -434,142 +382,15 @@ wa-page > main:has(> .index-grid) {
 
 /* Swatches */
 .swatch {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   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);
   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 */
@@ -635,7 +456,7 @@ table.colors {
   }
 }
 
-.page-wide {
+.layout-theme {
   wa-page > main {
     max-width: 140ch;
 
@@ -643,9 +464,7 @@ table.colors {
       max-width: 80ch;
     }
   }
-}
 
-.layout-theme {
   iframe {
     width: 100%;
     min-height: 16lh;

docs/assets/styles/search.css

@@ -7,9 +7,8 @@
   margin: 0 auto;
   overflow: hidden;
 
-  &::part(dialog) {
-    margin-block-start: 10vh;
-    margin-block-end: 0;
+  &::part(base) {
+    margin-block: 10rem;
   }
 
   &::part(body) {
@@ -24,20 +23,20 @@
   @media screen and (max-width: 900px) {
     max-width: calc(100% - 2rem);
 
-    &::part(dialog) {
+    &::part(base) {
       margin-block: 1rem;
     }
-
-    #site-search-container {
-      max-height: none;
-    }
   }
 }
 
 #site-search-container {
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 18rem);
+  max-height: calc(100vh - 20rem);
+
+  @media screen and (max-width: 900px) {
+    max-height: calc(100dvh - 2rem);
+  }
 }
 
 /* Header */

docs/assets/styles/theme-icons.css

@@ -1,132 +0,0 @@
-wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) {
-  &::part(header) {
-    /* We want to add a background color, so any spacing needs to go on .theme-icon */
-    flex: 1;
-    padding: 0;
-    min-block-size: 0;
-  }
-
-  [slot='header'] {
-    width: 100%;
-  }
-}
-
-.theme-icon-host,
-.palette-icon-host {
-  flex: 1;
-  border-radius: inherit;
-
-  &[slot='header'],
-  [slot='header']:has(&) {
-    flex: 1;
-    border-radius: inherit;
-  }
-}
-
-.palette-icon {
-  display: grid;
-  grid-template-columns: repeat(var(--hues, 9), 1fr);
-  gap: var(--wa-space-3xs);
-  min-width: 20ch;
-  min-height: 9ch;
-  align-content: center;
-
-  .swatch {
-    height: 0.7em;
-    background: var(--color);
-    border-radius: var(--wa-border-radius-s);
-
-    &[data-suffix=''] {
-      height: 1.1em;
-    }
-  }
-}
-
-.theme-icon {
-  min-width: 18ch;
-  padding: var(--wa-space-xs) var(--wa-space-m);
-  border-radius: inherit;
-  box-sizing: border-box;
-
-  h2,
-  h3,
-  p {
-    margin-block: 0;
-    padding: 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);
-}
-
-.theme-overall-icon {
-  display: flex;
-  flex-flow: column;
-  gap: var(--wa-space-xs);
-  justify-content: center;
-  width: 100%;
-  min-height: 7.5rem;
-  box-sizing: border-box;
-  background: var(--wa-color-surface-lowered);
-
-  .row {
-    display: flex;
-    gap: var(--wa-space-xs);
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .row-2 {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    contain: inline-size;
-    width: 100%;
-
-    wa-input {
-      min-width: 1em;
-    }
-  }
-
-  .swatches {
-    display: flex;
-    gap: var(--wa-space-3xs);
-
-    > div {
-      width: 1.25rem;
-      height: 1.25rem;
-      border-radius: var(--wa-border-radius-s);
-      background: var(--wa-color-fill-loud);
-      color: var(--wa-color-on-loud);
-
-      &.wa-brand {
-        width: 2.5rem;
-      }
-    }
-  }
-}

docs/docs/components/animation.md

@@ -77,9 +77,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>

docs/docs/components/button-group.md

@@ -17,39 +17,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 +70,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 +97,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>
 ```
 

docs/docs/components/button.md

@@ -30,43 +30,33 @@ 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>
+  <div class="wa-gap-m">
     <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>
+  <div class="wa-gap-m">
     <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>
+  <div class="wa-gap-m">
     <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>
+  <div class="wa-gap-m">
     <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>
+  <div class="wa-gap-m">
     <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>

docs/docs/components/callout.md

@@ -3,7 +3,6 @@ title: Callout
 description: Callouts are used to display important messages inline.
 tags: [feedback, content]
 icon: callout
-native: callout
 ---
 
 ```html {.example}

docs/docs/components/card.md

@@ -15,17 +15,27 @@ icon: card
 
   <strong>Mittens</strong><br />
   This kitten is as cute as he is playful. Bring him home today!<br />
-  <small class="wa-caption-m">6 weeks old</small>
+  <small>6 weeks old</small>
 
-  <div slot="footer" class="wa-split">
+  <div slot="footer">
     <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating label="Rating"></wa-rating>
+    <wa-rating></wa-rating>
   </div>
 </wa-card>
 
 <style>
   .card-overview {
-    width: 300px;
+    max-width: 300px;
+  }
+
+  .card-overview small {
+    color: var(--wa-color-text-quiet);
+  }
+
+  .card-overview [slot='footer'] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 </style>
 ```
@@ -55,9 +65,9 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
 
 ```html {.example}
 <wa-card with-header class="card-header">
-  <div slot="header" class="wa-split">
+  <div slot="header">
     Header Title
-    <wa-icon-button name="gear" variant="solid" label="Settings" class="wa-size-m"></wa-icon-button>
+    <wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
   </div>
 
   This card has a header. You can put all sorts of things in it!
@@ -68,9 +78,19 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
     max-width: 300px;
   }
 
+  .card-header [slot='header'] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
   .card-header h3 {
     margin: 0;
   }
+
+  .card-header wa-icon-button {
+    font-size: var(--wa-font-size-m);
+  }
 </style>
 ```
 
@@ -83,7 +103,7 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
 <wa-card with-footer class="card-footer">
   This card has a footer. You can put all sorts of things in it!
 
-  <div slot="footer" class="wa-split">
+  <div slot="footer">
     <wa-rating></wa-rating>
     <wa-button variant="brand">Preview</wa-button>
   </div>
@@ -93,6 +113,12 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
   .card-footer {
     max-width: 300px;
   }
+
+  .card-footer [slot='footer'] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 </style>
 ```
 
@@ -117,67 +143,3 @@ If using SSR, you need to also use the `with-image` attribute to add an image to
   }
 </style>
 ```
-
-### Sizing
-
-Use the `size` attribute to change a card's size.
-
-```html {.example}
-<div class="wa-stack">
-<wa-card with-footer size="small">
-  This is a small card.
-
-  <footer slot="footer" class="wa-split">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
-  </footer>
-</wa-card>
-
-<wa-card with-footer size="medium">
-  This is a medium card (default).
-
-  <footer slot="footer" class="wa-split">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
-  </footer>
-</wa-card>
-
-<wa-card with-footer size="large">
-  This is a large card.
-
-  <footer slot="footer" class="wa-split">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
-  </footer>
-</wa-card>
-</div>
-```
-
-### Appearance
-
-Use the `appearance` attribute to change the card's visual appearance.
-
-```html {.example}
-<div class="wa-grid">
-<wa-card>
-  <img
-    slot="image"
-    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-  <div slot="header">Outlined (default)</div>
-  Card content.
-</wa-card>
-{% for appearance in ['outlined filled', 'outlined accent', 'plain', 'filled', 'accent'] -%}
-<wa-card appearance="{{ appearance }}">
-  <img
-    slot="image"
-    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-  <div slot="header">{{ appearance | capitalize }}</div>
-  Card content.
-</wa-card>
-{%- endfor %}
-</div>
-```

docs/docs/components/carousel.md

@@ -249,7 +249,7 @@ This example is best demonstrated using a mouse. Try clicking and dragging the s
   const carousel = container.querySelector('wa-carousel');
   const toggle = container.querySelector('wa-switch');
 
-  toggle.addEventListener('change', () => {
+  toggle.addEventListener('wa-change', () => {
     carousel.toggleAttribute('mouse-dragging', toggle.checked);
   });
 </script>
@@ -450,7 +450,7 @@ Use the `--aspect-ratio` custom property to customize the size of the carousel's
     const carousel = document.querySelector('wa-carousel.aspect-ratio');
     const aspectRatio = document.querySelector('wa-select[name="aspect"]');
 
-    aspectRatio.addEventListener('change', () => {
+    aspectRatio.addEventListener('wa-change', () => {
       carousel.style.setProperty('--aspect-ratio', aspectRatio.value);
     });
   })();

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));

docs/docs/components/checkbox.md

@@ -82,7 +82,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
   });
 
   // Update validity on change
-  checkbox.addEventListener('change', () => {
+  checkbox.addEventListener('wa-change', () => {
     checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
   });
 

docs/docs/components/color-picker.md

@@ -66,11 +66,9 @@ Use the `swatches` attribute to add convenient presets to the color picker. Any
 Use the `size` attribute to change the color picker's trigger size.
 
 ```html {.example}
-<div class="wa-gap-m wa-align-items-baseline">
-  <wa-color-picker size="small" label="Select a color"></wa-color-picker>
-  <wa-color-picker size="medium" label="Select a color"></wa-color-picker>
-  <wa-color-picker size="large" label="Select a color"></wa-color-picker>
-</div>
+<wa-color-picker size="small" label="Select a color"></wa-color-picker>
+<wa-color-picker size="medium" label="Select a color"></wa-color-picker>
+<wa-color-picker size="large" label="Select a color"></wa-color-picker>
 ```
 
 ### Disabled

docs/docs/components/copy-button.md

@@ -9,10 +9,6 @@ icon: copy-button
 <wa-copy-button value="Web Awesome rocks!"></wa-copy-button>
 ```
 
-:::info
-Copy buttons use the browser's [`clipboard.writeText()`](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) method, which requires a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (HTTPS) in most browsers.
-:::
-
 ## Examples
 
 ### Custom Labels

docs/docs/components/details.md

@@ -77,31 +77,6 @@ The details component automatically adapts to right-to-left languages:
 </wa-details>
 ```
 
-### Appearance
-
-Use the `appearance` attribute to change the element’s visual appearance.
-
-```html {.example}
-<div class="wa-stack">
-<wa-details summary="Outlined (default)">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</wa-details>
-<wa-details summary="Filled" appearance="filled">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</wa-details>
-<wa-details summary="Filled + Outlined" appearance="filled outlined">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</wa-details>
-<wa-details summary="Plain" appearance="plain">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</wa-details>
-</div>
-```
-
 ### Grouping Details
 
 Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `wa-show` event.

docs/docs/components/format-bytes.md

@@ -16,7 +16,7 @@ icon: format-bytes
   const formatter = container.querySelector('wa-format-bytes');
   const input = container.querySelector('wa-input');
 
-  input.addEventListener('input', () => (formatter.value = input.value || 0));
+  input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
 </script>
 ```
 

docs/docs/components/format-number.md

@@ -19,7 +19,7 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel
   const formatter = container.querySelector('wa-format-number');
   const input = container.querySelector('wa-input');
 
-  input.addEventListener('input', () => (formatter.value = input.value || 0));
+  input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
 </script>
 ```
 

docs/docs/components/index.njk

@@ -2,10 +2,13 @@
 title: Components
 description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
 layout: overview
-override:tags: []
 categories:
-  tags: [actions, feedback, imagery, inputs, navigation, organization, helpers]
-  titles:
-    feedback: 'Feedback & Status'
-    helpers: 'Utilities'
+  - actions
+  - feedback: 'Feedback & Status'
+  - imagery
+  - inputs
+  - navigation
+  - organization
+  - helpers: 'Utilities'
+override:tags: []
 ---

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

@@ -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 {

docs/docs/components/popup.md

@@ -54,11 +54,11 @@ Popup is a low-level utility built specifically for positioning elements. Do not
   const active = container.querySelector('wa-switch[name="active"]');
   const arrow = container.querySelector('wa-switch[name="arrow"]');
 
-  select.addEventListener('change', () => (popup.placement = select.value));
-  distance.addEventListener('input', () => (popup.distance = distance.value));
-  skidding.addEventListener('input', () => (popup.skidding = skidding.value));
-  active.addEventListener('change', () => (popup.active = active.checked));
-  arrow.addEventListener('change', () => (popup.arrow = arrow.checked));
+  select.addEventListener('wa-change', () => (popup.placement = select.value));
+  distance.addEventListener('wa-input', () => (popup.distance = distance.value));
+  skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
+  active.addEventListener('wa-change', () => (popup.active = active.checked));
+  arrow.addEventListener('wa-change', () => (popup.arrow = arrow.checked));
 </script>
 
 <style>
@@ -145,7 +145,7 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
   const popup = container.querySelector('wa-popup');
   const active = container.querySelector('wa-switch');
 
-  active.addEventListener('change', () => (popup.active = active.checked));
+  active.addEventListener('wa-change', () => (popup.active = active.checked));
 </script>
 ```
 
@@ -233,7 +233,7 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
   const popup = container.querySelector('wa-popup');
   const select = container.querySelector('wa-select');
 
-  select.addEventListener('change', () => (popup.placement = select.value));
+  select.addEventListener('wa-change', () => (popup.placement = select.value));
 </script>
 ```
 
@@ -277,7 +277,7 @@ Use the `distance` attribute to change the distance between the popup and its an
   const popup = container.querySelector('wa-popup');
   const distance = container.querySelector('wa-slider');
 
-  distance.addEventListener('input', () => (popup.distance = distance.value));
+  distance.addEventListener('wa-input', () => (popup.distance = distance.value));
 </script>
 ```
 
@@ -321,7 +321,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
   const popup = container.querySelector('wa-popup');
   const skidding = container.querySelector('wa-slider');
 
-  skidding.addEventListener('input', () => (popup.skidding = skidding.value));
+  skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
 </script>
 ```
 
@@ -409,9 +409,9 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
     const arrowPlacement = container.querySelector('[name="arrow-placement"]');
     const arrow = container.querySelector('[name="arrow"]');
 
-    placement.addEventListener('change', () => (popup.placement = placement.value));
-    arrowPlacement.addEventListener('change', () => (popup.arrowPlacement = arrowPlacement.value));
-    arrow.addEventListener('change', () => (popup.arrow = arrow.checked));
+    placement.addEventListener('wa-change', () => (popup.placement = placement.value));
+    arrowPlacement.addEventListener('wa-change', () => (popup.arrowPlacement = arrowPlacement.value));
+    arrow.addEventListener('wa-change', () => (popup.arrow = arrow.checked));
   </script>
 </div>
 ```
@@ -464,7 +464,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
   const fixed = container.querySelector('wa-switch');
   const sync = container.querySelector('wa-select');
 
-  sync.addEventListener('change', () => (popup.sync = sync.value));
+  sync.addEventListener('wa-change', () => (popup.sync = sync.value));
 </script>
 ```
 
@@ -523,7 +523,7 @@ Toggle the switch and scroll the container to see the difference.
   const popup = container.querySelector('wa-popup');
   const fixed = container.querySelector('wa-switch');
 
-  fixed.addEventListener('change', () => (popup.strategy = fixed.checked ? 'fixed' : 'absolute'));
+  fixed.addEventListener('wa-change', () => (popup.strategy = fixed.checked ? 'fixed' : 'absolute'));
 </script>
 ```
 
@@ -575,7 +575,7 @@ Scroll the container to see how the popup flips to prevent clipping.
   const popup = container.querySelector('wa-popup');
   const flip = container.querySelector('wa-switch');
 
-  flip.addEventListener('change', () => (popup.flip = flip.checked));
+  flip.addEventListener('wa-change', () => (popup.flip = flip.checked));
 </script>
 ```
 
@@ -670,7 +670,7 @@ Toggle the switch to see the difference.
   const popup = container.querySelector('wa-popup');
   const shift = container.querySelector('wa-switch');
 
-  shift.addEventListener('change', () => (popup.shift = shift.checked));
+  shift.addEventListener('wa-change', () => (popup.shift = shift.checked));
 </script>
 ```
 
@@ -731,7 +731,7 @@ Scroll the container to see the popup resize as its available space changes.
   const popup = container.querySelector('wa-popup');
   const autoSize = container.querySelector('wa-switch');
 
-  autoSize.addEventListener('change', () => (popup.autoSize = autoSize.checked ? 'both' : ''));
+  autoSize.addEventListener('wa-change', () => (popup.autoSize = autoSize.checked ? 'both' : ''));
 </script>
 ```
 
@@ -782,9 +782,9 @@ When a gap exists between the anchor and the popup element, this option will add
   const hoverBridge = container.querySelector('wa-switch');
   const distance = container.querySelector('wa-slider[label="Distance"]');
   const skidding = container.querySelector('wa-slider[label="Skidding"]');
-  distance.addEventListener('input', () => (popup.distance = distance.value));
-  skidding.addEventListener('input', () => (popup.skidding = skidding.value));
-  hoverBridge.addEventListener('change', () => (popup.hoverBridge = hoverBridge.checked));
+  distance.addEventListener('wa-input', () => (popup.distance = distance.value));
+  skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
+  hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
 </script>
 ```
 
@@ -837,7 +837,7 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
   };
 
   // Only activate the popup when the switch is checked
-  enabled.addEventListener('change', () => {
+  enabled.addEventListener('wa-change', () => {
     popup.active = enabled.checked;
   });
 

docs/docs/components/qr-code.md

@@ -24,7 +24,7 @@ QR codes are useful for providing small pieces of information to users who can q
 
   customElements.whenDefined('wa-qr-code').then(() => {
     input.value = qrCode.value;
-    input.addEventListener('input', () => (qrCode.value = input.value));
+    input.addEventListener('wa-input', () => (qrCode.value = input.value));
   });
 </script>
 

docs/docs/components/radio-button.md

@@ -9,7 +9,7 @@ icon: radio-group
 Radio buttons are designed to be used with [radio groups](/docs/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
 
 ```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal"  name="a" value="1">
+<wa-radio-group label="Select an option" name="a" value="1">
   <wa-radio-button value="1">Option 1</wa-radio-button>
   <wa-radio-button value="2">Option 2</wa-radio-button>
   <wa-radio-button value="3">Option 3</wa-radio-button>
@@ -23,7 +23,7 @@ Radio buttons are designed to be used with [radio groups](/docs/components/radio
 To set the initial value and checked state, use the `value` attribute on the containing radio group.
 
 ```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal"  name="a" value="1">
+<wa-radio-group label="Select an option" name="a" value="1">
   <wa-radio-button value="1">Option 1</wa-radio-button>
   <wa-radio-button value="2">Option 2</wa-radio-button>
   <wa-radio-button value="3">Option 3</wa-radio-button>
@@ -35,7 +35,7 @@ To set the initial value and checked state, use the `value` attribute on the con
 Use the `disabled` attribute to disable a radio button.
 
 ```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal"  name="a" value="1">
+<wa-radio-group label="Select an option" name="a" value="1">
   <wa-radio-button value="1">Option 1</wa-radio-button>
   <wa-radio-button value="2" disabled>Option 2</wa-radio-button>
   <wa-radio-button value="3">Option 3</wa-radio-button>
@@ -47,7 +47,7 @@ Use the `disabled` attribute to disable a radio button.
 Use the `size` attribute to change a radio button's size.
 
 ```html {.example}
-<wa-radio-group size="small" label="Select an option" orientation="horizontal"  name="a" value="1">
+<wa-radio-group size="small" label="Select an option" name="a" value="1">
   <wa-radio-button value="1">Option 1</wa-radio-button>
   <wa-radio-button value="2">Option 2</wa-radio-button>
   <wa-radio-button value="3">Option 3</wa-radio-button>
@@ -55,7 +55,7 @@ Use the `size` attribute to change a radio button's size.
 
 <br />
 
-<wa-radio-group size="medium" label="Select an option" orientation="horizontal"  name="a" value="1">
+<wa-radio-group size="medium" label="Select an option" name="a" value="1">
   <wa-radio-button value="1">Option 1</wa-radio-button>
   <wa-radio-button value="2">Option 2</wa-radio-button>
   <wa-radio-button value="3">Option 3</wa-radio-button>
@@ -63,7 +63,7 @@ Use the `size` attribute to change a radio button's size.
 
 <br />
 
-<wa-radio-group size="large" label="Select an option" orientation="horizontal"  name="a" value="1">
+<wa-radio-group size="large" label="Select an option" name="a" value="1">
   <wa-radio-button value="1">Option 1</wa-radio-button>
   <wa-radio-button value="2">Option 2</wa-radio-button>
   <wa-radio-button value="3">Option 3</wa-radio-button>
@@ -75,7 +75,7 @@ Use the `size` attribute to change a radio button's size.
 Use the `pill` attribute to give radio buttons rounded edges.
 
 ```html {.example}
-<wa-radio-group size="small" label="Select an option" orientation="horizontal"  name="a" value="1">
+<wa-radio-group size="small" label="Select an option" name="a" value="1">
   <wa-radio-button pill value="1">Option 1</wa-radio-button>
   <wa-radio-button pill value="2">Option 2</wa-radio-button>
   <wa-radio-button pill value="3">Option 3</wa-radio-button>
@@ -83,7 +83,7 @@ Use the `pill` attribute to give radio buttons rounded edges.
 
 <br />
 
-<wa-radio-group size="medium" label="Select an option" orientation="horizontal" name="a" value="1">
+<wa-radio-group size="medium" label="Select an option" name="a" value="1">
   <wa-radio-button pill value="1">Option 1</wa-radio-button>
   <wa-radio-button pill value="2">Option 2</wa-radio-button>
   <wa-radio-button pill value="3">Option 3</wa-radio-button>
@@ -91,7 +91,7 @@ Use the `pill` attribute to give radio buttons rounded edges.
 
 <br />
 
-<wa-radio-group size="large" label="Select an option" orientation="horizontal"  name="a" value="1">
+<wa-radio-group size="large" label="Select an option" name="a" value="1">
   <wa-radio-button pill value="1">Option 1</wa-radio-button>
   <wa-radio-button pill value="2">Option 2</wa-radio-button>
   <wa-radio-button pill value="3">Option 3</wa-radio-button>
@@ -103,7 +103,7 @@ Use the `pill` attribute to give radio buttons rounded edges.
 Use the `prefix` and `suffix` slots to add icons.
 
 ```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal"  name="a" value="1">
+<wa-radio-group label="Select an option" name="a" value="1">
   <wa-radio-button value="1">
     <wa-icon slot="prefix" name="archive" variant="solid"></wa-icon>
     Option 1
@@ -127,7 +127,7 @@ Use the `prefix` and `suffix` slots to add icons.
 You can omit button labels and use icons instead. Make sure to set a `label` attribute on each icon so screen readers will announce each option correctly.
 
 ```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="neutral">
+<wa-radio-group label="Select an option" name="a" value="neutral">
   <wa-radio-button value="angry">
     <wa-icon name="face-angry" variant="solid" label="Angry"></wa-icon>
   </wa-radio-button>

docs/docs/components/radio-group.md

@@ -32,28 +32,7 @@ Add descriptive hint to a radio group with the `hint` attribute. For hints that
 [Radio buttons](/docs/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/docs/components/button-group) is used to group the buttons into a single, cohesive control.
 
 ```html {.example}
-<wa-radio-group
-  label="Horizontal options"
-  hint="Select an option that makes you proud."
-  orientation="horizontal"
-  name="a"
-  value="1"
->
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-
-<br>
-
-<wa-radio-group
-  label="Vertical options"
-  hint="Select an option that makes you proud."
-  orientation="vertical"
-  name="a"
-  value="1"
-  style="max-width: 300px;"
->
+<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
   <wa-radio-button value="1">Option 1</wa-radio-button>
   <wa-radio-button value="2">Option 2</wa-radio-button>
   <wa-radio-button value="3">Option 3</wa-radio-button>
@@ -72,39 +51,28 @@ Radios and radio buttons can be disabled by adding the `disabled` attribute to t
 </wa-radio-group>
 ```
 
-### Orientation
-
-The default orientation for radio items is `vertical`. Set the `orientation` to `horizontal` to items on the same row.
-
-```html {.example}
-<wa-radio-group
-  label="Select an option"
-  hint="Choose the most appropriate option."
-  orientation="horizontal"
-  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>
-```
-
 ### Sizing Options
 
-The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) will be determined by the Radio Group's `size` attribute.
+The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-buttons) will be determined by the Radio Group's `size` attribute.
 
-```html {.example}
-<wa-radio-group label="Select an option" size="medium" value="medium" onchange="this.size = this.value">
+```html preview
+<wa-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
   <wa-radio value="small">Small</wa-radio>
   <wa-radio value="medium">Medium</wa-radio>
   <wa-radio value="large">Large</wa-radio>
 </wa-radio-group>
+
+<script>
+  const radioGroup = document.querySelector('.radio-group-size');
+
+  radioGroup.addEventListener('wa-change', () => {
+    radioGroup.size = radioGroup.value;
+  });
+</script>
 ```
 
 :::info
-[Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) also have a `size` attribute,
-which will override the inherited size when used.
+[Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) also have a `size` attribute. This can be useful in certain compositions, but it will be ignored when used inside of a Radio Group.
 :::
 
 ### Validation
@@ -159,7 +127,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
   });
 
   // Update validity when a selection is made
-  form.addEventListener('change', () => {
+  form.addEventListener('wa-change', () => {
     const isValid = radioGroup.value === '3';
     radioGroup.setCustomValidity(isValid ? '' : errorMessage);
   });

docs/docs/components/radio.md

@@ -11,8 +11,8 @@ Radios are designed to be used with [radio groups](/docs/components/radio-group)
 
 ```html {.example}
 <wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio value="1">Option 1</wa-radio>
-  <wa-radio value="2">Option 2</wa-radio>
+  <wa-radio value="1">Option 1</wa-radio><br>
+  <wa-radio value="2">Option 2</wa-radio><br>
   <wa-radio value="3">Option 3</wa-radio>
 </wa-radio-group>
 ```
@@ -29,8 +29,8 @@ To set the initial value and checked state, use the `value` attribute on the con
 
 ```html {.example}
 <wa-radio-group label="Select an option" name="a" value="3">
-  <wa-radio value="1">Option 1</wa-radio>
-  <wa-radio value="2">Option 2</wa-radio>
+  <wa-radio value="1">Option 1</wa-radio><br>
+  <wa-radio value="2">Option 2</wa-radio><br>
   <wa-radio value="3">Option 3</wa-radio>
 </wa-radio-group>
 ```
@@ -41,8 +41,8 @@ Use the `disabled` attribute to disable a radio.
 
 ```html {.example}
 <wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio value="1">Option 1</wa-radio>
-  <wa-radio value="2" disabled>Option 2</wa-radio>
+  <wa-radio value="1">Option 1</wa-radio><br>
+  <wa-radio value="2" disabled>Option 2</wa-radio><br>
   <wa-radio value="3">Option 3</wa-radio>
 </wa-radio-group>
 ```
@@ -53,36 +53,24 @@ Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to c
 
 ```html {.example}
 <wa-radio-group size="small" value="1">
-  <wa-radio value="1">Small 1</wa-radio>
-  <wa-radio value="2">Small 2</wa-radio>
+  <wa-radio value="1">Small 1</wa-radio><br>
+  <wa-radio value="2">Small 2</wa-radio><br>
   <wa-radio value="3">Small 3</wa-radio>
 </wa-radio-group>
 
 <br />
 
 <wa-radio-group size="medium" value="1">
-  <wa-radio value="1">Medium 1</wa-radio>
-  <wa-radio value="2">Medium 2</wa-radio>
+  <wa-radio value="1">Medium 1</wa-radio><br>
+  <wa-radio value="2">Medium 2</wa-radio><br>
   <wa-radio value="3">Medium 3</wa-radio>
 </wa-radio-group>
 
 <br />
 
 <wa-radio-group size="large" value="1">
-  <wa-radio value="1">Large 1</wa-radio>
-  <wa-radio value="2">Large 2</wa-radio>
+  <wa-radio value="1">Large 1</wa-radio><br>
+  <wa-radio value="2">Large 2</wa-radio><br>
   <wa-radio value="3">Large 3</wa-radio>
 </wa-radio-group>
 ```
-
-### Hint
-
-Add descriptive hint to a switch with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
-
-```html {.example}
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio value="1" hint="What should the user know about radio 1?">Option 1</wa-radio>
-  <wa-radio value="2" hint="What should the user know about radio 2?">Option 2</wa-radio>
-  <wa-radio value="3" hint="What should the user know about radio 3?">Option 3</wa-radio>
-</wa-radio-group>
-```

docs/docs/components/rating.md

@@ -35,20 +35,12 @@ Use the `precision` attribute to let users select fractional ratings.
 <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
 ```
 
-### Sizing
+### Symbol Sizes
 
-Use the `size` attribute to adjust the size of the rating.
+Set the `--symbol-size` custom property to adjust the size.
 
 ```html {.example}
-<wa-rating label="Rating" size="small"></wa-rating><br>
-<wa-rating label="Rating" size="medium"></wa-rating><br>
-<wa-rating label="Rating" size="large"></wa-rating>
-```
-
-For more granular sizing, you can use the `font-size` property.
-
-```html {.example}
-<wa-rating label="Rating" style="font-size: 2rem;"></wa-rating>
+<wa-rating label="Rating" style="--symbol-size: 2rem;"></wa-rating>
 ```
 
 ### Readonly

docs/docs/components/select.md

@@ -130,15 +130,6 @@ Note that multi-select options may wrap, causing the control to expand verticall
 
 Use the `value` attribute to set the initial selection.
 
-```html {.example}
-<wa-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-option value="option-4">Option 4</wa-option>
-</wa-select>
-```
-
 When using `multiple`, the `value` _attribute_ uses space-delimited values to select more than one option. Because of this, `<wa-option>` values cannot contain spaces. If you're accessing the `value` _property_ through Javascript, it will be an array.
 
 ```html {.example}
@@ -303,7 +294,7 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
     return `
       <wa-tag removable>
         <wa-icon name="${name}" style="padding-inline-end: .5rem;"></wa-icon>
-        ${option.label}
+        ${option.getTextLabel()}
       </wa-tag>
     `;
   };
@@ -429,7 +420,5 @@ This can be hard to conceptualize, so heres a fairly large example showing how l
   //
   // TODO - remove once we switch to the Popover API
   //
-  customElements.whenDefined('wa-select').then(() => {
-    document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
-  });
+  document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
 </script>

docs/docs/components/split-panel.md

@@ -208,7 +208,7 @@ Try resizing the example below with each option and notice how the panels respon
   const splitPanel = container.querySelector('wa-split-panel');
   const select = container.querySelector('wa-select');
 
-  select.addEventListener('change', () => (splitPanel.primary = select.value));
+  select.addEventListener('wa-change', () => (splitPanel.primary = select.value));
 </script>
 ```
 

docs/docs/components/textarea.md

@@ -7,11 +7,7 @@ native: input
 ---
 
 ```html {.example}
-<form action="about:blank" target="_blank">
-  <wa-textarea label="Type something', will ya" name="a" value="no"></wa-textarea>
-
-  <button type="submit">Submit</button>
-</form>
+<wa-textarea></wa-textarea>
 ```
 
 :::info

docs/docs/components/tree.md

@@ -88,7 +88,7 @@ The `selection` attribute lets you change the selection behavior of the tree.
   const selectionMode = document.querySelector('#selection-mode');
   const tree = document.querySelector('.tree-selectable');
 
-  selectionMode.addEventListener('change', () => {
+  selectionMode.addEventListener('wa-change', () => {
     tree.querySelectorAll('wa-tree-item').forEach(item => (item.selected = false));
     tree.selection = selectionMode.value;
   });

docs/docs/customizing.md

@@ -1,49 +1,41 @@
 ---
 title: Customizing
-description: Learn how to customize Web Awesome through themes, parts, and custom properties.
+description: Learn how to customize Web Awesome through parts and custom properties.
 layout: page-outline
 ---
 
-You can customize the look and feel of Web Awesome at a high level with themes. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
+Web Awesome components can be customized at a high level through a theming API. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
 
 ## Themes
 
-Web Awesome uses [themes](/docs/themes) to apply a cohesive look and feel across the entire library. Themes are built with a collection of predefined CSS custom properties, which we call [design tokens](/docs/tokens), and there are many premade themes you can choose from.
+Web Awesome uses numerous CSS custom properties that make up a high-level theming API and provide a consistent look and feel across the entire library. You can customize them and use them in your own application just with CSS — no preprocessor required.
 
-To use a theme, simply add a link to the theme's stylesheet to the `<head>` of your page. For example, you can replace the link to `default.css` in the [installation code](/docs/installation/#quick-start-autoloading-via-cdn) with this snippet to use the *Awesome* theme:
+Because these custom properties live at the page level, they're prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties.
 
-```html
-<link rel="stylesheet" href="{% cdnUrl 'styles/themes/awesome.css' %}" />
-```
-
-You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to purple in light mode:
+To customize a theme, simply override any of these custom properties in your own stylesheet by scoping your styles to `:root`, `:host`, and, if needed, the class for the specific theme you want to override. Here's an example that changes the default brand color (blue) to violet in the light theme using existing [literal colors](/docs/theming/color/#literal-colors).
 
 ```css
 :where(:root),
 :host,
-.wa-light,
-.wa-dark .wa-invert {
-  --wa-color-brand-fill-quiet: var(--wa-color-purple-95);
-  --wa-color-brand-fill-normal: var(--wa-color-purple-90);
-  --wa-color-brand-fill-loud: var(--wa-color-purple-50);
-  --wa-color-brand-border-quiet: var(--wa-color-purple-90);
-  --wa-color-brand-border-normal: var(--wa-color-purple-80);
-  --wa-color-brand-border-loud: var(--wa-color-purple-60);
-  --wa-color-brand-on-quiet: var(--wa-color-purple-40);
-  --wa-color-brand-on-normal: var(--wa-color-purple-30);
+.wa-theme-default {
+  /* Changes the brand color to violet across the library */
+  --wa-color-brand-fill-quiet: var(--wa-color-violet-95);
+  --wa-color-brand-fill-normal: var(--wa-color-violet-90);
+  --wa-color-brand-fill-loud: var(--wa-color-violet-50);
+  --wa-color-brand-border-quiet: var(--wa-color-violet-90);
+  --wa-color-brand-border-normal: var(--wa-color-violet-80);
+  --wa-color-brand-border-loud: var(--wa-color-violet-60);
+  --wa-color-brand-on-quiet: var(--wa-color-violet-40);
+  --wa-color-brand-on-normal: var(--wa-color-violet-30);
   --wa-color-brand-on-loud: white;
 }
 ```
 
-:::info
-Wrapping the `:root` selector in `:where()` gives this selector 0 specificity. This allows us to define our design tokens' default values while ensuring they can be cleanly overridden as needed.
-:::
-
-For a complete list of all custom properties used for theming, refer to `src/styles/themes/default.css` in the project's source code.
+For more examples and further guidance, refer to [Themes](/docs/themes) and the Theming section of this documentation. For a complete list of all custom properties used for theming, refer to `src/styles/themes/default.css` in the project's source code.
 
 ## Components
 
-While themes offer a high-level way to customize the library, components offer different hooks as a low-level way to customize them individually.
+Whereas a theme offers a high-level way to customize the library, components offer different hooks as a low-level way to customize them individually.
 
 Web Awesome components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate their styles and behaviors. As a result, you can't simply target their internals with the usual CSS selectors. Instead, components expose a set of custom properties and CSS parts that can be targeted to customize their appearance.
 
@@ -99,8 +91,8 @@ Parts allow you to style *any* standard CSS property, not just those exposed thr
 
 <style>
   .gradient-button::part(base) {
-    background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50));
-    border: solid 1px var(--wa-color-purple-50);
+    background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-violet-50), var(--wa-color-red-50));
+    border: solid 1px var(--wa-color-violet-50);
     transition: transform 100ms, box-shadow 100ms;
   }
 
@@ -130,77 +122,3 @@ CSS parts have a few important advantages:
 - It encourages us to think more about how components are designed and how customizations should be allowed before users can take advantage of them. Once we opt a part into the component's API, it's guaranteed to be supported and can't be removed until a major version of the library is released.
 
 Most (but not all) components expose parts. You can find them in each component's API documentation under the "CSS Parts" section.
-
-## Native Elements
-
-If you're using [native styles](/docs/native), any custom styles added for a component should also target the corresponding native element. In general, the same styles you declare for components will work just the same to style their native counterparts.
-
-For example, we can give `<input type="checkbox">` the same custom styles as `<wa-checkbox>` by using the custom properties required to style the component:
-```html {.example}
-<wa-checkbox class="pinkify">Web Awesome checkbox</wa-checkbox>
-<br />
-<label>
-  <input type="checkbox" class="pinkify" />
-  HTML checkbox
-</label>
-
-<style>
-  wa-checkbox.pinkify,
-  input[type="checkbox"].pinkify {
-    --background-color-checked: hotpink;
-    --border-color-checked: hotpink;
-    --border-width: 3px;
-    --checked-icon-color: lavenderblush;
-  }
-</style>
-```
-
-Or, if using CSS parts, we can give both checkboxes the same custom styles using standard CSS properties:
-```html {.example}
-<wa-checkbox class="purpleify">Web Awesome checkbox</wa-checkbox>
-<br />
-<label>
-  <input type="checkbox" class="purpleify" />
-  HTML checkbox
-</label>
-
-<style>
-  wa-checkbox.purpleify::part(control),
-  input[type="checkbox"].purpleify {
-    border-width: 3px;
-  }
-
-  wa-checkbox.purpleify:state(checked)::part(control),
-  input[type="checkbox"].purpleify:checked {
-    background-color: darkorchid;
-    border-color: darkorchid;
-    color: lavender;
-  }
-</style>
-```
-
-
-## Style Utilities
-
-Similarly, if you're using [style utilities](/docs/utilities), any custom styles added for a specific attribute variation of a component — such as `appearance`, `variant`, or `size` — should also target the corresponding style utility class. This ensures that the attribute and its utility class counterpart work interchangeably.
-
-For example, we can give all outlined callouts a thick left border, regardless of whether they are styled with `appearance="outlined"` or `class="wa-outlined"`:
-```html {.example}
-<wa-callout appearance="outlined filled">
-  <wa-icon slot="icon" name="circle-star"></wa-icon>
-  Here's a callout with <code>appearance="outlined"</code>
-</wa-callout>
-<wa-callout class="wa-outlined wa-filled">
-  <wa-icon slot="icon" name="circle-star"></wa-icon>
-  Here's a callout with <code>class="wa-outlined"</code>
-</wa-callout>
-
-<style>
-  wa-callout:is(
-    [appearance~="outlined"], 
-    .wa-outlined
-  ) {
-    border-left-width: var(--wa-panel-border-radius);
-  }
-</style>
-```

docs/docs/docs.11tydata.js

@@ -1,80 +1,10 @@
-/**
- * Global data for all pages
- */
-import { sort } from '../_utils/filters.js';
-
 export default {
   eleventyComputed: {
-    // Default parent. Can be overridden by explicitly setting parent in the data.
-    // parent can refer to either an ancestor page in the URL or another page in the same directory
-    parent(data) {
-      let { parent, page } = data;
-
-      if (parent) {
-        return parent;
-      }
-
-      return page.url.split('/').filter(Boolean).at(-2);
-    },
-
-    parentUrl(data) {
-      let { parent, page } = data;
-      return getParentUrl(page.url, parent);
-    },
-
-    parentItem(data) {
-      let { parentUrl } = data;
-      return data.collections.all.find(item => item.url === parentUrl);
-    },
-
     children(data) {
-      let { collections, page, parentOf } = data;
+      let mainTag = data.tags?.[0];
+      let collection = data.collections[mainTag] ?? [];
 
-      if (parentOf) {
-        return collections[parentOf];
-      }
-
-      let collection = collections.all ?? [];
-      let url = page.url;
-
-      let ret = collection.filter(item => {
-        return item.data.parentUrl === url;
-      });
-
-      sort(ret);
-
-      return ret;
+      return collection.filter(item => item.data.parent === data.page.fileSlug);
     },
   },
 };
-
-function getParentUrl(url, parent) {
-  let parts = url.split('/').filter(Boolean);
-  let ancestorIndex = parts.findLastIndex(part => part === parent);
-  let retParts = parts.slice();
-
-  if (ancestorIndex > -1) {
-    // parent is an ancestor
-    retParts.splice(ancestorIndex + 1);
-  } else {
-    // parent is a sibling in the same directory
-    retParts.splice(-1, 1, parent);
-  }
-
-  let ret = retParts.join('/');
-
-  if (url.startsWith('/')) {
-    ret = '/' + ret;
-  }
-
-  if (!retParts.at(-1).includes('.') && !ret.endsWith('/')) {
-    // If no extension, make sure to end with a slash
-    ret += '/';
-  }
-
-  if (ret === '/docs/') {
-    ret = '/';
-  }
-
-  return ret;
-}

docs/docs/experimental/clamped-colors.njk

@@ -1,44 +0,0 @@
----
-title: Clamped Color Tokens
-layout: block
----
-
-{% set tints = ['max-50', 'max-60', 'max-70', 'min-50', 'min-60', 'min-70'] %}
-{% set hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'] %}
-
-<table class="colors">
-  <thead>
-    <tr>
-      <th></th>
-      <th class="core-column">Core tint</th>
-      {% for tint in tints -%}
-      <th>{{ tint }}</th>
-      {%- endfor %}
-    </tr>
-  </thead>
-{% for hue in hues -%}
-<tr class="wa-color-{{ hue }}">
-  <th>{{ hue | capitalize }}</th>
-  <td class="core-column">
-    <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on); --key: var(--wa-color-{{ hue }}-key);">
-      {{ palettes[paletteId][hue].maxChromaTint }}
-      <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
-    </div>
-  </td>
-  {% for tint in tints -%}
-    <td>
-      <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>
-
-<style>
-.core-column .color.swatch::before {
-  counter-reset: key var(--key);
-  content: counter(key);
-}
-</style>

docs/docs/experimental/inherit.md

@@ -1,84 +0,0 @@
----
-title: Inheritance & Default value tests
-wide: true
----
-
-## Variant
-
-{%- set variantDefaults = {
-	button: 'neutral',
-	tag: 'neutral',
-	badge: 'brand',
-	callout: 'brand'
-} %}
-{%- set variants = ['', 'neutral', 'brand'] %}
-
-### Defaults
-
-```html {.example}
-<table>
-	<thead>
-		<tr>
-			<th>Element</th>
-			<th>Default</th>
-			<th>Neutral</th>
-			<th>Brand</th>
-		</tr>
-	</thead>
-	{% for element, default in variantDefaults %}
-	<tr>
-		<th>{{ element | capitalize }}</th>
-		<td><wa-{{ element }}>{{ default | capitalize }}</wa-{{ element }}></td>
-		<td><wa-{{ element }} variant="neutral">Neutral</wa-{{ element }}></td>
-		<td><wa-{{ element }} variant="brand">Brand</wa-{{ element }}></td>
-	</tr>
-	{% endfor %}
-</table>
-```
-
-### Nested elements
-
-{% set containers = [
-	{parent: 'callout', child: 'button'},
-	{parent: 'callout', child: 'callout'},
-	{parent: 'button', child: 'badge'}
-] %}
-
-{% for container in containers %}
-{% set parent = container.parent %}
-{% set child = container.child %}
-
-#### {{ child | capitalize }} in {{ parent | capitalize }}
-
-```html {.example}
-<table>
-	<thead>
-		<tr>
-			{% if parent == child -%}
-			<th>👇 Parent / Child 👉</th>
-			{% else %}
-			<th>👇 {{ parent | capitalize }} / {{ child | capitalize }} 👉</th>
-			{%- endif %}
-			<th>Default</th>
-			<th>Neutral</th>
-			<th>Brand</th>
-		</tr>
-	</thead>
-	{% for parentVariant in variants %}
-	{% set parentContent = (parentVariant | capitalize or 'Default') if parent == 'button' %}
-
-	<tr>
-		<th>{{ parentVariant | capitalize or 'Default' }}</th>
-		{% for childVariant in variants -%}
-		{% set childContent = (childVariant or parentVariant or variantDefaults[child]) | capitalize %}
-		{% set childContent = childContent[0] if child == 'badge' else childContent  %}
-		<td><wa-{{ parent }}{{ parentVariant | attr('variant') }}>
-			{{ parentContent }}
-			<wa-{{ child }}{{ childVariant | attr('variant') }}>{{ childContent }}</wa-{{ child }}>
-		</wa-{{ parent }}></td>
-		{% endfor %}
-	</tr>
-	{% endfor %}
-</table>
-```
-{% endfor %}

docs/docs/experimental/sandbox.md

@@ -0,0 +1,352 @@
+---
+title: Theming Sandbox
+description: TODO
+layout: page-outline
+---
+
+## Card
+
+```html {.example}
+<wa-card with-image with-footer class="card-overview">
+  <img
+    slot="image"
+    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+  />
+
+  <strong>Mittens</strong><br />
+  This kitten is as cute as he is playful. Bring him home today!<br />
+  <small>6 weeks old</small>
+
+  <div slot="footer">
+    <wa-button variant="brand" pill>More Info</wa-button>
+    <wa-rating></wa-rating>
+  </div>
+</wa-card>
+
+<style>
+  .card-overview {
+    max-width: 300px;
+  }
+
+  .card-overview small {
+    color: var(--wa-color-text-quiet);
+  }
+
+  .card-overview [slot='footer'] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
+```
+
+## Alerts
+
+```html {.example}
+<wa-callout variant="brand">
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+  <strong>This is super informative</strong><br />
+  You can tell by how pretty the alert is.
+</wa-callout>
+<br />
+<wa-callout variant="success">
+  <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
+  <strong>Your changes have been saved</strong><br />
+  You can safely exit the app now.
+</wa-callout>
+<br />
+<wa-callout variant="neutral">
+  <wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
+  <strong>Your settings have been updated</strong><br />
+  Settings will take affect on next login.
+</wa-callout>
+<br />
+<wa-callout variant="warning">
+  <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
+  <strong>Your session has ended</strong><br />
+  Please login again to continue.
+</wa-callout>
+<br />
+<wa-callout variant="danger">
+  <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
+  <strong>Your account has been deleted</strong><br />
+  We're very sorry to see you go!
+</wa-callout>
+```
+
+## Badges and Tags
+
+```html {.example}
+<wa-badge variant="brand">Brand</wa-badge>
+<wa-badge variant="success">Success</wa-badge>
+<wa-badge variant="neutral">Neutral</wa-badge>
+<wa-badge variant="warning">Warning</wa-badge>
+<wa-badge variant="danger">Danger</wa-badge>
+<br />
+<wa-tag variant="brand">Brand</wa-tag>
+<wa-tag variant="success">Success</wa-tag>
+<wa-tag variant="neutral">Neutral</wa-tag>
+<wa-tag variant="warning">Warning</wa-tag>
+<wa-tag variant="danger">Danger</wa-tag>
+```
+
+## Buttons
+
+```html {.example}
+<wa-button variant="brand">Brand</wa-button>
+<wa-button variant="success">Success</wa-button>
+<wa-button variant="neutral">Neutral</wa-button>
+<wa-button variant="warning">Warning</wa-button>
+<wa-button variant="danger">Danger</wa-button>
+<br /><br />
+<wa-button variant="brand" appearance="outlined">Brand</wa-button>
+<wa-button variant="success" appearance="outlined">Success</wa-button>
+<wa-button variant="neutral" appearance="outlined">Neutral</wa-button>
+<wa-button variant="warning" appearance="outlined">Warning</wa-button>
+<wa-button variant="danger" appearance="outlined">Danger</wa-button>
+<br /><br />
+<wa-button appearance="plain">Text</wa-button>
+<br /><br />
+<wa-radio-group label="Radio button group" name="a" value="1">
+  <wa-radio-button value="1">Option 1</wa-radio-button>
+  <wa-radio-button value="2">Option 2</wa-radio-button>
+  <wa-radio-button value="3">Option 3</wa-radio-button>
+</wa-radio-group>
+```
+
+## Form controls
+
+```html {.example}
+<wa-checkbox>Unchecked</wa-checkbox>
+<br />
+<wa-checkbox checked>Checked</wa-checkbox>
+<br /><br />
+<wa-radio-group label="Radio" 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>
+<br />
+<wa-switch>Switch off</wa-switch>
+<br />
+<wa-switch checked>Switch on</wa-switch>
+<br /><br />
+<wa-slider label="Range" hint="Here's a bit of handy content." min="0" max="100"></wa-slider>
+<br /><br />
+<wa-input label="Label" hint="Super helpful and/or contextual content" placeholder="Placeholder"></wa-input>
+<br />
+<wa-select label="Select" multiple value="option-1 option-2">
+  <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-option value="option-4">Option 4</wa-option>
+  <wa-option value="option-5">Option 5</wa-option>
+  <wa-option value="option-6">Option 6</wa-option>
+</wa-select>
+```
+
+## Progress
+
+```html {.example}
+<wa-progress-ring value="25" style="--indicator-width: 4px;"></wa-progress-ring>
+<wa-progress-bar value="60"></wa-progress-bar>
+<wa-spinner></wa-spinner>
+```
+
+## Shadows
+
+```html {.example}
+<style>
+  div.shadow {
+    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
+    border-radius: var(--wa-border-radius-s);
+    display: inline-block;
+    height: 4rem;
+    margin-right: 2rem;
+    width: 4rem;
+  }
+  </style>
+<div class="shadow" style="box-shadow: var(--wa-shadow-s);"></div>
+<div class="shadow" style="box-shadow: var(--wa-shadow-m);"></div>
+<div class="shadow" style="box-shadow: var(--wa-shadow-l);"></div>
+```
+
+## Alignment Tests
+
+```html {.example}
+<style>
+  div.test-cases > * + * {
+    margin-top: 1rem;
+  }
+  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="test-cases">
+  <div class="alignment">
+    <wa-switch size="small">OCBS</wa-switch>
+    <wa-checkbox size="small">OCBS</wa-checkbox>
+    <wa-radio value="1" size="small">OCBS</wa-radio>
+  </div>
+  <div class="alignment">
+    <wa-switch>OCBS</wa-switch>
+    <wa-checkbox>OCBS</wa-checkbox>
+    <wa-radio value="1">OCBS</wa-radio>
+  </div>
+  <div class="alignment">
+    <wa-switch size="large">OCBS</wa-switch>
+    <wa-checkbox size="large">OCBS</wa-checkbox>
+    <wa-radio value="1" size="large">OCBS</wa-radio>
+  </div>
+  <div class="alignment">
+    <wa-input size="small"></wa-input>
+    <wa-select size="small" value="ocbs" multiple>
+      <wa-option value="ocbs">OCBS</wa-option>
+    </wa-select>
+    <wa-color-picker size="small"></wa-color-picker>
+    <wa-button size="small">OCBS</wa-button>
+  </div>
+  <div class="alignment">
+    <wa-input size="medium"></wa-input>
+    <wa-select size="medium" value="ocbs" multiple>
+      <wa-option value="ocbs">OCBS</wa-option>
+    </wa-select>
+    <wa-color-picker size="medium"></wa-color-picker>
+    <wa-button size="medium">OCBS</wa-button>
+  </div>
+  <div class="alignment">
+    <wa-input size="large"></wa-input>
+    <wa-select size="large" value="ocbs" multiple>
+      <wa-option value="ocbs">OCBS</wa-option>
+    </wa-select>
+    <wa-color-picker size="large"></wa-color-picker>
+    <wa-button size="large">OCBS</wa-button>
+  </div>
+  <div class="alignment">
+    <wa-badge>OCBS</wa-badge>
+    <wa-avatar></wa-avatar>
+    <wa-rating></wa-rating>
+    <wa-slider></wa-slider>
+    <wa-icon-button name="gear" label="Settings"></wa-icon-button>
+    <wa-progress-bar value="50" style="width: 8rem;"></wa-progress-bar>
+    <wa-spinner></wa-spinner>
+  </div>
+  <div class="alignment">
+    <wa-input label="AaBbCc" hint="Ipsum"></wa-input>
+    <wa-select label="AaBbCc" value="ocbs" multiple hint="Ipsum">
+      <wa-option value="ocbs">OCBS</wa-option>
+    </wa-select>
+    <wa-color-picker label="AaBbCc" hint="Ipsum"></wa-color-picker>
+  </div>
+</div>
+```
+
+## Custom Property Tests
+
+```html {.example}
+<style>
+  .wa-theme-test {
+    --wa-form-control-background-color: mistyrose;
+
+    --wa-form-control-border-style: dotted;
+    --wa-form-control-border-width: 3px;
+    --wa-form-control-border-radius: 12px;
+
+    --wa-form-control-activated-color: mediumvioletred;
+    --wa-form-control-border-color: palevioletred;
+
+    --wa-form-control-label-color: rosybrown;
+    --wa-form-control-label-font-weight: 900;
+    --wa-form-control-label-line-height: 1;
+
+    --wa-form-control-value-color: brown;
+    --wa-form-control-value-font-weight: 900;
+    --wa-form-control-value-line-height: 2;
+
+    --wa-form-control-placeholder-color: lightpink;
+  }
+</style>
+<div class="wa-theme-test" style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+  <label>Native Input <input type="text" placeholder="placeholder"></label>
+  <wa-input label="WA Input" type="text" placeholder="placeholder"></wa-input>
+
+  <label>Native Input <input type="text" value="value"></label>
+  <wa-input label="WA Input" type="text" value="value"></wa-input>
+
+  <label>Native Textarea <textarea placeholder="placeholder"></textarea></label>
+  <wa-textarea label="WA Textarea" placeholder="placeholder"></wa-textarea>
+
+  <label>Native Textarea <textarea>value</textarea></label>
+  <wa-textarea label="WA Textarea" value="value"></wa-textarea>
+
+  <label><input type="checkbox" checked> Native Checkbox</label>
+  <wa-checkbox checked>WA Checkbox</wa-checkbox>
+
+  <label><input type="checkbox"> Native Checkbox</label>
+  <wa-checkbox>WA Checkbox</wa-checkbox>
+
+  <label><input type="radio" checked> Native Radio</label>
+  <wa-radio checked>WA Radio</wa-radio>
+
+  <label><input type="radio"> Native Radio</label>
+  <wa-radio>WA Radio</wa-radio>
+
+  <label>
+    Native Select 
+    <select value="option-1">
+      <option value="option-1">Option 1</option>
+      <option value="option-2">Option 2</option>
+      <option value="option-3">Option 3</option>
+      <option value="option-4">Option 4</option>
+    </select>
+  </label>
+  <wa-select label="WA 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-option value="option-4">Option 4</wa-option>
+  </wa-select>
+</div>
+
+```
+
+## Text Controls Tests
+
+```html {.example}
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+  <label>Native Input <input type="text" value="value"></label>
+  <wa-input label="WA Input" type="text" value="value"></wa-input>
+
+  <label>
+    Native Select 
+    <select value="option-1">
+      <option value="option-1">Option 1</option>
+      <option value="option-2">Option 2</option>
+      <option value="option-3">Option 3</option>
+      <option value="option-4">Option 4</option>
+    </select>
+  </label>
+  <wa-select label="WA 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-option value="option-4">Option 4</wa-option>
+  </wa-select>
+
+  <label>Native Textarea <textarea>value</textarea></label>
+  <wa-textarea label="WA Textarea" value="value"></wa-textarea>
+</div>
+```

docs/docs/experimental/size.md

@@ -1,75 +0,0 @@
----
-title: Size tests
----
-
-Button size should default to `medium`:
-
-```html {.example}
-<wa-button size=small>Small</wa-button>
-<wa-button>Medium</wa-button>
-<wa-button size=medium>Medium</wa-button>
-<wa-button size=large>Large</wa-button>
-```
-
-If no button size is specified, it should default to that of its ancestor:
-
-```html {.example}
-<wa-button-group size="small">
-	<wa-button>Small 1</wa-button>
-	<wa-button>Small 2</wa-button>
-	<wa-button>Small 3</wa-button>
-</wa-button-group>
-<br><br>
-<wa-button-group>
-	<wa-button>Medium 1</wa-button>
-	<wa-button>Medium 2</wa-button>
-	<wa-button>Medium 3</wa-button>
-</wa-button-group>
-<br><br>
-<wa-button-group size="large">
-	<wa-button>Large 1</wa-button>
-	<wa-button>Large 2</wa-button>
-	<wa-button>Large 3</wa-button>
-</wa-button-group>
-```
-
-Dropdown:
-
-```html {.example}
-<p>Small dropdown:
-<wa-dropdown size="small">
-  <wa-button slot="trigger" caret>Dropdown</wa-button>
-  <wa-menu>
-    <wa-menu-item>Dropdown Item 1</wa-menu-item>
-    <wa-menu-item>Dropdown Item 2</wa-menu-item>
-    <wa-menu-item>Dropdown Item 3</wa-menu-item>
-  </wa-menu>
-</wa-dropdown>
-<p>Small menu:
-<wa-dropdown>
-  <wa-button slot="trigger" caret>Dropdown</wa-button>
-  <wa-menu size="small">
-    <wa-menu-item>Dropdown Item 1</wa-menu-item>
-    <wa-menu-item>Dropdown Item 2</wa-menu-item>
-    <wa-menu-item>Dropdown Item 3</wa-menu-item>
-  </wa-menu>
-</wa-dropdown>
-<p>Small menu item:
-<wa-dropdown>
-  <wa-button slot="trigger" caret>Dropdown</wa-button>
-  <wa-menu>
-    <wa-menu-item size="small">Dropdown Item 1</wa-menu-item>
-    <wa-menu-item size="small">Dropdown Item 2</wa-menu-item>
-    <wa-menu-item size="small">Dropdown Item 3</wa-menu-item>
-  </wa-menu>
-</wa-dropdown>
-<p>No size:
-<wa-dropdown>
-  <wa-button slot="trigger" caret>Dropdown</wa-button>
-  <wa-menu>
-    <wa-menu-item>Dropdown Item 1</wa-menu-item>
-    <wa-menu-item>Dropdown Item 2</wa-menu-item>
-    <wa-menu-item>Dropdown Item 3</wa-menu-item>
-  </wa-menu>
-</wa-dropdown>
-```