add secure context notice

Co-authored-by: Lea Verou <lea@verou.me>

.eslintignore

@@ -1,10 +0,0 @@
-.cache
-docs/dist
-docs/search.json
-docs/**/*.min.js
-dist
-examples
-node_modules
-src/react
-scripts
-

.eslintrc.cjs

@@ -1,213 +0,0 @@
-/* eslint-env node */
-
-module.exports = {
-  plugins: [
-    '@typescript-eslint',
-    'wc',
-    'lit',
-    'lit-a11y',
-    'chai-expect',
-    'chai-friendly',
-    'import',
-    'sort-imports-es6-autofix'
-  ],
-  extends: [
-    'eslint:recommended',
-    'plugin:wc/recommended',
-    'plugin:wc/best-practice',
-    'plugin:lit/recommended',
-    'plugin:lit-a11y/recommended'
-  ],
-  env: {
-    es2021: true,
-    browser: true
-  },
-  parserOptions: {
-    sourceType: 'module'
-  },
-  overrides: [
-    {
-      extends: [
-        'plugin:@typescript-eslint/eslint-recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:@typescript-eslint/recommended-requiring-type-checking'
-      ],
-      parser: '@typescript-eslint/parser',
-      parserOptions: {
-        sourceType: 'module',
-        project: './tsconfig.json',
-        tsconfigRootDir: __dirname
-      },
-      files: ['*.ts'],
-      rules: {
-        'default-param-last': 'off',
-        '@typescript-eslint/default-param-last': 'error',
-        'no-console': 'warn',
-        'no-empty-function': 'off',
-        '@typescript-eslint/no-empty-function': 'warn',
-        'no-implied-eval': 'off',
-        'no-invalid-this': 'off',
-        'no-shadow': 'off',
-        'no-throw-literal': 'off',
-        'no-unused-expressions': 'off',
-        'lit-a11y/no-autofocus': 'off',
-        '@typescript-eslint/no-implied-eval': 'error',
-        '@typescript-eslint/no-invalid-this': 'error',
-        '@typescript-eslint/no-throw-literal': 'error',
-        '@typescript-eslint/no-shadow': 'error',
-        '@typescript-eslint/prefer-regexp-exec': 'off',
-        '@typescript-eslint/no-unused-expressions': 'error',
-        '@typescript-eslint/unbound-method': 'off',
-        '@typescript-eslint/no-non-null-assertion': 'off',
-        '@typescript-eslint/no-floating-promises': 'off',
-        '@typescript-eslint/no-misused-promises': [
-          'error',
-          {
-            checksVoidReturn: false
-          }
-        ],
-        '@typescript-eslint/consistent-type-assertions': [
-          'warn',
-          {
-            assertionStyle: 'as',
-            objectLiteralTypeAssertions: 'never'
-          }
-        ],
-        '@typescript-eslint/consistent-type-imports': 'warn',
-        '@typescript-eslint/no-base-to-string': 'error',
-        '@typescript-eslint/no-confusing-non-null-assertion': 'error',
-        '@typescript-eslint/no-invalid-void-type': 'error',
-        '@typescript-eslint/no-require-imports': 'error',
-        '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'warn',
-        '@typescript-eslint/no-unnecessary-condition': 'off',
-        '@typescript-eslint/no-unnecessary-qualifier': 'warn',
-        '@typescript-eslint/non-nullable-type-assertion-style': 'warn',
-        '@typescript-eslint/prefer-for-of': 'warn',
-        '@typescript-eslint/prefer-optional-chain': 'warn',
-        '@typescript-eslint/prefer-ts-expect-error': 'warn',
-        '@typescript-eslint/prefer-return-this-type': 'error',
-        '@typescript-eslint/prefer-string-starts-ends-with': 'warn',
-        '@typescript-eslint/require-array-sort-compare': 'error',
-        '@typescript-eslint/unified-signatures': 'warn',
-        '@typescript-eslint/array-type': 'warn',
-        '@typescript-eslint/consistent-type-definitions': ['warn', 'interface'],
-        '@typescript-eslint/member-delimiter-style': 'warn',
-        '@typescript-eslint/method-signature-style': 'warn',
-        '@typescript-eslint/no-extraneous-class': 'error',
-        '@typescript-eslint/no-redundant-type-constituents': 'off',
-        '@typescript-eslint/parameter-properties': 'error',
-        '@typescript-eslint/strict-boolean-expressions': 'off'
-      }
-    },
-    {
-      files: ['**/*.cjs'],
-      env: {
-        node: true
-      }
-    },
-    {
-      extends: ['plugin:chai-expect/recommended', 'plugin:chai-friendly/recommended'],
-      files: ['*.test.ts'],
-      rules: {
-        '@typescript-eslint/no-unsafe-call': 'off',
-        '@typescript-eslint/no-unused-expressions': 'off'
-      }
-    }
-  ],
-  rules: {
-    'no-template-curly-in-string': 'error',
-    'array-callback-return': 'error',
-    'comma-dangle': 'off',
-    'consistent-return': 'error',
-    curly: 'off',
-    'default-param-last': 'error',
-    eqeqeq: 'error',
-    'lit-a11y/click-events-have-key-events': 'off',
-    'no-constructor-return': 'error',
-    'no-empty-function': 'warn',
-    'no-eval': 'error',
-    'no-extend-native': 'error',
-    'no-extra-bind': 'error',
-    'no-floating-decimal': 'error',
-    'no-implicit-coercion': 'off',
-    'no-implicit-globals': 'error',
-    'no-implied-eval': 'error',
-    'no-invalid-this': 'error',
-    'no-labels': 'error',
-    'no-lone-blocks': 'error',
-    'no-new': 'error',
-    'no-new-func': 'error',
-    'no-new-wrappers': 'error',
-    'no-octal-escape': 'error',
-    'no-proto': 'error',
-    'no-return-assign': 'warn',
-    'no-script-url': 'error',
-    'no-self-compare': 'warn',
-    'no-sequences': 'warn',
-    'no-throw-literal': 'error',
-    'no-unmodified-loop-condition': 'error',
-    'no-unused-expressions': 'warn',
-    'no-useless-call': 'error',
-    'no-useless-concat': 'error',
-    'no-useless-return': 'warn',
-    'prefer-promise-reject-errors': 'error',
-    radix: 'off',
-    'require-await': 'error',
-    'wrap-iife': ['warn', 'inside'],
-    'no-shadow': 'error',
-    'no-array-constructor': 'error',
-    'no-bitwise': 'error',
-    'no-multi-assign': 'warn',
-    'no-new-object': 'error',
-    'no-useless-computed-key': 'warn',
-    'no-useless-rename': 'warn',
-    'no-var': 'error',
-    'prefer-const': 'warn',
-    'prefer-numeric-literals': 'warn',
-    'prefer-object-spread': 'warn',
-    'prefer-rest-params': 'warn',
-    'prefer-spread': 'warn',
-    'prefer-template': 'off',
-    'no-else-return': 'off',
-    'func-names': ['warn', 'never'],
-    'one-var': ['warn', 'never'],
-    'operator-assignment': 'warn',
-    'prefer-arrow-callback': 'warn',
-    'no-restricted-imports': [
-      'warn',
-      {
-        paths: [
-          {
-            name: '.',
-            message: 'Usage of local index imports is not allowed.'
-          },
-          {
-            name: './index',
-            message: 'Import from the source file instead.'
-          }
-        ]
-      }
-    ],
-    'import/extensions': [
-      'error',
-      'always',
-      {
-        ignorePackages: true,
-        pattern: {
-          js: 'always',
-          ts: 'never'
-        }
-      }
-    ],
-    'import/no-duplicates': 'warn',
-    'sort-imports-es6-autofix/sort-imports-es6': [
-      2,
-      {
-        ignoreCase: true,
-        ignoreMemberSort: false,
-        memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single']
-      }
-    ],
-    'wc/guard-super-call': 'off'
-  }
-};

.github/workflows/client_tests.js.yml

@@ -0,0 +1,39 @@
+# # 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: Client Tests
+
+on:
+  push:
+    branches: [next]
+  pull_request:
+    branches: [next]
+
+jobs:
+  client_test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Lint
+        run: npm run prettier
+      - name: Build
+        run: npm run build:alpha
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Run CSR tests
+        # FAIL_FAST to fail on first failing test.
+        run: FAIL_FAST="true" CSR_ONLY="true" npm run test

.github/workflows/node.js.yml

@@ -1,101 +0,0 @@
-# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-# name: Node.js CI
-
-# on:
-#   push:
-#     branches: [next]
-#   pull_request:
-#     branches: [next]
-
-# jobs:
-#   build:
-#     runs-on: ubuntu-latest
-
-#     strategy:
-#       matrix:
-#         node-version: [20.x]
-#         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-#     steps:
-#       - uses: actions/checkout@v4
-#       - name: Use Node.js ${{ matrix.node-version }}
-#         uses: actions/setup-node@v4
-#         with:
-#           node-version: ${{ matrix.node-version }}
-#           cache: 'npm'
-#       - run: npm ci
-#       - run: npx playwright install-deps
-#       - run: npm run verify
-
-# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: Node.js CI
-
-on:
-  push:
-    branches: [next]
-  pull_request:
-    branches: [next]
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [20.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-      - run: npm ci
-      - run: npm run prettier && npm run lint
-
-  test_client:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [20.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-      - run: npm ci
-      - run: npx playwright uninstall --all && npx playwright install --force chromium firefox webkit --with-deps
-      - run: npm run build
-      # --bail to fail on first failing test.
-      - run: CSR_ONLY="true" npm run test -- --bail
-
-  test_ssr:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [20.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-      - run: npm ci
-      - run: npx playwright uninstall --all && npx playwright install --force chromium firefox webkit --with-deps
-      - run: npm run build
-      - run: SSR_ONLY="true" npm run test -- --bail

.github/workflows/ssr_tests.js.yml

@@ -0,0 +1,41 @@
+# # 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]
+
+jobs:
+  ssr_test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      # Just lint here too. Save some GH Action minutes and not need to use "depends_on" or anything.
+      - name: Lint
+        run: npm run prettier
+
+      - name: Build
+        run: npm run build:alpha
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Run SSR tests
+        # FAIL_FAST to fail on first failing test.
+        run: FAIL_FAST="true" SSR_ONLY="true" npm run test
+

.vscode/extensions.json

@@ -3,7 +3,6 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "bierner.lit-html",
-    "bashmish.es6-string-css",
     "streetsidesoftware.code-spell-checker"
   ]
 }

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.enable": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },

README.md

@@ -59,6 +59,8 @@ To generate a production build, run the following command.
 npm run build
 ```
 
+You can also run `npm run build:serve` to start an [`http-server`](https://www.npmjs.com/package/http-server) instance on `http://localhost:4000` after the build completes, so you can preview the production build.
+
 ### Creating New Components
 
 To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.

cspell.json

@@ -5,6 +5,7 @@
     "allowfullscreen",
     "animationend",
     "Animista",
+    "APG",
     "apos",
     "atrule",
     "autocorrect",
@@ -38,12 +39,15 @@
     "crutchcorn",
     "csspart",
     "cssproperty",
+    "cssstate",
     "datetime",
     "describedby",
     "Docsify",
     "dogfood",
     "dropdowns",
     "easings",
+    "ecommerce",
+    "endfor",
     "endraw",
     "endregion",
     "enterkeyhint",
@@ -71,6 +75,7 @@
     "haspopup",
     "heroicons",
     "hexa",
+    "Hotwire",
     "Iconoir",
     "Iframes",
     "iife",
@@ -79,9 +84,10 @@
     "ionicons",
     "jsDelivr",
     "jsfiddle",
-    "jsonata",
     "keydown",
     "keyframes",
+    "keymaker",
+    "Konnor",
     "Kool",
     "labelledby",
     "Laravel",
@@ -96,8 +102,10 @@
     "Menlo",
     "menuitemcheckbox",
     "menuitemradio",
+    "metaframeworks",
     "middlewares",
     "minlength",
+    "minmax",
     "monospace",
     "mousedown",
     "mousemove",
@@ -106,6 +114,7 @@
     "multiselectable",
     "nextjs",
     "nocheck",
+    "noindex",
     "noopener",
     "noreferrer",
     "novalidate",
@@ -118,6 +127,7 @@
     "peta",
     "petabit",
     "Preact",
+    "preconnect",
     "prismjs",
     "progressbar",
     "radiogroup",
@@ -140,6 +150,7 @@
     "scroller",
     "Segoe",
     "semibold",
+    "shadowrootmode",
     "Shortcode",
     "Shortcodes",
     "sitedir",
@@ -147,16 +158,19 @@
     "smartquotes",
     "spacebar",
     "stylesheet",
+    "svgs",
     "Tabbable",
     "tabindex",
     "tabler",
     "tablist",
     "tabpanel",
+    "tbody",
     "templating",
     "tera",
     "testid",
     "textareas",
     "textfield",
+    "thead",
     "Themer",
     "tinycolor",
     "transitionend",
@@ -180,7 +194,8 @@
     "webawesomer",
     "WEBP",
     "Webpacker",
-    "xmark"
+    "xmark",
+    "zoomable"
   ],
   "ignorePaths": [
     "package.json",

custom-elements-manifest.js

@@ -2,8 +2,8 @@ import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integrat
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
 // import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
 import { parse } from 'comment-parser';
-import { pascalCase } from 'pascal-case';
 import fs from 'fs';
+import { pascalCase } from 'pascal-case';
 
 const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
@@ -28,7 +28,7 @@ export default {
       name: 'wa-package-data',
       packageLinkPhase({ customElementsManifest }) {
         customElementsManifest.package = { name, description, version, author, homepage, license };
-      }
+      },
     },
 
     // Parse custom jsDoc tags
@@ -83,13 +83,13 @@ export default {
                   classDoc[t.tag].push({
                     name: t.name,
                     description: t.description,
-                    type: t.type || undefined
+                    type: t.type || undefined,
                   });
               }
             });
           }
         }
-      }
+      },
     },
 
     {
@@ -109,7 +109,7 @@ export default {
             }
           }
         }
-      }
+      },
     },
 
     {
@@ -127,7 +127,7 @@ export default {
           //
           const terms = [
             { from: /^src\//, to: '' }, // Strip the src/ prefix
-            { from: /\.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
+            { from: /\.(t|j)sx?$/, to: '.js' }, // Convert .ts to .js
           ];
 
           mod.path = replace(mod.path, terms);
@@ -146,7 +146,7 @@ export default {
             }
           }
         });
-      }
+      },
     },
 
     // Generate custom VS Code data
@@ -156,9 +156,9 @@ export default {
       referencesTemplate: (_, tag) => [
         {
           name: 'Documentation',
-          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
-        }
-      ]
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`,
+        },
+      ],
     }),
 
     customElementJetBrainsPlugin({
@@ -168,10 +168,10 @@ export default {
       referencesTemplate: (_, tag) => {
         return {
           name: 'Documentation',
-          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`,
         };
-      }
-    })
+      },
+    }),
 
     //
     // TODO - figure out why this broke when events were updated
@@ -181,5 +181,5 @@ export default {
     //   fileName: 'index.d.ts',
     //   componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.js`
     // })
-  ]
+  ],
 };

docs/.eleventy.js

@@ -1,61 +1,70 @@
-import { parse } from 'path';
-import { markdown } from './_utils/markdown.js';
 import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
 import { codeExamplesPlugin } from './_utils/code-examples.js';
 import { copyCodePlugin } from './_utils/copy-code.js';
 import { currentLink } from './_utils/current-link.js';
 import { highlightCodePlugin } from './_utils/highlight-code.js';
-import { formatCodePlugin } from './_utils/format-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 { readFile } from 'fs/promises';
+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';
 import { searchPlugin } from './_utils/search.js';
-import { readFile } from 'fs/promises';
-import { outlinePlugin } from './_utils/outline.js';
-import { getComponents } from './_utils/manifest.js';
-import litPlugin from '@lit-labs/eleventy-plugin-lit';
 
 import process from 'process';
 
 const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
 const isAlpha = process.argv.includes('--alpha');
-const isDeveloping = process.argv.includes('--develop');
+const isDev = process.argv.includes('--develop');
+
+const globalData = {
+  package: packageData,
+  isAlpha,
+  layout: 'page.njk',
+};
+
+const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
+const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
 
 export default function (eleventyConfig) {
   // NOTE - alpha setting removes certain pages
   if (isAlpha) {
-    eleventyConfig.ignores.add('**/components/page.md');
     eleventyConfig.ignores.add('**/experimental/**');
+    eleventyConfig.ignores.add('**/layout/**');
+    eleventyConfig.ignores.add('**/patterns/**');
+    eleventyConfig.ignores.add('**/style-utilities/**');
+    eleventyConfig.ignores.add('**/components/code-demo.md');
+    eleventyConfig.ignores.add('**/components/viewport-demo.md');
   }
 
   // Add template data
-  eleventyConfig.addGlobalData('package', packageData);
+  for (let name in globalData) {
+    eleventyConfig.addGlobalData(name, globalData[name]);
+  }
 
   // Template filters - {{ content | filter }}
   eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
   eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
-  eleventyConfig.addFilter('stripExtension', string => parse(string).name);
-  eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
-  eleventyConfig.addFilter('trimPipes', content => {
-    // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
-    // With Prettier 3, this means a leading pipe will exist be present when the line wraps.
-    return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
-  });
+
+  for (let name in filters) {
+    eleventyConfig.addFilter(name, filters[name]);
+  }
 
   // Shortcodes - {% shortCode arg1, arg2 %}
   eleventyConfig.addShortcode('cdnUrl', location => {
     return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
   });
 
-  // Helpers
-  eleventyConfig.addNunjucksGlobal('getComponent', tagName => {
-    const component = getComponents().find(c => c.tagName === tagName);
+  // Paired shortcodes - {% shortCode %}content{% endShortCode %}
+  eleventyConfig.addPairedShortcode('markdown', content => markdown.render(content || ''));
 
-    if (!component) {
-      throw new Error(
-        `Unable to find "<${tagName}>". Make sure the file name is the same as the tag name (without prefix).`
-      );
-    }
-    return component;
-  });
+  // Helpers
+
+  // Remove elements that have [data-alpha="remove"]
+  eleventyConfig.addPlugin(removeDataAlphaElements({ isAlpha }));
 
   // Use our own markdown instance
   eleventyConfig.setLibrary('md', markdown);
@@ -71,15 +80,15 @@ export default function (eleventyConfig) {
       selector: 'h2, h3',
       ifEmpty: doc => {
         doc.querySelector('#outline')?.remove();
-      }
-    })
+      },
+    }),
   );
 
   // Add current link classes
   eleventyConfig.addPlugin(currentLink());
 
   // Add code examples for `<code class="example">` blocks
-  eleventyConfig.addPlugin(codeExamplesPlugin());
+  eleventyConfig.addPlugin(codeExamplesPlugin);
 
   // Highlight code blocks with Prism
   eleventyConfig.addPlugin(highlightCodePlugin());
@@ -93,61 +102,77 @@ export default function (eleventyConfig) {
       // Replace [issue:1234] with a link to the issue on GitHub
       {
         replace: /\[pr:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>'
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>',
       },
       // Replace [pr:1234] with a link to the pull request on GitHub
       {
         replace: /\[issue:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>'
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>',
       },
       // Replace [discuss:1234] with a link to the discussion on GitHub
       {
         replace: /\[discuss:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>'
-      }
-    ])
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>',
+      },
+    ]),
   );
 
-  const omittedModules = [];
+  // 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`;
+      });
 
-  // problematic components:
-  // animation (breaks on navigation + ssr with Turbo)
-  // mutation-observer (why SSR this?)
-  // resize-observer (why SSR this?)
-  // tooltip (why SSR this?)
-
-  const componentModules = getComponents()
-    // .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,
     });
-
-  eleventyConfig.addPlugin(litPlugin, {
-    mode: 'worker',
-    componentModules
-  });
+  }
 
   // Build the search index
   eleventyConfig.addPlugin(
     searchPlugin({
       filename: '',
       selectorsToIgnore: ['code.example'],
-      getContent: doc => doc.querySelector('#content')?.textContent ?? ''
-    })
+      getContent: doc => doc.querySelector('#content')?.textContent ?? '',
+    }),
   );
 
   // Production-only plugins
-  if (!isDeveloping) {
-    // Run Prettier on each file (prod only because it can be slow)
-    eleventyConfig.addPlugin(formatCodePlugin());
+  //
+  // TODO - disabled because it takes about a minute to run now
+  //
+  // if (!isDev) {
+  //   // Run Prettier on each file (prod only because it can be slow)
+  //   eleventyConfig.addPlugin(formatCodePlugin());
+  // }
+
+  eleventyConfig.addPassthroughCopy({
+    'docs/assets': 'assets',
+  });
+
+  for (let glob of passThrough) {
+    eleventyConfig.addPassthroughCopy(glob);
   }
 
   return {
+    markdownTemplateEngine: 'njk',
     dir: {
+      input: 'docs',
       includes: '_includes',
-      layouts: '_layouts'
+      layouts: '_layouts',
     },
-    templateFormats: ['njk', 'md']
+    templateFormats: ['njk', 'md'],
   };
 }

docs/_data/componentList.js

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

docs/_data/components.js

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

docs/_data/componentsBy.js

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

docs/_data/hues.json

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

docs/_data/palettes.js

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

docs/_includes/base.njk

@@ -1,85 +1,46 @@
 <!DOCTYPE html>
-<html lang="en" data-cdn-url="{% cdnUrl %}">
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="{{ description }}">
+    {% include 'head.njk' %}
     <meta name="theme-color" content="#f36944">
-    {% if noindex %}<meta name="robots" content="noindex">{% endif %}
-
-    <title>{{ title }}</title>
-
-    <link rel="icon" href="/assets/images/webawesome-logo.svg" />
-    <link rel="apple-touch-icon" href="/assets/images/app-icon.png">
-
-    {# Scripts #}
-    {# Hydration stuff #}
-    <script src="/assets/scripts/hydration-errors.js"></script>
-    <link rel="stylesheet" href="/assets/styles/hydration-errors.css">
-    <link rel="preconnect" href="https://cdn.jsdelivr.net">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.4/+esm"></script>
 
     <script type="module" src="/assets/scripts/code-examples.js"></script>
-    <script type="module" src="/assets/scripts/color-scheme.js"></script>
     <script type="module" src="/assets/scripts/copy-code.js"></script>
+
     <script type="module" src="/assets/scripts/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>
     <script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>
 
-    {# Web Awesome #}
-    <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
-    <link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
-    <link rel="stylesheet" href="/dist/themes/applied.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/color_standard.css" />
-    <link rel="stylesheet" href="/dist/themes/forms.css" />
-
     {# Docs styles #}
     <link rel="stylesheet" href="/assets/styles/docs.css" />
-
-    {# Set the theme to prevent flashing #}
-    <script>
-      document.documentElement.classList.toggle(
-        'wa-theme-default-dark',
-        sessionStorage.getItem('colorScheme') === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches
-      );
-    </script>
   </head>
-  <body class="layout-{{ layout | stripExtension }}">
+  <body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
     <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
-    <wa-page view="desktop">
-      <header slot="header">
+    <wa-page view="desktop" disable-navigation-toggle="">
+      <header slot="header" class="wa-split">
         {# Logo #}
         <div id="docs-branding">
           {# Nav toggle #}
-          <wa-button appearance="text" data-toggle-nav>
+          <wa-button appearance="plain" size="small" data-toggle-nav>
             <wa-icon name="bars" label="Toggle navigation"></wa-icon>
           </wa-button>
+
           <a href="/" aria-label="Web Awesome">
-            <span class="only-desktop">{% include "logo.njk" %}</span>
-            <span class="only-mobile">{% include "logo-simple.njk" %}</span>
+            <span class="wa-desktop-only">{% include "logo.njk" %}</span>
+            <span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
           </a>
           <small id="version-number" class="only-desktop">{{ package.version }}</small>
-          <wa-badge variant="warning" class="only-desktop">Alpha</wa-badge>
+          <wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
         </div>
 
-        <div id="docs-toolbar">
-          {# Color scheme selector #}
-          <wa-dropdown id="color-scheme-selector">
-            <wa-button slot="trigger" appearance="tinted" size="small" pill caret title="Press \ to toggle">
-              <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
-              <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
-              <span class="only-light only-desktop">Light</span>
-              <span class="only-dark only-desktop">Dark</span>
-            </wa-button>
-            <wa-menu>
-              <wa-menu-item type="checkbox" value="light">Light</wa-menu-item>
-              <wa-menu-item type="checkbox" value="dark">Dark</wa-menu-item>
-              <wa-divider></wa-divider>
-              <wa-menu-item type="checkbox" value="auto">System</wa-menu-item>
-            </wa-menu>
-          </wa-dropdown>
+        <div id="docs-toolbar" class="wa-cluster wa-gap-xs">
+          {# Desktop selectors #}
+          <div class="only-desktop wa-cluster wa-gap-xs">
+            {% include "preset-theme-selector.njk" %}
+            {% include "color-scheme-selector.njk" %}
+          </div>
 
           {# Search #}
           <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
@@ -92,12 +53,16 @@
 
       {# Sidebar #}
       {% if hasSidebar %}
-        <aside slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
-          <wa-icon-button id="sidebar-close-button" name="xmark" label="Close" data-drawer="close"></wa-icon-button>
-          <nav>
-            {% include "sidebar.njk" %}
-          </nav>
-        </aside>
+        {# Mobile selectors #}
+        <div class="wa-mobile-only" slot="navigation-header">
+          <div class="wa-cluster wa-gap-xs">
+            {% include "preset-theme-selector.njk" %}
+            {% include "color-scheme-selector.njk" %}
+          </div>
+        </div>
+        <div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
+          {% include "sidebar.njk" %}
+        </div>
       {% endif %}
 
       {# Outline #}
@@ -118,11 +83,12 @@
           </details>
         </nav>
 
-        {% block beforeContent %}{% endblock %}
+        {% block header %}
+          {% include 'breadcrumbs.njk' %}
+          <h1 class="title">{{ title }}</h1>
+        {% endblock %}
 
         {% block content %}
-          <h1 class="title">{{ title }}</h1>
-
           {{ content | safe }}
         {% endblock %}
 

docs/_includes/breadcrumbs.njk

@@ -0,0 +1,10 @@
+{% set breadcrumbs = page.url | breadcrumbs %}
+{% if breadcrumbs.length > 0 %}
+  <wa-breadcrumb id="docs-breadcrumbs">
+  {% for crumb in breadcrumbs %}
+    <wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
+  {% endfor %}
+  <wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
+  </wa-breadcrumb>
+  {% else %}
+{% endif %}

docs/_includes/color-scheme-selector.njk

@@ -0,0 +1,19 @@
+{# Color scheme selector #}
+<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" pill title="Press \ to toggle">
+  <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
+  <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
+  <wa-option value="light">
+    <wa-icon slot="prefix" name="sun" variant="regular"></wa-icon>
+    Light
+  </wa-option>
+  <wa-option value="dark">
+    <wa-icon slot="prefix" name="moon" variant="regular"></wa-icon>
+    Dark
+  </wa-option>
+  <wa-divider></wa-divider>
+  <wa-option value="auto">
+    <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
+    <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
+    System
+  </wa-option>
+</wa-select>

docs/_includes/contrast-table.njk

@@ -0,0 +1,40 @@
+<table class="colors wa-palette-{{ paletteId }}">
+  <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>
+  <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 %}
+      <td>
+        <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
+          {% set contrast_wcag = '' %}
+          {% if color_fg and color_bg %}
+            {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
+          {% endif %}
+          {% 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

@@ -0,0 +1,12 @@
+{# Cards for pages listed by category #}
+
+<section id="grid" class="index-grid">
+{% for category, pages in allPages | groupByTags(categories) -%}
+  <h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
+    {%- for page in pages -%}
+      {%- if not page.data.parent or listChildren -%}
+        {% include "page-card.njk" %}
+      {%- endif -%}
+    {%- endfor -%}
+{%- endfor -%}
+</section>

docs/_includes/head.njk

@@ -0,0 +1,49 @@
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="description" content="{{ description }}">
+{% if noindex %}<meta name="robots" content="noindex">{% endif %}
+
+<title>{{ title }}</title>
+
+{# Dark mode #}
+<script>
+	let colorScheme = localStorage.colorScheme;
+	let isDark = localStorage.colorScheme === "dark";
+	if (!colorScheme || colorScheme === "auto") {
+		isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+	}
+	document.documentElement.classList.toggle('wa-dark', isDark);
+</script>
+
+<link rel="icon" href="/assets/images/webawesome-logo.svg" />
+<link rel="apple-touch-icon" href="/assets/images/app-icon.png">
+
+{# Scripts #}
+{# Hydration stuff #}
+<script src="/assets/scripts/hydration-errors.js"></script>
+<link rel="stylesheet" href="/assets/styles/hydration-errors.css">
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
+
+{# Web Awesome #}
+<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
+
+<script type="module" src="/assets/scripts/theme-picker.js"></script>
+{# Preset Theme #}
+{% if forceTheme %}
+<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme }}.css" render="blocking" fetchpriority="high" />
+{% else %}
+<noscript><link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high" /></noscript>
+<script>
+{
+	let preset = localStorage.presetTheme ?? 'default';
+	let script = document.currentScript;
+	script.insertAdjacentHTML('beforebegin', `<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/${ preset }.css" render="blocking" fetchpriority="high" />`);
+}
+</script>
+<script type="module" src="/assets/scripts/preset-theme-picker.js"></script>
+{% endif %}
+
+<link rel="stylesheet" href="/dist/styles/webawesome.css" />
+<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
+<link rel="stylesheet" href="/dist/styles/forms.css" />

docs/_includes/import-stylesheet-code.md.njk

@@ -0,0 +1,18 @@
+<wa-tab-group>
+<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

@@ -0,0 +1,10 @@
+{%- if not page.data.unlisted -%}
+<a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
+	<wa-card with-header>
+		<div slot="header">
+		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
+		</div>
+		<span class="page-name">{{ page.data.title }}</span>
+	</wa-card>
+</a>
+{% endif %}

docs/_includes/page-demo.njk

@@ -0,0 +1,26 @@
+<div id="page_slots_demo">
+<link rel="stylesheet" href="./demo.css">
+{% set slots = components.page.slots %}
+
+<fieldset id="page_slots_fieldset">
+  <legend>Slots</legend>
+  <div class="options">
+  {% for slot in slots %}
+	{% if (slot.name != "skip-to-content") and (slot.name != "navigation-toggle-icon") %}
+  <wa-checkbox name="slot" value="{{ slot.name }}" {{ 'checked' if slot.name != "menu" and slot.name != 'navigation-toggle' | safe}} class="{{ 'default' if not slot.name }}"
+  data-description="{{ slot.description | inlineMarkdown }}" title="{{ slot.description | inlineMarkdown | striptags | safe }}">
+    {{ slot.name or "(default)" }}
+  </wa-checkbox>
+	{% endif %}
+  {% endfor %}
+  </div>
+</fieldset>
+<wa-viewport-demo viewport="1000">
+<iframe srcdoc="" id="page_slots_iframe"></iframe>
+</wa-viewport-demo>
+</div>
+
+<script type="module">
+  const cacheBust = new Date().toString()
+  import(`./demo.js?${cacheBust}`)
+</script>

docs/_includes/preset-theme-selector.njk

@@ -0,0 +1,9 @@
+{# Preset theme selector #}
+<wa-select appearance="filled" size="small" value="default" pill class="preset-theme-selector">
+  <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
+  {% for theme in collections.theme | sort %}
+    <wa-option value="{{ theme.page.fileSlug }}"{{ ' data-alpha="remove"' if theme.noAlpha }}>
+      {{ theme.data.title }}
+    </wa-option>
+  {% endfor %}
+</wa-select>

docs/_includes/search.njk

@@ -6,7 +6,7 @@
         <wa-input
           id="site-search-input"
           type="search"
-          filled
+          appearance="filled"
           size="large"
           clearable
           placeholder="Search"

docs/_includes/sidebar-group.njk

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

docs/_includes/sidebar-link.njk

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

docs/_includes/sidebar.njk

@@ -3,7 +3,6 @@
 <ul>
   <li><a href="/docs/installation">Installation</a></li>
   <li><a href="/docs/usage">Usage</a></li>
-  <li><a href="/docs/themes">Themes</a></li>
   <li><a href="/docs/customizing">Customizing</a></li>
   <li><a href="/docs/form-controls">Form Controls</a></li>
   <li><a href="/docs/localization">Localization</a></li>
@@ -17,229 +16,18 @@
   <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>
 
-{# Components #}
-<h2>Components</h2>
-<ul>
-  <li>
-    <a href="/docs/components/">Components Overview</a>
-  </li>
-  <li>
-    <a href="/docs/components/animated-image">Animated Image</a>
-  </li>
-  <li>
-    <a href="/docs/components/animation">Animation</a>
-  </li>
-  <li>
-    <a href="/docs/components/avatar">Avatar</a>
-  </li>
-  <li>
-    <a href="/docs/components/badge">Badge</a>
-  </li>
-  <li>
-    <a href="/docs/components/breadcrumb">Breadcrumb</a>
-    <ul>
-      <li>
-        <a href="/docs/components/breadcrumb-item">Breadcrumb Item</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/button">Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/button-group">Button Group</a>
-  </li>
-  <li>
-    <a href="/docs/components/callout">Callout</a>
-  </li>
-  <li>
-    <a href="/docs/components/card">Card</a>
-  </li>
-  <li>
-    <a href="/docs/components/carousel">Carousel</a>
-    <ul>
-      <li>
-        <a href="/docs/components/carousel-item">Carousel Item</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/checkbox">Checkbox</a>
-  </li>
-  <li>
-    <a href="/docs/components/color-picker">Color Picker</a>
-  </li>
-  <li>
-    <a href="/docs/components/copy-button">Copy Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/details">Details</a>
-  </li>
-  <li>
-    <a href="/docs/components/dialog">Dialog</a>
-  </li>
-  <li>
-    <a href="/docs/components/divider">Divider</a>
-  </li>
-  <li>
-    <a href="/docs/components/drawer">Drawer</a>
-  </li>
-  <li>
-    <a href="/docs/components/dropdown">Dropdown</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-bytes">Format Bytes</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-date">Format Date</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-number">Format Number</a>
-  </li>
-  <li>
-    <a href="/docs/components/icon">Icon</a>
-  </li>
-  <li>
-    <a href="/docs/components/icon-button">Icon Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/image-comparer">Image Comparer</a>
-  </li>
-  <li>
-    <a href="/docs/components/include">Include</a>
-  </li>
-  <li>
-    <a href="/docs/components/input">Input</a>
-  </li>
-  <li>
-    <a href="/docs/components/menu">Menu</a>
-    <ul>
-      <li>
-        <a href="/docs/components/menu-item">Menu Item</a>
-      </li>
-      <li>
-        <a href="/docs/components/menu-label">Menu Label</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/mutation-observer">Mutation Observer</a>
-  </li>
-  <li>
-    <a href="/docs/components/popup">Popup</a>
-  </li>
-  <li>
-    <a href="/docs/components/progress-bar">Progress Bar</a>
-  </li>
-  <li>
-    <a href="/docs/components/progress-ring">Progress Ring</a>
-  </li>
-  <li>
-    <a href="/docs/components/qr-code">QR Code</a>
-  </li>
-  <li>
-    <a href="/docs/components/radio-group">Radio Group</a>
-    <ul>
-      <li>
-        <a href="/docs/components/radio">Radio</a>
-      </li>
-      <li>
-        <a href="/docs/components/radio-button">Radio Button</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/range">Range</a>
-  </li>
-  <li>
-    <a href="/docs/components/rating">Rating</a>
-  </li>
-  <li>
-    <a href="/docs/components/relative-time">Relative Time</a>
-  </li>
-  <li>
-    <a href="/docs/components/resize-observer">Resize Observer</a>
-  </li>
-  <li>
-    <a href="/docs/components/select">Select</a>
-    <ul>
-      <li>
-        <a href="/docs/components/option">Option</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/skeleton">Skeleton</a>
-  </li>
-  <li>
-    <a href="/docs/components/spinner">Spinner</a>
-  </li>
-  <li>
-    <a href="/docs/components/split-panel">Split Panel</a>
-  </li>
-  <li>
-    <a href="/docs/components/switch">Switch</a>
-  </li>
-  <li>
-    <a href="/docs/components/tab-group">Tab Group</a>
-    <ul>
-      <li>
-        <a href="/docs/components/tab">Tab</a>
-      </li>
-      <li>
-        <a href="/docs/components/tab-panel">Tab Panel</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/tag">Tag</a>
-  </li>
-  <li>
-    <a href="/docs/components/textarea">Textarea</a>
-  </li>
-  <li>
-    <a href="/docs/components/tooltip">Tooltip</a>
-  </li>
-  <li>
-    <a href="/docs/components/tree">Tree</a>
-    <ul>
-      <li>
-        <a href="/docs/components/tree-item">Tree Item</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/visually-hidden">Visually Hidden</a>
-  </li>
-</ul>
-
-{# Theming #}
-<h2>Theming</h2>
-<ul>
-  <li>
-    <a href="/docs/theming/color">Color</a>
-  </li>
-  <li>
-    <a href="/docs/theming/typography">Typography</a>
-  </li>
-  <li>
-    <a href="/docs/theming/space">Space</a>
-  </li>
-  <li>
-    <a href="/docs/theming/borders">Borders</a>
-  </li>
-  <li>
-    <a href="/docs/theming/focus">Focus</a>
-  </li>
-  <li>
-    <a href="/docs/theming/shadows">Shadows</a>
-  </li>
-  <li>
-    <a href="/docs/theming/transitions">Transitions</a>
-  </li>
-  <li>
-    <a href="/docs/theming/component-groups">Component Groups</a>
-  </li>
-</ul>
+{% for tag, title in {
+  'themes': 'Themes',
+  'components': 'Components',
+  'native': 'Native Styles',
+  'utilities': 'Style Utilities',
+  'layout': 'Layout',
+  'patterns': 'Patterns',
+  'palettes': 'Color Palettes',
+  'tokens': 'Design Tokens'
+} %}
+  {% include 'sidebar-group.njk' %}
+{% endfor %}

docs/_includes/status.njk

@@ -0,0 +1,25 @@
+{% if since -%}
+	<wa-badge variant="neutral">Since {{ since }}</wa-badge>
+{% endif -%}
+
+{%- if status %}
+	{%- if status == "wip" %}
+	<wa-badge variant="danger">
+		<wa-icon name="pickaxe"></wa-icon>
+		Work In Progress
+	</wa-badge>
+	{%- elif status == "experimental" %}
+	<wa-badge variant="warning">
+		<wa-icon name="flask"></wa-icon>
+		Experimental
+	</wa-badge>
+	{%- elif status == "stable" %}
+	<wa-badge variant="brand">Stable</wa-badge>
+	{%- else %}
+	<wa-badge>{{ status}}</wa-badge>
+	{%- endif -%}
+{%- endif %}
+
+{%- if isPro %}
+	<wa-badge class="pro">PRO</wa-badge>
+{%- endif -%}

docs/_includes/svgs/layout/cluster.njk

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

docs/_includes/svgs/layout/flank.njk

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

docs/_includes/svgs/layout/frame.njk

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

docs/_includes/svgs/layout/grid.njk

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

docs/_includes/svgs/layout/split.njk

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

docs/_includes/svgs/layout/stack.njk

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

docs/_includes/svgs/page.njk

@@ -0,0 +1,9 @@
+<svg width="96" height="80" viewBox="0 0 96 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="94" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="1" y="13" width="94" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="1" y="73" width="94" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="25" y="61" width="46" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="25" y="25" width="46" height="30" rx="5" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="1" y="25" width="18" height="42" rx="5" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="77" y="25" width="18" height="42" rx="5" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+</svg>

docs/_includes/svgs/palette.njk

@@ -0,0 +1,24 @@
+{% set paletteId = page.fileSlug %}
+{% set tints = [80, 60, 40, 20] %}
+{% set width = 20 %}
+{% set height = 13 %}
+{% set gap_x = 3 %}
+{% set gap_y = 3 %}
+
+<svg viewBox="0 0 {{ (width + gap_x) * hues|length }} {{ (height + gap_y) * tints|length }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
+<style>
+	@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
+	.palette-icon {
+		height: 8ch;
+	}
+</style>
+
+{% for hue in hues -%}
+  {% set hueIndex = loop.index0 %}
+  {% for tint in tints -%}
+    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ loop.index0 * (height + gap_y) }}"
+	      width="{{ width }}" height="{{ height }}"
+	      fill="var(--wa-color-{{ hue }}-{{ tint }})" rx="4" />
+  {%- endfor %}
+{% endfor %}
+</svg>

docs/_includes/svgs/tokens/borders.njk

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

docs/_includes/svgs/tokens/color.njk

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

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

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

docs/_includes/svgs/tokens/focus.njk

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

docs/_includes/svgs/tokens/shadows.njk

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

docs/_includes/svgs/tokens/space.njk

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

docs/_includes/svgs/tokens/transitions.njk

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

docs/_includes/svgs/tokens/typography.njk

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

docs/_includes/theme-showcase.njk

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

docs/_includes/visual-tests/alignment.njk

@@ -0,0 +1,77 @@
+```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

@@ -0,0 +1,799 @@
+<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 class="test-failure"><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 class="test-failure"><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 class="test-failure"><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

@@ -0,0 +1,698 @@
+<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

@@ -0,0 +1,32 @@
+<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

@@ -0,0 +1,745 @@
+<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

@@ -0,0 +1,856 @@
+<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/blank.njk

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
+  <head>
+    {% include 'head.njk' %}
+  </head>
+  <body class="layout-{{ layout | stripExtension }}">
+
+        {% block header %}{% endblock %}
+
+        {% block content %}
+          {{ content | safe }}
+        {% endblock %}
+
+        {% block afterContent %}{% endblock %}
+
+  </body>
+</html>

docs/_layouts/block.njk

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

docs/_layouts/component.njk

@@ -1,31 +1,15 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-{% set component = getComponent('wa-' + page.fileSlug) %}
-{% set description = component.summary %}
-
-{% extends '../_includes/base.njk' %}
+{% extends '../_layouts/block.njk' %}
+{% set component = components[page.fileSlug] %}
 
 {# Component header #}
-{% block beforeContent %}
-  <h1 class="title">{{ title }}</h1>
-  <div class="component-info">
-    <code class="component-tag">&lt;{{ component.tagName }}&gt;</code>
-    <wa-badge variant="neutral">Since {{ component.since }}</wa-badge>
-    <wa-badge
-      {% if component.status == 'stable' %}variant="brand"{% endif %}
-      {% if component.status == 'experimental' %}variant="warning"{% endif %}
-    >
-      {{ component.status }}
-    </wa-badge>
-  </div>
-  <p class="component-summary">
-    {{ component.summary | inlineMarkdown | safe }}
-  </p>
-{% endblock %}
-
-{# Content #}
-{% block content %}
-  {{ content | safe }}
+{% block notes %}
+  {% if native %}
+  <wa-callout variant="success">
+    <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
+    Just want the styles?
+    Check out the <a href="/docs/native/{{ native }}/">{{ ('/docs/native/' + native + '/') | getTitleFromUrl }} native styles</a>!
+  </wa-callout>
+  {% endif %}
 {% endblock %}
 
 {# Component API #}
@@ -33,6 +17,7 @@
   {# Slots #}
   {% if component.slots.length %}
     <h2>Slots</h2>
+    <p>Learn more about <a href="/docs/usage/#slots">using slots</a>.</p>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -62,7 +47,8 @@
 
   {# Properties #}
   {% if component.properties.length %}
-    <h2>Properties</h2>
+    <h2>Attributes & Properties</h2>
+    <p>Learn more about <a href="/docs/usage/#attributes-and-properties">attributes and properties</a>.</p>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -77,9 +63,9 @@
           {% for prop in component.properties %}
             <tr>
               <td class="table-name">
-                <code>{{ prop.name }}</code><br>
+                <code title="JS property">{{ prop.name }}</code><br>
                 {% if prop.attribute %}
-                  <div><small><code>{{ prop.attribute }}</code></small></div>
+                  <div><small><code title="HTML attribute">{{ prop.attribute }}</code></small></div>
                 {% endif %}
               </td>
               <td class="table-description">
@@ -109,6 +95,8 @@
   {# Methods #}
   {% if component.methods.length %}
     <h2>Methods</h2>
+    <p>Learn more about <a href="/docs/usage/#methods">methods</a>.</p>
+
     <div class="table-scroll">
       <table class="component-table">
         <thead>
@@ -139,34 +127,10 @@
     </div>
   {% endif %}
 
-  {# States #}
-  {% if component.states.length %}
-    <h2>States</h2>
-    <div class="table-scroll">
-      <table class="component-table">
-        <thead>
-          <tr>
-            <th class="table-name">Name</th>
-            <th class="table-description">Description</th>
-            <th class="table-selector">CSS selector</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for state in component.states %}
-            <tr>
-              <td class="table-name"><code>{{ state.name }}</code></td>
-              <td class="table-description">{{ state.description | inlineMarkdown | safe }}</td>
-              <td class="table-selector"><code>[data-state-{{ state.name }}]</code></td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  {% endif %}
-
   {# Events #}
   {% if component.events.length %}
     <h2>Events</h2>
+    <p>Learn more about <a href="/docs/usage/#events">events</a>.</p>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -193,6 +157,7 @@
   {# Custom Properties #}
   {% if component.cssProperties.length %}
     <h2>CSS custom properties</h2>
+    <p>Learn more about <a href="/docs/customizing/#custom-properties">CSS custom properties</a>.</p>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -221,9 +186,37 @@
     </div>
   {% endif %}
 
+  {# Custom States #}
+  {% if component.cssStates.length %}
+    <h2>Custom States</h2>
+    <p>Learn more about <a href="/docs/customizing/#custom-states">custom states</a>.</p>
+
+    <div class="table-scroll">
+      <table class="component-table">
+        <thead>
+          <tr>
+            <th class="table-name">Name</th>
+            <th class="table-description">Description</th>
+            <th class="table-selector">CSS selector</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for state in component.cssStates %}
+            <tr>
+              <td class="table-name"><code>{{ state.name }}</code></td>
+              <td class="table-description">{{ state.description | inlineMarkdown | safe }}</td>
+              <td class="table-selector"><code>:state({{ state.name }})</code></td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  {% endif %}
+
   {# CSS Parts #}
   {% if component.cssParts.length %}
     <h2>CSS parts</h2>
+    <p>Learn more about <a href="/docs/customizing/#css-parts">CSS parts</a>.</p>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -249,7 +242,7 @@
   {% if component.dependencies.length %}
     <h2>Dependencies</h2>
     <p>
-      This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.
+      This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.
     </p>
 
     <ul class="dependency-list">
@@ -262,13 +255,13 @@
   {# Importing #}
   <h2>Importing</h2>
   <p>
-    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.
+    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.
   </p>
 
   <wa-tab-group label="How would you like to import this component?">
-    <wa-tab slot="nav" panel="cdn">CDN</wa-tab>
-    <wa-tab slot="nav" panel="npm">npm</wa-tab>
-    <wa-tab slot="nav" panel="react">React</wa-tab>
+    <wa-tab panel="cdn">CDN</wa-tab>
+    <wa-tab panel="npm">npm</wa-tab>
+    <wa-tab panel="react">React</wa-tab>
     <wa-tab-panel name="cdn">
       <p>
         To manually import this component from the CDN, use the following code.

docs/_layouts/element.njk

@@ -0,0 +1,32 @@
+{% extends '../_layouts/block.njk' %}
+
+{# Component header #}
+{% block notes %}
+  {% if component %}
+  <wa-callout variant="success">
+    <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
+    Want to do more?
+    Check out the {% for name in (component | toList) -%}
+      {{ ' and ' if loop.last and not loop.first }}<a href="/docs/components/{{ name }}"><code>&lt;wa-{{ name }}&gt;</code></a>{{ ', ' if not loop.last }}
+      {%- endfor %} component{{ 's' if (component | isList) }}</a>!
+  </wa-callout>
+  {% endif %}
+{% endblock %}
+
+{% block afterContent %}
+{% if file %}
+{% markdown %}
+## Opting In to Native {{ title }} Styles
+
+If you want to use the Native {{ title }} styles **without including the entirety of Web Awesome Native Styles**,
+ you can include the following CSS files from the Web Awesome CDN.
+
+{% set stylesheet = file %}
+{% include 'import-stylesheet-code.md.njk' %}
+
+To use all of Web Awesome Native styles, follow the [instructions on the Native Styles overview page](../).
+
+{% endmarkdown %}
+{% endif %}
+
+{% endblock %}

docs/_layouts/overview.njk

@@ -0,0 +1,25 @@
+---
+layout: page-outline
+tags: ["overview"]
+---
+{% set forTag = forTag or (page.url | split('/') | last) %}
+{% if description %}
+  <div class="index-summary">{{ description | markdown | safe }}</div>
+{% endif %}
+
+<div id="block-filter">
+  <wa-input type="search" placeholder="Search {{ title }}" clearable autofocus>
+	<wa-icon slot="prefix" name="search"></wa-icon>
+  </wa-input>
+</div>
+
+{% set allPages = collections[forTag] %}
+{% include "grouped-pages.njk" %}
+
+<link href="/assets/styles/filter.css" rel="stylesheet">
+<script type="module" src="/assets/scripts/filter.js"></script>
+
+{% if content | trim %}
+<wa-divider style="--spacing: var(--wa-space-3xl)"></wa-divider> {# Temp fix for spacing issue #}
+{{ content | safe }}
+{% endif %}

docs/_layouts/palette.njk

@@ -0,0 +1,119 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+{# {% set forceTheme = page.fileSlug %} #}
+
+{% extends '../_layouts/block.njk' %}
+
+{% set paletteId = page.fileSlug %}
+
+{% block afterContent %}
+<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
+
+{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
+
+<table class="colors wa-palette-{{ paletteId }}">
+  <thead>
+    <tr>
+      <th></th>
+      {% for tint in tints -%}
+      <th>{{ tint }}</th>
+      {%- endfor %}
+    </tr>
+  </thead>
+{% for hue in hues -%}
+<tr>
+  <th>{{ hue | capitalize }}</th>
+  {% 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>
+
+<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 %}
+{% 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 %}
+{% 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 %}
+{% 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
+
+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' %}
+{% include 'import-stylesheet-code.md.njk' %}
+
+{% endmarkdown %}
+{% endblock %}

docs/_layouts/theme.njk

@@ -0,0 +1,164 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+{# {% set forceTheme = page.fileSlug %} #}
+
+{% extends '../_includes/base.njk' %}
+
+{% block header %}
+<iframe src='{{ page.url }}demo.html' id="demo"></iframe>
+
+<p id="mix_and_match" class="wa-gap-m">
+  <strong>
+    <wa-icon name="merge" slot="prefix"></wa-icon>
+    Remix
+    <wa-icon-button href="#remixing" name="circle-question" slot="suffix" variant="regular" label="How to use?"></wa-icon-button>
+  </strong>
+  <wa-select name="colors" label="Colors from…" size="small">
+    <wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
+    <wa-option value="">(Theme default)</wa-option>
+    <wa-divider></wa-divider>
+    {% for theme in collections.theme | sort %}
+      {% if theme.fileSlug !== page.fileSlug %}
+      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
+      {% endif %}
+    {% endfor %}
+  </wa-select>
+
+  <wa-select name="palette" label="Palette" size="small">
+    <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
+    <wa-option value="">(Theme default)</wa-option>
+    <wa-divider></wa-divider>
+    {% for p in collections.palette | sort %}
+      {% if p.fileSlug !== palette %}
+      <wa-option value="{{ p.fileSlug }}">{{ p.data.title }}</wa-option>
+      {% endif %}
+    {% endfor %}
+  </wa-select>
+
+  <wa-select name="typography" label="Typography from…" size="small">
+    <wa-icon name="font-case" slot="prefix"></wa-icon>
+    <wa-option value="">(Theme default)</wa-option>
+    <wa-divider></wa-divider>
+    {% for theme in collections.theme | sort %}
+      {% if theme.fileSlug !== page.fileSlug %}
+      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
+      {% endif %}
+    {% endfor %}
+  </wa-select>
+
+
+</p>
+<script>
+  document.querySelector('#mix_and_match').addEventListener('change', function(event) {
+    let selects = document.querySelectorAll('#mix_and_match wa-select');
+    let url = new URL(demo.src);
+
+    for (let select of selects) {
+      url.searchParams.set(select.name, select.value);
+    }
+
+    demo.src = url;
+  });
+</script>
+
+<h2>Default Color Palette</h2>
+{% set paletteURL = '/docs/palettes/' + palette + '/' %}
+{% set themePage = page %}
+{% set page = paletteURL | getCollectionItemFromUrl %}
+<div class="index-grid">
+{% include 'page-card.njk' %}
+</div>
+{% set page = themePage %}
+
+{% endblock %}
+
+{% block afterContent %}
+{% 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' %}
+
+### Remixing { #remixing }
+
+If you want to combine the **colors** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
+
+{% set stylesheet = 'styles/themes/' + page.fileSlug + '/color.css' %}
+{% include 'import-stylesheet-code.md.njk' %}
+
+To use the **typography** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
+
+{% set stylesheet = 'styles/themes/' + page.fileSlug + '/typography.css' %}
+{% include 'import-stylesheet-code.md.njk' %}
+
+<wa-callout variant="warning">
+  <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
+  Please note that not all combinations will look good — once you’re mixing and matching, you’re on your own!
+</wa-callout>
+
+## Dark mode
+
+To activate the dark color scheme of the theme on any element and its contents, apply the class `wa-dark` to it.
+This means you can use different color schemes throughout the page.
+Here, we use the default theme with a dark sidebar:
+
+```html
+<html>
+  <head>
+    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
+  </head>
+
+  <body>
+    <nav class="wa-dark">
+      <!-- dark-themed sidebar -->
+    </nav>
+
+    <!-- light-themed content -->
+  </body>
+</html>
+```
+
+You can apply the class to the `<html>` element on your page to activate the dark color scheme for the entire page.
+
+```html
+<html class="wa-dark">
+  <head>
+    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/{{ page.fileSlug }}.css" />
+    <!-- other links, scripts, and metadata -->
+  </head>
+  <body>
+    <!-- page content -->
+  </body>
+</html>
+```
+### Detecting Color Scheme Preference
+
+Web Awesome's themes have both light and dark styles built in.
+However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
+This should be done at the application level.
+
+As a best practice, to provide a dark theme in your app, you should:
+
+- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
+- Allow the user to override the setting in your app
+- Remember the user's preference and restore it on subsequent logins
+
+Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
+
+Assuming the user's preference is in a variable called `colorScheme` (values: `auto`, `light`, `dark`),
+you can use the following JS snippet to apply the `wa-dark` class to the `<html>` element accordingly:
+
+```js
+const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
+const applyDark = function (event = systemDark) {
+  const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
+  document.documentElement.classList.toggle('wa-dark', isDark);
+};
+systemDark.addEventListener('change', applyDark);
+applyDark();
+```
+
+{% endmarkdown %}
+{% endblock %}

docs/_layouts/utility.njk

@@ -0,0 +1,19 @@
+{% 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

@@ -1,11 +1,11 @@
 import { parse } from 'node-html-parser';
-import { v4 as uuid } from 'uuid';
 import slugify from 'slugify';
+import { v4 as uuid } from 'uuid';
 
 function createId(text) {
   let slug = slugify(String(text), {
     remove: /[^\w|\s]/g,
-    lower: true
+    lower: true,
   });
 
   // ids must start with a letter
@@ -24,7 +24,7 @@ export function anchorHeadingsPlugin(options = {}) {
     container: 'body',
     headingSelector: 'h2, h3, h4, h5, h6',
     anchorLabel: 'Jump to heading',
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {
@@ -39,22 +39,26 @@ export function anchorHeadingsPlugin(options = {}) {
       // Look for headings
       container.querySelectorAll(options.headingSelector).forEach(heading => {
         const hasAnchor = heading.querySelector('a');
+        const existingId = heading.getAttribute('id');
         const clone = parse(heading.outerHTML);
 
         // Create a clone of the heading so we can remove [data-no-anchor] elements from the text content
         clone.querySelectorAll('[data-no-anchor]').forEach(el => el.remove());
 
-        const slug = createId(clone.textContent ?? '') ?? uuid().slice(-12);
-        let id = slug;
-        let suffix = 0;
-
-        // Make sure the slug is unique in the document
-        while (doc.getElementById(id) !== null) {
-          id = `${slug}-${++suffix}`;
+        if (hasAnchor) {
+          return;
         }
 
-        if (hasAnchor || !id) {
-          return;
+        let id = existingId;
+        if (!id) {
+          const slug = createId(clone.textContent ?? '') ?? uuid().slice(-12);
+          id = slug;
+          let suffix = 1;
+
+          // Make sure the slug is unique in the document
+          while (doc.getElementById(id) !== null) {
+            id = `${slug}-${++suffix}`;
+          }
         }
 
         // Create the anchor
@@ -67,7 +71,9 @@ export function anchorHeadingsPlugin(options = {}) {
         anchor.querySelector('.wa-visually-hidden').textContent = options.anchorLabel;
 
         // Update the heading
-        heading.setAttribute('id', id);
+        if (!existingId) {
+          heading.setAttribute('id', id);
+        }
         heading.classList.add('anchor-heading');
         heading.appendChild(anchor);
       });

docs/_utils/code-examples.js

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

docs/_utils/copy-code.js

@@ -6,7 +6,7 @@ import { parse } from 'node-html-parser';
 export function copyCodePlugin(options = {}) {
   options = {
     container: 'body',
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {

docs/_utils/current-link.js

@@ -28,7 +28,7 @@ export function currentLink(options = {}) {
   options = {
     container: 'body',
     className: 'current',
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {

docs/_utils/filters.js

@@ -0,0 +1,284 @@
+import { parse } from 'path';
+
+export function stripExtension(string) {
+  return parse(string).name;
+}
+
+export function stripPrefix(content) {
+  return content.replace(/^wa-/, '');
+}
+
+// Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
+// With Prettier 3, this means a leading pipe will exist be present when the line wraps.
+export function trimPipes(content) {
+  return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
+}
+
+export function keys(obj) {
+  return Object.keys(obj);
+}
+
+export function log(firstArg, ...rest) {
+  console.log(firstArg, ...rest);
+  return firstArg;
+}
+
+function getCollection(name) {
+  // From https://github.com/11ty/eleventy/blob/d3d24ccddb804e6e14773501d8c4e07e2c4b9c2b/src/Filters/GetLocaleCollectionItem.js#L39-L43
+  return this.collections?.[name] || this.ctx?.collections?.[name] || this.context?.environments?.collections?.[name];
+}
+
+export function getCollectionItemFromUrl(url, collection) {
+  collection ??= getCollection.call(this, 'all') || [];
+  return collection.find(item => item.url === url);
+}
+
+export function getTitleFromUrl(url, collection) {
+  const item = getCollectionItemFromUrl.call(this, url, collection);
+  return item?.data.title || '';
+}
+
+export function split(text, separator) {
+  return (text + '').split(separator).filter(Boolean);
+}
+
+export function breadcrumbs(url, { withCurrent = false } = {}) {
+  const parts = split(url, '/');
+  const ret = [];
+
+  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];
+    }
+  }
+  return ret;
+}
+
+export function isObject(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+export function isList(value) {
+  return Array.isArray(value) || value instanceof Set;
+}
+
+/** Get an Array or Set */
+export function toList(value) {
+  return isList(value) ? value : [value];
+}
+
+/**
+ * Convert any value to something that can be iterated over with a for key, value loop.
+ * Arrays and sets will be converted to a Map of value -> undefined
+ */
+export function dict(value) {
+  if (value instanceof Map || isObject(value)) {
+    return value;
+  }
+
+  let list = toList(value);
+  return new Map([...list].map(item => [item, undefined]));
+}
+
+export function deepValue(obj, key) {
+  key = Array.isArray(key) ? key : key.split('.');
+  return key.reduce((subObj, property) => subObj?.[property], obj);
+}
+
+export function number(value, options) {
+  if (typeof value !== 'number' && isNaN(value)) {
+    return value;
+  }
+
+  let lang = options?.lang ?? 'en';
+  if (options?.lang) {
+    delete options.lang;
+  }
+
+  if (!options || Object.keys(options).length === 0) {
+    options = { maximumSignificantDigits: 3 };
+  }
+
+  return Number(value).toLocaleString(lang, options);
+}
+
+export function isNumeric(value) {
+  return typeof value === 'number' || (typeof value === 'string' && !isNaN(value));
+}
+
+export function isString(value) {
+  return typeof value === 'string';
+}
+
+export function isEmpty(value) {
+  return value === null || value === undefined || value === '';
+}
+
+function compare(a, b) {
+  let isEmptyA = isEmpty(a);
+  let isEmptyB = isEmpty(b);
+
+  if (isEmptyA) {
+    if (isEmptyB) {
+      return 0;
+    } else {
+      return 1;
+    }
+  } else if (isEmptyB) {
+    return -1;
+  }
+
+  // Both strings, and at least one non-numeric
+  if (isNumeric(a) || isNumeric(b)) {
+    return a - b;
+  }
+
+  return (a + '').localeCompare(b);
+}
+
+/** Sort an array of objects by one or more of their properties */
+export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
+  let keys = Array.isArray(by) ? by : Object.keys(by);
+
+  return arr.sort((a, b) => {
+    let aValues = keys.map(key => deepValue(a, key) ?? by[key]);
+    let bValues = keys.map(key => deepValue(b, key) ?? by[key]);
+
+    for (let i = 0; i < aValues.length; i++) {
+      let aVal = aValues[i];
+      let bVal = bValues[i];
+      let result = compare(aVal, bVal);
+
+      // They are not equal in terms of comparison OR we're at the last key
+      if (result !== 0 || i === aValues.length - 1) {
+        return result;
+      }
+    }
+  });
+}
+
+/**
+ * Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
+ * @param {object[]} collection
+ * @param { Object<string, string> | (string | Object<string, string>)[]} [tags] The tags to group by. If not provided/empty, defaults to grouping by all tags.
+ * @returns { Object.<string, object[]> } An object with keys for each tag, and an array of items for each tag.
+ */
+export function groupByTags(collection, tags) {
+  if (!collection) {
+    console.error(`Empty collection passed to groupByTags() to group by ${JSON.stringify(tags)}`);
+  }
+  if (!tags) {
+    // Default to grouping by union of all tags
+    tags = Array.from(new Set(collection.flatMap(item => item.data.tags)));
+  } else if (Array.isArray(tags)) {
+    // May contain objects of one-off tag -> label mappings
+    tags = tags.map(tag => (typeof tag === 'object' ? Object.keys(tag)[0] : tag));
+  } else if (typeof tags === 'object') {
+    // tags is an object of tags to labels, so we just want the keys
+    tags = Object.keys(tags);
+  }
+
+  let ret = Object.fromEntries(tags.map(tag => [tag, []]));
+  ret.other = [];
+
+  for (let item of collection) {
+    let categorized = false;
+
+    for (let tag of tags) {
+      if (item.data.tags.includes(tag)) {
+        ret[tag].push(item);
+        categorized = true;
+      }
+    }
+
+    if (!categorized) {
+      ret.other.push(item);
+    }
+  }
+
+  // Remove empty categories
+  for (let category in ret) {
+    if (ret[category].length === 0) {
+      delete ret[category];
+    }
+  }
+
+  return ret;
+}
+
+export function getCategoryTitle(category, categories) {
+  let title;
+  if (Array.isArray(categories)) {
+    // Find relevant entry
+    // [{id: "Title"}, id2, ...]
+    title = categories.find(entry => typeof entry === 'object' && entry?.[category])?.[category];
+  } else if (typeof categories === 'object') {
+    // {id: "Title", id2: "Title 2", ...}
+    title = categories[category];
+  }
+
+  if (title) {
+    return title;
+  }
+
+  // Capitalized
+  return category.charAt(0).toUpperCase() + category.slice(1);
+}
+
+const IDENTITY = x => x;
+
+/**
+ * Helper to print out one or more HTML attributes, especially conditional ones.
+ * Usage in 11ty:
+ * - Single attribute: `<foo{{ value | attr(name) }}>`
+ * - Multiple attributes: `<foo{{ { name1: value1, name2: value2 } | attr }}>`
+ *
+ * @overload
+ * @param {any} value - The attribute value If falsey, the attribute is not printed. If `true` the attribute is printed without a value.
+ * @param {string} name - The name of the attribute
+ *
+ * @overload
+ * @param {Object<string, any>} obj - Map of attribute names to values
+ *
+ * @returns {string} The attribute string. No `| safe` is needed.
+ */
+export function attr(value, name) {
+  const safe = this?.env.filters.safe ?? IDENTITY;
+
+  if (arguments.length === 1 && value && typeof value === 'object') {
+    // Called with a single object argument of names to values
+    let ret = Object.entries(obj)
+      .map(([name, value]) => attr(value, name))
+      .join('');
+    return safe(ret);
+  }
+
+  if (!value) {
+    // false, "", null, undefined
+    return '';
+  }
+
+  let ret = ' ' + name + (value === true ? '' : `="${value}"`);
+
+  return safe(ret);
+}

docs/_utils/format-code.js

@@ -11,7 +11,7 @@ import defaultOptions from '../../prettier.config.js';
 export async function formatCode(string, options) {
   return await format(string, {
     ...defaultOptions,
-    ...options
+    ...options,
   });
 }
 
@@ -21,7 +21,7 @@ export async function formatCode(string, options) {
 export function formatCodePlugin(options = {}) {
   options = {
     parser: 'html',
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {

docs/_utils/highlight-code.js

@@ -1,8 +1,8 @@
 /* eslint sort-imports-es6-autofix/sort-imports-es6: 0 */
 import { parse } from 'node-html-parser';
 import Prism from 'prismjs';
-import 'prismjs/plugins/custom-class/prism-custom-class.js';
 import PrismLoader from 'prismjs/components/index.js';
+import 'prismjs/plugins/custom-class/prism-custom-class.js';
 
 PrismLoader('diff');
 PrismLoader.silent = true;
@@ -40,7 +40,7 @@ export function highlightCode(code, language = 'plain') {
 export function highlightCodePlugin(options = {}) {
   options = {
     container: 'body',
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {

docs/_utils/manifest.js

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

docs/_utils/markdown.js

@@ -14,7 +14,7 @@ export const markdown = MarkdownIt({
   breaks: false,
   langPrefix: 'language-',
   linkify: false,
-  typographer: false
+  typographer: false,
 });
 
 markdown.use(markdownItIns);
@@ -34,7 +34,7 @@ markdown.use(markdownItMark);
         `;
       }
       return '</div></div>\n';
-    }
+    },
   });
 });
 
@@ -44,7 +44,7 @@ markdown.use(markdownItContainer, 'aside', {
       return `<aside>`;
     }
     return '</aside>\n';
-  }
+  },
 });
 
 markdown.use(markdownItContainer, 'details', {
@@ -55,9 +55,9 @@ markdown.use(markdownItContainer, 'details', {
       return `<details>\n<summary><span>${markdown.utils.escapeHtml(m[1])}</span></summary>\n`;
     }
     return '</details>\n';
-  }
+  },
 });
 
 markdown.use(markdownItAttrs, {
-  allowedAttributes: ['id', 'class', 'data']
+  allowedAttributes: [],
 });

docs/_utils/outline.js

@@ -15,7 +15,7 @@ export function outlinePlugin(options = {}) {
     target: '.outline',
     selector: 'h2,h3',
     ifEmpty: () => null,
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {

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

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

docs/_utils/search.js

@@ -1,8 +1,8 @@
 /* eslint-disable no-invalid-this */
-import { dirname, join } from 'path';
 import { mkdir, writeFile } from 'fs/promises';
-import { parse } from 'node-html-parser';
 import lunr from 'lunr';
+import { parse } from 'node-html-parser';
+import { dirname, join } from 'path';
 
 function collapseWhitespace(string) {
   return string.replace(/\s+/g, ' ');
@@ -19,7 +19,7 @@ export function searchPlugin(options = {}) {
     getDescription: doc => doc.querySelector('meta[name="description"]')?.getAttribute('content') ?? '',
     getHeadings: doc => [...doc.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(heading => heading.textContent ?? ''),
     getContent: doc => doc.querySelector('body')?.textContent ?? '',
-    ...options
+    ...options,
   };
 
   return function (eleventyConfig) {
@@ -32,8 +32,8 @@ export function searchPlugin(options = {}) {
           noscript: false,
           style: false,
           pre: false,
-          code: false
-        }
+          code: false,
+        },
       });
 
       // Remove content that shouldn't be searchable to reduce the index size
@@ -46,7 +46,7 @@ export function searchPlugin(options = {}) {
         description: collapseWhitespace(options.getDescription(doc)),
         headings: options.getHeadings(doc).map(collapseWhitespace),
         content: collapseWhitespace(options.getContent(doc)),
-        url: this.page.url === '/' ? '/' : this.page.url.replace(/\/$/, '')
+        url: this.page.url === '/' ? '/' : this.page.url.replace(/\/$/, ''),
       });
 
       return content;