remove layout classes from blog post patterns

* initial progress redesigning themer controls

* themer controls touchup, fix missing minus icons

* isolate themer control styles

* rename 'headwind' > 'migration'

* rename 'chic' > 'active'

* revert wa-details change

* fix misplaced tooltips and menus with high depth

* fully isolate themer controls styles, touchup

* redesign color mode toggle

* change default Glassy logo

* address PR feedback

* active theme assets (#58)

* fix tooltip color in brutalist message composer header (#59)

* add container queries to Glassy

---------

Co-authored-by: frances botsford <frrrances@users.noreply.github.com>

.eslintrc.cjs

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

.github/CODE_OF_CONDUCT.md

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

.github/FUNDING.yml

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

.github/SECURITY.md

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

.gitignore

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

.gitpod.yml

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

.prettierignore

@@ -1,5 +1,4 @@
 *.hbs
-*.md
 .cache
 .github
 cspell.json

CONTRIBUTING.md

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

README.md

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

cspell.json

@@ -18,8 +18,10 @@
     "CACHEABLE",
     "callout",
     "callouts",
+    "cdndir",
     "chatbubble",
     "checkmark",
+    "claviska",
     "Clippy",
     "codebases",
     "codepen",
@@ -54,7 +56,6 @@
     "exportmaps",
     "exportparts",
     "fieldsets",
-    "fontawesome",
     "formaction",
     "formdata",
     "formenctype",
@@ -85,6 +86,7 @@
     "Kool",
     "labelledby",
     "Laravel",
+    "LaViska",
     "linkify",
     "listbox",
     "listitem",
@@ -109,6 +111,7 @@
     "noopener",
     "noreferrer",
     "novalidate",
+    "npmdir",
     "Numberish",
     "oklab",
     "oklch",
@@ -140,8 +143,6 @@
     "scroller",
     "Segoe",
     "semibold",
-    "Shortcode",
-    "Shortcodes",
     "sitedir",
     "slotchange",
     "smartquotes",
@@ -157,7 +158,6 @@
     "testid",
     "textareas",
     "textfield",
-    "Themer",
     "tinycolor",
     "transitionend",
     "treeitem",
@@ -173,11 +173,9 @@
     "valpha",
     "valuenow",
     "valuetext",
-    "viewports",
     "Vuejs",
     "WCAG",
     "webawesome",
-    "webawesomer",
     "WEBP",
     "Webpacker",
     "xmark"

custom-elements-manifest.config.js

@@ -1,13 +1,24 @@
+import * as path from 'path';
 import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
-// import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
+import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
 import { parse } from 'comment-parser';
 import { pascalCase } from 'pascal-case';
+import commandLineArgs from 'command-line-args';
 import fs from 'fs';
 
 const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
-const outdir = 'dist';
+
+const { outdir } = commandLineArgs([
+  { name: 'litelement', type: String },
+  { name: 'analyze', defaultOption: true },
+  { name: 'outdir', type: String }
+]);
+
+function noDash(string) {
+  return string.replace(/^\s?-/, '').trim();
+}
 
 function replace(string, terms) {
   terms.forEach(({ from, to }) => {
@@ -18,10 +29,8 @@ function replace(string, terms) {
 }
 
 export default {
-  globs: ['src/components/**/*.ts'],
+  globs: ['src/components/**/*.component.ts'],
   exclude: ['**/*.styles.ts', '**/*.test.ts'],
-  litelement: true,
-  outdir,
   plugins: [
     // Append package data
     {
@@ -31,6 +40,35 @@ export default {
       }
     },
 
+    // Infer tag names because we no longer use @customElement decorators.
+    {
+      name: 'wa-infer-tag-names',
+      analyzePhase({ ts, node, moduleDoc }) {
+        switch (node.kind) {
+          case ts.SyntaxKind.ClassDeclaration: {
+            const className = node.name.getText();
+            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+
+            const importPath = moduleDoc.path;
+
+            // This is kind of a best guess at components. "thing.component.ts"
+            if (!importPath.endsWith('.component.ts')) {
+              return;
+            }
+
+            const tagNameWithoutPrefix = path.basename(importPath, '.component.ts');
+            const tagName = 'wa-' + tagNameWithoutPrefix;
+
+            classDoc.tagNameWithoutPrefix = tagNameWithoutPrefix;
+            classDoc.tagName = tagName;
+
+            // This used to be set to true by @customElement
+            classDoc.customElement = true;
+          }
+        }
+      }
+    },
+
     // Parse custom jsDoc tags
     {
       name: 'wa-custom-tags',
@@ -39,7 +77,7 @@ export default {
           case ts.SyntaxKind.ClassDeclaration: {
             const className = node.name.getText();
             const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
-            const customTags = ['dependency', 'documentation', 'since', 'status', 'title'];
+            const customTags = ['animation', 'dependency', 'documentation', 'since', 'status', 'title'];
             let customComments = '/**';
 
             node.jsDoc?.forEach(jsDoc => {
@@ -58,6 +96,17 @@ export default {
             const parsed = parse(`${customComments}\n */`);
             parsed[0].tags?.forEach(t => {
               switch (t.tag) {
+                // Animations
+                case 'animation':
+                  if (!Array.isArray(classDoc['animations'])) {
+                    classDoc['animations'] = [];
+                  }
+                  classDoc['animations'].push({
+                    name: t.name,
+                    description: noDash(t.description)
+                  });
+                  break;
+
                 // Dependencies
                 case 'dependency':
                   if (!Array.isArray(classDoc['dependencies'])) {
@@ -102,7 +151,6 @@ export default {
 
             if (classDoc?.events) {
               classDoc.events.forEach(event => {
-                if (!event.name) return;
                 event.reactName = `on${pascalCase(event.name)}`;
                 event.eventName = `${pascalCase(event.name)}Event`;
               });
@@ -127,7 +175,7 @@ export default {
           //
           const terms = [
             { from: /^src\//, to: '' }, // Strip the src/ prefix
-            { from: /\.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
+            { from: /\.component.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
           ];
 
           mod.path = replace(mod.path, terms);
@@ -156,7 +204,7 @@ export default {
       referencesTemplate: (_, tag) => [
         {
           name: 'Documentation',
-          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
+          url: `https://shoelace.style/components/${tag.replace('wa-', '')}`
         }
       ]
     }),
@@ -168,18 +216,15 @@ export default {
       referencesTemplate: (_, tag) => {
         return {
           name: 'Documentation',
-          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
+          url: `https://shoelace.style/components/${tag.replace('wa-', '')}`
         };
       }
-    })
+    }),
 
-    //
-    // TODO - figure out why this broke when events were updated
-    //
-    // customElementVuejsPlugin({
-    //   outdir: './dist/types/vue',
-    //   fileName: 'index.d.ts',
-    //   componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.js`
-    // })
+    customElementVuejsPlugin({
+      outdir: './dist/types/vue',
+      fileName: 'index.d.ts',
+      componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.component.js`
+    })
   ]
 };

docs/.eleventy.js

@@ -1,131 +0,0 @@
-import { parse } from 'path';
-import { markdown } from './_utils/markdown.js';
-import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
-import { codeExamplesPlugin } from './_utils/code-examples.js';
-import { copyCodePlugin } from './_utils/copy-code.js';
-import { currentLink } from './_utils/current-link.js';
-import { highlightCodePlugin } from './_utils/highlight-code.js';
-import { formatCodePlugin } from './_utils/format-code.js';
-import { replaceTextPlugin } from './_utils/replace-text.js';
-import { searchPlugin } from './_utils/search.js';
-import { readFile } from 'fs/promises';
-import { outlinePlugin } from './_utils/outline.js';
-import { getComponents } from './_utils/manifest.js';
-import process from 'process';
-
-const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
-const isAlpha = process.argv.includes('--alpha');
-const isDeveloping = process.argv.includes('--develop');
-
-export default function (eleventyConfig) {
-  // NOTE - alpha setting removes certain pages
-  if (isAlpha) {
-    eleventyConfig.ignores.add('**/components/page.md');
-    eleventyConfig.ignores.add('**/experimental/**');
-  }
-
-  // Add template data
-  eleventyConfig.addGlobalData('package', packageData);
-
-  // Template filters - {{ content | filter }}
-  eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
-  eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
-  eleventyConfig.addFilter('stripExtension', string => parse(string).name);
-  eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
-  eleventyConfig.addFilter('trimPipes', content => {
-    // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
-    // With Prettier 3, this means a leading pipe will exist be present when the line wraps.
-    return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
-  });
-
-  // Shortcodes - {% shortCode arg1, arg2 %}
-  eleventyConfig.addShortcode('cdnUrl', location => {
-    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
-  });
-
-  // Helpers
-  eleventyConfig.addNunjucksGlobal('getComponent', tagName => {
-    const component = getComponents().find(c => c.tagName === tagName);
-
-    if (!component) {
-      throw new Error(
-        `Unable to find "<${tagName}>". Make sure the file name is the same as the tag name (without prefix).`
-      );
-    }
-    return component;
-  });
-
-  // Use our own markdown instance
-  eleventyConfig.setLibrary('md', markdown);
-
-  // Add anchors to headings
-  eleventyConfig.addPlugin(anchorHeadingsPlugin({ container: '#content' }));
-
-  // Add an outline to the page
-  eleventyConfig.addPlugin(
-    outlinePlugin({
-      container: '#content',
-      target: '.outline-links',
-      selector: 'h2, h3',
-      ifEmpty: doc => {
-        doc.querySelector('#outline')?.remove();
-      }
-    })
-  );
-
-  // Add current link classes
-  eleventyConfig.addPlugin(currentLink());
-
-  // Add code examples for `<code class="example">` blocks
-  eleventyConfig.addPlugin(codeExamplesPlugin());
-
-  // Highlight code blocks with Prism
-  eleventyConfig.addPlugin(highlightCodePlugin());
-
-  // Add copy code buttons to code blocks
-  eleventyConfig.addPlugin(copyCodePlugin());
-
-  // Various text replacements
-  eleventyConfig.addPlugin(
-    replaceTextPlugin([
-      // Replace [issue:1234] with a link to the issue on GitHub
-      {
-        replace: /\[pr:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>'
-      },
-      // Replace [pr:1234] with a link to the pull request on GitHub
-      {
-        replace: /\[issue:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>'
-      },
-      // Replace [discuss:1234] with a link to the discussion on GitHub
-      {
-        replace: /\[discuss:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>'
-      }
-    ])
-  );
-
-  // Build the search index
-  eleventyConfig.addPlugin(
-    searchPlugin({
-      filename: '',
-      selectorsToIgnore: ['code.example'],
-      getContent: doc => doc.querySelector('#content')?.textContent ?? ''
-    })
-  );
-
-  // Production-only plugins
-  if (!isDeveloping) {
-    // Run Prettier on each file (prod only because it can be slow)
-    eleventyConfig.addPlugin(formatCodePlugin());
-  }
-
-  return {
-    dir: {
-      includes: '_includes',
-      layouts: '_layouts'
-    },
-    templateFormats: ['njk', 'md']
-  };
-}

docs/404.md

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

docs/_includes/base.njk

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

docs/_includes/component.njk

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

docs/_includes/default.njk

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html
+  lang="en"
+  data-layout="{{ layout }}"
+  data-wa-version="{{ meta.version }}"
+>
+  <head>
+    {# Metadata #}
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="{{ meta.description }}" />
+    <title>{{ meta.title }}</title>
+
+    {# Opt out of Turbo caching #}
+    <meta name="turbo-cache-control">
+
+    {# Stylesheets #}
+    <link rel="stylesheet" href="{{ assetUrl('styles/docs.css') }}" />
+    <link rel="stylesheet" href="{{ assetUrl('styles/code-previews.css') }}" />
+    <link rel="stylesheet" href="{{ assetUrl('styles/search.css') }}" />
+
+    {# Favicons #}
+    <link rel="icon" href="{{ assetUrl('images/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) }}" />
+
+    {# Web Awesome #}
+    <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 #}
+    <script>
+      (() => {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = localStorage.getItem('theme') || 'auto';
+        document.documentElement.classList.toggle('wa-theme-default-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
+      })();
+    </script>
+
+    {# 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">
+
+    {# Turbo + Scroll positioning #}
+    <script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
+    <script src="{{ assetUrl('scripts/docs.js') }}" defer></script>
+    <script src="{{ assetUrl('scripts/code-previews.js') }}" defer></script>
+    <script src="{{ assetUrl('scripts/lunr.js') }}" defer></script>
+    <script src="{{ assetUrl('scripts/search.js') }}" defer></script>
+  </head>
+  <body>
+    <a id="skip-to-main" class="wa-visually-hidden" href="#main-content" data-smooth-link="false">
+      Skip to main content
+    </a>
+
+    {# Menu toggle #}
+    <button id="menu-toggle" type="button" aria-label="Menu">
+      <svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
+        <g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
+          <path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
+        </g>
+      </svg>
+    </button>
+
+    <aside id="sidebar" data-preserve-scroll>
+      <header>
+        <a href="/">
+          {% include 'logo.njk' %}
+        </a>
+        <div class="sidebar-version">
+          {{ meta.version }}
+        </div>
+      </header>
+
+      <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-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-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-button>
+      </div>
+
+      <button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
+        <wa-icon name="search"></wa-icon>
+        <span>Search</span>
+      </button>
+
+      <nav>
+        {% include 'sidebar.njk' %}
+      </nav>
+    </aside>
+
+    {# Content #}
+    <main>
+      <a id="main-content"></a>
+      <article id="content" class="content{% if toc %} content--with-toc{% endif %}">
+        {% if toc %}
+          <div class="content__toc">
+            <ul>
+              <li class="top"><a href="#">{{ meta.title }}</a></li>
+            </ul>
+          </div>
+        {% endif %}
+
+        <div class="content__body">
+          {% block content %}
+            {{ content | safe }}
+          {% endblock %}
+        </div>
+      </article>
+    </main>
+  </body>
+</html>

docs/_includes/logo-simple.njk

@@ -1,3 +1 @@
-<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z" fill="var(--wa-brand-orange, #f36944)"/>
-</svg>
+<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/search.njk

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

docs/_includes/sidebar.njk

@@ -1,242 +1,86 @@
-{# Getting started #}
-<h2>Getting Started</h2>
 <ul>
-  <li><a href="/docs/installation">Installation</a></li>
-  <li><a href="/docs/usage">Usage</a></li>
-  <li><a href="/docs/themes">Themes</a></li>
-  <li><a href="/docs/customizing">Customizing</a></li>
-  <li><a href="/docs/form-controls">Form Controls</a></li>
-  <li><a href="/docs/localization">Localization</a></li>
-</ul>
+  <li>
+    <h2>Experimental</h2>
+    <ul>
+      <li><a href="/experimental/kitchen-sink">Theme Builder</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>
+      <script type="module">
+        // Temporary dark toggle
+        const toggle = document.getElementById('theme-toggle');
+        toggle.checked = document.documentElement.classList.contains('wa-theme-default-dark');
 
-{# Resources #}
-<h2>Resources</h2>
-<ul>
-  <li><a href="https://github.com/shoelace-style/webawesome-alpha/discussions" target="_blank">Help &amp; Support</a></li>
-  <li><a href="/docs/resources/community">Community</a></li>
-  <li><a href="/docs/resources/accessibility">Accessibility</a></li>
-  <li><a href="/docs/resources/contributing">Contributing</a></li>
-  <li><a href="/docs/resources/changelog">Changelog</a></li>
-</ul>
-
-{# Components #}
-<h2>Components</h2>
-<ul>
-  <li>
-    <a href="/docs/components/animated-image">Animated Image</a>
-  </li>
-  <li>
-    <a href="/docs/components/animation">Animation</a>
-  </li>
-  <li>
-    <a href="/docs/components/avatar">Avatar</a>
-  </li>
-  <li>
-    <a href="/docs/components/badge">Badge</a>
-  </li>
-  <li>
-    <a href="/docs/components/breadcrumb">Breadcrumb</a>
-    <ul>
-      <li>
-        <a href="/docs/components/breadcrumb-item">Breadcrumb Item</a>
-      </li>
+        toggle.addEventListener('wa-change', () => {
+          document.documentElement.classList.toggle('wa-theme-default-dark');
+          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>
-    <a href="/docs/components/button">Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/button-group">Button Group</a>
-  </li>
-  <li>
-    <a href="/docs/components/callout">Callout</a>
-  </li>
-  <li>
-    <a href="/docs/components/card">Card</a>
-  </li>
-  <li>
-    <a href="/docs/components/carousel">Carousel</a>
+    <h2>Getting Started</h2>
     <ul>
-      <li>
-        <a href="/docs/components/carousel-item">Carousel Item</a>
-      </li>
+      <li><a href="/">Home</a></li>
+      <li><a href="/getting-started/installation">Installation</a></li>
+      <li><a href="/getting-started/usage">Usage</a></li>
+      <li><a href="/getting-started/themes">Themes</a></li>
+      <li><a href="/getting-started/customizing">Customizing</a></li>
+      <li><a href="/getting-started/form-controls">Form Controls</a></li>
+      <li><a href="/getting-started/localization">Localization</a></li>
     </ul>
   </li>
   <li>
-    <a href="/docs/components/checkbox">Checkbox</a>
-  </li>
-  <li>
-    <a href="/docs/components/color-picker">Color Picker</a>
-  </li>
-  <li>
-    <a href="/docs/components/copy-button">Copy Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/details">Details</a>
-  </li>
-  <li>
-    <a href="/docs/components/dialog">Dialog</a>
-  </li>
-  <li>
-    <a href="/docs/components/divider">Divider</a>
-  </li>
-  <li>
-    <a href="/docs/components/drawer">Drawer</a>
-  </li>
-  <li>
-    <a href="/docs/components/dropdown">Dropdown</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-bytes">Format Bytes</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-date">Format Date</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-number">Format Number</a>
-  </li>
-  <li>
-    <a href="/docs/components/icon">Icon</a>
-  </li>
-  <li>
-    <a href="/docs/components/icon-button">Icon Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/image-comparer">Image Comparer</a>
-  </li>
-  <li>
-    <a href="/docs/components/include">Include</a>
-  </li>
-  <li>
-    <a href="/docs/components/input">Input</a>
-  </li>
-  <li>
-    <a href="/docs/components/menu">Menu</a>
+    <h2>Frameworks</h2>
     <ul>
-      <li>
-        <a href="/docs/components/menu-item">Menu Item</a>
-      </li>
-      <li>
-        <a href="/docs/components/menu-label">Menu Label</a>
-      </li>
+      <li><a href="/frameworks/react">React</a></li>
+      <li><a href="/frameworks/vue">Vue</a></li>
+      <li><a href="/frameworks/angular">Angular</a></li>
     </ul>
   </li>
   <li>
-    <a href="/docs/components/mutation-observer">Mutation Observer</a>
-  </li>
-  <li>
-    <a href="/docs/components/popup">Popup</a>
-  </li>
-  <li>
-    <a href="/docs/components/progress-bar">Progress Bar</a>
-  </li>
-  <li>
-    <a href="/docs/components/progress-ring">Progress Ring</a>
-  </li>
-  <li>
-    <a href="/docs/components/qr-code">QR Code</a>
-  </li>
-  <li>
-    <a href="/docs/components/radio-group">Radio Group</a>
+    <h2>Resources</h2>
     <ul>
-      <li>
-        <a href="/docs/components/radio">Radio</a>
-      </li>
-      <li>
-        <a href="/docs/components/radio-button">Radio Button</a>
-      </li>
+      <li><a href="/resources/community">Community</a></li>
+      <li><a href="https://github.com/shoelace-style/shoelace/discussions">Help &amp; Support</a></li>
+      <li><a href="/resources/accessibility">Accessibility</a></li>
+      <li><a href="/resources/contributing">Contributing</a></li>
+      <li><a href="/resources/changelog">Changelog</a></li>
     </ul>
   </li>
   <li>
-    <a href="/docs/components/range">Range</a>
-  </li>
-  <li>
-    <a href="/docs/components/rating">Rating</a>
-  </li>
-  <li>
-    <a href="/docs/components/relative-time">Relative Time</a>
-  </li>
-  <li>
-    <a href="/docs/components/resize-observer">Resize Observer</a>
-  </li>
-  <li>
-    <a href="/docs/components/select">Select</a>
+    <h2>Components</h2>
     <ul>
-      <li>
-        <a href="/docs/components/option">Option</a>
-      </li>
+      {% for component in meta.components %}
+        <li>
+          <a href="/components/{{ component.tagName | removeWaPrefix }}">
+            {{ component.name | classNameToComponentName }}
+          </a>
+        </li>
+      {% endfor %}
     </ul>
   </li>
   <li>
-    <a href="/docs/components/skeleton">Skeleton</a>
-  </li>
-  <li>
-    <a href="/docs/components/spinner">Spinner</a>
-  </li>
-  <li>
-    <a href="/docs/components/split-panel">Split Panel</a>
-  </li>
-  <li>
-    <a href="/docs/components/switch">Switch</a>
-  </li>
-  <li>
-    <a href="/docs/components/tab-group">Tab Group</a>
+    <h2>Design Tokens</h2>
     <ul>
-      <li>
-        <a href="/docs/components/tab">Tab</a>
-      </li>
-      <li>
-        <a href="/docs/components/tab-panel">Tab Panel</a>
-      </li>
+      <li><a href="/tokens/typography">Typography</a></li>
+      <li><a href="/tokens/color">Color</a></li>
+      <li><a href="/tokens/spacing">Spacing</a></li>
+      <li><a href="/tokens/borders">Borders</a></li>
+      <li><a href="/tokens/shadows">Shadows</a></li>
+      <li><a href="/tokens/transition">Transition</a></li>
+      <li><a href="/tokens/z-index">Z-index</a></li>
+      <li><a href="/tokens/more">More Tokens</a></li>
     </ul>
   </li>
   <li>
-    <a href="/docs/components/tag">Tag</a>
-  </li>
-  <li>
-    <a href="/docs/components/textarea">Textarea</a>
-  </li>
-  <li>
-    <a href="/docs/components/tooltip">Tooltip</a>
-  </li>
-  <li>
-    <a href="/docs/components/tree">Tree</a>
+    <h2>Tutorials</h2>
     <ul>
-      <li>
-        <a href="/docs/components/tree-item">Tree Item</a>
-      </li>
+      <li><a href="/tutorials/integrating-with-laravel">Integrating with Laravel</a></li>
+      <li><a href="/tutorials/integrating-with-nextjs">Integrating with NextJS</a></li>
+      <li><a href="/tutorials/integrating-with-rails">Integrating with Rails</a></li>
     </ul>
   </li>
-  <li>
-    <a href="/docs/components/visually-hidden">Visually Hidden</a>
-  </li>
-</ul>
-
-{# Theming #}
-<h2>Theming</h2>
-<ul>
-  <li>
-    <a href="/docs/theming/color">Color</a>
-  </li>
-  <li>
-    <a href="/docs/theming/typography">Typography</a>
-  </li>
-  <li>
-    <a href="/docs/theming/space">Space</a>
-  </li>
-  <li>
-    <a href="/docs/theming/borders">Borders</a>
-  </li>
-  <li>
-    <a href="/docs/theming/focus">Focus</a>
-  </li>
-  <li>
-    <a href="/docs/theming/shadows">Shadows</a>
-  </li>
-  <li>
-    <a href="/docs/theming/transitions">Transitions</a>
-  </li>
-  <li>
-    <a href="/docs/theming/component-groups">Component Groups</a>
-  </li>
 </ul>

docs/_layouts/component.njk

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

docs/_layouts/docs.njk

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

docs/_layouts/page-outline.njk

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

docs/_layouts/page.njk

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

docs/_utilities/active-links.cjs

@@ -0,0 +1,35 @@
+function normalizePathname(pathname) {
+  // Remove /index.html
+  if (pathname.endsWith('/index.html')) {
+    pathname = pathname.replace(/\/index\.html/, '');
+  }
+
+  // Remove trailing slashes
+  return pathname.replace(/\/$/, '');
+}
+
+/**
+ * Adds a class name to links that are currently active.
+ */
+module.exports = function (doc, options) {
+  options = {
+    className: 'active-link', // the class to add to active links
+    pathname: undefined, // the current pathname to compare
+    within: 'body', // element containing the target links
+    ...options
+  };
+
+  const within = doc.querySelector(options.within);
+
+  if (!within) {
+    return doc;
+  }
+
+  within.querySelectorAll('a').forEach(link => {
+    if (normalizePathname(options.pathname) === normalizePathname(link.pathname)) {
+      link.classList.add(options.className);
+    }
+  });
+
+  return doc;
+};

docs/_utilities/anchor-headings.cjs

@@ -0,0 +1,64 @@
+const { createSlug } = require('./strings.cjs');
+
+/**
+ * Turns headings into clickable, deep linkable anchors. The provided doc should be a document object provided by JSDOM.
+ * The same document will be returned with the appropriate DOM manipulations.
+ */
+module.exports = function (doc, options) {
+  options = {
+    levels: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], // the headings to convert
+    className: 'anchor-heading', // the class name to add
+    within: 'body', // the element containing the target headings
+    ...options
+  };
+
+  const within = doc.querySelector(options.within);
+
+  if (!within) {
+    return doc;
+  }
+
+  within.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(heading => {
+    const hasAnchor = heading.querySelector('a');
+    const anchor = doc.createElement('a');
+    let id = heading.textContent ?? '';
+    let suffix = 0;
+
+    // Skip heading levels we don't care about
+    if (!options.levels?.includes(heading.tagName.toLowerCase())) {
+      return;
+    }
+
+    // Convert dots to underscores
+    id = id.replace(/\./g, '_');
+
+    // Turn it into a slug
+    id = createSlug(id);
+
+    // Make sure it starts with a letter
+    if (!/^[a-z]/i.test(id)) {
+      id = `id_${id}`;
+    }
+
+    // Make sure the id is unique
+    const originalId = id;
+    while (doc.getElementById(id) !== null) {
+      id = `${originalId}-${++suffix}`;
+    }
+
+    if (hasAnchor || !id) return;
+
+    heading.setAttribute('id', id);
+    anchor.setAttribute('href', `#${encodeURIComponent(id)}`);
+    anchor.setAttribute('aria-label', `Direct link to "${heading.textContent}"`);
+
+    if (options.className) {
+      heading.classList.add(options.className);
+    }
+
+    // Append the anchor
+    heading.append(anchor);
+  });
+
+  return doc;
+};

docs/_utilities/cem.cjs

@@ -1,23 +1,23 @@
-import { fileURLToPath } from 'url';
-import { dirname, resolve } from 'path';
-import { readFileSync } from 'fs';
+const customElementsManifest = require('../../dist/custom-elements.json');
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
+//
+// Export it here so we can import it elsewhere and use the same version
+//
+module.exports.customElementsManifest = customElementsManifest;
 
-const manifest = JSON.parse(readFileSync(resolve(__dirname, '../../dist/custom-elements.json'), 'utf-8'));
-/**
- * @returns Fetches components from custom-elements.json and returns them in more sane format.
- */
-export function getComponents() {
-  const components = [];
+//
+// Gets all components from custom-elements.json and returns them in a more documentation-friendly format.
+//
+module.exports.getAllComponents = function () {
+  const allComponents = [];
 
-  manifest.modules?.forEach(module => {
+  customElementsManifest.modules?.forEach(module => {
     module.declarations?.forEach(declaration => {
       if (declaration.customElement) {
         // Generate the dist path based on the src path and attach it to the component
         declaration.path = module.path.replace(/^src\//, 'dist/').replace(/\.ts$/, '.js');
 
-        // Remove private members and those that lack a description
+        // Remove members that are private or don't have a description
         const members = declaration.members?.filter(member => member.description && member.privacy !== 'private');
         const methods = members?.filter(prop => prop.kind === 'method' && prop.privacy !== 'private');
         const properties = members?.filter(prop => {
@@ -29,7 +29,7 @@ export function getComponents() {
 
           return prop.kind === 'field' && prop.privacy !== 'private';
         });
-        components.push({
+        allComponents.push({
           ...declaration,
           methods,
           properties
@@ -39,12 +39,12 @@ export function getComponents() {
   });
 
   // Build dependency graphs
-  components.forEach(component => {
+  allComponents.forEach(component => {
     const dependencies = [];
 
     // Recursively fetch sub-dependencies
     function getDependencies(tag) {
-      const cmp = components.find(c => c.tagName === tag);
+      const cmp = allComponents.find(c => c.tagName === tag);
       if (!cmp || !Array.isArray(component.dependencies)) {
         return;
       }
@@ -63,9 +63,9 @@ export function getComponents() {
   });
 
   // Sort by name
-  return components.sort((a, b) => {
+  return allComponents.sort((a, b) => {
     if (a.name < b.name) return -1;
     if (a.name > b.name) return 1;
     return 0;
   });
-}
+};

docs/_utilities/code-previews.cjs

@@ -0,0 +1,138 @@
+let count = 1;
+
+function escapeHtml(str) {
+  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+/**
+ * Turns code fields with the :preview suffix into interactive code previews.
+ */
+module.exports = function (doc, options) {
+  options = {
+    within: 'body', // the element containing the code fields to convert
+    ...options
+  };
+
+  const within = doc.querySelector(options.within);
+  if (!within) {
+    return doc;
+  }
+
+  within.querySelectorAll('[class*=":preview"]').forEach(code => {
+    const pre = code.closest('pre');
+    if (!pre) {
+      return;
+    }
+    const adjacentPre = pre.nextElementSibling?.tagName.toLowerCase() === 'pre' ? pre.nextElementSibling : null;
+    const reactCode = adjacentPre?.querySelector('code[class$="react"]');
+    const sourceGroupId = `code-preview-source-group-${count}`;
+    const isExpanded = code.getAttribute('class').includes(':expanded');
+    const noCodePen = code.getAttribute('class').includes(':no-codepen');
+
+    count++;
+
+    const htmlButton = `
+      <button type="button"
+        title="Show HTML code"
+        class="code-preview__button code-preview__button--html"
+      >
+        HTML
+      </button>
+    `;
+
+    const reactButton = `
+      <button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
+        React
+      </button>
+    `;
+
+    const codePenButton = `
+      <button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
+        <svg
+          width="138"
+          height="26"
+          viewBox="0 0 138 26"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z" />
+        </svg>
+      </button>
+    `;
+
+    const codePreview = `
+      <div class="code-preview ${isExpanded ? 'code-preview--expanded' : ''}">
+        <div class="code-preview__preview">
+          ${code.textContent}
+          <div class="code-preview__resizer">
+            <wa-icon name="grip-vertical" variant="solid"></wa-icon>
+          </div>
+        </div>
+
+        <div class="code-preview__source-group" id="${sourceGroupId}">
+          <div class="code-preview__source code-preview__source--html" ${reactCode ? 'data-flavor="html"' : ''}>
+            <pre><code class="language-html">${escapeHtml(code.textContent)}</code></pre>
+          </div>
+
+          ${
+            reactCode
+              ? `
+            <div class="code-preview__source code-preview__source--react" data-flavor="react">
+              <pre><code class="language-jsx">${escapeHtml(reactCode.textContent)}</code></pre>
+            </div>
+          `
+              : ''
+          }
+        </div>
+
+        <div class="code-preview__buttons">
+          <button
+            type="button"
+            class="code-preview__button code-preview__toggle"
+            aria-expanded="${isExpanded ? 'true' : 'false'}"
+            aria-controls="${sourceGroupId}"
+          >
+            Source
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </button>
+
+          ${reactCode ? ` ${htmlButton} ${reactButton} ` : ''}
+
+          ${noCodePen ? '' : codePenButton}
+        </div>
+      </div>
+    `;
+
+    pre.insertAdjacentHTML('afterend', codePreview);
+    pre.remove();
+
+    if (adjacentPre) {
+      adjacentPre.remove();
+    }
+  });
+
+  // Wrap code preview scripts in anonymous functions so they don't run in the global scope
+  doc.querySelectorAll('.code-preview__preview script').forEach(script => {
+    if (script.type === 'module') {
+      // Modules are already scoped
+      script.textContent = script.innerHTML;
+    } else {
+      // Wrap non-modules in an anonymous function so they don't run in the global scope
+      script.textContent = `(() => { ${script.innerHTML} })();`;
+    }
+  });
+
+  return doc;
+};

docs/_utilities/copy-code-buttons.cjs

@@ -0,0 +1,23 @@
+let codeBlockId = 0;
+
+/**
+ * Adds copy code buttons to code fields. The provided doc should be a document object provided by JSDOM. The same
+ * document will be returned with the appropriate DOM manipulations.
+ */
+module.exports = function (doc) {
+  doc.querySelectorAll('pre > code').forEach(code => {
+    const pre = code.closest('pre');
+    const button = doc.createElement('wa-copy-button');
+
+    if (!code.id) {
+      code.id = `code-block-${++codeBlockId}`;
+    }
+
+    button.classList.add('copy-code-button');
+    button.setAttribute('from', code.id);
+
+    pre.append(button);
+  });
+
+  return doc;
+};

docs/_utilities/external-links.cjs

@@ -0,0 +1,41 @@
+const { isExternalLink } = require('./strings.cjs');
+
+/**
+ * Transforms external links to make them safer and optionally add a target. The provided doc should be a document
+ * object provided by JSDOM. The same document will be returned with the appropriate DOM manipulations.
+ */
+module.exports = function (doc, options) {
+  options = {
+    className: 'external-link', // the class name to add to links
+    noopener: true, // sets rel="noopener"
+    noreferrer: true, // sets rel="noreferrer"
+    ignore: () => false, // callback function to filter links that should be ignored
+    within: 'body', // element that contains the target links
+    target: '', // sets the target attribute
+    ...options
+  };
+
+  const within = doc.querySelector(options.within);
+
+  if (within) {
+    within.querySelectorAll('a').forEach(link => {
+      if (isExternalLink(link) && !options.ignore(link)) {
+        link.classList.add(options.className);
+
+        const rel = [];
+        if (options.noopener) rel.push('noopener');
+        if (options.noreferrer) rel.push('noreferrer');
+
+        if (rel.length) {
+          link.setAttribute('rel', rel.join(' '));
+        }
+
+        if (options.target) {
+          link.setAttribute('target', options.target);
+        }
+      }
+    });
+  }
+
+  return doc;
+};

docs/_utilities/highlight-code.cjs

@@ -0,0 +1,63 @@
+const Prism = require('prismjs');
+const PrismLoader = require('prismjs/components/index.js');
+
+PrismLoader('diff');
+PrismLoader.silent = true;
+
+/** Highlights a code string. */
+function highlight(code, language) {
+  const alias = language.replace(/^diff-/, '');
+  const isDiff = /^diff-/i.test(language);
+
+  // Auto-load the target language
+  if (!Prism.languages[alias]) {
+    PrismLoader(alias);
+
+    if (!Prism.languages[alias]) {
+      throw new Error(`Unsupported language for code highlighting: "${language}"`);
+    }
+  }
+
+  // Register diff-* languages to use the diff grammar
+  if (isDiff) {
+    Prism.languages[language] = Prism.languages.diff;
+  }
+
+  return Prism.highlight(code, Prism.languages[language], language);
+}
+
+/**
+ * Highlights all code fields that have a language parameter. If the language has a colon in its name, the first chunk
+ * will be the language used and additional chunks will be applied as classes to the `<pre>`. For example, a code field
+ * tagged with "html:preview" will be rendered as `<pre class="language-html preview">`.
+ *
+ * The provided doc should be a document object provided by JSDOM. The same document will be returned with the
+ * appropriate DOM manipulations.
+ */
+module.exports = function (doc) {
+  doc.querySelectorAll('pre > code[class]').forEach(code => {
+    // Look for class="language-*" and split colons into separate classes
+    code.classList.forEach(className => {
+      if (className.startsWith('language-')) {
+        //
+        // We use certain suffixes to indicate code previews, expanded states, etc. The class might look something like
+        // this:
+        //
+        //  class="language-html:preview:expanded"
+        //
+        // The language will always come first, so we need to drop the "language-" prefix and everything after the first
+        // color to get the highlighter language.
+        //
+        const language = className.replace(/^language-/, '').split(':')[0];
+
+        try {
+          code.innerHTML = highlight(code.textContent ?? '', language);
+        } catch (err) {
+          // Language not found, skip it
+        }
+      }
+    });
+  });
+
+  return doc;
+};

docs/_utilities/markdown.cjs

@@ -0,0 +1,75 @@
+const MarkdownIt = require('markdown-it');
+const markdownItContainer = require('markdown-it-container');
+const markdownItIns = require('markdown-it-ins');
+const markdownItKbd = require('markdown-it-kbd');
+const markdownItMark = require('markdown-it-mark');
+const markdownItReplaceIt = require('markdown-it-replace-it');
+
+const markdown = MarkdownIt({
+  html: true,
+  xhtmlOut: false,
+  breaks: false,
+  langPrefix: 'language-',
+  linkify: false,
+  typographer: false
+});
+
+// Third-party plugins
+markdown.use(markdownItContainer);
+markdown.use(markdownItIns);
+markdown.use(markdownItKbd);
+markdown.use(markdownItMark);
+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';
+
+  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>
+        `;
+      }
+      return '</wa-alert>\n';
+    }
+  });
+});
+
+// Asides
+markdown.use(markdownItContainer, 'aside', {
+  render: function (tokens, idx) {
+    if (tokens[idx].nesting === 1) {
+      return `<aside>`;
+    }
+    return '</aside>\n';
+  }
+});
+
+// Details
+markdown.use(markdownItContainer, 'details', {
+  validate: params => params.trim().match(/^details\s+(.*)$/),
+  render: (tokens, idx) => {
+    const m = tokens[idx].info.trim().match(/^details\s+(.*)$/);
+    if (tokens[idx].nesting === 1) {
+      return `<details>\n<summary><span>${markdown.utils.escapeHtml(m[1])}</span></summary>\n`;
+    }
+    return '</details>\n';
+  }
+});
+
+// Replace [#1234] with a link to GitHub issues
+markdownItReplaceIt.replacements.push({
+  name: 'github-issues',
+  re: /\[#([0-9]+)\]/gs,
+  sub: '<a href="https://github.com/shoelace-style/shoelace/issues/$1">#$1</a>',
+  html: true,
+  default: true
+});
+
+module.exports = markdown;

docs/_utilities/prettier.cjs

@@ -0,0 +1,26 @@
+const { format } = require('prettier');
+
+/** Formats markup using prettier. */
+module.exports = function (content, options) {
+  options = {
+    arrowParens: 'avoid',
+    bracketSpacing: true,
+    htmlWhitespaceSensitivity: 'css',
+    insertPragma: false,
+    bracketSameLine: false,
+    jsxSingleQuote: false,
+    parser: 'html',
+    printWidth: 120,
+    proseWrap: 'preserve',
+    quoteProps: 'as-needed',
+    requirePragma: false,
+    semi: true,
+    singleQuote: true,
+    tabWidth: 2,
+    trailingComma: 'none',
+    useTabs: false,
+    ...options
+  };
+
+  return format(content, options);
+};

docs/_utilities/replacer.cjs

@@ -0,0 +1,24 @@
+/**
+ * @typedef {object} Replacement
+ * @property {string | RegExp} pattern
+ * @property {string} replacement
+ */
+
+/**
+ * @typedef {Array<Replacement>} Replacements
+ */
+
+/**
+ * @param {Document} content
+ * @param {Replacements} replacements
+ */
+module.exports = function (content, replacements) {
+  /** This seems trivial, but by assigning to a string first, THEN using innerHTML after iterating over every replacement, we reduce the calculations of JSDOM. At the time of writing benchmarks show a reduction from 9seconds to 3 seconds by doing so. */
+  let html = content.body.innerHTML;
+
+  replacements.forEach(replacement => {
+    html = html.replaceAll(replacement.pattern, replacement.replacement);
+  });
+
+  content.body.innerHTML = html;
+};

docs/_utilities/scrolling-tables.cjs

@@ -0,0 +1,21 @@
+/**
+ * Turns headings into clickable, deep linkable anchors. The provided doc should be a document object provided by JSDOM.
+ * The same document will be returned with the appropriate DOM manipulations.
+ */
+module.exports = function (doc, options) {
+  const tables = [...doc.querySelectorAll('table')];
+
+  options = {
+    className: 'table-scroll', // the class name to add to the table's container
+    ...options
+  };
+
+  tables.forEach(table => {
+    const div = doc.createElement('div');
+    div.classList.add(options.className);
+    table.insertAdjacentElement('beforebegin', div);
+    div.append(table);
+  });
+
+  return doc;
+};

docs/_utilities/strings.cjs

@@ -0,0 +1,16 @@
+const slugify = require('slugify');
+
+/** Creates a slug from an arbitrary string of text. */
+module.exports.createSlug = function (text) {
+  return slugify(String(text), {
+    remove: /[^\w|\s]/g,
+    lower: true
+  });
+};
+
+/** Determines whether or not a link is external. */
+module.exports.isExternalLink = function (link) {
+  // We use the "internal" hostname when initializing JSDOM so we know that those are local links
+  if (!link.hostname || link.hostname === 'internal') return false;
+  return true;
+};

docs/_utilities/table-of-contents.cjs

@@ -0,0 +1,42 @@
+/**
+ * Generates an in-page table of contents based on headings.
+ */
+module.exports = function (doc, options) {
+  options = {
+    levels: ['h2'], // headings to include (they must have an id)
+    container: 'nav', // the container to append links to
+    listItem: true, // if true, links will be wrapped in <li>
+    within: 'body', // the element containing the headings to summarize
+    ...options
+  };
+
+  const container = doc.querySelector(options.container);
+  const within = doc.querySelector(options.within);
+  const headingSelector = options.levels.map(h => `${h}[id]`).join(', ');
+
+  if (!container || !within) {
+    return doc;
+  }
+
+  within.querySelectorAll(headingSelector).forEach(heading => {
+    const listItem = doc.createElement('li');
+    const link = doc.createElement('a');
+    const level = heading.tagName.slice(1);
+
+    link.href = `#${heading.id}`;
+    link.textContent = heading.textContent;
+
+    if (options.listItem) {
+      // List item + link
+      listItem.setAttribute('data-level', level);
+      listItem.append(link);
+      container.append(listItem);
+    } else {
+      // Link only
+      link.setAttribute('data-level', level);
+      container.append(link);
+    }
+  });
+
+  return doc;
+};

docs/_utilities/typography.cjs

@@ -0,0 +1,23 @@
+const smartquotes = require('smartquotes');
+
+smartquotes.replacements.push([/---/g, '\u2014']); // em dash
+smartquotes.replacements.push([/--/g, '\u2013']); // en dash
+smartquotes.replacements.push([/\.\.\./g, '\u2026']); // ellipsis
+smartquotes.replacements.push([/\(c\)/gi, '\u00A9']); // copyright
+smartquotes.replacements.push([/\(r\)/gi, '\u00AE']); // registered trademark
+smartquotes.replacements.push([/\?!/g, '\u2048']); // ?!
+smartquotes.replacements.push([/!!/g, '\u203C']); // !!
+smartquotes.replacements.push([/\?\?/g, '\u2047']); // ??
+smartquotes.replacements.push([/([0-9]\s?)-(\s?[0-9])/g, '$1\u2013$2']); // number ranges use en dash
+
+/**
+ * Improves typography by adding smart quotes and similar corrections within the specified element(s).
+ *
+ * The provided doc should be a document object provided by JSDOM. The same document will be returned with the
+ * appropriate DOM manipulations.
+ */
+module.exports = function (doc, selector = 'body') {
+  const elements = [...doc.querySelectorAll(selector)];
+  elements.forEach(el => smartquotes.element(el));
+  return doc;
+};

docs/_utils/anchor-headings.js

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

docs/_utils/code-examples.js

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

docs/_utils/copy-code.js

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

docs/_utils/current-link.js

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

docs/_utils/format-code.js

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

docs/_utils/highlight-code.js

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

docs/_utils/markdown.js

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

docs/_utils/outline.js

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

docs/_utils/replace-text.js

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

docs/_utils/search.js

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

docs/assets/images/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="186" height="186" viewBox="0 0 186 186"><g fill="none" fill-rule="evenodd"><rect width="186" height="186" fill="#103257" opacity="0"/><path fill="#F6894C" d="M106.95,13.9672306 C106.95,19.1752428 104.10296,23.7175103 99.8823543,26.1190227 L130.2,48.8851296 L159.91784,39.4892184 C158.760743,37.4541707 158.1,35.0993755 158.1,32.5902046 C158.1,24.8763205 164.345703,18.6229741 172.05,18.6229741 C179.754297,18.6229741 186,24.8763205 186,32.5902046 C186,40.3040179 179.754297,46.5574352 172.05,46.5574352 C171.315566,46.5574352 170.594594,46.5006795 169.890983,46.39107 L137.151086,130.163238 C134.361086,137.302399 127.486526,142 119.830057,142 L66.1699429,142 C58.5134743,142 51.6389143,137.302399 48.8489143,130.163238 L16.1089463,46.39107 C15.4052994,46.5006795 14.6842926,46.5574352 13.95,46.5574352 C6.245632,46.5574352 0,40.3040179 0,32.5902046 C0,24.8763205 6.245632,18.6229741 13.95,18.6229741 C21.654368,18.6229741 27.9,24.8763205 27.9,32.5902046 C27.9,35.0993755 27.2391509,37.4541707 26.0822663,39.4892184 L55.8,48.8851296 L86.1176457,26.1190227 C81.89704,23.7175103 79.05,19.1752428 79.05,13.9672306 C79.05,6.25334639 85.2957029,0 93,0 C100.704297,0 106.95,6.25334639 106.95,13.9672306 Z" transform="translate(0 22)"/></g></svg>

docs/assets/images/gitpod.svg

@@ -0,0 +1,23 @@
+<svg width="160" height="45" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_d)">
+    <rect x="2" y="2" width="156" height="40" rx="16" fill="#F9F9F9"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M30.425 11.174c.604 1.114.233 2.53-.83 3.164l-6.986 4.166a.378.378 0 00-.18.325v6.748c0 .134.069.258.18.325l5.714 3.407c.11.066.244.066.354 0l5.714-3.407a.378.378 0 00.18-.325V21.29l-4.986 2.936c-1.067.628-2.416.231-3.015-.886-.6-1.118-.22-2.532.846-3.16l7.008-4.127c2.048-1.206 4.576.345 4.576 2.806v6.718c0 1.803-.924 3.467-2.42 4.36l-5.713 3.407a4.596 4.596 0 01-4.734 0l-5.714-3.408C18.924 29.044 18 27.38 18 25.576V18.83c0-1.803.924-3.467 2.42-4.36l6.985-4.165c1.063-.634 2.415-.245 3.02.87z" fill="url(#paint0_linear)"/>
+    <path fill="#F9F9F9" d="M47 12.5h95v-1H47z"/>
+    <path d="M52.538 27.752c2.744 0 4.844-1.876 4.844-5.152 0-3.108-2.1-5.152-4.844-5.152s-4.802 2.002-4.802 5.152c0 3.29 2.058 5.152 4.802 5.152zm0-1.554c-1.736 0-2.912-1.316-2.912-3.598 0-2.226 1.162-3.598 2.912-3.598s2.954 1.4 2.954 3.598c0 2.31-1.218 3.598-2.954 3.598zm7.89 4.158V27.22c0-.196-.013-.378-.055-.658.434.7 1.022 1.19 2.17 1.19 1.736 0 3.066-1.414 3.066-3.626 0-2.17-1.19-3.682-2.996-3.682-1.078 0-1.806.476-2.24 1.204.042-.28.056-.462.056-.672v-.308H58.72v9.688h1.708zm1.695-3.948c-1.036 0-1.764-.938-1.764-2.31 0-1.414.742-2.296 1.764-2.296 1.092 0 1.75.952 1.75 2.296 0 1.372-.7 2.31-1.75 2.31zm7.866 1.344c1.848 0 3.052-1.078 3.192-2.478h-1.736c-.112.714-.714 1.134-1.456 1.134-1.036 0-1.722-.826-1.736-1.904h4.97v-.378c0-2.226-1.204-3.682-3.29-3.682-1.988 0-3.43 1.47-3.43 3.626 0 2.366 1.442 3.682 3.486 3.682zm-1.75-4.48c.098-.896.756-1.554 1.68-1.554.924 0 1.526.63 1.554 1.554H68.24zm8.006 4.228v-4.004c0-.952.616-1.694 1.456-1.694.798 0 1.288.63 1.288 1.638v4.06h1.708v-4.312c0-1.68-.896-2.744-2.408-2.744-1.078 0-1.722.518-2.1 1.204.042-.266.056-.476.056-.672v-.308h-1.708V27.5h1.708zm8.911-7.868h1.792V17.84h-1.792v1.792zm.042 1.036V27.5h1.708v-6.832h-1.708zm5.097 6.832v-4.004c0-.952.616-1.694 1.456-1.694.798 0 1.288.63 1.288 1.638v4.06h1.708v-4.312c0-1.68-.896-2.744-2.408-2.744-1.078 0-1.722.518-2.1 1.204.042-.266.056-.476.056-.672v-.308h-1.708V27.5h1.708zm13.238.252c1.526 0 2.52-.658 2.982-1.54-.07.322-.098.644-.098.98v.308h1.68v-5.222h-4.34v1.554h2.66v.07c0 1.4-1.134 2.296-2.59 2.296-1.792 0-3.024-1.372-3.024-3.598s1.26-3.598 3.066-3.598c1.302 0 2.17.756 2.296 1.736h1.89c-.182-1.904-1.764-3.29-4.214-3.29-2.954 0-4.928 2.128-4.928 5.152 0 3.136 1.848 5.152 4.62 5.152zm6.063-8.12h1.792V17.84h-1.792v1.792zm.042 1.036V27.5h1.708v-6.832h-1.708zm6.413 6.958c.434 0 .84-.07 1.008-.126v-1.288c-.168.028-.35.042-.518.042-.728 0-1.008-.42-1.008-1.134v-3.094h1.68v-1.358h-1.68v-2.464h-1.708v2.464h-1.554v1.358h1.554v3.346c0 1.526.77 2.254 2.226 2.254zm3.961 2.73V27.22c0-.196-.014-.378-.056-.658.434.7 1.022 1.19 2.17 1.19 1.736 0 3.066-1.414 3.066-3.626 0-2.17-1.19-3.682-2.996-3.682-1.078 0-1.806.476-2.24 1.204.042-.28.056-.462.056-.672v-.308h-1.708v9.688h1.708zm1.694-3.948c-1.036 0-1.764-.938-1.764-2.31 0-1.414.742-2.296 1.764-2.296 1.092 0 1.75.952 1.75 2.296 0 1.372-.7 2.31-1.75 2.31zm7.88 1.344c2.058 0 3.514-1.372 3.514-3.64 0-2.24-1.456-3.668-3.514-3.668-2.044 0-3.5 1.428-3.5 3.668 0 2.268 1.442 3.64 3.5 3.64zm0-1.344c-1.064 0-1.764-.84-1.764-2.296 0-1.484.728-2.31 1.764-2.31 1.05 0 1.778.826 1.778 2.31 0 1.456-.714 2.296-1.778 2.296zm7.551 1.344c1.26 0 1.876-.686 2.142-1.19-.056.238-.056.42-.056.658v.28h1.708v-9.8h-1.708v3.276c0 .21 0 .42.056.672-.392-.658-1.05-1.204-2.114-1.204-1.596 0-3.15 1.218-3.15 3.668 0 2.408 1.316 3.64 3.122 3.64zm.406-1.344c-1.022 0-1.792-.896-1.792-2.31 0-1.358.77-2.296 1.792-2.296s1.778.896 1.778 2.296c0 1.372-.756 2.31-1.778 2.31z" fill="#12100C"/>
+  </g>
+  <defs>
+    <linearGradient id="paint0_linear" x1="33.806" y1="13.629" x2="22.389" y2="30.86" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFB45B"/>
+      <stop offset="1" stop-color="#FF8A00"/>
+    </linearGradient>
+    <filter id="filter0_d" x="0" y=".5" width="160" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy=".5"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>