Merge branch 'next' into custom-palettes

- Sidebar, overview listings, breadcrumbs now based on actual parent-child relationships, rather than increasingly outdated heuristics
- parent properties are now generated automatically from the URL structure, and need only be specified to override that default
- Ability to group by page hierarchy in overview pages, where pages that have >= 2 children become categories

Smaller improvements:
- More flexible syntax for specifying the params of overview pages
- [Overviews] Hide group heading if only one group is present
- parentItem and parentUrl properties that can be used on any page
- Alias a collection as the children of a page (useful for "virtual" parents like Layout)
- Do not error if a page card icon is missing

.eslintignore

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

.eslintrc.cjs

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

.github/CODE_OF_CONDUCT.md

@@ -35,7 +35,7 @@ This Code of Conduct applies within all project spaces, and it also applies when
 
 ## Enforcement
 
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at cory@abeautifulsite.net. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at support@fontawesome.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
 
 Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
 

.github/FUNDING.yml

@@ -1 +0,0 @@
-github: [claviska]

.github/ISSUE_TEMPLATE/bug_report.md

@@ -3,8 +3,7 @@ name: Bug Report
 about: Create a bug report to help us fix a demonstrable problem with code in the library.
 title: ''
 labels: bug
-assignees: claviska
-
+assignees: 
 ---
 
 ### Describe the bug

.github/ISSUE_TEMPLATE/config.yml

@@ -1,4 +1,7 @@
 contact_links:
+  - name: Feature Requests
+    url: https://github.com/shoelace-style/shoelace/discussions/categories/ideas
+    about: All requests for new features should go here.
   - name: Help & Support
     url: https://github.com/shoelace-style/shoelace/discussions/categories/help
     about: Please don't create issues for personal help requests. Instead, ask your question on the discussion forum.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,17 +0,0 @@
----
-name: Feature Request
-about: Suggest an idea for this project.
-title: ''
-labels: feature
-assignees: claviska
-
----
-
-### What issue are you having?
-Provide a clear and concise description of the problem you're facing.
-
-### Describe the solution you'd like
-How would you like to see the library solve it?
-
-### Describe alternatives you've considered
-In what ways have you tried to solve this with the current version?

.github/SECURITY.md

@@ -1,7 +1,7 @@
 # Reporting Security Issues
 
-We take security issues in Shoelace very seriously and appreciate your efforts to disclose your findings responsibly.
+We take security issues in Web Awesome very seriously and appreciate your efforts to disclose your findings responsibly.
 
-To report a security issue, email [cory@abeautifulsite.net](mailto:cory@abeautifulsite.net) and include "SHOELACE SECURITY" in the subject line.
+To report a security issue, email [support@fontawesome.com](mailto:support@fontawesome.com) and include "WEB AWESOME SECURITY" in the subject line.
 
 We'll respond as soon as possible and keep you updated throughout the process.

.github/workflows/client_tests.js.yml

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

.github/workflows/node.js.yml

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

.github/workflows/ssr_tests.js.yml

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

.gitignore

@@ -1,7 +1,12 @@
 _site
 .cache
 .DS_Store
-dist
-docs/assets/images/sprite.svg
+package.json
+package-lock.json
+dist/
+dist-cdn/
+docs/public/pagefind
 node_modules
 src/react
+.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

.prettierignore

@@ -1,4 +1,5 @@
 *.hbs
+*.md
 .cache
 .github
 cspell.json
@@ -7,5 +8,9 @@ docs/search.json
 src/components/icon/icons
 src/react/index.ts
 node_modules
+package.json
 package-lock.json
 tsconfig.json
+cdn
+_site
+docs/assets/scripts/prism-downloaded.js

.vscode/extensions.json

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

.vscode/settings.json

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

CONTRIBUTING.md

@@ -1,5 +1,5 @@
-# Contributing to Shoelace
+# Contributing to Web Awesome
 
 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)

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) 2020 A Beautiful Site, LLC
+Copyright (c) 2023 Fonticons, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,6 +1,4 @@
-# Shoelace
-
-A forward-thinking library of web components.
+# Web Awesome
 
 - Works with all frameworks 🧩
 - Works with CDNs 🚛
@@ -9,37 +7,37 @@ A forward-thinking library of web components.
 - Built with accessibility in mind ♿️
 - Open source 😸
 
-Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
+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)
 
 ---
 
-## Shoemakers 🥾
+## Developers ✨
 
-Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace from source. You will need Node >= 14.17 to build and run the project locally.
+Developers can use this documentation to learn how to build Web Awesome from source. You will need Node >= 14.17 to build and run the project locally.
 
-**You don't need to do any of this to use Shoelace!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Shoelace.
+**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 Shoelace?
+### What are you using to build Web Awesome?
 
 Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).
 
 ### 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/shoelace
-cd shoelace
+git clone https://github.com/YOUR_GITHUB_USERNAME/webawesome
+cd webawesome
 npm install
 ```
 
@@ -61,32 +59,22 @@ To generate a production build, run the following command.
 npm run build
 ```
 
+You can also run `npm run build:serve` to start an [`http-server`](https://www.npmjs.com/package/http-server) instance on `http://localhost:4000` after the build completes, so you can preview the production build.
+
 ### Creating New Components
 
-To scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name.
+To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
 
 ```bash
-npm run create sl-tag-name
+npm run create wa-tag-name
 ```
 
 This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
 
 ### Contributing
 
-Shoelace is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
+Web Awesome is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
 
 ## License
 
-Shoelace is designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It’s available under the terms of the MIT license.
-
-Designing, developing, and supporting this library requires a lot of time, effort, and skill. I’d like to keep it open source so everyone can use it, but that doesn’t provide me with any income.
-
-**Therefore, if you’re using my software to make a profit,** I respectfully ask that you help [fund its development](https://github.com/sponsors/claviska) by becoming a sponsor. There are multiple tiers to choose from with benefits at every level, including prioritized support, bug fixes, feature requests, and advertising.
-
-👇 Your support is very much appreciated! 👇
-
-- [Become a sponsor](https://github.com/sponsors/claviska)
-- [Star on GitHub](https://github.com/shoelace-style/shoelace/stargazers)
-- [Follow on Twitter](https://twitter.com/shoelace_style)
-
-Whether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾
+Web Awesome is available under the terms of the MIT license.

cspell.json

@@ -5,6 +5,7 @@
     "allowfullscreen",
     "animationend",
     "Animista",
+    "APG",
     "apos",
     "atrule",
     "autocorrect",
@@ -20,13 +21,14 @@
     "callouts",
     "chatbubble",
     "checkmark",
-    "claviska",
     "Clippy",
     "codebases",
     "codepen",
     "colocated",
     "colour",
     "combobox",
+    "Commonmark",
+    "compat",
     "Composability",
     "Consolas",
     "contenteditable",
@@ -37,19 +39,26 @@
     "crutchcorn",
     "csspart",
     "cssproperty",
+    "cssstate",
     "datetime",
     "describedby",
     "Docsify",
     "dogfood",
     "dropdowns",
     "easings",
+    "ecommerce",
+    "endfor",
+    "endraw",
+    "endregion",
     "enterkeyhint",
     "eqeqeq",
     "erroneou",
     "errormessage",
     "esbuild",
+    "exportmaps",
     "exportparts",
     "fieldsets",
+    "fontawesome",
     "formaction",
     "formdata",
     "formenctype",
@@ -66,6 +75,7 @@
     "haspopup",
     "heroicons",
     "hexa",
+    "Hotwire",
     "Iconoir",
     "Iframes",
     "iife",
@@ -74,38 +84,50 @@
     "ionicons",
     "jsDelivr",
     "jsfiddle",
-    "jsonata",
     "keydown",
     "keyframes",
+    "keymaker",
+    "Konnor",
     "Kool",
     "labelledby",
     "Laravel",
-    "LaViska",
     "linkify",
     "listbox",
     "listitem",
     "litelement",
+    "longform",
     "lowercasing",
     "Lucide",
     "maxlength",
     "Menlo",
     "menuitemcheckbox",
     "menuitemradio",
+    "metaframeworks",
     "middlewares",
     "minlength",
+    "minmax",
     "monospace",
     "mousedown",
+    "mousemove",
+    "mouseout",
     "mouseup",
     "multiselectable",
     "nextjs",
     "nocheck",
+    "noindex",
     "noopener",
     "noreferrer",
     "novalidate",
+    "Numberish",
+    "oklab",
+    "oklch",
+    "onscrollend",
     "outdir",
     "ParamagicDev",
     "peta",
     "petabit",
+    "Preact",
+    "preconnect",
     "prismjs",
     "progressbar",
     "radiogroup",
@@ -128,37 +150,52 @@
     "scroller",
     "Segoe",
     "semibold",
+    "shadowrootmode",
+    "Shortcode",
+    "Shortcodes",
     "sitedir",
     "slotchange",
     "smartquotes",
     "spacebar",
     "stylesheet",
+    "svgs",
     "Tabbable",
     "tabindex",
     "tabler",
     "tablist",
     "tabpanel",
+    "tbody",
     "templating",
     "tera",
     "testid",
     "textareas",
     "textfield",
+    "thead",
+    "Themer",
     "tinycolor",
     "transitionend",
     "treeitem",
+    "treeshaking",
     "Triaging",
     "turbolinks",
     "typeof",
     "unbundles",
     "unbundling",
     "unicons",
+    "unsanitized",
     "unsupportive",
     "valpha",
     "valuenow",
     "valuetext",
+    "viewports",
+    "Vuejs",
+    "WCAG",
+    "webawesome",
+    "webawesomer",
     "WEBP",
     "Webpacker",
-    "wordmark"
+    "xmark",
+    "zoomable"
   ],
   "ignorePaths": [
     "package.json",

custom-elements-manifest.js

@@ -1,21 +1,13 @@
-import { generateCustomData } from 'cem-plugin-vs-code-custom-data-generator';
+import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
+import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
+// import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
 import { parse } from 'comment-parser';
-import { pascalCase } from 'pascal-case';
-import commandLineArgs from 'command-line-args';
 import fs from 'fs';
+import { pascalCase } from 'pascal-case';
 
 const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
-
-const { outdir } = commandLineArgs([
-  { name: 'litelement', type: String },
-  { name: 'analyze', defaultOption: true },
-  { name: 'outdir', type: String }
-]);
-
-function noDash(string) {
-  return string.replace(/^\s?-/, '').trim();
-}
+const outdir = 'dist-cdn';
 
 function replace(string, terms) {
   terms.forEach(({ from, to }) => {
@@ -28,24 +20,26 @@ function replace(string, terms) {
 export default {
   globs: ['src/components/**/*.ts'],
   exclude: ['**/*.styles.ts', '**/*.test.ts'],
+  litelement: true,
+  outdir,
   plugins: [
     // Append package data
     {
-      name: 'shoelace-package-data',
+      name: 'wa-package-data',
       packageLinkPhase({ customElementsManifest }) {
         customElementsManifest.package = { name, description, version, author, homepage, license };
-      }
+      },
     },
 
     // Parse custom jsDoc tags
     {
-      name: 'shoelace-custom-tags',
+      name: 'wa-custom-tags',
       analyzePhase({ ts, node, moduleDoc }) {
         switch (node.kind) {
           case ts.SyntaxKind.ClassDeclaration: {
             const className = node.name.getText();
             const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
-            const customTags = ['animation', 'dependency', 'documentation', 'since', 'status', 'title'];
+            const customTags = ['dependency', 'documentation', 'since', 'status', 'title'];
             let customComments = '/**';
 
             node.jsDoc?.forEach(jsDoc => {
@@ -58,20 +52,12 @@ export default {
               });
             });
 
+            // This is what allows us to map JSDOC comments to ReactWrappers.
+            classDoc['jsDoc'] = node.jsDoc?.map(jsDoc => jsDoc.getFullText()).join('\n');
+
             const parsed = parse(`${customComments}\n */`);
             parsed[0].tags?.forEach(t => {
               switch (t.tag) {
-                // Animations
-                case 'animation':
-                  if (!Array.isArray(classDoc['animations'])) {
-                    classDoc['animations'] = [];
-                  }
-                  classDoc['animations'].push({
-                    name: t.name,
-                    description: noDash(t.description)
-                  });
-                  break;
-
                 // Dependencies
                 case 'dependency':
                   if (!Array.isArray(classDoc['dependencies'])) {
@@ -97,16 +83,17 @@ export default {
                   classDoc[t.tag].push({
                     name: t.name,
                     description: t.description,
-                    type: t.type || undefined
+                    type: t.type || undefined,
                   });
               }
             });
           }
         }
-      }
+      },
     },
+
     {
-      name: 'shoelace-react-event-names',
+      name: 'wa-react-event-names',
       analyzePhase({ ts, node, moduleDoc }) {
         switch (node.kind) {
           case ts.SyntaxKind.ClassDeclaration: {
@@ -115,15 +102,18 @@ export default {
 
             if (classDoc?.events) {
               classDoc.events.forEach(event => {
+                if (!event.name) return;
                 event.reactName = `on${pascalCase(event.name)}`;
+                event.eventName = `${pascalCase(event.name)}Event`;
               });
             }
           }
         }
-      }
+      },
     },
+
     {
-      name: 'shoelace-translate-module-paths',
+      name: 'wa-translate-module-paths',
       packageLinkPhase({ customElementsManifest }) {
         customElementsManifest?.modules?.forEach(mod => {
           //
@@ -137,7 +127,7 @@ export default {
           //
           const terms = [
             { from: /^src\//, to: '' }, // Strip the src/ prefix
-            { from: /\.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
+            { from: /\.(t|j)sx?$/, to: '.js' }, // Convert .ts to .js
           ];
 
           mod.path = replace(mod.path, terms);
@@ -156,12 +146,40 @@ export default {
             }
           }
         });
-      }
+      },
     },
+
     // Generate custom VS Code data
-    generateCustomData({
+    customElementVsCodePlugin({
       outdir,
-      cssFileName: null
-    })
-  ]
+      cssFileName: null,
+      referencesTemplate: (_, tag) => [
+        {
+          name: 'Documentation',
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`,
+        },
+      ],
+    }),
+
+    customElementJetBrainsPlugin({
+      outdir: './dist-cdn',
+      excludeCss: true,
+      packageJson: false,
+      referencesTemplate: (_, tag) => {
+        return {
+          name: 'Documentation',
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`,
+        };
+      },
+    }),
+
+    //
+    // TODO - figure out why this broke when events were updated
+    //
+    // customElementVuejsPlugin({
+    //   outdir: './dist/types/vue',
+    //   fileName: 'index.d.ts',
+    //   componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.js`
+    // })
+  ],
 };

docs/.eleventy.js

@@ -0,0 +1,227 @@
+import * as path from 'node:path';
+import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
+import { codeExamplesPlugin } from './_utils/code-examples.js';
+import { copyCodePlugin } from './_utils/copy-code.js';
+import { currentLink } from './_utils/current-link.js';
+import { highlightCodePlugin } from './_utils/highlight-code.js';
+import { markdown } from './_utils/markdown.js';
+import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js';
+// import { formatCodePlugin } from './_utils/format-code.js';
+import litPlugin from '@lit-labs/eleventy-plugin-lit';
+import { readFile } from 'fs/promises';
+import nunjucks from 'nunjucks';
+import componentList from './_data/componentList.js';
+import * as filters from './_utils/filters.js';
+import { outlinePlugin } from './_utils/outline.js';
+import { replaceTextPlugin } from './_utils/replace-text.js';
+import { searchPlugin } from './_utils/search.js';
+
+import process from 'process';
+
+import * as url from 'url';
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
+const isAlpha = process.argv.includes('--alpha');
+const isDev = process.argv.includes('--develop');
+
+const globalData = {
+  package: packageData,
+  isAlpha,
+  layout: 'page.njk',
+
+  server: {
+    head: '',
+    loginOrAvatar: '',
+    flashes: '',
+  },
+};
+
+const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
+const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
+
+export default function (eleventyConfig) {
+  /**
+   * This is the guard we use for now to make sure our final built files dont need a 2nd pass by the server. This keeps us able to still deploy the bare HTML files on Vercel until the app is ready.
+   */
+  const serverBuild = process.env.WEBAWESOME_SERVER === 'true';
+
+  // NOTE - alpha setting removes certain pages
+  if (isAlpha) {
+    eleventyConfig.ignores.add('**/experimental/**');
+    eleventyConfig.ignores.add('**/layout/**');
+    eleventyConfig.ignores.add('**/patterns/**');
+    eleventyConfig.ignores.add('**/style-utilities/**');
+    eleventyConfig.ignores.add('**/components/code-demo.md');
+    eleventyConfig.ignores.add('**/components/viewport-demo.md');
+  }
+
+  // Add template data
+  for (let name in globalData) {
+    eleventyConfig.addGlobalData(name, globalData[name]);
+  }
+
+  // Template filters - {{ content | filter }}
+  eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
+  eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
+
+  for (let name in filters) {
+    eleventyConfig.addFilter(name, filters[name]);
+  }
+
+  // Shortcodes - {% shortCode arg1, arg2 %}
+  eleventyConfig.addShortcode('cdnUrl', location => {
+    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
+  });
+
+  // Turns `{% server "foo" %} into `{{ server.foo | safe }}` when the WEBAWESOME_SERVER variable is set to "true"
+  eleventyConfig.addShortcode('server', function (property) {
+    if (serverBuild) {
+      return `{{ server.${property} | safe }}`;
+    }
+
+    return '';
+  });
+
+  eleventyConfig.addTransform('second-nunjucks-transform', function NunjucksTransform(content) {
+    // For a server build, we expect a server to run the second transform.
+    if (serverBuild) {
+      return content;
+    }
+
+    // Only run the transform on files nunjucks would transform.
+    if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
+      return content;
+    }
+
+    /** This largely mimics what an app would do and just stubs out what we don't care about. */
+    return nunjucks.renderString(content, {
+      // Stub the server EJS shortcodes.
+      server: {
+        head: '',
+        loginOrAvatar: '',
+        flashes: '',
+      },
+    });
+  });
+
+  // Paired shortcodes - {% shortCode %}content{% endShortCode %}
+  eleventyConfig.addPairedShortcode('markdown', content => markdown.render(content || ''));
+
+  // Helpers
+
+  // Remove elements that have [data-alpha="remove"]
+  eleventyConfig.addPlugin(removeDataAlphaElements({ isAlpha }));
+
+  // Use our own markdown instance
+  eleventyConfig.setLibrary('md', markdown);
+
+  // Add anchors to headings
+  eleventyConfig.addPlugin(anchorHeadingsPlugin({ container: '#content' }));
+
+  // Add an outline to the page
+  eleventyConfig.addPlugin(
+    outlinePlugin({
+      container: '#content',
+      target: '.outline-links',
+      selector: 'h2, h3',
+      ifEmpty: doc => {
+        doc.querySelector('#outline')?.remove();
+      },
+    }),
+  );
+
+  // Add current link classes
+  eleventyConfig.addPlugin(currentLink());
+
+  // Add code examples for `<code class="example">` blocks
+  eleventyConfig.addPlugin(codeExamplesPlugin);
+
+  // Highlight code blocks with Prism
+  eleventyConfig.addPlugin(highlightCodePlugin());
+
+  // Add copy code buttons to code blocks
+  eleventyConfig.addPlugin(copyCodePlugin);
+
+  // Various text replacements
+  eleventyConfig.addPlugin(
+    replaceTextPlugin([
+      // Replace [issue:1234] with a link to the issue on GitHub
+      {
+        replace: /\[pr:([0-9]+)\]/gs,
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>',
+      },
+      // Replace [pr:1234] with a link to the pull request on GitHub
+      {
+        replace: /\[issue:([0-9]+)\]/gs,
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>',
+      },
+      // Replace [discuss:1234] with a link to the discussion on GitHub
+      {
+        replace: /\[discuss:([0-9]+)\]/gs,
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>',
+      },
+    ]),
+  );
+
+  // Build the search index
+  eleventyConfig.addPlugin(
+    searchPlugin({
+      filename: '',
+      selectorsToIgnore: ['code.example'],
+      getContent: doc => doc.querySelector('#content')?.textContent ?? '',
+    }),
+  );
+
+  // Production-only plugins
+  //
+  // TODO - disabled because it takes about a minute to run now
+  //
+  // if (!isDev) {
+  //   // Run Prettier on each file (prod only because it can be slow)
+  //   eleventyConfig.addPlugin(formatCodePlugin());
+  // }
+
+  eleventyConfig.addPassthroughCopy({
+    'docs/assets': 'assets',
+  });
+
+  for (let glob of passThrough) {
+    eleventyConfig.addPassthroughCopy(glob);
+  }
+
+  // SSR plugin
+  // Make sure this is the last thing, we dont want to run the risk of accidentally transforming shadow roots with the nunjucks 2nd transform.
+  if (!isDev) {
+    //
+    // Problematic components in SSR land:
+    //  - animation (breaks on navigation + ssr with Turbo)
+    //  - mutation-observer (why SSR this?)
+    //  - resize-observer (why SSR this?)
+    //  - tooltip (why SSR this?)
+    //
+    const omittedModules = [];
+    const componentModules = componentList
+      .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
+      .map(component => {
+        const name = component.tagName.split(/wa-/)[1];
+        const componentDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join('.', 'dist');
+        return path.join(componentDirectory, 'components', name, `${name}.js`);
+      });
+
+    eleventyConfig.addPlugin(litPlugin, {
+      mode: 'worker',
+      componentModules,
+    });
+  }
+
+  return {
+    markdownTemplateEngine: 'njk',
+    dir: {
+      input: 'docs',
+      includes: '_includes',
+      layouts: '_layouts',
+    },
+    templateFormats: ['njk', 'md'],
+  };
+}

docs/404.md

@@ -0,0 +1,11 @@
+---
+title: Not Found
+description: Sorry, I couldn't find that.
+layout: page
+permalink: 404.html
+noindex: true
+---
+
+<p class="subtitle">{{ description }}</p>
+
+<p>Have you tried searching?</p>

docs/_data/componentList.js

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

docs/_data/components.js

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

docs/_data/componentsBy.js

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

docs/_data/hueRanges.js

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

docs/_data/hues.json

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

docs/_data/palettes.js

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

docs/_includes/base.njk

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
+  <head>
+    {% include 'head.njk' %}
+    <meta name="theme-color" content="#f36944">
+
+    <script type="module" src="/assets/scripts/code-examples.js"></script>
+
+    <script type="module" src="/assets/scripts/scroll.js"></script>
+    <script type="module" src="/assets/scripts/turbo.js"></script>
+    <script type="module" src="/assets/scripts/search.js"></script>
+    <script type="module" src="/assets/scripts/outline.js"></script>
+    {% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar-tweaks.js"></script>{% endif %}
+    <script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>
+
+    {# Docs styles #}
+    <link rel="stylesheet" href="/assets/styles/docs.css" />
+
+    {% block head %}{% endblock %}
+  </head>
+  <body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
+    <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
+    <wa-page view="desktop" disable-navigation-toggle="">
+      <header slot="header" class="wa-split">
+        {# Logo #}
+        <div id="docs-branding">
+          {# Nav toggle #}
+          <wa-button appearance="plain" size="small" data-toggle-nav>
+            <wa-icon name="bars" label="Toggle navigation"></wa-icon>
+          </wa-button>
+
+          <a href="/" aria-label="Web Awesome">
+            <span class="wa-desktop-only">{% include "logo.njk" %}</span>
+            <span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
+          </a>
+          <small id="version-number" class="only-desktop">{{ package.version }}</small>
+          <wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
+        </div>
+
+        <div id="docs-toolbar" class="wa-cluster wa-gap-xs">
+          {# Desktop selectors #}
+          <div class="only-desktop wa-cluster wa-gap-xs">
+            {% include "preset-theme-selector.njk" %}
+            {% include "color-scheme-selector.njk" %}
+          </div>
+
+          {# Search #}
+          <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
+            <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
+            Search
+            <kbd slot="suffix" class="only-desktop">/</kbd>
+          </wa-button>
+
+          {# Login #}
+          {% server "loginOrAvatar" %}
+        </div>
+      </header>
+
+      {# Sidebar #}
+      {% if hasSidebar %}
+        {# Mobile selectors #}
+        <div class="wa-mobile-only" slot="navigation-header">
+          <div class="wa-cluster wa-gap-xs">
+            {% include "preset-theme-selector.njk" %}
+            {% include "color-scheme-selector.njk" %}
+          </div>
+        </div>
+        <div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
+          {% include "sidebar.njk" %}
+        </div>
+      {% endif %}
+
+      {# Outline #}
+      {% if hasOutline %}
+        <aside slot="aside" id="outline" class="docs-aside">
+          <nav id="outline-standard" class="outline-links">
+            <h2><a href="#content">{{ title }}</a></h2>
+          </nav>
+        </aside>
+      {% endif %}
+
+
+      {# Main #}
+      <main id="content">
+        {# Expandable outline #}
+        {% if hasOutline %}
+        <nav id="outline-expandable">
+          <details class="outline-links">
+            <summary>On this page</summary>
+          </details>
+        </nav>
+        {% endif %}
+
+        <div id="flashes">{% server "flashes" %}</div>
+
+        {% block header %}
+          {% include 'breadcrumbs.njk' %}
+          <h1 class="title">{{ title }}</h1>
+        {% endblock %}
+
+        {% block content %}
+          {{ content | safe }}
+        {% endblock %}
+
+        {% block afterContent %}{% endblock %}
+      </main>
+
+      {% include 'search.njk' %}
+    </wa-page>
+
+  </body>
+</html>

docs/_includes/breadcrumbs.njk

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

docs/_includes/color-scheme-selector.njk

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

docs/_includes/component.njk

@@ -1,347 +0,0 @@
-{% extends "default.njk" %}
-
-{# Find the component based on the `tag` front matter #}
-{% set component = getComponent('sl-' + page.fileSlug) %}
-
-{% block content %}
-  {# Determine the badge variant #}
-  {% if component.status == 'stable' %}
-    {% set badgeVariant = 'primary' %}
-  {% elseif component.status == 'experimental' %}
-    {% set badgeVariant = 'warning' %}
-  {% elseif component.status == 'planned' %}
-    {% set badgeVariant = 'neutral' %}
-  {% elseif component.status == 'deprecated' %}
-    {% set badgeVariant = 'danger' %}
-  {% else %}
-    {% set badgeVariant = 'neutral' %}
-  {% endif %}
-
-  {# Header #}
-  <header class="component-header">
-    <h1>{{ component.name | classNameToComponentName }}</h1>
-
-    <div class="component-header__tag">
-      <code>&lt;{{ component.tagName }}&gt; | {{ component.name }}</code>
-    </div>
-
-    <div class="component-header__info">
-      <sl-badge variant="neutral" pill>
-        Since {{component.since or '?' }}
-      </sl-badge>
-      <sl-badge variant="{{ badgeVariant }}" pill style="text-transform: capitalize;">
-        {{ component.status }}
-      </sl-badge>
-    </div>
-  </header>
-
-  <p class="component-summary">
-    {% if component.summary %}
-      {{ component.summary | markdownInline | safe }}
-    {% endif %}
-  </p>  
-  
-  {# Markdown content #}
-  {{ content | safe }}
-
-  {# Importing #}
-  <h2>Importing</h2>
-  <p>
-    If you're using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use 
-    any of the following snippets to <a href="/getting-started/installation#cherry-picking">cherry pick</a> this component.
-  </p>
-
-  <sl-tab-group>
-    <sl-tab slot="nav" panel="script">Script</sl-tab>
-    <sl-tab slot="nav" panel="import">Import</sl-tab>
-    <sl-tab slot="nav" panel="bundler">Bundler</sl-tab>
-    <sl-tab slot="nav" panel="react">React</sl-tab>
-
-    <sl-tab-panel name="script">
-      <p>
-        To import this component from <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace">the CDN</a> 
-        using a script tag:
-      </p>
-      <pre><code class="language-html">&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/dist/{{ component.path }}&quot;&gt;&lt;/script&gt;</code></pre>
-    </sl-tab-panel>
-
-    <sl-tab-panel name="import">
-      <p>
-        To import this component from <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace">the CDN</a> 
-        using a JavaScript import:
-      </p>
-      <pre><code class="language-js">import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/dist/{{ component.path }}';</code></pre>
-    </sl-tab-panel>
-
-    <sl-tab-panel name="bundler">
-      <p>
-        To import this component using <a href="{{ rootUrl('/getting-started/installation#bundling') }}">a bundler</a>:
-      </p>
-      <pre><code class="language-js">import '@shoelace-style/shoelace/dist/{{ component.path }}';</code></pre>
-    </sl-tab-panel>
-
-    <sl-tab-panel name="react">
-      <p>
-        To import this component as a <a href="/frameworks/react">React component</a>:
-      </p>
-      <pre><code class="language-js">import { {{ component.name }} } from '@shoelace-style/shoelace/dist/react';</code></pre>
-    </sl-tab-panel>
-  </sl-tab-group>
-
-  {# Slots #}
-  {% if component.slots.length %}
-    <h2>Slots</h2>
-
-    <table>
-      <thead>
-        <tr>
-          <th class="table-name">Name</th>
-          <th class="table-description">Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for slot in component.slots %}
-          <tr>
-            <td class="nowrap">
-              {% if slot.name %}
-                <code>{{ slot.name }}</code>
-              {% else %}
-                (default)
-              {% endif %}
-            </td>
-            <td>{{ slot.description | markdownInline | safe }}</td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#slots') }}">using slots</a>.</em></p>
-  {% endif %}
-
-  {# Properties #}
-  {% if component.properties.length %}
-    <h2>Properties</h2>
-
-    <table>
-      <thead>
-        <tr>
-          <th class="table-name">Name</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>
-              <code class="nowrap">{{ prop.name }}</code>
-              {% if prop.attribute != prop.name %}
-                <br>
-                <sl-tooltip content="This attribute is different from its property">
-                  <small>
-                    <code class="nowrap">
-                      {{ prop.attribute }}
-                    </code>
-                  </small>
-                </sl-tooltip>
-              {% endif %}
-            </td>
-            <td>
-              {{ prop.description | markdownInline | safe }}
-            </td>
-            <td style="text-align: center;">
-              {% if prop.reflects %}
-                <sl-icon label="yes" name="check-lg"></sl-icon>
-              {% endif %}
-            </td>
-            <td>
-              {% if prop.type.text %}
-                <code>{{ prop.type.text | markdownInline | safe }}</code>
-              {% else %}
-                -
-              {% endif %}
-            </td>
-            <td>
-              {% if prop.default %}
-                <code>{{ prop.default | markdownInline | safe }}</code>
-              {% else %}
-                -
-              {% endif %}
-            </td>
-          </tr>
-        {% endfor %}
-        <tr>
-          <td class="nowrap"><code>updateComplete</code></td>
-          <td>
-            A read-only promise that resolves when the component has
-            <a href="/getting-started/usage?id=component-rendering-and-updating">finished updating</a>.
-          </td>
-          <td></td>
-          <td></td>
-          <td></td>
-        </tr>
-      </tbody>
-    </table>
-
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#properties') }}">attributes and properties</a>.</em></p>
-  {% endif %}
-
-  {# Events #}
-  {% if component.events.length %}
-    <h2>Events</h2>
-
-    <table>
-      <thead>
-        <tr>
-          <th class="table-name" data-flavor="html">Name</th>
-          <th class="table-name" data-flavor="react">React Event</th>
-          <th class="table-description">Description</th>
-          <th class="table-event-detail">Event Detail</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for event in component.events %}
-          <tr>
-            <td data-flavor="html"><code class="nowrap">{{ event.name }}</code></td>
-            <td data-flavor="react"><code class="nowrap">{{ event.reactName }}</code></td>
-            <td>{{ event.description | markdownInline | safe }}</td>
-            <td>
-              {% if event.type.text %}
-                <code>{{ event.type.text }}</code>
-              {% else %}
-                -
-              {% endif %}
-            </td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#events') }}">events</a>.</em></p>
-  {% endif %}
-
-  {# Methods #}
-  {% if component.methods.length %}
-    <h2>Methods</h2>
-
-    <table>
-      <thead>
-        <tr>
-          <th class="table-name">Name</th>
-          <th class="table-description">Description</th>
-          <th class="table-arguments">Arguments</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for method in component.methods %}
-          <tr>
-            <td class="nowrap"><code>{{ method.name }}()</code></td>
-            <td>{{ method.description | markdownInline | safe }}</td>
-            <td>
-              {% if method.parameters.length %}
-                <code>
-                  {% for param in method.parameters %}
-                    {{ param.name }}: {{ param.type.text }}{% if not loop.last %},{% endif %}
-                  {% endfor %}
-                </code>
-              {% else %}
-                -
-              {% endif %}
-            </td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#methods') }}">methods</a>.</em></p>
-  {% endif %}
-
-  {# Custom Properties #}
-  {% if component.cssProperties.length %}
-    <h2>Custom Properties</h2>
-
-    <table>
-      <thead>
-        <tr>
-          <th class="table-name">Name</th>
-          <th class="table-description">Description</th>
-          <th class="table-default">Default</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for cssProperty in component.cssProperties %}
-          <tr>
-            <td class="nowrap"><code>{{ cssProperty.name }}</code></td>
-            <td>{{ cssProperty.description | markdownInline | safe }}</td>
-            <td>{{ cssProperty.default }}</td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#custom-properties') }}">customizing CSS custom properties</a>.</em></p>
-  {% endif %}
-
-  {# CSS Parts #}
-  {% if component.cssParts.length %}
-    <h2>Parts</h2>
-
-    <table>
-      <thead>
-        <tr>
-          <th class="table-name">Name</th>
-          <th class="table-description">Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for cssPart in component.cssParts %}
-          <tr>
-            <td class="nowrap"><code>{{ cssPart.name }}</code></td>
-            <td>{{ cssPart.description | markdownInline | safe }}</td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#component-parts') }}">customizing CSS parts</a>.</em></p>
-  {% endif %}
-
-  {# Animations #}
-  {% if component.animations.length %}
-    <h2>Animations</h2>
-
-    <table>
-      <thead>
-        <tr>
-          <th class="table-name">Name</th>
-          <th class="table-description">Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for animation in component.animations %}
-          <tr>
-            <td class="nowrap"><code>{{ animation.name }}</code></td>
-            <td>{{ animation.description | markdownInline | safe }}</td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#animations') }}">customizing animations</a>.</em></p>
-  {% endif %}
-
-  {# Dependencies #}
-  {% if component.dependencies.length %}
-    <h2>Dependencies</h2>
-
-    <p>This component automatically imports the following dependencies.</p>
-    
-    <ul>
-      {% for dependency in component.dependencies %}
-        <li><code>&lt;{{ dependency }}&gt;</code></li>
-      {% endfor %}
-    </ul>
-  {% endif %}
-{% endblock %}

docs/_includes/contrast-table.njk

@@ -0,0 +1,52 @@
+<table class="colors wa-palette-{{ paletteId }} contrast-table" data-min-contrast="{{ minContrast }}">
+  <thead>
+    <tr>
+      <th></th>
+      {% for tint_bg in tints -%}
+        {% for tint_fg in tints | reverse -%}
+          {% if (tint_fg - tint_bg) | abs == difference %}
+          <th>{{ tint_fg }} on {{ tint_bg }}</th>
+          {% endif %}
+        {%- endfor -%}
+      {%- endfor %}
+    </tr>
+  </thead>
+{% for hue in hues -%}
+<tr data-hue="{{ hue }}" v-if="'{{hue}}' in paletteScales">
+  <th>{{ hue | capitalize }}</th>
+  {% for tint_bg in tints -%}
+    {% set color_bg = palettes[paletteId][hue][tint_bg] %}
+    {% for tint_fg in tints | reverse -%}
+      {% set color_fg = palettes[paletteId][hue][tint_fg] %}
+      {% if (tint_fg - tint_bg) | abs == difference %}
+      {% set contrast_wcag = '' %}
+      {% if color_fg and color_bg -%}
+        {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
+      {%- endif %}
+      <td v-for="contrast of [contrasts.{{ hue }}['{{ tint_bg }}']['{{ tint_fg }}']]"
+      data-tint-bg="{{ tint_bg }}" data-tint-fg="{{ tint_fg }}" data-original-contrast="{{ contrast_wcag }}">
+        <div v-content:number="contrast.value"
+        class="color swatch" :class="{
+          'value-up': contrast.value - contrast.original > 0.0001,
+          'value-down': contrast.original - contrast.value > 0.0001,
+          'contrast-fail': contrast.value < {{ minContrast }}
+        }"
+        style="--color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})"
+        :style="{
+          '--color': contrast.bgColor,
+          color: contrast.fgColor,
+        }"
+        >
+          {% if contrast_wcag %}
+          {{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
+          {% else %}
+          {{ tint_fg }} on {{ tint_bg }}
+          {% endif %}
+        </div>
+      </td>
+      {% endif %}
+    {%- endfor -%}
+  {%- endfor -%}
+</tr>
+{%- endfor %}
+</table>

docs/_includes/default.njk

@@ -1,147 +0,0 @@
-<!DOCTYPE html>
-<html
-  lang="en"
-  data-layout="{{ layout }}"
-  data-shoelace-version="{{ meta.version }}"
->
-  <head>
-    {# Metadata #}
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="{{ meta.description }}" />
-    <title>{{ meta.title }}</title>
-
-    {# Opt out of Turbo caching #}
-    <meta name="turbo-cache-control">
-
-    {# Stylesheets #}
-    <link rel="stylesheet" href="{{ assetUrl('styles/docs.css') }}" />
-    <link rel="stylesheet" href="{{ assetUrl('styles/code-previews.css') }}" />
-    <link rel="stylesheet" href="{{ assetUrl('styles/search.css') }}" />
-
-    {# Favicons #}
-    <link rel="icon" href="{{ assetUrl('images/logo.svg') }}" type="image/x-icon" />
-
-    {# Twitter Cards #}
-    <meta name="twitter:card" content="summary" />
-    <meta name="twitter:creator" content="shoelace_style" />
-    <meta name="twitter:image" content="{{ assetUrl(meta.image, true) }}" />
-
-    {# OpenGraph #}
-    <meta property="og:url" content="{{ rootUrl(page.url, true) }}" />
-    <meta property="og:title" content="{{ meta.title }}" />
-    <meta property="og:description" content="{{ meta.description }}" />
-    <meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
-
-    {# Shoelace #}
-    <link rel="stylesheet" href="/dist/themes/light.css" />
-    <link rel="stylesheet" href="/dist/themes/dark.css" />
-    <script type="module" src="/dist/shoelace-autoloader.js"></script>
-
-    {# Set the initial theme and menu states here to prevent flashing #}
-    <script>
-      (() => {
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const theme = localStorage.getItem('theme');
-        document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (!theme && prefersDark));
-      })();
-    </script>
-
-    {# Turbo + Scroll positioning #}
-    <script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
-    <script src="{{ assetUrl('scripts/docs.js') }}" defer></script>
-    <script src="{{ assetUrl('scripts/code-previews.js') }}" defer></script>
-    <script src="{{ assetUrl('scripts/lunr.js') }}" defer></script>
-    <script src="{{ assetUrl('scripts/search.js') }}" defer></script>
-  </head>
-  <body>
-    <a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
-      Skip to main content
-    </a>
-
-    {# Menu toggle #}
-    <button id="menu-toggle" type="button" aria-label="Menu">
-      <svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
-        <g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
-          <path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
-        </g>
-      </svg>
-    </button>
-
-    {# Icon toolbar #}
-    <div id="icon-toolbar">
-      {# GitHub #}
-      <a href="https://github.com/shoelace-style/shoelace" title="View Shoelace on GitHub">
-        <sl-icon name="github"></sl-icon>
-      </a>
-
-      {# Twitter #}
-      <a href="https://twitter.com/shoelace_style" title="Follow Shoelace on Twitter">
-        <sl-icon name="twitter"></sl-icon>
-      </a>
-
-      {# Theme toggle #}
-      <button
-        id="theme-toggle"
-        type="button"
-        aria-label="Toggle light and dark theme"
-        title="Toggle theme (press backslash)"
-      >
-        <sl-icon class="only-light" name="sun-fill"></sl-icon>
-        <sl-icon class="only-dark" name="moon-fill"></sl-icon>
-      </button>
-    </div>
-
-    <aside id="sidebar" data-preserve-scroll>
-      <header>
-        <a href="/">
-          <img src="{{ assetUrl('images/wordmark.svg') }}" alt="Shoelace" />
-        </a>
-        <div class="sidebar-version">
-          {{ meta.version }}
-        </div>
-      </header>
-
-      <div class="sidebar-buttons">
-        <sl-button size="small" class="repo-button repo-button--sponsor" href="https://github.com/sponsors/claviska" target="_blank">
-          <sl-icon slot="prefix" name="heart"></sl-icon> Sponsor
-        </sl-button>
-        <sl-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
-          <sl-icon slot="prefix" name="github"></sl-icon> Code
-        </sl-button>
-        <sl-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
-          <sl-icon slot="prefix" name="twitter"></sl-icon> Follow
-        </sl-button>
-      </div>
-
-      <button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
-        <sl-icon name="search"></sl-icon>
-        <span>Search</span>
-      </button>
-
-      <nav>
-        {% include 'sidebar.njk' %}
-      </nav>
-    </aside>
-
-    {# Content #}
-    <main>
-      <a id="main-content"></a>
-      <article id="content" class="content{% if toc %} content--with-toc{% endif %}">
-        {% if toc %}
-          <div class="content__toc">
-            <ul>
-              <li class="top"><a href="#">{{ meta.title }}</a></li>
-            </ul>
-          </div>
-        {% endif %}
-
-        <div class="content__body">
-          {% block content %}
-            {{ content | safe }}
-          {% endblock %}
-        </div>
-      </article>
-    </main>
-  </body>
-</html>

docs/_includes/grouped-pages.njk

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

docs/_includes/head.njk

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

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

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

docs/_includes/logo-simple.njk

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

@@ -0,0 +1,13 @@
+<svg width="105" height="16" viewBox="0 0 105 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M78.0517 11.8597C78.464 12.2456 79.2272 12.5 79.8675 12.5C81.0605 12.5 81.9903 11.8333 81.9903 10.693C81.9903 9.84215 81.4727 9.35093 80.5078 8.94743L79.8412 8.66674C79.4815 8.51762 79.3412 8.41235 79.3412 8.19306C79.3412 7.92991 79.5605 7.82465 79.8587 7.82465C80.169 7.82465 80.3376 7.95507 80.4921 8.07458C80.5297 8.1037 80.5665 8.1322 80.6043 8.15797C80.7359 8.25446 80.8675 8.28955 80.9903 8.28955C81.3236 8.28955 81.6657 8.00008 81.6657 7.61413C81.6657 7.47378 81.6219 7.31589 81.4903 7.16677C81.3499 7.0001 80.8587 6.49134 79.8412 6.50011C78.6921 6.50011 77.8149 7.17554 77.8149 8.2106C77.8149 9.02638 78.3588 9.55268 79.2798 9.95618L79.8763 10.2193C80.2798 10.3948 80.464 10.4825 80.464 10.7544C80.464 11.0351 80.271 11.1755 79.8675 11.1755C79.3642 11.1755 79.0247 10.8964 78.8489 10.752C78.8133 10.7228 78.7844 10.699 78.7623 10.6842C78.657 10.6141 78.5342 10.579 78.4202 10.579C78.0781 10.579 77.7535 10.8421 77.7447 11.2456C77.7447 11.4737 77.8588 11.6754 78.0517 11.8597Z" fill="currentColor"/>
+<path d="M97.9115 7.2808C97.9115 6.83344 97.5957 6.50012 97.1572 6.50011C96.8502 6.50011 96.6396 6.64923 96.394 7.05274L94.9642 9.35094L93.5344 7.05274C93.2888 6.64923 93.0783 6.50011 92.7713 6.50011C92.3327 6.50011 92.0169 6.83344 92.0169 7.2808V11.7369C92.0169 12.1754 92.3415 12.5 92.7713 12.5C93.2011 12.5 93.5257 12.1754 93.5257 11.7369V9.71058L94.28 10.9123C94.4906 11.2456 94.6835 11.3772 94.9642 11.3772C95.2449 11.3772 95.4379 11.2456 95.6484 10.9123L96.4028 9.71058V11.7369C96.4028 12.1754 96.7273 12.5 97.1572 12.5C97.587 12.5 97.9115 12.1754 97.9115 11.7369L97.9115 7.2808Z" fill="currentColor"/>
+<path d="M100.516 11.6316C100.516 12.0702 100.84 12.3947 101.279 12.3947L104.033 12.3947C104.428 12.3947 104.726 12.1053 104.726 11.7105C104.726 11.3246 104.437 11.0351 104.033 11.0351L102.024 11.0351V10.0264L103.235 10.0264C103.603 10.0264 103.875 9.75445 103.875 9.3948C103.875 9.03516 103.603 8.76324 103.235 8.76324L102.024 8.76324V7.96501L103.928 7.96501C104.323 7.96501 104.621 7.67554 104.621 7.28081C104.621 6.89485 104.331 6.60539 103.928 6.60539L101.279 6.60538C100.84 6.60538 100.516 6.92994 100.516 7.36853V11.6316Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86.8778 6.50011C88.6322 6.50011 90.0094 7.82465 90.0094 9.50006C90.0094 11.1842 88.6322 12.5 86.8778 12.5C85.1235 12.5 83.7639 11.1842 83.7639 9.50006C83.7639 7.81588 85.1323 6.50011 86.8778 6.50011ZM86.8866 7.88605C85.948 7.88605 85.3077 8.54393 85.3077 9.50006C85.3077 10.4649 85.9393 11.1141 86.8866 11.1141C87.8164 11.1141 88.4655 10.4474 88.4655 9.50006C88.4655 8.56148 87.8076 7.88605 86.8866 7.88605Z" fill="currentColor"/>
+<path d="M72.1721 12.3947C71.7335 12.3947 71.4089 12.0702 71.4089 11.6316V7.36852C71.4089 6.92993 71.7335 6.60538 72.1721 6.60538L74.8211 6.60538C75.2246 6.60538 75.5141 6.89485 75.5141 7.2808C75.5141 7.67553 75.2159 7.965 74.8211 7.965L72.9177 7.965V8.76323L74.1282 8.76323C74.4966 8.76323 74.7685 9.03515 74.7685 9.3948C74.7685 9.75444 74.4966 10.0264 74.1282 10.0264L72.9177 10.0264V11.0351L74.9264 11.0351C75.3299 11.0351 75.6194 11.3246 75.6194 11.7105C75.6194 12.1053 75.3211 12.3947 74.9264 12.3947L72.1721 12.3947Z" fill="currentColor"/>
+<path d="M69.4429 7.23694C69.443 6.83344 69.1009 6.50012 68.6886 6.50012C68.364 6.50012 68.1009 6.68432 67.9868 7.00011L66.943 9.8597L65.9781 7.07028C65.8465 6.70187 65.5834 6.50011 65.2325 6.50011C64.8816 6.50011 64.6185 6.70187 64.4869 7.07028L63.522 9.8597L62.4694 6.97379C62.3641 6.67555 62.101 6.50011 61.7764 6.50011C61.3642 6.50011 61.0221 6.83344 61.0221 7.23694C61.0221 7.3422 61.0396 7.43869 61.101 7.57904L62.8115 11.9912C62.9343 12.3246 63.1799 12.5 63.5132 12.5C63.8378 12.5 64.0834 12.3246 64.2062 11.9912L65.2325 9.21059L66.2588 11.9912C66.3816 12.3246 66.6272 12.5 66.9518 12.5C67.2851 12.5 67.5307 12.3246 67.6535 11.9912L69.364 7.57904C69.4166 7.44747 69.4429 7.35098 69.4429 7.23694Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M60.0269 11.4123C60.0795 11.5439 60.1058 11.6755 60.1058 11.7807C60.1058 12.193 59.7901 12.5 59.3602 12.5C59.0357 12.5 58.7901 12.3158 58.6497 11.9561L58.5269 11.6491L56.4568 11.6491L56.334 11.9561C56.1936 12.3158 55.948 12.5 55.6235 12.5C55.1936 12.5 54.8779 12.193 54.8779 11.7807C54.8779 11.6755 54.9042 11.5439 54.9568 11.4123L56.7726 7.0001C56.9041 6.67555 57.1498 6.50011 57.4919 6.50011C57.834 6.50011 58.0796 6.67555 58.2111 7.00011L60.0269 11.4123ZM57.4919 8.74568L56.9041 10.4386L58.0796 10.4386L57.4919 8.74568Z" fill="currentColor"/>
+<path d="M35.6665 6.50013C36.0788 6.50013 36.4209 6.83346 36.4209 7.23696C36.4209 7.35099 36.3946 7.44748 36.3419 7.57906L34.6314 11.9912C34.5086 12.3246 34.263 12.5 33.9297 12.5C33.6051 12.5 33.3595 12.3246 33.2367 11.9912L32.2104 9.2106L31.1841 11.9912C31.0613 12.3246 30.8157 12.5 30.4912 12.5C30.1578 12.5 29.9122 12.3246 29.7894 11.9912L28.0789 7.57906C28.0175 7.43871 28 7.34222 28 7.23696C28 6.83346 28.3421 6.50013 28.7544 6.50013C29.0789 6.50013 29.3421 6.67557 29.4473 6.97381L30.4999 9.85971L31.4648 7.07029C31.5964 6.70188 31.8596 6.50013 32.2104 6.50013C32.5613 6.50013 32.8245 6.70188 32.956 7.07029L33.9209 9.85971L34.9648 7.00012C35.0788 6.68434 35.3419 6.50013 35.6665 6.50013Z" fill="currentColor"/>
+<path d="M38.3868 11.6316C38.3868 12.0702 38.7114 12.3947 39.15 12.3947H41.9043C42.299 12.3947 42.5973 12.1052 42.5973 11.7105C42.5973 11.3246 42.3078 11.0351 41.9043 11.0351H39.8956V10.0263H41.1061C41.4745 10.0263 41.7464 9.75442 41.7464 9.39478C41.7464 9.03514 41.4745 8.76321 41.1061 8.76321H39.8956V7.96498H41.799C42.1938 7.96498 42.492 7.67552 42.492 7.28079C42.492 6.89483 42.2025 6.60536 41.799 6.60536H39.15C38.7114 6.60536 38.3868 6.92992 38.3868 7.36851V11.6316Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.5021 10.6754C49.5021 10.0176 49.1425 9.53512 48.5372 9.28952C48.7653 9.03514 48.8881 8.70181 48.8881 8.31585C48.8881 7.31587 48.0723 6.60536 46.932 6.60536H45.6075C45.1689 6.60536 44.8443 6.92992 44.8443 7.36851V11.6316C44.8443 12.0702 45.1689 12.3947 45.6075 12.3947H47.546C48.6776 12.3947 49.5021 11.6754 49.5021 10.6754ZM46.2917 7.87727H46.8355C47.1864 7.87727 47.4145 8.07024 47.4145 8.38603C47.4145 8.70181 47.1864 8.89479 46.8355 8.89479H46.2917V7.87727ZM48.0285 10.614C48.0285 10.9386 47.818 11.1228 47.4496 11.1228H46.2917V10.1053H47.4496C47.818 10.1053 48.0285 10.2895 48.0285 10.614Z" fill="currentColor"/>
+<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/page-card.njk

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

docs/_includes/page-demo.njk

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

docs/_includes/palette.njk

@@ -0,0 +1,36 @@
+<table class="colors main wa-palette-{{ paletteId }} static-palette">
+  <thead>
+    <tr>
+      <th></th>
+      <th class="core-column">Core tint</th>
+      {% for tint in tints -%}
+      <th>{{ tint }}</th>
+      {%- endfor %}
+    </tr>
+  </thead>
+  <tbody>
+    {%- set hueBefore = hues[hues|length - 2] -%}
+    {% for hue in hues -%}
+      {% set scale = palettes[paletteId][hue] %}
+      {% set coreTint = scale.maxChromaTint %}
+      {%- set coreColor = scale[coreTint] -%}
+      {%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
+      <tr data-hue="{{ hue }}" class="color-scale" style="--swatch-text-color: light-dark(var(--wa-color-{{ hue }}-10), white)">
+        <th>{{ hue | capitalize }}</th>
+        <td class="core-column" style="--color: var(--wa-color-{{ hue }})">
+          <div class="color swatch" style="color-scheme: {{ 'light' if scale.maxChromaTint > 60 else 'dark' }};">
+            {{ scale.maxChromaTint }}
+          </div>
+        </td>
+        {% for tint in tints -%}
+        {%- set color = scale[tint] -%}
+        <td style="--color: var(--wa-color-{{ hue }}-{{ tint }}); color-scheme: ">
+          <div class="color swatch" style="color-scheme: {{ 'light' if tint > 60 else 'dark' }};">
+            <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
+          </div>
+        </td>
+      {%- endfor -%}
+      </tr>
+  </tbody>
+  {% endfor %}
+</table>

docs/_includes/preset-theme-selector.njk

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

docs/_includes/search.njk

@@ -0,0 +1,61 @@
+<wa-dialog id="site-search" no-header light-dismiss>
+  <div id="site-search-container">
+    {# Header #}
+    <header>
+      <div id="site-search-input-wrapper">
+        <wa-input
+          id="site-search-input"
+          type="search"
+          appearance="filled"
+          size="large"
+          clearable
+          placeholder="Search"
+          autofocus
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          enterkeyhint="go"
+          spellcheck="false"
+          maxlength="100"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded="true"
+          aria-controls="site-search-listbox"
+          aria-haspopup="listbox"
+          aria-activedescendant
+        >
+          <wa-icon slot="prefix" name="search"></wa-icon>
+        </wa-input>
+      </div>
+    </header>
+
+    {# Body #}
+    <div id="site-search-body">
+      <ul
+        id="site-search-listbox"
+        role="listbox"
+        aria-label="Search results"
+      ></ul>
+      <div id="site-search-empty">
+        <wa-icon name="web-awesome" family="brands"></wa-icon>
+        No results
+      </div>
+    </div>
+
+    {# Footer #}
+    <footer>
+      <small>
+        <kbd aria-label="Up"><wa-icon name="arrow-up" family="micro"></wa-icon></kbd>
+        <kbd aria-label="Down"><wa-icon name="arrow-down" family="micro"></wa-icon></kbd>
+        Navigate
+      </small>
+
+      <small>
+        <kbd>Enter</kbd>
+        Select
+      </small>
+
+      <small><kbd>Esc</kbd> Close</small>
+    </footer>
+  </div>
+</wa-dialog>

docs/_includes/sidebar-group.njk

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

docs/_includes/sidebar-link.njk

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

docs/_includes/sidebar.njk

@@ -1,65 +1,33 @@
+{# Getting started #}
+<h2>Getting Started</h2>
 <ul>
-  <li>
-    <h2>Getting Started</h2>
-    <ul>
-      <li><a href="/">Home</a></li>
-      <li><a href="/getting-started/installation">Installation</a></li>
-      <li><a href="/getting-started/usage">Usage</a></li>
-      <li><a href="/getting-started/themes">Themes</a></li>
-      <li><a href="/getting-started/customizing">Customizing</a></li>
-      <li><a href="/getting-started/form-controls">Form Controls</a></li>
-      <li><a href="/getting-started/localization">Localization</a></li>
-    </ul>
-  </li>
-  <li>
-    <h2>Frameworks</h2>
-    <ul>
-      <li><a href="/frameworks/react">React</a></li>
-      <li><a href="/frameworks/vue">Vue</a></li>
-      <li><a href="/frameworks/angular">Angular</a></li>
-    </ul>
-  </li>
-  <li>
-    <h2>Resources</h2>
-    <ul>
-      <li><a href="/resources/community">Community</a></li>
-      <li><a href="https://github.com/shoelace-style/shoelace/discussions">Help &amp; Support</a></li>
-      <li><a href="/resources/accessibility">Accessibility</a></li>
-      <li><a href="/resources/contributing">Contributing</a></li>
-      <li><a href="/resources/changelog">Changelog</a></li>
-    </ul>
-  </li>
-  <li>
-    <h2>Components</h2>
-    <ul>
-      {% for component in meta.components %}
-        <li>
-          <a href="/components/{{ component.tagName | removeSlPrefix }}">
-            {{ component.name | classNameToComponentName }}
-          </a>
-        </li>
-      {% endfor %}
-    </ul>
-  </li>  
-  <li>
-    <h2>Design Tokens</h2>
-    <ul>
-      <li><a href="/tokens/typography">Typography</a></li>
-      <li><a href="/tokens/color">Color</a></li>
-      <li><a href="/tokens/spacing">Spacing</a></li>
-      <li><a href="/tokens/elevation">Elevation</a></li>
-      <li><a href="/tokens/border-radius">Border Radius</a></li>
-      <li><a href="/tokens/transition">Transition</a></li>
-      <li><a href="/tokens/z-index">Z-index</a></li>
-      <li><a href="/tokens/more">More</a></li>
-    </ul>
-  </li>
-  <li>
-    <h2>Tutorials</h2>
-    <ul>
-      <li><a href="/tutorials/integrating-with-laravel">Integrating with Laravel</a></li>
-      <li><a href="/tutorials/integrating-with-nextjs">Integrating with NextJS</a></li>
-      <li><a href="/tutorials/integrating-with-rails">Integrating with Rails</a></li>
-    </ul>
-  </li>
+  <li><a href="/docs/installation">Installation</a></li>
+  <li><a href="/docs/usage">Usage</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>
+
+{# Resources #}
+<h2>Resources</h2>
+<ul>
+  <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>
+  <li><a href="/docs/resources/changelog">Changelog</a></li>
+  <li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
+</ul>
+
+{% for tag, title in {
+  'themes': 'Themes',
+  'components': 'Components',
+  'native': 'Native Styles',
+  'utilities': 'Style Utilities',
+  'layout': 'Layout',
+  'patterns': 'Patterns',
+  'palettes': 'Color Palettes',
+  'tokens': 'Design Tokens'
+} %}
+  {% include 'sidebar-group.njk' %}
+{% endfor %}

docs/_includes/status.njk

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

docs/_includes/svgs/animated-image.njk

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

docs/_includes/svgs/animation.njk

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

docs/_includes/svgs/avatar.njk

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

docs/_includes/svgs/badge.njk

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

docs/_includes/svgs/breadcrumb.njk

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

docs/_includes/svgs/button-group.njk

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

docs/_includes/svgs/button.njk

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

docs/_includes/svgs/callout.njk

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

docs/_includes/svgs/card.njk

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

docs/_includes/svgs/carousel.njk

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

docs/_includes/svgs/checkbox.njk

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

docs/_includes/svgs/color-picker.njk

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

docs/_includes/svgs/copy-button.njk

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

docs/_includes/svgs/details.njk

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

docs/_includes/svgs/dialog.njk

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

docs/_includes/svgs/divider.njk

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

docs/_includes/svgs/drawer.njk

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

docs/_includes/svgs/dropdown.njk

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

docs/_includes/svgs/format-bytes.njk

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

docs/_includes/svgs/format-date.njk

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

docs/_includes/svgs/format-number.njk

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

docs/_includes/svgs/icon-button.njk

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

docs/_includes/svgs/icon.njk

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

docs/_includes/svgs/image-comparer.njk

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

docs/_includes/svgs/input.njk

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

docs/_includes/svgs/layout/cluster.njk

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

docs/_includes/svgs/layout/flank.njk

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

docs/_includes/svgs/layout/frame.njk

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

docs/_includes/svgs/layout/grid.njk

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

docs/_includes/svgs/layout/split.njk

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

docs/_includes/svgs/layout/stack.njk

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

docs/_includes/svgs/menu.njk

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

docs/_includes/svgs/page.njk

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

docs/_includes/svgs/palette.njk

@@ -0,0 +1,31 @@
+{% set paletteId = palette.fileSlug or page.fileSlug %}
+{% set suffixes = ['-80', '', '-20'] %}
+{% set width = 20 %}
+{% set height = 12 %}
+{% set height_core = 20 %}
+{% set gap_x = 4 %}
+{% set gap_y = 4 %}
+
+{% set total_width = (width + gap_x) * hues|length %}
+{% set total_height = (height + gap_y) * suffixes|length + (height_core - height) %}
+<svg viewBox="0 0 {{ total_width }} {{ total_height }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
+<style>
+	@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
+	.palette-icon {
+		height: 8ch;
+	}
+</style>
+
+{% for hue in hues -%}
+  {% set hueIndex = loop.index0 %}
+  {% set y = 0 %}
+  {% for suffix in suffixes -%}
+    {% set swatch_height = height if suffix else height_core %}
+
+    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ y }}"
+	      width="{{ width }}" height="{{ swatch_height }}"
+	      fill="var(--wa-color-{{ hue }}{{ suffix }})" rx="2" />
+	{% set y = y + swatch_height + gap_y %}
+  {%- endfor %}
+{% endfor %}
+</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/rating.njk

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

docs/_includes/svgs/relative-time.njk

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

docs/_includes/svgs/select.njk

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

docs/_includes/svgs/skeleton.njk

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

docs/_includes/svgs/slider.njk

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

docs/_includes/svgs/spinner.njk

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

docs/_includes/svgs/split-panel.njk

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

docs/_includes/svgs/switch.njk

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

docs/_includes/svgs/tab-group.njk

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