update npm-check-updates and set a cooldown

* use tokens for `<wa-dropdown-item>` transitions

* add changelog

.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/ISSUE_TEMPLATE/config.yml

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

.github/workflows/client_tests.yml

@@ -1,14 +1,16 @@
 # # 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
+name: Client Tests
 
 on:
+  workflow_dispatch:
   push:
     branches: [next]
   pull_request:
     branches: [next]
 
+
 jobs:
   client_test:
     runs-on: ubuntu-latest
@@ -29,42 +31,18 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Lint
-        run: npm run prettier && npm run lint
+        run: npm run prettier
+        working-directory: ./packages/webawesome
+
       - name: Build
         run: npm run build
+        working-directory: ./packages/webawesome
+
       - name: Install Playwright
         run: npx playwright install --with-deps
+        working-directory: ./packages/webawesome
+
       - name: Run CSR tests
         # FAIL_FAST to fail on first failing test.
         run: FAIL_FAST="true" CSR_ONLY="true" npm run test
-  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
-      # Just lint here too. Save some GH Action minutes and not need to use "depends_on" or anything.
-      - name: Lint
-        run: npm run prettier && npm run lint
-
-      - name: Build
-        run: npm run build
-
-      - name: Install Playwright
-        run: npx playwright install --with-deps
-
-      - 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

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

.prettierignore

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

.vscode/extensions.json

@@ -3,7 +3,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 @@
+3.0.0

cspell.json

@@ -8,23 +8,28 @@
     "APG",
     "apos",
     "atrule",
+    "autocapitalize",
     "autocorrect",
     "autofix",
+    "autofocus",
     "autoload",
     "autoloader",
     "autoloading",
     "autoplay",
     "bezier",
+    "Blockquotes",
     "boxicons",
     "CACHEABLE",
     "callout",
     "callouts",
+    "canvastext",
     "chatbubble",
     "checkmark",
     "Clippy",
     "codebases",
     "codepen",
     "colocated",
+    "colorjs",
     "colour",
     "combobox",
     "Commonmark",
@@ -39,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",
@@ -54,7 +68,10 @@
     "esbuild",
     "exportmaps",
     "exportparts",
+    "fetchpriority",
     "fieldsets",
+    "focusin",
+    "focusout",
     "fontawesome",
     "formaction",
     "formdata",
@@ -64,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",
     "keydown",
     "keyframes",
+    "keymaker",
+    "Konnor",
     "Kool",
     "labelledby",
     "Laravel",
@@ -100,6 +123,7 @@
     "metaframeworks",
     "middlewares",
     "minlength",
+    "minmax",
     "monospace",
     "mousedown",
     "mousemove",
@@ -108,10 +132,15 @@
     "multiselectable",
     "nextjs",
     "nocheck",
+    "noindex",
     "noopener",
     "noreferrer",
+    "noscript",
+    "Notdog",
     "novalidate",
+    "nowrap",
     "Numberish",
+    "nums",
     "oklab",
     "oklch",
     "onscrollend",
@@ -120,10 +149,13 @@
     "peta",
     "petabit",
     "Preact",
+    "preconnect",
+    "prerendered",
     "prismjs",
     "progressbar",
     "radiogroup",
     "Railsbyte",
+    "referrerpolicy",
     "remixicon",
     "reregister",
     "resizer",
@@ -140,7 +172,9 @@
     "scrollbars",
     "scrollend",
     "scroller",
+    "Scrollers",
     "Segoe",
+    "selectattr",
     "semibold",
     "shadowrootmode",
     "Shortcode",
@@ -149,17 +183,21 @@
     "slotchange",
     "smartquotes",
     "spacebar",
+    "srcdoc",
     "stylesheet",
+    "svgs",
     "Tabbable",
     "tabindex",
     "tabler",
     "tablist",
     "tabpanel",
+    "tbody",
     "templating",
     "tera",
     "testid",
     "textareas",
     "textfield",
+    "thead",
     "Themer",
     "tinycolor",
     "transitionend",
@@ -170,6 +208,7 @@
     "typeof",
     "unbundles",
     "unbundling",
+    "Uncategorized",
     "unicons",
     "unsanitized",
     "unsupportive",
@@ -183,7 +222,8 @@
     "webawesomer",
     "WEBP",
     "Webpacker",
-    "xmark"
+    "xmark",
+    "zoomable"
   ],
   "ignorePaths": [
     "package.json",

docs/.eleventy.js

@@ -1,142 +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 componentList from './_data/componentList.js';
-import litPlugin from '@lit-labs/eleventy-plugin-lit';
-
-import process from 'process';
-
-const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
-const isAlpha = process.argv.includes('--alpha');
-const isDeveloping = process.argv.includes('--develop');
-
-export default function (eleventyConfig) {
-  // NOTE - alpha setting removes certain pages
-  if (isAlpha) {
-    eleventyConfig.ignores.add('**/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
-
-  // Use our own markdown instance
-  eleventyConfig.setLibrary('md', markdown);
-
-  // Add anchors to headings
-  eleventyConfig.addPlugin(anchorHeadingsPlugin({ container: '#content' }));
-
-  // Add an outline to the page
-  eleventyConfig.addPlugin(
-    outlinePlugin({
-      container: '#content',
-      target: '.outline-links',
-      selector: 'h2, h3',
-      ifEmpty: doc => {
-        doc.querySelector('#outline')?.remove();
-      }
-    })
-  );
-
-  // Add current link classes
-  eleventyConfig.addPlugin(currentLink());
-
-  // Add code examples for `<code class="example">` blocks
-  eleventyConfig.addPlugin(codeExamplesPlugin());
-
-  // Highlight code blocks with Prism
-  eleventyConfig.addPlugin(highlightCodePlugin());
-
-  // Add copy code buttons to code blocks
-  eleventyConfig.addPlugin(copyCodePlugin());
-
-  // Various text replacements
-  eleventyConfig.addPlugin(
-    replaceTextPlugin([
-      // Replace [issue:1234] with a link to the issue on GitHub
-      {
-        replace: /\[pr:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>'
-      },
-      // Replace [pr:1234] with a link to the pull request on GitHub
-      {
-        replace: /\[issue:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>'
-      },
-      // Replace [discuss:1234] with a link to the discussion on GitHub
-      {
-        replace: /\[discuss:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>'
-      }
-    ])
-  );
-
-  const omittedModules = [];
-
-  // problematic components:
-  // animation (breaks on navigation + ssr with Turbo)
-  // mutation-observer (why SSR this?)
-  // resize-observer (why SSR this?)
-  // tooltip (why SSR this?)
-  const componentModules = componentList
-    // .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
-    .map(component => {
-      const name = component.tagName.split(/wa-/)[1];
-      return `./dist/components/${name}/${name}.js`;
-    });
-
-  eleventyConfig.addPlugin(litPlugin, {
-    mode: 'worker',
-    componentModules
-  });
-
-  // Build the search index
-  eleventyConfig.addPlugin(
-    searchPlugin({
-      filename: '',
-      selectorsToIgnore: ['code.example'],
-      getContent: doc => doc.querySelector('#content')?.textContent ?? ''
-    })
-  );
-
-  // Production-only plugins
-  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/_data/componentList.js

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

docs/_data/components.js

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

docs/_data/componentsBy.js

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

docs/_includes/base.njk

@@ -1,178 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="{{ description }}">
-    <meta name="theme-color" content="#f36944">
-    {% if noindex %}<meta name="robots" content="noindex">{% endif %}
-
-    <title>{{ title }}</title>
-
-    <link rel="icon" href="/assets/images/webawesome-logo.svg" />
-    <link rel="apple-touch-icon" href="/assets/images/app-icon.png">
-
-    {# Scripts #}
-    {# Hydration stuff #}
-    <script src="/assets/scripts/hydration-errors.js"></script>
-    <link rel="stylesheet" href="/assets/styles/hydration-errors.css">
-    <link rel="preconnect" href="https://cdn.jsdelivr.net">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.4/+esm"></script>
-
-    <script type="module" src="/assets/scripts/code-examples.js"></script>
-    <script type="module" src="/assets/scripts/color-scheme.js"></script>
-    <script type="module" src="/assets/scripts/copy-code.js"></script>
-    <script type="module" src="/assets/scripts/preset-theme.js"></script>
-    <script type="module" src="/assets/scripts/scroll.js"></script>
-    <script type="module" src="/assets/scripts/turbo.js"></script>
-    <script type="module" src="/assets/scripts/search.js"></script>
-    <script type="module" src="/assets/scripts/outline.js"></script>
-    <script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>
-
-    {# Web Awesome #}
-    <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
-    <link rel="stylesheet" id="theme-stylesheet" />
-    <link rel="stylesheet" href="/dist/themes/applied.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />
-    <link rel="stylesheet" href="/dist/themes/forms.css" />
-
-    {# Docs styles #}
-    <link rel="stylesheet" href="/assets/styles/docs.css" />
-
-    {# Set the theme to prevent flashing #}
-    <script>
-      function getColorScheme() {
-        return localStorage.getItem('colorScheme') || 'auto';
-      }
-
-      function getPresetTheme () {
-        return localStorage.getItem('presetTheme') || 'default';
-      }
-
-      function isDark() {
-        const colorScheme = getColorScheme()
-        if (colorScheme === 'auto') {
-          return window.matchMedia('(prefers-color-scheme: dark)').matches;
-        }
-        return colorScheme === 'dark';
-      }
-
-      const stylesheet = document.getElementById("theme-stylesheet")
-      let preset = getPresetTheme()
-
-      stylesheet.href = `/dist/themes/${preset}.css`
-
-      document.documentElement.classList.toggle(
-        `wa-theme-${preset}-dark`,
-        isDark()
-      );
-    </script>
-  </head>
-  <body class="layout-{{ layout | stripExtension }}">
-    <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
-    <wa-page view="desktop">
-      <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">
-          {# Preset theme selector #}
-          <wa-dropdown id="preset-theme-selector">
-            <wa-button slot="trigger" appearance="tinted" size="small" pill caret>
-              <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
-              <span id="preset-theme-selector__text" class="only-desktop">Default</span>
-            </wa-button>
-            <wa-menu>
-              <wa-menu-item type="checkbox" value="default">Default</wa-menu-item>
-              <wa-menu-item type="checkbox" value="classic">Classic</wa-menu-item>
-              <wa-menu-item type="checkbox" value="fa">Font Awesome</wa-menu-item>
-
-              <wa-menu-item type="checkbox" value="active">Active</wa-menu-item>
-              <wa-menu-item type="checkbox" value="brutalist">Brutalism</wa-menu-item>
-              <wa-menu-item type="checkbox" value="glassy">Glassy</wa-menu-item>
-              <wa-menu-item type="checkbox" value="migration">Migration</wa-menu-item>
-              <wa-menu-item type="checkbox" value="playful">Playful</wa-menu-item>
-              <wa-menu-item type="checkbox" value="premium">Premium</wa-menu-item>
-            </wa-menu>
-          </wa-dropdown>
-          {# 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/logo-simple.njk

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

docs/_includes/logo.njk

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

docs/_includes/sidebar.njk

@@ -1,293 +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/">Components Overview</a>
-  </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 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>
-
-{# Layout #}
-<h2>Layout</h2>
-<ul>
-  <li><a href="/docs/layout">Layout Overview</a></li>
-  <li><a href="/docs/components/page">Page</a></li>
-  <li><a href="/docs/layout/cluster">Cluster</a></li>
-  <li><a href="/docs/layout/flank">Flank</a></li>
-  <li><a href="/docs/layout/frame">Frame</a></li>
-  <li><a href="/docs/layout/grid">Grid</a></li>
-  <li><a href="/docs/layout/split">Split</a></li>
-  <li><a href="/docs/layout/stack">Stack</a></li>
-</ul>
-
-{# Patterns #}
-<h2>Patterns</h2>
-<ul>
-  <li>
-    <a href="/docs/patterns/">Pattern Overview</a>
-  </li>
-  <li><a href="/docs/patterns/app">Web App</a></li>
-  <li><a href="/docs/patterns/ecommerce">E-commerce</a>
-    <ul>
-      <li><a href="/docs/patterns/ecommerce-product-review">Product Reviews</a></li>
-      <li><a href="/docs/patterns/ecommerce-product-list">Product Lists</a></li>
-      <li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
-      <li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
-       <li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
-      <li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
-      <li><a href="/docs/patterns/ecommerce-order-summmary">Order Summaries</a></li>
-      <li><a href="/docs/patterns/ecommerce-order-history">Order History</a></li>
-    </ul>
-  </li>
-  <li><a href="/docs/patterns/blog">Blog</a></li>
-  <li><a href="/docs/patterns/news">News</a></li>
-</ul>
-
-{# Theming #}
-<h2>Theming</h2>
-<ul>
-  <li>
-    <a href="/docs/theming/">Theming Overview</a>
-  </li>
-  <li>
-    <a href="/docs/theming/color">Color</a>
-  </li>
-  <li>
-    <a href="/docs/theming/typography">Typography</a>
-  </li>
-  <li>
-    <a href="/docs/theming/space">Space</a>
-  </li>
-  <li>
-    <a href="/docs/theming/borders">Borders</a>
-  </li>
-  <li>
-    <a href="/docs/theming/focus">Focus</a>
-  </li>
-  <li>
-    <a href="/docs/theming/shadows">Shadows</a>
-  </li>
-  <li>
-    <a href="/docs/theming/transitions">Transitions</a>
-  </li>
-  <li>
-    <a href="/docs/theming/component-groups">Component Groups</a>
-  </li>
-</ul>
-
-{# Style Utilities #}
-<h2>Style Utilities</h2>
-<ul>
-  <li><a href="/docs/style-utilities/align-items">Align Items</a></li>
-  <li><a href="/docs/style-utilities/border-radius">Border Radius</a></li>
-  <li><a href="/docs/style-utilities/gap">Gap</a></li>
-  <li><a href="/docs/style-utilities/text">Text</a></li>
-</ul>

docs/_includes/svgs/icon-button.njk

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

docs/_layouts/page-wide.njk

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

docs/_layouts/page.njk

@@ -1,4 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-
-{% 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/images/web-awesome-mark-black.svg

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

docs/assets/images/webawesome-logo.svg

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

docs/assets/scripts/code-examples.js

@@ -1,58 +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` +
-      `<link rel="stylesheet" href="${cdnUrl}themes/applied.css">\n\n` +
-      `${code.textContent}`;
-    const css = 'body {\n  font: 16px sans-serif;\n  padding: 2rem;\n}';
-    const js = '';
-
-    const form = document.createElement('form');
-    form.action = 'https://codepen.io/pen/define';
-    form.method = 'POST';
-    form.target = '_blank';
-
-    const data = {
-      title: '',
-      description: '',
-      tags: ['webawesome'],
-      editors: '1000',
-      head: '<meta name="viewport" content="width=device-width">',
-      html_classes: '',
-      css_external: '',
-      js_external: '',
-      js_module: true,
-      js_pre_processor: 'none',
-      html,
-      css,
-      js
-    };
-
-    const input = document.createElement('input');
-    input.type = 'hidden';
-    input.name = 'data';
-    input.value = JSON.stringify(data);
-    form.append(input);
-
-    document.documentElement.append(form);
-    form.submit();
-    form.remove();
-  }
-});

docs/assets/scripts/color-scheme.js

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

docs/assets/scripts/copy-code.js

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

docs/assets/scripts/preset-theme.js

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

docs/assets/scripts/scroll.js

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

docs/assets/styles/code-examples.css

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

docs/assets/styles/code-highlighter.css

@@ -1,59 +0,0 @@
-pre {
-  background-color: var(--wa-color-gray-20);
-  color: white;
-}
-.code-comment,
-.code-prolog,
-.code-doctype,
-.code-cdata,
-.code-operator,
-.code-punctuation {
-  color: var(--wa-color-gray-70);
-}
-
-.code-namespace {
-  opacity: 0.7;
-}
-
-.code-property,
-.code-keyword,
-.code-tag,
-.code-url {
-  color: var(--wa-color-indigo-70);
-}
-
-.code-symbol,
-.code-deleted,
-.code-important {
-  color: var(--wa-color-red-70);
-}
-
-.code-boolean,
-.code-constant,
-.code-selector,
-.code-attr-name,
-.code-string,
-.code-char,
-.code-builtin,
-.code-inserted {
-  color: var(--wa-color-green-70);
-}
-
-.code-atrule,
-.code-attr-value,
-.code-number,
-.code-variable,
-.code-function,
-.code-class-name,
-.code-regex {
-  color: var(--wa-color-blue-70);
-}
-
-.code-important,
-.code-bold {
-  font-weight: bold;
-}
-
-.code-italic {
-  font-style: italic;
-}

docs/assets/styles/copy-code.css

@@ -1,29 +0,0 @@
-wa-copy-button.copy-button {
-  --background-color: var(--wa-color-gray-20);
-  --background-color-hover: color-mix(in oklab, var(--background-color), white 5%);
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  font-family: var(--wa-font-family-body);
-  color: var(--wa-color-gray-80);
-  border-radius: var(--wa-border-radius-s);
-  padding: 0.25rem;
-
-  &:hover {
-    color: white;
-  }
-
-  &:focus-visible {
-    outline: var(--wa-focus-ring);
-  }
-}
-
-@media (hover: hover) {
-  .copy-button:not(:focus-within) {
-    opacity: 0;
-  }
-
-  pre:hover > .copy-button {
-    opacity: 1;
-  }
-}

docs/assets/styles/docs.css

@@ -1,419 +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);
-}
-
-/* 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);
-  }
-}
-
-#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;
-}
-
-.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);
-  }
-}
-
-/* Index Pages */
-wa-page > main:has(> .index-grid) {
-  max-width: 120ch;
-  margin-inline: auto;
-}
-
-.index-summary {
-  max-inline-size: 80ch;
-}
-
-.index-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
-  gap: var(--wa-space-2xl);
-}
-
-.index-category {
-  grid-column: 1 / -1;
-  margin-block-end: 0;
-  margin-block-start: var(--wa-space-2xl);
-}
-
-.index-grid a {
-  border-radius: var(--wa-border-radius-m);
-}
-
-.index-grid wa-card {
-  --box-shadow: none;
-  --spacing: var(--wa-space-m);
-  inline-size: 100%;
-}
-
-.index-grid wa-card:hover {
-  --border-color: var(--wa-color-brand-border-loud);
-  --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
-  & .page-name {
-    color: var(--wa-color-brand-on-quiet);
-  }
-}
-
-.index-grid wa-card [slot='header'] {
-  display: flex;
-}
-
-.index-grid wa-card::part(header) {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  border-bottom: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: calc(6rem + var(--spacing));
-}
-
-.index-grid .page-name {
-  font-size: var(--wa-font-size-s);
-  font-weight: var(--wa-font-weight-action);
-}
-
-/* Index Pages */
-wa-page > main:has(> .index-grid) {
-  max-width: 120ch;
-  margin-inline: auto;
-}
-
-.index-summary {
-  max-inline-size: 80ch;
-}
-
-.index-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
-  gap: var(--wa-space-2xl);
-}
-
-.index-category {
-  grid-column: 1 / -1;
-  margin-block-end: 0;
-  margin-block-start: var(--wa-space-2xl);
-}
-
-.index-grid a {
-  border-radius: var(--wa-border-radius-m);
-}
-
-.index-grid wa-card {
-  --box-shadow: none;
-  --spacing: var(--wa-space-m);
-  inline-size: 100%;
-}
-
-.index-grid wa-card:hover {
-  --border-color: var(--wa-color-brand-border-loud);
-  --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
-  & .page-name {
-    color: var(--wa-color-brand-on-quiet);
-  }
-}
-
-.index-grid wa-card [slot='header'] {
-  display: flex;
-}
-
-.index-grid wa-card::part(header) {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  border-bottom: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: calc(6rem + var(--spacing));
-}
-
-.index-grid .page-name {
-  font-size: var(--wa-font-size-s);
-  font-weight: var(--wa-font-weight-action);
-}
-
-/* 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);
-}
-
-/* Layout Examples */
-.layout-example-boundary {
-  border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
-  border-radius: var(--wa-border-radius-m);
-  padding: var(--wa-space-s);
-}
-
-.layout-example-block {
-  background-color: var(--wa-color-indigo-60);
-  border-radius: var(--wa-border-radius-s);
-  min-block-size: 4rem;
-  min-inline-size: 4rem;
-}
-
-.layout-example-mixed-sizing .layout-example-block:nth-child(3n) {
-  min-inline-size: 6rem;
-}
-.layout-example-mixed-sizing .layout-example-block:nth-child(3n + 2) {
-  min-inline-size: 8rem;
-}
-
-/* Utilities */
-.two-columns {
-  columns: 2;
-  gap: 1rem;
-}
-
-.component-table td > * + * {
-  margin-block-start: var(--wa-space-s);
-}
-
-.table-scroll {
-  overflow-x: auto;
-}
-
-/** mobile */
-@media screen and (max-width: 768px) {
-  wa-page .only-desktop {
-    display: none;
-  }
-}
-
-/** desktop */
-@media screen and not (max-width: 768px) {
-  wa-page [data-toggle-nav],
-  wa-page .only-mobile {
-    display: none;
-  }
-
-  /* Navigation sidebar */
-  wa-page::part(navigation) {
-    border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-  }
-
-  wa-page > #sidebar {
-    overflow: auto;
-    max-height: 100%;
-    min-width: 300px;
-    padding: var(--wa-space-xl);
-    max-width: 300px;
-  }
-
-  wa-page > main {
-    padding: var(--wa-space-3xl);
-  }
-}

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

@@ -1,69 +0,0 @@
----
-title: Divider
-description: Dividers are used to visually separate or group elements.
-layout: component
----
-
-```html {.example}
-<wa-divider></wa-divider>
-```
-
-## Examples
-
-### Width
-
-Use the `--width` custom property to change the width of the divider.
-
-```html {.example}
-<wa-divider style="--width: 4px;"></wa-divider>
-```
-
-### Color
-
-Use the `--color` custom property to change the color of the divider.
-
-```html {.example}
-<wa-divider style="--color: tomato;"></wa-divider>
-```
-
-### Spacing
-
-Use the `--spacing` custom property to change the amount of space between the divider and it's neighboring elements.
-
-```html {.example}
-<div style="text-align: center;">
-  Above
-  <wa-divider style="--spacing: 2rem;"></wa-divider>
-  Below
-</div>
-```
-
-### Vertical
-
-Add the `vertical` attribute to draw the divider in a vertical orientation. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container.
-
-```html {.example}
-<div style="display: flex; align-items: center; height: 2rem;">
-  First
-  <wa-divider vertical></wa-divider>
-  Middle
-  <wa-divider vertical></wa-divider>
-  Last
-</div>
-```
-
-### Menu Dividers
-
-Use dividers in [menus](/docs/components/menu) to visually group menu items.
-
-```html {.example}
-<wa-menu style="max-width: 200px;">
-  <wa-menu-item value="1">Option 1</wa-menu-item>
-  <wa-menu-item value="2">Option 2</wa-menu-item>
-  <wa-menu-item value="3">Option 3</wa-menu-item>
-  <wa-divider></wa-divider>
-  <wa-menu-item value="4">Option 4</wa-menu-item>
-  <wa-menu-item value="5">Option 5</wa-menu-item>
-  <wa-menu-item value="6">Option 6</wa-menu-item>
-</wa-menu>
-```

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
-
-Add a tooltip that references the `id` of the icon button to provide contextual information.
-
-```html {.example}
-<wa-icon-button id="icon-button" name="gear" variant="solid" label="Settings"></wa-icon-button>
-<wa-tooltip for="icon-button">Settings</wa-tooltip>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable the icon button.
-
-```html {.example}
-<wa-icon-button name="gear" variant="solid" label="Settings" disabled></wa-icon-button>
-```

docs/docs/components/index.md

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

docs/docs/components/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/reference.njk

@@ -1,34 +0,0 @@
----
-title: Component Reference
-layout: docs
----
-
-<style>
-table code {
-	white-space: nowrap;
-}
-</style>
-
-{% for type, all in componentsBy -%}
-<h2>All {{ "CSS custom properties" if type == "cssProperty" else ("CSS parts" if type == "cssPart" else (type | title) + "s") }}</h2>
-
-<table>
-	<thead>
-		<tr>
-			<th>Name</th>
-			<th>Components</th>
-		</tr>
-	</thead>
-	{% for name, thingComponents in all -%}
-	<tr>
-		<th><code>{{ name }}{{ "()" if type == "method" }}</code></th>
-		<td>
-			{% for component in thingComponents  %}
-				<a href="../{{ component.slug }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
-			{%- endfor -%}
-		</td>
-	</tr>
-	{%- endfor %}
-</table>
-
-{%- endfor %}

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

docs/docs/experimental/style-guide.md

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

docs/docs/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 by adding the `data-fa-kit-code` attribute to any element on the page, 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';
-  setKitCode('YOUR_KIT_CODE_HERE');
-</script>
-```
-
-## Cherry Picking
-
-Cherry picking will only load 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/layout/index.md

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

docs/docs/patterns/blog.md

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

docs/docs/patterns/business.md

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

docs/docs/patterns/education.md

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

docs/docs/patterns/entertainement.md

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

docs/docs/patterns/index.md

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

docs/docs/patterns/membership.md

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

docs/docs/patterns/news.md

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

docs/docs/patterns/non-profit.md

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

docs/docs/patterns/portfilio.md

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

docs/docs/patterns/portfolio.md

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

docs/docs/patterns/product-landing.md

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

docs/docs/resources/changelog.md

@@ -1,95 +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!
-:::
-
-## Next
-
-- Added support for <kbd>Enter</kbd> to `<sl-split-panel>` to align with ARIA APG's [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/)
-- Added more resilient support for lazy loaded options in `<wa-select>`
-- Added support for vertical button groups
-- Fixed a bug in `<wa-rating>` when using `precision`
-- Fixed a bug in `<wa-relative-time>` where the title attribute would show with redundant info
-- Fixed a bug in `<wa-tooltip>` that caused a memory leak in disconnected elements
-- Fixed a bug in `<wa-select>` that prevented label changes in `<wa-option>` from updating the controller
-- Fixed a bug in `<wa-carousel>` that caused interactive elements to be activated when dragging
-- Improved alignment of the play icon in `<wa-animated-image>`
-- Improved behavior of link buttons to not set `noreferrer noopener` by default
-
-## 3.0.0-alpha.3
-
-- Added [SSR support](/docs/experimental/ssr/) to all components
-- Added `scroll-margin-top` to children of `wa-page`
-- Added `--scroll-margin-top` css variable `wa-page`
-- Fixed form controls to behave like their native counterparts for value and defaultValue properties / attributes respectively.
-- Fixed a bug in `<wa-input>` around value attributes and properties to behave like native `<input>`.
-- Fixed a bug in `<wa-select>` that made the suffix slot collide with the clear button
-- Fixed a bug in `<wa-checkbox>` where unchecking and then checking would "clear" its value.
-- Fixed a bug where `<wa-relative-time>` would announce the full time instead of the relative time in screen readers [#22](https://github.com/shoelace-style/webawesome-alpha/issues/22)
-- Fixed a bug in `<wa-tab-group>` in Firefox where the overflow container would keep focus. [#14](https://github.com/shoelace-style/webawesome-alpha/issues/14)
-- Fixed a bug in `<wa-input>` where `minlength` and `maxlength` were not being properly validated. [#35](https://github.com/shoelace-style/webawesome-alpha/issues/35)
-- Fixed a bug in `<wa-carousel>` that made pagination work incorrectly
-
-## 3.0.0-alpha.2
-
-- 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>`, `<wa-tree-item>`, and `<wa-popup>`
-- Added visible labels to `<wa-color-picker>`
-- Changed the attribute for setting the base path declaratively to `data-webawesome` instead of `data-shoelace`; additionally, you can place it on any element now instead of just the associated `<script>` tag
-- Changed the `sl` prefix to `wa` for Web Awesome, including tags, events, etc.
-- Changed `primary` variants to `brand` in all components
-- Changed the internal structure of `<wa-checkbox>` so that the internal checkbox now takes up the full height and width of its wrapping container.
-- Changed disabled form controls so they don't have the `disabled` attribute when disabled (use `:state(disabled)` or `[data-wa-disabled]` instead)
-- Changed `<wa-checkbox>` to no longer have a `checked` attribute set when their `checked` property is changed, e.g. `el.checked = true` (use the `:state(:checked)` or `[data-checked]` selector instead)
-- Changed `<wa-checkbox>` and `<wa-switch>` to use `:state(checked)` (fallback `[data-wa-checked]`) for styling their "checked" state (the `checked` attribute now maps to `defaultChecked` like native HTML checkboxes)
-- Changed the `data-optional`, `data-required`, `data-invalid`, `data-valid`, `data-user-invalid`, and `data-user-valid` states to `data-wa-*` prefix to avoid conflicts with user provided attributes
-- Changed `<wa-icon>` so icons are no longer fixed width by default to accommodate variable width icons
-- Changed `<wa-radio>` from `display: block;` to `display: inline-block`
-- Changed `<wa-tab-group>` to implement a "roving tabindex" and `<wa-tab>` is no longer tabbable by default. This aligns closer to the APG pattern for tabs. [#2041]
-- Changed `<wa-tooltip>` to no longer wrap content due to accessibility and styling issues. Tooltips are now associated using the `for` attribute + an `id` on the trigger [#123]
-- Improved `<wa-spinner>` so it doesn't wobble when zooming in Safari
-- Improved submenu selection by implementing the [safe triangle](https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/) method [#1550]
-- Improved tabbing in `<wa-tab-group>` so it uses a roving tab index instead of being able to cycle through each tab
-- Removed `default` from `<wa-button>` and made `neutral` the new default
-- Removed the `circle` modifier from `<wa-button>` because button's no longer have a set height
-- Removed the `active-tab-indicator` part from `<wa-tab-group>`
-- Removed the `closable` attribute from `<wa-tab>` because you can't nest interactive elements (see the updated example for a better method)
-- Removed the `show()` method from `<wa-tab-group>` (use the `active` attribute instead)
-- Removed the `show()` and `hide()` methods from `<wa-dialog>` and `<wa-drawer`> (toggle the `open` attribute instead)
-- Removed JavaScript-based animation customizations due to high confusion and low usage
-- Removed the `wa-request-close` event from `<wa-dialog>` and `<wa-drawer>` (use the `wa-hide` event instead)
-- Removed `inline` from `<wa-color-picker>`
-- Removed `getFormControls()` since we now use Form Associated Custom Elements and can reliably access Web Awesome Elements via `formElement.elements`.
-- Removed `valueAsDate` from `<wa-input>`; use the following to mimic native behaviors:
-    setter: `waInput.value = new Date().toLocaleDateString()`
-    getter: `new Date(waInput.value)`
-- Removed `valueAsNumber` from `<wa-input>`; use the following to mimic native behaviors:
-    setter: `waInput.value = 5.toString()`
-    getter: `Number(waInput.value)`
-
-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)
-
-Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/)

docs/docs/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/style-utilities/text.md

@@ -1,62 +0,0 @@
----
-title: Text
-description: Text utility classes combine custom properties from your Web Awesome theme to conveniently style text content.
-layout: page-outline
----
-
-Web Awesome includes classes to set multiple text properties at once to style body text, headings, and captions.
-
-## Body
-
-Use body classes to style the main content of your pages. Each `wa-body-*` class specifies the following properties:
-- `font-family: var(--wa-font-family-body);`
-- `font-weight: var(--wa-font-weight-body);`
-- `line-height: var(--wa-line-height-normal);`
-
-Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme.
-
-| Class Name         | `font-size` Value    |  Preview                                                                  |
-| ------------------ | -------------------- | ------------------------------------------------------------------------- |
-| `wa-body-xs`  | `--wa-font-size-xs`  | <div class="wa-body-xs">Sphinx of black quartz, judge my vow.</div>  |
-| `wa-body-s`   | `--wa-font-size-s`   | <div class="wa-body-s">Sphinx of black quartz, judge my vow.</div>   |
-| `wa-body-m`   | `--wa-font-size-m`   | <div class="wa-body-m">Sphinx of black quartz, judge my vow.</div>   |
-| `wa-body-l`   | `--wa-font-size-l`   | <div class="wa-body-l">Sphinx of black quartz, judge my vow.</div>   |
-| `wa-body-xl`  | `--wa-font-size-xl`  | <div class="wa-body-xl">Sphinx of black quartz, judge my vow.</div>  |
-
-## Headings
-
-Use heading classes to style section titles and headings in your content. Each `wa-heading-*` class specifies the following properties:
-- `font-family: var(--wa-font-family-heading);`
-- `font-weight: var(--wa-font-weight-heading);`
-- `line-height: var(--wa-line-height-condensed);`
-- `text-wrap: balance;`
-
-Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
-
-| Class Name       | `font-size` Value    | Preview                                               |
-| ---------------- | -------------------- | ----------------------------------------------------- |
-| `wa-heading-xs`  | `--wa-font-size-s`   | <div class="wa-heading-xs">Five Boxing Wizards</div>  |
-| `wa-heading-s`   | `--wa-font-size-m`   | <div class="wa-heading-s">Five Boxing Wizards</div>   |
-| `wa-heading-m`   | `--wa-font-size-l`   | <div class="wa-heading-m">Five Boxing Wizards</div>   |
-| `wa-heading-l`   | `--wa-font-size-xl`  | <div class="wa-heading-l">Five Boxing Wizards</div>   |
-| `wa-heading-xl`  | `--wa-font-size-2xl` | <div class="wa-heading-xl">Five Boxing Wizards</div>  |
-| `wa-heading-2xl` | `--wa-font-size-3xl` | <div class="wa-heading-2xl">Five Boxing Wizards</div> |
-| `wa-heading-3xl` | `--wa-font-size-4xl` | <div class="wa-heading-3xl">Five Boxing Wizards</div> |
-
-## Captions
-
-Use caption classes to style descriptions or auxiliary text in your content. Each `wa-caption-*` class specifies the following properties:
-- `color: var(--wa-color-text-quiet);`
-- `font-family: var(--wa-font-family-body);`
-- `font-weight: var(--wa-font-weight-body);`
-- `line-height: var(--wa-line-height-condensed);`
-
-Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
-
-| Class Name       | `font-size` Value    | Preview                                                                        |
-| ---------------- | -------------------- | ------------------------------------------------------------------------------ |
-| `wa-caption-xs`  | `--wa-font-size-2xs` | <div class="wa-caption-xs">The quick brown fox jumps over the lazy dog.</div>  |
-| `wa-caption-s`   | `--wa-font-size-xs`  | <div class="wa-caption-s">The quick brown fox jumps over the lazy dog.</div>   |
-| `wa-caption-m`   | `--wa-font-size-s`   | <div class="wa-caption-m">The quick brown fox jumps over the lazy dog.</div>   |
-| `wa-caption-l`   | `--wa-font-size-m`   | <div class="wa-caption-l">The quick brown fox jumps over the lazy dog.</div>   |
-| `wa-caption-xl`  | `--wa-font-size-l`   | <div class="wa-caption-xl">The quick brown fox jumps over the lazy dog.</div>  |

docs/docs/themes.md

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