merged in next

.github/workflows/node.js.yml

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

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

.gitpod.yml

@@ -1,28 +0,0 @@
-tasks:
-  - init: npm install && npm run build
-    command: npm run start
-
-ports:
-  - port: 3001
-    onOpen: ignore
-  - port: 4000-4999
-    onOpen: open-preview
-
-github:
-  prebuilds:
-    # enable for the master/default branch (defaults to true)
-    master: true
-    # enable for all branches in this repo (defaults to false)
-    branches: true
-    # enable for pull requests coming from this repo (defaults to true)
-    pullRequests: true
-    # enable for pull requests coming from forks (defaults to false)
-    pullRequestsFromForks: true
-    # add a check to pull requests (defaults to true)
-    addCheck: true
-    # add a "Review in Gitpod" button as a comment to pull requests (defaults to false)
-    addComment: false
-    # add a "Review in Gitpod" button to the pull request's description (defaults to false)
-    addBadge: true
-    # add a label once the prebuild is ready to pull requests (defaults to false)
-    addLabel: true

CONTRIBUTING.md

@@ -2,4 +2,4 @@
 
 Before contributing, please review the contributions guidelines at:
 
-[shoelace.style/resources/contributing](https://shoelace.style/resources/contributing)
+[webawesome.com/docs/resources/contributing](https://webawesome.com/docs/resources/contributing)

README.md

@@ -11,11 +11,11 @@ Built by the folks behind [Font Awesome](https://fontawesome.com/).
 
 ---
 
-Documentation: [shoelace.style](https://shoelace.style)
+Documentation: [webawesome.com](https://webawesome.com)
 
-Source: [github.com/shoelace-style/shoelace](https://github.com/shoelace-style/shoelace)
+Source: [github.com/shoelace-style/webawesome](https://github.com/shoelace-style/webawesome)
 
-Twitter: [@shoelace_style](https://twitter.com/shoelace_style)
+Twitter: [@webawesomer](https://twitter.com/webawesomer)
 
 ---
 
@@ -25,7 +25,7 @@ Developers can use this documentation to learn how to build Web Awesome from sou
 
 **You don't need to do any of this to use Web Awesome!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Web Awesome.
 
-If that's not what you're trying to do, the [documentation website](https://shoelace.style) is where you want to be.
+If that's not what you're trying to do, the [documentation website](https://webawesome.com) is where you want to be.
 
 ### What are you using to build Web Awesome?
 
@@ -33,7 +33,7 @@ Components are built with [LitElement](https://lit-element.polymer-project.org/)
 
 ### Forking the Repo
 
-Start by [forking the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, then clone it locally and install dependencies.
+Start by [forking the repo](https://github.com/shoelace-style/webawesome/fork) on GitHub, then clone it locally and install dependencies.
 
 ```bash
 git clone https://github.com/YOUR_GITHUB_USERNAME/webawesome

cspell.json

@@ -18,7 +18,6 @@
     "CACHEABLE",
     "callout",
     "callouts",
-    "cdndir",
     "chatbubble",
     "checkmark",
     "Clippy",
@@ -55,6 +54,7 @@
     "exportmaps",
     "exportparts",
     "fieldsets",
+    "fontawesome",
     "formaction",
     "formdata",
     "formenctype",
@@ -109,7 +109,6 @@
     "noopener",
     "noreferrer",
     "novalidate",
-    "npmdir",
     "Numberish",
     "oklab",
     "oklch",
@@ -178,6 +177,7 @@
     "Vuejs",
     "WCAG",
     "webawesome",
+    "webawesomer",
     "WEBP",
     "Webpacker",
     "xmark"

custom-elements-manifest.js

@@ -1,13 +1,13 @@
 import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
-import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
+// import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
 import { parse } from 'comment-parser';
 import { pascalCase } from 'pascal-case';
 import fs from 'fs';
 
 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 }) => {
@@ -156,19 +156,19 @@ export default {
       referencesTemplate: (_, tag) => [
         {
           name: 'Documentation',
-          url: `https://shoelace.style/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://shoelace.style/components/${tag.replace('wa-', '')}`
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
         };
       }
     })

docs/.eleventy.js

@@ -11,12 +11,21 @@ import { searchPlugin } from './_utils/search.js';
 import { readFile } from 'fs/promises';
 import { outlinePlugin } from './_utils/outline.js';
 import { getComponents } from './_utils/manifest.js';
+import litPlugin from '@lit-labs/eleventy-plugin-lit';
+
 import process from 'process';
 
 const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
+const isAlpha = process.argv.includes('--alpha');
 const isDeveloping = process.argv.includes('--develop');
 
 export default function (eleventyConfig) {
+  // NOTE - alpha setting removes certain pages
+  if (isAlpha) {
+    eleventyConfig.ignores.add('**/components/page.md');
+    eleventyConfig.ignores.add('**/experimental/**');
+  }
+
   // Add template data
   eleventyConfig.addGlobalData('package', packageData);
 
@@ -33,9 +42,7 @@ export default function (eleventyConfig) {
 
   // Shortcodes - {% shortCode arg1, arg2 %}
   eleventyConfig.addShortcode('cdnUrl', location => {
-    return (
-      `https://cdn.jsdelivr.net/npm/@shoelace-style/webawesome@${packageData.version}/` + location.replace(/^\//, '')
-    );
+    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
   });
 
   // Helpers
@@ -101,6 +108,26 @@ export default function (eleventyConfig) {
     ])
   );
 
+  const omittedModules = [];
+
+  // problematic components:
+  // animation (breaks on navigation + ssr with Turbo)
+  // mutation-observer (why SSR this?)
+  // resize-observer (why SSR this?)
+  // tooltip (why SSR this?)
+
+  const componentModules = getComponents()
+    // .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
+    .map(component => {
+      const name = component.tagName.split(/wa-/)[1];
+      return `./dist/components/${name}/${name}.js`;
+    });
+
+  eleventyConfig.addPlugin(litPlugin, {
+    mode: 'worker',
+    componentModules
+  });
+
   // Build the search index
   eleventyConfig.addPlugin(
     searchPlugin({

docs/404.md

@@ -1,7 +1,7 @@
 ---
 title: Not Found
 description: Sorry, I couldn't find that.
-layout: page.njk
+layout: page
 permalink: 404.html
 noindex: true
 ---

docs/_includes/logo-simple.njk

@@ -1 +1,3 @@
-<svg class="logo" xmlns="http://www.w3.org/2000/svg" width="277" height="211" viewBox="0 0 277 211"><g fill="none" fill-rule="evenodd"><path fill="#F6894C" d="M159.275,20.7541243 C159.275,28.4927904 155.035053,35.2422161 148.749528,38.8106604 L193.9,72.6391714 L238.157213,58.6776414 C236.43401,55.6537326 235.45,52.1547058 235.45,48.42629 C235.45,36.96411 244.751396,27.6721657 256.225,27.6721657 C267.698604,27.6721657 277,36.96411 277,48.42629 C277,59.8883646 267.698604,69.1804143 256.225,69.1804143 C255.131246,69.1804143 254.057541,69.0960801 253.00969,68.9332096 L204.251886,193.411571 C200.096886,204.019762 189.858966,211 178.45659,211 L98.5434095,211 C87.1410343,211 76.9031143,204.019762 72.7481143,193.411571 L23.990205,68.9332096 C22.9423008,69.0960801 21.8685432,69.1804143 20.775,69.1804143 C9.30129067,69.1804143 0,59.8883646 0,48.42629 C0,36.96411 9.30129067,27.6721657 20.775,27.6721657 C32.2487093,27.6721657 41.55,36.96411 41.55,48.42629 C41.55,52.1547058 40.5658322,55.6537326 38.842945,58.6776414 L83.1,72.6391714 L128.250472,38.8106604 C121.964947,35.2422161 117.725,28.4927904 117.725,20.7541243 C117.725,9.29194428 127.026396,0 138.5,0 C149.973604,0 159.275,9.29194428 159.275,20.7541243 Z"/></g></svg>
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z" fill="var(--wa-brand-orange, #f36944)"/>
+</svg>

docs/_includes/search.njk

@@ -1,4 +1,4 @@
-<wa-dialog id="site-search" no-header>
+<wa-dialog id="site-search" no-header light-dismiss>
   <div id="site-search-container">
     {# Header #}
     <header>

docs/_includes/sidebar.njk

@@ -5,34 +5,14 @@
   <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>
 </ul>
 
-{# Experimental #}
-<h2>Experimental</h2>
-<ul>
-  <li><a href="/docs/experimental/themer">Theme Builder</a></li>
-  <li><a href="/docs/experimental/style-guide">Style Guide</a></li>
-  <li><a href="/docs/experimental/form-validation">Form Validation Styles</a></li>
-  <li><a href="/docs/experimental/sandbox">Sandbox</a></li>
-  <li style="margin-top: .5rem;"><wa-switch id="theme-toggle">Dark mode</wa-switch></li>
-  <script type="module">
-    // Temporary dark toggle
-    const toggle = document.getElementById('theme-toggle');
-    toggle.checked = document.documentElement.classList.contains('wa-theme-default-dark');
-
-    toggle.addEventListener('wa-change', () => {
-      document.documentElement.classList.toggle('wa-theme-default-dark');
-      localStorage.setItem('theme', toggle.checked ? 'dark' : 'light');
-    });
-  </script>
-</ul>
-
-
 {# Resources #}
 <h2>Resources</h2>
 <ul>
-  <li><a href="https://github.com/shoelace-style/shoelace/discussions">Help &amp; Support</a></li>
+  <li><a href="https://github.com/shoelace-style/webawesome-alpha/discussions" target="_blank">Help &amp; Support</a></li>
   <li><a href="/docs/resources/community">Community</a></li>
   <li><a href="/docs/resources/accessibility">Accessibility</a></li>
   <li><a href="/docs/resources/contributing">Contributing</a></li>
@@ -42,6 +22,9 @@
 {# Components #}
 <h2>Components</h2>
 <ul>
+  <li>
+    <a href="/docs/components/">Components Overview</a>
+  </li>
   <li>
     <a href="/docs/components/animated-image">Animated Image</a>
   </li>
@@ -144,12 +127,6 @@
   <li>
     <a href="/docs/components/mutation-observer">Mutation Observer</a>
   </li>
-  <li>
-    <a href="/docs/components/option">Option</a>
-  </li>
-  <li>
-    <a href="/docs/components/page">Page</a>
-  </li>
   <li>
     <a href="/docs/components/popup">Popup</a>
   </li>
@@ -187,6 +164,11 @@
   </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>
@@ -236,6 +218,9 @@
 {# Theming #}
 <h2>Theming</h2>
 <ul>
+  <li>
+    <a href="/docs/theming/">Theming Overview</a>
+  </li>
   <li>
     <a href="/docs/theming/color">Color</a>
   </li>
@@ -286,4 +271,4 @@
   <li><a href="/docs/patterns/blog">Non Profit</a></li>
   <li><a href="/docs/patterns/blog">Portfolio</a></li>
   <li><a href="/docs/patterns/blog">Product Landing</a></li>
-</ul>
+</ul>

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/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/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/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/range.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/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/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/theming/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/theming/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-violet-60)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32 30L16.8665 3.80072C21.5155 1.30813 26.714 0 32 0C37.286 0 42.4845 1.30813 47.1336 3.80072L32 30Z" fill="var(--wa-color-red-60)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.7329 31L48.8665 4.80072C53.3507 7.57868 57.0833 11.4244 59.7264 16C62.3694 20.5756 63.8352 25.7294 64 31L33.7329 31Z" fill="var(--wa-color-yellow-80)"/>
+</svg>

docs/_includes/svgs/theming/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/theming/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/theming/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/theming/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/theming/transitions.njk

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

docs/_includes/svgs/theming/typography.njk

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

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

@@ -0,0 +1,6 @@
+<svg width="48" height="54" viewBox="0 0 48 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6.80762C0 3.49391 2.68629 0.807617 6 0.807617H42C45.3137 0.807617 48 3.49391 48 6.80762V22.8076C48 26.1213 45.3137 28.8076 42 28.8076H6C2.68629 28.8076 0 26.1213 0 22.8076V6.80762Z" fill="var(--wa-tooltip-background-color)"/>
+<rect x="12" y="12.8076" width="24" height="4" rx="2" fill="var(--wa-tooltip-content-color)"/>
+<rect x="14.8076" y="26" width="13" height="13" rx="2" transform="rotate(-45 14.8076 26)" fill="var(--wa-tooltip-background-color)"/>
+<path d="M24.0156 53.1924C21.1406 53.1924 18.5156 51.6924 17.0781 49.1924C15.6406 46.7236 15.6406 43.6924 17.0781 41.1924C18.5156 38.7236 21.1406 37.1924 24.0156 37.1924C26.8594 37.1924 29.4844 38.7236 30.9219 41.1924C32.3594 43.6924 32.3594 46.7236 30.9219 49.1924C29.4844 51.6924 26.8594 53.1924 24.0156 53.1924ZM22.7656 47.6924C22.3281 47.6924 22.0156 48.0361 22.0156 48.4424C22.0156 48.8799 22.3281 49.1924 22.7656 49.1924H25.2656C25.6719 49.1924 26.0156 48.8799 26.0156 48.4424C26.0156 48.0361 25.6719 47.6924 25.2656 47.6924H25.0156V44.9424C25.0156 44.5361 24.6719 44.1924 24.2656 44.1924H22.7656C22.3281 44.1924 22.0156 44.5361 22.0156 44.9424C22.0156 45.3799 22.3281 45.6924 22.7656 45.6924H23.5156V47.6924H22.7656ZM24.0156 41.1924C23.4531 41.1924 23.0156 41.6611 23.0156 42.1924C23.0156 42.7549 23.4531 43.1924 24.0156 43.1924C24.5469 43.1924 25.0156 42.7549 25.0156 42.1924C25.0156 41.6611 24.5469 41.1924 24.0156 41.1924Z" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

docs/_includes/svgs/tree.njk

@@ -0,0 +1,9 @@
+<svg width="72" height="48" viewBox="0 0 72 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.46094 10.0391L0.960938 5.53906C0.65625 5.25781 0.65625 4.76562 0.960938 4.48438C1.24219 4.17969 1.73438 4.17969 2.01562 4.48438L6 8.44531L9.96094 4.48438C10.2422 4.17969 10.7344 4.17969 11.0156 4.48438C11.3203 4.76562 11.3203 5.25781 11.0156 5.53906L6.51562 10.0391C6.23438 10.3438 5.74219 10.3438 5.46094 10.0391Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<rect x="20" y="4" width="36" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<line x1="6" y1="15" x2="6" y2="48" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M27.5156 22.9844C27.8203 23.2656 27.8203 23.7578 27.5156 24.0391L23.0156 28.5391C22.7344 28.8438 22.2422 28.8438 21.9609 28.5391C21.6562 28.2578 21.6562 27.7656 21.9609 27.4844L25.9219 23.5L21.9609 19.5391C21.6562 19.2578 21.6562 18.7656 21.9609 18.4844C22.2422 18.1797 22.7344 18.1797 23.0156 18.4844L27.5156 22.9844Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<rect x="36" y="21" width="36" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<path d="M27.5156 39.9844C27.8203 40.2656 27.8203 40.7578 27.5156 41.0391L23.0156 45.5391C22.7344 45.8438 22.2422 45.8438 21.9609 45.5391C21.6562 45.2578 21.6562 44.7656 21.9609 44.4844L25.9219 40.5L21.9609 36.5391C21.6562 36.2578 21.6562 35.7656 21.9609 35.4844C22.2422 35.1797 22.7344 35.1797 23.0156 35.4844L27.5156 39.9844Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<rect x="36" y="38" width="36" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

docs/_includes/svgs/visually-hidden.njk

@@ -0,0 +1,4 @@
+<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="M16.1875 17.1875L19.6875 19.9062C21.0938 18.8438 22.8438 18 25 18C27.5 18 29.5312 19.1562 31 20.5312C32.4688 21.875 33.4375 23.5 33.9062 24.625C34 24.875 34 25.1562 33.9062 25.4062C33.5 26.4062 32.6562 27.8438 31.4062 29.0938L34.6875 31.6875C35.0312 31.9375 35.0938 32.4062 34.8125 32.7188C34.5625 33.0625 34.0938 33.125 33.7812 32.8438L15.2812 18.3438C14.9375 18.0938 14.875 17.625 15.1562 17.3125C15.4062 16.9688 15.875 16.9062 16.1875 17.1875ZM21.9688 21.6875L24.7812 23.9062C24.9062 23.625 25 23.3438 25 23.0312C25 22.7812 24.9375 22.5938 24.875 22.375C24.8438 22.2188 24.9375 22 25.125 22.0312C26.4062 22.0625 27.5312 22.9375 27.875 24.25C28.0625 24.9375 28 25.625 27.75 26.2188L28.9375 27.1562C29.2812 26.5312 29.5 25.7812 29.5 25C29.5 22.5312 27.4688 20.5 25 20.5C23.8125 20.5 22.75 20.9688 21.9688 21.6875ZM26.6562 29.1875L28.9375 31C27.7812 31.625 26.4688 32 25 32C22.4688 32 20.4375 30.875 18.9688 29.5C17.5 28.125 16.5312 26.5 16.0625 25.4062C15.9688 25.1562 15.9688 24.875 16.0625 24.625C16.375 23.9062 16.875 23 17.5938 22.0625L20.5312 24.375C20.5 24.5938 20.5 24.8125 20.5 25C20.5 27.5 22.5 29.5 25 29.5C25.5625 29.5 26.125 29.4062 26.6562 29.1875Z" fill="var(--wa-color-neutral-border-normal)"/>
+</svg>

docs/_layouts/component.njk

@@ -19,7 +19,7 @@
     </wa-badge>
   </div>
   <p class="component-summary">
-    {{ component.summary }}
+    {{ component.summary | inlineMarkdown | safe }}
   </p>
 {% endblock %}
 
@@ -69,41 +69,35 @@
         <thead>
           <tr>
             <th class="table-name">Name</th>
-            <th class="table-attribute">Attribute</th>
             <th class="table-description">Description</th>
             <th class="table-reflects">Reflects</th>
-            <th class="table-type">Type</th>
-            <th class="table-default">Default</th>
           </tr>
         </thead>
         <tbody>
           {% for prop in component.properties %}
             <tr>
               <td class="table-name">
-                <code>{{ prop.name }}</code>
-              </td>
-              <td class="table-attribute">
+                <code>{{ prop.name }}</code><br>
                 {% if prop.attribute %}
-                  <code>{{ prop.attribute }}</code>
+                  <div><small><code>{{ prop.attribute }}</code></small></div>
                 {% endif %}
               </td>
               <td class="table-description">
-                {{ prop.description | inlineMarkdown | safe }}
+                <div>{{ prop.description | inlineMarkdown | safe }}</div>
+                {% if prop.type.text %}
+                  <div><small><strong>Type</strong>&nbsp;<code>{{ prop.type.text | trimPipes | inlineMarkdown | safe }}</code></small></div>
+                {% endif %}
+                {% if prop.default %}
+                  <div><small><strong>Default</strong>&nbsp;<code>{{ prop.default | inlineMarkdown | safe }}</code></small></div>
+                {% endif %}
               </td>
               <td class="table-checkmark">
                 {% if prop.reflects %}
                   <wa-icon name="check"></wa-icon>
                 {% endif %}
               </td>
-              <td class="table-type">
-                {% if prop.type.text %}
-                  <code>{{ prop.type.text | trimPipes | inlineMarkdown | safe }}</code>
-                {% endif %}
-              </td>
               <td class="table-default">
-                {% if prop.default %}
-                  <code>{{ prop.default | inlineMarkdown | safe }}</code>
-                {% endif %}
+
               </td>
             </tr>
           {% endfor %}
@@ -206,17 +200,18 @@
           <tr>
             <th class="table-name">Name</th>
             <th class="table-description">Description</th>
-            <th>Default</th>
           </tr>
         </thead>
         <tbody>
           {% for cssProperty in component.cssProperties %}
             <tr>
               <td class="table-name"><code>{{ cssProperty.name }}</code></td>
-              <td class="table-description">{{ cssProperty.description | inlineMarkdown | safe }}</td>
-              <td class="table-default">
+              <td class="table-description">
+                <div>{{ cssProperty.description | inlineMarkdown | safe }}</div>
                 {% if cssProperty.default %}
-                  <code>{{ cssProperty.default }}</code>
+                  <div>
+                    <small><strong>Default</strong>&nbsp;<code>{{ cssProperty.default }}</code></small>
+                    </div>
                 {% endif %}
               </td>
             </tr>
@@ -236,7 +231,6 @@
           <tr>
             <th class="table-name">Name</th>
             <th class="table-description">Description</th>
-            <th class="table-selector">CSS selector</th>
           </tr>
         </thead>
         <tbody>
@@ -244,7 +238,6 @@
             <tr>
               <td class="table-name"><code>{{ cssPart.name }}</code></td>
               <td class="table-description">{{ cssPart.description | inlineMarkdown | safe }}</td>
-              <td class="table-selector"><code>::part({{ cssPart.name }})</code></td>
             </tr>
           {% endfor %}
         </tbody>
@@ -283,16 +276,16 @@
       <pre><code class="language-js">import '{% cdnUrl component.path %}';</code></pre>
     </wa-tab-panel>
     <wa-tab-panel name="npm">
-      <p>
-        To manually import this component from npm, use the following code.
-      </p>
-      <pre><code class="language-js">import '@shoelace-style/webawesome/{{ component.path }}';</code></pre>
+      Coming soon!
     </wa-tab-panel>
     <wa-tab-panel name="react">
+      Coming soon!
+      {# NOTE - disabled for alpha
       <p>
         To manually import this component from React, use the following code.
       </p>
       <pre><code class="language-js">import '@shoelace-style/webawesome/react/{{ component.tagName | stripPrefix }}';</code></pre>
+      #}
     </wa-tab-panel>
   </wa-tab-group>
 {% endblock %}

docs/_layouts/page-outline.njk

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

docs/assets/images/logo-simple.svg

@@ -1 +1 @@
-<svg class="logo" xmlns="http://www.w3.org/2000/svg" width="277" height="211" viewBox="0 0 277 211"><g fill="none" fill-rule="evenodd"><path fill="#F6894C" d="M159.275,20.7541243 C159.275,28.4927904 155.035053,35.2422161 148.749528,38.8106604 L193.9,72.6391714 L238.157213,58.6776414 C236.43401,55.6537326 235.45,52.1547058 235.45,48.42629 C235.45,36.96411 244.751396,27.6721657 256.225,27.6721657 C267.698604,27.6721657 277,36.96411 277,48.42629 C277,59.8883646 267.698604,69.1804143 256.225,69.1804143 C255.131246,69.1804143 254.057541,69.0960801 253.00969,68.9332096 L204.251886,193.411571 C200.096886,204.019762 189.858966,211 178.45659,211 L98.5434095,211 C87.1410343,211 76.9031143,204.019762 72.7481143,193.411571 L23.990205,68.9332096 C22.9423008,69.0960801 21.8685432,69.1804143 20.775,69.1804143 C9.30129067,69.1804143 0,59.8883646 0,48.42629 C0,36.96411 9.30129067,27.6721657 20.775,27.6721657 C32.2487093,27.6721657 41.55,36.96411 41.55,48.42629 C41.55,52.1547058 40.5658322,55.6537326 38.842945,58.6776414 L83.1,72.6391714 L128.250472,38.8106604 C121.964947,35.2422161 117.725,28.4927904 117.725,20.7541243 C117.725,9.29194428 127.026396,0 138.5,0 C149.973604,0 159.275,9.29194428 159.275,20.7541243 Z"/></g></svg>
+<svg class="logo" xmlns="http://www.w3.org/2000/svg" width="277" height="211" viewBox="0 0 277 211"><g fill="none" fill-rule="evenodd"><path fill="#var(--wa-brand-orange, #F36944)" d="M159.275,20.7541243 C159.275,28.4927904 155.035053,35.2422161 148.749528,38.8106604 L193.9,72.6391714 L238.157213,58.6776414 C236.43401,55.6537326 235.45,52.1547058 235.45,48.42629 C235.45,36.96411 244.751396,27.6721657 256.225,27.6721657 C267.698604,27.6721657 277,36.96411 277,48.42629 C277,59.8883646 267.698604,69.1804143 256.225,69.1804143 C255.131246,69.1804143 254.057541,69.0960801 253.00969,68.9332096 L204.251886,193.411571 C200.096886,204.019762 189.858966,211 178.45659,211 L98.5434095,211 C87.1410343,211 76.9031143,204.019762 72.7481143,193.411571 L23.990205,68.9332096 C22.9423008,69.0960801 21.8685432,69.1804143 20.775,69.1804143 C9.30129067,69.1804143 0,59.8883646 0,48.42629 C0,36.96411 9.30129067,27.6721657 20.775,27.6721657 C32.2487093,27.6721657 41.55,36.96411 41.55,48.42629 C41.55,52.1547058 40.5658322,55.6537326 38.842945,58.6776414 L83.1,72.6391714 L128.250472,38.8106604 C121.964947,35.2422161 117.725,28.4927904 117.725,20.7541243 C117.725,9.29194428 127.026396,0 138.5,0 C149.973604,0 159.275,9.29194428 159.275,20.7541243 Z"/></g></svg>

docs/assets/scripts/code-examples.js

@@ -15,12 +15,12 @@ document.addEventListener('click', event => {
   if (pen) {
     const codeExample = pen.closest('.code-example');
     const code = codeExample.querySelector('code');
-    const version = document.documentElement.dataset.version;
+    const cdnUrl = document.documentElement.dataset.cdnUrl;
     const html =
-      `<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/webawesome@${version}/dist/webawesome.loader.js"></script>` +
-      `\n\n` +
+      `<script type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
+      `<link rel="stylesheet" href="${cdnUrl}themes/default.css">\n\n` +
       `${code.textContent}`;
-    const css = 'body {\n  font: 16px sans-serif;\n  padding: 1rem;\n}\n';
+    const css = 'body {\n  font: 16px sans-serif;\n  padding: 1rem;\n}';
     const js = '';
 
     const form = document.createElement('form');

docs/assets/scripts/color-scheme.js

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

docs/assets/scripts/hydration-errors.js

@@ -0,0 +1,128 @@
+/** TODO: This should probably get abstracted into an actual package. This is listens to the "lit-hydration-error" and then will add a button to show a dialog of the diff. */
+(async () => {
+  const hostname = new URL(document.baseURI).hostname;
+
+  // Only diff on localhost. We dont need to show hydration errors on main site. Only locally.
+  if (hostname !== 'localhost') {
+    return;
+  }
+
+  const { diffLines } = await import('https://cdn.jsdelivr.net/npm/diff@5.2.0/+esm');
+  const { getDiffableHTML } = await import(
+    'https://cdn.jsdelivr.net/npm/@open-wc/semantic-dom-diff@0.20.1/get-diffable-html.js/+esm'
+  );
+
+  function wrap(el, wrapper) {
+    el.parentNode.insertBefore(wrapper, el);
+    wrapper.appendChild(el);
+  }
+
+  function handleLitHydrationError(e) {
+    const element = e.target;
+    const scratch = document.createElement('div');
+    const node = element.cloneNode(true);
+    scratch.append(node);
+    document.body.append(scratch);
+    customElements.upgrade(node);
+    node.updateComplete.then(() => {
+      // Render styles.
+      const elementStyles = element.constructor.elementStyles;
+      const finalStyles = [];
+      if (elementStyles !== undefined && elementStyles.length > 0) {
+        for (const style of elementStyles) {
+          finalStyles.push(style.cssText);
+        }
+      }
+
+      let innerHTML = scratch.firstElementChild?.shadowRoot.innerHTML;
+
+      if (finalStyles?.length) {
+        const styleTag = `<style>${finalStyles.join('\n')}</style>`;
+        innerHTML = styleTag + '\n' + innerHTML;
+      }
+
+      const clientHTML = getDiffableHTML(innerHTML);
+      const serverHTML = getDiffableHTML(element.shadowRoot?.innerHTML);
+
+      const diffDebugger = document.createElement('div');
+      diffDebugger.className = 'diff-debugger';
+
+      diffDebugger.innerHTML = `
+      <button class="diff-dialog-toggle">
+        Show Hydration Mismatch
+      </button>
+      <wa-dialog class="diff-dialog" with-header light-dismiss>
+        <div class="diff-grid">
+          <div>
+            <div>Server</div>
+            <pre class="diff-server"><code></code></pre>
+          </div>
+          <div>
+            <div>Client</div>
+            <pre class="diff-client"><code></code></pre>
+          </div>
+          <div>
+            <div>Diff</div>
+            <pre class="diff-viewer"><code></code></pre>
+          </div>
+        </div>
+      </wa-dialog>
+    `;
+
+      element.focus();
+      wrap(element, diffDebugger);
+
+      diffDebugger.querySelector('.diff-server > code').textContent = serverHTML;
+      diffDebugger.querySelector('.diff-client > code').textContent = clientHTML;
+      const diffViewer = diffDebugger.querySelector('.diff-viewer > code');
+      diffViewer.innerHTML = '';
+      diffViewer.appendChild(
+        createDiff({
+          serverHTML,
+          clientHTML
+        })
+      );
+    });
+  }
+
+  function createDiff({ serverHTML, clientHTML }) {
+    const diff = diffLines(serverHTML, clientHTML, {
+      ignoreWhitespace: false,
+      newLineIsToken: true
+    });
+    const fragment = document.createDocumentFragment();
+    for (var i = 0; i < diff.length; i++) {
+      if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
+        var swap = diff[i];
+        diff[i] = diff[i + 1];
+        diff[i + 1] = swap;
+      }
+
+      var node;
+      if (diff[i].removed) {
+        node = document.createElement('del');
+        node.appendChild(document.createTextNode(diff[i].value));
+      } else if (diff[i].added) {
+        node = document.createElement('ins');
+        node.appendChild(document.createTextNode(diff[i].value));
+      } else {
+        node = document.createTextNode(diff[i].value);
+      }
+      fragment.appendChild(node);
+    }
+
+    return fragment;
+  }
+
+  function handleDialogToggle(e) {
+    const button = e.composedPath().find(el => {
+      return el.classList && el.classList.contains('diff-dialog-toggle');
+    });
+
+    if (button) {
+      button.parentElement.querySelector('.diff-dialog').open = true;
+    }
+  }
+  document.addEventListener('lit-hydration-error', handleLitHydrationError);
+  document.addEventListener('click', handleDialogToggle);
+})();

docs/assets/scripts/turbo.js

@@ -1,5 +1,3 @@
-import 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/+esm';
-
 if (!window.___turboScrollPositions___) {
   window.___turboScrollPositions___ = {};
 }
@@ -7,11 +5,11 @@ if (!window.___turboScrollPositions___) {
 const positions = window.___turboScrollPositions___;
 
 function saveScrollPosition() {
-  document.querySelectorAll('[data-remember-scroll]').forEach(el => {
-    if (el.id) {
-      positions[el.id] = {
-        top: el.scrollTop,
-        left: el.scrollLeft
+  document.querySelectorAll('[data-remember-scroll]').forEach(element => {
+    if (element.id) {
+      positions[element.id] = {
+        top: element.scrollTop,
+        left: element.scrollLeft
       };
     } else {
       console.warn(`Can't save scroll position for elements without an id.`, el);
@@ -20,16 +18,55 @@ function saveScrollPosition() {
 }
 
 function restoreScrollPosition(event) {
-  const el = event.detail?.newBody || document;
+  if (event.detail && event.detail.newBody) {
+    event.detail.newBody.querySelectorAll('[data-remember-scroll]').forEach(element => {
+      if (!positions[element.id]) {
+        return;
+      }
 
-  el.querySelectorAll('[data-remember-scroll]').forEach(el => {
-    if (positions[el.id]) {
-      el.scrollTop = positions[el.id].top;
-      el.scrollLeft = positions[el.id].left;
+      const { top, left } = positions[element.id];
+
+      element.scrollTop = top;
+      element.scrollLeft = left;
+    });
+  }
+
+  document.querySelectorAll('[data-remember-scroll]').forEach(element => {
+    if (!positions[element.id]) {
+      return;
     }
+
+    const { top, left } = positions[element.id];
+
+    element.scrollTop = top;
+    element.scrollLeft = left;
   });
 }
 
+function fixDSD(e) {
+  const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
+  if (!newElement) {
+    return;
+  }
+
+  // https://developer.chrome.com/docs/css-ui/declarative-shadow-dom#polyfill
+  (function attachShadowRoots(root) {
+    root.querySelectorAll('template[shadowrootmode]').forEach(template => {
+      const mode = template.getAttribute('shadowrootmode');
+      const shadowRoot = template.parentNode.attachShadow({ mode });
+      shadowRoot.appendChild(template.content);
+      template.remove();
+      attachShadowRoots(shadowRoot);
+    });
+  })(newElement);
+}
+
+// Fixes an issue with DSD keeping the `<template>` elements hanging around in the lightdom.
+// https://github.com/hotwired/turbo/issues/1292
+['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
+  document.addEventListener(eventName, fixDSD);
+});
+
 window.addEventListener('turbo:before-cache', saveScrollPosition);
 window.addEventListener('turbo:before-render', restoreScrollPosition);
 window.addEventListener('turbo:render', restoreScrollPosition);

docs/assets/styles/code-highlighter.css

@@ -1,10 +1,14 @@
+pre {
+  background-color: var(--wa-color-gray-20);
+  color: white;
+}
 .code-comment,
 .code-prolog,
 .code-doctype,
 .code-cdata,
 .code-operator,
 .code-punctuation {
-  color: var(--wa-color-base-40);
+  color: var(--wa-color-gray-70);
 }
 
 .code-namespace {
@@ -15,13 +19,13 @@
 .code-keyword,
 .code-tag,
 .code-url {
-  color: var(--wa-color-indigo-40);
+  color: var(--wa-color-indigo-70);
 }
 
 .code-symbol,
 .code-deleted,
 .code-important {
-  color: var(--wa-color-red-40);
+  color: var(--wa-color-red-70);
 }
 
 .code-boolean,
@@ -32,7 +36,7 @@
 .code-char,
 .code-builtin,
 .code-inserted {
-  color: var(--wa-color-green-40);
+  color: var(--wa-color-green-70);
 }
 
 .code-atrule,
@@ -42,7 +46,7 @@
 .code-function,
 .code-class-name,
 .code-regex {
-  color: var(--wa-color-blue-40);
+  color: var(--wa-color-blue-70);
 }
 
 .code-important,

docs/assets/styles/copy-code.css

@@ -1,15 +1,16 @@
-.copy-button {
+wa-copy-button.copy-button {
+  --background-color: var(--wa-color-gray-20);
+  --background-color-hover: color-mix(in oklab, var(--background-color), white 5%);
   position: absolute;
   top: 0.25rem;
   right: 0.25rem;
   font-family: var(--wa-font-family-body);
-  color: var(--wa-color-neutral-on-normal);
-  background-color: var(--wa-color-neutral-fill-quiet);
+  color: var(--wa-color-gray-80);
   border-radius: var(--wa-border-radius-s);
   padding: 0.25rem;
 
   &:hover {
-    background-color: var(--wa-color-neutral-fill-normal);
+    color: white;
   }
 
   &:focus-visible {

docs/assets/styles/docs.css

@@ -3,15 +3,22 @@
 @import 'copy-code.css';
 @import 'outline.css';
 @import 'search.css';
+@import 'cera_typeface.css';
+
+:root {
+  --wa-brand-orange: #f36944;
+  --wa-brand-grey: #30323b;
+}
+
+html.wa-theme-default-dark .only-light,
+html:not(.wa-theme-default-dark) .only-dark {
+  display: none;
+}
 
 wa-page {
   --wa-flow-spacing: var(--wa-space-xl);
 }
 
-wa-page[view='desktop'] [data-toggle-nav] {
-  display: none;
-}
-
 /* Header */
 wa-page::part(header) {
   background-color: var(--wa-color-surface-default);
@@ -22,31 +29,102 @@ wa-page > header {
   flex: 1 1 auto;
   display: flex;
   align-items: center;
-  max-width: 1200px;
-  height: 60px;
-  padding-inline: 2rem;
+  justify-content: space-between;
+  height: 4rem;
+  padding-inline: var(--wa-space-xl);
+
+  a[href='/'] {
+    color: var(--wa-color-text-normal);
+    line-height: 1;
+  }
+
+  wa-button[data-toggle-nav] {
+    --label-color: currentColor;
+    margin-inline-start: -0.875rem;
+    margin-inline-end: 0;
+
+    &::part(base) {
+      padding: 0;
+      padding-inline: 0.875rem;
+    }
+  }
 
   svg {
     width: auto;
-    max-height: 26px;
+    height: 1.75rem;
   }
-}
 
-/* Navigation sidebar */
-wa-page[view='desktop']::part(navigation) {
-  border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-}
+  #docs-branding,
+  #docs-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--wa-space-xs);
+  }
 
-wa-page[view='desktop'] > #sidebar {
-  min-width: 320px;
-  padding: 2rem;
+  #version-number {
+    color: var(--wa-color-text-quiet);
+    font-size: var(--wa-font-size-xs);
+    line-height: 1;
+    margin-block-start: var(--wa-space-2xs);
+  }
+  #version-number + wa-badge {
+    --background-color: var(--wa-color-warning-fill-quiet);
+    --content-color: var(--wa-color-warning-on-quiet);
+    font-size: var(--wa-font-size-2xs);
+    text-transform: uppercase;
+  }
+  wa-button#search-trigger {
+    --background-color: var(--wa-form-control-background-color);
+    --border-color: var(--wa-form-control-resting-color);
+  }
+  #search-trigger kbd {
+    font-size: var(--wa-font-size-2xs);
+    line-height: var(--wa-form-control-value-line-height);
+  }
 }
 
 #sidebar,
 #outline {
   h2 {
-    font-size: 1.125rem;
-    margin-block-end: 0.5rem;
+    font-size: var(--wa-font-size-m);
+    margin-block-end: var(--wa-space-m);
+  }
+  h2:not(:first-of-type) {
+    margin-block-start: var(--wa-space-xl);
+  }
+  ul {
+    border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
+    font-size: var(--wa-font-size-s);
+    line-height: var(--wa-line-height-condensed);
+    margin: 0;
+    padding-inline-start: var(--wa-space-m);
+  }
+  ul ul {
+    margin-block-start: var(--wa-space-m);
+  }
+  li {
+    list-style: none;
+    margin-block-end: var(--wa-space-m);
+  }
+  li a {
+    color: var(--wa-color-text-normal);
+    text-decoration: none;
+  }
+  li a:hover {
+    text-decoration: underline;
+  }
+}
+
+#sidebar-close-button {
+  display: none;
+}
+
+@media screen and (max-width: 768px) {
+  #sidebar-close-button {
+    display: inline-block;
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
   }
 }
 
@@ -54,13 +132,21 @@ wa-page[view='desktop'] > #sidebar {
   padding-bottom: 1rem;
 }
 
+wa-page::part(menu) {
+  scrollbar-width: thin;
+}
+
 /* Main content */
 wa-page > main {
   max-width: 80ch;
-  padding: 2rem;
+  padding: var(--wa-space-xl);
   margin-inline: auto;
 }
 
+.component-info {
+  margin-block-end: var(--wa-flow-spacing);
+}
+
 /* Current link */
 #sidebar,
 #outline {
@@ -87,7 +173,7 @@ wa-page > main {
 .callout {
   display: flex;
   gap: 1rem;
-  border: var(--wa-border-style) var(--wa-border-width-m);
+  border: var(--wa-border-style) var(--wa-border-width-s);
   border-radius: var(--wa-border-radius-m);
   padding: 1rem;
   margin-block-end: var(--wa-flow-spacing);
@@ -136,8 +222,65 @@ wa-page > main {
   }
 }
 
-/* Swatches */
+/* Index Pages */
+wa-page > main:has(> .index-grid) {
+  max-width: 120ch;
+  margin-inline: auto;
+}
 
+.index-summary {
+  max-inline-size: 80ch;
+}
+
+.index-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
+  gap: var(--wa-space-2xl);
+}
+
+.index-category {
+  grid-column: 1 / -1;
+  margin-block-end: 0;
+  margin-block-start: var(--wa-space-2xl);
+}
+
+.index-grid a {
+  border-radius: var(--wa-border-radius-m);
+}
+
+.index-grid wa-card {
+  --box-shadow: none;
+  --spacing: var(--wa-space-m);
+  inline-size: 100%;
+}
+
+.index-grid wa-card:hover {
+  --border-color: var(--wa-color-brand-border-loud);
+  --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
+  & .page-name {
+    color: var(--wa-color-brand-on-quiet);
+  }
+}
+
+.index-grid wa-card [slot='header'] {
+  display: flex;
+}
+
+.index-grid wa-card::part(header) {
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-bottom: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: calc(6rem + var(--spacing));
+}
+
+.index-grid .page-name {
+  font-size: var(--wa-font-size-s);
+  font-weight: var(--wa-font-weight-action);
+}
+
+/* Swatches */
 .swatch {
   background-color: transparent;
   border-color: var(--wa-color-neutral-border-normal);
@@ -149,3 +292,49 @@ wa-page > main {
   height: 2.5em;
   padding-inline: var(--wa-space-xs);
 }
+
+/* Utilities */
+.two-columns {
+  columns: 2;
+  gap: 1rem;
+}
+
+.component-table td > * + * {
+  margin-block-start: var(--wa-space-s);
+}
+
+.table-scroll {
+  overflow-x: auto;
+}
+
+/** mobile */
+@media screen and (max-width: 768px) {
+  wa-page .only-desktop {
+    display: none;
+  }
+}
+
+/** desktop */
+@media screen and not (max-width: 768px) {
+  wa-page [data-toggle-nav],
+  wa-page .only-mobile {
+    display: none;
+  }
+
+  /* Navigation sidebar */
+  wa-page::part(navigation) {
+    border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
+  }
+
+  wa-page > #sidebar {
+    overflow: auto;
+    max-height: 100%;
+    min-width: 300px;
+    padding: var(--wa-space-xl);
+    max-width: 300px;
+  }
+
+  wa-page > main {
+    padding: var(--wa-space-3xl);
+  }
+}

docs/assets/styles/hydration-errors.css

@@ -0,0 +1,38 @@
+/** TODO: This should probably get abstracted into an actual package. */
+.diff-dialog-toggle {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.diff-debugger {
+  position: relative;
+  border: 4px solid red;
+}
+.diff-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-rows: minmax(0, 1fr);
+  max-height: 80vh;
+  gap: 16px;
+}
+.diff-grid > * {
+  height: 100%;
+}
+.diff-dialog::part(dialog) {
+  max-width: 90vw;
+  width: 90vw;
+}
+.diff-dialog ins {
+  text-decoration: none;
+}
+.diff-dialog pre {
+  border: 1px solid transparent;
+  height: 100%;
+  max-height: calc(100% - 2em);
+}
+.diff-dialog code {
+  height: 100%;
+}
+.diff-dialog del {
+  text-decoration: none;
+}

docs/assets/styles/outline.css

@@ -1,6 +1,5 @@
 #outline {
   order: 2;
-  padding-inline-end: 2rem;
   margin-block: 2rem;
 }
 
@@ -12,6 +11,9 @@
 #outline > nav {
   position: sticky;
   top: calc(var(--docs-header-height) + 3.5rem);
+  padding-inline-end: 2rem;
+  max-width: 240px;
+  min-width: 240px;
 }
 
 #outline-expandable {
@@ -28,7 +30,7 @@
   margin-inline-start: 1rem;
 }
 
-@media screen and (max-width: 1299px) {
+@media screen and (max-width: 1199px) {
   #outline {
     padding-block: 0.25rem;
     margin-block-end: -1rem;

docs/assets/styles/search.css

@@ -224,6 +224,7 @@ header {
 #site-search footer {
   flex: 0 0 auto;
   display: flex;
+  flex-direction: row;
   justify-content: center;
   gap: 2rem;
   color: var(--wa-color-text-quiet);
@@ -249,12 +250,3 @@ header {
     }
   }
 }
-
-@keyframes show-search-backdrop {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}

docs/docs/components/animated-image.md

@@ -1,7 +1,7 @@
 ---
 title: Animated Image
 description: A component for displaying animated GIFs and WEBPs that play and pause on interaction.
-layout: component.njk
+layout: component
 ---
 
 ```html {.example}

docs/docs/components/animation.md

@@ -1,7 +1,7 @@
 ---
 title: Animation
 description: Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.
-layout: component.njk
+layout: component
 ---
 
 To animate an element, wrap it in `<wa-animation>` and set an animation `name`. The animation will not start until you add the `play` attribute. Refer to the [properties table](#properties) for a list of all animation options.
@@ -50,7 +50,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
 </div>
 
 <script type="module">
-  import { getAnimationNames, getEasingNames } from '/dist/utilities/animation.js';
+  import { getAnimationNames, getEasingNames } from '/dist/webawesome.js';
 
   const container = document.querySelector('.animation-sandbox');
   const animation = container.querySelector('wa-animation');
@@ -196,4 +196,4 @@ Animations won't play until you apply the `play` attribute. You can omit it init
     animation.play = true;
   });
 </script>
-```
+```

docs/docs/components/avatar.md

@@ -1,7 +1,7 @@
 ---
 title: Avatar
 description: Avatars are used to represent a person or object.
-layout: component.njk
+layout: component
 ---
 
 By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a `label` for assistive devices.

docs/docs/components/badge.md

@@ -1,7 +1,7 @@
 ---
 title: Badge
 description: Badges are used to draw attention and display statuses or counts.
-layout: component.njk
+layout: component
 ---
 
 ```html {.example}

docs/docs/components/breadcrumb-item.md

@@ -1,7 +1,7 @@
 ---
 title: Breadcrumb Item
 description: Breadcrumb Items are used inside breadcrumbs to represent different links.
-layout: component.njk
+layout: component
 ---
 
 ```html {.example}
@@ -16,5 +16,5 @@ layout: component.njk
 ```
 
 :::info
-Additional demonstrations can be found in the [breadcrumb examples](/components/breadcrumb).
+Additional demonstrations can be found in the [breadcrumb examples](/docs/components/breadcrumb).
 :::

docs/docs/components/breadcrumb.md

@@ -1,7 +1,7 @@
 ---
 title: Breadcrumb
 description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
-layout: component.njk
+layout: component
 ---
 
 Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.
@@ -35,6 +35,36 @@ For websites, you'll probably want to use links instead. You can make any breadc
 </wa-breadcrumb>
 ```
 
+### Prefixes
+
+Use the `prefix` slot to add content before any breadcrumb item.
+
+```html {.example}
+<wa-breadcrumb>
+  <wa-breadcrumb-item>
+    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
+    Home
+  </wa-breadcrumb-item>
+  <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Traveling</wa-breadcrumb-item>
+</wa-breadcrumb>
+```
+
+### Suffixes
+
+Use the `suffix` slot to add content after any breadcrumb item.
+
+```html {.example}
+<wa-breadcrumb>
+  <wa-breadcrumb-item>Documents</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Policies</wa-breadcrumb-item>
+  <wa-breadcrumb-item>
+    Security
+    <wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
+  </wa-breadcrumb-item>
+</wa-breadcrumb>
+```
+
 ### Custom Separators
 
 Use the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
@@ -66,12 +96,27 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
 </wa-breadcrumb>
 ```
 
-### Prefixes
+### Custom Colors
 
-Use the `prefix` slot to add content before any breadcrumb item.
+Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Prefixes, suffixes, and separators can be styled using CSS parts.
 
 ```html {.example}
-<wa-breadcrumb>
+<style>
+  .redcrumbs wa-breadcrumb-item {
+    color: firebrick;
+  }
+  .redcrumbs wa-breadcrumb-item:last-of-type {
+    color: crimson;
+  }
+  .redcrumbs wa-breadcrumb-item::part(separator) {
+    color: pink;
+  }
+  .redcrumbs wa-breadcrumb-item::part(prefix),
+  .redcrumbs wa-breadcrumb-item::part(suffix) {
+    color: currentColor;
+  }
+</style>
+<wa-breadcrumb class="redcrumbs">
   <wa-breadcrumb-item>
     <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
     Home
@@ -81,24 +126,31 @@ Use the `prefix` slot to add content before any breadcrumb item.
 </wa-breadcrumb>
 ```
 
-### Suffixes
+### With Dropdowns
 
-Use the `suffix` slot to add content after any breadcrumb item.
+Dropdown menus can be placed in the default slot to provide additional options.
 
 ```html {.example}
 <wa-breadcrumb>
-  <wa-breadcrumb-item>Documents</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Policies</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Homepage</wa-breadcrumb-item>
   <wa-breadcrumb-item>
-    Security
-    <wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
+    <wa-dropdown>
+      <wa-button slot="trigger" size="small" appearance="tinted" pill>
+        <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
+      </wa-button>
+      <wa-menu>
+        <wa-menu-item type="checkbox" checked>Web Design</wa-menu-item>
+        <wa-menu-item type="checkbox">Web Development</wa-menu-item>
+        <wa-menu-item type="checkbox">Marketing</wa-menu-item>
+      </wa-menu>
+    </wa-dropdown>
   </wa-breadcrumb-item>
+  <wa-breadcrumb-item>Our Services</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Digital Media</wa-breadcrumb-item>
 </wa-breadcrumb>
 ```
 
-### With Dropdowns
-
-Dropdown menus can be placed in a prefix or suffix slot to provide additional options.
+Alternatively, you can place dropdown menus in a prefix or suffix slot.
 
 ```html {.example}
 <wa-breadcrumb>
@@ -108,7 +160,7 @@ Dropdown menus can be placed in a prefix or suffix slot to provide additional op
   <wa-breadcrumb-item>
     Web Design
     <wa-dropdown slot="suffix">
-      <wa-button slot="trigger" size="small" pill>
+      <wa-button slot="trigger" size="small" appearance="tinted" pill>
         <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
       </wa-button>
       <wa-menu>

docs/docs/components/button-group.md

@@ -1,7 +1,7 @@
 ---
 title: Button Group
 description: Button groups can be used to group related buttons into sections.
-layout: component.njk
+layout: component
 ---
 
 ```html {.example}
@@ -135,7 +135,7 @@ Dropdowns can be placed inside button groups as long as the trigger is an `<wa-b
 
 ### Split Buttons
 
-Create a split button using a button and a dropdown. Use a [visually hidden](/components/visually-hidden) label to ensure the dropdown is accessible to users with assistive devices.
+Create a split button using a button and a dropdown. Use a [visually hidden](/docs/components/visually-hidden) label to ensure the dropdown is accessible to users with assistive devices.
 
 ```html {.example}
 <wa-button-group label="Example Button Group">

docs/docs/components/button.md

@@ -1,7 +1,7 @@
 ---
 title: Button
 description: Buttons represent actions that are available to the user.
-layout: component.njk
+layout: component
 ---
 
 ```html {.example}
@@ -12,16 +12,53 @@ layout: component.njk
 
 ### Variants
 
-Use the `variant` attribute to set the button's variant.
+Use the `variant` attribute to set the button's semantic variant.
 
 ```html {.example}
+<wa-button variant="neutral">Neutral</wa-button>
 <wa-button variant="brand">Brand</wa-button>
 <wa-button variant="success">Success</wa-button>
-<wa-button variant="neutral">Neutral</wa-button>
 <wa-button variant="warning">Warning</wa-button>
 <wa-button variant="danger">Danger</wa-button>
 ```
 
+### Appearance
+
+Use the `appearance` attribute to change the button's visual appearance.
+
+```html {.example}
+<div style="margin-block-end: 1rem;">
+  <wa-button appearance="filled" variant="neutral">Filled</wa-button>
+  <wa-button appearance="tinted" variant="neutral">Tinted</wa-button>
+  <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
+  <wa-button appearance="text" variant="neutral">Text</wa-button>
+</div>
+<div style="margin-block-end: 1rem;">
+  <wa-button appearance="filled" variant="brand">Filled</wa-button>
+  <wa-button appearance="tinted" variant="brand">Tinted</wa-button>
+  <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
+  <wa-button appearance="text" variant="brand">Text</wa-button>
+</div>
+<div style="margin-block-end: 1rem;">
+  <wa-button appearance="filled" variant="success">Filled</wa-button>
+  <wa-button appearance="tinted" variant="success">Tinted</wa-button>
+  <wa-button appearance="outlined" variant="success">Outlined</wa-button>
+  <wa-button appearance="text" variant="success">Text</wa-button>
+</div>
+<div style="margin-block-end: 1rem;">
+  <wa-button appearance="filled" variant="warning">Filled</wa-button>
+  <wa-button appearance="tinted" variant="warning">Tinted</wa-button>
+  <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
+  <wa-button appearance="text" variant="warning">Text</wa-button>
+</div>
+<div>
+  <wa-button appearance="filled" variant="danger">Filled</wa-button>
+  <wa-button appearance="tinted" variant="danger">Tinted</wa-button>
+  <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
+  <wa-button appearance="text" variant="danger">Text</wa-button>
+</div>
+```
+
 ### Sizes
 
 Use the `size` attribute to change a button's size.
@@ -32,18 +69,6 @@ Use the `size` attribute to change a button's size.
 <wa-button size="large">Large</wa-button>
 ```
 
-### Outline Buttons
-
-Use the `outline` attribute to draw outlined buttons with transparent backgrounds.
-
-```html {.example}
-<wa-button variant="brand" outline>Brand</wa-button>
-<wa-button variant="success" outline>Success</wa-button>
-<wa-button variant="neutral" outline>Neutral</wa-button>
-<wa-button variant="warning" outline>Warning</wa-button>
-<wa-button variant="danger" outline>Danger</wa-button>
-```
-
 ### Pill Buttons
 
 Use the `pill` attribute to give buttons rounded edges.
@@ -54,16 +79,6 @@ Use the `pill` attribute to give buttons rounded edges.
 <wa-button size="large" pill>Large</wa-button>
 ```
 
-### Text Buttons
-
-Use the `text` variant to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.
-
-```html {.example}
-<wa-button variant="text" size="small">Text</wa-button>
-<wa-button variant="text" size="medium">Text</wa-button>
-<wa-button variant="text" size="large">Text</wa-button>
-```
-
 ### Link Buttons
 
 It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `<a>` under the hood. This gives you all the default link behavior the browser provides (e.g. [[CMD/CTRL/SHIFT]] + [[CLICK]]) and exposes the `target` and `download` attributes.
@@ -72,7 +87,6 @@ It's often helpful to have a button that works like a link. This is possible by
 <wa-button href="https://example.com/">Link</wa-button>
 <wa-button href="https://example.com/" target="_blank">New Window</wa-button>
 <wa-button href="/assets/images/logo.svg" download="shoelace.svg">Download</wa-button>
-<wa-button href="https://example.com/" disabled>Disabled</wa-button>
 ```
 
 :::info
@@ -178,7 +192,6 @@ Use the `disabled` attribute to disable a button.
 <wa-button variant="success" disabled>Success</wa-button>
 <wa-button variant="neutral" disabled>Neutral</wa-button>
 <wa-button variant="warning" disabled>Warning</wa-button>
-<wa-button variant="danger" disabled>Danger</wa-button>
 ```
 
 ### Styling Buttons

docs/docs/components/callout.md

@@ -1,7 +1,7 @@
 ---
 title: Callout
 description: Callouts are used to display important messages inline.
-layout: component.njk
+layout: component
 ---
 
 ```html {.example}

docs/docs/components/card.md

@@ -1,7 +1,7 @@
 ---
 title: Card
 description: Cards can be used to group related subjects in a container.
-layout: component.njk
+layout: component
 ---
 
 ```html {.example}

docs/docs/components/carousel-item.md

@@ -1,7 +1,7 @@
 ---
 title: Carousel Item
 description: A carousel item represent a slide within a carousel.
-layout: component.njk
+layout: component
 ---
 
 ```html {.example}
@@ -40,5 +40,5 @@ layout: component.njk
 ```
 
 :::info
-Additional demonstrations can be found in the [carousel examples](/components/carousel).
+Additional demonstrations can be found in the [carousel examples](/docs/components/carousel).
 :::

docs/docs/components/carousel.md

@@ -1,7 +1,7 @@
 ---
 title: Carousel
 description: Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
-layout: component.njk
+layout: component
 ---
 
 ```html {.example}
@@ -9,31 +9,31 @@ layout: component.njk
   <wa-carousel-item>
     <img
       alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
-      src="/assets/examples/carousel/mountains.jpg"
+      src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/waterfall.jpg"
+      alt="A river winding through an evergreen forest (by Luca Bravo on Unsplash)"
+      src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
-      src="/assets/examples/carousel/sunset.jpg"
+      src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
-      src="/assets/examples/carousel/field.jpg"
+      src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
-      src="/assets/examples/carousel/valley.jpg"
+      src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10"
     />
   </wa-carousel-item>
 </wa-carousel>
@@ -50,31 +50,31 @@ Use the `pagination` attribute to show the total number of slides and the curren
   <wa-carousel-item>
     <img
       alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
-      src="/assets/examples/carousel/mountains.jpg"
+      src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/waterfall.jpg"
+      alt="A river winding through an evergreen forest (by Luca Bravo on Unsplash)"
+      src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
-      src="/assets/examples/carousel/sunset.jpg"
+      src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
-      src="/assets/examples/carousel/field.jpg"
+      src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
-      src="/assets/examples/carousel/valley.jpg"
+      src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10"
     />
   </wa-carousel-item>
 </wa-carousel>
@@ -89,31 +89,31 @@ Use the `navigation` attribute to show previous and next buttons.
   <wa-carousel-item>
     <img
       alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
-      src="/assets/examples/carousel/mountains.jpg"
+      src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/waterfall.jpg"
+      alt="A river winding through an evergreen forest (by Luca Bravo on Unsplash)"
+      src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
-      src="/assets/examples/carousel/sunset.jpg"
+      src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
-      src="/assets/examples/carousel/field.jpg"
+      src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
-      src="/assets/examples/carousel/valley.jpg"
+      src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10"
     />
   </wa-carousel-item>
 </wa-carousel>
@@ -128,31 +128,31 @@ By default, the carousel will not advanced beyond the first and last slides. You
   <wa-carousel-item>
     <img
       alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
-      src="/assets/examples/carousel/mountains.jpg"
+      src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/waterfall.jpg"
+      alt="A river winding through an evergreen forest (by Luca Bravo on Unsplash)"
+      src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
-      src="/assets/examples/carousel/sunset.jpg"
+      src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
-      src="/assets/examples/carousel/field.jpg"
+      src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
-      src="/assets/examples/carousel/valley.jpg"
+      src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10"
     />
   </wa-carousel-item>
 </wa-carousel>
@@ -167,31 +167,31 @@ The carousel will automatically advance when the `autoplay` attribute is used. T
   <wa-carousel-item>
     <img
       alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
-      src="/assets/examples/carousel/mountains.jpg"
+      src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/waterfall.jpg"
+      alt="A river winding through an evergreen forest (by Luca Bravo on Unsplash)"
+      src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
-      src="/assets/examples/carousel/sunset.jpg"
+      src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
-      src="/assets/examples/carousel/field.jpg"
+      src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
-      src="/assets/examples/carousel/valley.jpg"
+      src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10"
     />
   </wa-carousel-item>
 </wa-carousel>
@@ -209,31 +209,31 @@ This example is best demonstrated using a mouse. Try clicking and dragging the s
     <wa-carousel-item>
       <img
         alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
-        src="/assets/examples/carousel/mountains.jpg"
+        src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10"
       />
     </wa-carousel-item>
     <wa-carousel-item>
       <img
-        alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-        src="/assets/examples/carousel/waterfall.jpg"
+        alt="A river winding through an evergreen forest (by Luca Bravo on Unsplash)"
+        src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10"
       />
     </wa-carousel-item>
     <wa-carousel-item>
       <img
         alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
-        src="/assets/examples/carousel/sunset.jpg"
+        src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10"
       />
     </wa-carousel-item>
     <wa-carousel-item>
       <img
         alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
-        src="/assets/examples/carousel/field.jpg"
+        src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10"
       />
     </wa-carousel-item>
     <wa-carousel-item>
       <img
         alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
-        src="/assets/examples/carousel/valley.jpg"
+        src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10"
       />
     </wa-carousel-item>
   </wa-carousel>
@@ -350,31 +350,31 @@ Setting the `orientation` attribute to `vertical` will render the carousel in a
   <wa-carousel-item>
     <img
       alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
-      src="/assets/examples/carousel/mountains.jpg"
+      src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/waterfall.jpg"
+      alt="A river winding through an evergreen forest (by Luca Bravo on Unsplash)"
+      src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
-      src="/assets/examples/carousel/sunset.jpg"
+      src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
-      src="/assets/examples/carousel/field.jpg"
+      src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
-      src="/assets/examples/carousel/valley.jpg"
+      src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10"
     />
   </wa-carousel-item>
 </wa-carousel>
@@ -407,31 +407,31 @@ Use the `--aspect-ratio` custom property to customize the size of the carousel's
   <wa-carousel-item>
     <img
       alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
-      src="/assets/examples/carousel/mountains.jpg"
+      src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/waterfall.jpg"
+      alt="A river winding through an evergreen forest (by Luca Bravo on Unsplash)"
+      src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
-      src="/assets/examples/carousel/sunset.jpg"
+      src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
-      src="/assets/examples/carousel/field.jpg"
+      src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
-      src="/assets/examples/carousel/valley.jpg"
+      src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10"
     />
   </wa-carousel-item>
 </wa-carousel>
@@ -465,31 +465,31 @@ Use the `--scroll-hint` custom property to add inline padding in horizontal caro
   <wa-carousel-item>
     <img
       alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
-      src="/assets/examples/carousel/mountains.jpg"
+      src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/waterfall.jpg"
+      alt="A river winding through an evergreen forest (by Luca Bravo on Unsplash)"
+      src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
-      src="/assets/examples/carousel/sunset.jpg"
+      src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
-      src="/assets/examples/carousel/field.jpg"
+      src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
-      src="/assets/examples/carousel/valley.jpg"
+      src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10"
     />
   </wa-carousel-item>
 </wa-carousel>
@@ -504,42 +504,42 @@ The carousel has a robust API that makes it possible to extend and customize. Th
   <wa-carousel-item>
     <img
       alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
-      src="/assets/examples/carousel/mountains.jpg"
+      src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/waterfall.jpg"
+      alt="A river winding through an evergreen forest (by Luca Bravo on Unsplash)"
+      src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
-      src="/assets/examples/carousel/sunset.jpg"
+      src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
-      src="/assets/examples/carousel/field.jpg"
+      src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10"
     />
   </wa-carousel-item>
   <wa-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
-      src="/assets/examples/carousel/valley.jpg"
+      src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10"
     />
   </wa-carousel-item>
 </wa-carousel>
 
 <div class="thumbnails">
   <div class="thumbnails__scroller">
-    <img alt="Thumbnail by 1" class="thumbnails__image active" src="/assets/examples/carousel/mountains.jpg" />
-    <img alt="Thumbnail by 2" class="thumbnails__image" src="/assets/examples/carousel/waterfall.jpg" />
-    <img alt="Thumbnail by 3" class="thumbnails__image" src="/assets/examples/carousel/sunset.jpg" />
-    <img alt="Thumbnail by 4" class="thumbnails__image" src="/assets/examples/carousel/field.jpg" />
-    <img alt="Thumbnail by 5" class="thumbnails__image" src="/assets/examples/carousel/valley.jpg" />
+    <img alt="Thumbnail by 1" class="thumbnails__image active" src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10" />
+    <img alt="Thumbnail by 2" class="thumbnails__image" src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10" />
+    <img alt="Thumbnail by 3" class="thumbnails__image" src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10" />
+    <img alt="Thumbnail by 4" class="thumbnails__image" src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10" />
+    <img alt="Thumbnail by 5" class="thumbnails__image" src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10" />
   </div>
 </div>
 

docs/docs/components/checkbox.md

@@ -1,7 +1,7 @@
 ---
 title: Checkbox
 description: Checkboxes allow the user to toggle an option on or off.
-layout: component.njk
+layout: component
 ---
 
 ```html {.example}
@@ -9,7 +9,7 @@ layout: component.njk
 ```
 
 :::info
-This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
+This component works with standard `<form>` elements. Please refer to the section on [form controls](/docs/form-controls) to learn more about form submission and client-side validation.
 :::
 
 ## Examples
@@ -92,4 +92,4 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
     });
   });
 </script>
-```
+```