Merge pull request #859 from shoelace-style/kj/patterns-home-stretch

Kj/patterns home stretch

.eslintignore

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

.eslintrc.cjs

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

.github/workflows/client_tests.js.yml

@@ -0,0 +1,39 @@
+# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Client Tests
+
+on:
+  push:
+    branches: [next]
+  pull_request:
+    branches: [next]
+
+jobs:
+  client_test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Lint
+        run: npm run prettier
+      - name: Build
+        run: npm run build:alpha
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Run CSR tests
+        # FAIL_FAST to fail on first failing test.
+        run: FAIL_FAST="true" CSR_ONLY="true" npm run test

.github/workflows/node.js.yml

@@ -1,30 +0,0 @@
-# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: Node.js CI
-
-on:
-  push:
-    branches: [next]
-  pull_request:
-    branches: [next]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [18.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-      - run: npx playwright install-deps
-      - run: npm ci
-      - run: npm run verify

.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
+

.gitignore

@@ -3,9 +3,10 @@ _site
 .DS_Store
 package.json
 package-lock.json
-dist
+dist/
+dist-cdn/
 docs/public/pagefind
 node_modules
 src/react
-cdn
 .astro
+cdn/

.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

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

custom-elements-manifest.js

@@ -2,12 +2,12 @@ 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;
-const outdir = 'dist';
+const outdir = 'dist-cdn';
 
 function replace(string, terms) {
   terms.forEach(({ from, to }) => {
@@ -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,22 +156,22 @@ 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({
-      outdir: './dist',
+      outdir: './dist-cdn',
       excludeCss: true,
       packageJson: false,
       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,59 +1,116 @@
-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 { getComponents } from './_utils/manifest.js';
+
 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: '',
+  },
+};
+
+const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
+const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
 
 export default function (eleventyConfig) {
+  /**
+   * This is the guard we use for now to make sure our final built files dont need a 2nd pass by the server. This keeps us able to still deploy the bare HTML files on Vercel until the app is ready.
+   */
+  const serverBuild = process.env.WEBAWESOME_SERVER === 'true';
+
   // NOTE - alpha setting removes certain pages
   if (isAlpha) {
-    eleventyConfig.ignores.add('**/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
-  eleventyConfig.addNunjucksGlobal('getComponent', tagName => {
-    const component = getComponents().find(c => c.tagName === tagName);
 
-    if (!component) {
-      throw new Error(
-        `Unable to find "<${tagName}>". Make sure the file name is the same as the tag name (without prefix).`
-      );
-    }
-    return component;
-  });
+  // Remove elements that have [data-alpha="remove"]
+  eleventyConfig.addPlugin(removeDataAlphaElements({ isAlpha }));
 
   // Use our own markdown instance
   eleventyConfig.setLibrary('md', markdown);
@@ -69,21 +126,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(
@@ -91,19 +148,19 @@ 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>',
+      },
+    ]),
   );
 
   // Build the search index
@@ -111,21 +168,59 @@ export default function (eleventyConfig) {
     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

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

docs/_data/components.js

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

docs/_data/componentsBy.js

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

docs/_data/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/_includes/base.njk

@@ -1,79 +1,48 @@
 <!DOCTYPE html>
-<html lang="en" 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 #}
     <script type="module" src="/assets/scripts/code-examples.js"></script>
-    <script type="module" src="/assets/scripts/color-scheme.js"></script>
-    <script type="module" src="/assets/scripts/copy-code.js"></script>
+
     <script type="module" src="/assets/scripts/scroll.js"></script>
     <script type="module" src="/assets/scripts/turbo.js"></script>
     <script type="module" src="/assets/scripts/search.js"></script>
     <script type="module" src="/assets/scripts/outline.js"></script>
+    {% 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.loader.js"></script>
-    <link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
-    <link rel="stylesheet" href="/dist/themes/applied.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/color_standard.css" />
-    <link rel="stylesheet" href="/dist/themes/forms.css" />
-
     {# Docs styles #}
     <link rel="stylesheet" href="/assets/styles/docs.css" />
 
-    {# Set the theme to prevent flashing #}
-    <script>
-      document.documentElement.classList.toggle(
-        'wa-theme-default-dark',
-        sessionStorage.getItem('colorScheme') === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches
-      );
-    </script>
+    {% block head %}{% endblock %}
   </head>
-  <body class="layout-{{ layout | stripExtension }}">
-
-    <wa-page>
-      <header slot="header">
+  <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" disable-navigation-toggle="">
+      <header slot="header" class="wa-split">
         {# Logo #}
         <div id="docs-branding">
           {# Nav toggle #}
-          <wa-button appearance="text" data-toggle-nav>
+          <wa-button appearance="plain" size="small" data-toggle-nav>
             <wa-icon name="bars" label="Toggle navigation"></wa-icon>
           </wa-button>
+
           <a href="/" aria-label="Web Awesome">
-            <span class="only-desktop">{% include "logo.njk" %}</span>
-            <span class="only-mobile">{% include "logo-simple.njk" %}</span>
+            <span class="wa-desktop-only">{% include "logo.njk" %}</span>
+            <span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
           </a>
           <small id="version-number" class="only-desktop">{{ package.version }}</small>
-          <wa-badge variant="warning" class="only-desktop">Alpha</wa-badge>
+          <wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
         </div>
 
-        <div id="docs-toolbar">
-          {# Color scheme selector #}
-          <wa-dropdown id="color-scheme-selector">
-            <wa-button slot="trigger" appearance="tinted" size="small" pill caret title="Press \ to toggle">
-              <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
-              <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
-              <span class="only-light only-desktop">Light</span>
-              <span class="only-dark only-desktop">Dark</span>
-            </wa-button>
-            <wa-menu>
-              <wa-menu-item type="checkbox" value="light">Light</wa-menu-item>
-              <wa-menu-item type="checkbox" value="dark">Dark</wa-menu-item>
-              <wa-divider></wa-divider>
-              <wa-menu-item type="checkbox" value="auto">System</wa-menu-item>
-            </wa-menu>
-          </wa-dropdown>
+        <div id="docs-toolbar" class="wa-cluster wa-gap-xs">
+          {# Desktop selectors #}
+          <div class="only-desktop wa-cluster wa-gap-xs">
+            {% include "preset-theme-selector.njk" %}
+            {% include "color-scheme-selector.njk" %}
+          </div>
 
           {# Search #}
           <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
@@ -81,17 +50,24 @@
             Search
             <kbd slot="suffix" class="only-desktop">/</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 #}
@@ -103,20 +79,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 %}
 
@@ -125,5 +107,6 @@
 
       {% include 'search.njk' %}
     </wa-page>
+
   </body>
 </html>

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

docs/_includes/status.njk

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

docs/_includes/svgs/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/animated-image.njk

@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1H52C58.0751 1 63 5.92487 63 12V52C63 58.0751 58.0751 63 52 63H12C5.92487 63 1 58.0751 1 52V12C1 5.92487 5.92487 1 12 1Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M20 32C20 27.7344 22.25 23.7969 26 21.6406C29.7031 19.4844 34.25 19.4844 38 21.6406C41.7031 23.7969 44 27.7344 44 32C44 36.3125 41.7031 40.25 38 42.4062C34.25 44.5625 29.7031 44.5625 26 42.4062C22.25 40.25 20 36.3125 20 32ZM28.8125 26.9375C28.4375 27.125 28.25 27.5 28.25 27.875V36.125C28.25 36.5469 28.4375 36.9219 28.8125 37.1094C29.1406 37.3438 29.6094 37.2969 29.9375 37.1094L36.6875 32.9844C37.0156 32.75 37.25 32.4219 37.25 32C37.25 31.625 37.0156 31.25 36.6875 31.0625L29.9375 26.9375C29.6094 26.7031 29.1406 26.7031 28.8125 26.8906V26.9375Z" fill="var(--wa-color-brand-fill-loud)"/>
+</svg>

docs/_includes/svgs/animation.njk

@@ -0,0 +1,3 @@
+<svg width="74" height="26" viewBox="0 0 74 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 13C5 9 15.4 1 25 1C37 1 45.25 10.75 45.25 16C45.25 21.25 43 25 37 25C31 25 28.75 21.25 28.75 16C28.75 10.75 37 1 49 1C58.6 1 69 9 73 13M73 13V7M73 13H67" stroke="var(--wa-color-neutral-border-loud)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

docs/_includes/svgs/avatar.njk

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="23" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M24 23.75C22.0234 23.75 20.2188 22.7188 19.2305 21C18.2422 19.3242 18.2422 17.2188 19.2305 15.5C20.2188 13.8242 22.0234 12.75 24 12.75C25.9336 12.75 27.7383 13.8242 28.7266 15.5C29.7148 17.2188 29.7148 19.3242 28.7266 21C27.7383 22.7188 25.9336 23.75 24 23.75ZM22.0234 25.8125H25.9336C30.1875 25.8125 33.625 29.25 33.625 33.5039C33.625 34.1914 33.0234 34.75 32.3359 34.75H15.6211C14.9336 34.75 14.375 34.1914 14.375 33.5039C14.375 29.25 17.7695 25.8125 22.0234 25.8125Z" fill="var(--wa-color-neutral-on-quiet)"/>
+</svg>

docs/_includes/svgs/badge.njk

@@ -0,0 +1,6 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 11H44C50.0751 11 55 15.9249 55 22V54C55 60.0751 50.0751 65 44 65H12C5.92487 65 1 60.0751 1 54V22C1 15.9249 5.92487 11 12 11Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M61 1H31C28.7909 1 27 2.79086 27 5V15C27 17.2091 28.7909 19 31 19H61C63.2091 19 65 17.2091 65 15V5C65 2.79086 63.2091 1 61 1Z" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M61 1H31C28.7909 1 27 2.79086 27 5V15C27 17.2091 28.7909 19 31 19H61C63.2091 19 65 17.2091 65 15V5C65 2.79086 63.2091 1 61 1Z" stroke="var(--wa-color-surface-default)" stroke-width="2"/>
+<path d="M34.7281 6.53125C34.9156 6.46875 35.15 6.53125 35.275 6.6875L39.4 11.625V7C39.4 6.73438 39.6187 6.5 39.9 6.5C40.1656 6.5 40.4 6.73438 40.4 7V13C40.4 13.2188 40.2594 13.4062 40.0562 13.4844C39.8687 13.5469 39.65 13.4844 39.5094 13.3281L35.4 8.39062V13C35.4 13.2812 35.1656 13.5 34.9 13.5C34.6187 13.5 34.4 13.2812 34.4 13V7C34.4 6.79688 34.525 6.60938 34.7281 6.53125ZM43 6.5H46.5C46.7656 6.5 47 6.73438 47 7C47 7.28125 46.7656 7.5 46.5 7.5H43V9.5H45.5C45.7656 9.5 46 9.73438 46 10C46 10.2812 45.7656 10.5 45.5 10.5H43V12.5H46.5C46.7656 12.5 47 12.7344 47 13C47 13.2812 46.7656 13.5 46.5 13.5H43C42.4375 13.5 42 13.0625 42 12.5V10V7.5C42 6.95312 42.4375 6.5 43 6.5ZM48.9125 6.53125C49.1781 6.4375 49.4594 6.57812 49.5687 6.82812L51.2875 11.4219L52.6156 6.85938C52.6781 6.65625 52.8656 6.5 53.1 6.5C53.3187 6.5 53.5062 6.65625 53.5687 6.85938L54.8969 11.4219L56.6312 6.82812C56.725 6.57812 57.0062 6.4375 57.2719 6.54688C57.5219 6.64062 57.6625 6.92188 57.5531 7.1875L55.3031 13.1875C55.2406 13.3906 55.0375 13.5156 54.8187 13.5C54.6 13.5 54.4281 13.3594 54.3656 13.1406L53.1 8.79688L51.8187 13.1406C51.7562 13.3594 51.5687 13.5 51.3656 13.5C51.1469 13.5156 50.9437 13.3906 50.8812 13.1875L48.6312 7.1875C48.5219 6.92188 48.6625 6.64062 48.9125 6.53125Z" fill="var(--wa-color-brand-on-loud)"/>
+</svg>

docs/_includes/svgs/breadcrumb.njk

@@ -0,0 +1,7 @@
+<svg width="112" height="13" viewBox="0 0 112 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7266 6.5C13.7266 6.92188 13.375 7.25 12.9766 7.25H12.2266L12.25 11C12.25 11.0703 12.25 11.1406 12.25 11.1875V11.5625C12.25 12.1016 11.8281 12.5 11.3125 12.5H10.9375C10.8906 12.5 10.8672 12.5 10.8438 12.5C10.8203 12.5 10.7734 12.5 10.75 12.5H10H9.4375C8.89844 12.5 8.5 12.1016 8.5 11.5625V11V9.5C8.5 9.10156 8.14844 8.75 7.75 8.75H6.25C5.82812 8.75 5.5 9.10156 5.5 9.5V11V11.5625C5.5 12.1016 5.07812 12.5 4.5625 12.5H4H3.25C3.20312 12.5 3.17969 12.5 3.13281 12.5C3.10938 12.5 3.08594 12.5 3.0625 12.5H2.6875C2.14844 12.5 1.75 12.1016 1.75 11.5625V8.9375C1.75 8.9375 1.75 8.91406 1.75 8.89062V7.25H1C0.578125 7.25 0.25 6.92188 0.25 6.5C0.25 6.28906 0.320312 6.10156 0.484375 5.9375L6.48438 0.6875C6.64844 0.523438 6.83594 0.5 7 0.5C7.16406 0.5 7.35156 0.546875 7.49219 0.664062L13.4688 5.9375C13.6562 6.10156 13.75 6.28906 13.7266 6.5Z" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M29.5156 5.98438C29.8203 6.26562 29.8203 6.75781 29.5156 7.03906L25.0156 11.5391C24.7344 11.8438 24.2422 11.8438 23.9609 11.5391C23.6562 11.2578 23.6562 10.7656 23.9609 10.4844L27.9219 6.5L23.9609 2.53906C23.6562 2.25781 23.6562 1.76562 23.9609 1.48438C24.2422 1.17969 24.7344 1.17969 25.0156 1.48438L29.5156 5.98438Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<rect x="38" y="4" width="25" height="4" rx="2" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M78.5156 5.98438C78.8203 6.26562 78.8203 6.75781 78.5156 7.03906L74.0156 11.5391C73.7344 11.8438 73.2422 11.8438 72.9609 11.5391C72.6562 11.2578 72.6562 10.7656 72.9609 10.4844L76.9219 6.5L72.9609 2.53906C72.6562 2.25781 72.6562 1.76562 72.9609 1.48438C73.2422 1.17969 73.7344 1.17969 74.0156 1.48438L78.5156 5.98438Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<rect x="87" y="4" width="25" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

docs/_includes/svgs/button-group.njk

@@ -0,0 +1,7 @@
+<svg width="64" height="32" viewBox="0 0 64 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H32V32H6C2.68629 32 0 29.3137 0 26V6Z" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M16.75 12.375V15.75H20.125C20.5234 15.75 20.875 16.1016 20.875 16.5C20.875 16.9219 20.5234 17.25 20.125 17.25H16.75V20.625C16.75 21.0469 16.3984 21.375 16 21.375C15.5781 21.375 15.25 21.0469 15.25 20.625V17.25H11.875C11.4531 17.25 11.125 16.9219 11.125 16.5C11.125 16.1016 11.4531 15.75 11.875 15.75H15.25V12.375C15.25 11.9766 15.5781 11.625 16 11.625C16.3984 11.625 16.75 11.9766 16.75 12.375Z" fill="var(--wa-color-brand-on-loud)"/>
+<path d="M32 0H58C61.3137 0 64 2.68629 64 6V26C64 29.3137 61.3137 32 58 32H32V0Z" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M52.875 16.5C52.875 16.9219 52.5234 17.25 52.125 17.25H43.875C43.4531 17.25 43.125 16.9219 43.125 16.5C43.125 16.1016 43.4531 15.75 43.875 15.75H52.125C52.5234 15.75 52.875 16.1016 52.875 16.5Z" fill="var(--wa-color-brand-on-loud)"/>
+<line x1="32.5" x2="32.5" y2="32" stroke="var(--wa-color-brand-on-quiet)"/>
+</svg>

docs/_includes/svgs/button.njk

@@ -0,0 +1,4 @@
+<svg width="64" height="32" viewBox="0 0 64 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H58C61.3137 0 64 2.68629 64 6V26C64 29.3137 61.3137 32 58 32H6C2.68629 32 0 29.3137 0 26V6Z" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M12.375 13.125C12.375 12.4414 12.9219 11.875 13.625 11.875H15.5C17.2188 11.875 18.625 13.2812 18.625 15C18.625 16.7383 17.2188 18.125 15.5 18.125H13.625V20C13.625 20.3516 13.332 20.625 13 20.625C12.6484 20.625 12.375 20.3516 12.375 20V17.5V13.125ZM13.625 16.875H15.5C16.5352 16.875 17.375 16.0352 17.375 15C17.375 13.9648 16.5352 13.125 15.5 13.125H13.625V16.875ZM21.875 11.875H24.0625C25.6055 11.875 26.875 13.1445 26.875 14.6875C26.875 15.8789 26.1328 16.8945 25.1172 17.3047L26.7578 19.6484C26.9531 19.9414 26.875 20.332 26.6016 20.5273C26.3086 20.7227 25.918 20.6445 25.7227 20.3711L23.7305 17.5H21.875V20C21.875 20.3516 21.582 20.625 21.25 20.625C20.8984 20.625 20.625 20.3516 20.625 20V16.875V13.125C20.625 12.4414 21.1719 11.875 21.875 11.875ZM24.0625 16.25C24.9219 16.25 25.625 15.5664 25.625 14.6875C25.625 13.8281 24.9219 13.125 24.0625 13.125H21.875V16.25H24.0625ZM30.125 11.875H34.5C34.832 11.875 35.125 12.168 35.125 12.5C35.125 12.8516 34.832 13.125 34.5 13.125H30.125V15.625H33.25C33.582 15.625 33.875 15.918 33.875 16.25C33.875 16.6016 33.582 16.875 33.25 16.875H30.125V19.375H34.5C34.832 19.375 35.125 19.668 35.125 20C35.125 20.3516 34.832 20.625 34.5 20.625H30.125C29.4219 20.625 28.875 20.0781 28.875 19.375V16.25V13.125C28.875 12.4414 29.4219 11.875 30.125 11.875ZM39.0586 13.3203C38.668 13.4766 38.4531 13.75 38.3945 14.082C38.3359 14.3555 38.375 14.5312 38.4336 14.668C38.4922 14.7852 38.5898 14.9023 38.7461 15.0195C39.1367 15.293 39.7031 15.4492 40.4062 15.6641C40.4258 15.6641 40.4453 15.6641 40.4648 15.6836C41.1094 15.8594 41.8711 16.0742 42.4375 16.4648C42.75 16.6797 43.0234 16.9727 43.1992 17.3438C43.375 17.7344 43.4141 18.1641 43.3164 18.6523C43.1797 19.4727 42.6328 20.0391 41.9297 20.3516C41.2266 20.6445 40.3672 20.7031 39.5078 20.5664C39.0391 20.4883 38.2773 20.2344 37.7891 20.0586C37.6914 20.0391 37.6133 20 37.5352 19.9805C37.2227 19.8633 37.0469 19.5117 37.1445 19.1797C37.2617 18.8672 37.6133 18.6914 37.9453 18.7891C38.043 18.8281 38.1406 18.8477 38.2578 18.8867C38.7461 19.0625 39.3516 19.2773 39.7031 19.3359C40.4258 19.4336 41.0117 19.375 41.4219 19.1992C41.832 19.0234 42.0273 18.7695 42.0859 18.4375C42.1445 18.1641 42.1055 17.9688 42.0469 17.8516C42.0078 17.7344 41.8906 17.6172 41.7344 17.5C41.3438 17.2266 40.7773 17.0703 40.0742 16.8555C40.0547 16.8555 40.0352 16.8555 40.0156 16.8359C39.3711 16.6602 38.6094 16.4453 38.043 16.0547C37.7305 15.8398 37.457 15.5469 37.2812 15.1758C37.125 14.7852 37.0859 14.3555 37.1641 13.8672L37.7695 13.9844L37.1641 13.8672C37.3008 13.0469 37.8477 12.4805 38.5508 12.168C39.2539 11.875 40.1133 11.8164 40.9727 11.9531C41.2266 11.9922 42.0078 12.1484 42.2812 12.2266C42.6133 12.3047 42.8086 12.6562 42.7109 12.9883C42.6328 13.3203 42.2812 13.5156 41.9492 13.418C41.7344 13.3594 41.0117 13.2227 40.7773 13.1836L40.875 12.5781L40.7773 13.1836C40.0547 13.0859 39.4688 13.1445 39.0586 13.3203ZM47.3086 13.3203C46.918 13.4766 46.7031 13.75 46.6445 14.082C46.5859 14.3555 46.625 14.5312 46.6836 14.668C46.7422 14.7852 46.8398 14.9023 46.9961 15.0195C47.3867 15.293 47.9531 15.4492 48.6562 15.6641C48.6758 15.6641 48.6953 15.6641 48.7148 15.6836C49.3594 15.8594 50.1211 16.0742 50.6875 16.4648C51 16.6797 51.2734 16.9727 51.4492 17.3438C51.625 17.7344 51.6641 18.1641 51.5664 18.6523C51.4297 19.4727 50.8828 20.0391 50.1797 20.3516C49.4766 20.6445 48.6172 20.7031 47.7578 20.5664C47.2891 20.4883 46.5273 20.2344 46.0391 20.0586C45.9414 20.0391 45.8633 20 45.7852 19.9805C45.4727 19.8633 45.2969 19.5117 45.3945 19.1797C45.5117 18.8672 45.8633 18.6914 46.1953 18.7891C46.293 18.8281 46.3906 18.8477 46.5078 18.8867C46.9961 19.0625 47.6016 19.2773 47.9531 19.3359C48.6758 19.4336 49.2617 19.375 49.6719 19.1992C50.082 19.0234 50.2773 18.7695 50.3359 18.4375C50.3945 18.1641 50.3555 17.9688 50.2969 17.8516C50.2578 17.7344 50.1406 17.6172 49.9844 17.5C49.5938 17.2266 49.0273 17.0703 48.3242 16.8555C48.3047 16.8555 48.2852 16.8555 48.2656 16.8359C47.6211 16.6602 46.8594 16.4453 46.293 16.0547C45.9805 15.8398 45.707 15.5469 45.5312 15.1758C45.375 14.7852 45.3359 14.3555 45.4141 13.8672L46.0195 13.9844L45.4141 13.8672C45.5508 13.0469 46.0977 12.4805 46.8008 12.168C47.5039 11.875 48.3633 11.8164 49.2227 11.9531C49.4766 11.9922 50.2578 12.1484 50.5312 12.2266C50.8633 12.3047 51.0586 12.6562 50.9609 12.9883C50.8828 13.3203 50.5312 13.5156 50.1992 13.418C49.9844 13.3594 49.2617 13.2227 49.0273 13.1836L49.125 12.5781L49.0273 13.1836C48.3047 13.0859 47.7188 13.1445 47.3086 13.3203Z" fill="var(--wa-color-brand-on-loud)"/>
+</svg>

docs/_includes/svgs/callout.njk

@@ -0,0 +1,6 @@
+<svg width="112" height="40" viewBox="0 0 112 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1H100C106.075 1 111 5.92487 111 12V28C111 34.0751 106.075 39 100 39H12C5.92487 39 1 34.0751 1 28V12C1 5.92487 5.92487 1 12 1Z" fill="var(--wa-color-warning-fill-quiet)"/>
+<path d="M12 1H100C106.075 1 111 5.92487 111 12V28C111 34.0751 106.075 39 100 39H12C5.92487 39 1 34.0751 1 28V12C1 5.92487 5.92487 1 12 1Z" stroke="var(--wa-color-warning-border-quiet)" stroke-width="2"/>
+<path d="M20 13C20.4375 13 20.8438 13.25 21.0625 13.625L27.8125 25.125C28.0312 25.5312 28.0312 26 27.8125 26.375C27.5938 26.7812 27.1875 27 26.75 27H13.25C12.7812 27 12.375 26.7812 12.1562 26.375C11.9375 26 11.9375 25.5312 12.1562 25.125L18.9062 13.625C19.125 13.25 19.5312 13 20 13ZM20 17C19.5625 17 19.25 17.3438 19.25 17.75V21.25C19.25 21.6875 19.5625 22 20 22C20.4062 22 20.75 21.6875 20.75 21.25V17.75C20.75 17.3438 20.4062 17 20 17ZM21 24C21 23.4688 20.5312 23 20 23C19.4375 23 19 23.4688 19 24C19 24.5625 19.4375 25 20 25C20.5312 25 21 24.5625 21 24Z" fill="var(--wa-color-warning-on-quiet)"/>
+<rect x="36" y="18" width="64" height="4" rx="2" fill="var(--wa-color-warning-on-quiet)"/>
+</svg>

docs/_includes/svgs/card.njk

@@ -0,0 +1,10 @@
+<svg width="64" height="72" viewBox="0 0 64 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1H52C58.0751 1 63 5.92487 63 12V60C63 66.0751 58.0751 71 52 71H12C5.92487 71 1 66.0751 1 60V12C1 5.92487 5.92487 1 12 1Z" fill="var(--wa-color-surface-default)"/>
+<path d="M12 1H52C58.0751 1 63 5.92487 63 12V60C63 66.0751 58.0751 71 52 71H12C5.92487 71 1 66.0751 1 60V12C1 5.92487 5.92487 1 12 1Z" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M52 1H12C5.92487 1 1 5.92487 1 12V35H63V12C63 5.92487 58.0751 1 52 1Z" fill="var(--wa-color-neutral-fill-quiet)"/>
+<path d="M52 1H12C5.92487 1 1 5.92487 1 12V35H63V12C63 5.92487 58.0751 1 52 1Z" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M16 25.3222L21.3333 19.9889L26.6667 25.3222L37.3333 13.5222L48 25.3222" stroke="var(--wa-color-neutral-on-quiet)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.8889 14.2333C23.8889 15.6447 22.7448 16.7889 21.3334 16.7889C19.922 16.7889 18.7778 15.6447 18.7778 14.2333C18.7778 12.8219 19.922 11.6778 21.3334 11.6778C22.7448 11.6778 23.8889 12.8219 23.8889 14.2333Z" stroke="var(--wa-color-neutral-on-quiet)" stroke-width="2"/>
+<rect x="12" y="44" width="40" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<rect x="12" y="56" width="40" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

docs/_includes/svgs/carousel.njk

@@ -0,0 +1,7 @@
+<svg width="130" height="48" viewBox="0 0 130 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.21094 23.9844L5.71094 19.4844C5.99219 19.1797 6.48438 19.1797 6.76562 19.4844C7.07031 19.7656 7.07031 20.2578 6.76562 20.5391L2.80469 24.5L6.76562 28.4844C7.07031 28.7656 7.07031 29.2578 6.76562 29.5391C6.48438 29.8438 5.99219 29.8438 5.71094 29.5391L1.21094 25.0391C0.90625 24.7578 0.90625 24.2656 1.21094 23.9844Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<path d="M25 1H33C39.0751 1 44 5.92487 44 12V36C44 42.0751 39.0751 47 33 47H25C18.9249 47 14 42.0751 14 36V12C14 5.92487 18.9249 1 25 1Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M61 1H69C75.0751 1 80 5.92487 80 12V36C80 42.0751 75.0751 47 69 47H61C54.9249 47 50 42.0751 50 36V12C50 5.92487 54.9249 1 61 1Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M97 1H105C111.075 1 116 5.92487 116 12V36C116 42.0751 111.075 47 105 47H97C90.9249 47 86 42.0751 86 36V12C86 5.92487 90.9249 1 97 1Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M128.766 23.9844C129.07 24.2656 129.07 24.7578 128.766 25.0391L124.266 29.5391C123.984 29.8438 123.492 29.8438 123.211 29.5391C122.906 29.2578 122.906 28.7656 123.211 28.4844L127.172 24.5L123.211 20.5391C122.906 20.2578 122.906 19.7656 123.211 19.4844C123.492 19.1797 123.984 19.1797 124.266 19.4844L128.766 23.9844Z" fill="var(--wa-color-neutral-on-quiet)"/>
+</svg>

docs/_includes/svgs/checkbox.njk

@@ -0,0 +1,7 @@
+<svg width="56" height="36" viewBox="0 0 56 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 23C0 21.3431 1.34315 20 3 20H13C14.6569 20 16 21.3431 16 23V33C16 34.6569 14.6569 36 13 36H3C1.34315 36 0 34.6569 0 33V23Z" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M3 1H13C14.1046 1 15 1.89543 15 3V13C15 14.1046 14.1046 15 13 15H3C1.89543 15 1 14.1046 1 13V3C1 1.89543 1.89543 1 3 1Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M12.5977 24.6523C12.877 24.9102 12.877 25.3613 12.5977 25.6191L7.09766 31.1191C6.83984 31.3984 6.38867 31.3984 6.13086 31.1191L3.38086 28.3691C3.10156 28.1113 3.10156 27.6602 3.38086 27.4023C3.63867 27.123 4.08984 27.123 4.34766 27.4023L6.625 29.6582L11.6309 24.6523C11.8887 24.373 12.3398 24.373 12.5977 24.6523Z" fill="var(--wa-color-brand-on-loud)"/>
+<rect x="24" y="6" width="32" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<rect x="24" y="26" width="32" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

docs/_includes/svgs/color-picker.njk

@@ -0,0 +1,15 @@
+<svg width="96" height="16" viewBox="0 0 96 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="2" width="96" height="12" rx="6" fill="url(#paint0_linear_34_137)"/>
+<rect x="61" y="1" width="14" height="14" rx="7" fill="#4895FD" stroke="var(--wa-color-surface-default)" stroke-width="2"/>
+<defs>
+<linearGradient id="paint0_linear_34_137" x1="0" y1="8" x2="96" y2="8" gradientUnits="userSpaceOnUse">
+<stop offset="0.04" stop-color="#F2676C"/>
+<stop offset="0.1667" stop-color="#F39B00"/>
+<stop offset="0.3334" stop-color="#FCC041"/>
+<stop offset="0.5" stop-color="#5DC36F"/>
+<stop offset="0.67" stop-color="#4895FD"/>
+<stop offset="0.84" stop-color="#8A8BEB"/>
+<stop offset="1" stop-color="#C674E1"/>
+</linearGradient>
+</defs>
+</svg>

docs/_includes/svgs/copy-button.njk

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H26C29.3137 0 32 2.68629 32 6V26C32 29.3137 29.3137 32 26 32H6C2.68629 32 0 29.3137 0 26V6Z" fill="var(--wa-color-neutral-fill-normal)"/>
+<path d="M15.5 8H19.375C19.75 8 20.1562 8.1875 20.4375 8.46875L22.5312 10.5625C22.8125 10.8438 23 11.25 23 11.625V18.5C23 19.3438 22.3125 20 21.5 20H15.5C14.6562 20 14 19.3438 14 18.5V9.5C14 8.6875 14.6562 8 15.5 8ZM10.5 12H13V14H11V22H17V21H19V22.5C19 23.3438 18.3125 24 17.5 24H10.5C9.65625 24 9 23.3438 9 22.5V13.5C9 12.6875 9.65625 12 10.5 12Z" fill="var(--wa-color-neutral-on-normal)"/>
+</svg>

docs/_includes/svgs/details.njk

@@ -0,0 +1,7 @@
+<svg width="112" height="48" viewBox="0 0 112 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1H100C106.075 1 111 5.92487 111 12V36C111 42.0751 106.075 47 100 47H12C5.92487 47 1 42.0751 1 36V12C1 5.92487 5.92487 1 12 1Z" fill="var(--wa-color-surface-default)"/>
+<path d="M12 1H100C106.075 1 111 5.92487 111 12V36C111 42.0751 106.075 47 100 47H12C5.92487 47 1 42.0751 1 36V12C1 5.92487 5.92487 1 12 1Z" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="12" y="16" width="64" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M93.4609 22.0391L88.9609 17.5391C88.6562 17.2578 88.6562 16.7656 88.9609 16.4844C89.2422 16.1797 89.7344 16.1797 90.0156 16.4844L94 20.4453L97.9609 16.4844C98.2422 16.1797 98.7344 16.1797 99.0156 16.4844C99.3203 16.7656 99.3203 17.2578 99.0156 17.5391L94.5156 22.0391C94.2344 22.3438 93.7422 22.3438 93.4609 22.0391Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<rect x="12" y="32" width="88" height="4" rx="2" fill="var(--wa-color-neutral-border-quiet)"/>
+</svg>

docs/_includes/svgs/dialog.njk

@@ -0,0 +1,8 @@
+<svg width="80" height="64" viewBox="0 0 80 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1H68C74.0751 1 79 5.92487 79 12V52C79 58.0751 74.0751 63 68 63H12C5.92487 63 1 58.0751 1 52V12C1 5.92487 5.92487 1 12 1Z" fill="var(--wa-color-surface-default)"/>
+<path d="M12 1H68C74.0751 1 79 5.92487 79 12V52C79 58.0751 74.0751 63 68 63H12C5.92487 63 1 58.0751 1 52V12C1 5.92487 5.92487 1 12 1Z" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="12" y="14" width="36" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M67.7566 13.3666L65.1357 15.9875L67.7566 18.6334C68.0811 18.9329 68.0811 19.4571 67.7566 19.7566C67.4571 20.0811 66.9329 20.0811 66.6334 19.7566L64.0125 17.1357L61.3666 19.7566C61.0671 20.0811 60.5429 20.0811 60.2434 19.7566C59.9189 19.4571 59.9189 18.9329 60.2434 18.6334L62.8643 15.9875L60.2434 13.3666C59.9189 13.0671 59.9189 12.5429 60.2434 12.2434C60.5429 11.9189 61.0671 11.9189 61.3666 12.2434L64.0125 14.8643L66.6334 12.2434C66.9329 11.9189 67.4571 11.9189 67.7566 12.2434C68.0811 12.5429 68.0811 13.0671 67.7566 13.3666Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<rect x="12" y="28" width="56" height="4" rx="2" fill="var(--wa-color-neutral-border-quiet)"/>
+<path d="M44 43C44 41.3431 45.3431 40 47 40H65C66.6569 40 68 41.3431 68 43V49C68 50.6569 66.6569 52 65 52H47C45.3431 52 44 50.6569 44 49V43Z" fill="var(--wa-color-brand-fill-loud)"/>
+</svg>

docs/_includes/svgs/divider.njk

@@ -0,0 +1,5 @@
+<svg width="98" height="32" viewBox="0 0 98 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="17" width="64" height="8" rx="4" fill="var(--wa-color-neutral-border-quiet)"/>
+<path d="M1 16H97" stroke="var(--wa-color-neutral-border-loud)" stroke-width="2" stroke-linecap="round"/>
+<rect x="17" y="24" width="64" height="8" rx="4" fill="var(--wa-color-neutral-border-quiet)"/>
+</svg>

docs/_includes/svgs/drawer.njk

@@ -0,0 +1,16 @@
+<svg width="82" height="112" viewBox="0 0 82 112" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-outside-1_41_158" maskUnits="userSpaceOnUse" x="0" y="0" width="82" height="112" fill="black">
+<rect fill="var(--wa-color-surface-default)" width="82" height="112"/>
+<path d="M2 0H82V112H2V0Z"/>
+</mask>
+<path d="M2 0H82V112H2V0Z" fill="var(--wa-color-surface-default)"/>
+<path d="M4 112V0H0V112H4Z" fill="var(--wa-color-surface-border)" mask="url(#path-1-outside-1_41_158)"/>
+<rect x="14" y="14" width="36" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M69.7566 13.3666L67.1357 15.9875L69.7566 18.6334C70.0811 18.9329 70.0811 19.4571 69.7566 19.7566C69.4571 20.0811 68.9329 20.0811 68.6334 19.7566L66.0125 17.1357L63.3666 19.7566C63.0671 20.0811 62.5429 20.0811 62.2434 19.7566C61.9189 19.4571 61.9189 18.9329 62.2434 18.6334L64.8643 15.9875L62.2434 13.3666C61.9189 13.0671 61.9189 12.5429 62.2434 12.2434C62.5429 11.9189 63.0671 11.9189 63.3666 12.2434L66.0125 14.8643L68.6334 12.2434C68.9329 11.9189 69.4571 11.9189 69.7566 12.2434C70.0811 12.5429 70.0811 13.0671 69.7566 13.3666Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<rect x="14" y="28" width="56" height="4" rx="2" fill="var(--wa-color-neutral-border-quiet)"/>
+<rect x="14" y="40" width="56" height="4" rx="2" fill="var(--wa-color-neutral-border-quiet)"/>
+<rect x="14" y="52" width="56" height="4" rx="2" fill="var(--wa-color-neutral-border-quiet)"/>
+<rect x="14" y="64" width="56" height="4" rx="2" fill="var(--wa-color-neutral-border-quiet)"/>
+<rect x="14" y="76" width="56" height="4" rx="2" fill="var(--wa-color-neutral-border-quiet)"/>
+<path d="M46 91C46 89.3431 47.3431 88 49 88H67C68.6569 88 70 89.3431 70 91V97C70 98.6569 68.6569 100 67 100H49C47.3431 100 46 98.6569 46 97V91Z" fill="var(--wa-color-brand-fill-loud)"/>
+</svg>

docs/_includes/svgs/dropdown.njk

@@ -0,0 +1,8 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V18C24 21.3137 21.3137 24 18 24H6C2.68629 24 0 21.3137 0 18V6Z" fill="var(--wa-color-neutral-fill-normal)"/>
+<path d="M11.4609 16.0391L6.96094 11.5391C6.65625 11.2578 6.65625 10.7656 6.96094 10.4844C7.24219 10.1797 7.73438 10.1797 8.01562 10.4844L12 14.4453L15.9609 10.4844C16.2422 10.1797 16.7344 10.1797 17.0156 10.4844C17.3203 10.7656 17.3203 11.2578 17.0156 11.5391L12.5156 16.0391C12.2344 16.3438 11.7422 16.3438 11.4609 16.0391Z" fill="var(--wa-color-neutral-on-normal)"/>
+<path d="M6 25H58C60.7614 25 63 27.2386 63 30V58C63 60.7614 60.7614 63 58 63H6C3.23858 63 1 60.7614 1 58V30C1 27.2386 3.23858 25 6 25Z" fill="var(--wa-color-surface-default)"/>
+<path d="M6 25H58C60.7614 25 63 27.2386 63 30V58C63 60.7614 60.7614 63 58 63H6C3.23858 63 1 60.7614 1 58V30C1 27.2386 3.23858 25 6 25Z" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="12" y="36" width="40" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<rect x="12" y="48" width="40" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

docs/_includes/svgs/format-bytes.njk

@@ -0,0 +1,4 @@
+<svg width="76" height="12" viewBox="0 0 76 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.75 2V10.25H6.25C6.64844 10.25 7 10.6016 7 11C7 11.4219 6.64844 11.75 6.25 11.75H4H1.75C1.32812 11.75 1 11.4219 1 11C1 10.6016 1.32812 10.25 1.75 10.25H3.25V3.40625L2.14844 4.13281C1.82031 4.36719 1.35156 4.27344 1.11719 3.92188C0.882812 3.57031 0.976562 3.125 1.32812 2.89062L3.57812 1.39062C3.8125 1.22656 4.09375 1.22656 4.35156 1.34375C4.58594 1.48438 4.75 1.74219 4.75 2ZM12.7281 2.75C12.2359 2.75 11.7437 2.96094 11.3922 3.3125L10.6656 4.03906C10.3844 4.34375 9.89219 4.34375 9.61094 4.03906C9.30625 3.75781 9.30625 3.26562 9.61094 2.98438L10.3375 2.25781C10.9703 1.625 11.8375 1.25 12.7281 1.25C14.6266 1.25 16.15 2.77344 16.15 4.67188C16.15 5.5625 15.775 6.42969 15.1422 7.0625L11.9547 10.25H16.15C16.5484 10.25 16.9 10.6016 16.9 11C16.9 11.4219 16.5484 11.75 16.15 11.75H10.15C9.84531 11.75 9.56406 11.5859 9.44687 11.3047C9.32969 11.0234 9.4 10.6953 9.61094 10.4844L14.0875 6.00781C14.4391 5.65625 14.65 5.16406 14.65 4.67188C14.65 3.61719 13.7828 2.75 12.7281 2.75Z" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M26.5 1.25H28.75C30.3906 1.25 31.75 2.60938 31.75 4.25C31.75 5 31.4688 5.65625 31.0469 6.19531C31.9141 6.71094 32.5 7.67188 32.5 8.75C32.5 10.4141 31.1406 11.75 29.5 11.75H26.5C25.6562 11.75 25 11.0938 25 10.25V6.5V2.75C25 1.92969 25.6562 1.25 26.5 1.25ZM28.75 5.75C29.5703 5.75 30.25 5.09375 30.25 4.25C30.25 3.42969 29.5703 2.75 28.75 2.75H26.5V5.75H28.75ZM26.5 7.25V10.25H29.5C30.3203 10.25 31 9.59375 31 8.75C31 7.92969 30.3203 7.25 29.5 7.25H28.75H26.5ZM36.2594 1.57812L39.4 5.96094L42.5406 1.57812C42.775 1.22656 43.2437 1.15625 43.5719 1.39062C43.9 1.64844 43.9937 2.11719 43.7594 2.44531L40.15 7.50781V11C40.15 11.4219 39.7984 11.75 39.4 11.75C38.9781 11.75 38.65 11.4219 38.65 11V7.50781L35.0406 2.44531C34.7828 2.11719 34.8766 1.64844 35.2047 1.39062C35.5328 1.15625 36.0016 1.22656 36.2594 1.57812ZM47.05 1.25H50.8H54.55C54.9484 1.25 55.3 1.60156 55.3 2C55.3 2.42188 54.9484 2.75 54.55 2.75H51.55V11C51.55 11.4219 51.1984 11.75 50.8 11.75C50.3781 11.75 50.05 11.4219 50.05 11V2.75H47.05C46.6281 2.75 46.3 2.42188 46.3 2C46.3 1.60156 46.6281 1.25 47.05 1.25ZM59.2 1.25H64.45C64.8484 1.25 65.2 1.60156 65.2 2C65.2 2.42188 64.8484 2.75 64.45 2.75H59.2V5.75H62.95C63.3484 5.75 63.7 6.10156 63.7 6.5C63.7 6.92188 63.3484 7.25 62.95 7.25H59.2V10.25H64.45C64.8484 10.25 65.2 10.6016 65.2 11C65.2 11.4219 64.8484 11.75 64.45 11.75H59.2C58.3563 11.75 57.7 11.0938 57.7 10.25V6.5V2.75C57.7 1.92969 58.3563 1.25 59.2 1.25ZM69.9203 2.98438C69.4516 3.17188 69.1937 3.5 69.1234 3.89844C69.0531 4.22656 69.1 4.4375 69.1703 4.60156C69.2406 4.74219 69.3578 4.88281 69.5453 5.02344C70.0141 5.35156 70.6937 5.53906 71.5375 5.79688C71.5609 5.79688 71.5844 5.79688 71.6078 5.82031C72.3812 6.03125 73.2953 6.28906 73.975 6.75781C74.35 7.01562 74.6781 7.36719 74.8891 7.8125C75.1 8.28125 75.1469 8.79688 75.0297 9.38281C74.8656 10.3672 74.2094 11.0469 73.3656 11.4219C72.5219 11.7734 71.4906 11.8438 70.4594 11.6797C69.8969 11.5859 68.9828 11.2812 68.3969 11.0703C68.2797 11.0469 68.1859 11 68.0922 10.9766C67.7172 10.8359 67.5062 10.4141 67.6234 10.0156C67.7641 9.64062 68.1859 9.42969 68.5844 9.54688C68.7016 9.59375 68.8187 9.61719 68.9594 9.66406C69.5453 9.875 70.2719 10.1328 70.6937 10.2031C71.5609 10.3203 72.2641 10.25 72.7562 10.0391C73.2484 9.82812 73.4828 9.52344 73.5531 9.125C73.6234 8.79688 73.5766 8.5625 73.5062 8.42188C73.4594 8.28125 73.3187 8.14062 73.1312 8C72.6625 7.67188 71.9828 7.48438 71.1391 7.22656C71.1156 7.22656 71.0922 7.22656 71.0687 7.20312C70.2953 6.99219 69.3812 6.73438 68.7016 6.26562C68.3266 6.00781 67.9984 5.65625 67.7875 5.21094C67.6 4.74219 67.5531 4.22656 67.6469 3.64062L68.3734 3.78125L67.6469 3.64062C67.8109 2.65625 68.4672 1.97656 69.3109 1.60156C70.1547 1.25 71.1859 1.17969 72.2172 1.34375C72.5219 1.39062 73.4594 1.57812 73.7875 1.67188C74.1859 1.76562 74.4203 2.1875 74.3031 2.58594C74.2094 2.98438 73.7875 3.21875 73.3891 3.10156C73.1312 3.03125 72.2641 2.86719 71.9828 2.82031L72.1 2.09375L71.9828 2.82031C71.1156 2.70312 70.4125 2.77344 69.9203 2.98438Z" fill="var(--wa-color-neutral-on-quiet)"/>
+</svg>

docs/_includes/svgs/format-date.njk

@@ -0,0 +1,7 @@
+<svg width="89" height="16" viewBox="0 0 89 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 2C1 1.60156 1.32812 1.25 1.75 1.25H7.375C7.67969 1.25 7.96094 1.46094 8.05469 1.74219C8.17188 2.02344 8.10156 2.35156 7.86719 2.5625L4.79688 5.375H5.3125C7.07031 5.375 8.5 6.80469 8.5 8.5625C8.5 10.3438 7.07031 11.75 5.3125 11.75H3.46094C2.47656 11.75 1.5625 11.1875 1.11719 10.3203L1.07031 10.2266C0.882812 9.85156 1.02344 9.40625 1.39844 9.21875C1.77344 9.03125 2.21875 9.17188 2.40625 9.54688L2.45312 9.64062C2.64062 10.0156 3.03906 10.25 3.46094 10.25H5.3125C6.22656 10.25 7 9.5 7 8.5625C7 7.64844 6.22656 6.875 5.3125 6.875H2.875C2.54688 6.875 2.28906 6.6875 2.17188 6.40625C2.05469 6.125 2.125 5.79688 2.35938 5.58594L5.42969 2.75H1.75C1.32812 2.75 1 2.42188 1 2Z" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M16.0859 13.0859C16.0443 13.1745 15.9688 13.2396 15.8594 13.2812C15.75 13.3229 15.6276 13.3438 15.4922 13.3438C15.3411 13.3438 15.1849 13.3203 15.0234 13.2734C14.862 13.2318 14.7188 13.1693 14.5938 13.0859C14.474 13.0078 14.3854 12.9115 14.3281 12.7969C14.2708 12.6875 14.2734 12.5651 14.3359 12.4297L19.5078 0.804688C19.5495 0.716146 19.625 0.651042 19.7344 0.609375C19.849 0.5625 19.9766 0.539062 20.1172 0.539062C20.2682 0.539062 20.4219 0.5625 20.5781 0.609375C20.7396 0.651042 20.8802 0.713542 21 0.796875C21.125 0.875 21.2135 0.971354 21.2656 1.08594C21.3229 1.19531 21.3203 1.32031 21.2578 1.46094L16.0859 13.0859Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<path d="M27 2C27 1.60156 27.3281 1.25 27.75 1.25H33.375C33.6797 1.25 33.9609 1.46094 34.0547 1.74219C34.1719 2.02344 34.1016 2.35156 33.8672 2.5625L30.7969 5.375H31.3125C33.0703 5.375 34.5 6.80469 34.5 8.5625C34.5 10.3438 33.0703 11.75 31.3125 11.75H29.4609C28.4766 11.75 27.5625 11.1875 27.1172 10.3203L27.0703 10.2266C26.8828 9.85156 27.0234 9.40625 27.3984 9.21875C27.7734 9.03125 28.2188 9.17188 28.4062 9.54688L28.4531 9.64062C28.6406 10.0156 29.0391 10.25 29.4609 10.25H31.3125C32.2266 10.25 33 9.5 33 8.5625C33 7.64844 32.2266 6.875 31.3125 6.875H28.875C28.5469 6.875 28.2891 6.6875 28.1719 6.40625C28.0547 6.125 28.125 5.79688 28.3594 5.58594L31.4297 2.75H27.75C27.3281 2.75 27 2.42188 27 2Z" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M42.0859 13.0859C42.0443 13.1745 41.9688 13.2396 41.8594 13.2812C41.75 13.3229 41.6276 13.3438 41.4922 13.3438C41.3411 13.3438 41.1849 13.3203 41.0234 13.2734C40.862 13.2318 40.7188 13.1693 40.5938 13.0859C40.474 13.0078 40.3854 12.9115 40.3281 12.7969C40.2708 12.6875 40.2734 12.5651 40.3359 12.4297L45.5078 0.804688C45.5495 0.716146 45.625 0.651042 45.7344 0.609375C45.849 0.5625 45.9766 0.539062 46.1172 0.539062C46.2682 0.539062 46.4219 0.5625 46.5781 0.609375C46.7396 0.651042 46.8802 0.713542 47 0.796875C47.125 0.875 47.2135 0.971354 47.2656 1.08594C47.3229 1.19531 47.3203 1.32031 47.2578 1.46094L42.0859 13.0859Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<path d="M56.3281 2.75C55.8359 2.75 55.3438 2.96094 54.9922 3.3125L54.2656 4.03906C53.9844 4.34375 53.4922 4.34375 53.2109 4.03906C52.9062 3.75781 52.9062 3.26562 53.2109 2.98438L53.9375 2.25781C54.5703 1.625 55.4375 1.25 56.3281 1.25C58.2266 1.25 59.75 2.77344 59.75 4.67188C59.75 5.5625 59.375 6.42969 58.7422 7.0625L55.5547 10.25H59.75C60.1484 10.25 60.5 10.6016 60.5 11C60.5 11.4219 60.1484 11.75 59.75 11.75H53.75C53.4453 11.75 53.1641 11.5859 53.0469 11.3047C52.9297 11.0234 53 10.6953 53.2109 10.4844L57.6875 6.00781C58.0391 5.65625 58.25 5.16406 58.25 4.67188C58.25 3.61719 57.3828 2.75 56.3281 2.75ZM62.9 5C62.9 2.9375 64.5641 1.25 66.65 1.25C68.7125 1.25 70.4 2.9375 70.4 5V8C70.4 10.0859 68.7125 11.75 66.65 11.75C64.5641 11.75 62.9 10.0859 62.9 8V5ZM66.65 2.75C65.4078 2.75 64.4 3.75781 64.4 5V8C64.4 9.24219 65.4078 10.25 66.65 10.25C67.8922 10.25 68.9 9.24219 68.9 8V5C68.9 3.75781 67.8922 2.75 66.65 2.75ZM76.55 2V10.25H78.05C78.4484 10.25 78.8 10.6016 78.8 11C78.8 11.4219 78.4484 11.75 78.05 11.75H75.8H73.55C73.1281 11.75 72.8 11.4219 72.8 11C72.8 10.6016 73.1281 10.25 73.55 10.25H75.05V3.40625L73.9484 4.13281C73.6203 4.36719 73.1516 4.27344 72.9172 3.92188C72.6828 3.57031 72.7766 3.125 73.1281 2.89062L75.3781 1.39062C75.6125 1.22656 75.8937 1.22656 76.1516 1.34375C76.3859 1.48438 76.55 1.74219 76.55 2ZM84.5281 2.75C84.0359 2.75 83.5438 2.96094 83.1922 3.3125L82.4656 4.03906C82.1844 4.34375 81.6922 4.34375 81.4109 4.03906C81.1063 3.75781 81.1063 3.26562 81.4109 2.98438L82.1375 2.25781C82.7703 1.625 83.6375 1.25 84.5281 1.25C86.4266 1.25 87.95 2.77344 87.95 4.67188C87.95 5.5625 87.575 6.42969 86.9422 7.0625L83.7547 10.25H87.95C88.3484 10.25 88.7 10.6016 88.7 11C88.7 11.4219 88.3484 11.75 87.95 11.75H81.95C81.6453 11.75 81.3641 11.5859 81.2469 11.3047C81.1297 11.0234 81.2 10.6953 81.4109 10.4844L85.8875 6.00781C86.2391 5.65625 86.45 5.16406 86.45 4.67188C86.45 3.61719 85.5828 2.75 84.5281 2.75Z" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

docs/_includes/svgs/format-number.njk

@@ -0,0 +1,8 @@
+<svg width="82" height="16" viewBox="0 0 82 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 0.5C4.14844 0.5 4.5 0.851562 4.5 1.25V2.09375C4.52344 2.09375 4.57031 2.11719 4.59375 2.11719C4.61719 2.11719 4.61719 2.11719 4.61719 2.11719L5.74219 2.32812C6.16406 2.39844 6.42188 2.79688 6.35156 3.19531C6.28125 3.59375 5.88281 3.875 5.48438 3.80469L4.35938 3.59375C3.63281 3.47656 2.97656 3.57031 2.53125 3.73438C2.08594 3.92188 1.89844 4.17969 1.85156 4.39062C1.80469 4.64844 1.85156 4.78906 1.875 4.88281C1.92188 4.97656 2.01562 5.07031 2.17969 5.1875C2.55469 5.44531 3.14062 5.60938 3.91406 5.79688L3.98438 5.82031C4.64062 6.00781 5.46094 6.21875 6.07031 6.61719C6.39844 6.82812 6.72656 7.13281 6.91406 7.53125C7.125 7.95312 7.14844 8.42188 7.07812 8.9375C6.91406 9.82812 6.28125 10.4141 5.53125 10.7188C5.20312 10.8594 4.85156 10.9297 4.5 10.9766V11.75C4.5 12.1719 4.14844 12.5 3.75 12.5C3.32812 12.5 3 12.1719 3 11.75V10.9531C2.97656 10.9297 2.97656 10.9297 2.95312 10.9297C2.39062 10.8594 1.45312 10.6016 0.820312 10.3203C0.421875 10.1562 0.257812 9.71094 0.421875 9.33594C0.609375 8.96094 1.03125 8.77344 1.42969 8.96094C1.89844 9.17188 2.71875 9.38281 3.1875 9.45312C3.9375 9.57031 4.54688 9.5 4.96875 9.33594C5.36719 9.17188 5.53125 8.9375 5.60156 8.65625C5.625 8.39844 5.60156 8.25781 5.55469 8.1875C5.50781 8.09375 5.4375 7.97656 5.25 7.85938C4.875 7.625 4.28906 7.46094 3.51562 7.25L3.44531 7.22656C2.78906 7.0625 1.96875 6.82812 1.35938 6.42969C1.03125 6.21875 0.703125 5.91406 0.515625 5.51562C0.328125 5.09375 0.28125 4.625 0.375 4.13281C0.539062 3.21875 1.21875 2.65625 1.96875 2.35156C2.29688 2.21094 2.625 2.14062 3 2.09375V1.25C3 0.851562 3.32812 0.5 3.75 0.5Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<path d="M13.75 2V10.25H15.25C15.6484 10.25 16 10.6016 16 11C16 11.4219 15.6484 11.75 15.25 11.75H13H10.75C10.3281 11.75 10 11.4219 10 11C10 10.6016 10.3281 10.25 10.75 10.25H12.25V3.40625L11.1484 4.13281C10.8203 4.36719 10.3516 4.27344 10.1172 3.92188C9.88281 3.57031 9.97656 3.125 10.3281 2.89062L12.5781 1.39062C12.8125 1.22656 13.0938 1.22656 13.3516 1.34375C13.5859 1.48438 13.75 1.74219 13.75 2Z" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M20.0625 12.9766C20.0052 13.0859 19.9245 13.1667 19.8203 13.2188C19.7161 13.2708 19.5729 13.2969 19.3906 13.2969C19.1719 13.2969 19.0052 13.2526 18.8906 13.1641C18.7812 13.0755 18.7396 12.9479 18.7656 12.7812L19.5 8.54688C19.5417 8.33854 19.6771 8.23438 19.9062 8.23438H21.9297C22.0599 8.23438 22.1458 8.28385 22.1875 8.38281C22.2292 8.47656 22.2161 8.59115 22.1484 8.72656L20.0625 12.9766Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<path d="M26 5C26 2.9375 27.6641 1.25 29.75 1.25C31.8125 1.25 33.5 2.9375 33.5 5V8C33.5 10.0859 31.8125 11.75 29.75 11.75C27.6641 11.75 26 10.0859 26 8V5ZM29.75 2.75C28.5078 2.75 27.5 3.75781 27.5 5V8C27.5 9.24219 28.5078 10.25 29.75 10.25C30.9922 10.25 32 9.24219 32 8V5C32 3.75781 30.9922 2.75 29.75 2.75ZM35.9 5C35.9 2.9375 37.5641 1.25 39.65 1.25C41.7125 1.25 43.4 2.9375 43.4 5V8C43.4 10.0859 41.7125 11.75 39.65 11.75C37.5641 11.75 35.9 10.0859 35.9 8V5ZM39.65 2.75C38.4078 2.75 37.4 3.75781 37.4 5V8C37.4 9.24219 38.4078 10.25 39.65 10.25C40.8922 10.25 41.9 9.24219 41.9 8V5C41.9 3.75781 40.8922 2.75 39.65 2.75ZM45.8 5C45.8 2.9375 47.4641 1.25 49.55 1.25C51.6125 1.25 53.3 2.9375 53.3 5V8C53.3 10.0859 51.6125 11.75 49.55 11.75C47.4641 11.75 45.8 10.0859 45.8 8V5ZM49.55 2.75C48.3078 2.75 47.3 3.75781 47.3 5V8C47.3 9.24219 48.3078 10.25 49.55 10.25C50.7922 10.25 51.8 9.24219 51.8 8V5C51.8 3.75781 50.7922 2.75 49.55 2.75Z" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M57.1719 9.54688C57.1719 9.32292 57.2135 9.11198 57.2969 8.91406C57.3854 8.71615 57.5026 8.54427 57.6484 8.39844C57.7943 8.2526 57.9661 8.13802 58.1641 8.05469C58.362 7.96615 58.5729 7.92188 58.7969 7.92188C59.0208 7.92188 59.2318 7.96615 59.4297 8.05469C59.6276 8.13802 59.7995 8.2526 59.9453 8.39844C60.0911 8.54427 60.2057 8.71615 60.2891 8.91406C60.3776 9.11198 60.4219 9.32292 60.4219 9.54688C60.4219 9.77083 60.3776 9.98177 60.2891 10.1797C60.2057 10.3776 60.0911 10.5495 59.9453 10.6953C59.7995 10.8411 59.6276 10.9557 59.4297 11.0391C59.2318 11.1276 59.0208 11.1719 58.7969 11.1719C58.5729 11.1719 58.362 11.1276 58.1641 11.0391C57.9661 10.9557 57.7943 10.8411 57.6484 10.6953C57.5026 10.5495 57.3854 10.3776 57.2969 10.1797C57.2135 9.98177 57.1719 9.77083 57.1719 9.54688Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<path d="M64 5C64 2.9375 65.6641 1.25 67.75 1.25C69.8125 1.25 71.5 2.9375 71.5 5V8C71.5 10.0859 69.8125 11.75 67.75 11.75C65.6641 11.75 64 10.0859 64 8V5ZM67.75 2.75C66.5078 2.75 65.5 3.75781 65.5 5V8C65.5 9.24219 66.5078 10.25 67.75 10.25C68.9922 10.25 70 9.24219 70 8V5C70 3.75781 68.9922 2.75 67.75 2.75ZM73.9 5C73.9 2.9375 75.5641 1.25 77.65 1.25C79.7125 1.25 81.4 2.9375 81.4 5V8C81.4 10.0859 79.7125 11.75 77.65 11.75C75.5641 11.75 73.9 10.0859 73.9 8V5ZM77.65 2.75C76.4078 2.75 75.4 3.75781 75.4 5V8C75.4 9.24219 76.4078 10.25 77.65 10.25C78.8922 10.25 79.9 9.24219 79.9 8V5C79.9 3.75781 78.8922 2.75 77.65 2.75Z" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

docs/_includes/svgs/icon-button.njk

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H26C29.3137 0 32 2.68629 32 6V26C32 29.3137 29.3137 32 26 32H6C2.68629 32 0 29.3137 0 26V6Z" fill="var(--wa-color-neutral-fill-normal)"/>
+<path d="M23.4688 13.2188C23.5938 13.5 23.5 13.7812 23.2812 14L21.9375 15.2188C21.9688 15.4688 21.9688 15.75 21.9688 16C21.9688 16.2812 21.9688 16.5625 21.9375 16.8125L23.2812 18.0312C23.5 18.2188 23.5938 18.5312 23.4688 18.8125C23.3438 19.1875 23.1875 19.5312 23 19.875L22.8438 20.125C22.625 20.4688 22.4062 20.8125 22.1562 21.0938C21.9688 21.3438 21.6562 21.4062 21.375 21.3125L19.6562 20.7812C19.2188 21.0938 18.75 21.3438 18.2812 21.5625L17.875 23.3438C17.8125 23.625 17.5938 23.8438 17.3125 23.9062C16.875 23.9688 16.4375 24 15.9688 24C15.5312 24 15.0938 23.9688 14.6562 23.9062C14.375 23.8438 14.1562 23.625 14.0938 23.3438L13.6875 21.5625C13.1875 21.3438 12.75 21.0938 12.3125 20.7812L10.5938 21.3125C10.3125 21.4062 10 21.3438 9.8125 21.125C9.5625 20.8125 9.34375 20.4688 9.125 20.125L8.96875 19.875C8.78125 19.5312 8.625 19.1875 8.5 18.8125C8.375 18.5312 8.46875 18.25 8.6875 18.0312L10.0312 16.8125C10 16.5625 10 16.2812 10 16C10 15.75 10 15.4688 10.0312 15.2188L8.6875 14C8.46875 13.7812 8.375 13.5 8.5 13.2188C8.625 12.8438 8.78125 12.5 8.96875 12.1562L9.125 11.9062C9.34375 11.5625 9.5625 11.2188 9.8125 10.9062C10 10.6875 10.3125 10.625 10.5938 10.7188L12.3125 11.25C12.75 10.9375 13.2188 10.6562 13.6875 10.4688L14.0938 8.6875C14.1562 8.40625 14.375 8.1875 14.6562 8.125C15.0938 8.0625 15.5312 8 16 8C16.4375 8 16.875 8.0625 17.3125 8.125C17.5938 8.15625 17.8125 8.40625 17.875 8.6875L18.2812 10.4688C18.7812 10.6562 19.2188 10.9375 19.6562 11.25L21.375 10.7188C21.6562 10.625 21.9688 10.6875 22.1562 10.9062C22.4062 11.2188 22.625 11.5625 22.8438 11.9062L23 12.1562C23.1875 12.5 23.3438 12.8438 23.5 13.2188H23.4688ZM16 18.5C16.875 18.5 17.6875 18.0312 18.1562 17.25C18.5938 16.5 18.5938 15.5312 18.1562 14.75C17.6875 14 16.875 13.5 16 13.5C15.0938 13.5 14.2812 14 13.8125 14.75C13.375 15.5312 13.375 16.5 13.8125 17.25C14.2812 18.0312 15.0938 18.5 16 18.5Z" fill="var(--wa-color-neutral-on-normal)"/>
+</svg>

docs/_includes/svgs/icon.njk

@@ -0,0 +1,10 @@
+<svg width="87" height="38" viewBox="0 0 87 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 5C9.5 4.125 9 3.3125 8.25 2.84375C7.46875 2.40625 6.5 2.40625 5.75 2.84375C4.96875 3.3125 4.5 4.125 4.5 5C4.5 5.90625 4.96875 6.71875 5.75 7.1875C6.5 7.625 7.46875 7.625 8.25 7.1875C9 6.71875 9.5 5.90625 9.5 5ZM3 5C3 3.59375 3.75 2.28125 5 1.5625C6.21875 0.84375 7.75 0.84375 9 1.5625C10.2188 2.28125 11 3.59375 11 5C11 6.4375 10.2188 7.75 9 8.46875C7.75 9.1875 6.21875 9.1875 5 8.46875C3.75 7.75 3 6.4375 3 5ZM1.53125 15.5H12.4375C12.1562 13.5312 10.4688 12 8.40625 12H5.5625C3.5 12 1.8125 13.5312 1.53125 15.5ZM0 16.0938C0 13 2.46875 10.5 5.5625 10.5H8.40625C11.5 10.5 14 13 14 16.0938C14 16.5938 13.5625 17 13.0625 17H0.90625C0.40625 17 0 16.5938 0 16.0938Z" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M35.7812 2.84375H35.75C35.4688 2.5625 35 2.5625 34.7188 2.84375L33.7812 3.75L35.25 5.21875L36.1562 4.28125C36.4375 4 36.4375 3.53125 36.1562 3.21875L35.7812 2.84375ZM28.5312 9.03125C28.4375 9.09375 28.375 9.21875 28.3438 9.34375L27.8125 11.1562L29.6562 10.6562C29.7812 10.625 29.875 10.5625 29.9688 10.4688L34.1875 6.25L32.75 4.8125L28.5312 9.03125ZM33.6562 1.78125C34.5312 0.90625 35.9375 0.90625 36.8125 1.78125L37.2188 2.1875C38.0938 3.0625 38.0938 4.46875 37.2188 5.34375L31.0312 11.5312C30.7812 11.7812 30.4375 11.9688 30.0625 12.0938L26.9375 12.9688C26.6875 13.0625 26.4062 13 26.2188 12.7812C26 12.5938 25.9375 12.3125 26 12.0625L26.9062 8.9375C27 8.5625 27.2188 8.21875 27.4688 7.96875L33.6562 1.78125ZM24.75 3H28.25C28.6562 3 29 3.34375 29 3.75C29 4.1875 28.6562 4.5 28.25 4.5H24.75C24.0312 4.5 23.5 5.0625 23.5 5.75V14.25C23.5 14.9688 24.0312 15.5 24.75 15.5H33.25C33.9375 15.5 34.5 14.9688 34.5 14.25V10.75C34.5 10.3438 34.8125 10 35.25 10C35.6562 10 36 10.3438 36 10.75V14.25C36 15.7812 34.75 17 33.25 17H24.75C23.2188 17 22 15.7812 22 14.25V5.75C22 4.25 23.2188 3 24.75 3Z" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M46.5 9.15625L60.5 1.15625C60.8125 0.96875 61.25 0.96875 61.5625 1.1875C61.875 1.40625 62.0312 1.78125 61.9688 2.15625L59.9688 15.1562C59.875 15.7812 59.1875 16.1875 58.5938 15.9375L54.7188 14.3125L52.7812 16.6562C52.5938 16.875 52.3125 17 52 17C51.4375 17 51 16.5625 51 16V12.75L46.5938 10.9375C45.8438 10.625 45.7812 9.5625 46.5 9.15625ZM48.125 9.9375L51.9688 11.5312L51.9375 11.5L58.7812 3.84375L48.125 9.9375ZM58.5938 14.3125L60.0625 4.65625L53.375 12.125L58.5938 14.3125Z" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M84.5 9C84.5 6.6875 83.25 4.5625 81.25 3.375C79.2188 2.21875 76.75 2.21875 74.75 3.375C72.7188 4.5625 71.5 6.6875 71.5 9C71.5 11.3438 72.7188 13.4688 74.75 14.6562C76.75 15.8125 79.2188 15.8125 81.25 14.6562C83.25 13.4688 84.5 11.3438 84.5 9ZM70 9C70 6.15625 71.5 3.53125 74 2.09375C76.4688 0.65625 79.5 0.65625 82 2.09375C84.4688 3.53125 86 6.15625 86 9C86 11.875 84.4688 14.5 82 15.9375C79.5 17.375 76.4688 17.375 74 15.9375C71.5 14.5 70 11.875 70 9ZM74.0625 10.8125C73.9375 10.4062 74.2812 10 74.75 10H81.375C81.8125 10 82.1875 10.4062 82.0312 10.8125C81.5312 12.5312 79.9375 13.75 78.0625 13.75C76.1875 13.75 74.5938 12.5312 74.0625 10.8125ZM74.5 7C74.5 6.46875 74.9375 6 75.5 6C76.0625 6 76.5 6.46875 76.5 7C76.5 7.5625 76.0625 8 75.5 8C74.9375 8 74.5 7.5625 74.5 7ZM79.6875 7.6875C79.4375 7.9375 79.0625 7.96875 78.7812 7.71875C78.5312 7.46875 78.5312 7.09375 78.7812 6.84375C79.2188 6.34375 79.875 6.125 80.4688 6.125C81.0938 6.125 81.7188 6.34375 82.1875 6.84375C82.4062 7.09375 82.4062 7.46875 82.1562 7.71875C81.9062 7.96875 81.5 7.9375 81.2812 7.6875C81.0938 7.5 80.8125 7.375 80.4688 7.375C80.1562 7.375 79.8438 7.5 79.6875 7.6875Z" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M7 29C5.5625 29 4.25 28.25 3.53125 27C2.8125 25.7812 2.8125 24.25 3.53125 23C4.25 21.7812 5.5625 21 7 21C8.40625 21 9.71875 21.7812 10.4375 23C11.1562 24.25 11.1562 25.7812 10.4375 27C9.71875 28.25 8.40625 29 7 29ZM5.5625 30.5H8.40625C11.5 30.5 14 33 14 36.0938C14 36.5938 13.5625 37 13.0625 37H0.90625C0.40625 37 0 36.5938 0 36.0938C0 33 2.46875 30.5 5.5625 30.5Z" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M36.7188 21.6875L37.3125 22.2812C38 22.9688 38 24.0625 37.3125 24.75L36.375 25.6875L33.3125 22.625L34.25 21.6875C34.9375 21 36.0312 21 36.7188 21.6875ZM27.375 28.5625L32.5938 23.3438L35.6562 26.4062L30.4375 31.625C30.25 31.8125 30 31.9688 29.75 32.0625L26.9688 32.9688C26.7188 33.0625 26.4062 33 26.2188 32.7812C26 32.5938 25.9375 32.2812 26.0312 32.0312L26.9375 29.25C27.0312 29 27.1875 28.75 27.375 28.5625ZM25 23H28C28.5312 23 29 23.4688 29 24C29 24.5625 28.5312 25 28 25H25C24.4375 25 24 25.4688 24 26V34C24 34.5625 24.4375 35 25 35H33C33.5312 35 34 34.5625 34 34V31C34 30.4688 34.4375 30 35 30C35.5312 30 36 30.4688 36 31V34C36 35.6562 34.6562 37 33 37H25C23.3438 37 22 35.6562 22 34V26C22 24.3438 23.3438 23 25 23Z" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M61.5625 21.1875C61.875 21.4062 62.0312 21.7812 61.9688 22.1562L59.9688 35.1562C59.9375 35.4688 59.75 35.7188 59.4688 35.875C59.2188 36.0312 58.875 36.0625 58.5938 35.9375L54.875 34.375L52.7188 36.6875C52.4375 37 52 37.0938 51.625 36.9375C51.25 36.8125 51 36.4375 51 36V33.4062C51 33.2812 51.0312 33.1562 51.125 33.0625L56.3438 27.3438C56.5312 27.1562 56.5312 26.8438 56.3438 26.6562C56.1562 26.4688 55.8438 26.4688 55.6562 26.6562L49.3125 32.2812L46.5312 30.9062C46.2188 30.75 46 30.4062 46 30.0312C45.9688 29.6875 46.1562 29.3438 46.5 29.1562L60.5 21.1562C60.8125 20.9688 61.25 20.9688 61.5625 21.1875Z" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M78 37C75.125 37 72.5 35.5 71.0625 33C69.625 30.5312 69.625 27.5 71.0625 25C72.5 22.5312 75.125 21 78 21C80.8438 21 83.4688 22.5312 84.9062 25C86.3438 27.5 86.3438 30.5312 84.9062 33C83.4688 35.5 80.8438 37 78 37ZM73 30.8438C73.5938 32.9375 75.5938 34.5 78 34.5C80.375 34.5 82.375 32.9375 82.9688 30.8438C83.0938 30.4062 82.7188 30 82.2812 30H73.6875C73.25 30 72.9062 30.4062 73 30.8438ZM74.5 27C74.5 27.5625 74.9375 28 75.5 28C76.0625 28 76.5 27.5625 76.5 27C76.5 26.4688 76.0625 26 75.5 26C74.9375 26 74.5 26.4688 74.5 27ZM79.375 27.8125C79.9375 27.0938 81.0312 27.0938 81.5938 27.8125C81.75 28.0312 82.0625 28.0938 82.2812 27.9062C82.5 27.75 82.5625 27.4375 82.375 27.2188C81.4375 25.9375 79.5312 25.9375 78.5938 27.2188C78.4062 27.4375 78.4688 27.75 78.6875 27.9062C78.9062 28.0938 79.2188 28.0312 79.375 27.8125Z" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

docs/_includes/svgs/image-comparer.njk

@@ -0,0 +1,9 @@
+<svg width="96" height="64" viewBox="0 0 96 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1H84C90.0751 1 95 5.92487 95 12V52C95 58.0751 90.0751 63 84 63H12C5.92487 63 1 58.0751 1 52V12C1 5.92487 5.92487 1 12 1Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M12 52L24 39L36 52L48 37" stroke="var(--wa-color-brand-fill-loud)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M48 37L60 22L84 52" stroke="var(--wa-color-neutral-border-loud)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="24" cy="20" r="7" stroke="var(--wa-color-brand-fill-loud)" stroke-width="2"/>
+<line x1="48" y1="-4.37114e-08" x2="48" y2="62" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<circle cx="48" cy="32" r="12" fill="var(--wa-color-neutral-fill-normal)"/>
+<path d="M45.1875 34.55H46.3125C46.8281 34.55 47.25 34.9719 47.25 35.4875V36.6125C47.25 37.1516 46.8281 37.55 46.3125 37.55H45.1875C44.6484 37.55 44.25 37.1516 44.25 36.6125V35.4875C44.25 34.9719 44.6484 34.55 45.1875 34.55ZM49.6875 34.55H50.8125C51.3281 34.55 51.75 34.9719 51.75 35.4875V36.6125C51.75 37.1516 51.3281 37.55 50.8125 37.55H49.6875C49.1484 37.55 48.75 37.1516 48.75 36.6125V35.4875C48.75 34.9719 49.1484 34.55 49.6875 34.55ZM45.1875 33.8C44.6484 33.8 44.25 33.4016 44.25 32.8625V31.7375C44.25 31.2219 44.6484 30.8 45.1875 30.8H46.3125C46.8281 30.8 47.25 31.2219 47.25 31.7375V32.8625C47.25 33.4016 46.8281 33.8 46.3125 33.8H45.1875ZM49.6875 30.8H50.8125C51.3281 30.8 51.75 31.2219 51.75 31.7375V32.8625C51.75 33.4016 51.3281 33.8 50.8125 33.8H49.6875C49.1484 33.8 48.75 33.4016 48.75 32.8625V31.7375C48.75 31.2219 49.1484 30.8 49.6875 30.8ZM45.1875 30.05C44.6484 30.05 44.25 29.6516 44.25 29.1125V27.9875C44.25 27.4719 44.6484 27.05 45.1875 27.05H46.3125C46.8281 27.05 47.25 27.4719 47.25 27.9875V29.1125C47.25 29.6516 46.8281 30.05 46.3125 30.05H45.1875ZM49.6875 27.05H50.8125C51.3281 27.05 51.75 27.4719 51.75 27.9875V29.1125C51.75 29.6516 51.3281 30.05 50.8125 30.05H49.6875C49.1484 30.05 48.75 29.6516 48.75 29.1125V27.9875C48.75 27.4719 49.1484 27.05 49.6875 27.05Z" fill="var(--wa-color-neutral-on-normal)"/>
+</svg>

docs/_includes/svgs/input.njk

@@ -0,0 +1,4 @@
+<svg width="112" height="40" viewBox="0 0 112 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 9H106C108.761 9 111 11.2386 111 14V34C111 36.7614 108.761 39 106 39H6C3.23857 39 1 36.7614 1 34V14C1 11.2386 3.23858 9 6 9Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect width="48" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

docs/_includes/svgs/layout/cluster.njk

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

docs/_includes/svgs/layout/flank.njk

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

docs/_includes/svgs/layout/frame.njk

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

docs/_includes/svgs/layout/grid.njk

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

docs/_includes/svgs/layout/split.njk

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

docs/_includes/svgs/layout/stack.njk

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

docs/_includes/svgs/menu.njk

@@ -0,0 +1,11 @@
+<svg width="64" height="72" viewBox="0 0 64 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1H58C60.7614 1 63 3.23858 63 6V66C63 68.7614 60.7614 71 58 71H6C3.23858 71 1 68.7614 1 66V6C1 3.23858 3.23858 1 6 1Z" fill="var(--wa-color-surface-default)"/>
+<path d="M6 1H58C60.7614 1 63 3.23858 63 6V66C63 68.7614 60.7614 71 58 71H6C3.23858 71 1 68.7614 1 66V6C1 3.23858 3.23858 1 6 1Z" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M17 16L19.7344 13.2656C20.3008 12.6992 21.1797 12.6992 21.7461 13.2656C21.8828 13.4023 21.8828 13.6172 21.7461 13.7539L16.2188 19.2812C16.3164 19.5352 16.375 19.7891 16.375 20.0625C16.375 21.2734 15.3789 22.25 14.1875 22.25C12.9766 22.25 12 21.2734 12 20.0625C12 18.8711 12.9766 17.875 14.1875 17.875C14.4609 17.875 14.7148 17.9336 14.9688 18.0312L15.75 17.25L14.9688 16.4883C14.7148 16.5859 14.4609 16.625 14.1875 16.625C12.9766 16.625 12 15.6484 12 14.4375C12 13.2461 12.9766 12.25 14.1875 12.25C15.3789 12.25 16.375 13.2461 16.375 14.4375C16.375 14.7305 16.3164 14.9844 16.2188 15.2383L17 16ZM17.4297 18.9492L18.6797 17.6992L21.7461 20.7656C21.8828 20.9023 21.8828 21.1172 21.7461 21.2539C21.1797 21.8203 20.3008 21.8203 19.7344 21.2539L17.4297 18.9492ZM13.25 14.4375C13.25 14.7891 13.4258 15.082 13.7188 15.2578C13.9922 15.4336 14.3633 15.4336 14.6562 15.2578C14.9297 15.082 15.125 14.7891 15.125 14.4375C15.125 14.1055 14.9297 13.8125 14.6562 13.6367C14.3633 13.4609 13.9922 13.4609 13.7188 13.6367C13.4258 13.8125 13.25 14.1055 13.25 14.4375ZM14.1875 19.125C13.8359 19.125 13.543 19.3203 13.3672 19.5938C13.1914 19.8867 13.1914 20.2578 13.3672 20.5312C13.543 20.8242 13.8359 21 14.1875 21C14.5195 21 14.8125 20.8242 14.9883 20.5312C15.1641 20.2578 15.1641 19.8867 14.9883 19.5938C14.8125 19.3203 14.5195 19.125 14.1875 19.125Z" fill="var(--wa-color-neutral-border-loud)"/>
+<rect x="28" y="15" width="24" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M17.625 34V32.75H18.875V34C18.875 34.7031 18.3086 35.25 17.625 35.25H13.25C12.5469 35.25 12 34.7031 12 34V29.625C12 28.9414 12.5469 28.375 13.25 28.375H14.5V29.625H13.25V34H17.625ZM16.375 32.125C15.6719 32.125 15.125 31.5781 15.125 30.875V26.5C15.125 25.8164 15.6719 25.25 16.375 25.25H20.75C21.4336 25.25 22 25.8164 22 26.5V30.875C22 31.5781 21.4336 32.125 20.75 32.125H16.375Z" fill="var(--wa-color-neutral-border-loud)"/>
+<rect x="28" y="28" width="24" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<line y1="42" x2="64" y2="42" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M14.6367 51.6016C14.7344 51.3867 14.9492 51.25 15.1836 51.25H17.5469C17.7812 51.25 17.9961 51.3867 18.0938 51.6016L18.25 51.875H20.125C20.457 51.875 20.75 52.168 20.75 52.5C20.75 52.8516 20.457 53.125 20.125 53.125H12.625C12.2734 53.125 12 52.8516 12 52.5C12 52.168 12.2734 51.875 12.625 51.875H14.5L14.6367 51.6016ZM20.125 53.75L19.6953 60.3711C19.6758 60.8789 19.2656 61.25 18.7578 61.25H13.9727C13.4648 61.25 13.0547 60.8789 13.0352 60.3711L12.625 53.75H20.125Z" fill="var(--wa-color-red-60)"/>
+<rect x="28" y="54" width="24" height="4" rx="2" fill="var(--wa-color-red-60)"/>
+</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/popup.njk

@@ -0,0 +1,4 @@
+<svg width="66" height="65" viewBox="0 0 66 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 40C1 36.6863 3.68629 34 7 34H59C62.3137 34 65 36.6863 65 40V58C65 61.3137 62.3137 64 59 64H7C3.68629 64 1 61.3137 1 58V40Z" fill="none" stroke="var(--wa-color-surface-border)" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 6"/>
+<path d="M1 6C1 2.68629 3.68629 0 7 0H59C62.3137 0 65 2.68629 65 6V26C65 29.3137 62.3137 32 59 32H7C3.68629 32 1 29.3137 1 26V6Z" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

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/progress-bar.njk

@@ -0,0 +1,4 @@
+<svg width="96" height="12" viewBox="0 0 96 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="96" height="12" rx="6" fill="var(--wa-color-neutral-fill-normal)"/>
+<path d="M0 6C0 2.68629 2.68629 0 6 0H64V12H6C2.68629 12 0 9.31371 0 6V6Z" fill="var(--wa-color-brand-fill-loud)"/>
+</svg>

docs/_includes/svgs/progress-ring.njk

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="22" cy="22" r="22" transform="matrix(-1 0 0 1 46 2)" stroke="var(--wa-color-neutral-fill-normal)" stroke-width="4"/>
+<path d="M2.7549 18.3074C-0.389035 30.0407 6.57405 42.1012 18.3074 45.2451C30.0407 48.389 42.1012 41.4259 45.2451 29.6926C48.389 17.9593 41.4259 5.89884 29.6926 2.7549C27.7905 2.24524 25.8799 2.00119 24 2" stroke="var(--wa-color-brand-fill-loud)" stroke-width="4" stroke-linecap="round"/>
+</svg>

docs/_includes/svgs/qr-code.njk

@@ -0,0 +1,12 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="27.5" y="1.5" width="19" height="19" rx="6" stroke="var(--wa-color-neutral-border-loud)" stroke-width="3"/>
+<rect x="1.5" y="1.5" width="19" height="19" rx="6" stroke="var(--wa-color-neutral-border-loud)" stroke-width="3"/>
+<rect x="1.5" y="27.5" width="19" height="19" rx="6" stroke="var(--wa-color-neutral-border-loud)" stroke-width="3"/>
+<rect x="33" y="7" width="8" height="8" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<rect x="7" y="7" width="8" height="8" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<rect x="7" y="33" width="8" height="8" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M26 28C26 26.8954 26.8954 26 28 26H34V34H26V28Z" fill="var(--wa-color-neutral-border-normal)"/>
+<path d="M34 26H40C41.1046 26 42 26.8954 42 28V32C42 33.1046 41.1046 34 40 34H34V26Z" fill="var(--wa-color-neutral-border-normal)"/>
+<path d="M26 34H34V40C34 41.1046 33.1046 42 32 42H28C26.8954 42 26 41.1046 26 40V34Z" fill="var(--wa-color-neutral-border-normal)"/>
+<rect x="38" y="38" width="8" height="8" rx="2" fill="var(--wa-color-neutral-border-normal)"/>
+</svg>

docs/_includes/svgs/radio-group.njk

@@ -0,0 +1,7 @@
+<svg width="56" height="36" viewBox="0 0 56 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="24" y="6" width="32" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<rect x="24" y="26" width="32" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<circle cx="8" cy="8" r="7" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<circle cx="8" cy="28" r="7" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-brand-fill-loud)" stroke-width="2"/>
+<circle cx="8" cy="28" r="4" fill="var(--wa-color-brand-fill-loud)"/>
+</svg>

docs/_includes/svgs/rating.njk

@@ -0,0 +1,7 @@
+<svg width="99" height="16" viewBox="0 0 99 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.12156 0.562016L11.1511 4.71469L15.616 5.37038C15.9907 5.43283 16.3029 5.68261 16.4278 6.05729C16.5527 6.40074 16.459 6.80664 16.178 7.05643L12.9308 10.2724L13.7114 14.831C13.7738 15.2057 13.6177 15.5803 13.3055 15.7989C12.9932 16.0487 12.5873 16.0487 12.2439 15.8926L8.24731 13.7382L4.21953 15.8926C3.9073 16.0487 3.5014 16.0487 3.18917 15.7989C2.87694 15.5803 2.72082 15.2057 2.78327 14.831L3.53262 10.2724L0.285415 7.05643C0.0356298 6.80664 -0.0580396 6.40074 0.0356298 6.05729C0.160522 5.68261 0.472754 5.43283 0.847431 5.37038L5.34356 4.71469L7.34184 0.562016C7.49796 0.218562 7.84141 0 8.24731 0C8.62199 0 8.96545 0.218562 9.12156 0.562016Z" fill="var(--wa-color-yellow-70)"/>
+<path d="M29.6036 0.562016L31.6331 4.71469L36.098 5.37038C36.4727 5.43283 36.7849 5.68261 36.9098 6.05729C37.0347 6.40074 36.9411 6.80664 36.66 7.05643L33.4128 10.2724L34.1934 14.831C34.2559 15.2057 34.0998 15.5803 33.7875 15.7989C33.4753 16.0487 33.0694 16.0487 32.7259 15.8926L28.7294 13.7382L24.7016 15.8926C24.3894 16.0487 23.9835 16.0487 23.6712 15.7989C23.359 15.5803 23.2029 15.2057 23.2653 14.831L24.0147 10.2724L20.7675 7.05643C20.5177 6.80664 20.424 6.40074 20.5177 6.05729C20.6426 5.68261 20.9548 5.43283 21.3295 5.37038L25.8256 4.71469L27.8239 0.562016C27.98 0.218562 28.3235 0 28.7294 0C29.104 0 29.4475 0.218562 29.6036 0.562016Z" fill="var(--wa-color-yellow-70)"/>
+<path d="M50.0857 0.562016L52.1152 4.71469L56.5801 5.37038C56.9548 5.43283 57.267 5.68261 57.3919 6.05729C57.5168 6.40074 57.4231 6.80664 57.1421 7.05643L53.8949 10.2724L54.6755 14.831C54.7379 15.2057 54.5818 15.5803 54.2696 15.7989C53.9573 16.0487 53.5514 16.0487 53.208 15.8926L49.2114 13.7382L45.1836 15.8926C44.8714 16.0487 44.4655 16.0487 44.1533 15.7989C43.841 15.5803 43.6849 15.2057 43.7474 14.831L44.4967 10.2724L41.2495 7.05643C40.9997 6.80664 40.9061 6.40074 40.9997 6.05729C41.1246 5.68261 41.4369 5.43283 41.8115 5.37038L46.3077 4.71469L48.306 0.562016C48.4621 0.218562 48.8055 0 49.2114 0C49.5861 0 49.9296 0.218562 50.0857 0.562016Z" fill="var(--wa-color-yellow-70)"/>
+<path d="M70.5677 0.562016L72.5972 4.71469L77.0621 5.37038C77.4368 5.43283 77.749 5.68261 77.8739 6.05729C77.9988 6.40074 77.9052 6.80664 77.6242 7.05643L74.3769 10.2724L75.1575 14.831C75.22 15.2057 75.0639 15.5803 74.7516 15.7989C74.4394 16.0487 74.0335 16.0487 73.69 15.8926L69.6935 13.7382L65.6657 15.8926C65.3535 16.0487 64.9476 16.0487 64.6353 15.7989C64.3231 15.5803 64.167 15.2057 64.2294 14.831L64.9788 10.2724L61.7316 7.05643C61.4818 6.80664 61.3881 6.40074 61.4818 6.05729C61.6067 5.68261 61.9189 5.43283 62.2936 5.37038L66.7897 4.71469L68.788 0.562016C68.9441 0.218562 69.2876 0 69.6935 0C70.0682 0 70.4116 0.218562 70.5677 0.562016Z" fill="var(--wa-color-yellow-70)"/>
+<path d="M91.0498 0.562016L93.0793 4.71469L97.5442 5.37038C97.9189 5.43283 98.2311 5.68261 98.356 6.05729C98.4809 6.40074 98.3872 6.80664 98.1062 7.05643L94.859 10.2724L95.6396 14.831C95.702 15.2057 95.5459 15.5803 95.2337 15.7989C94.9214 16.0487 94.5155 16.0487 94.1721 15.8926L90.1755 13.7382L86.1477 15.8926C85.8355 16.0487 85.4296 16.0487 85.1174 15.7989C84.8052 15.5803 84.649 15.2057 84.7115 14.831L85.4608 10.2724L82.2136 7.05643C81.9638 6.80664 81.8702 6.40074 81.9638 6.05729C82.0887 5.68261 82.401 5.43283 82.7756 5.37038L87.2718 4.71469L89.2701 0.562016C89.4262 0.218562 89.7696 0 90.1755 0C90.5502 0 90.8937 0.218562 91.0498 0.562016Z" fill="var(--wa-color-neutral-fill-normal)"/>
+</svg>

docs/_includes/svgs/relative-time.njk

@@ -0,0 +1,4 @@
+<svg width="113" height="12" viewBox="0 0 113 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.7384 2.75C3.24622 2.75 2.75403 2.96094 2.40247 3.3125L1.6759 4.03906C1.39465 4.34375 0.902466 4.34375 0.621216 4.03906C0.316528 3.75781 0.316528 3.26562 0.621216 2.98438L1.34778 2.25781C1.98059 1.625 2.84778 1.25 3.7384 1.25C5.63684 1.25 7.16028 2.77344 7.16028 4.67188C7.16028 5.5625 6.78528 6.42969 6.15247 7.0625L2.96497 10.25H7.16028C7.55872 10.25 7.91028 10.6016 7.91028 11C7.91028 11.4219 7.55872 11.75 7.16028 11.75H1.16028C0.855591 11.75 0.574341 11.5859 0.457153 11.3047C0.339966 11.0234 0.410278 10.6953 0.621216 10.4844L5.09778 6.00781C5.44934 5.65625 5.66028 5.16406 5.66028 4.67188C5.66028 3.61719 4.79309 2.75 3.7384 2.75ZM17.679 1.29688C18.0775 1.15625 18.4993 1.36719 18.6634 1.74219L21.2415 8.63281L23.2337 1.78906C23.3275 1.48438 23.6087 1.25 23.9603 1.25C24.2884 1.25 24.5697 1.48438 24.6634 1.78906L26.6556 8.63281L29.2572 1.74219C29.3978 1.36719 29.8197 1.15625 30.2181 1.32031C30.5931 1.46094 30.804 1.88281 30.64 2.28125L27.265 11.2812C27.1712 11.5859 26.8665 11.7734 26.5384 11.75C26.2103 11.75 25.9525 11.5391 25.8587 11.2109L23.9603 4.69531L22.0384 11.2109C21.9447 11.5391 21.6634 11.75 21.3587 11.75C21.0306 11.7734 20.7259 11.5859 20.6322 11.2812L17.2572 2.28125C17.0931 1.88281 17.304 1.46094 17.679 1.29688ZM34.6103 1.25H39.8603C40.2587 1.25 40.6103 1.60156 40.6103 2C40.6103 2.42188 40.2587 2.75 39.8603 2.75H34.6103V5.75H38.3603C38.7587 5.75 39.1103 6.10156 39.1103 6.5C39.1103 6.92188 38.7587 7.25 38.3603 7.25H34.6103V10.25H39.8603C40.2587 10.25 40.6103 10.6016 40.6103 11C40.6103 11.4219 40.2587 11.75 39.8603 11.75H34.6103C33.7665 11.75 33.1103 11.0938 33.1103 10.25V6.5V2.75C33.1103 1.92969 33.7665 1.25 34.6103 1.25ZM44.5103 1.25H49.7603C50.1587 1.25 50.5103 1.60156 50.5103 2C50.5103 2.42188 50.1587 2.75 49.7603 2.75H44.5103V5.75H48.2603C48.6587 5.75 49.0103 6.10156 49.0103 6.5C49.0103 6.92188 48.6587 7.25 48.2603 7.25H44.5103V10.25H49.7603C50.1587 10.25 50.5103 10.6016 50.5103 11C50.5103 11.4219 50.1587 11.75 49.7603 11.75H44.5103C43.6665 11.75 43.0103 11.0938 43.0103 10.25V6.5V2.75C43.0103 1.92969 43.6665 1.25 44.5103 1.25ZM60.1993 2.53906L56.9884 5.84375L60.2697 10.5781C60.504 10.9297 60.4103 11.3984 60.0822 11.6328C59.7306 11.8672 59.2618 11.7734 59.0275 11.4453L55.9103 6.94531L54.4103 8.49219V11C54.4103 11.4219 54.0587 11.75 53.6603 11.75C53.2384 11.75 52.9103 11.4219 52.9103 11V8.1875V2C52.9103 1.60156 53.2384 1.25 53.6603 1.25C54.0587 1.25 54.4103 1.60156 54.4103 2V6.33594L55.465 5.23438L59.1212 1.48438C59.4025 1.20312 59.8712 1.17969 60.1759 1.48438C60.4806 1.76562 60.4806 2.23438 60.1993 2.53906ZM65.1306 2.98438C64.6618 3.17188 64.404 3.5 64.3337 3.89844C64.2634 4.22656 64.3103 4.4375 64.3806 4.60156C64.4509 4.74219 64.5681 4.88281 64.7556 5.02344C65.2243 5.35156 65.904 5.53906 66.7478 5.79688C66.7712 5.79688 66.7947 5.79688 66.8181 5.82031C67.5915 6.03125 68.5056 6.28906 69.1853 6.75781C69.5603 7.01562 69.8884 7.36719 70.0993 7.8125C70.3103 8.28125 70.3572 8.79688 70.24 9.38281C70.0759 10.3672 69.4197 11.0469 68.5759 11.4219C67.7322 11.7734 66.7009 11.8438 65.6697 11.6797C65.1072 11.5859 64.1931 11.2812 63.6072 11.0703C63.49 11.0469 63.3962 11 63.3025 10.9766C62.9275 10.8359 62.7165 10.4141 62.8337 10.0156C62.9743 9.64062 63.3962 9.42969 63.7947 9.54688C63.9118 9.59375 64.029 9.61719 64.1697 9.66406C64.7556 9.875 65.4822 10.1328 65.904 10.2031C66.7712 10.3203 67.4743 10.25 67.9665 10.0391C68.4587 9.82812 68.6931 9.52344 68.7634 9.125C68.8337 8.79688 68.7868 8.5625 68.7165 8.42188C68.6697 8.28125 68.529 8.14062 68.3415 8C67.8728 7.67188 67.1931 7.48438 66.3493 7.22656C66.3259 7.22656 66.3025 7.22656 66.279 7.20312C65.5056 6.99219 64.5915 6.73438 63.9118 6.26562C63.5368 6.00781 63.2087 5.65625 62.9978 5.21094C62.8103 4.74219 62.7634 4.22656 62.8572 3.64062L63.5837 3.78125L62.8572 3.64062C63.0212 2.65625 63.6775 1.97656 64.5212 1.60156C65.365 1.25 66.3962 1.17969 67.4275 1.34375C67.7322 1.39062 68.6697 1.57812 68.9978 1.67188C69.3962 1.76562 69.6306 2.1875 69.5134 2.58594C69.4197 2.98438 68.9978 3.21875 68.5993 3.10156C68.3415 3.03125 67.4743 2.86719 67.1931 2.82031L67.3103 2.09375L67.1931 2.82031C66.3259 2.70312 65.6228 2.77344 65.1306 2.98438Z" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M82.59 1.71875L85.4025 8.46875L86.34 10.7188C86.504 11.0938 86.3165 11.5391 85.9415 11.7031C85.5665 11.8672 85.1212 11.6797 84.9572 11.3047L84.2072 9.5H79.59L78.84 11.3047C78.6759 11.6797 78.254 11.8672 77.8556 11.7031C77.4806 11.5391 77.2931 11.0938 77.4572 10.7188L78.3947 8.46875L81.2072 1.71875C81.3243 1.4375 81.6056 1.25 81.9103 1.25C82.1915 1.25 82.4728 1.4375 82.59 1.71875ZM83.5978 8L81.9103 3.96875L80.2228 8H83.5978ZM94.0603 2.75C91.9743 2.75 90.3103 4.4375 90.3103 6.5C90.3103 8.58594 91.9743 10.25 94.0603 10.25C95.865 10.25 97.3884 8.96094 97.7165 7.25H94.8103C94.3884 7.25 94.0603 6.92188 94.0603 6.5C94.0603 6.10156 94.3884 5.75 94.8103 5.75H98.1853C98.7712 5.75 99.3337 6.26562 99.2868 6.94531C99.0525 9.64062 96.8025 11.75 94.0603 11.75C91.154 11.75 88.8103 9.40625 88.8103 6.5C88.8103 3.61719 91.154 1.25 94.0603 1.25C95.3962 1.25 96.615 1.76562 97.5525 2.58594C97.8572 2.86719 97.8806 3.33594 97.5993 3.66406C97.3415 3.96875 96.8493 3.99219 96.5447 3.71094C95.8884 3.125 95.0212 2.75 94.0603 2.75ZM106.96 2.75C105.601 2.75 104.382 3.47656 103.702 4.625C103.023 5.79688 103.023 7.22656 103.702 8.375C104.382 9.54688 105.601 10.25 106.96 10.25C108.296 10.25 109.515 9.54688 110.195 8.375C110.874 7.22656 110.874 5.79688 110.195 4.625C109.515 3.47656 108.296 2.75 106.96 2.75ZM112.21 6.5C112.21 8.39844 111.202 10.1094 109.585 11.0469C107.945 12.0078 105.952 12.0078 104.335 11.0469C102.695 10.1094 101.71 8.39844 101.71 6.5C101.71 4.625 102.695 2.91406 104.335 1.97656C105.952 1.01562 107.945 1.01562 109.585 1.97656C111.202 2.91406 112.21 4.625 112.21 6.5Z" fill="var(--wa-color-neutral-on-quiet)"/>
+</svg>

docs/_includes/svgs/select.njk

@@ -0,0 +1,6 @@
+<svg width="112" height="40" viewBox="0 0 112 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 9H106C108.761 9 111 11.2386 111 14V34C111 36.7614 108.761 39 106 39H6C3.23857 39 1 36.7614 1 34V14C1 11.2386 3.23858 9 6 9Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M93.4609 28.0391L88.9609 23.5391C88.6562 23.2578 88.6562 22.7656 88.9609 22.4844C89.2422 22.1797 89.7344 22.1797 90.0156 22.4844L94 26.4453L97.9609 22.4844C98.2422 22.1797 98.7344 22.1797 99.0156 22.4844C99.3203 22.7656 99.3203 23.2578 99.0156 23.5391L94.5156 28.0391C94.2344 28.3438 93.7422 28.3438 93.4609 28.0391Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<rect width="48" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<rect x="12" y="22" width="48" height="4" rx="2" fill="var(--wa-color-neutral-fill-normal)"/>
+</svg>

docs/_includes/svgs/skeleton.njk

@@ -0,0 +1,6 @@
+<svg width="96" height="40" viewBox="0 0 96 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="12" fill="var(--wa-color-neutral-fill-normal)"/>
+<rect x="32" width="64" height="8" rx="4" fill="var(--wa-color-neutral-fill-normal)"/>
+<rect y="32" width="96" height="8" rx="4" fill="var(--wa-color-neutral-fill-normal)"/>
+<rect x="32" y="16" width="64" height="8" rx="4" fill="var(--wa-color-neutral-fill-normal)"/>
+</svg>

docs/_includes/svgs/slider.njk

@@ -0,0 +1,4 @@
+<svg width="96" height="20" viewBox="0 0 96 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="6" width="96" height="8" rx="4" fill="var(--wa-color-neutral-fill-normal)"/>
+<rect x="61" y="1" width="18" height="18" rx="9" fill="var(--wa-color-brand-fill-loud)" stroke="var(--wa-color-surface-default)" stroke-width="2"/>
+</svg>

docs/_includes/svgs/spinner.njk

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="14" cy="14" r="12" stroke="var(--wa-color-surface-border)" stroke-width="4"/>
+<path d="M2.41177 17.1051C0.69689 10.7051 4.49494 4.12664 10.8949 2.41176C11.9324 2.13377 12.9746 2.00065 14 2" stroke="var(--wa-color-brand-fill-loud)" stroke-width="4" stroke-linecap="round"/>
+</svg>

docs/_includes/svgs/split-panel.njk

@@ -0,0 +1,5 @@
+<svg width="96" height="64" viewBox="0 0 96 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1H84C90.0751 1 95 5.92487 95 12V52C95 58.0751 90.0751 63 84 63H12C5.92487 63 1 58.0751 1 52V12C1 5.92487 5.92487 1 12 1Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<line x1="49" y1="-4.37114e-08" x2="49" y2="64" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<line x1="96" y1="32" x2="48" y2="32" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+</svg>

docs/_includes/svgs/switch.njk

@@ -0,0 +1,6 @@
+<svg width="28" height="36" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="26" height="14" rx="7" stroke="var(--wa-color-neutral-border-loud)" stroke-width="2"/>
+<rect y="20" width="28" height="16" rx="8" fill="var(--wa-color-brand-fill-loud)"/>
+<circle cx="8" cy="8" r="4" fill="var(--wa-color-neutral-border-loud)"/>
+<circle cx="20" cy="28" r="4" fill="var(--wa-color-surface-default)"/>
+</svg>

docs/_includes/svgs/tab-group.njk

@@ -0,0 +1,7 @@
+<svg width="114" height="17" viewBox="0 0 114 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="7" width="24" height="4" rx="2" fill="var(--wa-color-brand-fill-loud)"/>
+<rect x="45" width="24" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<rect x="81" width="24" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M113 16L1 16" stroke="var(--wa-color-surface-border)" stroke-width="2" stroke-linecap="round"/>
+<path d="M38 16L1 16" stroke="#0070EF" stroke-width="2" stroke-linecap="round"/>
+</svg>

docs/_includes/svgs/tag.njk

@@ -0,0 +1,6 @@
+<svg width="64" height="28" viewBox="0 0 64 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1H58C60.7614 1 63 3.23858 63 6V22C63 24.7614 60.7614 27 58 27H6C3.23858 27 1 24.7614 1 22V6C1 3.23858 3.23858 1 6 1Z" fill="var(--wa-color-neutral-fill-quiet)"/>
+<path d="M6 1H58C60.7614 1 63 3.23858 63 6V22C63 24.7614 60.7614 27 58 27H6C3.23858 27 1 24.7614 1 22V6C1 3.23858 3.23858 1 6 1Z" stroke="var(--wa-color-neutral-border-quiet)" stroke-width="2"/>
+<path d="M12.25 10.375C12.25 9.76562 12.7422 9.25 13.375 9.27344H16.8672C17.2656 9.27344 17.6406 9.41406 17.9219 9.69531L22.0469 13.8203C22.6328 14.4062 22.6328 15.3672 22.0469 15.9531L18.9297 19.0703C18.3438 19.6562 17.3828 19.6562 16.7969 19.0703L12.6719 14.9453C12.3906 14.6641 12.25 14.2891 12.25 13.8906V10.375ZM14.875 11.125C14.4531 11.125 14.125 11.4766 14.125 11.875C14.125 12.2969 14.4531 12.625 14.875 12.625C15.2734 12.625 15.625 12.2969 15.625 11.875C15.625 11.4766 15.2734 11.125 14.875 11.125Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<rect x="31" y="12" width="21" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

docs/_includes/svgs/textarea.njk

@@ -0,0 +1,6 @@
+<svg width="112" height="56" viewBox="0 0 112 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 9H106C108.761 9 111 11.2386 111 14V50C111 52.7614 108.761 55 106 55H6C3.23857 55 1 52.7614 1 50V14C1 11.2386 3.23858 9 6 9Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M104.293 51.2929L107.293 48.2929" stroke="var(--wa-color-neutral-on-quiet)" stroke-width="2" stroke-linecap="round"/>
+<path d="M99 51L107 43" stroke="var(--wa-color-neutral-on-quiet)" stroke-width="2" stroke-linecap="round"/>
+<rect width="48" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+</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/thumbnail-placeholder.njk

@@ -0,0 +1,5 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 7C1 3.68629 3.68629 1 7 1H43C46.3137 1 49 3.68629 49 7V43C49 46.3137 46.3137 49 43 49H7C3.68629 49 1 46.3137 1 43V7Z" stroke="var(--wa-color-surface-border)" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 6"/>
+<path d="M14.1566 18.7199L21.5367 16.7424C22.6036 16.4565 23.7003 17.0896 23.9862 18.1566L26.8463 28.8306C27.1322 29.8975 26.499 30.9942 25.4321 31.2801L18.052 33.2576C16.985 33.5435 15.8884 32.9103 15.6025 31.8434L12.7424 21.1694C12.4565 20.1024 13.0897 19.0057 14.1566 18.7199Z" stroke="var(--wa-color-neutral-border-normal)" stroke-width="2"/>
+<path d="M33.8449 16.3273H26.2045C23.9953 16.3273 22.2045 18.1181 22.2045 20.3273V31.3778C22.2045 33.587 23.9953 35.3778 26.2045 35.3778H33.8449C36.0541 35.3778 37.8449 33.587 37.8449 31.3778V20.3273C37.8449 18.1181 36.0541 16.3273 33.8449 16.3273Z" fill="var(--wa-color-neutral-border-normal)" stroke="var(--wa-color-neutral-fill-quiet)" stroke-width="2"/>
+</svg>

docs/_includes/svgs/tokens/borders.njk

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

docs/_includes/svgs/tokens/color.njk

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

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

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

docs/_includes/svgs/tokens/focus.njk

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

docs/_includes/svgs/tokens/shadows.njk

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

docs/_includes/svgs/tokens/space.njk

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

docs/_includes/svgs/tokens/transitions.njk

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