eslint

.vscode/settings.json

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

cspell.json

@@ -47,7 +47,6 @@
     "dropdowns",
     "easings",
     "endraw",
-    "endregion",
     "enterkeyhint",
     "eqeqeq",
     "erroneou",
@@ -103,7 +102,6 @@
     "monospace",
     "mousedown",
     "mousemove",
-    "mouseout",
     "mouseup",
     "multiselectable",
     "nextjs",
@@ -173,12 +171,11 @@
     "valpha",
     "valuenow",
     "valuetext",
-    "Vuejs",
+    "viewports",
     "WCAG",
     "webawesome",
     "WEBP",
-    "Webpacker",
-    "xmark"
+    "Webpacker"
   ],
   "ignorePaths": [
     "package.json",

custom-elements-manifest.config.js

@@ -1,7 +1,6 @@
 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 { parse } from 'comment-parser';
 import { pascalCase } from 'pascal-case';
 import commandLineArgs from 'command-line-args';
@@ -39,7 +38,6 @@ export default {
         customElementsManifest.package = { name, description, version, author, homepage, license };
       }
     },
-
     // Infer tag names because we no longer use @customElement decorators.
     {
       name: 'wa-infer-tag-names',
@@ -68,7 +66,6 @@ export default {
         }
       }
     },
-
     // Parse custom jsDoc tags
     {
       name: 'wa-custom-tags',
@@ -140,7 +137,6 @@ export default {
         }
       }
     },
-
     {
       name: 'wa-react-event-names',
       analyzePhase({ ts, node, moduleDoc }) {
@@ -159,7 +155,6 @@ export default {
         }
       }
     },
-
     {
       name: 'wa-translate-module-paths',
       packageLinkPhase({ customElementsManifest }) {
@@ -196,7 +191,6 @@ export default {
         });
       }
     },
-
     // Generate custom VS Code data
     customElementVsCodePlugin({
       outdir,
@@ -208,7 +202,6 @@ export default {
         }
       ]
     }),
-
     customElementJetBrainsPlugin({
       outdir: './dist',
       excludeCss: true,
@@ -219,12 +212,6 @@ export default {
           url: `https://shoelace.style/components/${tag.replace('wa-', '')}`
         };
       }
-    }),
-
-    customElementVuejsPlugin({
-      outdir: './dist/types/vue',
-      fileName: 'index.d.ts',
-      componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.component.js`
     })
   ]
 };

docs/_includes/component.njk

@@ -155,12 +155,12 @@
             </td>
             <td style="text-align: center;">
               {% if prop.reflects %}
-                <wa-icon label="yes" name="check" variant="solid"></wa-icon>
+                <wa-icon label="yes" name="check-lg"></wa-icon>
               {% endif %}
             </td>
             <td>
               {% if prop.type.text %}
-                <code>{{ prop.type.text | trimPipes | markdownInline | safe }}</code>
+                <code>{{ prop.type.text | markdownInline | safe }}</code>
               {% else %}
                 -
               {% endif %}
@@ -211,7 +211,7 @@
             <td>{{ event.description | markdownInline | safe }}</td>
             <td>
               {% if event.type.text %}
-                <code>{{ event.type.text | trimPipes }}</code>
+                <code>{{ event.type.text }}</code>
               {% else %}
                 -
               {% endif %}
@@ -245,7 +245,7 @@
               {% if method.parameters.length %}
                 <code>
                   {% for param in method.parameters %}
-                    {{ param.name }}: {{ param.type.text | trimPipes }}{% if not loop.last %},{% endif %}
+                    {{ param.name }}: {{ param.type.text }}{% if not loop.last %},{% endif %}
                   {% endfor %}
                 </code>
               {% else %}

docs/_includes/default.njk

@@ -37,9 +37,6 @@
     <link rel="stylesheet" href="/dist/themes/applied.css" />
     <link rel="stylesheet" href="/dist/themes/forms.css" />
     <link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/default.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/color_standard.css" />
-    <link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/demo_patterns.css" />
-    <link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/demo_sublayout.css" />
     <script type="module" src="/dist/autoloader.js"></script>
 
     {# Set the initial theme and menu states here to prevent flashing #}
@@ -54,7 +51,7 @@
     {# Web Fonts #}
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Inter:wght@100..900&family=Lora:wght@400..700&family=Mulish:wght@200..1000&family=Noto+Sans+Display:wght@100..900&family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:wght@100..900&family=Noto+Serif:wght@100..900&family=Open+Sans:wght@300..800&family=Playfair+Display:wght@400..900&family=Playfair:opsz,wght@5..1200,300;5..1200,400;5..1200,500;5..1200,600&family=Quicksand:wght@300..700&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Mono:wght@300..700&family=Roboto+Serif:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Slab:wght@300..700&family=Inconsolata:wght@200..900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Sans+Mono&display=swap" rel="stylesheet">
 
     {# Turbo + Scroll positioning #}
     <script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
@@ -64,7 +61,7 @@
     <script src="{{ assetUrl('scripts/search.js') }}" defer></script>
   </head>
   <body>
-    <a id="skip-to-main" class="wa-visually-hidden" href="#main-content" data-smooth-link="false">
+    <a id="skip-to-content" class="wa-visually-hidden" href="#main-content" data-smooth-link="false">
       Skip to main content
     </a>
 
@@ -89,13 +86,13 @@
 
       <div class="sidebar-buttons">
         <wa-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
-          <wa-icon slot="prefix" name="github" family="brands"></wa-icon> Code
+          <wa-icon slot="prefix" name="github"></wa-icon> Code
         </wa-button>
         <wa-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
-          <wa-icon slot="prefix" name="star" variant="solid"></wa-icon> Star
+          <wa-icon slot="prefix" name="star-fill"></wa-icon> Star
         </wa-button>
         <wa-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
-          <wa-icon slot="prefix" name="twitter" family="brands"></wa-icon> Follow
+          <wa-icon slot="prefix" name="twitter"></wa-icon> Follow
         </wa-button>
       </div>
 

docs/_includes/layout-example.njk

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html
+  lang="en"
+  data-layout="{{ layout }}"
+  data-shoelace-version="{{ meta.version }}"
+>
+  <head>
+    {# Metadata #}
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="{{ meta.description }}" />
+    <title>{{ meta.title }}</title>
+
+    {# Opt out of Turbo caching #}
+    <meta name="turbo-cache-control" content="no-cache">
+    <meta name="turbo-cache-control" content="no-preview">
+
+    {# Favicons #}
+    <link rel="icon" href="{{ assetUrl('images/favicon.svg') }}" type="image/x-icon" />
+
+    {# Twitter Cards #}
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:creator" content="shoelace_style" />
+    <meta name="twitter:image" content="{{ assetUrl(meta.image, true) }}" />
+
+    {# OpenGraph #}
+    <meta property="og:url" content="{{ rootUrl(page.url, true) }}" />
+    <meta property="og:title" content="{{ meta.title }}" />
+    <meta property="og:description" content="{{ meta.description }}" />
+    <meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
+
+    {# WebAwesome #}
+    <link rel="stylesheet" href="/dist/themes/default.css" />
+    <link rel="stylesheet" href="/dist/themes/applied.css" />
+    <script type="module" src="/dist/webawesome.js"></script>
+
+    {# Set the initial theme and menu states here to prevent flashing #}
+    <script>
+      (() => {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = localStorage.getItem('theme') || 'auto';
+        document.documentElement.classList.toggle('wa-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
+
+        if (window.Turbo) {
+          window.Turbo.session.drive = false
+        }
+      })();
+    </script>
+
+    <style>
+      *, *:before, *:after {
+        box-sizing: border-box;
+      }
+
+      html, body {
+        height: 100%;
+        min-height: 100%;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+    </style>
+
+  </head>
+  <body>
+    {% block content %}
+      {{ content | safe }}
+    {% endblock %}
+  </body>
+</html>

docs/_includes/layout-templates/advanced-example.css

@@ -0,0 +1,73 @@
+html {
+  min-height: 100%;
+  height: auto;
+}
+
+body {
+  padding: 0;
+  height: auto;
+}
+
+.grid {
+  font-size: 1.35rem;
+  text-align: center;
+  display: grid;
+  place-content: center;
+  padding: 1rem;
+}
+
+header {
+  background-color: var(--wa-color-blue-90);
+}
+
+aside {
+  min-width: 250px;
+  max-width: 250px;
+  height: 100%;
+}
+
+main {
+  background-color: var(--wa-color-green-90);
+  height: 100%;
+}
+
+footer {
+  background-color: var(--wa-color-blue-80);
+}
+
+.banner {
+  background-color: var(--wa-color-yellow-90);
+}
+
+.header {
+  background-color: var(--wa-color-blue-90);
+}
+
+.banner,
+.header {
+  min-width: 100%;
+  height: 100%;
+}
+
+[slot='header'] {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+
+[slot='aside'] {
+  background-color: var(--wa-color-yellow-90);
+}
+
+[slot='menu'] {
+  background-color: var(--wa-color-red-80);
+}
+
+[slot='main-header'] {
+  background-color: var(--wa-color-red-90);
+  padding: 1rem;
+}
+
+[slot='main-footer'] {
+  background-color: var(--wa-color-red-70);
+}

docs/_includes/layout-templates/advanced-example.html

@@ -0,0 +1,18 @@
+<wa-layout main-id="main-content" class="wa-theme-light">
+  <header slot="banner" class="grid banner">banner</header>
+
+  <header slot="header" class="grid header">header</header>
+
+  <aside class="grid" slot="menu">menu</aside>
+
+  <header class="grid" slot="main-header">main-header</header>
+
+  <main class="grid" id="main-content">main</main>
+
+  <footer class="grid" slot="main-footer">main-footer</footer>
+
+  <aside class="grid" slot="aside">aside</aside>
+  <footer class="grid" slot="footer">footer</footer>
+</wa-layout>
+
+{% include "layout-widget.njk" %}

docs/_includes/layout-templates/app.css

@@ -0,0 +1,216 @@
+html {
+  min-height: 100%;
+  height: auto;
+}
+
+body {
+  padding: 0;
+  height: auto;
+}
+
+main {
+  min-height: 100%;
+  padding: 1rem 2rem;
+}
+
+/* Layout */
+wa-layout {
+  background-color: var(--wa-color-neutral-95);
+  color: var(--wa-color-neutral-20);
+}
+
+wa-card :is(p, h3) {
+  margin: 0;
+}
+
+wa-layout::part(header) {
+  /** Because headers are sticky, this keeps text from leaking through. */
+  background-color: var(--wa-color-white);
+}
+
+wa-layout::part(drawer__panel) {
+  height: 100%;
+}
+
+wa-layout[view='mobile'] {
+  background-color: var(--wa-color-white);
+  --menu-width: 0px;
+}
+
+wa-layout[view='mobile']::part(header) {
+  padding: 0.25rem;
+  border-bottom: 1px solid var(--wa-color-neutral-70);
+}
+
+wa-layout[view='mobile']::part(navigation) {
+  display: none;
+}
+
+wa-layout[view='desktop']::part(main) {
+  padding-top: 1rem;
+}
+
+wa-layout[view='desktop'] {
+  --menu-width: 250px;
+}
+
+wa-layout[view='desktop']::part(navigation) {
+  padding-top: 1.9rem;
+}
+
+wa-layout[view='desktop'] > [slot='header'] {
+  display: none;
+}
+
+wa-layout[view='desktop']::part(header) {
+  display: none;
+}
+
+wa-layout[view='desktop'] main {
+  background-color: var(--wa-color-white);
+  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--wa-color-neutral-80);
+  border-top-left-radius: 8px;
+}
+
+/* Navigation / Lists */
+
+/* Highlights */
+.highlight {
+  font-size: 0.85em;
+  padding: 0.4em 0.6em;
+  border-radius: 6px;
+  display: inline-block;
+}
+
+.highlight--success {
+  background-color: var(--wa-color-success-fill-muted);
+  color: var(--wa-color-success-text-on-muted);
+}
+
+.highlight--danger {
+  background-color: var(--wa-color-red-90);
+  color: var(--wa-color-red-30);
+}
+
+/* Text */
+.text--light {
+  color: var(--wa-color-neutral-40);
+}
+
+/* Cards */
+.wa-card--muted::part(base) {
+  --border-color: transparent;
+  background-color: transparent;
+  display: grid;
+  height: 100%;
+  box-shadow: none;
+}
+
+.wa-card--muted::part(body) {
+  display: grid;
+  align-content: flex-end;
+  gap: var(--padding);
+}
+
+/* Buttons */
+.wa-button--card {
+  --border-radius: 8px;
+  --padding: 1rem 0px;
+}
+
+.wa-button--card.wa-button--muted {
+  --background-color: var(--wa-color-neutral-95);
+}
+
+.wa-button--card::part(base) {
+  height: 100%;
+  border-radius: var(--border-radius);
+  padding: var(--padding);
+}
+
+.wa-button--card::part(label) {
+  width: 100%;
+}
+
+.wa-button--muted {
+  --text-color: var(--wa-color-neutral-30);
+  --text-color-active: var(--wa-color-neutral-30);
+  --background-color: transparent;
+  --background-color-active: var(--wa-color-neutral-90);
+  --border-color: transparent;
+  --border-color-active: var(--wa-color-neutral-80);
+}
+
+.wa-button--muted::part(base) {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  border-color: var(--border-color);
+}
+
+.wa-button--muted:is(:focus-within)::part(base) {
+  background-color: var(--background-color);
+  color: var(--text-color-active);
+  border-color: var(--border-color-active);
+}
+
+.wa-button--muted:is(:hover)::part(base) {
+  background-color: var(--background-color-active);
+  color: var(--text-color-active);
+  border-color: var(--border-color-active);
+}
+
+.wa-button--logo::part(base) {
+  font-size: 1.5rem;
+  color: var(--wa-color-neutral-30);
+}
+
+.wa-button--square::part(base) {
+  border-radius: 0px;
+}
+
+.wa-button--stretch {
+  width: 100%;
+}
+
+.wa-button--stretch::part(label) {
+  flex: 1 1 auto;
+}
+
+.wa-button--nav-footer {
+  --border-color: var(--wa-color-neutral-70);
+  --wa-spacing-large: 8px;
+}
+
+wa-layout[view='desktop'] .wa-button--nav-footer::part(base) {
+  --border-color: transparent;
+  border-top-color: var(--wa-color-neutral-70);
+}
+
+/* Tables */
+table {
+  max-width: 100%;
+  border: none;
+  border-collapse: collapse;
+  color: inherit;
+}
+
+table tr {
+  border-bottom: 1px solid var(--wa-color-neutral-70);
+}
+
+table th {
+  font-weight: var(--wa-font-weight-semibold);
+  text-align: left;
+  padding: 0.75rem 1rem;
+}
+
+table td {
+  line-height: var(--wa-line-height-normal);
+  padding: 1rem;
+}
+
+* > table {
+  max-width: 100%;
+  overflow-x: auto;
+}

docs/_includes/layout-templates/app.html

@@ -0,0 +1,428 @@
+<wa-layout main-id="main-content" class="wa-theme-light">
+  <header slot="header">
+    <wa-icon-button name="list" style="font-size: 1.5rem" data-toggle-nav></wa-icon-button>
+  </header>
+  <wa-button
+    href="#"
+    variant="text"
+    style="padding: 0 0.4rem"
+    class="wa-button--logo wa-button--stretch wa-button--muted"
+    size="large"
+    slot="navigation-header"
+  >
+    <wa-icon name="music-note" slot="prefix" style="font-size: 2rem"></wa-icon>
+    Musicify
+  </wa-button>
+
+  <nav style="padding: 1rem" slot="navigation">
+    <wa-nav-group style="height: 100%">
+      <wa-nav-item href="#">
+        <wa-icon name="search" slot="prefix"></wa-icon>
+        Search
+      </wa-nav-item>
+
+      <wa-nav-item href="#">
+        <wa-icon name="bell" slot="prefix"></wa-icon>
+        Notifications
+      </wa-nav-item>
+
+      <wa-divider></wa-divider>
+
+      <wa-nav-item href="#" current="page">
+        <wa-icon name="house-door" slot="prefix"></wa-icon>
+        Home
+      </wa-nav-item>
+
+      <wa-nav-item href="#">
+        <wa-icon name="music-note-list" slot="prefix"></wa-icon>
+        Playlists
+      </wa-nav-item>
+
+      <wa-nav-item href="#">
+        <wa-icon name="file-earmark-music" slot="prefix"></wa-icon>
+        Tracks
+      </wa-nav-item>
+
+      <wa-nav-item href="#">
+        <wa-icon name="gear" slot="prefix"></wa-icon>
+        Settings
+      </wa-nav-item>
+
+      <wa-nav-item href="#" style="margin-top: auto">
+        <wa-icon name="question-circle" slot="prefix"></wa-icon>
+        Help
+      </wa-nav-item>
+    </wa-nav-group>
+  </nav>
+
+  <!-- Hacky override to make padding 8px -->
+  <wa-button
+    slot="navigation-footer"
+    outline
+    class="wa-button--square wa-button--stretch wa-button--muted wa-button--nav-footer"
+    size="large"
+    href="#"
+  >
+    <div
+      style="
+        display: grid;
+        align-items: center;
+        max-width: 100%;
+        gap: 8px;
+        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
+      "
+    >
+      <wa-avatar shape="rounded" style="--size: 36px"></wa-avatar>
+      <div style="text-overflow: ellipsis; max-width: 100%; overflow: hidden; text-align: start; font-size: 1rem">
+        Really really really long name
+      </div>
+      <wa-icon name="chevron-right"></wa-icon>
+    </div>
+  </wa-button>
+
+  <main id="main-content" class="main">
+    <h1 style="margin: 0.5rem 0 2rem 0">Good Evening, Konnor Rogers</h1>
+
+    <section>
+      <div style="display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end; gap: 8px">
+        <h2 style="">Overview</h2>
+
+        <wa-select value="monthly">
+          <wa-option value="daily">Daily</wa-option>
+          <wa-option value="weekly">Weekly</wa-option>
+          <wa-option value="monthly">Monthly</wa-option>
+          <wa-option value="yearly">Yearly</wa-option>
+        </wa-select>
+      </div>
+
+      <wa-divider></wa-divider>
+
+      <div
+        style="
+          margin-top: 1rem;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          grid-auto-rows: 1fr;
+          gap: var(--wa-spacing-large);
+          text-align: center;
+        "
+      >
+        <wa-card class="wa-card--muted" style="--padding: 8px">
+          <h3 slot="header">Total listening time</h3>
+
+          <p>
+            <strong><wa-format-number value="35000"></wa-format-number></strong> minutes
+          </p>
+          <p>
+            <mark class="highlight highlight--success"> +16% </mark>
+
+            <small class="text--light">from last month</small>
+          </p>
+        </wa-card>
+
+        <wa-card class="wa-card--muted" style="--padding: 8px">
+          <h3 slot="header">Total songs played</h3>
+
+          <p>
+            <strong><wa-format-number value="302"></wa-format-number></strong> songs
+          </p>
+
+          <p>
+            <mark class="highlight highlight--danger"> -0.3% </mark>
+
+            <small class="text--light">from last month</small>
+          </p>
+        </wa-card>
+
+        <wa-card class="wa-card--muted" style="--padding: 8px">
+          <h3 slot="header">Average listening session</h3>
+
+          <p>
+            <strong><wa-format-number value="36"></wa-format-number></strong> minutes
+          </p>
+
+          <p>
+            <mark class="highlight highlight--success"> +11.4% </mark>
+
+            <small class="text--light">from last month</small>
+          </p>
+        </wa-card>
+
+        <wa-card class="wa-card--muted" style="--padding: 8px">
+          <h3 slot="header">Average track listening time</h3>
+
+          <p>
+            <strong><wa-format-number value="2"></wa-format-number></strong> minutes,
+            <strong><wa-format-number value="42"></wa-format-number></strong> seconds
+          </p>
+          <p>
+            <mark class="highlight highlight--success"> -6.2% </mark>
+
+            <small class="text--light">from last month</small>
+          </p>
+        </wa-card>
+      </div>
+    </section>
+
+    <section style="margin-top: 3rem">
+      <h2>Recent playlists</h2>
+
+      <div
+        style="
+          margin-top: 1rem;
+          --card-width: clamp(200px, 100%, 350px);
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
+          gap: 16px;
+        "
+      >
+        <wa-button variant="neutral" class="wa-button--card wa-button--muted" href="#">
+          <div style="display: flex; gap: 1rem">
+            <img
+              src="https://via.placeholder.com/100x100"
+              height="100"
+              width="100"
+              style="align-self: center; border-radius: 8px; display: inline-block; max-width: 100%; flex: 0 1 auto"
+            />
+
+            <article
+              style="
+                display: grid;
+                align-content: center;
+                color: var(--wa-color-neutral-700);
+                grid-template-columns: minmax(0, 1fr);
+                max-width: 100%;
+                overflow: hidden;
+                width: 100%;
+              "
+            >
+              <h2 style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">Punk Rock Anthems</h2>
+
+              <p style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">
+                For when you just wanna rock out, have a good time, and feel angsty.
+              </p>
+
+              <wa-icon name="chevron-right" style="justify-self: flex-end"></wa-icon>
+            </article>
+          </div>
+        </wa-button>
+
+        <wa-button variant="neutral" class="wa-button--card wa-button--muted" href="#">
+          <div style="display: flex; gap: 1rem">
+            <img
+              src="https://via.placeholder.com/100x100"
+              height="100"
+              width="100"
+              style="align-self: center; border-radius: 8px; display: inline-block; max-width: 100%"
+            />
+
+            <article
+              style="
+                display: grid;
+                align-content: center;
+                color: var(--wa-color-neutral-700);
+                grid-template-columns: minmax(0, 1fr);
+                max-width: 100%;
+                overflow: hidden;
+                width: 100%;
+              "
+            >
+              <h2 style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">Random</h2>
+
+              <p style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">
+                Throw it on shuffle, and embrace the chaos.
+              </p>
+
+              <wa-icon name="chevron-right" style="justify-self: flex-end"></wa-icon>
+            </article>
+          </div>
+        </wa-button>
+
+        <wa-button variant="neutral" class="wa-button--card wa-button--muted" href="#">
+          <div style="display: flex; gap: 1rem">
+            <img
+              src="https://via.placeholder.com/100x100"
+              height="100"
+              width="100"
+              style="align-self: center; border-radius: 8px; display: inline-block"
+            />
+
+            <article
+              style="
+                display: grid;
+                align-content: center;
+                color: var(--wa-color-neutral-700);
+                grid-template-columns: minmax(0, 1fr);
+                max-width: 100%;
+                overflow: hidden;
+                width: 100%;
+              "
+            >
+              <h2 style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">Classics</h2>
+
+              <p style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">
+                Timeless songs that you love to relive.
+              </p>
+
+              <wa-icon name="chevron-right" style="justify-self: flex-end"></wa-icon>
+            </article>
+          </div>
+        </wa-button>
+      </div>
+    </section>
+
+    <section style="margin-top: 3rem">
+      <h2>Recent tracks</h2>
+
+      <div style="margin-top: 1rem; max-width: 100%; overflow: auto">
+        <table style="width: 100%; min-width: 500px; border-spacing: 2px">
+          <thead>
+            <tr>
+              <th>Release Date</th>
+
+              <th>Name</th>
+
+              <th>Album</th>
+
+              <th>Artist</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </main>
+</wa-layout>

docs/_includes/layout-templates/example.css

@@ -0,0 +1,74 @@
+html {
+  min-height: 100%;
+  height: auto;
+}
+
+body {
+  padding: 0;
+  height: auto;
+}
+
+.grid {
+  font-size: 1.35rem;
+  text-align: center;
+  display: grid;
+  place-content: center;
+  padding: 1rem;
+}
+
+header {
+  background-color: var(--wa-color-blue-90);
+}
+
+aside {
+  min-width: 250px;
+  max-width: 250px;
+}
+
+main {
+  background-color: var(--wa-color-green-90);
+  height: 100%;
+}
+
+footer {
+  background-color: var(--wa-color-blue-80);
+}
+
+.banner {
+  background-color: var(--wa-color-yellow-90);
+}
+
+.header {
+  background-color: var(--wa-color-blue-90);
+}
+
+.banner,
+.header {
+  min-width: 100%;
+  height: 100%;
+}
+
+[slot='header'] {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+
+[slot='aside'] {
+  height: 100%;
+  background-color: var(--wa-color-yellow-90);
+}
+
+[slot='menu'] {
+  height: 100%;
+  background-color: var(--wa-color-red-90);
+}
+
+[slot='main-header'] {
+  background-color: var(--wa-color-red-80);
+  padding: 1rem;
+}
+
+[slot='main-footer'] {
+  background-color: var(--wa-color-green-80);
+}

docs/_includes/layout-templates/example.html

@@ -0,0 +1,47 @@
+<wa-layout>
+  <div slot="navigation">
+    <div style="padding: 2rem">
+      <a href="#">Option 1</a><br />
+      <a href="#">Option 2</a><br />
+      <a href="#">Option 3</a>
+    </div>
+  </div>
+
+  <button data-toggle-nav>Menu</button>
+
+  <p>I'm just a lowly page.</p>
+  <p>
+    I think I'll put a <a href="#">link right here</a> for you to click. And maybe <a href="#">another one here</a> for
+    fun.
+  </p>
+
+  <wa-dialog id="dialog"> I'm just a lowly dialog. </wa-dialog>
+
+  <wa-button>Open Dialog</wa-button>
+</wa-layout>
+
+<style>
+  wa-layout {
+    --menu-width: 260px;
+
+    outline: dashed 1px dodgerblue;
+    max-width: 1280px;
+    margin: 0 auto;
+  }
+
+  wa-layout::part(menu) {
+    border-right: solid 1px #ececec;
+  }
+
+  wa-layout::part(main-content) {
+    padding: 2rem;
+  }
+</style>
+
+<script>
+  const dialog = document.getElementById('dialog');
+
+  dialog.nextElementSibling.addEventListener('click', () => {
+    dialog.open = true;
+  });
+</script>

docs/_includes/layout-templates/hero.css

@@ -0,0 +1,9 @@
+html {
+  min-height: 100%;
+  height: auto;
+}
+
+body {
+  padding: 0;
+  height: auto;
+}

docs/_includes/layout-templates/hero.html

@@ -0,0 +1 @@
+<wa-layout main-id="main-content" class="wa-theme-light"> </wa-layout>

docs/_includes/layout-templates/sport-awesome.css

@@ -0,0 +1,182 @@
+html {
+  min-height: 100%;
+  height: auto;
+}
+
+body {
+  padding: 0 !important;
+  height: auto;
+  margin: 0;
+}
+
+/** https://andy-bell.co.uk/my-favourite-3-lines-of-css/ */
+.flow > * + * {
+  margin-block-start: var(--wa-flow-spacing);
+}
+
+img {
+  display: inline-block;
+  max-width: 100%;
+  height: auto;
+}
+
+.navigation--desktop::part(nav-items) {
+  gap: 2rem;
+}
+
+.navigation--top::part(nav-items) {
+  flex-direction: row;
+}
+
+.navigation--top wa-nav-item {
+  font-size: 1.4rem;
+  font-weight: bold;
+}
+
+.navigation--top wa-nav-item::part(content) {
+  text-align: center;
+  justify-content: center;
+}
+
+.navigation--top wa-nav-item {
+  --text-color: var(--wa-color-brand-text-on-vivid);
+  --text-color-hover: var(--wa-color-text-normal);
+  --background-color: transparent;
+  --background-color-hover: var(--wa-color-neutral-fill-muted-alt);
+}
+
+.header {
+  display: flex;
+  border-bottom: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-brand-fill-vivid-alt);
+  background-color: var(--wa-color-white);
+}
+
+.header > * {
+  padding-top: var(--wa-space-m);
+  padding-bottom: var(--wa-space-m);
+}
+
+.header__navigation {
+  display: flex;
+  clip-path: polygon(var(--wa-space-2xl) 0, 100% 0, 100% 100%, 0 100%);
+  padding-inline-start: calc(var(--wa-space-2xl) + var(--wa-space-xs));
+  padding-inline-end: var(--wa-space-m);
+  background-color: var(--wa-color-brand-fill-vivid-alt);
+  width: 100%;
+}
+
+.header > .logo {
+  padding-inline-start: var(--wa-space-m);
+  /** Responsive font size for the top header to make it flow nicer */
+  font-size: clamp(1rem, 4vw, 1.4rem);
+}
+
+a.logo {
+  flex-shrink: 0;
+  font-size: 1.4rem;
+  font-weight: bold;
+  color: var(--wa-color-text-normal);
+  text-decoration: none;
+  margin: auto;
+}
+
+a.logo:is(:hover, :focus) {
+  text-decoration: underline;
+}
+
+.logo__accent {
+  color: var(--wa-color-yellow-70);
+}
+
+.navigation--desktop {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.navigation--desktop wa-nav-item[current='page'] {
+  text-decoration: underline;
+  text-underline-offset: 8px;
+  text-decoration-thickness: 4px;
+  text-decoration-color: var(--wa-color-brand-outline-muted-alt);
+}
+
+.navigation--desktop wa-nav-item[current='page']:hover {
+  text-decoration-color: var(--wa-color-brand-outline-vivid);
+}
+
+.navigation--extra {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-inline-start: auto;
+}
+
+wa-layout[view='desktop'] [data-toggle-nav],
+wa-layout[view='desktop']::part(navigation) {
+  display: none;
+}
+
+wa-layout[view='mobile'] .navigation--desktop {
+  display: none;
+}
+
+.layout-banner {
+  padding: var(--wa-space-m);
+  text-align: center;
+  background-color: var(--wa-color-yellow-80);
+}
+
+.stats-grid {
+  display: grid;
+  /** 30vw ensures we never show more than 3 tables in the viewport at any given time. */
+  grid-template-columns: repeat(auto-fit, minmax(clamp(225px, 30vw, 100%), 1fr));
+  gap: var(--wa-space-m);
+  grid-template-rows: 1fr;
+  align-items: start;
+  max-width: 100%;
+}
+
+.stats-grid table {
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: var(--wa-panel-corners);
+  border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-outline);
+}
+
+.table-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.stats-grid table * {
+  font-variant-numeric: tabular-nums;
+}
+
+.stats-grid table th {
+  font-weight: bold;
+  text-align: center;
+}
+
+.stats-grid table td:nth-child(2) {
+  text-align: end;
+}
+
+.navigation--top.navigation--social::part(nav-items) {
+  justify-content: flex-end;
+}
+
+.navigation--social {
+  flex-grow: 1;
+}
+
+.navigation--top .social-link {
+  display: none;
+}
+
+@media screen and (min-width: 415px) {
+  .navigation--top .social-link {
+    display: flex;
+  }
+}

docs/_includes/layout-templates/sport-awesome.html

@@ -0,0 +1,343 @@
+<wa-layout main-id="main-content" class="wa-theme-light" mobile-breakpoint="925" disable-sticky="banner">
+  <header class="layout-banner" slot="banner">Reminder! Get your insurance paperwork in by Oct 12!</header>
+
+  <header class="header" slot="header">
+    <a href="#" class="logo"> <span>Sport</span> <span class="logo__accent">Awesome</span> </a>
+
+    <div class="header__navigation">
+      <wa-nav-group class="navigation navigation--top navigation--desktop">
+        <wa-nav-item href="#" current="page">Home</wa-nav-item>
+        <wa-nav-item href="#">Schedule</wa-nav-item>
+        <wa-nav-item href="#">Roster</wa-nav-item>
+        <wa-nav-item href="#">Stats</wa-nav-item>
+        <wa-nav-item href="#">Videos</wa-nav-item>
+      </wa-nav-group>
+
+      <wa-nav-group class="navigation navigation--top navigation--social">
+        <wa-nav-item class="social-link" href="#"><wa-icon name="instagram"></wa-icon></wa-nav-item>
+        <wa-nav-item class="social-link" href="#"><wa-icon name="facebook"></wa-icon></wa-nav-item>
+        <wa-nav-item data-toggle-nav href="#"><wa-icon name="list"></wa-icon></wa-nav-item>
+      </wa-nav-group>
+    </div>
+  </header>
+
+  <a href="#" class="logo" slot="navigation-header"> Sport <span class="logo__accent">Awesome</span> </a>
+
+  <wa-nav-group slot="navigation">
+    <wa-nav-item href="#" current="page">
+      <wa-icon name="house-door" slot="prefix"></wa-icon>
+      Home
+    </wa-nav-item>
+    <wa-nav-item href="#">
+      <wa-icon name="calendar" slot="prefix"></wa-icon>
+      Schedule
+    </wa-nav-item>
+    <wa-nav-item href="#">
+      <wa-icon name="people" slot="prefix"></wa-icon>
+      Roster
+    </wa-nav-item>
+    <wa-nav-item href="#">
+      <wa-icon name="graph-up-arrow" slot="prefix"></wa-icon>
+      Stats
+    </wa-nav-item>
+    <wa-nav-item href="#">
+      <wa-icon name="camera-video" slot="prefix"></wa-icon>
+      Videos
+    </wa-nav-item>
+
+    <wa-divider></wa-divider>
+
+    <wa-nav-group>
+      <wa-nav-item href="#">
+        <wa-icon name="instagram" slot="prefix"></wa-icon>
+        Instagram
+      </wa-nav-item>
+      <wa-nav-item href="#">
+        <wa-icon name="facebook" slot="prefix"></wa-icon>
+        Facebook
+      </wa-nav-item>
+    </wa-nav-group>
+  </wa-nav-group>
+
+  <main id="main-content" class="flow" style="padding: var(--wa-space-m)">
+    <div style="display: flex; flex-wrap: wrap; gap: var(--wa-space-m)">
+      <figure style="min-width: 75%; display: flex; flex-direction: column; margin: 0 auto">
+        <img
+          src="https://images.unsplash.com/photo-1562552052-c72ceddf93dc?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          loading="lazy"
+          alt="Picture of people playing volleyball"
+          height="512"
+          width="300"
+          style="aspect-ratio: 16/9; min-width: 100%"
+        />
+        <figcaption>
+          Photo by
+          <cite><a href="https://unsplash.com/@stevenabraham">Steven Abraham</a></cite>
+          courtesy of
+          <cite><a href="https://unsplash.com/">Unsplash</a></cite>
+        </figcaption>
+      </figure>
+      <aside
+        style="
+          display: flex;
+          flex-direction: column;
+          border-radius: var(--wa-panel-corners);
+          flex-grow: 1;
+          flex-shrink: 1;
+          max-width: 75vw;
+          margin: 0 auto;
+        "
+      >
+        <header
+          style="
+            font-size: 1.4rem;
+            font-weight: bold;
+            color: var(--wa-color-brand-text-on-vivid);
+            background-color: var(--wa-color-brand-fill-vivid-alt);
+            padding: var(--wa-space-m);
+            text-align: center;
+            border-top-left-radius: inherit;
+            border-top-right-radius: inherit;
+          "
+        >
+          Upcoming
+        </header>
+
+        <div
+          style="
+            color: var(--wa-color-brand-text-on-vivid);
+            background-color: var(--wa-color-danger-fill-vivid-alt);
+            padding: var(--wa-space-s);
+            text-align: center;
+            font-weight: bold;
+          "
+        >
+          Tryouts!
+        </div>
+
+        <div
+          style="
+            background-color: var(--wa-color-neutral-90);
+            padding: var(--wa-space-m);
+            border-bottom-left-radius: inherit;
+            border-bottom-right-radius: inherit;
+            text-align: center;
+          "
+        >
+          <span style="font-weight: bold; font-size: 1.2rem">Barclay's Center</span>
+
+          <br />
+
+          <time>Sat, Jul 3rd • 11:30am</time>
+        </div>
+      </aside>
+    </div>
+
+    <section>
+      <h1>Welcome to Sport <span class="logo__accent">Awesome</span></h1>
+
+      <p>
+        Dolor quam voluptate nostrum neque eius. Quo nemo corporis repellat quia sunt molestiae! Dolorem labore
+        laudantium nobis numquam reprehenderit? Voluptatibus odio animi nemo maiores accusamus eaque Assumenda
+        perferendis omnis quae. Adipisicing beatae lorem nisi aliquid similique Voluptas doloremque pariatur tempore
+        omnis maiores explicabo. Provident iste vel explicabo corporis quaerat! Necessitatibus minus quas iusto ducimus
+        consequatur illo Cum eos adipisci ut!
+      </p>
+    </section>
+
+    <section>
+      <h2 style="text-align: center; font-weight: bold; font-size: 1.5em">Stats</h2>
+      <div class="stats-grid">
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th colspan="2">Serve</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td>Attempts</td>
+                <td>2936</td>
+              </tr>
+              <tr>
+                <td>Serve %</td>
+                <td>93.6%</td>
+              </tr>
+              <tr>
+                <td>Aces</td>
+                <td>268</td>
+              </tr>
+              <tr>
+                <td>Errors</td>
+                <td>189</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th colspan="2">Serve Receive</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td>Attempts</td>
+                <td>2428</td>
+              </tr>
+              <tr>
+                <td>Pass Rating</td>
+                <td>1.72</td>
+              </tr>
+              <tr>
+                <td>Pass Error %</td>
+                <td>13.3%</td>
+              </tr>
+              <tr>
+                <td>3-pass %</td>
+                <td>28.5%</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th colspan="2">Attack</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td>Attempts</td>
+                <td>3624</td>
+              </tr>
+              <tr>
+                <td>Kills</td>
+                <td>1431</td>
+              </tr>
+              <tr>
+                <td>Errors</td>
+                <td>268</td>
+              </tr>
+              <tr>
+                <td>Hitting Efficiency</td>
+                <td>0.254</td>
+              </tr>
+
+              <tr>
+                <td>Kill %</td>
+                <td>39.5%</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th colspan="2">Dig</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td>Attempts</td>
+                <td>3124</td>
+              </tr>
+
+              <tr>
+                <td>Digs</td>
+                <td>2235</td>
+              </tr>
+
+              <tr>
+                <td>Errors</td>
+                <td>889</td>
+              </tr>
+
+              <tr>
+                <td>Dig %</td>
+                <td>71.5%</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th colspan="2">Block</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td>Blocks</td>
+                <td>348</td>
+              </tr>
+
+              <tr>
+                <td>Errors</td>
+                <td>414</td>
+              </tr>
+
+              <tr>
+                <td>Block %</td>
+                <td>31.6%</td>
+              </tr>
+
+              <tr>
+                <td>Error %</td>
+                <td>24.6%</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th colspan="2">Set</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td>Assists</td>
+                <td>1364</td>
+              </tr>
+
+              <tr>
+                <td>Errors</td>
+                <td>81</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer
+    slot="main-footer"
+    style="
+      background-color: var(--wa-color-brand-fill-vivid);
+      color: var(--wa-color-text-inverse);
+      padding: var(--wa-space-m);
+      text-align: center;
+    "
+  >
+    © 2023 - Sport Awesome
+  </footer>
+</wa-layout>

docs/_includes/layout-widget.njk

@@ -0,0 +1,92 @@
+<!-- playground-hide -->
+<style>
+  .layout-widget {
+    position: fixed;
+    z-index: 9999;
+    background-color: white;
+    bottom: 4rem;
+    left: 4rem;
+  }
+
+  .layout-widget:not(:defined) {
+    display: none;
+  }
+</style>
+
+<wa-dropdown id="js-layout-widget" class="layout-widget" stay-open-on-select>
+  <wa-button slot="trigger" caret>Dropdown</wa-button>
+  <wa-menu></wa-menu>
+</wa-dropdown>
+
+<script type="module">
+  const layoutWidget = document.querySelector("#js-layout-widget")
+  const docFrag = new DocumentFragment()
+
+  function makeMenuItem (type, slot) {
+    const menuItem = Object.assign(document.createElement("wa-menu-item"), {
+      type: "checkbox",
+      textContent: `${type} ${slot}`
+    })
+
+    menuItem.setAttribute("value", `${type}-${slot}`)
+    return menuItem
+  }
+
+  document.querySelectorAll("wa-layout > [slot]").forEach((el) => {
+    const slot = el.getAttribute("slot");
+    docFrag.append(makeMenuItem("toggle", slot), makeMenuItem("overflow", slot), document.createElement("wa-divider"))
+  })
+
+  docFrag.append(makeMenuItem("toggle", "main"), makeMenuItem("overflow", "main"))
+  layoutWidget.querySelector("wa-menu").append(docFrag)
+
+  function capitalize(string) {
+    return string.split(/\s+/).map((str) => str[0].toUppercase() + str.slice(1)).join(" ")
+  }
+
+  function handleSelect (e) {
+    const item = e.detail.item
+    const val = item.getAttribute("value")
+
+    if (val === "footer-0") {
+
+    }
+
+    const slot = val.split("-").slice(1).join("-")
+
+    let el
+
+    if (slot === "main") {
+      el = document.querySelector(`main`)
+    } else {
+      el = document.querySelector(`wa-layout > [slot='${slot}']`)
+    }
+
+    if (val.startsWith("overflow")) {
+      if (item.checked) {
+        el.textContent = "lorem ".repeat(1_000)
+        return
+      }
+
+      el.textContent = slot
+      return
+    }
+
+    if (val.startsWith("toggle")) {
+      if (item.checked) {
+        el.setAttribute("hidden", "")
+        return
+      }
+
+      el.removeAttribute("hidden")
+      return
+    }
+  }
+
+  layoutWidget.addEventListener("wa-select", handleSelect);
+{% if in_playground %}
+  &lt;/script>
+{% else %}
+  </script>
+{% endif %}
+<!-- playground-hide-end -->

docs/_includes/logo-simple.njk

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

docs/_includes/playground.njk

@@ -0,0 +1,124 @@
+<script type="module">
+  import "https://cdn.jsdelivr.net/npm/light-pen@1.1.3/+esm"
+</script>
+<div style="display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); min-height: 100%; grid-template-rows: minmax(0, 1fr); gap: 8px; ">
+<!-- Knobs -->
+<div id="knobs">
+  <div class="space-vertically">
+    <a href="/">{% include 'logo.njk' %}</a>
+    <wa-select name="theme" label="Theme" value="default">
+      <wa-option value="default">Default</wa-option>
+      <wa-option value="glassy">Glassy</wa-option>
+      <wa-option value="mellow">Mellow</wa-option>
+      <wa-option value="playful">Playful</wa-option>
+    </wa-select>
+    <wa-select name="heading-text" label="Heading" value="">
+      <wa-option value="">Theme default</wa-option>
+      <wa-option value="serif">Serif</wa-option>
+      <wa-option value="sans-serif">Sans-serif</wa-option>
+      <wa-option value="monospace">Monospace</wa-option>
+      <wa-option value="cursive">Cursive</wa-option>
+    </wa-select>
+    <wa-select name="body-text" label="Body" value="">
+      <wa-option value="">Theme default</wa-option>
+      <wa-option value="serif">Serif</wa-option>
+      <wa-option value="sans-serif">Sans-serif</wa-option>
+      <wa-option value="monospace">Monospace</wa-option>
+      <wa-option value="cursive">Cursive</wa-option>
+    </wa-select>
+    <wa-select name="border-style" label="Border Style" value="solid">
+      <wa-option value="solid">Solid</wa-option>
+      <wa-option value="dashed">Dashed</wa-option>
+      <wa-option value="dotted">Dotted</wa-option>
+      <wa-option value="double">Double</wa-option>
+    </wa-select>
+    <wa-range name="border-width" label="Border Width" min="1" max="5" value="1" step="1" tooltip="none"></wa-range>
+    <wa-range name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-range>
+    <wa-range name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-range>
+  </div>
+</div>
+
+<script type="module">
+  const container = document.getElementById('knobs');
+  const iframeDocument = () => document.querySelector("light-pen").iframeElem.contentWindow.document
+  const themeStylesheet = () => iframeDocument().getElementById('theme-stylesheet');
+
+  // Theme
+  container.querySelector('[name="theme"]').addEventListener('wa-change', event => {
+    themeStylesheet().href = `/dist/themes/${event.target.value}.css`;
+  });
+
+  // Heading text
+  container.querySelector('[name="heading-text"]').addEventListener('wa-input', event => {
+    iframeDocument().documentElement.style.setProperty('--wa-font-family-heading', event.target.value);
+  });
+
+  // Body text
+  container.querySelector('[name="body-text"]').addEventListener('wa-input', event => {
+    iframeDocument().documentElement.style.setProperty('--wa-font-family-body', event.target.value);
+  });
+
+  // Corners
+  container.querySelector('[name="corners"]').addEventListener('wa-input', event => {
+    iframeDocument().documentElement.style.setProperty('--wa-corners-base', `${event.target.value}rem`);
+  });
+
+  // Border width
+  container.querySelector('[name="border-width"]').addEventListener('wa-input', event => {
+    iframeDocument().documentElement.style.setProperty('--wa-border-width-base', `${event.target.value / 16}rem`);
+  });
+
+  // Border style
+  container.querySelector('[name="border-style"]').addEventListener('wa-input', event => {
+    iframeDocument().documentElement.style.setProperty('--wa-border-style', event.target.value);
+  });
+
+  // Spacing style
+  container.querySelector('[name="spacing"]').addEventListener('wa-input', event => {
+    iframeDocument().documentElement.style.setProperty('--wa-space-base', `${event.target.value}rem`);
+  });
+
+</script>
+
+<style>
+  :root {
+    --knobs-width: 300px;
+  }
+
+  #knobs {
+    background: var(--wa-color-surface-default);
+    border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+    border-radius: var(--wa-corners-2x);
+    box-shadow: var(--wa-shadow-level-2);
+    width: var(--knobs-width);
+    padding: 2rem;
+    margin-inline: auto;
+    margin-block: 0;
+  }
+
+  #knobs p {
+    margin: 0;
+  }
+</style>
+
+<light-pen style="height: 100%;" resize-position="30">
+  <script type="text/plain" slot="html">
+<link id="theme-stylesheet" href="/dist/themes/default.css" rel="stylesheet">
+<link id="applied-stylesheet" href="/dist/themes/applied.css"" rel="stylesheet">
+
+{% include html_file %}
+  </script>
+
+  <script type="text/plain" slot="css">
+@import "/dist/themes/applied.css";
+
+{% include css_file %}
+  </script>
+
+  <script type="text/plain" slot="js">
+import { setBasePath } from "/dist/utilities/base-path.js";
+setBasePath("/dist");
+import("/dist/autoloader.js");
+  </script>
+</light-pen>
+<div>

docs/_includes/sidebar.njk

@@ -2,10 +2,11 @@
   <li>
     <h2>Experimental</h2>
     <ul>
-      <li><a href="/experimental/kitchen-sink">Theme Builder</a></li>
+      <li><a href="/experimental/themer">Themer</a></li>
       <li><a href="/experimental/style-guide">Style Guide</a></li>
       <li><a href="/experimental/form-validation">Form Validation Styles</a></li>
       <li style="margin-top: .5rem;"><wa-switch id="theme-toggle">Dark mode</wa-switch></li>
+      <li><a href="/layouts/index.html">Layout Examples</a></li>
       <script type="module">
         // Temporary dark toggle
         const toggle = document.getElementById('theme-toggle');
@@ -16,8 +17,6 @@
           localStorage.setItem('theme', toggle.checked ? 'dark' : 'light');
         });
       </script>
-      <li><a href="/experimental/sandbox">Sandbox</a></li>
-      <li><a href="/experimental/patterns">Patterns</a></li>
     </ul>
   </li>
   <li>

docs/_utilities/code-previews.cjs

@@ -68,7 +68,7 @@ module.exports = function (doc, options) {
         <div class="code-preview__preview">
           ${code.textContent}
           <div class="code-preview__resizer">
-            <wa-icon name="grip-vertical" variant="solid"></wa-icon>
+            <wa-icon name="grip-vertical"></wa-icon>
           </div>
         </div>
 

docs/_utilities/markdown.cjs

@@ -24,16 +24,16 @@ markdown.use(markdownItReplaceIt);
 // Callouts
 ['tip', 'warning', 'danger'].forEach(type => {
   const variant = type === 'tip' ? 'brand' : type;
-  let icon = 'circle-info';
-  if (type === 'warning') icon = 'triangle-exclamation';
-  if (type === 'danger') icon = 'circle-exclamation';
+  let icon = 'info-circle';
+  if (type === 'warning') icon = 'exclamation-circle';
+  if (type === 'danger') icon = 'exclamation-triangle';
 
   markdown.use(markdownItContainer, type, {
     render: function (tokens, idx) {
       if (tokens[idx].nesting === 1) {
         return `
           <wa-alert class="callout" variant="${variant}" open>
-            <wa-icon slot="icon" name="${icon}" variant="regular"></wa-icon>
+            <wa-icon slot="icon" name="${icon}"></wa-icon>
         `;
       }
       return '</wa-alert>\n';

docs/_utilities/scrolling-tables.cjs

@@ -1,8 +1,13 @@
 /**
- * Turns headings into clickable, deep linkable anchors. The provided doc should be a document object provided by JSDOM.
+ * Turns tables into scrollable tables
  * The same document will be returned with the appropriate DOM manipulations.
  */
 module.exports = function (doc, options) {
+  // We don't want to run this on layouts.
+  if (doc.querySelector("[data-layout='layout-example.njk']")) {
+    return;
+  }
+
   const tables = [...doc.querySelectorAll('table')];
 
   options = {

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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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>

docs/assets/icons/chunk/align-center-horizontal.svg

@@ -1,4 +0,0 @@
-<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="M2 7.25H0L6.55668e-08 8.75H2L2 12L7 12V4L2 4L2 7.25ZM3.5 10.5L3.5 5.5H5.5V10.5H3.5Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 8.75H16V7.25H14V1L9 1V15H14V8.75ZM10.5 13.5V2.5H12.5V13.5H10.5Z" fill="black"/>
-</svg>

docs/assets/icons/chunk/align-center-vertical.svg

@@ -1,4 +0,0 @@
-<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="M8.75 2V0H7.25V2H4V7H12V2H8.75ZM5.5 3.5H10.5V5.5H5.5V3.5Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.25 14V16H8.75V14H15V9H1V14H7.25ZM2.5 10.5H13.5V12.5H2.5V10.5Z" fill="black"/>
-</svg>

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

@@ -1,5 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.5 1V15H1V1H2.5Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 14V9H15V14H4.5ZM13.5 12.5H6V10.5H13.5V12.5Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 7H11V2H4.5V7ZM6 5.5H9.5V3.5H6V5.5Z" fill="black"/>
-</svg>

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

@@ -1,5 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.5 1V15H15V1H13.5Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 14V9H1V14H11.5ZM2.5 12.5H10V10.5H2.5V12.5Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 7H5V2H11.5V7ZM10 5.5H6.5V3.5H10V5.5Z" fill="black"/>
-</svg>

docs/assets/icons/chunk/align-text-center.svg

@@ -1,6 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 2.5H13V1H3V2.5Z" fill="black"/>
-<path d="M1 15H15V13.5H1V15Z" fill="black"/>
-<path d="M15 6.75H1V5.25H15V6.75Z" fill="black"/>
-<path d="M3 10.75H13V9.25H3V10.75Z" fill="black"/>
-</svg>

docs/assets/icons/chunk/align-text-left.svg

@@ -1,6 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11 2.5H1V1H11V2.5Z" fill="black"/>
-<path d="M15 15H1V13.5H15V15Z" fill="black"/>
-<path d="M1 6.75H15V5.25H1V6.75Z" fill="black"/>
-<path d="M11 10.75H1V9.25H11V10.75Z" fill="black"/>
-</svg>

docs/assets/icons/chunk/align-text-right.svg

@@ -1,6 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 2.5H15V1H5V2.5Z" fill="black"/>
-<path d="M1 15H15V13.5H1V15Z" fill="black"/>
-<path d="M15 6.75H1V5.25H15V6.75Z" fill="black"/>
-<path d="M5 10.75H15V9.25H5V10.75Z" fill="black"/>
-</svg>

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

@@ -1,5 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 2.5L15 2.5V1L1 1L1 2.5Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 4.5L9 4.5L9 15L14 15L14 4.5ZM12.5 13.5L12.5 6H10.5L10.5 13.5L12.5 13.5Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7 4.5L7 11H2L2 4.5L7 4.5ZM5.5 6L5.5 9.5H3.5V6H5.5Z" fill="black"/>
-</svg>

docs/assets/icons/chunk/anchor.svg

@@ -1,3 +0,0 @@
-<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="M11 3C11 4.39788 10.0439 5.57245 8.75 5.90549V14.4572C11.8234 14.1041 14.2447 11.6074 14.4811 8.5H12V7H16V8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8V7H4V8.5H1.51894C1.75533 11.6074 4.17663 14.1041 7.25 14.4572V5.90549C5.95608 5.57245 5 4.39788 5 3C5 1.34315 6.34315 0 8 0C9.65685 0 11 1.34315 11 3ZM8 4.5C8.82843 4.5 9.5 3.82843 9.5 3C9.5 2.17157 8.82843 1.5 8 1.5C7.17157 1.5 6.5 2.17157 6.5 3C6.5 3.82843 7.17157 4.5 8 4.5Z" fill="black"/>
-</svg>

docs/assets/icons/chunk/angles-down.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.53039 7.9696L8.00006 13.4393L13.4697 7.9696L14.5304 9.03026L8.00006 15.5606L1.46973 9.03026L2.53039 7.9696Z" fill="black"/>
-<path d="M2.53039 0.469666L8.00006 5.93934L13.4697 0.469666L14.5304 1.53033L8.00006 8.06066L1.46973 1.53032L2.53039 0.469666Z" fill="black"/>
-</svg>

docs/assets/icons/chunk/angles-left.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.03044 13.4697L2.56077 8L8.03044 2.53033L6.96978 1.46967L0.439453 8L6.96978 14.5303L8.03044 13.4697Z" fill="black"/>
-<path d="M15.5304 13.4697L10.0607 8L15.5304 2.53032L14.4697 1.46967L7.93938 8L14.4697 14.5303L15.5304 13.4697Z" fill="black"/>
-</svg>

docs/assets/icons/chunk/angles-right.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.96966 13.4697L13.4393 8L7.96966 2.53033L9.03032 1.46967L15.5606 8L9.03032 14.5303L7.96966 13.4697Z" fill="black"/>
-<path d="M0.469727 13.4697L5.9394 8L0.469727 2.53032L1.53039 1.46967L8.06072 8L1.53039 14.5303L0.469727 13.4697Z" fill="black"/>
-</svg>

docs/assets/icons/chunk/angles-up.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.4697 8.03038L8.00006 2.56071L2.53039 8.03038L1.46973 6.96972L8.00006 0.439392L14.5304 6.96972L13.4697 8.03038Z" fill="black"/>
-<path d="M13.4697 15.5303L8.00006 10.0606L2.53039 15.5303L1.46973 14.4697L8.00006 7.93932L14.5304 14.4697L13.4697 15.5303Z" fill="black"/>
-</svg>

docs/assets/icons/chunk/aperture.svg

@@ -1,3 +0,0 @@
-<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="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM13.7705 10.9948C14.2366 10.0985 14.5 9.08004 14.5 8C14.5 7.30219 14.39 6.63006 14.1865 6H10.8868L13.7705 10.9948ZM12.8244 12.3561C11.6958 13.6053 10.0889 14.414 8.2924 14.4935L11.1754 9.5L12.8244 12.3561ZM10.3094 8L9.1547 10H6.8453L5.6906 8L6.8453 6H9.1547L10.3094 8ZM7.7076 1.50646L4.82457 6.5L3.17559 3.64388C4.30421 2.39472 5.91113 1.58599 7.7076 1.50646ZM1.5 8C1.5 6.91996 1.76341 5.90145 2.2295 5.00521L5.11325 10H1.8135C1.60996 9.36994 1.5 8.69781 1.5 8ZM6.63902 14.3573C4.91419 13.9898 3.44259 12.9382 2.52182 11.5H8.28867L6.63902 14.3573ZM13.4782 4.5H7.71133L9.36098 1.64271C11.0858 2.01017 12.5574 3.06181 13.4782 4.5Z" fill="black"/>
-</svg>

docs/assets/icons/chunk/aquarius.svg

@@ -1,5 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.50003 1.38623L8.00003 3.38623L11.5 1.38623L15.3721 3.59886L14.6279 4.90123L11.5 3.11386L8.00003 5.11386L4.50003 3.11386L1.37214 4.90123L0.62793 3.59886L4.50003 1.38623Z" fill="black"/>
-<path d="M4.50003 10.8862L8.00003 12.8862L11.5 10.8862L15.3721 13.0989L14.6279 14.4012L11.5 12.6139L8.00003 14.6139L4.50003 12.6139L1.37214 14.4012L0.62793 13.0989L4.50003 10.8862Z" fill="black"/>
-<path d="M4.50003 6.13623L0.62793 8.34886L1.37214 9.65123L4.50003 7.86386L8.00003 9.86386L11.5 7.86386L14.6279 9.65123L15.3721 8.34886L11.5 6.13623L8.00003 8.13623L4.50003 6.13623Z" fill="black"/>
-</svg>