improve icon button detection; fixes #1475

* optmizing svg in logo.njk
* optimizing svg in logo-simple.njk

.github/workflows/client_tests.yml

@@ -4,11 +4,13 @@
 name: Client Tests
 
 on:
+  workflow_dispatch:
   push:
     branches: [next]
   pull_request:
     branches: [next]
 
+
 jobs:
   client_test:
     runs-on: ubuntu-latest
@@ -30,10 +32,17 @@ jobs:
         run: npm ci
       - name: Lint
         run: npm run prettier
+        working-directory: ./packages/webawesome
+
       - name: Build
         run: npm run build
+        working-directory: ./packages/webawesome
+
       - name: Install Playwright
         run: npx playwright install --with-deps
+        working-directory: ./packages/webawesome
+
       - name: Run CSR tests
         # FAIL_FAST to fail on first failing test.
         run: FAIL_FAST="true" CSR_ONLY="true" npm run test
+        working-directory: ./packages/webawesome

.github/workflows/ssr_tests.yml

@@ -26,17 +26,17 @@ jobs:
           cache: 'npm'
       - name: Install dependencies
         run: npm ci
-      # Just lint here too. Save some GH Action minutes and not need to use "depends_on" or anything.
-      - name: Lint
-        run: npm run prettier
 
       - name: Build
         run: npm run build
+        working-directory: ./packages/webawesome
 
       - name: Install Playwright
         run: npx playwright install --with-deps
+        working-directory: ./packages/webawesome
 
       - name: Run SSR tests
         # FAIL_FAST to fail on first failing test.
         run: FAIL_FAST="true" SSR_ONLY="true" npm run test
+        working-directory: ./packages/webawesome
 

.gitignore

@@ -4,5 +4,9 @@ _site
 dist/
 dist-cdn/
 node_modules
-src/react
+packages/**/*/src/react
 cdn/
+yarn.lock
+_bundle_
+/packages/webawesome-pro
+/packages/webawesome-app

.prettierignore

@@ -1,18 +1,23 @@
+# Files are relative to .prettierignore at the root of this monorepo.
+# <https://github.com/prettier/prettier-vscode/issues/1252>
+
 *.hbs
 *.md
-!docs/docs/patterns/**/*.md
+!packages/webawesome/docs/docs/patterns/**/*.md
 docs/docs/patterns/blog-news/post-list.md
-.cache
+**/*/.cache
 .github
 cspell.json
-dist
-docs/search.json
-src/components/icon/icons
-src/react/index.ts
+packages/**/*/dist
+packages/**/*/dist-cdn
+packages/**/*/docs/search.json
+packages/**/*/src/components/icon/icons
+packages/**/*/src/react/index.ts
+**/*/package.json
+**/*/package-lock.json
+**/*/tsconfig.json
+**/*/tsconfig.prod.json
 node_modules
-package.json
-package-lock.json
-tsconfig.json
-cdn
-_site
-docs/assets/scripts/prism-downloaded.js
+
+packages/**/*/_site
+packages/webawesome/docs/assets/scripts/prism-downloaded.js

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "bierner.lit-html",
-    "streetsidesoftware.code-spell-checker"
+    "streetsidesoftware.code-spell-checker",
+    "ronnidc.nunjucks"
   ]
 }

README.md

@@ -21,7 +21,7 @@ Twitter: [@webawesomer](https://twitter.com/webawesomer)
 
 ## Developers ✨
 
-Developers can use this documentation to learn how to build Web Awesome from source. You will need Node >= 14.17 to build and run the project locally.
+Developers can use this documentation to learn how to build Web Awesome from source. You will need Node.js 14.17 or later to build and run the project locally.
 
 **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.
 
@@ -29,7 +29,29 @@ If that's not what you're trying to do, the [documentation website](https://weba
 
 ### What are you using to build Web Awesome?
 
-Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).
+Components are built with [Lit](https://lit.dev/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).
+
+### Understanding the Web Awesome monorepo
+
+Web Awesome uses [npm workspaces](https://docs.npmjs.com/cli/v11/using-npm/workspaces) for its monorepo structure and is fairly minimal in what it provides.
+
+By using npm workspaces and a monorepo structure, we can get consistent builds, shared configurations, and reduced duplication across repositories which reduces regressions and forces consistency across `webawesome`, `webawesome-pro`, and `webawesome-app`.
+
+Generally, if you plan to only work with the free version of `webawesome` it is easiest to go to `packages/webawesome` and run all commands from there.
+
+### Where do npm dependencies go?
+
+Any dependencies intended to be used across all packages (i.e., `prettier`, `eslint`) that are **not** used at runtime should be in the root `devDependencies` of `package.json`.
+
+```bash
+npm install -D -w prettier
+```
+
+Any dependencies that will be used at runtime by a package should be part of the specific package's `dependencies` such as `lit`. This is required because if that dependency is not in the `packages/*/package.json`, it will not be installed when used via npm.
+
+Individual packages are also free to install `devDependencies` as needed as long as they are specific to that package only.
+
+To install a package specific to a Web Awesome package, change your working directory to that package's root (i.e., `cd packages/webawesome && npm install <package-name>`).
 
 ### Forking the Repo
 
@@ -43,19 +65,21 @@ npm install
 
 ### Developing
 
-Once you've cloned the repo, run the following command.
+Once you've cloned the repo, run the following command from the respective directory within `packages/*`.
 
 ```bash
+cd packages/webawesome
 npm start
 ```
 
-This will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browser's don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.
+This will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browsers don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.
 
 ### Building
 
 To generate a production build, run the following command.
 
 ```bash
+cd packages/webawesome
 npm run build
 ```
 
@@ -66,15 +90,24 @@ You can also run `npm run build:serve` to start an [`http-server`](https://www.n
 To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
 
 ```bash
+cd packages/webawesome
 npm run create wa-tag-name
 ```
 
 This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
 
+### Adding additional packages
+
+Right now the only additional packages are in private repositories.
+
+To add additional packages from other repositories, run `git clone <url> packages/<package-name>` to clone your repo into `packages/`.
+
+Make sure to run `npm install` at the root of the monorepo after adding your package!
+
 ### Contributing
 
 Web Awesome is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
 
 ## License
 
-Web Awesome is available under the terms of the MIT license.
+Web Awesome is available under the terms of the [MIT License](LICENSE.md).

VERSIONS.txt

@@ -0,0 +1,6 @@
+3.0.0-beta.1
+3.0.0-beta.2
+3.0.0-beta.3
+3.0.0-beta.4
+3.0.0-beta.5
+3.0.0-beta.6

cspell.json

@@ -8,23 +8,28 @@
     "APG",
     "apos",
     "atrule",
+    "autocapitalize",
     "autocorrect",
     "autofix",
+    "autofocus",
     "autoload",
     "autoloader",
     "autoloading",
     "autoplay",
     "bezier",
+    "Blockquotes",
     "boxicons",
     "CACHEABLE",
     "callout",
     "callouts",
+    "canvastext",
     "chatbubble",
     "checkmark",
     "Clippy",
     "codebases",
     "codepen",
     "colocated",
+    "colorjs",
     "colour",
     "combobox",
     "Commonmark",
@@ -40,16 +45,22 @@
     "csspart",
     "cssproperty",
     "cssstate",
+    "datalist",
     "datetime",
     "describedby",
+    "dictsort",
     "Docsify",
     "dogfood",
     "dropdowns",
     "easings",
     "ecommerce",
+    "eleventy",
+    "elif",
     "endfor",
+    "endmarkdown",
     "endraw",
     "endregion",
+    "endset",
     "enterkeyhint",
     "eqeqeq",
     "erroneou",
@@ -57,7 +68,10 @@
     "esbuild",
     "exportmaps",
     "exportparts",
+    "fetchpriority",
     "fieldsets",
+    "focusin",
+    "focusout",
     "fontawesome",
     "formaction",
     "formdata",
@@ -67,21 +81,25 @@
     "formtarget",
     "FOUC",
     "FOUCE",
+    "Frontmatter",
     "fullscreen",
     "gestern",
     "giga",
     "globby",
     "Grayscale",
+    "groupby",
     "haspopup",
     "heroicons",
     "hexa",
     "Hotwire",
+    "hrefs",
     "Iconoir",
     "Iframes",
     "iife",
     "inputmode",
     "ionicon",
     "ionicons",
+    "jank",
     "jsDelivr",
     "jsfiddle",
     "keydown",
@@ -117,8 +135,12 @@
     "noindex",
     "noopener",
     "noreferrer",
+    "noscript",
+    "Notdog",
     "novalidate",
+    "nowrap",
     "Numberish",
+    "nums",
     "oklab",
     "oklch",
     "onscrollend",
@@ -128,10 +150,12 @@
     "petabit",
     "Preact",
     "preconnect",
+    "prerendered",
     "prismjs",
     "progressbar",
     "radiogroup",
     "Railsbyte",
+    "referrerpolicy",
     "remixicon",
     "reregister",
     "resizer",
@@ -150,6 +174,7 @@
     "scroller",
     "Scrollers",
     "Segoe",
+    "selectattr",
     "semibold",
     "shadowrootmode",
     "Shortcode",
@@ -158,6 +183,7 @@
     "slotchange",
     "smartquotes",
     "spacebar",
+    "srcdoc",
     "stylesheet",
     "svgs",
     "Tabbable",
@@ -182,6 +208,7 @@
     "typeof",
     "unbundles",
     "unbundling",
+    "Uncategorized",
     "unicons",
     "unsanitized",
     "unsupportive",

docs/.eleventy.js

@@ -1,225 +0,0 @@
-import * as path from 'node:path';
-import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
-import { codeExamplesPlugin } from './_utils/code-examples.js';
-import { copyCodePlugin } from './_utils/copy-code.js';
-import { currentLink } from './_utils/current-link.js';
-import { highlightCodePlugin } from './_utils/highlight-code.js';
-import { markdown } from './_utils/markdown.js';
-// import { formatCodePlugin } from './_utils/format-code.js';
-// import litPlugin from '@lit-labs/eleventy-plugin-lit';
-import { readFile } from 'fs/promises';
-import nunjucks from 'nunjucks';
-// import componentList from './_data/componentList.js';
-import * as filters from './_utils/filters.js';
-import { outlinePlugin } from './_utils/outline.js';
-import { replaceTextPlugin } from './_utils/replace-text.js';
-import { searchPlugin } from './_utils/search.js';
-
-import process from 'process';
-
-import * as url from 'url';
-const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
-
-const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
-const isDev = process.argv.includes('--develop');
-
-const globalData = {
-  package: packageData,
-  layout: 'page.njk',
-  server: {
-    head: '',
-    loginOrAvatar: '',
-    flashes: '',
-  },
-};
-
-export default function (eleventyConfig) {
-  /**
-   * If you plan to add or remove any of these extensions, make sure to let either Konnor or Cory know as these passthrough extensions
-   * will also need to be updated in the Web Awesome App.
-   */
-  const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
-
-  const baseDir = process.env.BASE_DIR || 'docs';
-  const passThrough = [...passThroughExtensions.map(ext => path.join(baseDir, '**/*.' + ext))];
-
-  /**
-   * This is the guard we use for now to make sure our final built files dont need a 2nd pass by the server. This keeps us able to still deploy the bare HTML files on Vercel until the app is ready.
-   */
-  const serverBuild = process.env.WEBAWESOME_SERVER === 'true';
-
-  // Add template data
-  for (let name in globalData) {
-    eleventyConfig.addGlobalData(name, globalData[name]);
-  }
-
-  // Template filters - {{ content | filter }}
-  eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
-  eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
-
-  for (let name in filters) {
-    eleventyConfig.addFilter(name, filters[name]);
-  }
-
-  // Shortcodes - {% shortCode arg1, arg2 %}
-  eleventyConfig.addShortcode('cdnUrl', location => {
-    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
-  });
-
-  // Turns `{% server "foo" %} into `{{ server.foo | safe }}` when the WEBAWESOME_SERVER variable is set to "true"
-  eleventyConfig.addShortcode('server', function (property) {
-    if (serverBuild) {
-      return `{{ server.${property} | safe }}`;
-    }
-
-    return '';
-  });
-
-  eleventyConfig.addTransform('second-nunjucks-transform', function NunjucksTransform(content) {
-    // For a server build, we expect a server to run the second transform.
-    if (serverBuild) {
-      return content;
-    }
-
-    // Only run the transform on files nunjucks would transform.
-    if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
-      return content;
-    }
-
-    /** This largely mimics what an app would do and just stubs out what we don't care about. */
-    return nunjucks.renderString(content, {
-      // Stub the server EJS shortcodes.
-      server: {
-        head: '',
-        loginOrAvatar: '',
-        flashes: '',
-      },
-    });
-  });
-
-  // Paired shortcodes - {% shortCode %}content{% endShortCode %}
-  eleventyConfig.addPairedShortcode('markdown', content => markdown.render(content || ''));
-
-  // Helpers
-
-  // 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>',
-      },
-    ]),
-  );
-
-  eleventyConfig.addPreprocessor('unpublished', '*', (data, content) => {
-    if (data.unpublished && process.env.ELEVENTY_RUN_MODE === 'build') {
-      // Exclude "unpublished" pages from final builds.
-      return false;
-    }
-
-    return content;
-  });
-
-  // Build the search index
-  eleventyConfig.addPlugin(
-    searchPlugin({
-      filename: '',
-      selectorsToIgnore: ['code.example'],
-      getContent: doc => doc.querySelector('#content')?.textContent ?? '',
-    }),
-  );
-
-  // Production-only plugins
-  //
-  // TODO - disabled because it takes about a minute to run now
-  //
-  // if (!isDev) {
-  //   // Run Prettier on each file (prod only because it can be slow)
-  //   eleventyConfig.addPlugin(formatCodePlugin());
-  // }
-
-  eleventyConfig.addPassthroughCopy({
-    'docs/assets': 'assets',
-  });
-
-  for (let glob of passThrough) {
-    eleventyConfig.addPassthroughCopy(glob);
-  }
-
-  // // SSR plugin
-  // // Make sure this is the last thing, we don't want to run the risk of accidentally transforming shadow roots with the nunjucks 2nd transform.
-  // if (!isDev) {
-  //   //
-  //   // Problematic components in SSR land:
-  //   //  - animation (breaks on navigation + ssr with Turbo)
-  //   //  - mutation-observer (why SSR this?)
-  //   //  - resize-observer (why SSR this?)
-  //   //  - tooltip (why SSR this?)
-  //   //
-  //   const omittedModules = [];
-  //   const componentModules = componentList
-  //     .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
-  //     .map(component => {
-  //       const name = component.tagName.split(/wa-/)[1];
-  //       const componentDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join('.', 'dist');
-  //       return path.join(componentDirectory, 'components', name, `${name}.js`);
-  //     });
-  //
-  //   eleventyConfig.addPlugin(litPlugin, {
-  //     mode: 'worker',
-  //     componentModules,
-  //   });
-  // }
-
-  return {
-    markdownTemplateEngine: 'njk',
-    dir: {
-      input: 'docs',
-      includes: '_includes',
-      layouts: '_layouts',
-    },
-    templateFormats: ['njk', 'md'],
-  };
-}

docs/_data/componentList.js

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

docs/_data/components.js

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

docs/_data/componentsBy.js

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

docs/_data/hueRanges.js

@@ -1 +0,0 @@
-export { hueRanges as default } from '../assets/data/index.js';

docs/_data/hues.json

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

docs/_data/palettes.js

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

docs/_data/themes.js

@@ -1,62 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-// import { inlined } from '../../dist/components/icon/library.wa.js';
-const distDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join(path.resolve(), 'dist');
-
-const THEME_DIR = path.join(distDirectory, 'styles', 'themes');
-
-const themeFiles = fs.readdirSync(THEME_DIR).filter(file => file.endsWith('.css') && !file.endsWith('base.css'));
-
-const declarationRegex = /^\s*--wa-(?<property>[a-z-]+)?:\s*(?<value>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
-const importRegex = /^\s*@import\s+url\(['"](?<path>.+?)['"]\);$/gm;
-const themes = {};
-
-for (const file of themeFiles) {
-  const id = file.replace('.css', '');
-  const { imports, declarations } = readCSSFile(file);
-  let theme = { palette: 'default', declarations, imports };
-
-  for (const url of imports) {
-    if (url.endsWith('/color.css')) {
-      // Color settings
-      const color = readCSSFile(url);
-      for (const colorUrl of color.imports) {
-        if (colorUrl.startsWith('../../color/')) {
-          // Color palette
-          theme.palette = getFileSlug(colorUrl);
-        } else if (colorUrl.startsWith('../../brand/')) {
-          // Brand color
-          theme.brand = getFileSlug(colorUrl);
-        }
-      }
-    } else if (url.endsWith('/dimension.css')) {
-      theme.dimension = true;
-    }
-  }
-
-  let icon = {};
-  icon.family = theme.declarations['icon-family'] ?? theme.default?.iconFamily ?? 'classic';
-  icon.variant = theme.declarations['icon-variant'] ?? theme.default?.iconVariant ?? 'solid';
-  theme.icons = icon;
-
-  theme.rounding = Number(theme.declarations['border-radius-scale'] ?? theme.default?.rounding ?? 1);
-  theme.spacing = Number(theme.declarations['space-scale'] ?? theme.default?.spacing ?? 1);
-  theme.borderWidth = Number(theme.declarations['border-width-scale'] ?? theme.default?.borderWidth ?? 1);
-
-  themes[id] = theme;
-}
-
-export default themes;
-
-function readCSSFile(url) {
-  const contents = fs.readFileSync(path.join(THEME_DIR, url), 'utf8');
-  const imports = [...contents.matchAll(importRegex)].map(match => match.groups.path);
-  const declarations = Object.fromEntries(
-    [...contents.matchAll(declarationRegex)].map(match => [match.groups.property, match.groups.value]),
-  );
-  return { imports, declarations };
-}
-
-function getFileSlug(url) {
-  return url.split('/').pop().replace('.css', '');
-}

docs/_includes/base.njk

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

docs/_includes/breadcrumbs.njk

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

docs/_includes/color-scheme-selector.njk

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

docs/_includes/contrast-table.njk

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

docs/_includes/grouped-pages.njk

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

docs/_includes/head.njk

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

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

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

docs/_includes/logo-simple.njk

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

docs/_includes/logo.njk

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

docs/_includes/page-card.njk

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

docs/_includes/page-demo.njk

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

docs/_includes/preset-theme-selector.njk

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

docs/_includes/sidebar-group.njk

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

docs/_includes/sidebar-link.njk

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

docs/_includes/sidebar.njk

@@ -1,34 +0,0 @@
-{# Getting started #}
-<h2>Getting Started</h2>
-<ul>
-  <li><a href="/docs/">Installation</a></li>
-  <li><a href="/docs/usage">Usage</a></li>
-  <li><a href="/docs/customizing">Customizing</a></li>
-  <li><a href="/docs/form-controls">Form Controls</a></li>
-  <li><a href="/docs/localization">Localization</a></li>
-</ul>
-
-{# Resources #}
-<h2>Resources</h2>
-<ul>
-  <li><a href="https://github.com/shoelace-style/webawesome-alpha/discussions" target="_blank">Help &amp; Support</a></li>
-  <li><a href="/docs/resources/community">Community</a></li>
-  <li><a href="/docs/resources/accessibility">Accessibility</a></li>
-  <li><a href="/docs/resources/browser-support">Browser Support</a></li>
-  <li><a href="/docs/resources/contributing">Contributing</a></li>
-  <li><a href="/docs/resources/changelog">Changelog</a></li>
-  <li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
-</ul>
-
-{% for tag, title in {
-  'themes': 'Themes',
-  'components': 'Components',
-  'native': 'Native Styles',
-  'utilities': 'Style Utilities',
-  'layout': 'Layout',
-  'patterns': 'Patterns',
-  'palettes': 'Color Palettes',
-  'tokens': 'Design Tokens'
-} %}
-  {% include 'sidebar-group.njk' %}
-{% endfor %}

docs/_includes/status.njk

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

docs/_includes/svgs/icon-button.njk

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

docs/_includes/svgs/palette.njk

@@ -1,20 +0,0 @@
-{% set paletteId = palette.fileSlug or page.fileSlug %}
-{% set suffixes = ['-80', '', '-20'] %}
-
-<wa-scoped class="palette-icon-host">
-  <template>
-    <link rel="stylesheet" href="/dist/styles/color/{{ paletteId }}.css">
-    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-    <div class="palette-icon" style="--hues: {{ hues|length }}; --suffixes: {{ suffixes|length }}">
-      {% for hue in hues -%}
-        {% set hueIndex = loop.index %}
-        {% for suffix in suffixes -%}
-          <div class="swatch"
-               data-hue="{{ hue }}" data-suffix="{{ suffix }}"
-               style="--color: var(--wa-color-{{ hue }}{{ suffix }}); grid-column: {{ hueIndex }}; grid-row: {{ loop.index }}">&nbsp;</div>
-        {%- endfor %}
-      {%- endfor %}
-    </div>
-  </template>
-</wa-scoped>

docs/_includes/svgs/theme-color.njk

@@ -1,24 +0,0 @@
-{% set themeId = theme.fileSlug %}
-
-<wa-scoped class="theme-icon-host theme-color-icon-host">
-  <template>
-    <link rel="stylesheet" href="/dist/styles/utilities.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/color.css">
-    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-    <div class="theme-icon theme-color-icon wa-theme-{{ themeId }}">
-      <div class="wa-brand wa-accent">A</div>
-      <div class="wa-brand wa-outlined">A</div>
-      <div class="wa-brand wa-filled">A</div>
-      <div class="wa-brand wa-plain">A</div>
-      {# <div class="wa-danger wa-outlined wa-filled"><wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon></div> #}
-
-      <div class="wa-neutral wa-accent">A</div>
-      <div class="wa-neutral wa-outlined">A</div>
-      <div class="wa-neutral wa-filled">A</div>
-      <div class="wa-neutral wa-plain">A</div>
-      {# <div class="wa-warning wa-outlined wa-filled"><wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon></div> #}
-    </div>
-  </template>
-</wa-scoped>

docs/_includes/svgs/theme-typography.njk

@@ -1,16 +0,0 @@
-{% set themeId = theme.fileSlug or page.fileSlug %}
-
-<wa-scoped class="theme-icon-host theme-typography-icon-host">
-  <template>
-    <link rel="stylesheet" href="/dist/styles/native/content.css">
-    <link rel="stylesheet" href="/dist/styles/native/blockquote.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/typography.css">
-    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-    <div class="theme-icon theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
-      <h3>Title</h3>
-      <p>Body text</p>
-    </div>
-  </template>
-</wa-scoped>

docs/_includes/svgs/theme.njk

@@ -1,29 +0,0 @@
-{% set themeId = theme.fileSlug or page.fileSlug %}
-
-
-<wa-scoped class="theme-icon-host theme-overall-icon-host">
-  <template>
-    <link rel="stylesheet" href="/dist/styles/utilities.css">
-    <link rel="stylesheet" href="/dist/styles/native/content.css">
-    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}.css">
-    <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-    <div class="theme-icon theme-overall-icon" role="presentation" data-no-anchor data-no-outline>
-      <div class="row row-1">
-        <h2>Aa</h2>
-        <div class="swatches">
-          <div class="wa-brand"></div>
-
-          <div class="wa-success"></div>
-          <div class="wa-warning"></div>
-          <div class="wa-danger"></div>
-          <div class="wa-neutral"></div>
-        </div>
-      </div>
-      <div class="row row-2">
-        <wa-input value="Input" size="small" inert></wa-input>
-        <wa-button size="small" variant="brand" inert>Go</wa-button>
-      </div>
-    </div>
-  </template>
-</wa-scoped>

docs/_includes/theme-showcase.njk

@@ -1,335 +0,0 @@
-<div class="showcase-examples-wrapper" aria-hidden="true" data-no-outline>
-  <div class="showcase-examples">
-    <wa-card>
-      <div slot="header" class="wa-split">
-        <h3 class="wa-heading-m">Your Cart</h3>
-        <wa-icon-button name="xmark" tabindex="-1"></wa-icon-button>
-      </div>
-      <div class="wa-stack wa-gap-xl">
-        <div class="wa-flank">
-          <wa-avatar shape="rounded" style="--background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95);">
-            <wa-icon slot="icon" name="sword-laser"></wa-icon>
-          </wa-avatar>
-          <div class="wa-stack wa-gap-2xs">
-            <div class="wa-split wa-gap-2xs">
-              <strong>Initiate Saber</strong>
-              <strong>$179.99</strong>
-            </div>
-            <div class="wa-split wa-gap-2xs wa-caption-m">
-              <span>Green</span>
-              <a href="#" tabindex="-1">Remove</a>
-            </div>
-          </div>
-        </div>
-        <wa-divider></wa-divider>
-        <div class="wa-flank">
-          <wa-avatar shape="rounded" style="--background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-95);">
-            <wa-icon slot="icon" name="robot-astromech"></wa-icon>
-          </wa-avatar>
-          <div class="wa-stack wa-gap-2xs">
-            <div class="wa-split wa-gap-2xs">
-              <strong>Repair Droid</strong>
-              <strong>$3,049.99</strong>
-            </div>
-            <div class="wa-split wa-gap-2xs wa-caption-m">
-              <span>R-series</span>
-              <a href="#" tabindex="-1">Remove</a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div slot="footer" class="wa-stack">
-        <div class="wa-split">
-          <strong>Subtotal</strong>
-          <strong>$3,229.98</strong>
-        </div>
-        <span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
-        <wa-button tabindex="-1" variant="brand">
-          <wa-icon slot="prefix" name="shopping-bag"></wa-icon>
-          Checkout
-        </wa-button>
-      </div>
-    </wa-card>
-    <wa-card>
-      <wa-avatar shape="rounded" style="--size: 1.9lh; float: left; margin-right: var(--wa-space-m);">
-        <wa-icon slot="icon" name="hat-wizard" style="font-size: 1.75em;"></wa-icon>
-      </wa-avatar>
-      <p class="wa-body-l" style="margin: 0;">&ldquo;All we have to decide is what to do with the time that is given to us. There are other forces at work in this world, Frodo, besides the will of evil.&rdquo;</p>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <h3 class="wa-heading-m">Sign In</h3>
-        <wa-input tabindex="-1" label="Email" placeholder="ddjarin@mandalore.gov">
-          <wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
-        </wa-input>
-        <wa-input tabindex="-1" label="Password" type="password">
-          <wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
-        </wa-input>
-        <wa-button tabindex="-1" variant="brand">Sign In</wa-button>
-        <a href="#" tabindex="-1" class="wa-body-s">I forgot my password</a>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-split">
-          <h3 class="wa-heading-m">To-Do</h3>
-          <wa-icon-button tabindex="-1" name="plus" label="Add task"></wa-icon-button>
-        </div>
-        <wa-checkbox tabindex="-1" checked>Umbrella for Adelard</wa-checkbox>
-        <wa-checkbox tabindex="-1" checked>Waste-paper basket for Dora</wa-checkbox>
-        <wa-checkbox tabindex="-1" checked>Pen and ink for Milo</wa-checkbox>
-        <wa-checkbox tabindex="-1">Mirror for Angelica</wa-checkbox>
-        <wa-checkbox tabindex="-1">Silver spoons for Lobelia</wa-checkbox>
-      </div>
-      <div slot="footer">
-        <a href="" tabindex="-1">View all completed</a>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-frame wa-border-radius-m" style="align-self: center; max-inline-size: 25ch;">
-          <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="Album art">
-        </div>
-        <div class="wa-flank:end wa-align-items-start">
-          <div class="wa-stack wa-gap-3xs">
-            <div class="wa-cluster wa-gap-xs" style="height: 2.25em;">
-              <strong>The Stone Troll</strong>
-              <small><wa-badge variant="neutral" appearance="filled">E</wa-badge></small>
-            </div>
-            <span class="wa-caption-m">Samwise G</span>
-          </div>
-          <wa-icon-button tabindex="-1" name="ellipsis" label="Options"></wa-icon-button>
-        </div>
-        <div class="wa-stack wa-gap-2xs">
-          <wa-progress-bar value="34" style="height: 0.5em"></wa-progress-bar>
-          <div class="wa-split">
-            <span class="wa-caption-xs">1:01</span>
-            <span class="wa-caption-xs">-1:58</span>
-          </div>
-        </div>
-        <div class="wa-grid wa-align-items-center" style="--min-column-size: 1em; justify-items: center;">
-          <wa-icon-button tabindex="-1" name="backward" label="Skip backward"></wa-icon-button>
-          <wa-icon-button tabindex="-1" name="pause" style="font-size: var(--wa-font-size-2xl);" label="Pause"></wa-icon-button>
-          <wa-icon-button tabindex="-1" name="forward" label="Skip forward"></wa-icon-button>
-        </div>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <h3 class="wa-heading-m">Chalmun's Spaceport Cantina</h3>
-        <div class="wa-cluster wa-gap-xs">
-          <wa-rating value="4.6" readonly tabindex="-1"></wa-rating>
-          <strong>4.6</strong>
-          <span>(419 reviews)</span>
-        </div>
-        <div class="wa-cluster wa-gap-xs">
-          <div class="wa-cluster wa-gap-3xs">
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-          </div>
-          <span class="wa-caption-m">&bull;</span>
-          <wa-tag size="small">Cocktail Bar</wa-tag>
-          <wa-tag size="small">Gastropub</wa-tag>
-          <wa-tag size="small">Local Fare</wa-tag>
-          <wa-tag size="small">Gluten Free</wa-tag>
-        </div>
-        <div class="wa-flank wa-gap-xs">
-          <wa-icon name="location-dot"></wa-icon>
-          <a href="#" class="wa-caption-m" tabindex="-1">Mos Eisley, Tatooine</a>
-        </div>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-flank:end">
-          <h3 id="odds-label" class="wa-heading-m">Tell Me the Odds</h3>
-          <wa-switch size="large" aria-labelledby="odds-label" tabindex="-1"></wa-switch>
-        </div>
-        <p class="wa-body-s">Allow protocol droids to inform you of probabilities, such as the success rate of navigating an asteroid field. We recommend setting this to "Never."</p>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-split wa-align-items-start">
-          <dl class="wa-stack wa-gap-2xs">
-            <dt class="wa-heading-s">Amount</dt>
-            <dd class="wa-heading-l">$5,610.00</dd>
-          </dl>
-          <wa-badge appearance="filled outlined" variant="success">Paid</wa-badge>
-        </div>
-        <wa-divider></wa-divider>
-        <dl class="wa-stack">
-          <div class="wa-flank wa-align-items-center">
-            <dt><wa-icon name="user" label="Name" fixed-width></wa-icon></dt>
-            <dd>Tom Bombadil</dd>
-          </div>
-          <div class="wa-flank wa-align-items-center">
-            <dt><wa-icon name="calendar-days" label="Date" fixed-width></wa-icon></dt>
-            <dd><wa-format-date date="2025-03-15"></wa-format-date></dd>
-          </div>
-          <div class="wa-flank wa-align-items-center">
-            <dt><wa-icon name="coin-vertical" fixed-width></wa-icon></dt>
-            <dd>Paid with copper pennies</dd>
-          </div>
-        </dl>
-      </div>
-      <div slot="footer">
-        <a href="" class="wa-cluster wa-gap-2xs" tabindex="-1">
-          <span>Download Receipt</span>
-          <wa-icon name="arrow-right"></wa-icon>
-        </a>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-split">
-          <div class="wa-cluster wa-heading-l">
-            <wa-icon name="book-sparkles"></wa-icon>
-            <h3>Fellowship</h3>
-          </div>
-          <wa-badge>Most Popular</wa-badge>
-        </div>
-        <span class="wa-flank wa-align-items-baseline wa-gap-2xs">
-          <span class="wa-heading-2xl">$120</span>
-          <span class="wa-caption-l">per year</span>
-        </span>
-        <p class="wa-caption-l">Carry great power (and great responsibility).</p>
-        <wa-button variant="brand" tabindex="-1">Get this Plan</wa-button>
-      </div>
-      <div slot="footer" class="wa-stack wap-gap-s">
-        <h4 class="wa-heading-s">What You Get</h4>
-        <div class="wa-stack">
-          <div class="wa-flank">
-            <wa-icon name="user" fixed-width></wa-icon>
-            <span class="wa-caption-m">9 users</span>
-          </div>
-          <div class="wa-flank">
-            <wa-icon name="ring" fixed-width></wa-icon>
-            <span class="wa-caption-m">1 ring</span>
-          </div>
-          <div class="wa-flank">
-            <wa-icon name="chess-rook" fixed-width></wa-icon>
-            <span class="wa-caption-m">API access to Isengard</span>
-          </div>
-          <div class="wa-flank">
-            <wa-icon name="feather" fixed-width></wa-icon>
-            <span class="wa-caption-m">Priority eagle support</span>
-          </div>
-        </div>
-      </div>
-    </wa-card>
-    <wa-card with-footer>
-      <div class="wa-flank:end">
-        <div class="wa-stack wa-gap-xs">
-          <div class="wa-cluster wa-gap-xs">
-            <h3 class="wa-heading-s">Migs Mayfeld</h3 class="wa-heading-s">
-            <wa-badge pill>Admin</wa-badge>
-          </div>
-          <span class="wa-caption-m">Bounty Hunter</span>
-        </div>
-        <wa-avatar image="https://images.unsplash.com/photo-1633268335280-a41fbde58707?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Avatar of a man wearing a sci-fi helmet (Photograph by Nandu Vasudevan)"></wa-avatar>
-      </div>
-      <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
-        <wa-button appearance="outlined" tabindex="-1">
-          <wa-icon slot="prefix" name="at"></wa-icon>
-          Email
-        </wa-button>
-        <wa-button appearance="outlined" tabindex="-1">
-          <wa-icon slot="prefix" name="phone"></wa-icon>
-          Phone
-        </wa-button>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-flank:end">
-        <a href="" class="wa-flank wa-link-plain" tabindex="-1">
-          <wa-avatar shape="rounded" style="--background-color: var(--wa-color-yellow-90); --text-color: var(--wa-color-yellow-50)">
-            <wa-icon slot="icon" name="egg-fried"></wa-icon>
-          </wa-avatar>
-          <div class="wa-gap-2xs wa-stack">
-            <span class="wa-heading-s">Second Breakfast</span>
-            <span class="wa-caption-m">19 Items</span>
-          </div>
-        </a>
-        <wa-dropdown>
-          <wa-icon-button id="more-actions-2" slot="trigger" name="ellipsis-vertical" label="View menu" tabindex="-1"></wa-icon-button>
-          <wa-menu>
-            <wa-menu-item>Copy link</wa-menu-item>
-            <wa-menu-item>Rename</wa-menu-item>
-            <wa-menu-item>Move to trash</wa-menu-item>
-          </wa-menu>
-        </wa-dropdown>
-        <wa-tooltip for="more-actions-2">View menu</wa-tooltip>
-      </div>
-    </wa-card>
-    <wa-card with-header with-footer>
-      <div slot="header" class="wa-stack wa-gap-xs">
-        <h2 class="wa-heading-m">Decks</h2>
-      </div>
-      <div class="wa-stack wa-gap-xl">
-        <p class="wa-caption-m">You haven’t created any decks yet. Get started by selecting an aspect that matches your play style.</p>
-        <div class="wa-grid wa-gap-xl" style="--min-column-size: 30ch;">
-          <a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
-            <wa-avatar shape="rounded" style="--background-color: var(--wa-color-blue-90);color: var(--wa-color-blue-50);">
-              <wa-icon slot="icon" name="shield"></wa-icon>
-            </wa-avatar>
-            <div class="wa-stack wa-gap-2xs">
-              <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-                Vigilance <wa-icon name="arrow-right"></wa-icon>
-              </span>
-              <p class="wa-caption-m">
-                Protect, defend, and restore as you ready heavy-hitters.
-              </p>
-            </div>
-          </a>
-          <a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
-            <wa-avatar shape="rounded" style="--background-color: var(--wa-color-green-90);color: var(--wa-color-green-50);">
-              <wa-icon slot="icon" name="chevrons-up"></wa-icon>
-            </wa-avatar>
-            <div class="wa-stack wa-gap-2xs">
-              <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-                Command <wa-icon name="arrow-right"></wa-icon>
-              </span>
-              <p class="wa-caption-m">
-                Build imposing armies and stockpile resources.
-              </p>
-            </div>
-          </a>
-          <a href=""class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
-            <wa-avatar shape="rounded" style="--background-color: var(--wa-color-red-90);color: var(--wa-color-red-50);">
-              <wa-icon slot="icon" name="explosion"></wa-icon>
-            </wa-avatar>
-            <div class="wa-stack wa-gap-2xs">
-              <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-                Aggression <wa-icon name="arrow-right"></wa-icon>
-              </span>
-              <p class="wa-caption-m">
-                Relentlessly deal damage and apply pressure to your opponent.
-              </p>
-            </div>
-          </a>
-          <a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
-            <wa-avatar shape="rounded" style="--background-color: var(--wa-color-yellow-90);color: var(--wa-color-yellow-50);">
-              <wa-icon slot="icon" name="moon-stars"></wa-icon>
-            </wa-avatar>
-            <div class="wa-stack wa-gap-2xs">
-              <span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
-                Cunning <wa-icon name="arrow-right"></wa-icon>
-              </span>
-              <p class="wa-caption-m">
-                Disrupt and frustrate your opponent with dastardly tricks.
-              </p>
-            </div>
-          </a>
-        </div>
-      </div>
-      <div slot="footer">
-        <a href="" class="wa-cluster wa-gap-xs" tabindex="-1">
-          <span>Or start a deck from scratch</span>
-          <wa-icon name="arrow-right"></wa-icon>
-        </a>
-      </div>
-    </wa-card>
-  </div>
-</div>

docs/_layouts/blank.njk

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
-  <head>
-    {% include 'head.njk' %}
-    {% block head %}{% endblock %}
-  </head>
-  <body class="layout-{{ layout | stripExtension }}">
-
-        {% block header %}{% endblock %}
-
-        {% block content %}
-          {{ content | safe }}
-        {% endblock %}
-
-        {% block afterContent %}{% endblock %}
-
-  </body>
-</html>

docs/_layouts/block.njk

@@ -1,38 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-
-{% extends '../_includes/base.njk' %}
-
-{# Component header #}
-{% block header %}
-  {% include 'breadcrumbs.njk' %}
-  <h1 class="title">{{ title }}</h1>
-  <div class="block-info">
-    {% set snippets = (elements or element or snippets or snippet) | dict  %}
-
-    {% for snippet, link in snippets %}
-      {% if snippet %}
-        <code class="class">
-          {%- if link -%}
-            <a href="{{ link }}">{{ snippet }}</a>
-          {%- else -%}
-            {{ snippet }}
-          {%- endif-%}
-        </code>
-      {%- endif %}
-    {% endfor %}
-
-    {% include '../_includes/status.njk' %}
-  </div>
-  {% if description %}
-  <p class="summary">
-    {{ description | inlineMarkdown | safe }}
-  </p>
-  {% endif %}
-  {% block notes %}{% endblock %}
-{% endblock %}
-
-{# Content #}
-{% block content %}
-  {{ content | safe }}
-{% endblock %}

docs/_layouts/element.njk

@@ -1,32 +0,0 @@
-{% extends '../_layouts/block.njk' %}
-
-{# Component header #}
-{% block notes %}
-  {% if component %}
-  <wa-callout variant="success">
-    <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
-    Want to do more?
-    Check out the {% for name in (component | toList) -%}
-      {{ ' and ' if loop.last and not loop.first }}<a href="/docs/components/{{ name }}"><code>&lt;wa-{{ name }}&gt;</code></a>{{ ', ' if not loop.last }}
-      {%- endfor %} component{{ 's' if (component | isList) }}</a>!
-  </wa-callout>
-  {% endif %}
-{% endblock %}
-
-{% block afterContent %}
-{% if file %}
-{% markdown %}
-## Opting In to Native {{ title }} Styles
-
-If you want to use the Native {{ title }} styles **without including the entirety of Web Awesome Native Styles**,
- you can include the following CSS files from the Web Awesome CDN.
-
-{% set stylesheet = file %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-To use all of Web Awesome Native styles, follow the [instructions on the Native Styles overview page](../).
-
-{% endmarkdown %}
-{% endif %}
-
-{% endblock %}

docs/_layouts/overview.njk

@@ -1,26 +0,0 @@
----
-layout: page-outline
----
-{% set forTag = forTag or (page.url | split('/') | last) %}
-{% if description %}
-  <div class="index-summary">{{ description | markdown | safe }}</div>
-{% endif %}
-
-<div id="block-filter">
-  <wa-input type="search" placeholder="Search {{ title }}" clearable autofocus>
-	<wa-icon slot="prefix" name="search"></wa-icon>
-  </wa-input>
-</div>
-
-{% set allPages = allPages or collections[forTag] %}
-{% if allPages and allPages.length > 0 %}
-{% include "grouped-pages.njk" %}
-{% endif %}
-
-<link href="/assets/styles/filter.css" rel="stylesheet">
-<script type="module" src="/assets/scripts/filter.js"></script>
-
-{% if content | trim %}
-<wa-divider style="--spacing: var(--wa-space-3xl)"></wa-divider> {# Temp fix for spacing issue #}
-{{ content | safe }}
-{% endif %}

docs/_layouts/palette.njk

@@ -1,309 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-{% set paletteId = page.fileSlug %}
-{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
-
-{% extends '../_includes/base.njk' %}
-
-{% block head %}
-<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
-<link href="{{ page.url }}../tweak.css" rel="stylesheet">
-<script type="module" src="{{ page.url }}../tweak.js"></script>
-{% endblock %}
-
-{% block header %}
-<div id="palette-app" data-palette-id="{{ paletteId }}">
-  <div
-  :class="{
-    tweaking: tweaking.chroma,
-    'tweaking-chroma': tweaking.chroma,
-    'tweaking-hue': tweaking.chroma,
-    'tweaking-gray-chroma': tweaking.grayChroma,
-    'tweaked-chroma': tweaked?.chroma,
-    'tweaked-hue': tweaked?.hue,
-    'tweaked-any': tweaked
-  }"
-  :style="{
-    '--chroma-scale': chromaScale,
-    '--gray-chroma': tweaked?.grayChroma ? grayChroma : '',
-    }">
-
-  {% include 'breadcrumbs.njk' %}
-
-  <h1 class="title">
-    <span v-content="title">{{ title }}</span>
-    <template v-if="saved || tweaked">
-      <wa-icon-button name="pencil" label="Rename palette" @click="rename"></wa-icon-button>
-      <wa-icon-button v-if="saved" class="delete" name="trash" label="Delete palette" @click="deleteSaved"></wa-icon-button>
-      <wa-button @click="save()" :disabled="!unsavedChanges"
-        :variant="unsavedChanges ? 'success' : 'neutral'" size="small" :appearance="unsavedChanges ? 'accent' : 'outlined'">
-        <span slot="prefix" class="icon-modifier">
-          <wa-icon name="sidebar" variant="regular"></wa-icon>
-          <wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
-        </span>
-        <span v-content="unsavedChanges ? 'Save' : 'Saved'">Save</span>
-      </wa-button>
-    </template>
-  </h1>
-
-  <div class="block-info">
-    <code class="class">.wa-palette-{{ paletteId }}</code>
-    {% include '../_includes/status.njk' %}
-    {% if not isPro %}
-    <wa-badge class="pro" v-if="tweaked">PRO</wa-badge>
-    {% endif %}
-  </div>
-  {% if description %}
-  <p class="summary">
-    {{ description | inlineMarkdown | safe }}
-  </p>
-  {% endif %}
-{% endblock %}
-
-{% block afterContent %}
-
-{% set maxChroma = 0 %}
-
-<wa-callout size="small" class="tweaked-callout" variant="warning">
-  <wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
-   This palette has been tweaked.
-   <div class="wa-cluster wa-gap-xs">
-    <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="reset(param)" v-content="tweakHumanReadable"></wa-tag>
-   </div>
-
-  <wa-button @click="reset()" appearance="outlined" variant="danger">
-    <span slot="prefix" class="icon-modifier">
-      <wa-icon name="circle-xmark" variant="regular"></wa-icon>
-    </span>
-    Reset
-  </wa-button>
-</wa-callout>
-
-<table class="colors main wa-palette-{{ paletteId }}">
-  <thead>
-    <tr>
-      <th></th>
-      <th class="core-column">Core tint</th>
-      {% for tint in tints -%}
-      <th>{{ tint }}</th>
-      {%- endfor %}
-    </tr>
-  </thead>
-{# Initialize to last hue before gray #}
-{%- set hueBefore = hues[hues|length - 2] -%}
-{% for hue in hues -%}
-{% set coreTint = palettes[paletteId][hue].maxChromaTint %}
-{%- set coreColor = palettes[paletteId][hue][coreTint] -%}
-{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
-{% if hue === 'gray' %}
-<tr data-hue="{{ hue }}" class="color-scale"
-    :class="{tweaking: tweaking.grayChroma, tweaked: tweaked.grayChroma || tweaked.grayColor }">
-{% else %}
-<tr data-hue="{{ hue }}" class="color-scale"
-    :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
-    :style="{ '--hue-shift': hueShifts.{{ hue }} || '' }">
-{% endif %}
-  <th>
-    {{ hue | capitalize }}
-  </th>
-  <td class="core-column"
-      style="--color: var(--wa-color-{{ hue }})"
-      :style="{
-        '--color-tweaked': colors.{{ hue }}[{{ coreTint }}],
-        '--color-gray-undertone': colors[grayColor][{{coreTint}}],
-        '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ coreTint }}],
-      }">
-    <wa-dropdown>
-      <div slot="trigger" id="core-{{ hue }}-swatch" data-tint="core" class="color swatch"
-      style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});"
-      >
-        {{ palettes[paletteId][hue].maxChromaTint }}
-        <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
-      </div>
-      <div class="popup">
-      {% if hue === 'gray' %}
-        <swatch-select label="Gray undertone" shape="circle" :values="hues" v-model="grayColor"></swatch-select>
-
-        <div class="decorated-slider gray-chroma-slider" :style="{'--max': maxGrayChroma}">
-          <wa-slider name="gray-chroma" v-model="grayChroma" ref="grayChromaSlider"
-          value="0" min="0" :max="maxGrayChroma" step="0.01"
-            @input="tweaking.grayChroma = true" @change="tweaking.grayChroma = false">
-            <div slot="label">
-              Gray colorfulness
-              <wa-icon-button @click="grayChroma = originalGrayChroma" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
-            </div>
-          </wa-slider>
-          <div class="label-min">Neutral</div>
-          <div class="label-max" v-content="moreHue[grayColor]">Warmer/Cooler</div>
-        </div>
-      {% else %}
-      {%- set hueAfter = hues[loop.index0 + 1] -%}
-      {%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
-      {%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
-      {%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
-
-      <div class="decorated-slider hue-shift-slider" style="--min: {{ minShift }}; --max: {{ maxShift }};">
-        <wa-slider name="{{ hue }}-shift" v-model="hueShifts.{{ hue }}" value="0"
-          min="{{ minShift }}" max="{{ maxShift }}" step="1"
-          @input="tweaking.hue = tweaking.{{hue}} = true"
-          @change="tweaking.hue = tweaking.{{ hue }} = false">
-          <div slot="label">
-            Tweak {{ hue }} hue
-            <wa-icon-button @click="hueShifts.{{ hue }} = 0" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
-          </div>
-        </wa-slider>
-        <div class="label-min">More {{hueBefore}}</div>
-        <div class="label-max">More {{hueAfter}}</div>
-      </div>
-      {%- set hueBefore = hue -%}
-      {% endif %}
-      <div class="wa-gap-s">
-          <code>--wa-color-{{ hue }}</code>
-          <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
-        </div>
-      </div>`
-    </wa-dropdown>
-  </td>
-  {% for tint in tints -%}
-    {%- set color = palettes[paletteId][hue][tint] -%}
-    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})"
-        :style="{
-          '--color-tweaked': colors.{{ hue }}[{{ tint }}],
-          '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ tint }}],
-        }">
-      <div class="color swatch" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
-        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
-      </div>
-    </td>
-  {%- endfor -%}
-</tr>
-{%- endfor %}
-</table>
-
-{% set chromaScaleBounds = [
-(0.08 / maxChroma) | number({maximumFractionDigits: 2}),
-(0.3 / maxChroma]) | number({maximumFractionDigits: 2}) -%}
-<div class="decorated-slider chroma-scale-slider wa-palette-{{ paletteId }}"
-:class="{ tweaked: chromaScale !== 1 }"
-style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};">
-  <wa-slider name="chroma-scale" ref="chromaScaleSlider"
-    v-model="chromaScale" value="1" step="0.01"
-    min="{{ chromaScaleBounds[0] }}" max="{{ chromaScaleBounds[1] }}"
-    @input="tweaking.chroma = true"
-    @change="tweaking.chroma = false">
-    <div slot="label">
-      Overall colorfulness
-      <wa-icon-button @click="chromaScale = 1" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
-    </div>
-  </wa-slider>
-  <div class="label-min">More muted</div>
-  <div class="label-max">More vibrant</div>
-</div>
-
-<h2>Used By</h2>
-
-<section class="index-grid">
-{% for page in collections.theme %}
-  {%- if page.data.palette == paletteId -%}
-    {% include "page-card.njk" %}
-  {%- endif -%}
-{% endfor %}
-</section>
-
-{% markdown %}
-## Color Contrast
-
-Web Awesome color scales are designed to guarantee certain contrast ratios,
-both per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum)
-as well as the emergent APCA specification _(planned)_,
-so you can ensure that text is both legible to all users, and legally conformant.
-
-### Level 1
-
-A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for large text and icons (AA).
-{% endmarkdown %}
-
-{% set difference = 40 %}
-{% set minContrast = 3 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `45`:
-
-{% endmarkdown %}
-
-{% set difference = 45 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-### Level 2
-
-A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for normal text (AA) and large text (AAA)
-{% endmarkdown %}
-
-{% set difference = 50 %}
-{% set minContrast = 4.5 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `55`:
-
-{% endmarkdown %}
-
-{% set difference = 55 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-### Level 3
-
-A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all text (AAA)
-{% endmarkdown %}
-
-{% set difference = 60 %}
-{% set minContrast = 7 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `65`:
-
-{% endmarkdown %}
-
-{% set difference = 65 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-## How to use this palette { #usage }
-
-If you are using a Web Awesome theme that uses this palette, it will already be included.
-To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
-
-{% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
-<wa-tab-group class="import-stylesheet-code">
-<wa-tab panel="html">In HTML</wa-tab>
-<wa-tab panel="css">In CSS</wa-tab>
-<wa-tab-panel name="html">
-
-Add the following code to the `<head>` of your page:
-```html { v-content:html="code.html.highlighted" }
-<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
-```
-</wa-tab-panel>
-<wa-tab-panel name="css">
-
-Add the following code at the top of your CSS file:
-```css { v-content:html="code.css.highlighted" }
-@import url('{% cdnUrl stylesheet %}');
-```
-</wa-tab-panel>
-</wa-tab-group>
-
-
-{% endmarkdown %}
-</div></div> {# end palette app #}
-{% endblock %}
-
-

docs/_layouts/patterns.njk

@@ -1,5 +0,0 @@
-{% extends '../_layouts/block.njk' %}
-
-{% block head %}
-<link href="/docs/patterns/patterns.css" rel="stylesheet">
-{% endblock %}

docs/_layouts/theme.njk

@@ -1,185 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-{# {% set forceTheme = page.fileSlug %} #}
-
-{% extends '../_includes/base.njk' %}
-
-{% block head %}
-<link href="{{ page.url }}../remix.css" rel="stylesheet">
-<script type="module" src="{{ page.url }}../edit/index.js"></script>
-{% endblock %}
-
-{% block header %}
-<script>
-if (location.pathname.endsWith('/custom/') && !location.search) {
-  location.href = "../edit/";
-}
-</script>
-<div id="theme-app" data-theme-id="{{ page.fileSlug }}">
-
-<iframe ref="preview" :src="'{{ page.url }}demo.html' + urlParams" src='{{ page.url }}demo.html' id="demo"></iframe>
-
-{% if page.fileSlug !== 'custom' %}
-<wa-details id="mix_and_match" class="wa-gap-m" :open="saved || unsavedChanges">
-  <h4 slot="summary" data-no-anchor data-no-outline id="remix">
-    <wa-icon name="arrows-rotate"></wa-icon>
-    Remix this theme
-    <wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="suffix" variant="regular"></wa-icon>
-    <wa-tooltip for="what-is-remixing">Customize this theme by changing its colors and/or remixing it with design elements from other themes!</wa-tooltip>
-  </h4>
-
-  <wa-select name="palette" label="Color palette" clearable v-model="theme.palette">
-    <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
-    <wa-option v-for="(palette, paletteId) in palettes" :label="palette.title" :value="paletteId === baseTheme.palette ? '' : paletteId">
-      <palette-card :palette="paletteId" size="small">
-        <template #extra>
-          <wa-badge v-if="paletteId === baseTheme.palette" variant="neutral" appearance="outlined">Theme default</wa-badge>
-        </template>
-      </palette-card>
-    </wa-option>
-  </wa-select>
-
-  <color-select :model-value="computed.brand" @update:model-value="value => theme.brand = value" label="Brand color"
-                :values="hues"></color-select>
-
-  <wa-select name="colors" class="theme-colors-select" label="Color contrast from…" value="" clearable v-model="theme.colors">
-    <wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
-    <template v-for="(themeMeta, themeId) in themes">
-      <wa-option v-if="themeId !== 'custom'" :label="themeMeta.title" :value="themeId === computed.colors ? '' : themeId">
-        <theme-card :theme="themeId" type="colors" :rest="{base: computed.base, palette: computed.palette, brand: computed.brand}" size="small">
-          <template #extra>
-          <wa-badge v-if="themeId === theme.base" variant="neutral" appearance="outlined">This theme</wa-badge>
-        </template>
-        </theme-card>
-      </wa-option>
-    </template>
-  </wa-select>
-
-  <wa-select name="typography" label="Typography from…" clearable v-model="theme.typography">
-    <wa-icon name="font-case" slot="prefix"></wa-icon>
-
-    <wa-option v-for="(themeMeta, themeId) in themes" :label="themeMeta.title" :value="themeId === theme.base ? '' : themeId">
-      <fonts-card :theme="themeId" size="small">
-        <template #extra>
-          <wa-badge v-if="themeId === theme.base" variant="neutral" appearance="outlined">This theme</wa-badge>
-        </template>
-      </fonts-card>
-    </wa-option>
-  </wa-select>
-</wa-details>
-{% endif %}
-<h2>Color</h2>
-
-<div class="index-grid">
-  {% if page.fileSlug === 'custom' %}
-    <palette-card :palette="computed.palette" subtitle="Color palette"></palette-card>
-  {% else %}
-    {% set themePage = page %}
-    {% set paletteURL = '/docs/palettes/' + palette + '/' %}
-    {% set page = paletteURL | getCollectionItemFromUrl %}
-    {% set pageSubtitle = "Default color palette" %}
-    {% include 'page-card.njk' %}
-    {% set page = themePage %}
-  {% endif %}
-  <wa-card class="wa-palette-{{ palette }}"          style="--header-background: var(--wa-color-{{ brand }})"
-          :class="`wa-palette-${computed.palette}`" :style="{'--header-background': palettes[computed.palette]?.colors[computed.brand]?.key}">
-    <div slot="header"></div>
-    <div class="page-name" v-content="capitalize(computed.brand)">{{ brand | capitalize }}</div>
-    <div class="wa-caption-s">{{ 'Brand color' if page.fileSlug === 'custom' else 'Default brand color' }}</div>
-  </wa-card>
-</div>
-{% endblock %}
-
-{% block afterContent %}
-
-<h2 id="usage">How to use this theme</h2>
-
-{% markdown %}
-You can import this theme from the Web Awesome CDN.
-
-{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
-
-<wa-tab-group class="import-stylesheet-code">
-<wa-tab panel="html">In HTML</wa-tab>
-<wa-tab panel="css">In CSS</wa-tab>
-<wa-tab-panel name="html">
-
-Add the following code to the `<head>` of your page:
-```html { v-content:html="code.html.highlighted" }
-<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
-```
-</wa-tab-panel>
-<wa-tab-panel name="css">
-
-Add the following code at the top of your CSS file:
-```css { v-content:html="code.css.highlighted" }
-@import url('{% cdnUrl stylesheet %}');
-```
-</wa-tab-panel>
-</wa-tab-group>
-
-## Dark mode
-
-To activate the dark color scheme of the theme on any element and its contents, apply the class `wa-dark` to it.
-This means you can use different color schemes throughout the page.
-Here, we use the default theme with a dark sidebar:
-
-```html
-<html>
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
-  </head>
-
-  <body>
-    <nav class="wa-dark">
-      <!-- dark-themed sidebar -->
-    </nav>
-
-    <!-- light-themed content -->
-  </body>
-</html>
-```
-
-You can apply the class to the `<html>` element on your page to activate the dark color scheme for the entire page.
-
-```html
-<html class="wa-dark">
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/{{ page.fileSlug }}.css" />
-    <!-- other links, scripts, and metadata -->
-  </head>
-  <body>
-    <!-- page content -->
-  </body>
-</html>
-```
-### Detecting Color Scheme Preference
-
-Web Awesome's themes have both light and dark styles built in.
-However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
-This should be done at the application level.
-
-As a best practice, to provide a dark theme in your app, you should:
-
-- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
-- Allow the user to override the setting in your app
-- Remember the user's preference and restore it on subsequent logins
-
-Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
-
-Assuming the user's preference is in a variable called `colorScheme` (values: `auto`, `light`, `dark`),
-you can use the following JS snippet to apply the `wa-dark` class to the `<html>` element accordingly:
-
-```js
-const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
-const applyDark = function (event = systemDark) {
-  const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
-  document.documentElement.classList.toggle('wa-dark', isDark);
-};
-systemDark.addEventListener('change', applyDark);
-applyDark();
-```
-
-</div> {# end theme app #}
-{% endmarkdown %}
-{% endblock %}

docs/_layouts/utility.njk

@@ -1,19 +0,0 @@
-{% extends '../_layouts/block.njk' %}
-
-{% block afterContent %}
-{% if file %}
-{% markdown %}
-## Opting In
-
-If you want to use this utility **only** without [all others](../), you can include the following CSS file from the Web Awesome CDN.
-
-{% set stylesheet = file %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-Want them all?
-Follow the [instructions on the Utilities overview page](../) to get all Web Awesome utilities.
-
-{% endmarkdown %}
-{% endif %}
-
-{% endblock %}

docs/_utils/anchor-headings.js

@@ -1,85 +0,0 @@
-import { parse } from 'node-html-parser';
-import slugify from 'slugify';
-import { v4 as uuid } from 'uuid';
-
-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
-      let selector = `:is(${options.headingSelector}):not([data-no-anchor], [data-no-anchor] *)`;
-      container.querySelectorAll(selector).forEach(heading => {
-        const hasAnchor = heading.querySelector('a');
-        const existingId = heading.getAttribute('id');
-        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());
-
-        if (hasAnchor) {
-          return;
-        }
-
-        let id = existingId;
-        if (!id) {
-          const slug = createId(clone.textContent ?? '') ?? uuid().slice(-12);
-          id = slug;
-          let suffix = 1;
-
-          // Make sure the slug is unique in the document
-          while (doc.getElementById(id) !== null) {
-            id = `${slug}-${++suffix}`;
-          }
-        }
-
-        // 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
-        if (!existingId) {
-          heading.setAttribute('id', id);
-        }
-        heading.classList.add('anchor-heading');
-        heading.appendChild(anchor);
-      });
-
-      return doc.toString();
-    });
-  };
-}

docs/_utils/code-examples.js

@@ -1,185 +0,0 @@
-import { parse } from 'node-html-parser';
-import { v4 as uuid } from 'uuid';
-
-const templates = {
-  old(pre, code, { open, buttons, edit }) {
-    const id = `code-example-${uuid().slice(-12)}`;
-    let preview = code.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();
-
-    return `
-      <div class="code-example ${open ? 'open' : ''}">
-        <div class="code-example-preview">
-          ${preview}
-        </div>
-        <div class="code-example-source" id="${id}">
-          ${pre.outerHTML}
-        </div>
-        ${
-          buttons
-            ? `
-            <div class="code-example-buttons">
-              <button
-                class="code-example-toggle"
-                type="button"
-                aria-expanded="${open ? 'true' : 'false'}"
-                aria-controls="${id}"
-              >
-                Code
-                <wa-icon name="chevron-down"></wa-icon>
-              </button>
-              ${
-                edit
-                  ? `
-                    <button class="code-example-pen" type="button">
-                      <wa-icon name="pen-to-square"></wa-icon>
-                      Edit
-                    </button>
-                  `
-                  : ''
-              }
-            `
-            : ''
-        }
-        </div>
-      </div>
-    `;
-  },
-  new(pre, code, { open, first, attributes }) {
-    attributes = {
-      open,
-      include: `link[rel=stylesheet][href^='/dist/']`,
-      ...attributes,
-    };
-
-    const attributesString = Object.entries(attributes)
-      .map(([key, value]) => {
-        if (value === true) {
-          return key;
-        }
-        if (value === false || value === null) {
-          return '';
-        }
-        return `${key}="${value}"`;
-      })
-      .join(' ');
-
-    let includes = '';
-    if (first) {
-      includes = `
-        <template class="wa-code-demo-include-isolated">
-          <script src="/dist/webawesome.loader.js" type="module"></script>
-        </template>`;
-    }
-
-    let preview = '';
-    if (attributes.viewport === undefined) {
-      // Slot in pre-rendered preview
-      preview = `<div style="display:contents" slot="preview">${code.textContent}</div>`;
-
-      // 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();
-    }
-
-    return `${includes}
-      <wa-code-demo ${attributesString}>
-        ${preview}
-        ${pre.outerHTML}
-      </wa-code-demo>
-    `;
-  },
-};
-
-/**
- * Eleventy plugin to turn `<code class="example">` blocks into live examples.
- */
-export function codeExamplesPlugin(eleventyConfig, options = {}) {
-  const defaultOptions = {
-    container: 'body',
-    defaultOpen: () => false,
-  };
-  options = { ...defaultOptions, ...options };
-
-  const stats = {
-    inputPaths: {},
-    outputPaths: {},
-  };
-
-  eleventyConfig.addTransform('code-examples', function (content) {
-    const { inputPath, outputPath } = this.page;
-
-    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 => {
-      stats.inputPaths[inputPath] ??= 0;
-      stats.outputPaths[outputPath] ??= 0;
-      stats.inputPaths[inputPath]++;
-      stats.outputPaths[outputPath]++;
-
-      const pre = code.closest('pre');
-      const first = stats.inputPaths[inputPath] === 1;
-
-      const localOptions = {
-        ...options,
-        first,
-
-        // Modifier defaults
-        edit: true,
-        buttons: true,
-        new: true, // comment this line to default back to the old demos
-        attributes: {},
-      };
-
-      for (const prop of ['new', 'open', 'buttons', 'edit']) {
-        if (code.classList.contains(prop)) {
-          localOptions[prop] = true;
-        } else if (code.classList.contains(`no-${prop}`)) {
-          localOptions[prop] = false;
-        }
-      }
-
-      for (const attribute of ['viewport', 'include']) {
-        if (code.hasAttribute(attribute)) {
-          localOptions.attributes[attribute] = code.getAttribute(attribute);
-          code.removeAttribute(attribute);
-        }
-      }
-
-      if (Object.keys(localOptions.attributes).length > 0) {
-        // attributes only work on the new syntax
-        localOptions.new = true;
-      }
-
-      if (localOptions.open === undefined) {
-        if (localOptions.defaultOpen === true) {
-          localOptions.open = localOptions.defaultOpen;
-        } else if (typeof localOptions.defaultOpen === 'function') {
-          localOptions.open = localOptions.defaultOpen(code, {
-            pre,
-            inputPathIndex: stats.inputPaths[inputPath],
-            outputPathIndex: stats.outputPaths[outputPath],
-          });
-        }
-      }
-
-      const template = localOptions.new ? 'new' : 'old';
-      const codeExample = parse(templates[template](pre, code, localOptions));
-
-      pre.replaceWith(codeExample);
-    });
-
-    return doc.toString();
-  });
-}

docs/_utils/copy-code.js

@@ -1,41 +0,0 @@
-import { parse } from 'node-html-parser';
-
-/**
- * Eleventy plugin to add copy buttons to code blocks.
- */
-export function copyCodePlugin(eleventyConfig, options = {}) {
-  options = {
-    container: 'body',
-    ...options,
-  };
-
-  let codeCount = 0;
-  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');
-      let preId = pre.getAttribute('id') || `code-block-${++codeCount}`;
-      let codeId = code.getAttribute('id') || `${preId}-inner`;
-
-      if (!code.getAttribute('id')) {
-        code.setAttribute('id', codeId);
-      }
-      if (!pre.getAttribute('id')) {
-        pre.setAttribute('id', preId);
-      }
-
-      // Add a copy button
-      pre.innerHTML += `<wa-icon-button href="#${preId}" class="block-link-icon" name="link"></wa-icon-button>
-        <wa-copy-button from="${codeId}" class="copy-button"></wa-copy-button>`;
-    });
-
-    return doc.toString();
-  });
-}

docs/_utils/filters.js

@@ -1,410 +0,0 @@
-import { parse } from 'path';
-
-export function stripExtension(string) {
-  return parse(string).name;
-}
-
-export function stripPrefix(content) {
-  return content.replace(/^wa-/, '');
-}
-
-// 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.
-export function trimPipes(content) {
-  return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
-}
-
-export function keys(obj) {
-  return Object.keys(obj);
-}
-
-export function log(firstArg, ...rest) {
-  console.log(firstArg, ...rest);
-  return firstArg;
-}
-
-function getCollection(name) {
-  // From https://github.com/11ty/eleventy/blob/d3d24ccddb804e6e14773501d8c4e07e2c4b9c2b/src/Filters/GetLocaleCollectionItem.js#L39-L43
-  return this.collections?.[name] || this.ctx?.collections?.[name] || this.context?.environments?.collections?.[name];
-}
-
-export function getCollectionItemFromUrl(url, collection) {
-  if (!url) {
-    return null;
-  }
-  collection ??= getCollection.call(this, 'all') || [];
-  return collection.find(item => item.url === url);
-}
-
-export function getTitleFromUrl(url, collection) {
-  const item = getCollectionItemFromUrl.call(this, url, collection);
-  return item?.data.title || '';
-}
-
-export function split(text, separator) {
-  return (text + '').split(separator).filter(Boolean);
-}
-
-export function ancestors(url, { withCurrent = false, withRoot = false } = {}) {
-  let ret = [];
-  let currentUrl = url;
-  let currentItem = getCollectionItemFromUrl.call(this, url);
-
-  if (!currentItem) {
-    // Might have eleventyExcludeFromCollections, jump to parent
-    let parentUrl = this.ctx.parentUrl;
-    if (parentUrl) {
-      url = parentUrl;
-    }
-  }
-
-  for (let item; (item = getCollectionItemFromUrl.call(this, url)); url = item.data.parentUrl) {
-    ret.unshift(item);
-  }
-
-  if (!withRoot && ret[0]?.page.url === '/') {
-    // Remove root
-    ret.shift();
-  }
-
-  if (!withCurrent && ret.at(-1)?.page.url === currentUrl) {
-    // Remove current page
-    ret.pop();
-  }
-
-  return ret;
-}
-
-export function isObject(value) {
-  return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-
-export function isList(value) {
-  return Array.isArray(value) || value instanceof Set;
-}
-
-/** Get an Array or Set */
-export function toList(value) {
-  return isList(value) ? value : [value];
-}
-
-/**
- * Convert any value to something that can be iterated over with a for key, value loop.
- * Arrays and sets will be converted to a Map of value -> undefined
- */
-export function dict(value) {
-  if (value instanceof Map || isObject(value)) {
-    return value;
-  }
-
-  let list = toList(value);
-  return new Map([...list].map(item => [item, undefined]));
-}
-
-export function deepValue(obj, key) {
-  key = Array.isArray(key) ? key : key.split('.');
-  return key.reduce((subObj, property) => subObj?.[property], obj);
-}
-
-export function number(value, options) {
-  if (typeof value !== 'number' && isNaN(value)) {
-    return value;
-  }
-
-  let lang = options?.lang ?? 'en';
-  if (options?.lang) {
-    delete options.lang;
-  }
-
-  if (!options || Object.keys(options).length === 0) {
-    options = { maximumSignificantDigits: 3 };
-  }
-
-  return Number(value).toLocaleString(lang, options);
-}
-
-export function isNumeric(value) {
-  return typeof value === 'number' || (typeof value === 'string' && !isNaN(value));
-}
-
-export function isString(value) {
-  return typeof value === 'string';
-}
-
-export function isEmpty(value) {
-  return value === null || value === undefined || value === '';
-}
-
-function compare(a, b) {
-  let isEmptyA = isEmpty(a);
-  let isEmptyB = isEmpty(b);
-
-  if (isEmptyA) {
-    if (isEmptyB) {
-      return 0;
-    } else {
-      return 1;
-    }
-  } else if (isEmptyB) {
-    return -1;
-  }
-
-  // Both strings, and at least one non-numeric
-  if (isNumeric(a) || isNumeric(b)) {
-    return a - b;
-  }
-
-  return (a + '').localeCompare(b);
-}
-
-/** Sort an array of objects by one or more of their properties */
-export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
-  let keys = Array.isArray(by) ? by : Object.keys(by);
-
-  return arr.sort((a, b) => {
-    let aValues = keys.map(key => deepValue(a, key) ?? by[key]);
-    let bValues = keys.map(key => deepValue(b, key) ?? by[key]);
-
-    for (let i = 0; i < aValues.length; i++) {
-      let aVal = aValues[i];
-      let bVal = bValues[i];
-      let result = compare(aVal, bVal);
-
-      // They are not equal in terms of comparison OR we're at the last key
-      if (result !== 0 || i === aValues.length - 1) {
-        return result;
-      }
-    }
-  });
-}
-
-/**
- * Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
- * @param {object[]} collection
- * @param { Object<string, string> | string[]} [options] Options object or array of tags to group by.
- * @param {string[] | true} [options.tags] Tags to group by. If true, groups by all tags.
- *                            If not provided/empty, defaults to grouping by page hierarchy, with any pages with more than 1 children becoming groups.
- * @param {string[]} [options.groups] The groups to use if only a subset or a specific order is desired. Defaults to `options.tags`.
- * @param {string[]} [options.titles] Any title overrides for groups.
- * @param {string | false} [options.other="Other"] The title to use for the "Other" group. If `false`, the "Other" group is removed..
- * @returns { Object.<string, object[]> } An object of group ids to arrays of page objects.
- */
-export function groupPages(collection, options = {}, page) {
-  if (!collection) {
-    console.error(`Empty collection passed to groupPages() to group by ${JSON.stringify(options)}`);
-  }
-
-  if (Array.isArray(options)) {
-    options = { tags: options };
-  }
-
-  let { tags, groups, titles = {}, other = 'Other' } = options;
-
-  if (groups === undefined && Array.isArray(tags)) {
-    groups = tags;
-  }
-
-  let grouping;
-
-  if (tags) {
-    grouping = {
-      isGroup: item => undefined,
-      getCandidateGroups: item => item.data.tags,
-      getGroupMeta: group => ({}),
-    };
-  } else {
-    grouping = {
-      isGroup: item => (item.data.children.length >= 2 ? item.page.url : undefined),
-      getCandidateGroups: item => {
-        let parentUrl = item.data.parentUrl;
-        if (page?.url === parentUrl) {
-          return [];
-        }
-        return [parentUrl];
-      },
-      getGroupMeta: group => {
-        let item = byUrl[group] || getCollectionItemFromUrl.call(this, group);
-        return {
-          title: item?.data.title,
-          url: group,
-          item,
-        };
-      },
-      sortGroups: groups => sort(groups.map(url => byUrl[url]).filter(Boolean)).map(item => item.page.url),
-    };
-  }
-
-  let byUrl = {};
-  let byParentUrl = {};
-
-  for (let item of collection) {
-    let url = item.page.url;
-    let parentUrl = item.data.parentUrl;
-
-    byUrl[url] = item;
-
-    if (parentUrl) {
-      byParentUrl[parentUrl] ??= [];
-      byParentUrl[parentUrl].push(item);
-    }
-  }
-
-  let urlToGroups = {};
-
-  for (let item of collection) {
-    let url = item.page.url;
-    let parentUrl = item.data.parentUrl;
-
-    if (grouping.isGroup(item)) {
-      continue;
-    }
-
-    let parentItem = byUrl[parentUrl];
-    if (parentItem && !grouping.isGroup(parentItem)) {
-      // Their parent is also here and is not a group
-      continue;
-    }
-
-    let candidateGroups = grouping.getCandidateGroups(item);
-
-    if (groups) {
-      candidateGroups = candidateGroups.filter(group => groups.includes(group));
-    }
-
-    urlToGroups[url] ??= [];
-
-    for (let group of candidateGroups) {
-      urlToGroups[url].push(group);
-    }
-  }
-
-  let ret = {};
-
-  for (let url in urlToGroups) {
-    let groups = urlToGroups[url];
-    let item = byUrl[url];
-
-    if (groups.length === 0) {
-      // Not filtered out but also not categorized
-      groups = ['other'];
-    }
-
-    for (let group of groups) {
-      ret[group] ??= [];
-      ret[group].push(item);
-
-      if (!ret[group].meta) {
-        if (group === 'other') {
-          ret[group].meta = { title: other };
-        } else {
-          ret[group].meta = grouping.getGroupMeta(group);
-          ret[group].meta.title = titles[group] ?? ret[group].meta.title ?? capitalize(group);
-        }
-      }
-    }
-  }
-
-  if (other === false) {
-    delete ret.other;
-  }
-
-  // Sort
-  let sortedGroups = groups ?? grouping.sortGroups?.(Object.keys(ret));
-
-  if (sortedGroups) {
-    ret = sortObject(ret, sortedGroups);
-  } else {
-    // At least make sure other is last
-    if (ret.other) {
-      let otherGroup = ret.other;
-      delete ret.other;
-      ret.other = otherGroup;
-    }
-  }
-
-  Object.defineProperty(ret, 'meta', {
-    value: {
-      groupCount: Object.keys(ret).length,
-    },
-    enumerable: false,
-  });
-
-  return ret;
-}
-
-/**
- * Sort an object by its keys
- * @param {*} obj
- * @param {function | string[]} order
- */
-function sortObject(obj, order) {
-  let ret = {};
-  let sortedKeys = Array.isArray(order) ? order : Object.keys(obj).sort(order);
-
-  for (let key of sortedKeys) {
-    if (key in obj) {
-      ret[key] = obj[key];
-    }
-  }
-
-  // Add any keys that weren't in the order
-  for (let key in obj) {
-    if (!(key in ret)) {
-      ret[key] = obj[key];
-    }
-  }
-
-  return ret;
-}
-
-function capitalize(str) {
-  str += '';
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-const IDENTITY = x => x;
-
-/**
- * Helper to print out one or more HTML attributes, especially conditional ones.
- * Usage in 11ty:
- * - Single attribute: `<foo{{ value | attr(name) }}>`
- * - Multiple attributes: `<foo{{ { name1: value1, name2: value2 } | attr }}>`
- *
- * @overload
- * @param {any} value - The attribute value If falsey, the attribute is not printed. If `true` the attribute is printed without a value.
- * @param {string} name - The name of the attribute
- *
- * @overload
- * @param {Object<string, any>} obj - Map of attribute names to values
- *
- * @returns {string} The attribute string. No `| safe` is needed.
- */
-export function attr(value, name) {
-  const safe = this?.env.filters.safe ?? IDENTITY;
-
-  if (arguments.length === 1 && value && typeof value === 'object') {
-    // Called with a single object argument of names to values
-    let ret = Object.entries(obj)
-      .map(([name, value]) => attr(value, name))
-      .join('');
-    return safe(ret);
-  }
-
-  if (!value) {
-    // false, "", null, undefined
-    return '';
-  }
-
-  let ret = ' ' + name + (value === true ? '' : `="${value}"`);
-
-  return safe(ret);
-}
-
-/**
- * Format an object as JSON, with formatting & indentation (unlike the default `dump` filter)
- * @param {*} value
- * @returns {string}
- */
-export function json(value) {
-  return JSON.stringify(value, null, 2);
-}

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('.wa-visually-hidden, [hidden], [aria-hidden="true"]').forEach(el => el.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/assets/components/scoped.js

@@ -1,172 +0,0 @@
-/**
- * Low-level utility to encapsulate a bit of HTML (mainly to apply certain stylesheets to it without them leaking to the rest of the page)
- * Usage: <wa-scoped><template><!-- your HTML here --></template></wa-scoped>
- */
-import { discover } from '/dist/webawesome.js';
-
-const imports = new Set();
-const fontFaceRules = new Set();
-
-export default class WaScoped extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-
-    this.observer = new MutationObserver(records => this.render(records));
-    this.observer.observe(this, { childList: true, subtree: true, characterData: true });
-  }
-
-  connectedCallback() {
-    this.render();
-    this.ownerDocument.documentElement.addEventListener('wa-color-scheme-change', e =>
-      this.#applyDarkMode(e.detail.dark),
-    );
-  }
-
-  render(records) {
-    this.observer.takeRecords();
-    this.observer.disconnect();
-
-    this.shadowRoot.innerHTML = '';
-
-    // To avoid mutating this.childNodes while iterating over it
-    let nodes = [];
-
-    for (let template of this.childNodes) {
-      if (!(template instanceof HTMLTemplateElement)) {
-        if (template.nodeType === Node.ELEMENT_NODE) {
-          console.warn('<wa-scoped> can only contain <template> elements');
-        }
-        continue;
-      }
-
-      if (template.content.childNodes.length > 0) {
-        nodes.push(template.content.cloneNode(true));
-      } else if (template.childNodes.length > 0) {
-        // Fake template, suck its children out of the light DOM
-        nodes.push(...template.childNodes);
-      }
-    }
-
-    this.shadowRoot.append(...nodes);
-
-    this.#fixStyles();
-    this.#applyDarkMode();
-
-    discover(this.shadowRoot);
-
-    this.observer.observe(this, { childList: true, subtree: true, characterData: true });
-  }
-
-  #applyDarkMode(isDark = getComputedStyle(this).colorScheme === 'dark') {
-    // Hack to make dark mode work
-    // NOTE If any child nodes actually have .wa-dark, this will override it
-    for (let node of this.shadowRoot.children) {
-      node.classList.toggle('wa-dark', isDark);
-    }
-    this.classList.toggle('wa-dark', isDark);
-  }
-
-  /**
-   * @font-face does not work in shadow DOM in Chrome & FF, as of March 2025 https://issues.chromium.org/issues/41085401
-   * This works around this issue by traversing the shadow DOM CSS looking
-   * for @font-face rules or CSS imports to known font providers and copies them to the main document
-   */
-  async #fixStyles() {
-    let styleElements = [...this.shadowRoot.querySelectorAll('link[rel="stylesheet"], style')];
-
-    let loadStates = styleElements.map(element => {
-      try {
-        if (element.sheet?.cssRules) {
-          // Already loaded
-          return Promise.resolve(element.sheet);
-        }
-      } catch (e) {
-        // CORS
-        return Promise.resolve(null);
-      }
-
-      return new Promise((resolve, reject) => {
-        element.addEventListener('load', e => resolve(element.sheet));
-        element.addEventListener('error', e => reject(null));
-      });
-    });
-
-    await Promise.allSettled(loadStates);
-
-    let fontRules = findFontFaceRules(...this.shadowRoot.styleSheets);
-
-    if (!fontRules.length) {
-      return;
-    }
-
-    let doc = this.ownerDocument;
-    // Why not adoptedStyleSheets? Can't have @import in those yet
-    let id = `wa-scoped-hoisted-fonts`;
-    let style = doc.head.querySelector('style#' + id);
-    if (!style) {
-      style = Object.assign(doc.createElement('style'), { id, textContent: ' ' });
-      doc.head.append(style);
-    }
-    let sheet = style.sheet;
-
-    for (let rule of fontRules) {
-      let cssText = rule.cssText;
-      if (rule.type === CSSRule.FONT_FACE_RULE) {
-        if (fontFaceRules.has(cssText)) {
-          continue;
-        }
-        fontFaceRules.add(cssText);
-        sheet.insertRule(cssText);
-      } else if (rule.type === CSSRule.IMPORT_RULE) {
-        if (imports.has(rule.href)) {
-          continue;
-        }
-        imports.add(rule.href);
-        sheet.insertRule(cssText, 0);
-      }
-    }
-  }
-
-  static observedAttributes = [];
-}
-
-customElements.define('wa-scoped', WaScoped);
-
-export const WEB_FONT_HOSTS = [
-  'fonts.googleapis.com',
-  'fonts.gstatic.com',
-  'use.typekit.net',
-  'fonts.adobe.com',
-  'kit.fontawesome.com',
-  'pro.fontawesome.com',
-  'cdn.materialdesignicons.com',
-];
-
-function findFontFaceRules(...stylesheets) {
-  let ret = [];
-
-  for (let sheet of stylesheets) {
-    let rules;
-    try {
-      rules = sheet.cssRules;
-    } catch (e) {
-      // CORS
-      continue;
-    }
-
-    for (let rule of rules) {
-      if (rule.type === CSSRule.FONT_FACE_RULE) {
-        ret.push(rule);
-      } else if (rule.type === CSSRule.IMPORT_RULE) {
-        if (WEB_FONT_HOSTS.some(host => rule.href.includes(host))) {
-          ret.push(rule);
-        } else if (rule.styleSheet) {
-          ret.push(...findFontFaceRules(rule.styleSheet));
-        }
-      }
-    }
-  }
-
-  return ret;
-}

docs/assets/data/colors.js

@@ -1,47 +0,0 @@
-/**
- * Data related to palettes and colors.
- * Must work in both browser and Node.js
- */
-
-export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];
-
-export const hueRanges = {
-  red: { min: 5, max: 35 }, // 30
-  orange: { min: 35, max: 60 }, // 25
-  yellow: { min: 60, max: 112 }, // 45
-  green: { min: 112, max: 170 }, // 55
-  cyan: { min: 170, max: 220 }, // 50
-  blue: { min: 220, max: 265 }, // 45
-  indigo: { min: 265, max: 290 }, // 25
-  purple: { min: 290, max: 320 }, // 30
-  pink: { min: 320, max: 365 }, // 45
-};
-
-export const hues = Object.keys(hueRanges);
-export const allHues = [...hues, 'gray'];
-
-export const moreHue = {
-  red: 'Redder',
-  orange: 'More orange', // https://www.reddit.com/r/grammar/comments/u9n0uo/is_it_oranger_or_more_orange/
-  yellow: 'Yellower',
-  green: 'Greener',
-  cyan: 'More cyan',
-  blue: 'Bluer',
-  indigo: 'More indigo',
-  pink: 'Pinker',
-};
-
-/**
- * Max gray chroma (% of chroma of undertone) per hue
- */
-export const maxGrayChroma = {
-  red: 0.2,
-  orange: 0.2,
-  yellow: 0.25,
-  green: 0.25,
-  cyan: 0.3,
-  blue: 0.35,
-  indigo: 0.35,
-  purple: 0.3,
-  pink: 0.25,
-};

docs/assets/data/fonts.js

@@ -1,65 +0,0 @@
-import { deepEntries } from '../scripts/util/deep.js';
-import { themeConfig } from './theming.js';
-import themes from '/assets/data/themes.js';
-
-/**
- * Map of font pairings (body + heading) to the first theme that uses them.
- */
-export const pairings = {};
-
-// NOTE Do not use Symbols, we want these to be enumerable when used as keys
-export const sameAs = { body: '$body' };
-
-export const fontNames = {
-  'system-ui': 'OS Default',
-  'ui-serif': 'OS Default Serif',
-  'ui-sans-serif': 'OS Default Sans Serif',
-  'ui-monospace': 'OS Default Code Font',
-  'ui-monospace': 'OS Default Code Font',
-};
-
-export function defaultTitle(fonts) {
-  let { body, heading = sameAs.body } = fonts;
-  let names = [body];
-
-  if (heading !== sameAs.body) {
-    names.unshift(heading);
-  }
-
-  return names.map(name => fontNames[name] ?? name).join(' • ');
-}
-
-for (let id in themes) {
-  let theme = themes[id];
-  let { fonts } = theme;
-
-  if (fonts) {
-    let { body, heading = sameAs.body } = fonts;
-
-    pairings[body] ??= {};
-    pairings[body][heading] ??= {
-      id, // First theme that uses this pairing
-      ids: new Set([id]), // All themes that use this pairing
-      url: themeConfig.typography.url(id), // Stylesheet URL
-      fonts,
-      get title() {
-        return defaultTitle(this.fonts);
-      },
-    };
-    pairings[body][heading].ids.add(id);
-  }
-}
-
-export const pairingsEntries = deepEntries(pairings, {
-  descend(value, key, parent, path) {
-    if (value?.fonts) {
-      return false; // Don't recurse into pairing objects
-    }
-  },
-  filter(value, key, parent, path) {
-    // Only keep 2 levels (body → heading → pairing)
-    return path.length === 1;
-  },
-});
-
-export const pairingsList = pairingsEntries.map(arg => arg.at(-1));

docs/assets/data/icons.js

@@ -1,7 +0,0 @@
-export const iconLibraries = {
-  default: {
-    title: 'Font Awesome',
-    family: ['classic', 'sharp', 'duotone', 'sharp-duotone'],
-    style: ['solid', 'regular', 'light', 'thin'],
-  },
-};

docs/assets/data/index.js

@@ -1,6 +0,0 @@
-export * from './colors.js';
-// export * from './fonts.js';
-export * from './icons.js';
-export * from './theming.js';
-
-export const cdnUrl = globalThis.document ? document.documentElement.dataset.cdnUrl : '/dist/';

docs/assets/data/palettes.js.njk

@@ -1,57 +0,0 @@
----
-layout: null
-permalink: '/assets/data/palettes.js'
-eleventyExcludeFromCollections: true
----
-import Color from 'https://colorjs.io/dist/color.js';
-
-const palettes = {
-{%- for palette in collections.palette | sort %}
-{%- if not palette.data.unlisted %}
-  {% set paletteId = palette.fileSlug -%}
-  {%- set colors = palettes[paletteId] -%}
-  '{{ paletteId }}': {
-    id: '{{ paletteId }}',
-    title: '{{ palette.data.title }}',
-    colors: {
-      {% for hue, tints in colors -%}
-        '{{ hue }}': {
-          {% for tint, value in tints -%}
-            {%- if tint != '05' -%}
-              '{{ '05' if tint == '5' else tint }}': '{{ value | safe }}',
-            {%- endif %}
-          {% endfor %}
-
-          get key() {
-            return this[this.maxChromaTint];
-          }
-        },
-      {% endfor -%} // end colors
-    }
-  }, // end palette
-{%- endif -%}
-{% endfor %}
-};
-
-// Create Color instances for each color
-for (let palette in palettes) {
-  for (let hue in palettes[palette].colors) {
-    let scale = palettes[palette].colors[hue];
-
-    for (let tint in scale) {
-      let color = scale[tint];
-      try {
-        if (Array.isArray(color)) {
-          scale[tint] = new Color('oklch', color);
-        }
-        else if (typeof color === 'string' && isNaN(color)) {
-          scale[tint] = new Color(color);
-        }
-      } catch (e) {
-        console.error(e);
-      }
-    }
-  }
-}
-
-export default palettes;

docs/assets/data/themes.js.njk

@@ -1,27 +0,0 @@
----
-layout: null
-permalink: '/assets/data/themes.js'
-eleventyExcludeFromCollections: true
----
-
-export default {
-{%- for theme in collections.theme | sort %}
-{%- if not theme.data.unlisted and theme.fileSlug !== 'edit' and theme.fileSlug !== 'custom' %}
-  {% set themeId = theme.fileSlug -%}
-  {%- set themeMeta = themes[themeId] -%}
-  '{{ themeId }}': {
-    id: '{{ themeId }}',
-    title: '{{ theme.data.title }}',
-    palette: '{{ themeMeta.palette }}',
-    brand: '{{ themeMeta.brand }}',
-    isPro: {{ theme.data.isPro or 'pro' in theme.data.tags }},
-    fonts: {{ (theme.data.fonts | json or 'null') | safe }},
-    icons: {{ (themeMeta.icons | json or 'null') | safe }},
-    rounding: {{ themeMeta.rounding }},
-    spacing: {{ themeMeta.spacing }},
-    borderWidth: {{ themeMeta.borderWidth }},
-    dimension: {{ (theme.data.dimension or themeMeta.dimension or false) | json | safe }},
-  },
-{%- endif %}
-{% endfor %}
-};

docs/assets/data/theming.js

@@ -1,118 +0,0 @@
-import { deepEach, isPlainObject } from '../scripts/util/deep.js';
-
-/**
- * Data related to themes, theme remixing
- * Must work in both browser and Node.js
- */
-export const cdnUrl = globalThis.document ? document.documentElement.dataset.cdnUrl : '/dist/';
-
-// This should eventually replace all uses of `urls` and `themeParams`
-export const themeConfig = {
-  base: { url: id => `styles/themes/${id}.css`, default: 'default' },
-  colors: {
-    url: id => `styles/themes/${id}/color.css`,
-    docs: '/docs/themes/',
-    icon: 'palette',
-    default() {
-      return this.base;
-    },
-  },
-  palette: {
-    url: id => `styles/color/${id}.css`,
-    docs: '/docs/palette/',
-    icon: 'swatchbook',
-    default(baseTheme) {
-      return baseTheme?.palette;
-    },
-  },
-  brand: {
-    url: id => `styles/brand/${id}.css`,
-    icon: 'droplet',
-    default(baseTheme) {
-      return baseTheme?.brand;
-    },
-  },
-  typography: {
-    url: id => `styles/themes/${id}/typography.css`,
-    docs: '/docs/themes/',
-    icon: 'font-case',
-    default() {
-      return this.base;
-    },
-  },
-  icon: {
-    library: {
-      cssProperty: '--wa-icon-library',
-      default: 'default',
-    },
-    family: {
-      cssProperty: '--wa-icon-family',
-      default(baseTheme) {
-        return baseTheme?.icon?.family ?? 'classic';
-      },
-    },
-    style: {
-      cssProperty: '--wa-icon-variant',
-      default(baseTheme) {
-        return baseTheme?.icon?.style ?? 'solid';
-      },
-    },
-  },
-  rounding: {
-    cssProperty: '--wa-border-radius-scale',
-    default(baseTheme) {
-      return baseTheme?.rounding ?? 1;
-    },
-  },
-  spacing: {
-    cssProperty: '--wa-space-scale',
-    default(baseTheme) {
-      return baseTheme?.spacing ?? 1;
-    },
-  },
-  borderWidth: {
-    cssProperty: '--wa-border-width-scale',
-    default(baseTheme) {
-      return baseTheme?.borderWidth ?? 1;
-    },
-  },
-  dimensionality: {
-    url: id => `styles/themes/${id}/dimension.css`,
-    docs: '/docs/themes/',
-    icon: 'cube',
-    default() {
-      return this.base;
-    },
-  },
-};
-
-export function getPath(key) {
-  if (key.startsWith('icon-')) {
-    // TODO detect what the nested prefixes are from theme config metadata
-    return ['icon', ...key.slice(5)];
-  }
-}
-
-// Shallow remixing params in correct order
-// base must be first. brand needs to come after palette, which needs to come after colors.
-export const themeParams = Object.keys(themeConfig).filter(aspect => themeConfig[aspect].url);
-
-export const urls = themeParams.reduce((acc, aspect) => {
-  acc[aspect] = themeConfig[aspect].url;
-  return acc;
-}, {});
-
-export const themeDefaults = { ...themeConfig };
-
-deepEach(themeDefaults, (value, key, parent, path) => {
-  if (isPlainObject(value)) {
-    // Replace w/ default value or shallow clone
-    return value.default ?? { ...value };
-  }
-});
-
-export const selectors = {
-  palette: id =>
-    [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${id}`].join(',\n'),
-  theme: id => [':where(:root)', ':host', `.wa-theme-${id}`].join(',\n'),
-};

docs/assets/scripts/filter.js

@@ -1,35 +0,0 @@
-function debounce(func, wait) {
-  let timeout;
-  return function (...args) {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => func.apply(this, args), wait);
-  };
-}
-
-function updateResults(input) {
-  const filter = input.value.toLowerCase().trim();
-  let filtered = Boolean(filter);
-
-  for (let grid of document.querySelectorAll('.index-grid')) {
-    grid.classList.toggle('filtered', filtered);
-
-    for (let item of grid.querySelectorAll('a:has(> wa-card)')) {
-      let isMatch = true;
-
-      if (filter) {
-        const content = item.textContent.toLowerCase() + ' ' + (item.getAttribute('data-keywords') + ' ');
-        isMatch = content.includes(filter);
-      }
-
-      item.hidden = !isMatch;
-    }
-  }
-}
-
-const debouncedUpdateResults = debounce(updateResults, 300);
-
-document.documentElement.addEventListener('input', e => {
-  if (e.target?.matches('#block-filter wa-input')) {
-    debouncedUpdateResults(e.target);
-  }
-});

docs/assets/scripts/my.js

@@ -1,172 +0,0 @@
-const my = (globalThis.my = new EventTarget());
-export default my;
-
-class PersistedArray extends Array {
-  constructor(key) {
-    super();
-    this.key = key;
-
-    if (this.key) {
-      this.fromLocalStorage();
-    }
-
-    // Items were updated in another tab
-    addEventListener('storage', event => {
-      if (event.key === this.key || !event.key) {
-        this.fromLocalStorage();
-      }
-    });
-  }
-
-  /**
-   * Update data from local storage
-   */
-  fromLocalStorage() {
-    // First, empty the array
-    this.splice(0, this.length);
-
-    // Then, fill it with the data from local storage
-    let saved = localStorage[this.key] ? JSON.parse(localStorage[this.key]) : null;
-
-    if (saved) {
-      this.push(...saved);
-    }
-  }
-
-  /**
-   * Write data to local storage
-   */
-  toLocalStorage() {
-    if (this.length > 0) {
-      localStorage[this.key] = JSON.stringify(this);
-    } else {
-      delete localStorage[this.key];
-    }
-  }
-}
-
-class SavedEntities extends EventTarget {
-  constructor({ key, type, url }) {
-    super();
-    this.key = key;
-    this.type = type;
-    this.url = url ?? type + 's';
-    this.saved = new PersistedArray(key);
-
-    let all = this;
-    this.entityPrototype = {
-      type: this.type,
-      baseUrl: this.baseUrl,
-
-      get url() {
-        return all.getURL(this);
-      },
-
-      get parentUrl() {
-        return all.getParentURL(this);
-      },
-
-      delete() {
-        all.delete(this);
-      },
-    };
-  }
-
-  getUid() {
-    if (this.saved.length === 0) {
-      return 1;
-    }
-
-    let uids = new Set(this.saved.map(p => p.uid));
-
-    // Find first available number
-    for (let i = 1; i <= this.saved.length + 1; i++) {
-      if (!uids.has(i)) {
-        return i;
-      }
-    }
-  }
-
-  get baseUrl() {
-    return `/docs/${this.url}/`;
-  }
-
-  getURL(entity) {
-    return this.getParentURL(entity) + entity.search;
-  }
-
-  getParentURL(entity) {
-    return this.baseUrl + entity.id + '/';
-  }
-
-  getObject(entity) {
-    let ret = Object.create(this.entityPrototype, Object.getOwnPropertyDescriptors(entity));
-    // debugger;
-    return ret;
-  }
-
-  /**
-   * Save an entity, either by updating its existing entry or creating a new one
-   * @param {object} entity
-   */
-  save(entity) {
-    if (!entity.uid) {
-      // First time saving
-      entity.uid = this.getUid();
-    }
-
-    let savedPalettes = this.saved;
-    let existingIndex = entity.uid ? this.saved.findIndex(p => p.uid === entity.uid) : -1;
-    let newIndex = existingIndex > -1 ? existingIndex : savedPalettes.length;
-
-    this.saved.splice(newIndex, 1, entity);
-
-    this.saved.toLocalStorage();
-
-    this.dispatchEvent(new CustomEvent('save', { detail: this.getObject(entity) }));
-
-    return entity;
-  }
-
-  delete(entity) {
-    let count = this.saved.length;
-
-    if (count === 0 || !entity?.uid) {
-      // No stored entities or this entity has not been saved
-      return;
-    }
-
-    // TODO improve UX of this
-    if (!confirm(`Are you sure you want to delete ${this.type} “${entity.title}”?`)) {
-      return;
-    }
-
-    for (let index; (index = this.saved.findIndex(p => p.uid === entity.uid)) > -1; ) {
-      this.saved.splice(index, 1);
-    }
-
-    if (this.saved.length === count) {
-      // Nothing was removed
-      return;
-    }
-
-    this.saved.toLocalStorage();
-
-    this.dispatchEvent(new CustomEvent('delete', { detail: this.getObject(entity) }));
-  }
-
-  dispatchEvent(event) {
-    super.dispatchEvent(event);
-    my.dispatchEvent(event);
-  }
-}
-
-my.palettes = new SavedEntities({
-  key: 'savedPalettes',
-  type: 'palette',
-});
-
-my.themes = new SavedEntities({
-  key: 'savedThemes',
-  type: 'theme',
-});

docs/assets/scripts/preset-theme-picker.js

@@ -1,52 +0,0 @@
-import { domChange, nextFrame, ThemeAspect } from './theme-picker.js';
-
-const presetTheme = new ThemeAspect({
-  defaultValue: 'default',
-  key: 'presetTheme',
-  picker: 'wa-select.preset-theme-selector',
-
-  applyChange(options = {}) {
-    const oldStylesheets = [...document.querySelectorAll('#theme-stylesheet')];
-    const oldStylesheet = oldStylesheets.pop();
-
-    if (oldStylesheets.length > 0) {
-      // Remove all but the last one
-      for (let stylesheet of oldStylesheets) {
-        stylesheet.remove();
-      }
-    }
-
-    const href = `/dist/styles/themes/${this.value}.css`;
-
-    if (!oldStylesheet || oldStylesheet.getAttribute('href') !== href) {
-      const newStylesheet = document.createElement('link');
-      Object.assign(newStylesheet, { href, id: 'theme-stylesheet', rel: 'preload', as: 'style' });
-      oldStylesheet.after(newStylesheet);
-
-      newStylesheet.addEventListener(
-        'load',
-        e => {
-          domChange(
-            async instant => {
-              // Swap stylesheets
-              newStylesheet.rel = 'stylesheet';
-
-              if (instant) {
-                // If no VT, delay by 1 frame to make it smoother
-                await nextFrame();
-              }
-
-              oldStylesheet.remove();
-            },
-            { behavior: 'smooth', ...options },
-          );
-        },
-        { once: true },
-      );
-    }
-  },
-});
-
-window.addEventListener('turbo:render', e => {
-  presetTheme.applyChange({ behavior: 'instant' });
-});

docs/assets/scripts/prism.js

@@ -1,8 +0,0 @@
-globalThis.Prism = globalThis.Prism || {};
-globalThis.Prism.manual = true;
-
-await import('./prism-downloaded.js');
-
-Prism.plugins.customClass.prefix('code-');
-
-export default Prism;

docs/assets/scripts/scroll.js

@@ -1,33 +0,0 @@
-// Smooth links
-document.addEventListener('click', event => {
-  const link = event.target.closest('a');
-  if (!link || link.getAttribute('data-smooth-link') === 'off') {
-    return;
-  }
-
-  const id = (link.hash ?? '').substr(1);
-
-  // Only handle smooth scroll if there's a hash and the link points to the current page
-  if (id && link.pathname === window.location.pathname) {
-    const target = document.getElementById(id);
-    const headerHeight = document.querySelector('wa-page > header').clientHeight;
-
-    if (target) {
-      event.preventDefault();
-      window.scroll({
-        top: target.offsetTop - headerHeight,
-        behavior: 'smooth',
-      });
-      history.pushState(undefined, undefined, `#${id}`);
-    }
-  }
-});
-
-// Scroll classes
-function updateScrollClass() {
-  document.body.classList.toggle('scrolled-down', window.scrollY >= 10);
-}
-
-window.addEventListener('scroll', updateScrollClass);
-window.addEventListener('turbo:render', updateScrollClass);
-updateScrollClass();

docs/assets/scripts/sidebar-tweaks.js

@@ -1,120 +0,0 @@
-import my from '/assets/scripts/my.js';
-
-const sidebar = {
-  addChild(a, parentA) {
-    let parentLi = parentA.closest('li');
-    let ul = parentLi.querySelector(':scope > ul');
-    ul ??= parentLi.appendChild(document.createElement('ul'));
-    let li = document.createElement('li');
-    li.append(a);
-    ul.appendChild(li);
-
-    // If we are on the same page, update the current link
-    let url = location.href.replace(/#.+$/, '');
-    if (url.startsWith(a.href)) {
-      // Remove existing current
-      for (let current of document.querySelectorAll('#sidebar a.current')) {
-        current.classList.remove('current');
-      }
-
-      a.classList.add('current');
-    }
-
-    return a;
-  },
-
-  removeLink(a) {
-    if (!a || !a.isConnected) {
-      // Link doesn't exist or is already removed
-      return;
-    }
-
-    let li = a?.closest('li');
-    let ul = li?.closest('ul');
-    let parentA = ul?.closest('li')?.querySelector(':scope > a');
-
-    li?.remove();
-    if (ul?.children.length === 0) {
-      ul.remove();
-    }
-
-    if (a.classList.contains('current')) {
-      // If the deleted palette was the current one, the current one is now the parent
-      parentA.classList.add('current');
-    }
-  },
-
-  findEntity(entity) {
-    return document.querySelector(`#sidebar a[href^="${entity.baseUrl}"][data-uid="${entity.uid}"]`);
-  },
-
-  renderEntity(entity) {
-    let { url, parentUrl } = entity;
-
-    // Find parent
-    let parentA = document.querySelector(`#sidebar a[href="${parentUrl}"]`);
-    let parentLi = parentA?.closest('li');
-
-    if (!parentLi) {
-      throw new Error(`Cannot find parent url ${parentUrl}`);
-    }
-
-    // Find existing
-    let a = this.findEntity(entity);
-    let alreadyExisted = !!a;
-
-    a ??= document.createElement('a');
-
-    a.textContent = entity.title;
-    a.href = url;
-
-    if (!alreadyExisted) {
-      a.dataset.uid = entity.uid;
-
-      a = sidebar.addChild(a, parentA);
-
-      // This is mainly to port Pro badges
-      let badges = Array.from(parentLi.querySelectorAll(':scope > wa-badge'), badge => badge.cloneNode(true));
-
-      let append = [...badges];
-
-      if (entity.delete) {
-        let deleteButton = Object.assign(document.createElement('wa-icon-button'), {
-          name: 'trash',
-          label: 'Delete',
-          className: 'delete',
-        });
-        deleteButton.addEventListener('click', () => entity.delete());
-        append.push(deleteButton);
-      }
-
-      if (append.length > 0) {
-        a.closest('li').append(' ', ...append);
-      }
-    }
-  },
-
-  render() {
-    for (let type in my) {
-      let controller = my[type];
-
-      if (!controller.saved) {
-        continue;
-      }
-
-      for (let entity of controller.saved) {
-        let object = controller.getObject(entity);
-        this.renderEntity(object);
-      }
-    }
-  },
-};
-
-globalThis.sidebar = sidebar;
-
-// Update sidebar when my saved stuff changes
-my.addEventListener('delete', e => sidebar.removeLink(sidebar.findEntity(e.detail)));
-my.addEventListener('save', e => sidebar.renderEntity(e.detail));
-
-sidebar.render();
-window.addEventListener('turbo:render', () => sidebar.render());

docs/assets/scripts/sync-iframe-height.js

@@ -1,37 +0,0 @@
-/**
- * Sync iframe height with its content page (for same-origin iframes)
- * NOT CURRENTLY USED ANYWHERE
- */
-for (let iframe of document.querySelectorAll('iframe')) {
-  if (iframe.contentDocument) {
-    // Already loaded
-    syncIframeHeight(iframe);
-  }
-
-  iframe.onload = () => {
-    console.log('iframe loaded');
-    if (iframe.contentDocument) {
-      // Same origin
-      iframe.contentWindow.iframe = iframe;
-      syncIframeHeight(iframe);
-      const resizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-          if (entry.target === iframe.contentDocument.body) {
-            syncIframeHeight(iframe);
-          }
-        }
-      });
-
-      resizeObserver.observe(iframe.contentDocument.body);
-      window.addEventListener('turbo:render', syncIframeHeight(iframe));
-    }
-  };
-}
-
-function syncIframeHeight(iframe) {
-  iframe.style.height = '0px';
-
-  requestAnimationFrame(() => {
-    iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
-  });
-}

docs/assets/scripts/theme-picker.js

@@ -1,111 +0,0 @@
-import { domChange } from './util/dom-change.js';
-export { domChange };
-
-export function nextFrame() {
-  return new Promise(resolve => requestAnimationFrame(resolve));
-}
-
-export class ThemeAspect {
-  constructor(options) {
-    Object.assign(this, options);
-    this.set();
-
-    // Update when local storage changes.
-    // That way changes in one window will propagate to others (including iframes).
-    window.addEventListener('storage', event => {
-      if (event.key === this.key) {
-        this.set();
-      }
-    });
-
-    // Listen for selections
-    document.addEventListener('change', event => {
-      const picker = event.target.closest(this.picker);
-      if (picker) {
-        this.set(picker.value);
-      }
-    });
-
-    ['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
-      document.addEventListener(eventName, e => {
-        const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
-        if (newElement) {
-          this.syncUI(newElement);
-        }
-      });
-    });
-  }
-
-  get() {
-    return localStorage.getItem(this.key) ?? this.defaultValue;
-  }
-
-  computed = {};
-
-  get computedValue() {
-    if (this.value in this.computed) {
-      return this.computed[this.value];
-    }
-
-    return this.value;
-  }
-
-  set(value = this.get()) {
-    if (value === this.value) {
-      return;
-    }
-
-    this.value = value;
-
-    if (this.value === this.defaultValue) {
-      localStorage.removeItem(this.key);
-    } else {
-      localStorage.setItem(this.key, this.value);
-    }
-
-    this.applyChange();
-    this.syncUI();
-  }
-
-  syncUI(container = document) {
-    for (let picker of container.querySelectorAll(this.picker)) {
-      picker.setAttribute('value', this.value);
-      picker.value = this.value;
-    }
-  }
-}
-
-const colorScheme = new ThemeAspect({
-  defaultValue: 'auto',
-  key: 'colorScheme',
-  picker: 'wa-select.color-scheme-selector',
-
-  computed: {
-    get auto() {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    },
-  },
-
-  applyChange() {
-    // Toggle the dark mode class
-    domChange(() => {
-      let dark = this.computedValue === 'dark';
-      document.documentElement.classList.toggle(`wa-dark`, dark);
-      document.documentElement.dispatchEvent(new CustomEvent('wa-color-scheme-change', { detail: { dark } }));
-    });
-  },
-});
-
-// Update the color scheme when the preference changes
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => colorScheme.set());
-
-// Toggle color scheme with backslash
-document.addEventListener('keydown', event => {
-  if (
-    event.key === '\\' &&
-    !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
-  ) {
-    event.preventDefault();
-    colorScheme.set(colorScheme.get() === 'dark' ? 'light' : 'dark');
-  }
-});

docs/assets/scripts/tweak.js

@@ -1,6 +0,0 @@
-/**
- * Get import code for remixed themes and tweaked palettes.
- */
-export { cdnUrl, hueRanges, hues, selectors, tints, urls } from '../data/index.js';
-export { default as Permalink } from './permalink.js';
-export { getThemeCode } from './tweak/code.js';

docs/assets/scripts/tweak/code.js

@@ -1,91 +0,0 @@
-/**
- * Get import code for remixed themes and tweaked palettes.
- */
-import { selectors, themeConfig } from '../../data/theming.js';
-import { deepEach, deepGet } from '/assets/scripts/util/deep.js';
-
-export function cssImport(url, options = {}) {
-  let { language = 'html', cdnUrl = '/dist/', attributes } = options;
-  url = cdnUrl + url;
-
-  if (language === 'css') {
-    return `@import url('${url}');`;
-  } else {
-    attributes = attributes ? ` ${attributes}` : '';
-    return `<link rel="stylesheet" href="${url}"${attributes} />`;
-  }
-}
-
-export function cssLiteral(value, options = {}) {
-  let { language = 'html' } = options;
-
-  if (language === 'css') {
-    return value;
-  } else {
-    return `<style${options.attributes ?? ''}>\n${value}\n</style>`;
-  }
-}
-
-/**
- * Get code for a theme, including tweaks
- * @param {*} theme
- * @param {*} options
- * @returns
- */
-export function getThemeCode(theme, options = {}) {
-  let urls = [];
-  let declarations = [];
-  let id = options.id ?? theme.base ?? 'default';
-
-  deepEach(themeConfig, (config, aspect, obj, path) => {
-    if (!config?.default) {
-      // We're not in a config object
-      return;
-    }
-
-    let value = deepGet(theme, [...path, aspect]);
-
-    if (!value && value !== 0) {
-      return;
-    }
-
-    if (config.url) {
-      // This is implemented by pulling in different CSS files
-      urls.push(config.url(value));
-    } else {
-      if (config.cssProperty) {
-        declarations.push(`${config.cssProperty}: ${value};`);
-      }
-    }
-  });
-
-  let ret = urls.map(url => cssImport(url, options)).join('\n');
-
-  if (declarations.length > 0) {
-    let cssCode = cssRule(selectors.theme(id), declarations, options);
-
-    if (theme.icon?.kit) {
-      let faKitAttribute = ` data-fa-kit-code="${theme.icon.kit}"`;
-      options.attributes ??= '';
-      options.attributes += faKitAttribute;
-      cssCode =
-        `/* Note: To use Font Awesome Pro icons,\n   set ${faKitAttribute} on the <link> (or any other) element */\n\n` +
-        cssCode;
-    }
-
-    cssCode = cssLiteral(cssCode, options);
-
-    if (ret) {
-      ret += '\n\n' + cssCode;
-    }
-  }
-
-  return ret;
-}
-
-export function cssRule(selector, declarations, { indent = '  ' } = {}) {
-  selector = Array.isArray(selector) ? selector.flat().join(',\n') : selector;
-  declarations = Array.isArray(declarations) ? declarations.flat() : declarations;
-  declarations = declarations.map(declaration => indent + declaration.trim()).join('\n');
-  return `${selector} {\n${declarations.trimEnd()}\n}`;
-}

docs/assets/scripts/tweak/util.js

@@ -1,36 +0,0 @@
-export function normalizeAngles(angles) {
-  // First, normalize
-  angles = angles.map(h => ((h % 360) + 360) % 360);
-
-  // Remove top and bottom 25% and find average
-  let averageHue =
-    angles
-      .toSorted((a, b) => a - b)
-      .slice(angles.length / 4, -angles.length / 4)
-      .reduce((a, b) => a + b, 0) / angles.length;
-
-  for (let i = 0; i < angles.length; i++) {
-    let h = angles[i];
-    let prevHue = angles[i - 1];
-    let delta = h - prevHue;
-
-    if (Math.abs(delta) > 180) {
-      let equivalent = [h + 360, h - 360];
-      // Offset hue to minimize difference in the direction that brings it closer to the average
-      let delta = h - averageHue;
-
-      if (Math.abs(equivalent[0] - prevHue) <= Math.abs(equivalent[1] - prevHue)) {
-        angles[i] = equivalent[0];
-      } else {
-        angles[i] = equivalent[1];
-      }
-    }
-  }
-
-  return angles;
-}
-
-export function subtractAngles(θ1, θ2) {
-  let [a, b] = normalizeAngles([θ1, θ2]);
-  return a - b;
-}

docs/assets/scripts/util/array.js

@@ -1,17 +0,0 @@
-/**
- * Picks a random element from an array.
- * @param {any[]} arr
- */
-export function sample(arr) {
-  if (!Array.isArray(arr)) {
-    return arr;
-  }
-
-  if (arr.length < 2) {
-    return arr[0];
-  }
-
-  let index = Math.floor(Math.random() * arr.length);
-
-  return arr[index];
-}

docs/assets/scripts/util/deep.js

@@ -1,180 +0,0 @@
-/**
- * @typedef { string | number | Symbol } Property
- * @typedef { (value: any, key: Property, parent: object, path: Property[]) => any } EachCallback
- */
-
-export function isPlainObject(obj) {
-  return isObject(obj, 'Object');
-}
-
-export function isObject(obj, type) {
-  if (!obj || typeof obj !== 'object') {
-    return false;
-  }
-
-  let proto = Object.getPrototypeOf(obj);
-  return proto.constructor?.name === type;
-}
-
-export function deepMerge(target, source, options = {}) {
-  let {
-    emptyValues = [undefined],
-    containers = ['Object', 'EventTarget'],
-    isContainer = value => containers.some(type => isObject(value, type)),
-  } = options;
-
-  if (isContainer(target) && isContainer(source)) {
-    for (let key in source) {
-      if (key in target && isContainer(target[key]) && isContainer(source[key])) {
-        target[key] = deepMerge(target[key], source[key], options);
-      } else if (!emptyValues.includes(source[key])) {
-        target[key] = source[key];
-      }
-    }
-
-    return target;
-  }
-
-  return target ?? source;
-}
-
-/**
- * Iterate over a deep array, recursively for plain objects
- * @param { any } obj The object to iterate over. Can be an array or a plain object, or even a primitive value.
- * @param { EachCallback } callback. value is === parent[key]
- * @param { object } [parentObj] The parent object of the current value Mainly used internally to facilitate recursion.
- * @param { Property } [key] The key of the current value. Mainly used internally to facilitate recursion.
- * @param { Property[] } [path] Any existing path (not including the key). Mainly used internally to facilitate recursion.
- */
-export function deepEach(obj, callback, parentObj, key, path = []) {
-  if (key !== undefined) {
-    let ret = callback(obj, key, parentObj, path);
-
-    if (ret !== undefined) {
-      if (ret === false) {
-        // Do not descend further
-        return;
-      }
-
-      // Overwrite value
-      parentObj[key] = ret;
-      obj = ret;
-    }
-  }
-
-  let newPath = key !== undefined ? [...path, key] : path;
-
-  if (Array.isArray(obj)) {
-    for (let i = 0; i < obj.length; i++) {
-      deepEach(obj[i], callback, obj, i, newPath);
-    }
-  } else if (isPlainObject(obj)) {
-    for (let key in obj) {
-      deepEach(obj[key], callback, obj, key, newPath);
-    }
-  }
-}
-
-/**
- * Get a value from a deeply nested object
- * @param {*} obj
- * @param {PropertyPath} path
- * @returns
- */
-export function deepGet(obj, path) {
-  if (path.length === 0) {
-    return obj;
-  }
-
-  let ret = obj;
-
-  for (let key of path) {
-    if (ret === undefined) {
-      return undefined;
-    }
-
-    ret = ret[key];
-  }
-
-  return ret;
-}
-
-/**
- * Set a value in a deep object, creating object literals as needed
- * @param { * } obj
- * @param { Property[] } path
- * @param { any } value
- */
-export function deepSet(obj, path, value) {
-  if (path.length === 0) {
-    return;
-  }
-
-  let key = path.pop();
-
-  let ret = path.reduce((acc, property) => {
-    if (acc[property] === undefined) {
-      acc[property] = {};
-    }
-
-    return acc[property];
-  }, obj);
-
-  ret[key] = value;
-}
-
-export function deepClone(obj) {
-  if (!obj) {
-    return obj;
-  }
-
-  let ret = obj;
-
-  if (Array.isArray(obj)) {
-    ret = obj.map(item => deepClone(item));
-  } else if (isPlainObject(obj)) {
-    ret = { ...obj };
-
-    for (let key in obj) {
-      ret[key] = deepClone(obj[key]);
-    }
-  }
-
-  return ret;
-}
-
-/**
- * Like Object.entries, but for deeply nested objects.
- * For shallow objects the output is the same as Object.entries.
- * @param {*} obj
- * @param { object } options
- * @param { EachCallback } each - If this returns false, the entry is not added to the result and the recursion is stopped.
- * @param { EachCallback } filter - If this returns false, the entry is not added to the result.
- * @param { EachCallback } descend - If this returns false, recursion is stopped.
- * @returns {any[][]}
- */
-export function deepEntries(obj, options = {}) {
-  let { each, filter, descend } = options;
-  let entries = [];
-
-  deepEach(obj, (value, key, parent, path) => {
-    let ret = each?.(value, key, parent, path);
-
-    if (ret !== false) {
-      let included = filter?.(value, key, parent, path) ?? true;
-
-      if (included) {
-        entries.push([...path, key, value]);
-      }
-
-      let descendRet = descend?.(value, key, parent, path);
-      if (descendRet === false) {
-        return false; // Stop recursion
-      }
-    }
-
-    return ret;
-  });
-
-  return entries;
-}

docs/assets/scripts/util/dom-change.js

@@ -1,39 +0,0 @@
-let initialPageLoadComplete = document.readyState === 'complete';
-
-if (!initialPageLoadComplete) {
-  window.addEventListener('load', () => {
-    initialPageLoadComplete = true;
-  });
-}
-
-/**
- * Helper for performing a DOM change using a view transition, wherever supported and reduced motion is not desired.
- * @param {function} fn - Function to perform the DOM change. If async, must resolve when the change is complete.
- * @param {object} [options] - Options for the transition
- * @param {'smooth' | 'instant'} [options.behavior] - Transition behavior. Defaults to 'smooth'. 'instant' will skip the transition.
- * @param {boolean} [options.ignoreInitialLoad] - If true, will skip the transition on initial page load. Defaults to true.
- */
-export function domChange(fn, { behavior = 'smooth', ignoreInitialLoad = true } = {}) {
-  const canUseViewTransitions =
-    document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-  // Skip transitions on initial page load
-  if (!initialPageLoadComplete && ignoreInitialLoad) {
-    fn(false);
-    return null;
-  }
-
-  if (canUseViewTransitions && behavior === 'smooth') {
-    const transition = document.startViewTransition(() => {
-      fn(true);
-      // Wait a brief delay before finishing the transition to prevent jumpiness
-      return new Promise(resolve => setTimeout(resolve, 200));
-    });
-    return transition;
-  } else {
-    fn(false);
-    return null;
-  }
-}
-
-export default domChange;

docs/assets/scripts/util/string.js

@@ -1,42 +0,0 @@
-/**
- * Make the first letter of a string uppercase
- * @param {*} str
- * @returns
- */
-export function capitalize(str) {
-  str += '';
-  return str[0].toUpperCase() + str.slice(1);
-}
-
-/**
- * Convert a readable string to a slug.
- * @param {*} str - Input string. If argument is not a string, it will be stringified.
- * @returns {string} - The slugified string
- */
-export function slugify(str) {
-  return (str + '')
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '') // Convert accented letters to ASCII
-    .replace(/[^\w\s-]/g, '') // Remove remaining non-ASCII characters
-    .trim()
-    .replace(/\s+/g, '-') // Convert whitespace to hyphens
-    .toLowerCase();
-}
-
-/**
- * Convert a string to camel case.
- * @param {string} str - The string to convert.
- * @returns {string} The camel case string.
- */
-export function camelCase(str) {
-  return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-}
-
-/**
- * Convert a string to kebab case.
- * @param {string} str - The string to convert.
- * @returns {string} The kebab case string.
- */
-export function kebabCase(str) {
-  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
-}

docs/assets/vue/components/color-select.js

@@ -1,78 +0,0 @@
-import { capitalize } from '../../scripts/util/string.js';
-
-const template = `
-    <wa-select class="color-select" name="brand" :label="label" :value="modelValue"  @input="$emit('update:modelValue', $event.target.value)"
-    :style="{'--color': getColor(modelValue)}">
-      <template v-for="values, group in computedGroups">
-        <template v-if="group">
-          <wa-divider v-if="group !== firstGroup"></wa-divider>
-          <small>{{ group }}</small>
-        </template>
-        <wa-option v-if="values?.length" v-for="value of values" :label="getLabel(value)" :value="value" :style="{'--color': getColor(value)}" v-html="getContent?.(value) ?? getLabel(value)"></wa-option>
-      </template>
-      <slot></slot>
-    </wa-select>
-  `;
-
-export default {
-  props: {
-    modelValue: String,
-    label: String,
-    getLabel: {
-      type: Function,
-      default: capitalize,
-    },
-    getContent: {
-      type: Function,
-    },
-    getColor: {
-      type: Function,
-      default: value => `var(--wa-color-${value})`,
-    },
-    values: {
-      type: Array,
-      default: [],
-    },
-    groups: {
-      type: Object,
-    },
-  },
-  emits: ['update:modelValue', 'input'],
-  data() {
-    return {};
-  },
-  computed: {
-    computedGroups() {
-      let ret = {};
-
-      if (this.values?.length) {
-        ret[''] = this.values;
-      }
-
-      if (this.groups) {
-        for (let group in this.groups) {
-          if (this.groups[group]?.length) {
-            ret[group] = this.groups[group];
-          }
-        }
-      }
-
-      return ret;
-    },
-
-    firstGroup() {
-      return Object.keys(this.computedGroups)[0];
-    },
-  },
-
-  methods: {
-    capitalize,
-    handleInput(e) {
-      this.$emit('input', this.modelValue);
-    },
-  },
-  template,
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};

docs/assets/vue/components/editable-text.js

@@ -1,86 +0,0 @@
-import inputMixin from '../mixins/input.js';
-
-const template = `
-<span class="editable-text">
-<template v-if="isEditing">
-  <input ref="input" class="wa-size-s" :aria-label="label" :value="value" @input="handleInput" @keydown.enter="done" @keydown.esc="cancel" @blur="handleBlur" />
-  <wa-icon-button v-if="blur !== 'done'" name="check" label="Done editing" @click="done"></wa-icon-button>
-</template>
-<template v-else>
-  <span class="text" ref="wrapper" @focus="edit" @click="edit" tabindex="0">{{ value }}</span>
-  <wa-icon-button name="pencil" :label="'Edit ' + label" @click="edit"></wa-icon-button>
-</template>
-</span>
-`;
-
-export default {
-  mixins: [inputMixin],
-  props: {
-    label: {
-      type: String,
-      default: 'Rename',
-    },
-    blur: {
-      type: String,
-      validator(value) {
-        return ['', 'done', 'cancel'].includes(value);
-      },
-    },
-  },
-  emits: ['update:modelValue', 'submit'],
-  data() {
-    return {
-      previousValue: undefined,
-      isEditing: false,
-    };
-  },
-  computed: {},
-
-  methods: {
-    edit(event) {
-      if (this.isEditing) {
-        return;
-      }
-
-      event.stopPropagation();
-
-      this.isEditing = true;
-      this.previousValue = this.value;
-
-      this.$nextTick(() => {
-        this.$refs.input.focus();
-        this.$refs.input.select();
-      });
-    },
-    done(event) {
-      if (!this.isEditing) {
-        return;
-      }
-
-      event.stopPropagation();
-
-      this.isEditing = false;
-
-      if (!this.previousValue || this.previousValue !== this.value) {
-        this.$emit('submit', this.value);
-      }
-    },
-    cancel(event) {
-      if (!this.isEditing) {
-        return;
-      }
-
-      event.stopPropagation();
-
-      this.isEditing = false;
-      this.value = this.previousValue;
-    },
-    handleBlur(event) {
-      this.done(event);
-    },
-  },
-  template,
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};

docs/assets/vue/components/fonts-card.js

@@ -1,132 +0,0 @@
-import themes from '../../data/themes.js';
-import PageCard from './page-card.js';
-import { defaultTitle, pairings, sameAs } from '/assets/data/fonts.js';
-import { themeConfig } from '/assets/data/theming.js';
-import { cssImport, getThemeCode } from '/assets/scripts/tweak/code.js';
-
-const template = `
-  <page-card class="fonts-card" :info="computedPairing">
-    <template #icon>
-      <wa-scoped slot="header" class="fonts-icon-host" inert :key="html">
-        <template v-html="html"></template>
-        <template>
-          <link rel="stylesheet" href="/dist/styles/native/content.css">
-          <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-          <div class="fonts-icon" role="presentation">
-            <h2>When my six o'clock alarm buzzes, I require a pot of good java.</h2>
-            <p>By quarter past seven, I've jotted hazy musings in a flax-bound notebook, sipping lukewarm espresso.</p>
-          </div>
-        </template>
-      </wa-scoped>
-    </template>
-    <slot></slot>
-    <template #extra>
-      <slot name="extra" />
-    </template>
-  </page-card>
-`;
-
-export default {
-  props: {
-    theme: String,
-    src: String,
-    fonts: Object,
-    pairing: Object,
-  },
-
-  data() {
-    return {};
-  },
-
-  computed: {
-    content() {
-      let pairingTitle = this.computedPairing.title;
-      // let themeTitle = this.themeId ? `As seen in ${this.themeMeta.title}` : '';
-
-      if (this.title) {
-        return { title: this.title, subtitle: this.subtitle ?? pairingTitle };
-      } else {
-        return { title: pairingTitle, subtitle: this.subtitle };
-      }
-    },
-
-    url() {
-      let ret = this.src ?? this.pairing?.url;
-
-      if (!ret && this.theme) {
-        return themeConfig.typography.url(this.theme);
-      }
-
-      return ret;
-    },
-
-    themeId() {
-      return this.theme ?? this.pairing?.id;
-    },
-
-    themeMeta() {
-      return themes[this.themeId] ?? {};
-    },
-
-    computedFonts() {
-      let ret = this.fonts ?? this.pairing?.fonts ?? this.themeMeta?.fonts;
-      let defaults = themes.default.fonts;
-      return Object.assign({}, defaults, { ...ret });
-    },
-
-    computedPairing() {
-      let ret;
-
-      if (this.pairing) {
-        ret = { ...this.pairing };
-      } else {
-        // Get from theme
-        let fonts = this.computedFonts;
-        let { body, heading = sameAs.body } = fonts;
-        let pairing = pairings[body]?.[heading];
-        ret = Object.assign({ fonts }, pairing);
-      }
-
-      ret.url = this.url;
-      ret.title ??= defaultTitle(fonts);
-      return ret;
-    },
-
-    computed() {
-      let ret = { fonts: this.computedFonts };
-
-      for (let key in ret.fonts) {
-        if (ret.fonts[key] === sameAs.body) {
-          ret.fonts[key] = ret.fonts.body;
-        }
-      }
-
-      ret.pairing = this.computedPairing;
-      ret.theme = this.themeId;
-      ret.url = this.url;
-
-      return ret;
-    },
-
-    html() {
-      let { id, url } = this.computedPairing;
-
-      if (id) {
-        let theme = { typography: id };
-
-        return getThemeCode(theme, { id, language: 'html' });
-      } else {
-        return cssImport(url, { language: 'html' });
-      }
-    },
-  },
-
-  template,
-  components: {
-    PageCard,
-  },
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};

docs/assets/vue/components/icons-card.js

@@ -1,175 +0,0 @@
-import { sample } from '../../scripts/util/array.js';
-import { capitalize } from '../../scripts/util/string.js';
-import PageCard from './page-card.js';
-import { iconLibraries } from '/assets/data/icons.js';
-
-const iconNames = [
-  'user',
-  'paper-plane',
-  'face-laugh',
-  'pen-to-square',
-  'trash',
-  'cart-shopping',
-  'link',
-  'sun',
-  'bookmark',
-  'sparkles',
-  'thumbs-up',
-  'gear',
-];
-const brands = new Set(['web-awesome', 'font-awesome']);
-const ICON_GRID = { columns: 6, rows: 2 };
-const TOTAL_ICONS = ICON_GRID.columns * ICON_GRID.rows;
-
-const template = `
-	<page-card class="icons-card" :class="'icons-' + type + '-card'" :pro="$slots.default ? false : iconsMeta.isPro" :info="iconsMeta">
-    <template #icon>
-      <div slot="header" class="icons-icon" :class="'icons-' + type + '-icon'" :style="{ '--columns': ICON_GRID.columns }">
-        <template v-for="icon of icons">
-          <wa-icon v-bind="icon"></wa-icon>
-        </template>
-      </div>
-    </template>
-    <slot></slot>
-	</page-card>
-`;
-
-const defaultDefaults = {
-  library: 'default',
-  family: 'classic',
-  style: 'solid',
-};
-
-export default {
-  props: {
-    library: String,
-    family: String,
-    style: String,
-    defaults: Object,
-    type: {
-      type: String,
-      validate(value) {
-        return ['library', 'family', 'style'].includes(value);
-      },
-    },
-    vary: {
-      type: [Array, String],
-      validate(value) {
-        if (Array.isArray(value)) {
-          return value.every(v => ['family', 'style'].includes(v));
-        }
-
-        return ['family', 'style'].includes(value);
-      },
-      default() {
-        return [];
-      },
-    },
-  },
-
-  data() {
-    return {};
-  },
-
-  created() {
-    Object.assign(this, { iconNames, brands, ICON_GRID });
-  },
-
-  computed: {
-    computedLibrary() {
-      return this.library ?? 'default';
-    },
-
-    libraryMeta() {
-      return iconLibraries[this.computedLibrary] ?? {};
-    },
-
-    defaultTitle() {
-      let titles = {};
-      for (let key in this.computed) {
-        let value = this.computed[key];
-
-        if (key === 'library') {
-          titles[key] = iconLibraries[value].title;
-        }
-
-        titles[key] ??= capitalize(value);
-      }
-
-      if (this.type) {
-        return titles[this.type];
-      } else {
-        return titles.library + ' ' + titles.family + ' • ' + titles.style;
-      }
-    },
-
-    icons() {
-      let { family, style } = this.computed;
-      let library = this.libraryMeta;
-      let vary = Array.isArray(this.vary) ? this.vary : [this.vary];
-
-      let ret = [];
-
-      if (vary.length > 0) {
-        for (let param of vary) {
-          let allValues = library[param];
-          let random = (allValues.random ??= []);
-
-          while (random.length < TOTAL_ICONS) {
-            random.push(sample(allValues));
-          }
-        }
-      }
-
-      while (ret.length < TOTAL_ICONS) {
-        ret.push(
-          ...iconNames.map((name, i) => {
-            let index = ret.length + i;
-
-            return {
-              library: this.computedLibrary,
-              name,
-              family: !this.family && vary.includes('family') ? library.family.random[index] : family,
-              variant: !this.style && vary.includes('style') ? library.style.random[index] : style,
-            };
-          }),
-        );
-      }
-
-      return ret.slice(0, TOTAL_ICONS);
-    },
-
-    computedDefaults() {
-      return Object.assign({}, defaultDefaults, this.defaults);
-    },
-
-    computed() {
-      let { library, family, style } = this;
-      let ret = { library, family, style };
-
-      for (let key in this.computedDefaults) {
-        if (!ret[key]) {
-          ret[key] = this.computedDefaults[key];
-        }
-      }
-
-      return ret;
-    },
-
-    iconsMeta() {
-      return { title: this.defaultTitle };
-    },
-  },
-
-  methods: {
-    capitalize,
-  },
-
-  template,
-  components: {
-    PageCard,
-  },
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};

docs/assets/vue/components/index.js

@@ -1,13 +0,0 @@
-export { default as ColorSelect } from './color-select.js';
-export { default as EditableText } from './editable-text.js';
-export { default as FontsCard } from './fonts-card.js';
-export { default as IconsCard } from './icons-card.js';
-export { default as InfoTip } from './info-tip.js';
-export { default as PageCard } from './page-card.js';
-export { default as PaletteCard } from './palette-card.js';
-export { default as SwatchSelect } from './swatch-select.js';
-export { default as ThemeCard } from './theme-card.js';
-export { default as UiPanelContainer } from './ui-panel-container.js';
-export { default as UiPanel } from './ui-panel.js';
-export { default as UiScrollable } from './ui-scrollable.js';
-export { default as UiSlider } from './ui-slider.js';

docs/assets/vue/components/info-tip.js

@@ -1,39 +0,0 @@
-const template = `
-	<slot>
-  		<wa-icon :slot class="info-tip-default-trigger" :id="id" name="circle-question" variant="regular" tabindex="0"></wa-icon>
-	</slot>
-	<wa-tooltip :slot :for="id" ref="tooltip"><slot name="content">{{ text }}</slot></wa-tooltip>
-  `;
-
-let maxUid = 0;
-
-export default {
-  props: {
-    slot: String,
-    text: String,
-  },
-  data() {
-    let uid = ++maxUid;
-    return { uid, id: 'info-tip-' + uid };
-  },
-  mounted() {
-    let tooltip = this.$refs.tooltip;
-    if (tooltip) {
-      // Find trigger
-      let trigger = tooltip.previousElementSibling;
-      if (trigger) {
-        if (trigger.id) {
-          // Already has id
-          this.id = trigger.id;
-        } else {
-          trigger.id = this.id;
-        }
-      }
-    }
-  },
-  computed: {},
-  template,
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};

docs/assets/vue/components/page-card.js

@@ -1,83 +0,0 @@
-/**
- * Generic component for displaying a (possibly interactive) card that represents a page
- * For more specific use cases check out theme-card, icons-card, etc.
- */
-export const ICON_PLACEHOLDER = `
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 7C1 3.68629 3.68629 1 7 1H43C46.3137 1 49 3.68629 49 7V43C49 46.3137 46.3137 49 43 49H7C3.68629 49 1 46.3137 1 43V7Z" stroke="var(--wa-color-surface-border)" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 6"/>
-<path d="M14.1566 18.7199L21.5367 16.7424C22.6036 16.4565 23.7003 17.0896 23.9862 18.1566L26.8463 28.8306C27.1322 29.8975 26.499 30.9942 25.4321 31.2801L18.052 33.2576C16.985 33.5435 15.8884 32.9103 15.6025 31.8434L12.7424 21.1694C12.4565 20.1024 13.0897 19.0057 14.1566 18.7199Z" stroke="var(--wa-color-neutral-border-normal)" stroke-width="2"/>
-<path d="M33.8449 16.3273H26.2045C23.9953 16.3273 22.2045 18.1181 22.2045 20.3273V31.3778C22.2045 33.587 23.9953 35.3778 26.2045 35.3778H33.8449C36.0541 35.3778 37.8449 33.587 37.8449 31.3778V20.3273C37.8449 18.1181 36.0541 16.3273 33.8449 16.3273Z" fill="var(--wa-color-neutral-border-normal)" stroke="var(--wa-color-neutral-fill-quiet)" stroke-width="2"/>
-</svg>`;
-
-const template = `
-<wa-card with-header class="page-card" :aria-disabled="disabled ? 'true' : null" :inert="disabled"
-         @click="handleClick" @keyup.enter="handleClick"  @keyup.space="handleClick"
-         :role="action ? 'button' : null" :tabindex="action? 0 : null">
-  <slot name="icon" slot="header">
-    <div slot="header" v-html="icon || ICON_PLACEHOLDER"></div>
-  </slot>
-
-  <div class="page-name">
-    <div>
-      <slot>
-        {{ content.title }}
-        <wa-badge class="pro" v-if="pro">PRO</wa-badge>
-        <div v-if="content.subtitle" class="wa-caption-m">{{ content.subtitle }}</div>
-      </slot>
-    </div>
-    <slot name="extra"></slot>
-    <wa-icon v-if="action" name="angle-right" class="angle-right" variant="regular"></wa-icon>
-  </div>
-</wa-card>
-`;
-
-export default {
-  props: {
-    title: String,
-    subtitle: String,
-    info: Object,
-    icon: String,
-    pro: Boolean,
-    disabled: Boolean,
-    action: Function,
-  },
-
-  data() {
-    return {};
-  },
-
-  created() {
-    Object.assign(this, { ICON_PLACEHOLDER });
-  },
-
-  computed: {
-    content() {
-      let defaultTitle = this.info?.title ?? {};
-
-      if (this.title) {
-        return { title: this.title, subtitle: this.subtitle ?? defaultTitle };
-      } else {
-        return { title: defaultTitle, subtitle: this.subtitle };
-      }
-    },
-  },
-
-  methods: {
-    handleClick(event) {
-      if (this.disabled) {
-        event.stopImmediatePropagation();
-        return;
-      }
-
-      if (this.action) {
-        this.action(event);
-      }
-    },
-  },
-
-  template,
-  components: {},
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};

docs/assets/vue/components/palette-card.js

@@ -1,63 +0,0 @@
-import palettes from '../../data/palettes.js';
-import PageCard from './page-card.js';
-import { hues } from '/assets/data/index.js';
-
-// TODO import from data.js once available
-const allHues = [...hues, 'gray'];
-
-const template = `
-	<page-card class="palette-card" :pro="$slots.default ? false : paletteMeta.isPro" :info="paletteMeta">
-    <template #icon>
-      <wa-scoped slot="header" class="palette-icon-host">
-        <template>
-          <link rel="stylesheet" :href="'/dist/styles/color/' + palette + '.css'">
-          <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-          <div class="palette-icon" style="--hues: {{ hues|length }}; --suffixes: {{ suffixes|length }}">
-            <template v-for="(hue, hueIndex) of hues">
-              <div class="swatch" v-for="(suffix, suffixIndex) of suffixes"
-                  :data-hue="hue" :data-suffix="suffix"
-                  :style="{
-                    '--color': 'var(--wa-color-' + hue + suffix + ')',
-                    gridColumn: hueIndex + 1,
-                    gridRow: suffixIndex + 1
-                  }">&nbsp;</div>
-            </template>
-          </div>
-        </template>
-      </wa-scoped>
-    </template>
-    <slot></slot>
-    <template #extra>
-      <slot name="extra" />
-    </template>
-	</page-card>
-`;
-
-export default {
-  props: {
-    palette: String,
-  },
-
-  data() {
-    return {};
-  },
-
-  created() {
-    Object.assign(this, { hues: allHues, suffixes: ['-80', '', '-20'] });
-  },
-
-  computed: {
-    paletteMeta() {
-      return palettes[this.palette] ?? {};
-    },
-  },
-
-  template,
-  components: {
-    PageCard,
-  },
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};

docs/assets/vue/components/panel.css

@@ -1,167 +0,0 @@
-.sidebar.panel-container {
-  position: relative;
-  display: flex;
-  flex-flow: column;
-  gap: 0;
-  padding: 0;
-  width: 32ch;
-  overflow: hidden;
-  scrollbar-width: thin;
-}
-
-.panel {
-  /* Remove the uniform spacing used in wa-details */
-  --spacing: 0;
-  /* Specify value to manually set spacing where needed */
-  --panel-spacing: var(--wa-space-2xl);
-  --panel-background: var(--wa-color-surface-default);
-
-  display: flex;
-  flex-flow: column;
-  max-height: 100%;
-  margin-bottom: 0;
-  position: relative;
-  background: var(--panel-background);
-  border: none;
-  transition:
-    translate var(--wa-transition-slow) allow-discrete,
-    opacity var(--wa-transition-slow) 50ms allow-discrete;
-  /* Ensure horizontal scrollbar isn't visible when translate takes effect */
-  overflow-x: hidden !important;
-
-  @starting-style {
-    display: block;
-  }
-
-  .panel-header {
-    flex-direction: row-reverse;
-    justify-content: start;
-    gap: var(--wa-space-xs);
-    cursor: pointer;
-    background: var(--panel-background);
-    color: var(--wa-color-text-normal);
-    padding-block-end: var(--panel-spacing);
-    padding-inline: var(--panel-spacing);
-    transition: inherit;
-    transition-property: all;
-    margin-block: 0;
-    font-size: inherit;
-
-    [data-step='0'] &,
-    .previous & {
-      padding-block-start: var(--panel-spacing);
-    }
-
-    .back-icon {
-      vertical-align: -0.15em;
-      margin-inline-end: var(--wa-space-xs);
-      font-size: var(--wa-font-size-m);
-      transition: transform var(--wa-transition-normal) var(--wa-transition-easing);
-    }
-
-    &:hover .back-icon {
-      transform: translateX(-0.25em);
-    }
-
-    label {
-      pointer-events: none;
-      font: inherit;
-      color: inherit;
-    }
-  }
-
-  .panel-content {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-flow: column;
-    gap: var(--panel-spacing);
-    padding-block-end: var(--panel-spacing);
-    padding-inline: var(--panel-spacing);
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-block-end: 0;
-  }
-
-  &:not(.open) {
-    padding: 0;
-
-    &:not(.previous, .next) {
-      /* Hide all but the immediately preceding or following steps */
-      display: none;
-    }
-
-    &.next {
-      height: 0;
-      overflow: hidden;
-    }
-
-    &.next {
-      opacity: 0;
-    }
-
-    &.next {
-      translate: 100% 0%;
-    }
-
-    .panel-header {
-      font-size: var(--wa-font-size-s);
-      margin: 0;
-    }
-
-    .panel-content {
-      opacity: 0;
-      pointer-events: none;
-      content-visibility: hidden;
-      padding: 0;
-    }
-  }
-
-  &.open {
-    flex: 1;
-    opacity: 1;
-
-    .panel-header {
-      font-size: var(--wa-font-size-l);
-
-      .back-icon {
-        display: none;
-      }
-    }
-  }
-
-  .panel-content {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-flow: column;
-    transition: inherit;
-
-    @starting-style {
-      display: flex;
-      content-visibility: visible;
-    }
-  }
-
-  &:not(.open) {
-    &.previous {
-      .panel-content {
-        opacity: 0;
-        translate: -100% 0%;
-      }
-    }
-
-    &.next {
-      .panel-content {
-        opacity: 0;
-        translate: inherit;
-      }
-    }
-  }
-}

docs/assets/vue/components/scrollable.css

@@ -1,89 +0,0 @@
-/**
- * Scrollable element in a vertical flex container
- * Showing shadows as an indicator of scrollability (PE wherever scroll-timeline is supported for now, can be polyfilled with JS later)
- */
-
-.scrollable {
-  --scroll-shadow-height: 0.5em;
-
-  flex-shrink: 1;
-  min-height: 0;
-  overflow: auto;
-  position: relative;
-  scrollbar-width: inherit;
-
-  &:is(.panel-content > div) {
-    display: flex;
-    flex-flow: column;
-    gap: inherit;
-  }
-
-  .scroll-shadow {
-    position: sticky;
-    z-index: 1;
-    inset-inline: 0;
-    display: block;
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset-inline: 0;
-      height: var(--scroll-shadow-height);
-      pointer-events: none;
-      mix-blend-mode: multiply;
-      background: radial-gradient(farthest-side, var(--wa-color-shadow) 10%, transparent) center / 120% 200%;
-      transition: var(--wa-transition-slow);
-      /* transition-property: opacity, transform, display, height, min-height; */
-      transition-behavior: allow-discrete;
-    }
-  }
-
-  &:not(.can-scroll-top) .scroll-shadow-top,
-  &:not(.can-scroll-bottom) .scroll-shadow-bottom {
-    opacity: 0;
-
-    &::before {
-      height: 0;
-    }
-  }
-
-  &:not(.can-scroll-top) .scroll-shadow-top {
-    &::before {
-      transform: translateY(-100%);
-    }
-  }
-
-  .scroll-shadow-top {
-    top: 0;
-
-    &::before {
-      background-position: bottom;
-    }
-  }
-
-  &:not(.can-scroll-bottom) .scroll-shadow-bottom {
-    &::before {
-      transform: translateY(100%);
-    }
-  }
-
-  .scroll-shadow-bottom {
-    top: 100%;
-
-    &::before {
-      bottom: 0;
-      background-position: top;
-    }
-  }
-}
-
-.scrollable:where(.panel-content) {
-  .scroll-shadow-top {
-    /* TODO convert this magic number to a token that explains what it is */
-    margin-bottom: -18px;
-  }
-
-  .scroll-shadow-bottom {
-    transform: translateY(var(--padding-bottom, var(--panel-spacing)));
-  }
-}

docs/assets/vue/components/swatch-select.js

@@ -1,54 +0,0 @@
-import { capitalize } from '../../scripts/util/string.js';
-import inputMixin from '../mixins/input.js';
-import InfoTip from './info-tip.js';
-
-const template = `
-<wa-radio-group :label class="swatch-select" :class="'swatch-shape-' + shape" orientation="horizontal" :value @input="handleInput">
-  <info-tip v-for="value in values">
-      <wa-radio-button :value :label="getLabel(value)" :style="{'--color': getColor(value)}"></wa-radio-button>
-      <template #content>
-        {{ getLabel(value) }}
-      </template>
-  </info-tip>
-</wa-radio-group>
-  `;
-
-export default {
-  mixins: [inputMixin],
-  props: {
-    modelValue: String,
-    name: String,
-    label: String,
-    shape: {
-      type: String,
-      default: 'rounded',
-      validator: value => ['circle', 'rounded'].includes(value),
-    },
-    getLabel: {
-      type: Function,
-      default: capitalize,
-    },
-    getColor: {
-      type: Function,
-      default: value => `var(--wa-color-${value})`,
-    },
-    values: {
-      type: Array,
-      default: [],
-    },
-  },
-  computed: {},
-
-  methods: {
-    capitalize,
-  },
-
-  template,
-  components: {
-    InfoTip,
-  },
-
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};

docs/assets/vue/components/theme-card.js

@@ -1,119 +0,0 @@
-import themes from '../../data/themes.js';
-import { capitalize } from '../../scripts/util/string.js';
-import PageCard from './page-card.js';
-import { getThemeCode } from '/assets/scripts/tweak/code.js';
-
-const iconTemplates = {
-  colors: `
-    <div class="theme-icon theme-color-icon" role="presentation">
-      <div style="background: var(--wa-color-brand-fill-loud);   border-color: var(--wa-color-brand-border-loud);   color: var(--wa-color-brand-on-loud);">A</div>
-      <div style="background: var(--wa-color-brand-fill-normal); border-color: var(--wa-color-brand-border-normal); color: var(--wa-color-brand-on-normal);">A</div>
-      <div style="background: var(--wa-color-brand-fill-quiet);  border-color: var(--wa-color-brand-border-quiet);  color: var(--wa-color-brand-on-quiet);">A</div>
-    </div>
-
-    <div class="wa-invert theme-icon theme-color-icon" role="presentation">
-      <div style="background: var(--wa-color-brand-fill-loud);   border-color: var(--wa-color-brand-border-loud);   color: var(--wa-color-brand-on-loud);">A</div>
-      <div style="background: var(--wa-color-brand-fill-normal); border-color: var(--wa-color-brand-border-normal); color: var(--wa-color-brand-on-normal);">A</div>
-      <div style="background: var(--wa-color-brand-fill-quiet);  border-color: var(--wa-color-brand-border-quiet);  color: var(--wa-color-brand-on-quiet);">A</div>
-    </div>`,
-  dimensionality: `
-    <wa-card size="small">
-      <wa-input value="Input" size="small"></wa-input>
-      <wa-button size="small" variant="brand">Go</wa-button>
-    </wa-card>
-  `,
-  overall: `
-    <div class="row row-1">
-      <h2>Aa</h2>
-      <div class="swatches">
-        <div class="wa-brand"></div>
-        <div class="wa-success"></div>
-        <div class="wa-warning"></div>
-        <div class="wa-danger"></div>
-      </div>
-    </div>
-    <div class="row row-2">
-      <wa-input value="Input" size="small"></wa-input>
-      <wa-button size="small" variant="brand">Go</wa-button>
-    </div>`,
-};
-
-const template = `
-  <page-card class="theme-card" :class="type + '-card'" :info="themeMeta" :data-theme="theme">
-    <template #icon>
-      <wa-scoped slot="header" class="theme-icon-host" inert :key="themeCode">
-        <template v-html="themeCode"></template>
-        <template>
-          <link rel="stylesheet" href="/dist/styles/utilities.css">
-          <link rel="stylesheet" href="/dist/styles/native/content.css">
-          <link rel="stylesheet" href="/assets/styles/theme-icons.css">
-
-          <template v-if="type === 'colors'">
-            ${iconTemplates.colors}
-          </template>
-          <div v-else-if="type in iconTemplates && type !== 'overall'" class="theme-icon" :class="'theme-' + type + '-icon'" v-html="iconTemplates[type]" role="presentation">
-          </div>
-          <div v-else class="theme-icon theme-overall-icon" :class="'wa-theme-' + theme" role="presentation">
-            ${iconTemplates.overall}
-          </div>
-        </template>
-      </wa-scoped>
-    </template>
-    <slot></slot>
-    <template #extra>
-      <slot name="extra" />
-    </template>
-  </page-card>
-`;
-
-export default {
-  props: {
-    theme: String,
-    type: {
-      type: String,
-      validator(value) {
-        return !value || value in iconTemplates;
-      },
-    },
-    rest: Object,
-  },
-
-  data() {
-    return {};
-  },
-
-  created() {
-    this.iconTemplates = iconTemplates;
-  },
-
-  computed: {
-    themeMeta() {
-      let ret = themes[this.theme] ? { ...themes[this.theme] } : {};
-      // if (this.type === 'dimensionality' && typeof ret.dimension === 'string') {
-      //   ret.title = capitalize(ret.dimension);
-      // }
-      return ret;
-    },
-
-    themeCode() {
-      let theme = { ...(this.rest || {}), [this.type || 'base']: this.theme };
-      theme.base ||= 'default';
-
-      // if (theme.dimensionality) {
-      //   if (!themes[theme.dimensionality]?.dimension || theme.dimensionality === theme.base) {
-      //     theme.dimensionality = '';
-      //   }
-      // }
-
-      return getThemeCode(theme, { id: this.theme, language: 'html', cdnUrl: '/dist/' });
-    },
-  },
-
-  template,
-  components: {
-    PageCard,
-  },
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};

docs/assets/vue/components/ui-panel-container.js

@@ -1,120 +0,0 @@
-const template = `
-<section class="panel-container" ref="container" :style="{'--panel-step': step}" @open="handleOpen">
-  <slot ref="panels"></slot>
-</section>
-`;
-
-export default {
-  props: {
-    /** Currently selected id */
-    modelValue: String,
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      value: '',
-      previousValue: '',
-      step: 0,
-      trail: [],
-    };
-  },
-
-  mounted() {
-    let { container } = this.$refs;
-    let activePanel = container.querySelector(':scope > .open');
-
-    if (activePanel) {
-      let { step, value } = activePanel.dataset;
-      this.step = Number(step);
-      this.value = value;
-      this.$emit('update:modelValue', this.value);
-    }
-  },
-
-  computed: {
-    panels() {
-      if (!this.$refs.container) {
-        return new Map();
-      }
-
-      let { container } = this.$refs;
-
-      return new Map(
-        [...container.querySelectorAll(':scope > .panel')].map(panel => [
-          panel.dataset.value,
-          Number(panel.dataset.step),
-        ]),
-      );
-    },
-  },
-
-  methods: {
-    handleOpen(e) {
-      let { value, step } = e.detail;
-      this.value = value;
-      this.step = step;
-    },
-
-    updatePanels() {
-      let { container } = this.$refs;
-
-      if (!container) {
-        return;
-      }
-
-      let { step, value } = this;
-
-      if (this.panels.get(value) !== step) {
-        // Hasn't stabilized yet
-        return;
-      }
-
-      let previousValue = this.trail.findLast(panel => this.panels.get(panel) === step - 1);
-
-      for (let panel of container.querySelectorAll(':scope > .panel')) {
-        let panelStep = Number(panel.dataset.step);
-        let panelValue = panel.dataset.value;
-        let isPrevious = previousValue ? panelValue === previousValue : panelStep === step - 1;
-        let isOpen = panelValue === value;
-        let isNext = panelStep === step + 1;
-
-        panel.classList.toggle('previous', isPrevious);
-        panel.classList.toggle('open', isOpen);
-        panel.classList.toggle('next', isNext);
-      }
-    },
-  },
-
-  watch: {
-    value() {
-      if (this.value !== this.modelValue) {
-        this.$emit('update:modelValue', this.value);
-      }
-    },
-
-    modelValue: {
-      immediate: true,
-      async handler(value, previousValue) {
-        if (this.value !== this.modelValue) {
-          this.value = this.modelValue;
-        }
-
-        if (previousValue) {
-          this.trail.push(previousValue);
-        }
-
-        this.updatePanels();
-      },
-    },
-
-    step() {
-      this.updatePanels();
-    },
-  },
-
-  template,
-  components: {},
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};

docs/assets/vue/components/ui-panel.js

@@ -1,73 +0,0 @@
-import UiScrollable from './ui-scrollable.js';
-
-const template = `
-<ui-scrollable :disabled="!open" role="group" :name="name || 'panel'" :data-value="value" :data-step="step" class="panel" :class="{open}">
-  <h2 :inert="open" class="panel-header" @click="openPanel" ref="panelHeader">
-    <wa-icon name="chevron-left" class="back-icon" />
-    <slot name="title">{{ title }}</slot>
-  </h2>
-  <div class="panel-content">
-    <slot></slot>
-  </div>
-</ui-scrollable>
-`;
-
-export default {
-  props: {
-    title: String,
-    name: String,
-    step: Number,
-
-    /** Id of this panel */
-    value: String,
-
-    /** Currently selected id */
-    modelValue: String,
-  },
-  emits: ['update:modelValue', 'open'],
-  data() {
-    return {};
-  },
-
-  mounted() {
-    if (this.open) {
-      this.$refs.panelHeader.dispatchEvent(
-        new CustomEvent('open', { detail: { value: this.value, step: this.step }, bubbles: true }),
-      );
-    }
-  },
-
-  computed: {
-    open() {
-      return this.value === this.modelValue;
-    },
-  },
-
-  methods: {
-    openPanel() {
-      let wasOpen = this.open;
-      this.$emit('update:modelValue', wasOpen ? '' : this.value);
-    },
-  },
-
-  watch: {
-    open: {
-      immediate: true,
-      handler(open) {
-        if (open && this.$refs.panelHeader) {
-          this.$refs.panelHeader.dispatchEvent(
-            new CustomEvent('open', { detail: { value: this.value, step: this.step }, bubbles: true }),
-          );
-        }
-      },
-    },
-  },
-
-  template,
-  components: {
-    UiScrollable,
-  },
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};

docs/assets/vue/components/ui-scrollable.js

@@ -1,77 +0,0 @@
-const template = `
-<div class="scrollable" :class="{'can-scroll-top': canScrollTop, 'can-scroll-bottom': canScrollBottom}" ref="container">
-  <div v-if="!disabled" class="scroll-shadow scroll-shadow-top"></div>
-  <slot></slot>
-  <div v-if="!disabled" class="scroll-shadow scroll-shadow-bottom"></div>
-</div>
-`;
-
-export default {
-  props: {
-    disabled: Boolean,
-  },
-  data() {
-    return {
-      scrollTop: 0,
-      scrollHeight: 0,
-      height: 0,
-    };
-  },
-
-  mounted() {
-    let { container, content } = this.$refs;
-    container.addEventListener('scroll', this.handleScroll, { passive: true });
-
-    this.scrollHeight = container.scrollHeight;
-    this.height = container.clientHeight;
-  },
-
-  computed: {
-    canScrollTop() {
-      return !this.disabled && this.scrollTop > 1;
-    },
-
-    maxScrollTop() {
-      return this.scrollHeight - this.height;
-    },
-
-    canScrollBottom() {
-      return !this.disabled && this.scrollTop < this.maxScrollTop - 1;
-    },
-
-    scrollProgress() {
-      return this.scrollTop / this.maxScrollTop;
-    },
-
-    scrollProgressEnd() {
-      return this.scrollProgress + this.maxScrollTop / this.scrollHeight;
-    },
-
-    scrollBottom() {
-      return this.scrollHeight * this.scrollProgressEnd;
-    },
-  },
-
-  methods: {
-    handleScroll(event) {
-      let { container } = this.$refs;
-      this.scrollTop = container.scrollTop;
-    },
-  },
-
-  watch: {
-    scrollTop(value, oldValue) {
-      let { container } = this.$refs;
-      if (container && oldValue === 0) {
-        this.scrollHeight = container.scrollHeight;
-        this.height = container.clientHeight;
-      }
-    },
-  },
-
-  template,
-  components: {},
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};

docs/assets/vue/components/ui-slider.css

@@ -1,46 +0,0 @@
-.ui-slider {
-  display: grid;
-  grid-template:
-    'label label label'
-    'min slider max';
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: var(--wa-space-2xs);
-
-  wa-slider {
-    display: block;
-    grid-area: slider;
-    width: 100%;
-  }
-
-  &:has(.ui-slider-min) wa-slider {
-    &::part(label) {
-      margin-inline-start: calc(-1 * (var(--wa-space-s) + 1rem + 2 * var(--wa-border-width-m)));
-    }
-  }
-
-  .clear-button {
-    vertical-align: middle;
-    margin-inline-start: var(--wa-space-xs);
-    font-size: var(--wa-font-size-xs);
-  }
-}
-
-.ui-slider-header {
-  grid-area: label;
-}
-
-.ui-slider-min,
-.ui-slider-max {
-  width: min-content;
-}
-
-.ui-slider-min {
-  grid-area: min;
-  margin-inline-start: calc(-1 * var(--wa-space-s));
-}
-
-.ui-slider-max {
-  grid-area: max;
-  margin-inline-end: calc(-1 * var(--wa-space-s));
-}

docs/assets/vue/components/ui-slider.js

@@ -1,86 +0,0 @@
-import inputMixin from '../mixins/input.js';
-import InfoTip from './info-tip.js';
-
-let maxUid = 0;
-
-const template = `
-    <div class="ui-slider">
-      <div class="ui-slider-header">
-        <label :for="sliderId">{{ label }}</label>
-        <info-tip v-if="clearable && (value !== defaultValue ?? initialValue)" :text="'Reset to ' + valueFormatter(defaultValue ?? initialValue)">
-          <wa-icon-button @click="value = defaultValue ?? initialValue" class="clear-button" name="circle-xmark" library="system" variant="regular" :label="'Reset to ' + tooltipFormatter(defaultValue ?? initialValue)"></wa-icon-button>
-        </info-tip>
-      </div>
-      <info-tip v-if="$slots.min" :text="'Set to min (' + valueFormatter(min) + ')'">
-        <wa-button class="ui-slider-min" appearance="plain" size="small" @click="value = min"><slot name="min"></slot></wa-button>
-      </info-tip>
-      <wa-slider ref="slider" :id="sliderId" class="ui-slider" :value  @input="handleInput"
-                :min="min" :max="max" :step="step">
-      </wa-slider>
-      <info-tip v-if="$slots.max" :text="'Set to max (' + valueFormatter(max) + ')'">
-        <wa-button class="ui-slider-max" appearance="plain" size="small" @click="value = max"><slot name="max"></slot></wa-button>
-      </info-tip>
-    </div>
-  `;
-
-export default {
-  mixins: [inputMixin],
-  props: {
-    label: String,
-    id: String,
-    defaultValue: Number,
-    min: {
-      type: Number,
-      default: 0,
-    },
-    max: {
-      type: Number,
-      default: 100,
-    },
-    step: {
-      type: Number,
-      default(rawProps) {
-        return (rawProps.max - rawProps.min) / 100;
-      },
-    },
-    format: [Function, String],
-    clearable: Boolean,
-  },
-  data() {
-    let uid = ++maxUid;
-    return { uid, value: this.modelValue };
-  },
-  mounted() {
-    if (this.format) {
-      this.$refs.slider.tooltipFormatter = this.valueFormatter;
-    }
-  },
-  computed: {
-    sliderId() {
-      return this.id || `ui-slider-${this.uid}`;
-    },
-    valueFormatter() {
-      if (typeof this.format === 'string') {
-        return v => this.format.replaceAll('{value}', v);
-      }
-
-      return this.format;
-    },
-  },
-
-  watch: {
-    tooltip() {
-      if (this.$refs.slider) {
-        this.$refs.slider.tooltipFormatter = this.tooltipFormatter;
-      }
-    },
-  },
-  template,
-
-  components: {
-    InfoTip,
-  },
-  compilerOptions: {
-    isCustomElement: tag => tag.startsWith('wa-'),
-  },
-};

docs/assets/vue/directives/content.js

@@ -1,22 +0,0 @@
-// Like v-text, but doesn't complain if the element has content,
-// making it possible to use in a PE fashion, with the contents being the fallback
-export default function content(el, { value, arg }) {
-  if (!el.dataset.fallback) {
-    // Store the original content as a fallback the first time
-    el.dataset.fallback = el.textContent;
-  }
-
-  if (value === '') {
-    value = el.dataset.fallback;
-  } else {
-    if (arg === 'number') {
-      value = Number(value).toLocaleString(undefined, { maximumSignificantDigits: 2 });
-    }
-  }
-
-  if (arg === 'html') {
-    el.innerHTML = value;
-  } else {
-    el.textContent = value;
-  }
-}

docs/assets/vue/mixins/input.js

@@ -1,32 +0,0 @@
-/**
- * Mixin for components that behave like form controls.
- */
-
-export default {
-  props: {
-    modelValue: {
-      type: [String, Number, Boolean],
-    },
-  },
-  data() {
-    return {
-      initialValue: this.modelValue,
-      value: this.modelValue,
-    };
-  },
-  emits: ['update:modelValue', 'input'],
-  methods: {
-    handleInput(e) {
-      this.value = e.target.value;
-      this.$emit('input', this.value);
-    },
-  },
-  watch: {
-    value(value) {
-      this.$emit('update:modelValue', value);
-    },
-    modelValue(value) {
-      this.value = value;
-    },
-  },
-};

docs/assets/vue/mixins/saved.js

@@ -1,110 +0,0 @@
-import my from '/assets/scripts/my.js';
-import Permalink from '/assets/scripts/permalink.js';
-
-export default {
-  data() {
-    return {
-      uid: undefined,
-      saved: null,
-      unsavedChanges: false,
-      permalink: new Permalink(),
-    };
-  },
-
-  created() {
-    if (this.permalink.has('uid')) {
-      this.uid = Number(this.permalink.get('uid'));
-      this.saved = this.controller.saved.find(p => p.uid === this.uid);
-    }
-
-    this.controller.addEventListener('delete', ({ detail: entity }) => {
-      if (entity.uid === this.saved?.uid) {
-        this.postDelete();
-      }
-    });
-  },
-
-  mounted() {
-    this.$nextTick().then(() => {
-      if (!location.search || this.saved) {
-        this.unsavedChanges = false;
-      }
-    });
-  },
-
-  computed: {
-    controller() {
-      return my[this.collection];
-    },
-
-    title() {
-      if (this.saved) {
-        return this.saved.title;
-      } else if (this.unsavedChanges) {
-        return this.defaultTitle;
-      } else {
-        return this.originalTitle;
-      }
-    },
-  },
-
-  watch: {
-    saved: {
-      deep: true,
-      handler() {
-        this.unsavedChanges = !this.saved;
-      },
-    },
-  },
-
-  methods: {
-    async save({ title } = {}) {
-      let uid = this.uid;
-
-      this.saved ??= { uid: this.uid };
-      this.saved.id = this.id;
-
-      if (title) {
-        // Renaming
-        this.saved.title = title;
-      } else {
-        this.saved.title ??= this.defaultTitle;
-      }
-
-      this.saved.search = location.search;
-
-      this.saved = this.controller.save(this.saved);
-
-      if (uid !== this.saved.uid) {
-        // UID changed (most likely from saving a new entity)
-        this.uid = this.saved.uid;
-        this.permalink.set('uid', this.uid);
-        this.permalink.updateLocation();
-        await this.$nextTick();
-        this.save(); // Save again to update the search param to include the UID
-      }
-
-      this.unsavedChanges = false;
-    },
-
-    rename() {
-      let newTitle = prompt('Title:', this.saved?.title ?? this.defaultTitle);
-
-      if (newTitle && newTitle !== this.saved?.title) {
-        this.save({ title: newTitle });
-      }
-    },
-
-    // Cannot name this delete() because Vue complains
-    deleteSaved() {
-      this.controller.delete(this.saved);
-    },
-
-    postDelete() {
-      this.saved = null;
-      this.permalink.delete('uid');
-      this.uid = undefined;
-      this.permalink.updateLocation();
-    },
-  },
-};

docs/docs/components/breadcrumb-item.md

@@ -1,21 +0,0 @@
----
-title: Breadcrumb Item
-description: Breadcrumb Items are used inside breadcrumbs to represent different links.
-tags: component
-parent: breadcrumb
----
-
-```html {.example}
-<wa-breadcrumb>
-  <wa-breadcrumb-item>
-    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
-    Home
-  </wa-breadcrumb-item>
-  <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Shirts</wa-breadcrumb-item>
-</wa-breadcrumb>
-```
-
-:::info
-Additional demonstrations can be found in the [breadcrumb examples](/docs/components/breadcrumb).
-:::

docs/docs/components/carousel-item.md

@@ -1,46 +0,0 @@
----
-title: Carousel Item
-description: A carousel item represent a slide within a carousel.
-tags: component
-parent: carousel
-icon: carousel-item
----
-
-```html {.example}
-<wa-carousel pagination>
-  <wa-carousel-item>
-    <img
-      alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
-      src="/assets/examples/carousel/mountains.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
-      src="/assets/examples/carousel/waterfall.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
-      src="/assets/examples/carousel/sunset.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
-      src="/assets/examples/carousel/field.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
-      src="/assets/examples/carousel/valley.jpg"
-    />
-  </wa-carousel-item>
-</wa-carousel>
-```
-
-:::info
-Additional demonstrations can be found in the [carousel examples](/docs/components/carousel).
-:::

docs/docs/components/cheatsheet/cheatsheet.js

@@ -1,76 +0,0 @@
-let url = new URL(location);
-const pushedURL = false;
-
-const matchers = {
-  default(textContent, query) {
-    return textContent.includes(query);
-  },
-
-  i(textContent, query) {
-    return textContent.toLowerCase().includes(query.toLowerCase());
-  },
-
-  regexp(textContent, query) {
-    query.lastIndex = 0;
-    return query.test(textContent);
-  },
-};
-
-matchers.iregexp = matchers.regexp; // i is baked into the query
-
-function filterByName(value) {
-  const previousFilter = url.searchParams.get('name') || '';
-  url = new URL(location);
-
-  if (value) {
-    const isRegexp = name_search_regexp.checked;
-    const i = !name_search_i.checked;
-    const query = isRegexp ? new RegExp(value, 'gmsv' + (i ? 'i' : '')) : value;
-    const matcherId = (i ? 'i' : '') + (isRegexp ? 'regexp' : '');
-    const matcher = matchers[matcherId] ?? matchers.default;
-
-    for (const th of document.querySelectorAll('table tbody th:first-child')) {
-      const tr = th.parentNode;
-      const matches = matcher(th.textContent, query);
-      tr.toggleAttribute('hidden', !matches);
-    }
-    url.searchParams.set('name', value);
-
-    if (matcherId) {
-      url.searchParams.set('match', matcherId);
-    } else {
-      url.searchParams.delete('match');
-    }
-  } else {
-    for (const tr of document.querySelectorAll('table tbody tr[hidden]')) {
-      tr.removeAttribute('hidden');
-    }
-    url.searchParams.delete('name');
-    url.searchParams.delete('match');
-  }
-
-  if (value !== previousFilter) {
-    history[pushedURL ? 'replaceState' : 'pushState'](null, '', url);
-  }
-
-  // Update heading counts
-  for (const h2 of document.querySelectorAll('h2:has(+ table)')) {
-    const count = h2.querySelector('.count');
-    if (!count) continue;
-    const table = h2.nextElementSibling;
-    const visibleRows = table.querySelectorAll('tbody tr:not([hidden])').length;
-    count.textContent = visibleRows;
-    const outlineLink = document.querySelector(`#outline-standard a[href="#${h2.id}"]`);
-    if (outlineLink) {
-      // Why not just = h2.textContent? To skip the "Jump to heading" link
-      outlineLink.textContent = '';
-      outlineLink.append(...[...h2.childNodes].slice(0, 3).map(n => n.cloneNode(true)));
-    }
-  }
-}
-
-if (name_search.value) {
-  filterByName(name_search.value);
-}
-
-name_search_group.addEventListener('input', e => filterByName(name_search.value));

docs/docs/components/cheatsheet/index.njk

@@ -1,89 +0,0 @@
----
-title: Component Cheatsheet
-layout: docs
-unlisted: true
----
-
-<style>
-table code {
-	white-space: nowrap;
-}
-</style>
-
-<p>
-	This page lists every bit of syntax used by every Web Awesome component and which components share it.
-	For these times when your memory is failing, or to simply explore the possibilities!
-</p>
-
-<fieldset id="name_search_group">
-	<legend>Filter by name</legend>
-	<wa-input type=search clearable id="name_search"></wa-input>
-	<wa-checkbox id="name_search_i" checked>Case sensitive</wa-checkbox>
-	<wa-checkbox id="name_search_regexp">Regular expression</wa-checkbox>
-</fieldset>
-
-<script>
-{
-	let url = new URL(location);
-	if (url.searchParams.get("name")) {
-		name_search.value = url.searchParams.get("name");
-	}
-
-	if (url.searchParams.get("match")) {
-		let matcherId = url.searchParams.get("match");
-		let caseSensitive = !matcherId.startsWith("i");
-		let isRegexp = matcherId.endsWith("regexp");
-
-		customElements.whenDefined("wa-checkbox").then(async () => {
-			await Promise.all([
-				name_search_i.updateComplete,
-				name_search_regexp.updateComplete,
-			]);
-			name_search_i.checked = caseSensitive;
-			name_search_regexp.checked = isRegexp;
-		});
-	}
-}
-</script>
-<script type="module" src="/docs/components/cheatsheet.js"></script>
-
-{% for type, all in componentsBy -%}
-{% set typeTitle = "CSS custom properties" if type == "cssProperty" else ("CSS parts" if type == "cssPart" else (type | title) + "s") %}
-<h2 id="{{ typeTitle | slugify }}">
-	All <span class="count">{{ (all | keys).length }}</span>
-	{{ typeTitle }}
-</h2>
-
-<table>
-	<thead>
-		<tr>
-			<th>Name</th>
-			<th>Components</th>
-		</tr>
-	</thead>
-	{% for name, thingComponents in all -%}
-	<tr>
-		<th><code>{{ name }}{{ "()" if type == "method" }}</code></th>
-		<td>
-      {% set componentLinks = [] %}
-			{% for component in thingComponents  %}
-			  {%- set link -%}
-				  <a href="../{{ component.slug }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
-				{%- endset -%}
-				{# https://giuliachiola.dev/posts/add-items-to-an-array-in-nunjucks/ #}
-        {% set componentLinks = (componentLinks.push(link), componentLinks) %}
-			{%- endfor -%}
-			{% if thingComponents.length > 1 %}
-				<details open>
-					<summary><strong>{{ thingComponents.length }}</strong> components</summary>
-					{{ componentLinks | safe }}
-				</details>
-			{% else %}
-				{{ componentLinks | safe }}
-			{% endif %}
-		</td>
-	</tr>
-	{%- endfor %}
-</table>
-
-{%- endfor %}

docs/docs/components/code-demo.md

@@ -1,213 +0,0 @@
----
-title: Code Demo
-description: Code demos can be used to render code examples as inline live demos.
-tags: component
-isPro: true
-unpublished: true
----
-
-```html {.example}
-<wa-code-demo>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-This component is used right here in the docs to render code examples.
-
-:::warning
-Do not render untrusted content in a `<wa-code-demo>` element. This component renders the content as HTML, which introduces XSS vulnerabilities if used with untrusted content.
-:::
-
-## Examples
-
-### Open by default
-
-```html {.example}
-<wa-code-demo open>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-### Custom previews
-
-In some cases you may want to preprocess the code displayed, for example to sanitize HTML, remove irrelevant elements or attributes, fix whitespace, or do server-side rendering (SSR).
-For these cases, you can slot in a custom preview:
-
-```html {.example}
-<wa-code-demo>
-  <wa-button slot="preview">Click me!</wa-button>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-Note that this means the preview will be in the light DOM, and can conflict with other things on the page.
-To only render the custom preview within the component’s shadow DOM, or to display raw text, you can wrap it in a `<template>` element:
-
-```html {.example}
-<wa-code-demo>
-  <template slot="preview">
-    <wa-button>Click me!</wa-button>
-  </template>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-### Including resources (CSS, scripts, etc.)
-
-Demos are rendered in the shadow DOM of the component, so any resources (stylesheets, scripts, etc.) must be included anew.
-The same applies to isolated demos (see below), opening demos in a new tab, or editing them on CodePen.
-
-While you _could_ manually include all of these on every single demo, it would get tedious to write,
-and it would add noise for the reader.
-
-Instead, `<wa-code-demo>` provides several better ways to include resources.
-The core idea is that rather than specifying these resources over and over on each demo,
-you would **point to elements** which would then be cloned into the demo, at the beginning.
-
-There are two ways to point to elements:
-- Add a `wa-code-demo-include` class to them
-- Specify a CSS selector for which resources to look for in the demo’s `include` attribute.
-
-There are certain types of elements that are handled specially:
-- `<template>`: contents are cloned instead of the element itself.
-This is useful for including resources in your demo that you don't want rendered outside the demo.
-
-The following example shows both methods.
-It includes all stylesheets on this page whose URLs start with `/dist/styles/themes/`,
-plus any other elements with the class `.demo-import`, plus a CSS file with the class `wa-code-demo-include`:
-
-```html {.example}
-<template class="wa-code-demo-include-isolated">
-  <script type="module" src="/dist/webawesome.loader.js"></script>
-  <style>wa-callout { font-size: var(--wa-font-size-2xl) }</style>
-  <script>console.log('Hello!')</script>
-</template>
-<wa-code-demo include="link[rel=stylesheet]">
-  <pre><code class="language-html">
-    &lt;wa-callout&gt;Helloooo!&lt;/wa-callout&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-
-### Isolated viewports
-
-Often you may want to render your demo in a separate viewport, e.g. when it’s about a whole page.
-Or, you may want to sandbox it.
-For these cases, you can use the `viewport` attribute, which renders the demo in an iframe:
-
-```html {.example}
-<wa-code-demo viewport>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-### Viewport Emulation
-
-When you use the `viewport` attribute, `<wa-code-demo>` uses [`<wa-viewport-demo>`](../viewport-demo/) internally, and passes the value of `viewport` to it.
-This allows you to also also provide a width value to emulate and it will be scaled accordingly:
-
-```html {.example}
-<wa-code-demo viewport="300">
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-Or both a width and a height value:
-
-```html {.example}
-<wa-code-demo viewport="1600 x 1000">
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-  </code></pre>
-</wa-code-demo>
-```
-
-If you only provide a width value, the viewport will be rendered to an initial 16:9 aspect ratio,
-which can be changed via resizing.
-You can customize this via the `--viewport-initial-aspect-ratio` property.
-
-### Isolated demos with resources
-
-Including resources in isolated demos works the same way.
-Any relative URLs are still resolved relative to the host document.
-In addition to the `wa-code-demo-include` class, which specifies resources to be included in *every* demo,
-you can also use the `wa-code-demo-include-isolated` class which specifies resources to be included in every *isolated* demo,
-i.e. the previews of demos using the `viewport` attribute, but also opening demos in a new tab or editing them on CodePen.
-
-```html {.example}
-<template class="wa-code-demo-include-isolated">
-  <script type="module" src="{% cdnUrl 'webawesome.loader.js' %}"></script>
-  <style>
-    body {
-      padding: var(--wa-space-l);
-    }
-    wa-callout { font-size: var(--wa-font-size-2xl) }
-  </style>
-  <script>console.log('Hello from iframe!')</script>
-</template>
-<wa-code-demo viewport include="link[rel=stylesheet]">
-  <pre><code class="language-html">
-    &lt;wa-callout&gt;Helloooo!&lt;/wa-callout&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-## Styling
-
-Just setting `border-radius` or `border` should work as expected:
-
-```html{.example}
-<wa-code-demo style="border: 2px dotted var(--wa-color-blue-50); border-radius: var(--wa-border-radius-m)">
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-The divider width is controlled separately via `--divider-width`:
-
-```html{.example}
-<wa-code-demo open style="border-width: var(--wa-border-width-l); --divider-width: var(--wa-border-width-m);">
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-## Roadmap
-
-This component is a work in progress.
-Some of the things that are not yet implemented are listed below.
-It goes without saying that this list is a rough plan and subject to change.
-
-### High priority
-
-- Make the component dynamic so that when the code changes, the demo is updated
-
-### Low priority
-
-- Horizontal layout
-- Tabbed layout
-- Provide a way to display CSS and JS separately
-- Provide a way to customize the playground used (currently it is hardcoded to CodePen)
-- Provide a way to customize the buttons shown