fix type

* Document code completion setup for Web Awesome

Added instructions for enabling code completion in VS Code and JetBrains IDEs for Web Awesome components.

This mirror what already exist for Shoelace: https://shoelace.style/getting-started/usage#code-completion
+ a new line to explain how to setup VS Code completion from the CDN

* Update packages/webawesome/docs/docs/usage.md

* Update packages/webawesome/docs/docs/usage.md

* Update packages/webawesome/docs/docs/usage.md

* Update packages/webawesome/docs/docs/usage.md

* Update packages/webawesome/docs/docs/usage.md

* Update packages/webawesome/docs/docs/usage.md

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

.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': 'error',
-    '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

@@ -0,0 +1,48 @@
+# # 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: Client Tests
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [next]
+  pull_request:
+    branches: [next]
+
+
+jobs:
+  client_test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Lint
+        run: npm run prettier
+        working-directory: ./packages/webawesome
+
+      - name: Build
+        run: npm run build
+        working-directory: ./packages/webawesome
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+        working-directory: ./packages/webawesome
+
+      - name: Run CSR tests
+        # FAIL_FAST to fail on first failing test.
+        run: FAIL_FAST="true" CSR_ONLY="true" npm run test
+        working-directory: ./packages/webawesome

.github/workflows/node.js.yml

@@ -1,30 +0,0 @@
-# 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: Node.js CI
-
-on:
-  push:
-    branches: [next]
-  pull_request:
-    branches: [next]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [18.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-      - run: npx playwright install-deps
-      - run: npm ci
-      - run: npm run verify

.github/workflows/ssr_tests.yml

@@ -0,0 +1,42 @@
+# 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]
+  workflow_dispatch:
+
+jobs:
+  ssr_test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+
+      - 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,11 +1,12 @@
 _site
 .cache
 .DS_Store
-package.json
-package-lock.json
-dist
-docs/public/pagefind
+dist/
+dist-cdn/
 node_modules
-src/react
-cdn
-.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,7 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "bierner.lit-html",
-    "bashmish.es6-string-css",
-    "streetsidesoftware.code-spell-checker"
+    "streetsidesoftware.code-spell-checker",
+    "ronnidc.nunjucks"
   ]
 }

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.enable": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },

README.md

@@ -21,7 +21,7 @@ Twitter: [@webawesomer](https://twitter.com/webawesomer)
 
 ## Developers ✨
 
-Developers can use this documentation to learn how to build Web Awesome from source. You will need Node >= 14.17 to build and run the project locally.
+Developers can use this documentation to learn how to build Web Awesome from source. You will need Node.js 14.17 or later to build and run the project locally.
 
 **You don't need to do any of this to use Web Awesome!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Web Awesome.
 
@@ -29,7 +29,29 @@ If that's not what you're trying to do, the [documentation website](https://weba
 
 ### What are you using to build Web Awesome?
 
-Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).
+Components are built with [Lit](https://lit.dev/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).
+
+### Understanding the Web Awesome monorepo
+
+Web Awesome uses [npm workspaces](https://docs.npmjs.com/cli/v11/using-npm/workspaces) for its monorepo structure and is fairly minimal in what it provides.
+
+By using npm workspaces and a monorepo structure, we can get consistent builds, shared configurations, and reduced duplication across repositories which reduces regressions and forces consistency across `webawesome`, `webawesome-pro`, and `webawesome-app`.
+
+Generally, if you plan to only work with the free version of `webawesome` it is easiest to go to `packages/webawesome` and run all commands from there.
+
+### Where do npm dependencies go?
+
+Any dependencies intended to be used across all packages (i.e., `prettier`, `eslint`) that are **not** used at runtime should be in the root `devDependencies` of `package.json`.
+
+```bash
+npm install -D -w prettier
+```
+
+Any dependencies that will be used at runtime by a package should be part of the specific package's `dependencies` such as `lit`. This is required because if that dependency is not in the `packages/*/package.json`, it will not be installed when used via npm.
+
+Individual packages are also free to install `devDependencies` as needed as long as they are specific to that package only.
+
+To install a package specific to a Web Awesome package, change your working directory to that package's root (i.e., `cd packages/webawesome && npm install <package-name>`).
 
 ### Forking the Repo
 
@@ -43,36 +65,49 @@ npm install
 
 ### Developing
 
-Once you've cloned the repo, run the following command.
+Once you've cloned the repo, run the following command from the respective directory within `packages/*`.
 
 ```bash
+cd packages/webawesome
 npm start
 ```
 
-This will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browser's don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.
+This will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browsers don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.
 
 ### Building
 
 To generate a production build, run the following command.
 
 ```bash
+cd packages/webawesome
 npm run build
 ```
 
+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](LICENSE.md).

VERSIONS.txt

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

cspell.json

@@ -5,25 +5,31 @@
     "allowfullscreen",
     "animationend",
     "Animista",
+    "APG",
     "apos",
     "atrule",
+    "autocapitalize",
     "autocorrect",
     "autofix",
+    "autofocus",
     "autoload",
     "autoloader",
     "autoloading",
     "autoplay",
     "bezier",
+    "Blockquotes",
     "boxicons",
     "CACHEABLE",
     "callout",
     "callouts",
+    "canvastext",
     "chatbubble",
     "checkmark",
     "Clippy",
     "codebases",
     "codepen",
     "colocated",
+    "colorjs",
     "colour",
     "combobox",
     "Commonmark",
@@ -38,14 +44,23 @@
     "crutchcorn",
     "csspart",
     "cssproperty",
+    "cssstate",
+    "datalist",
     "datetime",
     "describedby",
+    "dictsort",
     "Docsify",
     "dogfood",
     "dropdowns",
     "easings",
+    "ecommerce",
+    "eleventy",
+    "elif",
+    "endfor",
+    "endmarkdown",
     "endraw",
     "endregion",
+    "endset",
     "enterkeyhint",
     "eqeqeq",
     "erroneou",
@@ -53,7 +68,10 @@
     "esbuild",
     "exportmaps",
     "exportparts",
+    "fetchpriority",
     "fieldsets",
+    "focusin",
+    "focusout",
     "fontawesome",
     "formaction",
     "formdata",
@@ -63,25 +81,31 @@
     "formtarget",
     "FOUC",
     "FOUCE",
+    "Frontmatter",
     "fullscreen",
     "gestern",
     "giga",
     "globby",
     "Grayscale",
+    "groupby",
     "haspopup",
     "heroicons",
     "hexa",
+    "Hotwire",
+    "hrefs",
     "Iconoir",
     "Iframes",
     "iife",
     "inputmode",
     "ionicon",
     "ionicons",
+    "jank",
     "jsDelivr",
     "jsfiddle",
-    "jsonata",
     "keydown",
     "keyframes",
+    "keymaker",
+    "Konnor",
     "Kool",
     "labelledby",
     "Laravel",
@@ -96,8 +120,10 @@
     "Menlo",
     "menuitemcheckbox",
     "menuitemradio",
+    "metaframeworks",
     "middlewares",
     "minlength",
+    "minmax",
     "monospace",
     "mousedown",
     "mousemove",
@@ -106,10 +132,15 @@
     "multiselectable",
     "nextjs",
     "nocheck",
+    "noindex",
     "noopener",
     "noreferrer",
+    "noscript",
+    "Notdog",
     "novalidate",
+    "nowrap",
     "Numberish",
+    "nums",
     "oklab",
     "oklch",
     "onscrollend",
@@ -118,10 +149,13 @@
     "peta",
     "petabit",
     "Preact",
+    "preconnect",
+    "prerendered",
     "prismjs",
     "progressbar",
     "radiogroup",
     "Railsbyte",
+    "referrerpolicy",
     "remixicon",
     "reregister",
     "resizer",
@@ -138,25 +172,32 @@
     "scrollbars",
     "scrollend",
     "scroller",
+    "Scrollers",
     "Segoe",
+    "selectattr",
     "semibold",
+    "shadowrootmode",
     "Shortcode",
     "Shortcodes",
     "sitedir",
     "slotchange",
     "smartquotes",
     "spacebar",
+    "srcdoc",
     "stylesheet",
+    "svgs",
     "Tabbable",
     "tabindex",
     "tabler",
     "tablist",
     "tabpanel",
+    "tbody",
     "templating",
     "tera",
     "testid",
     "textareas",
     "textfield",
+    "thead",
     "Themer",
     "tinycolor",
     "transitionend",
@@ -167,6 +208,7 @@
     "typeof",
     "unbundles",
     "unbundling",
+    "Uncategorized",
     "unicons",
     "unsanitized",
     "unsupportive",
@@ -180,7 +222,8 @@
     "webawesomer",
     "WEBP",
     "Webpacker",
-    "xmark"
+    "xmark",
+    "zoomable"
   ],
   "ignorePaths": [
     "package.json",

docs/.eleventy.js

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

docs/_includes/base.njk

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

docs/_includes/sidebar.njk

@@ -1,242 +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>Components</h2>
-<ul>
-  <li>
-    <a href="/docs/components/animated-image">Animated Image</a>
-  </li>
-  <li>
-    <a href="/docs/components/animation">Animation</a>
-  </li>
-  <li>
-    <a href="/docs/components/avatar">Avatar</a>
-  </li>
-  <li>
-    <a href="/docs/components/badge">Badge</a>
-  </li>
-  <li>
-    <a href="/docs/components/breadcrumb">Breadcrumb</a>
-    <ul>
-      <li>
-        <a href="/docs/components/breadcrumb-item">Breadcrumb Item</a>
-      </li>
-    </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>
-  <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/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>
-  <li>
-    <a href="/docs/components/visually-hidden">Visually Hidden</a>
-  </li>
-</ul>
-
-{# Theming #}
-<h2>Theming</h2>
-<ul>
-  <li>
-    <a href="/docs/theming/color">Color</a>
-  </li>
-  <li>
-    <a href="/docs/theming/typography">Typography</a>
-  </li>
-  <li>
-    <a href="/docs/theming/space">Space</a>
-  </li>
-  <li>
-    <a href="/docs/theming/borders">Borders</a>
-  </li>
-  <li>
-    <a href="/docs/theming/focus">Focus</a>
-  </li>
-  <li>
-    <a href="/docs/theming/shadows">Shadows</a>
-  </li>
-  <li>
-    <a href="/docs/theming/transitions">Transitions</a>
-  </li>
-  <li>
-    <a href="/docs/theming/component-groups">Component Groups</a>
-  </li>
-</ul>

docs/_layouts/page.njk

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

docs/_utils/anchor-headings.js

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

docs/_utils/code-examples.js

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

docs/_utils/copy-code.js

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

docs/_utils/outline.js

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

docs/_utils/search.js

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

docs/assets/scripts/code-examples.js

@@ -1,57 +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\n` +
-      `${code.textContent}`;
-    const css = 'body {\n  font: 16px sans-serif;\n  padding: 1rem;\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,65 +0,0 @@
-//
-// Color scheme selector
-//
-(() => {
-  function getColorScheme() {
-    return localStorage.getItem('colorScheme') || 'auto';
-  }
-
-  function isDark() {
-    if (colorScheme === 'auto') {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-    return colorScheme === 'dark';
-  }
-
-  function setColorScheme(newColorScheme) {
-    colorScheme = newColorScheme;
-    localStorage.setItem('colorScheme', colorScheme);
-
-    // Update the UI
-    updateSelection();
-
-    // Toggle the dark mode class
-    document.documentElement.classList.toggle('wa-theme-default-dark', isDark());
-  }
-
-  function updateSelection() {
-    const menu = document.querySelector('#color-scheme-selector wa-menu');
-    if (!menu) return;
-    [...menu.querySelectorAll('wa-menu-item')].map(item => (item.checked = item.getAttribute('value') === colorScheme));
-  }
-
-  let colorScheme = 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(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/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/scripts/turbo.js

@@ -1,35 +0,0 @@
-import 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/+esm';
-
-if (!window.___turboScrollPositions___) {
-  window.___turboScrollPositions___ = {};
-}
-
-const positions = window.___turboScrollPositions___;
-
-function saveScrollPosition() {
-  document.querySelectorAll('[data-remember-scroll]').forEach(el => {
-    if (el.id) {
-      positions[el.id] = {
-        top: el.scrollTop,
-        left: el.scrollLeft
-      };
-    } else {
-      console.warn(`Can't save scroll position for elements without an id.`, el);
-    }
-  });
-}
-
-function restoreScrollPosition(event) {
-  const el = event.detail?.newBody || document;
-
-  el.querySelectorAll('[data-remember-scroll]').forEach(el => {
-    if (positions[el.id]) {
-      el.scrollTop = positions[el.id].top;
-      el.scrollLeft = positions[el.id].left;
-    }
-  });
-}
-
-window.addEventListener('turbo:before-cache', saveScrollPosition);
-window.addEventListener('turbo:before-render', restoreScrollPosition);
-window.addEventListener('turbo:render', restoreScrollPosition);

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/docs.css

@@ -1,276 +0,0 @@
-@import 'code-examples.css';
-@import 'code-highlighter.css';
-@import 'copy-code.css';
-@import 'outline.css';
-@import 'search.css';
-@import 'cera_typeface.css';
-
-:root {
-  --wa-brand-orange: #f36944;
-  --wa-brand-grey: #30323b;
-}
-
-html.wa-theme-default-dark .only-light,
-html:not(.wa-theme-default-dark) .only-dark {
-  display: none;
-}
-
-wa-page {
-  --wa-flow-spacing: var(--wa-space-xl);
-}
-
-wa-page[view='desktop'] [data-toggle-nav] {
-  display: none;
-}
-
-wa-page[view='desktop'] .only-mobile,
-wa-page:not([view='desktop']) .only-desktop {
-  display: none;
-}
-
-/* Header */
-wa-page::part(header) {
-  background-color: var(--wa-color-surface-default);
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-}
-
-wa-page > header {
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 4rem;
-  padding-inline: var(--wa-space-xl);
-
-  a[href='/'] {
-    color: var(--wa-color-text-normal);
-    line-height: 1;
-  }
-
-  wa-button[data-toggle-nav] {
-    --label-color: currentColor;
-    margin-inline-start: -0.875rem;
-    margin-inline-end: 0;
-
-    &::part(base) {
-      padding: 0;
-      padding-inline: 0.875rem;
-    }
-  }
-
-  svg {
-    width: auto;
-    height: 1.75rem;
-  }
-
-  #docs-branding,
-  #docs-toolbar {
-    display: flex;
-    align-items: center;
-    gap: var(--wa-space-xs);
-  }
-
-  #version-number {
-    color: var(--wa-color-text-quiet);
-    font-size: var(--wa-font-size-xs);
-    line-height: 1;
-    margin-block-start: var(--wa-space-2xs);
-  }
-  #version-number + wa-badge {
-    --background-color: var(--wa-color-warning-fill-quiet);
-    --content-color: var(--wa-color-warning-on-quiet);
-    font-size: var(--wa-font-size-2xs);
-    text-transform: uppercase;
-  }
-  wa-button#search-trigger {
-    --background-color: var(--wa-form-control-background-color);
-    --border-color: var(--wa-form-control-resting-color);
-  }
-  #search-trigger kbd {
-    font-size: var(--wa-font-size-2xs);
-    line-height: var(--wa-form-control-value-line-height);
-  }
-}
-
-/* Navigation sidebar */
-wa-page[view='desktop']::part(navigation) {
-  border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-}
-
-wa-page[view='desktop'] > #sidebar {
-  min-width: 300px;
-  padding: var(--wa-space-xl);
-  max-width: 300px;
-  overflow: auto;
-  max-height: 100%;
-}
-
-#sidebar,
-#outline {
-  h2 {
-    font-size: var(--wa-font-size-m);
-    margin-block-end: var(--wa-space-m);
-  }
-  h2:not(:first-of-type) {
-    margin-block-start: var(--wa-space-xl);
-  }
-  ul {
-    border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
-    font-size: var(--wa-font-size-s);
-    line-height: var(--wa-line-height-condensed);
-    margin: 0;
-    padding-inline-start: var(--wa-space-m);
-  }
-  ul ul {
-    margin-block-start: var(--wa-space-m);
-  }
-  li {
-    list-style: none;
-    margin-block-end: var(--wa-space-m);
-  }
-  li a {
-    color: var(--wa-color-text-normal);
-    text-decoration: none;
-  }
-  li a:hover {
-    text-decoration: underline;
-  }
-}
-
-#sidebar-close-button {
-  display: none;
-}
-
-@media screen and (max-width: 768px) {
-  #sidebar-close-button {
-    display: inline-block;
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-  }
-}
-
-#sidebar nav {
-  padding-bottom: 1rem;
-}
-
-wa-page::part(menu) {
-  scrollbar-width: thin;
-}
-
-/* Main content */
-wa-page > main {
-  max-width: 80ch;
-  padding: var(--wa-space-xl);
-  margin-inline: auto;
-}
-
-wa-page[view='desktop'] > main {
-  padding: var(--wa-space-3xl);
-}
-
-.component-info {
-  margin-block-end: var(--wa-flow-spacing);
-}
-
-/* Current link */
-#sidebar,
-#outline {
-  .current {
-    font-weight: var(--wa-font-weight-bold);
-    text-decoration-style: solid;
-  }
-}
-
-/* Anchor headings */
-.anchor-heading a {
-  visibility: hidden;
-  text-decoration: none;
-}
-
-@media (hover: hover) {
-  .anchor-heading:hover a {
-    visibility: visible;
-    padding: 0 0.125em;
-  }
-}
-
-/* Callouts */
-.callout {
-  display: flex;
-  gap: 1rem;
-  border: var(--wa-border-style) var(--wa-border-width-s);
-  border-radius: var(--wa-border-radius-m);
-  padding: 1rem;
-  margin-block-end: var(--wa-flow-spacing);
-
-  :first-child {
-    margin-block-start: 0;
-  }
-
-  :last-child {
-    margin-block-end: 0;
-  }
-}
-
-.callout-icon {
-  flex: 0 0 auto;
-  font-size: 1.5rem;
-}
-
-.callout-content {
-  flex: 1 1 auto;
-}
-
-.callout-info {
-  background-color: var(--wa-color-brand-fill-quiet);
-  border-color: var(--wa-color-brand-border-quiet);
-
-  .callout-icon {
-    color: var(--wa-color-brand-on-normal);
-  }
-
-  code {
-    background-color: var(--wa-color-brand-fill-normal);
-  }
-}
-
-.callout-warning {
-  background-color: var(--wa-color-warning-fill-quiet);
-  border-color: var(--wa-color-warning-border-quiet);
-
-  .callout-icon {
-    color: var(--wa-color-warning-on-normal);
-  }
-
-  code {
-    background-color: var(--wa-color-warning-fill-normal);
-  }
-}
-
-/* Swatches */
-.swatch {
-  background-color: transparent;
-  border-color: var(--wa-color-neutral-border-normal);
-  border-style: var(--wa-border-style);
-  border-width: var(--wa-border-width-s);
-  border-radius: var(--wa-border-radius-s);
-  box-sizing: border-box;
-  line-height: 2.5;
-  height: 2.5em;
-  padding-inline: var(--wa-space-xs);
-}
-
-/* Utilities */
-.two-columns {
-  columns: 2;
-  gap: 1rem;
-}
-
-.component-table td > * + * {
-  margin-block-start: var(--wa-space-s);
-}
-
-.table-scroll {
-  overflow-x: auto;
-}

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/breadcrumb-item.md

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

docs/docs/components/callout.md

@@ -1,66 +0,0 @@
----
-title: Callout
-description: Callouts are used to display important messages inline.
-layout: component
----
-
-```html {.example}
-<wa-callout>
-  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
-  This is a standard callout. You can customize its content and even the icon.
-</wa-callout>
-```
-
-## Examples
-
-### Variants
-
-Set the `variant` attribute to change the callout's variant.
-
-```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 callout 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 effect 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>
-```
-
-### Without Icons
-
-Icons are optional. Simply omit the `icon` slot if you don't want them.
-
-```html {.example}
-<wa-callout variant="brand"> Nothing fancy here, just a simple callout. </wa-callout>
-```

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/carousel-item.md

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

docs/docs/components/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/dropdown.md

@@ -1,216 +0,0 @@
----
-title: Dropdown
-description: 'Dropdowns expose additional content that "drops down" in a panel.'
-layout: component
----
-
-Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.
-
-Dropdowns are designed to work well with [menus](/docs/components/menu) to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. [color picker](/docs/components/color-picker)). The API gives you complete control over showing, hiding, and positioning the panel.
-
-```html {.example}
-<wa-dropdown>
-  <wa-button slot="trigger" caret>Dropdown</wa-button>
-  <wa-menu>
-    <wa-menu-item>Dropdown Item 1</wa-menu-item>
-    <wa-menu-item>Dropdown Item 2</wa-menu-item>
-    <wa-menu-item>Dropdown Item 3</wa-menu-item>
-    <wa-divider></wa-divider>
-    <wa-menu-item type="checkbox" checked>Checkbox</wa-menu-item>
-    <wa-menu-item disabled>Disabled</wa-menu-item>
-    <wa-divider></wa-divider>
-    <wa-menu-item>
-      Prefix
-      <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
-    </wa-menu-item>
-    <wa-menu-item>
-      Suffix Icon
-      <wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
-    </wa-menu-item>
-  </wa-menu>
-</wa-dropdown>
-```
-
-## Examples
-
-### Getting the Selected Item
-
-When dropdowns are used with [menus](/docs/components/menu), you can listen for the [`wa-select`](/docs/components/menu#events) event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands.
-
-```html {.example}
-<div class="dropdown-selection">
-  <wa-dropdown>
-    <wa-button slot="trigger" caret>Edit</wa-button>
-    <wa-menu>
-      <wa-menu-item value="cut">Cut</wa-menu-item>
-      <wa-menu-item value="copy">Copy</wa-menu-item>
-      <wa-menu-item value="paste">Paste</wa-menu-item>
-    </wa-menu>
-  </wa-dropdown>
-</div>
-
-<script>
-  const container = document.querySelector('.dropdown-selection');
-  const dropdown = container.querySelector('wa-dropdown');
-
-  dropdown.addEventListener('wa-select', event => {
-    const selectedItem = event.detail.item;
-    console.log(selectedItem.value);
-  });
-</script>
-```
-
-Alternatively, you can listen for the `click` event on individual menu items. Note that, using this approach, disabled menu items will still emit a `click` event.
-
-```html {.example}
-<div class="dropdown-selection-alt">
-  <wa-dropdown>
-    <wa-button slot="trigger" caret>Edit</wa-button>
-    <wa-menu>
-      <wa-menu-item value="cut">Cut</wa-menu-item>
-      <wa-menu-item value="copy">Copy</wa-menu-item>
-      <wa-menu-item value="paste">Paste</wa-menu-item>
-    </wa-menu>
-  </wa-dropdown>
-</div>
-
-<script>
-  const container = document.querySelector('.dropdown-selection-alt');
-  const cut = container.querySelector('wa-menu-item[value="cut"]');
-  const copy = container.querySelector('wa-menu-item[value="copy"]');
-  const paste = container.querySelector('wa-menu-item[value="paste"]');
-
-  cut.addEventListener('click', () => console.log('cut'));
-  copy.addEventListener('click', () => console.log('copy'));
-  paste.addEventListener('click', () => console.log('paste'));
-</script>
-```
-
-### Placement
-
-The preferred placement of the dropdown can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport.
-
-```html {.example}
-<wa-dropdown placement="top-start">
-  <wa-button slot="trigger" caret>Edit</wa-button>
-  <wa-menu>
-    <wa-menu-item>Cut</wa-menu-item>
-    <wa-menu-item>Copy</wa-menu-item>
-    <wa-menu-item>Paste</wa-menu-item>
-    <wa-divider></wa-divider>
-    <wa-menu-item>Find</wa-menu-item>
-    <wa-menu-item>Replace</wa-menu-item>
-  </wa-menu>
-</wa-dropdown>
-```
-
-### Distance
-
-The distance from the panel to the trigger can be customized using the `distance` attribute. This value is specified in pixels.
-
-```html {.example}
-<wa-dropdown distance="30">
-  <wa-button slot="trigger" caret>Edit</wa-button>
-  <wa-menu>
-    <wa-menu-item>Cut</wa-menu-item>
-    <wa-menu-item>Copy</wa-menu-item>
-    <wa-menu-item>Paste</wa-menu-item>
-    <wa-divider></wa-divider>
-    <wa-menu-item>Find</wa-menu-item>
-    <wa-menu-item>Replace</wa-menu-item>
-  </wa-menu>
-</wa-dropdown>
-```
-
-### Skidding
-
-The offset of the panel along the trigger can be customized using the `skidding` attribute. This value is specified in pixels.
-
-```html {.example}
-<wa-dropdown skidding="30">
-  <wa-button slot="trigger" caret>Edit</wa-button>
-  <wa-menu>
-    <wa-menu-item>Cut</wa-menu-item>
-    <wa-menu-item>Copy</wa-menu-item>
-    <wa-menu-item>Paste</wa-menu-item>
-    <wa-divider></wa-divider>
-    <wa-menu-item>Find</wa-menu-item>
-    <wa-menu-item>Replace</wa-menu-item>
-  </wa-menu>
-</wa-dropdown>
-```
-
-### Submenus
-
-To create a submenu, nest an `<wa-menu slot="submenu">` element in a [menu item](/docs/components/menu-item).
-
-```html {.example}
-<wa-dropdown>
-  <wa-button slot="trigger" caret>Edit</wa-button>
-
-  <wa-menu style="max-width: 200px;">
-    <wa-menu-item value="undo">Undo</wa-menu-item>
-    <wa-menu-item value="redo">Redo</wa-menu-item>
-    <wa-divider></wa-divider>
-    <wa-menu-item value="cut">Cut</wa-menu-item>
-    <wa-menu-item value="copy">Copy</wa-menu-item>
-    <wa-menu-item value="paste">Paste</wa-menu-item>
-    <wa-divider></wa-divider>
-    <wa-menu-item>
-      Find
-      <wa-menu slot="submenu">
-        <wa-menu-item value="find">Find…</wa-menu-item>
-        <wa-menu-item value="find-previous">Find Next</wa-menu-item>
-        <wa-menu-item value="find-next">Find Previous</wa-menu-item>
-      </wa-menu>
-    </wa-menu-item>
-    <wa-menu-item>
-      Transformations
-      <wa-menu slot="submenu">
-        <wa-menu-item value="uppercase">Make uppercase</wa-menu-item>
-        <wa-menu-item value="lowercase">Make lowercase</wa-menu-item>
-        <wa-menu-item value="capitalize">Capitalize</wa-menu-item>
-      </wa-menu>
-    </wa-menu-item>
-  </wa-menu>
-</wa-dropdown>
-```
-
-:::warning
-As a UX best practice, avoid using more than one level of submenu when possible.
-:::
-
-### Hoisting
-
-Dropdown panels will be clipped if they're inside a container that has `overflow: auto|hidden`. The `hoist` attribute forces the panel to use a fixed positioning strategy, allowing it to break out of the container. In this case, the panel will be positioned relative to its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.
-
-```html {.example}
-<div class="dropdown-hoist">
-  <wa-dropdown>
-    <wa-button slot="trigger" caret>No Hoist</wa-button>
-    <wa-menu>
-      <wa-menu-item>Item 1</wa-menu-item>
-      <wa-menu-item>Item 2</wa-menu-item>
-      <wa-menu-item>Item 3</wa-menu-item>
-    </wa-menu>
-  </wa-dropdown>
-
-  <wa-dropdown hoist>
-    <wa-button slot="trigger" caret>Hoist</wa-button>
-    <wa-menu>
-      <wa-menu-item>Item 1</wa-menu-item>
-      <wa-menu-item>Item 2</wa-menu-item>
-      <wa-menu-item>Item 3</wa-menu-item>
-    </wa-menu>
-  </wa-dropdown>
-</div>
-
-<style>
-  .dropdown-hoist {
-    position: relative;
-    border: solid 2px var(--wa-color-surface-border);
-    padding: var(--wa-space-m);
-    overflow: hidden;
-  }
-</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
-
-Wrap a tooltip around an icon button to provide contextual information to the user.
-
-```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/menu-item.md

@@ -1,123 +0,0 @@
----
-title: Menu Item
-description: Menu items provide options for the user to pick from in a menu.
-layout: component
----
-
-```html {.example}
-<wa-menu style="max-width: 200px;">
-  <wa-menu-item>Option 1</wa-menu-item>
-  <wa-menu-item>Option 2</wa-menu-item>
-  <wa-menu-item>Option 3</wa-menu-item>
-  <wa-divider></wa-divider>
-  <wa-menu-item type="checkbox" checked>Checkbox</wa-menu-item>
-  <wa-menu-item disabled>Disabled</wa-menu-item>
-  <wa-divider></wa-divider>
-  <wa-menu-item>
-    Prefix Icon
-    <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
-  </wa-menu-item>
-  <wa-menu-item>
-    Suffix Icon
-    <wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
-  </wa-menu-item>
-</wa-menu>
-```
-
-## Examples
-
-### Prefix & Suffix
-
-Add content to the start and end of menu items using the `prefix` and `suffix` slots.
-
-```html {.example}
-<wa-menu style="max-width: 200px;">
-  <wa-menu-item>
-    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
-    Home
-  </wa-menu-item>
-
-  <wa-menu-item>
-    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
-    Messages
-    <wa-badge slot="suffix" variant="brand" pill>12</wa-badge>
-  </wa-menu-item>
-
-  <wa-divider></wa-divider>
-
-  <wa-menu-item>
-    <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-    Settings
-  </wa-menu-item>
-</wa-menu>
-```
-
-### Disabled
-
-Add the `disabled` attribute to disable the menu item so it cannot be selected.
-
-```html {.example}
-<wa-menu style="max-width: 200px;">
-  <wa-menu-item>Option 1</wa-menu-item>
-  <wa-menu-item disabled>Option 2</wa-menu-item>
-  <wa-menu-item>Option 3</wa-menu-item>
-</wa-menu>
-```
-
-### Loading
-
-Use the `loading` attribute to indicate that a menu item is busy. Like a disabled menu item, clicks will be suppressed until the loading state is removed.
-
-```html {.example}
-<wa-menu style="max-width: 200px;">
-  <wa-menu-item>Option 1</wa-menu-item>
-  <wa-menu-item loading>Option 2</wa-menu-item>
-  <wa-menu-item>Option 3</wa-menu-item>
-</wa-menu>
-```
-
-### Checkbox Menu Items
-
-Set the `type` attribute to `checkbox` to create a menu item that will toggle on and off when selected. You can use the `checked` attribute to set the initial state.
-
-Checkbox menu items are visually indistinguishable from regular menu items. Their ability to be toggled is primarily inferred from context, much like you'd find in the menu of a native app.
-
-```html {.example}
-<wa-menu style="max-width: 200px;">
-  <wa-menu-item type="checkbox">Autosave</wa-menu-item>
-  <wa-menu-item type="checkbox" checked>Check Spelling</wa-menu-item>
-  <wa-menu-item type="checkbox">Word Wrap</wa-menu-item>
-</wa-menu>
-```
-
-### Value & Selection
-
-The `value` attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the `wa-select` event will be emitted and a reference to the item will be available at `event.detail.item`. You can use this reference to access the selected item's value, its checked state, and more.
-
-```html {.example}
-<wa-menu class="menu-value" style="max-width: 200px;">
-  <wa-menu-item value="opt-1">Option 1</wa-menu-item>
-  <wa-menu-item value="opt-2">Option 2</wa-menu-item>
-  <wa-menu-item value="opt-3">Option 3</wa-menu-item>
-  <wa-divider></wa-divider>
-  <wa-menu-item type="checkbox" value="opt-4">Checkbox 4</wa-menu-item>
-  <wa-menu-item type="checkbox" value="opt-5">Checkbox 5</wa-menu-item>
-  <wa-menu-item type="checkbox" value="opt-6">Checkbox 6</wa-menu-item>
-</wa-menu>
-
-<script>
-  const menu = document.querySelector('.menu-value');
-
-  menu.addEventListener('wa-select', event => {
-    const item = event.detail.item;
-
-    // Log value
-    if (item.type === 'checkbox') {
-      console.log(`Selected value: ${item.value} (${item.checked ? 'checked' : 'unchecked'})`);
-    } else {
-      console.log(`Selected value: ${item.value}`);
-    }
-  });
-</script>
-```
-

docs/docs/components/menu-label.md

@@ -1,19 +0,0 @@
----
-title: Menu Label
-description: Menu labels are used to describe a group of menu items.
-layout: component
----
-
-```html {.example}
-<wa-menu style="max-width: 200px;">
-  <wa-menu-label>Fruits</wa-menu-label>
-  <wa-menu-item value="apple">Apple</wa-menu-item>
-  <wa-menu-item value="banana">Banana</wa-menu-item>
-  <wa-menu-item value="orange">Orange</wa-menu-item>
-  <wa-divider></wa-divider>
-  <wa-menu-label>Vegetables</wa-menu-label>
-  <wa-menu-item value="broccoli">Broccoli</wa-menu-item>
-  <wa-menu-item value="carrot">Carrot</wa-menu-item>
-  <wa-menu-item value="zucchini">Zucchini</wa-menu-item>
-</wa-menu>
-```

docs/docs/components/menu.md

@@ -1,76 +0,0 @@
----
-title: Menu
-description: Menus provide a list of options for the user to choose from.
-layout: component
----
-
-You can use [menu items](/docs/components/menu-item), [menu labels](/docs/components/menu-label), and [dividers](/docs/components/divider) to compose a menu. Menus support keyboard interactions, including type-to-select an option.
-
-```html {.example}
-<wa-menu style="max-width: 200px;">
-  <wa-menu-item value="undo">Undo</wa-menu-item>
-  <wa-menu-item value="redo">Redo</wa-menu-item>
-  <wa-divider></wa-divider>
-  <wa-menu-item value="cut">Cut</wa-menu-item>
-  <wa-menu-item value="copy">Copy</wa-menu-item>
-  <wa-menu-item value="paste">Paste</wa-menu-item>
-  <wa-menu-item value="delete">Delete</wa-menu-item>
-</wa-menu>
-```
-
-:::info
-Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you're building navigation, use `<nav>` and `<a>` elements instead.
-:::
-
-## Examples
-
-### In Dropdowns
-
-Menus work really well when used inside [dropdowns](/docs/components/dropdown).
-
-```html {.example}
-<wa-dropdown>
-  <wa-button slot="trigger" caret>Edit</wa-button>
-  <wa-menu>
-    <wa-menu-item value="cut">Cut</wa-menu-item>
-    <wa-menu-item value="copy">Copy</wa-menu-item>
-    <wa-menu-item value="paste">Paste</wa-menu-item>
-  </wa-menu>
-</wa-dropdown>
-```
-
-### Submenus
-
-To create a submenu, nest an `<wa-menu slot="submenu">` in any [menu item](/docs/components/menu-item).
-
-```html {.example}
-<wa-menu style="max-width: 200px;">
-  <wa-menu-item value="undo">Undo</wa-menu-item>
-  <wa-menu-item value="redo">Redo</wa-menu-item>
-  <wa-divider></wa-divider>
-  <wa-menu-item value="cut">Cut</wa-menu-item>
-  <wa-menu-item value="copy">Copy</wa-menu-item>
-  <wa-menu-item value="paste">Paste</wa-menu-item>
-  <wa-divider></wa-divider>
-  <wa-menu-item>
-    Find
-    <wa-menu slot="submenu">
-      <wa-menu-item value="find">Find…</wa-menu-item>
-      <wa-menu-item value="find-previous">Find Next</wa-menu-item>
-      <wa-menu-item value="find-next">Find Previous</wa-menu-item>
-    </wa-menu>
-  </wa-menu-item>
-  <wa-menu-item>
-    Transformations
-    <wa-menu slot="submenu">
-      <wa-menu-item value="uppercase">Make uppercase</wa-menu-item>
-      <wa-menu-item value="lowercase">Make lowercase</wa-menu-item>
-      <wa-menu-item value="capitalize">Capitalize</wa-menu-item>
-    </wa-menu>
-  </wa-menu-item>
-</wa-menu>
-```
-
-:::warning
-As a UX best practice, avoid using more than one level of submenus when possible.
-:::

docs/docs/components/option.md

@@ -1,53 +0,0 @@
----
-title: Option
-description: Options define the selectable items within various form controls such as select.
-layout: component
----
-
-```html {.example}
-<wa-select label="Select one">
-  <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>
-```
-
-## Examples
-
-### Disabled
-
-Use the `disabled` attribute to disable an option and prevent it from being selected.
-
-```html {.example}
-<wa-select label="Select one">
-  <wa-option value="option-1">Option 1</wa-option>
-  <wa-option value="option-2" disabled>Option 2</wa-option>
-  <wa-option value="option-3">Option 3</wa-option>
-</wa-select>
-```
-
-### Prefix & Suffix
-
-Add icons to the start and end of menu items using the `prefix` and `suffix` slots.
-
-```html {.example}
-<wa-select label="Select one">
-  <wa-option value="option-1">
-    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
-    Email
-    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
-  </wa-option>
-
-  <wa-option value="option-2">
-    <wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
-    Phone
-    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
-  </wa-option>
-
-  <wa-option value="option-3">
-    <wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
-    Chat
-    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
-  </wa-option>
-</wa-select>
-```

docs/docs/components/page.md

@@ -1,118 +0,0 @@
----
-title: Page
-description: Layouts offer an easy way to scaffold pages using minimal markup.
-layout: component
----
-
-The layout 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.
-
-A number of sections are available as part of the layout, most of which are optional. Content is added 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, it is recommended that you slot in content sectioning elements wherever you feel they're appropriate.
-
-## Layout Anatomy
-
-This image depicts the layout'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 of the layout you actually need.
-
-![Screenshot of Layout Anatomy showing various slots](/assets/images/layout-anatomy.svg)
-
-:::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.
-:::
-
-## Sticky Sections
-
-The following sections of the layout are "sticky" by default, meaning they remain in position as the user scrolls.
-
-- `banner`
-- `header`
-- `sub-header`
-- `aside`
-- `menu`
-
-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 layout which sections should not be sticky.
-
-```html
-<wa-page disable-sticky="header aside"> ... </wa-page>
-```
-
-## How to Apply Spacing to Your Layout
-
-The layout component _does not_ apply spacing for you. You can apply the appropriate paddings or margins directly to the elements you slot in to fine tune your spacing needs.
-
-TODO - add example here
-
-When using `<wa-page>`, make sure to zero out all paddings and margins on `<html>` and `<body>`, otherwise you may see unexpected gaps. The following styles are highly recommended when using `<wa-page>`.
-
-```css
-html,
-body {
-  min-height: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-}
-```
-
-## 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
-
-The layout component tries not to have too many opinions in terms of responsive behaviors — you get to decide with your own CSS and media queries how your content responds! However, the navigation menu _does_ respond by collapsing 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>
-```
-
-You can provide a button to toggle the navigation menu anywhere inside the layout by adding the `data-toggle-nav` attribute. (This _does not_ have to be a Web Awesome button.)
-
-```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>
-```
-
-## Providing Navigation Items
-
-- TODO - example with navigation items
-- TODO - example with`<h2>` and `<a>` as navigation items
-
-## Examples
-
-### Hero Layout
-
-- TODO - Sticky header + main + footer
-
-### Blog Layout
-
-- TODO - Sticky header + main + aside + footer (blog)
-
-### App Layout
-
-- TODO - Menu + main, plus maybe headers and footers in each (app)
-
-### Docs Layout
-
-- TODO - Menu + main + aside + footer (docs)

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/radio.md

@@ -1,73 +0,0 @@
----
-title: Radio
-description: Radios allow the user to select a single option from a group.
-layout: component
----
-
-Radios are designed to be used with [radio groups](/docs/components/radio-group).
-
-```html {.example}
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio value="1">Option 1</wa-radio><br>
-  <wa-radio value="2">Option 2</wa-radio><br>
-  <wa-radio value="3">Option 3</wa-radio>
-</wa-radio-group>
-```
-
-:::info
-This component works with standard `<form>` elements. Please refer to the section on [form controls](/docs/form-controls) to learn more about form submission and client-side validation.
-:::
-
-## Examples
-
-### Initial Value
-
-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="3">
-  <wa-radio value="1">Option 1</wa-radio><br>
-  <wa-radio value="2">Option 2</wa-radio><br>
-  <wa-radio value="3">Option 3</wa-radio>
-</wa-radio-group>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a radio.
-
-```html {.example}
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio value="1">Option 1</wa-radio><br>
-  <wa-radio value="2" disabled>Option 2</wa-radio><br>
-  <wa-radio value="3">Option 3</wa-radio>
-</wa-radio-group>
-```
-
-## Sizes
-
-Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to change the radios' size.
-
-```html {.example}
-<wa-radio-group size="small" value="1">
-  <wa-radio value="1">Small 1</wa-radio><br>
-  <wa-radio value="2">Small 2</wa-radio><br>
-  <wa-radio value="3">Small 3</wa-radio>
-</wa-radio-group>
-
-<br />
-
-<wa-radio-group size="medium" value="1">
-  <wa-radio value="1">Medium 1</wa-radio><br>
-  <wa-radio value="2">Medium 2</wa-radio><br>
-  <wa-radio value="3">Medium 3</wa-radio>
-</wa-radio-group>
-
-<br />
-
-<wa-radio-group size="large" value="1">
-  <wa-radio value="1">Large 1</wa-radio><br>
-  <wa-radio value="2">Large 2</wa-radio><br>
-  <wa-radio value="3">Large 3</wa-radio>
-</wa-radio-group>
-```

docs/docs/components/range.md

@@ -1,105 +0,0 @@
----
-title: Range
-description: Ranges allow the user to select a single value within a given range using a slider.
-layout: component
----
-
-```html {.example}
-<wa-range></wa-range>
-```
-
-:::info
-This component works with standard `<form>` elements. Please refer to the section on [form controls](/docs/form-controls) to learn more about form submission and client-side validation.
-:::
-
-## Examples
-
-### Labels
-
-Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.
-
-```html {.example}
-<wa-range label="Volume" min="0" max="100"></wa-range>
-```
-
-### Help Text
-
-Add descriptive help text to a range with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
-
-```html {.example}
-<wa-range label="Volume" help-text="Controls the volume of the current song." min="0" max="100"></wa-range>
-```
-
-### Min, Max, and Step
-
-Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.
-
-```html {.example}
-<wa-range min="0" max="10" step="1"></wa-range>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a slider.
-
-```html {.example}
-<wa-range disabled></wa-range>
-```
-
-### Tooltip Placement
-
-By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
-
-```html {.example}
-<wa-range tooltip="bottom"></wa-range>
-```
-
-### Disable the Tooltip
-
-To disable the tooltip, set `tooltip` to `none`.
-
-```html {.example}
-<wa-range tooltip="none"></wa-range>
-```
-
-### Custom Track Colors
-
-You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.
-
-```html {.example}
-<wa-range
-  style="
-  --track-color-active: var(--wa-color-brand-fill-loud);
-  --track-color-inactive: var(--wa-color-brand-fill-normal);
-"
-></wa-range>
-```
-
-### Custom Track Offset
-
-You can customize the initial offset of the active track using the `--track-active-offset` custom property.
-
-```html {.example}
-<wa-range
-  min="-100"
-  max="100"
-  style="
-  --track-color-active: var(--wa-color-brand-fill-loud);
-  --track-color-inactive: var(--wa-color-brand-fill-normal);
-  --track-active-offset: 50%;
-"
-></wa-range>
-```
-
-### Custom Tooltip Formatter
-
-You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.
-
-```html {.example}
-<wa-range min="0" max="100" step="1" class="range-with-custom-formatter"></wa-range>
-
-<script>
-  const range = document.querySelector('.range-with-custom-formatter');
-  range.tooltipFormatter = value => `Total - ${value}%`;
-</script>
-```

docs/docs/components/select.md

@@ -1,275 +0,0 @@
----
-title: Select
-description: Selects allow you to choose items from a menu of predefined options.
-layout: component
----
-
-```html {.example}
-<wa-select>
-  <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>
-```
-
-:::info
-This component works with standard `<form>` elements. Please refer to the section on [form controls](/docs/form-controls) to learn more about form submission and client-side validation.
-:::
-
-## Examples
-
-### Labels
-
-Use the `label` attribute to give the select an accessible label. For labels that contain HTML, use the `label` slot instead.
-
-```html {.example}
-<wa-select label="Select one">
-  <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>
-```
-
-### Help Text
-
-Add descriptive help text to a select with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
-
-```html {.example}
-<wa-select label="Experience" help-text="Please tell us your skill level.">
-  <wa-option value="1">Novice</wa-option>
-  <wa-option value="2">Intermediate</wa-option>
-  <wa-option value="3">Advanced</wa-option>
-</wa-select>
-```
-
-### Placeholders
-
-Use the `placeholder` attribute to add a placeholder.
-
-```html {.example}
-<wa-select placeholder="Select one">
-  <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>
-```
-
-### Clearable
-
-Use the `clearable` attribute to make the control clearable. The clear button only appears when an option is selected.
-
-```html {.example}
-<wa-select clearable value="option-1">
-  <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>
-```
-
-### Filled Selects
-
-Add the `filled` attribute to draw a filled select.
-
-```html {.example}
-<wa-select filled>
-  <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>
-```
-
-### Pill
-
-Use the `pill` attribute to give selects rounded edges.
-
-```html {.example}
-<wa-select pill>
-  <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>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a select.
-
-```html {.example}
-<wa-select placeholder="Disabled" disabled>
-  <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>
-```
-
-### Multiple
-
-To allow multiple options to be selected, use the `multiple` attribute. It's a good practice to use `clearable` when this option is enabled. To set multiple values at once, set `value` to a space-delimited list of values.
-
-```html {.example}
-<wa-select label="Select a Few" value="option-1 option-2 option-3" multiple clearable>
-  <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>
-```
-
-:::info
-Note that multi-select options may wrap, causing the control to expand vertically. You can use the `max-options-visible` attribute to control the maximum number of selected options to show at once.
-:::
-
-### Setting Initial Values
-
-Use the `value` attribute to set the initial selection.
-
-When using `multiple`, the `value` _attribute_ uses space-delimited values to select more than one option. Because of this, `<wa-option>` values cannot contain spaces. If you're accessing the `value` _property_ through Javascript, it will be an array.
-
-```html {.example}
-<wa-select value="option-1 option-2" multiple clearable>
-  <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-select>
-```
-
-### Grouping Options
-
-Use `<wa-divider>` to group listbox items visually. You can also use `<small>` to provide labels, but they won't be announced by most assistive devices.
-
-```html {.example}
-<wa-select>
-  <small>Section 1</small>
-  <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-divider></wa-divider>
-  <small>Section 2</small>
-  <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>
-```
-
-### Sizes
-
-Use the `size` attribute to change a select's size. Note that size does not apply to listbox options.
-
-```html {.example}
-<wa-select placeholder="Small" size="small">
-  <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>
-
-<br />
-
-<wa-select placeholder="Medium" size="medium">
-  <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>
-
-<br />
-
-<wa-select placeholder="Large" size="large">
-  <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>
-```
-
-### Placement
-
-The preferred placement of the select's listbox can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport. Valid placements are `top` and `bottom`.
-
-```html {.example}
-<wa-select placement="top">
-  <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>
-```
-
-### Prefix Icons
-
-Use the `prefix` slot to prepend an icon to the control.
-
-```html {.example}
-<wa-select placeholder="Small" size="small" clearable>
-  <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
-  <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>
-<br />
-<wa-select placeholder="Medium" size="medium" clearable>
-  <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
-  <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>
-<br />
-<wa-select placeholder="Large" size="large" clearable>
-  <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
-  <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>
-```
-
-### Custom Tags
-
-When multiple options can be selected, you can provide custom tags by passing a function to the `getTag` property. Your function can return a string of HTML, a <a href="https://lit.dev/docs/templates/overview/">Lit Template</a>, or an [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). The `getTag()` function will be called for each option. The first argument is an `<wa-option>` element and the second argument is the tag's index (its position in the tag list).
-
-Remember that custom tags are rendered in a shadow root. To style them, you can use the `style` attribute in your template or you can add your own [parts](/docs/customizing/#css-parts) and target them with the [`::part()`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) selector.
-
-```html {.example}
-<wa-select
-  placeholder="Select one"
-  value="email phone"
-  multiple
-  clearable
-  class="custom-tag"
->
-  <wa-option value="email">
-    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
-    Email
-  </wa-option>
-  <wa-option value="phone">
-    <wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
-    Phone
-  </wa-option>
-  <wa-option value="chat">
-    <wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
-    Chat
-  </wa-option>
-</wa-select>
-
-<script type="module">
-  const select = document.querySelector('.custom-tag');
-
-  select.getTag = (option, index) => {
-    // Use the same icon used in the <wa-option>
-    const name = option.querySelector('wa-icon[slot="prefix"]').name;
-
-    // You can return a string, a Lit Template, or an HTMLElement here
-    return `
-      <wa-tag removable>
-        <wa-icon name="${name}" style="padding-inline-end: .5rem;"></wa-icon>
-        ${option.getTextLabel()}
-      </wa-tag>
-    `;
-  };
-</script>
-```
-
-:::warning
-Be sure you trust the content you are outputting! Passing unsanitized user input to `getTag()` can result in XSS vulnerabilities.
-:::

docs/docs/components/tab-panel.md

@@ -1,23 +0,0 @@
----
-title: Tab Panel
-description: Tab panels are used inside tab groups to display tabbed content.
-layout: component
----
-
-```html {.example}
-<wa-tab-group>
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
-
-  <wa-tab-panel name="general">This is the general tab panel.</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>
-```
-
-:::info
-Additional demonstrations can be found in the [tab group examples](/docs/components/tab-group).
-:::

docs/docs/components/tab.md

@@ -1,9 +0,0 @@
----
-title: Tab
-description: Tabs are used inside tab groups to represent and activate tab panels.
-layout: component
----
-
-:::info
-Additional demonstrations can be found in the [tab group examples](/docs/components/tab-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/tree-item.md

@@ -1,81 +0,0 @@
----
-title: Tree Item
-description: A tree item serves as a hierarchical node that lives inside a tree.
-layout: component
----
-
-```html {.example}
-<wa-tree>
-  <wa-tree-item>
-    Item 1
-    <wa-tree-item>Item A</wa-tree-item>
-    <wa-tree-item>Item B</wa-tree-item>
-    <wa-tree-item>Item C</wa-tree-item>
-  </wa-tree-item>
-  <wa-tree-item>Item 2</wa-tree-item>
-  <wa-tree-item>Item 3</wa-tree-item>
-</wa-tree>
-```
-
-## Examples
-
-### Nested tree items
-
-A tree item can contain other tree items. This allows the node to be expanded or collapsed by the user.
-
-```html {.example}
-<wa-tree>
-  <wa-tree-item>
-    Item 1
-    <wa-tree-item>
-      Item A
-      <wa-tree-item>Item Z</wa-tree-item>
-      <wa-tree-item>Item Y</wa-tree-item>
-      <wa-tree-item>Item X</wa-tree-item>
-    </wa-tree-item>
-    <wa-tree-item>Item B</wa-tree-item>
-    <wa-tree-item>Item C</wa-tree-item>
-  </wa-tree-item>
-  <wa-tree-item>Item 2</wa-tree-item>
-  <wa-tree-item>Item 3</wa-tree-item>
-</wa-tree>
-```
-
-### Selected
-
-Use the `selected` attribute to select a tree item initially.
-
-```html {.example}
-<wa-tree>
-  <wa-tree-item selected>
-    Item 1
-    <wa-tree-item>Item A</wa-tree-item>
-    <wa-tree-item>Item B</wa-tree-item>
-    <wa-tree-item>Item C</wa-tree-item>
-  </wa-tree-item>
-  <wa-tree-item>Item 2</wa-tree-item>
-  <wa-tree-item>Item 3</wa-tree-item>
-</wa-tree>
-```
-
-### Expanded
-
-Use the `expanded` attribute to expand a tree item initially.
-
-```html {.example}
-<wa-tree>
-  <wa-tree-item expanded>
-    Item 1
-    <wa-tree-item expanded>
-      Item A
-      <wa-tree-item>Item Z</wa-tree-item>
-      <wa-tree-item>Item Y</wa-tree-item>
-      <wa-tree-item>Item X</wa-tree-item>
-    </wa-tree-item>
-    <wa-tree-item>Item B</wa-tree-item>
-    <wa-tree-item>Item C</wa-tree-item>
-  </wa-tree-item>
-  <wa-tree-item>Item 2</wa-tree-item>
-  <wa-tree-item>Item 3</wa-tree-item>
-</wa-tree>
-```

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/form-validation.md

@@ -1,50 +0,0 @@
----
-title: Form Control Validation
-description: TODO
-layout: page
----
-
-Adding the `wa-valid` or `wa-invalid` class to a form control will change its appearance. This is useful for applying validation styles to server-rendered form controls.
-
-<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
-  <div>
-    <h3>Valid</h3>
-    <wa-input class="wa-valid" label="Name" help-text="Just a first name is fine" placeholder="Enter your name"></wa-input><br>
-    <wa-select class="wa-valid" label="Choose one" help-text="Make a choice already">
-      <wa-option>There can be only one!</wa-option>
-      <wa-option>Well, maybe two is OK</wa-option>
-    </wa-select>
-    <wa-textarea class="wa-valid" label="Bio" help-text="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
-    <wa-range class="wa-valid" value="50" label="Volume" help-text="Crank it up"></wa-range><br>
-    <wa-checkbox class="wa-valid" checked>I am awesome</wa-checkbox><br>
-    <wa-checkbox class="wa-valid">So am I</wa-checkbox><br><br>
-    <wa-switch class="wa-valid" checked>Still awesome</wa-switch><br>
-    <wa-switch class="wa-valid">More awesome</wa-switch><br><br>
-    <wa-radio-group class="wa-valid" label="Select an option" 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-button variant="brand">Submit Form</wa-button>
-  </div>
-  <div>
-    <h3>Invalid</h3>
-    <wa-input class="wa-invalid" label="Name" help-text="Just a first name is fine" placeholder="Enter your name"></wa-input><br>
-    <wa-select class="wa-invalid" label="Choose one" help-text="Make a choice already">
-      <wa-option>There can be only one!</wa-option>
-      <wa-option>Well, maybe two is OK</wa-option>
-    </wa-select>
-    <wa-textarea class="wa-invalid" label="Bio" help-text="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
-    <wa-range class="wa-invalid" value="50" label="Volume" help-text="Crank it up"></wa-range><br>
-    <wa-checkbox class="wa-invalid" checked>I am awesome</wa-checkbox><br>
-    <wa-checkbox class="wa-invalid">So am I</wa-checkbox><br><br>
-    <wa-switch class="wa-invalid" checked>Still awesome</wa-switch><br>
-    <wa-switch class="wa-invalid">More awesome</wa-switch><br><br>
-    <wa-radio-group class="wa-invalid" label="Select an option" 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-button variant="brand">Submit Form</wa-button>
-  </div>
-</div>

docs/docs/experimental/patterns.md

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

docs/docs/experimental/sandbox.md

@@ -1,254 +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}
-<wa-button size="medium" style="width: 100%;" caret>Medium</wa-button>
-<br /><br />
-<wa-select>
-  <wa-option value="option-1">Option 1</wa-option>
-  <wa-option value="option-2">Option 2</wa-option>
-</wa-select>
-<br /><br />
-<wa-input placeholder="Small" size="small">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
-</wa-input>
-<wa-button size="small">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-  Settings
-</wa-button>
-<br /><br />
-<wa-input placeholder="Medium" size="medium">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
-</wa-input>
-<wa-button size="medium">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-  Settings
-</wa-button>
-<br /><br />
-<wa-input placeholder="Large" size="large">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
-</wa-input>
-<wa-button size="large">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-  Settings
-</wa-button>
-<br /><br />
-<wa-button size="medium">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-</wa-button>
-<br /><br />
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined" variant="brand">Left</wa-button>
-  <wa-button appearance="outlined" variant="brand">Center</wa-button>
-  <wa-button appearance="outlined" variant="brand">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined" variant="success">Left</wa-button>
-  <wa-button appearance="outlined" variant="success">Center</wa-button>
-  <wa-button appearance="outlined" variant="success">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined">Left</wa-button>
-  <wa-button appearance="outlined">Center</wa-button>
-  <wa-button appearance="outlined">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined" variant="warning">Left</wa-button>
-  <wa-button appearance="outlined" variant="warning">Center</wa-button>
-  <wa-button appearance="outlined" variant="warning">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button appearance="outlined" variant="danger">Left</wa-button>
-  <wa-button appearance="outlined" variant="danger">Center</wa-button>
-  <wa-button appearance="outlined" variant="danger">Right</wa-button>
-</wa-button-group>
-```

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/installation.md

@@ -1,116 +0,0 @@
----
-title: Installation
-description: Choose the installation method that works best for you.
-layout: page-outline
----
-
-Welcome to the Web Awesome alpha release for early backers! 👋
-
-==This is a very early alpha release!== For this preview, we're only offering access to the free components through a temporary CDN. Please be aware: Things can change. Things can break. You probably shouldn't be using this software in production yet! But fear not, we're working hard to polish up the free stuff you see here _plus_ all the great stuff we have planned for Web Awesome Pro!
-
-==To be clear, this release _only_ includes a preview the components in Web Awesome Free!==
-
-Thank you so much for backing us!
-
-- [Report a bug](https://github.com/shoelace-style/webawesome-alpha/issues)
-- [Get help / ask a question](https://github.com/shoelace-style/webawesome-alpha/discussions)
-- [See what's new since the last version](/docs/resources/changelog)
-
-:::warning
-As a Web Awesome backer, this early alpha release is _just for you_. Please refrain from sharing it for the time being!
-:::
-
----
-
-## Autoloading via CDN (Easiest)
-
-The autoloader is the easiest way to use Web Awesome. A lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically.
-
-```html
-<link rel="stylesheet" href="{% cdnUrl 'themes/default.css' %}" />
-<script type="module" src="{% cdnUrl 'webawesome.loader.js' %}"></script>
-```
-
-Now you can [start using Web Awesome!](/docs/usage)
-
-:::info
-While convenient, autoloading may lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). The linked article describes some ways to alleviate it.
-:::
-
-## Setting the Base Path
-
-Some components rely on assets (icons, images, etc.) and Web Awesome needs to know where they're located. For convenience, Web Awesome will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `webawesome.loader.js` and will "just work" for most users.
-
-==If you're using the CDN, you can skip this section.== However, if you're [cherry picking](#cherry-picking) or bundling Web Awesome, you'll need to set the base path. You can do this one of two ways.
-
-```html
-<!-- Option 1: the data-webawesome attribute -->
-<script src="bundle.js" data-webawesome="/path/to/web-awesome/dist"></script>
-
-<!-- Option 2: the setBasePath() method -->
-<script type="module">
-  import { setBasePath } from '/path/to/web-awesome/dist/webawesome.js';
-  setBasePath('/path/to/web-awesome/dist');
-</script>
-```
-
-### Referencing Assets
-
-Most of the magic behind assets is handled internally by Web Awesome, but if you need to reference the base path for any reason, the same module exports a function called `getBasePath()`. An optional string argument can be passed, allowing you to get the full path to any asset.
-
-```html
-<script type="module">
-  import { getBasePath, setBasePath } from '/path/to/web-awesome/dist/webawesome.js';
-
-  setBasePath('/path/to/assets');
-
-  // ...
-
-  // Get the base path, e.g. /path/to/assets
-  const basePath = getBasePath();
-
-  // Get the path to an asset, e.g. /path/to/assets/file.ext
-  const assetPath = getBasePath('file.ext');
-</script>
-```
-
-## Using Font Awesome Kit Codes
-
-Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You can provide it through the `data-fa-kit-code` attribute or by calling the `setKitCode()` method.
-
-```html
-<!-- Option 1: the data-fa-kit-code attribute -->
-<script src="bundle.js" data-fa-kit-code="abc123"></script>
-
-<!-- Option 2: the setKitCode() method -->
-<script type="module">
-  import { setKitCode } from '/path/to/web-awesome/dist/webawesome.js';
-  setBasePath('/path/to/web-awesome/dist');
-</script>
-```
-
-## Cherry Picking
-
-Cherry picking will only the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component on each page it's used.
-
-Here's an example that loads only the button component.
-
-```html
-<link rel="stylesheet" href="/path/to/web-awesome/dist/themes/default.css" />
-
-<script type="module" data-webawesome="/path/to/web-awesome/dist">
-  import '/path/to/web-awesome/dist/components/button/button.js';
-
-  // <wa-button> is ready to use!
-</script>
-```
-
-You can copy and paste the code to import a component from the "Importing" section of the component's documentation. Note that some components have dependencies that are automatically imported when you cherry pick. If a component has dependencies, they will be listed in the "Dependencies" section of its docs.
-
-:::warning
-You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
-:::
-
-## Using Web Awesome with npm
-
-An npm package isn't available in the early backer alpha release, but we'll have one soon! For now, please enjoy Web Awesome from the CDN as shown above.

docs/docs/patterns/app.md

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

docs/docs/patterns/blog.md

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

docs/docs/patterns/business.md

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

docs/docs/patterns/ecommerce.md

@@ -1,717 +0,0 @@
----
-title: E-commerce
-description: TODO
-layout: page
----
-
-TODO Page Description
-
-## Examples
-
-### Slide Over
-
-```html {.example}
-<wa-card class="card-header" style="width: 500px;">
-  <div slot="header">
-    <strong>Shopping Cart</strong>
-    <wa-icon-button name="close" variant="solid" label="Settings"></wa-icon-button>
-  </div>
-    <section class="cart-item">
-    <img src="https://source.unsplash.com/white-and-red-nike-air-force-1-high--iJgjj33eEk" alt="" width="300">
-    <div>
-      <div style="display:flex; justify-content: space-between; font-weight: 600;">
-        <span>AJ1</span>
-        <span>$170.00</span>
-      </div>
-      <div style="font-size: small;">Off-white Jordan One</div>
-      <div style="display:flex; justify-content: space-between; align-items: center;">
-        <span>Qty: 1</span>
-        <wa-button appearance="text" size="small">Remove</wa-button>
-      </div>
-    </div>
-  </section>
-   <section class="cart-item">
-    <img src="https://source.unsplash.com/smiling-woman-in-black-and-white-print-t-shirt-VW5VjskNXZ8" alt="" width="300">
-    <div>
-      <div style="display:flex; justify-content: space-between; font-weight: 600;">
-        <span>The Trails</span>
-        <span>$35.00</span>
-      </div>
-      <div style="font-size: small;">50/50 Cotton Poly Blend</div>
-      <div style="display:flex; justify-content: space-between; align-items: center;">
-        <span>Qty: 1</span>
-        <wa-button appearance="text" size="small">Remove</wa-button>
-      </div>
-    </div>
-  </section>
-   <section class="cart-item">
-    <img src="https://source.unsplash.com/man-standing-in-front-of-door-dG4Eb_oC5iM" alt="" width="300">
-    <div>
-      <div style="display:flex; justify-content: space-between; font-weight: 600;">
-        <span>Outcast</span>
-        <span>$27.00</span>
-      </div>
-      <div style="font-size: small;">100% Cotton</div>
-      <div style="display:flex; justify-content: space-between; align-items: center;">
-        <span>Qty: 1</span>
-        <wa-button appearance="text" size="small">Remove</wa-button>
-      </div>
-    </div>
-  </section>
-
-  <div slot="footer">
-    <div style="display:flex; justify-content: space-between; font-weight: 600;">
-      <span>Subtotal</span>
-      <span>$232.00</span>
-    </div>
-    <div style="font-size: small; margin-bottom: 1rem;">Shipping and taxes calculated at checkout.</div>
-   <wa-button size="medium" variant="brand" style="width: 100%; margin-bottom: 1rem;">Medium</wa-button>
-    or <a href="#">Continue shopping <wa-icon-button name="arrow-right" variant="solid" label="Settings"></wa-icon-button></a>
-  </div>
-
-</wa-card>
-
-<style>
-
-
-  .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);
-  }
-
-  .cart-item {
-    display: flex;
-    gap: 2rem;
-    margin-bottom: 1rem;
-
-    &:not(:last-of-type) {
-      padding-bottom: 1rem;
-      border-bottom: 1px solid var(--border-color);
-    }
-
-
-    img {
-      width: 6rem;
-      flex-grow: 1;
-    }
-
-    div {
-      flex-grow: 11;
-    }
-  }
-
-
-</style>
-```
-
-### Two Column Cart
-
-```html {.example}
-<div class="two-column">
-  <h1>Shopping Cart</h1>
-  <div class="first-column">
-    <section class="cart-item">
-     <img class="cart-item-image" src="https://source.unsplash.com/white-crew-neck-t-shirt-acn5ERAeSb4" alt="" width="300">
-    <div class="cart-item-info">
-      <div class="cart-item-meta">
-        <div>
-          <span style="font-size: larger">Classic</span>
-          <div>White - L</div>
-          <span style="font-size: larger">$15.00</span>
-        </div>
-
-          <wa-select placeholder="1">
-            <wa-option value="option-1">1</wa-option>
-            <wa-option value="option-2">2</wa-option>
-            <wa-option value="option-3">3</wa-option>
-          </wa-select>
-          <wa-icon-button name="close" variant="solid" label="Settings"></wa-icon-button>
-
-      </div>
-       <div style="display: flex;justify-content: flex-start;align-items: baseline;">
-        <wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock
-        </div>
-
-    </div>
-  </section>
-  <section class="cart-item">
-     <img class="cart-item-image" src="https://source.unsplash.com/blue-and-white-checkered-dress-shirt-RqYTuWkTdEs" alt="" width="300">
-    <div class="cart-item-info">
-      <div class="cart-item-meta">
-        <div>
-          <span style="font-size: larger">Button Up</span>
-          <div>Blue - L</div>
-          <span style="font-size: larger">$20.00</span>
-        </div>
-
-          <wa-select placeholder="1">
-            <wa-option value="option-1">1</wa-option>
-            <wa-option value="option-2">2</wa-option>
-            <wa-option value="option-3">3</wa-option>
-          </wa-select>
-          <wa-icon-button name="close" variant="solid" label="Settings"></wa-icon-button>
-
-      </div>
-       <div style="display: flex;justify-content: flex-start;align-items: baseline;">
-        <wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock
-        </div>
-
-    </div>
-  </section>
-  <section class="cart-item">
-     <img class="cart-item-image" src="https://source.unsplash.com/white-and-blue-cat-printed-crew-neck-t-shirt-fEt6Wd4t4j0" alt="" width="300">
-    <div class="cart-item-info">
-      <div class="cart-item-meta">
-        <div>
-          <span style="font-size: larger">Kitten</span>
-          <div>Egg - L</div>
-          <span style="font-size: larger">$20.00</span>
-        </div>
-
-          <wa-select placeholder="1">
-            <wa-option value="option-1">1</wa-option>
-            <wa-option value="option-2">2</wa-option>
-            <wa-option value="option-3">3</wa-option>
-          </wa-select>
-          <wa-icon-button name="close" variant="solid" label="Settings"></wa-icon-button>
-
-      </div>
-       <div style="display: flex;justify-content: flex-start;align-items: baseline;">
-        <wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock
-        </div>
-
-    </div>
-  </section>
-
-
-  </div>
-  <wa-card class="card-header second-column">
-  <div slot="header">
-    Order Summary
-
-  </div>
-  <div style="display:flex; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem;">
-    <span>Subtotal</span>
-    <span>$55.00</span>
-  </div>
-  <div style="display:flex; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem;">
-    <span>Shipping</span>
-    <span>$5.00</span>
-  </div>
-  <div style="display:flex; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem;">
-    <span>Tax</span>
-    <span>$5.50</span>
-  </div>
-  <div style="display:flex; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem;">
-    <span>Order Total</span>
-    <span>$65.50</span>
-  </div>
-
-  <wa-button size="medium" variant="brand" style="width: 100%; margin-bottom: 1rem;">Checkout</wa-button>
-
-
-
-
-</wa-card>
-
-<style>
-  .two-column {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    column-gap: 1rem;
-
-    .first-column {
-      grid-column: 1/8;
-    }
-
-    .second-column {
-      grid-column: 8/14
-    }
-
-    .cart-item {
-      display: grid;
-      grid-template-columns: 30% 61%;
-      column-gap: 0.5rem;
-      margin-bottom: 1rem;
-
-       &:not(:last-of-type) {
-      padding-bottom: 1rem;
-      border-bottom: 1px solid rgb(48, 50, 59);
-    }
-
-
-    }
-
-    .cart-item-meta {
-            display: grid;
-    grid-template-columns: 45% 35% 20%;
-    column-gap: 1rem;
-      }
-
-
-    h1 {
-      width: 100%;
-    grid-column: 1 / end;
-    }
-  }
-</style>
-</div>
-```
-
-### Single Column Cart
-
-```html {.example}
-<div class="single-column">
-  <h1>Shopping Cart</h1>
-  <div class="first-half half">
-    <section class="cart-item">
-    <img class="cart-item-image" src="https://source.unsplash.com/black-convertible-coupe-0CZwuZhiC84" alt="" >
-    <div>
-      <span style="display: flex;justify-content: space-between;">
-        <span><strong>Convertible</strong></span>
-        <span>$32.00</span>
-      </span>
-      <div>Eggplant</div>
-
-       <div style="display: flex;justify-content: space-between;align-items: baseline;">
-        <span><wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock</span>
-        <wa-button appearance="text" size="small">Remove</wa-button>
-        </div>
-    </div>
-
-
-  </section>
-  <section class="cart-item">
-    <img class="cart-item-image" src="https://source.unsplash.com/blue-open-door-pickup-truck-BCKgFzJbwz4" alt="" >
-    <div>
-      <span style="display: flex;justify-content: space-between;">
-        <span><strong>Pickup</strong></span>
-        <span>$32.00</span>
-      </span>
-      <div>Sky Blue</div>
-
-       <div style="display: flex;justify-content: space-between;align-items: baseline;">
-        <span><wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock</span>
-        <wa-button appearance="text" size="small">Remove</wa-button>
-        </div>
-    </div>
-
-
-  </section>
-  <section class="cart-item">
-    <img class="cart-item-image" src="https://source.unsplash.com/red-and-white-volkswagen-t-2-scale-model-GlDRYsruYJ8" alt="" >
-    <div>
-      <span style="display: flex;justify-content: space-between;">
-        <span><strong>Volkswagon T2</strong></span>
-        <span>$32.00</span>
-      </span>
-      <div>Red/White</div>
-
-       <div style="display: flex;justify-content: space-between;align-items: baseline;">
-        <span><wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock</span>
-        <wa-button appearance="text" size="small">Remove</wa-button>
-        </div>
-    </div>
-
-
-  </section>
-   <div slot="footer">
-    <div style="display:flex; justify-content: space-between; font-weight: 600;">
-      <span>Subtotal</span>
-      <span>$96.00</span>
-    </div>
-    <div style="font-size: small; margin-bottom: 1rem;">Shipping and taxes calculated at checkout.</div>
-   <wa-button size="medium" variant="brand" style="width: 100%; margin-bottom: 1rem;">Medium</wa-button>
-    or <a href="#">Continue shopping <wa-icon-button name="arrow-right" variant="solid" label="Settings"></wa-icon-button></a>
-  </div>
-
-  </div>
-</div>
-<style>
-  .single-column {
-    .cart-item {
-      display: grid;
-      grid-template-columns: repeat(12, 1fr);
-      column-gap: 1rem;
-      margin-bottom: 1rem;
-
-       &:not(:last-of-type) {
-      padding-bottom: 1rem;
-      border-bottom: 1px solid rgb(48, 50, 59);
-    }
-
-    img {
-      grid-column: 1/4;
-      width: 100%;
-      object-fit: cover;
-      height: 90px;
-    }
-
-    div {
-      grid-column: 4/-1;
-      align-content: center;
-    }
-
-
-    }
-  }
-</style>
-```
-
-### Product Quickview
-
-```html {.example}
-<wa-card class="card-header">
-  <div slot="header">
-    <strong>Quickview</strong>
-    <wa-icon-button name="close" variant="solid" label="Settings"></wa-icon-button>
-  </div>
-  <div style="
-    display: grid;
-    grid-template-columns: 35% 65%;
-    grid-column-gap: 1rem;
-">
-  <img class="cart-item-image" src="https://source.unsplash.com/white-crew-neck-t-shirt-acn5ERAeSb4" alt="" width="300">
-  <div>
-    <h3>Quality Cotton Tee</h3>
-    <span>$45.00</span>
-    <div style="display: flex;justify-content: space-between;">
-      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
-      <a href="#">See all ratings</a>
-    </div>
-    <wa-radio-group label="Color" name="a" value="1" style="margin-bottom: 1rem">
-      <wa-radio-button value="1">White</wa-radio-button>
-      <wa-radio-button value="2">Gray</wa-radio-button>
-      <wa-radio-button value="3">Black</wa-radio-button>
-    </wa-radio-group>
-    <wa-radio-group label="Size"  name="a" value="1" style="margin-bottom: 1rem">
-      <wa-radio-button value="1">Small</wa-radio-button>
-      <wa-radio-button value="2">Medium</wa-radio-button>
-      <wa-radio-button value="3">Large</wa-radio-button>
-    </wa-radio-group>
-    <wa-button size="medium" variant="brand" style="width: 100%; margin: 1rem 0;">Add to Cart</wa-button>
-
-  </div>
-  </div>
-</wa-card>
-```
-
-### Product Review
-
-```html {.example}
-<div>
-  <div>
-    <h2>Customer Reviews</h2>
-    <div>
-      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating> Based on 1624 reviews
-    </div>
-    <div style="margin-bottom: 2rem;">
-      <span><wa-progress-bar value="50"></wa-progress-bar></span>
-      <h3>Share your Thoughts</h3>
-      <p>If you’ve used this product, share your thoughts with other customers</p>
-      <wa-button size="medium">Write a Review</wa-button>
-    </div>
-  </div>
-  <div style="margin-top: 1rem;">
-    <div>
-      <div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
-        <span style="display: flex; align-items: center;">
-          <wa-avatar image="https://source.unsplash.com/bman-wearing-henley-top-portrait-7YVZYZeITc8" label="man-wearing-henley" style="margin-right: 1rem;"></wa-avatar>
-          <span style="display: flex; flex-direction: column">Mark Henry <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
-        </span>
-        <p><em>I initially had my doubts, but once I got the widgets and played around with them, I became a believer.</em></p>
-      </div>
-      <div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
-        <span style="display: flex; align-items: center;">
-          <wa-avatar image="https://source.unsplash.com/woman-wearing-black-crew-neck-shirt-3TLl_97HNJo" label="lady-in-turtleneck" style="margin-right: 1rem;"></wa-avatar>
-          <span style="display: flex; flex-direction: column">Liz Michaels <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
-        </span>
-        <p><em>I'd definitely but these again.</em></p>
-      </div>
-      <div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
-        <span style="display: flex; align-items: center;">
-          <wa-avatar image="https://source.unsplash.com/man-with-index-finger-on-lips-RukI4qZGlQs" label="man-with-hair" style="margin-right: 1rem;"></wa-avatar>
-          <span style="display: flex; flex-direction: column">Todd Smith <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
-        </span>
-        <p><em>It was everything I wanted and more, would totally recommend.</em></p>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-### Order History
-
-```html {.example}
-<div>
-  <h2>Order History</h2>
-  <p>Check the status of recent orders, manage returns, and download invoices.</p>
-  <div class="order-history-meta">
-    <span class="order-history-meta-item">
-      <strong>Order number</strong>
-      <span>WU88191111</span>
-    </span>
-       <span class="order-history-meta-item">
-      <strong>Date placed</strong>
-      <span>January 22, 2021</span>
-    </span>
-       <span class="order-history-meta-item">
-      <strong>Total amount</strong>
-      <span>$95.00</span>
-    </span>
-      <span style="display: grid;grid-template-columns: 1fr 1fr;column-gap: 1rem;">
-        <wa-button variant="neutral" appearance="outlined">View Order</wa-button>
-        <wa-button variant="neutral" appearance="outlined">View Invoice</wa-button>
-      </span>
-  </div>
-  <div>
-    <div class="order-history-list-item" style="align-items: center;">
-      <img class="cart-item-image" src="https://source.unsplash.com/beige-wooden-bar-stool-4kTbAMRAHtQ" alt="">
-      <div>
-        <span style="display: flex;justify-content: space-between;">
-          <span><strong>Kitchen Stool</strong></span>
-          <span><strong>$55.00</strong></span>
-        </span>
-        <p>TODO: add a description</p>
-        <span>
-          <a href="#">View Product</a> |  <a href="#">Buy Again</a>
-        </span>
-        <br/>
-        <span>Out for Delivery</span>
-      </div>
-    </div>
-    <div class="order-history-list-item" style="margin-top: 1rem; align-items: center;">
-      <img class="cart-item-image" src="https://source.unsplash.com/green-succulent-in-teal-ceramic-vase-miziNqvJx5M" alt="">
-      <div>
-        <span style="display: flex;justify-content: space-between;">
-          <span><strong>Succulent</strong></span>
-          <span><strong>$5.00</strong></span>
-        </span>
-        <p>TODO: add a description</p>
-        <span>
-          <a href="#">View Product</a> |  <a href="#">Buy Again</a>
-        </span>
-        <br/>
-        <span>Out for Delivery</span>
-      </div>
-    </div>
-    <div class="order-history-list-item" style="margin-top: 1rem; align-items: center;">
-      <img class="cart-item-image" src="https://source.unsplash.com/battercreek-coffee-pack-rsnzc-8dVs0" alt="">
-      <div>
-        <span style="display: flex;justify-content: space-between;">
-          <span><strong>French Roast</strong></span>
-          <span><strong>$35.00</strong></span>
-        </span>
-        <p>TODO: add a description</p>
-        <span>
-          <a href="#">View Product</a> |  <a href="#">Buy Again</a>
-        </span>
-        <br/>
-        <span>Out for Delivery</span>
-      </div>
-    </div>
-  </div>
-</div>
-<style>
-  .order-history-meta {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 1.5rem;
-
-    .order-history-meta-item {
-      display: flex;
-      flex-direction: column;
-    }
-
-  }
-
-  .order-history-list-item {
-        display: grid;
-    grid-template-columns: 18% 79%;
-    column-gap: 1rem;
-        border-bottom: 1px solid #eee;
-    padding-bottom: 1rem;
-  }
-</style>
-```
-
-### Checkout
-
-```html {.example}
-<div class="checkout-form">
-<div class="checkout-form-inputs">
-  <h4 class="full-row" style="margin-top: 0.5rem;">Contact Info</h4>
-  <wa-input type="email" label="Email Address" class="full-row"></wa-input>
-  <hr class="full-row" />
-  <h4 class="full-row" style="margin-top: 0.5rem;">Shipping Information</h4>
-  <wa-input label="First Name" class="first-half"></wa-input>
-  <wa-input label="Last Name" class="second-half" style="margin-top: 1.5rem;"></wa-input>
-  <wa-input label="Company" class="full-row" style="margin-top: 1.5rem;"></wa-input>
-  <wa-input label="Address" class="full-row" style="margin-top: 1.5rem;"></wa-input>
-  <wa-input label="City" class="first-half" style="margin-top: 1.5rem;"></wa-input>
-  <wa-select label="Country" placeholder="Country" class="second-half" style="margin-top: 1.5rem;">
-    <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-input label="State" class="first-half" style="margin-top: 1.5rem;"></wa-input>
-  <wa-input label="Postal Code" class="second-half" style="margin-top: 1.5rem;"></wa-input>
-  <wa-input label="Phone" class=" full-row" style="margin-top: 1.5rem;"></wa-input>
-  <hr class="full-row" />
-    <wa-radio-group label="Delivery Method" help-text="Select an option that makes you proud." name="a" value="1" class="full-row" style="margin-top: 1.5rem;">
-    <wa-radio-button value="1">Standard</wa-radio-button>
-    <wa-radio-button value="2">Express</wa-radio-button>
-  </wa-radio-group>
-  <hr class="full-row" />
-  <h4 class="full-row" style="margin-top: 0.5rem;">Payment</h4>
-  <wa-radio-group label="Select an option" name="a" value="1" class="full-row" style="margin-top: 1.5rem;">
-    <wa-radio value="1">Credit Card</wa-radio>
-    <wa-radio value="3">Paypal</wa-radio>
-  </wa-radio-group>
-  <wa-input label="Card Number" class="full-row" style="margin-top: 1.5rem;"></wa-input>
-<wa-input label="Name on Card" class="full-row" style="margin-top: 1.5rem;"></wa-input>
-<wa-input label="Expiration Date" class="first-half" style="margin-top: 1.5rem;"></wa-input>
-<wa-input label="CVC" class="second-half" style="margin-top: 1.5rem;"></wa-input>
-</div>
-<div class="checkout-form-summary">
-  <h4>Order Summary</h4>
-  <wa-card class="card-basic">
-    <div class="summary-item">
-      <img src="https://source.unsplash.com/pair-of-white-and-orange-athletic-shoes-on-white-box-dwKiHoqqxk8">
-      <div class="summary-item-info">
-        <span style="display: flex; justify-content: space-between;">
-          <span class="item-heading">Dolce Runners</span>
-          <wa-icon-button name="trash" variant="solid" label="Settings"></wa-icon-button>
-        </span>
-        <span class="subtle">Cream/Seafoam</span>
-        <br />
-        <span class="subtle">12.5</span>
-        <span style="display:flex;justify-content: space-between; width: 100%;margin: 1rem 0 2rem;">
-          <span class="item-price">$0.00</span>
-          <wa-select placeholder="1" style="width: 70px; margin-left: auto">
-            <wa-option value="option-1">1</wa-option>
-            <wa-option value="option-2">2</wa-option>
-            <wa-option value="option-3">3</wa-option>
-          </wa-select>
-          </span>
-        </div>
-      <hr style="grid-column: 1 / -1;">
-    </div>
-    <div class="summary-item">
-      <img src="https://source.unsplash.com/white-and-brown-nike-sneaker-LV_4qM5Gf9c">
-      <div class="summary-item-info">
-        <span style="display: flex; justify-content: space-between;">
-          <span class="item-heading">Dunk High</span>
-          <wa-icon-button name="trash" variant="solid" label="Settings"></wa-icon-button>
-        </span>
-        <span class="subtle">Sand/Amber/Black</span>
-        <br />
-        <span class="subtle">12.5</span>
-        <span style="display:flex;justify-content: space-between; width: 100%;margin: 1rem 0 2rem;">
-          <span class="item-price">$180.00</span>
-          <wa-select placeholder="1" style="width: 70px; margin-left: auto">
-            <wa-option value="option-1">1</wa-option>
-            <wa-option value="option-2">2</wa-option>
-            <wa-option value="option-3">3</wa-option>
-          </wa-select>
-          </span>
-        </div>
-      <hr style="grid-column: 1 / -1;">
-    </div>
-    <div class="summary-item">
-      <img src="https://source.unsplash.com/black-and-white-new-balance-low-top-sneaker-6zO5VKogoZE">
-      <div class="summary-item-info">
-        <span style="display: flex; justify-content: space-between;">
-          <span class="item-heading">NB Runner</span>
-          <wa-icon-button name="trash" variant="solid" label="Settings"></wa-icon-button>
-        </span>
-        <span class="subtle">Forrest Green</span>
-        <br />
-        <span class="subtle">12.5</span>
-        <span style="display:flex;justify-content: space-between; width: 100%;margin: 1rem 0 2rem;">
-          <span class="item-price">$48.99</span>
-          <wa-select placeholder="1" style="width: 70px; margin-left: auto">
-            <wa-option value="option-1">1</wa-option>
-            <wa-option value="option-2">2</wa-option>
-            <wa-option value="option-3">3</wa-option>
-          </wa-select>
-          </span>
-        </div>
-      <hr style="grid-column: 1 / -1;">
-    </div>
- <wa-button size="medium" variant="brand" style="width: 100%; margin-bottom: 1rem;">Confirm Order</wa-button>
-</wa-card>
-</div>
-</div>
-
-<style>
-  .checkout-form {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-column-gap: 1rem;
-
-    .checkout-form-inputs {
-      display: grid;
-      grid-template-columns: repeat(6, 1fr);
-      grid-column-gap: 1rem;
-    }
-      .summary-item {
-        display: grid;
-        grid-template-columns: repeat(12, 1fr);
-        grid-column-gap: 1rem;
-
-        img {
-          grid-column: 1/4;
-        }
-
-        .summary-item-info {
-          grid-column: 4/12;
-        }
-      }
-    /* & hr {
-      border-width: 1px;
-      margin: 1rem 0;
-    } */
-    .subtle {
-      font-size: small;
-    }
-
-    .item-heading {
-      font-size: large:
-    }
-
-    /* Grid utilities */
-
-    .full-row {
-      grid-column: 1/-1
-    }
-
-    .first-half {
-      grid-column: 1/4
-    }
-
-    .second-half {
-      grid-column: 4/7
-    }
-
-    .first-third {
-      rid-column: 1/3
-    }
-    .second-third {
-      rid-column: 3/5
-    }
-    .last-third {
-      rid-column: 5/7
-    }
-  }
-</style>
-```

docs/docs/patterns/entertainement.md

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

docs/docs/patterns/membership.md

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

docs/docs/patterns/news.md

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

docs/docs/patterns/non-profit.md

@@ -1,4 +0,0 @@
----
-title: Non-profit
-description: TODO
----

docs/docs/patterns/portfolio.md

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

docs/docs/patterns/product-landing.md

@@ -1,4 +0,0 @@
----
-title: Product Landing
-description: TODO
----

docs/docs/resources/changelog.md

@@ -1,68 +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!
-:::
-
-## Web Awesome 1.0.0-alpha.1
-
-- This is the initial release of Web Awesome alpha!
-
----
-
-## 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>`, `<sl-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/resources/community.md

@@ -1,48 +0,0 @@
----
-title: Community
-description: Web Awesome has a growing community of designers and developers that are building amazing things with web components.
-layout: page
----
-
-Web Awesome has a growing community of designers and developers that are building amazing things with web components. We'd love for you to become a part of it!
-
-Please be respectful of other users and remember that Web Awesome is an open source project. We'll try to help when we can, but there's no guarantee we'll be able solve your problem. Please manage your expectations and don't forget to contribute back to the conversation when you can!
-
-## Discussion Forum
-
-The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is open to anyone with a GitHub account. This is the best place to:
-
-- Ask for help
-- Share ideas and get feedback
-- Show the community what you're working on
-- Learn more about the project, its values, and its roadmap
-
-<wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
-  <wa-icon name="github" family="brands" slot="prefix"></wa-icon>
-  Join the Discussion
-</wa-button>
-
-## Community Chat
-
-The [community chat](https://discord.gg/mg8f26C) is open to the public and powered by [Discord](https://discord.com/). This is a good place to:
-
-- Ask for help
-- Share ideas and get feedback
-- Show the community what you're working on
-- Chat live with other designers, developers, and Web Awesome fans
-
-<wa-button variant="brand" href="https://discord.gg/mg8f26C" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
-  <wa-icon name="discord" family="brands" slot="prefix"></wa-icon>
-  Join the Chat
-</wa-button>
-
-## Twitter
-
-Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general updates and announcements about Web Awesome. This is a great place to say "hi" or to share something you're working on.
-
-**Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
-
-<wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
-  <wa-icon name="twitter" family="brands" slot="prefix"></wa-icon>
-  Follow on Twitter
-</wa-button>

docs/docs/themes.md

@@ -1,106 +0,0 @@
----
-title: Themes
-description: Everything you need to know about theming Web Awesome.
-layout: page-outline
----
-
-Web Awesome is designed to be highly customizable through pure CSS. Out of the box, the default theme includes both light and dark styles. Alternatively, you can design your own theme.
-
-In essence, a theme is a stylesheet that uses the Web Awesome API to define custom properties and apply custom styles to components. To create a theme, you will need a decent understanding of CSS, including [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) and the [`::part` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
-
-:::info
-For component developers, built-in themes are also available as JavaScript modules that export [Lit CSSResult](https://lit.dev/docs/api/styles/#CSSResult) objects. You can find them in `/dist/themes/*.styles.js`.
-:::
-
-## Theme Basics
-
-All themes are scoped to classes using the format `wa-theme-{name}`, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included theme uses `wa-theme-default-light` and `wa-theme-default-dark` for light and dark styles, respectively. A custom theme called "Purple Power", for example, would use a class called `wa-theme-purple-power`.
-
-All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots.
-
-```css
-:host,
-.wa-theme-purple-power {
-  /* ... */
-}
-```
-
-In the default theme, all CSS custom properties that make up Web Awesome's theming API, from colors to transitions, are scoped to both `:root` and `wa-theme-default-light`. `wa-theme-default-dark`, on the other hand, 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.
-
-### Activating Themes
-
-To activate a theme, import it and apply the theme's class to the `<html>` element. This example imports and activates the default theme with dark styles.
-
-```html
-<html class="wa-theme-default-dark">
-  <head>
-    <link rel="stylesheet" href="path/to/webawesome/dist/themes/default.css" />
-  </head>
-
-  <body>
-    ...
-  </body>
-</html>
-```
-
-:::info
-There is one exception to this rule — the default light styles _do not_ need to be activated. For convenience, these styles are scoped to `:root` and will be activated by default when imported.
-:::
-
-## 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,495 +0,0 @@
----
-title: Color
-description: Ensure consistent use of color and readable contrast with Web Awesome's color properties.
-layout: page-outline
----
-
-<style>
-  .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-{name}-{#}`.
-
-<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 style="color: var(--wa-color-text-normal)">AaBb</div> |
-| `--wa-color-text-quiet`  | <div style="color: var(--wa-color-text-quiet)">AaBb</div>  |
-| `--wa-color-text-link`   | <div style="color: var(--wa-color-text-link)">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" 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" style="--mix-color: var(--wa-color-mix-hover)"><small>mixed</small></div>  |
-| `--wa-color-mix-active` | <div class="swatch color-mix-example" 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" style="border-color: var(--wa-color-brand-border-quiet)"></div> | <div class="swatch" style="border-color: var(--wa-color-success-border-quiet)"></div> | <div class="swatch" style="border-color: var(--wa-color-neutral-border-quiet)"></div> | <div class="swatch" style="border-color: var(--wa-color-warning-border-quiet)"></div> | <div class="swatch" style="border-color: var(--wa-color-danger-border-quiet)"></div> |
-| `--wa-color-*-border-normal` | <div class="swatch" style="border-color: var(--wa-color-brand-border-normal)"></div> | <div class="swatch" style="border-color: var(--wa-color-success-border-normal)"></div> | <div class="swatch" style="border-color: var(--wa-color-neutral-border-normal)"></div> | <div class="swatch" style="border-color: var(--wa-color-warning-border-normal)"></div> | <div class="swatch" style="border-color: var(--wa-color-danger-border-normal)"></div> |
-| `--wa-color-*-border-loud`   | <div class="swatch" style="border-color: var(--wa-color-brand-border-loud)"></div> | <div class="swatch" style="border-color: var(--wa-color-success-border-loud)"></div> | <div class="swatch" style="border-color: var(--wa-color-neutral-border-loud)"></div> | <div class="swatch" style="border-color: var(--wa-color-warning-border-loud)"></div> | <div class="swatch" style="border-color: var(--wa-color-danger-border-loud)"></div> |
-| `--wa-color-*-on-quiet`      | <div class="swatch" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div> | <div class="swatch" 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" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div> | <div class="swatch" 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" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</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/docs/usage.md

@@ -1,177 +0,0 @@
----
-title: Usage
-description: Learn more about using custom elements.
-layout: page-outline
----
-
-Web Awesome components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.
-
-If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.
-
-## Attributes & Properties
-
-Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size.
-
-```html
-<wa-button size="small">Click me</wa-button>
-```
-
-Some properties are boolean, so they only have true/false values. To activate a boolean property, add the corresponding attribute without a value.
-
-```html
-<wa-button disabled>Click me</wa-button>
-```
-
-## Events
-
-You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. However, it's important to note that many events emitted within a component's shadow root will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in, for example, multiple `click` handlers executing even if the user clicks just once. Furthermore, `event.target` will point to the host element, making things even more confusing.
-
-As a result, you should almost always listen for Web Awesome events instead. For example, instead of listening to `click` to determine when an `<wa-checkbox>` gets toggled, listen to `wa-change`.
-
-```html
-<wa-checkbox>Check me</wa-checkbox>
-
-<script>
-  const checkbox = document.querySelector('wa-checkbox');
-  checkbox.addEventListener('wa-change', event => {
-    console.log(event.target.checked ? 'checked' : 'not checked');
-  });
-</script>
-```
-
-All Web Awesome events are prefixed with `wa-` to prevent collisions with standard events and other libraries. Refer to a component's documentation for a complete list of its events.
-
-## Methods
-
-Some components have methods you can call to trigger various behaviors. For example, you can set focus on a Web Awesome input using the `focus()` method.
-
-```html
-<wa-input></wa-input>
-
-<script>
-  const input = document.querySelector('wa-input');
-  input.focus();
-</script>
-```
-
-Refer to a component's documentation for a complete list of its methods and their arguments.
-
-## Slots
-
-Many components use slots to accept content inside of them. The most common slot is the _default_ slot, which includes any content inside the component that doesn't have a `slot` attribute.
-
-For example, a button's default slot is used to populate its label.
-
-```html
-<wa-button>Click me</wa-button>
-```
-
-Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="prefix"` attribute? This tells the component to place the icon into its `prefix` slot.
-
-```html
-<wa-button>
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-  Settings
-</wa-button>
-```
-
-The location of a named slot doesn't matter. You can put it anywhere inside the component and the browser will move it to the right place automatically!
-
-Refer to a component's documentation for a complete list of available slots.
-
-## Don't Use Self-closing Tags
-
-Custom elements cannot have self-closing tags. Similar to `<script>` and `<textarea>`, you must always include the full closing tag.
-
-```html
-<!-- Don't do this -->
-<wa-input />
-
-<!-- Always do this -->
-<wa-input></wa-input>
-```
-
-## Differences from Native Elements
-
-You might expect similarly named elements to share the same API as native HTML elements, but this is not always the case. Web Awesome components **are not** designed to be one-to-one replacements for their HTML counterparts. While they usually share the same API, there may be subtle differences.
-
-For example, `<button>` and `<wa-button>` both have a `type` attribute, but the native one defaults to `submit` while the Web Awesome one defaults to `button` since this is a better default for most users.
-
-:::info
-**Don't make assumptions about a component's API!** To prevent unexpected behaviors, please take the time to review the documentation and make sure you understand what each attribute, property, method, and event is intended to do.
-:::
-
-## Waiting for Components to Load
-
-Web components are registered with JavaScript, so depending on how and when you load Web Awesome, you may notice a [Flash of Undefined Custom Elements (FOUCE)](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/) when the page loads. There are a couple ways to prevent this, both of which are described in the linked article.
-
-One option is to use the [`:defined`](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined) CSS pseudo-class to "hide" custom elements that haven't been registered yet. You can scope it to specific tags or you can hide all undefined custom elements as shown below.
-
-```css
-:not(:defined) {
-  visibility: hidden;
-}
-```
-
-As soon as a custom element is registered, it will immediately appear with all of its styles, effectively eliminating FOUCE. Note the use of `visibility: hidden` instead of `display: none` to reduce shifting as elements are registered. The drawback to this approach is that custom elements can potentially appear one by one instead of all at the same time.
-
-Another option is to use [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined), which returns a promise that resolves when the specified element gets registered. You'll probably want to use it with [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) in case an element fails to load for some reason.
-
-A clever way to use this method is to hide the `<body>` with `opacity: 0` and add a class that fades it in as soon as all your custom elements are defined.
-
-```html
-<style>
-  body {
-    opacity: 0;
-  }
-
-  body.ready {
-    opacity: 1;
-    transition: 0.25s opacity;
-  }
-</style>
-
-<script type="module">
-  await Promise.allSettled([
-    customElements.whenDefined('wa-button'),
-    customElements.whenDefined('wa-card'),
-    customElements.whenDefined('wa-rating')
-  ]);
-
-  // Button, card, and rating are registered now! Add
-  // the `ready` class so the UI fades in.
-  document.body.classList.add('ready');
-</script>
-```
-
-## Component Rendering and Updating
-
-Web Awesome components are built with [Lit](https://lit.dev/), a tiny library that makes authoring custom elements easier, more maintainable, and a lot of fun! As a Web Awesome user, here is some helpful information about rendering and updating you should probably be aware of.
-
-To optimize performance and reduce re-renders, Lit batches component updates. This means changing multiple attributes or properties at the same time will result in just a single re-render. In most cases, this isn't an issue, but there may be times you'll need to wait for the component to update before continuing.
-
-Consider this example. We're going to change the `checked` property of the checkbox and observe its corresponding `checked` attribute, which happens to reflect.
-
-```js
-const checkbox = document.querySelector('wa-checkbox');
-checkbox.checked = true;
-
-console.log(checkbox.hasAttribute('checked')); // false
-```
-
-Most developers will expect this to be `true` instead of `false`, but the component hasn't had a chance to re-render yet so the attribute doesn't exist when `hasAttribute()` is called. Since changes are batched, we need to wait for the update before proceeding. This can be done using the `updateComplete` property, which is available on all Lit-based components.
-
-```js
-const checkbox = document.querySelector('wa-checkbox');
-checkbox.checked = true;
-
-checkbox.updateComplete.then(() => {
-  console.log(checkbox.hasAttribute('checked')); // true
-});
-```
-
-This time we see an empty string, which means the boolean attribute is now present!
-
-:::info
-To wait for multiple components to update, you can use `requestAnimationFrame()` instead of awaiting each element.
-:::

docs/index.md

@@ -1,384 +0,0 @@
----
-title: Web Awesome
-description: Build better with Web Awesome, the open source library of web components from Font Awesome.
-layout: page
----
-
-<style>
-  .title,
-  .anchor-heading a,
-  #outline-expandable {
-    display: none;
-  }
-  wa-page > main {
-    --content-width: 56rem;
-    --content-padding-inline: 2rem;
-    --content-flow-spacing: 4rem;
-    max-width: 100%;
-    padding: 0 !important;
-    & p, h1, h2, h3, h4, h5, h6 {
-      margin: 0;
-    }
-  }
-  wa-page:not([view="desktop"]) > main {
-    --content-flow-spacing: 3rem;
-  }
-  .brand-font {
-    font-family: cera-round-pro;
-  }
-  .emphasis {
-    position: relative;
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      background-color: var(--wa-brand-orange);
-      border-radius: var(--wa-border-radius-pill);
-      width: 100%;
-      height: 0.1em;
-    }
-  }
-  .hero-background {
-    background-color: var(--wa-brand-orange);
-    background-image: linear-gradient(color-mix(in oklab, var(--wa-brand-orange), orangered 40%) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--wa-brand-orange), orangered 40%) 1px, transparent 1px);
-    background-size: 2rem 2rem;
-    color: white;
-    padding: calc(var(--content-flow-spacing) * 1.875) 0 var(--content-flow-spacing) 0;
-  }
-  .hero-content {
-    max-width: var(--content-width);
-    margin-inline: auto;
-    padding-inline: var(--content-padding-inline);
-    & > * + * {
-      margin-block-start: 2rem;
-    }
-    & h1 {
-      font-size: clamp(2.5625rem, 13vw, 3.25rem);
-    }
-    & .emphasis::after {
-      background-color: var(--wa-brand-grey);
-    }
-    & .wa-crown svg {
-      width: 4rem;
-      & path {
-        fill: white;
-      }
-    }
-  }
-  .hero-cta {
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
-    flex-wrap: wrap;
-    background-color: var(--wa-brand-grey);
-    border-radius: 0.75rem;
-    font-size: 0.875rem;
-    padding: 1.5rem;
-    & > *:first-child {
-      flex: 1 1 67%;
-    }
-    & wa-button {
-      --wa-form-control-height-s: 2.5rem;
-      --border-color: black;
-      --border-width: 0.125rem;
-      --box-shadow: 0 0.25rem 0 0 var(--border-color);
-      flex: 1 1 auto;
-      &:active:not([disabled]) {
-        --box-shadow: 0 0 0 0 transparent;
-        transform: translateY(0.25rem);
-      }
-    }
-  }
-  .home-wrapper {
-    max-width: var(--content-width);
-    margin-block: var(--content-flow-spacing);
-    margin-inline: auto;
-    padding-inline: var(--content-padding-inline);
-  }
-  .home-wrapper > * + * {
-    margin-block-start: var(--content-flow-spacing);
-  }
-  .summary {
-    background-color: var(--wa-brand-grey);
-    border-radius: 1.125rem;
-    color: white;
-    padding: var(--content-flow-spacing);
-    & > * + * {
-      margin-block-start: 2rem;
-    }
-    & .grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%), 1fr));
-      gap: 2rem;
-      & h3 {
-        font-size: 1rem;
-      }
-      & p {
-        font-size: 0.875rem;
-      }
-    }
-  }
-  .split-block {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%), 1fr));
-    column-gap: 4rem;
-    row-gap: 2rem;
-    align-items: center;
-    & > * > * + * {
-      margin-block-start: 1rem;
-    }
-  }
-  .link-panel {
-    background-color: var(--wa-color-neutral-fill-quiet);
-    border-radius: 0.75rem;
-    padding: 1.25rem;
-    & h3 {
-      font-size: 1rem;
-    }
-    & .icon-heading wa-icon {
-      background-color: var(--wa-color-neutral-fill-loud);
-      color: var(--wa-color-neutral-on-loud);
-    }
-    & p {
-      font-size: 0.875rem;
-    }
-  }
-  .icon-heading {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-block-end: 1rem;
-    & wa-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: var(--wa-brand-orange);
-      color: white;
-      border-radius: 0.25rem;
-      height: 2rem;
-      width: 2rem;
-    }
-    & h3 {
-      font-size: 1rem;
-    }
-  }
-  footer {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    font-size: 0.875rem;
-    & .wa-crown svg {
-      width: 2rem;
-    }
-    & .tagline {
-      font-size: 1rem;
-    }
-    & .attribution {
-      align-self: flex-start;
-      & .button-list {
-        display: flex;
-        flex-wrap: wrap;
-        flex: 1 1 auto;
-        gap: 0.5rem;
-      }
-      & wa-button {
-        --wa-form-control-height-m: 1.5rem;
-        display: inline-flex;
-        font-size: 0.75rem;
-      }
-    }
-  }
-  .alpha-notice {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    & > * {
-      flex-basis: calc(((30ch * 2 + 1rem) - 100%) * 999);
-    }
-    & > * {
-      flex-grow: 2;
-    }
-    & > * + * {
-      flex-grow: 1;
-    }
-    & wa-callout::part(base),
-    & wa-button::part(base) {
-      height: 100%;
-      width: 100%;
-    }
-  }
-  wa-button.tile::part(base) {
-    border-color: var(--wa-color-surface-border);
-    border-radius: 0.75rem;
-    color: var(--wa-color-text-normal);
-    display: block;
-    height: 100%;
-    line-height: var(--wa-line-height-normal);
-    padding: 1.25rem;
-    text-align: left;
-    white-space: wrap;
-  }
-  wa-button.tile::part(suffix) {
-    display: none;
-  }
-  wa-button.tile {
-    width: 100%;
-    height: 100%;
-    & h3 {
-      font-size: 1rem;
-    }
-    & .icon-heading + wa-icon {
-      color: var(--wa-color-text-quiet);
-    }
-    & p {
-      font-size: 0.875rem;
-      font-weight: var(--wa-font-weight-normal);
-    }
-    &::part(label) {
-      width: 100%;
-    }
-  }
-  wa-callout {
-    --spacing: 1.25rem;
-    height: 100%;
-
-    & .icon-heading wa-icon {
-      background-color: var(--wa-color-warning-fill-normal);
-      color: var(--wa-color-warning-on-normal);
-    }
-
-    & p {
-      font-size: 0.875rem;
-    }
-  }
-</style>
-
-<div class="hero-background">
-  <div class="hero-content">
-    <div class="wa-crown">
-      {% include "logo-simple.njk" %}
-    </div>
-    <h1 class="brand-font">Make something <span class="emphasis">awesome</span> with open-source web components</h1>
-    <div class="hero-cta">
-      <span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price &mdash; but not for long. Get in while the gettin’s good.</span>
-      <wa-button class="wa-theme-default-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
-        <wa-icon slot="prefix" name="person-running"></wa-icon>
-        Pre-order WA Pro
-      </wa-button>
-    </div>
-  </div>
-</div>
-
-<div class="home-wrapper">
-  <div class="alpha-notice">
-    <div>
-      <wa-callout variant="warning">
-        <div class="icon-heading">
-          <wa-icon name="triangle-exclamation" variant="regular" fixed-width></wa-icon>
-          <h3>You're in alpha territory</h3>
-        </div>
-        <p>What you see may not be perfect (we're only humans!) and is subject to change. We encourage you to <a href="https://github.com/shoelace-style/webawesome-alpha/issues">report bugs</a> or <a href="https://github.com/shoelace-style/webawesome-alpha/discussions">ask for help</a>!</p>
-      </wa-callout>
-    </div>
-    <div>
-      <wa-button href="/docs/installation" appearance="outlined" class="tile">
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-block-end: 1rem;">
-          <div class="icon-heading" style="margin-block-end: 0;">
-            <wa-icon name="pen-ruler" fixed-width></wa-icon>
-            <h3>Get started</h3>
-          </div>
-          <wa-icon name="arrow-right" fixed-width></wa-icon>
-        </div>
-        <p>Check out our installation guide to start building with Web Awesome.</p>
-      </wa-button>
-    </div>
-  </div>
-  <wa-divider></wa-divider>
-  <div class="summary">
-    <h2 class="brand-font">What's <span class="emphasis">Web</span> Awesome?</h2>
-    <p>Web Awesome is the biggest open-source library of meticulously designed, highly customizable, and framework-agnostic UI components.</p>
-    <div class="grid">
-      <div>
-        <div class="icon-heading">
-          <wa-icon name="code" fixed-width></wa-icon>
-          <h3>Entirely native</h3>
-        </div>
-        <p>Built on web standards to last for years to come. No excess tooling. No third-party bloat.</p>
-      </div>
-      <div>
-        <div class="icon-heading">
-          <wa-icon name="palette" fixed-width></wa-icon>
-          <h3>Fully customizable</h3>
-        </div>
-        <p>Show off your own style with components that consistently adapt to your theme.</p>
-      </div>
-      <div>
-        <div class="icon-heading">
-          <wa-icon name="wheelchair-move" fixed-width></wa-icon>
-          <h3>Accessibility forward</h3>
-        </div>
-        <p>Build a website that everyone can use. Designed to be inclusive and usable by everyone.</p>
-      </div>
-      <div>
-        <div class="icon-heading">
-          <wa-icon name="handshake-simple" fixed-width></wa-icon>
-          <h3>Proudly open source</h3>
-        </div>
-        <p>Use Web Awesome Free however you like. Always free, always open source.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="split-block">
-    <div>
-      <h2 class="brand-font"><span class="emphasis">You</span> put the awesome in Web Awesome</h2>
-      <p>Web Awesome started as an open-source project fueled by contributions from an engaged community of developers, and we want to keep it that way. The core of Web Awesome is — and always will be — free and open source.</p>
-      <p>Whether you’re a developer, designer, or budding tech nerd, we want you a part of the conversation.</p>
-    </div>
-    <div>
-      <div class="link-panel">
-        <div class="icon-heading">
-          <wa-icon name="envelope-open" fixed-width></wa-icon>
-          <h3>Get in touch</h3>
-        </div>
-        <p>Have a question? Want to share your feedback? Just stopping by to say 'hi'? Email us at <a href="mailto:hello@webawesome.com">hello@webawesome.com</a>.</p>
-      </div>
-      <div class="link-panel">
-        <div class="icon-heading">
-          <wa-icon name="hashtag" fixed-width></wa-icon>
-          <h3>Follow us</h3>
-        </div>
-        <p>Keep up with Web Awesome through updates, announcements, and polls. Find us on <a href="https://x.com/webawesomer">Twitter (X)</a> and <a href="https://www.instagram.com/web.awesome">Instagram</a>.</p>
-      </div>
-    </div>
-  </div>
-
-  <wa-divider></wa-divider>
-
-  <footer>
-    <div class="wa-crown">
-      {% include "logo-simple.njk" %}
-    </div>
-    <div class="split-block">
-      <div>
-        <strong class="brand-font tagline">Let's Make Something Awesome</strong>
-        <p>Web Awesome is the design system platform and open source library of web components from your fellow nerds at <a href="https://www.fontawesome.com/">Font Awesome</a>.</p>
-      </div>
-      <div class="attribution">
-        <span>Special thanks</span>
-        <div class="button-list">
-          <wa-button appearance="tinted" pill href="https://lit.dev/">Lit</wa-button>
-          <wa-button appearance="tinted" pill href="https://github.com/open-wc/custom-elements-manifest">Custom Elements Manifest</wa-button>
-          <wa-button appearance="tinted" pill href="https://www.11ty.dev/">11ty</wa-button>
-          <wa-button appearance="tinted" pill href="https://floating-ui.com/">Floating UI</wa-button>
-          <wa-button appearance="tinted" pill href="https://animate.style/">animate.css</wa-button>
-          <wa-button appearance="tinted" pill href="https://lunrjs.com/">Lunr</wa-button>
-        </div>
-      </div>
-    </div>
-    <div>
-      &copy; Fonticons, Inc.
-    </div>
-  </footer>
-</div>

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,144 +1,87 @@
 {
-  "name": "@shoelace-style/webawesome",
+  "name": "@webawesome/monorepo",
+  "private": true,
   "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-alpha.2",
+  "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/components/*": "./dist/components/*",
-    "./dist/react": "./dist/react/index.js",
-    "./dist/react/*": "./dist/react/*",
-    "./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",
-    "prepare": "npm i --ignore-scripts && npx playwright install",
-    "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.1.2",
-    "composed-offset-position": "^0.0.4",
-    "lit": "^3.0.0",
-    "qr-creator": "^1.0.0"
-  },
   "devDependencies": {
-    "@11ty/eleventy": "3.0.0-alpha.5",
-    "@custom-elements-manifest/analyzer": "^0.9.4",
-    "@lit/react": "^1.0.0",
+    "@11ty/eleventy": "3.0.0",
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@lit-labs/eleventy-plugin-lit": "^1.0.3",
+    "@lit-labs/testing": "^0.2.5",
+    "@lit/react": "^1.0.8",
     "@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": "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.42.0",
-    "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.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/README.md

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

packages/webawesome/custom-elements-manifest.js

@@ -1,13 +1,17 @@
+import { jsxTypesPlugin } from '@wc-toolkit/jsx-types';
 import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
 // import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
 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';
+const outdir = 'dist-cdn';
 
 function replace(string, terms) {
   terms.forEach(({ from, to }) => {
@@ -28,7 +32,7 @@ export default {
       name: 'wa-package-data',
       packageLinkPhase({ customElementsManifest }) {
         customElementsManifest.package = { name, description, version, author, homepage, license };
-      }
+      },
     },
 
     // Parse custom jsDoc tags
@@ -83,13 +87,13 @@ export default {
                   classDoc[t.tag].push({
                     name: t.name,
                     description: t.description,
-                    type: t.type || undefined
+                    type: t.type || undefined,
                   });
               }
             });
           }
         }
-      }
+      },
     },
 
     {
@@ -109,7 +113,7 @@ export default {
             }
           }
         }
-      }
+      },
     },
 
     {
@@ -127,7 +131,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 +150,7 @@ export default {
             }
           }
         });
-      }
+      },
     },
 
     // Generate custom VS Code data
@@ -156,22 +160,33 @@ export default {
       referencesTemplate: (_, tag) => [
         {
           name: 'Documentation',
-          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
-        }
-      ]
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`,
+        },
+      ],
     }),
 
+    // Generate custom JetBrains data
     customElementJetBrainsPlugin({
-      outdir: './dist',
+      outdir: './dist-cdn',
       excludeCss: true,
       packageJson: false,
       referencesTemplate: (_, tag) => {
         return {
           name: 'Documentation',
-          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`
+          url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}`,
         };
-      }
-    })
+      },
+    }),
+
+    // Generate JSX types (see https://wc-toolkit.com/integrations/jsx/)
+    jsxTypesPlugin({
+      fileName: 'custom-elements-jsx.d.ts',
+      outdir,
+      defaultExport: true,
+      componentTypePath: (_name, _tag, modulePath) => {
+        return `./${modulePath}`;
+      },
+    }),
 
     //
     // TODO - figure out why this broke when events were updated
@@ -181,5 +196,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,396 @@
+import { nanoid } from 'nanoid';
+import { parse as HTMLParse } from 'node-html-parser';
+import { execFileSync } from 'node:child_process';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { anchorHeadingsTransformer } from './_transformers/anchor-headings.js';
+import { codeExamplesTransformer } from './_transformers/code-examples.js';
+import { copyCodeTransformer } from './_transformers/copy-code.js';
+import { currentLinkTransformer } from './_transformers/current-link.js';
+import { highlightCodeTransformer } from './_transformers/highlight-code.js';
+import { outlineTransformer } from './_transformers/outline.js';
+import { getComponents } from './_utils/manifest.js';
+import { markdown } from './_utils/markdown.js';
+import { SimulateWebAwesomeApp } from './_utils/simulate-webawesome-app.js';
+// import { formatCodePlugin } from './_plugins/format-code.js';
+// import litPlugin from '@lit-labs/eleventy-plugin-lit';
+import { readFile } from 'fs/promises';
+import process from 'process';
+import * as url from 'url';
+import { replaceTextPlugin } from './_plugins/replace-text.js';
+import { searchPlugin } from './_plugins/search.js';
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+const isDev = process.argv.includes('--develop');
+const ignoreGit = process.env.ELEVENTY_IGNORE_GIT === 'true';
+const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
+
+async function getPackageData() {
+  return JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
+}
+
+export default async function (eleventyConfig) {
+  const docsDir = path.join(process.env.BASE_DIR || '.', 'docs');
+  let packageData = await getPackageData();
+  let allComponents = getComponents();
+
+  const distDir = process.env.UNBUNDLED_DIST_DIRECTORY || path.resolve(__dirname, '../dist');
+  const customElementsManifest = path.join(distDir, 'custom-elements.json');
+  const stylesheets = path.join(distDir, 'styles');
+
+  eleventyConfig.addWatchTarget(customElementsManifest);
+  eleventyConfig.setWatchThrottleWaitTime(10); // in milliseconds
+
+  eleventyConfig.on('eleventy.beforeWatch', async function (changedFiles) {
+    let updatePackageData = false;
+    let updateComponentData = false;
+    changedFiles.forEach(file => {
+      if (file.includes('package.json')) {
+        updatePackageData = true;
+      }
+
+      if (file.includes('custom-elements.json')) {
+        updateComponentData = true;
+      }
+    });
+
+    if (updatePackageData) {
+      packageData = await getPackageData();
+    }
+
+    if (updateComponentData) {
+      allComponents = getComponents();
+    }
+
+    // Invalidate last-modified cache for changed content files during watch
+    if (Array.isArray(changedFiles)) {
+      for (const file of changedFiles) {
+        if (/\.(md|njk|html)$/i.test(file)) {
+          lastModCache.delete(file);
+        }
+      }
+    }
+  });
+
+  /**
+   * If you plan to add or remove any of these extensions, make sure to let either Konnor or Cory know as these
+   * passthrough extensions will also need to be updated in the Web Awesome App.
+   */
+  const passThrough = [...passThroughExtensions.map(ext => path.join(docsDir, '**/*.' + ext))];
+
+  /**
+   * This is the guard we use for now to make sure our final built files don't need a 2nd pass by the server. This keeps
+   * us able to still deploy the bare HTML files on Vercel until the app is ready.
+   */
+  const serverBuild = process.env.WEBAWESOME_SERVER === 'true';
+
+  //
+  // Set all global template data here
+  //
+  eleventyConfig.addGlobalData('package', packageData);
+  eleventyConfig.addGlobalData('layout', 'page.njk');
+  eleventyConfig.addGlobalData('server', {
+    head: '',
+    loginOrAvatar: '',
+    flashes: '',
+  });
+
+  // Template filters - {{ content | filter }}
+  eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
+  eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
+  eleventyConfig.addFilter('stripExtension', string => path.parse(string + '').name);
+  eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
+  eleventyConfig.addFilter('uniqueId', (_value, length = 8) => nanoid(length));
+  // Returns last modified date as ISO 8601 (UTC, Z-suffixed)
+  // Fallback order: front matter override -> Git last commit date -> filesystem mtime -> now
+  // Caching: in-memory per inputPath during one build/dev session
+  // Override: pass a Date or string: {{ page.inputPath | gitLastModifiedISO(lastUpdated) }}
+  const lastModCache = new Map();
+  let repoRoot = null; // lazily resolved; null => not resolved, undefined => failed
+
+  function getLastModifiedISO(inputPath, overrideDate) {
+    if (overrideDate instanceof Date) {
+      return overrideDate.toISOString();
+    }
+    if (typeof overrideDate === 'string' && overrideDate) {
+      const parsed = new Date(overrideDate);
+      if (!isNaN(parsed.getTime())) return parsed.toISOString();
+    }
+    if (!inputPath) return new Date().toISOString();
+    if (lastModCache.has(inputPath)) return lastModCache.get(inputPath);
+
+    // Try Git (ISO via %cI). Use a repo-root-relative path for portability.
+    if (!ignoreGit) {
+      try {
+        if (repoRoot === null) {
+          try {
+            repoRoot = execFileSync('git', ['rev-parse', '--show-toplevel'], {
+              stdio: ['ignore', 'pipe', 'ignore'],
+              cwd: __dirname,
+            })
+              .toString()
+              .trim();
+          } catch (_) {
+            repoRoot = undefined;
+          }
+        }
+
+        const gitPath = repoRoot ? path.relative(repoRoot, inputPath) : inputPath;
+        const args = ['log', '-1', '--format=%cI', '--follow', '--', gitPath];
+        const result = execFileSync('git', args, {
+          stdio: ['ignore', 'pipe', 'ignore'],
+          cwd: repoRoot || path.dirname(inputPath),
+        })
+          .toString()
+          .trim();
+        if (result) {
+          const iso = new Date(result).toISOString();
+          lastModCache.set(inputPath, iso);
+          return iso;
+        }
+      } catch (_) {
+        // continue to fs fallback
+      }
+    }
+
+    // Fallback to filesystem mtime
+    try {
+      const stats = fs.statSync(inputPath);
+      const iso = new Date(stats.mtime).toISOString();
+      lastModCache.set(inputPath, iso);
+      return iso;
+    } catch (_) {
+      const now = new Date().toISOString();
+      lastModCache.set(inputPath, now);
+      return now;
+    }
+  }
+
+  eleventyConfig.addFilter('gitLastModifiedISO', function (inputPath, overrideDate) {
+    return getLastModifiedISO(inputPath, overrideDate);
+  });
+
+  // Attach lastUpdatedISO to page data so templates can use {{ lastUpdatedISO }} directly
+  eleventyConfig.addGlobalData('eleventyComputed', {
+    lastUpdatedISO: data => getLastModifiedISO(data.page?.inputPath, data.lastUpdated),
+  });
+  // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
+  // With Prettier 3, this means a leading pipe will exist be present when the line wraps.
+  eleventyConfig.addFilter('trimPipes', content => {
+    return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
+  });
+
+  /**
+   * @example
+    {% set foo = {foo: "bar"} %}
+    {% set bar = {bar: "baz"} %}
+    {% set merged = foo | merge(bar) %}
+    {{ merged | dump }}
+   */
+  eleventyConfig.addFilter('merge', function (obj1, obj2) {
+    return Object.assign({}, obj1, obj2);
+  });
+
+  // Custom filter to sort with a priority item first, e.g.
+  // {{ collection | sortWithFirst('fileSlug', 'default') }} => the item with the fileSlug of 'default' will be first
+  eleventyConfig.addFilter('sortWithFirst', function (collection, property, firstValue) {
+    const items = [...collection]; // Create a copy to avoid mutating original
+    return items.sort((a, b) => {
+      const aValue = property ? a[property] : a;
+      const bValue = property ? b[property] : b;
+      if (aValue === firstValue) return -1;
+      if (bValue === firstValue) return 1;
+      return 0;
+    });
+  });
+
+  //
+  // Add the componentPages collection
+  //
+  eleventyConfig.addCollection('componentPages', function (collectionApi) {
+    const componentPages = collectionApi.getFilteredByGlob(
+      path.join(eleventyConfig.directories.input, 'docs/components/**/*.md'),
+    );
+
+    return componentPages.map(page => {
+      const componentName = path.basename(page.inputPath, '.md');
+      const tagName = `wa-${componentName}`;
+      const component = allComponents.find(c => c.tagName === tagName);
+
+      // Add component to the page's data
+      if (component) {
+        page.data.component = component;
+      }
+
+      return page;
+    });
+  });
+
+  // Shortcodes - {% shortCode arg1, arg2 %}
+  eleventyConfig.addShortcode('cdnUrl', location => {
+    return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
+  });
+
+  // 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 '';
+  });
+
+  // Paired shortcodes - {% shortCode %}content{% endShortCode %}
+  eleventyConfig.addPairedShortcode('markdown', content => markdown.render(content || ''));
+
+  // Helpers
+  eleventyConfig.addNunjucksGlobal('getComponent', tagName => {
+    const component = allComponents.find(c => c.tagName === tagName);
+    if (!component) {
+      throw new Error(
+        `Unable to find "<${tagName}>". Make sure the file name is the same as the tag name (without prefix).`,
+      );
+    }
+    return component;
+  });
+
+  // Use our own markdown instance
+  eleventyConfig.setLibrary('md', markdown);
+
+  // for files with `unpublished: true`, it will make sure they do not make it into the final build at all, but will be usable in development.
+  eleventyConfig.addPreprocessor('unpublished', '*', (data, content) => {
+    if (data.unpublished && process.env.ELEVENTY_RUN_MODE === 'build') {
+      return false;
+    }
+
+    return content;
+  });
+
+  // Add anchors to headings
+  eleventyConfig.addTransform('doc-transforms', function (content) {
+    let doc = HTMLParse(content, { blockTextElements: { code: true } });
+
+    const transformers = [
+      anchorHeadingsTransformer({ container: '#content' }),
+      outlineTransformer({
+        container: '#content',
+        target: '.outline-links',
+        selector: 'h2, h3',
+        ifEmpty: doc => {
+          doc.querySelector('#outline')?.remove();
+        },
+      }),
+      // Add current link classes
+      currentLinkTransformer(),
+      codeExamplesTransformer(),
+      highlightCodeTransformer(),
+      copyCodeTransformer(),
+    ];
+
+    for (const transformer of transformers) {
+      transformer.call(this, doc);
+    }
+
+    return doc.toString();
+  });
+
+  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" target="_blank">#$1</a>',
+      },
+      // Replace [pr:1234] with a link to the pull request on GitHub
+      {
+        replace: /\[issue:([0-9]+)\]/gs,
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1" target="_blank">#$1</a>',
+      },
+      // Replace [discuss:1234] with a link to the discussion on GitHub
+      {
+        replace: /\[discuss:([0-9]+)\]/gs,
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1" target="_blank">#$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());
+  // }
+
+  // This needs to happen in "eleventy.after" otherwise incremental builds never update.
+  eleventyConfig.on('eleventy.after', function () {
+    let assetsDir = path.join(process.env.BASE_DIR || 'docs', 'assets');
+    const siteAssetsDir = path.join(eleventyConfig.directories.output, 'assets');
+    fs.cpSync(assetsDir, siteAssetsDir, { recursive: true });
+  });
+
+  for (let glob of passThrough) {
+    eleventyConfig.addPassthroughCopy(glob);
+  }
+
+  // // SSR plugin
+  // 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,
+  //   });
+  // }
+
+  // For a server build, we expect a server to run the second transform.
+  // For dev builds, we run the second transform in a middleware.
+  if (!isDev && !serverBuild) {
+    eleventyConfig.addTransform('simulate-webawesome-app', function (content) {
+      // Only run the transform on files nunjucks would transform.
+      if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
+        return content;
+      }
+
+      /** This largely mimics what an app would do and just stubs out what we don't care about. */
+      return SimulateWebAwesomeApp(content);
+    });
+  }
+}
+
+export const config = {
+  markdownTemplateEngine: 'njk',
+  dir: {
+    input: 'docs',
+    includes: '_includes',
+    layouts: '_layouts',
+  },
+  templateFormats: ['njk', 'md'],
+};

packages/webawesome/docs/_data/themer.js

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

packages/webawesome/docs/_includes/base.njk

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en" data-fa-kit-code="38c11e3f20" 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/search-list.js"></script>
+    <script type="module" src="/assets/scripts/outline.js"></script>
+    <script type="module" src="/assets/scripts/color-scheme.js"></script>
+    <script type="module" src="/assets/scripts/theme.js"></script>
+    {% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar.js"></script>{% endif %}
+    <script defer data-domain="webawesome.com" src="https://plausible.io/js/script.js"></script>
+
+    {% block head %}
+      <link rel="stylesheet" href="/assets/styles/docs.css" />
+    {% endblock %}
+
+    <script type="module">
+      // Set the initial color scheme before the page renders to prevent flashing
+      const value = localStorage.getItem('color-scheme') || 'auto';
+      const isDark = value === 'dark' || (value === 'auto' && matchMedia('(prefers-color-scheme: dark)').matches);
+      document.documentElement.classList.toggle('wa-dark', isDark);
+    </script>
+  </head>
+  <body class="layout-{{ layout | stripExtension }} page-{{ pageClass or page.fileSlug or 'home' }}{{ ' page-wide' if wide }}">
+    {% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180 } %}
+    {% set waPageAttributes = waPageAttributes or {} %}
+    {% set mergedWaPageAttributes = defaultWaPageAttributes | merge(waPageAttributes) %}
+    <wa-page
+      {% for key, value in mergedWaPageAttributes %}
+        {% if value != null and value != false %}
+          {{ key }}="{{ value }}"
+        {% endif %}
+      {% endfor %}
+    >
+        {% block pageHeader %}
+          <header slot="header" class="wa-split">
+            {# Nav toggle #}
+              <wa-button appearance="plain" size="small" data-toggle-nav>
+                <wa-icon name="bars" label="Toggle navigation" class="icon-default icon-embiggen"></wa-icon>
+                <wa-icon name="burger" aria-hidden="true" class="icon-hover icon-embiggen"></wa-icon>
+              </wa-button>
+
+              {# Logo - Desktop #}
+              <a class="brand-logo wa-desktop-only" href="/" aria-label="Web Awesome">
+                {% include "logo.njk" %}
+              </a>
+
+            {#- Logo - mobile branding -#}
+            <a href="/" class="brand-logo wa-mobile-only" aria-label="Web Awesome">
+              {# Logo - Mobile #}
+              {% include "logo-simple.njk" %}
+            </a>
+
+            <div id="docs-toolbar" class="wa-cluster gap-s">
+              <div class="wa-desktop-only wa-cluster wa-gap-2xs">
+                {% include "theme-selector.njk" %}
+                {% include "color-scheme-selector.njk" %}
+                {% include "github-icon-buttons.njk" %}
+              </div>
+              {#- Login -#}
+              {% include "login-or-avatar.njk" ignore missing %}
+            </div>
+          </header>
+        {% endblock %}
+
+      {# Sidebar #}
+      {% if hasSidebar %}
+        {# Mobile selectors #}
+        <div class="wa-mobile-only" slot="navigation-header">
+          <div class="wa-cluster wa-gap-s">
+            <a class="brand-logo" href="/" aria-label="Web Awesome">{% include "logo-simple.njk" %}</a>
+            <div class="wa-cluster wa-gap-2xs" style="flex-wrap: nowrap;">
+              {% include "theme-selector.njk" %}
+              {% include "color-scheme-selector.njk" %}
+              {% include "github-icon-buttons.njk" %}
+            </div>
+          </div>
+        </div>
+        <div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
+          {% 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 %}
+          <h1 class="title">{{ title }}</h1>
+        {% endblock %}
+
+        {% block beforeContent %}{% endblock %}
+
+        {% block content %}
+          {{ content | safe }}
+        {% endblock %}
+
+        {% block afterContent %}{% endblock %}
+      </main>
+
+      {% include 'search.njk' %}
+
+      {# Footer #}
+      {% block pageFooter %}{% endblock %}
+    </wa-page>
+
+  </body>
+</html>

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

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

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

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

packages/webawesome/docs/_includes/head.njk

@@ -0,0 +1,40 @@
+<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">
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<script type="module" src="/dist/webawesome.loader.js"></script>
+
+<link id="theme-stylesheet" rel="stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high" />
+
+<link rel="stylesheet" href="/dist/styles/webawesome.css" />
+
+<script type="module">
+  document.addEventListener("wa-discovery-complete", loadLayout)
+  function loadLayout () {
+    if (!customElements.get("wa-layout")) {
+      import("{% cdnUrl 'components/page/page.js' %}")
+        .catch((e) => {
+        // known errors with dual registration. This is only a thing in the free repo.
+        })
+    }
+  }
+</script>
+
+{# Used by Web Awesome App to inject other assets into the head. #}
+{% server "head" %}

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

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

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

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

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

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

packages/webawesome/docs/_includes/search.njk

@@ -1,4 +1,4 @@
-<wa-dialog id="site-search" no-header light-dismiss>
+<wa-dialog id="site-search" without-header light-dismiss>
   <div id="site-search-container">
     {# Header #}
     <header>
@@ -6,9 +6,9 @@
         <wa-input
           id="site-search-input"
           type="search"
-          filled
+          appearance="filled"
           size="large"
-          clearable
+          with-clear
           placeholder="Search"
           autofocus
           autocomplete="off"
@@ -24,7 +24,7 @@
           aria-haspopup="listbox"
           aria-activedescendant
         >
-          <wa-icon slot="prefix" name="search"></wa-icon>
+          <wa-icon slot="start" name="search"></wa-icon>
         </wa-input>
       </div>
     </header>

packages/webawesome/docs/_includes/sidebar.njk

@@ -0,0 +1,440 @@
+{# Search #}
+{% include "search-trigger-button.njk" %}
+{% from "pro-badge.njk" import proBadge %}
+{% from "planned-badge.njk" import plannedBadge %}
+
+{# Getting started #}
+<h2>Getting Started</h2>
+<ul>
+  <li><a href="/docs/">Installation</a></li>
+  <li><a href="/docs/usage">Usage</a></li>
+  <li><a href="/docs/customizing">Customizing</a></li>
+  <li><a href="/docs/form-controls">Form Controls</a></li>
+  <li><a href="/docs/localization">Localization</a></li>
+</ul>
+
+{# Resources #}
+<h2>Resources</h2>
+<ul>
+  <li><a href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">Help &amp; Support</a></li>
+  <li><a href="https://github.com/shoelace-style/webawesome/">Source Code</a></li>
+  <li><a href="/docs/resources/community">Community</a></li>
+  <li><a href="/docs/resources/accessibility">Accessibility</a></li>
+  <li><a href="/docs/resources/browser-support">Browser Support</a></li>
+  <li><a href="/docs/resources/contributing">Contributing</a></li>
+  <li><a href="/docs/resources/changelog">Changelog</a></li>
+  <li><a href="/license"><span class="wa-visually-hidden">Web Awesome </span>Free License</a></li>
+  <li><a href="/license/pro"><span class="wa-visually-hidden">Web Awesome </span>Pro License</a></li>
+  <li><a href="/tos">Terms of Service</a></li>
+  <li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
+</ul>
+
+<!-- Components -->
+<wa-details appearance="outlined">
+  <h2 slot="summary">
+    <a class="wa-cluster wa-gap-xs" href="/docs/components/" title="Overview">
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Components
+    </a>
+  </h2>
+  <ul>
+    <li>
+      <span class="wa-split">
+        <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
+          Page <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
+        </a>
+        {{ proBadge() }}
+      </span>
+    </li>
+    <li><a href="/docs/components/animated-image/">Animated Image</a></li>
+    <li><a href="/docs/components/animation/">Animation</a></li>
+    <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 class="wa-cluster wa-gap-xs" href="/docs/components/carousel/">
+        Carousel
+        <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
+      </a>
+      <ul>
+        <li>
+          <a class="wa-cluster wa-gap-xs" href="/docs/components/carousel-item/">
+            Carousel Item
+            <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
+          </a>
+        </li>
+      </ul>
+    </li>
+    <li><span class="is-planned wa-split">Charts <a href="https://github.com/shoelace-style/webawesome/issues/1073" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
+    <li><a href="/docs/components/checkbox/">Checkbox</a></li>
+    <li><a href="/docs/components/color-picker/">Color Picker</a></li>
+    <li><span class="is-planned wa-split">Combobox <a href="https://github.com/shoelace-style/webawesome/issues/1074" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
+    <li><a href="/docs/components/comparison/">Comparison</a></li>
+    <li>
+      <a class="wa-cluster wa-gap-xs" href="/docs/components/copy-button/">
+        Copy Button
+        <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
+      </a>
+    </li>
+    <li><span class="is-planned wa-split">Data Grid <a href="https://github.com/shoelace-style/webawesome/issues/1072" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
+    <li><span class="is-planned wa-split">Datepicker <a href="https://github.com/shoelace-style/webawesome/issues/1075" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
+    <li><a href="/docs/components/details/">Details</a></li>
+    <li><a href="/docs/components/dialog/">Dialog</a></li>
+    <li><a href="/docs/components/divider/">Divider</a></li>
+    <li><a href="/docs/components/drawer/">Drawer</a></li>
+    <li>
+      <a href="/docs/components/dropdown">Dropdown</a>
+      <ul>
+        <li><a href="/docs/components/dropdown-item">Dropdown Item</a></li>
+      </ul>
+    </li>
+    <li><a href="/docs/components/format-bytes/">Format Bytes</a></li>
+    <li><a href="/docs/components/format-date/">Format Date</a></li>
+    <li><a href="/docs/components/format-number/">Format Number</a></li>
+    <li><a href="/docs/components/icon/">Icon</a></li>
+    <li><a href="/docs/components/include/">Include</a></li>
+    <li><a href="/docs/components/input/">Input</a></li>
+    <li><a href="/docs/components/intersection-observer">Intersection Observer</a></li>
+    <li><a href="/docs/components/mutation-observer/">Mutation Observer</a></li>
+    <li><a href="/docs/components/popover/">Popover</a></li>
+    <li><a href="/docs/components/popup/">Popup</a></li>
+    <li><a href="/docs/components/progress-bar/">Progress Bar</a></li>
+    <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>
+      </ul>
+    </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/scroller/">Scroller</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/slider/">Slider</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></li>
+    <li><a href="/docs/components/tree-item/">Tree Item</a></li>
+    <li><a href="/docs/components/zoomable-frame">Zoomable Frame</a></li>
+    {# PLOP_NEW_COMPONENT_PLACEHOLDER #}
+  </ul>
+</wa-details>
+
+<!-- Style utilities -->
+<wa-details appearance="outlined">
+  <h2 slot="summary">
+    <a class="wa-cluster wa-gap-xs" href="/docs/utilities/" title="Overview">
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Style Utilities
+    </a>
+  </h2>
+  <ul>
+    <li><a href="/docs/utilities/native/">Native Styles</a></li>
+    <li><a href="/docs/utilities/color/">Color</a></li>
+    <li><a href="/docs/utilities/fouce/">Reducing FOUCE</a></li>
+    <li><a href="/docs/utilities/rounding/">Rounding</a></li>
+    <li><a href="/docs/utilities/text/">Text</a></li>
+    <li><a href="/docs/utilities/visually-hidden/">Visually Hidden</a></li>
+  </ul>
+</wa-details>
+
+<!-- Layout -->
+<wa-details appearance="outlined">
+  <h2 slot="summary">
+    <a class="wa-cluster wa-gap-xs" href="/docs/layout/" title="Overview">
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Layout
+    </a>
+  </h2>
+  <ul>
+    <li><a href="/docs/utilities/align-items/">Align Items</a></li>
+    <li><a href="/docs/utilities/gap/">Gap</a></li>
+    <li><a href="/docs/utilities/cluster/">Cluster</a></li>
+    <li><a href="/docs/utilities/flank/">Flank</a></li>
+    <li><a href="/docs/utilities/frame/">Frame</a></li>
+    <li><a href="/docs/utilities/grid/">Grid</a></li>
+    <li><a href="/docs/utilities/split/">Split</a></li>
+    <li><a href="/docs/utilities/stack/">Stack</a></li>
+    <li>
+      <span class="wa-split">
+        <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
+          Page <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
+        </a>
+        {{ proBadge() }}
+      </span>
+    </li>
+  </ul>
+</wa-details>
+
+<!-- Patterns -->
+<wa-details appearance="outlined">
+  <h2 slot="summary">
+    <a class="wa-cluster wa-gap-xs" href="/docs/patterns/" title="Overview">
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Patterns
+    </a>
+  </h2>
+  <ul>
+    <li>
+      <span class="wa-split">
+        <a href="/docs/patterns/app/">App</a>
+        {{ proBadge() }}
+      </span>
+      <ul>
+        <li>
+          <a href="/docs/patterns/app/action-panel/">Action Panel</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/activity-log/">Activity Log</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/comments/">Comments</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/data-display/">Data Display</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/description-list/">Description List</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/empty-state/">Empty State</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/faq/">FAQ</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/grid-list/">Grid List</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/leaderboard/">Leaderboard</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/pagination/">Pagination</a>
+        </li><li>
+          <a href="/docs/patterns/app/password/">Password</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/permissions/">Permissions</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/pricing/">Pricing</a>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <span class="wa-split">
+        <a href="/docs/patterns/blog-news/">Blog &amp; News</a>
+        {{ proBadge() }}
+      </span>
+      <ul>
+      <li>
+          <a href="/docs/patterns/blog-news/banners/">Banners</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/call-to-action/">Call To Action</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/category-list/">Category List</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/contact/">Contact</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/featured-post/">Featured Post</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/footer/">Footer</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/grid-section/">Grid Section</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/header/">Header</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/newsletter/">Newsletter</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/paywall/">Paywall</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/post-footer/">Post Footer</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/post-header/">Post Header</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/post-list/">Post List</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/login/">Sign Up &amp; Login</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/numbers/">Numbers</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/social-share/">Social Share</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/teams/">Teams</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/testimonials/">Testimonials</a>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <span class="wa-split">
+        <a href="/docs/patterns/ecommerce/">Ecommerce</a>
+        {{ proBadge() }}
+      </span>
+      <ul>
+        <li>
+          <a href="/docs/patterns/ecommerce/category-filter/">Category Filter</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/category-preview/">Category Preview</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/checkout-form/">Checkout Form</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/incentives/">Incentives</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/order-history/">Order History</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/order-summary/">Order Summary</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/product-list/">Product Lists</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/product-overview/">Product Overview</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/product-preview/">Product Preview</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/review/">Product Reviews</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/shopping-cart/">Shopping Cart</a>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <span class="wa-split">
+        <a href="/docs/patterns/layouts/">Layouts</a>
+        {{ proBadge() }}
+      </span>
+      <ul>
+        <li>
+          <a href="/docs/patterns/layouts/ecommerce/">Ecommerce</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/layouts/app/">App</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/layouts/blog/">Blog</a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</wa-details>
+
+<!-- Theming -->
+<h2>Theming</h2>
+<ul>
+  <li><a href="/docs/color-palettes">Color Palettes</a></li>
+  <li><a href="/docs/themes">Themes</a></li>
+  <li>
+    <span class="wa-split">
+      <a href="/themer" data-turbo="false">Theme Builder</a>
+      {{ proBadge({ description: "This requires an active Web Awesome Pro subscription", shrink: true }) }}
+    </span>
+  </li>
+</ul>
+
+<!-- Design tokens -->
+<wa-details appearance="outlined">
+  <h2 slot="summary">
+    <a class="wa-cluster wa-gap-xs" href="/docs/tokens/" title="Overview">
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+      Design Tokens
+    </a>
+  </h2>
+  <ul>
+    <li><a href="/docs/tokens/borders/">Borders</a></li>
+    <li><a href="/docs/tokens/color/">Color</a></li>
+    <li><a href="/docs/tokens/focus/">Focus</a></li>
+    <li><a href="/docs/tokens/shadows/">Shadows</a></li>
+    <li><a href="/docs/tokens/space/">Space</a></li>
+    <li><a href="/docs/tokens/transitions/">Transitions</a></li>
+    <li><a href="/docs/tokens/typography/">Typography</a></li>
+    <li><a href="/docs/tokens/component-groups/">Component Groups</a></li>
+  </ul>
+</wa-details>
+
+<wa-divider style="--spacing: var(--wa-space-xl);"></wa-divider>
+
+<div class="wa-stack wa-gap-xl" id="colophon">
+  <div class="wa-stack wa-gap-xs">
+    {% include "logo-simple.njk" %}
+    <div class="wa-cluster wa-gap-xs">
+      <h2 class="wa-heading-xs">Web Awesome</h2>
+      <wa-badge id="version-beta-badge" variant="orange" appearance="filled" style="font-size: var(--wa-font-size-2xs);">Beta</wa-badge>
+      <wa-tooltip for="version-beta-badge" distance="2" style="font-size: var(--wa-font-size-xs);">Here be freshly made Awesome&hellip; and possible dragons</wa-tooltip>
+    </div>
+    <p class="wa-caption-s">Version {{ package.version }}</p>
+    <p class="wa-caption-s">&copy; Fonticons, Inc.</p>
+  </div>
+
+  <div class="wa-cluster wa-gap-0 wa-caption-s the-socials">
+    <h2 class="wa-visually-hidden">Web Awesome Elsewhere</h2>
+    <a href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="github" label="GitHub"></wa-icon>
+    </a>
+    <a href="https://bsky.app/profile/webawesome.com" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="bluesky" label="Bluesky"></wa-icon>
+    </a>
+    <a href="https://mastodon.social/@webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="mastodon" label="Mastodon"></wa-icon>
+    </a>
+    <a href="https://x.com/webawesomer" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="x-twitter" label="Twitter (X)"></wa-icon>
+    </a>
+    <a href="https://www.threads.com/@web.awesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+      <wa-icon family="brands" name="threads" label="Threads"></wa-icon>
+    </a>
+  </div>
+</div>

packages/webawesome/docs/_includes/svgs/action-panel.njk

@@ -0,0 +1,8 @@
+<svg width="96" height="57" viewBox="0 0 96 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1H84C90.0751 1 95 5.92487 95 12V45C95 51.0751 90.0751 56 84 56H12C5.92487 56 1 51.0751 1 45V12C1 5.92487 5.92487 1 12 1Z" fill="white" stroke="#E4E5E9" stroke-width="2"/>
+<rect x="7" y="39" width="50" height="11" rx="4" fill="#4895FD"/>
+<rect x="7" y="8" width="41" height="5" fill="#616D8A"/>
+<rect x="7" y="19.75" width="76" height="3" fill="#D9D9D9"/>
+<rect x="7" y="25" width="76" height="3" fill="#D9D9D9"/>
+<rect x="7" y="32" width="76" height="3" fill="#D9D9D9"/>
+</svg>

packages/webawesome/docs/_includes/svgs/animated-image.njk

@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1H52C58.0751 1 63 5.92487 63 12V52C63 58.0751 58.0751 63 52 63H12C5.92487 63 1 58.0751 1 52V12C1 5.92487 5.92487 1 12 1Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M20 32C20 27.7344 22.25 23.7969 26 21.6406C29.7031 19.4844 34.25 19.4844 38 21.6406C41.7031 23.7969 44 27.7344 44 32C44 36.3125 41.7031 40.25 38 42.4062C34.25 44.5625 29.7031 44.5625 26 42.4062C22.25 40.25 20 36.3125 20 32ZM28.8125 26.9375C28.4375 27.125 28.25 27.5 28.25 27.875V36.125C28.25 36.5469 28.4375 36.9219 28.8125 37.1094C29.1406 37.3438 29.6094 37.2969 29.9375 37.1094L36.6875 32.9844C37.0156 32.75 37.25 32.4219 37.25 32C37.25 31.625 37.0156 31.25 36.6875 31.0625L29.9375 26.9375C29.6094 26.7031 29.1406 26.7031 28.8125 26.8906V26.9375Z" fill="var(--wa-color-brand-fill-loud)"/>
+</svg>

packages/webawesome/docs/_includes/svgs/animation.njk

@@ -0,0 +1,3 @@
+<svg width="74" height="26" viewBox="0 0 74 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 13C5 9 15.4 1 25 1C37 1 45.25 10.75 45.25 16C45.25 21.25 43 25 37 25C31 25 28.75 21.25 28.75 16C28.75 10.75 37 1 49 1C58.6 1 69 9 73 13M73 13V7M73 13H67" stroke="var(--wa-color-neutral-border-loud)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/webawesome/docs/_includes/svgs/avatar.njk

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="23" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M24 23.75C22.0234 23.75 20.2188 22.7188 19.2305 21C18.2422 19.3242 18.2422 17.2188 19.2305 15.5C20.2188 13.8242 22.0234 12.75 24 12.75C25.9336 12.75 27.7383 13.8242 28.7266 15.5C29.7148 17.2188 29.7148 19.3242 28.7266 21C27.7383 22.7188 25.9336 23.75 24 23.75ZM22.0234 25.8125H25.9336C30.1875 25.8125 33.625 29.25 33.625 33.5039C33.625 34.1914 33.0234 34.75 32.3359 34.75H15.6211C14.9336 34.75 14.375 34.1914 14.375 33.5039C14.375 29.25 17.7695 25.8125 22.0234 25.8125Z" fill="var(--wa-color-neutral-on-quiet)"/>
+</svg>