Merge branch 'next' into docs-fix

* add zoomable frame component; #986

* remove viewport demo component

* update changelog

* fix code demos

* update zoomable iframes with theme changes

.eslintignore

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

.eslintrc.cjs

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

.github/workflows/client_tests.yml

@@ -0,0 +1,48 @@
+# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Client Tests
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [next]
+  pull_request:
+    branches: [next]
+
+
+jobs:
+  client_test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Lint
+        run: npm run prettier
+        working-directory: ./packages/webawesome
+
+      - name: Build
+        run: npm run build
+        working-directory: ./packages/webawesome
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+        working-directory: ./packages/webawesome
+
+      - name: Run CSR tests
+        # FAIL_FAST to fail on first failing test.
+        run: FAIL_FAST="true" CSR_ONLY="true" npm run test
+        working-directory: ./packages/webawesome

.github/workflows/node.js.yml

@@ -1,30 +0,0 @@
-# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: Node.js CI
-
-on:
-  push:
-    branches: [next]
-  pull_request:
-    branches: [next]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [18.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-      - run: npx playwright install-deps
-      - run: npm ci
-      - run: npm run verify

.github/workflows/ssr_tests.yml

@@ -0,0 +1,42 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: SSR Tests
+
+on:
+  # push:
+  #   branches: [next]
+  workflow_dispatch:
+
+jobs:
+  ssr_test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+        working-directory: ./packages/webawesome
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+        working-directory: ./packages/webawesome
+
+      - name: Run SSR tests
+        # FAIL_FAST to fail on first failing test.
+        run: FAIL_FAST="true" SSR_ONLY="true" npm run test
+        working-directory: ./packages/webawesome
+

.gitignore

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

.gitpod.yml

@@ -1,28 +0,0 @@
-tasks:
-  - init: npm install && npm run build
-    command: npm run start
-
-ports:
-  - port: 3001
-    onOpen: ignore
-  - port: 4000-4999
-    onOpen: open-preview
-
-github:
-  prebuilds:
-    # enable for the master/default branch (defaults to true)
-    master: true
-    # enable for all branches in this repo (defaults to false)
-    branches: true
-    # enable for pull requests coming from this repo (defaults to true)
-    pullRequests: true
-    # enable for pull requests coming from forks (defaults to false)
-    pullRequestsFromForks: true
-    # add a check to pull requests (defaults to true)
-    addCheck: true
-    # add a "Review in Gitpod" button as a comment to pull requests (defaults to false)
-    addComment: false
-    # add a "Review in Gitpod" button to the pull request's description (defaults to false)
-    addBadge: true
-    # add a label once the prebuild is ready to pull requests (defaults to false)
-    addLabel: true

.prettierignore

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

.vscode/extensions.json

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

.vscode/settings.json

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

CONTRIBUTING.md

@@ -2,4 +2,4 @@
 
 Before contributing, please review the contributions guidelines at:
 
-[shoelace.style/resources/contributing](https://shoelace.style/resources/contributing)
+[webawesome.com/docs/resources/contributing](https://webawesome.com/docs/resources/contributing)

README.md

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

cspell.json

@@ -5,6 +5,7 @@
     "allowfullscreen",
     "animationend",
     "Animista",
+    "APG",
     "apos",
     "atrule",
     "autocorrect",
@@ -14,17 +15,19 @@
     "autoloading",
     "autoplay",
     "bezier",
+    "Blockquotes",
     "boxicons",
     "CACHEABLE",
     "callout",
     "callouts",
-    "cdndir",
+    "canvastext",
     "chatbubble",
     "checkmark",
     "Clippy",
     "codebases",
     "codepen",
     "colocated",
+    "colorjs",
     "colour",
     "combobox",
     "Commonmark",
@@ -39,12 +42,15 @@
     "crutchcorn",
     "csspart",
     "cssproperty",
+    "cssstate",
     "datetime",
     "describedby",
     "Docsify",
     "dogfood",
     "dropdowns",
     "easings",
+    "ecommerce",
+    "endfor",
     "endraw",
     "endregion",
     "enterkeyhint",
@@ -55,6 +61,9 @@
     "exportmaps",
     "exportparts",
     "fieldsets",
+    "focusin",
+    "focusout",
+    "fontawesome",
     "formaction",
     "formdata",
     "formenctype",
@@ -63,6 +72,7 @@
     "formtarget",
     "FOUC",
     "FOUCE",
+    "Frontmatter",
     "fullscreen",
     "gestern",
     "giga",
@@ -71,6 +81,7 @@
     "haspopup",
     "heroicons",
     "hexa",
+    "Hotwire",
     "Iconoir",
     "Iframes",
     "iife",
@@ -79,9 +90,10 @@
     "ionicons",
     "jsDelivr",
     "jsfiddle",
-    "jsonata",
     "keydown",
     "keyframes",
+    "keymaker",
+    "Konnor",
     "Kool",
     "labelledby",
     "Laravel",
@@ -96,8 +108,10 @@
     "Menlo",
     "menuitemcheckbox",
     "menuitemradio",
+    "metaframeworks",
     "middlewares",
     "minlength",
+    "minmax",
     "monospace",
     "mousedown",
     "mousemove",
@@ -106,11 +120,12 @@
     "multiselectable",
     "nextjs",
     "nocheck",
+    "noindex",
     "noopener",
     "noreferrer",
     "novalidate",
-    "npmdir",
     "Numberish",
+    "nums",
     "oklab",
     "oklch",
     "onscrollend",
@@ -119,10 +134,13 @@
     "peta",
     "petabit",
     "Preact",
+    "preconnect",
+    "prerendered",
     "prismjs",
     "progressbar",
     "radiogroup",
     "Railsbyte",
+    "referrerpolicy",
     "remixicon",
     "reregister",
     "resizer",
@@ -139,25 +157,31 @@
     "scrollbars",
     "scrollend",
     "scroller",
+    "Scrollers",
     "Segoe",
     "semibold",
+    "shadowrootmode",
     "Shortcode",
     "Shortcodes",
     "sitedir",
     "slotchange",
     "smartquotes",
     "spacebar",
+    "srcdoc",
     "stylesheet",
+    "svgs",
     "Tabbable",
     "tabindex",
     "tabler",
     "tablist",
     "tabpanel",
+    "tbody",
     "templating",
     "tera",
     "testid",
     "textareas",
     "textfield",
+    "thead",
     "Themer",
     "tinycolor",
     "transitionend",
@@ -178,9 +202,11 @@
     "Vuejs",
     "WCAG",
     "webawesome",
+    "webawesomer",
     "WEBP",
     "Webpacker",
-    "xmark"
+    "xmark",
+    "zoomable"
   ],
   "ignorePaths": [
     "package.json",

docs/.eleventy.js

@@ -1,126 +0,0 @@
-import { parse } from 'path';
-import { markdown } from './_utils/markdown.js';
-import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
-import { codeExamplesPlugin } from './_utils/code-examples.js';
-import { copyCodePlugin } from './_utils/copy-code.js';
-import { currentLink } from './_utils/current-link.js';
-import { highlightCodePlugin } from './_utils/highlight-code.js';
-import { formatCodePlugin } from './_utils/format-code.js';
-import { replaceTextPlugin } from './_utils/replace-text.js';
-import { searchPlugin } from './_utils/search.js';
-import { readFile } from 'fs/promises';
-import { outlinePlugin } from './_utils/outline.js';
-import { getComponents } from './_utils/manifest.js';
-import process from 'process';
-
-const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
-const isDeveloping = process.argv.includes('--develop');
-
-export default function (eleventyConfig) {
-  // 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://cdn.jsdelivr.net/npm/@shoelace-style/webawesome@${packageData.version}/` + location.replace(/^\//, '')
-    );
-  });
-
-  // Helpers
-  eleventyConfig.addNunjucksGlobal('getComponent', tagName => {
-    const component = getComponents().find(c => c.tagName === tagName);
-
-    if (!component) {
-      throw new Error(
-        `Unable to find "<${tagName}>". Make sure the file name is the same as the tag name (without prefix).`
-      );
-    }
-    return component;
-  });
-
-  // Use our own markdown instance
-  eleventyConfig.setLibrary('md', markdown);
-
-  // Add anchors to headings
-  eleventyConfig.addPlugin(anchorHeadingsPlugin({ container: '#content' }));
-
-  // Add an outline to the page
-  eleventyConfig.addPlugin(
-    outlinePlugin({
-      container: '#content',
-      target: '.outline-links',
-      selector: 'h2, h3',
-      ifEmpty: doc => {
-        doc.querySelector('#outline')?.remove();
-      }
-    })
-  );
-
-  // Add current link classes
-  eleventyConfig.addPlugin(currentLink());
-
-  // Add code examples for `<code class="example">` blocks
-  eleventyConfig.addPlugin(codeExamplesPlugin());
-
-  // Highlight code blocks with Prism
-  eleventyConfig.addPlugin(highlightCodePlugin());
-
-  // Add copy code buttons to code blocks
-  eleventyConfig.addPlugin(copyCodePlugin());
-
-  // Various text replacements
-  eleventyConfig.addPlugin(
-    replaceTextPlugin([
-      // Replace [issue:1234] with a link to the issue on GitHub
-      {
-        replace: /\[pr:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>'
-      },
-      // Replace [pr:1234] with a link to the pull request on GitHub
-      {
-        replace: /\[issue:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>'
-      },
-      // Replace [discuss:1234] with a link to the discussion on GitHub
-      {
-        replace: /\[discuss:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>'
-      }
-    ])
-  );
-
-  // Build the search index
-  eleventyConfig.addPlugin(
-    searchPlugin({
-      filename: '',
-      selectorsToIgnore: ['code.example'],
-      getContent: doc => doc.querySelector('#content')?.textContent ?? ''
-    })
-  );
-
-  // Production-only plugins
-  if (!isDeveloping) {
-    // Run Prettier on each file (prod only because it can be slow)
-    eleventyConfig.addPlugin(formatCodePlugin());
-  }
-
-  return {
-    dir: {
-      includes: '_includes',
-      layouts: '_layouts'
-    },
-    templateFormats: ['njk', 'md']
-  };
-}

docs/_includes/logo-simple.njk

@@ -1 +0,0 @@
-<svg class="logo" xmlns="http://www.w3.org/2000/svg" width="277" height="211" viewBox="0 0 277 211"><g fill="none" fill-rule="evenodd"><path fill="#F6894C" d="M159.275,20.7541243 C159.275,28.4927904 155.035053,35.2422161 148.749528,38.8106604 L193.9,72.6391714 L238.157213,58.6776414 C236.43401,55.6537326 235.45,52.1547058 235.45,48.42629 C235.45,36.96411 244.751396,27.6721657 256.225,27.6721657 C267.698604,27.6721657 277,36.96411 277,48.42629 C277,59.8883646 267.698604,69.1804143 256.225,69.1804143 C255.131246,69.1804143 254.057541,69.0960801 253.00969,68.9332096 L204.251886,193.411571 C200.096886,204.019762 189.858966,211 178.45659,211 L98.5434095,211 C87.1410343,211 76.9031143,204.019762 72.7481143,193.411571 L23.990205,68.9332096 C22.9423008,69.0960801 21.8685432,69.1804143 20.775,69.1804143 C9.30129067,69.1804143 0,59.8883646 0,48.42629 C0,36.96411 9.30129067,27.6721657 20.775,27.6721657 C32.2487093,27.6721657 41.55,36.96411 41.55,48.42629 C41.55,52.1547058 40.5658322,55.6537326 38.842945,58.6776414 L83.1,72.6391714 L128.250472,38.8106604 C121.964947,35.2422161 117.725,28.4927904 117.725,20.7541243 C117.725,9.29194428 127.026396,0 138.5,0 C149.973604,0 159.275,9.29194428 159.275,20.7541243 Z"/></g></svg>

docs/_includes/sidebar.njk

@@ -1,234 +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/localization">Localization</a></li>
-</ul>
-
-{# Experimental #}
-<h2>Experimental</h2>
-<ul>
-  <li><a href="/docs/experimental/themer">Theme Builder</a></li>
-  <li><a href="/docs/experimental/style-guide">Style Guide</a></li>
-  <li><a href="/docs/experimental/form-validation">Form Validation Styles</a></li>
-  <li><a href="/docs/experimental/sandbox">Sandbox</a></li>
-  <li style="margin-top: .5rem;"><wa-switch id="theme-toggle">Dark mode</wa-switch></li>
-  <script type="module">
-    // Temporary dark toggle
-    const toggle = document.getElementById('theme-toggle');
-    toggle.checked = document.documentElement.classList.contains('wa-theme-default-dark');
-
-    toggle.addEventListener('wa-change', () => {
-      document.documentElement.classList.toggle('wa-theme-default-dark');
-      localStorage.setItem('theme', toggle.checked ? 'dark' : 'light');
-    });
-  </script>
-</ul>
-
-
-{# Resources #}
-<h2>Resources</h2>
-<ul>
-  <li><a href="https://github.com/shoelace-style/shoelace/discussions">Help &amp; Support</a></li>
-  <li><a href="/docs/resources/community">Community</a></li>
-  <li><a href="/docs/resources/accessibility">Accessibility</a></li>
-  <li><a href="/docs/resources/contributing">Contributing</a></li>
-  <li><a href="/docs/resources/changelog">Changelog</a></li>
-</ul>
-
-{# Components #}
-<h2>Components</h2>
-<ul>
-  <li>
-    <a href="/docs/components/animated-image">Animated Image</a>
-  </li>
-  <li>
-    <a href="/docs/components/animation">Animation</a>
-  </li>
-  <li>
-    <a href="/docs/components/avatar">Avatar</a>
-  </li>
-  <li>
-    <a href="/docs/components/badge">Badge</a>
-  </li>
-  <li>
-    <a href="/docs/components/breadcrumb">Breadcrumb</a>
-    <ul>
-      <li>
-        <a href="/docs/components/breadcrumb-item">Breadcrumb Item</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/button">Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/button-group">Button Group</a>
-  </li>
-  <li>
-    <a href="/docs/components/callout">Callout</a>
-  </li>
-  <li>
-    <a href="/docs/components/card">Card</a>
-  </li>
-  <li>
-    <a href="/docs/components/carousel">Carousel</a>
-    <ul>
-      <li>
-        <a href="/docs/components/carousel-item">Carousel Item</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/checkbox">Checkbox</a>
-  </li>
-  <li>
-    <a href="/docs/components/color-picker">Color Picker</a>
-  </li>
-  <li>
-    <a href="/docs/components/copy-button">Copy Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/details">Details</a>
-  </li>
-  <li>
-    <a href="/docs/components/dialog">Dialog</a>
-  </li>
-  <li>
-    <a href="/docs/components/divider">Divider</a>
-  </li>
-  <li>
-    <a href="/docs/components/drawer">Drawer</a>
-  </li>
-  <li>
-    <a href="/docs/components/dropdown">Dropdown</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-bytes">Format Bytes</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-date">Format Date</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-number">Format Number</a>
-  </li>
-  <li>
-    <a href="/docs/components/icon">Icon</a>
-  </li>
-  <li>
-    <a href="/docs/components/icon-button">Icon Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/image-comparer">Image Comparer</a>
-  </li>
-  <li>
-    <a href="/docs/components/include">Include</a>
-  </li>
-  <li>
-    <a href="/docs/components/input">Input</a>
-  </li>
-  <li>
-    <a href="/docs/components/menu">Menu</a>
-    <ul>
-      <li>
-        <a href="/docs/components/menu-item">Menu Item</a>
-      </li>
-      <li>
-        <a href="/docs/components/menu-label">Menu Label</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/mutation-observer">Mutation Observer</a>
-  </li>
-  <li>
-    <a href="/docs/components/option">Option</a>
-  </li>
-  <li>
-    <a href="/docs/components/page">Page</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>
-  </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>

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/manifest.js

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

docs/assets/images/logo-simple.svg

@@ -1 +0,0 @@
-<svg class="logo" xmlns="http://www.w3.org/2000/svg" width="277" height="211" viewBox="0 0 277 211"><g fill="none" fill-rule="evenodd"><path fill="#F6894C" d="M159.275,20.7541243 C159.275,28.4927904 155.035053,35.2422161 148.749528,38.8106604 L193.9,72.6391714 L238.157213,58.6776414 C236.43401,55.6537326 235.45,52.1547058 235.45,48.42629 C235.45,36.96411 244.751396,27.6721657 256.225,27.6721657 C267.698604,27.6721657 277,36.96411 277,48.42629 C277,59.8883646 267.698604,69.1804143 256.225,69.1804143 C255.131246,69.1804143 254.057541,69.0960801 253.00969,68.9332096 L204.251886,193.411571 C200.096886,204.019762 189.858966,211 178.45659,211 L98.5434095,211 C87.1410343,211 76.9031143,204.019762 72.7481143,193.411571 L23.990205,68.9332096 C22.9423008,69.0960801 21.8685432,69.1804143 20.775,69.1804143 C9.30129067,69.1804143 0,59.8883646 0,48.42629 C0,36.96411 9.30129067,27.6721657 20.775,27.6721657 C32.2487093,27.6721657 41.55,36.96411 41.55,48.42629 C41.55,52.1547058 40.5658322,55.6537326 38.842945,58.6776414 L83.1,72.6391714 L128.250472,38.8106604 C121.964947,35.2422161 117.725,28.4927904 117.725,20.7541243 C117.725,9.29194428 127.026396,0 138.5,0 C149.973604,0 159.275,9.29194428 159.275,20.7541243 Z"/></g></svg>

docs/assets/scripts/code-examples.js

@@ -1,57 +0,0 @@
-document.addEventListener('click', event => {
-  const toggle = event.target?.closest('.code-example-toggle');
-  const pen = event.target?.closest('.code-example-pen');
-
-  // Toggle source
-  if (toggle) {
-    const codeExample = toggle.closest('.code-example');
-    const isOpen = !codeExample.classList.contains('open');
-
-    toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-    codeExample.classList.toggle('open', isOpen);
-  }
-
-  // Edit in CodePen
-  if (pen) {
-    const codeExample = pen.closest('.code-example');
-    const code = codeExample.querySelector('code');
-    const version = document.documentElement.dataset.version;
-    const html =
-      `<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/webawesome@${version}/dist/webawesome.loader.js"></script>` +
-      `\n\n` +
-      `${code.textContent}`;
-    const css = 'body {\n  font: 16px sans-serif;\n  padding: 1rem;\n}\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/copy-code.js

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

docs/assets/scripts/scroll.js

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

docs/assets/scripts/turbo.js

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

docs/assets/styles/code-examples.css

@@ -1,87 +0,0 @@
-.code-example {
-  border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
-  border-radius: var(--wa-corners-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-subtle);
-
-  > :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-subtle);
-}
-
-.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-corners-m);
-    border-bottom-left-radius: var(--wa-corners-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-subtle);
-    text-align: center;
-    padding: 0.5rem;
-    cursor: pointer;
-
-    &:first-of-type {
-      border-left: none;
-      border-bottom-left-radius: var(--wa-corners-m);
-    }
-
-    &:last-of-type {
-      border-bottom-right-radius: var(--wa-corners-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/copy-code.css

@@ -1,28 +0,0 @@
-.copy-button {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  font-family: var(--wa-font-family-body);
-  color: var(--wa-color-neutral-text-on-fill);
-  background-color: var(--wa-color-neutral-fill-subtle);
-  border-radius: var(--wa-corners-s);
-  padding: 0.25rem;
-
-  &:hover {
-    background-color: var(--wa-color-neutral-fill-highlight);
-  }
-
-  &: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,133 +0,0 @@
-@import 'code-examples.css';
-@import 'code-highlighter.css';
-@import 'copy-code.css';
-@import 'outline.css';
-@import 'search.css';
-
-wa-page[view='desktop'] [data-toggle-nav] {
-  display: none;
-}
-
-/* Header */
-wa-page::part(header) {
-  background-color: var(--wa-color-surface-default);
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
-}
-
-wa-page > header {
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  max-width: 1200px;
-  height: 60px;
-  padding-inline: 2rem;
-
-  svg {
-    width: auto;
-    max-height: 26px;
-  }
-}
-
-/* Navigation sidebar */
-wa-page[view='desktop']::part(navigation) {
-  border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
-}
-
-wa-page[view='desktop'] > #sidebar {
-  min-width: 320px;
-  padding: 2rem;
-}
-
-#sidebar,
-#outline {
-  h2 {
-    font-size: 1.125rem;
-    margin-block-end: 0.5rem;
-  }
-}
-
-#sidebar nav {
-  padding-bottom: 1rem;
-}
-
-/* Main content */
-wa-page > main {
-  max-width: 80ch;
-  padding: 2rem;
-  margin-inline: auto;
-}
-
-/* Current link */
-#sidebar,
-#outline {
-  .current {
-    font-weight: var(--wa-font-weight-heavy);
-    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-m);
-  border-radius: var(--wa-corners-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-subtle);
-  border-color: var(--wa-color-brand-border-subtle);
-
-  .callout-icon {
-    color: var(--wa-color-brand-text-on-fill);
-  }
-
-  code {
-    background-color: var(--wa-color-brand-fill-highlight);
-  }
-}
-
-.callout-warning {
-  background-color: var(--wa-color-warning-fill-subtle);
-  border-color: var(--wa-color-warning-border-subtle);
-
-  .callout-icon {
-    color: var(--wa-color-warning-text-on-fill);
-  }
-
-  code {
-    background-color: var(--wa-color-warning-fill-highlight);
-  }
-}

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.njk
----
-
-```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/callout.md

@@ -1,66 +0,0 @@
----
-title: Callout
-description: Callouts are used to display important messages inline.
-layout: component.njk
----
-
-```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.njk
----
-
-```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/color-picker.md

@@ -1,79 +0,0 @@
----
-title: Color Picker
-description: Color pickers allow the user to select a color.
-layout: component.njk
----
-
-```html {.example}
-<form>
-<wa-color-picker required label="Select a color"></wa-color-picker>
-<wa-button type="submit">Submit</wa-button>
-</form>
-```
-
-:::info
-This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
-:::
-
-## Examples
-
-### Initial Value
-
-Use the `value` attribute to set an initial value for the color picker.
-
-```html {.example}
-<wa-color-picker value="#4a90e2" label="Select a color"></wa-color-picker>
-```
-
-### Opacity
-
-Use the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, HSLA, or HSVA based on `format`.
-
-```html {.example}
-<wa-color-picker value="#f5a623ff" opacity label="Select a color"></wa-color-picker>
-```
-
-### Formats
-
-Set the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, `hsl`, and `hsv`. Note that the color picker's input will accept any parsable format (including CSS color names) regardless of this option.
-
-To prevent users from toggling the format themselves, add the `no-format-toggle` attribute.
-
-```html {.example}
-<wa-color-picker format="hex" value="#4a90e2" label="Select a color"></wa-color-picker>
-<wa-color-picker format="rgb" value="rgb(80, 227, 194)" label="Select a color"></wa-color-picker>
-<wa-color-picker format="hsl" value="hsl(290, 87%, 47%)" label="Select a color"></wa-color-picker>
-<wa-color-picker format="hsv" value="hsv(55, 89%, 97%)" label="Select a color"></wa-color-picker>
-```
-
-### Swatches
-
-Use the `swatches` attribute to add convenient presets to the color picker. Any format the color picker can parse is acceptable (including CSS color names), but each value must be separated by a semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.
-
-```html {.example}
-<wa-color-picker
-  label="Select a color"
-  swatches="
-    #d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;
-    #4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff;
-  "
-></wa-color-picker>
-```
-
-### Sizes
-
-Use the `size` attribute to change the color picker's trigger size.
-
-```html {.example}
-<wa-color-picker size="small" label="Select a color"></wa-color-picker>
-<wa-color-picker size="medium" label="Select a color"></wa-color-picker>
-<wa-color-picker size="large" label="Select a color"></wa-color-picker>
-```
-
-### Inline
-
-The color picker can be rendered inline instead of in a dropdown using the `inline` attribute.
-
-```html {.example}
-<wa-color-picker inline label="Select a color"></wa-color-picker>
-```

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

docs/docs/components/icon-button.md

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

docs/docs/components/page.md

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

docs/docs/components/tag.md

@@ -1,63 +0,0 @@
----
-title: Tag
-description: Tags are used as labels to organize things or to indicate a selection.
-layout: component.njk
----
-
-```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: var(--wa-transition-fast) opacity;
-  }
-</style>
-```

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.njk
----
-
-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,109 +0,0 @@
----
-title: Customizing
-description: Learn how to customize Web Awesome through parts and custom properties.
-layout: page.njk
----
-
-Web Awesome components can be customized at a high level through design tokens. 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.
-
-## Design Tokens
-
-Web Awesome makes use of several design tokens to provide a consistent appearance across components. You can customize them and use them in your own application with pure CSS — no preprocessor required.
-
-Design tokens offer a high-level way to customize the library with minimal effort. There are no component-specific variables, however, as design tokens are intended to be generic and highly reusable. To customize an individual component, refer to the section entitled [CSS Parts](#css-parts).
-
-Design tokens are accessed through CSS custom properties that are defined in your theme. Because design tokens live at the page level, they're prefixed with `--wa-` to avoid collisions with other libraries.
-
-To customize a design token, simply override it in your stylesheet using a `:root` block. Here's an example that changes the primary theme to purple based on existing [color primitives](/tokens/color#primitives).
-
-```css
-:root {
-  /* Changes the primary theme color to purple using primitives */
-  --wa-color-primary-50: var(--wa-color-purple-50);
-  --wa-color-primary-100: var(--wa-color-purple-100);
-  --wa-color-primary-200: var(--wa-color-purple-200);
-  --wa-color-primary-300: var(--wa-color-purple-300);
-  --wa-color-primary-400: var(--wa-color-purple-400);
-  --wa-color-primary-500: var(--wa-color-purple-500);
-  --wa-color-primary-600: var(--wa-color-purple-600);
-  --wa-color-primary-700: var(--wa-color-purple-700);
-  --wa-color-primary-800: var(--wa-color-purple-800);
-  --wa-color-primary-900: var(--wa-color-purple-900);
-  --wa-color-primary-950: var(--wa-color-purple-950);
-}
-```
-
-Many design tokens are described further along in this documentation. For a complete list, refer to `src/themes/default.css` in the project's [source code](https://github.com/shoelace-style/shoelace/blob/current/src/themes/default.css).
-
-## CSS Parts
-
-Whereas design tokens offer a high-level way to customize the library, CSS parts offer a low-level way to customize individual components. Again, this is done with pure CSS — no preprocessor required.
-
-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 "parts" that can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), or `::part()`.
-
-Here's an example that modifies buttons with the `tomato-button` class.
-
-```html {.example}
-<wa-button class="tomato-button"> Tomato Button </wa-button>
-
-<style>
-  .tomato-button::part(base) {
-    background: var(--wa-color-neutral-0);
-    border: solid 1px tomato;
-  }
-
-  .tomato-button::part(base):hover {
-    background: rgba(255, 99, 71, 0.1);
-  }
-
-  .tomato-button::part(base):active {
-    background: rgba(255, 99, 71, 0.2);
-  }
-
-  .tomato-button::part(base):focus-visible {
-    box-shadow: 0 0 0 3px rgba(255, 99, 71, 0.33);
-  }
-
-  .tomato-button::part(label) {
-    color: tomato;
-  }
-</style>
-```
-
-At first glance, this approach might seem a bit verbose or even limiting, but it comes with 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.
-
-## Custom Properties
-
-For convenience, some components expose CSS custom properties you can override. These are not design tokens, nor do they have the same `--wa-` prefix since they're scoped to a component.
-
-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>
-```
-
-Not all components expose CSS custom properties. For those that do, they can be found in the component's API documentation.

docs/docs/experimental/patterns.md

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

docs/docs/experimental/sandbox.md

@@ -1,166 +0,0 @@
----
-title: Theming Sandbox
-description: TODO
-layout: page.njk
----
-
-## Card
-
-```html {.example}
-<wa-card with-image 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" outline>Brand</wa-button>
-<wa-button variant="success" outline>Success</wa-button>
-<wa-button variant="neutral" outline>Neutral</wa-button>
-<wa-button variant="warning" outline>Warning</wa-button>
-<wa-button variant="danger" outline>Danger</wa-button>
-<br /><br />
-<wa-button variant="text">Brand</wa-button>
-```
-
-## 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-input label="Label" help-text="Super helpful and/or contextual content" placeholder="Placeholder"></wa-input>
-<br />
-<wa-select label="Select">
-  <wa-option value="option-1">Option 1</wa-option>
-  <wa-option value="option-2">Option 2</wa-option>
-  <wa-option value="option-3">Option 3</wa-option>
-  <wa-option value="option-4">Option 4</wa-option>
-  <wa-option value="option-5">Option 5</wa-option>
-  <wa-option value="option-6">Option 6</wa-option>
-</wa-select>
-```
-
-## 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: 1px solid var(--wa-color-surface-border);
-    border-radius: var(--wa-corners-s);
-    display: inline-block;
-    height: 4rem;
-    margin-right: 2rem;
-    width: 4rem;
-  }
-  </style>
-<div class="shadow" style="box-shadow: var(--wa-shadow-inset);"></div>
-<div class="shadow" style="box-shadow: var(--wa-shadow-level-1);"></div>
-<div class="shadow" style="box-shadow: var(--wa-shadow-level-2);"></div>
-<div class="shadow" style="box-shadow: var(--wa-shadow-level-3);"></div>
-```

docs/docs/experimental/style-guide.md

@@ -1,165 +0,0 @@
----
-title: Style Guide
-description: TODO
-layout: page.njk
----
-
-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="docs-grid">
-  <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>
-  <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>
-  <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>
-  <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,209 +0,0 @@
----
-title: Installation
-description: Choose the installation method that works best for you.
-layout: page.njk
----
-
-You can load Web Awesome via CDN or by installing it locally. If you're using a framework, make sure to check out the pages for [React](/frameworks/react), [Vue](/frameworks/vue), and [Angular](/frameworks/angular) for additional information.
-
-## CDN Installation (Easiest)
-
-<wa-tab-group>
-<wa-tab slot="nav" panel="autoloader" active>Autoloader</wa-tab>
-<wa-tab slot="nav" panel="traditional">Traditional Loader</wa-tab>
-
-<wa-tab-panel name="autoloader">
-
-The experimental autoloader is the easiest and most efficient 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.
-
-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.
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/default.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/autoloader.js"></script>
-```
-
-</wa-tab-panel>
-
-<wa-tab-panel name="traditional">
-
-The traditional CDN loader registers all Web Awesome elements up front. Note that, if you're only using a handful of components, it will be much more efficient to stick with the autoloader. However, you can also [cherry pick](#cherry-picking) components if you want to load specific ones up front.
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/default.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/autoloader.js" ></script>
-```
-
-</wa-tab-panel>
-</wa-tab-group>
-
-### Dark Theme
-
-The code above will load the light theme. If you want to use the [dark theme](/getting-started/themes#dark-theme) instead, update the stylesheet as shown below and add `<html class="wa-theme-default-dark">` to your page.
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/dark.css" />
-```
-
-### Light & Dark Theme
-
-If you want to load the light or dark theme based on the user's `prefers-color-scheme` setting, use the stylesheets below. The `media` attributes ensure that only the user's preferred theme stylesheet loads and the `onload` attribute sets the appropriate [theme class](/getting-started/themes) on the `<html>` element.
-
-```html
-<link
-  rel="stylesheet"
-  media="(prefers-color-scheme:light)"
-  href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/default.css"
-/>
-<link
-  rel="stylesheet"
-  media="(prefers-color-scheme:dark)"
-  href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/dark.css"
-  onload="document.documentElement.classList.add('wa-theme-default-dark');"
-/>
-```
-
-Now you can [start using Web Awesome!](/getting-started/usage)
-
-## npm installation
-
-If you don't want to use the CDN, you can install Web Awesome from npm with the following command.
-
-```bash
-npm install @shoelace-style/shoelace
-```
-
-It's up to you to make the source files available to your app. One way to do this is to create a route in your app called `/shoelace` that serves static files from `node_modules/@shoelace-style/shoelace`.
-
-Once you've done that, add the following tags to your page. Make sure to update `href` and `src` so they point to the route you created.
-
-```html
-<link rel="stylesheet" href="/shoelace/%NPMDIR%/themes/default.css" />
-<script type="module" src="/shoelace/%NPMDIR%/autoloader.js"></script>
-```
-
-Alternatively, [you can use a bundler](#bundling).
-
-:::info
-For clarity, the docs will usually show imports from `@shoelace-style/shoelace`. If you're not using a module resolver or bundler, you'll need to adjust these paths to point to the folder Web Awesome is in.
-:::
-
-## 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 `autoloader.js` and will "just work" for most users.
-
-However, if you're [cherry picking](#cherry-picking) or [bundling](#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/%NPMDIR%"></script>
-
-<!-- Option 2: the setBasePath() method -->
-<script type="module">
-  import { setBasePath } from '/path/to/web-awesome/%NPMDIR%/webawesome.js';
-  setBasePath('/path/to/web-awesome/%NPMDIR%');
-</script>
-```
-
-:::info
-An easy way to make sure the base path is configured properly is to check if [icons](/components/icon) are loading.
-:::
-
-### 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/%NPMDIR%/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>
-```
-
-## Setting a Kit Code
-
-Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You can provide it through the `data-fa-kit-code` attribute or by calling the `setKitCode()` method.
-
-```html
-<!-- Option 1: the data-fa-kit-code attribute -->
-<script src="bundle.js" data-fa-kit-code="abc123"></script>
-
-<!-- Option 2: the setKitCode() method -->
-<script type="module">
-  import { setKitCode } from '/path/to/web-awesome/%NPMDIR%/webawesome.js';
-  setBasePath('/path/to/web-awesome/%NPMDIR%');
-</script>
-```
-
-## Cherry Picking
-
-Cherry picking can be done from [the CDN](#cdn-installation-easiest) or from [npm](#npm-installation). This approach will load only the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component.
-
-Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Web Awesome is in.
-
-```html
-<link rel="stylesheet" href="/path/to/web-awesome/%NPMDIR%/themes/default.css" />
-
-<script type="module" data-webawesome="/path/to/web-awesome/%NPMDIR%">
-  import '/path/to/web-awesome/%NPMDIR%/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.
-:::
-
-## Bundling
-
-Web Awesome is distributed as a collection of standard ES modules that [all modern browsers can understand](https://caniuse.com/es6-module). However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load times. Using a CDN can alleviate this, but some users may wish to further optimize their imports with a bundler.
-
-To use Web Awesome with a bundler, first install Web Awesome along with your bundler of choice.
-
-```bash
-npm install @shoelace-style/webawesome
-```
-
-Now it's time to configure your bundler. Configurations vary for each tool, but here are some examples to help you get started.
-
-- [Example webpack config](https://github.com/shoelace-style/webpack-example/blob/master/webpack.config.js)
-- [Example Rollup config](https://github.com/shoelace-style/rollup-example/blob/master/rollup.config.js)
-
-Once your bundler is configured, you'll be able to import Web Awesome components and utilities.
-
-```js
-import '/path/to/web-awesome/%NPMDIR%/themes/default.css';
-import '/path/to/web-awesome/%NPMDIR%/components/button/button.js';
-import '/path/to/web-awesome/%NPMDIR%/components/icon/icon.js';
-import '/path/to/web-awesome/%NPMDIR%/components/input/input.js';
-import '/path/to/web-awesome/%NPMDIR%/components/rating/rating.js';
-import { setBasePath } from '/path/to/web-awesome/%NPMDIR%/webawesome.js';
-
-// Set the base path to the folder you copied Web Awesome's assets to
-setBasePath('/path/to/web-awesome/%NPMDIR%');
-
-// <wa-button>, <wa-icon>, <wa-input>, and <wa-rating> are ready to use!
-```
-
-## The difference between CDN and npm
-
-You'll notice that the CDN links all start with `/%CDNDIR%/<path>` and npm imports use `/%NPMDIR%/<path>`. The `/%CDNDIR%` files are bundled separately from the `/%NPMDIR%` files. The `/%CDNDIR%` files come pre-bundled, which means all dependencies are inlined so you do not need to worry about loading additional libraries. The `/%NPMDIR%` files **DO NOT** come pre-bundled, allowing your bundler of choice to more efficiently deduplicate dependencies, resulting in smaller bundles and optimal code sharing.
-
-TL;DR:
-
-- `/path/to/web-awesome/%CDNDIR%` is for CDN users
-- `/path/to/web-awesome/%NPMDIR%` is for npm users
-
-This change was introduced in `v2.5.0` to address issues around installations from npm loading multiple versions of libraries (such as the Lit) that Web Awesome uses internally.

docs/docs/patterns/app.md

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

docs/docs/patterns/blog.md

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

docs/docs/patterns/business.md

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

docs/docs/patterns/ecommerce.md

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

docs/docs/patterns/entertainement.md

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

docs/docs/patterns/membership.md

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

docs/docs/patterns/news.md

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

docs/docs/patterns/non-profit.md

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

docs/docs/patterns/portfolio.md

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

docs/docs/patterns/product-landing.md

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

docs/docs/themes.md

@@ -1,150 +0,0 @@
----
-title: Themes
-description: Everything you need to know about theming Web Awesome.
-layout: page.njk
----
-
-Web Awesome is designed to be highly customizable through pure CSS. Out of the box, you can choose from a light or dark theme. Alternatively, you can design your own theme.
-
-A theme is nothing more than a stylesheet that uses the Web Awesome API to define design tokens and apply custom styles to components. To create a theme, you will need a decent understanding of CSS, including [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) and the [`::part` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
-
-:::info
-For component developers, built-in themes are also available as JavaScript modules that export [Lit CSSResult](https://lit.dev/docs/api/styles/#CSSResult) objects. You can find them in `/%NPMDIR%/themes/*.styles.js`.
-:::
-
-## Theme Basics
-
-All themes are scoped to classes using the `wa-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `wa-theme-default-light` and `wa-theme-default-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `wa-theme-purple-power`
-
-All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots.
-
-```css
-:host,
-.wa-theme-purple-power {
-  /* ... */
-}
-```
-
-### Activating Themes
-
-To activate a theme, import it and apply the theme's class to the `<html>` element. This example imports and activates the built-in dark theme.
-
-```html
-<html class="wa-theme-default-dark">
-  <head>
-    <link rel="stylesheet" href="path/to/shoelace/%NPMDIR%/themes/dark.css" />
-  </head>
-
-  <body>
-    ...
-  </body>
-</html>
-```
-
-:::info
-There is one exception to this rule — the light theme _does not_ need to be activated. For convenience, the light theme is scoped to `:root` and will be activated by default when imported.
-:::
-
-### Using Multiple Themes
-
-You can activate themes on various containers throughout the page. This example uses the light theme with a dark-themed sidebar.
-
-```html
-<html>
-  <head>
-    <link rel="stylesheet" href="path/to/shoelace/%NPMDIR%/themes/default.css" />
-    <link rel="stylesheet" href="path/to/shoelace/%NPMDIR%/themes/dark.css" />
-  </head>
-
-  <body>
-    <nav class="wa-theme-default-dark">
-      <!-- dark-themed sidebar -->
-    </nav>
-
-    <!-- light-themed content -->
-  </body>
-</html>
-```
-
-It's for this reason that themes must be scoped to specific classes.
-
-## Creating Themes
-
-There are two ways to create themes. The easiest way is to customize a built-in 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 commit to.
-
-### Customizing a Built-in Theme
-
-The easiest way to customize Web Awesome is to override one of the built-in themes. You can do this by importing the light or dark theme as-is, then creating a separate stylesheet that overrides [design tokens](/getting-started/customizing#design-tokens) and adds [component styles](/getting-started/customizing#component-parts) to your liking. You must import your theme _after_ the built-in theme.
-
-If you're customizing the light theme, you should scope your styles to the following selectors.
-
-```css
-:root,
-:host,
-.wa-theme-default-light {
-  /* your custom styles here */
-}
-```
-
-If you're customizing the dark theme, you should 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 design token 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 the built-in theme.
-
-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 design tokens. The easiest way to do this is by "forking" one of the built-in themes 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 the theme is decoupled from the built-ins, you can activate it independently as an alternative to the built-ins. 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 may introduce new design tokens that your theme won't have accounted for. Because of this, 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.
-
-## Dark Theme
-
-The built-in dark theme uses an inverted color scale so, if you're using design tokens as intended, you'll get dark mode for free. While this isn't the same as a professionally curated dark theme, it provides an excellent baseline for one and you're encouraged to customize it depending on your needs.
-
-The dark theme works by taking the light theme's [color tokens](/tokens/color) and "flipping" the scale so 100 becomes 900, 200 becomes 800, 300 becomes 700, etc. Next, the luminance of each primitive was fine-tuned to avoid true black, which is often undesirable in dark themes, and provide a richer experience. The result is a custom dark palette that complements the light theme and makes it easy to offer light and dark modes with minimal effort.
-
-To install the dark theme, add the following to the `<head>` section of your page.
-
-```html
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/dark.css"
-/>
-```
-
-To activate the theme, apply the `wa-theme-default-dark` class to the `<html>` element.
-
-```html
-<html class="wa-theme-default-dark">
-  ...
-</html>
-```
-
-### Detecting the User's Color Scheme Preference
-
-Web Awesome doesn't try to auto-detect the user's light/dark mode preference. This should be done at the application level. As a best practice, to provide a dark theme in your app, you should:
-
-- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
-- Allow the user to override the setting in your app
-- Remember the user's preference and restore it on subsequent logins
-
-Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.

docs/docs/usage.md

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

docs/index.md

@@ -1,9 +0,0 @@
----
-title: Web Awesome
-description: Build better with Web Awesome, the open source library of web components from Font Awesome.
-layout: page.njk
----
-
-This is the homepage. It will soon look awesome. Until then, click the button. 👇
-
-<wa-button variant="brand" href="/docs/components/button">Go somewhere</wa-button>

lint-staged.config.js

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

package.json

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

packages/webawesome/.gitignore

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

packages/webawesome/custom-elements-manifest.js

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

packages/webawesome/docs/.eleventy.js

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

packages/webawesome/docs/404.md

@@ -1,7 +1,7 @@
 ---
 title: Not Found
 description: Sorry, I couldn't find that.
-layout: page.njk
+layout: page
 permalink: 404.html
 noindex: true
 ---

packages/webawesome/docs/_data/componentList.js

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

packages/webawesome/docs/_data/components.js

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

packages/webawesome/docs/_data/hueRanges.js

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

packages/webawesome/docs/_data/hues.json

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

packages/webawesome/docs/_data/palettes.js

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

packages/webawesome/docs/_data/themes.js

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

packages/webawesome/docs/_includes/base.njk

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

packages/webawesome/docs/_includes/breadcrumbs.njk

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

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

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

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

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

packages/webawesome/docs/_includes/grouped-pages.njk

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

packages/webawesome/docs/_includes/head.njk

@@ -0,0 +1,68 @@
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="description" content="{{ description }}">
+{% if noindex or unlisted %}<meta name="robots" content="noindex">{% endif %}
+
+<title>{{ title }}</title>
+
+{# Dark mode #}
+<script>
+	let colorScheme = localStorage.colorScheme;
+	let isDark = localStorage.colorScheme === "dark";
+	if (!colorScheme || colorScheme === "auto") {
+		isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+	}
+	document.documentElement.classList.toggle('wa-dark', isDark);
+</script>
+
+<link rel="icon" href="/assets/images/webawesome-logo.svg" />
+<link rel="apple-touch-icon" href="/assets/images/app-icon.png">
+
+{# Scripts #}
+{# Hydration stuff #}
+<script src="/assets/scripts/hydration-errors.js"></script>
+<link rel="stylesheet" href="/assets/styles/hydration-errors.css">
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+
+{# Internal components #}
+<script type="module" src="/assets/components/scoped.js"></script>
+
+{# Web Awesome #}
+<script type="module" src="/dist/webawesome.loader.js"></script>
+
+{# Fallback loading when using the free repo #}
+<link rel="preconnect" href="https://early.webawesome.com">
+<script type="module">
+  document.addEventListener("wa-discovery-complete", loadLayout)
+  function loadLayout () {
+    if (!customElements.get("wa-page")) {
+      import("https://early.webawesome.com/webawesome@3.0.0-alpha.13/dist/components/page/page.js")
+        .catch((e) => {
+          console.error(e)
+        // known errors with dual registration. This is only a thing in the free repo.
+        })
+    }
+  }
+</script>
+
+<script type="module" src="/assets/scripts/theme-picker.js"></script>
+{# Preset Theme #}
+{% if noTheme %}
+{% elif forceTheme %}
+<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme }}.css" render="blocking" fetchpriority="high" />
+{% else %}
+<noscript><link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high" /></noscript>
+<script>
+{
+	let preset = localStorage.presetTheme ?? 'default';
+	let script = document.currentScript;
+	script.insertAdjacentHTML('beforebegin', `<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/${ preset }.css" render="blocking" fetchpriority="high" />`);
+}
+</script>
+<script type="module" src="/assets/scripts/preset-theme-picker.js"></script>
+{% endif %}
+
+<link rel="stylesheet" href="/dist/styles/webawesome.css" />
+
+{# Used by Web Awesome App to inject other assets into the head. #}
+{% server "head" %}

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

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

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

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

packages/webawesome/docs/_includes/logo.njk

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

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

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

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

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

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

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

packages/webawesome/docs/_includes/search.njk

@@ -1,4 +1,4 @@
-<wa-dialog id="site-search" no-header>
+<wa-dialog id="site-search" without-header light-dismiss>
   <div id="site-search-container">
     {# Header #}
     <header>
@@ -6,9 +6,9 @@
         <wa-input
           id="site-search-input"
           type="search"
-          filled
+          appearance="filled"
           size="large"
-          clearable
+          with-clear
           placeholder="Search"
           autofocus
           autocomplete="off"

packages/webawesome/docs/_includes/sidebar.njk

@@ -0,0 +1,414 @@
+{# Getting started #}
+<h2>Getting Started</h2>
+<ul>
+  <li><a href="/docs/">Installation</a></li>
+  <li><a href="/docs/usage">Usage</a></li>
+  <li><a href="/docs/customizing">Customizing</a></li>
+  <li><a href="/docs/form-controls">Form Controls</a></li>
+  <li><a href="/docs/localization">Localization</a></li>
+</ul>
+
+{# Resources #}
+<h2>Resources</h2>
+<ul>
+  <li><a href="https://github.com/shoelace-style/webawesome-alpha/discussions" target="_blank">Help &amp; Support</a></li>
+  <li><a href="/docs/resources/community">Community</a></li>
+  <li><a href="/docs/resources/accessibility">Accessibility</a></li>
+  <li><a href="/docs/resources/browser-support">Browser Support</a></li>
+  <li><a href="/docs/resources/contributing">Contributing</a></li>
+  <li><a href="/docs/resources/changelog">Changelog</a></li>
+  <li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
+</ul>
+
+<!-- Themes -->
+<wa-details appearance="outlined">
+  <h2 slot="summary">
+    <a href="/docs/themes/" title="Overview">
+      Themes
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+    </a>
+  </h2>
+  <ul>
+    <li><a href="/docs/themes/default/">Default</a></li>
+    <li><a href="/docs/themes/shoelace/">Shoelace</a></li>
+    <li><a href="/docs/themes/awesome/">Awesome</a></li>
+    <li>
+      <a href="/docs/themes/active/">Active</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+    <li>
+      <a href="/docs/themes/brutalist/">Brutalist</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+    <li>
+      <a href="/docs/themes/glossy/">Glossy</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+    <li>
+      <a href="/docs/themes/matter/">Matter</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+    <li>
+      <a href="/docs/themes/mellow/">Mellow</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+    <li>
+      <a href="/docs/themes/playful/">Playful</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+    <li>
+      <a href="/docs/themes/premium/">Premium</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+    <li>
+      <a href="/docs/themes/tailspin/">Tailspin</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+    <li>
+      <a href="/docs/themes/custom/">Custom</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+    <li><a href="/docs/themes/creating/">Creating Themes</a></li>
+  </ul>
+</wa-details>
+
+<!-- Components -->
+<wa-details appearance="outlined">
+  <h2 slot="summary">
+    <a href="/docs/components/" title="Overview">
+      Components
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+    </a>
+  </h2>
+  <ul>
+    <li>
+      <a href="/docs/components/page/">Page</a>
+      <wa-icon name="flask" aria-hidden="true"></wa-icon>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </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>
+      <wa-icon name="flask" aria-hidden="true"></wa-icon>
+      <ul>
+        <li>
+          <a href="/docs/components/carousel-item/">Carousel Item</a>
+          <wa-icon name="flask" aria-hidden="true"></wa-icon>
+        </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/comparison/">Comparison</a></li>
+    <li>
+      <a href="/docs/components/copy-button/">Copy Button</a>
+      <wa-icon name="flask" aria-hidden="true"></wa-icon>
+    </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/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/popover/">Popover</a></li>
+    <li><a href="/docs/components/popup/">Popup</a></li>
+    <li><a href="/docs/components/progress-bar/">Progress Bar</a></li>
+    <li><a href="/docs/components/progress-ring/">Progress Ring</a></li>
+    <li><a href="/docs/components/qr-code/">QR Code</a></li>
+    <li>
+      <a href="/docs/components/radio-group/">Radio Group</a>
+      <ul>
+        <li><a href="/docs/components/radio/">Radio</a></li>
+      </ul>
+    </li>
+    <li><a href="/docs/components/rating/">Rating</a></li>
+    <li><a href="/docs/components/relative-time/">Relative Time</a></li>
+    <li><a href="/docs/components/resize-observer/">Resize Observer</a></li>
+    <li><a href="/docs/components/scroller/">Scroller</a></li>
+    <li>
+      <a href="/docs/components/select/">Select</a>
+      <ul>
+        <li><a href="/docs/components/option/">Option</a></li>
+      </ul>
+    </li>
+    <li><a href="/docs/components/skeleton/">Skeleton</a></li>
+    <li><a href="/docs/components/slider/">Slider</a></li>
+    <li><a href="/docs/components/spinner/">Spinner</a></li>
+    <li><a href="/docs/components/split-panel/">Split Panel</a></li>
+    <li><a href="/docs/components/switch/">Switch</a></li>
+    <li>
+      <a href="/docs/components/tab-group/">Tab Group</a>
+      <ul>
+        <li><a href="/docs/components/tab/">Tab</a></li>
+        <li><a href="/docs/components/tab-panel/">Tab Panel</a></li>
+      </ul>
+    </li>
+    <li><a href="/docs/components/tag/">Tag</a></li>
+    <li><a href="/docs/components/textarea/">Textarea</a></li>
+    <li><a href="/docs/components/tooltip/">Tooltip</a></li>
+    <li><a href="/docs/components/tree/">Tree</a></li>
+    <li><a href="/docs/components/tree-item/">Tree Item</a></li>
+    <li><a href="/docs/components/zoomable-frame">Zoomable Frame</a></li>
+    {# PLOP_NEW_COMPONENT_PLACEHOLDER #}
+  </ul>
+</wa-details>
+
+<!-- Style utilities -->
+<wa-details appearance="outlined">
+  <h2 slot="summary">
+    <a href="/docs/utilities/" title="Overview">
+      Style Utilities
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+    </a>
+  </h2>
+  <ul>
+    <li><a href="/docs/utilities/native/">Native Styles</a></li>
+    <li><a href="/docs/utilities/color/">Color</a></li>
+    <li><a href="/docs/utilities/fouce/">Reducing FOUCE</a></li>
+    <li><a href="/docs/utilities/rounding/">Rounding</a></li>
+    <li><a href="/docs/utilities/text/">Text</a></li>
+    <li><a href="/docs/utilities/visually-hidden/">Visually Hidden</a></li>
+  </ul>
+</wa-details>
+
+<!-- Layout -->
+<wa-details appearance="outlined">
+  <h2 slot="summary">
+    <a href="/docs/layout/" title="Overview">
+      Layout
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+    </a>
+  </h2>
+  <ul>
+    <li><a href="/docs/utilities/align-items/">Align Items</a></li>
+    <li><a href="/docs/utilities/gap/">Gap</a></li>
+    <li><a href="/docs/utilities/cluster/">Cluster</a></li>
+    <li><a href="/docs/utilities/flank/">Flank</a></li>
+    <li><a href="/docs/utilities/frame/">Frame</a></li>
+    <li><a href="/docs/utilities/grid/">Grid</a></li>
+    <li><a href="/docs/utilities/split/">Split</a></li>
+    <li><a href="/docs/utilities/stack/">Stack</a></li>
+    <li>
+      <a href="/docs/components/page/">Page</a>
+      <wa-icon name="flask" aria-hidden="true"></wa-icon>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+  </ul>
+</wa-details>
+
+<!-- Patterns -->
+<wa-details appearance="outlined">
+  <h2 slot="summary">
+    <a href="/docs/patterns/" title="Overview">
+      Patterns
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+    </a>
+  </h2>
+  <ul>
+    <li>
+      <a href="/docs/patterns/app/">App</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <ul>
+        <li>
+          <a href="/docs/patterns/app/action-panel/">Action Panel</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/activity-log/">Activity Log</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/comments/">Comments</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/data-display/">Data Display</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/description-list/">Description List</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/empty-state/">Empty State</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/faq/">FAQ</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/grid-list/">Grid List</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/leaderboard/">Leaderboard</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/pagination/">Pagination</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/permissions/">Permissions</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/app/pricing/">Pricing</a>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <a href="/docs/patterns/blog-news/">Blog &amp; News</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <ul>
+        <li>
+          <a href="/docs/patterns/blog-news/call-to-action/">Call To Action</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/category-list/">Category List</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/featured-post/">Featured Post</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/footer/">Footer</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/newsletter/">Newsletter</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/paywall/">Paywall</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/post-footer/">Post Footer</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/post-header/">Post Header</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/post-list/">Post List</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/login/">Sign Up &amp; Login</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/social-share/">Social Share</a>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <a href="/docs/patterns/ecommerce/">Ecommerce</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      <ul>
+        <li>
+          <a href="/docs/patterns/ecommerce/category-filter/">Category Filter</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/category-preview/">Category Preview</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/checkout-form/">Checkout Form</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/incentives/">Incentives</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/order-history/">Order History</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/order-summary/">Order Summary</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/product-list/">Product Lists</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/product-overview/">Product Overview</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/product-preview/">Product Preview</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/review/">Product Reviews</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/ecommerce/shopping-cart/">Shopping Cart</a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</wa-details>
+
+<!-- Color palettes -->
+<wa-details appearance="outlined">
+  <h2 slot="summary">
+    <a href="/docs/palettes/" title="Overview">
+      Color Palettes
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+    </a>
+  </h2>
+  <ul>
+    <li><a href="/docs/palettes/default/">Default</a></li>
+    <li>
+      <a href="/docs/palettes/anodized/">Anodized</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+    <li><a href="/docs/palettes/bright/">Bright</a></li>
+    <li>
+      <a href="/docs/palettes/elegant/">Elegant</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+    <li>
+      <a href="/docs/palettes/mild/">Mild</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+    <li>
+      <a href="/docs/palettes/natural/">Natural</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+    <li>
+      <a href="/docs/palettes/rudimentary/">Rudimentary</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+    <li><a href="/docs/palettes/shoelace/">Shoelace</a></li>
+    <li>
+      <a href="/docs/palettes/vogue/">Vogue</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+    </li>
+  </ul>
+</wa-details>
+
+<!-- Design tokens -->
+<wa-details appearance="outlined">
+  <h2 slot="summary">
+    <a href="/docs/tokens/" title="Overview">
+      Design Tokens
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+    </a>
+  </h2>
+  <ul>
+    <li><a href="/docs/tokens/borders/">Borders</a></li>
+    <li><a href="/docs/tokens/color/">Color</a></li>
+    <li><a href="/docs/tokens/focus/">Focus</a></li>
+    <li><a href="/docs/tokens/shadows/">Shadows</a></li>
+    <li><a href="/docs/tokens/space/">Space</a></li>
+    <li><a href="/docs/tokens/transitions/">Transitions</a></li>
+    <li><a href="/docs/tokens/typography/">Typography</a></li>
+    <li><a href="/docs/tokens/component-groups/">Component Groups</a></li>
+  </ul>
+</wa-details>

packages/webawesome/docs/_includes/status.njk

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 11H44C50.0751 11 55 15.9249 55 22V54C55 60.0751 50.0751 65 44 65H12C5.92487 65 1 60.0751 1 54V22C1 15.9249 5.92487 11 12 11Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M61 1H31C28.7909 1 27 2.79086 27 5V15C27 17.2091 28.7909 19 31 19H61C63.2091 19 65 17.2091 65 15V5C65 2.79086 63.2091 1 61 1Z" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M61 1H31C28.7909 1 27 2.79086 27 5V15C27 17.2091 28.7909 19 31 19H61C63.2091 19 65 17.2091 65 15V5C65 2.79086 63.2091 1 61 1Z" stroke="var(--wa-color-surface-default)" stroke-width="2"/>
+<path d="M34.7281 6.53125C34.9156 6.46875 35.15 6.53125 35.275 6.6875L39.4 11.625V7C39.4 6.73438 39.6187 6.5 39.9 6.5C40.1656 6.5 40.4 6.73438 40.4 7V13C40.4 13.2188 40.2594 13.4062 40.0562 13.4844C39.8687 13.5469 39.65 13.4844 39.5094 13.3281L35.4 8.39062V13C35.4 13.2812 35.1656 13.5 34.9 13.5C34.6187 13.5 34.4 13.2812 34.4 13V7C34.4 6.79688 34.525 6.60938 34.7281 6.53125ZM43 6.5H46.5C46.7656 6.5 47 6.73438 47 7C47 7.28125 46.7656 7.5 46.5 7.5H43V9.5H45.5C45.7656 9.5 46 9.73438 46 10C46 10.2812 45.7656 10.5 45.5 10.5H43V12.5H46.5C46.7656 12.5 47 12.7344 47 13C47 13.2812 46.7656 13.5 46.5 13.5H43C42.4375 13.5 42 13.0625 42 12.5V10V7.5C42 6.95312 42.4375 6.5 43 6.5ZM48.9125 6.53125C49.1781 6.4375 49.4594 6.57812 49.5687 6.82812L51.2875 11.4219L52.6156 6.85938C52.6781 6.65625 52.8656 6.5 53.1 6.5C53.3187 6.5 53.5062 6.65625 53.5687 6.85938L54.8969 11.4219L56.6312 6.82812C56.725 6.57812 57.0062 6.4375 57.2719 6.54688C57.5219 6.64062 57.6625 6.92188 57.5531 7.1875L55.3031 13.1875C55.2406 13.3906 55.0375 13.5156 54.8187 13.5C54.6 13.5 54.4281 13.3594 54.3656 13.1406L53.1 8.79688L51.8187 13.1406C51.7562 13.3594 51.5687 13.5 51.3656 13.5C51.1469 13.5156 50.9437 13.3906 50.8812 13.1875L48.6312 7.1875C48.5219 6.92188 48.6625 6.64062 48.9125 6.53125Z" fill="var(--wa-color-brand-on-loud)"/>
+</svg>

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

@@ -0,0 +1,7 @@
+<svg width="112" height="13" viewBox="0 0 112 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7266 6.5C13.7266 6.92188 13.375 7.25 12.9766 7.25H12.2266L12.25 11C12.25 11.0703 12.25 11.1406 12.25 11.1875V11.5625C12.25 12.1016 11.8281 12.5 11.3125 12.5H10.9375C10.8906 12.5 10.8672 12.5 10.8438 12.5C10.8203 12.5 10.7734 12.5 10.75 12.5H10H9.4375C8.89844 12.5 8.5 12.1016 8.5 11.5625V11V9.5C8.5 9.10156 8.14844 8.75 7.75 8.75H6.25C5.82812 8.75 5.5 9.10156 5.5 9.5V11V11.5625C5.5 12.1016 5.07812 12.5 4.5625 12.5H4H3.25C3.20312 12.5 3.17969 12.5 3.13281 12.5C3.10938 12.5 3.08594 12.5 3.0625 12.5H2.6875C2.14844 12.5 1.75 12.1016 1.75 11.5625V8.9375C1.75 8.9375 1.75 8.91406 1.75 8.89062V7.25H1C0.578125 7.25 0.25 6.92188 0.25 6.5C0.25 6.28906 0.320312 6.10156 0.484375 5.9375L6.48438 0.6875C6.64844 0.523438 6.83594 0.5 7 0.5C7.16406 0.5 7.35156 0.546875 7.49219 0.664062L13.4688 5.9375C13.6562 6.10156 13.75 6.28906 13.7266 6.5Z" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M29.5156 5.98438C29.8203 6.26562 29.8203 6.75781 29.5156 7.03906L25.0156 11.5391C24.7344 11.8438 24.2422 11.8438 23.9609 11.5391C23.6562 11.2578 23.6562 10.7656 23.9609 10.4844L27.9219 6.5L23.9609 2.53906C23.6562 2.25781 23.6562 1.76562 23.9609 1.48438C24.2422 1.17969 24.7344 1.17969 25.0156 1.48438L29.5156 5.98438Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<rect x="38" y="4" width="25" height="4" rx="2" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M78.5156 5.98438C78.8203 6.26562 78.8203 6.75781 78.5156 7.03906L74.0156 11.5391C73.7344 11.8438 73.2422 11.8438 72.9609 11.5391C72.6562 11.2578 72.6562 10.7656 72.9609 10.4844L76.9219 6.5L72.9609 2.53906C72.6562 2.25781 72.6562 1.76562 72.9609 1.48438C73.2422 1.17969 73.7344 1.17969 74.0156 1.48438L78.5156 5.98438Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<rect x="87" y="4" width="25" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

packages/webawesome/docs/_includes/svgs/button-group.njk

@@ -0,0 +1,7 @@
+<svg width="64" height="32" viewBox="0 0 64 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H32V32H6C2.68629 32 0 29.3137 0 26V6Z" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M16.75 12.375V15.75H20.125C20.5234 15.75 20.875 16.1016 20.875 16.5C20.875 16.9219 20.5234 17.25 20.125 17.25H16.75V20.625C16.75 21.0469 16.3984 21.375 16 21.375C15.5781 21.375 15.25 21.0469 15.25 20.625V17.25H11.875C11.4531 17.25 11.125 16.9219 11.125 16.5C11.125 16.1016 11.4531 15.75 11.875 15.75H15.25V12.375C15.25 11.9766 15.5781 11.625 16 11.625C16.3984 11.625 16.75 11.9766 16.75 12.375Z" fill="var(--wa-color-brand-on-loud)"/>
+<path d="M32 0H58C61.3137 0 64 2.68629 64 6V26C64 29.3137 61.3137 32 58 32H32V0Z" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M52.875 16.5C52.875 16.9219 52.5234 17.25 52.125 17.25H43.875C43.4531 17.25 43.125 16.9219 43.125 16.5C43.125 16.1016 43.4531 15.75 43.875 15.75H52.125C52.5234 15.75 52.875 16.1016 52.875 16.5Z" fill="var(--wa-color-brand-on-loud)"/>
+<line x1="32.5" x2="32.5" y2="32" stroke="var(--wa-color-brand-on-quiet)"/>
+</svg>

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

@@ -0,0 +1,4 @@
+<svg width="64" height="32" viewBox="0 0 64 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H58C61.3137 0 64 2.68629 64 6V26C64 29.3137 61.3137 32 58 32H6C2.68629 32 0 29.3137 0 26V6Z" fill="var(--wa-color-brand-fill-loud)"/>
+<path d="M12.375 13.125C12.375 12.4414 12.9219 11.875 13.625 11.875H15.5C17.2188 11.875 18.625 13.2812 18.625 15C18.625 16.7383 17.2188 18.125 15.5 18.125H13.625V20C13.625 20.3516 13.332 20.625 13 20.625C12.6484 20.625 12.375 20.3516 12.375 20V17.5V13.125ZM13.625 16.875H15.5C16.5352 16.875 17.375 16.0352 17.375 15C17.375 13.9648 16.5352 13.125 15.5 13.125H13.625V16.875ZM21.875 11.875H24.0625C25.6055 11.875 26.875 13.1445 26.875 14.6875C26.875 15.8789 26.1328 16.8945 25.1172 17.3047L26.7578 19.6484C26.9531 19.9414 26.875 20.332 26.6016 20.5273C26.3086 20.7227 25.918 20.6445 25.7227 20.3711L23.7305 17.5H21.875V20C21.875 20.3516 21.582 20.625 21.25 20.625C20.8984 20.625 20.625 20.3516 20.625 20V16.875V13.125C20.625 12.4414 21.1719 11.875 21.875 11.875ZM24.0625 16.25C24.9219 16.25 25.625 15.5664 25.625 14.6875C25.625 13.8281 24.9219 13.125 24.0625 13.125H21.875V16.25H24.0625ZM30.125 11.875H34.5C34.832 11.875 35.125 12.168 35.125 12.5C35.125 12.8516 34.832 13.125 34.5 13.125H30.125V15.625H33.25C33.582 15.625 33.875 15.918 33.875 16.25C33.875 16.6016 33.582 16.875 33.25 16.875H30.125V19.375H34.5C34.832 19.375 35.125 19.668 35.125 20C35.125 20.3516 34.832 20.625 34.5 20.625H30.125C29.4219 20.625 28.875 20.0781 28.875 19.375V16.25V13.125C28.875 12.4414 29.4219 11.875 30.125 11.875ZM39.0586 13.3203C38.668 13.4766 38.4531 13.75 38.3945 14.082C38.3359 14.3555 38.375 14.5312 38.4336 14.668C38.4922 14.7852 38.5898 14.9023 38.7461 15.0195C39.1367 15.293 39.7031 15.4492 40.4062 15.6641C40.4258 15.6641 40.4453 15.6641 40.4648 15.6836C41.1094 15.8594 41.8711 16.0742 42.4375 16.4648C42.75 16.6797 43.0234 16.9727 43.1992 17.3438C43.375 17.7344 43.4141 18.1641 43.3164 18.6523C43.1797 19.4727 42.6328 20.0391 41.9297 20.3516C41.2266 20.6445 40.3672 20.7031 39.5078 20.5664C39.0391 20.4883 38.2773 20.2344 37.7891 20.0586C37.6914 20.0391 37.6133 20 37.5352 19.9805C37.2227 19.8633 37.0469 19.5117 37.1445 19.1797C37.2617 18.8672 37.6133 18.6914 37.9453 18.7891C38.043 18.8281 38.1406 18.8477 38.2578 18.8867C38.7461 19.0625 39.3516 19.2773 39.7031 19.3359C40.4258 19.4336 41.0117 19.375 41.4219 19.1992C41.832 19.0234 42.0273 18.7695 42.0859 18.4375C42.1445 18.1641 42.1055 17.9688 42.0469 17.8516C42.0078 17.7344 41.8906 17.6172 41.7344 17.5C41.3438 17.2266 40.7773 17.0703 40.0742 16.8555C40.0547 16.8555 40.0352 16.8555 40.0156 16.8359C39.3711 16.6602 38.6094 16.4453 38.043 16.0547C37.7305 15.8398 37.457 15.5469 37.2812 15.1758C37.125 14.7852 37.0859 14.3555 37.1641 13.8672L37.7695 13.9844L37.1641 13.8672C37.3008 13.0469 37.8477 12.4805 38.5508 12.168C39.2539 11.875 40.1133 11.8164 40.9727 11.9531C41.2266 11.9922 42.0078 12.1484 42.2812 12.2266C42.6133 12.3047 42.8086 12.6562 42.7109 12.9883C42.6328 13.3203 42.2812 13.5156 41.9492 13.418C41.7344 13.3594 41.0117 13.2227 40.7773 13.1836L40.875 12.5781L40.7773 13.1836C40.0547 13.0859 39.4688 13.1445 39.0586 13.3203ZM47.3086 13.3203C46.918 13.4766 46.7031 13.75 46.6445 14.082C46.5859 14.3555 46.625 14.5312 46.6836 14.668C46.7422 14.7852 46.8398 14.9023 46.9961 15.0195C47.3867 15.293 47.9531 15.4492 48.6562 15.6641C48.6758 15.6641 48.6953 15.6641 48.7148 15.6836C49.3594 15.8594 50.1211 16.0742 50.6875 16.4648C51 16.6797 51.2734 16.9727 51.4492 17.3438C51.625 17.7344 51.6641 18.1641 51.5664 18.6523C51.4297 19.4727 50.8828 20.0391 50.1797 20.3516C49.4766 20.6445 48.6172 20.7031 47.7578 20.5664C47.2891 20.4883 46.5273 20.2344 46.0391 20.0586C45.9414 20.0391 45.8633 20 45.7852 19.9805C45.4727 19.8633 45.2969 19.5117 45.3945 19.1797C45.5117 18.8672 45.8633 18.6914 46.1953 18.7891C46.293 18.8281 46.3906 18.8477 46.5078 18.8867C46.9961 19.0625 47.6016 19.2773 47.9531 19.3359C48.6758 19.4336 49.2617 19.375 49.6719 19.1992C50.082 19.0234 50.2773 18.7695 50.3359 18.4375C50.3945 18.1641 50.3555 17.9688 50.2969 17.8516C50.2578 17.7344 50.1406 17.6172 49.9844 17.5C49.5938 17.2266 49.0273 17.0703 48.3242 16.8555C48.3047 16.8555 48.2852 16.8555 48.2656 16.8359C47.6211 16.6602 46.8594 16.4453 46.293 16.0547C45.9805 15.8398 45.707 15.5469 45.5312 15.1758C45.375 14.7852 45.3359 14.3555 45.4141 13.8672L46.0195 13.9844L45.4141 13.8672C45.5508 13.0469 46.0977 12.4805 46.8008 12.168C47.5039 11.875 48.3633 11.8164 49.2227 11.9531C49.4766 11.9922 50.2578 12.1484 50.5312 12.2266C50.8633 12.3047 51.0586 12.6562 50.9609 12.9883C50.8828 13.3203 50.5312 13.5156 50.1992 13.418C49.9844 13.3594 49.2617 13.2227 49.0273 13.1836L49.125 12.5781L49.0273 13.1836C48.3047 13.0859 47.7188 13.1445 47.3086 13.3203Z" fill="var(--wa-color-brand-on-loud)"/>
+</svg>

packages/webawesome/docs/_includes/svgs/call-to-action.njk

@@ -0,0 +1,3 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M63 6.32811V61.3125C63 66.375 56.6719 68.9062 53.2969 65.25L49.9219 61.7344C43.7344 55.2656 35.7188 51.1875 27 50.0625V64.125C27 68.4844 23.3438 72 19.125 72H16.875C12.5156 72 9 68.4844 9 64.125V49.5C3.9375 49.5 0 45.5625 0 40.5V27C0 22.0781 3.9375 18 9 18H20.1094L24.1875 17.8594C34.0312 17.2969 43.1719 13.0781 49.9219 5.90624L53.2969 2.39061C56.6719 -1.26564 63 1.12499 63 6.32811ZM22.5 49.6406L20.1094 49.5H13.5V64.125C13.5 66.0937 14.9062 67.5 16.875 67.5H19.125C20.9531 67.5 22.5 66.0937 22.5 64.125V49.6406ZM56.5312 5.48436L53.1562 8.99999C47.25 15.1875 39.6562 19.5469 31.5 21.375V46.2656C39.6562 48.0937 47.25 52.3125 53.1562 58.6406L56.5312 62.1562C57.2344 62.8594 58.5 62.2969 58.5 61.3125V6.32811C58.5 5.20311 57.2344 4.78124 56.5312 5.48436ZM27 22.0781C26.1562 22.2187 25.3125 22.3594 24.4688 22.3594L20.25 22.5H9C6.46875 22.5 4.5 24.6094 4.5 27V40.5C4.5 43.0312 6.46875 45 9 45H20.25L24.4688 45.2812C25.3125 45.4219 26.1562 45.4219 27 45.5625V22.0781ZM69.75 27C70.875 27 72 28.125 72 29.25V38.25C72 39.5156 70.875 40.5 69.75 40.5C68.4844 40.5 67.5 39.5156 67.5 38.25V29.25C67.5 28.125 68.4844 27 69.75 27Z" fill="var(--wa-color-neutral-on-quiet"/>
+</svg>

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

@@ -0,0 +1,6 @@
+<svg width="112" height="40" viewBox="0 0 112 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1H100C106.075 1 111 5.92487 111 12V28C111 34.0751 106.075 39 100 39H12C5.92487 39 1 34.0751 1 28V12C1 5.92487 5.92487 1 12 1Z" fill="var(--wa-color-warning-fill-quiet)"/>
+<path d="M12 1H100C106.075 1 111 5.92487 111 12V28C111 34.0751 106.075 39 100 39H12C5.92487 39 1 34.0751 1 28V12C1 5.92487 5.92487 1 12 1Z" stroke="var(--wa-color-warning-border-quiet)" stroke-width="2"/>
+<path d="M20 13C20.4375 13 20.8438 13.25 21.0625 13.625L27.8125 25.125C28.0312 25.5312 28.0312 26 27.8125 26.375C27.5938 26.7812 27.1875 27 26.75 27H13.25C12.7812 27 12.375 26.7812 12.1562 26.375C11.9375 26 11.9375 25.5312 12.1562 25.125L18.9062 13.625C19.125 13.25 19.5312 13 20 13ZM20 17C19.5625 17 19.25 17.3438 19.25 17.75V21.25C19.25 21.6875 19.5625 22 20 22C20.4062 22 20.75 21.6875 20.75 21.25V17.75C20.75 17.3438 20.4062 17 20 17ZM21 24C21 23.4688 20.5312 23 20 23C19.4375 23 19 23.4688 19 24C19 24.5625 19.4375 25 20 25C20.5312 25 21 24.5625 21 24Z" fill="var(--wa-color-warning-on-quiet)"/>
+<rect x="36" y="18" width="64" height="4" rx="2" fill="var(--wa-color-warning-on-quiet)"/>
+</svg>

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

@@ -0,0 +1,10 @@
+<svg width="64" height="72" viewBox="0 0 64 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1H52C58.0751 1 63 5.92487 63 12V60C63 66.0751 58.0751 71 52 71H12C5.92487 71 1 66.0751 1 60V12C1 5.92487 5.92487 1 12 1Z" fill="var(--wa-color-surface-default)"/>
+<path d="M12 1H52C58.0751 1 63 5.92487 63 12V60C63 66.0751 58.0751 71 52 71H12C5.92487 71 1 66.0751 1 60V12C1 5.92487 5.92487 1 12 1Z" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M52 1H12C5.92487 1 1 5.92487 1 12V35H63V12C63 5.92487 58.0751 1 52 1Z" fill="var(--wa-color-neutral-fill-quiet)"/>
+<path d="M52 1H12C5.92487 1 1 5.92487 1 12V35H63V12C63 5.92487 58.0751 1 52 1Z" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M16 25.3222L21.3333 19.9889L26.6667 25.3222L37.3333 13.5222L48 25.3222" stroke="var(--wa-color-neutral-on-quiet)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.8889 14.2333C23.8889 15.6447 22.7448 16.7889 21.3334 16.7889C19.922 16.7889 18.7778 15.6447 18.7778 14.2333C18.7778 12.8219 19.922 11.6778 21.3334 11.6778C22.7448 11.6778 23.8889 12.8219 23.8889 14.2333Z" stroke="var(--wa-color-neutral-on-quiet)" stroke-width="2"/>
+<rect x="12" y="44" width="40" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+<rect x="12" y="56" width="40" height="4" rx="2" fill="var(--wa-color-neutral-border-loud)"/>
+</svg>

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

@@ -0,0 +1,7 @@
+<svg width="130" height="48" viewBox="0 0 130 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.21094 23.9844L5.71094 19.4844C5.99219 19.1797 6.48438 19.1797 6.76562 19.4844C7.07031 19.7656 7.07031 20.2578 6.76562 20.5391L2.80469 24.5L6.76562 28.4844C7.07031 28.7656 7.07031 29.2578 6.76562 29.5391C6.48438 29.8438 5.99219 29.8438 5.71094 29.5391L1.21094 25.0391C0.90625 24.7578 0.90625 24.2656 1.21094 23.9844Z" fill="var(--wa-color-neutral-on-quiet)"/>
+<path d="M25 1H33C39.0751 1 44 5.92487 44 12V36C44 42.0751 39.0751 47 33 47H25C18.9249 47 14 42.0751 14 36V12C14 5.92487 18.9249 1 25 1Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M61 1H69C75.0751 1 80 5.92487 80 12V36C80 42.0751 75.0751 47 69 47H61C54.9249 47 50 42.0751 50 36V12C50 5.92487 54.9249 1 61 1Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M97 1H105C111.075 1 116 5.92487 116 12V36C116 42.0751 111.075 47 105 47H97C90.9249 47 86 42.0751 86 36V12C86 5.92487 90.9249 1 97 1Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<path d="M128.766 23.9844C129.07 24.2656 129.07 24.7578 128.766 25.0391L124.266 29.5391C123.984 29.8438 123.492 29.8438 123.211 29.5391C122.906 29.2578 122.906 28.7656 123.211 28.4844L127.172 24.5L123.211 20.5391C122.906 20.2578 122.906 19.7656 123.211 19.4844C123.492 19.1797 123.984 19.1797 124.266 19.4844L128.766 23.9844Z" fill="var(--wa-color-neutral-on-quiet)"/>
+</svg>