minor refactor

* adding Free Badge macro

* using semantic color value for Pro Badge's `color`

* removing unncessary `border-color` from Pro Badge's custom CSS

* adding `data-pro-badge` attr to Pro Badge

* using freeBadge and proBadge macros in themes.njk

.github/ISSUE_TEMPLATE/config.yml

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

.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,31 +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.
+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 a 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`.
+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?
+### Where do npm dependencies go?
 
-Any dependencies intended to be used across all packages (IE: `prettier`, `eslint`) that are _NOT_ used at runtime should be in the root `devDependencies` of `package.json`.
+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.
+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.
+Individual packages are also free to install `devDependencies` as needed as long as they are specific to that package only.
 
-To do install a package specific to a package, change your working directory to that package's root
-
-IE: `cd packages/webawesome && npm install <package-name>`
+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
 
@@ -67,14 +65,14 @@ npm install
 
 ### Developing
 
-Once you've cloned the repo, run the following command from the respective directory within `packages/*`
+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
 
@@ -102,7 +100,7 @@ This will generate a source file, a stylesheet, and a docs page for you. When yo
 
 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/`.
+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!
 
@@ -112,4 +110,4 @@ Web Awesome is an open source project and contributions are encouraged! If you'r
 
 ## 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 @@
+3.0.0

cspell.json

@@ -8,8 +8,10 @@
     "APG",
     "apos",
     "atrule",
+    "autocapitalize",
     "autocorrect",
     "autofix",
+    "autofocus",
     "autoload",
     "autoloader",
     "autoloading",
@@ -43,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",
@@ -60,6 +68,7 @@
     "esbuild",
     "exportmaps",
     "exportparts",
+    "fetchpriority",
     "fieldsets",
     "focusin",
     "focusout",
@@ -78,16 +87,19 @@
     "giga",
     "globby",
     "Grayscale",
+    "groupby",
     "haspopup",
     "heroicons",
     "hexa",
     "Hotwire",
+    "hrefs",
     "Iconoir",
     "Iframes",
     "iife",
     "inputmode",
     "ionicon",
     "ionicons",
+    "jank",
     "jsDelivr",
     "jsfiddle",
     "keydown",
@@ -123,7 +135,10 @@
     "noindex",
     "noopener",
     "noreferrer",
+    "noscript",
+    "Notdog",
     "novalidate",
+    "nowrap",
     "Numberish",
     "nums",
     "oklab",
@@ -159,6 +174,7 @@
     "scroller",
     "Scrollers",
     "Segoe",
+    "selectattr",
     "semibold",
     "shadowrootmode",
     "Shortcode",
@@ -192,6 +208,7 @@
     "typeof",
     "unbundles",
     "unbundling",
+    "Uncategorized",
     "unicons",
     "unsanitized",
     "unsupportive",

package.json

@@ -18,13 +18,12 @@
   "engines": {
     "node": ">=14.17.0"
   },
-  "dependencies": {},
   "devDependencies": {
     "@11ty/eleventy": "3.0.0",
     "@custom-elements-manifest/analyzer": "^0.10.4",
     "@lit-labs/eleventy-plugin-lit": "^1.0.3",
     "@lit-labs/testing": "^0.2.5",
-    "@lit/react": "^1.0.6",
+    "@lit/react": "^1.0.8",
     "@open-wc/testing": "^3.2.0",
     "@types/mocha": "^10.0.10",
     "@types/react": "^18.2.28",
@@ -87,4 +86,3 @@
     ]
   }
 }
-

packages/webawesome/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright (c) 2025 Fonticons, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/webawesome/README.md

@@ -0,0 +1 @@
+Visit our documentation! <https://webawesome.com>

packages/webawesome/custom-elements-manifest.js

@@ -1,3 +1,4 @@
+import { jsxTypesPlugin } from '@wc-toolkit/jsx-types';
 import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
 // import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
@@ -164,6 +165,7 @@ export default {
       ],
     }),
 
+    // Generate custom JetBrains data
     customElementJetBrainsPlugin({
       outdir: './dist-cdn',
       excludeCss: true,
@@ -176,6 +178,16 @@ export default {
       },
     }),
 
+    // Generate JSX types (see https://wc-toolkit.com/integrations/jsx/)
+    jsxTypesPlugin({
+      fileName: 'custom-elements-jsx.d.ts',
+      outdir,
+      defaultExport: true,
+      componentTypePath: (_name, _tag, modulePath) => {
+        return `./${modulePath}`;
+      },
+    }),
+
     //
     // TODO - figure out why this broke when events were updated
     //

packages/webawesome/docs/.eleventy.js

@@ -1,70 +1,284 @@
+import { nanoid } from 'nanoid';
+import { parse as HTMLParse } from 'node-html-parser';
+import { execFileSync } from 'node:child_process';
 import * as fs from 'node:fs';
 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 { anchorHeadingsTransformer } from './_transformers/anchor-headings.js';
+import { codeExamplesTransformer } from './_transformers/code-examples.js';
+import { copyCodeTransformer } from './_transformers/copy-code.js';
+import { currentLinkTransformer } from './_transformers/current-link.js';
+import { highlightCodeTransformer } from './_transformers/highlight-code.js';
+import { outlineTransformer } from './_transformers/outline.js';
+import { getComponents } from './_utils/manifest.js';
 import { markdown } from './_utils/markdown.js';
-// import { formatCodePlugin } from './_utils/format-code.js';
+import { SimulateWebAwesomeApp } from './_utils/simulate-webawesome-app.js';
+// import { formatCodePlugin } from './_plugins/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';
+import { replaceTextPlugin } from './_plugins/replace-text.js';
+import { searchPlugin } from './_plugins/search.js';
 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 ignoreGit = process.env.ELEVENTY_IGNORE_GIT === 'true';
+const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
 
-const globalData = {
-  package: packageData,
-  layout: 'page.njk',
-  server: {
-    head: '',
-    loginOrAvatar: '',
-    flashes: '',
-  },
-};
+async function getPackageData() {
+  return JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
+}
 
 export default async 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 docsDir = path.join(process.env.BASE_DIR || '.', 'docs');
+  let packageData = await getPackageData();
+  let allComponents = getComponents();
+
+  const distDir = process.env.UNBUNDLED_DIST_DIRECTORY || path.resolve(__dirname, '../dist');
+  const customElementsManifest = path.join(distDir, 'custom-elements.json');
+  const stylesheets = path.join(distDir, 'styles');
+
+  eleventyConfig.addWatchTarget(customElementsManifest);
+  eleventyConfig.setWatchThrottleWaitTime(10); // in milliseconds
+
+  eleventyConfig.on('eleventy.beforeWatch', async function (changedFiles) {
+    let updatePackageData = false;
+    let updateComponentData = false;
+    changedFiles.forEach(file => {
+      if (file.includes('package.json')) {
+        updatePackageData = true;
+      }
+
+      if (file.includes('custom-elements.json')) {
+        updateComponentData = true;
+      }
+    });
+
+    if (updatePackageData) {
+      packageData = await getPackageData();
+    }
+
+    if (updateComponentData) {
+      allComponents = getComponents();
+    }
+
+    // Invalidate last-modified cache for changed content files during watch
+    if (Array.isArray(changedFiles)) {
+      for (const file of changedFiles) {
+        if (/\.(md|njk|html)$/i.test(file)) {
+          lastModCache.delete(file);
+        }
+      }
+    }
+  });
+
+  /**
+   * 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 passThrough = [...passThroughExtensions.map(ext => path.join(docsDir, '**/*.' + 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.
+   * This is the guard we use for now to make sure our final built files don't 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]);
-  }
+  //
+  // Set all global template data here
+  //
+  eleventyConfig.addGlobalData('package', packageData);
+  eleventyConfig.addGlobalData('layout', 'page.njk');
+  eleventyConfig.addGlobalData('server', {
+    head: '',
+    loginOrAvatar: '',
+    flashes: '',
+  });
+
+  // Site metadata for social sharing (Open Graph, canonical URLs, etc.)
+  const siteMetadata = {
+    url: 'https://webawesome.com',
+    name: 'Web Awesome',
+    description: 'Build better with Web Awesome, the open source library of web components from Font Awesome.',
+    image: 'https://webawesome.com/assets/images/open-graph/default.png',
+  };
+
+  // Title composition/stripping config - single source of truth
+  const SITE_NAME = siteMetadata.name;
+  const SITE_TITLE_SEPARATORS = ['|'];
+
+  // Helper to escape user-provided strings for safe use inside RegExp sources
+  const escapeRegExp = string => (string + '').replace(/[.*+?^${}()|[\\]\\]/g, '\\$&');
+
+  // Precompute a reusable regex to strip a trailing site name suffix from titles, e.g. " | Web Awesome"
+  // Supports configured separators and flexible whitespace. This keeps search titles clean and improves Lunr scoring
+  const siteNameEscapedForRegex = escapeRegExp(SITE_NAME);
+  const separatorsEscaped = SITE_TITLE_SEPARATORS.map(s => escapeRegExp(s)).join('');
+  const siteTitleSuffixPattern = new RegExp(`\\s*[${separatorsEscaped}]\\s*${siteNameEscapedForRegex}$`);
+
+  // Helper to remove the site suffix from a page title. Keep this in sync with how page titles
+  // are composed (see eleventyComputed.pageTitle) so search indexing stays consistent
+  const stripSiteTitleSuffix = title => (title || '').replace(siteTitleSuffixPattern, '');
+
+  // Helper to compose a full page title with site suffix when appropriate
+  // Uses the same separator set as the stripping logic for consistency
+  const composePageTitle = baseTitle => {
+    const title = baseTitle || SITE_NAME;
+    const preferredSeparator = SITE_TITLE_SEPARATORS[0] || '|';
+    return title !== SITE_NAME ? `${title} ${preferredSeparator} ${SITE_NAME}` : title;
+  };
+
+  eleventyConfig.addGlobalData('siteMetadata', siteMetadata);
 
   // Template filters - {{ content | filter }}
   eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
   eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
+  eleventyConfig.addFilter('stripExtension', string => path.parse(string + '').name);
+  eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
+  eleventyConfig.addFilter('uniqueId', (_value, length = 8) => nanoid(length));
+  // Returns last modified date as ISO 8601 (UTC, Z-suffixed)
+  // Fallback order: front matter override -> Git last commit date -> filesystem mtime -> now
+  // Caching: in-memory per inputPath during one build/dev session
+  // Override: pass a Date or string: {{ page.inputPath | gitLastModifiedISO(lastUpdated) }}
+  const lastModCache = new Map();
+  let repoRoot = null; // lazily resolved; null => not resolved, undefined => failed
 
-  for (let name in filters) {
-    eleventyConfig.addFilter(name, filters[name]);
+  function getLastModifiedISO(inputPath, overrideDate) {
+    if (overrideDate instanceof Date) {
+      return overrideDate.toISOString();
+    }
+    if (typeof overrideDate === 'string' && overrideDate) {
+      const parsed = new Date(overrideDate);
+      if (!isNaN(parsed.getTime())) return parsed.toISOString();
+    }
+    if (!inputPath) return new Date().toISOString();
+    if (lastModCache.has(inputPath)) return lastModCache.get(inputPath);
+
+    // Try Git (ISO via %cI). Use a repo-root-relative path for portability.
+    if (!ignoreGit) {
+      try {
+        if (repoRoot === null) {
+          try {
+            repoRoot = execFileSync('git', ['rev-parse', '--show-toplevel'], {
+              stdio: ['ignore', 'pipe', 'ignore'],
+              cwd: __dirname,
+            })
+              .toString()
+              .trim();
+          } catch (_) {
+            repoRoot = undefined;
+          }
+        }
+
+        const gitPath = repoRoot ? path.relative(repoRoot, inputPath) : inputPath;
+        const args = ['log', '-1', '--format=%cI', '--follow', '--', gitPath];
+        const result = execFileSync('git', args, {
+          stdio: ['ignore', 'pipe', 'ignore'],
+          cwd: repoRoot || path.dirname(inputPath),
+        })
+          .toString()
+          .trim();
+        if (result) {
+          const iso = new Date(result).toISOString();
+          lastModCache.set(inputPath, iso);
+          return iso;
+        }
+      } catch (_) {
+        // continue to fs fallback
+      }
+    }
+
+    // Fallback to filesystem mtime
+    try {
+      const stats = fs.statSync(inputPath);
+      const iso = new Date(stats.mtime).toISOString();
+      lastModCache.set(inputPath, iso);
+      return iso;
+    } catch (_) {
+      const now = new Date().toISOString();
+      lastModCache.set(inputPath, now);
+      return now;
+    }
   }
 
+  eleventyConfig.addFilter('gitLastModifiedISO', function (inputPath, overrideDate) {
+    return getLastModifiedISO(inputPath, overrideDate);
+  });
+
+  // Attach lastUpdatedISO to page data so templates can use {{ lastUpdatedISO }} directly
+  eleventyConfig.addGlobalData('eleventyComputed', {
+    lastUpdatedISO: data => getLastModifiedISO(data.page?.inputPath, data.lastUpdated),
+    // Page title with smart + default site name formatting
+    pageTitle: data => composePageTitle(data.title),
+    // Open Graph title with smart + default site name formatting
+    ogTitle: data => composePageTitle(data.ogTitle || data.title),
+    ogDescription: data => data.ogDescription || data.description,
+    ogImage: data => data.ogImage || siteMetadata.image,
+    ogUrl: data => {
+      if (data.ogUrl) return data.ogUrl;
+      const url = data.page?.url || '';
+      return url ? `${siteMetadata.url}${url}` : siteMetadata.url;
+    },
+    ogType: data => data.ogType || 'website',
+  });
+  // 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.
+  eleventyConfig.addFilter('trimPipes', content => {
+    return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
+  });
+
+  /**
+   * @example
+    {% set foo = {foo: "bar"} %}
+    {% set bar = {bar: "baz"} %}
+    {% set merged = foo | merge(bar) %}
+    {{ merged | dump }}
+   */
+  eleventyConfig.addFilter('merge', function (obj1, obj2) {
+    return Object.assign({}, obj1, obj2);
+  });
+
+  // Custom filter to sort with a priority item first, e.g.
+  // {{ collection | sortWithFirst('fileSlug', 'default') }} => the item with the fileSlug of 'default' will be first
+  eleventyConfig.addFilter('sortWithFirst', function (collection, property, firstValue) {
+    const items = [...collection]; // Create a copy to avoid mutating original
+    return items.sort((a, b) => {
+      const aValue = property ? a[property] : a;
+      const bValue = property ? b[property] : b;
+      if (aValue === firstValue) return -1;
+      if (bValue === firstValue) return 1;
+      return 0;
+    });
+  });
+
+  //
+  // Add the componentPages collection
+  //
+  eleventyConfig.addCollection('componentPages', function (collectionApi) {
+    const componentPages = collectionApi.getFilteredByGlob(
+      path.join(eleventyConfig.directories.input, 'docs/components/**/*.md'),
+    );
+
+    return componentPages.map(page => {
+      const componentName = path.basename(page.inputPath, '.md');
+      const tagName = `wa-${componentName}`;
+      const component = allComponents.find(c => c.tagName === tagName);
+
+      // Add component to the page's data
+      if (component) {
+        page.data.component = component;
+      }
+
+      return page;
+    });
+  });
+
   // Shortcodes - {% shortCode arg1, arg2 %}
   eleventyConfig.addShortcode('cdnUrl', location => {
-    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
+    // We use WA (free) via the public CDN for CodePen examples
+    return (
+      `https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@${packageData.version}/dist-cdn/` +
+      (location || '').replace(/^\//, '')
+    );
   });
 
   // Turns `{% server "foo" %} into `{{ server.foo | safe }}` when the WEBAWESOME_SERVER variable is set to "true"
@@ -76,64 +290,60 @@ export default async function (eleventyConfig) {
     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
+  eleventyConfig.addNunjucksGlobal('getComponent', tagName => {
+    const component = allComponents.find(c => c.tagName === tagName);
+    if (!component) {
+      throw new Error(
+        `Unable to find "<${tagName}>". Make sure the file name is the same as the tag name (without prefix).`,
+      );
+    }
+    return component;
+  });
 
   // Use our own markdown instance
   eleventyConfig.setLibrary('md', markdown);
 
+  // for files with `unpublished: true`, it will make sure they do not make it into the final build at all, but will be usable in development.
+  eleventyConfig.addPreprocessor('unpublished', '*', (data, content) => {
+    if (data.unpublished && process.env.ELEVENTY_RUN_MODE === 'build') {
+      return false;
+    }
+
+    return content;
+  });
+
   // Add anchors to headings
-  eleventyConfig.addPlugin(anchorHeadingsPlugin({ container: '#content' }));
+  eleventyConfig.addTransform('doc-transforms', function (content) {
+    let doc = HTMLParse(content, { blockTextElements: { code: true } });
 
-  // Add an outline to the page
-  eleventyConfig.addPlugin(
-    outlinePlugin({
-      container: '#content',
-      target: '.outline-links',
-      selector: 'h2, h3',
-      ifEmpty: doc => {
-        doc.querySelector('#outline')?.remove();
-      },
-    }),
-  );
+    const transformers = [
+      anchorHeadingsTransformer({ container: '#content' }),
+      outlineTransformer({
+        container: '#content',
+        target: '.outline-links',
+        selector: 'h2, h3',
+        ifEmpty: doc => {
+          doc.querySelector('#outline')?.remove();
+        },
+      }),
+      // Add current link classes
+      currentLinkTransformer(),
+      codeExamplesTransformer(),
+      highlightCodeTransformer(),
+      copyCodeTransformer(),
+    ];
 
-  // Add current link classes
-  eleventyConfig.addPlugin(currentLink());
+    for (const transformer of transformers) {
+      transformer.call(this, doc);
+    }
 
-  // Add code examples for `<code class="example">` blocks
-  eleventyConfig.addPlugin(codeExamplesPlugin());
+    return doc.toString();
+  });
 
-  // Highlight code blocks with Prism
-  eleventyConfig.addPlugin(highlightCodePlugin());
-
-  // Add copy code buttons to code blocks
-  eleventyConfig.addPlugin(copyCodePlugin);
-
-  // Various text replacements
   eleventyConfig.addPlugin(
     replaceTextPlugin([
       {
@@ -143,17 +353,17 @@ export default async function (eleventyConfig) {
       // 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>',
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1" target="_blank">#$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>',
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1" target="_blank">#$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>',
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1" target="_blank">#$1</a>',
       },
     ]),
   );
@@ -163,6 +373,11 @@ export default async function (eleventyConfig) {
     searchPlugin({
       filename: '',
       selectorsToIgnore: ['code.example'],
+      // Use <title> but strip a trailing site name suffix for cleaner search results
+      getTitle: doc => {
+        const raw = doc.querySelector('title')?.textContent ?? '';
+        return stripSiteTitleSuffix(raw);
+      },
       getContent: doc => doc.querySelector('#content')?.textContent ?? '',
     }),
   );
@@ -176,15 +391,21 @@ export default async function (eleventyConfig) {
   //   eleventyConfig.addPlugin(formatCodePlugin());
   // }
 
-  let assetsDir = path.join(process.env.BASE_DIR || 'docs', 'assets');
-  fs.cpSync(assetsDir, path.join(eleventyConfig.directories.output, 'assets'), { recursive: true });
+  // This needs to happen in "eleventy.after" otherwise incremental builds never update.
+  eleventyConfig.on('eleventy.after', function () {
+    let assetsDir = path.join(process.env.BASE_DIR || 'docs', 'assets');
+    const siteAssetsDir = path.join(eleventyConfig.directories.output, 'assets');
+    fs.cpSync(assetsDir, siteAssetsDir, { recursive: true });
+  });
 
   for (let glob of passThrough) {
     eleventyConfig.addPassthroughCopy(glob);
   }
 
+  // Passthrough copy for manifest.json (PWA manifest file)
+  eleventyConfig.addPassthroughCopy('manifest.json');
+
   // // 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:
@@ -207,6 +428,20 @@ export default async function (eleventyConfig) {
   //     componentModules,
   //   });
   // }
+
+  // For a server build, we expect a server to run the second transform.
+  // For dev builds, we run the second transform in a middleware.
+  if (!isDev && !serverBuild) {
+    eleventyConfig.addTransform('simulate-webawesome-app', function (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 SimulateWebAwesomeApp(content);
+    });
+  }
 }
 
 export const config = {

packages/webawesome/docs/503.md

@@ -0,0 +1,312 @@
+---
+title: Web Awesome is Undergoing Maintenance
+description: We're performing routine maintenance to keep things running smoothly. Check back soon!
+layout: blank
+permalink: 503.html
+noindex: true
+unlisted: true
+---
+
+{% block head %}
+
+  <link id="site-stylesheet" rel="stylesheet" href="/assets/styles/theme-site.css" />
+  <link id="site-stylesheet" rel="stylesheet" href="/assets/styles/site.css" />
+{% endblock %}
+
+<style>
+  :root {
+    --scene-vertical-offset: calc(var(--wa-space-2xs) * -1);
+    --wa-font-family-heading: cera-round-pro;
+    --vehicle-offset: 25ch;
+    --vehicle-duration: 20s;
+    --vehicle-start: calc(-1 * var(--vehicle-offset));
+    --vehicle-end: calc(100% + var(--vehicle-offset));
+  }
+
+  html, wa-page {
+    background-color: var(--wa-color-surface-lowered);
+  }
+
+  wa-icon[name='traffic-cone'] {
+    --primary-color: var(--wa-color-brand-70);
+    --secondary-color: var(--wa-color-text-normal);
+    --secondary-opacity: 1.0;
+  }
+
+  wa-page.background-grid {
+    --grid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 96%);
+    --subgrid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 98%);
+  }
+
+  wa-page > [slot='main-footer'] {
+    border-block-end: var(--wa-border-style) calc(var(--wa-border-width-l) * 10) var(--wa-color-text-normal);
+    padding: 0;
+    background-color: transparent;
+  }
+
+  .header-content {
+    margin-inline: auto;
+    max-width: var(--content-width-l);
+    padding-inline: var(--content-padding-inline);
+  }
+
+  .icon-brand-logo {
+    font-size: var(--wa-font-size-xl);
+    color: var(--wa-brand-orange);
+  }
+
+  /* centering main-content */
+  wa-page::part(main-content) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #content {
+    max-width: var(--content-width-m);
+    padding-inline: var(--content-padding-inline);
+    margin-inline: auto;
+  }
+
+  .heading-stacked-subtitle {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  .heading-stacked-subtitle wa-icon {
+    position: relative;
+    inset-block-start: calc(var(--wa-space-3xs) * -0.75);
+    font-size: 0.75em;
+  }
+
+  .heading-stacked-subtitle wa-icon[name="traffic-cone"] {
+    --secondary-color: var(--wa-color-text-normal);
+    --primary-color: var(--wa-color-brand-70);
+    margin-inline: calc(var(--wa-space-xs) * -1.15) calc(var(--wa-space-xs) * -0.75);
+  }
+
+  .copy {
+    code {
+      font-size: 0.75em;
+    }
+
+    strong {
+      text-decoration: underline;
+      text-decoration-color: var(--wa-color-brand-70);
+      text-decoration-thickness: var(--wa-border-width-m);
+      text-underline-offset: var(--wa-space-2xs);
+    }
+  }
+
+  .status {
+    width: 100%;
+    --min-column-size: 30ch;
+
+    wa-callout {
+      background-color: var(--wa-color-surface-default);
+    }
+  }
+
+  .linkies {
+    /* nudge those linkies left */
+    margin-inline-start: calc(var(--wa-space-xs) * -1);
+
+    a {
+      padding-inline: var(--wa-space-xs);
+    }
+  }
+
+  .scene {
+    width: 100%;
+    position: relative;
+    overflow-x: clip;
+    inset-block-end: var(--scene-vertical-offset);
+
+    .vehicle {
+      position: absolute;
+      inset-inline-start: var(--vehicle-start);
+      inset-block-end: 0; /* align all vehicles to bottom */
+      animation: driveAcross var(--vehicle-duration) linear infinite;
+      transform-origin: center;
+      z-index: 1;
+    }
+
+    .vehicle-with-object {
+      white-space: nowrap;
+      display: flex;
+      align-items: baseline;
+      gap: var(--wa-space-3xs);
+    }
+
+    .scene-left {
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-start: var(--wa-space-l);
+    }
+
+    .scene-left wa-icon[name='toilet-portable'] {
+      position: relative;
+      inset-block-start: var(--scene-vertical-offset);
+      margin-inline: calc(var(--wa-space-xs) * -1);
+    }
+
+    .scene-left wa-icon[name='traffic-cone'] {
+      position: relative;
+      inset-block-start: var(--scene-vertical-offset);
+    }
+
+    .blocks {
+      position: absolute;
+      inset-inline-end: calc(var(--wa-space-l) * -1);
+      inset-block-end: 0;
+      z-index: 2;
+    }
+
+    .blocks wa-icon[name='block-brick'] {
+      margin-inline: calc(var(--wa-space-xs) * -1);
+    }
+
+    .blocks-bottom {
+      margin-block-start: calc(var(--wa-space-2xs) * -1);
+    }
+
+    wa-icon[family='duotone'] {
+      --secondary-opacity: 1.0;
+    }
+
+    wa-icon[name='bulldozer'],
+    wa-icon[name='excavator'] {
+      --secondary-color: var(--wa-color-brand-70);
+    }
+
+    wa-icon[name='block-brick'],
+    wa-icon[name='toilet-portable'] {
+      --secondary-color: var(--wa-color-neutral-70);
+    }
+  }
+
+  @keyframes driveAcross {
+    0% {
+      left: var(--vehicle-start);
+    }
+    100% {
+      left: var(--vehicle-end);
+    }
+  }
+
+  /* Unique rumble animations for each vehicle type */
+  @keyframes rumble-bulldozer {
+    0%, 100% { transform: translateY(0px) rotate(0deg); }
+    25% { transform: translateY(-1px) rotate(0.5deg); }
+    50% { transform: translateY(1px) rotate(-0.3deg); }
+    75% { transform: translateY(-0.5px) rotate(0.2deg); }
+  }
+
+
+  /* Apply rumble animation to the single vehicle */
+  .vehicle-driving { animation: driveAcross var(--vehicle-duration) linear infinite; }
+  .vehicle wa-icon[name="bulldozer"] { animation: rumble-bulldozer 0.1s ease-in-out infinite; }
+</style>
+
+<wa-page disable-sticky="header" class="background-grid">
+  <header slot="header">
+    <div class="header-content wa-split" style="flex-wrap: nowrap;">
+      <wa-icon variant="brands" name="web-awesome" class="icon-brand-logo"></wa-icon>
+      <div>
+        <wa-button id="contact-us-button" appearance="plain" href="mailto:hello@webawesome.com?subject=Help%2C%20Web%20Awesome">
+          <wa-icon variant="regular" name="headset" label="Need help? Contact Us" class="icon-embiggen"></wa-icon>
+        </wa-button>
+        <wa-tooltip for="contact-us-button" aria-hidden="true">Contact Us</wa-tooltip>
+      </div>
+    </div>
+  </header>
+  <main id="content">
+    <div class="content-container wa-stack wa-gap-xl wa-align-items-center">
+      <h1 class="brand-font wa-stack wa-gap-s heading heading-stacked"  style="text-align: center;">
+        <span class="wa-heading-l heading-stacked-subtitle">
+          under 
+          <span class="wa-visually-hidden">maintenance</span>
+          <span aria-hidden="true">
+            m
+            <wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
+            inten
+            <wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
+            nce
+          </span>
+        </span>
+        <span class="wa-heading-4xl heading-stacked-title">Hey! We're Workin&apos; Here</span>
+      </h1>
+      <p class="copy wa-body-l line-length line-length-m" style="text-align: center;">Mind the <code>wa-gap</code>! webawesome.com is undergoing maintenance and will be back shortly.</p>
+      <div class="wa-grid wa-gap-xl status">
+        <wa-callout appearance="plain" variant="neutral">
+          <wa-icon slot="icon" family="duotone" variant="regular" name="diamond-exclamation" class="icon-embiggen" style="--secondary-opacity: 1; --secondary-color: var(--wa-color-warning-fill-normal);"></wa-icon>
+          <strong>Temporarily Unavailable</strong><br />
+          Access to Docs, Accounts, and Teams
+        </wa-callout>
+        <wa-callout appearance="plain" variant="neutral">
+          <wa-icon slot="icon" family="duotone" variant="regular" name="bolt" class="icon-embiggen" style="--secondary-opacity: 1; --secondary-color: var(--wa-color-success-fill-normal);"></wa-icon>
+          <strong>Fully Operational</strong><br />
+          Services (such as CDNs) and Support
+        </wa-callout>
+      </div>
+      <div class="wa-cluster wa-gap-xs linkies">
+        <h2 class="wa-visually-hidden">Web Awesome Elsewhere</h2>
+        <a href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+          <wa-icon family="brands" name="github" label="GitHub"></wa-icon>
+        </a>
+        <a href="https://bsky.app/profile/webawesome.com" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+          <wa-icon family="brands" name="bluesky" label="Bluesky"></wa-icon>
+        </a>
+        <a href="https://mastodon.social/@webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+          <wa-icon family="brands" name="mastodon" label="Mastodon"></wa-icon>
+        </a>
+        <a href="https://x.com/webawesomer" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+          <wa-icon family="brands" name="x-twitter" label="Twitter (X)"></wa-icon>
+        </a>
+        <a href="https://www.threads.com/@web.awesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+          <wa-icon family="brands" name="threads" label="Threads"></wa-icon>
+        </a>
+        <a href="mailto:hello@webawesome.com?subject=Help%2C%20Web%20Awesome" class="appearance-plain">
+          <wa-icon variant="regular" name="envelope" label="Email Web Awesome"></wa-icon>
+        </a>
+      </div>
+    </div>
+  </main>
+  <div slot="main-footer" class="footer">
+    <div class="scene">
+      <div class="scene-left wa-cluster wa-align-items-end">
+        <wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
+        <div class="wa-cluster wa-gap-0">
+          <wa-icon family="duotone" variant="regular" name="toilet-portable" class="wa-font-size-2xl"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="toilet-portable" class="wa-font-size-2xl"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="toilet-portable" class="wa-font-size-2xl"></wa-icon>
+        </div>
+        <wa-icon family="duotone" variant="regular" name="excavator" class="wa-font-size-3xl"></wa-icon>
+        <wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
+      </div>
+      <div class="blocks wa-stack wa-align-items-center wa-gap-0">
+        <div class="blocks-top wa-cluster wa-gap-0">
+          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
+        </div>
+        <div class="blocks-bottom wa-cluster wa-gap-0">
+          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl"></wa-icon>
+        </div>
+      </div>
+      <div class="track">
+        <wa-icon family="duotone" variant="regular" name="bulldozer" class="spacer-dot-gif wa-font-size-3xl" style="opacity: 0;"></wa-icon>
+        <span class="vehicle vehicle-driving vehicle-with-object">
+          <wa-icon family="duotone" variant="regular" name="bulldozer" class="wa-font-size-3xl"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="block-brick" class="wa-font-size-2xl" style="position: relative; inset-inline-start: calc(var(--wa-space-2xs) * -1);"></wa-icon>
+        </span>
+      </div>
+    </div>
+
+  </div>
+</wa-page>

packages/webawesome/docs/_data/componentList.js

@@ -1,78 +0,0 @@
-/**
- * @module components Fetches components from custom-elements.json and exposes them in a saner format.
- */
-import { readFileSync } from 'fs';
-import { dirname, join, resolve } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const customElementsJSON = process.env.DIST_DIR
-  ? join(process.env.DIST_DIR, 'custom-elements.json')
-  : resolve(__dirname, '../../dist/custom-elements.json');
-
-const manifest = JSON.parse(readFileSync(customElementsJSON), '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;

packages/webawesome/docs/_data/components.js

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

packages/webawesome/docs/_data/hueRanges.js

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

packages/webawesome/docs/_data/hues.json

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

packages/webawesome/docs/_data/palettes.js

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

packages/webawesome/docs/_data/themer.js

@@ -0,0 +1,738 @@
+/**
+ * All themes used in the themer.
+ */
+export const themes = [
+  {
+    //
+    // #region Default
+    //
+    name: 'Default',
+    description: 'Your trusty companion, like a perfectly broken-in pair of jeans.',
+    filename: 'default.css',
+    isPro: false,
+    fonts: {
+      body: {
+        name: 'OS Default (sans-serif)',
+        css: 'ui-sans-serif, system-ui, sans-serif',
+        href: null,
+      },
+      heading: {
+        name: 'OS Default (sans-serif)',
+        css: 'ui-sans-serif, system-ui, sans-serif',
+        href: null,
+      },
+      code: {
+        name: 'OS Default (monospace)',
+        css: 'ui-monospace, monospace',
+        href: null,
+      },
+      longform: {
+        name: 'OS Default (serif)',
+        css: 'ui-serif, serif',
+        href: null,
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1,
+    },
+    palette: {
+      name: 'Default',
+      filename: 'default.css',
+    },
+    colorBrand: {
+      color: 'blue',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'ui-sans-serif, system-ui, sans-serif',
+      '--wa-font-family-heading': 'var(--wa-font-family-body)',
+      '--wa-font-family-code': 'ui-monospace, monospace',
+      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 600,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 1,
+      '--wa-space-scale': 1,
+      '--wa-border-width-scale': 1,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Awesome
+  //
+  {
+    name: 'Awesome',
+    description: 'Punchy and vibrant, the rock star of themes.',
+    filename: 'awesome.css',
+    isPro: false,
+    fonts: {
+      body: {
+        name: 'Quicksand',
+        css: 'Quicksand, sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=Quicksand:wght@300..700&display=swap',
+      },
+      heading: {
+        name: 'Quicksand',
+        css: 'Quicksand, sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=Quicksand:wght@300..700&display=swap',
+      },
+      code: {
+        name: 'OS Default (monospace)',
+        css: 'ui-monospace, monospace',
+        href: null,
+      },
+      longform: {
+        name: 'Crimson Pro',
+        css: '"Crimson Pro", serif',
+        href: 'https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap',
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 2,
+    },
+    palette: {
+      name: 'Bright',
+      filename: 'bright.css',
+    },
+    colorBrand: {
+      color: 'blue',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Quicksand, sans-serif',
+      '--wa-font-family-heading': 'var(--wa-font-family-body)',
+      '--wa-font-family-code': 'ui-monospace, monospace',
+      '--wa-font-family-longform': '"Crimson Pro", serif',
+      '--wa-font-weight-body': 500,
+      '--wa-font-weight-heading': 700,
+      '--wa-font-weight-code': 500,
+      '--wa-font-weight-longform': 500,
+
+      // Elements
+      '--wa-border-radius-scale': 1.5,
+      '--wa-space-scale': 1,
+      '--wa-border-width-scale': 2,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Shoelace
+  //
+  {
+    name: 'Shoelace',
+    description: 'The original, familiar look you know and love from Shoelace.',
+    filename: 'shoelace.css',
+    isPro: false,
+    fonts: {
+      body: {
+        name: 'OS Default (sans-serif)',
+        css: 'ui-sans-serif, system-ui, sans-serif',
+        href: null,
+      },
+      heading: {
+        name: 'OS Default (sans-serif)',
+        css: 'ui-sans-serif, system-ui, sans-serif',
+        href: null,
+      },
+      code: {
+        name: 'OS Default (monospace)',
+        css: 'ui-monospace, monospace',
+        href: null,
+      },
+      longform: {
+        name: 'OS Default (serif)',
+        css: 'ui-serif, serif',
+        href: null,
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1,
+    },
+    palette: {
+      name: 'Shoelace',
+      filename: 'shoelace.css',
+    },
+    colorBrand: {
+      color: 'blue',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'ui-sans-serif, system-ui, sans-serif',
+      '--wa-font-family-heading': 'var(--wa-font-family-body)',
+      '--wa-font-family-code': 'ui-monospace, monospace',
+      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 600,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 0.7,
+      '--wa-space-scale': 1,
+      '--wa-border-width-scale': 1,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Active
+  //
+  {
+    name: 'Active',
+    description: 'Energetic and tactile, always in motion.',
+    filename: 'active.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'Inter',
+        css: 'Inter, sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap',
+      },
+      heading: {
+        name: 'Inter',
+        css: 'Inter, sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap',
+      },
+      code: {
+        name: 'Geist Mono',
+        css: '"Geist Mono", monospace',
+        href: 'https://fonts.bunny.net/css2?family=Geist+Mono:wght@100..900&display=swap',
+      },
+      longform: {
+        name: 'Aleo',
+        css: 'Aleo, serif',
+        href: 'https://fonts.bunny.net/css2?family=Aleo:ital,wght@0,100..900;1,100..900&display=swap',
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1,
+    },
+    palette: {
+      name: 'Rudimentary',
+      filename: 'rudimentary.css',
+    },
+    colorBrand: {
+      color: 'green',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Inter, sans-serif',
+      '--wa-font-family-heading': 'var(--wa-font-family-body)',
+      '--wa-font-family-code': '"Geist Mono", monospace',
+      '--wa-font-family-longform': 'Aleo, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 650,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 1.75,
+      '--wa-space-scale': 1,
+      '--wa-border-width-scale': 1,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Brutalist
+  //
+  {
+    name: 'Brutalist',
+    description: 'Sharp, square, and unapologetically bold.',
+    filename: 'brutalist.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'Space Grotesk',
+        css: '"Space Grotesk", sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=Space+Grotesk:wght@300..700&display=swap',
+      },
+      heading: {
+        name: 'IBM Plex Sans Condensed',
+        css: '"IBM Plex Sans Condensed", sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap',
+      },
+      code: {
+        name: 'Space Mono',
+        css: '"Space Mono", monospace',
+        href: 'https://fonts.bunny.net/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
+      },
+      longform: {
+        name: 'Podkova',
+        css: 'Podkova, serif',
+        href: 'https://fonts.bunny.net/css2?family=Podkova:wght@400..800&display=swap',
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 2,
+    },
+    palette: {
+      name: 'Default',
+      filename: 'default.css',
+    },
+    colorBrand: {
+      color: 'blue',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Space Grotesk, sans-serif',
+      '--wa-font-family-heading': 'IBM Plex Sans Condensed, sans-serif',
+      '--wa-font-family-code': 'Space Mono, monospace',
+      '--wa-font-family-longform': 'Podkova, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 500,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 0,
+      '--wa-space-scale': 1.125,
+      '--wa-border-width-scale': 2,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Glossy
+  //
+  {
+    name: 'Glossy',
+    description: 'Bustling with plenty of luster and shine.',
+    filename: 'glossy.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'Figtree',
+        css: 'Figtree, sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap',
+      },
+      heading: {
+        name: 'Figtree',
+        css: 'Figtree, sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap',
+      },
+      code: {
+        name: 'Chivo Mono',
+        css: '"Chivo Mono", monospace',
+        href: 'https://fonts.bunny.net/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&display=swap',
+      },
+      longform: {
+        name: 'Fraunces',
+        css: 'Fraunces, serif',
+        href: 'https://fonts.bunny.net/css2?family=Fraunces:ital,wght@0,100..900;1,100..900&display=swap',
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1,
+    },
+    palette: {
+      name: 'Elegant',
+      filename: 'elegant.css',
+    },
+    colorBrand: {
+      color: 'indigo',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Figtree, sans-serif',
+      '--wa-font-family-heading': 'var(--wa-font-family-body)',
+      '--wa-font-family-code': '"Chivo Mono", monospace',
+      '--wa-font-family-longform': 'Fraunces, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 800,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 350,
+
+      // Elements
+      '--wa-border-radius-scale': 1.33,
+      '--wa-space-scale': 1.125,
+      '--wa-border-width-scale': 1,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Matter
+  //
+  {
+    name: 'Matter',
+    description: 'Digital design inspired by the real world.',
+    filename: 'matter.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'Wix Madefor Text',
+        css: '"Wix Madefor Text", sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
+      },
+      heading: {
+        name: 'Wix Madefor Text',
+        css: '"Wix Madefor Text", sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
+      },
+      code: {
+        name: 'Roboto Mono',
+        css: '"Roboto Mono", monospace',
+        href: 'https://fonts.bunny.net/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap',
+      },
+      longform: {
+        name: 'Roboto Serif',
+        css: '"Roboto Serif", serif',
+        href: 'https://fonts.bunny.net/css2?family=Roboto+Serif:ital,wght@0,100..900;1,100..900&display=swap',
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1,
+    },
+    palette: {
+      name: 'Mild',
+      filename: 'mild.css',
+    },
+    colorBrand: {
+      color: 'purple',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Wix Madefor Text, sans-serif',
+      '--wa-font-family-heading': 'var(--wa-font-family-body)',
+      '--wa-font-family-code': 'Roboto Mono, monospace',
+      '--wa-font-family-longform': 'Roboto Serif, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 500,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 1.33,
+      '--wa-space-scale': 1,
+      '--wa-border-width-scale': 1,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Mellow
+  //
+  {
+    name: 'Mellow',
+    description: 'Soft and soothing, like a lazy Sunday morning.',
+    filename: 'mellow.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'Mulish',
+        css: 'Mulish, sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap',
+      },
+      heading: {
+        name: 'Lora',
+        css: 'Lora, serif',
+        href: 'https://fonts.bunny.net/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap',
+      },
+      code: {
+        name: 'OS Default (monospace)',
+        css: 'ui-monospace, monospace',
+        href: null,
+      },
+      longform: {
+        name: 'Lora',
+        css: 'Lora, serif',
+        href: 'https://fonts.bunny.net/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap',
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1.5,
+    },
+    palette: {
+      name: 'Natural',
+      filename: 'natural.css',
+    },
+    colorBrand: {
+      color: 'blue',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Mulish, sans-serif',
+      '--wa-font-family-heading': 'Lora, serif',
+      '--wa-font-family-code': 'ui-monospace, monospace',
+      '--wa-font-family-longform': 'Lora, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 700,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 1,
+      '--wa-space-scale': 1.125,
+      '--wa-border-width-scale': 1.5,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Playful
+  //
+  {
+    name: 'Playful',
+    description: 'Cheerful and engaging, like a playground on screen.',
+    filename: 'playful.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'Nunito',
+        css: 'Nunito, sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
+      },
+      heading: {
+        name: 'Fredoka',
+        css: 'Fredoka, sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=Fredoka:wght@300..700&display=swap',
+      },
+      code: {
+        name: 'Azeret Mono',
+        css: '"Azeret Mono", monospace',
+        href: 'https://fonts.bunny.net/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap',
+      },
+      longform: {
+        name: 'BioRhyme',
+        css: 'BioRhyme, serif',
+        href: 'https://fonts.bunny.net/css2?family=BioRhyme:wght@200..800&display=swap',
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 3,
+    },
+    palette: {
+      name: 'Rudimentary',
+      filename: 'rudimentary.css',
+    },
+    colorBrand: {
+      color: 'purple',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Nunito, sans-serif',
+      '--wa-font-family-heading': 'Fredoka, sans-serif',
+      '--wa-font-family-code': 'Azeret Mono, monospace',
+      '--wa-font-family-longform': 'BioRhyme, serif',
+      '--wa-font-weight-body': 500,
+      '--wa-font-weight-heading': 600,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 2,
+      '--wa-space-scale': 1,
+      '--wa-border-width-scale': 3,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Premium
+  //
+  {
+    name: 'Premium',
+    description: 'The ultimate in sophistication and style.',
+    filename: 'premium.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'DM Sans',
+        css: '"DM Sans", sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=DM+Sans:ital,wght@0,100..1000;1,100..1000&display=swap',
+      },
+      heading: {
+        name: 'Playfair Display',
+        css: '"Playfair Display", serif',
+        href: 'https://fonts.bunny.net/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap',
+      },
+      code: {
+        name: 'OS Default (monospace)',
+        css: 'ui-monospace, monospace',
+        href: null,
+      },
+      longform: {
+        name: 'Playfair',
+        css: 'Playfair, serif',
+        href: 'https://fonts.bunny.net/css2?family=Playfair:ital,wght@0,300..900;1,300..900&display=swap',
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1.5,
+    },
+    palette: {
+      name: 'Anodized',
+      filename: 'anodized.css',
+    },
+    colorBrand: {
+      color: 'cyan',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'DM Sans, sans-serif',
+      '--wa-font-family-heading': 'Playfair Display, serif',
+      '--wa-font-family-code': 'ui-monospace, monospace',
+      '--wa-font-family-longform': 'Playfair, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 500,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 0.5,
+      '--wa-space-scale': 1,
+      '--wa-border-width-scale': 1.5,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Tailspin
+  //
+  {
+    name: 'Tailspin',
+    description: 'Like a bird in flight, guiding you from there to here.',
+    filename: 'tailspin.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'Inter',
+        css: 'Inter, sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap',
+      },
+      heading: {
+        name: 'Inter',
+        css: 'Inter, sans-serif',
+        href: 'https://fonts.bunny.net/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap',
+      },
+      code: {
+        name: 'OS Default (monospace)',
+        css: 'ui-monospace, monospace',
+        href: null,
+      },
+      longform: {
+        name: 'OS Default (serif)',
+        css: 'ui-serif, serif',
+        href: null,
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1,
+    },
+    palette: {
+      name: 'Vogue',
+      filename: 'vogue.css',
+    },
+    colorBrand: {
+      color: 'indigo',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Inter, sans-serif',
+      '--wa-font-family-heading': 'var(--wa-font-family-body)',
+      '--wa-font-family-code': 'ui-monospace, monospace',
+      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 700,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 1,
+      '--wa-space-scale': 0.875,
+      '--wa-border-width-scale': 1,
+    },
+  },
+  // #endregion
+];
+
+/**
+ * All fonts used by themes, collected from the four font categories.
+ */
+export const fonts = themes
+  .flatMap(theme => [theme.fonts.body, theme.fonts.heading, theme.fonts.code, theme.fonts.longform])
+  .filter(
+    (font, index, array) =>
+      array.findIndex(f => f.name === font.name && f.css === font.css && f.href === font.href) === index,
+  );
+
+/**
+ * Font presets derived from themes, with unique font names in order: heading > body > code > longform
+ */
+export const fontPresets = themes
+  .map(theme => {
+    const fontNames = [
+      theme.fonts.heading.name,
+      theme.fonts.body.name,
+      theme.fonts.code.name,
+      theme.fonts.longform.name,
+    ];
+    const uniqueFonts = fontNames.filter((name, index) => fontNames.indexOf(name) === index);
+
+    return {
+      name: theme.name,
+      displayName: uniqueFonts.join(' · '),
+      fontFamilyBody: theme.fonts.body.css,
+      fontFamilyHeading: theme.fonts.heading.css,
+      fontFamilyCode: theme.fonts.code.css,
+      fontFamilyLongform: theme.fonts.longform.css,
+      fontWeightBody: theme.tokens['--wa-font-weight-body'],
+      fontWeightHeading: theme.tokens['--wa-font-weight-heading'],
+      fontWeightCode: theme.tokens['--wa-font-weight-code'],
+      fontWeightLongform: theme.tokens['--wa-font-weight-longform'],
+    };
+  })
+  .filter((preset, index, array) => array.findIndex(p => p.displayName === preset.displayName) === index);
+
+/**
+ * Element presets derived from themes.
+ */
+export const elementPresets = themes.map(theme => ({
+  name: theme.name,
+  borderRadiusScale: theme.tokens['--wa-border-radius-scale'],
+  spaceScale: theme.tokens['--wa-space-scale'],
+  borderWidthScale: theme.tokens['--wa-border-width-scale'],
+}));
+
+/**
+ * All palettes used by themes in a simple array.
+ */
+export const palettes = themes
+  .map(theme => ({
+    ...theme.palette,
+    isPro: theme.isPro,
+  }))
+  .filter(
+    (palette, index, array) =>
+      array.findIndex(p => p.name === palette.name && p.filename === palette.filename) === index,
+  );
+
+/**
+ * Available icons.
+ */
+export const icons = [
+  { name: 'Classic', libraryName: 'classic' },
+  { name: 'Sharp', libraryName: 'sharp' },
+  { name: 'Duotone', libraryName: 'duotone' },
+  { name: 'Sharp Duotone', libraryName: 'sharp-duotone' },
+];
+
+export const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'];
+export const tints = ['95', '90', '80', '70', '60', '50', '40', '30', '20', '10', '05'];

packages/webawesome/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', '');
-}

packages/webawesome/docs/_includes/_banner-wa-launch.njk

@@ -0,0 +1,19 @@
+{% raw %}
+  {%- if not currentUser.hasPro -%}
+  <div slot="banner" class="banner-wa-launch wa-dark">
+    <div class="banner-content wa-split">
+      <div class="wa-cluster wa-gap-s">
+        <wa-icon name="badge-percent" class="banner-icon"></wa-icon>
+        <p class="wa-body-s">
+          <strong style="margin-inline-end: var(--wa-space-2xs)">Web Awesome is here!</strong>
+          Celebrate with <span class="appearance-underlined variant-drawn">20% off</span> on a Web Awesome Pro plan&hellip; <span class="appearance-underlined variant-drawn">for life</span>!
+        </p>
+      </div>
+      <wa-button appearance="outlined" variant="brand" size="small" href="/purchase" class="brand-font">
+        <wa-icon slot="start" variant="regular" name="rocket-launch"></wa-icon>
+        Get Pro + Save 20%
+      </wa-button>
+    </div>
+  </div>
+  {%- endif -%}
+{% endraw %}

packages/webawesome/docs/_includes/base.njk

@@ -1,5 +1,8 @@
 <!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
+{% if hasAnchors == undefined %}{% set hasAnchors = true %}{% endif %}
+{% if hasBanner == undefined %}{% set hasBanner = true %}{% endif %}
+{% if hasGeneratedTitle == undefined %}{% set hasGeneratedTitle = true %}{% endif %}
+<html lang="en" data-fa-kit-code="38c11e3f20" data-version="{{ package.version }}" class="wa-cloak"{% if hasAnchors == false %} data-no-anchor{% endif %}>
   <head>
     {% include 'head.njk' %}
     <meta name="theme-color" content="#f36944">
@@ -8,61 +11,85 @@
     <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/search-list.js"></script>
     <script type="module" src="/assets/scripts/outline.js"></script>
+    <script type="module" src="/assets/scripts/color-scheme.js"></script>
+    <script type="module" src="/assets/scripts/theme.js"></script>
     {% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar.js"></script>{% endif %}
-    {% 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>
+    <script defer data-domain="webawesome.com" src="https://plausible.io/js/script.js"></script>
 
-    {# Docs styles #}
-    <link rel="stylesheet" href="/assets/styles/docs.css" />
+    {% block head %}
+      <link rel="stylesheet" href="/assets/styles/docs.css" />
+    {% endblock %}
 
-    {% block head %}{% endblock %}
+    <script type="module">
+      // Set the initial color scheme before the page renders to prevent flashing
+      const value = localStorage.getItem('color-scheme') || 'auto';
+      const isDark = value === 'dark' || (value === 'auto' && matchMedia('(prefers-color-scheme: dark)').matches);
+      document.documentElement.classList.toggle('wa-dark', isDark);
+    </script>
   </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="1180">
-      <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>
+  <body class="layout-{{ layout | stripExtension }} page-{{ pageClass or page.fileSlug or 'home' }}{{ ' page-wide' if wide }}">
 
-          <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>
+    {% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180, 'disable-sticky': 'banner' } %}
+    {% set waPageAttributes = waPageAttributes or {} %}
+    {% set mergedWaPageAttributes = defaultWaPageAttributes | merge(waPageAttributes) %}
+    <wa-page
+      {% for key, value in mergedWaPageAttributes %}
+        {% if value != null and value != false %}
+          {{ key }}="{{ value }}"
+        {% endif %}
+      {% endfor %}
+    >
+        {% block pageBanner %}
+          {% if hasBanner %}
+            {#- WA Launch Banner -#}
+            {% include "_banner-wa-launch.njk" ignore missing %}
+          {% endif %}
+        {% endblock %}
 
-        <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>
+        {% block pageHeader %}
+          <header slot="header" class="wa-split">
+            {# Nav toggle #}
+              <wa-button appearance="plain" size="small" data-toggle-nav>
+                <wa-icon name="bars" label="Toggle navigation" class="icon-default icon-embiggen"></wa-icon>
+                <wa-icon name="burger" aria-hidden="true" class="icon-hover icon-embiggen"></wa-icon>
+              </wa-button>
 
-          {# Search #}
-          <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
-            <wa-icon slot="start" name="magnifying-glass"></wa-icon>
-            Search
-            <kbd slot="end" class="wa-desktop-only">/</kbd>
-          </wa-button>
+              {# Logo - Desktop #}
+              <a class="brand-logo wa-desktop-only" href="/" aria-label="Web Awesome">
+                {% include "logo.njk" %}
+              </a>
 
-          {# Login #}
-          {% server "loginOrAvatar" %}
-        </div>
-      </header>
+            {#- Logo - mobile branding -#}
+            <a href="/" class="brand-logo wa-mobile-only" aria-label="Web Awesome">
+              {# Logo - Mobile #}
+              {% include "logo-simple.njk" %}
+            </a>
+
+            <div id="docs-toolbar" class="wa-cluster gap-s">
+              <div class="wa-desktop-only wa-cluster wa-gap-2xs">
+                {% include "theme-selector.njk" %}
+                {% include "color-scheme-selector.njk" %}
+                {% include "github-icon-buttons.njk" %}
+              </div>
+              {#- Login -#}
+              {% include "login-or-avatar.njk" ignore missing %}
+            </div>
+          </header>
+        {% endblock %}
 
       {# 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 class="wa-cluster wa-gap-s">
+            <a class="brand-logo" href="/" aria-label="Web Awesome">{% include "logo-simple.njk" %}</a>
+            <div class="wa-cluster wa-gap-2xs" style="flex-wrap: nowrap;">
+              {% include "theme-selector.njk" %}
+              {% include "color-scheme-selector.njk" %}
+              {% include "github-icon-buttons.njk" %}
+            </div>
           </div>
         </div>
         <div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
@@ -79,7 +106,6 @@
         </aside>
       {% endif %}
 
-
       {# Main #}
       <main id="content">
         {# Expandable outline #}
@@ -94,10 +120,13 @@
         <div id="flashes">{% server "flashes" %}</div>
 
         {% block header %}
-          {% include 'breadcrumbs.njk' %}
-          <h1 class="title">{{ title }}</h1>
+          {% if hasGeneratedTitle %}
+            <h1 class="title">{{ title }}</h1>
+          {% endif %}
         {% endblock %}
 
+        {% block beforeContent %}{% endblock %}
+
         {% block content %}
           {{ content | safe }}
         {% endblock %}
@@ -106,6 +135,9 @@
       </main>
 
       {% include 'search.njk' %}
+
+      {# Footer #}
+      {% block pageFooter %}{% endblock %}
     </wa-page>
 
   </body>

packages/webawesome/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 %}

packages/webawesome/docs/_includes/color-scheme-selector.njk

@@ -1,19 +1,35 @@
-{# 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="start" name="sun" variant="regular"></wa-icon>
-  <wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
-  <wa-option value="light">
-    <wa-icon slot="start" name="sun" variant="regular"></wa-icon>
+<wa-dropdown class="color-scheme-selector" title="Press \ to toggle">
+  <wa-button slot="trigger" id="color-scheme-selector-trigger" appearance="plain">
+    <wa-icon name="sun-bright" variant="regular" class="icon-embiggen only-light"></wa-icon>
+    <wa-icon name="moon-stars" variant="regular" class="icon-embiggen only-dark"></wa-icon>
+  </wa-button>
+  <wa-dropdown-item value="light">
+    <wa-icon slot="icon" name="sun-bright" variant="regular" class="icon-embiggen"></wa-icon>
     Light
-  </wa-option>
-  <wa-option value="dark">
-    <wa-icon slot="start" name="moon" variant="regular"></wa-icon>
+  </wa-dropdown-item>
+  <wa-dropdown-item value="dark">
+    <wa-icon slot="icon" name="moon-stars" variant="regular" class="icon-embiggen"></wa-icon>
     Dark
-  </wa-option>
+  </wa-dropdown-item>
   <wa-divider></wa-divider>
-  <wa-option value="auto">
-    <wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
-    <wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
+  <wa-dropdown-item value="auto">
+    <wa-icon  slot="icon" name="sun-bright" variant="regular" class="only-light icon-embiggen"></wa-icon>
+    <wa-icon slot="icon" name="moon-stars" variant="regular" class="only-dark icon-embiggen"></wa-icon>
     System
-  </wa-option>
-</wa-select>
+  </wa-dropdown-item>
+</wa-dropdown>
+<wa-tooltip for="color-scheme-selector-trigger" id="color-scheme-tooltip">Select Color Scheme</wa-tooltip>
+
+<script>
+  // Handle dropdown selection and trigger input event for color-scheme.js
+  document.querySelectorAll('wa-dropdown.color-scheme-selector').forEach(el => {
+    el.addEventListener('wa-select', (event) => {
+      const selectedValue = event.detail.item.value;
+
+      // Trigger input event for color-scheme.js
+      el.value = selectedValue;
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+  });
+</script>
+

packages/webawesome/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>

packages/webawesome/docs/_includes/free-badge.njk

@@ -0,0 +1,7 @@
+{% macro freeBadge(params) %}
+  {% set description = params.description or "This feature is available in the free version of Web Awesome" %}
+  {% set badgeId = params.id or ("free-badge-" + ("" | uniqueId(8))) %}
+  <wa-badge appearance="filled" variant="neutral" pill class="free" id="{{ badgeId }}" data-free-badge>Free</wa-badge>
+  <wa-tooltip for="{{ badgeId }}">{{ description }}</wa-tooltip>
+{% endmacro %}
+

packages/webawesome/docs/_includes/github-icon-buttons.njk

@@ -0,0 +1,8 @@
+<wa-button id="github-repo-button" href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" appearance="plain">
+  <wa-icon family="brands" name="github" label="View Repository on GitHub" class="icon-embiggen"></wa-icon>
+</wa-button>
+<wa-tooltip for="github-repo-button" distance="2">View on GitHub</wa-tooltip>
+<wa-button id="github-star-button" href="https://github.com/shoelace-style/webawesome/stargazers" rel="noopener noreferrer" target="_blank" appearance="plain">
+  <wa-icon name="star" variant="regular" label="Star Repository on GitHub" class="icon-embiggen"></wa-icon>
+</wa-button>
+<wa-tooltip for="github-star-button" distance="2">Star on GitHub</wa-tooltip>

packages/webawesome/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>

packages/webawesome/docs/_includes/head.njk

@@ -3,7 +3,17 @@
 <meta name="description" content="{{ description }}">
 {% if noindex or unlisted %}<meta name="robots" content="noindex">{% endif %}
 
-<title>{{ title }}</title>
+<title>{{ pageTitle }}</title>
+
+{# Skip OG tags for unlisted/noindex pages to prevent social sharing #}
+{% if not (noindex or unlisted) %}
+  <meta property="og:type" content="{{ ogType }}" />
+  <meta property="og:url" content="{{ ogUrl }}" />
+  <meta property="og:title" content="{{ ogTitle }}" />
+  <meta property="og:description" content="{{ ogDescription }}" />
+  <meta property="og:image" content="{{ ogImage }}" />
+  <meta property="og:site_name" content="{{ siteMetadata.name }}" />
+{% endif %}
 
 {# Dark mode #}
 <script>
@@ -15,54 +25,29 @@
 	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">
+<link rel="manifest" href="/manifest.json" />
+<link rel="icon" href="/assets/images/app-icons/favicon.ico" sizes="any">
+<link rel="icon" href="/assets/images/app-icons/icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/assets/images/app-icons/apple-touch-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>
 
-{# Fallback loading when using the free repo #}
-<link rel="preconnect" href="https://early.webawesome.com">
+<link id="theme-stylesheet" rel="stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high" />
+
+<link rel="stylesheet" href="/dist/styles/webawesome.css" />
+
 <script type="module">
-  document.addEventListener("wa-discovery-complete", loadLayout)
+  document.addEventListener('wa-discovery-complete', loadLayout)
   function loadLayout () {
-    if (!customElements.get("wa-page")) {
-      import("https://early.webawesome.com/webawesome@3.0.0-alpha.13/dist/components/page/page.js")
+    if (!customElements.get('wa-page')) {
+      import('https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/components/page/page.js')
         .catch((e) => {
-          console.error(e)
-        // known errors with dual registration. This is only a thing in the free repo.
+          // known errors with dual registration. This is only a thing in the free repo.
         })
     }
   }
 </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" />
-
 {# Used by Web Awesome App to inject other assets into the head. #}
 {% server "head" %}

packages/webawesome/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>

packages/webawesome/docs/_includes/logo-simple.njk

@@ -1,3 +1 @@
-<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z" fill="var(--wa-brand-orange, #f36944)"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" fill="none" viewBox="0 0 20 15"><path fill="var(--wa-brand-orange, #f36944)" d="M11.63 1.625c0 .654-.387 1.218-.944 1.476L14 6l3.262-.652A1.5 1.5 0 1 1 18.55 6l-3.52 7.82A2 2 0 0 1 13.208 15H6.793a2 2 0 0 1-1.824-1.18L1.45 6a1.5 1.5 0 1 1 1.289-.652L6 6l3.317-2.902a1.625 1.625 0 1 1 2.313-1.473"/></svg>

packages/webawesome/docs/_includes/logo.njk

@@ -1,13 +1 @@
-<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>
+<svg xmlns="http://www.w3.org/2000/svg" width="105" height="16" fill="none" viewBox="0 0 105 16"><path fill="currentColor" d="M78.052 11.86c.412.386 1.175.64 1.816.64 1.193 0 2.122-.667 2.122-1.807 0-.85-.517-1.342-1.482-1.746l-.667-.28c-.36-.15-.5-.255-.5-.474 0-.263.22-.368.518-.368.31 0 .479.13.633.25q.057.044.112.083a.64.64 0 0 0 .386.132c.334 0 .676-.29.676-.676a.66.66 0 0 0-.176-.447C81.35 7 80.86 6.49 79.841 6.5c-1.149 0-2.026.676-2.026 1.71 0 .816.544 1.343 1.465 1.746l.596.263c.404.176.588.264.588.535 0 .281-.193.422-.596.422-.504 0-.843-.28-1.02-.424q-.053-.045-.086-.068a.63.63 0 0 0-.342-.105.673.673 0 0 0-.675.667c0 .228.114.43.307.614M97.912 7.28c0-.447-.316-.78-.755-.78-.307 0-.517.15-.763.553l-1.43 2.298-1.43-2.298c-.245-.404-.456-.553-.763-.553-.438 0-.754.333-.754.78v4.457a.74.74 0 0 0 .754.763.74.74 0 0 0 .755-.763V9.71l.754 1.201c.21.334.403.465.684.465.28 0 .474-.131.684-.465l.755-1.201v2.026a.74.74 0 0 0 .754.763.74.74 0 0 0 .755-.763zM100.516 11.632c0 .438.324.763.763.763h2.754a.67.67 0 0 0 .693-.684c0-.386-.289-.676-.693-.676h-2.009v-1.009h1.211a.62.62 0 0 0 .64-.631.62.62 0 0 0-.64-.632h-1.211v-.798h1.904a.67.67 0 0 0 .693-.684c0-.386-.29-.676-.693-.676h-2.649a.74.74 0 0 0-.763.764z"/><path fill="currentColor" fill-rule="evenodd" d="M86.878 6.5c1.754 0 3.131 1.325 3.131 3 0 1.684-1.377 3-3.131 3s-3.114-1.316-3.114-3 1.368-3 3.114-3m.009 1.386c-.939 0-1.58.658-1.58 1.614 0 .965.632 1.614 1.58 1.614.93 0 1.579-.667 1.579-1.614 0-.939-.658-1.614-1.58-1.614" clip-rule="evenodd"/><path fill="currentColor" d="M72.172 12.395a.74.74 0 0 1-.763-.763V7.369c0-.44.325-.764.763-.764h2.65c.403 0 .692.29.692.676a.67.67 0 0 1-.693.684h-1.903v.798h1.21a.62.62 0 0 1 .64.632.62.62 0 0 1-.64.631h-1.21v1.01h2.008c.404 0 .693.289.693.675a.67.67 0 0 1-.693.684zM69.443 7.237a.75.75 0 0 0-.754-.737.72.72 0 0 0-.702.5l-1.044 2.86-.965-2.79c-.131-.368-.395-.57-.745-.57-.351 0-.615.202-.746.57l-.965 2.79-1.053-2.886c-.105-.298-.368-.474-.693-.474a.75.75 0 0 0-.754.737c0 .105.018.202.079.342l1.71 4.412c.123.334.369.509.702.509.325 0 .57-.175.693-.509l1.026-2.78 1.027 2.78c.123.334.368.509.693.509.333 0 .579-.175.701-.509l1.711-4.412a.9.9 0 0 0 .079-.342"/><path fill="currentColor" fill-rule="evenodd" d="M60.027 11.412c.053.132.079.263.079.369 0 .412-.316.719-.746.719-.324 0-.57-.184-.71-.544l-.123-.307h-2.07l-.123.307c-.14.36-.386.544-.71.544-.43 0-.746-.307-.746-.72 0-.104.026-.236.079-.368L56.773 7c.131-.324.377-.5.719-.5s.588.176.72.5zm-2.535-2.666-.588 1.693h1.176z" clip-rule="evenodd"/><path fill="currentColor" d="M35.667 6.5a.75.75 0 0 1 .754.737c0 .114-.026.21-.08.342l-1.71 4.412c-.122.334-.368.509-.701.509-.325 0-.57-.175-.693-.509l-1.027-2.78-1.026 2.78c-.123.334-.368.509-.693.509-.333 0-.579-.175-.702-.509L28.08 7.58A.8.8 0 0 1 28 7.237a.75.75 0 0 1 .754-.737c.325 0 .588.176.693.474L30.5 9.86l.965-2.79c.131-.368.395-.57.745-.57.351 0 .614.202.746.57l.965 2.79L34.965 7a.72.72 0 0 1 .701-.5M38.387 11.632c0 .438.324.763.763.763h2.754c.395 0 .693-.29.693-.684 0-.386-.29-.676-.693-.676h-2.008v-1.009h1.21a.62.62 0 0 0 .64-.631.62.62 0 0 0-.64-.632h-1.21v-.798h1.903a.67.67 0 0 0 .693-.684c0-.386-.29-.676-.693-.676H39.15a.74.74 0 0 0-.763.764z"/><path fill="currentColor" fill-rule="evenodd" d="M49.502 10.675c0-.657-.36-1.14-.965-1.385.228-.255.351-.588.351-.974 0-1-.816-1.71-1.956-1.71h-1.325a.74.74 0 0 0-.763.763v4.263c0 .438.325.763.764.763h1.938c1.132 0 1.956-.72 1.956-1.72m-3.21-2.798h.544c.35 0 .578.193.578.509s-.228.509-.578.509h-.544zm1.736 2.737c0 .325-.21.509-.578.509h-1.158v-1.018h1.158c.368 0 .578.184.578.509" clip-rule="evenodd"/><path fill="var(--wa-brand-orange, #f36944)" d="M11.63 1.625c0 .654-.387 1.218-.944 1.476L14 6l3.262-.652A1.5 1.5 0 1 1 18.55 6l-3.52 7.82A2 2 0 0 1 13.208 15H6.793a2 2 0 0 1-1.824-1.18L1.45 6a1.5 1.5 0 1 1 1.289-.652L6 6l3.317-2.902a1.625 1.625 0 1 1 2.313-1.473"/></svg>

packages/webawesome/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 %}

packages/webawesome/docs/_includes/page-demo.njk

@@ -1,25 +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-zoomable-frame srcdoc="" zoom="0.5" id="page_slots_iframe"></wa-zoomable-frame>
-</div>
-
-<script type="module">
-  const cacheBust = new Date().toString()
-  import(`/docs/components/page/demo.js?${cacheBust}`)
-</script>

packages/webawesome/docs/_includes/planned-badge.njk

@@ -0,0 +1,5 @@
+{% macro plannedBadge(plannedBadgeDescription, plannedBadgeId) %}
+  {% set badgeId = plannedBadgeId or ("planned-badge-" + ("" | uniqueId(8))) %}
+  <wa-badge appearance="filled" variant="neutral" pill class="planned" id="{{ badgeId }}">Planned</wa-badge>
+  <wa-tooltip for="{{ badgeId }}">{{ plannedBadgeDescription or "This is a planned feature" }}</wa-tooltip>
+{% endmacro %}

packages/webawesome/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="start" 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>

packages/webawesome/docs/_includes/pro-badge.njk

@@ -0,0 +1,6 @@
+{% macro proBadge(params) %}
+  {% set description = params.description or "This requires access to Web Awesome Pro" %}
+  {% set badgeId = params.id or ("pro-badge-" + ("" | uniqueId(8))) %}
+  <wa-badge appearance="accent" pill class="pro" id="{{ badgeId }}" data-pro-badge>Pro</wa-badge>
+  <wa-tooltip for="{{ badgeId }}">{{ description }}</wa-tooltip>
+{% endmacro %}

packages/webawesome/docs/_includes/search-trigger-button.njk

@@ -0,0 +1,5 @@
+<wa-button id="search-trigger" appearance="outlined" size="small" data-search>
+  <wa-icon slot="start" name="magnifying-glass"></wa-icon>
+  Search the Docs for&hellip;
+  <kbd slot="end" class="wa-desktop-only">/</kbd>
+</wa-button>

packages/webawesome/docs/_includes/sidebar.njk

@@ -1,3 +1,8 @@
+{# Search #}
+{% include "search-trigger-button.njk" %}
+{% from "pro-badge.njk" import proBadge %}
+{% from "planned-badge.njk" import plannedBadge %}
+
 {# Getting started #}
 <h2>Getting Started</h2>
 <ul>
@@ -11,80 +16,39 @@
 {# 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/support">Help & Support</a></li>
+  <li><a href="https://github.com/shoelace-style/webawesome/">Source Code</a></li>
+  <li>
+    <span class="wa-split">
+      <a href="/docs/resources/figma">Figma Design Kit</a></li>
+      {{ proBadge() }}
+    </span>
+  </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>
 
-<!-- Themes -->
-<wa-details appearance="outlined">
-  <h2 slot="summary">
-    <a href="/docs/themes/" title="Overview">
-      Themes
-      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
-    </a>
-  </h2>
-  <ul>
-    <li><a href="/docs/themes/default/">Default</a></li>
-    <li><a href="/docs/themes/shoelace/">Shoelace</a></li>
-    <li><a href="/docs/themes/awesome/">Awesome</a></li>
-    <li>
-      <a href="/docs/themes/active/">Active</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-    <li>
-      <a href="/docs/themes/brutalist/">Brutalist</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-    <li>
-      <a href="/docs/themes/glossy/">Glossy</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-    <li>
-      <a href="/docs/themes/matter/">Matter</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-    <li>
-      <a href="/docs/themes/mellow/">Mellow</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-    <li>
-      <a href="/docs/themes/playful/">Playful</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-    <li>
-      <a href="/docs/themes/premium/">Premium</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-    <li>
-      <a href="/docs/themes/tailspin/">Tailspin</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-    <li>
-      <a href="/docs/themes/custom/">Custom</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-    <li><a href="/docs/themes/creating/">Creating Themes</a></li>
-  </ul>
-</wa-details>
+
+</ul>
 
 <!-- Components -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a href="/docs/components/" title="Overview">
-      Components
+    <a class="wa-cluster wa-gap-xs" href="/docs/components/" title="Overview">
       <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Components
     </a>
   </h2>
   <ul>
     <li>
-      <a href="/docs/components/page/">Page</a>
-      <wa-icon name="flask" aria-hidden="true"></wa-icon>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <span class="wa-split">
+        <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
+          Page <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
+        </a>
+        {{ proBadge() }}
+      </span>
     </li>
     <li><a href="/docs/components/animated-image/">Animated Image</a></li>
     <li><a href="/docs/components/animation/">Animation</a></li>
@@ -101,22 +65,32 @@
     <li><a href="/docs/components/callout/">Callout</a></li>
     <li><a href="/docs/components/card/">Card</a></li>
     <li>
-      <a href="/docs/components/carousel/">Carousel</a>
-      <wa-icon name="flask" aria-hidden="true"></wa-icon>
+      <a class="wa-cluster wa-gap-xs" href="/docs/components/carousel/">
+        Carousel
+        <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
+      </a>
       <ul>
         <li>
-          <a href="/docs/components/carousel-item/">Carousel Item</a>
-          <wa-icon name="flask" aria-hidden="true"></wa-icon>
+          <a class="wa-cluster wa-gap-xs" href="/docs/components/carousel-item/">
+            Carousel Item
+            <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
+          </a>
         </li>
       </ul>
     </li>
+    <li><span class="is-planned wa-split">Charts <a href="https://github.com/shoelace-style/webawesome/issues/1073" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/checkbox/">Checkbox</a></li>
     <li><a href="/docs/components/color-picker/">Color Picker</a></li>
+    <li><span class="is-planned wa-split">Combobox <a href="https://github.com/shoelace-style/webawesome/issues/1074" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/comparison/">Comparison</a></li>
     <li>
-      <a href="/docs/components/copy-button/">Copy Button</a>
-      <wa-icon name="flask" aria-hidden="true"></wa-icon>
+      <a class="wa-cluster wa-gap-xs" href="/docs/components/copy-button/">
+        Copy Button
+        <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
+      </a>
     </li>
+    <li><span class="is-planned wa-split">Data Grid <a href="https://github.com/shoelace-style/webawesome/issues/1072" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
+    <li><span class="is-planned wa-split">Datepicker <a href="https://github.com/shoelace-style/webawesome/issues/1075" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/details/">Details</a></li>
     <li><a href="/docs/components/dialog/">Dialog</a></li>
     <li><a href="/docs/components/divider/">Divider</a></li>
@@ -127,13 +101,16 @@
         <li><a href="/docs/components/dropdown-item">Dropdown Item</a></li>
       </ul>
     </li>
+    <li><span class="is-planned wa-split">File Input <a href="https://github.com/shoelace-style/webawesome/issues/1240" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/format-bytes/">Format Bytes</a></li>
     <li><a href="/docs/components/format-date/">Format Date</a></li>
     <li><a href="/docs/components/format-number/">Format Number</a></li>
     <li><a href="/docs/components/icon/">Icon</a></li>
     <li><a href="/docs/components/include/">Include</a></li>
     <li><a href="/docs/components/input/">Input</a></li>
+    <li><a href="/docs/components/intersection-observer">Intersection Observer</a></li>
     <li><a href="/docs/components/mutation-observer/">Mutation Observer</a></li>
+    <li><span class="is-planned wa-split">Number Input <a href="https://github.com/shoelace-style/webawesome/issues/1688" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/popover/">Popover</a></li>
     <li><a href="/docs/components/popup/">Popup</a></li>
     <li><a href="/docs/components/progress-bar/">Progress Bar</a></li>
@@ -169,9 +146,15 @@
     </li>
     <li><a href="/docs/components/tag/">Tag</a></li>
     <li><a href="/docs/components/textarea/">Textarea</a></li>
+    <li><span class="is-planned wa-split">Toast <a href="https://github.com/shoelace-style/webawesome/issues/105" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/tooltip/">Tooltip</a></li>
-    <li><a href="/docs/components/tree/">Tree</a></li>
-    <li><a href="/docs/components/tree-item/">Tree Item</a></li>
+    <li>
+      <a href="/docs/components/tree/">Tree</a>
+      <ul>
+        <li><a href="/docs/components/tree-item/">Tree Item</a></li>
+      </ul>
+    </li>
+    <li><span class="is-planned wa-split">Video <a href="https://github.com/shoelace-style/webawesome/issues/985" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/zoomable-frame">Zoomable Frame</a></li>
     {# PLOP_NEW_COMPONENT_PLACEHOLDER #}
   </ul>
@@ -180,9 +163,9 @@
 <!-- Style utilities -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a href="/docs/utilities/" title="Overview">
-      Style Utilities
+    <a class="wa-cluster wa-gap-xs" href="/docs/utilities/" title="Overview">
       <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Style Utilities
     </a>
   </h2>
   <ul>
@@ -198,9 +181,9 @@
 <!-- Layout -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a href="/docs/layout/" title="Overview">
-      Layout
+    <a class="wa-cluster wa-gap-xs" href="/docs/layout/" title="Overview">
       <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Layout
     </a>
   </h2>
   <ul>
@@ -213,9 +196,12 @@
     <li><a href="/docs/utilities/split/">Split</a></li>
     <li><a href="/docs/utilities/stack/">Stack</a></li>
     <li>
-      <a href="/docs/components/page/">Page</a>
-      <wa-icon name="flask" aria-hidden="true"></wa-icon>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <span class="wa-split">
+        <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
+          Page <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
+        </a>
+        {{ proBadge() }}
+      </span>
     </li>
   </ul>
 </wa-details>
@@ -223,15 +209,17 @@
 <!-- Patterns -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a href="/docs/patterns/" title="Overview">
-      Patterns
+    <a class="wa-cluster wa-gap-xs" href="/docs/patterns/" title="Overview">
       <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Patterns
     </a>
   </h2>
   <ul>
     <li>
-      <a href="/docs/patterns/app/">App</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <span class="wa-split">
+        <a href="/docs/patterns/app/">App</a>
+        {{ proBadge() }}
+      </span>
       <ul>
         <li>
           <a href="/docs/patterns/app/action-panel/">Action Panel</a>
@@ -262,6 +250,8 @@
         </li>
         <li>
           <a href="/docs/patterns/app/pagination/">Pagination</a>
+        </li><li>
+          <a href="/docs/patterns/app/password/">Password</a>
         </li>
         <li>
           <a href="/docs/patterns/app/permissions/">Permissions</a>
@@ -272,21 +262,35 @@
       </ul>
     </li>
     <li>
-      <a href="/docs/patterns/blog-news/">Blog &amp; News</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <span class="wa-split">
+        <a href="/docs/patterns/blog-news/">Blog &amp; News</a>
+        {{ proBadge() }}
+      </span>
       <ul>
+      <li>
+          <a href="/docs/patterns/blog-news/banners/">Banners</a>
+        </li>
         <li>
           <a href="/docs/patterns/blog-news/call-to-action/">Call To Action</a>
         </li>
         <li>
           <a href="/docs/patterns/blog-news/category-list/">Category List</a>
         </li>
+        <li>
+          <a href="/docs/patterns/blog-news/contact/">Contact</a>
+        </li>
         <li>
           <a href="/docs/patterns/blog-news/featured-post/">Featured Post</a>
         </li>
         <li>
           <a href="/docs/patterns/blog-news/footer/">Footer</a>
         </li>
+        <li>
+          <a href="/docs/patterns/blog-news/grid-section/">Grid Section</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/header/">Header</a>
+        </li>
         <li>
           <a href="/docs/patterns/blog-news/newsletter/">Newsletter</a>
         </li>
@@ -305,14 +309,25 @@
         <li>
           <a href="/docs/patterns/blog-news/login/">Sign Up &amp; Login</a>
         </li>
+        <li>
+          <a href="/docs/patterns/blog-news/numbers/">Numbers</a>
+        </li>
         <li>
           <a href="/docs/patterns/blog-news/social-share/">Social Share</a>
         </li>
+        <li>
+          <a href="/docs/patterns/blog-news/teams/">Teams</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/testimonials/">Testimonials</a>
+        </li>
       </ul>
     </li>
     <li>
-      <a href="/docs/patterns/ecommerce/">Ecommerce</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <span class="wa-split">
+        <a href="/docs/patterns/ecommerce/">Ecommerce</a>
+        {{ proBadge() }}
+      </span>
       <ul>
         <li>
           <a href="/docs/patterns/ecommerce/category-filter/">Category Filter</a>
@@ -350,15 +365,14 @@
       </ul>
     </li>
     <li>
-      <a href="/docs/patterns/layouts/">Layouts</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <span class="wa-split">
+        <a href="/docs/patterns/layouts/">Layouts</a>
+        {{ proBadge() }}
+      </span>
       <ul>
         <li>
           <a href="/docs/patterns/layouts/ecommerce/">Ecommerce</a>
         </li>
-        <li>
-          <a href="/docs/patterns/layouts/app/">App</a>
-        </li>
         <li>
           <a href="/docs/patterns/layouts/blog/">Blog</a>
         </li>
@@ -367,51 +381,19 @@
   </ul>
 </wa-details>
 
-<!-- Color palettes -->
-<wa-details appearance="outlined">
-  <h2 slot="summary">
-    <a href="/docs/palettes/" title="Overview">
-      Color Palettes
-      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
-    </a>
-  </h2>
-  <ul>
-    <li><a href="/docs/palettes/default/">Default</a></li>
-    <li>
-      <a href="/docs/palettes/anodized/">Anodized</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-    <li><a href="/docs/palettes/bright/">Bright</a></li>
-    <li>
-      <a href="/docs/palettes/elegant/">Elegant</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-    <li>
-      <a href="/docs/palettes/mild/">Mild</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-    <li>
-      <a href="/docs/palettes/natural/">Natural</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-    <li>
-      <a href="/docs/palettes/rudimentary/">Rudimentary</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-    <li><a href="/docs/palettes/shoelace/">Shoelace</a></li>
-    <li>
-      <a href="/docs/palettes/vogue/">Vogue</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </li>
-  </ul>
-</wa-details>
+<!-- Theming -->
+<h2>Theming</h2>
+<ul>
+  <li><a href="/docs/color-palettes">Color Palettes</a></li>
+  <li><a href="/docs/themes">Themes</a></li>
+</ul>
 
 <!-- Design tokens -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a href="/docs/tokens/" title="Overview">
-      Design Tokens
+    <a class="wa-cluster wa-gap-xs" href="/docs/tokens/" title="Overview">
       <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Design Tokens
     </a>
   </h2>
   <ul>
@@ -425,3 +407,47 @@
     <li><a href="/docs/tokens/component-groups/">Component Groups</a></li>
   </ul>
 </wa-details>
+
+{# Policies #}
+<h2>Terms &amp; Policies</h2>
+<ul>
+  <li><a href="/license"><span class="wa-visually-hidden">Web Awesome </span>Free License</a></li>
+  <li><a href="/license/pro"><span class="wa-visually-hidden">Web Awesome </span>Pro License</a></li>
+  <li><a href="/tos">Terms of Service</a></li>
+  <li><a href="/privacy">Privacy Policy</a></li>
+  <li><a href="/refunds">Refund Policy</a></li>
+</ul>
+
+<wa-divider style="--spacing: var(--wa-space-xl);"></wa-divider>
+
+<div class="wa-stack wa-gap-xl" id="colophon">
+  <div class="wa-stack wa-gap-xs">
+    {% include "logo-simple.njk" %}
+    <h2 class="wa-heading-s">Web Awesome</h2>
+    <p class="wa-caption-xs wa-cluster wa-gap-xs">
+      Version {{ package.version }}
+      <wa-icon id="version-icon-info" family="duotone" variant="regular" name="party-horn"></wa-icon>
+      <wa-tooltip for="version-icon-info" distance="2" class="wa-font-size-xs">Here be freshly launched Awesome and no wa-dragons</wa-tooltip>
+    </p>
+    <p class="wa-caption-xs">&copy; Fonticons, Inc.</p>
+  </div>
+
+  <div class="wa-cluster wa-gap-0 wa-caption-xs the-socials">
+    <h2 class="wa-visually-hidden">Web Awesome Elsewhere</h2>
+    <a href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="github" label="GitHub"></wa-icon>
+    </a>
+    <a href="https://bsky.app/profile/webawesome.com" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="bluesky" label="Bluesky"></wa-icon>
+    </a>
+    <a href="https://mastodon.social/@webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="mastodon" label="Mastodon"></wa-icon>
+    </a>
+    <a href="https://x.com/webawesomer" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="x-twitter" label="Twitter (X)"></wa-icon>
+    </a>
+    <a href="https://www.threads.com/@web.awesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="threads" label="Threads"></wa-icon>
+    </a>
+  </div>
+</div>

packages/webawesome/docs/_includes/status.njk

@@ -1,20 +0,0 @@
-{% if since -%}
-	<wa-badge variant="neutral">Since {{ since }}</wa-badge>
-{% endif -%}
-
-{%- if status %}
-	{%- if 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 -%}

packages/webawesome/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>

packages/webawesome/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>

packages/webawesome/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>

packages/webawesome/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>

packages/webawesome/docs/_includes/theme-selector.njk

@@ -0,0 +1,46 @@
+<wa-dropdown class="theme-selector" title="Select Theme">
+  <wa-button slot="trigger" id="theme-selector-trigger" appearance="plain">
+    <wa-icon name="paintbrush" variant="regular" class="icon-embiggen"></wa-icon>
+  </wa-button>
+
+  {# Free themes #}
+  {% for theme in themer.themes %}
+    {% if not theme.isPro %}
+      <wa-dropdown-item
+        value="{{ theme.filename | stripExtension }}"
+        data-brand="{{ theme.colorBrand.color }}"
+        data-palette="{{ theme.palette.filename | stripExtension }}"
+      >
+        {{ theme.name }}
+      </wa-dropdown-item>
+    {% endif %}
+  {% endfor %}
+
+  {# Pro themes #}
+  {% for theme in themer.themes %}
+    {% if loop.first %}<wa-divider></wa-divider>{% endif %}
+    {% if theme.isPro %}
+      <wa-dropdown-item
+        value="{{ theme.filename | stripExtension }}"
+        data-brand="{{ theme.colorBrand.color }}"
+        data-palette="{{ theme.palette.filename | stripExtension }}"
+      >
+        {{ theme.name }}
+      </wa-dropdown-item>
+    {% endif %}
+  {% endfor %}
+</wa-dropdown>
+<wa-tooltip for="theme-selector-trigger" id="theme-tooltip">Select Theme</wa-tooltip>
+
+<script>
+  // Handle dropdown selection and trigger input event for theme.js
+  document.querySelectorAll('wa-dropdown.theme-selector').forEach(el => {
+    el.addEventListener('wa-select', (event) => {
+      const selectedValue = event.detail.item.value;
+
+      // Trigger input event for theme.js
+      el.value = selectedValue;
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+  });
+</script>

packages/webawesome/docs/_includes/theme-showcase.njk

@@ -1,347 +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-button appearance="plain" size="small" tabindex="-1">
-          <wa-icon name="xmark" label="Close"></wa-icon>
-        </wa-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="start" 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="start" name="envelope" variant="regular"></wa-icon>
-        </wa-input>
-        <wa-input tabindex="-1" label="Password" type="password">
-          <wa-icon slot="start" 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-button appearance="plain" size="small" tabindex="-1">
-            <wa-icon name="plus" label="Add task"></wa-icon>
-          </wa-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-button appearance="plain" size="small" tabindex="-1">
-            <wa-icon name="ellipsis" label="Options"></wa-icon>
-          </wa-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-button appearance="plain" tabindex="-1">
-            <wa-icon name="backward" label="Skip backward"></wa-icon>
-          </wa-button>
-          <wa-button appearance="plain" size="large" tabindex="-1">
-            <wa-icon name="pause" label="Pause"></wa-icon>
-          </wa-button>
-          <wa-button appearance="plain" tabindex="-1">
-            <wa-icon name="forward" label="Skip forward"></wa-icon>
-          </wa-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="start" name="at"></wa-icon>
-          Email
-        </wa-button>
-        <wa-button appearance="outlined" tabindex="-1">
-          <wa-icon slot="start" 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-button id="more-actions-2" slot="trigger" appearance="plain" size="small" tabindex="-1">
-            <wa-icon name="ellipsis-vertical" label="View menu"></wa-icon>
-          </wa-button>
-          <wa-dropdown-item>Copy link</wa-dropdown-item>
-          <wa-dropdown-item>Rename</wa-dropdown-item>
-          <wa-dropdown-item>Move to trash</wa-dropdown-item>
-        </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>

packages/webawesome/docs/_includes/theming/color-palettes.njk

@@ -0,0 +1,195 @@
+{% for palette in themer.palettes %}
+  <link rel="stylesheet" href="/dist/styles/color/palettes/{{palette.filename}}" />
+{% endfor %}
+
+<div id="color-palettes" class="wa-stack wa-gap-xl">
+  <wa-radio-group id="palette-picker" value="default" class="radio-cards">
+    <span slot="label" class="wa-visually-hidden">Color Palette</span>
+    <div class="wa-grid">
+      {%- for palette in themer.palettes -%}
+        {%- if not palette.isPro -%}
+          <wa-radio value="{{ palette.name | lower }}">
+            <div class="wa-stack wa-gap-xs">
+              <span>{{ palette.name }}</span>
+              <div class="wa-palette-{{ palette.name | lower }} palette-preview wa-grid wa-gap-3xs">
+                <span class="preview-swatch"></span>
+                <span class="preview-swatch"></span>
+                <span class="preview-swatch"></span>
+                <span class="preview-swatch"></span>
+                <span class="preview-swatch"></span>
+                <span class="preview-swatch"></span>
+                <span class="preview-swatch"></span>
+                <span class="preview-swatch"></span>
+                <span class="preview-swatch"></span>
+                <span class="preview-swatch"></span>
+              </div>
+            </div>
+          </wa-radio>
+        {%- else -%}
+          {% raw %}{%- if currentUser.hasPro -%}{% endraw %}
+            <wa-radio value="{{ palette.name | lower }}">
+              <div class="wa-stack wa-gap-xs">
+                <span>{{ palette.name }}</span>
+                <div class="wa-palette-{{ palette.name | lower }} palette-preview wa-grid wa-gap-3xs">
+                  <span class="preview-swatch"></span>
+                  <span class="preview-swatch"></span>
+                  <span class="preview-swatch"></span>
+                  <span class="preview-swatch"></span>
+                  <span class="preview-swatch"></span>
+                  <span class="preview-swatch"></span>
+                  <span class="preview-swatch"></span>
+                  <span class="preview-swatch"></span>
+                  <span class="preview-swatch"></span>
+                  <span class="preview-swatch"></span>
+                </div>
+              </div>
+            </wa-radio>
+          {% raw %}{%- endif -%}{% endraw %}
+        {%- endif -%}
+      {%- endfor -%}
+    </div>
+  </wa-radio-group>
+
+  <div id="palette" class="wa-stack wa-gap-xs">
+    {%- for color in themer.colors -%}
+      <div class="color-scale wa-flank wa-gap-xs">
+        <div class="color-name">{{ color }}</div>
+        <div class="color-swatches wa-grid wa-gap-2xs">
+          {%- for tint in themer.tints -%}
+          <wa-copy-button
+            class="color-swatch"
+            copy-label="{{ color }} {{ tint }}"
+            value="var(--wa-color-{{ color }}-{{ tint }})"
+            style="--color: var(--wa-color-{{ color }}-{{ tint }}); --tint: '{{ tint }}'"
+          >
+            <span class="wa-visually-hidden">--wa-color-{{ color }}-{{ tint }}</span>
+          </wa-copy-button>
+          {%- endfor -%}
+        </div>
+      </div>
+    {%- endfor -%}
+  </div>
+</div>
+
+<script type="module">
+  const paletteContainer = document.getElementById('color-palettes');
+  const palettePreviewPicker = document.getElementById('palette-picker');
+
+  // Set first radio as checked and add initial palette class
+  const firstPaletteRadio = palettePreviewPicker.querySelector('wa-radio');
+  if (firstPaletteRadio) {
+    firstPaletteRadio.checked = true;
+    paletteContainer.classList.add(`wa-palette-${firstPaletteRadio.value}`);
+  }
+
+  // Listen for radio changes
+  palettePreviewPicker.addEventListener('input', function(event) {
+    const selectedValue = event.target.value;
+
+    // Update palette container class
+    const existingThemeClasses = [...paletteContainer.classList].filter(className => className.startsWith('wa-palette-'));
+    existingThemeClasses.forEach(className => paletteContainer.classList.remove(className));
+    paletteContainer.classList.add(`wa-palette-${selectedValue}`);
+  });
+</script>
+
+<style>
+  #color-palettes:has(+ *) {
+    margin-block-end: var(--wa-content-spacing);
+  }
+
+  wa-radio-group.radio-cards {
+    &::part(form-control-input) {
+      display: grid;
+    }
+
+    > .wa-grid {
+      --max-column-count: 3;
+      --min-column-size: 12ch;
+
+      --_max-gap-count: calc(var(--max-column-count) - 1);
+      --_gap-width-sum: calc(var(--_max-gap-count) * var(--wa-space-m));
+      --_max-column-width: calc((100% - var(--_gap-width-sum)) / var(--max-column-count));
+
+      grid-template-columns: repeat(auto-fill, minmax(max(var(--min-column-size), var(--_max-column-width)), 1fr));
+    }
+
+    wa-radio {
+      display: block;
+      inline-size: var(--popover-min-inline-size);
+      background-color: var(--wa-form-control-background-color);
+      border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-color-neutral-border-quiet);
+      border-radius: var(--wa-border-radius-m);
+      padding: 0.75em;
+      font-size: var(--wa-font-size-s);
+      color: var(--wa-color-text-quiet);
+
+      &::part(control) {
+        display: none;
+      }
+
+      &::part(label) {
+        font-weight: var(--wa-font-weight-bold);
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          border-color: var(--wa-color-neutral-border-normal);
+        }
+      }
+
+      &:state(checked) {
+        border-color: var(--wa-color-neutral-border-loud);
+        box-shadow: 0 0 0 0.0625rem var(--wa-color-neutral-border-loud);
+        color: var(--wa-color-text-normal);
+      }
+
+      &:focus-visible {
+        outline: var(--wa-focus-ring);
+        outline-offset: var(--wa-focus-ring-offset);
+      }
+    }
+  }
+
+  .palette-preview {
+    --min-column-size: 0rem;
+  }
+
+  .preview-swatch {
+    aspect-ratio: 1 / 1;
+    height: 100%;
+    width: 100%;
+    border-radius: var(--wa-border-radius-s);
+
+      &:nth-child(1) {
+        background-color: var(--wa-color-red);
+      }
+      &:nth-child(2) {
+        background-color: var(--wa-color-orange);
+      }
+      &:nth-child(3) {
+        background-color: var(--wa-color-yellow);
+      }
+      &:nth-child(4) {
+        background-color: var(--wa-color-green);
+      }
+      &:nth-child(5) {
+        background-color: var(--wa-color-cyan);
+      }
+      &:nth-child(6) {
+        background-color: var(--wa-color-blue);
+      }
+      &:nth-child(7) {
+        background-color: var(--wa-color-indigo);
+      }
+      &:nth-child(8) {
+        background-color: var(--wa-color-purple);
+      }
+      &:nth-child(9) {
+        background-color: var(--wa-color-pink);
+      }
+      &:nth-child(10) {
+        background-color: var(--wa-color-gray);
+      }
+    }
+</style>

packages/webawesome/docs/_includes/theming/instructions.njk

@@ -0,0 +1,302 @@
+{% from "pro-badge.njk" import proBadge %}
+{% from "free-badge.njk" import freeBadge %}
+
+<div id="using-themes">
+  <fieldset class="theme-options wa-stack" style="margin-block-end: var(--wa-content-spacing);">
+    <legend style="align-self: start;">Theme Options</legend>
+    <wa-select id="pick-theme" label="Theme" value="default" size="small">
+      <wa-badge slot="end" appearance="accent" pill class="pro pro-only-value">Pro</wa-badge>
+      {%- for theme in themer.themes -%}
+        {%- if not theme.isPro -%}
+          <wa-option 
+            value="{{ theme.name | lower }}"
+            data-palette="{{ theme.palette.filename | stripExtension}}"
+            data-brand="{{ theme.colorBrand.color }}"
+          >
+            {{ theme.name | capitalize }}
+          </wa-option>
+        {%- endif -%}
+      {%- endfor -%}
+      {% raw %}{% if currentUser.hasPro %}{% endraw %}
+        {%- for theme in themer.themes -%}
+          {% if loop.first %}<wa-divider></wa-divider>{% endif %}
+          {%- if theme.isPro -%}
+            <wa-option 
+              value="{{ theme.name | lower }}"
+              data-palette="{{ theme.palette.filename | stripExtension}}"
+              data-brand="{{ theme.colorBrand.color }}"
+              {% if theme.isPro %}data-is-pro{% endif %}
+            >
+              {{ theme.name | capitalize }}
+            </wa-option>
+          {%- endif -%}
+        {%- endfor -%}
+      {% raw %}{% endif %}{% endraw %}
+    </wa-select>
+    <wa-select id="pick-palette" label="Color Palette" value="default" size="small">
+      <wa-badge slot="end" appearance="accent" pill class="pro pro-only-value">Pro</wa-badge>
+      {%- for palette in themer.palettes -%}
+        {%- if not palette.isPro -%}
+          <wa-option 
+            value="{{ palette.name | lower }}"
+          >
+            {{ palette.name | capitalize }}
+          </wa-option>
+        {%- endif -%}
+      {%- endfor -%}
+      {% raw %}{% if currentUser.hasPro %}{% endraw %}
+        {%- for palette in themer.palettes -%}
+          {% if loop.first %}<wa-divider></wa-divider>{% endif %}
+          {%- if palette.isPro -%}
+            <wa-option 
+              value="{{ palette.name | lower }}"
+              {% if palette.isPro %}data-is-pro{% endif %}
+            >
+              {{ palette.name | capitalize }}
+            </wa-option>
+          {%- endif -%}
+        {%- endfor -%}
+      {% raw %}{% endif %}{% endraw %}
+    </wa-select>
+    <div class="wa-grid">
+      {%- set colorVariants = ['brand', 'neutral', 'success', 'warning', 'danger'] -%}
+      {%- for colorVariant in colorVariants -%}
+        <wa-select id="pick-{{ colorVariant }}" label="{{ colorVariant | capitalize }}" size="small">
+          <wa-icon slot="start" name="square" class="selected-color"></wa-icon>
+          {%- for color in themer.colors -%}
+            <wa-option value="{{ color }}">
+              {{ color | capitalize }}
+              <wa-icon slot="start" name="square" style="--color: var(--wa-color-{{ color }}); color: var(--color);"></wa-icon>
+            </wa-option>
+          {%- endfor -%}
+        </wa-select>
+      {%- endfor -%}
+    </div>
+  </fieldset>
+</div>
+
+<wa-tab-group>
+  <wa-tab panel="cdn"><wa-icon name="rocket-launch" variant="regular"></wa-icon> CDN</wa-tab>
+  <wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
+  <wa-tab panel="self-hosted"><wa-icon name="arrow-down-to-line" variant="regular"></wa-icon> Self-Hosted</wa-tab>
+
+  <wa-tab-panel name="cdn">
+    <div class="wa-stack wa-gap-xl">
+      <wa-callout variant="neutral" size="small" id="pro-only-callout">
+        <wa-icon name="info-circle" variant="regular"></wa-icon>
+        This combination can only be used on teams with a Pro subscription.
+      </wa-callout>
+      <div id="free-instructions">
+        <strong>For projects on <wa-badge appearance="filled" variant="neutral" pill class="free">Free</wa-badge> teams:</strong>
+        <ol>
+          <li>Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> <strong>Settings</strong>.</li>
+          <li>For <strong>Theme</strong>, select <wa-icon name="paintbrush" variant="regular"></wa-icon> <strong class="theme-name"></strong>.</li>
+          <li>For <strong>Color Palette</strong>, select <wa-icon name="swatchbook" variant="regular"></wa-icon> <strong class="palette-name"></strong>.</li>
+          <li>Press <strong>Save Changes</strong> to update anywhere you're using your project.</li>
+          <li class="custom-variants">In your own files, apply the following classes to the <code>&lt;html&gt;</code> element:<br />
+            <pre><code class="variant-classes" class="language-html"></code></pre>
+          </li>
+        </ol>
+      </div>
+      <div id="pro-instructions">
+        <strong>For projects on <wa-badge appearance="accent" pill class="pro">Pro</wa-badge> teams:</strong>
+        <ol>
+          <li>Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> <strong>Settings</strong>.</li>
+          <li>Press <wa-icon name="paintbrush" variant="regular"></wa-icon> <strong>Edit Your Theme</strong> to open the Theme Builder.</li>
+          <li>Open <strong>Theme</strong> and select <strong class="theme-name"></strong>.</li>
+          <li>Open <strong>Colors</strong>. On the <strong>Basic</strong> tab, select <strong class="palette-name"></strong>. <span class="custom-variants">On the <strong>Advanced</strong> tab, select your preferred variant colors.</span></li>
+          <li>Press <strong>Save Changes</strong> to update anywhere you're using your project.</li>
+        </ol>
+      </div>
+    </div>
+  </wa-tab-panel>
+
+  <wa-tab-panel name="npm">
+    <p>To use this theme, include the following stylesheet(s):</p>
+    <pre><code id="stylesheet-imports" class="language-html"></code></pre>
+    <p>Then, apply the following classes to the <code>&lt;html&gt;</code> element:</p>
+    <pre><code class="html-classes" class="language-html"></code></pre>
+  </wa-tab-panel>
+
+  <wa-tab-panel name="self-hosted">
+    <p>To use this theme, include the following stylesheet(s):</p>
+    <pre><code id="stylesheet-links" class="language-html"></code></pre>
+    <p>Then, apply the following classes to the <code>&lt;html&gt;</code> element:</p>
+    <pre><code class="html-classes" class="language-html"></code></pre>
+  </wa-tab-panel>
+</wa-tab-group>
+
+<script type="module">
+  const themePicker = document.getElementById('pick-theme');
+  const palettePicker = document.getElementById('pick-palette');
+  const brandPicker = document.getElementById('pick-brand');
+  const neutralPicker = document.getElementById('pick-neutral');
+  const successPicker = document.getElementById('pick-success');
+  const warningPicker = document.getElementById('pick-warning');
+  const dangerPicker = document.getElementById('pick-danger');
+  
+  const stylesheetLinks = document.getElementById('stylesheet-links');
+  const stylesheetImports = document.getElementById('stylesheet-imports');
+  const htmlClassList = document.querySelectorAll('.html-classes');
+  const variantClassList = document.querySelectorAll('.variant-classes');
+  const themeNames = document.querySelectorAll('.theme-name');
+  const paletteNames = document.querySelectorAll('.palette-name');
+
+  // Default values for color variants
+  const defaultColors = {
+    brand: 'blue',
+    neutral: 'gray',
+    success: 'green',
+    warning: 'yellow',
+    danger: 'red'
+  };
+
+  // Update dynamic instructions based on current picker values
+  function updateInstructions() {
+    const theme = themePicker.value;
+    const palette = palettePicker.value;
+    const brand = brandPicker.value;
+    const neutral = neutralPicker.value;
+    const success = successPicker.value;
+    const warning = warningPicker.value;
+    const danger = dangerPicker.value;
+
+    // Get the default palette for the selected theme
+    const selectedThemeOption = themePicker.querySelector(`wa-option[value="${theme}"]`);
+    const themeDefaultPalette = selectedThemeOption?.getAttribute('data-palette') || 'default';
+    const proOnlyTheme = selectedThemeOption?.hasAttribute('data-is-pro') || false;
+    const proOnlyPalette = palettePicker.querySelector(`wa-option[value="${palette}"]`)?.hasAttribute('data-is-pro') || false;
+
+    // Show/hide Pro-only callout
+    const proOnlyCallout = document.getElementById('pro-only-callout');
+    const freeInstructions = document.getElementById('free-instructions');
+    if (proOnlyTheme || proOnlyPalette) {
+      proOnlyCallout.style.display = '';
+      freeInstructions.style.display = 'none';
+    } else {
+      proOnlyCallout.style.display = 'none';
+      freeInstructions.style.display = '';
+    }
+
+    // Show/hide Pro badge on selected Pro values
+    document.querySelectorAll('.pro-only-value').forEach(badge => {
+      if ((badge.parentElement.id === 'pick-theme' && proOnlyTheme) ||
+          (badge.parentElement.id === 'pick-palette' && proOnlyPalette)) {
+        badge.style.display = '';
+      } else {
+        badge.style.display = 'none';
+      }
+    });
+
+    // Build stylesheet links
+    const links = [`<link rel="stylesheet" href="/dist/styles/themes/${theme}.css" />`];
+    const imports = [`import '@awesome.me/webawesome/dist/styles/themes/${theme}.css';`];
+    
+    // Only include palette link if it differs from theme's default
+    if (palette !== themeDefaultPalette) {
+      links.push(`<link rel="stylesheet" href="/dist/styles/color/palettes/${palette}.css" />`);
+      imports.push(`import '@awesome.me/webawesome/dist/styles/color/palettes/${palette}.css';`);
+    }
+    
+    stylesheetLinks.textContent = links.join('\n');
+    stylesheetImports.textContent = imports.join('\n');
+
+    // Build HTML classes
+    const classes = [`wa-theme-${theme}`];
+    const variantClasses = [];
+    
+    // Only include palette class if it differs from theme's default
+    if (palette !== themeDefaultPalette) {
+      classes.push(`wa-palette-${palette}`);
+    }
+    
+    // Only include color classes if they differ from defaults
+    if (brand !== defaultColors.brand) {
+      [classes, variantClasses].forEach(classList => classList.push(`wa-brand-${brand}`));
+    }
+    if (neutral !== defaultColors.neutral) {
+      [classes, variantClasses].forEach(classList => classList.push(`wa-neutral-${neutral}`));
+    }
+    if (success !== defaultColors.success) {
+      [classes, variantClasses].forEach(classList => classList.push(`wa-success-${success}`));
+    }
+    if (warning !== defaultColors.warning) {
+      [classes, variantClasses].forEach(classList => classList.push(`wa-warning-${warning}`));
+    }
+    if (danger !== defaultColors.danger) {
+      [classes, variantClasses].forEach(classList => classList.push(`wa-danger-${danger}`));
+    }
+
+    htmlClassList.forEach(instance => {
+      instance.textContent = `class="${classes.join(' ')}"`;
+    });
+
+    variantClassList.forEach(instance => {
+      instance.textContent = `class="${variantClasses.join(' ')}"`;
+    });
+
+    if (variantClasses.length === 0) {
+      document.querySelectorAll('.custom-variants').forEach(el => el.style.display = 'none');
+    } else {
+      document.querySelectorAll('.custom-variants').forEach(el => el.style.display = '');
+    }
+
+    // Update theme and palette names in CDN instructions
+    themeNames.forEach(instance => {
+      instance.textContent = theme;
+      instance.style.textTransform = 'capitalize';
+    });
+    paletteNames.forEach(instance => {
+      instance.textContent = palette;
+      instance.style.textTransform = 'capitalize';
+    });
+
+    // Match color picker icons to selected palette and color
+    [brandPicker, neutralPicker, successPicker, warningPicker, dangerPicker].forEach(picker => {
+      const color = picker.value;
+      const selectedColorIcon = picker.querySelector('wa-icon.selected-color');
+      const optionsColorIcons = picker.querySelectorAll('wa-option wa-icon[slot="start"]');
+
+      if (selectedColorIcon) {
+        selectedColorIcon.style.setProperty('color', `var(--wa-color-${color})`);
+        selectedColorIcon.classList.remove(...[...selectedColorIcon.classList].filter(className => className.startsWith('wa-palette-')));
+        selectedColorIcon.classList.add(`wa-palette-${palette}`);
+      }
+
+
+      optionsColorIcons.forEach(icon => {
+        icon.classList.remove(...[...icon.classList].filter(className => className.startsWith('wa-palette-')));
+        icon.classList.add(`wa-palette-${palette}`);
+      });
+    });
+  }
+
+  // Set palette and brand based on theme selection
+  themePicker.addEventListener('input', function() {
+    const selectedOption = themePicker.querySelector(`wa-option[value="${themePicker.value}"]`);
+    const palette = selectedOption.getAttribute('data-palette');
+    const brand = selectedOption.getAttribute('data-brand');
+
+    palettePicker.value = palette;
+    brandPicker.value = brand;
+    
+    updateInstructions();
+  });
+
+  // Update instructions when any picker changes
+  [palettePicker, brandPicker, neutralPicker, successPicker, warningPicker, dangerPicker].forEach(picker => {
+    picker.addEventListener('input', updateInstructions);
+  });
+
+  // Set initial values
+  themePicker.value = 'default';
+  palettePicker.value = 'default';
+  brandPicker.value = 'blue';
+  neutralPicker.value = 'gray';
+  successPicker.value = 'green';
+  warningPicker.value = 'yellow';
+  dangerPicker.value = 'red';
+
+  // Initial update
+  updateInstructions();
+</script>

packages/webawesome/docs/_includes/theming/variants.njk

@@ -0,0 +1,27 @@
+{% set colorVariants = ["brand", "neutral", "success", "warning", "danger"] %}
+
+<div id="color-variants" class="wa-stack wa-gap-xs">
+  {%- for colorVariant in colorVariants -%}
+    <div class="color-scale wa-flank wa-gap-xs">
+      <div class="color-name">{{ colorVariant }}</div>
+      <div class="color-swatches wa-grid wa-gap-2xs">
+        {%- for tint in themer.tints -%}
+        <wa-copy-button
+          class="color-swatch"
+          copy-label="{{ colorVariant }} {{ tint }}"
+          value="var(--wa-color-{{ colorVariant }}-{{ tint }})"
+          style="--color: var(--wa-color-{{ colorVariant }}-{{ tint }}); --tint: '{{ tint }}'"
+        >
+          <span class="wa-visually-hidden">--wa-color-{{ colorVariant }}-{{ tint }}</span>
+        </wa-copy-button>
+        {%- endfor -%}
+      </div>
+    </div>
+  {%- endfor -%}
+</div>
+
+<style>
+  #color-variants:has(+ *) {
+    margin-block-end: var(--wa-content-spacing);
+  }
+</style>

packages/webawesome/docs/_includes/visual-tests/appearance.njk

@@ -8,27 +8,6 @@
     <th><code>.wa-[appearance]</code></th>
   </thead>
   <tbody>
-    <tr>
-      <th><code>accent</code> + <code>outlined</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" appearance="accent outlined">Brand</wa-badge>
-          <wa-badge variant="neutral" appearance="accent outlined">Neutral</wa-badge>
-          <wa-badge variant="success" appearance="accent outlined">Success</wa-badge>
-          <wa-badge variant="warning" appearance="accent outlined">Warning</wa-badge>
-          <wa-badge variant="danger" appearance="accent outlined">Danger</wa-badge>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" class="wa-accent wa-outlined">Brand</wa-badge>
-          <wa-badge variant="neutral" class="wa-accent wa-outlined">Neutral</wa-badge>
-          <wa-badge variant="success" class="wa-accent wa-outlined">Success</wa-badge>
-          <wa-badge variant="warning" class="wa-accent wa-outlined">Warning</wa-badge>
-          <wa-badge variant="danger" class="wa-accent wa-outlined">Danger</wa-badge>
-        </div>
-      </td>
-    </tr>
     <tr>
       <th><code>accent</code></th>
       <td>
@@ -54,11 +33,11 @@
       <th><code>filled</code> + <code>outlined</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" appearance="filled outlined">Brand</wa-badge>
-          <wa-badge variant="neutral" appearance="filled outlined">Neutral</wa-badge>
-          <wa-badge variant="success" appearance="filled outlined">Success</wa-badge>
-          <wa-badge variant="warning" appearance="filled outlined">Warning</wa-badge>
-          <wa-badge variant="danger" appearance="filled outlined">Danger</wa-badge>
+          <wa-badge variant="brand" appearance="filled-outlined">Brand</wa-badge>
+          <wa-badge variant="neutral" appearance="filled-outlined">Neutral</wa-badge>
+          <wa-badge variant="success" appearance="filled-outlined">Success</wa-badge>
+          <wa-badge variant="warning" appearance="filled-outlined">Warning</wa-badge>
+          <wa-badge variant="danger" appearance="filled-outlined">Danger</wa-badge>
         </div>
       </td>
       <td>
@@ -195,11 +174,11 @@
       <th><code>filled</code> + <code>outlined</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="filled outlined">Brand</wa-button>
-          <wa-button variant="neutral" appearance="filled outlined">Neutral</wa-button>
-          <wa-button variant="success" appearance="filled outlined">Success</wa-button>
-          <wa-button variant="warning" appearance="filled outlined">Warning</wa-button>
-          <wa-button variant="danger" appearance="filled outlined">Danger</wa-button>
+          <wa-button variant="brand" appearance="filled-outlined">Brand</wa-button>
+          <wa-button variant="neutral" appearance="filled-outlined">Neutral</wa-button>
+          <wa-button variant="success" appearance="filled-outlined">Success</wa-button>
+          <wa-button variant="warning" appearance="filled-outlined">Warning</wa-button>
+          <wa-button variant="danger" appearance="filled-outlined">Danger</wa-button>
         </div>
       </td>
       <td>
@@ -396,23 +375,23 @@
       <th><code>filled</code> + <code>outlined</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" appearance="filled outlined">
+          <wa-callout variant="brand" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
             Brand
           </wa-callout>
-          <wa-callout variant="neutral" appearance="filled outlined">
+          <wa-callout variant="neutral" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
             Neutral
           </wa-callout>
-          <wa-callout variant="success" appearance="filled outlined">
+          <wa-callout variant="success" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
             Success
           </wa-callout>
-          <wa-callout variant="warning" appearance="filled outlined">
+          <wa-callout variant="warning" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
             Warning
           </wa-callout>
-          <wa-callout variant="danger" appearance="filled outlined">
+          <wa-callout variant="danger" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
             Danger
           </wa-callout>
@@ -657,11 +636,11 @@
       <th><code>filled</code> + <code>outlined</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" appearance="filled outlined">Brand</wa-tag>
-          <wa-tag variant="neutral" appearance="filled outlined">Neutral</wa-tag>
-          <wa-tag variant="success" appearance="filled outlined">Success</wa-tag>
-          <wa-tag variant="warning" appearance="filled outlined">Warning</wa-tag>
-          <wa-tag variant="danger" appearance="filled outlined">Danger</wa-tag>
+          <wa-tag variant="brand" appearance="filled-outlined">Brand</wa-tag>
+          <wa-tag variant="neutral" appearance="filled-outlined">Neutral</wa-tag>
+          <wa-tag variant="success" appearance="filled-outlined">Success</wa-tag>
+          <wa-tag variant="warning" appearance="filled-outlined">Warning</wa-tag>
+          <wa-tag variant="danger" appearance="filled-outlined">Danger</wa-tag>
         </div>
       </td>
       <td>
@@ -796,4 +775,4 @@
     </tr>
   </tbody>
 </table>
-</div>
+</div>

packages/webawesome/docs/_includes/visual-tests/color.njk

@@ -12,22 +12,18 @@
       <th><code>brand</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="brand" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="brand" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge variant="brand" appearance="filled-outlined">Filled-Outlined</wa-badge>
           <wa-badge variant="brand" appearance="filled">Filled</wa-badge>
           <wa-badge variant="brand" appearance="outlined">Outlined</wa-badge>
-          <wa-badge variant="brand" appearance="plain">Plain</wa-badge>
         </div>
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-brand" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-brand" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-brand" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge class="wa-brand" appearance="filled-outlined">Filled-Outlined</wa-badge>
           <wa-badge class="wa-brand" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-brand" appearance="outlined">Outlined</wa-badge>
-          <wa-badge class="wa-brand" appearance="plain">Plain</wa-badge>
         </div>
       </td>
     </tr>
@@ -35,22 +31,18 @@
       <th><code>neutral</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="neutral" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="neutral" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="neutral" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge variant="neutral" appearance="filled-outlined">Filled-Outlined</wa-badge>
           <wa-badge variant="neutral" appearance="filled">Filled</wa-badge>
           <wa-badge variant="neutral" appearance="outlined">Outlined</wa-badge>
-          <wa-badge variant="neutral" appearance="plain">Plain</wa-badge>
         </div>
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-neutral" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-neutral" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-neutral" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge class="wa-neutral" appearance="filled-outlined">Filled-Outlined</wa-badge>
           <wa-badge class="wa-neutral" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-neutral" appearance="outlined">Outlined</wa-badge>
-          <wa-badge class="wa-neutral" appearance="plain">Plain</wa-badge>
         </div>
       </td>
     </tr>
@@ -58,22 +50,18 @@
       <th><code>success</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="success" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="success" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="success" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge variant="success" appearance="filled-outlined">Filled-Outlined</wa-badge>
           <wa-badge variant="success" appearance="filled">Filled</wa-badge>
           <wa-badge variant="success" appearance="outlined">Outlined</wa-badge>
-          <wa-badge variant="success" appearance="plain">Plain</wa-badge>
         </div>
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-success" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-success" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-success" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge class="wa-success" appearance="filled-outlined">Filled-Outlined</wa-badge>
           <wa-badge class="wa-success" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-success" appearance="outlined">Outlined</wa-badge>
-          <wa-badge class="wa-success" appearance="plain">Plain</wa-badge>
         </div>
       </td>
     </tr>
@@ -81,22 +69,18 @@
       <th><code>warning</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="warning" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="warning" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="warning" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge variant="warning" appearance="filled-outlined">Filled-Outlined</wa-badge>
           <wa-badge variant="warning" appearance="filled">Filled</wa-badge>
           <wa-badge variant="warning" appearance="outlined">Outlined</wa-badge>
-          <wa-badge variant="warning" appearance="plain">Plain</wa-badge>
         </div>
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-warning" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-warning" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-warning" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge class="wa-warning" appearance="filled-outlined">Filled-Outlined</wa-badge>
           <wa-badge class="wa-warning" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-warning" appearance="outlined">Outlined</wa-badge>
-          <wa-badge class="wa-warning" appearance="plain">Plain</wa-badge>
         </div>
       </td>
     </tr>
@@ -104,22 +88,18 @@
       <th><code>danger</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="danger" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="danger" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="danger" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge variant="danger" appearance="filled-outlined">Filled-Outlined</wa-badge>
           <wa-badge variant="danger" appearance="filled">Filled</wa-badge>
           <wa-badge variant="danger" appearance="outlined">Outlined</wa-badge>
-          <wa-badge variant="danger" appearance="plain">Plain</wa-badge>
         </div>
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-danger" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-danger" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-danger" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge class="wa-danger" appearance="filled-outlined">Filled-Outlined</wa-badge>
           <wa-badge class="wa-danger" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-danger" appearance="outlined">Outlined</wa-badge>
-          <wa-badge class="wa-danger" appearance="plain">Plain</wa-badge>
         </div>
       </td>
     </tr>
@@ -142,9 +122,8 @@
       <th><code>brand</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="brand" appearance="accent">Accent</wa-button>
-          <wa-button variant="brand" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="brand" appearance="filled-outlined">Filled-Outlined</wa-button>
           <wa-button variant="brand" appearance="filled">Filled</wa-button>
           <wa-button variant="brand" appearance="outlined">Outlined</wa-button>
           <wa-button variant="brand" appearance="plain">Plain</wa-button>
@@ -152,9 +131,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-brand" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-brand" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-brand" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-brand" appearance="filled-outlined">Filled-Outlined</wa-button>
           <wa-button class="wa-brand" appearance="filled">Filled</wa-button>
           <wa-button class="wa-brand" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-brand" appearance="plain">Plain</wa-button>
@@ -165,9 +143,8 @@
       <th><code>neutral</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="neutral" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="neutral" appearance="accent">Accent</wa-button>
-          <wa-button variant="neutral" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="neutral" appearance="filled-outlined">Filled-Outlined</wa-button>
           <wa-button variant="neutral" appearance="filled">Filled</wa-button>
           <wa-button variant="neutral" appearance="outlined">Outlined</wa-button>
           <wa-button variant="neutral" appearance="plain">Plain</wa-button>
@@ -175,9 +152,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-neutral" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-neutral" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-neutral" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-neutral" appearance="filled-outlined">Filled-Outlined</wa-button>
           <wa-button class="wa-neutral" appearance="filled">Filled</wa-button>
           <wa-button class="wa-neutral" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-neutral" appearance="plain">Plain</wa-button>
@@ -188,9 +164,8 @@
       <th><code>success</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="success" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="success" appearance="accent">Accent</wa-button>
-          <wa-button variant="success" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="success" appearance="filled-outlined">Filled-Outlined</wa-button>
           <wa-button variant="success" appearance="filled">Filled</wa-button>
           <wa-button variant="success" appearance="outlined">Outlined</wa-button>
           <wa-button variant="success" appearance="plain">Plain</wa-button>
@@ -198,9 +173,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-success" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-success" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-success" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-success" appearance="filled-outlined">Filled-Outlined</wa-button>
           <wa-button class="wa-success" appearance="filled">Filled</wa-button>
           <wa-button class="wa-success" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-success" appearance="plain">Plain</wa-button>
@@ -211,9 +185,8 @@
       <th><code>warning</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="warning" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="warning" appearance="accent">Accent</wa-button>
-          <wa-button variant="warning" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="warning" appearance="filled-outlined">Filled-Outlined</wa-button>
           <wa-button variant="warning" appearance="filled">Filled</wa-button>
           <wa-button variant="warning" appearance="outlined">Outlined</wa-button>
           <wa-button variant="warning" appearance="plain">Plain</wa-button>
@@ -221,9 +194,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-warning" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-warning" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-warning" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-warning" appearance="filled-outlined">Filled-Outlined</wa-button>
           <wa-button class="wa-warning" appearance="filled">Filled</wa-button>
           <wa-button class="wa-warning" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-warning" appearance="plain">Plain</wa-button>
@@ -234,9 +206,8 @@
       <th><code>danger</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="danger" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="danger" appearance="accent">Accent</wa-button>
-          <wa-button variant="danger" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="danger" appearance="filled-outlined">Filled-Outlined</wa-button>
           <wa-button variant="danger" appearance="filled">Filled</wa-button>
           <wa-button variant="danger" appearance="outlined">Outlined</wa-button>
           <wa-button variant="danger" appearance="plain">Plain</wa-button>
@@ -244,9 +215,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-danger" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-danger" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-danger" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-danger" appearance="filled-outlined">Filled-Outlined</wa-button>
           <wa-button class="wa-danger" appearance="filled">Filled</wa-button>
           <wa-button class="wa-danger" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-danger" appearance="plain">Plain</wa-button>
@@ -272,17 +242,13 @@
       <th><code>brand</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="brand" appearance="accent">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout variant="brand" appearance="filled outlined">
+          <wa-callout variant="brand" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
-            F+O
+            Filled-Outlined
           </wa-callout>
           <wa-callout variant="brand" appearance="filled">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
@@ -300,17 +266,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-brand" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-brand" appearance="accent">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout class="wa-brand" appearance="filled outlined">
+          <wa-callout class="wa-brand" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
-            F+O
+            Filled-Outlined
           </wa-callout>
           <wa-callout class="wa-brand" appearance="filled">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
@@ -331,17 +293,13 @@
       <th><code>neutral</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="neutral" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="neutral" appearance="accent">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout variant="neutral" appearance="filled outlined">
+          <wa-callout variant="neutral" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
-            F+O
+            Filled-Outlined
           </wa-callout>
           <wa-callout variant="neutral" appearance="filled">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
@@ -359,17 +317,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-neutral" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-neutral" appearance="accent">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout class="wa-neutral" appearance="filled outlined">
+          <wa-callout class="wa-neutral" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
-            F+O
+            Filled-Outlined
           </wa-callout>
           <wa-callout class="wa-neutral" appearance="filled">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
@@ -390,17 +344,13 @@
       <th><code>success</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="success" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="success" appearance="accent">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout variant="success" appearance="filled outlined">
+          <wa-callout variant="success" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
-            F+O
+            Filled-Outlined
           </wa-callout>
           <wa-callout variant="success" appearance="filled">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
@@ -418,17 +368,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-success" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-success" appearance="accent">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout class="wa-success" appearance="filled outlined">
+          <wa-callout class="wa-success" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
-            F+O
+            Filled-Outlined
           </wa-callout>
           <wa-callout class="wa-success" appearance="filled">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
@@ -449,17 +395,13 @@
       <th><code>warning</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="warning" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="warning" appearance="accent">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout variant="warning" appearance="filled outlined">
+          <wa-callout variant="warning" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            F+O
+            Filled-Outlined
           </wa-callout>
           <wa-callout variant="warning" appearance="filled">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
@@ -477,17 +419,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-warning" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-warning" appearance="accent">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout class="wa-warning" appearance="filled outlined">
+          <wa-callout class="wa-warning" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            F+O
+            Filled-Outlined
           </wa-callout>
           <wa-callout class="wa-warning" appearance="filled">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
@@ -508,17 +446,13 @@
       <th><code>danger</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="danger" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="danger" appearance="accent">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout variant="danger" appearance="filled outlined">
+          <wa-callout variant="danger" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            F+O
+            Filled-Outlined
           </wa-callout>
           <wa-callout variant="danger" appearance="filled">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
@@ -536,17 +470,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-danger" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-danger" appearance="accent">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout class="wa-danger" appearance="filled outlined">
+          <wa-callout class="wa-danger" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            F+O
+            Filled-Outlined
           </wa-callout>
           <wa-callout class="wa-danger" appearance="filled">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
@@ -582,22 +512,18 @@
       <th><code>brand</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="brand" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="brand" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="brand" appearance="filled-outlined">Filled-Outlined</wa-tag>
           <wa-tag variant="brand" appearance="filled">Filled</wa-tag>
           <wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
-          <wa-tag variant="brand" appearance="plain">Plain</wa-tag>
         </div>
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-brand" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-brand" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-brand" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-brand" appearance="filled-outlined">Filled-Outlined</wa-tag>
           <wa-tag class="wa-brand" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-brand" appearance="outlined">Outlined</wa-tag>
-          <wa-tag class="wa-brand" appearance="plain">Plain</wa-tag>
         </div>
       </td>
     </tr>
@@ -605,22 +531,18 @@
       <th><code>neutral</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="neutral" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="neutral" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="neutral" appearance="filled-outlined">Filled-Outlined</wa-tag>
           <wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
           <wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
-          <wa-tag variant="neutral" appearance="plain">Plain</wa-tag>
         </div>
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-neutral" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-neutral" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-neutral" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-neutral" appearance="filled-outlined">Filled-Outlined</wa-tag>
           <wa-tag class="wa-neutral" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-neutral" appearance="outlined">Outlined</wa-tag>
-          <wa-tag class="wa-neutral" appearance="plain">Plain</wa-tag>
         </div>
       </td>
     </tr>
@@ -628,22 +550,18 @@
       <th><code>success</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="success" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="success" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="success" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="success" appearance="filled-outlined">Filled-Outlined</wa-tag>
           <wa-tag variant="success" appearance="filled">Filled</wa-tag>
           <wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
-          <wa-tag variant="success" appearance="plain">Plain</wa-tag>
         </div>
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-success" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-success" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-success" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-success" appearance="filled-outlined">Filled-Outlined</wa-tag>
           <wa-tag class="wa-success" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-success" appearance="outlined">Outlined</wa-tag>
-          <wa-tag class="wa-success" appearance="plain">Plain</wa-tag>
         </div>
       </td>
     </tr>
@@ -651,22 +569,18 @@
       <th><code>warning</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="warning" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="warning" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="warning" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="warning" appearance="filled-outlined">Filled-Outlined</wa-tag>
           <wa-tag variant="warning" appearance="filled">Filled</wa-tag>
           <wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
-          <wa-tag variant="warning" appearance="plain">Plain</wa-tag>
         </div>
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-warning" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-warning" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-warning" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-warning" appearance="filled-outlined">Filled-Outlined</wa-tag>
           <wa-tag class="wa-warning" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-warning" appearance="outlined">Outlined</wa-tag>
-          <wa-tag class="wa-warning" appearance="plain">Plain</wa-tag>
         </div>
       </td>
     </tr>
@@ -674,25 +588,21 @@
       <th><code>danger</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="danger" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="danger" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="danger" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="danger" appearance="filled-outlined">Filled-Outlined</wa-tag>
           <wa-tag variant="danger" appearance="filled">Filled</wa-tag>
           <wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
-          <wa-tag variant="danger" appearance="plain">Plain</wa-tag>
         </div>
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-danger" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-danger" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-danger" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-danger" appearance="filled-outlined">Filled-Outlined</wa-tag>
           <wa-tag class="wa-danger" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-danger" appearance="outlined">Outlined</wa-tag>
-          <wa-tag class="wa-danger" appearance="plain">Plain</wa-tag>
         </div>
       </td>
     </tr>
   </tbody>
 </table>
-</div>
+</div>

packages/webawesome/docs/_includes/visual-tests/native.njk

@@ -17,27 +17,6 @@
         <button>Button</button>
       </td>
     </tr>
-    <tr>
-      <th><code>accent</code> + <code>outlined</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="accent outlined">Brand</wa-button>
-          <wa-button variant="neutral" appearance="accent outlined">Neutral</wa-button>
-          <wa-button variant="success" appearance="accent outlined">Success</wa-button>
-          <wa-button variant="warning" appearance="accent outlined">Warning</wa-button>
-          <wa-button variant="danger" appearance="accent outlined">Danger</wa-button>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <button class="wa-brand wa-accent wa-outlined">Brand</button>
-          <button class="wa-neutral wa-accent wa-outlined">Neutral</button>
-          <button class="wa-success wa-accent wa-outlined">Success</button>
-          <button class="wa-warning wa-accent wa-outlined">Warning</button>
-          <button class="wa-danger wa-accent wa-outlined">Danger</button>
-        </div>
-      </td>
-    </tr>
     <tr>
       <th><code>accent</code></th>
       <td>
@@ -60,14 +39,14 @@
       </td>
     </tr>
     <tr>
-      <th><code>filled</code> + <code>outlined</code></th>
+      <th><code>filled-outlined</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="filled outlined">Brand</wa-button>
-          <wa-button variant="neutral" appearance="filled outlined">Neutral</wa-button>
-          <wa-button variant="success" appearance="filled outlined">Success</wa-button>
-          <wa-button variant="warning" appearance="filled outlined">Warning</wa-button>
-          <wa-button variant="danger" appearance="filled outlined">Danger</wa-button>
+          <wa-button variant="brand" appearance="filled-outlined">Brand</wa-button>
+          <wa-button variant="neutral" appearance="filled-outlined">Neutral</wa-button>
+          <wa-button variant="success" appearance="filled-outlined">Success</wa-button>
+          <wa-button variant="warning" appearance="filled-outlined">Warning</wa-button>
+          <wa-button variant="danger" appearance="filled-outlined">Danger</wa-button>
         </div>
       </td>
       <td>
@@ -450,7 +429,7 @@
         </wa-select>
       </td>
       <td>
-        <label>Select 
+        <label>Select
           <select value="1">
             <option value="1">Option</option>
           </select>
@@ -465,8 +444,8 @@
         </wa-select>
       </td>
       <td>
-        <label class="wa-filled">Select (filled) 
-          <select value="1">
+        <label>Select (filled)
+          <select class="wa-filled" value="1">
             <option value="1">Option</option>
           </select>
         </label>
@@ -480,7 +459,7 @@
         </wa-select>
       </td>
       <td>
-        <label class="wa-size-s">Select (small) 
+        <label class="wa-size-s">Select (small)
           <select value="1">
             <option value="1">Option</option>
           </select>
@@ -495,7 +474,7 @@
         </wa-select>
       </td>
       <td>
-        <label class="wa-size-m">Select (medium) 
+        <label class="wa-size-m">Select (medium)
           <select value="1">
             <option value="1">Option</option>
           </select>
@@ -510,7 +489,7 @@
         </wa-select>
       </td>
       <td>
-        <label class="wa-size-l">Select (large) 
+        <label class="wa-size-l">Select (large)
           <select value="1">
             <option value="1">Option</option>
           </select>
@@ -603,4 +582,4 @@
     </tr>
   </tbody>
 </table>
-</div>
+</div>

packages/webawesome/docs/_includes/visual-tests/size.njk

@@ -40,66 +40,6 @@
 </div>
 <wa-divider></wa-divider>
 
-<h3>Button Group</h3>
-
-<div class="table-scroll">
-<table>
-  <thead>
-    <th></th>
-    <th><code>size=""</code></th>
-    <th><code>.wa-size-[s|m|l]</code></th>
-  </thead>
-  <tbody>
-    <tr>
-      <th><code>small</code>/<code>s</code></th>
-      <td>
-        <wa-button-group orientation="horizontal" size="small">
-          <wa-button value="1">Button L</wa-button>
-          <wa-button value="2">Button R</wa-button>
-        </wa-button-group>
-      </td>
-      <td>
-        <wa-button-group orientation="horizontal" class="wa-size-s">
-          <wa-button value="1">Button L</wa-button>
-          <wa-button value="2">Button R</wa-button>
-        </wa-button-group>
-      </td>
-    </tr>
-    <tr>
-      <th><code>medium</code>/<code>m</code></th>
-      <td>
-        <wa-button-group orientation="horizontal" size="medium">
-          <wa-button value="1">Button L</wa-button>
-          <wa-button value="2">Button R</wa-button>
-        </wa-button-group>
-      </td>
-      <td>
-        <wa-button-group orientation="horizontal" class="wa-size-m">
-          <wa-button value="1">Button L</wa-button>
-          <wa-button value="2">Button R</wa-button>
-        </wa-button-group>
-      </td>
-    </tr>
-    <tr>
-      <th><code>large</code>/<code>l</code></th>
-      <td>
-        <wa-button-group orientation="horizontal" size="large">
-          <wa-button value="1">Button L</wa-button>
-          <wa-button value="2">Button R</wa-button>
-        </wa-button-group>
-      </td>
-      <td>
-        <wa-button-group orientation="horizontal" class="wa-size-l">
-          <wa-button value="1">Button L</wa-button>
-          <wa-button value="2">Button R</wa-button>
-        </wa-button-group>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</div>
-<wa-divider></wa-divider>
-
 <h3>Callout</h3>
 
 <div class="table-scroll">
@@ -258,14 +198,14 @@
       <th><code>small</code>/<code>s</code></th>
       <td>
         <wa-dropdown size="small">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
+          <wa-button slot="trigger" with-caret>Dropdown</wa-button>
           <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
           <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
         </wa-dropdown>
       </td>
       <td>
         <wa-dropdown class="wa-size-s">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
+          <wa-button slot="trigger" with-caret>Dropdown</wa-button>
           <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
           <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
         </wa-dropdown>
@@ -275,14 +215,14 @@
       <th><code>medium</code>/<code>m</code></th>
       <td>
         <wa-dropdown size="medium">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
+          <wa-button slot="trigger" with-caret>Dropdown</wa-button>
           <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
           <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
         </wa-dropdown>
       </td>
       <td>
         <wa-dropdown class="wa-size-m">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
+          <wa-button slot="trigger" with-caret>Dropdown</wa-button>
           <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
           <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
         </wa-dropdown>
@@ -292,14 +232,14 @@
       <th><code>large</code>/<code>l</code></th>
       <td>
         <wa-dropdown size="large">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
+          <wa-button slot="trigger" with-caret>Dropdown</wa-button>
           <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
           <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
         </wa-dropdown>
       </td>
       <td>
         <wa-dropdown class="wa-size-l">
-          <wa-button slot="trigger" caret>Dropdown</wa-button>
+          <wa-button slot="trigger" with-caret>Dropdown</wa-button>
           <wa-dropdown-item>Menu Item 1</wa-dropdown-item>
           <wa-dropdown-item>Menu Item 2</wa-dropdown-item>
         </wa-dropdown>

packages/webawesome/docs/_layouts/blank.njk

@@ -1,18 +1,12 @@
 <!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
+<html lang="en" data-fa-kit-code="38c11e3f20" data-version="{{ package.version }}">
   <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 class="layout-{{ layout | stripExtension }} page-{{ pageClass or page.fileSlug or 'home' }}">
+    {% block content %}
+      {{ content | safe }}
+    {% endblock %}
   </body>
 </html>

packages/webawesome/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 %}

packages/webawesome/docs/_layouts/component.njk

@@ -1,5 +1,22 @@
-{% extends '../_layouts/block.njk' %}
-{% set component = components[page.fileSlug] %}
+{% extends '../_layouts/docs.njk' %}
+{% set component = getComponent('wa-' + page.fileSlug) %}
+
+{# Component header #}
+{% block beforeContent %}
+  <div class="component-info">
+    <code class="component-tag">&lt;{{ component.tagName }}&gt;</code>
+    <wa-badge variant="neutral">Since {{ component.since }}</wa-badge>
+    <wa-badge
+      {% if component.status == 'stable' %}variant="brand"{% endif %}
+      {% if component.status == 'experimental' %}variant="warning"{% endif %}
+    >
+      {{ component.status }}
+    </wa-badge>
+  </div>
+  <p class="component-summary">
+    {{ component.summary | inlineMarkdown | safe }}
+  </p>
+{% endblock %}
 
 {# Component API #}
 {% block afterContent %}
@@ -9,7 +26,7 @@
     <p>Learn more about <a href="/docs/usage/#slots">using slots</a>.</p>
 
     <wa-scroller>
-      <table class="component-table">
+      <table class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
@@ -40,7 +57,7 @@
     <p>Learn more about <a href="/docs/usage/#attributes-and-properties">attributes and properties</a>.</p>
 
     <wa-scroller>
-      <table class="component-table">
+      <table class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
@@ -87,7 +104,7 @@
     <p>Learn more about <a href="/docs/usage/#methods">methods</a>.</p>
 
     <wa-scroller>
-      <table class="component-table">
+      <table class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
@@ -122,7 +139,7 @@
     <p>Learn more about <a href="/docs/usage/#events">events</a>.</p>
 
     <wa-scroller>
-      <table class="component-table">
+      <table class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
@@ -149,7 +166,7 @@
     <p>Learn more about <a href="/docs/customizing/#custom-properties">CSS custom properties</a>.</p>
 
     <wa-scroller>
-      <table class="component-table">
+      <table class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
@@ -181,7 +198,7 @@
     <p>Learn more about <a href="/docs/customizing/#custom-states">custom states</a>.</p>
 
     <wa-scroller>
-      <table class="component-table">
+      <table class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
@@ -194,7 +211,12 @@
             <tr>
               <td class="table-name"><code>{{ state.name }}</code></td>
               <td class="table-description">{{ state.description | inlineMarkdown | safe }}</td>
-              <td class="table-selector"><code>:state({{ state.name }})</code></td>
+              <td class="table-selector">
+                <span class="wa-cluster wa-gap-3xs">
+                  <code>:state({{ state.name }})</code>
+                  <wa-copy-button value=":state({{ state.name }})"></wa-copy-button>
+                </span>
+              </td>
             </tr>
           {% endfor %}
         </tbody>
@@ -208,11 +230,12 @@
     <p>Learn more about <a href="/docs/customizing/#css-parts">CSS parts</a>.</p>
 
     <wa-scroller>
-      <table class="component-table">
+      <table class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
             <th class="table-description">Description</th>
+            <th class="table-selector">CSS selector</th>
           </tr>
         </thead>
         <tbody>
@@ -220,6 +243,12 @@
             <tr>
               <td class="table-name"><code>{{ cssPart.name }}</code></td>
               <td class="table-description">{{ cssPart.description | inlineMarkdown | safe }}</td>
+              <td class="table-selector">
+                <span class="wa-cluster wa-gap-3xs">
+                  <code>::part({{ cssPart.name }})</code>
+                  <wa-copy-button value="::part({{ cssPart.name }})"></wa-copy-button>
+                </span>
+              </td>
             </tr>
           {% endfor %}
         </tbody>
@@ -244,30 +273,32 @@
   {# Importing #}
   <h2>Importing</h2>
   <p>
-    The <a href="/docs/#quick-start-autoloading-via-cdn">autoloader</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
+    Autoloading components via <a href="/docs/#using-a-project">projects</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
   </p>
 
+
+  {% set componentName = component.tagName | stripPrefix %}
+  {% set componentPath = ["components/", componentName, "/", componentName, ".js"] | join("") %}
   <wa-tab-group label="How would you like to import this component?">
     <wa-tab panel="cdn">CDN</wa-tab>
     <wa-tab panel="npm">npm</wa-tab>
     <wa-tab panel="react">React</wa-tab>
     <wa-tab-panel name="cdn">
       <p>
-        To manually import this component from the CDN, use the following code.
+        Let your project code do the work! <a href="/signup">Sign up for free</a> to use a project with your very own CDN &mdash; it's the fastest and easiest way to use Web Awesome.
       </p>
-      <pre><code class="language-js">import '{% cdnUrl component.path %}';</code></pre>
     </wa-tab-panel>
     <wa-tab-panel name="npm">
-      Coming soon!
+      <p>
+        To manually import this component from NPM, use the following code.
+      </p>
+      <pre><code class="language-js">import '@awesome.me/webawesome/dist/{{ componentPath }}';</code></pre>
     </wa-tab-panel>
     <wa-tab-panel name="react">
-      Coming soon!
-      {# NOTE - disabled for alpha
       <p>
         To manually import this component from React, use the following code.
       </p>
-      <pre><code class="language-js">import '@shoelace-style/webawesome/react/{{ component.tagName | stripPrefix }}';</code></pre>
-      #}
+      <pre><code class="language-js">import {{ component.name }} from '@awesome.me/webawesome/dist/react/{{ componentName }}';</code></pre>
     </wa-tab-panel>
   </wa-tab-group>
 
@@ -275,12 +306,12 @@
 
   <div class="component-help">
     <strong>Need a hand?</strong>
-    <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome-alpha/issues" target="_blank">
-      <wa-icon slot="prefix" name="bug"></wa-icon>
+    <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome/issues" target="_blank">
+      <wa-icon slot="start" variant="regular" name="bug"></wa-icon>
       Report a bug
     </wa-button>
-    <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome-alpha/discussions" target="_blank">
-      <wa-icon slot="prefix" name="message-question"></wa-icon>
+    <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">
+      <wa-icon slot="start" variant="regular" name="message-question"></wa-icon>
       Ask for help
     </wa-button>
   </div>

packages/webawesome/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 %}

packages/webawesome/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 }}" with-clear autofocus>
-	<wa-icon slot="start" 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 %}

packages/webawesome/docs/_layouts/palette.njk

@@ -1,313 +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-button appearance="plain" size="small" @click="rename">
-        <wa-icon name="pencil" label="Rename palette"></wa-icon>
-      </wa-button>
-      <wa-button appearance="plain" size="small" v-if="saved" class="delete" @click="deleteSaved">
-        <wa-icon name="trash" label="Delete palette"></wa-icon>
-      </wa-button>
-      <wa-button @click="save()" :disabled="!unsavedChanges"
-        :variant="unsavedChanges ? 'success' : 'neutral'" size="small" :appearance="unsavedChanges ? 'accent' : 'outlined'">
-        <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" with-remove @wa-remove="reset(param)" v-content="tweakHumanReadable"></wa-tag>
-   </div>
-
-  <wa-button @click="reset()" appearance="outlined" variant="danger" size="small">
-    <wa-icon slot="start" name="circle-xmark" variant="regular"></wa-icon>
-    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-button appearance="plain" @click="grayChroma = originalGrayChroma" class="clear-button">
-                <wa-icon name="circle-xmark" label="Reset" variant="regular"></wa-icon>
-              </wa-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-button appearance="plain" @click="hueShifts.{{ hue }} = 0" class="clear-button">
-              <wa-icon name="circle-xmark" label="Reset" variant="regular"></wa-icon>
-            </wa-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-button appearance="plain" @click="chromaScale = 1" class="clear-button">
-        <wa-icon name="circle-xmark" label="Reset" variant="regular"></wa-icon>
-      </wa-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 %}
-
-

packages/webawesome/docs/_layouts/pattern.njk

@@ -0,0 +1,8 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+{% set section = 'docs' %}
+
+{% block beforeContent %}
+    <p>{{ description }}</p>
+{% endblock %}
+{% extends "../_includes/base.njk" %}

packages/webawesome/docs/_layouts/patterns.njk

@@ -1 +0,0 @@
-{% extends '../_layouts/block.njk' %}

packages/webawesome/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="end" 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" with-clear v-model="theme.palette">
-    <wa-icon name="swatchbook" slot="start" 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="" with-clear v-model="theme.colors">
-    <wa-icon name="palette" slot="start" 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…" with-clear v-model="theme.typography">
-    <wa-icon name="font-case" slot="start"></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 %}

packages/webawesome/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 %}

packages/webawesome/docs/_plugins/search.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-invalid-this */
+import { readFileSync } from 'fs';
 import { mkdir, writeFile } from 'fs/promises';
 import lunr from 'lunr';
 import { parse } from 'node-html-parser';
@@ -23,19 +24,22 @@ export function searchPlugin(options = {}) {
     ...options,
   };
 
+  // Hoist above so that it can "cache" properly for incremental builds.
   return function (eleventyConfig) {
-    const pagesToIndex = new Map();
+    let pagesToIndex = new Map();
 
     eleventyConfig.addPreprocessor('exclude-unlisted-from-search', '*', function (data, content) {
       if (data.unlisted) {
         // no-op
+        pagesToIndex.delete(data.page.inputPath);
       } else {
-        pagesToIndex.set(data.page.inputPath, {});
+        pagesToIndex.set(data.page.inputPath, true);
       }
 
       return content;
     });
 
+    // With incremental builds we need this to be last in case stuff was added from metadata. _BUT_ in incremental builds, not every page is added to the "transform".
     eleventyConfig.addTransform('search', function (content) {
       if (!pagesToIndex.has(this.page.inputPath)) {
         return content;
@@ -67,11 +71,30 @@ export function searchPlugin(options = {}) {
       return content;
     });
 
-    eleventyConfig.on('eleventy.after', ({ directories }) => {
+    eleventyConfig.on('eleventy.after', async ({ directories }) => {
       const { output } = directories;
       const outputFilename = path.resolve(join(output, 'search.json'));
+      const cachedPages = path.resolve(join(output, 'cached_pages.json'));
+
+      function getCachedPages() {
+        let content = { pages: [] };
+        try {
+          content = JSON.parse(readFileSync(cachedPages));
+        } catch (e) {}
+
+        const cachedPagesMap = new Map(content.pages);
+        for (const [key, value] of cachedPagesMap.entries()) {
+          // A page uses a cached value if `true` and it didnt get its value set in the "transform" hook. This is to get around the limitation of incremental builds not going over every file in transform.
+          if (pagesToIndex.get(key) === true) {
+            pagesToIndex.set(key, value);
+          }
+        }
+      }
+
       const map = [];
-      const searchIndex = lunr(async function () {
+
+      getCachedPages();
+      const searchIndex = lunr(function () {
         let index = 0;
 
         this.ref('id');
@@ -84,9 +107,11 @@ export function searchPlugin(options = {}) {
           map[index] = { title: page.title, description: page.description, url: page.url };
           index++;
         }
-        await mkdir(dirname(outputFilename), { recursive: true });
-        await writeFile(outputFilename, JSON.stringify({ searchIndex, map }), 'utf-8');
       });
+
+      await mkdir(dirname(outputFilename), { recursive: true });
+      await writeFile(outputFilename, JSON.stringify({ searchIndex, map }), 'utf-8');
+      await writeFile(cachedPages, JSON.stringify({ pages: [...pagesToIndex.entries()] }, null, 2));
     });
   };
 }

packages/webawesome/docs/_transformers/anchor-headings.js

@@ -0,0 +1,95 @@
+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 anchorHeadingsTransformer(options = {}) {
+  options = {
+    container: 'body',
+    headingSelector: 'h2, h3, h4, h5, h6',
+    anchorLabel: 'Jump to heading',
+    ...options,
+  };
+
+  /** doc is a parsed HTML document */
+  return function (doc) {
+    const container = doc.querySelector(options.container);
+
+    if (!container) {
+      return doc;
+    }
+
+    // Check if the document or container has data-no-anchor (view-level)
+    const hasNoAnchorOnDocument = doc.querySelector('html')?.hasAttribute('data-no-anchor') || false;
+    const hasNoAnchorOnContainer = container.closest('[data-no-anchor]') !== null;
+
+    // If view-level data-no-anchor is set, skip processing all headings
+    if (hasNoAnchorOnDocument || hasNoAnchorOnContainer) {
+      return doc;
+    }
+
+    // Look for headings (selector excludes headings with data-no-anchor attribute)
+    let selector = `:is(${options.headingSelector}):not([data-no-anchor])`;
+    container.querySelectorAll(selector).forEach(heading => {
+      // Skip if heading is a descendant of an element with data-no-anchor
+      // (selector already excludes headings with the attribute directly)
+      if (heading.closest('[data-no-anchor]') !== null) {
+        return;
+      }
+      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>
+          <wa-icon variant="regular" name="hashtag" class="icon-shrink"></wa-icon>
+        </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);
+    });
+  };
+}

packages/webawesome/docs/_transformers/code-examples.js

@@ -1,43 +1,51 @@
 import { parse } from 'node-html-parser';
 import { v4 as uuid } from 'uuid';
-import { markdown } from '../_utils/markdown.js';
+import { copyCode } from './copy-code.js';
+import { highlightCode } from './highlight-code.js';
 
 /**
  * Eleventy plugin to turn `<code class="example">` blocks into live examples.
  */
-export function codeExamplesPlugin(options = {}) {
+export function codeExamplesTransformer(options = {}) {
   options = {
     container: 'body',
     ...options,
   };
 
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('code-examples', content => {
-      const doc = parse(content, { blockTextElements: { code: true } });
-      const container = doc.querySelector(options.container);
+  return function (doc) {
+    const container = doc.querySelector(options.container);
 
-      if (!container) {
-        return content;
-      }
+    if (!container) {
+      return;
+    }
 
-      // Look for external links
-      container.querySelectorAll('code.example').forEach(code => {
-        const pre = code.closest('pre');
-        const hasButtons = !code.classList.contains('no-buttons');
-        const isOpen = code.classList.contains('open') || !hasButtons;
-        const noEdit = code.classList.contains('no-edit');
-        const id = `code-example-${uuid().slice(-12)}`;
-        let preview = pre.textContent;
+    // Look for external links
+    container.querySelectorAll('code.example').forEach(code => {
+      let pre = code.closest('pre');
+      const hasButtons = !code.classList.contains('no-buttons');
+      const isOpen = code.classList.contains('open') || !hasButtons;
+      const noEdit = code.classList.contains('no-edit');
+      const id = `code-example-${uuid().slice(-12)}`;
+      let preview = pre.textContent;
 
-        // Run preview scripts as modules to prevent collisions
-        const root = parse(preview, { blockTextElements: { script: true } });
-        root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
-        preview = root.toString();
+      const langClass = [...code.classList.values()].find(val => val.startsWith('language-'));
+      const lang = langClass ? langClass.replace(/^language-/, '') : 'plain';
 
-        const codeExample = parse(`
+      code.innerHTML = highlightCode(code.textContent ?? '', lang);
+
+      // 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();
+
+      copyCode(code);
+
+      const codeExample = parse(`
           <div class="code-example ${isOpen ? 'open' : ''}">
             <div class="code-example-preview">
-              ${preview}
+              <div>
+                ${preview}
+              </div>
               <div class="code-example-resizer" aria-hidden="true">
                 <wa-icon name="grip-lines-vertical"></wa-icon>
               </div>
@@ -77,10 +85,7 @@ export function codeExamplesPlugin(options = {}) {
           </div>
         `);
 
-        pre.replaceWith(codeExample);
-      });
-
-      return doc.toString();
+      pre.replaceWith(codeExample);
     });
   };
 }

packages/webawesome/docs/_transformers/copy-code.js

@@ -0,0 +1,38 @@
+export function copyCode(code) {
+  const pre = code.closest('pre');
+  let preId = pre.getAttribute('id') || `code-block-${crypto.randomUUID()}`;
+  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-copy-button from="${codeId}" class="copy-button wa-dark"></wa-copy-button>`;
+}
+
+/**
+ * Eleventy plugin to add copy buttons to code blocks.
+ */
+export function copyCodeTransformer(options = {}) {
+  options = {
+    container: 'body',
+    ...options,
+  };
+
+  return function (doc) {
+    const container = doc.querySelector(options.container);
+
+    if (!container) {
+      return;
+    }
+
+    // Look for code blocks
+    container.querySelectorAll('pre > code').forEach(code => {
+      copyCode(code);
+    });
+  };
+}

packages/webawesome/docs/_transformers/current-link.js

@@ -24,30 +24,25 @@ function normalize(pathname) {
 /**
  * Eleventy plugin to decorate current links with a custom class.
  */
-export function currentLink(options = {}) {
+export function currentLinkTransformer(options = {}) {
   options = {
     container: 'body',
     className: 'current',
     ...options,
   };
 
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('current-link', function (content) {
-      const doc = parse(content);
-      const container = doc.querySelector(options.container);
+  return function (doc) {
+    const container = doc.querySelector(options.container);
 
-      if (!container) {
-        return content;
+    if (!container) {
+      return;
+    }
+
+    // Compare the href attribute to 11ty's page URL
+    container.querySelectorAll('a[href]').forEach(a => {
+      if (normalize(a.getAttribute('href')) === normalize(this.page.url)) {
+        a.classList.add(options.className);
       }
-
-      // Compare the href attribute to 11ty's page URL
-      container.querySelectorAll('a[href]').forEach(a => {
-        if (normalize(a.getAttribute('href')) === normalize(this.page.url)) {
-          a.classList.add(options.className);
-        }
-      });
-
-      return doc.toString();
     });
   };
 }

packages/webawesome/docs/_transformers/highlight-code.js

@@ -37,36 +37,31 @@ export function highlightCode(code, language = 'plain') {
  * Eleventy plugin to highlight code blocks with the `language-*` attribute using Prism.js. Unlike most plugins, this
  * works on the entire document — not just markdown content.
  */
-export function highlightCodePlugin(options = {}) {
+export function highlightCodeTransformer(options = {}) {
   options = {
     container: 'body',
     ...options,
   };
 
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('highlight-code', content => {
-      const doc = parse(content, { blockTextElements: { code: true } });
-      const container = doc.querySelector(options.container);
+  return function (doc) {
+    const container = doc.querySelector(options.container);
 
-      if (!container) {
-        return content;
-      }
+    if (!container) {
+      return;
+    }
 
-      // Look for <code class="language-*"> and highlight each one
-      container.querySelectorAll('code[class*="language-"]').forEach(code => {
-        const langClass = [...code.classList.values()].find(val => val.startsWith('language-'));
-        const lang = langClass ? langClass.replace(/^language-/, '') : 'plain';
+    // Look for <code class="language-*"> and highlight each one
+    container.querySelectorAll('code[class*="language-"]').forEach(code => {
+      const langClass = [...code.classList.values()].find(val => val.startsWith('language-'));
+      const lang = langClass ? langClass.replace(/^language-/, '') : 'plain';
 
-        try {
-          code.innerHTML = highlightCode(code.textContent ?? '', lang);
-        } catch (err) {
-          if (!options.ignoreMissingLangs) {
-            throw new Error(err.message);
-          }
+      try {
+        code.innerHTML = highlightCode(code.textContent ?? '', lang);
+      } catch (err) {
+        if (!options.ignoreMissingLangs) {
+          throw new Error(err.message);
         }
-      });
-
-      return doc.toString();
+      }
     });
   };
 }

packages/webawesome/docs/_transformers/outline.js

@@ -0,0 +1,64 @@
+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 outlineTransformer(options = {}) {
+  options = {
+    container: 'body',
+    target: '.outline',
+    selector: 'h2,h3',
+    ifEmpty: () => null,
+    ...options,
+  };
+
+  return function (doc) {
+    const container = doc.querySelector(options.container);
+    const ul = parse('<ul></ul>');
+    let numLinks = 0;
+
+    if (!container) {
+      return;
+    }
+
+    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);
+    }
+  };
+}

packages/webawesome/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();
-    });
-  };
-}

packages/webawesome/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-button href="#${preId}" class="block-link-icon" appearance="plain" size="small"><wa-icon name="link" label="Copy link"></wa-icon></wa-button>
-        <wa-copy-button from="${codeId}" class="copy-button"></wa-copy-button>`;
-    });
-
-    return doc.toString();
-  });
-}

packages/webawesome/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);
-}

packages/webawesome/docs/_utils/manifest.js

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

packages/webawesome/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();
-    });
-  };
-}

packages/webawesome/docs/_utils/simulate-webawesome-app.js

@@ -0,0 +1,17 @@
+import nunjucks from 'nunjucks';
+
+/**
+ * This function simulates what a server would do running "on top" of eleventy.
+ */
+export function SimulateWebAwesomeApp(str) {
+  return nunjucks.renderString(str, {
+    // Stub the server EJS shortcodes.
+    currentUser: {
+      hasPro: false,
+    },
+    server: {
+      head: '',
+      flashes: '',
+    },
+  });
+}

packages/webawesome/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;
-}

packages/webawesome/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,
-};

packages/webawesome/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));

packages/webawesome/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'],
-  },
-};

packages/webawesome/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/';

packages/webawesome/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;

packages/webawesome/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 %}
-};

packages/webawesome/docs/assets/data/theming.js

@@ -1,100 +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;
-    },
-  },
-  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'),
-};

packages/webawesome/docs/assets/examples/page/demo-1.html

@@ -1,289 +0,0 @@
-<!doctype html>
-<html lang="en" class="wa-cloak">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Web Awesome Page Demo 1</title>
-    <link rel="stylesheet" href="/dist/styles/themes/default.css" />
-    <link rel="stylesheet" href="/dist/styles/webawesome.css" />
-    <script type="module" src="/dist/webawesome.loader.js"></script>
-  </head>
-  <body>
-    <wa-page mobile-breakpoint="920">
-      <div slot="banner" class="wa-body-s">
-        <a href="#" class="wa-cluster wa-align-items-baseline wa-gap-xs" style="flex-wrap: nowrap">
-          <wa-icon name="gift"></wa-icon>
-          <span>Give a Hoot for the Holidays: Donate now and double your impact.</span>
-        </a>
-      </div>
-      <header slot="header" class="wa-split">
-        <div class="wa-cluster">
-          <wa-icon name="feather-pointed" style="color: var(--wa-color-brand-fill-loud); font-size: 1.5em"></wa-icon>
-          <span id="brand-name" class="wa-heading-s wa-desktop-only">Audubon Worldwide</span>
-          <a href="#">Our Work</a>
-          <a href="#">About Us</a>
-          <a href="#">Discover</a>
-          <a href="#">Get Involved</a>
-        </div>
-        <div class="wa-cluster wa-gap-xs">
-          <wa-button size="small" variant="brand" appearance="outlined">Find Your Local Audubon</wa-button>
-          <wa-button size="small" variant="brand">Donate</wa-button>
-        </div>
-      </header>
-      <nav slot="subheader">
-        <div class="wa-cluster" style="flex-wrap: nowrap">
-          <wa-button data-toggle-nav appearance="plain" size="small">
-            <wa-icon name="bars" label="Menu"></wa-icon>
-          </wa-button>
-          <wa-breadcrumb style="font-size: var(--wa-font-size-s)">
-            <wa-breadcrumb-item>Field Guides</wa-breadcrumb-item>
-            <wa-breadcrumb-item>Owls</wa-breadcrumb-item>
-            <wa-breadcrumb-item>Great Horned Owl</wa-breadcrumb-item>
-          </wa-breadcrumb>
-        </div>
-        <wa-input id="search" class="wa-desktop-only" placeholder="Search" size="small" style="max-inline-size: 12rem">
-          <wa-icon slot="start" name="magnifying-glass"></wa-icon>
-        </wa-input>
-      </nav>
-      <nav slot="navigation-header">
-        <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" label=""></wa-avatar>
-          <div class="wa-stack wa-gap-3xs">
-            <span class="wa-heading-s">Great Horned Owl</span>
-            <span class="wa-caption-s" lang="la"><em>Bubo virginianus</em></span>
-          </div>
-        </div>
-      </nav>
-      <nav slot="navigation">
-        <a href="#identification">Identification</a>
-        <a href="#range">Range and Habitat</a>
-        <a href="#behavior">Behavior</a>
-        <a href="#conservation">Conservation</a>
-      </nav>
-      <nav slot="navigation-footer">
-        <a href="#" class="wa-flank">
-          <wa-icon name="camera"></wa-icon>
-          <span>Photo Gallery</span>
-        </a>
-        <a href="#" class="wa-flank">
-          <wa-icon name="map-location-dot"></wa-icon>
-          <span>Interactive Range Map</span>
-        </a>
-      </nav>
-      <header slot="main-header">
-        <div
-          class="wa-flank:end wa-border-radius-l wa-dark"
-          style="
-            background-color: var(--wa-color-surface-lowered);
-            --content-percentage: 35%;
-            padding: var(--wa-space-m);
-          "
-        >
-          <div class="wa-stack" style="margin: var(--wa-space-2xl)">
-            <h1>Great Horned Owl</h1>
-            <wa-divider></wa-divider>
-            <div class="wa-cluster wa-gap-xs">
-              <wa-tag size="small">Owls</wa-tag>
-              <wa-tag size="small">Birds of Prey</wa-tag>
-              <wa-tag size="small">Pleistocene Birds</wa-tag>
-            </div>
-            <div class="wa-flank">
-              <wa-icon name="ruler"></wa-icon>
-              <span class="wa-caption-m">L 21.5" | WS 48.5"</span>
-            </div>
-            <div class="wa-flank">
-              <wa-icon name="earth-americas"></wa-icon>
-              <span class="wa-caption-m"
-                >North America (Widespread), Central America (Limited), South America (Limited)</span
-              >
-            </div>
-            <div class="wa-flank">
-              <wa-icon name="shield-heart"></wa-icon>
-              <span class="wa-caption-m">Least Concern</span>
-            </div>
-          </div>
-          <div class="wa-frame" style="border-radius: var(--wa-border-radius-l); max-inline-size: 40ch">
-            <img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
-          </div>
-        </div>
-      </header>
-      <main class="wa-body-l">
-        <h2 id="identification">Identification</h2>
-        <p>
-          Lorem ipsum odor amet, consectetuer adipiscing elit. Eget habitant scelerisque lectus ultrices nascetur
-          aliquet sapien primis. Cursus sapien fusce semper nulla elit sociosqu lectus per sem. Sem ad porttitor dictum
-          nisl pharetra tortor convallis. Sit molestie hendrerit porta dictum tortor posuere euismod magna. Mauris
-          suspendisse pharetra finibus; eleifend etiam ridiculus.
-        </p>
-        <h2 id="range">Range and Habitat</h2>
-        <p>
-          Diam sed ipsum pretium porttitor class cubilia elementum. Blandit felis ligula habitant ultricies vulputate
-          rutrum lacus commodo pulvinar. Nostra semper placerat lectus in dis eu. Sagittis ipsum placerat rhoncus lacus
-          id eget. Erat pharetra aptent enim, augue accumsan ultricies inceptos habitasse. Senectus id maximus
-          parturient tellus; fermentum posuere vulputate luctus. Ac tempus dapibus vehicula ligula ullamcorper sit duis.
-        </p>
-        <h2 id="behavior">Behavior</h2>
-        <p>
-          Erat vitae luctus arcu taciti malesuada pretium arcu justo primis. Cubilia vitae maecenas congue velit id
-          netus arcu. Dictum vel pellentesque taciti fermentum risus consectetur amet. Faucibus commodo habitasse sem
-          maximus praesent purus, dignissim tristique porta. Platea magna justo ipsum ut metus ac facilisi. Imperdiet
-          laoreet pharetra maximus lacus tortor suscipit. Nam quisque iaculis orci porttitor pellentesque rhoncus.
-          Molestie sagittis tincidunt quisque nisi non urna conubia.
-        </p>
-        <h2 id="conservation">Conservation</h2>
-        <p>
-          Nullam magna quam quisque eu varius integer. Inceptos donec facilisi risus himenaeos semper mollis habitasse.
-          Vehicula lacus vivamus euismod pharetra mollis dictum. Ante ex tortor elementum eleifend habitasse orci
-          aliquam. Fames erat senectus fames etiam dapibus cursus.
-        </p>
-      </main>
-      <footer slot="main-footer">
-        <section>
-          <h2 class="wa-heading-m">Sources</h2>
-          <ul class="wa-body-s">
-            <li>
-              <cite
-                ><a href="https://www.audubon.org/field-guide/bird/great-horned-owl" target="_blank" rel="noopener"
-                  >Great Horned Owl</a
-                ></cite
-              >, National Audubon Society. Retrieved 5 December 2024.
-            </li>
-            <li>
-              <cite
-                ><a href="https://www.allaboutbirds.org/guide/Great_Horned_Owl/" target="_blank" rel="noopener"
-                  >Great Horned Owl</a
-                ></cite
-              >, All About Birds by CornellLab. Retrieved 5 December 2024.
-            </li>
-            <li>Armistead, G. L. (2015). <cite>Field guide to birds of Pennsylvania</cite>. Scott & Nix, Inc.</li>
-          </ul>
-        </section>
-      </footer>
-      <aside slot="aside" class="wa-desktop-only">
-        <h2 class="wa-heading-m">Discover More Birds</h2>
-        <wa-card>
-          <div slot="media" class="wa-frame">
-            <img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
-          </div>
-          <div class="wa-stack wa-gap-3xs">
-            <span class="wa-heading-s">Long-eared Owl</span>
-            <span class="wa-caption-s" lang="la"><em>Asio otus</em></span>
-          </div>
-        </wa-card>
-        <wa-card>
-          <div slot="media" class="wa-frame">
-            <img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
-          </div>
-          <div class="wa-stack wa-gap-3xs">
-            <span class="wa-heading-s">Northen Hawk Owl</span>
-            <span class="wa-caption-s" lang="la"><em>Surnia ulula</em></span>
-          </div>
-        </wa-card>
-        <wa-card>
-          <div slot="media" class="wa-frame">
-            <img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
-          </div>
-          <div class="wa-stack wa-gap-3xs">
-            <span class="wa-heading-s">Golden Eagle</span>
-            <span class="wa-caption-s" lang="la"><em>Aquila chrysaetos</em></span>
-          </div>
-        </wa-card>
-      </aside>
-      <footer slot="footer" class="wa-grid wa-gap-xl">
-        <div class="wa-cluster" style="flex-wrap: nowrap">
-          <wa-icon name="feather-pointed" style="font-size: 1.5em"></wa-icon>
-          <span class="wa-heading-s">Audubon Worldwide</span>
-        </div>
-        <div class="wa-stack">
-          <h3 class="wa-heading-xs">Our Work</h3>
-          <a href="#">Habitat Restoration</a>
-          <a href="#">Migration Science</a>
-          <a href="#">Advocacy</a>
-        </div>
-        <div class="wa-stack">
-          <h3 class="wa-heading-xs">About Us</h3>
-          <a href="#">Our History</a>
-          <a href="#">Leadership</a>
-          <a href="#">Fiscal Reports</a>
-        </div>
-        <div class="wa-stack">
-          <h3 class="wa-heading-xs">Discover</h3>
-          <a href="#">Field Guides</a>
-          <a href="#">Photo Search</a>
-          <a href="#">Gear and Resources</a>
-        </div>
-        <div class="wa-stack">
-          <h3 class="wa-heading-xs">Get Involved</h3>
-          <a href="#">Adopt a Bird</a>
-          <a href="#">Your Local Audubon</a>
-          <a href="#">Youth Audubon Camps</a>
-        </div>
-      </footer>
-    </wa-page>
-
-    <style>
-      wa-page {
-        --menu-width: 15rem;
-        --aside-width: 15rem;
-      }
-      wa-page[view='desktop'] {
-        [slot*='navigation'] {
-          border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-        }
-      }
-      wa-page[view='mobile'] {
-        --menu-width: auto;
-        --aside-width: auto;
-      }
-
-      [slot='banner'] {
-        --wa-color-text-link: var(--wa-color-neutral-on-loud);
-        background-color: var(--wa-color-neutral-fill-loud);
-      }
-      [slot='header'] {
-        --wa-link-decoration-default: none;
-        border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-      }
-      [slot*='header'] a {
-        font-weight: var(--wa-font-weight-action);
-      }
-      [slot='subheader'] {
-        background-color: var(--wa-color-surface-lowered);
-        border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-      }
-      [slot='navigation-header'] {
-        border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-      }
-
-      [slot*='navigation'] a {
-        --wa-color-text-link: var(--wa-color-text-normal);
-      }
-      [slot='navigation-footer'] {
-        border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-
-        .wa-flank {
-          --flank-size: 1.25em;
-        }
-      }
-      [slot='main-header'],
-      main,
-      [slot='main-footer'] {
-        max-inline-size: 60rem;
-        margin-inline: auto;
-      }
-      [slot='main-footer'] {
-        border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-      }
-      [slot='footer'] {
-        --wa-color-text-link: var(--wa-color-text-quiet);
-        background-color: var(--wa-color-surface-lowered);
-        font-size: var(--wa-font-size-s);
-      }
-    </style>
-
-    <script>
-      const sectionAnchors = document.querySelectorAll("[slot*='navigation'] a[href*='#']");
-      sectionAnchors.forEach(sectionAnchor => sectionAnchor.setAttribute('data-drawer', 'close'));
-    </script>
-  </body>
-</html>

packages/webawesome/docs/assets/examples/page/demo-2.html

@@ -1,484 +0,0 @@
-<!doctype html>
-<html lang="en" class="wa-cloak">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Web Awesome Page Demo 2</title>
-    <link rel="stylesheet" href="/dist/styles/themes/default.css" />
-    <link rel="stylesheet" href="/dist/styles/webawesome.css" />
-    <script type="module" src="/dist/webawesome.loader.js"></script>
-  </head>
-  <body>
-    <wa-page class="wa-dark">
-      <header slot="header">
-        <div class="wa-cluster">
-          <wa-button data-toggle-nav appearance="plain" size="small">
-            <wa-icon name="bars" label="Menu"></wa-icon>
-          </wa-button>
-          <wa-icon name="record-vinyl"></wa-icon>
-          <span class="wa-heading-m">radiogaga</span>
-        </div>
-        <wa-input id="search-header" placeholder="Search" class="wa-desktop-only" style="max-inline-size: 100%">
-          <wa-icon slot="start" name="magnifying-glass"></wa-icon>
-        </wa-input>
-        <div class="wa-cluster">
-          <wa-button appearance="outlined">Log In</wa-button>
-          <wa-button>Sign Up</wa-button>
-        </div>
-      </header>
-      <div slot="navigation-header" class="wa-split">
-        <wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%" class="wa-mobile-only">
-          <wa-icon slot="start" name="magnifying-glass"></wa-icon>
-        </wa-input>
-        <div class="wa-split">
-          <h2 class="wa-heading-s">For You</h2>
-          <wa-button id="settings" appearance="plain" size="small">
-            <wa-icon name="gear" label="Settings"></wa-icon>
-          </wa-button>
-          <wa-tooltip for="settings">Settings</wa-tooltip>
-        </div>
-      </div>
-      <nav slot="navigation">
-        <h3 class="wa-heading-xs">Discover</h3>
-        <ul class="wa-stack wa-gap-0">
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="house"></wa-icon>
-              <span>Home</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="star"></wa-icon>
-              <span>New</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="tower-broadcast"></wa-icon>
-              <span>Stations</span>
-            </a>
-          </li>
-        </ul>
-        <h3 class="wa-heading-xs">Library</h3>
-        <ul class="wa-stack wa-gap-0">
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="heart"></wa-icon>
-              <span>Favorites</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="bars-staggered"></wa-icon>
-              <span>Playlists</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="microphone-lines"></wa-icon>
-              <span>Artists</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="layer-group"></wa-icon>
-              <span>Albums</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="podcast"></wa-icon>
-              <span>Podcasts</span>
-            </a>
-          </li>
-        </ul>
-        <h3 class="wa-heading-xs">Recently Played</h3>
-        <ul id="recent" class="wa-stack wa-gap-0">
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon name="radio" style="background: var(--wa-color-red-90); color: var(--wa-color-red-60)"></wa-icon>
-              <span>Lo-Fi Station</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon
-                name="font-awesome"
-                style="background: var(--wa-color-blue-30); color: var(--wa-color-yellow-90)"
-              ></wa-icon>
-              <span>Podcast Awesome</span>
-            </a>
-          </li>
-          <li>
-            <a href="#" class="wa-flank">
-              <wa-icon
-                name="seedling"
-                style="background: var(--wa-color-green-70); color: var(--wa-color-green-90)"
-              ></wa-icon>
-              <div class="wa-stack wa-gap-0">
-                <span>Seasons</span>
-                <span class="wa-caption-s">Blister Soul</span>
-              </div>
-            </a>
-          </li>
-        </ul>
-      </nav>
-      <div slot="main-header">
-        <wa-button id="back" appearance="plain" size="small">
-          <wa-icon name="chevron-left" label="Back"></wa-icon>
-        </wa-button>
-        <wa-tooltip for="back" placement="bottom" distance="2">Back</wa-tooltip>
-        <div class="wa-cluster">
-          <wa-button id="favorite" appearance="plain" size="small">
-            <wa-icon name="heart" label="Favorite" variant="regular"></wa-icon>
-          </wa-button>
-          <wa-tooltip for="favorite" placement="bottom" distance="2">Favorite</wa-tooltip>
-          <wa-button id="options" appearance="plain" size="small">
-            <wa-icon name="ellipsis" label="Options"></wa-icon>
-          </wa-button>
-          <wa-tooltip for="options" placement="bottom" distance="2">Options</wa-tooltip>
-        </div>
-      </div>
-      <main>
-        <div class="wa-stack wa-gap-3xl">
-          <div class="wa-flank wa-gap-3xl" style="--content-percentage: 40%">
-            <div class="wa-frame wa-border-radius-l" style="max-inline-size: 40ch">
-              <img
-                src="https://images.unsplash.com/photo-1732430579016-8d5e5ebd3c99?q=20"
-                alt="Home for the Holidays album artwork"
-              />
-            </div>
-            <div class="wa-split:column wa-align-items-start">
-              <div class="wa-stack" style="margin-block: auto">
-                <h1 class="wa-heading-3xl">Home for the Holidays</h1>
-                <a href="#" class="wa-heading-m">The Shire Choir</a>
-                <div class="wa-cluster wa-caption-m wa-gap-2xs">
-                  <span>Holiday</span>
-                  <span>&bull;</span>
-                  <span>2024</span>
-                  <span>&bull;</span>
-                  <span>12 songs, 41 minutes 9 seconds</span>
-                </div>
-              </div>
-              <div id="play-controls" class="wa-split wa-gap-xl">
-                <div class="wa-cluster wa-gap-xl">
-                  <wa-button variant="brand" size="large">
-                    <wa-icon name="play" label="Play"></wa-icon>
-                  </wa-button>
-                  <wa-button appearance="plain">
-                    <wa-icon name="shuffle" label="Shuffle"></wa-icon>
-                  </wa-button>
-                </div>
-                <wa-button appearance="plain">
-                  <wa-icon name="plus" label="Add to Library"></wa-icon>
-                </wa-button>
-              </div>
-            </div>
-          </div>
-          <ol class="wa-stack wa-gap-0">
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="1"></wa-icon>
-                <span>Fa-La-La-Fellowship</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">3:27</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="2"></wa-icon>
-                <span>Sleigh Ride</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">2:36</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="3"></wa-icon>
-                <span>All I Want For Christmas Is Stew</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">2:51</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="4"></wa-icon>
-                <span>Rockin' Around the Christmas Ent</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">3:05</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="5"></wa-icon>
-                <span>Merry, Did You Know?</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">1:56</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="6"></wa-icon>
-                <span>Run Run Shadowfax</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">3:32</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="7"></wa-icon>
-                <span>You're a Mean One, Mr. Grima</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">2:46</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="8"></wa-icon>
-                <span>O Come, All Ye Faithful</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">3:27</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <wa-icon name="9"></wa-icon>
-                <span>Do You Hear What I Hear</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">2:13</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <span class="wa-cluster wa-gap-3xs">
-                  <wa-icon name="1"></wa-icon>
-                  <wa-icon name="0"></wa-icon>
-                </span>
-                <span>Carol of the Horns</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">2:55</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <span class="wa-cluster wa-gap-3xs">
-                  <wa-icon name="1"></wa-icon>
-                  <wa-icon name="1"></wa-icon>
-                </span>
-                <span>Silent Night</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">3:10</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-            <li class="wa-split">
-              <span class="wa-flank">
-                <span class="wa-cluster wa-gap-3xs">
-                  <wa-icon name="1"></wa-icon>
-                  <wa-icon name="2"></wa-icon>
-                </span>
-                <span>Wizard Wonderland</span>
-              </span>
-              <span class="wa-cluster">
-                <span class="wa-caption-m">3:22</span>
-                <wa-button appearance="plain" size="small">
-                  <wa-icon name="ellipsis" label="Song Options"></wa-icon>
-                </wa-button>
-              </span>
-            </li>
-          </ol>
-        </div>
-      </main>
-      <div slot="main-footer" class="wa-grid wa-gap-xl wa-align-items-center">
-        <h2 class="wa-heading-2xl">More You Might Like</h2>
-        <div class="wa-stack wa-gap-xs">
-          <div class="wa-frame wa-border-radius-l">
-            <img src="https://images.unsplash.com/photo-1675219119611-40323b738563?q=20" alt="" />
-          </div>
-          <span class="wa-heading-s">Festival of Lights</span>
-          <span class="wa-caption-s">Station</span>
-        </div>
-        <div class="wa-stack wa-gap-xs">
-          <div class="wa-frame wa-border-radius-l">
-            <img src="https://images.unsplash.com/photo-1481930916222-5ec4696fc0f2?q=20" alt="" />
-          </div>
-          <span class="wa-heading-s">Holiday Cheer</span>
-          <span class="wa-caption-s">Essential Playlist</span>
-        </div>
-        <div class="wa-stack wa-gap-xs">
-          <div class="wa-frame wa-border-radius-l">
-            <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="" />
-          </div>
-          <span class="wa-heading-s">Nursery Rhymes from the Shire</span>
-          <span class="wa-caption-s">The Shire Choir</span>
-        </div>
-      </div>
-    </wa-page>
-
-    <style>
-      wa-page {
-        --menu-width: 30ch;
-        --wa-tooltip-arrow-size: 0;
-        background-color: var(--wa-color-surface-lowered);
-      }
-
-      wa-page[view='mobile'] {
-        --menu-width: auto;
-
-        [slot*='main'],
-        main {
-          padding: var(--wa-space-xl);
-        }
-      }
-
-      wa-page,
-      [slot='header'],
-      wa-page[view='desktop'] [slot*='navigation'] {
-        background-color: var(--wa-color-surface-lowered);
-      }
-      wa-page[view='mobile'] [slot*='navigation'] {
-        padding: 0;
-      }
-      wa-page::part(base) {
-        background-color: var(--wa-color-surface-lowered);
-      }
-      [slot='header'] {
-        background: linear-gradient(to bottom, var(--wa-color-surface-raised), var(--wa-color-surface-lowered));
-      }
-      [slot='navigation-header'],
-      [slot='main-header'] {
-        padding-block-end: 0 !important;
-        padding-block-start: var(--wa-space-3xl);
-      }
-      [slot='navigation'] {
-        a {
-          --wa-color-text-link: var(--wa-color-text-normal);
-          --wa-link-decoration-default: none;
-          --wa-link-decoration-hover: none;
-          --flank-size: 2rem;
-          font-weight: var(--wa-font-weight-action);
-          gap: 0.5rem;
-        }
-        ul {
-          list-style: none;
-          margin: 0;
-
-          a {
-            border-radius: var(--wa-border-radius-m);
-            padding: var(--wa-space-xs);
-
-            &:hover {
-              background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
-            }
-          }
-        }
-        wa-icon {
-          align-items: center;
-          aspect-ratio: 1;
-          color: var(--wa-color-brand-fill-loud);
-          display: flex;
-          justify-content: center;
-          padding-block: 0.5em;
-        }
-        #recent wa-icon {
-          border-radius: var(--wa-border-radius-s);
-        }
-      }
-
-      [slot='main-header'] {
-        border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-        border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-        border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0;
-      }
-      main,
-      [slot*='main'] {
-        margin-inline: var(--wa-space-m);
-      }
-      main ol li {
-        padding: var(--wa-space-m);
-
-        &:hover {
-          background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
-        }
-
-        &:not(:first-child) {
-          border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-        }
-
-        .wa-flank {
-          --flank-size: 2rem;
-        }
-      }
-      main,
-      [slot='main-footer'] {
-        border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-      }
-      main,
-      [slot='main-header'] {
-        background-color: var(--wa-color-surface-raised);
-      }
-      #play-controls wa-button::part(base) {
-        border: var(--wa-border-width-l) var(--wa-border-style) currentColor;
-        border-radius: var(--wa-border-radius-circle);
-        font-size: 1.5rem;
-      }
-      #play-controls wa-button:has(wa-icon[name='play'])::part(base) {
-        border: none;
-        font-size: 2.5rem;
-        padding: 0.5em 0.45em 0.5em 0.55em;
-      }
-      [slot='main-footer'].wa-grid > * {
-        max-inline-size: 30ch;
-      }
-    </style>
-
-    <script>
-      const sectionAnchors = document.querySelectorAll("[slot*='navigation'] a[href*='#']");
-      sectionAnchors.forEach(sectionAnchor => sectionAnchor.setAttribute('data-drawer', 'close'));
-    </script>
-  </body>
-</html>

packages/webawesome/docs/assets/images/app-icons/app-icon.svg

@@ -0,0 +1 @@
+<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m18.608 5.8c0 1.04658-.6184 1.94874-1.5097 2.36103l5.3017 4.63897 5.2196-1.0439c-.2647-.3858-.4196-.8529-.4196-1.3561 0-1.32548 1.0745-2.4 2.4-2.4s2.4 1.07452 2.4 2.4c0 1.3085-1.0471 2.3724-2.3491 2.3995l-5.7878 12.3578c-.5267 1.1245-1.6562 1.8427-2.8979 1.8427h-9.9303c-1.2417 0-2.37129-.7182-2.89794-1.8427l-5.78784-12.3578c-1.30199-.0271-2.34912-1.091-2.34912-2.3995 0-1.32548 1.07452-2.4 2.4-2.4s2.4 1.07452 2.4 2.4c0 .5032-.15488.9703-.41957 1.3561l5.21957 1.0439 5.3072-4.64383c-.8857-.4145-1.4992-1.31368-1.4992-2.35617 0-1.43594 1.1641-2.6 2.6-2.6s2.6 1.16406 2.6 2.6z" fill="#f36944" fill-rule="evenodd"/></svg>

packages/webawesome/docs/assets/images/app-icons/icon.svg

@@ -0,0 +1 @@
+<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m18.608 5.8c0 1.04658-.6184 1.94874-1.5097 2.36103l5.3017 4.63897 5.2196-1.0439c-.2647-.3858-.4196-.8529-.4196-1.3561 0-1.32548 1.0745-2.4 2.4-2.4s2.4 1.07452 2.4 2.4c0 1.3085-1.0471 2.3724-2.3491 2.3995l-5.7878 12.3578c-.5267 1.1245-1.6562 1.8427-2.8979 1.8427h-9.9303c-1.2417 0-2.37129-.7182-2.89794-1.8427l-5.78784-12.3578c-1.30199-.0271-2.34912-1.091-2.34912-2.3995 0-1.32548 1.07452-2.4 2.4-2.4s2.4 1.07452 2.4 2.4c0 .5032-.15488.9703-.41957 1.3561l5.21957 1.0439 5.3072-4.64383c-.8857-.4145-1.4992-1.31368-1.4992-2.35617 0-1.43594 1.1641-2.6 2.6-2.6s2.6 1.16406 2.6 2.6z" fill="#f36944" fill-rule="evenodd"/></svg>

packages/webawesome/docs/assets/images/web-awesome-mark-black.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.63 3.625C11.63 4.27911 11.2435 4.84296 10.6865 5.10064L14 8L17.2622 7.34755C17.0968 7.10642 17 6.81452 17 6.5C17 5.67157 17.6716 5 18.5 5C19.3284 5 20 5.67157 20 6.5C20 7.31157 19.3555 7.9726 18.5504 7.99917L15.0307 15.8207C14.7077 16.5384 13.9939 17 13.2068 17H6.79317C6.00615 17 5.29229 16.5384 4.96933 15.8207L1.44963 7.99917C0.64452 7.9726 0 7.31157 0 6.5C0 5.67157 0.671573 5 1.5 5C2.32843 5 3 5.67157 3 6.5C3 6.81452 2.9032 7.10642 2.73777 7.34755L6 8L9.31702 5.09761C8.76346 4.83855 8.38 4.27656 8.38 3.625C8.38 2.72754 9.10754 2 10.005 2C10.9025 2 11.63 2.72754 11.63 3.625Z" fill="currentColor"/>
-</svg>

packages/webawesome/docs/assets/images/webawesome-logo.svg

@@ -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>

packages/webawesome/docs/assets/scripts/code-examples.js

@@ -1,3 +1,6 @@
+const version = document.documentElement.getAttribute('data-version') || '';
+const CDN_URL = `https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@${version}/dist-cdn/`;
+
 //
 // Resizing previews
 //
@@ -54,12 +57,9 @@ document.addEventListener('click', event => {
   if (pen) {
     const codeExample = pen.closest('.code-example');
     const code = codeExample.querySelector('code');
-    const cdnUrl = document.documentElement.dataset.cdnUrl;
     const html =
-      `<script data-fa-kit-code="b10bfbde90" type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
-      `<link rel="stylesheet" href="${cdnUrl}styles/themes/default.css">\n` +
-      `<link rel="stylesheet" href="${cdnUrl}styles/webawesome.css">\n` +
-      `<link rel="stylesheet" href="${cdnUrl}styles/utilities.css">\n\n` +
+      `<script data-fa-kit-code="38c11e3f20" type="module" src="${CDN_URL}webawesome.loader.js"></script>\n` +
+      `<link rel="stylesheet" href="${CDN_URL}styles/webawesome.css">\n\n` +
       `${code.textContent}`;
     const css = 'html > body {\n  padding: 2rem !important;\n}';
     const js = '';

packages/webawesome/docs/assets/scripts/color-scheme.js

@@ -0,0 +1,51 @@
+import { doViewTransition } from '../scripts/view-transitions.js';
+
+//
+// Updates the color scheme when a color scheme selector changes
+//
+async function updateTheme(value) {
+  localStorage.setItem('color-scheme', value);
+
+  const isDark = value === 'dark' || (value === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+  // Disable tooltip during transition
+  const tooltip = document.querySelector('#color-scheme-tooltip');
+  if (tooltip) {
+    tooltip.disabled = true;
+  }
+
+  await doViewTransition(() => {
+    document.documentElement.classList.toggle('wa-dark', isDark);
+  });
+
+  // Sync all selectors and update tooltip
+  document.querySelectorAll('.color-scheme-selector').forEach(el => (el.value = value));
+
+  // Update tooltip content and re-enable after transition completes
+  if (tooltip) {
+    const schemeText = value === 'light' ? 'Light' : value === 'dark' ? 'Dark' : 'System';
+    tooltip.textContent = schemeText;
+    tooltip.disabled = false;
+  }
+}
+
+// Handle changes
+document.addEventListener('input', e => {
+  if (e.target.matches('.color-scheme-selector')) {
+    updateTheme(e.target.value);
+  }
+});
+
+// Handle backslash key toggle
+document.addEventListener('keydown', e => {
+  if (e.key === '\\' && !e.composedPath().some(el => el.tagName === 'INPUT')) {
+    const current = localStorage.getItem('color-scheme') || 'auto';
+    const isDark =
+      current === 'dark' || (current === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    updateTheme(isDark ? 'light' : 'dark');
+  }
+});
+
+// Initialize
+const saved = localStorage.getItem('color-scheme') || 'auto';
+updateTheme(saved);