cdn urls

Add new button appearances

.eslintrc.cjs

@@ -42,17 +42,19 @@ module.exports = {
       rules: {
         'default-param-last': 'off',
         '@typescript-eslint/default-param-last': 'error',
+        'no-console': 'warn',
         'no-empty-function': 'off',
         '@typescript-eslint/no-empty-function': 'warn',
         'no-implied-eval': 'off',
-        '@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',
+        'lit-a11y/no-autofocus': 'off',
+        '@typescript-eslint/no-implied-eval': 'error',
+        '@typescript-eslint/no-invalid-this': 'error',
+        '@typescript-eslint/no-throw-literal': 'error',
+        '@typescript-eslint/no-shadow': 'error',
         '@typescript-eslint/prefer-regexp-exec': 'off',
         '@typescript-eslint/no-unused-expressions': 'error',
         '@typescript-eslint/unbound-method': 'off',

.gitignore

@@ -4,7 +4,6 @@ _site
 package.json
 package-lock.json
 dist
-docs/assets/images/sprite.svg
 docs/public/pagefind
 node_modules
 src/react

.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,5 +1,5 @@
 *.hbs
-*.mdx
+*.md
 .cache
 .github
 cspell.json

CONTRIBUTING.md

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

README.md

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

cspell.json

@@ -18,7 +18,6 @@
     "CACHEABLE",
     "callout",
     "callouts",
-    "cdndir",
     "chatbubble",
     "checkmark",
     "Clippy",
@@ -109,7 +108,6 @@
     "noopener",
     "noreferrer",
     "novalidate",
-    "npmdir",
     "Numberish",
     "oklab",
     "oklch",
@@ -141,6 +139,8 @@
     "scroller",
     "Segoe",
     "semibold",
+    "Shortcode",
+    "Shortcodes",
     "sitedir",
     "slotchange",
     "smartquotes",
@@ -156,6 +156,7 @@
     "testid",
     "textareas",
     "textfield",
+    "Themer",
     "tinycolor",
     "transitionend",
     "treeitem",
@@ -175,6 +176,7 @@
     "Vuejs",
     "WCAG",
     "webawesome",
+    "webawesomer",
     "WEBP",
     "Webpacker",
     "xmark"

custom-elements-manifest.js

@@ -1,24 +1,13 @@
-import * as path from 'path';
 import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
-import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
+// import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
 import { parse } from 'comment-parser';
 import { pascalCase } from 'pascal-case';
-import commandLineArgs from 'command-line-args';
 import fs from 'fs';
 
 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';
 
 function replace(string, terms) {
   terms.forEach(({ from, to }) => {
@@ -29,8 +18,10 @@ function replace(string, terms) {
 }
 
 export default {
-  globs: ['src/components/**/*.component.ts'],
+  globs: ['src/components/**/*.ts'],
   exclude: ['**/*.styles.ts', '**/*.test.ts'],
+  litelement: true,
+  outdir,
   plugins: [
     // Append package data
     {
@@ -40,35 +31,6 @@ export default {
       }
     },
 
-    // Infer tag names because we no longer use @customElement decorators.
-    {
-      name: 'wa-infer-tag-names',
-      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 importPath = moduleDoc.path;
-
-            // This is kind of a best guess at components. "thing.component.ts"
-            if (!importPath.endsWith('.component.ts')) {
-              return;
-            }
-
-            const tagNameWithoutPrefix = path.basename(importPath, '.component.ts');
-            const tagName = 'wa-' + tagNameWithoutPrefix;
-
-            classDoc.tagNameWithoutPrefix = tagNameWithoutPrefix;
-            classDoc.tagName = tagName;
-
-            // This used to be set to true by @customElement
-            classDoc.customElement = true;
-          }
-        }
-      }
-    },
-
     // Parse custom jsDoc tags
     {
       name: 'wa-custom-tags',
@@ -77,7 +39,7 @@ export default {
           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 => {
@@ -96,17 +58,6 @@ export default {
             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'])) {
@@ -151,6 +102,7 @@ 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`;
               });
@@ -175,7 +127,7 @@ export default {
           //
           const terms = [
             { from: /^src\//, to: '' }, // Strip the src/ prefix
-            { from: /\.component.(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);
@@ -204,7 +156,7 @@ export default {
       referencesTemplate: (_, tag) => [
         {
           name: 'Documentation',
-          url: `https://shoelace.style/components/${tag.replace('wa-', '')}`
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
         }
       ]
     }),
@@ -216,15 +168,18 @@ export default {
       referencesTemplate: (_, tag) => {
         return {
           name: 'Documentation',
-          url: `https://shoelace.style/components/${tag.replace('wa-', '')}`
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
         };
       }
-    }),
-
-    customElementVuejsPlugin({
-      outdir: './dist/types/vue',
-      fileName: 'index.d.ts',
-      componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.component.js`
     })
+
+    //
+    // 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,131 @@
+import { parse } from 'path';
+import { markdown } from './_utils/markdown.js';
+import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
+import { codeExamplesPlugin } from './_utils/code-examples.js';
+import { copyCodePlugin } from './_utils/copy-code.js';
+import { currentLink } from './_utils/current-link.js';
+import { highlightCodePlugin } from './_utils/highlight-code.js';
+import { formatCodePlugin } from './_utils/format-code.js';
+import { replaceTextPlugin } from './_utils/replace-text.js';
+import { searchPlugin } from './_utils/search.js';
+import { readFile } from 'fs/promises';
+import { outlinePlugin } from './_utils/outline.js';
+import { getComponents } from './_utils/manifest.js';
+import process from 'process';
+
+const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
+const isAlpha = process.argv.includes('--alpha');
+const isDeveloping = process.argv.includes('--develop');
+
+export default function (eleventyConfig) {
+  // NOTE - alpha setting removes certain pages
+  if (isAlpha) {
+    eleventyConfig.ignores.add('**/components/page.md');
+    eleventyConfig.ignores.add('**/experimental/**');
+  }
+
+  // Add template data
+  eleventyConfig.addGlobalData('package', packageData);
+
+  // Template filters - {{ content | filter }}
+  eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
+  eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
+  eleventyConfig.addFilter('stripExtension', string => parse(string).name);
+  eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
+  eleventyConfig.addFilter('trimPipes', content => {
+    // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
+    // With Prettier 3, this means a leading pipe will exist be present when the line wraps.
+    return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
+  });
+
+  // Shortcodes - {% shortCode arg1, arg2 %}
+  eleventyConfig.addShortcode('cdnUrl', location => {
+    return `https://early.webawesome.com/webawesome@${packageData.version}/` + location.replace(/^\//, '');
+  });
+
+  // Helpers
+  eleventyConfig.addNunjucksGlobal('getComponent', tagName => {
+    const component = getComponents().find(c => c.tagName === tagName);
+
+    if (!component) {
+      throw new Error(
+        `Unable to find "<${tagName}>". Make sure the file name is the same as the tag name (without prefix).`
+      );
+    }
+    return component;
+  });
+
+  // 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
+  if (!isDeveloping) {
+    // Run Prettier on each file (prod only because it can be slow)
+    eleventyConfig.addPlugin(formatCodePlugin());
+  }
+
+  return {
+    dir: {
+      includes: '_includes',
+      layouts: '_layouts'
+    },
+    templateFormats: ['njk', 'md']
+  };
+}

docs/.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
-}

docs/.vscode/launch.json

@@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}

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

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en" data-cdn-url="{% cdnUrl %}">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="{{ description }}">
+    <meta name="theme-color" content="#787acf">
+    {% if noindex %}<meta name="robots" content="noindex">{% endif %}
+
+    <title>{{ title }}</title>
+
+    <link rel="icon" href="/assets/images/webawesome-logo.svg" />
+    <link rel="apple-touch-icon" href="/assets/images/app-icon.png">
+
+    {# Scripts #}
+    <script type="module" src="/assets/scripts/code-examples.js"></script>
+    <script type="module" src="/assets/scripts/color-scheme.js"></script>
+    <script type="module" src="/assets/scripts/copy-code.js"></script>
+    <script type="module" src="/assets/scripts/scroll.js"></script>
+    <script type="module" src="/assets/scripts/turbo.js"></script>
+    <script type="module" src="/assets/scripts/search.js"></script>
+    <script type="module" src="/assets/scripts/outline.js"></script>
+
+    {# Web Awesome #}
+    <script type="module" src="/dist/webawesome.loader.js"></script>
+    <link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
+    <link rel="stylesheet" href="/dist/themes/applied.css" />
+    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/color_standard.css" />
+    <link rel="stylesheet" href="/dist/themes/forms.css" />
+
+    {# Docs styles #}
+    <link rel="stylesheet" href="/assets/styles/docs.css" />
+
+    {# Set the theme to prevent flashing #}
+    <script>
+      document.documentElement.classList.toggle(
+        'wa-theme-default-dark',
+        sessionStorage.getItem('colorScheme') === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches
+      );
+    </script>
+  </head>
+  <body class="layout-{{ layout | stripExtension }}">
+
+    <wa-page>
+      <header slot="header">
+        {# Logo #}
+        <div id="docs-branding">
+          {# Nav toggle #}
+          <wa-button appearance="text" data-toggle-nav>
+            <wa-icon name="bars" label="Toggle navigation"></wa-icon>
+          </wa-button>
+          <a href="/" aria-label="Web Awesome">
+            <span class="only-desktop">{% include "logo.njk" %}</span>
+            <span class="only-mobile">{% include "logo-simple.njk" %}</span>
+          </a>
+          <small id="version-number" class="only-desktop">{{ package.version }}</small>
+          <wa-badge variant="warning" class="only-desktop">Alpha</wa-badge>
+        </div>
+
+        <div id="docs-toolbar">
+          {# Color scheme selector #}
+          <wa-dropdown id="color-scheme-selector">
+            <wa-button slot="trigger" appearance="tinted" size="small" pill caret title="Press \ to toggle">
+              <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
+              <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
+              <span class="only-light only-desktop">Light</span>
+              <span class="only-dark only-desktop">Dark</span>
+            </wa-button>
+            <wa-menu>
+              <wa-menu-item type="checkbox" value="light">Light</wa-menu-item>
+              <wa-menu-item type="checkbox" value="dark">Dark</wa-menu-item>
+              <wa-divider></wa-divider>
+              <wa-menu-item type="checkbox" value="auto">System</wa-menu-item>
+            </wa-menu>
+          </wa-dropdown>
+
+          {# Search #}
+          <wa-button id="search-trigger" appearance="outline" size="small" data-search>
+            <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
+            Search
+            <kbd slot="suffix" class="only-desktop">/</kbd>
+          </wa-button>
+        </div>
+      </header>
+
+      {# Sidebar #}
+      {% if hasSidebar %}
+        <aside slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
+          <wa-icon-button id="sidebar-close-button" name="xmark" label="Close" data-drawer="close"></wa-icon-button>
+          <nav>
+            {% include "sidebar.njk" %}
+          </nav>
+        </aside>
+      {% 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 #}
+        <nav id="outline-expandable">
+          <details class="outline-links">
+            <summary>On this page</summary>
+          </details>
+        </nav>
+
+        {% block beforeContent %}{% endblock %}
+
+        {% block content %}
+          <h1 class="title">{{ title }}</h1>
+
+          {{ content | safe }}
+        {% endblock %}
+
+        {% block afterContent %}{% endblock %}
+      </main>
+
+      {% include 'search.njk' %}
+    </wa-page>
+
+  </body>
+</html>

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/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"
+          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.njk

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

docs/_layouts/component.njk

@@ -0,0 +1,298 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+{% set component = getComponent('wa-' + page.fileSlug) %}
+{% set description = component.summary %}
+
+{% extends '../_includes/base.njk' %}
+
+{# Component header #}
+{% block beforeContent %}
+  <h1 class="title">{{ title }}</h1>
+  <div class="component-info">
+    <code class="component-tag">&lt;{{ component.tagName }}&gt;</code>
+    <wa-badge variant="neutral">Since {{ component.since }}</wa-badge>
+    <wa-badge
+      {% if component.status == 'stable' %}variant="brand"{% endif %}
+      {% if component.status == 'experimental' %}variant="warning"{% endif %}
+    >
+      {{ component.status }}
+    </wa-badge>
+  </div>
+  <p class="component-summary">
+    {{ component.summary }}
+  </p>
+{% endblock %}
+
+{# Content #}
+{% block content %}
+  {{ content | safe }}
+{% endblock %}
+
+{# Component API #}
+{% block afterContent %}
+  {# Slots #}
+  {% if component.slots.length %}
+    <h2>Slots</h2>
+
+    <div class="table-scroll">
+      <table class="component-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="table-name">
+                {% if slot.name %}
+                  <code>{{ slot.name }}</code>
+                {% else %}
+                  (default)
+                {% endif %}
+              </td>
+              <td class="table-description">{{ slot.description | inlineMarkdown | safe }}</td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  {% endif %}
+
+  {# Properties #}
+  {% if component.properties.length %}
+    <h2>Properties</h2>
+
+    <div class="table-scroll">
+      <table class="component-table">
+        <thead>
+          <tr>
+            <th class="table-name">Name</th>
+            <th class="table-attribute">Attribute</th>
+            <th class="table-description">Description</th>
+            <th class="table-reflects">Reflects</th>
+            <th class="table-type">Type</th>
+            <th class="table-default">Default</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for prop in component.properties %}
+            <tr>
+              <td class="table-name">
+                <code>{{ prop.name }}</code>
+              </td>
+              <td class="table-attribute">
+                {% if prop.attribute %}
+                  <code>{{ prop.attribute }}</code>
+                {% endif %}
+              </td>
+              <td class="table-description">
+                {{ prop.description | inlineMarkdown | safe }}
+              </td>
+              <td class="table-checkmark">
+                {% if prop.reflects %}
+                  <wa-icon name="check"></wa-icon>
+                {% endif %}
+              </td>
+              <td class="table-type">
+                {% if prop.type.text %}
+                  <code>{{ prop.type.text | trimPipes | inlineMarkdown | safe }}</code>
+                {% endif %}
+              </td>
+              <td class="table-default">
+                {% if prop.default %}
+                  <code>{{ prop.default | inlineMarkdown | safe }}</code>
+                {% endif %}
+              </td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  {% endif %}
+
+  {# Methods #}
+  {% if component.methods.length %}
+    <h2>Methods</h2>
+    <div class="table-scroll">
+      <table class="component-table">
+        <thead>
+          <tr>
+            <th class="table-name">Name</th>
+            <th class="table-description">Description</th>
+            <th class="table-arguments">Arguments</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for method in component.methods %}
+            <tr>
+              <td class="table-name"><code>{{ method.name }}()</code></td>
+              <td class="table-description">{{ method.description | inlineMarkdown | safe }}</td>
+              <td class="table-arguments">
+                {% if method.parameters.length %}
+                  <code>
+                    {% for param in method.parameters %}
+                      {{ param.name }}: {{ param.type.text | trimPipes }}{% if not loop.last %},{% endif %}
+                    {% endfor %}
+                  </code>
+                {% endif %}
+              </td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  {% endif %}
+
+  {# States #}
+  {% if component.states.length %}
+    <h2>States</h2>
+    <div class="table-scroll">
+      <table class="component-table">
+        <thead>
+          <tr>
+            <th class="table-name">Name</th>
+            <th class="table-description">Description</th>
+            <th class="table-selector">CSS selector</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for state in component.states %}
+            <tr>
+              <td class="table-name"><code>{{ state.name }}</code></td>
+              <td class="table-description">{{ state.description | inlineMarkdown | safe }}</td>
+              <td class="table-selector"><code>[data-state-{{ state.name }}]</code></td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  {% endif %}
+
+  {# Events #}
+  {% if component.events.length %}
+    <h2>Events</h2>
+
+    <div class="table-scroll">
+      <table class="component-table">
+        <thead>
+          <tr>
+            <th class="table-name">Name</th>
+            <th class="table-description">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for event in component.events %}
+            {% if event.name %}
+              <tr>
+                <td class="table-name"><code>{{ event.name }}</code></td>
+                <td class="table-description">{{ event.description | inlineMarkdown | safe }}</td>
+              </tr>
+            {% endif %}
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  {% endif %}
+
+  {# Custom Properties #}
+  {% if component.cssProperties.length %}
+    <h2>CSS custom properties</h2>
+
+    <div class="table-scroll">
+      <table class="component-table">
+        <thead>
+          <tr>
+            <th class="table-name">Name</th>
+            <th class="table-description">Description</th>
+            <th>Default</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for cssProperty in component.cssProperties %}
+            <tr>
+              <td class="table-name"><code>{{ cssProperty.name }}</code></td>
+              <td class="table-description">{{ cssProperty.description | inlineMarkdown | safe }}</td>
+              <td class="table-default">
+                {% if cssProperty.default %}
+                  <code>{{ cssProperty.default }}</code>
+                {% endif %}
+              </td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  {% endif %}
+
+  {# CSS Parts #}
+  {% if component.cssParts.length %}
+    <h2>CSS parts</h2>
+
+    <div class="table-scroll">
+      <table class="component-table">
+        <thead>
+          <tr>
+            <th class="table-name">Name</th>
+            <th class="table-description">Description</th>
+            <th class="table-selector">CSS selector</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for cssPart in component.cssParts %}
+            <tr>
+              <td class="table-name"><code>{{ cssPart.name }}</code></td>
+              <td class="table-description">{{ cssPart.description | inlineMarkdown | safe }}</td>
+              <td class="table-selector"><code>::part({{ cssPart.name }})</code></td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  {% endif %}
+
+  {# Dependencies #}
+  {% if component.dependencies.length %}
+    <h2>Dependencies</h2>
+    <p>
+      This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.
+    </p>
+
+    <ul class="dependency-list">
+      {% for dependency in component.dependencies %}
+        <li><a href="/docs/components/{{ dependency | stripPrefix }}"><code>&lt;{{ dependency }}&gt;</code></a></li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+
+  {# Importing #}
+  <h2>Importing</h2>
+  <p>
+    The <a href="/docs/#autoloading">autoloader</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
+  </p>
+
+  <wa-tab-group label="How would you like to import this component?">
+    <wa-tab slot="nav" panel="cdn">CDN</wa-tab>
+    <wa-tab slot="nav" panel="npm">npm</wa-tab>
+    <wa-tab slot="nav" panel="react">React</wa-tab>
+    <wa-tab-panel name="cdn">
+      <p>
+        To manually import this component from the CDN, use the following code.
+      </p>
+      <pre><code class="language-js">import '{% cdnUrl component.path %}';</code></pre>
+    </wa-tab-panel>
+    <wa-tab-panel name="npm">
+      Coming soon!
+    </wa-tab-panel>
+    <wa-tab-panel name="react">
+      Coming soon!
+      {# NOTE - disabled for alpha
+      <p>
+        To manually import this component from React, use the following code.
+      </p>
+      <pre><code class="language-js">import '@shoelace-style/webawesome/react/{{ component.tagName | stripPrefix }}';</code></pre>
+      #}
+    </wa-tab-panel>
+  </wa-tab-group>
+{% endblock %}

docs/_layouts/docs.njk

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

docs/_layouts/page-outline.njk

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

docs/_layouts/page.njk

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

docs/_utils/anchor-headings.js

@@ -0,0 +1,78 @@
+import { parse } from 'node-html-parser';
+import { v4 as uuid } from 'uuid';
+import slugify from 'slugify';
+
+function createId(text) {
+  let slug = slugify(String(text), {
+    remove: /[^\w|\s]/g,
+    lower: true
+  });
+
+  // ids must start with a letter
+  if (!/^[a-z]/i.test(slug)) {
+    slug = `wa_${slug}`;
+  }
+
+  return slug;
+}
+
+/**
+ * Eleventy plugin to add anchors to headings to content.
+ */
+export function anchorHeadingsPlugin(options = {}) {
+  options = {
+    container: 'body',
+    headingSelector: 'h2, h3, h4, h5, h6',
+    anchorLabel: 'Jump to heading',
+    ...options
+  };
+
+  return function (eleventyConfig) {
+    eleventyConfig.addTransform('anchor-headings', content => {
+      const doc = parse(content);
+      const container = doc.querySelector(options.container);
+
+      if (!container) {
+        return content;
+      }
+
+      // Look for headings
+      container.querySelectorAll(options.headingSelector).forEach(heading => {
+        const hasAnchor = heading.querySelector('a');
+        const clone = parse(heading.outerHTML);
+
+        // Create a clone of the heading so we can remove [data-no-anchor] elements from the text content
+        clone.querySelectorAll('[data-no-anchor]').forEach(el => el.remove());
+
+        const slug = createId(clone.textContent ?? '') ?? uuid().slice(-12);
+        let id = slug;
+        let suffix = 0;
+
+        // Make sure the slug is unique in the document
+        while (doc.getElementById(id) !== null) {
+          id = `${slug}-${++suffix}`;
+        }
+
+        if (hasAnchor || !id) {
+          return;
+        }
+
+        // Create the anchor
+        const anchor = parse(`
+          <a href="#${encodeURIComponent(id)}">
+            <span class="wa-visually-hidden"></span>
+            <span aria-hidden="true">#</span>
+          </a>
+        `);
+        anchor.querySelector('.wa-visually-hidden').textContent = options.anchorLabel;
+
+        // Update the heading
+        heading.setAttribute('id', id);
+        heading.classList.add('anchor-heading');
+        heading.appendChild(anchor);
+      });
+
+      return doc.toString();
+    });
+  };
+}

docs/_utils/code-examples.js

@@ -0,0 +1,82 @@
+import { parse } from 'node-html-parser';
+import { v4 as uuid } from 'uuid';
+
+/**
+ * Eleventy plugin to turn `<code class="example">` blocks into live examples.
+ */
+export function codeExamplesPlugin(options = {}) {
+  options = {
+    container: 'body',
+    ...options
+  };
+
+  return function (eleventyConfig) {
+    eleventyConfig.addTransform('code-examples', content => {
+      const doc = parse(content, { blockTextElements: { code: true } });
+      const container = doc.querySelector(options.container);
+
+      if (!container) {
+        return content;
+      }
+
+      // Look for external links
+      container.querySelectorAll('code.example').forEach(code => {
+        const pre = code.closest('pre');
+        const hasButtons = !code.classList.contains('no-buttons');
+        const isOpen = code.classList.contains('open') || !hasButtons;
+        const noEdit = code.classList.contains('no-edit');
+        const id = `code-example-${uuid().slice(-12)}`;
+        let preview = pre.textContent;
+
+        // Run preview scripts as modules to prevent collisions
+        const root = parse(preview, { blockTextElements: { script: true } });
+        root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
+        preview = root.toString();
+
+        const codeExample = parse(`
+          <div class="code-example ${isOpen ? 'open' : ''}">
+            <div class="code-example-preview">
+              ${preview}
+            </div>
+            <div class="code-example-source" id="${id}">
+              ${pre.outerHTML}
+            </div>
+            ${
+              hasButtons
+                ? `
+                <div class="code-example-buttons">
+                  <button
+                    class="code-example-toggle"
+                    type="button"
+                    aria-expanded="${isOpen ? 'true' : 'false'}"
+                    aria-controls="${id}"
+                  >
+                    Code
+                    <wa-icon name="chevron-down"></wa-icon>
+                  </button>
+
+                  ${
+                    noEdit
+                      ? ''
+                      : `
+                        <button class="code-example-pen" type="button">
+                          <wa-icon name="pen-to-square"></wa-icon>
+                          Edit
+                        </button>
+                      `
+                  }
+
+                `
+                : ''
+            }
+            </div>
+          </div>
+        `);
+
+        pre.replaceWith(codeExample);
+      });
+
+      return doc.toString();
+    });
+  };
+}

docs/_utils/copy-code.js

@@ -0,0 +1,32 @@
+import { parse } from 'node-html-parser';
+
+/**
+ * Eleventy plugin to add copy buttons to code blocks.
+ */
+export function copyCodePlugin(options = {}) {
+  options = {
+    container: 'body',
+    ...options
+  };
+
+  return function (eleventyConfig) {
+    eleventyConfig.addTransform('copy-code', content => {
+      const doc = parse(content, { blockTextElements: { code: true } });
+      const container = doc.querySelector(options.container);
+
+      if (!container) {
+        return content;
+      }
+
+      // Look for code blocks
+      container.querySelectorAll('pre > code').forEach(code => {
+        const pre = code.closest('pre');
+
+        // Add a copy button (we set the copy data at runtime to reduce page bloat)
+        pre.innerHTML = `<wa-copy-button class="copy-button" hoist></wa-copy-button>` + pre.innerHTML;
+      });
+
+      return doc.toString();
+    });
+  };
+}

docs/_utils/current-link.js

@@ -0,0 +1,53 @@
+import { parse } from 'node-html-parser';
+
+function normalize(pathname) {
+  pathname = pathname.trim();
+
+  // Must start with a slash
+  if (!pathname.startsWith('/')) {
+    pathname = `/${pathname}`;
+  }
+
+  // Must not end in a slash
+  if (pathname.endsWith('/')) {
+    pathname = pathname.slice(0, -1);
+  }
+
+  // Convert /index.html to /
+  if (pathname.endsWith('/index.html')) {
+    pathname = pathname.slice(0, -10);
+  }
+
+  return pathname;
+}
+
+/**
+ * Eleventy plugin to decorate current links with a custom class.
+ */
+export function currentLink(options = {}) {
+  options = {
+    container: 'body',
+    className: 'current',
+    ...options
+  };
+
+  return function (eleventyConfig) {
+    eleventyConfig.addTransform('current-link', function (content) {
+      const doc = parse(content);
+      const container = doc.querySelector(options.container);
+
+      if (!container) {
+        return content;
+      }
+
+      // Compare the href attribute to 11ty's page URL
+      container.querySelectorAll('a[href]').forEach(a => {
+        if (normalize(a.getAttribute('href')) === normalize(this.page.url)) {
+          a.classList.add(options.className);
+        }
+      });
+
+      return doc.toString();
+    });
+  };
+}

docs/_utils/format-code.js

@@ -0,0 +1,32 @@
+import { format } from 'prettier';
+import defaultOptions from '../../prettier.config.js';
+
+/**
+ * Formats a string of code using Prettier.
+ *
+ * @param {string} code - The code to format.
+ * @param {*} options - Prettier options. Defaults are taken from the project's root config. See this page for more
+ *   info: https://prettier.io/docs/en/options.html
+ */
+export async function formatCode(string, options) {
+  return await format(string, {
+    ...defaultOptions,
+    ...options
+  });
+}
+
+/**
+ * Eleventy plugin to format page HTML using Prettier.
+ */
+export function formatCodePlugin(options = {}) {
+  options = {
+    parser: 'html',
+    ...options
+  };
+
+  return function (eleventyConfig) {
+    eleventyConfig.addTransform('format-code', content => {
+      return formatCode(content, options);
+    });
+  };
+}

docs/_utils/highlight-code.js

@@ -0,0 +1,72 @@
+/* eslint sort-imports-es6-autofix/sort-imports-es6: 0 */
+import { parse } from 'node-html-parser';
+import Prism from 'prismjs';
+import 'prismjs/plugins/custom-class/prism-custom-class.js';
+import PrismLoader from 'prismjs/components/index.js';
+
+PrismLoader('diff');
+PrismLoader.silent = true;
+Prism.plugins.customClass.prefix('code-');
+
+/**
+ * Highlights a string of code using the specified language.
+ *
+ * @param {string} code - The code to highlight.
+ * @param {string} language - The language the code is written in. For available languages, refer to this page:
+ *   https://prismjs.com/#supported-languages
+ */
+export function highlightCode(code, language = 'plain') {
+  const alias = language.replace(/^diff-/, '');
+  const isDiff = /^diff-/i.test(language);
+
+  if (!Prism.languages[alias]) {
+    PrismLoader(alias);
+    if (!Prism.languages[alias]) {
+      throw new Error(`Unsupported language for code highlighting: "${language}"`);
+    }
+  }
+
+  if (isDiff) {
+    Prism.languages[language] = Prism.languages.diff;
+  }
+
+  return Prism.highlight(code, Prism.languages[language], language);
+}
+
+/**
+ * Eleventy plugin to highlight code blocks with the `language-*` attribute using Prism.js. Unlike most plugins, this
+ * works on the entire document — not just markdown content.
+ */
+export function highlightCodePlugin(options = {}) {
+  options = {
+    container: 'body',
+    ...options
+  };
+
+  return function (eleventyConfig) {
+    eleventyConfig.addTransform('highlight-code', content => {
+      const doc = parse(content, { blockTextElements: { code: true } });
+      const container = doc.querySelector(options.container);
+
+      if (!container) {
+        return content;
+      }
+
+      // Look for <code class="language-*"> and highlight each one
+      container.querySelectorAll('code[class*="language-"]').forEach(code => {
+        const langClass = [...code.classList.values()].find(val => val.startsWith('language-'));
+        const lang = langClass ? langClass.replace(/^language-/, '') : 'plain';
+
+        try {
+          code.innerHTML = highlightCode(code.textContent ?? '', lang);
+        } catch (err) {
+          if (!options.ignoreMissingLangs) {
+            throw new Error(err.message);
+          }
+        }
+      });
+
+      return doc.toString();
+    });
+  };
+}

docs/_utils/manifest.js

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

docs/_utils/markdown.js

@@ -0,0 +1,63 @@
+import MarkdownIt from 'markdown-it';
+import markdownItAttrs from 'markdown-it-attrs';
+import markdownItContainer from 'markdown-it-container';
+import markdownItIns from 'markdown-it-ins';
+import markdownItKbd from 'markdown-it-kbd';
+import markdownItMark from 'markdown-it-mark';
+
+/**
+ * A custom Markdown It instance with added features.
+ */
+export const markdown = MarkdownIt({
+  html: true,
+  xhtmlOut: false,
+  breaks: false,
+  langPrefix: 'language-',
+  linkify: false,
+  typographer: false
+});
+
+markdown.use(markdownItIns);
+markdown.use(markdownItKbd);
+markdown.use(markdownItMark);
+
+['info', 'warning'].forEach(type => {
+  markdown.use(markdownItContainer, type, {
+    render: function (tokens, idx) {
+      const variant = type === 'warning' ? 'warning' : 'info';
+      const icon = type === 'warning' ? 'triangle-exclamation' : 'circle-info';
+      if (tokens[idx].nesting === 1) {
+        return `
+          <div class="callout callout-${variant}">
+            <wa-icon class="callout-icon" name="${icon}"></wa-icon>
+            <div class="callout-content">
+        `;
+      }
+      return '</div></div>\n';
+    }
+  });
+});
+
+markdown.use(markdownItContainer, 'aside', {
+  render: function (tokens, idx) {
+    if (tokens[idx].nesting === 1) {
+      return `<aside>`;
+    }
+    return '</aside>\n';
+  }
+});
+
+markdown.use(markdownItContainer, 'details', {
+  validate: params => params.trim().match(/^details\s+(.*)$/),
+  render: (tokens, idx) => {
+    const m = tokens[idx].info.trim().match(/^details\s+(.*)$/);
+    if (tokens[idx].nesting === 1) {
+      return `<details>\n<summary><span>${markdown.utils.escapeHtml(m[1])}</span></summary>\n`;
+    }
+    return '</details>\n';
+  }
+});
+
+markdown.use(markdownItAttrs, {
+  allowedAttributes: ['id', 'class', 'data']
+});

docs/_utils/outline.js

@@ -0,0 +1,69 @@
+import { parse } from 'node-html-parser';
+
+/**
+ * Eleventy plugin to add an outline (table of contents) to the page. Headings must have an id, otherwise they won't be
+ * included in the outline. An unordered list containing links will be appended to the target element.
+ *
+ * If no headings are found for the outline, the `ifEmpty()` function will be called with a `node-html-parser` object as
+ * the first argument. This can be used to toggle classes or remove elements when the outline is empty.
+ *
+ * See the `node-html-parser` docs for more details: https://www.npmjs.com/package/node-html-parser
+ */
+export function outlinePlugin(options = {}) {
+  options = {
+    container: 'body',
+    target: '.outline',
+    selector: 'h2,h3',
+    ifEmpty: () => null,
+    ...options
+  };
+
+  return function (eleventyConfig) {
+    eleventyConfig.addTransform('outline', content => {
+      const doc = parse(content);
+      const container = doc.querySelector(options.container);
+      const ul = parse('<ul></ul>');
+      let numLinks = 0;
+
+      if (!container) {
+        return content;
+      }
+
+      container.querySelectorAll(options.selector).forEach(heading => {
+        const id = heading.getAttribute('id');
+        const level = heading.tagName.slice(1);
+        const clone = parse(heading.outerHTML);
+
+        if (heading.closest('[data-no-outline]')) {
+          return;
+        }
+
+        // Create a clone of the heading so we can remove links and [data-no-outline] elements from the text content
+        clone.querySelectorAll('a').forEach(a => a.remove());
+        clone.querySelectorAll('[data-no-outline]').forEach(el => el.remove());
+
+        // Generate the link
+        const li = parse(`<li data-level="${level}"><a></a></li>`);
+        const a = li.querySelector('a');
+        a.setAttribute('href', `#${encodeURIComponent(id)}`);
+        a.textContent = clone.textContent.trim().replace(/#$/, '');
+
+        // Add it to the list
+        ul.firstChild.appendChild(li);
+        numLinks++;
+      });
+
+      if (numLinks > 0) {
+        // Append the list to all matching targets
+        doc.querySelectorAll(options.target).forEach(target => {
+          target.appendChild(parse(ul.outerHTML));
+        });
+      } else {
+        // Remove if empty
+        options.ifEmpty(doc);
+      }
+
+      return doc.toString();
+    });
+  };
+}

docs/_utils/replace-text.js

@@ -0,0 +1,19 @@
+/**
+ * Eleventy plugin to replace arbitrary text in the page's HTML.
+ *
+ * @param replacement - The terms to replace and what to replace them with. This must be an object (or an array of
+ * objects) containing a `replace` key that's a string or RegExp and a `replaceWith` key that's a string.
+ */
+export function replaceTextPlugin(replacements = []) {
+  replacements = Array.isArray(replacements) ? replacements : [replacements];
+
+  return function (eleventyConfig) {
+    eleventyConfig.addTransform('replace-text', function (content) {
+      replacements.forEach(replacement => {
+        content = content.replace(replacement.replace, replacement.replaceWith);
+      });
+
+      return content;
+    });
+  };
+}

docs/_utils/search.js

@@ -0,0 +1,76 @@
+/* eslint-disable no-invalid-this */
+import { dirname, join } from 'path';
+import { mkdir, writeFile } from 'fs/promises';
+import { parse } from 'node-html-parser';
+import lunr from 'lunr';
+
+function collapseWhitespace(string) {
+  return string.replace(/\s+/g, ' ');
+}
+
+/**
+ * Eleventy plugin to build a Lunr search index.
+ */
+export function searchPlugin(options = {}) {
+  options = {
+    filename: '',
+    selectorsToIgnore: [],
+    getTitle: doc => doc.querySelector('title')?.textContent ?? '',
+    getDescription: doc => doc.querySelector('meta[name="description"]')?.getAttribute('content') ?? '',
+    getHeadings: doc => [...doc.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(heading => heading.textContent ?? ''),
+    getContent: doc => doc.querySelector('body')?.textContent ?? '',
+    ...options
+  };
+
+  return function (eleventyConfig) {
+    const pagesToIndex = [];
+
+    eleventyConfig.addTransform('search', function (content) {
+      const doc = parse(content, {
+        blockTextElements: {
+          script: false,
+          noscript: false,
+          style: false,
+          pre: false,
+          code: false
+        }
+      });
+
+      // Remove content that shouldn't be searchable to reduce the index size
+      options.selectorsToIgnore.forEach(selector => {
+        doc.querySelectorAll(selector).forEach(el => el.remove());
+      });
+
+      pagesToIndex.push({
+        title: collapseWhitespace(options.getTitle(doc)),
+        description: collapseWhitespace(options.getDescription(doc)),
+        headings: options.getHeadings(doc).map(collapseWhitespace),
+        content: collapseWhitespace(options.getContent(doc)),
+        url: this.page.url === '/' ? '/' : this.page.url.replace(/\/$/, '')
+      });
+
+      return content;
+    });
+
+    eleventyConfig.on('eleventy.after', ({ dir }) => {
+      const outputFilename = join(dir.output, 'search.json');
+      const map = [];
+      const searchIndex = lunr(async function () {
+        let index = 0;
+
+        this.ref('id');
+        this.field('t', { boost: 20 });
+        this.field('h', { boost: 10 });
+        this.field('c');
+
+        for (const page of pagesToIndex) {
+          this.add({ id: index, t: page.title, h: page.headings, c: page.content });
+          map[index] = { title: page.title, description: page.description, url: page.url };
+          index++;
+        }
+        await mkdir(dirname(outputFilename), { recursive: true });
+        await writeFile(outputFilename, JSON.stringify({ searchIndex, map }), 'utf-8');
+      });
+    });
+  };
+}

docs/assets/icons/bootstrap/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"/>
+</svg>

docs/assets/icons/bootstrap/arrow-rotate-left.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/>
+</svg>

docs/assets/icons/bootstrap/at.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-at" viewBox="0 0 16 16">
+  <path d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914"/>
+</svg>

docs/assets/icons/bootstrap/backpack.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-backpack" viewBox="0 0 16 16">
+  <path d="M4.04 7.43a4 4 0 0 1 7.92 0 .5.5 0 1 1-.99.14 3 3 0 0 0-5.94 0 .5.5 0 1 1-.99-.14M4 9.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5zm1 .5v3h6v-3h-1v.5a.5.5 0 0 1-1 0V10z"/>
+  <path d="M6 2.341V2a2 2 0 1 1 4 0v.341c2.33.824 4 3.047 4 5.659v5.5a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 13.5V8a6 6 0 0 1 4-5.659M7 2v.083a6 6 0 0 1 2 0V2a1 1 0 0 0-2 0m1 1a5 5 0 0 0-5 5v5.5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5V8a5 5 0 0 0-5-5"/>
+</svg>

docs/assets/icons/bootstrap/bag-shopping.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16">
+  <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
+</svg>

docs/assets/icons/bootstrap/block-quote.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-blockquote-left" viewBox="0 0 16 16">
+  <path d="M2.5 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1zm5 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-5 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1zm.79-5.373q.168-.117.444-.275L3.524 6q-.183.111-.452.287-.27.176-.51.428a2.4 2.4 0 0 0-.398.562Q2 7.587 2 7.969q0 .54.217.873.217.328.72.328.322 0 .504-.211a.7.7 0 0 0 .188-.463q0-.345-.211-.521-.205-.182-.568-.182h-.282q.036-.305.123-.498a1.4 1.4 0 0 1 .252-.37 2 2 0 0 1 .346-.298zm2.167 0q.17-.117.445-.275L5.692 6q-.183.111-.452.287-.27.176-.51.428a2.4 2.4 0 0 0-.398.562q-.165.31-.164.692 0 .54.217.873.217.328.72.328.322 0 .504-.211a.7.7 0 0 0 .188-.463q0-.345-.211-.521-.205-.182-.568-.182h-.282a1.8 1.8 0 0 1 .118-.492q.087-.194.257-.375a2 2 0 0 1 .346-.3z"/>
+</svg>

docs/assets/icons/bootstrap/bold.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
+  <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
+</svg>

docs/assets/icons/bootstrap/book-open.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book" viewBox="0 0 16 16">
+  <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783"/>
+</svg>

docs/assets/icons/bootstrap/bookmark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16">
+  <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z"/>
+</svg>

docs/assets/icons/bootstrap/boombox.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-boombox" viewBox="0 0 16 16">
+  <path d="M2.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m2 0a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m7.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m1.5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m-7-1a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm5.5 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>
+  <path d="M11.5 13a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m0-1a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3M5 10.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>
+  <path d="M7 10.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0m-1 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0"/>
+  <path d="M14 0a.5.5 0 0 1 .5.5V2h.5a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12.5V.5A.5.5 0 0 1 14 0M1 3v3h14V3zm14 4H1v7h14z"/>
+</svg>

docs/assets/icons/bootstrap/bug.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bug" viewBox="0 0 16 16">
+  <path d="M4.355.522a.5.5 0 0 1 .623.333l.291.956A5 5 0 0 1 8 1c1.007 0 1.946.298 2.731.811l.29-.956a.5.5 0 1 1 .957.29l-.41 1.352A5 5 0 0 1 13 6h.5a.5.5 0 0 0 .5-.5V5a.5.5 0 0 1 1 0v.5A1.5 1.5 0 0 1 13.5 7H13v1h1.5a.5.5 0 0 1 0 1H13v1h.5a1.5 1.5 0 0 1 1.5 1.5v.5a.5.5 0 1 1-1 0v-.5a.5.5 0 0 0-.5-.5H13a5 5 0 0 1-10 0h-.5a.5.5 0 0 0-.5.5v.5a.5.5 0 1 1-1 0v-.5A1.5 1.5 0 0 1 2.5 10H3V9H1.5a.5.5 0 0 1 0-1H3V7h-.5A1.5 1.5 0 0 1 1 5.5V5a.5.5 0 0 1 1 0v.5a.5.5 0 0 0 .5.5H3c0-1.364.547-2.601 1.432-3.503l-.41-1.352a.5.5 0 0 1 .333-.623M4 7v4a4 4 0 0 0 3.5 3.97V7zm4.5 0v7.97A4 4 0 0 0 12 11V7zM12 6a4 4 0 0 0-1.334-2.982A3.98 3.98 0 0 0 8 2a3.98 3.98 0 0 0-2.667 1.018A4 4 0 0 0 4 6z"/>
+</svg>

docs/assets/icons/bootstrap/calendar.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
+  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/>
+</svg>

docs/assets/icons/bootstrap/car.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-car-front" viewBox="0 0 16 16">
+  <path d="M4 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0m10 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M6 8a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2zM4.862 4.276 3.906 6.19a.51.51 0 0 0 .497.731c.91-.073 2.35-.17 3.597-.17s2.688.097 3.597.17a.51.51 0 0 0 .497-.731l-.956-1.913A.5.5 0 0 0 10.691 4H5.309a.5.5 0 0 0-.447.276"/>
+  <path d="M2.52 3.515A2.5 2.5 0 0 1 4.82 2h6.362c1 0 1.904.596 2.298 1.515l.792 1.848c.075.175.21.319.38.404.5.25.855.715.965 1.262l.335 1.679q.05.242.049.49v.413c0 .814-.39 1.543-1 1.997V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.338c-1.292.048-2.745.088-4 .088s-2.708-.04-4-.088V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.892c-.61-.454-1-1.183-1-1.997v-.413a2.5 2.5 0 0 1 .049-.49l.335-1.68c.11-.546.465-1.012.964-1.261a.8.8 0 0 0 .381-.404l.792-1.848ZM4.82 3a1.5 1.5 0 0 0-1.379.91l-.792 1.847a1.8 1.8 0 0 1-.853.904.8.8 0 0 0-.43.564L1.03 8.904a1.5 1.5 0 0 0-.03.294v.413c0 .796.62 1.448 1.408 1.484 1.555.07 3.786.155 5.592.155s4.037-.084 5.592-.155A1.48 1.48 0 0 0 15 9.611v-.413q0-.148-.03-.294l-.335-1.68a.8.8 0 0 0-.43-.563 1.8 1.8 0 0 1-.853-.904l-.792-1.848A1.5 1.5 0 0 0 11.18 3z"/>
+</svg>

docs/assets/icons/bootstrap/cart-shopping.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
+  <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5M3.102 4l1.313 7h8.17l1.313-7zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4m7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2m7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+</svg>

docs/assets/icons/bootstrap/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
+  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
+</svg>

docs/assets/icons/bootstrap/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
+</svg>

docs/assets/icons/bootstrap/chevron-up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/>
+</svg>

docs/assets/icons/bootstrap/circle-info.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+</svg>

docs/assets/icons/bootstrap/circle-plus.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
+</svg>

docs/assets/icons/bootstrap/clock.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
+  <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"/>
+  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0"/>
+</svg>

docs/assets/icons/bootstrap/code.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-code" viewBox="0 0 16 16">
+  <path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8z"/>
+</svg>

docs/assets/icons/bootstrap/credit-card.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-credit-card" viewBox="0 0 16 16">
+  <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v1h14V4a1 1 0 0 0-1-1zm13 4H1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z"/>
+  <path d="M2 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
+</svg>

docs/assets/icons/bootstrap/ellipsis.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
+  <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"/>
+</svg>

docs/assets/icons/bootstrap/envelope.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
+  <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
+</svg>

docs/assets/icons/bootstrap/face-smile.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-smile" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+  <path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.5 3.5 0 0 0 8 11.5a3.5 3.5 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.5 4.5 0 0 1 8 12.5a4.5 4.5 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5"/>
+</svg>

docs/assets/icons/bootstrap/flag.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-flag" viewBox="0 0 16 16">
+  <path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12 12 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A20 20 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a20 20 0 0 0 1.349-.476l.019-.007.004-.002h.001M14 1.221c-.22.078-.48.167-.766.255-.81.252-1.872.523-2.734.523-.886 0-1.592-.286-2.203-.534l-.008-.003C7.662 1.21 7.139 1 6.5 1c-.669 0-1.606.229-2.415.478A21 21 0 0 0 3 1.845v6.433c.22-.078.48-.167.766-.255C4.576 7.77 5.638 7.5 6.5 7.5c.847 0 1.548.28 2.158.525l.028.01C9.32 8.29 9.86 8.5 10.5 8.5c.668 0 1.606-.229 2.415-.478A21 21 0 0 0 14 7.655V1.222z"/>
+</svg>

docs/assets/icons/bootstrap/font-case.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type" viewBox="0 0 16 16">
+  <path d="m2.244 13.081.943-2.803H6.66l.944 2.803H8.86L5.54 3.75H4.322L1 13.081zm2.7-7.923L6.34 9.314H3.51l1.4-4.156zm9.146 7.027h.035v.896h1.128V8.125c0-1.51-1.114-2.345-2.646-2.345-1.736 0-2.59.916-2.666 2.174h1.108c.068-.718.595-1.19 1.517-1.19.971 0 1.518.52 1.518 1.464v.731H12.19c-1.647.007-2.522.8-2.522 2.058 0 1.319.957 2.18 2.345 2.18 1.06 0 1.716-.43 2.078-1.011zm-1.763.035c-.752 0-1.456-.397-1.456-1.244 0-.65.424-1.115 1.408-1.115h1.805v.834c0 .896-.752 1.525-1.757 1.525"/>
+</svg>

docs/assets/icons/bootstrap/gamepad-modern.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-controller" viewBox="0 0 16 16">
+  <path d="M11.5 6.027a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m2.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m-6.5-3h1v1h1v1h-1v1h-1v-1h-1v-1h1z"/>
+  <path d="M3.051 3.26a.5.5 0 0 1 .354-.613l1.932-.518a.5.5 0 0 1 .62.39c.655-.079 1.35-.117 2.043-.117.72 0 1.443.041 2.12.126a.5.5 0 0 1 .622-.399l1.932.518a.5.5 0 0 1 .306.729q.211.136.373.297c.408.408.78 1.05 1.095 1.772.32.733.599 1.591.805 2.466s.34 1.78.364 2.606c.024.816-.059 1.602-.328 2.21a1.42 1.42 0 0 1-1.445.83c-.636-.067-1.115-.394-1.513-.773-.245-.232-.496-.526-.739-.808-.126-.148-.25-.292-.368-.423-.728-.804-1.597-1.527-3.224-1.527s-2.496.723-3.224 1.527c-.119.131-.242.275-.368.423-.243.282-.494.575-.739.808-.398.38-.877.706-1.513.773a1.42 1.42 0 0 1-1.445-.83c-.27-.608-.352-1.395-.329-2.21.024-.826.16-1.73.365-2.606.206-.875.486-1.733.805-2.466.315-.722.687-1.364 1.094-1.772a2.3 2.3 0 0 1 .433-.335l-.028-.079zm2.036.412c-.877.185-1.469.443-1.733.708-.276.276-.587.783-.885 1.465a14 14 0 0 0-.748 2.295 12.4 12.4 0 0 0-.339 2.406c-.022.755.062 1.368.243 1.776a.42.42 0 0 0 .426.24c.327-.034.61-.199.929-.502.212-.202.4-.423.615-.674.133-.156.276-.323.44-.504C4.861 9.969 5.978 9.027 8 9.027s3.139.942 3.965 1.855c.164.181.307.348.44.504.214.251.403.472.615.674.318.303.601.468.929.503a.42.42 0 0 0 .426-.241c.18-.408.265-1.02.243-1.776a12.4 12.4 0 0 0-.339-2.406 14 14 0 0 0-.748-2.295c-.298-.682-.61-1.19-.885-1.465-.264-.265-.856-.523-1.733-.708-.85-.179-1.877-.27-2.913-.27s-2.063.091-2.913.27"/>
+</svg>

docs/assets/icons/bootstrap/globe.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
+  <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z"/>
+</svg>

docs/assets/icons/bootstrap/italic.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
+  <path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
+</svg>

docs/assets/icons/bootstrap/keyboard.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-keyboard" viewBox="0 0 16 16">
+  <path d="M14 5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM2 4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/>
+  <path d="M13 10.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm0-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-5 0A.25.25 0 0 1 8.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 8 8.75zm2 0a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25zm1 2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-5-2A.25.25 0 0 1 6.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 6 8.75zm-2 0A.25.25 0 0 1 4.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 4 8.75zm-2 0A.25.25 0 0 1 2.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 2 8.75zm11-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-2 0a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-2 0A.25.25 0 0 1 9.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 9 6.75zm-2 0A.25.25 0 0 1 7.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 7 6.75zm-2 0A.25.25 0 0 1 5.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 5 6.75zm-3 0A.25.25 0 0 1 2.25 6h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5A.25.25 0 0 1 2 6.75zm0 4a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm2 0a.25.25 0 0 1 .25-.25h5.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-5.5a.25.25 0 0 1-.25-.25z"/>
+</svg>

docs/assets/icons/bootstrap/landmark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bank" viewBox="0 0 16 16">
+  <path d="m8 0 6.61 3h.89a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v7a.5.5 0 0 1 .485.38l.5 2a.498.498 0 0 1-.485.62H.5a.498.498 0 0 1-.485-.62l.5-2A.5.5 0 0 1 1 13V6H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 3h.89zM3.777 3h8.447L8 1zM2 6v7h1V6zm2 0v7h2.5V6zm3.5 0v7h1V6zm2 0v7H12V6zM13 6v7h1V6zm2-1V4H1v1zm-.39 9H1.39l-.25 1h13.72z"/>
+</svg>

docs/assets/icons/bootstrap/link.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link" viewBox="0 0 16 16">
+  <path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9q-.13 0-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/>
+  <path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4 4 0 0 1-.82 1H12a3 3 0 1 0 0-6z"/>
+</svg>

docs/assets/icons/bootstrap/list-ol.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ol" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5"/>
+  <path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635z"/>
+</svg>

docs/assets/icons/bootstrap/list.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ul" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/>
+</svg>

docs/assets/icons/bootstrap/location-dot.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
+  <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10"/>
+  <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
+</svg>

docs/assets/icons/bootstrap/lock.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16">
+  <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2M5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1"/>
+</svg>

docs/assets/icons/bootstrap/magnifying-glass.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
+  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+</svg>

docs/assets/icons/bootstrap/microphone.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mic" viewBox="0 0 16 16">
+  <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5"/>
+  <path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3"/>
+</svg>

docs/assets/icons/bootstrap/minus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-lg" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8"/>
+</svg>

docs/assets/icons/bootstrap/mug-hot.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cup-hot" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M.5 6a.5.5 0 0 0-.488.608l1.652 7.434A2.5 2.5 0 0 0 4.104 16h5.792a2.5 2.5 0 0 0 2.44-1.958l.131-.59a3 3 0 0 0 1.3-5.854l.221-.99A.5.5 0 0 0 13.5 6zM13 12.5a2 2 0 0 1-.316-.025l.867-3.898A2.001 2.001 0 0 1 13 12.5M2.64 13.825 1.123 7h11.754l-1.517 6.825A1.5 1.5 0 0 1 9.896 15H4.104a1.5 1.5 0 0 1-1.464-1.175"/>
+  <path d="m4.4.8-.003.004-.014.019a4 4 0 0 0-.204.31 2 2 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.6.6 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3 3 0 0 1-.202.388 5 5 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 3.6 4.2l.003-.004.014-.019a4 4 0 0 0 .204-.31 2 2 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.6.6 0 0 0-.09-.252A4 4 0 0 0 3.6 2.8l-.01-.012a5 5 0 0 1-.37-.543A1.53 1.53 0 0 1 3 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a6 6 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 4.4.8m3 0-.003.004-.014.019a4 4 0 0 0-.204.31 2 2 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.6.6 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3 3 0 0 1-.202.388 5 5 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 6.6 4.2l.003-.004.014-.019a4 4 0 0 0 .204-.31 2 2 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.6.6 0 0 0-.09-.252A4 4 0 0 0 6.6 2.8l-.01-.012a5 5 0 0 1-.37-.543A1.53 1.53 0 0 1 6 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a6 6 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 7.4.8m3 0-.003.004-.014.019a4 4 0 0 0-.204.31 2 2 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.6.6 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3 3 0 0 1-.202.388 5 5 0 0 1-.252.382l-.019.025-.005.008-.002.002A.5.5 0 0 1 9.6 4.2l.003-.004.014-.019a4 4 0 0 0 .204-.31 2 2 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.6.6 0 0 0-.09-.252A4 4 0 0 0 9.6 2.8l-.01-.012a5 5 0 0 1-.37-.543A1.53 1.53 0 0 1 9 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a6 6 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 10.4.8"/>
+</svg>

docs/assets/icons/bootstrap/music.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-music-note-beamed" viewBox="0 0 16 16">
+  <path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13s1.12-2 2.5-2 2.5.896 2.5 2m9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2"/>
+  <path fill-rule="evenodd" d="M14 11V2h1v9zM6 3v10H5V3z"/>
+  <path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4z"/>
+</svg>

docs/assets/icons/bootstrap/palette.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
+  <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>
+  <path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7"/>
+</svg>

docs/assets/icons/bootstrap/paper-plane-top.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
+  <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z"/>
+</svg>

docs/assets/icons/bootstrap/plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/>
+</svg>

docs/assets/icons/bootstrap/sparkles.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stars" viewBox="0 0 16 16">
+  <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.73 1.73 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.73 1.73 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.73 1.73 0 0 0 3.407 2.31zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z"/>
+</svg>

docs/assets/icons/bootstrap/star.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
+  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
+</svg>

docs/assets/icons/bootstrap/strikethrough.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-strikethrough" viewBox="0 0 16 16">
+  <path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.8 2.8 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967"/>
+</svg>

docs/assets/icons/bootstrap/terminal.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-terminal" viewBox="0 0 16 16">
+  <path d="M6 9a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3A.5.5 0 0 1 6 9M3.854 4.146a.5.5 0 1 0-.708.708L4.793 6.5 3.146 8.146a.5.5 0 1 0 .708.708l2-2a.5.5 0 0 0 0-.708z"/>
+  <path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"/>
+</svg>

docs/assets/icons/bootstrap/trophy.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trophy" viewBox="0 0 16 16">
+  <path d="M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5q0 .807-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33 33 0 0 1 2.5.5m.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935m10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935M3.504 1q.01.775.056 1.469c.13 2.028.457 3.546.87 4.667C5.294 9.48 6.484 10 7 10a.5.5 0 0 1 .5.5v2.61a1 1 0 0 1-.757.97l-1.426.356a.5.5 0 0 0-.179.085L4.5 15h7l-.638-.479a.5.5 0 0 0-.18-.085l-1.425-.356a1 1 0 0 1-.757-.97V10.5A.5.5 0 0 1 9 10c.516 0 1.706-.52 2.57-2.864.413-1.12.74-2.64.87-4.667q.045-.694.056-1.469z"/>
+</svg>

docs/assets/icons/bootstrap/user.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
+  <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
+</svg>

docs/assets/icons/bootstrap/video.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z"/>
+</svg>

docs/assets/icons/bootstrap/xmark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
+  <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
+</svg>

docs/assets/icons/chunk/3-squares-horizontal.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6H4V10H0V6ZM1.25 7.25H2.75V8.75H1.25V7.25Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 6V10H10V6H6ZM8.75 7.25H7.25V8.75H8.75V7.25Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6V10H16V6H12ZM14.75 7.25H13.25V8.75H14.75V7.25Z" fill="black"/>
+</svg>

docs/assets/icons/chunk/3-squares-vertical.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 16L6 12H10V16H6ZM7.25 14.75V13.25H8.75L8.75 14.75H7.25Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 10H10V6H6L6 10ZM7.25 7.25V8.75H8.75L8.75 7.25H7.25Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 4H10V0L6 1.74846e-07L6 4ZM7.25 1.25L7.25 2.75L8.75 2.75L8.75 1.25L7.25 1.25Z" fill="black"/>
+</svg>

docs/assets/icons/chunk/a.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.97752 0H9.02265L14.9303 16H13.3314L11.6698 11.5H4.33035L2.66881 16H1.06982L6.97752 0ZM4.88419 10H11.116L8.00008 1.56112L4.88419 10Z" fill="black"/>
+</svg>

docs/assets/icons/chunk/accessibility.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.50001 7.5H7.25004V8.08053L5.38345 12H7.04486L7.99998 9.99446L8.9549 12H10.6163L8.75004 8.08056V7.5H11.5V6H4.50001V7.5Z" fill="black"/>
+<path d="M8 5C8.55229 5 9 4.55228 9 4C9 3.44772 8.55229 3 8 3C7.44772 3 7 3.44772 7 4C7 4.55228 7.44772 5 8 5Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8Z" fill="black"/>
+</svg>

docs/assets/icons/chunk/activity.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1H15V15H1V1ZM2.5 2.5H13.5V7.5H11.0365L9.78647 10H9.73293L7.23293 4.5H5.28647L4.03647 7H2.5V2.5ZM13.5 9V13.5H2.5V8.5H4.96353L6.21353 6H6.26707L8.76707 11.5H10.7135L11.9635 9H13.5Z" fill="black"/>
+</svg>

docs/assets/icons/chunk/address-card.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 5.5H10V7H13V5.5Z" fill="black"/>
+<path d="M10 9H13V10.5H10V9Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 8C8 9.38071 6.88071 10.5 5.5 10.5C4.11929 10.5 3 9.38071 3 8C3 6.61929 4.11929 5.5 5.5 5.5C6.88071 5.5 8 6.61929 8 8ZM6.5 8C6.5 8.55228 6.05228 9 5.5 9C4.94772 9 4.5 8.55228 4.5 8C4.5 7.44772 4.94772 7 5.5 7C6.05228 7 6.5 7.44772 6.5 8Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2H16V14H0V2ZM1.5 3.5H14.5V12.5H1.5V3.5Z" fill="black"/>
+</svg>

docs/assets/icons/chunk/alarm-clock.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.13024 4.1303L4.13024 1.1303L3.06958 0.0696411L0.0695801 3.06964L1.13024 4.1303Z" fill="black"/>
+<path d="M7.24993 5H8.74994V8.68933L10.5303 10.4697L9.4696 11.5303L7.24993 9.31066V5Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3101 12.2495C14.0596 11.1901 14.4999 9.89645 14.4999 8.5C14.4999 4.91014 11.5898 2 7.99993 2C4.41008 2 1.49993 4.91014 1.49993 8.5C1.49993 9.89645 1.94031 11.1901 2.68975 12.2495L0.469604 14.4697L1.53026 15.5303L3.69257 13.368C4.83939 14.3835 6.34767 15 7.99993 15C9.6522 15 11.1605 14.3835 12.3073 13.368L14.4696 15.5303L15.5303 14.4697L13.3101 12.2495ZM7.99993 13.5C10.7614 13.5 12.9999 11.2614 12.9999 8.5C12.9999 5.73857 10.7614 3.5 7.99993 3.5C5.23851 3.5 2.99993 5.73857 2.99993 8.5C2.99993 11.2614 5.23851 13.5 7.99993 13.5Z" fill="black"/>
+<path d="M11.8696 1.1303L14.8696 4.1303L15.9303 3.06964L12.9303 0.0696411L11.8696 1.1303Z" fill="black"/>
+</svg>

docs/assets/icons/chunk/alien.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.54223 12.3383L8 16L12.4578 12.3383C14.0672 11.0162 15 9.04287 15 6.96005C15 3.11612 11.8439 0 8 0C4.15607 0 1 3.11612 1 6.96005C1 9.04287 1.93278 11.0162 3.54223 12.3383ZM8 14.0588L4.49434 11.1792C3.63268 10.4714 3.01825 9.52561 2.71492 8.47699L7.25 9.73673V7.25C7.25 5.73122 6.01878 4.5 4.5 4.5H3.09304C4.00279 2.72357 5.86353 1.5 8 1.5C10.1365 1.5 11.9972 2.72357 12.907 4.5H11.5C9.98122 4.5 8.75 5.73122 8.75 7.25V9.73673L13.2851 8.47699C12.9818 9.52561 12.3673 10.4714 11.5057 11.1792L8 14.0588ZM13.4991 6.86074C13.4938 6.56777 13.4649 6.28026 13.4144 6H11.5C10.8096 6 10.25 6.55964 10.25 7.25V7.76327L13.4991 6.86074ZM5.75 7.76327L2.5009 6.86074C2.50623 6.56777 2.53506 6.28026 2.58561 6H4.5C5.19036 6 5.75 6.55964 5.75 7.25V7.76327Z" fill="black"/>
+</svg>

docs/assets/icons/chunk/align-bottom.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 13.5L15 13.5V15L1 15L1 13.5Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 11.5H9L9 1L14 1L14 11.5ZM12.5 2.5L12.5 10H10.5L10.5 2.5H12.5Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 11.5L7 5H2L2 11.5L7 11.5ZM5.5 10L5.5 6.5H3.5V10H5.5Z" fill="black"/>
+</svg>