Merge branch 'next' into docs-fix

* add zoomable frame component; #986

* remove viewport demo component

* update changelog

* fix code demos

* update zoomable iframes with theme changes

.eslintignore

@@ -1,10 +0,0 @@
-.cache
-docs/dist
-docs/search.json
-docs/**/*.min.js
-dist
-examples
-node_modules
-src/react
-scripts
-

.eslintrc.cjs

@@ -1,213 +0,0 @@
-/* eslint-env node */
-
-module.exports = {
-  plugins: [
-    '@typescript-eslint',
-    'wc',
-    'lit',
-    'lit-a11y',
-    'chai-expect',
-    'chai-friendly',
-    'import',
-    'sort-imports-es6-autofix'
-  ],
-  extends: [
-    'eslint:recommended',
-    'plugin:wc/recommended',
-    'plugin:wc/best-practice',
-    'plugin:lit/recommended',
-    'plugin:lit-a11y/recommended'
-  ],
-  env: {
-    es2021: true,
-    browser: true
-  },
-  parserOptions: {
-    sourceType: 'module'
-  },
-  overrides: [
-    {
-      extends: [
-        'plugin:@typescript-eslint/eslint-recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:@typescript-eslint/recommended-requiring-type-checking'
-      ],
-      parser: '@typescript-eslint/parser',
-      parserOptions: {
-        sourceType: 'module',
-        project: './tsconfig.json',
-        tsconfigRootDir: __dirname
-      },
-      files: ['*.ts'],
-      rules: {
-        'default-param-last': 'off',
-        '@typescript-eslint/default-param-last': 'error',
-        'no-console': 'warn',
-        'no-empty-function': 'off',
-        '@typescript-eslint/no-empty-function': 'warn',
-        'no-implied-eval': 'off',
-        'no-invalid-this': 'off',
-        'no-shadow': 'off',
-        'no-throw-literal': 'off',
-        'no-unused-expressions': 'off',
-        'lit-a11y/no-autofocus': 'off',
-        '@typescript-eslint/no-implied-eval': 'error',
-        '@typescript-eslint/no-invalid-this': 'error',
-        '@typescript-eslint/no-throw-literal': 'error',
-        '@typescript-eslint/no-shadow': 'error',
-        '@typescript-eslint/prefer-regexp-exec': 'off',
-        '@typescript-eslint/no-unused-expressions': 'error',
-        '@typescript-eslint/unbound-method': 'off',
-        '@typescript-eslint/no-non-null-assertion': 'off',
-        '@typescript-eslint/no-floating-promises': 'off',
-        '@typescript-eslint/no-misused-promises': [
-          'error',
-          {
-            checksVoidReturn: false
-          }
-        ],
-        '@typescript-eslint/consistent-type-assertions': [
-          'warn',
-          {
-            assertionStyle: 'as',
-            objectLiteralTypeAssertions: 'never'
-          }
-        ],
-        '@typescript-eslint/consistent-type-imports': 'warn',
-        '@typescript-eslint/no-base-to-string': 'error',
-        '@typescript-eslint/no-confusing-non-null-assertion': 'error',
-        '@typescript-eslint/no-invalid-void-type': 'error',
-        '@typescript-eslint/no-require-imports': 'error',
-        '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'warn',
-        '@typescript-eslint/no-unnecessary-condition': 'off',
-        '@typescript-eslint/no-unnecessary-qualifier': 'warn',
-        '@typescript-eslint/non-nullable-type-assertion-style': 'warn',
-        '@typescript-eslint/prefer-for-of': 'warn',
-        '@typescript-eslint/prefer-optional-chain': 'warn',
-        '@typescript-eslint/prefer-ts-expect-error': 'warn',
-        '@typescript-eslint/prefer-return-this-type': 'error',
-        '@typescript-eslint/prefer-string-starts-ends-with': 'warn',
-        '@typescript-eslint/require-array-sort-compare': 'error',
-        '@typescript-eslint/unified-signatures': 'warn',
-        '@typescript-eslint/array-type': 'warn',
-        '@typescript-eslint/consistent-type-definitions': ['warn', 'interface'],
-        '@typescript-eslint/member-delimiter-style': 'warn',
-        '@typescript-eslint/method-signature-style': 'warn',
-        '@typescript-eslint/no-extraneous-class': 'error',
-        '@typescript-eslint/no-redundant-type-constituents': 'off',
-        '@typescript-eslint/parameter-properties': 'error',
-        '@typescript-eslint/strict-boolean-expressions': 'off'
-      }
-    },
-    {
-      files: ['**/*.cjs'],
-      env: {
-        node: true
-      }
-    },
-    {
-      extends: ['plugin:chai-expect/recommended', 'plugin:chai-friendly/recommended'],
-      files: ['*.test.ts'],
-      rules: {
-        '@typescript-eslint/no-unsafe-call': 'off',
-        '@typescript-eslint/no-unused-expressions': 'off'
-      }
-    }
-  ],
-  rules: {
-    'no-template-curly-in-string': 'error',
-    'array-callback-return': 'error',
-    'comma-dangle': 'off',
-    'consistent-return': 'error',
-    curly: 'off',
-    'default-param-last': 'error',
-    eqeqeq: 'error',
-    'lit-a11y/click-events-have-key-events': 'off',
-    'no-constructor-return': 'error',
-    'no-empty-function': 'warn',
-    'no-eval': 'error',
-    'no-extend-native': 'error',
-    'no-extra-bind': 'error',
-    'no-floating-decimal': 'error',
-    'no-implicit-coercion': 'off',
-    'no-implicit-globals': 'error',
-    'no-implied-eval': 'error',
-    'no-invalid-this': 'off',
-    'no-labels': 'error',
-    'no-lone-blocks': 'error',
-    'no-new': 'error',
-    'no-new-func': 'error',
-    'no-new-wrappers': 'error',
-    'no-octal-escape': 'error',
-    'no-proto': 'error',
-    'no-return-assign': 'warn',
-    'no-script-url': 'error',
-    'no-self-compare': 'warn',
-    'no-sequences': 'warn',
-    'no-throw-literal': 'error',
-    'no-unmodified-loop-condition': 'error',
-    'no-unused-expressions': 'warn',
-    'no-useless-call': 'error',
-    'no-useless-concat': 'error',
-    'no-useless-return': 'warn',
-    'prefer-promise-reject-errors': 'error',
-    radix: 'off',
-    'require-await': 'error',
-    'wrap-iife': ['warn', 'inside'],
-    'no-shadow': 'error',
-    'no-array-constructor': 'error',
-    'no-bitwise': 'error',
-    'no-multi-assign': 'warn',
-    'no-new-object': 'error',
-    'no-useless-computed-key': 'warn',
-    'no-useless-rename': 'warn',
-    'no-var': 'error',
-    'prefer-const': 'warn',
-    'prefer-numeric-literals': 'warn',
-    'prefer-object-spread': 'warn',
-    'prefer-rest-params': 'warn',
-    'prefer-spread': 'warn',
-    'prefer-template': 'off',
-    'no-else-return': 'off',
-    'func-names': ['warn', 'never'],
-    'one-var': ['warn', 'never'],
-    'operator-assignment': 'warn',
-    'prefer-arrow-callback': 'warn',
-    'no-restricted-imports': [
-      'warn',
-      {
-        paths: [
-          {
-            name: '.',
-            message: 'Usage of local index imports is not allowed.'
-          },
-          {
-            name: './index',
-            message: 'Import from the source file instead.'
-          }
-        ]
-      }
-    ],
-    'import/extensions': [
-      'error',
-      'always',
-      {
-        ignorePackages: true,
-        pattern: {
-          js: 'always',
-          ts: 'never'
-        }
-      }
-    ],
-    'import/no-duplicates': 'warn',
-    'sort-imports-es6-autofix/sort-imports-es6': [
-      2,
-      {
-        ignoreCase: true,
-        ignoreMemberSort: false,
-        memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single']
-      }
-    ],
-    'wc/guard-super-call': 'off'
-  }
-};

.github/workflows/client_tests.yml

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

.github/workflows/ssr_tests.yml

@@ -1,11 +1,12 @@
-# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
 name: SSR Tests
 
 on:
-  push:
-    branches: [next]
+  # push:
+  #   branches: [next]
+  workflow_dispatch:
 
 jobs:
   ssr_test:
@@ -25,17 +26,17 @@ jobs:
           cache: 'npm'
       - name: Install dependencies
         run: npm ci
-      # Just lint here too. Save some GH Action minutes and not need to use "depends_on" or anything.
-      - name: Lint
-        run: npm run prettier && npm run lint
 
       - name: Build
         run: npm run build
+        working-directory: ./packages/webawesome
 
       - name: Install Playwright
         run: npx playwright install --with-deps
+        working-directory: ./packages/webawesome
 
       - name: Run SSR tests
         # FAIL_FAST to fail on first failing test.
         run: FAIL_FAST="true" SSR_ONLY="true" npm run test
+        working-directory: ./packages/webawesome
 

.gitignore

@@ -1,12 +1,12 @@
 _site
 .cache
 .DS_Store
-package.json
-package-lock.json
 dist/
 dist-cdn/
-docs/public/pagefind
 node_modules
-src/react
-.astro
+packages/**/*/src/react
 cdn/
+yarn.lock
+_bundle_
+/packages/webawesome-pro
+/packages/webawesome-app

.prettierignore

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

.vscode/extensions.json

@@ -3,7 +3,6 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "bierner.lit-html",
-    "bashmish.es6-string-css",
     "streetsidesoftware.code-spell-checker"
   ]
 }

README.md

@@ -31,6 +31,30 @@ If that's not what you're trying to do, the [documentation website](https://weba
 
 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/).
 
+### Understanding the Web Awesome monorepo
+
+Web Awesome uses [NPM workspaces](https://docs.npmjs.com/cli/v11/using-npm/workspaces) for its monorepo structure and is fairly minimal in what it provides.
+
+By using 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`.
+
+Generally, if you plan to only work with the free version of `webawesome` it is easiest to go to `packages/webawesome` and run all commands from there.
+
+### Where do NPM dependencies go?
+
+Any dependencies intended to be used across all packages (IE: `prettier`, `eslint`) that are _NOT_ used at runtime should be in the root `devDependencies` of `package.json`.
+
+```bash
+npm install -D -w prettier
+```
+
+Any dependencies that will be used at runtime by a package should be part of the specific package's `"dependencies"` such as `lit`. This is required because if that dependency is not in the `packages/*/package.json`, it will not be installed when used via NPM.
+
+Individual packages are also free to install devDependencies as needed as long as they are specific to that package only.
+
+To 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>`
+
 ### Forking the Repo
 
 Start by [forking the repo](https://github.com/shoelace-style/webawesome/fork) on GitHub, then clone it locally and install dependencies.
@@ -43,9 +67,10 @@ npm install
 
 ### Developing
 
-Once you've cloned the repo, run the following command.
+Once you've cloned the repo, run the following command from the respective directory within `packages/*`
 
 ```bash
+cd packages/webawesome
 npm start
 ```
 
@@ -56,23 +81,35 @@ This will spin up the dev server. After the initial build, a browser will open a
 To generate a production build, run the following command.
 
 ```bash
+cd packages/webawesome
 npm run build
 ```
 
+You can also run `npm run build:serve` to start an [`http-server`](https://www.npmjs.com/package/http-server) instance on `http://localhost:4000` after the build completes, so you can preview the production build.
+
 ### Creating New Components
 
 To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
 
 ```bash
+cd packages/webawesome
 npm run create wa-tag-name
 ```
 
 This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
 
+### Adding additional packages
+
+Right now the only additional packages are in private repositories.
+
+To add additional packages from other repositories, run: `git clone <url> packages/<package-name>` to clone your repo into `packages/`.
+
+Make sure to run `npm install` at the root of the monorepo after adding your package!
+
 ### Contributing
 
 Web Awesome is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
 
 ## License
 
-Web Awesome is available under the terms of the MIT license.
+Web Awesome is available under the terms of the MIT license.

cspell.json

@@ -15,16 +15,19 @@
     "autoloading",
     "autoplay",
     "bezier",
+    "Blockquotes",
     "boxicons",
     "CACHEABLE",
     "callout",
     "callouts",
+    "canvastext",
     "chatbubble",
     "checkmark",
     "Clippy",
     "codebases",
     "codepen",
     "colocated",
+    "colorjs",
     "colour",
     "combobox",
     "Commonmark",
@@ -39,6 +42,7 @@
     "crutchcorn",
     "csspart",
     "cssproperty",
+    "cssstate",
     "datetime",
     "describedby",
     "Docsify",
@@ -46,6 +50,7 @@
     "dropdowns",
     "easings",
     "ecommerce",
+    "endfor",
     "endraw",
     "endregion",
     "enterkeyhint",
@@ -56,6 +61,8 @@
     "exportmaps",
     "exportparts",
     "fieldsets",
+    "focusin",
+    "focusout",
     "fontawesome",
     "formaction",
     "formdata",
@@ -65,6 +72,7 @@
     "formtarget",
     "FOUC",
     "FOUCE",
+    "Frontmatter",
     "fullscreen",
     "gestern",
     "giga",
@@ -103,6 +111,7 @@
     "metaframeworks",
     "middlewares",
     "minlength",
+    "minmax",
     "monospace",
     "mousedown",
     "mousemove",
@@ -116,6 +125,7 @@
     "noreferrer",
     "novalidate",
     "Numberish",
+    "nums",
     "oklab",
     "oklch",
     "onscrollend",
@@ -125,10 +135,12 @@
     "petabit",
     "Preact",
     "preconnect",
+    "prerendered",
     "prismjs",
     "progressbar",
     "radiogroup",
     "Railsbyte",
+    "referrerpolicy",
     "remixicon",
     "reregister",
     "resizer",
@@ -145,6 +157,7 @@
     "scrollbars",
     "scrollend",
     "scroller",
+    "Scrollers",
     "Segoe",
     "semibold",
     "shadowrootmode",
@@ -154,17 +167,21 @@
     "slotchange",
     "smartquotes",
     "spacebar",
+    "srcdoc",
     "stylesheet",
+    "svgs",
     "Tabbable",
     "tabindex",
     "tabler",
     "tablist",
     "tabpanel",
+    "tbody",
     "templating",
     "tera",
     "testid",
     "textareas",
     "textfield",
+    "thead",
     "Themer",
     "tinycolor",
     "transitionend",

docs/.eleventy.js

@@ -1,156 +0,0 @@
-import { parse } from 'path';
-import { markdown } from './_utils/markdown.js';
-import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
-import { codeExamplesPlugin } from './_utils/code-examples.js';
-import { copyCodePlugin } from './_utils/copy-code.js';
-import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js';
-import { currentLink } from './_utils/current-link.js';
-import { highlightCodePlugin } from './_utils/highlight-code.js';
-// import { formatCodePlugin } from './_utils/format-code.js';
-import { replaceTextPlugin } from './_utils/replace-text.js';
-import { searchPlugin } from './_utils/search.js';
-import { readFile } from 'fs/promises';
-import { outlinePlugin } from './_utils/outline.js';
-import componentList from './_data/componentList.js';
-import litPlugin from '@lit-labs/eleventy-plugin-lit';
-
-import process from 'process';
-
-const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
-const isAlpha = process.argv.includes('--alpha');
-// const isDeveloping = process.argv.includes('--develop');
-
-export default function (eleventyConfig) {
-  // NOTE - alpha setting removes certain pages
-  if (isAlpha) {
-    eleventyConfig.ignores.add('**/experimental/**');
-    eleventyConfig.ignores.add('**/layout/**');
-    eleventyConfig.ignores.add('**/patterns/**');
-    eleventyConfig.ignores.add('**/style-utilities/**');
-    eleventyConfig.ignores.add('**/components/code-demo.md');
-    eleventyConfig.ignores.add('**/components/viewport-demo.md');
-  }
-
-  // Add template data
-  eleventyConfig.addGlobalData('package', packageData);
-  eleventyConfig.addGlobalData('isAlpha', isAlpha);
-
-  // Template filters - {{ content | filter }}
-  eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
-  eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
-  eleventyConfig.addFilter('stripExtension', string => parse(string).name);
-  eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
-  eleventyConfig.addFilter('trimPipes', content => {
-    // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
-    // With Prettier 3, this means a leading pipe will exist be present when the line wraps.
-    return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
-  });
-  eleventyConfig.addFilter('keys', obj => Object.keys(obj));
-
-  // Shortcodes - {% shortCode arg1, arg2 %}
-  eleventyConfig.addShortcode('cdnUrl', location => {
-    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
-  });
-
-  // Helpers
-
-  // Remove elements that have [data-alpha="remove"]
-  eleventyConfig.addPlugin(removeDataAlphaElements({ isAlpha }));
-
-  // Use our own markdown instance
-  eleventyConfig.setLibrary('md', markdown);
-
-  // Add anchors to headings
-  eleventyConfig.addPlugin(anchorHeadingsPlugin({ container: '#content' }));
-
-  // Add an outline to the page
-  eleventyConfig.addPlugin(
-    outlinePlugin({
-      container: '#content',
-      target: '.outline-links',
-      selector: 'h2, h3',
-      ifEmpty: doc => {
-        doc.querySelector('#outline')?.remove();
-      }
-    })
-  );
-
-  // Add current link classes
-  eleventyConfig.addPlugin(currentLink());
-
-  // Add code examples for `<code class="example">` blocks
-  eleventyConfig.addPlugin(codeExamplesPlugin);
-
-  // Highlight code blocks with Prism
-  eleventyConfig.addPlugin(highlightCodePlugin());
-
-  // Add copy code buttons to code blocks
-  eleventyConfig.addPlugin(copyCodePlugin());
-
-  // Various text replacements
-  eleventyConfig.addPlugin(
-    replaceTextPlugin([
-      // Replace [issue:1234] with a link to the issue on GitHub
-      {
-        replace: /\[pr:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>'
-      },
-      // Replace [pr:1234] with a link to the pull request on GitHub
-      {
-        replace: /\[issue:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>'
-      },
-      // Replace [discuss:1234] with a link to the discussion on GitHub
-      {
-        replace: /\[discuss:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>'
-      }
-    ])
-  );
-
-  const omittedModules = [];
-
-  // problematic components:
-  // animation (breaks on navigation + ssr with Turbo)
-  // mutation-observer (why SSR this?)
-  // resize-observer (why SSR this?)
-  // tooltip (why SSR this?)
-  const componentModules = componentList
-    // .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
-    .map(component => {
-      const name = component.tagName.split(/wa-/)[1];
-      return `./dist/components/${name}/${name}.js`;
-    });
-
-  eleventyConfig.addPlugin(litPlugin, {
-    mode: 'worker',
-    componentModules
-  });
-
-  // Build the search index
-  eleventyConfig.addPlugin(
-    searchPlugin({
-      filename: '',
-      selectorsToIgnore: ['code.example'],
-      getContent: doc => doc.querySelector('#content')?.textContent ?? ''
-    })
-  );
-
-  // Production-only plugins
-  //
-  // TODO - disabled because it takes about a minute to run now
-  //
-  // if (!isDeveloping) {
-  //   // Run Prettier on each file (prod only because it can be slow)
-  //   eleventyConfig.addPlugin(formatCodePlugin());
-  // }
-
-  return {
-    markdownTemplateEngine: 'njk',
-    dir: {
-      includes: '_includes',
-      layouts: '_layouts'
-    },
-    templateFormats: ['njk', 'md']
-  };
-}

docs/_data/componentsBy.js

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

docs/_includes/base.njk

@@ -1,168 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="{{ description }}">
-    <meta name="theme-color" content="#f36944">
-    {% if noindex %}<meta name="robots" content="noindex">{% endif %}
-
-    <title>{{ title }}</title>
-
-    <link rel="icon" href="/assets/images/webawesome-logo.svg" />
-    <link rel="apple-touch-icon" href="/assets/images/app-icon.png">
-
-    {# Scripts #}
-    {# 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">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
-
-    <script type="module" src="/assets/scripts/code-examples.js"></script>
-    <script type="module" src="/assets/scripts/color-scheme.js"></script>
-    <script type="module" src="/assets/scripts/copy-code.js"></script>
-    <script type="module" src="/assets/scripts/preset-theme.js"></script>
-    <script type="module" src="/assets/scripts/scroll.js"></script>
-    <script type="module" src="/assets/scripts/turbo.js"></script>
-    <script type="module" src="/assets/scripts/search.js"></script>
-    <script type="module" src="/assets/scripts/outline.js"></script>
-    <script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>
-
-    {# Web Awesome #}
-    <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
-    <link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
-    <link rel="stylesheet" href="/dist/themes/applied.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />
-    <link rel="stylesheet" href="/dist/themes/forms.css" />
-
-    {# Docs styles #}
-    <link rel="stylesheet" href="/assets/styles/docs.css" />
-
-    {# Set the theme to prevent flashing #}
-    <script>
-      function getColorScheme() {
-        return localStorage.getItem('colorScheme') || 'auto';
-      }
-
-      function getPresetTheme () {
-        return localStorage.getItem('presetTheme') || 'default';
-      }
-
-      function isDark() {
-        const colorScheme = getColorScheme()
-        if (colorScheme === 'auto') {
-          return window.matchMedia('(prefers-color-scheme: dark)').matches;
-        }
-        return colorScheme === 'dark';
-      }
-
-      const oldStylesheet = document.querySelector("#theme-stylesheet")
-
-      const newStylesheet = document.createElement("link")
-
-      let preset = getPresetTheme()
-      newStylesheet.href = `/dist/themes/${preset}.css`
-      newStylesheet.rel = "preload"
-      newStylesheet.as = "style"
-
-      document.head.append(newStylesheet)
-
-      function updateStylesheet () {
-        newStylesheet.rel = "stylesheet"
-        newStylesheet.id = "theme-stylesheet"
-        requestAnimationFrame(() => oldStylesheet.remove())
-      }
-
-      newStylesheet.addEventListener("load", updateStylesheet)
-
-      document.documentElement.classList.toggle(
-        `wa-theme-${preset}-dark`,
-        isDark()
-      );
-    </script>
-  </head>
-  <body class="layout-{{ layout | stripExtension }}">
-    <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
-    <wa-page view="desktop" disable-navigation-toggle="">
-      <header slot="header">
-        {# Logo #}
-        <div id="docs-branding">
-          {# Nav toggle #}
-          <wa-button appearance="text" size="small" data-toggle-nav>
-            <wa-icon name="bars" label="Toggle navigation"></wa-icon>
-          </wa-button>
-
-          <a href="/" aria-label="Web Awesome">
-            <span class="only-desktop">{% include "logo.njk" %}</span>
-            <span class="only-mobile">{% include "logo-simple.njk" %}</span>
-          </a>
-          <small id="version-number" class="only-desktop">{{ package.version }}</small>
-          <wa-badge variant="warning" class="only-desktop">Alpha</wa-badge>
-        </div>
-
-        <div id="docs-toolbar">
-          {# Desktop selectors #}
-          <div class="only-desktop">
-            {% include "preset-theme-selector.njk" %}
-            {% include "color-scheme-selector.njk" %}
-          </div>
-
-          {# Search #}
-          <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
-            <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
-            Search
-            <kbd slot="suffix" class="only-desktop">/</kbd>
-          </wa-button>
-        </div>
-      </header>
-
-      {# Sidebar #}
-      {% if hasSidebar %}
-        {# Mobile selectors #}
-        <div class="only-mobile" slot="navigation-header">
-          <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
-            {% include "preset-theme-selector.njk" %}
-            {% include "color-scheme-selector.njk" %}
-          </div>
-        </div>
-        <div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
-          {% include "sidebar.njk" %}
-        </div>
-      {% endif %}
-
-      {# Outline #}
-      {% if hasOutline %}
-        <aside slot="aside" id="outline" class="docs-aside">
-          <nav id="outline-standard" class="outline-links">
-            <h2><a href="#content">{{ title }}</a></h2>
-          </nav>
-        </aside>
-      {% endif %}
-
-      {# Main #}
-      <main id="content">
-        {# Expandable outline #}
-        <nav id="outline-expandable">
-          <details class="outline-links">
-            <summary>On this page</summary>
-          </details>
-        </nav>
-
-        {% block beforeContent %}{% endblock %}
-
-        {% block content %}
-          <h1 class="title">{{ title }}</h1>
-
-          {{ content | safe }}
-        {% endblock %}
-
-        {% block afterContent %}{% endblock %}
-      </main>
-
-      {% include 'search.njk' %}
-    </wa-page>
-
-  </body>
-</html>

docs/_includes/color-scheme-selector.njk

@@ -1,15 +0,0 @@
-{# Color scheme selector #}
-<wa-dropdown id="color-scheme-selector">
-  <wa-button slot="trigger" appearance="tinted" size="small" pill caret title="Press \ to toggle">
-    <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
-    <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
-    <span class="only-light">Light</span>
-    <span class="only-dark">Dark</span>
-  </wa-button>
-  <wa-menu>
-    <wa-menu-item type="checkbox" value="light">Light</wa-menu-item>
-    <wa-menu-item type="checkbox" value="dark">Dark</wa-menu-item>
-    <wa-divider></wa-divider>
-    <wa-menu-item type="checkbox" value="auto">System</wa-menu-item>
-  </wa-menu>
-</wa-dropdown>

docs/_includes/preset-theme-selector.njk

@@ -1,18 +0,0 @@
-{# Preset theme selector #}
-<wa-dropdown id="preset-theme-selector">
-  <wa-button slot="trigger" appearance="tinted" size="small" pill caret>
-    <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
-    <span id="preset-theme-selector__text">Default</span>
-  </wa-button>
-  <wa-menu>
-    <wa-menu-item type="checkbox" value="default">Default</wa-menu-item>
-    <wa-menu-item type="checkbox" value="classic">Classic</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="fa">Font Awesome</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="active">Active</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="brutalist">Brutalism</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="glassy">Glassy</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="migration">Migration</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="playful">Playful</wa-menu-item>
-    <wa-menu-item data-alpha="remove" type="checkbox" value="premium">Premium</wa-menu-item>
-  </wa-menu>
-</wa-dropdown>

docs/_includes/sidebar.njk

@@ -1,316 +0,0 @@
-{# Getting started #}
-<h2>Getting Started</h2>
-<ul>
-  <li><a href="/docs/installation">Installation</a></li>
-  <li><a href="/docs/usage">Usage</a></li>
-  <li><a href="/docs/themes">Themes</a></li>
-  <li><a href="/docs/customizing">Customizing</a></li>
-  <li><a href="/docs/form-controls">Form Controls</a></li>
-  <li><a href="/docs/localization">Localization</a></li>
-</ul>
-
-{# Resources #}
-<h2>Resources</h2>
-<ul>
-  <li><a href="https://github.com/shoelace-style/webawesome-alpha/discussions" target="_blank">Help &amp; Support</a></li>
-  <li><a href="/docs/resources/community">Community</a></li>
-  <li><a href="/docs/resources/accessibility">Accessibility</a></li>
-  <li><a href="/docs/resources/contributing">Contributing</a></li>
-  <li><a href="/docs/resources/changelog">Changelog</a></li>
-</ul>
-
-{# Components #}
-<h2>
-  <a href="/docs/components/" title="Overview">Components
-    <wa-icon name="grid-2"></wa-icon>
-  </a>
-</h2>
-<ul>
-  <li>
-    <a href="/docs/components/animated-image">Animated Image</a>
-  </li>
-  <li>
-    <a href="/docs/components/animation">Animation</a>
-  </li>
-  <li>
-    <a href="/docs/components/avatar">Avatar</a>
-  </li>
-  <li>
-    <a href="/docs/components/badge">Badge</a>
-  </li>
-  <li>
-    <a href="/docs/components/breadcrumb">Breadcrumb</a>
-    <ul>
-      <li>
-        <a href="/docs/components/breadcrumb-item">Breadcrumb Item</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/button">Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/button-group">Button Group</a>
-  </li>
-  <li>
-    <a href="/docs/components/callout">Callout</a>
-  </li>
-  <li>
-    <a href="/docs/components/card">Card</a>
-  </li>
-  <li>
-    <a href="/docs/components/carousel">Carousel</a>
-    <ul>
-      <li>
-        <a href="/docs/components/carousel-item">Carousel Item</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/checkbox">Checkbox</a>
-  </li>
-  {% if not isAlpha %}
-  <li>
-    <a href="/docs/components/code-demo">Code Demo</a>
-  </li>
-  {% endif %}
-  <li>
-    <a href="/docs/components/color-picker">Color Picker</a>
-  </li>
-  <li>
-    <a href="/docs/components/copy-button">Copy Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/details">Details</a>
-  </li>
-  <li>
-    <a href="/docs/components/dialog">Dialog</a>
-  </li>
-  <li>
-    <a href="/docs/components/divider">Divider</a>
-  </li>
-  <li>
-    <a href="/docs/components/drawer">Drawer</a>
-  </li>
-  <li>
-    <a href="/docs/components/dropdown">Dropdown</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-bytes">Format Bytes</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-date">Format Date</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-number">Format Number</a>
-  </li>
-  <li>
-    <a href="/docs/components/icon">Icon</a>
-  </li>
-  <li>
-    <a href="/docs/components/icon-button">Icon Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/image-comparer">Image Comparer</a>
-  </li>
-  <li>
-    <a href="/docs/components/include">Include</a>
-  </li>
-  <li>
-    <a href="/docs/components/input">Input</a>
-  </li>
-  <li>
-    <a href="/docs/components/menu">Menu</a>
-    <ul>
-      <li>
-        <a href="/docs/components/menu-item">Menu Item</a>
-      </li>
-      <li>
-        <a href="/docs/components/menu-label">Menu Label</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/mutation-observer">Mutation Observer</a>
-  </li>
-  <li>
-    <a href="/docs/components/page">Page</a>
-    <wa-icon name="flask"></wa-icon>
-    <wa-badge class="pro">PRO</wa-badge>
-  </li>
-  <li>
-    <a href="/docs/components/popup">Popup</a>
-  </li>
-  <li>
-    <a href="/docs/components/progress-bar">Progress Bar</a>
-  </li>
-  <li>
-    <a href="/docs/components/progress-ring">Progress Ring</a>
-  </li>
-  <li>
-    <a href="/docs/components/qr-code">QR Code</a>
-  </li>
-  <li>
-    <a href="/docs/components/radio-group">Radio Group</a>
-    <ul>
-      <li>
-        <a href="/docs/components/radio">Radio</a>
-      </li>
-      <li>
-        <a href="/docs/components/radio-button">Radio Button</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/range">Range</a>
-  </li>
-  <li>
-    <a href="/docs/components/rating">Rating</a>
-  </li>
-  <li>
-    <a href="/docs/components/relative-time">Relative Time</a>
-  </li>
-  <li>
-    <a href="/docs/components/resize-observer">Resize Observer</a>
-  </li>
-  <li>
-    <a href="/docs/components/select">Select</a>
-    <ul>
-      <li>
-        <a href="/docs/components/option">Option</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/skeleton">Skeleton</a>
-  </li>
-  <li>
-    <a href="/docs/components/spinner">Spinner</a>
-  </li>
-  <li>
-    <a href="/docs/components/split-panel">Split Panel</a>
-  </li>
-  <li>
-    <a href="/docs/components/switch">Switch</a>
-  </li>
-  <li>
-    <a href="/docs/components/tab-group">Tab Group</a>
-    <ul>
-      <li>
-        <a href="/docs/components/tab">Tab</a>
-      </li>
-      <li>
-        <a href="/docs/components/tab-panel">Tab Panel</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/tag">Tag</a>
-  </li>
-  <li>
-    <a href="/docs/components/textarea">Textarea</a>
-  </li>
-  <li>
-    <a href="/docs/components/tooltip">Tooltip</a>
-  </li>
-  <li>
-    <a href="/docs/components/tree">Tree</a>
-    <ul>
-      <li>
-        <a href="/docs/components/tree-item">Tree Item</a>
-      </li>
-    </ul>
-  </li>
-  {% if not isAlpha %}
-  <li>
-    <a href="/docs/components/viewport-demo">Viewport Demo</a>
-  </li>
-  {% endif %}
-  <li>
-    <a href="/docs/components/visually-hidden">Visually Hidden</a>
-  </li>
-</ul>
-
-{# Layout #}
-{% if not isAlpha %}
-<h2>
-  <a href="/docs/layout" title="Overview">Layout
-    <wa-icon name="grid-2"></wa-icon>
-  </a>
-</h2>
-<ul>
-  <li><a href="/docs/components/page">Page</a></li>
-  <li><a href="/docs/layout/cluster">Cluster</a></li>
-  <li><a href="/docs/layout/flank">Flank</a></li>
-  <li><a href="/docs/layout/frame">Frame</a></li>
-  <li><a href="/docs/layout/grid">Grid</a></li>
-  <li><a href="/docs/layout/split">Split</a></li>
-  <li><a href="/docs/layout/stack">Stack</a></li>
-</ul>
-{% endif %}
-
-{# Patterns #}
-{% if not isAlpha %}
-<h2>Patterns</h2>
-<ul>
-  <li><a href="/docs/patterns/app">Web App</a></li>
-  <li><a href="/docs/patterns/ecommerce">E-commerce</a>
-    <ul>
-      <li><a href="/docs/patterns/ecommerce-product-review">Product Reviews</a></li>
-      <li><a href="/docs/patterns/ecommerce-product-list">Product Lists</a></li>
-      <li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
-      <li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
-       <li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
-      <li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
-      <li><a href="/docs/patterns/ecommerce-order-summary">Order Summaries</a></li>
-      <li><a href="/docs/patterns/ecommerce-order-history">Order History</a></li>
-    </ul>
-  </li>
-  <li><a href="/docs/patterns/blog">Blog</a></li>
-  <li><a href="/docs/patterns/news">News</a></li>
-</ul>
-{% endif %}
-
-{# Theming #}
-<h2>
-  <a href="/docs/theming" title="Overview">Theming
-    <wa-icon name="grid-2"></wa-icon>
-  </a>
-</h2>
-<ul>
-  <li>
-    <a href="/docs/theming/color">Color</a>
-  </li>
-  <li>
-    <a href="/docs/theming/typography">Typography</a>
-  </li>
-  <li>
-    <a href="/docs/theming/space">Space</a>
-  </li>
-  <li>
-    <a href="/docs/theming/borders">Borders</a>
-  </li>
-  <li>
-    <a href="/docs/theming/focus">Focus</a>
-  </li>
-  <li>
-    <a href="/docs/theming/shadows">Shadows</a>
-  </li>
-  <li>
-    <a href="/docs/theming/transitions">Transitions</a>
-  </li>
-  <li>
-    <a href="/docs/theming/component-groups">Component Groups</a>
-  </li>
-</ul>
-
-{# Style Utilities #}
-{% if not isAlpha %}
-<h2>Style Utilities</h2>
-<ul>
-  <li><a href="/docs/style-utilities/align-items">Align Items</a></li>
-  <li><a href="/docs/style-utilities/border-radius">Border Radius</a></li>
-  <li><a href="/docs/style-utilities/gap">Gap</a></li>
-  <li><a href="/docs/style-utilities/text">Text</a></li>
-</ul>
-{% endif %}

docs/_includes/svgs/icon-button.njk

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

docs/_layouts/blank.njk

@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="{{ description }}">
-    {% if noindex %}<meta name="robots" content="noindex">{% endif %}
-
-    <title>{{ title }}</title>
-
-    <link rel="icon" href="/assets/images/webawesome-logo.svg" />
-    <link rel="apple-touch-icon" href="/assets/images/app-icon.png">
-
-    {# Scripts #}
-    {# 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">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
-
-    {# Web Awesome #}
-    <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
-    <link rel="stylesheet" id="theme-stylesheet" />
-    <link rel="stylesheet" href="/dist/themes/applied.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />
-    <link rel="stylesheet" href="/dist/themes/forms.css" />
-
-    {# Set the theme to prevent flashing #}
-    <script>
-      function getColorScheme() {
-        return localStorage.getItem('colorScheme') || 'auto';
-      }
-
-      function getPresetTheme () {
-        return localStorage.getItem('presetTheme') || 'default';
-      }
-
-      function isDark() {
-        const colorScheme = getColorScheme()
-        if (colorScheme === 'auto') {
-          return window.matchMedia('(prefers-color-scheme: dark)').matches;
-        }
-        return colorScheme === 'dark';
-      }
-
-      const stylesheet = document.getElementById("theme-stylesheet")
-      let preset = getPresetTheme()
-
-      stylesheet.href = `/dist/themes/${preset}.css`
-
-      document.documentElement.classList.toggle(
-        `wa-theme-${preset}-dark`,
-        isDark()
-      );
-    </script>
-  </head>
-  <body class="layout-{{ layout | stripExtension }}">
-
-        {% block beforeContent %}{% endblock %}
-
-        {% block content %}
-          {{ content | safe }}
-        {% endblock %}
-
-        {% block afterContent %}{% endblock %}
-
-  </body>
-</html>

docs/_layouts/page-wide.njk

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

docs/_layouts/page.njk

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

docs/_layouts/pattern.njk

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

docs/_utils/code-examples.js

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

docs/_utils/copy-code.js

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

docs/_utils/remove-data-alpha-elements.js

@@ -1,23 +0,0 @@
-import { parse } from 'node-html-parser';
-
-/**
- * Eleventy plugin to add remove elements with <div data-alpha="remove"> from the alpha build.
- */
-export function removeDataAlphaElements(options = {}) {
-  options = {
-    isAlpha: false,
-    ...options
-  };
-
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('remove-data-alpha-elements', content => {
-      const doc = parse(content, { blockTextElements: { code: true } });
-
-      if (options.isAlpha) {
-        doc.querySelectorAll('[data-alpha="remove"]').forEach(el => el.remove());
-      }
-
-      return doc.toString();
-    });
-  };
-}

docs/assets/examples/page-demo/demo.css

@@ -1,23 +0,0 @@
-#page_slots_demo {
-  display: flex;
-  flex-flow: column;
-  gap: 1em;
-  margin-bottom: var(--wa-space-xl);
-
-  fieldset .options {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
-    gap: 0.2em 1em;
-
-    wa-checkbox {
-      white-space: nowrap;
-    }
-
-    p {
-      display: contents;
-    }
-  }
-
-  wa-viewport-demo {
-  }
-}

docs/assets/examples/page-demo/demo.js

@@ -1,50 +0,0 @@
-await customElements.whenDefined('wa-checkbox');
-let container = document.getElementById('page_slots_demo');
-let fieldset = container.querySelector('fieldset');
-let iframe = container.querySelector('iframe');
-let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][href^='/dist/']"))
-  .map(i => i.outerHTML)
-  .join('\n');
-let includes = `${stylesheets}
-  <script src="/dist/webawesome.loader.js" type="module"></script>
-  <link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
-
-function render() {
-  let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:is([data-wa-checked])'));
-  let slotsHTML = slots
-    .map(slot => {
-      let name = slot.getAttribute('value');
-      let description = slot.getAttribute('data-description');
-
-      let tag = 'div';
-      if (name.endsWith('header')) {
-        tag = 'header';
-      }
-      if (name.endsWith('footer')) {
-        tag = 'footer';
-      }
-
-      return `<${tag} class="slot-content" slot="${name}">
-		<strong>${name || 'main <em>(default)</em>'}</strong>
-		<p>${description}</p>
-	</${tag}>`;
-    })
-    .join('\n');
-  let page = iframe.contentDocument?.querySelector('wa-page');
-
-  if (page) {
-    page.innerHTML = slotsHTML;
-  } else {
-    iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
-  }
-}
-fieldset?.addEventListener('input', render);
-render();
-
-//
-// TODO - fix Turbo caching. When this is removed, visiting the <wa-page> docs via Turbo will cause the <iframe srcdoc>
-// to not render. Even with this, there are console errors when leaving the page.
-//
-// NOTE - the iframe already has `data-turbo="false"` and `data-turbo-temporary` on it.
-//
-document.body.setAttribute('data-turbo', 'false');

docs/assets/examples/page-demo/page.css

@@ -1,66 +0,0 @@
-body {
-  padding: 0;
-  margin: 0;
-}
-
-wa-page {
-  margin: var(--wa-space-xs);
-  margin-inline-start: 0;
-  &::part(base),
-  &::part(main),
-  &::part(navigation),
-  &::part(body) {
-    gap: var(--wa-space-xs);
-  }
-}
-
-:is([slot='banner'], [slot='header'], [slot='subheader'], [slot='footer'], [slot*='navigation']) {
-  margin-inline-start: var(--wa-space-xs);
-}
-
-.slot-content[slot='banner'],
-.slot-content[slot='header'],
-.slot-content[slot='subheader'] {
-  outline: 2px solid var(--wa-color-surface-default);
-}
-
-.slot-content {
-  padding: var(--wa-space-m);
-  border-radius: var(--wa-border-radius-s);
-  align-content: center;
-  justify-content: center;
-  text-align: center;
-  height: 100%;
-  box-sizing: border-box;
-  background: var(--wa-color-blue-80);
-  color: var(--wa-color-blue-20);
-
-  &[slot='banner'] {
-    background: var(--wa-color-blue-50);
-    color: white;
-  }
-
-  &[slot='header'] {
-    background: var(--wa-color-blue-60);
-    color: var(--wa-color-blue-10);
-  }
-
-  &[slot^='main'],
-  &[slot=''] {
-    background: var(--wa-color-gray-80);
-    color: var(--wa-color-gray-20);
-  }
-
-  &[slot^='navigation'] {
-    background: var(--wa-color-violet-80);
-    color: var(--wa-color-violet-20);
-  }
-
-  strong {
-    display: block;
-  }
-
-  &:not([slot='']) p {
-    display: none;
-  }
-}

docs/assets/scripts/cheatsheet.js

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

docs/assets/scripts/code-examples.js

@@ -1,60 +0,0 @@
-document.addEventListener('click', event => {
-  const toggle = event.target?.closest('.code-example-toggle');
-  const pen = event.target?.closest('.code-example-pen');
-
-  // Toggle source
-  if (toggle) {
-    const codeExample = toggle.closest('.code-example');
-    const isOpen = !codeExample.classList.contains('open');
-
-    toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-    codeExample.classList.toggle('open', isOpen);
-  }
-
-  // Edit in CodePen
-  if (pen) {
-    const codeExample = pen.closest('.code-example');
-    const code = codeExample.querySelector('code');
-    const cdnUrl = document.documentElement.dataset.cdnUrl;
-    const html =
-      `<script type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
-      `<link rel="stylesheet" href="${cdnUrl}themes/default.css">\n` +
-      `<link rel="stylesheet" href="${cdnUrl}themes/applied.css">\n` +
-      `<link rel="stylesheet" href="${cdnUrl}themes/layout.css">\n` +
-      `<link rel="stylesheet" href="${cdnUrl}themes/utilities.css">\n\n` +
-      `${code.textContent}`;
-    const css = 'html > body {\n  font: 16px sans-serif;\n  padding: 2rem;\n}';
-    const js = '';
-
-    const form = document.createElement('form');
-    form.action = 'https://codepen.io/pen/define';
-    form.method = 'POST';
-    form.target = '_blank';
-
-    const data = {
-      title: '',
-      description: '',
-      tags: ['webawesome'],
-      editors: '1000',
-      head: '<meta name="viewport" content="width=device-width">',
-      html_classes: '',
-      css_external: '',
-      js_external: '',
-      js_module: true,
-      js_pre_processor: 'none',
-      html,
-      css,
-      js
-    };
-
-    const input = document.createElement('input');
-    input.type = 'hidden';
-    input.name = 'data';
-    input.value = JSON.stringify(data);
-    form.append(input);
-
-    document.documentElement.append(form);
-    form.submit();
-    form.remove();
-  }
-});

docs/assets/scripts/color-scheme.js

@@ -1,59 +0,0 @@
-//
-// Color scheme selector
-//
-(() => {
-  function setColorScheme(newColorScheme) {
-    colorScheme = newColorScheme;
-    localStorage.setItem('colorScheme', colorScheme);
-    const presetTheme = window.getPresetTheme();
-
-    // Update the UI
-    updateSelection();
-
-    // Toggle the dark mode class
-    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
-  }
-
-  function updateSelection() {
-    const menu = document.querySelector('#color-scheme-selector wa-menu');
-    if (!menu) return;
-    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
-      await customElements.whenDefined(item.localName);
-      await item.updateComplete;
-      item.checked = item.getAttribute('value') === colorScheme;
-    });
-  }
-
-  let colorScheme = window.getColorScheme();
-
-  // Selection is not preserved when changing page, so update when opening dropdown
-  document.addEventListener('wa-show', event => {
-    const colorSchemeSelector = event.target.closest('#color-scheme-selector');
-    if (!colorSchemeSelector) return;
-    updateSelection();
-  });
-
-  // Listen for selections
-  document.addEventListener('wa-select', event => {
-    const menu = event.target.closest('#color-scheme-selector wa-menu');
-    if (!menu) return;
-    setColorScheme(event.detail.item.value);
-  });
-
-  // Update the color scheme when the preference changes
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setColorScheme(colorScheme));
-
-  // Toggle with backslash
-  document.addEventListener('keydown', event => {
-    if (
-      event.key === '\\' &&
-      !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
-    ) {
-      event.preventDefault();
-      setColorScheme(window.isDark() ? 'light' : 'dark');
-    }
-  });
-
-  // Set the initial color scheme and sync the UI
-  setColorScheme(colorScheme);
-})();

docs/assets/scripts/copy-code.js

@@ -1,15 +0,0 @@
-function setCopyValue() {
-  document.querySelectorAll('.copy-button').forEach(copyButton => {
-    const pre = copyButton.closest('pre');
-    const code = pre?.querySelector('code');
-
-    if (code) {
-      copyButton.value = code.textContent;
-    }
-  });
-}
-
-// Set data for all copy buttons when the page loads
-setCopyValue();
-
-document.addEventListener('turbo:load', setCopyValue);

docs/assets/scripts/preset-theme.js

@@ -1,86 +0,0 @@
-//
-// Preset theme selector
-//
-(() => {
-  function setPresetTheme(newPresetTheme) {
-    presetTheme = newPresetTheme;
-    localStorage.setItem('presetTheme', presetTheme);
-
-    const stylesheet = document.getElementById('theme-stylesheet');
-
-    const newStylesheet = Object.assign(document.createElement('link'), {
-      href: `/dist/themes/${presetTheme}.css`,
-      rel: 'preload',
-      as: 'style'
-    });
-
-    newStylesheet.addEventListener(
-      'load',
-      () => {
-        newStylesheet.rel = 'stylesheet';
-        newStylesheet.id = stylesheet.id;
-        requestAnimationFrame(() => {
-          stylesheet.remove();
-        });
-      },
-      { once: true }
-    );
-
-    document.head.append(newStylesheet);
-
-    // Update the UI
-    updateSelection();
-
-    // Toggle the dark mode class
-    document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
-  }
-
-  function updateSelection(container = document) {
-    const menu = container.querySelector('#preset-theme-selector wa-menu');
-    if (!menu) return;
-    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
-      const isChecked = item.getAttribute('value') === presetTheme;
-      if (isChecked) {
-        container.querySelector('#preset-theme-selector__text').textContent = item.innerText;
-      }
-      await customElements.whenDefined(item.localName);
-      await item.updateComplete;
-      item.checked = isChecked;
-    });
-  }
-
-  let presetTheme = window.getPresetTheme();
-
-  // Selection is not preserved when changing page, so update when opening dropdown
-  document.addEventListener('wa-show', event => {
-    const presetThemeSelector = event.target.closest('#preset-theme-selector');
-    if (!presetThemeSelector) return;
-    updateSelection();
-  });
-
-  // Listen for selections
-  document.addEventListener('wa-select', event => {
-    const menu = event.target.closest('#preset-theme-selector wa-menu');
-    if (!menu) return;
-    setPresetTheme(event.detail.item.value);
-  });
-
-  // Update the color scheme when the preference changes
-  window.matchMedia('(prefers-preset-theme: dark)').addEventListener('change', () => setPresetTheme(presetTheme));
-  updateSelection();
-
-  /**
-   * Without this, there's a flash of the incorrect preset theme.
-   */
-  function updateSelectionBeforeTurboLoad(e) {
-    const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
-    if (!newElement) {
-      return;
-    }
-    updateSelection(newElement);
-  }
-
-  ['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
-    document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
-  });
-})();

docs/assets/scripts/scroll.js

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

docs/assets/styles/code-examples.css

@@ -1,87 +0,0 @@
-.code-example {
-  border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-  border-radius: var(--wa-border-radius-m);
-  color: var(--wa-color-text-normal);
-  margin-block-end: var(--wa-flow-spacing);
-}
-
-.code-example-preview {
-  padding: 2rem;
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-
-  > :first-child {
-    margin-block-start: 0;
-  }
-
-  > :last-child {
-    margin-block-end: 0;
-  }
-}
-
-.code-example-source {
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-}
-
-.code-example:not(.open) .code-example-source {
-  display: none;
-}
-
-.code-example.open .code-example-toggle wa-icon {
-  rotate: 180deg;
-}
-
-.code-example-source pre {
-  position: relative;
-  border-radius: 0;
-  margin: 0;
-  white-space: normal;
-}
-
-.code-example-source:not(:has(+ .code-example-buttons)) {
-  border-bottom: none;
-
-  pre {
-    border-bottom-right-radius: var(--wa-border-radius-m);
-    border-bottom-left-radius: var(--wa-border-radius-m);
-  }
-}
-
-.code-example-buttons {
-  display: flex;
-  align-items: stretch;
-
-  button {
-    all: unset;
-    flex: 1 0 auto;
-    font-size: 0.875rem;
-    color: var(--wa-color-text-quiet);
-    border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-    text-align: center;
-    padding: 0.5rem;
-    cursor: pointer;
-
-    &:first-of-type {
-      border-left: none;
-      border-bottom-left-radius: var(--wa-border-radius-m);
-    }
-
-    &:last-of-type {
-      border-bottom-right-radius: var(--wa-border-radius-m);
-    }
-
-    &:focus-visible {
-      outline: var(--wa-focus-ring);
-    }
-  }
-
-  .code-example-pen {
-    flex: 0 0 100px;
-    white-space: nowrap;
-  }
-
-  wa-icon {
-    width: 1em;
-    height: 1em;
-    vertical-align: -2px;
-  }
-}

docs/assets/styles/theme-headers.css

@@ -1,50 +0,0 @@
-/* #region Custom Styles */
-@container preview (min-width: 0) {
-  .hero-background {
-    height: 47rem;
-    background-color: var(--wa-color-brand-fill-loud);
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: -1;
-  }
-
-  .hero-background::after {
-    background: url(/assets/images/themer/default/hero.png) 10rem bottom no-repeat;
-    background-size: 95%;
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .hero wa-button[variant='brand'] {
-    --background: var(--wa-color-neutral-fill-quiet);
-    --label-color: var(--wa-color-neutral-on-normal);
-  }
-
-  .project-header {
-    color: var(--wa-color-brand-on-loud);
-  }
-
-  .strata.hero {
-    height: 26rem;
-  }
-
-  .hero .title {
-    margin-inline-end: 40%;
-    color: var(--wa-color-brand-on-loud);
-  }
-}
-
-/* responsive */
-@container preview (min-width: 1040px) {
-  .hero-background::after {
-    background-position: right bottom;
-    background-size: 90%;
-  }
-}
-/* #endregion */

docs/docs/components/badge.md

@@ -1,88 +0,0 @@
----
-title: Badge
-description: Badges are used to draw attention and display statuses or counts.
-layout: component
----
-
-```html {.example}
-<wa-badge>Badge</wa-badge>
-```
-
-## Examples
-
-### Variants
-
-Set the `variant` attribute to change the badge's variant.
-
-```html {.example}
-<wa-badge variant="brand">Brand</wa-badge>
-<wa-badge variant="success">Success</wa-badge>
-<wa-badge variant="neutral">Neutral</wa-badge>
-<wa-badge variant="warning">Warning</wa-badge>
-<wa-badge variant="danger">Danger</wa-badge>
-```
-
-### Pill Badges
-
-Use the `pill` attribute to give badges rounded edges.
-
-```html {.example}
-<wa-badge variant="brand" pill>Brand</wa-badge>
-<wa-badge variant="success" pill>Success</wa-badge>
-<wa-badge variant="neutral" pill>Neutral</wa-badge>
-<wa-badge variant="warning" pill>Warning</wa-badge>
-<wa-badge variant="danger" pill>Danger</wa-badge>
-```
-
-### Pulsating Badges
-
-Use the `pulse` attribute to draw attention to the badge with a subtle animation.
-
-```html {.example}
-<div class="badge-pulse">
-  <wa-badge variant="brand" pill pulse>1</wa-badge>
-  <wa-badge variant="success" pill pulse>1</wa-badge>
-  <wa-badge variant="neutral" pill pulse>1</wa-badge>
-  <wa-badge variant="warning" pill pulse>1</wa-badge>
-  <wa-badge variant="danger" pill pulse>1</wa-badge>
-</div>
-
-<style>
-  .badge-pulse wa-badge:not(:last-of-type) {
-    margin-right: 1rem;
-  }
-</style>
-```
-
-### With Buttons
-
-One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.
-
-```html {.example}
-<wa-button>
-  Requests
-  <wa-badge pill>30</wa-badge>
-</wa-button>
-
-<wa-button style="margin-inline-start: 1rem;">
-  Warnings
-  <wa-badge variant="warning" pill>8</wa-badge>
-</wa-button>
-
-<wa-button style="margin-inline-start: 1rem;">
-  Errors
-  <wa-badge variant="danger" pill>6</wa-badge>
-</wa-button>
-```
-
-### With Menu Items
-
-When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
-
-```html {.example}
-<wa-menu style="max-width: 240px;">
-  <wa-menu-label>Messages</wa-menu-label>
-  <wa-menu-item>Comments <wa-badge slot="suffix" variant="neutral" pill>4</wa-badge></wa-menu-item>
-  <wa-menu-item>Replies <wa-badge slot="suffix" variant="neutral" pill>12</wa-badge></wa-menu-item>
-</wa-menu>
-```

docs/docs/components/card.md

@@ -1,141 +0,0 @@
----
-title: Card
-description: Cards can be used to group related subjects in a container.
-layout: component
----
-
-```html {.example}
-<wa-card with-image with-footer class="card-overview">
-  <img
-    slot="image"
-    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-
-  <strong>Mittens</strong><br />
-  This kitten is as cute as he is playful. Bring him home today!<br />
-  <small>6 weeks old</small>
-
-  <div slot="footer">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
-  </div>
-</wa-card>
-
-<style>
-  .card-overview {
-    max-width: 300px;
-  }
-
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-```
-
-## Examples
-
-### Basic Card
-
-Basic cards aren't very exciting, but they can display any content you want them to.
-
-```html {.example}
-<wa-card class="card-basic">
-  This is just a basic card. No image, no header, and no footer. Just your content.
-</wa-card>
-
-<style>
-  .card-basic {
-    max-width: 300px;
-  }
-</style>
-```
-
-### Card with Header
-
-Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the card.
-
-```html {.example}
-<wa-card with-header class="card-header">
-  <div slot="header">
-    Header Title
-    <wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
-  </div>
-
-  This card has a header. You can put all sorts of things in it!
-</wa-card>
-
-<style>
-  .card-header {
-    max-width: 300px;
-  }
-
-  .card-header [slot='header'] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .card-header h3 {
-    margin: 0;
-  }
-
-  .card-header wa-icon-button {
-    font-size: var(--wa-font-size-m);
-  }
-</style>
-```
-
-### Card with Footer
-
-Footers can be used to display actions, summaries, or other relevant content. Use the `with-footer` attribute to add a footer to the card.
-
-```html {.example}
-<wa-card with-footer class="card-footer">
-  This card has a footer. You can put all sorts of things in it!
-
-  <div slot="footer">
-    <wa-rating></wa-rating>
-    <wa-button variant="brand">Preview</wa-button>
-  </div>
-</wa-card>
-
-<style>
-  .card-footer {
-    max-width: 300px;
-  }
-
-  .card-footer [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-```
-
-### Images
-
-Card images are displayed atop the card and will stretch to fit. Use the `with-image` attribute to add an image to the card.
-
-```html {.example}
-<wa-card with-image class="card-image">
-  <img
-    slot="image"
-    src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
-    alt="A kitten walks towards camera on top of pallet."
-  />
-  This is a kitten, but not just any kitten. This kitten likes walking along pallets.
-</wa-card>
-
-<style>
-  .card-image {
-    max-width: 300px;
-  }
-</style>
-```

docs/docs/components/cheatsheet.njk

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

docs/docs/components/code-demo.md

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

docs/docs/components/details.md

@@ -1,88 +0,0 @@
----
-title: Details
-description: Details show a brief summary and expand to show additional content.
-layout: component
----
-
-<!-- cspell:dictionaries lorem-ipsum -->
-
-```html {.example}
-<wa-details summary="Toggle Me">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</wa-details>
-```
-
-## Examples
-
-### Disabled
-
-Use the `disable` attribute to prevent the details from expanding.
-
-```html {.example}
-<wa-details summary="Disabled" disabled>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</wa-details>
-```
-
-### Customizing the Summary Icon
-
-Use the `expand-icon` and `collapse-icon` slots to change the expand and collapse icons, respectively. To disable the animation, override the `rotate` property on the `summary-icon` part as shown below.
-
-```html {.example}
-<wa-details summary="Toggle Me" class="custom-icons">
-  <wa-icon name="square-plus" slot="expand-icon" variant="regular"></wa-icon>
-  <wa-icon name="square-minus" slot="collapse-icon" variant="regular"></wa-icon>
-
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</wa-details>
-
-<style>
-  wa-details.custom-icons::part(summary-icon) {
-    /* Disable the expand/collapse animation */
-    rotate: none;
-  }
-</style>
-```
-
-### Grouping Details
-
-Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `wa-show` event.
-
-```html {.example}
-<div class="details-group-example">
-  <wa-details summary="First" open>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </wa-details>
-
-  <wa-details summary="Second">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </wa-details>
-
-  <wa-details summary="Third">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </wa-details>
-</div>
-
-<script>
-  const container = document.querySelector('.details-group-example');
-
-  // Close all other details when one is shown
-  container.addEventListener('wa-show', event => {
-    if (event.target.localName === 'wa-details') {
-      [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
-    }
-  });
-</script>
-
-<style>
-  .details-group-example wa-details:not(:last-of-type) {
-    margin-bottom: var(--wa-space-2xs);
-  }
-</style>
-```

docs/docs/components/icon-button.md

@@ -1,75 +0,0 @@
----
-title: Icon Button
-description: Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
-layout: component
----
-
-For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/docs/components/icon).
-
-```html {.example}
-<wa-icon-button name="gear" label="Settings"></wa-icon-button>
-```
-
-## Examples
-
-### Sizes
-
-Icon buttons inherit their parent element's `font-size`.
-
-```html {.example}
-<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 1.5rem;"></wa-icon-button>
-<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 2rem;"></wa-icon-button>
-<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 2.5rem;"></wa-icon-button>
-```
-
-### Colors
-
-Icon buttons are designed to have a uniform appearance, so their color is not inherited. However, you can still customize them by styling the `base` part.
-
-```html {.example}
-<div class="icon-button-color">
-  <wa-icon-button name="bold" variant="solid" label="Bold"></wa-icon-button>
-  <wa-icon-button name="italic" variant="solid" label="Italic"></wa-icon-button>
-  <wa-icon-button name="underline" variant="solid" label="Underline"></wa-icon-button>
-</div>
-
-<style>
-  .icon-button-color wa-icon-button::part(base) {
-    color: #b00091;
-  }
-
-  .icon-button-color wa-icon-button::part(base):hover,
-  .icon-button-color wa-icon-button::part(base):focus {
-    color: #c913aa;
-  }
-
-  .icon-button-color wa-icon-button::part(base):active {
-    color: #960077;
-  }
-</style>
-```
-
-### Link Buttons
-
-Use the `href` attribute to convert the button to a link.
-
-```html {.example}
-<wa-icon-button name="gear" variant="solid" label="Settings" href="https://example.com" target="_blank"></wa-icon-button>
-```
-
-### Icon Button with Tooltip
-
-Add a tooltip that references the `id` of the icon button to provide contextual information.
-
-```html {.example}
-<wa-icon-button id="icon-button" name="gear" variant="solid" label="Settings"></wa-icon-button>
-<wa-tooltip for="icon-button">Settings</wa-tooltip>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable the icon button.
-
-```html {.example}
-<wa-icon-button name="gear" variant="solid" label="Settings" disabled></wa-icon-button>
-```

docs/docs/components/index.md

@@ -1,423 +0,0 @@
----
-title: Components
-description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
-layout: page-outline
----
-
-<style>
-  wa-card#drawer-card::part(header) {
-    --spacing: 0;
-    justify-content: flex-end;
-    overflow: hidden;
-  }
-</style>
-
-<p class="index-summary">Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.</p>
-
-<div class="index-grid">
-  <h2 class="index-category">Actions</h2>
-  <a href="/docs/components/button">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/button.njk" %}
-      </div>
-      <span class="page-name">Button</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/button-group">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/button-group.njk" %}
-      </div>
-      <span class="page-name">Button Group</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/copy-button">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/copy-button.njk" %}
-      </div>
-      <span class="page-name">Copy Button</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/dropdown">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/dropdown.njk" %}
-      </div>
-      <span class="page-name">Dropdown</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/icon-button">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/icon-button.njk" %}
-      </div>
-      <span class="page-name">Icon Button</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/menu">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/menu.njk" %}
-      </div>
-      <span class="page-name">Menu</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/qr-code">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/qr-code.njk" %}
-      </div>
-      <span class="page-name">QR Code</span>
-    </wa-card>
-  </a>
-
-  <h2 class="index-category" style="grid-column: 1 / -1">Feedback and Status</h2>
-  <a href="/docs/components/badge">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/badge.njk" %}
-      </div>
-      <span class="page-name">Badge</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/callout">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/callout.njk" %}
-      </div>
-      <span class="page-name">Callout</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/progress-bar">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/progress-bar.njk" %}
-      </div>
-      <span class="page-name">Progress Bar</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/progress-ring">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/progress-ring.njk" %}
-      </div>
-      <span class="page-name">Progress Ring</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/skeleton">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/skeleton.njk" %}
-      </div>
-      <span class="page-name">Skeleton</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/spinner">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/spinner.njk" %}
-      </div>
-      <span class="page-name">Spinner</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/tag">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/tag.njk" %}
-      </div>
-      <span class="page-name">Tag</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/tooltip">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/tooltip.njk" %}
-      </div>
-      <span class="page-name">Tooltip</span>
-    </wa-card>
-  </a>
-
-  <h2 class="index-category">Imagery</h2>
-  <a href="/docs/components/animated-image">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/animated-image.njk" %}
-      </div>
-      <span class="page-name">Animated Image</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/avatar">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/avatar.njk" %}
-      </div>
-      <span class="page-name">Avatar</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/carousel">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/carousel.njk" %}
-      </div>
-      <span class="page-name">Carousel</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/icon">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/icon.njk" %}
-      </div>
-      <span class="page-name">Icon</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/image-comparer">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/image-comparer.njk" %}
-      </div>
-      <span class="page-name">Image Comparer</span>
-    </wa-card>
-  </a>
-
-  <h2 class="index-category">Inputs</h2>
-  <a href="/docs/components/checkbox">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/checkbox.njk" %}
-      </div>
-      <span class="page-name">Checkbox</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/color-picker">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/color-picker.njk" %}
-      </div>
-      <span class="page-name">Color Picker</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/input">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/input.njk" %}
-      </div>
-      <span class="page-name">Input</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/radio-group">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/radio-group.njk" %}
-      </div>
-      <span class="page-name">Radio Group</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/range">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/range.njk" %}
-      </div>
-      <span class="page-name">Range</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/rating">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/rating.njk" %}
-      </div>
-      <span class="page-name">Rating</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/select">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/select.njk" %}
-      </div>
-      <span class="page-name">Select</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/switch">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/switch.njk" %}
-      </div>
-      <span class="page-name">Switch</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/textarea">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/textarea.njk" %}
-      </div>
-      <span class="page-name">Textarea</span>
-    </wa-card>
-  </a>
-
-  <h2 class="index-category">Navigation</h2>
-  <a href="/docs/components/breadcrumb">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/breadcrumb.njk" %}
-      </div>
-      <span class="page-name">Breadcrumb</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/tab-group">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/tab-group.njk" %}
-      </div>
-      <span class="page-name">Tab Group</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/tree">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/tree.njk" %}
-      </div>
-      <span class="page-name">Tree</span>
-    </wa-card>
-  </a>
-
-  <h2 class="index-category">Organization</h2>
-  <a href="/docs/components/card">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/card.njk" %}
-      </div>
-      <span class="page-name">Card</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/details">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/details.njk" %}
-      </div>
-      <span class="page-name">Details</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/dialog">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/dialog.njk" %}
-      </div>
-      <span class="page-name">Dialog</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/divider">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/divider.njk" %}
-      </div>
-      <span class="page-name">Divider</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/drawer">
-    <wa-card with-header id="drawer-card">
-      <div slot="header">
-        {% include "svgs/drawer.njk" %}
-      </div>
-      <span class="page-name">Drawer</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/page">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/page.njk" %}
-      </div>
-      <span class="page-name">Page</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/split-panel">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/split-panel.njk" %}
-      </div>
-      <span class="page-name">Split Panel</span>
-    </wa-card>
-  </a>
-
-  <h2 class="index-category">Utilities</h2>
-  <a href="/docs/components/animation">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/animation.njk" %}
-      </div>
-      <span class="page-name">Animation</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/format-bytes">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/format-bytes.njk" %}
-      </div>
-      <span class="page-name">Format Bytes</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/format-date">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/format-date.njk" %}
-      </div>
-      <span class="page-name">Format Date</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/format-number">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/format-number.njk" %}
-      </div>
-      <span class="page-name">Format Number</span>
-    </wa-card>
-  </a>
-    <a href="/docs/components/include">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/include.njk" %}
-      </div>
-      <span class="page-name">Include</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/mutation-observer">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/mutation-observer.njk" %}
-      </div>
-      <span class="page-name">Mutation Observer</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/popup">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/popup.njk" %}
-      </div>
-      <span class="page-name">Popup</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/relative-time">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/relative-time.njk" %}
-      </div>
-      <span class="page-name">Relative Time</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/resize-observer">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/resize-observer.njk" %}
-      </div>
-      <span class="page-name">Resize Observer</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/visually-hidden">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/visually-hidden.njk" %}
-      </div>
-      <span class="page-name">Visually Hidden</span>
-    </wa-card>
-  </a>
-</div>

docs/docs/components/page-samples/documentation.md

@@ -1,238 +0,0 @@
----
-title: Sample Documentation Page
-description: A sample page for a documentation website using Web Awesome's page component.
-layout: blank
----
-
-<style>
-  wa-page {
-    --menu-width: 15rem;
-    --aside-width: 15rem;
-  }
-  wa-page[view='desktop'] [data-toggle-nav] {
-    display: none;
-  }
-  wa-page[view='mobile'] {
-    --menu-width: auto;
-    --aside-width: auto;
-  }
-  wa-page[view='mobile'] [slot='aside'] {
-    display: none;
-  }
-  wa-page[view='mobile'] #brand-name {
-    display: none;
-  }
-  wa-page[view='mobile'] #search {
-    display: none;
-  }
-  [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);
-  }
-  wa-page[view='desktop'] [slot*='navigation'] {
-    border-inline-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);
-  }
-  [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>
-
-<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">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-icon-button data-toggle-nav name="bars" label="Menu"></wa-icon-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" placeholder="Search" size="small" style="max-inline-size: 12rem;">
-      <wa-icon slot="prefix" 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" style="--flank-size: 1.25em;">
-      <wa-icon name="camera"></wa-icon>
-      <span>Photo Gallery</span>
-    </a>
-    <a href="#" class="wa-flank" style="--flank-size: 1.25em;">
-      <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-m wa-theme-default-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-m); 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">
-    <h2 class="wa-heading-m">Discover More Birds</h2>
-    <wa-card with-image>
-      <div slot="image" 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 with-image>
-      <div slot="image" 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 with-image>
-      <div slot="image" 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>

docs/docs/components/page-samples/media-app.md

@@ -1,401 +0,0 @@
----
-title: Sample Media App Page
-description: A sample page for a media app using Web Awesome's page component.
-layout: blank
----
-
-<wa-page class="wa-theme-default-dark">
-  <header slot="header">
-    <div class="wa-cluster">
-      <wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
-      <wa-icon name="record-vinyl" family="duotone"></wa-icon>
-      <span class="wa-heading-m">radiogaga</span>
-    </div>
-    <wa-input placeholder="Search" style="max-inline-size: 100%;">
-      <wa-icon slot="prefix" 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">
-    <h2 class="wa-heading-s">For You</h2>
-    <wa-icon-button id="settings" name="gear" label="Settings"></wa-icon-button>
-  </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="sparkles"></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="list-music"></wa-icon>
-          <span>Playlists</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="microphone-stand"></wa-icon>
-          <span>Artists</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="grid-2"></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="cassette-tape" 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="face-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-icon-button id="back" name="chevron-left" label="Back"></wa-icon-button>
-    <wa-tooltip for="back" placement="bottom" distance="2">Back</wa-tooltip>
-    <div class="wa-cluster">
-      <wa-icon-button id="favorite" name="heart" variant="regular" label="Favorite"></wa-icon-button>
-      <wa-tooltip for="favorite" placement="bottom" distance="2">Favorite</wa-tooltip>
-      <wa-icon-button id="options" name="ellipsis" label="Options"></wa-icon-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="--flank-size: 35%; --content-percentage: 55%;">
-        <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-icon-button name="play" label="Play"></wa-icon-button>
-              <wa-icon-button name="shuffle" label="Shuffle"></wa-icon-button>
-            </div>
-            <wa-icon-button name="plus" label="Add to Library"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-      </ol>
-    </div>
-  </main>
-  <div slot="main-footer" class="wa-grid wa-gap-xl">
-    <h2 class="wa-heading-2xl">More You Might Like</h2>
-    <div class="wa-stack wa-gap-xs">
-      <div class="wa-frame wa-border-radius-m">
-        <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-m">
-        <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-m">
-        <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: 18rem;
-    --wa-tooltip-arrow-size: 0;
-    background-color: var(--wa-color-surface-lowered);
-  }
-  wa-page[view='desktop'] [data-toggle-nav] {
-    display: none;
-  }
-  wa-page[view='mobile'] {
-    --menu-width: auto;
-  }
-  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;
-  }
-  [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;
-  }
-  [slot='navigation'] ul {
-    list-style: none;
-    margin: 0;
-  }
-  [slot='navigation'] ul a {
-    border-radius: var(--wa-border-radius-s);
-    padding: var(--wa-space-xs);
-  }
-  [slot='navigation'] ul a:hover,
-  main ol li:hover {
-    background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
-  }
-  [slot='navigation'] wa-icon {
-    align-items: center;
-    aspect-ratio: 1;
-    color: var(--wa-color-brand-fill-loud);
-    display: flex;
-    height: var(--flank-size);
-    justify-content: center;
-  }
-  [slot='navigation'] #recent wa-icon {
-    border-radius: var(--wa-border-radius-xs);
-  }
-  [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);
-  }
-  main ol li .wa-flank {
-    --flank-size: 2rem;
-  }
-  main ol li:not(:first-child) {
-    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  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-icon-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-icon-button[name="play"]::part(base) {
-    background-color: var(--wa-color-brand-fill-loud);
-    border: none;
-    color: var(--wa-color-brand-on-loud);
-    font-size: 3rem;
-    padding: 1.5rem;
-  }
-</style>

docs/docs/components/page.md

@@ -1,829 +0,0 @@
----
-title: Page
-description: Pages offer an easy way to scaffold entire page layouts using minimal markup.
-layout: component
-isPro: true
----
-
-The page component is designed to power full webpages. It is flexible enough to handle most modern designs and includes a simple mechanism for handling desktop and mobile navigation.
-
-## Layout Anatomy
-
-This image depicts a page's anatomy, including the default positions of each section. The labels represent the [named slots](#slots) you can use to populate them.
-
-Most slots are optional. Slots that have no content will not be shown, allowing you to opt-in to just the sections you actually need.
-
-{% include "page-demo.njk" %}
-
-<!-- ![Screenshot of Layout Anatomy showing various slots](/assets/images/layout-anatomy.svg) -->
-
-## Using `wa-page`
-
-:::info
-If you're not familiar with how slots work in HTML, you might want to [learn more about slots](/docs/usage/#slots) before using this component.
-:::
-
-A number of sections are available as part of the page component, most of which are optional. Content is populated by [slotting elements](/docs/usage/#slots) into various locations.
-
-This component _does not_ implement any [content sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning) or "semantic elements" internally (such as `<main>`, `<header>`, `<footer>`, etc.). Instead, we recommended that you slot in content sectioning elements wherever you feel they're appropriate.
-
-When using `<wa-page>`, make sure to zero out all paddings and margins on `<html>` and `<body>`, otherwise you may see unexpected gaps. We highly recommend adding the following styles when using `<wa-page>`:
-
-```css
-html,
-body {
-  min-height: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-}
-```
-
-## Examples
-
-:::warning
-Open demos in a new tab to examine their behavior in different window sizes.
-The previews below use simulated zooming which, depending on your browser, may not be accurate.
-:::
-
-### Documentation
-
-A sample documentation page using [all available slots](#slots).
-The navigation menu collapses into a drawer at a custom `mobile-breakpoint` of 920px.
-It can be opened using a button with `[data-toggle-nav]` that appears in the `subheader` slot. The `aside` slot is also hidden below 920px.
-
-```html {.example viewport="1600"}
-<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">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-icon-button data-toggle-nav name="bars" label="Menu"></wa-icon-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" placeholder="Search" size="small" style="max-inline-size: 12rem;">
-      <wa-icon slot="prefix" 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" style="--flank-size: 1.25em;">
-      <wa-icon name="camera"></wa-icon>
-      <span>Photo Gallery</span>
-    </a>
-    <a href="#" class="wa-flank" style="--flank-size: 1.25em;">
-      <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-m wa-theme-default-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-m); 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">
-    <h2 class="wa-heading-m">Discover More Birds</h2>
-    <wa-card with-image>
-      <div slot="image" 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 with-image>
-      <div slot="image" 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 with-image>
-      <div slot="image" 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'] [data-toggle-nav] {
-    display: none;
-  }
-  wa-page[view='mobile'] {
-    --menu-width: auto;
-    --aside-width: auto;
-  }
-  wa-page[view='mobile'] [slot='aside'],
-  wa-page[view='mobile'] #brand-name,
-  wa-page[view='mobile'] #search {
-    display: none;
-  }
-  [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);
-  }
-  wa-page[view='desktop'] [slot*='navigation'] {
-    border-inline-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);
-  }
-  [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>
-```
-
-### Media
-
-A sample media app page using `header`, `navigation-header`, `main-header`, and `main-footer` along with the default slot. The navigation menu collapses into a drawer at the default `mobile-breakpoint` and can be opened using a button with `[data-toggle-nav]` that appears in the `header` slot.
-
-```html {.example viewport="1600"}
-<wa-page class="wa-theme-default-dark">
-  <header slot="header">
-    <div class="wa-cluster">
-      <wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
-      <wa-icon name="record-vinyl"></wa-icon>
-      <span class="wa-heading-m">radiogaga</span>
-    </div>
-    <wa-input id="search-header" placeholder="Search" style="max-inline-size: 100%;">
-      <wa-icon slot="prefix" 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%;">
-      <wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
-    </wa-input>
-    <div class="wa-split">
-      <h2 class="wa-heading-s">For You</h2>
-      <wa-icon-button id="settings" name="gear" label="Settings"></wa-icon-button>
-    </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-icon-button id="back" name="chevron-left" label="Back"></wa-icon-button>
-    <wa-tooltip for="back" placement="bottom" distance="2">Back</wa-tooltip>
-    <div class="wa-cluster">
-      <wa-icon-button id="favorite" name="heart" variant="regular" label="Favorite"></wa-icon-button>
-      <wa-tooltip for="favorite" placement="bottom" distance="2">Favorite</wa-tooltip>
-      <wa-icon-button id="options" name="ellipsis" label="Options"></wa-icon-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-icon-button name="play" label="Play"></wa-icon-button>
-              <wa-icon-button name="shuffle" label="Shuffle"></wa-icon-button>
-            </div>
-            <wa-icon-button name="plus" label="Add to Library"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-icon-button name="ellipsis" label="Song Options"></wa-icon-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-m">
-        <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-m">
-        <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-m">
-        <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='desktop'] :is([data-toggle-nav], #search-nav-drawer) {
-    display: none;
-  }
-  wa-page[view='mobile'] {
-    --menu-width: auto;
-  }
-  wa-page[view='mobile'] #search-header {
-    display: none;
-  }
-  wa-page[view='mobile'] :is([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;
-  }
-  [slot='navigation'] ul {
-    list-style: none;
-    margin: 0;
-  }
-  [slot='navigation'] ul a {
-    border-radius: var(--wa-border-radius-s);
-    padding: var(--wa-space-xs);
-  }
-  [slot='navigation'] ul a:hover,
-  main ol li:hover {
-    background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
-  }
-  [slot='navigation'] wa-icon {
-    align-items: center;
-    aspect-ratio: 1;
-    color: var(--wa-color-brand-fill-loud);
-    display: flex;
-    height: var(--flank-size);
-    justify-content: center;
-  }
-  [slot='navigation'] #recent wa-icon {
-    border-radius: var(--wa-border-radius-xs);
-  }
-  [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);
-  }
-  main ol li .wa-flank {
-    --flank-size: 2rem;
-  }
-  main ol li:not(:first-child) {
-    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  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-icon-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-icon-button[name="play"]::part(base) {
-    background-color: var(--wa-color-brand-fill-loud);
-    border: none;
-    color: var(--wa-color-brand-on-loud);
-    font-size: 3rem;
-    padding: 0.5em 0.45em 0.5em 0.55em;
-  }
-  [slot='main-footer'].wa-grid > * {
-    max-inline-size: 30ch;
-  }
-</style>
-```
-
-
-## Customization
-
-### Sticky Sections
-
-The following sections of a page are "sticky" by default, meaning they remain in position as the user scrolls.
-
-- `banner`
-- `header`
-- `sub-header`
-- `menu` (`navigation` itself is not sticky, but its parent `menu` is)
-- `aside`
-
-This is often desirable, but you can change this behavior using the `disable-sticky` attribute. Use a space-delimited list of names to tell the page which sections should not be sticky.
-
-```html
-<wa-page disable-sticky="header aside"> ... </wa-page>
-```
-
-### Skip To Content
-
-The layout provides a "skip to content" link that's visually hidden until the user tabs into it. You don't have to do anything to configure this, unless you want to change the text displayed in the link. In that case, you can slot in your own text using the `skip-to-content` slot.
-
-This example localizes the "skip to content" link for German users.
-
-```html
-<wa-page>
-  ...
-  <span slot="skip-to-content">Zum Inhalt springen</span>
-  ...
-</wa-page>
-```
-
-### Responsiveness
-
-A page isn't very opinionated when it comes to responsive behaviors, but there are tools in place to help make responsiveness easy.
-
-#### Default Slot Styles
-
-Each slot is a [flex container](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container) and specifies some flex properties so that your content is reasonably responsive by default.
-
-The following slots specify `justify-content: space-between` and `flex-wrap: wrap` to evenly distribute child elements horizontally and allow them to wrap when space is limited:
-- `header`
-- `subheader`
-- `main-header`
-- `main-footer`
-- `footer`
-
-The following slots specify `flex-direction: column` to arrange child elements vertically:
-- `navigation-header`
-- `navigation` (or `menu`)
-- `navigation-footer`
-- `aside`
-
-And the `banner` slot specifies `justify-content: center` to horizontally center its child elements.
-
-You can override the default display and flex properties for each slot with your own CSS.
-
-#### Responsive Navigation
-
-When you use the `navigation` slot, your slotted content automatically collapses into a drawer on smaller screens.
-The breakpoint at which this occurs is `768px` by default, but you can change it using the `mobile-breakpoint` attribute.
-
-```html
-<wa-page mobile-breakpoint="600"> ... </wa-page>
-```
-
-By default, a "hamburger" button appears in the `header` slot to toggle the navigation menu on smaller screens.
-You can customize what this looks like by slotting your own button in the `toggle-navigation` slot,
-or place the `data-toggle-nav` attribute on any button on your page (This _does not_ have to be a Web Awesome element.).
-The default button not be shown when using either of these methods — if you want to use multiple navigation toggles on your page, simply add the `data-toggle-nav` attribute to multiple elements.
-
-```html
-<wa-page mobile-breakpoint="600">
-  ...
-  <wa-button data-toggle-nav>Menu</wa-button>
-  ...
-</wa-page>
-```
-
-Alternatively, you can apply `nav-state="open"` and `nav-state="closed"` to the layout component to show and hide the navigation, respectively.
-
-```html
-<wa-page nav-state="open"> ... </wa-page>
-```
-
-`<wa-page>` is given the attribute `view="mobile"` or `view="desktop"` when the viewport narrower or wider than the `mobile-breakpoint` value, respectively. You can leverage these attributes to change styles depending on the size of the viewport.
-This is especially useful to hide your `data-toggle-nav` button when the viewport is wider:
-```css
-wa-page[view='desktop'] [data-toggle-nav] {
-  display: none;
-}
-```
-
-#### Custom Widths
-
-You specify widths for some slots on your page with [CSS custom properties](#css-custom-properties) for `--menu-width`, `--main-width`, and `--aside-width`.
-
-If you specify `--menu-width` to apply a specific width to your `navigation` slot, space will still be reserved on the page even below the `mobile-breakpoint`. To collapse this space on smaller screens, add the following code to your styles:
-```css
-wa-page[view='mobile'] {
-  --menu-width: auto;
-}
-```
-
-You can use a similar approach for `--aside-width` to hide the `aside` slot on smaller screens. Be sure to also specify `display: none` for the slot:
-```css
-wa-page[view='mobile'] {
-  --aside-width: auto;
-}
-wa-page[view='mobile'] [slot='aside'] {
-  display: none;
-}
-```
-
-### Spacing
-
-A page specifies default `padding` within each slot and a `gap` between the slot's direct children. You can drop elements into any slot, and reasonable spacing is already applied for you.
-
-You can override the default spacing for each slot with your own CSS. In this example, we're setting custom `gap` and `padding` for the `footer` slot:
-```css
-[slot="footer"] {
-  gap: var(--wa-space-xl);
-  padding: var(--wa-space-xl);
-}
-```
-

docs/docs/components/radio-button.md

@@ -1,149 +0,0 @@
----
-title: Radio Button
-description: Radios buttons allow the user to select a single option from a group using a button-like control.
-layout: component
----
-
-Radio buttons are designed to be used with [radio groups](/docs/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
-
-```html {.example}
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-```
-
-## Examples
-
-### Checked States
-
-To set the initial value and checked state, use the `value` attribute on the containing radio group.
-
-```html {.example}
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a radio button.
-
-```html {.example}
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2" disabled>Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-```
-
-### Sizes
-
-Use the `size` attribute to change a radio button's size.
-
-```html {.example}
-<wa-radio-group size="small" label="Select an option" name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-
-<br />
-
-<wa-radio-group size="medium" label="Select an option" name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-
-<br />
-
-<wa-radio-group size="large" label="Select an option" name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-```
-
-### Pill Buttons
-
-Use the `pill` attribute to give radio buttons rounded edges.
-
-```html {.example}
-<wa-radio-group size="small" label="Select an option" name="a" value="1">
-  <wa-radio-button pill value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-
-<br />
-
-<wa-radio-group size="medium" label="Select an option" name="a" value="1">
-  <wa-radio-button pill value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-
-<br />
-
-<wa-radio-group size="large" label="Select an option" name="a" value="1">
-  <wa-radio-button pill value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-```
-
-### Prefix and Suffix Icons
-
-Use the `prefix` and `suffix` slots to add icons.
-
-```html {.example}
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio-button value="1">
-    <wa-icon slot="prefix" name="archive" variant="solid"></wa-icon>
-    Option 1
-  </wa-radio-button>
-
-  <wa-radio-button value="2">
-    <wa-icon slot="suffix" name="bag-shopping" variant="solid"></wa-icon>
-    Option 2
-  </wa-radio-button>
-
-  <wa-radio-button value="3">
-    <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
-    <wa-icon slot="suffix" name="shopping-cart" variant="solid"></wa-icon>
-    Option 3
-  </wa-radio-button>
-</wa-radio-group>
-```
-
-### Buttons with Icons
-
-You can omit button labels and use icons instead. Make sure to set a `label` attribute on each icon so screen readers will announce each option correctly.
-
-```html {.example}
-<wa-radio-group label="Select an option" name="a" value="neutral">
-  <wa-radio-button value="angry">
-    <wa-icon name="face-angry" variant="solid" label="Angry"></wa-icon>
-  </wa-radio-button>
-
-  <wa-radio-button value="sad">
-    <wa-icon name="face-frown" variant="solid" label="Sad"></wa-icon>
-  </wa-radio-button>
-
-  <wa-radio-button value="neutral">
-    <wa-icon name="face-meh" variant="solid" label="Neutral"></wa-icon>
-  </wa-radio-button>
-
-  <wa-radio-button value="happy">
-    <wa-icon name="face-smile" variant="solid" label="Happy"></wa-icon>
-  </wa-radio-button>
-
-  <wa-radio-button value="laughing">
-    <wa-icon name="face-laugh" variant="solid" label="Laughing"></wa-icon>
-  </wa-radio-button>
-</wa-radio-group>
-```

docs/docs/components/tag.md

@@ -1,63 +0,0 @@
----
-title: Tag
-description: Tags are used as labels to organize things or to indicate a selection.
-layout: component
----
-
-```html {.example}
-<wa-tag variant="brand">Brand</wa-tag>
-<wa-tag variant="success">Success</wa-tag>
-<wa-tag variant="neutral">Neutral</wa-tag>
-<wa-tag variant="warning">Warning</wa-tag>
-<wa-tag variant="danger">Danger</wa-tag>
-```
-
-## Examples
-
-### Sizes
-
-Use the `size` attribute to change a tab's size.
-
-```html {.example}
-<wa-tag size="small">Small</wa-tag>
-<wa-tag size="medium">Medium</wa-tag>
-<wa-tag size="large">Large</wa-tag>
-```
-
-### Pill
-
-Use the `pill` attribute to give tabs rounded edges.
-
-```html {.example}
-<wa-tag size="small" pill>Small</wa-tag>
-<wa-tag size="medium" pill>Medium</wa-tag>
-<wa-tag size="large" pill>Large</wa-tag>
-```
-
-### Removable
-
-Use the `removable` attribute to add a remove button to the tag.
-
-```html {.example}
-<div class="tags-removable">
-  <wa-tag size="small" removable>Small</wa-tag>
-  <wa-tag size="medium" removable>Medium</wa-tag>
-  <wa-tag size="large" removable>Large</wa-tag>
-</div>
-
-<script>
-  const div = document.querySelector('.tags-removable');
-
-  div.addEventListener('wa-remove', event => {
-    const tag = event.target;
-    tag.style.opacity = '0';
-    setTimeout(() => (tag.style.opacity = '1'), 2000);
-  });
-</script>
-
-<style>
-  .tags-removable wa-tag {
-    transition: opacity var(--wa-transition-normal);
-  }
-</style>
-```

docs/docs/components/viewport-demo.md

@@ -1,69 +0,0 @@
----
-title: Viewport Demo
-description: Viewport demos can be used to display an iframe as a resizable, zoomable preview.
-layout: component
----
-
-```html {.example}
-<wa-viewport-demo viewport="1200">
-  <iframe src="."></iframe>
-</wa-viewport-demo>
-```
-
-:::warning
-A lot of the functionality of this component will not work on cross-origin iframes.
-:::
-
-## Examples
-
-### Arbitrary HTML content
-
-You can render arbitrary HTML content in the iframe by using the `srcdoc` attribute:
-
-```html {.example}
-<wa-viewport-demo>
-  <iframe srcdoc="
-    &lt;button&gt;Click me!&lt;/button&gt;
-  "></iframe>
-</wa-viewport-demo>
-```
-
-### Viewport Emulation
-
-You can also provide a width value to emulate and it will be scaled accordingly:
-
-```html {.example}
-<wa-viewport-demo viewport="300">
-  <iframe srcdoc="
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  "></iframe>
-</wa-viewport-demo>
-```
-
-By default, the viewport will be rendered to an initial 16:9 aspect ratio,
-which can be changed via resizing.
-You can customize this via the `--viewport-initial-aspect-ratio` property.
-Or, you could add a height value:
-
-```html {.example}
-<wa-viewport-demo viewport="1600 x 1000">
-  <iframe srcdoc="
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-"></iframe>
-</wa-viewport-demo>
-```
-
-## Roadmap
-
-This component is a work in progress.
-Some of the things that are not yet implemented are listed below.
-It goes without saying that this list is a rough plan and subject to change.
-
-- Non-linear zoom scale
-- Extend to general content, not just iframes
-- Styles for mobile and tablet frames and an attribute to switch between them
-- Automatic iframe height

docs/docs/components/visually-hidden.md

@@ -1,45 +0,0 @@
----
-title: Visually Hidden
-description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
-layout: component
----
-
-According to [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/), "there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."
-
-Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus. This behavior is intentional, as sighted keyboard user won't be able to determine where the focus indicator is without it.
-
-```html {.example}
-<div style="min-height: 1.875rem;">
-  <wa-visually-hidden>
-    <a href="#">Skip to main content</a>
-  </wa-visually-hidden>
-</div>
-```
-
-## Examples
-
-### Links That Open in New Windows
-
-In this example, the link will open a new window. Screen readers will announce "opens in a new window" even though the text content isn't visible to sighted users.
-
-```html {.example}
-<a href="https://example.com/" target="_blank">
-  Visit External Page
-  <wa-icon name="arrow-up-right-from-square" variant="regular"></wa-icon>
-  <wa-visually-hidden>opens in a new window</wa-visually-hidden>
-</a>
-```
-
-### Content Conveyed By Context
-
-Adding a label may seem redundant at times, but they're very helpful for unsighted users. Rather than omit them, you can provide context to unsighted users with visually hidden content that will be announced by assistive devices such as screen readers.
-
-```html {.example}
-<wa-card style="width: 100%; max-width: 360px;">
-  <header>
-    <wa-visually-hidden>Personal Info</wa-visually-hidden>
-  </header>
-  <wa-input label="Name" style="margin-bottom: .5rem;"></wa-input>
-  <wa-input label="Email" type="email"></wa-input>
-</wa-card>
-```

docs/docs/customizing.md

@@ -1,111 +0,0 @@
----
-title: Customizing
-description: Learn how to customize Web Awesome through parts and custom properties.
-layout: page-outline
----
-
-Web Awesome components can be customized at a high level through a theming API. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
-
-## Themes
-
-Web Awesome uses numerous CSS custom properties that make up a high-level theming API and provide a consistent look and feel across the entire library. You can customize them and use them in your own application just with CSS — no preprocessor required.
-
-Because these custom properties live at the page level, they're prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties.
-
-To customize a theme, simply override any of these custom properties in your own stylesheet by scoping your styles to `:root`, `:host`, and, if needed, the class for the specific theme you want to override. Here's an example that changes the default brand color (blue) to violet in the light theme using existing [literal colors](/docs/theming/color/#literal-colors).
-
-```css
-:root,
-:host,
-.wa-theme-default-light {
-  /* Changes the brand color to violet across the library */
-  --wa-color-brand-fill-quiet: var(--wa-color-violet-95);
-  --wa-color-brand-fill-normal: var(--wa-color-violet-90);
-  --wa-color-brand-fill-loud: var(--wa-color-violet-50);
-  --wa-color-brand-border-quiet: var(--wa-color-violet-90);
-  --wa-color-brand-border-normal: var(--wa-color-violet-80);
-  --wa-color-brand-border-loud: var(--wa-color-violet-60);
-  --wa-color-brand-on-quiet: var(--wa-color-violet-40);
-  --wa-color-brand-on-normal: var(--wa-color-violet-30);
-  --wa-color-brand-on-loud: white;
-}
-```
-
-For more examples and further guidance, refer to [Themes](/docs/themes) and the Theming section of this documentation. For a complete list of all custom properties used for theming, refer to `src/themes/default.css` in the project's source code.
-
-## Components
-
-Whereas a theme offers a high-level way to customize the library, components offer different hooks as a low-level way to customize them individually. 
-
-Web Awesome components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate their styles and behaviors. As a result, you can't simply target their internals with the usual CSS selectors. Instead, components expose a set of custom properties and CSS parts that can be targeted to customize their appearance.
-
-### Custom Properties
-
-Components expose custom properties that are scoped to the component, not global, so they do not have the same `--wa-` prefix as a theme's custom properties. These custom properties reflect common qualities of a component, such as `--background-color`, `--border-style`, `--size`, etc.
-
-You can set custom properties on a component in your stylesheet.
-
-```css
-wa-avatar {
-  --size: 6rem;
-}
-```
-
-This will also work if you need to target a subset of components with a specific class.
-
-```css
-wa-avatar.your-class {
-  --size: 6rem;
-}
-```
-
-Alternatively, you can set them inline directly on the element.
-
-```html
-<wa-avatar style="--size: 6rem;"></wa-avatar>
-```
-
-The custom properties exposed by each component can be found in the component's API documentation.
-
-### CSS Parts
-
-CSS parts offer further flexibility to customize individual components. The "parts" exposed by each component can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), or `::part()`.
-
-Parts allow you to style *any* standard CSS property, not just those exposed through custom properties. Here's an example that modifies buttons with the `gradient-button` class.
-
-```html {.example}
-<wa-button class="gradient-button"> Gradient Button </wa-button>
-
-<style>
-  .gradient-button::part(base) {
-    background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-violet-50), var(--wa-color-red-50));
-    border: solid 1px var(--wa-color-violet-50);
-    transition: transform 100ms, box-shadow 100ms;
-  }
-
-  .gradient-button::part(base):hover {
-    box-shadow: var(--wa-shadow-m);
-    transform: translateY(-3px);
-  }
-
-  .gradient-button::part(base):active {
-    box-shadow: inset var(--wa-shadow-s);
-    transform: translateY(0);
-  }
-
-  .gradient-button::part(label) {
-    color: white;
-    text-shadow: rgb(0 0 0 / 0.3) 0 -1px;
-  }
-</style>
-```
-
-CSS parts have a few important advantages:
-
-- Customizations can be made to components with explicit selectors, such as `::part(icon)`, rather than implicit selectors, such as `.button > div > span + .icon`, that are much more fragile.
-
-- The internal structure of a component will likely change as it evolves. By exposing CSS parts through an API, the internals can be reworked without fear of breaking customizations as long as its parts remain intact.
-
-- It encourages us to think more about how components are designed and how customizations should be allowed before users can take advantage of them. Once we opt a part into the component's API, it's guaranteed to be supported and can't be removed until a major version of the library is released.
-
-Most (but not all) components expose parts. You can find them in each component's API documentation under the "CSS Parts" section.

docs/docs/experimental/patterns.md

@@ -1,4 +0,0 @@
----
-title: Patterns
-description: TODO
----

docs/docs/experimental/sandbox.md

@@ -1,256 +0,0 @@
----
-title: Theming Sandbox
-description: TODO
-layout: page
----
-
-## Card
-
-```html {.example}
-<wa-card with-image with-footer class="card-overview">
-  <img
-    slot="image"
-    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-
-  <strong>Mittens</strong><br />
-  This kitten is as cute as he is playful. Bring him home today!<br />
-  <small>6 weeks old</small>
-
-  <div slot="footer">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
-  </div>
-</wa-card>
-
-<style>
-  .card-overview {
-    max-width: 300px;
-  }
-
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-```
-
-## Alerts
-
-```html {.example}
-<wa-callout variant="brand">
-  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
-  <strong>This is super informative</strong><br />
-  You can tell by how pretty the alert is.
-</wa-callout>
-<br />
-<wa-callout variant="success">
-  <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
-  <strong>Your changes have been saved</strong><br />
-  You can safely exit the app now.
-</wa-callout>
-<br />
-<wa-callout variant="neutral">
-  <wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
-  <strong>Your settings have been updated</strong><br />
-  Settings will take affect on next login.
-</wa-callout>
-<br />
-<wa-callout variant="warning">
-  <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
-  <strong>Your session has ended</strong><br />
-  Please login again to continue.
-</wa-callout>
-<br />
-<wa-callout variant="danger">
-  <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
-  <strong>Your account has been deleted</strong><br />
-  We're very sorry to see you go!
-</wa-callout>
-```
-
-## Badges and Tags
-
-```html {.example}
-<wa-badge variant="brand">Brand</wa-badge>
-<wa-badge variant="success">Success</wa-badge>
-<wa-badge variant="neutral">Neutral</wa-badge>
-<wa-badge variant="warning">Warning</wa-badge>
-<wa-badge variant="danger">Danger</wa-badge>
-<br />
-<wa-tag variant="brand">Brand</wa-tag>
-<wa-tag variant="success">Success</wa-tag>
-<wa-tag variant="neutral">Neutral</wa-tag>
-<wa-tag variant="warning">Warning</wa-tag>
-<wa-tag variant="danger">Danger</wa-tag>
-```
-
-## Buttons
-
-```html {.example}
-<wa-button variant="brand">Brand</wa-button>
-<wa-button variant="success">Success</wa-button>
-<wa-button variant="neutral">Neutral</wa-button>
-<wa-button variant="warning">Warning</wa-button>
-<wa-button variant="danger">Danger</wa-button>
-<br /><br />
-<wa-button variant="brand" appearance="outlined">Brand</wa-button>
-<wa-button variant="success" appearance="outlined">Success</wa-button>
-<wa-button variant="neutral" appearance="outlined">Neutral</wa-button>
-<wa-button variant="warning" appearance="outlined">Warning</wa-button>
-<wa-button variant="danger" appearance="outlined">Danger</wa-button>
-<br /><br />
-<wa-button appearance="text">Text</wa-button>
-<br /><br />
-<wa-radio-group label="Radio button group" name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-```
-
-## Form controls
-
-```html {.example}
-<wa-checkbox>Unchecked</wa-checkbox>
-<br />
-<wa-checkbox checked>Checked</wa-checkbox>
-<br /><br />
-<wa-radio-group label="Radio" name="a" value="1">
-  <wa-radio value="1">Option 1</wa-radio>
-  <wa-radio value="2">Option 2</wa-radio>
-  <wa-radio value="3">Option 3</wa-radio>
-</wa-radio-group>
-<br />
-<wa-switch>Switch off</wa-switch>
-<br />
-<wa-switch checked>Switch on</wa-switch>
-<br /><br />
-<wa-range label="Range" help-text="Here's a bit of handy content." min="0" max="100"></wa-range>
-<br /><br />
-<wa-input label="Label" help-text="Super helpful and/or contextual content" placeholder="Placeholder"></wa-input>
-<br />
-<wa-select label="Select" multiple value="option-1 option-2">
-  <wa-option value="option-1">Option 1</wa-option>
-  <wa-option value="option-2">Option 2</wa-option>
-  <wa-option value="option-3">Option 3</wa-option>
-  <wa-option value="option-4">Option 4</wa-option>
-  <wa-option value="option-5">Option 5</wa-option>
-  <wa-option value="option-6">Option 6</wa-option>
-</wa-select>
-```
-
-## Progress
-
-```html {.example}
-<wa-progress-ring value="25" style="--indicator-width: 4px;"></wa-progress-ring>
-<wa-progress-bar value="60"></wa-progress-bar>
-<wa-spinner></wa-spinner>
-```
-
-## Shadows
-
-```html {.example}
-<style>
-  div.shadow {
-    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
-    border-radius: var(--wa-border-radius-s);
-    display: inline-block;
-    height: 4rem;
-    margin-right: 2rem;
-    width: 4rem;
-  }
-  </style>
-<div class="shadow" style="box-shadow: var(--wa-shadow-xs);"></div>
-<div class="shadow" style="box-shadow: var(--wa-shadow-s);"></div>
-<div class="shadow" style="box-shadow: var(--wa-shadow-m);"></div>
-<div class="shadow" style="box-shadow: var(--wa-shadow-l);"></div>
-```
-
-## Tests
-
-```html {.example}
-<style>
-  div.test-cases > * + * {
-    margin-top: 1rem;
-  }
-  div.alignment {
-    background: linear-gradient(to bottom, lightblue, lightblue 1px, transparent 1px, transparent), linear-gradient(to top, lightblue, lightblue 1px, transparent 1px, transparent);
-    position: relative;
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-  }
-  div.alignment::after {
-    content: '';
-    position: absolute;
-    top: calc(50% - 0.5px);
-    width: 100%;
-    height: 1px;
-    background-color: red;
-  }
-</style>
-<div class="test-cases">
-  <div class="alignment">
-    <wa-switch size="small">OCBS</wa-switch>
-    <wa-checkbox size="small">OCBS</wa-checkbox>
-    <wa-radio value="1" size="small">OCBS</wa-radio>
-  </div>
-  <div class="alignment">
-    <wa-switch>OCBS</wa-switch>
-    <wa-checkbox>OCBS</wa-checkbox>
-    <wa-radio value="1">OCBS</wa-radio>
-  </div>
-  <div class="alignment">
-    <wa-switch size="large">OCBS</wa-switch>
-    <wa-checkbox size="large">OCBS</wa-checkbox>
-    <wa-radio value="1" size="large">OCBS</wa-radio>
-  </div>
-  <div class="alignment">
-    <wa-input size="small"></wa-input>
-    <wa-select size="small" value="ocbs" multiple>
-      <wa-option value="ocbs">OCBS</wa-option>
-    </wa-select>
-    <wa-color-picker size="small"></wa-color-picker>
-    <wa-button size="small">OCBS</wa-button>
-  </div>
-  <div class="alignment">
-    <wa-input size="medium"></wa-input>
-    <wa-select size="medium" value="ocbs" multiple>
-      <wa-option value="ocbs">OCBS</wa-option>
-    </wa-select>
-    <wa-color-picker size="medium"></wa-color-picker>
-    <wa-button size="medium">OCBS</wa-button>
-  </div>
-  <div class="alignment">
-    <wa-input size="large"></wa-input>
-    <wa-select size="large" value="ocbs" multiple>
-      <wa-option value="ocbs">OCBS</wa-option>
-    </wa-select>
-    <wa-color-picker size="large"></wa-color-picker>
-    <wa-button size="large">OCBS</wa-button>
-  </div>
-  <div class="alignment">
-    <wa-badge>OCBS</wa-badge>
-    <wa-avatar></wa-avatar>
-    <wa-rating></wa-rating>
-    <wa-range></wa-range>
-    <wa-icon-button name="gear" label="Settings"></wa-icon-button>
-    <wa-progress-bar value="50" style="width: 8rem;"></wa-progress-bar>
-    <wa-spinner></wa-spinner>
-  </div>
-  <div class="alignment">
-    <wa-input label="AaBbCc" help-text="Lorem ipsum dolor"></wa-input>
-    <wa-select label="AaBbCc" value="ocbs" multiple help-text="Lorem ipsum dolor">
-      <wa-option value="ocbs">OCBS</wa-option>
-    </wa-select>
-    <wa-color-picker label="AaBbCc" help-text="Lorem ipsum dolor"></wa-color-picker>
-  </div>
-</div>
-```

docs/docs/experimental/style-guide.md

@@ -1,164 +0,0 @@
----
-title: Style Guide
-description: TODO
-layout: page
----
-
-The styles shown below can be all yours by adding Web Awesome's applied stylesheet to your project.
-
----
-
-## Typography
-
-Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Amet mauris commodo quis imperdiet. Bibendum ut tristique et egestas quis ipsum suspendisse. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat.
-
-Cras pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci. Scelerisque eleifend donec pretium vulputate sapien nec. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque.
-
-> What is a Web year now, about three months? And when people can browse around, discover new things, and download them fast, when we all have agents - then Web years could slip by before human beings can notice.
->
-> — Tim Berners-Lee
-
-## Inline Text
-
-```html
-Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id.
-```
-
-<div class="two-columns">
-  <p><strong>Bold</strong></p>
-  <p><em>Italics</em></p>
-  <p><u>Underline</u></p>
-  <p><del>Deleted</del></p>
-  <p><ins>Inserted</ins></p>
-  <p><s>Strike-through</s></p>
-  <p><small>Small</small></p>
-  <p><span>Text <sub>Sub</sub></span></p>
-  <p><span>Text <sup>Sup</sup></span></p>
-  <p><abbr title="Abbreviation">Abbr.</abbr></p>
-  <p><kbd>Keyboard</kbd></p>
-  <p><mark>Highlighted</mark></p>
-  <p><a href="#">Link text</a></p>
-  <p><code>Inline code</code></p>
-</div>
-
-## Lists
-
-- List item 1
-- List item 2
-- List item 3
-  - Subitem a
-  - Subitem b
-
-1. List item 1
-2. List item 2
-3. List item 3
-   - Subitem a
-   - Subitem b
-
-## Headings
-
-### Heading 3
-
-Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id.
-
-#### Heading 4
-
-Gravida arcu ac tortor dignissim convallis aenean. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Donec adipiscing tristique risus nec feugiat in.
-
-##### Heading 5
-
-Enim diam vulputate ut pharetra sit. Enim facilisis gravida neque convallis a cras. Enim neque volutpat ac tincidunt vitae semper. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.
-
-###### Heading 6
-
-Tincidunt ornare massa eget egestas purus viverra accumsan in nisl. Facilisis mauris sit amet massa vitae. Nunc faucibus a pellentesque sit amet porttitor. Adipiscing tristique risus nec feugiat in fermentum.
-
-## Details
-
-Individual details look like this.
-
-<details>
-  <summary>Tincidunt nunc pulvinar</summary>
-  <p>Ut lectus arcu bibendum at varius. Convallis a cras semper auctor neque vitae. Odio pellentesque diam volutpat commodo sed egestas. Amet dictum sit amet justo donec enim diam vulputate ut.</p>
-</details>
-
-Grouping them provides accordion-style functionality.
-
-<details name="details-accordion">
-  <summary>Enim diam</summary>
-  <p>Nunc faucibus a pellentesque sit amet porttitor. Adipiscing tristique risus nec feugiat in fermentum. Leo duis ut diam quam nulla porttitor massa id. Mauris nunc congue nisi vitae.</p>
-</details>
-
-<details name="details-accordion">
-  <summary>Arcu non odio</summary>
-  <p>Sed libero enim sed faucibus turpis in eu mi bibendum. Nunc mi ipsum faucibus vitae aliquet nec. Ultricies tristique nulla aliquet enim tortor. Tellus at urna condimentum mattis pellentesque.</p>
-</details>
-
-<details name="details-accordion">
-  <summary>Ut porttitor</summary>
-  <p>Eu facilisis sed odio morbi quis commodo odio aenean sed. Sit amet purus gravida quis blandit turpis cursus. Eu consequat ac felis donec et odio pellentesque diam volutpat.</p>
-</details>
-
-## Code Blocks
-
-```
-// do a thing
-export function thing() {
-  return true;
-}
-```
-
-## Images
-
-![A gray kitten lays next to a toy](https://images.unsplash.com/photo-1620196244888-d31ff5bbf163?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
-
-## Tables
-
-<table>
-  <caption>I'm just a table</caption>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-  </tbody>
-</table>
-
-## Definition Lists
-
-<dl>
-  <dt>Definition 1</dt>
-  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
-  <dt>Definition 2</dt>
-  <dd>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
-  <dt>Definition 3</dt>
-  <dd>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</dd>
-</dl>

docs/docs/layout/index.md

@@ -1,83 +0,0 @@
----
-title: Layout
-description: Browse Web Awesome's components and utilities for creating responsive web layouts.
-layout: page-outline
----
-
-<style>
-  wa-page > main {
-    max-width: 120ch;
-    margin-inline: auto;
-  }
-  .index-grid wa-card::part(header) {
-    background-color: var(--wa-color-neutral-fill-quiet);
-    border-bottom: none;
-  }
-  wa-card .component-name {
-    font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-action);
-  }
-</style>
-
-<p style="max-width: 80ch">Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro.</p>
-
-<div class="index-grid wa-grid wa-gap-2xl">
-  <h2 class="index-category wa-span-grid">Components</h2>
-  <a href="/docs/components/page">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/thumbnail-placeholder.njk" %}
-      </div>
-      <span class="component-name">Page</span>
-    </wa-card>
-  </a>
-  <h2 class="index-category wa-span-grid">Utilities</h2>
-  <a href="/docs/layout/cluster">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/layout/cluster.njk" %}
-      </div>
-      <span class="component-name">Cluster</span>
-    </wa-card>
-  </a>
-  <a href="/docs/layout/flank">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/layout/flank.njk" %}
-      </div>
-      <span class="component-name">Flank</span>
-    </wa-card>
-  </a>
-  <a href="/docs/layout/frame">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/layout/frame.njk" %}
-      </div>
-      <span class="component-name">Frame</span>
-    </wa-card>
-  </a>
-  <a href="/docs/layout/grid">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/layout/grid.njk" %}
-      </div>
-      <span class="component-name">Grid</span>
-    </wa-card>
-  </a>
-  <a href="/docs/layout/split">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/layout/split.njk" %}
-      </div>
-      <span class="component-name">Split</span>
-    </wa-card>
-  </a>
-  <a href="/docs/layout/stack">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/layout/stack.njk" %}
-      </div>
-      <span class="component-name">Stack</span>
-    </wa-card>
-  </a>
-</div>

docs/docs/patterns/blog.md

@@ -1,370 +0,0 @@
----
-title: Blog
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## Examples
-
-### Hero
-```html{.example}
-<wa-carousel pagination>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #fe53a0;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-5.jpg"
-    />
-      </div>
-      <h2><span>Do you see any Teletubbies in here?</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #5a90f3;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-1.jpg"
-    />
-      </div>
-      <h2><span>The path of the righteous man is beset on all sides</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #8c431e;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-2.jpg"
-    />
-      </div>
-      <h2><span>Article Title</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #37b3e6;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-3.jpg"
-    />
-      </div>
-      <h2><span>Article Title</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #f993d6;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-4.jpg"
-    />
-      </div>
-      <h2><span>Article Title</span></h2>
-    </a>
-  </wa-carousel-item>
-
-</wa-carousel>
-<style>
-  .hero-link {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    h2 {
-      position: absolute;
-      color: white;
-      top: 25%;
-      left: 15%;
-      width: 200px;
-      padding: .5rem;
-      line-height: 1.15;
-
-      span {
-        background-color: black;
-      }
-    }
-
-    div:first-of-type {
-      width: 30%;
-    }
-    div:last-of-type {
-      width: 70%;
-    }
-  }
-</style>
-```
-
-### Newsletter signup
-```html{.example}
-<wa-card class="news-letter-signup">
-  <h2>Subscribe to our Newsletter</h2>
-  <p>To get the latest and most quality design resources</p>
-  <div class="subscribe-input"> <wa-input></wa-input><wa-button>Subscribe</wa-button></div>
-</wa-card>
-<style>
-  .news-letter-signup {
-        display: block;
-    width: fit-content;
-    margin: 0 auto;
-  }
-  .subscribe-input {
-    display: flex;
-    width: 100%;
-
-    wa-input {
-      width: inherit;
-    }
-
-    wa-button {
-      margin-left: 0.5rem;
-    }
-  }
-</style>
-```
-
-### Posts List
-```html{.example}
-<wa-card with-header>
-  <div slot="header">
-    Recent Articles
-  </div>
-  <div class="body">
-    <div class="post-list">
-      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-1.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;"> <wa-icon fixed-width name="mug-hot"></wa-icon> Lifestyle</span>
-          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Jules</span>
-        </div>
-      </div>
-      <div class="post-list-item" style="display: flex; align-items: center; flex-direction: row-reverse;justify-content: flex-end">
-        <img class="last" src="/assets/images/patterns/flower-crop-2.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column; margin-right: 1rem;">
-          <span style="font-size: small;"><wa-icon fixed-width name="user-nurse"> </wa-icon>Health</span>
-          <span style="font-size: larger;font-weight: 600;">That's clear. Your cells react to bacteria</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Mr. Glass</span>
-        </div>
-      </div>
-      <div  class="post-list-item" style="display: flex; align-items: center; flex-direction: row-reverse;justify-content: flex-end">
-        <img style="display:none;" src="#"/>
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;"><wa-icon fixed-width name="football"></wa-icon> Sports</span>
-          <span style="font-size: larger;font-weight: 600;">Do you see any Teletubbies in here?</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Nick Fury</span>
-        </div>
-      </div>
-      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-3.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;">Lifestyle</span>
-          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Jules</span>
-        </div>
-      </div>
-      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-1.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;">Lifestyle</span>
-          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Jules</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</wa-card>
-<style>
-  .post-list {
-    .post-list-item {
-      border-bottom: 1px solid var(--wa-color-surface-border);
-      margin-bottom: 1rem;
-      padding-bottom: 1rem;
-
-      img {
-        margin-right: 1rem;
-        object-fit: cover;
-        min-width: 50px;
-        min-height: 50px;
-        width: 100px;
-        height: 100px;
-        border-radius: var(--wa-border-radius-circle);
-      }
-      img.last {
-        margin-right: 0;
-      }
-
-      .post-list-item-info span:first-of-type {
-        display: flex;
-        align-items: center;
-      }
-
-      .post-list-item-info span wa-icon {
-        margin-right: 0.25rem;
-      }
-    }
-    .post-list-item:last-of-type {
-      border-bottom: none;
-      margin-bottom: 0;
-      padding-bottom: 0;
-    }
-  }
-</style>
-```
-
-### Related Posts
-```html{.example}
-<wa-card with-image with-footer class="card-overview">
-  <img
-    slot="image"
-    src="https://plus.unsplash.com/premium_photo-1661382011487-cd3d6b1d9dff?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDc0ODd8&ixlib=rb-4.0.3&q=80&w=1080"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-
-  <strong>Color Advancements</strong><br />
-  Lot of new and exciting features in web colors<br />
-  <small>2d ago</small>
-
-  <div slot="footer">
-    <wa-button variant="brand" pill>Read More</wa-button>
-
-  </div>
-</wa-card>
-
-
-
-<style>
-  .card-overview {
-    max-width: 300px;
-  }
-
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-
-```
-### Article footer
-```html{.example}
-<div class="article-footer">
-  <div class="article-tags">
-    <a href="#"><wa-tag size="medium" pill>UX</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Product Design</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Design</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Prototyping</wa-tag></a>
-  </div>
-  <div class="article-actions">
-    <wa-icon-button name="hands-clapping"></wa-icon-button>
-  </div>
-</div>
-```
-
-## Social Share
-
-### Vertical
-```html{.example}
-<wa-card class="social-share-vertical" style="--border-radius: 4rem;">
-  <wa-icon-button name="facebook" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-   <wa-icon-button name="x-twitter" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-    <wa-icon-button name="threads" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-    <wa-icon-button name="mastodon" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-    <wa-icon-button name="paper-plane" family="solid" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-</wa-card>
-<style>
-  .social-share-vertical {
-    display: block;
-    margin: 0 auto;
-    width: fit-content;
-
-    wa-icon-button {
-      font-size: 2.5rem;
-      display: block;
-      margin-bottom: .5rem;
-    }
-     wa-icon-button:last-of-type {
-      margin-bottom: initial;
-    }
-  }
-</style>
-```
-
-### Horizontal
-```html{.example}
-<wa-card with-header with-footer class="social-share-horizontal">
-  <div slot="header">
-    Share this Article
-  </div>
-  <wa-icon-button name="facebook" family="brands" variant="solid" label="Edit" style="--background: #1877f225; --color: #1877f2"></wa-icon-button>
-   <wa-icon-button name="x-twitter" family="brands" variant="solid" label="Edit" style="--background: #00000025; --color: #000000"></wa-icon-button>
-    <wa-icon-button name="threads" family="brands" variant="solid" label="Edit" style="--background: #c32aa325; --color: #c32aa3"></wa-icon-button>
-        <wa-icon-button name="mastodon" family="brands" variant="solid" label="Edit" style="--background: #6364ff25; --color: #6364ff"></wa-icon-button>
-
-    <wa-icon-button name="instagram" family="brands" variant="solid" label="Edit" style="--background: #c32aa325; --color: #c32aa3"></wa-icon-button>
-
-    <wa-icon-button name="pinterest" family="brands" variant="solid" label="Edit" style="--background: #bd081c25; --color: #bd081c"></wa-icon-button>
-    <wa-icon-button name="linkedin" family="brands" variant="solid" label="Edit" style="--background: #0a66c225; --color: #0a66c2"></wa-icon-button>
-    <div slot="footer">
-      <div class="share-input">
-         <wa-input value="https://fontawesome.com"></wa-input>
-    <wa-button variant="brand"> <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>Copy</wa-button>
-      </div>
-
-  </div>
-</wa-card>
-<style>
-  .social-share-horizontal {
-    margin: 0 auto;
-    display: block;
-    width: fit-content;
-
-    wa-icon-button {
-      --background: transparent;
-      --color: initial;
-      font-size: 1.5rem;
-      border-radius: .25rem;
-      background: var(--background);
-    }
-    wa-icon-button::part(base) {
-
-      color: var(--color);
-    }
-
-    .share-input {
-    display: flex;
-
-    wa-input {
-          --border-radius: var(--wa-form-control-border-radius) 0 0 var(--wa-form-control-border-radius);
-    }
-    wa-button {
-      --border-radius:  0 var(--wa-form-control-border-radius)  var(--wa-form-control-border-radius) 0;
-    }
-  }
-  }
-
-</style>
-```

docs/docs/patterns/business.md

@@ -1,9 +0,0 @@
----
-title: Business
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/ecommerce-category-filter.md

@@ -1,12 +0,0 @@
----
-title: E-commerce - Category Filter
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## With inline actions and expandable sidebar filters
-```html{.example}
-
-```

docs/docs/patterns/ecommerce-category-preview.md

@@ -1,11 +0,0 @@
----
-title: E-commerce - Category Preview
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## Three Column (WIP)
-
-```

docs/docs/patterns/ecommerce-order-history.md

@@ -1,13 +0,0 @@
----
-title: E-commerce - Order History
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## Invoice panels
-
-```html{.example}
-
-```

docs/docs/patterns/ecommerce-order-summary.md

@@ -1,12 +0,0 @@
----
-title: E-commerce - Product List
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## With split image
-```html{.example}
-
-```

docs/docs/patterns/ecommerce-product-detail.md

@@ -1,128 +0,0 @@
----
-title: E-commerce - Product Detail
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## With color and size selector
-```html{.example}
-  <div class="with-inline-price">
-   <wa-card with-header>
-    <div class="card-header" slot="header">
-      <span class="card-title">Graphic Tank</span>
-      <wa-icon-button name="close" label="close-modal"></wa-icon-button>
-    </div>
-    <div class="card-body">
-      <img style="border-radius: var(--border-radius)" src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
-      <form class="detail">
-        <span class="price">$32</span>
-        <span class="rating"><wa-rating></wa-rating><a style="margin-left: .5rem; " href="*">36 Reviews</a></span>
-        <wa-radio-group style="margin-bottom: 1rem;" label="Select an option" name="a" value="1">
-  <wa-radio-button value="Black">Black</wa-radio-button>
-  <wa-radio-button value="White">White</wa-radio-button>
-  <wa-radio-button value="Gray">Gray</wa-radio-button>
-</wa-radio-group>
-<wa-select label="Sizes" placeholder="select size">
-  <wa-option value="option-1">Option 1</wa-option>
-  <wa-option value="option-2">Option 2</wa-option>
-  <wa-option value="option-3">Option 3</wa-option>
-</wa-select>
-<wa-button size="medium" style="width: 100%; margin-top: auto;">Medium</wa-button>
-      </form>
-    </div>
-   </wa-card>
-  </div>
-  <style>
-    .with-inline-price {
-      wa-card {
-        width: 100%;
-        .card-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .card-title {
-            font-size: large;
-            font-weight: 600;
-          }
-        }
-        .card-body {
-          display: grid;
-          grid-template-columns: 35% 1fr;
-          gap: 1rem;
-
-          .detail {
-            display: flex;
-            flex-direction: column;
-
-            .price {
-              font-size: xx-large;
-              font-weight: 600;
-            }
-            .rating {
-              margin-bottom: 1rem;
-            }
-          }
-        }
-      }
-    }
-  </style>
-```
-
-## with large selector
-```html{.example}
-  <wa-card class="large-selector">
-    <div class="card-body">
-      <div style="grid-column: 1/6">
-      <img style="border-radius: var(--border-radius); height: 100%; object-fit: cover;" src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
-      </div>
-      <div style="grid-column: 6/-1" class="info">
-        <h2>Basic Tank</h2>
-        <wa-icon-button name="close" label="close-modal"></wa-icon-button>
-        <section>
-          <p style="font-size: x-large;font-weight: 600;">$32</p>
-          <div style="display: flex; align-items: flex-start">
-            <p>3.9</p>
-            <wa-rating></wa-rating>
-            <a href="*" style="margin-left: auto;">See all 512 Reviews</a>
-          </div>
-        </section>
-        <section>
-          <form>
-            <wa-radio-group label="Color" help-text="Choose the most appropriate option." name="a" value="black" style="margin-bottom: 1rem;">
-              <wa-radio value="black">Black</wa-radio>
-              <wa-radio value="gray">Gray</wa-radio>
-            </wa-radio-group>
-            <wa-radio-group label="Size" help-text="Select an option that makes you proud." name="a" value="medium"  style="margin-bottom: 1rem;">
-              <wa-radio-button value="small">S</wa-radio-button>
-              <wa-radio-button value="medium">M</wa-radio-button>
-              <wa-radio-button value="large">L</wa-radio-button>
-              <wa-radio-button value="extra-large">XL</wa-radio-button>
-            </wa-radio-group>
-            <wa-button size="medium" style="width: 100%; margin-top: auto;margin-bottom: 1rem;">Medium</wa-button>
-            <a href="*" style="display: inline-block;width: 100%;text-align: center;">View full details</a>
-          </form>
-        </section>
-      </div>
-    </div>
-  </wa-card>
-<style>
-  .large-selector .card-body {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    gap: 1rem;
-
-    .info {
-      position: relative;
-
-      wa-icon-button {
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
-    }
-  }
-</style>
-```

docs/docs/patterns/ecommerce-product-list.md

@@ -1,165 +0,0 @@
----
-title: E-commerce - Product Lists
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-## With Product Grid
-
-```html{.example}
-  <div class="with-product-grid">
-    <div class="grid-item">
-      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-      <div class="grid-item-name">Shirt</div>
-      <wa-rating label="Rating" readonly value="3"></wa-rating>
-      <a class="grid-item-reviews" href="#">38 Reviews</a>
-      <div class="grid-item-price">$170</div>
-    </div>
-    <div class="grid-item">
-      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-      <div class="grid-item-name">Shirt</div>
-      <wa-rating label="Rating" readonly value="3"></wa-rating>
-      <a class="grid-item-reviews" href="#">38 Reviews</a>
-      <div class="grid-item-price">$170</div>
-    </div>
-    <div class="grid-item">
-      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-      <div class="grid-item-name">Shirt</div>
-      <wa-rating label="Rating" readonly value="3"></wa-rating>
-      <a class="grid-item-reviews" href="#">38 Reviews</a>
-      <div class="grid-item-price">$170</div>
-    </div>
-    <div class="grid-item">
-      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-      <div class="grid-item-name">Shirt</div>
-      <wa-rating label="Rating" readonly value="3"></wa-rating>
-      <a class="grid-item-reviews" href="#">38 Reviews</a>
-      <div class="grid-item-price">$170</div>
-    </div>
-  </div>
-  <style>
-    .with-product-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      border: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
-
-      .grid-item {
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-      }
-      .grid-item:nth-of-type(odd) {
-
-        border-right: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
-      }
-      .grid-item:not(:nth-last-child(-n + 2)) {
-        border-bottom: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
-      }
-
-      .grid-item-image {
-        width: 100%;
-        object-fit: cover;
-      }
-
-      .grid-item-name {
-        margin-top: 1rem;
-        font-weight: var(--wa-font-weight-bold);
-      }
-
-      .grid-item wa-rating {
-        --symbol-size: var(--wa-font-size-m);
-        margin-top: .5rem;
-      }
-      .grid-item-reviews {
-        --wa-link-decoration-default: none;
-        --wa-color-text-link: var(--wa-color-gray-50);
-        font-size: var(--wa-font-size-m);
-      }
-      .grid-item-price {
-        font-size: var(--wa-font-size-2xl);
-        font-weight: var(--wa-font-weight-bold);
-      }
-    }
-  </style>
-```
-## Card with full details
-```html{.example}
-  <div class="card-with-details">
-   <wa-card with-footer>
-    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-    <div slot="footer" class="card-footer details">
-      <span class="detail-name">Basic Tee 8-pack</span>
-      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
-      <span class="detail-color">8 colors</span>
-      <span class="detail-price">$256</span>
-    </div>
-   </wa-card>
-   <wa-card with-footer>
-    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-    <div slot="footer" class="card-footer details">
-      <span class="detail-name">Basic Tee 8-pack</span>
-      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
-      <span class="detail-color">8 colors</span>
-      <span class="detail-price">$256</span>
-    </div>
-   </wa-card>
-   <wa-card with-footer>
-    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-    <div slot="footer" class="card-footer details">
-      <span class="detail-name">Basic Tee 8-pack</span>
-      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
-      <span class="detail-color">8 colors</span>
-      <span class="detail-price">$256</span>
-    </div>
-   </wa-card>
-   <wa-card with-footer>
-    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-    <div slot="footer" class="card-footer details">
-      <span class="detail-name">Basic Tee 8-pack</span>
-      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
-      <span class="detail-color">8 colors</span>
-      <span class="detail-price">$256</span>
-    </div>
-   </wa-card>
-  </div>
-  <style>
-    .card-with-details {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1rem;
-    }
-    .card-with-details wa-card::part(body) {
-        padding: 0;
-      }
-    .card-with-details .card-footer {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .details {
-      .detail-description {
-        color: var(--wa-color-gray-50);
-      }
-      .detail-name {
-        font-size: var(--wa-font-size-l);
-        font-weight: var(--wa-font-weight-action);
-      }
-      .detail-color {
-        color: var(--wa-color-gray-50);
-        font-style: italic;
-      }
-      .detail-price {
-        font-size: var(--wa-font-size-xl);
-        font-weight: var(--wa-font-weight-action);
-      }
-    }
-
-  </style>
-```
-## With color swatches (WIP)
-```html{.example}
-
-```

docs/docs/patterns/ecommerce-product-review.md

@@ -1,464 +0,0 @@
----
-title: E-commerce - Product Reviews
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## With images grid
-```html{.example}
-<div class="with-image-grid">
-  <wa-breadcrumb>
-    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
-    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
-    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
-  </wa-breadcrumb>
-  <div class="image-grid">
-    <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
-    <img src="/assets/images/patterns/gervyn-louis-KXvd7y7AU6Q-unsplash.jpg" />
-    <img src="/assets/images/patterns/gervyn-louis-semwwyXFQho-unsplash.jpg" />
-    <img src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-  </div>
-  <div>
-    <h2>Tank top</h2>
-    <p>The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Feeling adventurous? Put on a heather gray tee. Want to be a trendsetter? Try our exclusive colorway: "Black". Need to add an extra pop of color to your outfit? Our white tee has you covered.</p>
-    <h3>Highlights</h3>
-    <ul>
-      <li>Hand cut and sewn locally</li>
-    </ul>
-
-    <h3>Highlights</h3>
-    <p>The 6-Pack includes two black, two white, and two heather gray Basic Tees. Sign up for our subscription service and be the first to get new, exciting colors, like our upcoming "Charcoal Gray" limited release.</p>
-
-    <span>$192</span>
-    <div>
-      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
-      <a href="#">117 Reviews</a>
-    </div>
-    <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-  <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-  <wa-button>Add to Cart</wa-button>
-  </div>
-</div>
-<style>
-  .with-image-grid {
-    wa-breadcrumb::part(base) {
-      margin-bottom: 1rem;
-    }
-
-    .image-grid {
-      display: grid;
-      grid-template-columns: repeat(12, 1fr);
-      gap: 1rem;
-    }
-
-    .image-grid img:nth-of-type(1) {
-      grid-column: 1/-1;
-    }
-
-    .image-grid img:nth-of-type(2) {
-      grid-column: 1/7;
-    }
-    .image-grid img:nth-of-type(3) {
-      grid-column: 7/-1;
-    }
-     .image-grid img:nth-of-type(4) {
-      grid-column: 1/-1;
-    }
-  }
-</style>
-```
-
-## With Tiered Images
-
-```html{.example}
-<div class="with-tiered-images">
-  <wa-breadcrumb>
-    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
-    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
-    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
-  </wa-breadcrumb>
-  <div>
-    <div class="heading">
-      <h2>Basic Tee</h2>
-      <span style="font-size: var(--wa-font-size-2xl)">$35</span>
-    </div>
-    <div class="rating">
-      <span>3.9</span>
-       <wa-rating label="Rating" precision="0.5" value="3.9"></wa-rating>
-      <a href="#">117 Reviews</a>
-    </div>
-    <div class="tiered-images">
-      <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
-      <img src="/assets/images/patterns/gervyn-louis-KXvd7y7AU6Q-unsplash.jpg" />
-      <img src="/assets/images/patterns/gervyn-louis-semwwyXFQho-unsplash.jpg" />
-    </div>
-  </div>
-  <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-  <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
- <wa-button>Add to Cart</wa-button>
- <h3>Description</h3>
- <p>The Basic tee is an honest new take on a classic. The tee uses super soft, pre-shrunk cotton for true comfort and a dependable fit. They are hand cut and sewn locally, with a special dye technique that gives each tee it's own look.</p>
- <p>Looking to stock your closet? The Basic tee also comes in a 3-pack or 5-pack at a bundle discount.</p>
- <hr />
- <h3>Highlights</h3>
-    <ul>
-      <li>Hand cut and sewn locally</li>
-    </ul>
-  <div>
-    <wa-card>
-      <wa-icon family="solid" name="earth-americas"></wa-icon>
-      <h3>International delivery</h3>
-      <p>Get your order in 2 years</p>
-    </wa-card>
-    <wa-card>
-      <wa-icon family="solid" name="earth-americas"></wa-icon>
-      <h3>International delivery</h3>
-      <p>Get your order in 2 years</p>
-
-    </wa-card>
-  </div>
-</div>
-<style>
-  .with-tiered-images {
-    wa-breadcrumb::part(base) {
-      margin-bottom: 1rem;
-    }
-    .heading {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .rating {
-      display: flex;
-
-      span {
-        display: inline-block;
-        margin-right: 1rem;
-      }
-
-      wa-rating {
-        margin-right: 1rem;
-      }
-    }
-
-    .tiered-images {
-      display: grid;
-      grid-template-columns: repeat(12, 1fr);
-      gap: 1rem;
-    }
-
-    .tiered-images img:nth-of-type(1) {
-      grid-column: 1/-1;
-    }
-
-    .tiered-images img:nth-of-type(2) {
-      grid-column: 1/7;
-    }
-    .tiered-images img:nth-of-type(3) {
-      grid-column: 7/-1;
-  }
-</style>
-```
-## with images and expandable details
-
-```html {.example}
-<wa-carousel class="carousel-thumbnails" navigation loop>
-  <wa-carousel-item>
-    <img
-      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
-      src="/assets/examples/carousel/pullover-1.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/pullover-2.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
-      src="/assets/examples/carousel/pullover-3.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
-      src="/assets/examples/carousel/pullover-4.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
-      src="/assets/examples/carousel/pullover-5.jpg"
-    />
-  </wa-carousel-item>
-</wa-carousel>
-
-<div class="thumbnails">
-  <div class="thumbnails__scroller">
-    <img alt="Thumbnail by 1" class="thumbnails__image active" src="/assets/examples/carousel/pullover-1.jpg" />
-    <img alt="Thumbnail by 2" class="thumbnails__image" src="/assets/examples/carousel/pullover-2.jpg" />
-    <img alt="Thumbnail by 3" class="thumbnails__image" src="/assets/examples/carousel/pullover-3.jpg" />
-    <img alt="Thumbnail by 4" class="thumbnails__image" src="/assets/examples/carousel/pullover-4.jpg" />
-    <img alt="Thumbnail by 5" class="thumbnails__image" src="/assets/examples/carousel/pullover-5.jpg" />
-  </div>
-</div>
-<div>
-  <h3 style="--wa-space-xl: 0;">Pullover Sweater</h3>
-  <span class="price-big">$140</span>
-  <wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
-  <p>The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.</p>
-  <wa-radio-group label="Select Color" help-text="Select an option that makes you proud." name="a" value="1">
-  <wa-radio-button value="1"></wa-radio-button>
-  <wa-radio-button value="2"></wa-radio-button>
-  <wa-radio-button value="3"></wa-radio-button>
-</wa-radio-group>
-<div>
-  <wa-button>Add to cart</wa-button>
-  <wa-icon-button name="gear" label="Settings"></wa-icon-button>
-</div>
-<div class="details-group-example">
-  <wa-details summary="First" open>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </wa-details>
-
-  <wa-details summary="Second">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </wa-details>
-
-  <wa-details summary="Third">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </wa-details>
-</div>
-</div>
-
-<style>
-  .carousel-thumbnails {
-    --slide-aspect-ratio: 3 / 2;
-  }
-
-  wa-radio-button #shadow-root div .button--medium {
-    padding: var(--wa-space-xs) var(--wa-space-xs);
-  }
-
-  .color-circle {
-    --background: #000;
-    background: var(--background);
-
-    width: 50px;
-    height: 100%;
-  }
-
-  .sweater-rating {
-    margin-bottom: 1rem;
-  }
-  .price-big {
-    display: block;
-    font-size: 32px;
-  }
-
-  .thumbnails {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 1rem;
-  }
-
-  .thumbnails__scroller {
-    display: flex;
-    gap: var(--wa-space-s);
-    overflow-x: auto;
-    scrollbar-width: none;
-    scroll-behavior: smooth;
-    scroll-padding: var(--wa-space-s);
-  }
-
-  .thumbnails__scroller::-webkit-scrollbar {
-    display: none;
-  }
-
-  .thumbnails__image {
-    width: 64px;
-    height: 64px;
-    object-fit: cover;
-
-    opacity: 0.3;
-    will-change: opacity;
-    transition: 250ms opacity;
-
-    cursor: pointer;
-  }
-
-  .thumbnails__image.active {
-    opacity: 1;
-  }
-  .details-group-example wa-details:not(:last-of-type) {
-    margin-bottom: var(--wa-space-2xs);
-  }
-</style>
-
-<script>
-  {
-    const carousel = document.querySelector('.carousel-thumbnails');
-    const scroller = document.querySelector('.thumbnails__scroller');
-    const thumbnails = document.querySelectorAll('.thumbnails__image');
-
-    scroller.addEventListener('click', e => {
-      const target = e.target;
-
-      if (target.matches('.thumbnails__image')) {
-        const index = [...thumbnails].indexOf(target);
-        carousel.goToSlide(index);
-      }
-    });
-
-    carousel.addEventListener('wa-slide-change', e => {
-      const slideIndex = e.detail.index;
-
-      [...thumbnails].forEach((thumb, i) => {
-        thumb.classList.toggle('active', i === slideIndex);
-        if (i === slideIndex) {
-          thumb.scrollIntoView({
-            block: 'nearest'
-          });
-        }
-      });
-    });
-  }
-
-    const container = document.querySelector('.details-group-example');
-
-  // Close all other details when one is shown
-  container.addEventListener('wa-show', event => {
-    if (event.target.localName === 'wa-details') {
-      [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
-    }
-  });
-</script>
-```
-
-## Split with image
-
-```html {.example}
-<div class="split-with-image">
-  <div class="div-1">
-    <wa-breadcrumb>
-    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
-    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
-    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
-    </wa-breadcrumb>
-    <h2>Everyday Ruck Snack</h2>
-    <span>
-      <span>$220</span> |
-      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
-      <span>1624 reviews</span>
-    </span>
-    <p>Don't compromise on snack-carrying capacity with this lightweight and spacious bag. The drawstring top keeps all your favorite chips, crisps, fries, biscuits, crackers, and cookies secure.</p>
-    <span><wa-icon family="solid" name="check"></wa-icon> In stock and ready to ship</span>
-
-
-  </div>
-  <div class="div-2">
-    <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
-  </div>
-  <div class="div-3">
-     <wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-  </div>
-</div>
-<style>
-  .split-with-image {
-    display: grid;
-    /* grid-template-columns: repeat(2, 1fr); */
-    /* height: 1000px; */
-    /* gap: 1rem; */
-    .div-1 {
-
-    }
-    .div-2 {
-      /* background-color: black;
-      grid-column-start: 2;
-      grid-row: span 2 / span 2; */
-    }
-    .div-3 {
-
-    }
-  }
-</style>
-```
-## With tabs
-
-```html{.example}
-<div>
-  <wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
-  <h2>Application UI Icon Pack</h2>
-  <img alt="Sample of 30 icons with friendly and fun details in outline, filled, and brand color styles." src="https://tailwindui.com/img/ecommerce-images/product-page-05-product-01.jpg" class="aqk aql">
-  <p>The Application UI Icon Pack comes with over 200 icons in 3 styles: outline, filled, and branded. This playful icon pack is tailored for complex application user interfaces with a friendly and legible look.</p>
-  <wa-button variant="brand">Brand</wa-button>
-
-<wa-button variant="success">Success</wa-button>
-<hr />
-<h3>Highlights</h3>
-<ul>
-  <li>200+ SVG icons in 3 unique styles</li>
-  <li>Compatible with Figma, Sketch, and Adobe XD</li>
-  <li>Drawn on 24 x 24 pixel grid</li>
-</ul>
-<hr />
-<h3>License</h3>
-<p>For personal and professional use. You cannot resell or redistribute these icons in their original or modified state. <a href="#">Read full license</a></p>
-<hr />
-<h3>Share</h3>
-
-
-<wa-icon family="brands" name="facebook"></wa-icon>
-<wa-icon family="brands" name="instagram"></wa-icon>
-<wa-icon family="brands" name="x-twitter"></wa-icon>
-  <wa-tab-group>
-  <wa-tab panel="general">General</wa-tab>
-  <wa-tab panel="custom">Custom</wa-tab>
-  <wa-tab panel="advanced">Advanced</wa-tab>
-  <wa-tab panel="disabled" disabled>Disabled</wa-tab>
-
-  <wa-tab-panel name="general">
-    <div></div>
-    <div>
-      <h3>Hector Gibbons</h3>
-      <p>July 12, 2021</p>
-      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
-      <p>Blown away by how polished this icon pack is. Everything looks so consistent and each SVG is optimized out of the box so I can use it directly with confidence. It would take me several hours to create a single icon this good, so it's a steal at this price.</p>
-    </div>
-  </wa-tab-panel>
-  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
-  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
-  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
-</wa-tab-group>
-
-</div>
-
-```

docs/docs/patterns/ecommerce-shopping-cart.md

@@ -1,9 +0,0 @@
----
-title: E-commerce - Shopping Cart
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/education.md

@@ -1,9 +0,0 @@
----
-title: Business
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/entertainement.md

@@ -1,9 +0,0 @@
----
-title: Entertainment
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/index.md

@@ -1,5 +0,0 @@
----
-title: Patterns
-description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
-layout: page-outline
----

docs/docs/patterns/membership.md

@@ -1,9 +0,0 @@
----
-title: Membership
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/news.md

@@ -1,160 +0,0 @@
----
-title: News
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## Examples
-### Paywall
-
-```html{.example}
-<div>
-  <wa-dialog label="You've run out of free articles... loser" with-header class="dialog-header">
-    <wa-button href="#">Register</wa-button>
-  Already a subscriber? <a href="#">Login</a>
-</wa-dialog>
-
-<wa-button>Open Paywall</wa-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-header');
-  const openButton = dialog.nextElementSibling;
-
-  openButton.addEventListener('click', () => dialog.open = true);
-</script>
-
-</div>
-```
-## Related articles
-```html{.example}
-<div>
-  <wa-card>
-    <div class="card-body">
-      <div style="border-bottom: 1px solid var(--wa-color-surface-border);margin-bottom: 1rem; padding-bottom: 1rem;">
-        <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
-        <h2 style="margin-bottom: var(--wa-space-s);">Title</h2>
-        <p style="margin-bottom: var(--wa-space-3xs);">Fusce lectus lorem, tincidunt non semper sit amet, laoreet vitae nunc. Morbi egestas, libero vitae elementum pretium, nibh ipsum faucibus lacus, id pretium urna ligula eu mauris. Aliquam erat volutpat. Mauris pharetra lacus rhoncus ligula bibendum, at consectetur erat auctor.</p>
-
-      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
-      </div>
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
-        <div>
-            <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
-
-        <p style="margin-bottom: var(--wa-space-3xs);">Etiam et tincidunt est, sollicitudin fermentum ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut suscipit libero at velit fringilla, ac pretium lorem rutrum. Cras luctus blandit semper.</p>
-
-      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
-        </div>
-        <div>
-            <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
-
-        <p style="margin-bottom: var(--wa-space-3xs);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in fringilla ante. In mattis sapien ac aliquet mattis.</p>
-
-      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
-        </div>
-      </div>
-    </div>
-  </wa-card>
-</div>
-```
-
-## Footer
-```html{.example}
-<div class="news-footer">
-  <div class="container">
-  <!-- <div class="logo"> <wa-icon name="user-secret"></wa-icon> <h1 style="--wa-space-xl: 0;">Daily Snoop</h1></div> -->
-  <div class="nav">
-    <section>
-      <h4 style="--wa-space-xl: 0;">News</h4>
-      <ul>
-      <li><a href="#">U.S.</a></li>
-      <li><a href="#">World</a></li>
-      <li><a href="#">Politics</a></li>
-      <li><a href="#">Education</a></li>
-      <li><a href="#">Sports</a></li>
-      <li><a href="#">Business</a></li>
-      <li><a href="#">Tech</a></li>
-      <li><a href="#">Science</a></li>
-    </ul>
-    </section>
-    <section>
-      <h4 style="--wa-space-xl: 0;">Arts</h4>
-      <ul>
-      <li><a href="#">Book Review</a></li>
-      <li><a href="#">Dance</a></li>
-      <li><a href="#">Movies</a></li>
-      <li><a href="#">Pop Culture</a></li>
-    </ul>
-    </section>
-    <section>
-      <h4 style="--wa-space-xl: 0;">Subscriptions</h4>
-      <ul class="list">
-      <li><a href="#"><wa-icon fixed-width name="game-board-simple"></wa-icon> Crossword</a></li>
-      <li><a href="#"><wa-icon fixed-width name="paper-plane"></wa-icon> Newsletters</a></li>
-      <li><a href="#"><wa-icon fixed-width name="microphone-lines"></wa-icon> Podcast</a></li>
-    </ul>
-    </section>
-  </div>
-  <div class="social">
-    <a href="">
-      <wa-icon family="brands" name="bluesky"></wa-icon>
-    </a>
-    <a href="">
-      <wa-icon family="brands" name="instagram"></wa-icon>
-    </a>
-    <a href="">
-      <wa-icon family="brands" name="facebook"></wa-icon>
-    </a>
-    <a href="">
-      <wa-icon family="brands" name="mastodon"></wa-icon>
-    </a>
-  </div>
-  <div>
-    <img src="https://img.fortawesome.com/cfa83f3c/app_store.svg" alt="">
-    <img src="https://img.fortawesome.com/cfa83f3c/google_play.svg" alt="">
-  </div>
-  <div class="legal">&#169; 2024 All rights reserved.</div>
-  </div>
-</div>
-<style>
-  .news-footer {
-
-    .container {
-      max-width: 960px;
-      margin: auto;
-    }
-    .logo {
-      display: flex;
-      align-items: center;
-    }
-    .nav {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-
-    .nav ul {
-      list-style-type: none;
-      margin-left: 0;
-    }
-    .social a {
-      text-decoration: none;
-      display: inline-block;
-    }
-    .social a:not(:last-child) {
-      margin-right: 1rem;
-    }
-    section ul li a {
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-      --wa-color-text-link: var(--wa-color-gray-20);
-
-      wa-icon {
-        margin-right: .5rem;
-      }
-    }
-  }
-</style>
-```

docs/docs/patterns/non-profit.md

@@ -1,9 +0,0 @@
----
-title: Non-profit
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/portfolio.md

@@ -1,9 +0,0 @@
----
-title: Portfolio
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/product-landing.md

@@ -1,9 +0,0 @@
----
-title: Product Landing
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## Examples

docs/docs/resources/changelog.md

@@ -1,90 +0,0 @@
----
-title: Changelog
-description: Changes to each version of the project are documented here.
-layout: page
----
-
-Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the <wa-badge variant="brand" pill>Stable</wa-badge> badge will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary will be deprecated but not removed.
-
-Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
-
-:::warning
-During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
-:::
-
-## 3.0.0-alpha.5
-
-- Added the Finnish translation
-- Added the Italian translation
-- Added the Ukrainian translation
-- Added support for <kbd>Enter</kbd> to `<wa-split-panel>` to align with ARIA APG's [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/)
-- Added more resilient support for lazy loaded options in `<wa-select>`
-- Added support for vertical button groups
-- Added the `focus()` method to `<wa-radio-group>`
-- Fixed a bug in `<wa-dialog>` with scroll locking shifting viewports.
-- Fixed a bug in `<wa-dialog>` when using `.show()`
-- Fixed a bug in `<wa-rating>` when using `precision`
-- Fixed a bug in `<wa-rating>` that allowed tabbing into the rating when readonly
-- Fixed a bug in `<wa-relative-time>` where the title attribute would show with redundant info
-- Fixed a bug in `<wa-select>` that caused the placeholder to display incorrectly when using placeholder and multiple
-- Fixed a bug in `<wa-tooltip>` that caused a memory leak in disconnected elements
-- Fixed a bug in `<wa-select>` that prevented label changes in `<wa-option>` from updating the controller
-- Fixed a bug in `<wa-carousel>` that caused interactive elements to be activated when dragging
-- Fixed a bug in `<wa-tab-group>` that prevented changing tabs by setting `active` on `<wa-tab>` elements
-- Fixed a bug in `<wa-tab-group>` that caused an error when removed from the DOM too quickly
-- Fixed a bug in `<wa-textarea>` causing scroll jumping when using `resize="auto"`
-- Fixed a bug with certain bundlers when using dynamic imports
-- Improved alignment of the play icon in `<wa-animated-image>`
-- Improved behavior of link buttons to not set `noreferrer noopener` by default
-- Updated all checks for directionality to use `this.localize.dir()` instead of `el.matches(:dir(rtl))` so older browsers don't error out
-
----
-
-## What's different from Shoelace v2?
-
-==If you're new to Web Awesome, you can skip this section.== If you're coming from [Shoelace](https://shoelace.style/), you're in the right place!
-
-Here's a list of some of the things that have changed since Shoelace v2. For questions or help upgrading, [the alpha discussion board](https://github.com/shoelace-style/webawesome-alpha/discussions) is a great place to get help!
-
-- Added `setKitCode()` and `getKitCode()` functions as well as support for setting kit codes declaratively with `data-webawesome-kit`
-- Added `family` and `variant` attributes to `<wa-icon>` and `<wa-icon-button>`
-- Added the `active` attribute to `<wa-tab-group>`
-- Added an easier way to close dialogs by applying `data-dialog="close"` to any button in the dialog
-- Added an easier way to close drawers by applying `data-dialog="close"` to any button in the drawer
-- Added the `--show-duration` and `--hide-duration` custom properties to `<wa-details>`, `<wa-dialog>`, `<wa-drawer>`, `<wa-tree-item>`, and `<wa-popup>`
-- Added visible labels to `<wa-color-picker>`
-- Changed the attribute for setting the base path declaratively to `data-webawesome` instead of `data-shoelace`; additionally, you can place it on any element now instead of just the associated `<script>` tag
-- Changed the `sl` prefix to `wa` for Web Awesome, including tags, events, etc.
-- Changed `primary` variants to `brand` in all components
-- Changed the internal structure of `<wa-checkbox>` so that the internal checkbox now takes up the full height and width of its wrapping container.
-- Changed disabled form controls so they don't have the `disabled` attribute when disabled (use `:state(disabled)` or `[data-wa-disabled]` instead)
-- Changed `<wa-checkbox>` to no longer have a `checked` attribute set when their `checked` property is changed, e.g. `el.checked = true` (use the `:state(:checked)` or `[data-checked]` selector instead)
-- Changed `<wa-checkbox>` and `<wa-switch>` to use `:state(checked)` (fallback `[data-wa-checked]`) for styling their "checked" state (the `checked` attribute now maps to `defaultChecked` like native HTML checkboxes)
-- Changed the `data-optional`, `data-required`, `data-invalid`, `data-valid`, `data-user-invalid`, and `data-user-valid` states to `data-wa-*` prefix to avoid conflicts with user provided attributes
-- Changed `<wa-icon>` so icons are no longer fixed width by default to accommodate variable width icons
-- Changed `<wa-radio>` from `display: block;` to `display: inline-block`
-- Changed `<wa-tab-group>` to implement a "roving tabindex" and `<wa-tab>` is no longer tabbable by default. This aligns closer to the APG pattern for tabs [#2041]
-- Changed `<wa-tooltip>` to no longer wrap content due to accessibility and styling issues. Tooltips are now associated using the `for` attribute + an `id` on the trigger [#123]
-- Improved `<wa-spinner>` so it doesn't wobble when zooming in Safari
-- Improved submenu selection by implementing the [safe triangle](https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/) method [#1550]
-- Improved tabbing in `<wa-tab-group>` so it uses a roving tab index instead of being able to cycle through each tab
-- Removed `default` from `<wa-button>` and made `neutral` the new default
-- Removed the `circle` modifier from `<wa-button>` because button's no longer have a set height
-- Removed the `active-tab-indicator` part from `<wa-tab-group>`
-- Removed the `closable` attribute from `<wa-tab>` because you can't nest interactive elements (see the updated example for a better method)
-- Removed the `show()` method from `<wa-tab-group>` (use the `active` attribute instead)
-- Removed the `show()` and `hide()` methods from `<wa-dialog>` and `<wa-drawer`> (toggle the `open` attribute instead)
-- Removed JavaScript-based animation customizations due to high confusion and low usage
-- Removed the `wa-request-close` event from `<wa-dialog>` and `<wa-drawer>` (use the `wa-hide` event instead)
-- Removed `inline` from `<wa-color-picker>`
-- Removed `getFormControls()` since we now use Form Associated Custom Elements and can reliably access Web Awesome Elements via `formElement.elements`.
-- Removed `valueAsDate` from `<wa-input>`; use the following to mimic native behaviors:
-    setter: `waInput.value = new Date().toLocaleDateString()`
-    getter: `new Date(waInput.value)`
-- Removed `valueAsNumber` from `<wa-input>`; use the following to mimic native behaviors:
-    setter: `waInput.value = 5.toString()`
-    getter: `Number(waInput.value)`
-
-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)
-
-Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/)

docs/docs/themes.md

@@ -1,139 +0,0 @@
----
-title: Themes
-description: Everything you need to know about theming Web Awesome.
-layout: page-outline
----
-
-Themes are collections of pre-defined CSS custom properties that thread through every Web Awesome component and pattern.
-
-Web Awesome includes two pre-made themes:
-- **Default** for a clean look that prioritizes accessibility and performance
-- **Classic** for the look and feel of Shoelace with more accessible color pairings
-
-## What's a Theme?
-
-Themes are a standard collection of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) that cover all styles from colors to transitions. We use these custom properties throughout Web Awesome components to ensure a cohesive look and feel. Our [Theming pages](/docs/theming/) document these styles so that you can use them freely throughout your project and customize them as needed.
-
-Themes are scoped to unique classes for each color scheme, such as `wa-theme-default-light` and `wa-theme-default-dark`, and the `:host` selector. Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions, while scoping to `:host` ensures the styles are applied to the shadow roots of custom elements.
-
-Additionally, styles may be scoped to the `:root` selector to be activated automatically. For pre-made themes, *all* custom properties are scoped to both `:root` and the class for the light color scheme (`wa-theme-default-light` or `wa-theme-classic-light`), activating the light color scheme by default.
-
-Other themes or color schemes must be activated with the corresponding class, like the dark color scheme for pre-made themes (`wa-theme-default-dark` or `wa-theme-classic-dark`), which only defines a subset of custom properties for colors. This ensures that non-color styles only need to be defined once for the theme, regardless of whether the color scheme is light or dark.
-
-For example, the default theme is set up like this:
-
-```css
-:root,
-:host,
-.wa-theme-default-light {
-  /* all CSS custom properties for color, typography, space, etc. */
-}
-
-.wa-theme-default-dark,
-.wa-theme-default-dark :host {
-  /* subset of CSS custom properties for color */
-}
-```
-
-## Using Themes
-
-You can import the default and classic themes from the Web Awesome CDN. Simply add the following code to the `<head>` of your page to import the **default** theme:
-
-```html
-<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/themes/default.css" />
-```
-
-Or import the **classic** theme:
-
-```html
-<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/themes/classic.css" />
-```
-
-Both the default and classic themes include both light and dark color schemes. When importing either theme, the light color scheme is activated by default. To activate the dark color scheme, apply the appropriate class (`wa-theme-default-dark` or `wa-theme-classic-dark`, depending on theme) to the `<html>` element on your page, like this example for the default theme:
-```html
-<html class="wa-theme-default-dark">
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/themes/default.css" />
-    <!-- other links, scripts, and metadata -->
-  </head>
-  <body>
-    <!-- page content -->
-  </body>
-</html>
-```
-
-Because themes are scoped to specific classes, you can activate different color schemes or entire themes on different containers throughout the page. This example uses the default theme with a dark sidebar.
-
-```html
-<html>
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/themes/default.css" />
-  </head>
-
-  <body>
-    <nav class="wa-theme-default-dark">
-      <!-- dark-themed sidebar -->
-    </nav>
-
-    <!-- light-themed content -->
-  </body>
-</html>
-```
-
-## Creating Themes
-
-There are two ways to create themes. The easiest way is to customize the default theme. The advanced way is to create a new theme from scratch. Which method you choose depends on your project's requirements and the amount of effort you're willing to invest.
-
-### Customizing a Built-in Theme
-
-Overriding the default theme is the easiest way to customize Web Awesome. You can do this by importing the default theme as-is, then creating a separate stylesheet that overrides [the theming API](/docs/customizing#design-tokens) and adds [component styles](/docs/customizing#css-parts) to your liking. You must import your theme _after_ the default theme.
-
-If you're customizing the default light styles, scope your styles to the following selectors.
-
-```css
-:root,
-:host,
-.wa-theme-default-light {
-  /* your custom styles here */
-}
-```
-
-If you're customizing the default dark styles, scope your styles to the following selectors.
-
-```css
-:host,
-.wa-theme-default-dark {
-  /* your custom styles here */
-}
-```
-
-By customizing a built-in theme, you'll maintain a smaller stylesheet containing only the changes you've made. Contrast this to [creating a new theme](#creating-a-new-theme), where you need to explicitly define every custom property required by the library. This approach is more "future-proof," as new design tokens that emerge in subsequent versions of Web Awesome will be accounted for by built-in themes.
-
-While this approach is easier to maintain, the drawback is that your theme can't be activated independently — it's tied to the built-in theme you're extending.
-
-### Creating a New Theme
-
-Creating a new theme is more of an undertaking than [customizing an existing one](#customizing-a-built-in-theme). At a minimum, you must implement all of the required custom properties. The easiest way to do this is by "forking" a built-in theme and modifying it from there.
-
-Start by changing the selector to match your theme's name. Assuming your new theme is called "Purple Power", your theme should be scoped like this.
-
-```css
-:host,
-.wa-theme-purple-power {
-  /* your custom styles here */
-}
-```
-
-By creating a new theme, you won't be relying on a built-in theme as a foundation. Because of this, you can activate it independently as an alternative to the default theme. This is the recommended approach if you're looking to open source your theme for others to use.
-
-You will, however, need to maintain your theme more carefully, as new versions of Web Awesome change the theming API in ways that your theme won't have accounted for. It's recommended that you clearly specify which version(s) of Web Awesome your theme is designed to work with and keep it up to date as new versions of Web Awesome are released.
-
-## Detecting Color Scheme Preference
-
-Web Awesome's default theme has 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.

docs/docs/theming/color.md

@@ -1,552 +0,0 @@
----
-title: Color
-description: Ensure consistent use of color and readable contrast with Web Awesome's color properties.
-layout: page-outline
----
-
-<style>
-  td { vertical-align: middle; }
-
-  .color-name {
-    font-weight: var(--wa-font-weight-semibold);
-    margin-block-end: var(--wa-space-2xs);
-  }
-  ul.color-group {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .color-group {
-    align-items: start;
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 0.25em;
-  }
-  .color-group + * {
-    margin-block-start: var(--wa-space-xl);
-  }
-  .color-preview {
-    flex: 1 1 auto;
-  }
-  .swatch {
-    border-color: transparent;
-  }
-  .color-mix-example {
-    background-image:
-      linear-gradient(to right,
-      color-mix(in oklab, transparent, var(--mix-color)) 25%,
-      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 25%,
-      color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 75%,
-      var(--wa-color-brand-fill-loud) 75%,
-      var(--wa-color-brand-fill-loud))
-    ;
-    border: none;
-    color: var(--wa-color-brand-on-loud);
-    text-align: center;
-  }
-</style>
-
-Web Awesome's color system is made up of CSS custom properties to help with consistent color use throughout your project.
-
-Color is organized by three main categories:
-
-- [Literal colors](/#literal-colors) that give familiar names to your starting color palette
-- [Foundational colors](/#foundational-colors) that lay the groundwork for your theme
-- [Semantic colors](/#semantic-colors) that draw attention and convey meaning
-
-
-## Literal Colors
-
-Literal colors are the lowest level color properties in your theme. Each color is identified by a name, like red or gray, and a number that roughly corresponds to the color's perceived lightness. On this scale, 100 is equal to pure white and 0 is equal to pure black.
-
-Lightness values on this scale have a strong correlation to [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance), which is used to calculate color contrast. To meet [WCAG 2.1 success criteria for minimum or enhanced contrast](https://www.w3.org/TR/WCAG21/#contrast-minimum), even across hues, calculate the difference between the lightness values of any two colors:
-
-- A difference of 40 ensures a minimum 3:1 contrast ratio, suitable for large text and icons (AA)
-- A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
-- A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)
-
-Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
-
-<div class="color-name">Red</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-red-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Yellow</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-yellow-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Green</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-green-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Blue</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-blue-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Indigo</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-indigo-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Violet</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-violet-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-<div class="color-name">Gray</div>
-<ul class="color-group">
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-95)"></div>
-    <small>95</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-90)"></div>
-    <small>90</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-80)"></div>
-    <small>80</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-70)"></div>
-    <small>70</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-60)"></div>
-    <small>60</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-50)"></div>
-    <small>50</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-40)"></div>
-    <small>40</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-30)"></div>
-    <small>30</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-20)"></div>
-    <small>20</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-10)"></div>
-    <small>10</small>
-  </li>
-  <li class="color-preview">
-    <div class="swatch" style="background-color: var(--wa-color-gray-05)"></div>
-    <small>05</small>
-  </li>
-</ul>
-
-## Foundational Colors
-
-Foundational colors lay the groundwork for the content and structure of your project. These colors are named according to their role in your theme.
-
-### Surfaces
-
-Surfaces are background layers that other content rests on. Surface colors help convey hierarchy through a sense of elevation, where `--wa-color-surface-raised` is the closest to the user (e.g., dialogs and popup menus) and `--wa-color-surface-lowered` is the farthest away (e.g., wells).
-
-| Custom Property               | Preview                                                                                                                         |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| `--wa-color-surface-raised`   | <div class="swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-s)"></div>              |
-| `--wa-color-surface-default`  | <div class="swatch" style="background-color: var(--wa-color-surface-default)"></div>                                            |
-| `--wa-color-surface-lowered`  | <div class="swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow: inset var(--wa-shadow-s)"></div>      |
-| `--wa-color-surface-border`   | <div class="swatch" style="border-color: var(--wa-color-surface-border)"></div>                                                 |
-
-### Text
-
-Text colors are used for standard text elements. We recommend a minimum 4.5:1 contrast ratio between text colors and surface colors.
-
-| Custom Property          | Preview                                                    |
-| ------------------------ | ---------------------------------------------------------- |
-| `--wa-color-text-normal` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-normal); display: inline-block;">AaBb</div> |
-| `--wa-color-text-quiet`  | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-quiet); display: inline-block;">AaBb</div>  |
-| `--wa-color-text-link`   | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-link); display: inline-block;">AaBb</div>   |
-
-### Overlays
-
-Overlays provide a backdrop to isolate content, often allowing background context to show through.
-
-| Custom Property             | Preview                                                                             |
-| --------------------------- | ----------------------------------------------------------------------------------- |
-| `--wa-color-overlay-modal`  | <div class="swatch" style="background-color: var(--wa-color-overlay-modal)"></div>  |
-| `--wa-color-overlay-inline` | <div class="swatch" style="background-color: var(--wa-color-overlay-inline)"></div> |
-
-### Shadow
-
-Web Awesome uses a single color for all shadows. This is used alongside other [shadow properties](/docs/theming/shadows) to construct your theme's shadows.
-
-| Custom Property     | Preview                                                                     |
-| ------------------- | --------------------------------------------------------------------------- |
-| `--wa-color-shadow` | <div class="swatch" style="background-color: var(--wa-color-shadow)"></div> |
-
-### Interactions
-
-#### Focus
-
-Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus properties](/docs/theming/focus) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible.
-
-| Custom Property    | Preview                                                                                                                 |
-| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
-| `--wa-color-focus` | <div class="swatch" value="--wa-color-focus" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
-
-#### Hover and Active
-
-Web Awesome leverages `color-mix()` to achieve consistent hover and active states across components without the need for untold numbers of handpicked colors. Through `color-mix()`, these custom properties contextually generate hover and active colors based on the color of the component.
-
-| Custom Property         | Preview                                                                                                          |
-| ----------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `--wa-color-mix-hover`  | <div class="swatch color-mix-example" value="--wa-color-mix-hover" style="--mix-color: var(--wa-color-mix-hover)"><small>mixed</small></div>  |
-| `--wa-color-mix-active` | <div class="swatch color-mix-example" value="--wa-color-mix-active" style="--mix-color: var(--wa-color-mix-active)"><small>mixed</small></div> |
-
-
-## Semantic Colors
-
-Semantic colors reinforce a specific message, intended usage, or expected results through familiar, meaningful hues. Each color is identified by its semantic group, role, and attention using the format `--wa-color-{group}-{role}-{attention}`. There are five groups of semantic colors:
-- **Brand** to emphasize your brand color
-- **Success** for validity or confirmation
-- **Neutral** for ordinary or inactive content
-- **Warning** for caution or uncertainty
-- **Danger** for errors or risk
-
-Each group defines colors for specific roles so that colors can be easily assembled with predictable results and readable contrast. There are three roles:
-- **Fill** for background colors or areas larger than a few pixels
-- **Border** for borders, dividers, and other stroke-width elements
-- **On** for content displayed on a fill (e.g., pair `--wa-color-danger-on-loud` with `--wa-color-danger-fill-loud`)
-
-Finally, each color is named according to how much attention it draws. Here, we use noise as an analogy: a loud noise draws more attention than a quiet one. There are three levels of attention:
-- **Quiet** draws the least attention
-- **Normal** draws some attention
-- **Loud** draws the most attention
-
-| Custom Property              |  <code>brand</code> |  <code>success</code> |  <code>neutral</code> |  <code>warning</code> | <code>danger</code> |
-| ---------------------------- | ------------------- | --------------------- | --------------------- | --------------------- | ------------------- |
-| `--wa-color-*-fill-quiet`    | <div class="swatch" style="background-color: var(--wa-color-brand-fill-quiet)"></div> |  <div class="swatch" style="background-color: var(--wa-color-success-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-quiet)"></div> |
-| `--wa-color-*-fill-normal`   | <div class="swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-normal)"></div> |<div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div> |
-| `--wa-color-*-fill-loud`     | <div class="swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div> |  <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div> |  <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div> |
-| `--wa-color-*-border-quiet`  | <div class="swatch" value="--wa-color-brand-border-quiet" style="border-color: var(--wa-color-brand-border-quiet)"></div> | <div class="swatch" value="--wa-color-success-border-quiet" style="border-color: var(--wa-color-success-border-quiet)"></div> | <div class="swatch" value="--wa-color-success-border-quiet" style="border-color: var(--wa-color-neutral-border-quiet)"></div> | <div class="swatch" value="--wa-color-warning-border-quiet" style="border-color: var(--wa-color-warning-border-quiet)"></div> | <div class="swatch" value="--wa-color-danger-border-quiet" style="border-color: var(--wa-color-danger-border-quiet)"></div> |
-| `--wa-color-*-border-normal`  | <div class="swatch" value="--wa-color-brand-border-normal" style="border-color: var(--wa-color-brand-border-normal)"></div> | <div class="swatch" value="--wa-color-success-border-normal" style="border-color: var(--wa-color-success-border-normal)"></div> | <div class="swatch" value="--wa-color-success-border-normal" style="border-color: var(--wa-color-neutral-border-normal)"></div> | <div class="swatch" value="--wa-color-warning-border-normal" style="border-color: var(--wa-color-warning-border-normal)"></div> | <div class="swatch" value="--wa-color-danger-border-normal" style="border-color: var(--wa-color-danger-border-normal)"></div> |
-| `--wa-color-*-border-loud`  | <div class="swatch" value="--wa-color-brand-border-loud" style="border-color: var(--wa-color-brand-border-loud)"></div> | <div class="swatch" value="--wa-color-success-border-loud" style="border-color: var(--wa-color-success-border-loud)"></div> | <div class="swatch" value="--wa-color-success-border-loud" style="border-color: var(--wa-color-neutral-border-loud)"></div> | <div class="swatch" value="--wa-color-warning-border-loud" style="border-color: var(--wa-color-warning-border-loud)"></div> | <div class="swatch" value="--wa-color-danger-border-loud" style="border-color: var(--wa-color-danger-border-loud)"></div> |
-| `--wa-color-*-on-quiet`      | <div class="swatch" value="--wa-color-brand-on-quiet" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-quiet" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-quiet" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-quiet" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-danger-on-quiet" style="background-color: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet)">AaBb</div> |
-| `--wa-color-*-on-normal`     | <div class="swatch" value="--wa-color-brand-on-normal" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-normal" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-normal" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-normal" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-normal" style="background-color: var(--wa-color-danger-fill-normal); color: var(--wa-color-danger-on-normal)">AaBb</div> |
-| `--wa-color-*-on-loud`       | <div class="swatch" value="--wa-color-brand-on-loud" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-loud" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-loud" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-loud" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-danger-on-loud" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</div> |
-
-<style>
-.swatch {
-  position: relative;
-}
-.swatch wa-copy-button {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.swatch wa-copy-button::part(button) {
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
-.swatch wa-copy-button {
-  --background-color-hover: transparent;
-  font-family: var(--wa-font-family-code);
-}
-
-.swatch wa-copy-button::part(button):hover {
-  cursor: copy;
-}
-
-.swatch wa-copy-button::part(copy-icon),
-.swatch wa-copy-button::part(success-icon),
-.swatch wa-copy-button::part(error-icon) {
-  opacity: 0 !important;
-}
-</style>
-
-<script type="module">
-  const computedStyle = getComputedStyle(document.body)
-  document.querySelectorAll(".swatch").forEach((swatch) => {
-    let varName = swatch.getAttribute("value")
-
-    if (!varName) {
-      const bgColor = swatch.style.backgroundColor
-      varName = bgColor.replace(/^var\((--.*)\)$/, "$1")
-    }
-
-    const copyButton = Object.assign(document.createElement("wa-copy-button"), {
-      value: varName,
-      copyLabel: varName,
-      errorLabel: "Whoops, your browser doesn't support this!",
-    })
-
-    swatch.appendChild(copyButton)
-  })
-</script>

docs/docs/theming/index.md

@@ -1,74 +0,0 @@
----
-title: Theming
-description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
-layout: page-outline
----
-
-<p class="index-summary">A theme is a collection of pre-defined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.</p>
-
-<div class="index-grid">
-  <a href="/docs/theming/color">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/theming/color.njk" %}
-      </div>
-      <span class="page-name">Color</span>
-    </wa-card>
-  </a>
-  <a href="/docs/theming/typography">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/theming/typography.njk" %}
-      </div>
-      <span class="page-name">Typography</span>
-    </wa-card>
-  </a>
-  <a href="/docs/theming/space">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/theming/space.njk" %}
-      </div>
-      <span class="page-name">Space</span>
-    </wa-card>
-  </a>
-  <a href="/docs/theming/borders">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/theming/borders.njk" %}
-      </div>
-      <span class="page-name">Borders</span>
-    </wa-card>
-  </a>
-  <a href="/docs/theming/focus">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/theming/focus.njk" %}
-      </div>
-      <span class="page-name">Focus</span>
-    </wa-card>
-  </a>
-  <a href="/docs/theming/shadows">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/theming/shadows.njk" %}
-      </div>
-      <span class="page-name">Shadows</span>
-    </wa-card>
-  </a>
-  <a href="/docs/theming/transitions">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/theming/transitions.njk" %}
-      </div>
-      <span class="page-name">Transitions</span>
-    </wa-card>
-  </a>
-  <a href="/docs/theming/component-groups">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/theming/component-groups.njk" %}
-      </div>
-      <span class="page-name">Component Groups</span>
-    </wa-card>
-  </a>
-</div>

docs/docs/theming/space.md

@@ -1,56 +0,0 @@
----
-title: Space
-description: Lock down consistent spacing Web Awesome's space properties.
-layout: page-outline
----
-
-<style>
-  .spacing-example {
-    --dot-size: 0.5em;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: var(--wa-color-neutral-fill-normal);
-    height: 2em;
-    margin-inline:var(--dot-size);
-  }
-
-  .spacing-example::before {
-    content: '';
-    aspect-ratio: 1 / 1;
-    width: var(--dot-size);
-    background-color: var(--wa-color-neutral-fill-loud);
-    border-radius: 50%;
-    margin-inline-start: calc(var(--dot-size) * -1);
-  }
-
-  .spacing-example::after {
-    content: '';
-    aspect-ratio: 1 / 1;
-    width: var(--dot-size);
-    background-color: var(--wa-color-neutral-fill-loud);
-    border-radius: 50%;
-    margin-inline-end: calc(var(--dot-size) * -1);
-  }
-</style>
-
-Space properties are used intentionally throughout Web Awesome to create predictable rhythm and meaningful proximity. These properties use `rem` units in order to scale proportionately with the root font size. 
-
-Each space property uses a `calc()` function with `--wa-space-multiplier` to scale all spacing at once. By default, this multiplier is `1`. The table below lists the result of the calculation.
-
-| Custom Property  | Default Value                   | Preview                                                               |
-| ---------------- | ------------------------------- | --------------------------------------------------------------------- |
-| `--wa-space-3xs` | `0.125rem` <small>(2px)</small> | <div class="spacing-example" style="width: var(--wa-space-3xs)"></div> |
-| `--wa-space-2xs` | `0.25rem` <small>(4px)</small>  | <div class="spacing-example" style="width: var(--wa-space-2xs)"></div> |
-| `--wa-space-xs`  | `0.5rem` <small>(8px)</small>   | <div class="spacing-example" style="width: var(--wa-space-xs)"></div>  |
-| `--wa-space-s`   | `0.75rem` <small>(12px)</small> | <div class="spacing-example" style="width: var(--wa-space-s)"></div>   |
-| `--wa-space-m`   | `1rem` <small>(16px)</small>    | <div class="spacing-example" style="width: var(--wa-space-m)"></div>   |
-| `--wa-space-l`   | `1.25rem` <small>(20px)</small> | <div class="spacing-example" style="width: var(--wa-space-l)"></div>   |
-| `--wa-space-xl`  | `1.5rem` <small>(24px)</small>  | <div class="spacing-example" style="width: var(--wa-space-xl)"></div>  |
-| `--wa-space-2xl` | `2rem` <small>(32px)</small>    | <div class="spacing-example" style="width: var(--wa-space-2xl)"></div> |
-| `--wa-space-3xl` | `3rem` <small>(48px)</small>    | <div class="spacing-example" style="width: var(--wa-space-3xl)"></div> |
-
-When using space properties, it may be helpful to consider three distinct groups:
-- Small-scale space (`3xs`, `2xs`, and `xs`) can be used for gaps between cooperating elements, such as a dropdown button and its menu, and padding within small components, such as badges and tooltips
-- Normal space (`s`, `m`, and `l`) can be used for gaps between related elements with distinct touch targets and padding within typical interface elements, such as buttons and inputs
-- Large-scale space (`xl`, `2xl`, and `3xl`) can be used for gaps between unrelated elements and padding within larger components, such as cards and dialogs

docs/src/env.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="astro/client" />
-/// <reference path="../.astro/types.d.ts" />

lint-staged.config.js

@@ -1,5 +1,5 @@
 export default {
   '*.{js,ts,json,html,xml,css,scss,sass,md}': 'cspell --no-must-find-files',
   'src/**/*.{js,ts}': 'eslint --max-warnings 0 --fix',
-  '*': 'prettier --write --ignore-unknown'
+  '*': 'prettier --write --ignore-unknown',
 };

package.json

@@ -1,153 +1,90 @@
 {
-  "name": "@shoelace-style/webawesome",
+  "name": "@webawesome/monorepo",
+  "private": true,
   "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.13",
   "homepage": "https://webawesome.com/",
   "author": "Web Awesome",
   "license": "MIT",
-  "customElements": "dist/custom-elements.json",
-  "web-types": "./dist/web-types.json",
   "type": "module",
-  "types": "dist/webawesome.d.ts",
-  "jsdelivr": "./dist/webawesome.loader.js",
-  "exports": {
-    ".": {
-      "types": "./dist/webawesome.d.ts",
-      "import": "./dist/webawesome.js"
-    },
-    "./dist/custom-elements.json": "./dist/custom-elements.json",
-    "./dist/webawesome.js": "./dist/webawesome.js",
-    "./dist/webawesome.loader.js": "./dist/webawesome.loader.js",
-    "./dist/themes": "./dist/themes",
-    "./dist/themes/*": "./dist/themes/*",
-    "./dist/components": "./dist/components",
-    "./dist/components/*": "./dist/components/*",
-    "./dist/react": "./dist/react/index.js",
-    "./dist/react/*": "./dist/react/*",
-    "./dist/translations": "./dist/translations",
-    "./dist/translations/*": "./dist/translations/*"
-  },
-  "files": [
-    "dist",
-    "cdn"
+  "workspaces": [
+    "packages/*"
   ],
-  "keywords": [
-    "web components",
-    "custom elements",
-    "components"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/shoelace-style/webawesome.git"
-  },
-  "bugs": {
-    "url": "https://github.com/shoelace-style/webawesome/issues"
-  },
   "scripts": {
-    "start": "node scripts/build.js --develop",
-    "build": "node scripts/build.js",
-    "build:alpha": "node scripts/build.js --alpha",
-    "start:alpha": "node scripts/build.js --alpha --develop",
-    "publish-alpha-cdn": "./publish-alpha-cdn.sh",
-    "create": "plop --plopfile scripts/plop/plopfile.js",
-    "test": "web-test-runner --group default",
-    "test:component": "web-test-runner -- --watch --group",
-    "test:watch": "web-test-runner --watch --group default",
-    "lint": "eslint src --max-warnings 0",
-    "lint:fix": "eslint src --max-warnings 0 --fix",
-    "prettier": "prettier --check --log-level=warn .",
-    "prettier:fix": "prettier --write --log-level=warn .",
-    "spellcheck": "cspell \"**/*.{js,ts,json,html,css,md}\" --no-progress",
-    "verify": "npm run prettier && npm run lint && npm run build && npm run test",
-    "prepublishOnly": "npm run verify"
+    "check-updates": "npx npm-check-updates --interactive --format group",
+    "start": "cd packages/webawesome && npm run start",
+    "start:pro": "cd packages/webawesome-pro && npm run start"
   },
   "engines": {
     "node": ">=14.17.0"
   },
-  "dependencies": {
-    "@ctrl/tinycolor": "^4.0.2",
-    "@floating-ui/dom": "^1.5.3",
-    "@shoelace-style/animations": "^1.1.0",
-    "@shoelace-style/localize": "^3.2.1",
-    "composed-offset-position": "^0.0.4",
-    "lit": "^3.0.0",
-    "qr-creator": "^1.0.0"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "@11ty/eleventy": "3.0.0-alpha.5",
-    "@custom-elements-manifest/analyzer": "^0.9.4",
+    "@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.4",
-    "@lit/react": "^1.0.0",
+    "@lit-labs/testing": "^0.2.5",
+    "@lit/react": "^1.0.6",
     "@open-wc/testing": "^3.2.0",
-    "@types/mocha": "^10.0.2",
+    "@types/mocha": "^10.0.10",
     "@types/react": "^18.2.28",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
     "@web/dev-server-esbuild": "^0.3.6",
-    "@web/test-runner": "^0.18.1",
+    "@web/test-runner": "^0.19.0",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "browser-sync": "^2.29.3",
     "chalk": "^5.3.0",
     "change-case": "^4.1.2",
     "chokidar": "^3.5.3",
+    "colorjs.io": "^0.6.0-alpha.1",
     "command-line-args": "^5.2.1",
-    "comment-parser": "^1.4.0",
+    "comment-parser": "^1.4.1",
     "cspell": "^6.18.1",
-    "custom-element-jet-brains-integration": "^1.4.0",
-    "custom-element-vs-code-integration": "^1.2.1",
-    "custom-element-vuejs-integration": "^1.0.0",
+    "custom-element-jet-brains-integration": "^1.6.2",
+    "custom-element-vs-code-integration": "^1.4.1",
+    "custom-element-vuejs-integration": "^1.3.3",
     "del": "^7.1.0",
     "download": "^8.0.0",
-    "esbuild": "^0.19.4",
-    "esbuild-plugin-lit-css": "^3.0.1",
+    "esbuild": "0.23.1",
     "esbuild-plugin-replace": "^1.4.0",
-    "eslint": "^8.51.0",
-    "eslint-plugin-chai-expect": "^3.0.0",
-    "eslint-plugin-chai-friendly": "^0.7.2",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-lit": "^1.9.1",
-    "eslint-plugin-lit-a11y": "^4.1.0",
-    "eslint-plugin-markdown": "^3.0.1",
-    "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
-    "eslint-plugin-wc": "^2.0.4",
     "front-matter": "^4.0.2",
-    "get-port": "^7.0.0",
+    "get-port": "^7.1.0",
     "globby": "^13.2.2",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "lunr": "^2.3.9",
     "markdown-it": "^14.1.0",
-    "markdown-it-attrs": "^4.1.6",
+    "markdown-it-attrs": "^4.3.0",
     "markdown-it-container": "^3.0.0",
     "markdown-it-ins": "^3.0.1",
     "markdown-it-kbd": "^2.2.2",
     "markdown-it-mark": "^3.0.1",
     "marked": "^11.1.0",
     "node-html-parser": "^6.1.13",
-    "ora": "^8.0.1",
+    "npm-check-updates": "^17.1.11",
+    "ora": "^8.1.1",
     "pascal-case": "^3.1.2",
-    "playwright": "^1.46.1",
-    "plop": "^4.0.0",
-    "prettier": "^3.0.3",
+    "playwright": "^1.49.1",
+    "plop": "^4.0.1",
+    "prettier": "^3.4.2",
+    "prettier-plugin-organize-imports": "^4.1.0",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "recursive-copy": "^2.0.14",
     "sinon": "^16.1.0",
     "source-map": "^0.7.4",
-    "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "user-agent-data-types": "^0.3.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "user-agent-data-types": "^0.4.2",
     "uuid": "^9.0.1"
   },
   "overrides": {
-    "playwright": "^1.46.1"
+    "playwright": "^1.49.1"
   },
   "lint-staged": {
     "*.{ts,js}": [
-      "eslint --max-warnings 0 --cache --fix",
       "prettier --write"
     ]
   }
 }
+

packages/webawesome/.gitignore

@@ -0,0 +1,4 @@
+_site
+dist
+dist-cdn
+src/react

packages/webawesome/custom-elements-manifest.js

@@ -2,10 +2,13 @@ import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integrat
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
 // import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
 import { parse } from 'comment-parser';
-import { pascalCase } from 'pascal-case';
 import fs from 'fs';
+import * as path from 'node:path';
+import { pascalCase } from 'pascal-case';
+import * as url from 'url';
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
-const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+const packageData = JSON.parse(fs.readFileSync(path.join(__dirname, 'package.json'), 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
 const outdir = 'dist-cdn';
 
@@ -28,7 +31,7 @@ export default {
       name: 'wa-package-data',
       packageLinkPhase({ customElementsManifest }) {
         customElementsManifest.package = { name, description, version, author, homepage, license };
-      }
+      },
     },
 
     // Parse custom jsDoc tags
@@ -83,13 +86,13 @@ export default {
                   classDoc[t.tag].push({
                     name: t.name,
                     description: t.description,
-                    type: t.type || undefined
+                    type: t.type || undefined,
                   });
               }
             });
           }
         }
-      }
+      },
     },
 
     {
@@ -109,7 +112,7 @@ export default {
             }
           }
         }
-      }
+      },
     },
 
     {
@@ -127,7 +130,7 @@ export default {
           //
           const terms = [
             { from: /^src\//, to: '' }, // Strip the src/ prefix
-            { from: /\.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
+            { from: /\.(t|j)sx?$/, to: '.js' }, // Convert .ts to .js
           ];
 
           mod.path = replace(mod.path, terms);
@@ -146,7 +149,7 @@ export default {
             }
           }
         });
-      }
+      },
     },
 
     // Generate custom VS Code data
@@ -156,9 +159,9 @@ export default {
       referencesTemplate: (_, tag) => [
         {
           name: 'Documentation',
-          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
-        }
-      ]
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`,
+        },
+      ],
     }),
 
     customElementJetBrainsPlugin({
@@ -168,10 +171,10 @@ export default {
       referencesTemplate: (_, tag) => {
         return {
           name: 'Documentation',
-          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`,
         };
-      }
-    })
+      },
+    }),
 
     //
     // TODO - figure out why this broke when events were updated
@@ -181,5 +184,5 @@ export default {
     //   fileName: 'index.d.ts',
     //   componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.js`
     // })
-  ]
+  ],
 };

packages/webawesome/docs/.eleventy.js

@@ -0,0 +1,220 @@
+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 { markdown } from './_utils/markdown.js';
+// import { formatCodePlugin } from './_utils/format-code.js';
+// import litPlugin from '@lit-labs/eleventy-plugin-lit';
+import { readFile } from 'fs/promises';
+import nunjucks from 'nunjucks';
+// import componentList from './_data/componentList.js';
+import * as filters from './_utils/filters.js';
+import { outlinePlugin } from './_utils/outline.js';
+import { replaceTextPlugin } from './_utils/replace-text.js';
+import { searchPlugin } from './_utils/search.js';
+
+import process from 'process';
+
+import * as url from 'url';
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
+const isDev = process.argv.includes('--develop');
+
+const globalData = {
+  package: packageData,
+  layout: 'page.njk',
+  server: {
+    head: '',
+    loginOrAvatar: '',
+    flashes: '',
+  },
+};
+
+export default 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');
+  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.
+   */
+  const serverBuild = process.env.WEBAWESOME_SERVER === 'true';
+
+  // Add template data
+  for (let name in globalData) {
+    eleventyConfig.addGlobalData(name, globalData[name]);
+  }
+
+  // Template filters - {{ content | filter }}
+  eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
+  eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
+
+  for (let name in filters) {
+    eleventyConfig.addFilter(name, filters[name]);
+  }
+
+  // Shortcodes - {% shortCode arg1, arg2 %}
+  eleventyConfig.addShortcode('cdnUrl', location => {
+    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
+  });
+
+  // Turns `{% server "foo" %} into `{{ server.foo | safe }}` when the WEBAWESOME_SERVER variable is set to "true"
+  eleventyConfig.addShortcode('server', function (property) {
+    if (serverBuild) {
+      return `{{ server.${property} | safe }}`;
+    }
+
+    return '';
+  });
+
+  eleventyConfig.addTransform('second-nunjucks-transform', function NunjucksTransform(content) {
+    // For a server build, we expect a server to run the second transform.
+    if (serverBuild) {
+      return content;
+    }
+
+    // Only run the transform on files nunjucks would transform.
+    if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
+      return content;
+    }
+
+    /** This largely mimics what an app would do and just stubs out what we don't care about. */
+    return nunjucks.renderString(content, {
+      // Stub the server EJS shortcodes.
+      server: {
+        head: '',
+        loginOrAvatar: '',
+        flashes: '',
+      },
+    });
+  });
+
+  // Paired shortcodes - {% shortCode %}content{% endShortCode %}
+  eleventyConfig.addPairedShortcode('markdown', content => markdown.render(content || ''));
+
+  // Helpers
+
+  // Use our own markdown instance
+  eleventyConfig.setLibrary('md', markdown);
+
+  // Add anchors to headings
+  eleventyConfig.addPlugin(anchorHeadingsPlugin({ container: '#content' }));
+
+  // Add an outline to the page
+  eleventyConfig.addPlugin(
+    outlinePlugin({
+      container: '#content',
+      target: '.outline-links',
+      selector: 'h2, h3',
+      ifEmpty: doc => {
+        doc.querySelector('#outline')?.remove();
+      },
+    }),
+  );
+
+  // Add current link classes
+  eleventyConfig.addPlugin(currentLink());
+
+  // Add code examples for `<code class="example">` blocks
+  eleventyConfig.addPlugin(codeExamplesPlugin());
+
+  // Highlight code blocks with Prism
+  eleventyConfig.addPlugin(highlightCodePlugin());
+
+  // Add copy code buttons to code blocks
+  eleventyConfig.addPlugin(copyCodePlugin);
+
+  // Various text replacements
+  eleventyConfig.addPlugin(
+    replaceTextPlugin([
+      {
+        replace: /\[version\]/gs,
+        replaceWith: packageData.version,
+      },
+      // Replace [issue:1234] with a link to the issue on GitHub
+      {
+        replace: /\[pr:([0-9]+)\]/gs,
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>',
+      },
+      // Replace [pr:1234] with a link to the pull request on GitHub
+      {
+        replace: /\[issue:([0-9]+)\]/gs,
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>',
+      },
+      // Replace [discuss:1234] with a link to the discussion on GitHub
+      {
+        replace: /\[discuss:([0-9]+)\]/gs,
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>',
+      },
+    ]),
+  );
+
+  // Build the search index
+  eleventyConfig.addPlugin(
+    searchPlugin({
+      filename: '',
+      selectorsToIgnore: ['code.example'],
+      getContent: doc => doc.querySelector('#content')?.textContent ?? '',
+    }),
+  );
+
+  // Production-only plugins
+  //
+  // TODO - disabled because it takes about a minute to run now
+  //
+  // if (!isDev) {
+  //   // Run Prettier on each file (prod only because it can be slow)
+  //   eleventyConfig.addPlugin(formatCodePlugin());
+  // }
+
+  let assetsDir = path.join(process.env.BASE_DIR || 'docs', 'assets');
+  fs.cpSync(assetsDir, path.join(eleventyConfig.directories.output, 'assets'), { recursive: true });
+
+  for (let glob of passThrough) {
+    eleventyConfig.addPassthroughCopy(glob);
+  }
+
+  // // SSR plugin
+  // // Make sure this is the last thing, we don't want to run the risk of accidentally transforming shadow roots with the nunjucks 2nd transform.
+  // if (!isDev) {
+  //   //
+  //   // Problematic components in SSR land:
+  //   //  - animation (breaks on navigation + ssr with Turbo)
+  //   //  - mutation-observer (why SSR this?)
+  //   //  - resize-observer (why SSR this?)
+  //   //  - tooltip (why SSR this?)
+  //   //
+  //   const omittedModules = [];
+  //   const componentModules = componentList
+  //     .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
+  //     .map(component => {
+  //       const name = component.tagName.split(/wa-/)[1];
+  //       const componentDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join('.', 'dist');
+  //       return path.join(componentDirectory, 'components', name, `${name}.js`);
+  //     });
+  //
+  //   eleventyConfig.addPlugin(litPlugin, {
+  //     mode: 'worker',
+  //     componentModules,
+  //   });
+  // }
+}
+
+export const config = {
+  markdownTemplateEngine: 'njk',
+  dir: {
+    input: 'docs',
+    includes: '_includes',
+    layouts: '_layouts',
+  },
+  templateFormats: ['njk', 'md'],
+};

packages/webawesome/docs/_data/componentList.js

@@ -1,13 +1,16 @@
 /**
  * @module components Fetches components from custom-elements.json and exposes them in a saner format.
  */
-import { dirname, resolve } from 'path';
-import { fileURLToPath } from 'url';
 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(resolve(__dirname, '../../dist/custom-elements.json'), 'utf-8'));
+const manifest = JSON.parse(readFileSync(customElementsJSON), 'utf-8');
 
 const components = manifest.modules.flatMap(module => {
   return module.declarations
@@ -36,7 +39,7 @@ const components = manifest.modules.flatMap(module => {
         slug: declaration.tagName.replace(/^wa-/, ''),
         methods,
         attributes,
-        properties
+        properties,
       };
     });
 });

packages/webawesome/docs/_data/hueRanges.js

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

packages/webawesome/docs/_data/hues.json

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

packages/webawesome/docs/_data/palettes.js

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

packages/webawesome/docs/_data/themes.js

@@ -0,0 +1,62 @@
+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/base.njk

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

packages/webawesome/docs/_includes/breadcrumbs.njk

@@ -0,0 +1,13 @@
+{% 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

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

packages/webawesome/docs/_includes/contrast-table.njk

@@ -0,0 +1,52 @@
+<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/grouped-pages.njk

@@ -0,0 +1,18 @@
+{# 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

@@ -0,0 +1,68 @@
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="description" content="{{ description }}">
+{% if noindex or unlisted %}<meta name="robots" content="noindex">{% endif %}
+
+<title>{{ title }}</title>
+
+{# Dark mode #}
+<script>
+	let colorScheme = localStorage.colorScheme;
+	let isDark = localStorage.colorScheme === "dark";
+	if (!colorScheme || colorScheme === "auto") {
+		isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+	}
+	document.documentElement.classList.toggle('wa-dark', isDark);
+</script>
+
+<link rel="icon" href="/assets/images/webawesome-logo.svg" />
+<link rel="apple-touch-icon" href="/assets/images/app-icon.png">
+
+{# Scripts #}
+{# Hydration stuff #}
+<script src="/assets/scripts/hydration-errors.js"></script>
+<link rel="stylesheet" href="/assets/styles/hydration-errors.css">
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+
+{# Internal components #}
+<script type="module" src="/assets/components/scoped.js"></script>
+
+{# Web Awesome #}
+<script type="module" src="/dist/webawesome.loader.js"></script>
+
+{# Fallback loading when using the free repo #}
+<link rel="preconnect" href="https://early.webawesome.com">
+<script type="module">
+  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")
+        .catch((e) => {
+          console.error(e)
+        // 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

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