Update library.ts

- Make `custom` an icon library too and remove `fromLibrary` distinction: now everything comes from a library
- `IconLibrary` class to handle functionality
- Move caching, fetching, and DOM construction to the icon library
- Rename `resolver` to `getUrl`, `fetched` to `inlined` and `addFetched()` to `inline()`
- Eliminate different handling between sprite sheets and other icons (e.g. mutation caching, template construction)

.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

@@ -1,7 +1,7 @@
 # # 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
+name: Client Tests
 
 on:
   push:
@@ -29,42 +29,11 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Lint
-        run: npm run prettier && npm run lint
+        run: npm run prettier
       - name: Build
-        run: npm run 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
-  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 && npm run lint
-
-      - name: Build
-        run: npm run build
-
-      - 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
-

.github/workflows/ssr_tests.js.yml

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

.prettierignore

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

.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

@@ -39,12 +39,15 @@
     "crutchcorn",
     "csspart",
     "cssproperty",
+    "cssstate",
     "datetime",
     "describedby",
     "Docsify",
     "dogfood",
     "dropdowns",
     "easings",
+    "ecommerce",
+    "endfor",
     "endraw",
     "endregion",
     "enterkeyhint",
@@ -83,6 +86,8 @@
     "jsfiddle",
     "keydown",
     "keyframes",
+    "keymaker",
+    "Konnor",
     "Kool",
     "labelledby",
     "Laravel",
@@ -100,6 +105,7 @@
     "metaframeworks",
     "middlewares",
     "minlength",
+    "minmax",
     "monospace",
     "mousedown",
     "mousemove",
@@ -108,6 +114,7 @@
     "multiselectable",
     "nextjs",
     "nocheck",
+    "noindex",
     "noopener",
     "noreferrer",
     "novalidate",
@@ -120,6 +127,7 @@
     "peta",
     "petabit",
     "Preact",
+    "preconnect",
     "prismjs",
     "progressbar",
     "radiogroup",
@@ -150,16 +158,19 @@
     "smartquotes",
     "spacebar",
     "stylesheet",
+    "svgs",
     "Tabbable",
     "tabindex",
     "tabler",
     "tablist",
     "tabpanel",
+    "tbody",
     "templating",
     "tera",
     "testid",
     "textareas",
     "textfield",
+    "thead",
     "Themer",
     "tinycolor",
     "transitionend",
@@ -183,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,52 +1,123 @@
-import { parse } from 'path';
-import { markdown } from './_utils/markdown.js';
+import * as path from 'node:path';
 import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
 import { codeExamplesPlugin } from './_utils/code-examples.js';
 import { copyCodePlugin } from './_utils/copy-code.js';
 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 nunjucks from 'nunjucks';
+// 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 componentList from './_data/componentList.js';
-import litPlugin from '@lit-labs/eleventy-plugin-lit';
 
 import process from 'process';
 
-const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
+import * as url from 'url';
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
 const 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',
+  server: {
+    head: '',
+    loginOrAvatar: '',
+    flashes: '',
+  },
+};
 
 export default function (eleventyConfig) {
+  /**
+   * If you plan to add or remove any of these extensions, make sure to let either Konnor or Cory know as these passthrough extensions
+   * will also need to be updated in the Web Awesome App.
+   */
+  const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
+
+  const baseDir = process.env.BASE_DIR || 'docs';
+  const passThrough = [...passThroughExtensions.map(ext => path.join(baseDir, '**/*.' + ext))];
+
+  /**
+   * This is the guard we use for now to make sure our final built files dont need a 2nd pass by the server. This keeps us able to still deploy the bare HTML files on Vercel until the app is ready.
+   */
+  const serverBuild = process.env.WEBAWESOME_SERVER === 'true';
+
   // NOTE - alpha setting removes certain pages
   if (isAlpha) {
-    eleventyConfig.ignores.add('**/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(/^\//, '');
+    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
   });
 
+  // Turns `{% server "foo" %} into `{{ server.foo | safe }}` when the WEBAWESOME_SERVER variable is set to "true"
+  eleventyConfig.addShortcode('server', function (property) {
+    if (serverBuild) {
+      return `{{ server.${property} | safe }}`;
+    }
+
+    return '';
+  });
+
+  eleventyConfig.addTransform('second-nunjucks-transform', function NunjucksTransform(content) {
+    // For a server build, we expect a server to run the second transform.
+    if (serverBuild) {
+      return content;
+    }
+
+    // Only run the transform on files nunjucks would transform.
+    if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
+      return content;
+    }
+
+    /** This largely mimics what an app would do and just stubs out what we don't care about. */
+    return nunjucks.renderString(content, {
+      // Stub the server EJS shortcodes.
+      server: {
+        head: '',
+        loginOrAvatar: '',
+        flashes: '',
+      },
+    });
+  });
+
+  // Paired shortcodes - {% shortCode %}content{% endShortCode %}
+  eleventyConfig.addPairedShortcode('markdown', content => markdown.render(content || ''));
+
   // Helpers
 
+  // Remove elements that have [data-alpha="remove"]
+  eleventyConfig.addPlugin(removeDataAlphaElements({ isAlpha }));
+
   // Use our own markdown instance
   eleventyConfig.setLibrary('md', markdown);
 
@@ -61,21 +132,21 @@ 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());
 
   // Add copy code buttons to code blocks
-  eleventyConfig.addPlugin(copyCodePlugin());
+  eleventyConfig.addPlugin(copyCodePlugin);
 
   // Various text replacements
   eleventyConfig.addPlugin(
@@ -83,60 +154,79 @@ 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 = [];
-
-  // 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 = componentList
-    // .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
-    .map(component => {
-      const name = component.tagName.split(/wa-/)[1];
-      return `./dist/components/${name}/${name}.js`;
-    });
-
-  eleventyConfig.addPlugin(litPlugin, {
-    mode: 'worker',
-    componentModules
-  });
-
   // Build the search index
   eleventyConfig.addPlugin(
     searchPlugin({
       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);
   }
 
+  // // SSR plugin
+  // // Make sure this is the last thing, we don't want to run the risk of accidentally transforming shadow roots with the nunjucks 2nd transform.
+  // if (!isDev) {
+  //   //
+  //   // Problematic components in SSR land:
+  //   //  - animation (breaks on navigation + ssr with Turbo)
+  //   //  - mutation-observer (why SSR this?)
+  //   //  - resize-observer (why SSR this?)
+  //   //  - tooltip (why SSR this?)
+  //   //
+  //   const omittedModules = [];
+  //   const componentModules = componentList
+  //     .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
+  //     .map(component => {
+  //       const name = component.tagName.split(/wa-/)[1];
+  //       const componentDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join('.', 'dist');
+  //       return path.join(componentDirectory, 'components', name, `${name}.js`);
+  //     });
+  //
+  //   eleventyConfig.addPlugin(litPlugin, {
+  //     mode: 'worker',
+  //     componentModules,
+  //   });
+  // }
+
   return {
+    markdownTemplateEngine: 'njk',
     dir: {
+      input: 'docs',
       includes: '_includes',
-      layouts: '_layouts'
+      layouts: '_layouts',
     },
-    templateFormats: ['njk', 'md']
+    templateFormats: ['njk', 'md'],
   };
 }

docs/_data/componentList.js

@@ -1,9 +1,9 @@
 /**
  * @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';
-import { readFileSync } from 'fs';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -36,7 +36,7 @@ const components = manifest.modules.flatMap(module => {
         slug: declaration.tagName.replace(/^wa-/, ''),
         methods,
         attributes,
-        properties
+        properties,
       };
     });
 });

docs/_data/componentsBy.js

@@ -6,7 +6,7 @@ const by = {
   event: {},
   method: {},
   cssPart: {},
-  cssProperty: {}
+  cssProperty: {},
 };
 
 function getAll(component, type) {

docs/_data/hueRanges.js

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

docs/_data/hues.json

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

docs/_data/palettes.js

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

docs/_data/systemIcons.js

@@ -0,0 +1,9 @@
+import { inlined } from '../../dist/components/icon/library.wa.js';
+
+let { classic } = inlined;
+let { solid, regular } = classic;
+
+export default [
+  ...Object.entries(solid).map(([name, svg]) => ({ name, family: 'solid', variant: 'solid', svg })),
+  ...Object.entries(regular).map(([name, svg]) => ({ name, family: 'regular', variant: 'regular', svg })),
+];

docs/_includes/base.njk

@@ -1,145 +1,72 @@
 <!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
   <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/preset-theme.js"></script>
     <script type="module" src="/assets/scripts/scroll.js"></script>
     <script type="module" src="/assets/scripts/turbo.js"></script>
     <script type="module" src="/assets/scripts/search.js"></script>
     <script type="module" src="/assets/scripts/outline.js"></script>
+    {% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar-tweaks.js"></script>{% endif %}
     <script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>
 
-    {# Web Awesome #}
-    <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
-    <link rel="stylesheet" id="theme-stylesheet" />
-    <link rel="stylesheet" href="/dist/themes/applied.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />
-    <link rel="stylesheet" href="/dist/themes/forms.css" />
-
     {# Docs styles #}
     <link rel="stylesheet" href="/assets/styles/docs.css" />
 
-    {# Set the theme to prevent flashing #}
-    <script>
-      function getColorScheme() {
-        return localStorage.getItem('colorScheme') || 'auto';
-      }
-
-      function getPresetTheme () {
-        return localStorage.getItem('presetTheme') || 'default';
-      }
-
-      function isDark() {
-        const colorScheme = getColorScheme()
-        if (colorScheme === 'auto') {
-          return window.matchMedia('(prefers-color-scheme: dark)').matches;
-        }
-        return colorScheme === 'dark';
-      }
-
-      const stylesheet = document.getElementById("theme-stylesheet")
-      let preset = getPresetTheme()
-
-      stylesheet.href = `/dist/themes/${preset}.css`
-
-      document.documentElement.classList.toggle(
-        `wa-theme-${preset}-dark`,
-        isDark()
-      );
-    </script>
+    {% block head %}{% endblock %}
   </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="" mobile-breakpoint="1140">
+      <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>
+          <small id="version-number" class="wa-desktop-only">{{ package.version }}</small>
+          <wa-badge variant="warning" appearance="filled" class="wa-desktop-only">Alpha</wa-badge>
         </div>
 
-        <div id="docs-toolbar">
-          {# Preset theme selector #}
-          <wa-dropdown id="preset-theme-selector">
-            <wa-button slot="trigger" appearance="tinted" size="small" pill caret>
-              <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
-              <span id="preset-theme-selector__text" class="only-desktop">Default</span>
-            </wa-button>
-            <wa-menu>
-              <wa-menu-item type="checkbox" value="default">Default</wa-menu-item>
-              <wa-menu-item type="checkbox" value="classic">Classic</wa-menu-item>
-              <wa-menu-item type="checkbox" value="fa">Font Awesome</wa-menu-item>
-
-              <wa-menu-item type="checkbox" value="active">Active</wa-menu-item>
-              <wa-menu-item type="checkbox" value="brutalist">Brutalism</wa-menu-item>
-              <wa-menu-item type="checkbox" value="glassy">Glassy</wa-menu-item>
-              <wa-menu-item type="checkbox" value="migration">Migration</wa-menu-item>
-              <wa-menu-item type="checkbox" value="playful">Playful</wa-menu-item>
-              <wa-menu-item type="checkbox" value="premium">Premium</wa-menu-item>
-            </wa-menu>
-          </wa-dropdown>
-          {# Color scheme selector #}
-          <wa-dropdown id="color-scheme-selector">
-            <wa-button slot="trigger" appearance="tinted" size="small" pill caret title="Press \ to toggle">
-              <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="wa-desktop-only 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>
             <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
             Search
-            <kbd slot="suffix" class="only-desktop">/</kbd>
+            <kbd slot="suffix" class="wa-desktop-only">/</kbd>
           </wa-button>
+
+          {# Login #}
+          {% server "loginOrAvatar" %}
         </div>
       </header>
 
       {# 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 #}
@@ -151,20 +78,26 @@
         </aside>
       {% endif %}
 
+
       {# Main #}
       <main id="content">
         {# Expandable outline #}
+        {% if hasOutline %}
         <nav id="outline-expandable">
           <details class="outline-links">
             <summary>On this page</summary>
           </details>
         </nav>
+        {% endif %}
 
-        {% block beforeContent %}{% endblock %}
+        <div id="flashes">{% server "flashes" %}</div>
+
+        {% 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,13 @@
+{% set ancestors = page.url | ancestors %}
+
+{% if ancestors.length > 0 %}
+  <wa-breadcrumb id="docs-breadcrumbs">
+  {% for ancestor in ancestors %}
+    {% if ancestor.page.url != "/" %}
+    <wa-breadcrumb-item href="{{ ancestor.page.url }}">{{ ancestor.data.title }}</wa-breadcrumb-item>
+    {% endif %}
+  {% 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,52 @@
+<table class="colors wa-palette-{{ paletteId }} contrast-table" data-min-contrast="{{ minContrast }}">
+  <thead>
+    <tr>
+      <th></th>
+      {% for tint_bg in tints -%}
+        {% for tint_fg in tints | reverse -%}
+          {% if (tint_fg - tint_bg) | abs == difference %}
+          <th>{{ tint_fg }} on {{ tint_bg }}</th>
+          {% endif %}
+        {%- endfor -%}
+      {%- endfor %}
+    </tr>
+  </thead>
+{% for hue in hues -%}
+<tr data-hue="{{ hue }}">
+  <th>{{ hue | capitalize }}</th>
+  {% for tint_bg in tints -%}
+    {% set color_bg = palettes[paletteId][hue][tint_bg] %}
+    {% for tint_fg in tints | reverse -%}
+      {% set color_fg = palettes[paletteId][hue][tint_fg] %}
+      {% if (tint_fg - tint_bg) | abs == difference %}
+      {% set contrast_wcag = '' %}
+      {% if color_fg and color_bg -%}
+        {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
+      {%- endif %}
+      <td v-for="contrast of [contrasts.{{ hue }}['{{ tint_bg }}']['{{ tint_fg }}']]"
+      data-tint-bg="{{ tint_bg }}" data-tint-fg="{{ tint_fg }}" data-original-contrast="{{ contrast_wcag }}">
+        <div v-content:number="contrast.value"
+        class="color swatch" :class="{
+          'value-up': contrast.value - contrast.original > 0.0001,
+          'value-down': contrast.original - contrast.value > 0.0001,
+          'contrast-fail': contrast.value < {{ minContrast }}
+        }"
+        style="--color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})"
+        :style="{
+          '--color': contrast.bgColor,
+          color: contrast.fgColor,
+        }"
+        >
+          {% if contrast_wcag %}
+          {{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
+          {% else %}
+          {{ tint_fg }} on {{ tint_bg }}
+          {% endif %}
+        </div>
+      </td>
+      {% endif %}
+    {%- endfor -%}
+  {%- endfor -%}
+</tr>
+{%- endfor %}
+</table>

docs/_includes/grouped-pages.njk

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

docs/_includes/head.njk

@@ -0,0 +1,54 @@
+<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">
+
+{# Internal components #}
+<script type="module" src="/assets/components/scoped.js"></script>
+
+{# Web Awesome #}
+<script type="module" src="/dist/webawesome.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" />
+
+{# Used by Web Awesome App to inject other assets into the head. #}
+{% server "head" %}

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

@@ -0,0 +1,18 @@
+<wa-tab-group class="import-stylesheet-code">
+<wa-tab panel="html">In HTML</wa-tab>
+<wa-tab panel="css">In CSS</wa-tab>
+<wa-tab-panel name="html">
+
+Add the following code to the `<head>` of your page:
+```html
+<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
+```
+</wa-tab-panel>
+<wa-tab-panel name="css">
+
+Add the following code at the top of your CSS file:
+```css
+@import url('{% cdnUrl stylesheet %}');
+```
+</wa-tab-panel>
+</wa-tab-group>

docs/_includes/page-card.njk

@@ -0,0 +1,13 @@
+{%- 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" ignore missing %}
+		</div>
+		<span class="page-name">{{ page.data.title }}</span>
+		{% if pageSubtitle -%}
+		<div class="wa-caption-s">{{ pageSubtitle }}</div>
+		{%- endif %}
+	</wa-card>
+</a>
+{% endif %}

docs/_includes/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,23 @@
+{# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
+{% if collections[tag] -%}
+  {% set groupUrl %}/docs/{{ tag }}/{% endset %}
+  {% set groupItem = groupUrl | getCollectionItemFromUrl %}
+  {% set children = groupItem.data.children if groupItem.data.children.length > 0 else (collections[tag] | sort) %}
+
+  <wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
+    <h2 slot="summary">
+      {% if groupItem %}
+        <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 children %}
+          {% include 'sidebar-link.njk' %}
+      {% endfor %}
+    </ul>
+  </wa-details>
+{%- endif %}

docs/_includes/sidebar-link.njk

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

@@ -1,9 +1,8 @@
 {# Getting started #}
 <h2>Getting Started</h2>
 <ul>
-  <li><a href="/docs/installation">Installation</a></li>
+  <li><a href="/docs/">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,277 +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>
-
-{# Layout #}
-<h2>Layout</h2>
-<ul>
-  <li><a href="/docs/layout">Layout Overview</a></li>
-  <li><a href="/docs/components/page">Page</a></li>
-  <li><a href="/docs/layout/cluster">Cluster</a></li>
-  <li><a href="/docs/layout/flank">Flank</a></li>
-  <li><a href="/docs/layout/frame">Frame</a></li>
-  <li><a href="/docs/layout/grid">Grid</a></li>
-  <li><a href="/docs/layout/split">Split</a></li>
-  <li><a href="/docs/layout/stack">Stack</a></li>
-</ul>
-
-{# Patterns #}
-<h2>Patterns</h2>
-<ul>
-  <li>
-    <a href="/docs/patterns/">Pattern Overview</a>
-  </li>
-  <li><a href="/docs/patterns/app">Web App</a></li>
-  <li><a href="/docs/patterns/ecommerce">E-commerce</a>
-    <ul>
-      <li><a href="/docs/patterns/ecommerce-product-review">Product Reviews</a></li>
-      <li><a href="/docs/patterns/ecommerce-product-list">Product Lists</a></li>
-      <li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
-      <li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
-       <li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
-      <li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
-      <li><a href="/docs/patterns/ecommerce-order-summmary">Order Summaries</a></li>
-      <li><a href="/docs/patterns/ecommerce-order-history">Order History</a></li>
-    </ul>
-  </li>
-  <li><a href="/docs/patterns/blog">Blog</a></li>
-  <li><a href="/docs/patterns/news">News</a></li>
-</ul>
-
-{# Theming #}
-<h2>Theming</h2>
-<ul>
-  <li>
-    <a href="/docs/theming/">Theming Overview</a>
-  </li>
-  <li>
-    <a href="/docs/theming/color">Color</a>
-  </li>
-  <li>
-    <a href="/docs/theming/typography">Typography</a>
-  </li>
-  <li>
-    <a href="/docs/theming/space">Space</a>
-  </li>
-  <li>
-    <a href="/docs/theming/borders">Borders</a>
-  </li>
-  <li>
-    <a href="/docs/theming/focus">Focus</a>
-  </li>
-  <li>
-    <a href="/docs/theming/shadows">Shadows</a>
-  </li>
-  <li>
-    <a href="/docs/theming/transitions">Transitions</a>
-  </li>
-  <li>
-    <a href="/docs/theming/component-groups">Component Groups</a>
-  </li>
-</ul>
-
-{# Style Utilities #}
-<h2>Style Utilities</h2>
-<ul>
-  <li><a href="/docs/style-utilities/align-items">Align Items</a></li>
-  <li><a href="/docs/style-utilities/border-radius">Border Radius</a></li>
-  <li><a href="/docs/style-utilities/gap">Gap</a></li>
-  <li><a href="/docs/style-utilities/text">Text</a></li>
-</ul>
+{% 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/action-panel.njk

@@ -0,0 +1,8 @@
+<svg width="96" height="57" viewBox="0 0 96 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1H84C90.0751 1 95 5.92487 95 12V45C95 51.0751 90.0751 56 84 56H12C5.92487 56 1 51.0751 1 45V12C1 5.92487 5.92487 1 12 1Z" fill="white" stroke="#E4E5E9" stroke-width="2"/>
+<rect x="7" y="39" width="50" height="11" rx="4" fill="#4895FD"/>
+<rect x="7" y="8" width="41" height="5" fill="#616D8A"/>
+<rect x="7" y="19.75" width="76" height="3" fill="#D9D9D9"/>
+<rect x="7" y="25" width="76" height="3" fill="#D9D9D9"/>
+<rect x="7" y="32" width="76" height="3" fill="#D9D9D9"/>
+</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,20 @@
+{% set paletteId = palette.fileSlug or page.fileSlug %}
+{% set suffixes = ['-80', '', '-20'] %}
+
+<wa-scoped class="palette-icon-host">
+  <template>
+    <link rel="stylesheet" href="/dist/styles/color/{{ paletteId }}.css">
+    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
+
+    <div class="palette-icon" style="--hues: {{ hues|length }}; --suffixes: {{ suffixes|length }}">
+      {% for hue in hues -%}
+        {% set hueIndex = loop.index %}
+        {% for suffix in suffixes -%}
+          <div class="swatch"
+               data-hue="{{ hue }}" data-suffix="{{ suffix }}"
+               style="--color: var(--wa-color-{{ hue }}{{ suffix }}); grid-column: {{ hueIndex }}; grid-row: {{ loop.index }}">&nbsp;</div>
+        {%- endfor %}
+      {%- endfor %}
+    </div>
+  </template>
+</wa-scoped>

docs/_includes/svgs/preview.njk

@@ -0,0 +1,10 @@
+<svg width="120" height="87" viewBox="0 0 240 178" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="39" width="67" height="63" rx="12" fill="#D9D9D9"/>
+<rect y="115" width="67" height="63" rx="12" fill="#D9D9D9"/>
+<rect width="67" height="19" rx="6" fill="#D9D9D9"/>
+<rect x="87" y="39" width="67" height="63" rx="12" fill="#D9D9D9"/>
+<rect x="174" y="39" width="67" height="63" rx="12" fill="#D9D9D9"/>
+<rect x="174" y="7" width="67" height="4.75" rx="2.375" fill="#D9D9D9"/>
+<rect x="87" y="115" width="67" height="63" rx="12" fill="#D9D9D9"/>
+<rect x="174" y="115" width="67" height="63" rx="12" fill="#D9D9D9"/>
+</svg>

docs/_includes/svgs/theme-color.njk

@@ -0,0 +1,24 @@
+{% set themeId = theme.fileSlug %}
+
+<wa-scoped class="theme-icon-host theme-color-icon-host">
+  <template>
+    <link rel="stylesheet" href="/dist/styles/utilities.css">
+    <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
+    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/color.css">
+    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
+
+    <div class="theme-icon theme-color-icon wa-theme-{{ themeId }}">
+      <div class="wa-brand wa-accent">A</div>
+      <div class="wa-brand wa-outlined">A</div>
+      <div class="wa-brand wa-filled">A</div>
+      <div class="wa-brand wa-plain">A</div>
+      {# <div class="wa-danger wa-outlined wa-filled"><wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon></div> #}
+
+      <div class="wa-neutral wa-accent">A</div>
+      <div class="wa-neutral wa-outlined">A</div>
+      <div class="wa-neutral wa-filled">A</div>
+      <div class="wa-neutral wa-plain">A</div>
+      {# <div class="wa-warning wa-outlined wa-filled"><wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon></div> #}
+    </div>
+  </template>
+</wa-scoped>

docs/_includes/svgs/theme-typography.njk

@@ -0,0 +1,16 @@
+{% set themeId = theme.fileSlug or page.fileSlug %}
+
+<wa-scoped class="theme-icon-host theme-typography-icon-host">
+  <template>
+    <link rel="stylesheet" href="/dist/styles/native/content.css">
+    <link rel="stylesheet" href="/dist/styles/native/blockquote.css">
+    <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
+    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/typography.css">
+    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
+
+    <div class="theme-icon theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
+      <h3>Title</h3>
+      <p>Body text</p>
+    </div>
+  </template>
+</wa-scoped>

docs/_includes/svgs/theme.njk

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

docs/_includes/svgs/tokens/color.njk

@@ -2,7 +2,7 @@
 <path fill-rule="evenodd" clip-rule="evenodd" d="M48.8665 59.1993L33.7329 33H64C63.8352 38.2705 62.3694 43.4244 59.7264 48C57.0833 52.5756 53.3507 56.4213 48.8665 59.1993Z" fill="var(--wa-color-green-70)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M32 64C26.714 64 21.5155 62.6919 16.8665 60.1993L32 34L47.1336 60.1993C42.4845 62.6919 37.286 64 32 64Z" fill="var(--wa-color-blue-60)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 48C1.63063 43.4244 0.164839 38.2706 0 33L30.2671 33L15.1336 59.1993C10.6493 56.4213 6.91666 52.5756 4.27365 48Z" fill="var(--wa-color-indigo-60)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-violet-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/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><code>outlined</code></th>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-badge variant="brand" appearance="outlined">Brand</wa-badge>
+          <wa-badge variant="neutral" appearance="outlined">Neutral</wa-badge>
+          <wa-badge variant="success" appearance="outlined">Success</wa-badge>
+          <wa-badge variant="warning" appearance="outlined">Warning</wa-badge>
+          <wa-badge variant="danger" appearance="outlined">Danger</wa-badge>
+        </div>
+      </td>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-badge variant="brand" class="wa-outlined">Brand</wa-badge>
+          <wa-badge variant="neutral" class="wa-outlined">Neutral</wa-badge>
+          <wa-badge variant="success" class="wa-outlined">Success</wa-badge>
+          <wa-badge variant="warning" class="wa-outlined">Warning</wa-badge>
+          <wa-badge variant="danger" class="wa-outlined">Danger</wa-badge>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>plain</code></th>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-badge variant="brand" appearance="plain">Brand</wa-badge>
+          <wa-badge variant="neutral" appearance="plain">Neutral</wa-badge>
+          <wa-badge variant="success" appearance="plain">Success</wa-badge>
+          <wa-badge variant="warning" appearance="plain">Warning</wa-badge>
+          <wa-badge variant="danger" appearance="plain">Danger</wa-badge>
+        </div>
+      </td>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-badge variant="brand" class="wa-plain">Brand</wa-badge>
+          <wa-badge variant="neutral" class="wa-plain">Neutral</wa-badge>
+          <wa-badge variant="success" class="wa-plain">Success</wa-badge>
+          <wa-badge variant="warning" class="wa-plain">Warning</wa-badge>
+          <wa-badge variant="danger" class="wa-plain">Danger</wa-badge>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+</div>
+<wa-divider></wa-divider>
+
+<h3>Button</h3>
+
+<div class="table-scroll">
+<table>
+  <thead>
+    <th></th>
+    <th><code>appearance=""</code></th>
+    <th><code>.wa-[appearance]</code></th>
+  </thead>
+  <tbody>
+    <tr>
+      <th><code>accent</code> + <code>outlined</code></th>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-button variant="brand" appearance="accent outlined">Brand</wa-button>
+          <wa-button variant="neutral" appearance="accent outlined">Neutral</wa-button>
+          <wa-button variant="success" appearance="accent outlined">Success</wa-button>
+          <wa-button variant="warning" appearance="accent outlined">Warning</wa-button>
+          <wa-button variant="danger" appearance="accent outlined">Danger</wa-button>
+        </div>
+      </td>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-button variant="brand" class="wa-accent wa-outlined">Brand</wa-button>
+          <wa-button variant="neutral" class="wa-accent wa-outlined">Neutral</wa-button>
+          <wa-button variant="success" class="wa-accent wa-outlined">Success</wa-button>
+          <wa-button variant="warning" class="wa-accent wa-outlined">Warning</wa-button>
+          <wa-button variant="danger" class="wa-accent wa-outlined">Danger</wa-button>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>accent</code></th>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-button variant="brand" appearance="accent">Brand</wa-button>
+          <wa-button variant="neutral" appearance="accent">Neutral</wa-button>
+          <wa-button variant="success" appearance="accent">Success</wa-button>
+          <wa-button variant="warning" appearance="accent">Warning</wa-button>
+          <wa-button variant="danger" appearance="accent">Danger</wa-button>
+        </div>
+      </td>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-button variant="brand" class="wa-accent">Brand</wa-button>
+          <wa-button variant="neutral" class="wa-accent">Neutral</wa-button>
+          <wa-button variant="success" class="wa-accent">Success</wa-button>
+          <wa-button variant="warning" class="wa-accent">Warning</wa-button>
+          <wa-button variant="danger" class="wa-accent">Danger</wa-button>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>filled</code> + <code>outlined</code></th>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-button variant="brand" appearance="filled outlined">Brand</wa-button>
+          <wa-button variant="neutral" appearance="filled outlined">Neutral</wa-button>
+          <wa-button variant="success" appearance="filled outlined">Success</wa-button>
+          <wa-button variant="warning" appearance="filled outlined">Warning</wa-button>
+          <wa-button variant="danger" appearance="filled outlined">Danger</wa-button>
+        </div>
+      </td>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-button variant="brand" class="wa-filled wa-outlined">Brand</wa-button>
+          <wa-button variant="neutral" class="wa-filled wa-outlined">Neutral</wa-button>
+          <wa-button variant="success" class="wa-filled wa-outlined">Success</wa-button>
+          <wa-button variant="warning" class="wa-filled wa-outlined">Warning</wa-button>
+          <wa-button variant="danger" class="wa-filled wa-outlined">Danger</wa-button>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>filled</code></th>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-button variant="brand" appearance="filled">Brand</wa-button>
+          <wa-button variant="neutral" appearance="filled">Neutral</wa-button>
+          <wa-button variant="success" appearance="filled">Success</wa-button>
+          <wa-button variant="warning" appearance="filled">Warning</wa-button>
+          <wa-button variant="danger" appearance="filled">Danger</wa-button>
+        </div>
+      </td>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-button variant="brand" class="wa-filled">Brand</wa-button>
+          <wa-button variant="neutral" class="wa-filled">Neutral</wa-button>
+          <wa-button variant="success" class="wa-filled">Success</wa-button>
+          <wa-button variant="warning" class="wa-filled">Warning</wa-button>
+          <wa-button variant="danger" class="wa-filled">Danger</wa-button>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>outlined</code></th>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-button variant="brand" appearance="outlined">Brand</wa-button>
+          <wa-button variant="neutral" appearance="outlined">Neutral</wa-button>
+          <wa-button variant="success" appearance="outlined">Success</wa-button>
+          <wa-button variant="warning" appearance="outlined">Warning</wa-button>
+          <wa-button variant="danger" appearance="outlined">Danger</wa-button>
+        </div>
+      </td>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-button variant="brand" class="wa-outlined">Brand</wa-button>
+          <wa-button variant="neutral" class="wa-outlined">Neutral</wa-button>
+          <wa-button variant="success" class="wa-outlined">Success</wa-button>
+          <wa-button variant="warning" class="wa-outlined">Warning</wa-button>
+          <wa-button variant="danger" class="wa-outlined">Danger</wa-button>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>plain</code></th>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-button variant="brand" appearance="plain">Brand</wa-button>
+          <wa-button variant="neutral" appearance="plain">Neutral</wa-button>
+          <wa-button variant="success" appearance="plain">Success</wa-button>
+          <wa-button variant="warning" appearance="plain">Warning</wa-button>
+          <wa-button variant="danger" appearance="plain">Danger</wa-button>
+        </div>
+      </td>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-button variant="brand" class="wa-plain">Brand</wa-button>
+          <wa-button variant="neutral" class="wa-plain">Neutral</wa-button>
+          <wa-button variant="success" class="wa-plain">Success</wa-button>
+          <wa-button variant="warning" class="wa-plain">Warning</wa-button>
+          <wa-button variant="danger" class="wa-plain">Danger</wa-button>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+</div>
+<wa-divider></wa-divider>
+
+<h3>Callout</h3>
+
+<div class="table-scroll">
+<table>
+  <thead>
+    <th></th>
+    <th><code>appearance=""</code></th>
+    <th><code>.wa-[appearance]</code></th>
+  </thead>
+  <tbody>
+    <tr>
+      <th><code>accent</code> + <code>outlined</code></th>
+      <td>
+        <div class="wa-grid wa-gap-2xs">
+          <wa-callout variant="brand" appearance="accent outlined">
+            <wa-icon slot="icon" name="circle-star"></wa-icon>
+            Brand
+          </wa-callout>
+          <wa-callout variant="neutral" appearance="accent outlined">
+            <wa-icon slot="icon" name="circle-info"></wa-icon>
+            Neutral
+          </wa-callout>
+          <wa-callout variant="success" appearance="accent outlined">
+            <wa-icon slot="icon" name="circle-check"></wa-icon>
+            Success
+          </wa-callout>
+          <wa-callout variant="warning" appearance="accent outlined">
+            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
+            Warning
+          </wa-callout>
+          <wa-callout variant="danger" appearance="accent outlined">
+            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
+            Danger
+          </wa-callout>
+        </div>
+      </td>
+      <td>
+        <div class="wa-grid wa-gap-2xs">
+          <wa-callout variant="brand" class="wa-accent wa-outlined">
+            <wa-icon slot="icon" name="circle-star"></wa-icon>
+            Brand
+          </wa-callout>
+          <wa-callout variant="neutral" class="wa-accent wa-outlined">
+            <wa-icon slot="icon" name="circle-info"></wa-icon>
+            Neutral
+          </wa-callout>
+          <wa-callout variant="success" class="wa-accent wa-outlined">
+            <wa-icon slot="icon" name="circle-check"></wa-icon>
+            Success
+          </wa-callout>
+          <wa-callout variant="warning" class="wa-accent wa-outlined">
+            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
+            Warning
+          </wa-callout>
+          <wa-callout variant="danger" class="wa-accent wa-outlined">
+            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
+            Danger
+          </wa-callout>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>accent</code></th>
+      <td>
+        <div class="wa-grid wa-gap-2xs">
+          <wa-callout variant="brand" appearance="accent">
+            <wa-icon slot="icon" name="circle-star"></wa-icon>
+            Brand
+          </wa-callout>
+          <wa-callout variant="neutral" appearance="accent">
+            <wa-icon slot="icon" name="circle-info"></wa-icon>
+            Neutral
+          </wa-callout>
+          <wa-callout variant="success" appearance="accent">
+            <wa-icon slot="icon" name="circle-check"></wa-icon>
+            Success
+          </wa-callout>
+          <wa-callout variant="warning" appearance="accent">
+            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
+            Warning
+          </wa-callout>
+          <wa-callout variant="danger" appearance="accent">
+            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
+            Danger
+          </wa-callout>
+        </div>
+      </td>
+      <td>
+        <div class="wa-grid wa-gap-2xs">
+          <wa-callout variant="brand" class="wa-accent">
+            <wa-icon slot="icon" name="circle-star"></wa-icon>
+            Brand
+          </wa-callout>
+          <wa-callout variant="neutral" class="wa-accent">
+            <wa-icon slot="icon" name="circle-info"></wa-icon>
+            Neutral
+          </wa-callout>
+          <wa-callout variant="success" class="wa-accent">
+            <wa-icon slot="icon" name="circle-check"></wa-icon>
+            Success
+          </wa-callout>
+          <wa-callout variant="warning" class="wa-accent">
+            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
+            Warning
+          </wa-callout>
+          <wa-callout variant="danger" class="wa-accent">
+            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
+            Danger
+          </wa-callout>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>filled</code> + <code>outlined</code></th>
+      <td>
+        <div class="wa-grid wa-gap-2xs">
+          <wa-callout variant="brand" appearance="filled outlined">
+            <wa-icon slot="icon" name="circle-star"></wa-icon>
+            Brand
+          </wa-callout>
+          <wa-callout variant="neutral" appearance="filled outlined">
+            <wa-icon slot="icon" name="circle-info"></wa-icon>
+            Neutral
+          </wa-callout>
+          <wa-callout variant="success" appearance="filled outlined">
+            <wa-icon slot="icon" name="circle-check"></wa-icon>
+            Success
+          </wa-callout>
+          <wa-callout variant="warning" appearance="filled outlined">
+            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
+            Warning
+          </wa-callout>
+          <wa-callout variant="danger" appearance="filled outlined">
+            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
+            Danger
+          </wa-callout>
+        </div>
+      </td>
+      <td>
+        <div class="wa-grid wa-gap-2xs">
+          <wa-callout variant="brand" class="wa-filled wa-outlined">
+            <wa-icon slot="icon" name="circle-star"></wa-icon>
+            Brand
+          </wa-callout>
+          <wa-callout variant="neutral" class="wa-filled wa-outlined">
+            <wa-icon slot="icon" name="circle-info"></wa-icon>
+            Neutral
+          </wa-callout>
+          <wa-callout variant="success" class="wa-filled wa-outlined">
+            <wa-icon slot="icon" name="circle-check"></wa-icon>
+            Success
+          </wa-callout>
+          <wa-callout variant="warning" class="wa-filled wa-outlined">
+            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
+            Warning
+          </wa-callout>
+          <wa-callout variant="danger" class="wa-filled wa-outlined">
+            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
+            Danger
+          </wa-callout>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>filled</code></th>
+      <td>
+        <div class="wa-grid wa-gap-2xs">
+          <wa-callout variant="brand" appearance="filled">
+            <wa-icon slot="icon" name="circle-star"></wa-icon>
+            Brand
+          </wa-callout>
+          <wa-callout variant="neutral" appearance="filled">
+            <wa-icon slot="icon" name="circle-info"></wa-icon>
+            Neutral
+          </wa-callout>
+          <wa-callout variant="success" appearance="filled">
+            <wa-icon slot="icon" name="circle-check"></wa-icon>
+            Success
+          </wa-callout>
+          <wa-callout variant="warning" appearance="filled">
+            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
+            Warning
+          </wa-callout>
+          <wa-callout variant="danger" appearance="filled">
+            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
+            Danger
+          </wa-callout>
+        </div>
+      </td>
+      <td>
+        <div class="wa-grid wa-gap-2xs">
+          <wa-callout variant="brand" class="wa-filled">
+            <wa-icon slot="icon" name="circle-star"></wa-icon>
+            Brand
+          </wa-callout>
+          <wa-callout variant="neutral" class="wa-filled">
+            <wa-icon slot="icon" name="circle-info"></wa-icon>
+            Neutral
+          </wa-callout>
+          <wa-callout variant="success" class="wa-filled">
+            <wa-icon slot="icon" name="circle-check"></wa-icon>
+            Success
+          </wa-callout>
+          <wa-callout variant="warning" class="wa-filled">
+            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
+            Warning
+          </wa-callout>
+          <wa-callout variant="danger" class="wa-filled">
+            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
+            Danger
+          </wa-callout>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>outlined</code></th>
+      <td>
+        <div class="wa-grid wa-gap-2xs">
+          <wa-callout variant="brand" appearance="outlined">
+            <wa-icon slot="icon" name="circle-star"></wa-icon>
+            Brand
+          </wa-callout>
+          <wa-callout variant="neutral" appearance="outlined">
+            <wa-icon slot="icon" name="circle-info"></wa-icon>
+            Neutral
+          </wa-callout>
+          <wa-callout variant="success" appearance="outlined">
+            <wa-icon slot="icon" name="circle-check"></wa-icon>
+            Success
+          </wa-callout>
+          <wa-callout variant="warning" appearance="outlined">
+            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
+            Warning
+          </wa-callout>
+          <wa-callout variant="danger" appearance="outlined">
+            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
+            Danger
+          </wa-callout>
+        </div>
+      </td>
+      <td>
+        <div class="wa-grid wa-gap-2xs">
+          <wa-callout variant="brand" class="wa-outlined">
+            <wa-icon slot="icon" name="circle-star"></wa-icon>
+            Brand
+          </wa-callout>
+          <wa-callout variant="neutral" class="wa-outlined">
+            <wa-icon slot="icon" name="circle-info"></wa-icon>
+            Neutral
+          </wa-callout>
+          <wa-callout variant="success" class="wa-outlined">
+            <wa-icon slot="icon" name="circle-check"></wa-icon>
+            Success
+          </wa-callout>
+          <wa-callout variant="warning" class="wa-outlined">
+            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
+            Warning
+          </wa-callout>
+          <wa-callout variant="danger" class="wa-outlined">
+            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
+            Danger
+          </wa-callout>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>plain</code></th>
+      <td>
+        <div class="wa-grid wa-gap-2xs">
+          <wa-callout variant="brand" appearance="plain">
+            <wa-icon slot="icon" name="circle-star"></wa-icon>
+            Brand
+          </wa-callout>
+          <wa-callout variant="neutral" appearance="plain">
+            <wa-icon slot="icon" name="circle-info"></wa-icon>
+            Neutral
+          </wa-callout>
+          <wa-callout variant="success" appearance="plain">
+            <wa-icon slot="icon" name="circle-check"></wa-icon>
+            Success
+          </wa-callout>
+          <wa-callout variant="warning" appearance="plain">
+            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
+            Warning
+          </wa-callout>
+          <wa-callout variant="danger" appearance="plain">
+            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
+            Danger
+          </wa-callout>
+        </div>
+      </td>
+      <td>
+        <div class="wa-grid wa-gap-2xs">
+          <wa-callout variant="brand" class="wa-plain">
+            <wa-icon slot="icon" name="circle-star"></wa-icon>
+            Brand
+          </wa-callout>
+          <wa-callout variant="neutral" class="wa-plain">
+            <wa-icon slot="icon" name="circle-info"></wa-icon>
+            Neutral
+          </wa-callout>
+          <wa-callout variant="success" class="wa-plain">
+            <wa-icon slot="icon" name="circle-check"></wa-icon>
+            Success
+          </wa-callout>
+          <wa-callout variant="warning" class="wa-plain">
+            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
+            Warning
+          </wa-callout>
+          <wa-callout variant="danger" class="wa-plain">
+            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
+            Danger
+          </wa-callout>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+</div>
+<wa-divider></wa-divider>
+
+<h3>Tag</h3>
+
+<div class="table-scroll">
+<table>
+  <thead>
+    <th></th>
+    <th><code>appearance=""</code></th>
+    <th><code>.wa-[appearance]</code></th>
+  </thead>
+  <tbody>
+    <tr>
+      <th><code>accent</code> + <code>outlined</code></th>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-tag variant="brand" appearance="accent outlined">Brand</wa-tag>
+          <wa-tag variant="neutral" appearance="accent outlined">Neutral</wa-tag>
+          <wa-tag variant="success" appearance="accent outlined">Success</wa-tag>
+          <wa-tag variant="warning" appearance="accent outlined">Warning</wa-tag>
+          <wa-tag variant="danger" appearance="accent outlined">Danger</wa-tag>
+        </div>
+      </td>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-tag variant="brand" class="wa-accent wa-outlined">Brand</wa-tag>
+          <wa-tag variant="neutral" class="wa-accent wa-outlined">Neutral</wa-tag>
+          <wa-tag variant="success" class="wa-accent wa-outlined">Success</wa-tag>
+          <wa-tag variant="warning" class="wa-accent wa-outlined">Warning</wa-tag>
+          <wa-tag variant="danger" class="wa-accent wa-outlined">Danger</wa-tag>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>accent</code></th>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-tag variant="brand" appearance="accent">Brand</wa-tag>
+          <wa-tag variant="neutral" appearance="accent">Neutral</wa-tag>
+          <wa-tag variant="success" appearance="accent">Success</wa-tag>
+          <wa-tag variant="warning" appearance="accent">Warning</wa-tag>
+          <wa-tag variant="danger" appearance="accent">Danger</wa-tag>
+        </div>
+      </td>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-tag variant="brand" class="wa-accent">Brand</wa-tag>
+          <wa-tag variant="neutral" class="wa-accent">Neutral</wa-tag>
+          <wa-tag variant="success" class="wa-accent">Success</wa-tag>
+          <wa-tag variant="warning" class="wa-accent">Warning</wa-tag>
+          <wa-tag variant="danger" class="wa-accent">Danger</wa-tag>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>filled</code> + <code>outlined</code></th>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-tag variant="brand" appearance="filled outlined">Brand</wa-tag>
+          <wa-tag variant="neutral" appearance="filled outlined">Neutral</wa-tag>
+          <wa-tag variant="success" appearance="filled outlined">Success</wa-tag>
+          <wa-tag variant="warning" appearance="filled outlined">Warning</wa-tag>
+          <wa-tag variant="danger" appearance="filled outlined">Danger</wa-tag>
+        </div>
+      </td>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-tag variant="brand" class="wa-filled wa-outlined">Brand</wa-tag>
+          <wa-tag variant="neutral" class="wa-filled wa-outlined">Neutral</wa-tag>
+          <wa-tag variant="success" class="wa-filled wa-outlined">Success</wa-tag>
+          <wa-tag variant="warning" class="wa-filled wa-outlined">Warning</wa-tag>
+          <wa-tag variant="danger" class="wa-filled wa-outlined">Danger</wa-tag>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>filled</code></th>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-tag variant="brand" appearance="filled">Brand</wa-tag>
+          <wa-tag variant="neutral" appearance="filled">Neutral</wa-tag>
+          <wa-tag variant="success" appearance="filled">Success</wa-tag>
+          <wa-tag variant="warning" appearance="filled">Warning</wa-tag>
+          <wa-tag variant="danger" appearance="filled">Danger</wa-tag>
+        </div>
+      </td>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-tag variant="brand" class="wa-filled">Brand</wa-tag>
+          <wa-tag variant="neutral" class="wa-filled">Neutral</wa-tag>
+          <wa-tag variant="success" class="wa-filled">Success</wa-tag>
+          <wa-tag variant="warning" class="wa-filled">Warning</wa-tag>
+          <wa-tag variant="danger" class="wa-filled">Danger</wa-tag>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>outlined</code></th>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-tag variant="brand" appearance="outlined">Brand</wa-tag>
+          <wa-tag variant="neutral" appearance="outlined">Neutral</wa-tag>
+          <wa-tag variant="success" appearance="outlined">Success</wa-tag>
+          <wa-tag variant="warning" appearance="outlined">Warning</wa-tag>
+          <wa-tag variant="danger" appearance="outlined">Danger</wa-tag>
+        </div>
+      </td>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-tag variant="brand" class="wa-outlined">Brand</wa-tag>
+          <wa-tag variant="neutral" class="wa-outlined">Neutral</wa-tag>
+          <wa-tag variant="success" class="wa-outlined">Success</wa-tag>
+          <wa-tag variant="warning" class="wa-outlined">Warning</wa-tag>
+          <wa-tag variant="danger" class="wa-outlined">Danger</wa-tag>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>plain</code></th>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-tag variant="brand" appearance="plain">Brand</wa-tag>
+          <wa-tag variant="neutral" appearance="plain">Neutral</wa-tag>
+          <wa-tag variant="success" appearance="plain">Success</wa-tag>
+          <wa-tag variant="warning" appearance="plain">Warning</wa-tag>
+          <wa-tag variant="danger" appearance="plain">Danger</wa-tag>
+        </div>
+      </td>
+      <td>
+        <div class="wa-cluster wa-gap-2xs">
+          <wa-tag variant="brand" class="wa-plain">Brand</wa-tag>
+          <wa-tag variant="neutral" class="wa-plain">Neutral</wa-tag>
+          <wa-tag variant="success" class="wa-plain">Success</wa-tag>
+          <wa-tag variant="warning" class="wa-plain">Warning</wa-tag>
+          <wa-tag variant="danger" class="wa-plain">Danger</wa-tag>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+</div>
+<wa-divider></wa-divider>
+
+<h3>Form Controls</h3>
+
+<div class="table-scroll">
+<table>
+  <thead>
+    <th></th>
+    <th><code>appearance=""</code></th>
+    <th><code>.wa-[appearance]</code></th>
+  </thead>
+  <tbody>
+    <tr>
+      <th><code>outlined</code></th>
+      <td>
+        <div class="wa-stack">
+          <wa-input appearance="outlined" placeholder="Input"></wa-input>
+          <wa-select appearance="outlined" placeholder="Select">
+            <wa-option value="1">Option</wa-option>
+          </wa-select>
+          <wa-textarea appearance="outlined" placeholder="Textarea"></wa-textarea>
+        </div>
+      </td>
+      <td>
+        <div class="wa-stack">
+          <wa-input class="wa-outlined" placeholder="Input"></wa-input>
+          <wa-select class="wa-outlined" placeholder="Select">
+            <wa-option value="1">Option</wa-option>
+          </wa-select>
+          <wa-textarea class="wa-outlined" placeholder="Textarea"></wa-textarea>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>filled</code></th>
+      <td>
+        <div class="wa-stack">
+          <wa-input appearance="filled" placeholder="Input"></wa-input>
+          <wa-select appearance="filled" placeholder="Select">
+            <wa-option value="1">Option</wa-option>
+          </wa-select>
+          <wa-textarea appearance="filled" placeholder="Textarea"></wa-textarea>
+        </div>
+      </td>
+      <td>
+        <div class="wa-stack">
+          <wa-input class="wa-filled" placeholder="Input"></wa-input>
+          <wa-select class="wa-filled" placeholder="Select">
+            <wa-option value="1">Option</wa-option>
+          </wa-select>
+          <wa-textarea class="wa-filled" placeholder="Textarea"></wa-textarea>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+</div>

docs/_includes/visual-tests/color.njk

@@ -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 %}
+{% extends '../_layouts/block.njk' %}
 {% set component = components[page.fileSlug] %}
-{% set description = component.summary %}
-
-{% extends '../_includes/base.njk' %}
 
 {# 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/#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,26 @@
+---
+layout: page-outline
+---
+{% 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 = allPages or collections[forTag] %}
+{% if allPages and allPages.length > 0 %}
+{% include "grouped-pages.njk" %}
+{% endif %}
+
+<link href="/assets/styles/filter.css" rel="stylesheet">
+<script type="module" src="/assets/scripts/filter.js"></script>
+
+{% if content | trim %}
+<wa-divider style="--spacing: var(--wa-space-3xl)"></wa-divider> {# Temp fix for spacing issue #}
+{{ content | safe }}
+{% endif %}

docs/_layouts/page-wide.njk

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

docs/_layouts/page.njk

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

docs/_layouts/palette.njk

@@ -0,0 +1,320 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+{% set paletteId = page.fileSlug %}
+{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
+
+{% extends '../_includes/base.njk' %}
+
+{% block head %}
+<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
+<link href="{{ page.url }}../tweak.css" rel="stylesheet">
+<script type="module" src="{{ page.url }}../tweak.js"></script>
+{% endblock %}
+
+{% block header %}
+<div id="palette-app" data-palette-id="{{ paletteId }}">
+  <div
+  :class="{
+    tweaking: tweaking.chroma,
+    'tweaking-chroma': tweaking.chroma,
+    'tweaking-hue': tweaking.chroma,
+    'tweaking-gray-chroma': tweaking.grayChroma,
+    'tweaked-chroma': tweaked?.chroma,
+    'tweaked-hue': tweaked?.hue,
+    'tweaked-any': tweaked
+  }"
+  :style="{
+    '--chroma-scale': chromaScale,
+    '--gray-chroma': tweaked?.grayChroma ? grayChroma : '',
+    }">
+
+  {% include 'breadcrumbs.njk' %}
+
+  <h1 class="title">
+    <span v-content="title">{{ title }}</span>
+    <template v-if="saved || tweaked">
+      <wa-icon-button name="pencil" label="Rename palette" @click="rename"></wa-icon-button>
+      <wa-icon-button v-if="saved" class="delete" name="trash" label="Delete palette" @click="deleteSaved"></wa-icon-button>
+      <wa-button @click="save()" :disabled="!unsavedChanges"
+        :variant="unsavedChanges ? 'success' : 'neutral'" size="small" :appearance="unsavedChanges ? 'accent' : 'outlined'">
+        <span slot="prefix" class="icon-modifier">
+          <wa-icon name="sidebar" variant="regular"></wa-icon>
+          <wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
+        </span>
+        <span v-content="unsavedChanges ? 'Save' : 'Saved'">Save</span>
+      </wa-button>
+    </template>
+  </h1>
+
+  <div class="block-info">
+    <code class="class">.wa-palette-{{ paletteId }}</code>
+    {% include '../_includes/status.njk' %}
+    {% if not isPro %}
+    <wa-badge class="pro" v-if="tweaked">PRO</wa-badge>
+    {% endif %}
+  </div>
+  {% if description %}
+  <p class="summary">
+    {{ description | inlineMarkdown | safe }}
+  </p>
+  {% endif %}
+{% endblock %}
+
+{% block afterContent %}
+
+{% set maxChroma = 0 %}
+
+<wa-callout size="small" class="tweaked-callout" variant="warning">
+  <wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
+   This palette has been tweaked.
+   <div class="wa-cluster wa-gap-xs">
+    <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="reset(param)" v-content="tweakHumanReadable"></wa-tag>
+   </div>
+
+  <wa-button @click="reset()" appearance="outlined" variant="danger">
+    <span slot="prefix" class="icon-modifier">
+      <wa-icon name="circle-xmark" variant="regular"></wa-icon>
+    </span>
+    Reset
+  </wa-button>
+</wa-callout>
+
+<table class="colors main wa-palette-{{ paletteId }}">
+  <thead>
+    <tr>
+      <th></th>
+      <th class="core-column">Core tint</th>
+      {% for tint in tints -%}
+      <th>{{ tint }}</th>
+      {%- endfor %}
+    </tr>
+  </thead>
+{# Initialize to last hue before gray #}
+{%- set hueBefore = hues[hues|length - 2] -%}
+{% for hue in hues -%}
+{% set coreTint = palettes[paletteId][hue].maxChromaTint %}
+{%- set coreColor = palettes[paletteId][hue][coreTint] -%}
+{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
+{% if hue === 'gray' %}
+<tr data-hue="{{ hue }}" class="color-scale"
+    :class="{tweaking: tweaking.grayChroma, tweaked: tweaked.grayChroma || tweaked.grayColor }">
+{% else %}
+<tr data-hue="{{ hue }}" class="color-scale"
+    :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
+    :style="{ '--hue-shift': hueShifts.{{ hue }} || '' }">
+{% endif %}
+  <th>
+    {{ hue | capitalize }}
+  </th>
+  <td class="core-column"
+      style="--color: var(--wa-color-{{ hue }})"
+      :style="{
+        '--color-tweaked': colors.{{ hue }}[{{ coreTint }}],
+        '--color-gray-undertone': colors[grayColor][{{coreTint}}],
+        '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ coreTint }}],
+      }">
+    <wa-dropdown>
+      <div slot="trigger" id="core-{{ hue }}-swatch" data-tint="core" class="color swatch"
+      style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});"
+      >
+        {{ palettes[paletteId][hue].maxChromaTint }}
+        <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
+      </div>
+      <div class="popup">
+      {% if hue === 'gray' %}
+        <wa-radio-group class="core-color" orientation="horizontal" v-model="grayColor">
+          {% for h in hues -%}
+            {%- if h !== 'gray' -%}
+              <wa-radio-button id="gray-undertone-{{ h }}" value="{{ h }}" label="{{ h | capitalize }}" style="--color: var(--wa-color-{{ h }})"></wa-radio-button>
+              <wa-tooltip for="gray-undertone-{{ h }}">
+                {{ h | capitalize }}
+              </wa-tooltip>
+            {%- endif -%}
+          {%- endfor -%}
+          <div slot="label">
+            Gray undertone
+          </div>
+        </wa-radio-group>
+        <div class="decorated-slider gray-chroma-slider" :style="{'--max': maxGrayChroma}">
+          <wa-slider name="gray-chroma" v-model="grayChroma" ref="grayChromaSlider"
+          value="0" min="0" :max="maxGrayChroma" step="0.01"
+            @input="tweaking.grayChroma = true" @change="tweaking.grayChroma = false">
+            <div slot="label">
+              Gray colorfulness
+              <wa-icon-button @click="grayChroma = originalGrayChroma" class="clear-button" name="system:circle-xmark" variant="regular" label="Reset"></wa-icon-button>
+            </div>
+          </wa-slider>
+          <div class="label-min">Neutral</div>
+          <div class="label-max" v-content="moreHue[grayColor]">Warmer/Cooler</div>
+        </div>
+      {% else %}
+      {%- set hueAfter = hues[loop.index0 + 1] -%}
+      {%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
+      {%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
+      {%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
+
+      <div class="decorated-slider hue-shift-slider" style="--min: {{ minShift }}; --max: {{ maxShift }};">
+        <wa-slider name="{{ hue }}-shift" v-model="hueShifts.{{ hue }}" value="0"
+          min="{{ minShift }}" max="{{ maxShift }}" step="1"
+          @input="tweaking.hue = tweaking.{{hue}} = true"
+          @change="tweaking.hue = tweaking.{{ hue }} = false">
+          <div slot="label">
+            Tweak {{ hue }} hue
+            <wa-icon-button @click="hueShifts.{{ hue }} = 0" class="clear-button" name="system:circle-xmark" variant="regular" label="Reset"></wa-icon-button>
+          </div>
+        </wa-slider>
+        <div class="label-min">More {{hueBefore}}</div>
+        <div class="label-max">More {{hueAfter}}</div>
+      </div>
+      {%- set hueBefore = hue -%}
+      {% endif %}
+      <div class="wa-gap-s">
+          <code>--wa-color-{{ hue }}</code>
+          <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
+        </div>
+      </div>`
+    </wa-dropdown>
+  </td>
+  {% for tint in tints -%}
+    {%- set color = palettes[paletteId][hue][tint] -%}
+    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})"
+        :style="{
+          '--color-tweaked': colors.{{ hue }}[{{ tint }}],
+          '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ tint }}],
+        }">
+      <div class="color swatch" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
+        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
+      </div>
+    </td>
+  {%- endfor -%}
+</tr>
+{%- endfor %}
+</table>
+
+{% set chromaScaleBounds = [
+(0.08 / maxChroma) | number({maximumFractionDigits: 2}),
+(0.3 / maxChroma]) | number({maximumFractionDigits: 2}) -%}
+<div class="decorated-slider chroma-scale-slider wa-palette-{{ paletteId }}"
+:class="{ tweaked: chromaScale !== 1 }"
+style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};">
+  <wa-slider name="chroma-scale" ref="chromaScaleSlider"
+    v-model="chromaScale" value="1" step="0.01"
+    min="{{ chromaScaleBounds[0] }}" max="{{ chromaScaleBounds[1] }}"
+    @input="tweaking.chroma = true"
+    @change="tweaking.chroma = false">
+    <div slot="label">
+      Overall colorfulness
+      <wa-icon-button @click="chromaScale = 1" class="clear-button" name="system:circle-xmark" variant="regular" label="Reset"></wa-icon-button>
+    </div>
+  </wa-slider>
+  <div class="label-min">More muted</div>
+  <div class="label-max">More vibrant</div>
+</div>
+
+<h2>Used By</h2>
+
+<section class="index-grid">
+{% for page in collections.theme %}
+  {%- if page.data.palette == paletteId -%}
+    {% include "page-card.njk" %}
+  {%- endif -%}
+{% endfor %}
+</section>
+
+{% markdown %}
+## Color Contrast
+
+Web Awesome color scales are designed to guarantee certain contrast ratios,
+both per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum)
+as well as the emergent APCA specification _(planned)_,
+so you can ensure that text is both legible to all users, and legally conformant.
+
+### Level 1
+
+A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for large text and icons (AA).
+{% endmarkdown %}
+
+{% set difference = 40 %}
+{% set minContrast = 3 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+
+This also goes for a difference of `45`:
+
+{% endmarkdown %}
+
+{% set difference = 45 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+
+### Level 2
+
+A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for normal text (AA) and large text (AAA)
+{% endmarkdown %}
+
+{% set difference = 50 %}
+{% set minContrast = 4.5 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+
+This also goes for a difference of `55`:
+
+{% endmarkdown %}
+
+{% set difference = 55 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+### Level 3
+
+A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all text (AAA)
+{% endmarkdown %}
+
+{% set difference = 60 %}
+{% set minContrast = 7 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+
+This also goes for a difference of `65`:
+
+{% endmarkdown %}
+
+{% set difference = 65 %}
+{% include "contrast-table.njk" %}
+
+{% markdown %}
+## How to use this palette { #usage }
+
+If you are using a Web Awesome theme that uses this palette, it will already be included.
+To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
+
+{% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
+<wa-tab-group class="import-stylesheet-code">
+<wa-tab panel="html">In HTML</wa-tab>
+<wa-tab panel="css">In CSS</wa-tab>
+<wa-tab-panel name="html">
+
+Add the following code to the `<head>` of your page:
+```html { v-content:html="code.html.highlighted" }
+<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
+```
+</wa-tab-panel>
+<wa-tab-panel name="css">
+
+Add the following code at the top of your CSS file:
+```css { v-content:html="code.css.highlighted" }
+@import url('{% cdnUrl stylesheet %}');
+```
+</wa-tab-panel>
+</wa-tab-group>
+
+
+{% endmarkdown %}
+</div></div> {# end palette app #}
+{% endblock %}
+
+

docs/_layouts/patterns.njk

@@ -0,0 +1,5 @@
+{% extends '../_layouts/block.njk' %}
+
+{% block head %}
+<link href="/docs/patterns/patterns.css" rel="stylesheet">
+{% endblock %}

docs/_layouts/theme.njk

@@ -0,0 +1,207 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+{# {% set forceTheme = page.fileSlug %} #}
+
+{% extends '../_includes/base.njk' %}
+
+{% block head %}
+<script>
+globalThis.wa_data ??= {};
+wa_data.baseTheme = "{{ page.fileSlug }}";
+wa_data.themes = {
+  {% for theme in collections.theme -%}
+  "{{ theme.fileSlug }}": {
+    "title": "{{ theme.data.title }}",
+    "palette": "{{ theme.data.palette }}",
+    "brand": "{{ theme.data.brand }}"
+  },
+  {% endfor %}
+};
+wa_data.palettes = {
+  {% for palette in collections.palette -%}
+  "{{ palette.fileSlug }}": {
+    "title": "{{ palette.data.title }}",
+  },
+  {% endfor %}
+};
+</script>
+<link href="/docs/themes/remix.css" rel="stylesheet">
+<script src="/docs/themes/remix.js" type="module"></script>
+{% endblock %}
+
+{% block header %}
+
+<iframe src='{{ page.url }}demo.html' id="demo"></iframe>
+
+<wa-details id="mix_and_match" class="wa-gap-m" >
+  <h4 slot="summary" data-no-anchor data-no-outline id="remix">
+    <wa-icon name="arrows-rotate"></wa-icon>
+    Remix this theme
+    <wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="suffix" variant="regular"></wa-icon>
+    <wa-tooltip for="what-is-remixing">Customize this theme by changing its colors and/or remixing it with design elements from other themes!</wa-tooltip>
+  </h4>
+
+  <wa-select name="colors" label="Colors from…" value="" clearable>
+    <wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
+    {% for theme in collections.theme | sort %}
+      {% set currentTheme = theme.fileSlug == page.fileSlug %}
+      <wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
+        <wa-card with-header>
+          <div slot="header">
+          {% include "svgs/theme-color.njk" %}
+          </div>
+          <span class="page-name">
+            {{ theme.data.title }}
+            {% if theme.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
+            {% if currentTheme %}<wa-badge variant="neutral" appearance="outlined">This theme</wa-badge>{% endif %}
+          </span>
+        </wa-card>
+      </wa-option>
+    {% endfor %}
+  </wa-select>
+
+  <wa-select name="palette" label="Palette" clearable>
+    <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
+    {% set defaultPalette = palette %}
+    {% for palette in collections.palette | sort %}
+      {% set currentPalette = palette.fileSlug == defaultPalette %}
+      <wa-option label="{{ palette.data.title }}" value="{{ palette.fileSlug if not currentPalette }}" {{ (palette.fileSlug if currentPalette) | attr('data-id') }}>
+        <wa-card with-header>
+          <div slot="header">
+          {% include "svgs/" + (palette.data.icon or "thumbnail-placeholder") + ".njk" ignore missing %}
+          </div>
+          <span class="page-name">
+            {{ palette.data.title }}
+            {% if palette.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
+            {% if currentPalette %}<wa-badge variant="neutral" appearance="outlined">Theme default</wa-badge>{% endif %}
+          </span>
+        </wa-card>
+      </wa-option>
+    {% endfor %}
+    {% set palette = defaultPalette %}
+  </wa-select>
+
+  <wa-select name="brand" label="Brand color" value="" clearable>
+    <div class="selected-swatch" slot="prefix"></div>
+    {% for hue in hues %}
+      {% set currentBrand = hue == brand %}
+      <wa-option label="{{ hue | capitalize }}" value="{{ hue if not currentBrand }}" {{ (hue if currentBrand) | attr('data-id') }} style="--color: var(--wa-color-{{ hue }})">
+        {{ hue | capitalize }}
+        {% if currentBrand %}<wa-badge variant="neutral" appearance="outlined">Theme default</wa-badge>{% endif %}
+      </wa-option>
+    {% endfor %}
+  </wa-select>
+
+  <wa-select name="typography" label="Typography from…" clearable>
+    <wa-icon name="font-case" slot="prefix"></wa-icon>
+    {% for theme in collections.theme | sort %}
+      {% set currentTheme = theme.fileSlug == page.fileSlug %}
+      <wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
+        <wa-card with-header>
+          <div slot="header">
+          {% include "svgs/theme-typography.njk" %}
+          </div>
+          <span class="page-name">
+            {{ theme.data.title }}
+            {% if theme.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
+            {% if currentTheme %}<wa-badge variant="neutral" appearance="outlined">This theme</wa-badge>{% endif %}
+          </span>
+        </wa-card>
+      </wa-option>
+    {% endfor %}
+  </wa-select>
+</wa-details>
+
+<h2>Color</h2>
+{% set paletteURL = '/docs/palettes/' + palette + '/' %}
+
+
+<div class="index-grid">
+  {% set themePage = page %}
+  {% set page = paletteURL | getCollectionItemFromUrl %}
+  {% set pageSubtitle = "Default color palette" %}
+  {% include 'page-card.njk' %}
+  {% set page = themePage %}
+
+  <wa-card style="--header-background: var(--wa-color-{{ brand }})" class="wa-palette-{{ palette }}">
+    <div slot="header"></div>
+    <div class="page-name">{{ brand | capitalize }}</div>
+    <div class="wa-caption-s">Default brand color</div>
+  </wa-card>
+</div>
+{% endblock %}
+
+{% block afterContent %}
+
+<h2 id="usage">How to use this theme</h2>
+
+{% markdown %}
+You can import this theme from the Web Awesome CDN.
+
+{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
+{% include 'import-stylesheet-code.md.njk' %}
+
+## Dark mode
+
+To activate the dark color scheme of the theme on any element and its contents, apply the class `wa-dark` to it.
+This means you can use different color schemes throughout the page.
+Here, we use the default theme with a dark sidebar:
+
+```html
+<html>
+  <head>
+    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
+  </head>
+
+  <body>
+    <nav class="wa-dark">
+      <!-- dark-themed sidebar -->
+    </nav>
+
+    <!-- light-themed content -->
+  </body>
+</html>
+```
+
+You can apply the class to the `<html>` element on your page to activate the dark color scheme for the entire page.
+
+```html
+<html class="wa-dark">
+  <head>
+    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/{{ page.fileSlug }}.css" />
+    <!-- other links, scripts, and metadata -->
+  </head>
+  <body>
+    <!-- page content -->
+  </body>
+</html>
+```
+### Detecting Color Scheme Preference
+
+Web Awesome's themes have both light and dark styles built in.
+However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
+This should be done at the application level.
+
+As a best practice, to provide a dark theme in your app, you should:
+
+- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
+- Allow the user to override the setting in your app
+- Remember the user's preference and restore it on subsequent logins
+
+Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
+
+Assuming the user's preference is in a variable called `colorScheme` (values: `auto`, `light`, `dark`),
+you can use the following JS snippet to apply the `wa-dark` class to the `<html>` element accordingly:
+
+```js
+const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
+const applyDark = function (event = systemDark) {
+  const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
+  document.documentElement.classList.toggle('wa-dark', isDark);
+};
+systemDark.addEventListener('change', applyDark);
+applyDark();
+```
+
+{% endmarkdown %}
+{% endblock %}

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) {
@@ -37,24 +37,29 @@ export function anchorHeadingsPlugin(options = {}) {
       }
 
       // Look for headings
-      container.querySelectorAll(options.headingSelector).forEach(heading => {
+      let selector = `:is(${options.headingSelector}):not([data-no-anchor], [data-no-anchor] *)`;
+      container.querySelectorAll(selector).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 +72,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,185 @@
 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: () => false,
+  };
+  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

@@ -3,30 +3,39 @@ import { parse } from 'node-html-parser';
 /**
  * Eleventy plugin to add copy buttons to code blocks.
  */
-export function copyCodePlugin(options = {}) {
+export function copyCodePlugin(eleventyConfig, options = {}) {
   options = {
     container: 'body',
-    ...options
+    ...options,
   };
 
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('copy-code', content => {
-      const doc = parse(content, { blockTextElements: { code: true } });
-      const container = doc.querySelector(options.container);
+  let codeCount = 0;
+  eleventyConfig.addTransform('copy-code', content => {
+    const doc = parse(content, { blockTextElements: { code: true } });
+    const container = doc.querySelector(options.container);
 
-      if (!container) {
-        return content;
+    if (!container) {
+      return content;
+    }
+
+    // Look for code blocks
+    container.querySelectorAll('pre > code').forEach(code => {
+      const pre = code.closest('pre');
+      let preId = pre.getAttribute('id') || `code-block-${++codeCount}`;
+      let codeId = code.getAttribute('id') || `${preId}-inner`;
+
+      if (!code.getAttribute('id')) {
+        code.setAttribute('id', codeId);
+      }
+      if (!pre.getAttribute('id')) {
+        pre.setAttribute('id', preId);
       }
 
-      // Look for code blocks
-      container.querySelectorAll('pre > code').forEach(code => {
-        const pre = code.closest('pre');
-
-        // Add a copy button (we set the copy data at runtime to reduce page bloat)
-        pre.innerHTML = `<wa-copy-button class="copy-button" hoist></wa-copy-button>` + pre.innerHTML;
-      });
-
-      return doc.toString();
+      // Add a copy button
+      pre.innerHTML += `<wa-icon-button href="#${preId}" class="block-link-icon" name="link"></wa-icon-button>
+        <wa-copy-button from="${codeId}" class="copy-button"></wa-copy-button>`;
     });
-  };
+
+    return doc.toString();
+  });
 }

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,409 @@
+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) {
+  if (!url) {
+    return null;
+  }
+  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 ancestors(url, { withCurrent = false, withRoot = false } = {}) {
+  let ret = [];
+  let currentUrl = url;
+  let currentItem = getCollectionItemFromUrl.call(this, url);
+
+  if (!currentItem) {
+    // Might have eleventyExcludeFromCollections, jump to parent
+    let parentUrl = this.ctx.parentUrl;
+    if (parentUrl) {
+      url = parentUrl;
+    }
+  }
+
+  for (let item; (item = getCollectionItemFromUrl.call(this, url)); url = item.data.parentUrl) {
+    ret.unshift(item);
+  }
+
+  if (!withRoot && ret[0]?.page.url === '/') {
+    // Remove root
+    ret.shift();
+  }
+
+  if (!withCurrent && ret.at(-1)?.page.url === currentUrl) {
+    // Remove current page
+    ret.pop();
+  }
+
+  return ret;
+}
+
+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;
+      }
+    }
+  });
+}
+
+export function show(page) {
+  return !(page.data.noAlpha && page.data.isAlpha) && !page.data.unlisted;
+}
+
+/**
+ * Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
+ * @param {object[]} collection
+ * @param { Object<string, string> | string[]} [options] Options object or array of tags to group by.
+ * @param {string[] | true} [options.tags] Tags to group by. If true, groups by all tags.
+ *                            If not provided/empty, defaults to grouping by page hierarchy, with any pages with more than 1 children becoming groups.
+ * @param {string[]} [options.groups] The groups to use if only a subset or a specific order is desired. Defaults to `options.tags`.
+ * @param {string[]} [options.titles] Any title overrides for groups.
+ * @param {string | false} [options.other="Other"] The title to use for the "Other" group. If `false`, the "Other" group is removed..
+ * @returns { Object.<string, object[]> } An object of group ids to arrays of page objects.
+ */
+export function groupPages(collection, options = {}, page) {
+  if (!collection) {
+    console.error(`Empty collection passed to groupPages() to group by ${JSON.stringify(options)}`);
+  }
+
+  if (Array.isArray(options)) {
+    options = { tags: options };
+  }
+
+  let { tags, groups, titles = {}, other = 'Other', filter = show } = options;
+
+  if (groups === undefined && Array.isArray(tags)) {
+    groups = tags;
+  }
+
+  let grouping;
+
+  if (tags) {
+    grouping = {
+      isGroup: item => undefined,
+      getCandidateGroups: item => item.data.tags,
+      getGroupMeta: group => ({}),
+    };
+  } else {
+    grouping = {
+      isGroup: item => (item.data.children.length >= 2 ? item.page.url : undefined),
+      getCandidateGroups: item => {
+        let parentUrl = item.data.parentUrl;
+        if (page?.url === parentUrl) {
+          return [];
+        }
+        return [parentUrl];
+      },
+      getGroupMeta: group => {
+        let item = byUrl[group] || getCollectionItemFromUrl.call(this, group);
+        return {
+          title: item?.data.title,
+          url: group,
+          item,
+        };
+      },
+      sortGroups: groups => sort(groups.map(url => byUrl[url]).filter(Boolean)).map(item => item.page.url),
+    };
+  }
+
+  let byUrl = {};
+  let byParentUrl = {};
+
+  if (filter) {
+    collection = collection.filter(filter);
+  }
+
+  for (let item of collection) {
+    let url = item.page.url;
+    let parentUrl = item.data.parentUrl;
+
+    byUrl[url] = item;
+
+    if (parentUrl) {
+      byParentUrl[parentUrl] ??= [];
+      byParentUrl[parentUrl].push(item);
+    }
+  }
+
+  let urlToGroups = {};
+
+  for (let item of collection) {
+    let url = item.page.url;
+    let parentUrl = item.data.parentUrl;
+
+    if (grouping.isGroup(item)) {
+      continue;
+    }
+
+    let parentItem = byUrl[parentUrl];
+    if (parentItem && !grouping.isGroup(parentItem)) {
+      // Their parent is also here and is not a group
+      continue;
+    }
+
+    let candidateGroups = grouping.getCandidateGroups(item);
+
+    if (groups) {
+      candidateGroups = candidateGroups.filter(group => groups.includes(group));
+    }
+
+    urlToGroups[url] ??= [];
+
+    for (let group of candidateGroups) {
+      urlToGroups[url].push(group);
+    }
+  }
+
+  let ret = {};
+
+  for (let url in urlToGroups) {
+    let groups = urlToGroups[url];
+    let item = byUrl[url];
+
+    if (groups.length === 0) {
+      // Not filtered out but also not categorized
+      groups = ['other'];
+    }
+
+    for (let group of groups) {
+      ret[group] ??= [];
+      ret[group].push(item);
+
+      if (!ret[group].meta) {
+        if (group === 'other') {
+          ret[group].meta = { title: other };
+        } else {
+          ret[group].meta = grouping.getGroupMeta(group);
+          ret[group].meta.title = titles[group] ?? ret[group].meta.title ?? capitalize(group);
+        }
+      }
+    }
+  }
+
+  if (other === false) {
+    delete ret.other;
+  }
+
+  // Sort
+  let sortedGroups = groups ?? grouping.sortGroups?.(Object.keys(ret));
+
+  if (sortedGroups) {
+    ret = sortObject(ret, sortedGroups);
+  } else {
+    // At least make sure other is last
+    if (ret.other) {
+      let otherGroup = ret.other;
+      delete ret.other;
+      ret.other = otherGroup;
+    }
+  }
+
+  Object.defineProperty(ret, 'meta', {
+    value: {
+      groupCount: Object.keys(ret).length,
+    },
+    enumerable: false,
+  });
+
+  return ret;
+}
+
+/**
+ * Sort an object by its keys
+ * @param {*} obj
+ * @param {function | string[]} order
+ */
+function sortObject(obj, order) {
+  let ret = {};
+  let sortedKeys = Array.isArray(order) ? order : Object.keys(obj).sort(order);
+
+  for (let key of sortedKeys) {
+    if (key in obj) {
+      ret[key] = obj[key];
+    }
+  }
+
+  // Add any keys that weren't in the order
+  for (let key in obj) {
+    if (!(key in ret)) {
+      ret[key] = obj[key];
+    }
+  }
+
+  return ret;
+}
+
+function capitalize(str) {
+  str += '';
+  return str.charAt(0).toUpperCase() + str.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/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) {
@@ -39,7 +39,7 @@ export function outlinePlugin(options = {}) {
         }
 
         // Create a clone of the heading so we can remove links and [data-no-outline] elements from the text content
-        clone.querySelectorAll('a').forEach(a => a.remove());
+        clone.querySelectorAll('.wa-visually-hidden, [hidden], [aria-hidden="true"]').forEach(el => el.remove());
         clone.querySelectorAll('[data-no-outline]').forEach(el => el.remove());
 
         // Generate the link

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,9 @@
 /* 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 * as path from 'path';
+import { dirname, join } from 'path';
 
 function collapseWhitespace(string) {
   return string.replace(/\s+/g, ' ');
@@ -19,7 +20,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 +33,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,14 +47,15 @@ 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;
     });
 
-    eleventyConfig.on('eleventy.after', ({ dir }) => {
-      const outputFilename = join(dir.output, 'search.json');
+    eleventyConfig.on('eleventy.after', ({ directories }) => {
+      const { output } = directories;
+      const outputFilename = path.resolve(join(output, 'search.json'));
       const map = [];
       const searchIndex = lunr(async function () {
         let index = 0;

docs/assets/components/scoped.js

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

docs/assets/images/webawesome-logo.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg" fill="#f68a4c">
-<path d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"/>
-</svg>
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z" fill="var(--wa-brand-orange, #f36944)"/>
+</svg>

docs/assets/scripts/code-examples.js

@@ -1,58 +0,0 @@
-document.addEventListener('click', event => {
-  const toggle = event.target?.closest('.code-example-toggle');
-  const pen = event.target?.closest('.code-example-pen');
-
-  // Toggle source
-  if (toggle) {
-    const codeExample = toggle.closest('.code-example');
-    const isOpen = !codeExample.classList.contains('open');
-
-    toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-    codeExample.classList.toggle('open', isOpen);
-  }
-
-  // Edit in CodePen
-  if (pen) {
-    const codeExample = pen.closest('.code-example');
-    const code = codeExample.querySelector('code');
-    const cdnUrl = document.documentElement.dataset.cdnUrl;
-    const html =
-      `<script type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
-      `<link rel="stylesheet" href="${cdnUrl}themes/default.css">\n\n` +
-      `<link rel="stylesheet" href="${cdnUrl}themes/applied.css">\n\n` +
-      `${code.textContent}`;
-    const css = 'body {\n  font: 16px sans-serif;\n  padding: 2rem;\n}';
-    const js = '';
-
-    const form = document.createElement('form');
-    form.action = 'https://codepen.io/pen/define';
-    form.method = 'POST';
-    form.target = '_blank';
-
-    const data = {
-      title: '',
-      description: '',
-      tags: ['webawesome'],
-      editors: '1000',
-      head: '<meta name="viewport" content="width=device-width">',
-      html_classes: '',
-      css_external: '',
-      js_external: '',
-      js_module: true,
-      js_pre_processor: 'none',
-      html,
-      css,
-      js
-    };
-
-    const input = document.createElement('input');
-    input.type = 'hidden';
-    input.name = 'data';
-    input.value = JSON.stringify(data);
-    form.append(input);
-
-    document.documentElement.append(form);
-    form.submit();
-    form.remove();
-  }
-});

docs/assets/scripts/color-scheme.js

@@ -1,59 +0,0 @@
-//
-// Color scheme selector
-//
-(() => {
-  function setColorScheme(newColorScheme) {
-    colorScheme = newColorScheme;
-    localStorage.setItem('colorScheme', colorScheme);
-    const presetTheme = window.getPresetTheme();
-
-    // Update the UI
-    updateSelection();
-
-    // Toggle the dark mode class
-    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
-  }
-
-  function updateSelection() {
-    const menu = document.querySelector('#color-scheme-selector wa-menu');
-    if (!menu) return;
-    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
-      await customElements.whenDefined(item.localName);
-      await item.updateComplete;
-      item.checked = item.getAttribute('value') === colorScheme;
-    });
-  }
-
-  let colorScheme = window.getColorScheme();
-
-  // Selection is not preserved when changing page, so update when opening dropdown
-  document.addEventListener('wa-show', event => {
-    const colorSchemeSelector = event.target.closest('#color-scheme-selector');
-    if (!colorSchemeSelector) return;
-    updateSelection();
-  });
-
-  // Listen for selections
-  document.addEventListener('wa-select', event => {
-    const menu = event.target.closest('#color-scheme-selector wa-menu');
-    if (!menu) return;
-    setColorScheme(event.detail.item.value);
-  });
-
-  // Update the color scheme when the preference changes
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setColorScheme(colorScheme));
-
-  // Toggle with backslash
-  document.addEventListener('keydown', event => {
-    if (
-      event.key === '\\' &&
-      !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
-    ) {
-      event.preventDefault();
-      setColorScheme(window.isDark() ? 'light' : 'dark');
-    }
-  });
-
-  // Set the initial color scheme and sync the UI
-  setColorScheme(colorScheme);
-})();

docs/assets/scripts/copy-code.js

@@ -1,15 +0,0 @@
-function setCopyValue() {
-  document.querySelectorAll('.copy-button').forEach(copyButton => {
-    const pre = copyButton.closest('pre');
-    const code = pre?.querySelector('code');
-
-    if (code) {
-      copyButton.value = code.textContent;
-    }
-  });
-}
-
-// Set data for all copy buttons when the page loads
-setCopyValue();
-
-document.addEventListener('turbo:load', setCopyValue);

docs/assets/scripts/filter.js

@@ -0,0 +1,35 @@
+function debounce(func, wait) {
+  let timeout;
+  return function (...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
+
+function updateResults(input) {
+  const filter = input.value.toLowerCase().trim();
+  let filtered = Boolean(filter);
+
+  for (let grid of document.querySelectorAll('.index-grid')) {
+    grid.classList.toggle('filtered', filtered);
+
+    for (let item of grid.querySelectorAll('a:has(> wa-card)')) {
+      let isMatch = true;
+
+      if (filter) {
+        const content = item.textContent.toLowerCase() + ' ' + (item.getAttribute('data-keywords') + ' ');
+        isMatch = content.includes(filter);
+      }
+
+      item.hidden = !isMatch;
+    }
+  }
+}
+
+const debouncedUpdateResults = debounce(updateResults, 300);
+
+document.documentElement.addEventListener('input', e => {
+  if (e.target?.matches('#block-filter wa-input')) {
+    debouncedUpdateResults(e.target);
+  }
+});

docs/assets/scripts/hydration-errors.js

@@ -79,8 +79,8 @@
       diffViewer.appendChild(
         createDiff({
           serverHTML,
-          clientHTML
-        })
+          clientHTML,
+        }),
       );
     });
   }
@@ -88,7 +88,7 @@
   function createDiff({ serverHTML, clientHTML }) {
     const diff = diffLines(serverHTML, clientHTML, {
       ignoreWhitespace: false,
-      newLineIsToken: true
+      newLineIsToken: true,
     });
     const fragment = document.createDocumentFragment();
     for (var i = 0; i < diff.length; i++) {

docs/assets/scripts/my.js

@@ -0,0 +1,167 @@
+const my = (globalThis.my = new EventTarget());
+export default my;
+
+class PersistedArray extends Array {
+  constructor(key) {
+    super();
+    this.key = key;
+
+    if (this.key) {
+      this.fromLocalStorage();
+    }
+
+    // Items were updated in another tab
+    addEventListener('storage', event => {
+      if (event.key === this.key || !event.key) {
+        this.fromLocalStorage();
+      }
+    });
+  }
+
+  /**
+   * Update data from local storage
+   */
+  fromLocalStorage() {
+    // First, empty the array
+    this.splice(0, this.length);
+
+    // Then, fill it with the data from local storage
+    let saved = localStorage[this.key] ? JSON.parse(localStorage[this.key]) : null;
+
+    if (saved) {
+      this.push(...saved);
+    }
+  }
+
+  /**
+   * Write data to local storage
+   */
+  toLocalStorage() {
+    if (this.length > 0) {
+      localStorage[this.key] = JSON.stringify(this);
+    } else {
+      delete localStorage[this.key];
+    }
+  }
+}
+
+class SavedEntities extends EventTarget {
+  constructor({ key, type, url }) {
+    super();
+    this.key = key;
+    this.type = type;
+    this.url = url ?? type + 's';
+    this.saved = new PersistedArray(key);
+
+    let all = this;
+    this.entityPrototype = {
+      type: this.type,
+      baseUrl: this.baseUrl,
+
+      get url() {
+        return all.getURL(this);
+      },
+
+      get parentUrl() {
+        return all.getParentURL(this);
+      },
+
+      delete() {
+        all.delete(this);
+      },
+    };
+  }
+
+  getUid() {
+    if (this.saved.length === 0) {
+      return 1;
+    }
+
+    let uids = new Set(this.saved.map(p => p.uid));
+
+    // Find first available number
+    for (let i = 1; i <= this.saved.length + 1; i++) {
+      if (!uids.has(i)) {
+        return i;
+      }
+    }
+  }
+
+  get baseUrl() {
+    return `/docs/${this.url}/`;
+  }
+
+  getURL(entity) {
+    return this.getParentURL(entity) + entity.search;
+  }
+
+  getParentURL(entity) {
+    return this.baseUrl + entity.id + '/';
+  }
+
+  getObject(entity) {
+    let ret = Object.create(this.entityPrototype, Object.getOwnPropertyDescriptors(entity));
+    // debugger;
+    return ret;
+  }
+
+  /**
+   * Save an entity, either by updating its existing entry or creating a new one
+   * @param {object} entity
+   */
+  save(entity) {
+    if (!entity.uid) {
+      // First time saving
+      entity.uid = this.getUid();
+    }
+
+    let savedPalettes = this.saved;
+    let existingIndex = entity.uid ? this.saved.findIndex(p => p.uid === entity.uid) : -1;
+    let newIndex = existingIndex > -1 ? existingIndex : savedPalettes.length;
+
+    this.saved.splice(newIndex, 1, entity);
+
+    this.saved.toLocalStorage();
+
+    this.dispatchEvent(new CustomEvent('save', { detail: this.getObject(entity) }));
+
+    return entity;
+  }
+
+  delete(entity) {
+    let count = this.saved.length;
+
+    if (count === 0 || !entity?.uid) {
+      // No stored entities or this entity has not been saved
+      return;
+    }
+
+    // TODO improve UX of this
+    if (!confirm(`Are you sure you want to delete ${this.type} “${entity.title}”?`)) {
+      return;
+    }
+
+    for (let index; (index = this.saved.findIndex(p => p.uid === entity.uid)) > -1; ) {
+      this.saved.splice(index, 1);
+    }
+
+    if (this.saved.length === count) {
+      // Nothing was removed
+      return;
+    }
+
+    this.saved.toLocalStorage();
+
+    this.dispatchEvent(new CustomEvent('delete', { detail: this.getObject(entity) }));
+  }
+
+  dispatchEvent(event) {
+    super.dispatchEvent(event);
+    my.dispatchEvent(event);
+  }
+}
+
+my.palettes = new SavedEntities({
+  key: 'savedPalettes',
+  type: 'palette',
+});

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

@@ -0,0 +1,52 @@
+import { domChange, nextFrame, ThemeAspect } from './theme-picker.js';
+
+const presetTheme = new ThemeAspect({
+  defaultValue: 'default',
+  key: 'presetTheme',
+  picker: 'wa-select.preset-theme-selector',
+
+  applyChange(options = {}) {
+    const oldStylesheets = [...document.querySelectorAll('#theme-stylesheet')];
+    const oldStylesheet = oldStylesheets.pop();
+
+    if (oldStylesheets.length > 0) {
+      // Remove all but the last one
+      for (let stylesheet of oldStylesheets) {
+        stylesheet.remove();
+      }
+    }
+
+    const href = `/dist/styles/themes/${this.value}.css`;
+
+    if (!oldStylesheet || oldStylesheet.getAttribute('href') !== href) {
+      const newStylesheet = document.createElement('link');
+      Object.assign(newStylesheet, { href, id: 'theme-stylesheet', rel: 'preload', as: 'style' });
+      oldStylesheet.after(newStylesheet);
+
+      newStylesheet.addEventListener(
+        'load',
+        e => {
+          domChange(
+            async instant => {
+              // Swap stylesheets
+              newStylesheet.rel = 'stylesheet';
+
+              if (instant) {
+                // If no VT, delay by 1 frame to make it smoother
+                await nextFrame();
+              }
+
+              oldStylesheet.remove();
+            },
+            { behavior: 'smooth', ...options },
+          );
+        },
+        { once: true },
+      );
+    }
+  },
+});
+
+window.addEventListener('turbo:render', e => {
+  presetTheme.applyChange({ behavior: 'instant' });
+});

docs/assets/scripts/preset-theme.js

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

docs/assets/scripts/prism.js

@@ -0,0 +1,8 @@
+globalThis.Prism = globalThis.Prism || {};
+globalThis.Prism.manual = true;
+
+await import('./prism-downloaded.js');
+
+Prism.plugins.customClass.prefix('code-');
+
+export default Prism;

docs/assets/scripts/scroll.js

@@ -1,13 +1,14 @@
 // Smooth links
 document.addEventListener('click', event => {
   const link = event.target.closest('a');
-  const id = (link?.hash ?? '').substr(1);
-
   if (!link || link.getAttribute('data-smooth-link') === 'off') {
     return;
   }
 
-  if (id) {
+  const id = (link.hash ?? '').substr(1);
+
+  // Only handle smooth scroll if there's a hash and the link points to the current page
+  if (id && link.pathname === window.location.pathname) {
     const target = document.getElementById(id);
     const headerHeight = document.querySelector('wa-page > header').clientHeight;
 
@@ -15,7 +16,7 @@ document.addEventListener('click', event => {
       event.preventDefault();
       window.scroll({
         top: target.offsetTop - headerHeight,
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
       history.pushState(undefined, undefined, `#${id}`);
     }