use --wa-font-weight-code in native styles

* abstracting syntax coloring in code-highlighter.css

* adding initial custom properties to override colors
* light re-grouping of rules + color application

* fixup! removing `wa-` prefix

.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,12 +1,12 @@
 _site
 .cache
 .DS_Store
-package.json
-package-lock.json
-dist
-docs/assets/images/sprite.svg
-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,7 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "bierner.lit-html",
-    "bashmish.es6-string-css",
-    "streetsidesoftware.code-spell-checker"
+    "streetsidesoftware.code-spell-checker",
+    "ronnidc.nunjucks"
   ]
 }

.vscode/settings.json

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

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,29 +11,51 @@ 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)
 
 ---
 
 ## Developers ✨
 
-Developers can use this documentation to learn how to build Web Awesome from source. You will need Node >= 14.17 to build and run the project locally.
+Developers can use this documentation to learn how to build Web Awesome from source. You will need Node.js 14.17 or later to build and run the project locally.
 
 **You don't need to do any of this to use Web Awesome!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Web Awesome.
 
-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/).
+Components are built with [Lit](https://lit.dev/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).
+
+### Understanding the Web Awesome monorepo
+
+Web Awesome uses [npm workspaces](https://docs.npmjs.com/cli/v11/using-npm/workspaces) for its monorepo structure and is fairly minimal in what it provides.
+
+By using npm workspaces and a monorepo structure, we can get consistent builds, shared configurations, and reduced duplication across repositories which reduces regressions and forces consistency across `webawesome`, `webawesome-pro`, and `webawesome-app`.
+
+Generally, if you plan to only work with the free version of `webawesome` it is easiest to go to `packages/webawesome` and run all commands from there.
+
+### Where do npm dependencies go?
+
+Any dependencies intended to be used across all packages (i.e., `prettier`, `eslint`) that are **not** used at runtime should be in the root `devDependencies` of `package.json`.
+
+```bash
+npm install -D -w prettier
+```
+
+Any dependencies that will be used at runtime by a package should be part of the specific package's `dependencies` such as `lit`. This is required because if that dependency is not in the `packages/*/package.json`, it will not be installed when used via npm.
+
+Individual packages are also free to install `devDependencies` as needed as long as they are specific to that package only.
+
+To install a package specific to a Web Awesome package, change your working directory to that package's root (i.e., `cd packages/webawesome && npm install <package-name>`).
 
 ### Forking the Repo
 
-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,36 +65,49 @@ npm install
 
 ### Developing
 
-Once you've cloned the repo, run the following command.
+Once you've cloned the repo, run the following command from the respective directory within `packages/*`.
 
 ```bash
+cd packages/webawesome
 npm start
 ```
 
-This will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browser's don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.
+This will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browsers don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.
 
 ### Building
 
 To generate a production build, run the following command.
 
 ```bash
+cd packages/webawesome
 npm run build
 ```
 
+You can also run `npm run build:serve` to start an [`http-server`](https://www.npmjs.com/package/http-server) instance on `http://localhost:4000` after the build completes, so you can preview the production build.
+
 ### Creating New Components
 
 To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
 
 ```bash
+cd packages/webawesome
 npm run create wa-tag-name
 ```
 
 This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
 
+### Adding additional packages
+
+Right now the only additional packages are in private repositories.
+
+To add additional packages from other repositories, run `git clone <url> packages/<package-name>` to clone your repo into `packages/`.
+
+Make sure to run `npm install` at the root of the monorepo after adding your package!
+
 ### Contributing
 
 Web Awesome is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
 
 ## License
 
-Web Awesome is available under the terms of the MIT license.
+Web Awesome is available under the terms of the [MIT License](LICENSE.md).

VERSIONS.txt

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

cspell.json

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

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

docs/_utils/code-examples.js

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

docs/_utils/copy-code.js

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

docs/_utils/outline.js

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

docs/_utils/search.js

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

docs/assets/images/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/code-highlighter.css

@@ -1,55 +0,0 @@
-.code-comment,
-.code-prolog,
-.code-doctype,
-.code-cdata,
-.code-operator,
-.code-punctuation {
-  color: var(--wa-color-base-50);
-}
-
-.code-namespace {
-  opacity: 0.7;
-}
-
-.code-property,
-.code-keyword,
-.code-tag,
-.code-url {
-  color: #7c3aed; /* violet */
-}
-
-.code-symbol,
-.code-deleted,
-.code-important {
-  color: var(--wa-color-red-40);
-}
-
-.code-boolean,
-.code-constant,
-.code-selector,
-.code-attr-name,
-.code-string,
-.code-char,
-.code-builtin,
-.code-inserted {
-  color: var(--wa-color-green-40);
-}
-
-.code-atrule,
-.code-attr-value,
-.code-number,
-.code-variable,
-.code-function,
-.code-class-name,
-.code-regex {
-  color: var(--wa-color-yellow-40);
-}
-
-.code-important,
-.code-bold {
-  font-weight: bold;
-}
-
-.code-italic {
-  font-style: italic;
-}

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,234 +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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaBadge from '@shoelace-style/shoelace/dist/react/badge';
-
-const App = () => <WaBadge>Badge</WaBadge>;
-```
-{% endraw %}
-
-## 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaBadge from '@shoelace-style/shoelace/dist/react/badge';
-
-const App = () => (
-  <>
-    <WaBadge variant="brand">Brand</WaBadge>
-    <WaBadge variant="success">Success</WaBadge>
-    <WaBadge variant="neutral">Neutral</WaBadge>
-    <WaBadge variant="warning">Warning</WaBadge>
-    <WaBadge variant="danger">Danger</WaBadge>
-  </>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaBadge from '@shoelace-style/shoelace/dist/react/badge';
-
-const App = () => (
-  <>
-    <WaBadge variant="brand" pill>
-      Brand
-    </WaBadge>
-    <WaBadge variant="success" pill>
-      Success
-    </WaBadge>
-    <WaBadge variant="neutral" pill>
-      Neutral
-    </WaBadge>
-    <WaBadge variant="warning" pill>
-      Warning
-    </WaBadge>
-    <WaBadge variant="danger" pill>
-      Danger
-    </WaBadge>
-  </>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaBadge from '@shoelace-style/shoelace/dist/react/badge';
-
-const css = `
-  .badge-pulse wa-badge:not(:last-of-type) {
-    margin-right: 1rem;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="badge-pulse">
-      <WaBadge variant="brand" pill pulse>
-        1
-      </WaBadge>
-      <WaBadge variant="success" pill pulse>
-        1
-      </WaBadge>
-      <WaBadge variant="neutral" pill pulse>
-        1
-      </WaBadge>
-      <WaBadge variant="warning" pill pulse>
-        1
-      </WaBadge>
-      <WaBadge variant="danger" pill pulse>
-        1
-      </WaBadge>
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaBadge from '@shoelace-style/shoelace/dist/react/badge';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-
-const App = () => (
-  <>
-    <WaButton>
-      Requests
-      <WaBadge pill>30</WaBadge>
-    </WaButton>
-
-    <WaButton style={{ marginInlineStart: '1rem' }}>
-      Warnings
-      <WaBadge variant="warning" pill>
-        8
-      </WaBadge>
-    </WaButton>
-
-    <WaButton style={{ marginInlineStart: '1rem' }}>
-      Errors
-      <WaBadge variant="danger" pill>
-        6
-      </WaBadge>
-    </WaButton>
-  </>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaBadge from '@shoelace-style/shoelace/dist/react/badge';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
-import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
-import WaMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';
-
-const App = () => (
-  <WaMenu
-    style={{ maxWidth: '240px' }}
-  >
-    <WaMenuLabel>Messages</WaMenuLabel>
-    <WaMenuItem>
-      Comments
-      <WaBadge slot="suffix" variant="neutral" pill>
-        4
-      </WaBadge>
-    </WaMenuItem>
-    <WaMenuItem>
-      Replies
-      <WaBadge slot="suffix" variant="neutral" pill>
-        12
-      </WaBadge>
-    </WaMenuItem>
-  </WaMenu>
-);
-```
-{% endraw %}

docs/docs/components/breadcrumb-item.md

@@ -1,39 +0,0 @@
----
-title: Breadcrumb Item
-description: Breadcrumb Items are used inside breadcrumbs to represent different links.
-layout: component.njk
----
-
-```html {.example}
-<wa-breadcrumb>
-  <wa-breadcrumb-item>
-    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
-    Home
-  </wa-breadcrumb-item>
-  <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Shirts</wa-breadcrumb-item>
-</wa-breadcrumb>
-```
-
-{% raw %}
-```jsx {.react}
-import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
-import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-const App = () => (
-  <WaBreadcrumb>
-    <WaBreadcrumbItem>
-      <WaIcon slot="prefix" name="house"></WaIcon>
-      Home
-    </WaBreadcrumbItem>
-    <WaBreadcrumbItem>Clothing</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Shirts</WaBreadcrumbItem>
-  </WaBreadcrumb>
-);
-```
-{% endraw %}
-
-:::info
-Additional demonstrations can be found in the [breadcrumb examples](/components/breadcrumb).
-:::

docs/docs/components/breadcrumb.md

@@ -1,269 +0,0 @@
----
-title: Breadcrumb
-description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
-layout: component.njk
----
-
-Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.
-
-```html {.example}
-<wa-breadcrumb>
-  <wa-breadcrumb-item>Catalog</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Women's</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
-</wa-breadcrumb>
-```
-
-{% raw %}
-```jsx {.react}
-import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
-import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
-
-const App = () => (
-  <WaBreadcrumb>
-    <WaBreadcrumbItem>Catalog</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Clothing</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Women's</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Shirts &amp; Tops</WaBreadcrumbItem>
-  </WaBreadcrumb>
-);
-```
-{% endraw %}
-
-## Examples
-
-### Breadcrumb Links
-
-By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you'll need to add event listeners to handle clicks.
-
-For websites, you'll probably want to use links instead. You can make any breadcrumb item a link by applying an `href` attribute to it. Now, when the user activates it, they'll be taken to the corresponding page — no event listeners required.
-
-```html {.example}
-<wa-breadcrumb>
-  <wa-breadcrumb-item href="https://example.com/home">Homepage</wa-breadcrumb-item>
-
-  <wa-breadcrumb-item href="https://example.com/home/services">Our Services</wa-breadcrumb-item>
-
-  <wa-breadcrumb-item href="https://example.com/home/services/digital">Digital Media</wa-breadcrumb-item>
-
-  <wa-breadcrumb-item href="https://example.com/home/services/digital/web-design">Web Design</wa-breadcrumb-item>
-</wa-breadcrumb>
-```
-
-{% raw %}
-```jsx {.react}
-import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
-import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
-
-const App = () => (
-  <WaBreadcrumb>
-    <WaBreadcrumbItem href="https://example.com/home">Homepage</WaBreadcrumbItem>
-
-    <WaBreadcrumbItem href="https://example.com/home/services">Our Services</WaBreadcrumbItem>
-
-    <WaBreadcrumbItem href="https://example.com/home/services/digital">Digital Media</WaBreadcrumbItem>
-
-    <WaBreadcrumbItem href="https://example.com/home/services/digital/web-design">Web Design</WaBreadcrumbItem>
-  </WaBreadcrumb>
-);
-```
-{% endraw %}
-
-### Custom Separators
-
-Use the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
-
-```html {.example}
-<wa-breadcrumb>
-  <wa-icon slot="separator" name="angles-right" variant="solid"></wa-icon>
-  <wa-breadcrumb-item>First</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Second</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Third</wa-breadcrumb-item>
-</wa-breadcrumb>
-
-<br />
-
-<wa-breadcrumb>
-  <wa-icon slot="separator" name="arrow-right" variant="solid"></wa-icon>
-  <wa-breadcrumb-item>First</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Second</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Third</wa-breadcrumb-item>
-</wa-breadcrumb>
-
-<br />
-
-<wa-breadcrumb>
-  <span slot="separator">/</span>
-  <wa-breadcrumb-item>First</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Second</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Third</wa-breadcrumb-item>
-</wa-breadcrumb>
-```
-
-{% raw %}
-```jsx {.react}
-import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
-import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
-
-const App = () => (
-  <>
-    <WaBreadcrumb>
-      <wa-icon slot="separator" name="angles-right" variant="solid" />
-      <WaBreadcrumbItem>First</WaBreadcrumbItem>
-      <WaBreadcrumbItem>Second</WaBreadcrumbItem>
-      <WaBreadcrumbItem>Third</WaBreadcrumbItem>
-    </WaBreadcrumb>
-
-    <br />
-
-    <WaBreadcrumb>
-      <wa-icon slot="separator" name="arrow-right" variant="solid" />
-      <WaBreadcrumbItem>First</WaBreadcrumbItem>
-      <WaBreadcrumbItem>Second</WaBreadcrumbItem>
-      <WaBreadcrumbItem>Third</WaBreadcrumbItem>
-    </WaBreadcrumb>
-
-    <br />
-
-    <WaBreadcrumb>
-      <span slot="separator">/</span>
-      <WaBreadcrumbItem>First</WaBreadcrumbItem>
-      <WaBreadcrumbItem>Second</WaBreadcrumbItem>
-      <WaBreadcrumbItem>Third</WaBreadcrumbItem>
-    </WaBreadcrumb>
-  </>
-);
-```
-{% endraw %}
-
-### Prefixes
-
-Use the `prefix` slot to add content before any breadcrumb item.
-
-```html {.example}
-<wa-breadcrumb>
-  <wa-breadcrumb-item>
-    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
-    Home
-  </wa-breadcrumb-item>
-  <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Traveling</wa-breadcrumb-item>
-</wa-breadcrumb>
-```
-
-{% raw %}
-```jsx {.react}
-import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
-import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-const App = () => (
-  <WaBreadcrumb>
-    <WaBreadcrumbItem>
-      <WaIcon slot="prefix" name="house" variant="solid" />
-      Home
-    </WaBreadcrumbItem>
-    <WaBreadcrumbItem>Articles</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Traveling</WaBreadcrumbItem>
-  </WaBreadcrumb>
-);
-```
-{% endraw %}
-
-### Suffixes
-
-Use the `suffix` slot to add content after any breadcrumb item.
-
-```html {.example}
-<wa-breadcrumb>
-  <wa-breadcrumb-item>Documents</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Policies</wa-breadcrumb-item>
-  <wa-breadcrumb-item>
-    Security
-    <wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
-  </wa-breadcrumb-item>
-</wa-breadcrumb>
-```
-
-{% raw %}
-```jsx {.react}
-import WaBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
-import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-const App = () => (
-  <WaBreadcrumb>
-    <WaBreadcrumbItem>Documents</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Policies</WaBreadcrumbItem>
-    <WaBreadcrumbItem>
-      Security
-      <WaIcon slot="suffix" name="shield" variant="solid"></WaIcon>
-    </WaBreadcrumbItem>
-  </WaBreadcrumb>
-);
-```
-{% endraw %}
-
-### With Dropdowns
-
-Dropdown menus can be placed in a prefix or suffix slot to provide additional options.
-
-```html {.example}
-<wa-breadcrumb>
-  <wa-breadcrumb-item>Homepage</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Our Services</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Digital Media</wa-breadcrumb-item>
-  <wa-breadcrumb-item>
-    Web Design
-    <wa-dropdown slot="suffix">
-      <wa-button slot="trigger" size="small" pill>
-        <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
-      </wa-button>
-      <wa-menu>
-        <wa-menu-item type="checkbox" checked>Web Design</wa-menu-item>
-        <wa-menu-item type="checkbox">Web Development</wa-menu-item>
-        <wa-menu-item type="checkbox">Marketing</wa-menu-item>
-      </wa-menu>
-    </wa-dropdown>
-  </wa-breadcrumb-item>
-</wa-breadcrumb>
-```
-
-{% raw %}
-```jsx {.react}
-import {
-  WaBreadcrumb,
-  WaBreadcrumbItem,
-  WaButton,
-  WaDropdown,
-  WaIcon,
-  WaMenu,
-  WaMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <WaBreadcrumb>
-    <WaBreadcrumbItem>Homepage</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Our Services</WaBreadcrumbItem>
-    <WaBreadcrumbItem>Digital Media</WaBreadcrumbItem>
-    <WaBreadcrumbItem>
-      Web Design
-      <WaDropdown slot="suffix">
-        <WaButton slot="trigger" size="small" pill>
-          <WaIcon label="More options" name="ellipsis"></WaIcon>
-        </WaButton>
-        <WaMenu>
-          <WaMenuItem type="checkbox" checked>
-            Web Design
-          </WaMenuItem>
-          <WaMenuItem type="checkbox">Web Development</WaMenuItem>
-          <WaMenuItem type="checkbox">Marketing</WaMenuItem>
-        </WaMenu>
-      </WaDropdown>
-    </WaBreadcrumbItem>
-  </WaBreadcrumb>
-);
-```
-{% endraw %}

docs/docs/components/button-group.md

@@ -1,526 +0,0 @@
----
-title: Button Group
-description: Button groups can be used to group related buttons into sections.
-layout: component.njk
----
-
-```html {.example}
-<wa-button-group label="Alignment">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
-</wa-button-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
-
-const App = () => (
-  <WaButtonGroup label="Alignment">
-    <WaButton>Left</WaButton>
-    <WaButton>Center</WaButton>
-    <WaButton>Right</WaButton>
-  </WaButtonGroup>
-);
-```
-{% endraw %}
-
-## Examples
-
-### Button Sizes
-
-All button sizes are supported, but avoid mixing sizes within the same button group.
-
-```html {.example}
-<wa-button-group label="Alignment">
-  <wa-button size="small">Left</wa-button>
-  <wa-button size="small">Center</wa-button>
-  <wa-button size="small">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button size="medium">Left</wa-button>
-  <wa-button size="medium">Center</wa-button>
-  <wa-button size="medium">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button size="large">Left</wa-button>
-  <wa-button size="large">Center</wa-button>
-  <wa-button size="large">Right</wa-button>
-</wa-button-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
-
-const App = () => (
-  <>
-    <WaButtonGroup label="Alignment">
-      <WaButton size="small">Left</WaButton>
-      <WaButton size="small">Center</WaButton>
-      <WaButton size="small">Right</WaButton>
-    </WaButtonGroup>
-
-    <br />
-    <br />
-
-    <WaButtonGroup label="Alignment">
-      <WaButton size="medium">Left</WaButton>
-      <WaButton size="medium">Center</WaButton>
-      <WaButton size="medium">Right</WaButton>
-    </WaButtonGroup>
-
-    <br />
-    <br />
-
-    <WaButtonGroup label="Alignment">
-      <WaButton size="large">Left</WaButton>
-      <WaButton size="large">Center</WaButton>
-      <WaButton size="large">Right</WaButton>
-    </WaButtonGroup>
-  </>
-);
-```
-{% endraw %}
-
-### Theme Buttons
-
-Theme buttons are supported through the button's `variant` attribute.
-
-```html {.example}
-<wa-button-group label="Alignment">
-  <wa-button variant="brand">Left</wa-button>
-  <wa-button variant="brand">Center</wa-button>
-  <wa-button variant="brand">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button variant="success">Left</wa-button>
-  <wa-button variant="success">Center</wa-button>
-  <wa-button variant="success">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button>Left</wa-button>
-  <wa-button>Center</wa-button>
-  <wa-button>Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button variant="warning">Left</wa-button>
-  <wa-button variant="warning">Center</wa-button>
-  <wa-button variant="warning">Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button variant="danger">Left</wa-button>
-  <wa-button variant="danger">Center</wa-button>
-  <wa-button variant="danger">Right</wa-button>
-</wa-button-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
-
-const App = () => (
-  <>
-    <WaButtonGroup label="Alignment">
-      <WaButton variant="brand">Left</WaButton>
-      <WaButton variant="brand">Center</WaButton>
-      <WaButton variant="brand">Right</WaButton>
-    </WaButtonGroup>
-
-    <br />
-    <br />
-
-    <WaButtonGroup label="Alignment">
-      <WaButton variant="success">Left</WaButton>
-      <WaButton variant="success">Center</WaButton>
-      <WaButton variant="success">Right</WaButton>
-    </WaButtonGroup>
-
-    <br />
-    <br />
-
-    <WaButtonGroup label="Alignment">
-      <WaButton>Left</WaButton>
-      <WaButton>Center</WaButton>
-      <WaButton>Right</WaButton>
-    </WaButtonGroup>
-
-    <br />
-    <br />
-
-    <WaButtonGroup label="Alignment">
-      <WaButton variant="warning">Left</WaButton>
-      <WaButton variant="warning">Center</WaButton>
-      <WaButton variant="warning">Right</WaButton>
-    </WaButtonGroup>
-
-    <br />
-    <br />
-
-    <WaButtonGroup label="Alignment">
-      <WaButton variant="danger">Left</WaButton>
-      <WaButton variant="danger">Center</WaButton>
-      <WaButton variant="danger">Right</WaButton>
-    </WaButtonGroup>
-  </>
-);
-```
-{% endraw %}
-
-### Pill Buttons
-
-Pill buttons are supported through the button's `pill` attribute.
-
-```html {.example}
-<wa-button-group label="Alignment">
-  <wa-button size="small" pill>Left</wa-button>
-  <wa-button size="small" pill>Center</wa-button>
-  <wa-button size="small" pill>Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button size="medium" pill>Left</wa-button>
-  <wa-button size="medium" pill>Center</wa-button>
-  <wa-button size="medium" pill>Right</wa-button>
-</wa-button-group>
-
-<br /><br />
-
-<wa-button-group label="Alignment">
-  <wa-button size="large" pill>Left</wa-button>
-  <wa-button size="large" pill>Center</wa-button>
-  <wa-button size="large" pill>Right</wa-button>
-</wa-button-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
-
-const App = () => (
-  <>
-    <WaButtonGroup label="Alignment">
-      <WaButton size="small" pill>
-        Left
-      </WaButton>
-      <WaButton size="small" pill>
-        Center
-      </WaButton>
-      <WaButton size="small" pill>
-        Right
-      </WaButton>
-    </WaButtonGroup>
-
-    <br />
-    <br />
-
-    <WaButtonGroup label="Alignment">
-      <WaButton size="medium" pill>
-        Left
-      </WaButton>
-      <WaButton size="medium" pill>
-        Center
-      </WaButton>
-      <WaButton size="medium" pill>
-        Right
-      </WaButton>
-    </WaButtonGroup>
-
-    <br />
-    <br />
-
-    <WaButtonGroup label="Alignment">
-      <WaButton size="large" pill>
-        Left
-      </WaButton>
-      <WaButton size="large" pill>
-        Center
-      </WaButton>
-      <WaButton size="large" pill>
-        Right
-      </WaButton>
-    </WaButtonGroup>
-  </>
-);
-```
-{% endraw %}
-
-### Dropdowns in Button Groups
-
-Dropdowns can be placed inside button groups as long as the trigger is an `<wa-button>` element.
-
-```html {.example}
-<wa-button-group label="Example Button Group">
-  <wa-button>Button</wa-button>
-  <wa-button>Button</wa-button>
-  <wa-dropdown>
-    <wa-button slot="trigger" caret>Dropdown</wa-button>
-    <wa-menu>
-      <wa-menu-item>Item 1</wa-menu-item>
-      <wa-menu-item>Item 2</wa-menu-item>
-      <wa-menu-item>Item 3</wa-menu-item>
-    </wa-menu>
-  </wa-dropdown>
-</wa-button-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
-import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
-import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
-import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
-
-const App = () => (
-  <WaButtonGroup label="Example Button Group">
-    <WaButton>Button</WaButton>
-    <WaButton>Button</WaButton>
-    <WaDropdown>
-      <WaButton slot="trigger" caret>
-        Dropdown
-      </WaButton>
-      <WaMenu>
-        <WaMenuItem>Item 1</WaMenuItem>
-        <WaMenuItem>Item 2</WaMenuItem>
-        <WaMenuItem>Item 3</WaMenuItem>
-      </WaMenu>
-    </WaDropdown>
-  </WaButtonGroup>
-);
-```
-{% endraw %}
-
-### Split Buttons
-
-Create a split button using a button and a dropdown. Use a [visually hidden](/components/visually-hidden) label to ensure the dropdown is accessible to users with assistive devices.
-
-```html {.example}
-<wa-button-group label="Example Button Group">
-  <wa-button variant="brand">Save</wa-button>
-  <wa-dropdown placement="bottom-end">
-    <wa-button slot="trigger" variant="brand" caret>
-      <wa-visually-hidden>More options</wa-visually-hidden>
-    </wa-button>
-    <wa-menu>
-      <wa-menu-item>Save</wa-menu-item>
-      <wa-menu-item>Save as&hellip;</wa-menu-item>
-      <wa-menu-item>Save all</wa-menu-item>
-    </wa-menu>
-  </wa-dropdown>
-</wa-button-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
-import WaDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
-import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
-import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
-
-const App = () => (
-  <WaButtonGroup label="Example Button Group">
-    <WaButton variant="brand">Save</WaButton>
-    <WaDropdown placement="bottom-end">
-      <WaButton slot="trigger" variant="brand" caret></WaButton>
-      <WaMenu>
-        <WaMenuItem>Save</WaMenuItem>
-        <WaMenuItem>Save as&hellip;</WaMenuItem>
-        <WaMenuItem>Save all</WaMenuItem>
-      </WaMenu>
-    </WaDropdown>
-  </WaButtonGroup>
-);
-```
-{% endraw %}
-
-### Tooltips in Button Groups
-
-Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.
-
-```html {.example}
-<wa-button-group label="Alignment">
-  <wa-tooltip content="I'm on the left">
-    <wa-button>Left</wa-button>
-  </wa-tooltip>
-
-  <wa-tooltip content="I'm in the middle">
-    <wa-button>Center</wa-button>
-  </wa-tooltip>
-
-  <wa-tooltip content="I'm on the right">
-    <wa-button>Right</wa-button>
-  </wa-tooltip>
-</wa-button-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
-import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
-
-const App = () => (
-  <>
-    <WaButtonGroup label="Alignment">
-      <WaTooltip content="I'm on the left">
-        <WaButton>Left</WaButton>
-      </WaTooltip>
-
-      <WaTooltip content="I'm in the middle">
-        <WaButton>Center</WaButton>
-      </WaTooltip>
-
-      <WaTooltip content="I'm on the right">
-        <WaButton>Right</WaButton>
-      </WaTooltip>
-    </WaButtonGroup>
-  </>
-);
-```
-{% endraw %}
-
-### Toolbar Example
-
-Create interactive toolbars with button groups.
-
-```html {.example}
-<div class="button-group-toolbar">
-  <wa-button-group label="History">
-    <wa-tooltip content="Undo">
-      <wa-button><wa-icon name="undo" variant="solid" label="Undo"></wa-icon></wa-button>
-    </wa-tooltip>
-    <wa-tooltip content="Redo">
-      <wa-button><wa-icon name="redo" variant="solid" label="Redo"></wa-icon></wa-button>
-    </wa-tooltip>
-  </wa-button-group>
-
-  <wa-button-group label="Formatting">
-    <wa-tooltip content="Bold">
-      <wa-button><wa-icon name="bold" variant="solid" label="Bold"></wa-icon></wa-button>
-    </wa-tooltip>
-    <wa-tooltip content="Italic">
-      <wa-button><wa-icon name="italic" variant="solid" label="Italic"></wa-icon></wa-button>
-    </wa-tooltip>
-    <wa-tooltip content="Underline">
-      <wa-button><wa-icon name="underline" variant="solid" label="Underline"></wa-icon></wa-button>
-    </wa-tooltip>
-  </wa-button-group>
-
-  <wa-button-group label="Alignment">
-    <wa-tooltip content="Align Left">
-      <wa-button><wa-icon name="align-left" variant="solid" label="Align Left"></wa-icon></wa-button>
-    </wa-tooltip>
-    <wa-tooltip content="Align Center">
-      <wa-button><wa-icon name="align-center" variant="solid" label="Align Center"></wa-icon></wa-button>
-    </wa-tooltip>
-    <wa-tooltip content="Align Right">
-      <wa-button><wa-icon name="align-right" variant="solid" label="Align Right"></wa-icon></wa-button>
-    </wa-tooltip>
-  </wa-button-group>
-</div>
-
-<style>
-  .button-group-toolbar wa-button-group:not(:last-of-type) {
-    margin-right: var(--wa-space-xs);
-  }
-</style>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
-
-const css = `
-  .button-group-toolbar wa-button-group:not(:last-of-type) {
-    margin-right: var(--wa-space-xs);
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="button-group-toolbar">
-      <WaButtonGroup label="History">
-        <WaTooltip content="Undo">
-          <WaButton>
-            <WaIcon name="undo" variant="solid"></WaIcon>
-          </WaButton>
-        </WaTooltip>
-        <WaTooltip content="Redo">
-          <WaButton>
-            <WaIcon name="redo" variant="solid"></WaIcon>
-          </WaButton>
-        </WaTooltip>
-      </WaButtonGroup>
-
-      <WaButtonGroup label="Formatting">
-        <WaTooltip content="Bold">
-          <WaButton>
-            <WaIcon name="bold" variant="solid"></WaIcon>
-          </WaButton>
-        </WaTooltip>
-        <WaTooltip content="Italic">
-          <WaButton>
-            <WaIcon name="italic" variant="solid"></WaIcon>
-          </WaButton>
-        </WaTooltip>
-        <WaTooltip content="Underline">
-          <WaButton>
-            <WaIcon name="underline" variant="solid"></WaIcon>
-          </WaButton>
-        </WaTooltip>
-      </WaButtonGroup>
-
-      <WaButtonGroup label="Alignment">
-        <WaTooltip content="Align Left">
-          <WaButton>
-            <WaIcon name="align-left" variant="solid"></WaIcon>
-          </WaButton>
-        </WaTooltip>
-        <WaTooltip content="Align Center">
-          <WaButton>
-            <WaIcon name="align-center" variant="solid"></WaIcon>
-          </WaButton>
-        </WaTooltip>
-        <WaTooltip content="Align Right">
-          <WaButton>
-            <WaIcon name="align-right" variant="solid"></WaIcon>
-          </WaButton>
-        </WaTooltip>
-      </WaButtonGroup>
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}

docs/docs/components/button.md

@@ -1,509 +0,0 @@
----
-title: Button
-description: Buttons represent actions that are available to the user.
-layout: component.njk
----
-
-```html {.example}
-<wa-button>Button</wa-button>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-
-const App = () => <WaButton>Button</WaButton>;
-```
-{% endraw %}
-
-## Examples
-
-### Variants
-
-Use the `variant` attribute to set the button's variant.
-
-```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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-
-const App = () => (
-  <>
-    <WaButton variant="brand">Brand</WaButton>
-    <WaButton variant="success">Success</WaButton>
-    <WaButton variant="neutral">Neutral</WaButton>
-    <WaButton variant="warning">Warning</WaButton>
-    <WaButton variant="danger">Danger</WaButton>
-  </>
-);
-```
-{% endraw %}
-
-### Sizes
-
-Use the `size` attribute to change a button's size.
-
-```html {.example}
-<wa-button size="small">Small</wa-button>
-<wa-button size="medium">Medium</wa-button>
-<wa-button size="large">Large</wa-button>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-
-const App = () => (
-  <>
-    <WaButton size="small">Small</WaButton>
-    <WaButton size="medium">Medium</WaButton>
-    <WaButton size="large">Large</WaButton>
-  </>
-);
-```
-{% endraw %}
-
-### Outline Buttons
-
-Use the `outline` attribute to draw outlined buttons with transparent backgrounds.
-
-```html {.example}
-<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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-
-const App = () => (
-  <>
-    <WaButton variant="brand" outline>
-      Brand
-    </WaButton>
-    <WaButton variant="success" outline>
-      Success
-    </WaButton>
-    <WaButton variant="neutral" outline>
-      Neutral
-    </WaButton>
-    <WaButton variant="warning" outline>
-      Warning
-    </WaButton>
-    <WaButton variant="danger" outline>
-      Danger
-    </WaButton>
-  </>
-);
-```
-{% endraw %}
-
-### Pill Buttons
-
-Use the `pill` attribute to give buttons rounded edges.
-
-```html {.example}
-<wa-button size="small" pill>Small</wa-button>
-<wa-button size="medium" pill>Medium</wa-button>
-<wa-button size="large" pill>Large</wa-button>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-
-const App = () => (
-  <>
-    <WaButton size="small" pill>
-      Small
-    </WaButton>
-    <WaButton size="medium" pill>
-      Medium
-    </WaButton>
-    <WaButton size="large" pill>
-      Large
-    </WaButton>
-  </>
-);
-```
-{% endraw %}
-
-### Text Buttons
-
-Use the `text` variant to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.
-
-```html {.example}
-<wa-button variant="text" size="small">Text</wa-button>
-<wa-button variant="text" size="medium">Text</wa-button>
-<wa-button variant="text" size="large">Text</wa-button>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-
-const App = () => (
-  <>
-    <WaButton variant="text" size="small">
-      Text
-    </WaButton>
-    <WaButton variant="text" size="medium">
-      Text
-    </WaButton>
-    <WaButton variant="text" size="large">
-      Text
-    </WaButton>
-  </>
-);
-```
-{% endraw %}
-
-### Link Buttons
-
-It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `<a>` under the hood. This gives you all the default link behavior the browser provides (e.g. [[CMD/CTRL/SHIFT]] + [[CLICK]]) and exposes the `target` and `download` attributes.
-
-```html {.example}
-<wa-button href="https://example.com/">Link</wa-button>
-<wa-button href="https://example.com/" target="_blank">New Window</wa-button>
-<wa-button href="/assets/images/logo.svg" download="shoelace.svg">Download</wa-button>
-<wa-button href="https://example.com/" disabled>Disabled</wa-button>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-
-const App = () => (
-  <>
-    <WaButton href="https://example.com/">Link</WaButton>
-    <WaButton href="https://example.com/" target="_blank">
-      New Window
-    </WaButton>
-    <WaButton href="/assets/images/logo.svg" download="shoelace.svg">
-      Download
-    </WaButton>
-    <WaButton href="https://example.com/" disabled>
-      Disabled
-    </WaButton>
-  </>
-);
-```
-{% endraw %}
-
-:::info
-When a `target` is set, the link will receive `rel="noreferrer noopener"` for [security reasons](https://mathiasbynens.github.io/rel-noopener/).
-:::
-
-### Setting a Custom Width
-
-As expected, buttons can be given a custom width by setting the `width` attribute. This is useful for making buttons span the full width of their container on smaller screens.
-
-```html {.example}
-<wa-button size="small" style="width: 100%; margin-bottom: 1rem;">Small</wa-button>
-<wa-button size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</wa-button>
-<wa-button size="large" style="width: 100%;">Large</wa-button>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-
-const App = () => (
-  <>
-    <WaButton size="small" style={{ width: '100%', marginBottom: '1rem' }}>
-      Small
-    </WaButton>
-    <WaButton size="medium" style={{ width: '100%', marginBottom: '1rem' }}>
-      Medium
-    </WaButton>
-    <WaButton size="large" style={{ width: '100%' }}>
-      Large
-    </WaButton>
-  </>
-);
-```
-{% endraw %}
-
-### Prefix and Suffix Icons
-
-Use the `prefix` and `suffix` slots to add icons.
-
-```html {.example}
-<wa-button size="small">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-  Settings
-</wa-button>
-
-<wa-button size="small">
-  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
-  Refresh
-</wa-button>
-
-<wa-button size="small">
-  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
-  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
-  Open
-</wa-button>
-
-<br /><br />
-
-<wa-button>
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-  Settings
-</wa-button>
-
-<wa-button>
-  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
-  Refresh
-</wa-button>
-
-<wa-button>
-  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
-  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
-  Open
-</wa-button>
-
-<br /><br />
-
-<wa-button size="large">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
-  Settings
-</wa-button>
-
-<wa-button size="large">
-  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
-  Refresh
-</wa-button>
-
-<wa-button size="large">
-  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
-  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
-  Open
-</wa-button>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-const App = () => (
-  <>
-    <WaButton size="small">
-      <WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
-      Settings
-    </WaButton>
-
-    <WaButton size="small">
-      <WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
-      Refresh
-    </WaButton>
-
-    <WaButton size="small">
-      <WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
-      <WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
-      Open
-    </WaButton>
-
-    <br />
-    <br />
-
-    <WaButton>
-      <WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
-      Settings
-    </WaButton>
-
-    <WaButton>
-      <WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
-      Refresh
-    </WaButton>
-
-    <WaButton>
-      <WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
-      <WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
-      Open
-    </WaButton>
-
-    <br />
-    <br />
-
-    <WaButton size="large">
-      <WaIcon slot="prefix" name="gear" variant="solid"></WaIcon>
-      Settings
-    </WaButton>
-
-    <WaButton size="large">
-      <WaIcon slot="suffix" name="undo" variant="solid"></WaIcon>
-      Refresh
-    </WaButton>
-
-    <WaButton size="large">
-      <WaIcon slot="prefix" name="link" variant="solid"></WaIcon>
-      <WaIcon slot="suffix" name="arrow-up-right-from-square" variant="solid"></WaIcon>
-      Open
-    </WaButton>
-  </>
-);
-```
-{% endraw %}
-
-### Caret
-
-Use the `caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
-
-```html {.example}
-<wa-button size="small" caret>Small</wa-button>
-<wa-button size="medium" caret>Medium</wa-button>
-<wa-button size="large" caret>Large</wa-button>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-
-const App = () => (
-  <>
-    <WaButton size="small" caret>
-      Small
-    </WaButton>
-    <WaButton size="medium" caret>
-      Medium
-    </WaButton>
-    <WaButton size="large" caret>
-      Large
-    </WaButton>
-  </>
-);
-```
-{% endraw %}
-
-### Loading
-
-Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
-
-```html {.example}
-<wa-button variant="brand" loading>Brand</wa-button>
-<wa-button variant="success" loading>Success</wa-button>
-<wa-button variant="neutral" loading>Neutral</wa-button>
-<wa-button variant="warning" loading>Warning</wa-button>
-<wa-button variant="danger" loading>Danger</wa-button>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-
-const App = () => (
-  <>
-    <WaButton variant="brand" loading>
-      Brand
-    </WaButton>
-    <WaButton variant="success" loading>
-      Success
-    </WaButton>
-    <WaButton variant="neutral" loading>
-      Neutral
-    </WaButton>
-    <WaButton variant="warning" loading>
-      Warning
-    </WaButton>
-    <WaButton variant="danger" loading>
-      Danger
-    </WaButton>
-  </>
-);
-```
-{% endraw %}
-
-### Disabled
-
-Use the `disabled` attribute to disable a button.
-
-```html {.example}
-<wa-button variant="brand" disabled>Brand</wa-button>
-<wa-button variant="success" disabled>Success</wa-button>
-<wa-button variant="neutral" disabled>Neutral</wa-button>
-<wa-button variant="warning" disabled>Warning</wa-button>
-<wa-button variant="danger" disabled>Danger</wa-button>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-
-const App = () => (
-  <>
-    <WaButton variant="brand" disabled>
-      Brand
-    </WaButton>
-
-    <WaButton variant="success" disabled>
-      Success
-    </WaButton>
-
-    <WaButton variant="neutral" disabled>
-      Neutral
-    </WaButton>
-
-    <WaButton variant="warning" disabled>
-      Warning
-    </WaButton>
-
-    <WaButton variant="danger" disabled>
-      Danger
-    </WaButton>
-  </>
-);
-```
-{% endraw %}
-
-### Styling Buttons
-
-This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's `variant` attribute instead of a class (e.g. `wa-button[variant="brand"]`).
-
-```html {.example}
-<wa-button class="pink">Pink Button</wa-button>
-
-<style>
-  wa-button.pink::part(base) {
-    border-radius: 6px;
-    border: solid 2px;
-    background: #ff1493;
-    border-top-color: #ff7ac1;
-    border-left-color: #ff7ac1;
-    border-bottom-color: #ad005c;
-    border-right-color: #ad005c;
-    color: white;
-    font-size: 1.125rem;
-    box-shadow: 0 2px 10px #0002;
-    transition: var(--wa-transition-normal) all;
-  }
-
-  wa-button.pink::part(base):hover {
-    transform: scale(1.05);
-  }
-
-  wa-button.pink::part(base):active {
-    border-top-color: #ad005c;
-    border-right-color: #ff7ac1;
-    border-bottom-color: #ff7ac1;
-    border-left-color: #ad005c;
-    transform: translateY(1px);
-  }
-
-  wa-button.pink::part(base):focus-visible {
-    outline: dashed 2px deeppink;
-    outline-offset: 4px;
-  }
-</style>
-```

docs/docs/components/callout.md

@@ -1,147 +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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaCallout from '@shoelace-style/shoelace/dist/react/callout';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-const App = () => (
-  <WaCallout>
-    <WaIcon slot="icon" name="circle-info" variant="regular" />
-    This is a standard callout. You can customize its content and even the icon.
-  </WaCallout>
-);
-```
-{% endraw %}
-
-## 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaCallout from '@shoelace-style/shoelace/dist/react/callout';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-const App = () => (
-  <>
-    <WaCallout variant="brand">
-      <WaIcon slot="icon" name="circle-info" variant="regular" />
-      <strong>This is super informative</strong>
-      <br />
-      You can tell by how pretty the callout is.
-    </WaCallout>
-
-    <br />
-
-    <WaCallout variant="success">
-      <WaIcon slot="icon" name="circle-check" variant="regular" />
-      <strong>Your changes have been saved</strong>
-      <br />
-      You can safely exit the app now.
-    </WaCallout>
-
-    <br />
-
-    <WaCallout variant="neutral">
-      <WaIcon slot="icon" name="gear" variant="regular" />
-      <strong>Your settings have been updated</strong>
-      <br />
-      Settings will take effect on next login.
-    </WaCallout>
-
-    <br />
-
-    <WaCallout variant="warning">
-      <WaIcon slot="icon" name="triangle-exclamation" variant="regular" />
-      <strong>Your session has ended</strong>
-      <br />
-      Please login again to continue.
-    </WaCallout>
-
-    <br />
-
-    <WaCallout variant="danger">
-      <WaIcon slot="icon" name="circle-exclamation" variant="regular" />
-      <strong>Your account has been deleted</strong>
-      <br />
-      We're very sorry to see you go!
-    </WaCallout>
-  </>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaCallout from '@shoelace-style/shoelace/dist/react/callout';
-
-const App = () => (
-  <WaCallout variant="brand">
-    Nothing fancy here, just a simple callout.
-  </WaCallout>
-);
-```
-{% endraw %}
-

docs/docs/components/card.md

@@ -1,316 +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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaCard from '@shoelace-style/shoelace/dist/react/card';
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
-
-const css = `
-  .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;
-  }
-`;
-
-const App = () => (
-  <>
-    <WaCard with-image with-footer className="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">
-        <WaButton variant="brand" pill>
-          More Info
-        </WaButton>
-        <WaRating></WaRating>
-      </div>
-    </WaCard>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}
-
-## 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaCard from '@shoelace-style/shoelace/dist/react/card';
-
-const css = `
-  .card-basic {
-    max-width: 300px;
-  }
-`;
-
-const App = () => (
-  <>
-    <WaCard className="card-basic">
-      This is just a basic card. No image, no header, and no footer. Just your content.
-    </WaCard>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaCard from '@shoelace-style/shoelace/dist/react/card';
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-
-const css = `
-  .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);
-  }
-`;
-
-const App = () => (
-  <>
-    <WaCard with-header className="card-header">
-      <div slot="header">
-        Header Title
-        <WaIconButton name="gear" variant="solid"></WaIconButton>
-      </div>
-      This card has a header. You can put all sorts of things in it!
-    </WaCard>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaCard from '@shoelace-style/shoelace/dist/react/card';
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
-
-const css = `
-  .card-footer {
-    max-width: 300px;
-  }
-
-  .card-footer [slot="footer"] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-`;
-
-const App = () => (
-  <>
-    <WaCard with-footer className="card-footer">
-      This card has a footer. You can put all sorts of things in it!
-      <div slot="footer">
-        <WaRating></WaRating>
-        <WaButton slot="footer" variant="brand">
-          Preview
-        </WaButton>
-      </div>
-    </WaCard>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaCard from '@shoelace-style/shoelace/dist/react/card';
-
-const css = `
-  .card-image {
-    max-width: 300px;
-  }
-`;
-
-const App = () => (
-  <>
-    <WaCard with-image className="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.
-    </WaCard>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}

docs/docs/components/carousel-item.md

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

docs/docs/components/checkbox.md

@@ -1,189 +0,0 @@
----
-title: Checkbox
-description: Checkboxes allow the user to toggle an option on or off.
-layout: component.njk
----
-
-```html {.example}
-<wa-checkbox>Checkbox</wa-checkbox>
-```
-
-{% raw %}
-```jsx {.react}
-import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
-
-const App = () => <WaCheckbox>Checkbox</WaCheckbox>;
-```
-{% endraw %}
-
-:::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
-
-### Checked
-
-Use the `checked` attribute to activate the checkbox.
-
-```html {.example}
-<wa-checkbox checked>Checked</wa-checkbox>
-```
-
-{% raw %}
-```jsx {.react}
-import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
-
-const App = () => <WaCheckbox checked>Checked</WaCheckbox>;
-```
-{% endraw %}
-
-### Indeterminate
-
-Use the `indeterminate` attribute to make the checkbox indeterminate.
-
-```html {.example}
-<wa-checkbox indeterminate>Indeterminate</wa-checkbox>
-```
-
-{% raw %}
-```jsx {.react}
-import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
-
-const App = () => <WaCheckbox indeterminate>Indeterminate</WaCheckbox>;
-```
-{% endraw %}
-
-### Disabled
-
-Use the `disabled` attribute to disable the checkbox.
-
-```html {.example}
-<wa-checkbox disabled>Disabled</wa-checkbox>
-```
-
-{% raw %}
-```jsx {.react}
-import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
-
-const App = () => <WaCheckbox disabled>Disabled</WaCheckbox>;
-```
-{% endraw %}
-
-### Sizes
-
-Use the `size` attribute to change a checkbox's size.
-
-```html {.example}
-<wa-checkbox size="small">Small</wa-checkbox>
-<br />
-<wa-checkbox size="medium">Medium</wa-checkbox>
-<br />
-<wa-checkbox size="large">Large</wa-checkbox>
-```
-
-{% raw %}
-```jsx {.react}
-import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
-
-const App = () => (
-  <>
-    <WaCheckbox size="small">Small</WaCheckbox>
-    <br />
-    <WaCheckbox size="medium">Medium</WaCheckbox>
-    <br />
-    <WaCheckbox size="large">Large</WaCheckbox>
-  </>
-);
-```
-{% endraw %}
-
-### Help Text
-
-Add descriptive help text to a switch with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
-
-```html {.example}
-<wa-checkbox help-text="What should the user know about the checkbox?">Label</wa-checkbox>
-```
-
-{% raw %}
-```jsx {.react}
-import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
-const App = () => <WaCheckbox help-text="What should the user know about the switch?">Label</WaCheckbox>;
-
-### Custom Validity
-
-Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
-
-```
-{% endraw %}
-
-```html {.example}
-<form class="custom-validity">
-  <wa-checkbox>Check me</wa-checkbox>
-  <br />
-  <wa-button type="submit" variant="brand" style="margin-top: 1rem;">Submit</wa-button>
-</form>
-<script>
-  const form = document.querySelector('.custom-validity');
-  const checkbox = form.querySelector('wa-checkbox');
-  const errorMessage = `Don't forget to check me!`;
-
-  // Set initial validity as soon as the element is defined
-  customElements.whenDefined('wa-checkbox').then(async () => {
-    await checkbox.updateComplete;
-    checkbox.setCustomValidity(errorMessage);
-  });
-
-  // Update validity on change
-  checkbox.addEventListener('wa-change', () => {
-    checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
-  });
-
-  // Handle submit
-  customElements.whenDefined('wa-checkbox').then(() => {
-    form.addEventListener('submit', event => {
-      event.preventDefault();
-      alert('All fields are valid!');
-    });
-  });
-</script>
-````
-
-{% raw %}
-```jsx {.react}
-import { useEffect, useRef } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
-
-const App = () => {
-  const checkbox = useRef(null);
-  const errorMessage = `Don't forget to check me!`;
-
-  function handleChange() {
-    checkbox.current.setCustomValidity(checkbox.current.checked ? '' : errorMessage);
-  }
-
-  function handleSubmit(event) {
-    event.preventDefault();
-    alert('All fields are valid!');
-  }
-
-  useEffect(() => {
-    checkbox.current.setCustomValidity(errorMessage);
-  }, []);
-
-  return (
-    <form class="custom-validity" onSubmit={handleSubmit}>
-      <WaCheckbox ref={checkbox} onWaChange={handleChange}>
-        Check me
-      </WaCheckbox>
-      <br />
-      <WaButton type="submit" variant="brand" style={{ marginTop: '1rem' }}>
-        Submit
-      </WaButton>
-    </form>
-  );
-};
-```
-{% endraw %}

docs/docs/components/color-picker.md

@@ -1,156 +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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
-
-const App = () => <WaColorPicker label="Select a color" />;
-```
-{% endraw %}
-
-:::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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
-
-const App = () => <WaColorPicker value="#4a90e2" label="Select a color" />;
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
-
-const App = () => <WaColorPicker opacity label="Select a color" />;
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
-
-const App = () => (
-  <>
-    <WaColorPicker format="hex" value="#4a90e2" />
-    <WaColorPicker format="rgb" value="rgb(80, 227, 194)" />
-    <WaColorPicker format="hsl" value="hsl(290, 87%, 47%)" />
-    <WaColorPicker format="hsv" value="hsv(55, 89%, 97%)" />
-  </>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
-
-const App = () => (
-  <WaColorPicker
-    label="Select a color"
-    swatches="
-      #d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;
-      #4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff;
-    "
-  />
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
-
-const App = () => (
-  <>
-    <WaColorPicker size="small" label="Select a color" />
-    <WaColorPicker size="medium" label="Select a color" />
-    <WaColorPicker size="large" label="Select a color" />
-  </>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
-
-const App = () => <WaColorPicker inline label="Select a color" />;
-```
-{% endraw %}

docs/docs/components/details.md

@@ -1,142 +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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaDetails from '@shoelace-style/shoelace/dist/react/details';
-
-const App = () => (
-  <WaDetails 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.
-  </WaDetails>
-);
-```
-{% endraw %}
-
-## 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaDetails from '@shoelace-style/shoelace/dist/react/details';
-
-const App = () => (
-  <WaDetails 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.
-  </WaDetails>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaDetails from '@shoelace-style/shoelace/dist/react/details';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-const css = `
-  wa-details.custom-icon::part(summary-icon) {
-    /* Disable the expand/collapse animation */
-    rotate: none;
-  }
-`;
-
-const App = () => (
-  <>
-    <WaDetails summary="Toggle Me" class="custom-icon">
-      <WaIcon name="square-plus" slot="expand-icon" />
-      <WaIcon name="square-minus" slot="collapse-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.
-    </WaDetails>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}
-
-### 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/dialog.md

@@ -1,510 +0,0 @@
----
-title: Dialog
-description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
-layout: component.njk
----
-
-<!-- cspell:dictionaries lorem-ipsum -->
-
-```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-overview">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <wa-button slot="footer" variant="brand" data-dialog="dismiss">Close</wa-button>
-</wa-dialog>
-
-<wa-button>Open Dialog</wa-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-overview');
-  const openButton = dialog.nextElementSibling;
-
-  openButton.addEventListener('click', () => dialog.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDialog label="Dialog" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <WaButton slot="footer" variant="brand" data-dialog="dismiss">
-          Close
-        </WaButton>
-      </WaDialog>
-
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-## Examples
-
-### Dialog with Header
-
-Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the dialog.
-
-```html {.example}
-<wa-dialog label="Dialog" with-header class="dialog-header">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</wa-dialog>
-
-<wa-button>Open Dialog</wa-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-header');
-  const openButton = dialog.nextElementSibling;
-
-  openButton.addEventListener('click', () => dialog.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDialog label="Dialog" with-header open={open} onWaAfterHide={() => setOpen(false)}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      </WaDialog>
-
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Dialog with Footer
-
-Footers can be used to display titles and more. Use the `with-footer` attribute to add a footer to the dialog.
-
-```html {.example}
-<wa-dialog label="Dialog" with-footer class="dialog-footer">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <wa-button slot="footer" variant="brand" data-dialog="dismiss">Close</wa-button>
-</wa-dialog>
-
-<wa-button>Open Dialog</wa-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-footer');
-  const openButton = dialog.nextElementSibling;
-
-  openButton.addEventListener('click', () => dialog.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDialog label="Dialog" with-footer open={open} onWaAfterHide={() => setOpen(false)}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <WaButton slot="footer" variant="brand" data-dialog="dismiss">
-          Close
-        </WaButton>
-      </WaDialog>
-
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Dismissing Dialogs
-
-You can add the special `data-dialog="dismiss"` attribute to a button inside the dialog to tell it to close without additional JavaScript. Alternatively, you can set the `open` property to `false` to close the dialog programmatically.
-
-```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-dismiss">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <wa-button slot="footer" variant="brand" data-dialog="dismiss">Close</wa-button>
-</wa-dialog>
-
-<wa-button>Open Dialog</wa-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-dismiss');
-  const openButton = dialog.nextElementSibling;
-
-  openButton.addEventListener('click', () => dialog.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDialog label="Dialog" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <WaButton slot="footer" variant="brand" data-dialog="dismiss">
-          Close
-        </WaButton>
-      </WaDialog>
-
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Custom Width
-
-Use the `--width` custom property to set the dialog's width.
-
-```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-width" style="--width: 50vw;">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <wa-button slot="footer" variant="brand" data-dialog="dismiss">Close</wa-button>
-</wa-dialog>
-
-<wa-button>Open Dialog</wa-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-width');
-  const openButton = dialog.nextElementSibling;
-
-  openButton.addEventListener('click', () => dialog.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDialog label="Dialog" with-header with-footer open={open} style={{ '--width': '50vw' }} onWaAfterHide={() => setOpen(false)}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <WaButton slot="footer" variant="brand" data-dialog="dismiss">
-          Close
-        </WaButton>
-      </WaDialog>
-
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Scrolling
-
-By design, a dialog's height will never exceed that of the viewport. As such, dialogs will not scroll with the page ensuring the header and footer are always accessible to the user.
-
-```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-scrolling">
-  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-border); padding: 0 1rem;">
-    <p>Scroll down and give it a try! 👇</p>
-  </div>
-  <wa-button slot="footer" variant="brand" data-dialog="dismiss">Close</wa-button>
-</wa-dialog>
-
-<wa-button>Open Dialog</wa-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-scrolling');
-  const openButton = dialog.nextElementSibling;
-
-  openButton.addEventListener('click', () => dialog.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDialog label="Dialog" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
-        <div
-          style={{
-            height: '150vh',
-            border: 'dashed 2px var(--wa-color-surface-border)',
-            padding: '0 1rem'
-          }}
-        >
-          <p>Scroll down and give it a try! 👇</p>
-        </div>
-
-        <WaButton slot="footer" variant="brand" data-dialog="dismiss">
-          Close
-        </WaButton>
-      </WaDialog>
-
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Header Actions
-
-The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed.
-
-```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-header-actions">
-  <wa-icon-button class="new-window" slot="header-actions" name="arrow-up-right-from-square" variant="solid"></wa-icon-button>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <wa-button slot="footer" variant="brand" data-dialog="dismiss">Close</wa-button>
-</wa-dialog>
-
-<wa-button>Open Dialog</wa-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-header-actions');
-  const openButton = dialog.nextElementSibling;
-  const newWindowButton = dialog.querySelector('.new-window');
-
-  openButton.addEventListener('click', () => dialog.open = true);
-  newWindowButton.addEventListener('click', () => window.open(location.href));
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDialog label="Dialog" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
-        <WaIconButton
-          class="new-window"
-          slot="header-actions"
-          name="arrow-up-right-from-square"
-          onClick={() => window.open(location.href)}
-        />
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <WaButton slot="footer" variant="brand" data-dialog="dismiss">
-          Close
-        </WaButton>
-      </WaDialog>
-
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Light Dismissal
-
-If you want the dialog to close when the user clicks on the overlay, add the `light-dismiss` attribute.
-
-```html {.example}
-<wa-dialog label="Dialog" light-dismiss with-header with-footer class="dialog-light-dismiss">
-  This dialog will close when you click on the overlay.
-  <wa-button slot="footer" variant="brand" data-dialog="dismiss">Close</wa-button>
-</wa-dialog>
-
-<wa-button>Open Dialog</wa-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-light-dismiss');
-  const openButton = dialog.nextElementSibling;
-
-  openButton.addEventListener('click', () => dialog.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-  
-  return (
-    <>
-      <WaDialog 
-        label="Dialog" 
-        light-dismiss
-        with-header 
-        with-footer 
-        open={open} 
-        onWaAfterHide={() => setOpen(false)}
-      >
-        This dialog will close when you click on the overlay.
-        <WaButton ref={closeButton} slot="footer" variant="brand" data-dialog="dismiss">
-          Close
-        </WaButton>
-      </WaDialog>
-
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Preventing the Dialog from Closing
-
-By default, dialogs will close when the user clicks the close button, clicks the overlay, or presses the [[Escape]] key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.
-
-To keep the dialog open in such cases, you can cancel the `wa-hide` event. When canceled, the dialog will remain open and pulse briefly to draw the user's attention to it.
-
-You can use `event.detail.source` to determine which element triggered the request to close. This example prevents the dialog from closing when the overlay is clicked, but allows the close button or [[Escape]] to dismiss it.
-
-```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-deny-close">
-  This dialog will only close when you click the button below.
-  <wa-button slot="footer" variant="brand" data-dialog="dismiss">Only this button will close it</wa-button>
-</wa-dialog>
-
-<wa-button>Open Dialog</wa-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-deny-close');
-  const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('wa-button[slot="footer"]');
-
-  openButton.addEventListener('click', () => dialog.open = true);
-
-  // Prevent the dialog from closing unless the close button was clicked
-  dialog.addEventListener('wa-hide', event => {
-    if (event.detail.source !== closeButton) {
-      event.preventDefault();
-    }
-  });
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useRef, useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
-
-const App = () => {
-  const closeButton = useRef(null);
-  const [open, setOpen] = useState(false);
-
-  // Prevent the dialog from closing when the user clicks on the overlay
-  function handleRequestClose(event) {
-    if (event.detail.source !== closeButton) {
-      event.preventDefault();
-    }
-
-  }
-
-  return (
-    <>
-      <WaDialog 
-        label="Dialog" 
-        with-header 
-        with-footer 
-        open={open} 
-        onWaRequestClose={handleRequestClose} 
-        onWaAfterHide={() => setOpen(false)}
-      >
-        This dialog will only close when you click the right button.
-        <WaButton ref={closeButton} slot="footer" variant="brand" data-dialog="dismiss">
-          Close
-        </WaButton>
-      </WaDialog>
-
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Setting Initial Focus
-
-To give focus to a specific element when the dialog opens, use the `autofocus` attribute.
-
-```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-focus">
-  <wa-input autofocus placeholder="I will have focus when the dialog is opened"></wa-input>
-  <wa-button slot="footer" variant="brand" data-dialog="dismiss">Close</wa-button>
-</wa-dialog>
-
-<wa-button>Open Dialog</wa-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-focus');
-  const input = dialog.querySelector('wa-input');
-  const openButton = dialog.nextElementSibling;
-
-  openButton.addEventListener('click', () => dialog.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDialog label="Dialog" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
-        <WaInput autofocus placeholder="I will have focus when the dialog is opened" />
-        <WaButton slot="footer" variant="brand" data-dialog="dismiss">
-          Close
-        </WaButton>
-      </WaDialog>
-
-      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-

docs/docs/components/divider.md

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

docs/docs/components/drawer.md

@@ -1,630 +0,0 @@
----
-title: Drawer
-description: Drawers slide in from a container to expose additional options and information.
-layout: component.njk
----
-
-<!-- cspell:dictionaries lorem-ipsum -->
-
-```html {.example}
-<wa-drawer label="Drawer" with-header with-footer class="drawer-overview">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
-</wa-drawer>
-
-<wa-button>Open Drawer</wa-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-overview');
-  const openButton = drawer.nextElementSibling;
-
-  openButton.addEventListener('click', () => drawer.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDrawer label="Drawer" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
-          Close
-        </WaButton>
-      </WaDrawer>
-
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-## Examples
-
-### Drawer with Header
-
-Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the drawer.
-
-```html {.example}
-<wa-drawer label="Drawer" with-header class="drawer-header">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</wa-drawer>
-
-<wa-button>Open Drawer</wa-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-header');
-  const openButton = drawer.nextElementSibling;
-
-  openButton.addEventListener('click', () => drawer.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDrawer label="Drawer" with-header open={open} onWaAfterHide={() => setOpen(false)}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      </WaDrawer>
-
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Drawer with Footer
-
-Footers can be used to display titles and more. Use the `with-footer` attribute to add a footer to the drawer.
-
-```html {.example}
-<wa-drawer label="Drawer" with-footer class="drawer-footer">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
-</wa-drawer>
-
-<wa-button>Open Drawer</wa-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-footer');
-  const openButton = drawer.nextElementSibling;
-
-  openButton.addEventListener('click', () => drawer.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDrawer label="Drawer" with-footer open={open} onWaAfterHide={() => setOpen(false)}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
-          Close
-        </WaButton>
-      </WaDrawer>
-
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Dismissing Drawers
-
-You can add the special `data-drawer="dismiss"` attribute to a button inside the drawer to tell it to close without additional JavaScript. Alternatively, you can set the `open` property to `false` to close the drawer programmatically.
-
-```html {.example}
-<wa-drawer label="Drawer" with-header with-footer class="drawer-dismiss">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
-</wa-drawer>
-
-<wa-button>Open Drawer</wa-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-dismiss');
-  const openButton = drawer.nextElementSibling;
-
-  openButton.addEventListener('click', () => drawer.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDrawer label="Drawer" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
-          Close
-        </WaButton>
-      </WaDrawer>
-
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Slide in From Start
-
-By default, drawers slide in from the end. To make the drawer slide in from the start, set the `placement` attribute to `start`.
-
-```html {.example}
-<wa-drawer label="Drawer" with-header with-footer placement="start" class="drawer-placement-start">
-  This drawer slides in from the start.
-  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
-</wa-drawer>
-
-<wa-button>Open Drawer</wa-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-placement-start');
-  const openButton = drawer.nextElementSibling;
-
-  openButton.addEventListener('click', () => drawer.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDrawer label="Drawer" with-header with-footer placement="start" open={open} onWaAfterHide={() => setOpen(false)}>
-        This drawer slides in from the start.
-        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
-          Close
-        </WaButton>
-      </WaDrawer>
-
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Slide in From Top
-
-To make the drawer slide in from the top, set the `placement` attribute to `top`.
-
-```html {.example}
-<wa-drawer label="Drawer" with-header with-footer placement="top" class="drawer-placement-top">
-  This drawer slides in from the top.
-  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
-</wa-drawer>
-
-<wa-button>Open Drawer</wa-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-placement-top');
-  const openButton = drawer.nextElementSibling;
-
-  openButton.addEventListener('click', () => drawer.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDrawer label="Drawer" with-header with-footer placement="top" open={open} onWaAfterHide={() => setOpen(false)}>
-        This drawer slides in from the top.
-        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
-          Close
-        </WaButton>
-      </WaDrawer>
-
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Slide in From Bottom
-
-To make the drawer slide in from the bottom, set the `placement` attribute to `bottom`.
-
-```html {.example}
-<wa-drawer label="Drawer" with-header with-footer placement="bottom" class="drawer-placement-bottom">
-  This drawer slides in from the bottom.
-  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
-</wa-drawer>
-
-<wa-button>Open Drawer</wa-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-placement-bottom');
-  const openButton = drawer.nextElementSibling;
-
-  openButton.addEventListener('click', () => drawer.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDrawer label="Drawer" with-header with-footer placement="bottom" open={open} onWaAfterHide={() => setOpen(false)}>
-        This drawer slides in from the bottom.
-        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
-          Close
-        </WaButton>
-      </WaDrawer>
-
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Custom Size
-
-Use the `--size` custom property to set the drawer's size. This will be applied to the drawer's width or height depending on its `placement`.
-
-```html {.example}
-<wa-drawer label="Drawer" with-header with-footer class="drawer-custom-size" style="--size: 50vw;">
-  This drawer is always 50% of the viewport.
-  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
-</wa-drawer>
-
-<wa-button>Open Drawer</wa-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-custom-size');
-  const openButton = drawer.nextElementSibling;
-
-  openButton.addEventListener('click', () => drawer.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDrawer label="Drawer" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)} style={{ '--size': '50vw' }}>
-        This drawer is always 50% of the viewport.
-        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
-          Close
-        </WaButton>
-      </WaDrawer>
-
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Scrolling
-
-By design, a drawer's height will never exceed 100% of its container. As such, drawers will not scroll with the page to ensure the header and footer are always accessible to the user.
-
-```html {.example}
-<wa-drawer label="Drawer" with-header with-footer class="drawer-scrolling">
-  <div style="height: 150vh; border: dashed 2px var(--wa-color-surface-border); padding: 0 1rem;">
-    <p>Scroll down and give it a try! 👇</p>
-  </div>
-  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
-</wa-drawer>
-
-<wa-button>Open Drawer</wa-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-scrolling');
-  const openButton = drawer.nextElementSibling;
-
-  openButton.addEventListener('click', () => drawer.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDrawer label="Drawer" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
-        <div
-          style={{
-            height: '150vh',
-            border: 'dashed 2px var(--wa-color-surface-border)',
-            padding: '0 1rem'
-          }}
-        >
-          <p>Scroll down and give it a try! 👇</p>
-        </div>
-        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
-          Close
-        </WaButton>
-      </WaDrawer>
-
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Header Actions
-
-The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed.
-
-```html {.example}
-<wa-drawer label="Drawer" with-header with-footer class="drawer-header-actions">
-  <wa-icon-button class="new-window" slot="header-actions" name="arrow-up-right-from-square" variant="solid"></wa-icon-button>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
-</wa-drawer>
-
-<wa-button>Open Drawer</wa-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-header-actions');
-  const openButton = drawer.nextElementSibling;
-  const newWindowButton = drawer.querySelector('.new-window');
-
-  openButton.addEventListener('click', () => drawer.open = true);
-  newWindowButton.addEventListener('click', () => window.open(location.href));
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDrawer label="Drawer" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
-        <WaIconButton slot="header-actions" name="arrow-up-right-from-square" onClick={() => window.open(location.href)} />
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
-          Close
-        </WaButton>
-      </WaDrawer>
-
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Light Dismissal
-
-If you want the drawer to close when the user clicks on the overlay, add the `light-dismiss` attribute.
-
-```html {.example}
-<wa-drawer label="Drawer" light-dismiss with-header with-footer class="drawer-light-dismiss">
-  This drawer will close when you click on the overlay.
-  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
-</wa-drawer>
-
-<wa-button>Open Drawer</wa-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-light-dismiss');
-  const openButton = drawer.nextElementSibling;
-
-  openButton.addEventListener('click', () => drawer.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-  
-  return (
-    <>
-      <WaDrawer 
-        label="Drawer" 
-        light-dismiss
-        with-header 
-        with-footer 
-        open={open} 
-        onWaAfterHide={() => setOpen(false)}
-      >
-        This drawer will close when you click on the overlay.
-        <WaButton ref={closeButton} slot="footer" variant="brand" data-drawer="dismiss">
-          Close
-        </WaButton>
-      </WaDrawer>
-
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Preventing the Drawer from Closing
-
-By default, drawers will close when the user clicks the close button, clicks the overlay, or presses the [[Escape]] key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.
-
-To keep the drawer open in such cases, you can cancel the `wa-hide` event. When canceled, the drawer will remain open and pulse briefly to draw the user's attention to it.
-
-You can use `event.detail.source` to determine what triggered the request to close. This example prevents the drawer from closing when the overlay is clicked, but allows the close button or [[Escape]] to dismiss it.
-
-```html {.example}
-<wa-drawer label="Drawer" with-header with-footer class="drawer-deny-close">
-  This drawer will only close when you click the button below.
-  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
-</wa-drawer>
-
-<wa-button>Open Drawer</wa-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-deny-close');
-  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('wa-button[slot="footer"]');
-
-  openButton.addEventListener('click', () => drawer.open = true);
-
-  // Prevent the drawer from closing unless the close button is clicked
-  drawer.addEventListener('wa-hide', event => {
-    if (event.detail.source !== closeButton) {
-      event.preventDefault();
-    }
-  });
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  // Prevent the drawer from closing when the user clicks on the overlay
-  function handleRequestClose(event) {
-    if (event.detail.source === 'overlay') {
-      event.preventDefault();
-    }
-  }
-
-  return (
-    <>
-      <WaDrawer label="Drawer" with-header with-footer open={open} onWaRequestClose={handleRequestClose} onWaAfterHide={() => setOpen(false)}>
-        This drawer will not close when you click on the overlay.
-        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
-          Save &amp; Close
-        </WaButton>
-      </WaDrawer>
-
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Customizing Initial Focus
-
-By default, the drawer's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the `autofocus` attribute to it as shown below.
-
-```html {.example}
-<wa-drawer label="Drawer" with-header with-footer class="drawer-focus">
-  <wa-input autofocus placeholder="I will have focus when the drawer is opened"></wa-input>
-  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
-</wa-drawer>
-
-<wa-button>Open Drawer</wa-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-focus');
-  const input = drawer.querySelector('wa-input');
-  const openButton = drawer.nextElementSibling;
-
-  openButton.addEventListener('click', () => drawer.open = true);
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaDrawer label="Drawer" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
-        <WaInput autofocus placeholder="I will have focus when the drawer is opened" />
-        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
-          Close
-        </WaButton>
-      </WaDrawer>
-
-      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-

docs/docs/components/dropdown.md

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

docs/docs/components/format-bytes.md

@@ -1,137 +0,0 @@
----
-title: Format Bytes
-description: Formats a number as a human readable bytes value.
-layout: component.njk
----
-
-```html {.example}
-<div class="format-bytes-overview">
-  The file is <wa-format-bytes value="1000"></wa-format-bytes> in size. <br /><br />
-  <wa-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></wa-input>
-</div>
-
-<script>
-  const container = document.querySelector('.format-bytes-overview');
-  const formatter = container.querySelector('wa-format-bytes');
-  const input = container.querySelector('wa-input');
-
-  input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => {
-  const [value, setValue] = useState(1000);
-
-  return (
-    <>
-      The file is <WaFormatBytes value={value} /> in size.
-      <br />
-      <br />
-      <WaInput
-        type="number"
-        value={value}
-        label="Number to Format"
-        style={{ maxWidth: '180px' }}
-        onWaInput={event => setValue(event.target.value)}
-      />
-    </>
-  );
-};
-```
-{% endraw %}
-
-## Examples
-
-### Formatting Bytes
-
-Set the `value` attribute to a number to get the value in bytes.
-
-```html {.example}
-<wa-format-bytes value="12"></wa-format-bytes><br />
-<wa-format-bytes value="1200"></wa-format-bytes><br />
-<wa-format-bytes value="1200000"></wa-format-bytes><br />
-<wa-format-bytes value="1200000000"></wa-format-bytes>
-```
-
-{% raw %}
-```jsx {.react}
-import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
-
-const App = () => (
-  <>
-    <WaFormatBytes value="12" />
-    <br />
-    <WaFormatBytes value="1200" />
-    <br />
-    <WaFormatBytes value="1200000" />
-    <br />
-    <WaFormatBytes value="1200000000" />
-  </>
-);
-```
-{% endraw %}
-
-### Formatting Bits
-
-To get the value in bits, set the `unit` attribute to `bit`.
-
-```html {.example}
-<wa-format-bytes value="12" unit="bit"></wa-format-bytes><br />
-<wa-format-bytes value="1200" unit="bit"></wa-format-bytes><br />
-<wa-format-bytes value="1200000" unit="bit"></wa-format-bytes><br />
-<wa-format-bytes value="1200000000" unit="bit"></wa-format-bytes>
-```
-
-{% raw %}
-```jsx {.react}
-import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
-
-const App = () => (
-  <>
-    <WaFormatBytes value="12" unit="bit" />
-    <br />
-    <WaFormatBytes value="1200" unit="bit" />
-    <br />
-    <WaFormatBytes value="1200000" unit="bit" />
-    <br />
-    <WaFormatBytes value="1200000000" unit="bit" />
-  </>
-);
-```
-{% endraw %}
-
-### Localization
-
-Use the `lang` attribute to set the number formatting locale.
-
-```html {.example}
-<wa-format-bytes value="12" lang="de"></wa-format-bytes><br />
-<wa-format-bytes value="1200" lang="de"></wa-format-bytes><br />
-<wa-format-bytes value="1200000" lang="de"></wa-format-bytes><br />
-<wa-format-bytes value="1200000000" lang="de"></wa-format-bytes>
-```
-
-{% raw %}
-```jsx {.react}
-import WaFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
-
-const App = () => (
-  <>
-    <WaFormatBytes value="12" lang="de" />
-    <br />
-    <WaFormatBytes value="1200" lang="de" />
-    <br />
-    <WaFormatBytes value="1200000" lang="de" />
-    <br />
-    <WaFormatBytes value="1200000000" lang="de" />
-  </>
-);
-```
-{% endraw %}

docs/docs/components/icon-button.md

@@ -1,160 +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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-
-const App = () => <WaIconButton name="gear" label="Settings" />;
-```
-{% endraw %}
-
-## 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-
-const App = () => (
-  <>
-    <WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '1.5rem' }} />
-    <WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '2rem' }} />
-    <WaIconButton name="pen-to-square" variant="solid" label="Edit" style={{ fontSize: '2.5rem' }} />
-  </>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-
-const css = `
-  .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;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="icon-button-color">
-      <WaIconButton name="type-bold" variant="solid" label="Bold" />
-      <WaIconButton name="type-italic" variant="solid" label="Italic" />
-      <WaIconButton name="type-underline" variant="solid" label="Underline" />
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-
-const App = () => <WaIconButton name="gear" variant="solid" label="Settings" href="https://example.com" target="_blank" />;
-```
-{% endraw %}
-
-### Icon Button with Tooltip
-
-Wrap a tooltip around an icon button to provide contextual information to the user.
-
-```html {.example}
-<wa-tooltip content="Settings">
-  <wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
-</wa-tooltip>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
-
-const App = () => (
-  <WaTooltip content="Settings">
-    <WaIconButton name="gear" variant="solid" label="Settings" />
-  </WaTooltip>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
-
-const App = () => <WaIconButton name="gear" variant="solid" label="Settings" disabled />;
-```
-{% endraw %}

docs/docs/components/icon.md

@@ -1,663 +0,0 @@
----
-title: Icon
-description: Icons are symbols that can be used to represent various options within an application.
-layout: component.njk
----
-
-Web Awesome comes bundled with over 1,500 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These icons are part of the `default` icon library. If you prefer, you can register [custom icon libraries](#icon-libraries) as well.
-
-:::info
-Depending on how you're loading Web Awesome, you may need to copy icon assets and/or [set the base path](/getting-started/installation/#setting-the-base-path) so Web Awesome knows where to load them from. Otherwise, icons may not appear and you'll see 404 Not Found errors in the dev console.
-:::
-
-## Default Icons
-
-All available icons in the `default` icon library are shown below. Click or tap on any icon to copy its name, then you can use it in your HTML like this.
-
-```html
-<wa-icon name="icon-name-here"></wa-icon>
-```
-
-## Examples
-
-TODO - show how to use `family` and `variant` attributes.
-TODO - show how to use FA pro via `data-webawesome-kit="..."`
-
-### Colors
-
-Icons inherit their color from the current text color. Thus, you can set the `color` property on the `<wa-icon>` element or an ancestor to change the color.
-
-```html {.example}
-<div style="color: #4a90e2;">
-  <wa-icon name="exclamation-triangle"></wa-icon>
-  <wa-icon name="archive"></wa-icon>
-  <wa-icon name="battery-three-quarters"></wa-icon>
-  <wa-icon name="bell"></wa-icon>
-</div>
-<div style="color: #9013fe;">
-  <wa-icon name="clock"></wa-icon>
-  <wa-icon name="cloud"></wa-icon>
-  <wa-icon name="download"></wa-icon>
-  <wa-icon name="file"></wa-icon>
-</div>
-<div style="color: #417505;">
-  <wa-icon name="flag"></wa-icon>
-  <wa-icon name="heart"></wa-icon>
-  <wa-icon name="image"></wa-icon>
-  <wa-icon name="bolt-lightning"></wa-icon>
-</div>
-<div style="color: #f5a623;">
-  <wa-icon name="microphone"></wa-icon>
-  <wa-icon name="search"></wa-icon>
-  <wa-icon name="star"></wa-icon>
-  <wa-icon name="trash"></wa-icon>
-</div>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-const App = () => (
-  <>
-    <div style={{ color: '#4a90e2' }}>
-      <WaIcon name="exclamation-triangle"></WaIcon>
-      <WaIcon name="archive"></WaIcon>
-      <WaIcon name="battery-three-quarters"></WaIcon>
-      <WaIcon name="bell"></WaIcon>
-    </div>
-    <div style={{ color: '#9013fe' }}>
-      <WaIcon name="clock"></WaIcon>
-      <WaIcon name="cloud"></WaIcon>
-      <WaIcon name="download"></WaIcon>
-      <WaIcon name="file"></WaIcon>
-    </div>
-    <div style={{ color: '#417505' }}>
-      <WaIcon name="flag"></WaIcon>
-      <WaIcon name="heart"></WaIcon>
-      <WaIcon name="image"></WaIcon>
-      <WaIcon name="bolt-lightning"></WaIcon>
-    </div>
-    <div style={{ color: '#f5a623' }}>
-      <WaIcon name="microphone"></WaIcon>
-      <WaIcon name="search"></WaIcon>
-      <WaIcon name="star"></WaIcon>
-      <WaIcon name="trash"></WaIcon>
-    </div>
-  </>
-);
-```
-{% endraw %}
-
-### Sizing
-
-Icons are sized relative to the current font size. To change their size, set the `font-size` property on the icon itself or on a parent element as shown below.
-
-```html {.example}
-<div style="font-size: 32px;">
-  <wa-icon name="exclamation-triangle"></wa-icon>
-  <wa-icon name="archive"></wa-icon>
-  <wa-icon name="battery-three-quarters"></wa-icon>
-  <wa-icon name="bell"></wa-icon>
-  <wa-icon name="clock"></wa-icon>
-  <wa-icon name="cloud"></wa-icon>
-  <wa-icon name="download"></wa-icon>
-  <wa-icon name="file"></wa-icon>
-  <wa-icon name="flag"></wa-icon>
-  <wa-icon name="heart"></wa-icon>
-  <wa-icon name="image"></wa-icon>
-  <wa-icon name="bolt-lightning"></wa-icon>
-  <wa-icon name="microphone"></wa-icon>
-  <wa-icon name="search"></wa-icon>
-  <wa-icon name="star"></wa-icon>
-  <wa-icon name="trash"></wa-icon>
-</div>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-const App = () => (
-  <div style={{ fontSize: '32px' }}>
-    <WaIcon name="exclamation-triangle" />
-    <WaIcon name="archive" />
-    <WaIcon name="battery-three-quarters" />
-    <WaIcon name="bell" />
-    <WaIcon name="clock" />
-    <WaIcon name="cloud" />
-    <WaIcon name="download" />
-    <WaIcon name="file" />
-    <WaIcon name="flag" />
-    <WaIcon name="heart" />
-    <WaIcon name="image" />
-    <WaIcon name="bolt-lightning" />
-    <WaIcon name="microphone" />
-    <WaIcon name="search" />
-    <WaIcon name="star" />
-    <WaIcon name="trash" />
-  </div>
-);
-```
-{% endraw %}
-
-### Labels
-
-For non-decorative icons, use the `label` attribute to announce it to assistive devices.
-
-```html {.example}
-<wa-icon name="star" label="Add to favorites"></wa-icon>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-const App = () => <WaIcon name="star" label="Add to favorites" />;
-```
-{% endraw %}
-
-### Custom Icons
-
-Custom icons can be loaded individually with the `src` attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a [custom icon library](#icon-libraries).
-
-```html {.example}
-<wa-icon src="https://shoelace.style/assets/images/shoe.svg" style="font-size: 8rem;"></wa-icon>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-const App = () => <WaIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></WaIcon>;
-```
-{% endraw %}
-
-## Icon Libraries
-
-You can register additional icons to use with the `<wa-icon>` component through icon libraries. Icon files can exist locally or on a CORS-enabled endpoint (e.g. a CDN). There is no limit to how many icon libraries you can register and there is no cost associated with registering them, as individual icons are only requested when they're used.
-
-Web Awesome ships with two built-in icon libraries, `default` and `system`. The [default icon library](#customizing-the-default-library) contains all of the icons in the Bootstrap Icons project. The [system icon library](#customizing-the-system-library) contains only a small subset of icons that are used internally by Web Awesome components.
-
-To register an additional icon library, use the `registerIconLibrary()` function that's exported from `utilities/icon-library.js`. At a minimum, you must provide a name and a resolver function. The resolver function translates an icon name to a URL where the corresponding SVG file exists. Refer to the examples below to better understand how it works.
-
-If necessary, a mutator function can be used to mutate the SVG element before rendering. This is necessary for some libraries due to the many possible ways SVGs are crafted. For example, icons should ideally inherit the current text color via `currentColor`, so you may need to apply `fill="currentColor` or `stroke="currentColor"` to the SVG element using this function.
-
-Here's an example that registers an icon library located in the `/assets/icons` directory.
-
-```html
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('my-icons', {
-    resolver: name => `/assets/icons/${name}.svg`,
-    mutator: svg => svg.setAttribute('fill', 'currentColor')
-  });
-</script>
-```
-
-To display an icon, set the `library` and `name` attributes of an `<wa-icon>` element.
-
-```html
-<!-- This will show the icon located at /assets/icons/smile.svg -->
-<wa-icon library="my-icons" name="smile"></wa-icon>
-```
-
-If an icon is used before registration occurs, it will be empty initially but shown when registered.
-
-The following examples demonstrate how to register a number of popular, open source icon libraries via CDN. Feel free to adapt the code as you see fit to use your own origin or naming conventions.
-
-### Boxicons
-
-This will register the [Boxicons](https://boxicons.com/) library using the jsDelivr CDN. This library has three variations: regular (`bx-*`), solid (`bxs-*`), and logos (`bxl-*`). A mutator function is required to set the SVG's `fill` to `currentColor`.
-
-Icons in this library are licensed under the [Creative Commons 4.0 License](https://github.com/atisawd/boxicons#license).
-
-```html {.example}
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('boxicons', {
-    resolver: name => {
-      let folder = 'regular';
-      if (name.substring(0, 4) === 'bxs-') folder = 'solid';
-      if (name.substring(0, 4) === 'bxl-') folder = 'logos';
-      return `https://cdn.jsdelivr.net/npm/boxicons@2.0.5/svg/${folder}/${name}.svg`;
-    },
-    mutator: svg => svg.setAttribute('fill', 'currentColor')
-  });
-</script>
-
-<div style="font-size: 24px;">
-  <wa-icon library="boxicons" name="bx-bot"></wa-icon>
-  <wa-icon library="boxicons" name="bx-cookie"></wa-icon>
-  <wa-icon library="boxicons" name="bx-joystick"></wa-icon>
-  <wa-icon library="boxicons" name="bx-save"></wa-icon>
-  <wa-icon library="boxicons" name="bx-server"></wa-icon>
-  <wa-icon library="boxicons" name="bx-wine"></wa-icon>
-  <br />
-  <wa-icon library="boxicons" name="bxs-bot"></wa-icon>
-  <wa-icon library="boxicons" name="bxs-cookie"></wa-icon>
-  <wa-icon library="boxicons" name="bxs-joystick"></wa-icon>
-  <wa-icon library="boxicons" name="bxs-save"></wa-icon>
-  <wa-icon library="boxicons" name="bxs-server"></wa-icon>
-  <wa-icon library="boxicons" name="bxs-wine"></wa-icon>
-  <br />
-  <wa-icon library="boxicons" name="bxl-apple"></wa-icon>
-  <wa-icon library="boxicons" name="bxl-chrome"></wa-icon>
-  <wa-icon library="boxicons" name="bxl-edge"></wa-icon>
-  <wa-icon library="boxicons" name="bxl-firefox"></wa-icon>
-  <wa-icon library="boxicons" name="bxl-opera"></wa-icon>
-  <wa-icon library="boxicons" name="bxl-microsoft"></wa-icon>
-</div>
-```
-
-### Lucide
-
-This will register the [Lucide](https://lucide.dev/) icon library using the jsDelivr CDN. This project is a community-maintained fork of the popular [Feather](https://feathericons.com/) icon library.
-
-Icons in this library are licensed under the [MIT License](https://github.com/lucide-icons/lucide/blob/master/LICENSE).
-
-```html {.example}
-<div style="font-size: 24px;">
-  <wa-icon library="lucide" name="feather"></wa-icon>
-  <wa-icon library="lucide" name="pie-chart"></wa-icon>
-  <wa-icon library="lucide" name="settings"></wa-icon>
-  <wa-icon library="lucide" name="map-pin"></wa-icon>
-  <wa-icon library="lucide" name="printer"></wa-icon>
-  <wa-icon library="lucide" name="shopping-cart"></wa-icon>
-</div>
-
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('lucide', {
-    resolver: name => `https://cdn.jsdelivr.net/npm/lucide-static@0.16.29/icons/${name}.svg`
-  });
-</script>
-```
-
-### Font Awesome
-
-This will register the [Font Awesome Free](https://fontawesome.com/) library using the jsDelivr CDN. This library has three variations: regular (`far-*`), solid (`fas-*`), and brands (`fab-*`). A mutator function is required to set the SVG's `fill` to `currentColor`.
-
-Icons in this library are licensed under the [Font Awesome Free License](https://github.com/FortAwesome/Font-Awesome/blob/master/LICENSE.txt). Some of the icons that appear on the Font Awesome website require a license and are therefore not available in the CDN.
-
-```html {.example}
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('fa', {
-    resolver: name => {
-      const filename = name.replace(/^fa[rbs]-/, '');
-      let folder = 'regular';
-      if (name.substring(0, 4) === 'fas-') folder = 'solid';
-      if (name.substring(0, 4) === 'fab-') folder = 'brands';
-      return `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/svgs/${folder}/${filename}.svg`;
-    },
-    mutator: svg => svg.setAttribute('fill', 'currentColor')
-  });
-</script>
-
-<div style="font-size: 24px;">
-  <wa-icon library="fa" name="far-bell"></wa-icon>
-  <wa-icon library="fa" name="far-comment"></wa-icon>
-  <wa-icon library="fa" name="far-hand-point-right"></wa-icon>
-  <wa-icon library="fa" name="far-hdd"></wa-icon>
-  <wa-icon library="fa" name="far-heart"></wa-icon>
-  <wa-icon library="fa" name="far-star"></wa-icon>
-  <br />
-  <wa-icon library="fa" name="fas-archive"></wa-icon>
-  <wa-icon library="fa" name="fas-book"></wa-icon>
-  <wa-icon library="fa" name="fas-chess-knight"></wa-icon>
-  <wa-icon library="fa" name="fas-dice"></wa-icon>
-  <wa-icon library="fa" name="fas-pizza-slice"></wa-icon>
-  <wa-icon library="fa" name="fas-scroll"></wa-icon>
-  <br />
-  <wa-icon library="fa" name="fab-apple"></wa-icon>
-  <wa-icon library="fa" name="fab-chrome"></wa-icon>
-  <wa-icon library="fa" name="fab-edge"></wa-icon>
-  <wa-icon library="fa" name="fab-firefox"></wa-icon>
-  <wa-icon library="fa" name="fab-opera"></wa-icon>
-  <wa-icon library="fa" name="fab-microsoft"></wa-icon>
-</div>
-```
-
-### Heroicons
-
-This will register the [Heroicons](https://heroicons.com/) library using the jsDelivr CDN.
-
-Icons in this library are licensed under the [MIT License](https://github.com/tailwindlabs/heroicons/blob/master/LICENSE).
-
-```html {.example}
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('heroicons', {
-    resolver: name => `https://cdn.jsdelivr.net/npm/heroicons@2.0.1/24/outline/${name}.svg`
-  });
-</script>
-
-<div style="font-size: 24px;">
-  <wa-icon library="heroicons" name="chat-bubble-left"></wa-icon>
-  <wa-icon library="heroicons" name="cloud"></wa-icon>
-  <wa-icon library="heroicons" name="cog"></wa-icon>
-  <wa-icon library="heroicons" name="document-text"></wa-icon>
-  <wa-icon library="heroicons" name="gift"></wa-icon>
-  <wa-icon library="heroicons" name="speaker-wave"></wa-icon>
-</div>
-```
-
-### Iconoir
-
-This will register the [Iconoir](https://iconoir.com/) library using the jsDelivr CDN.
-
-Icons in this library are licensed under the [MIT License](https://github.com/lucaburgio/iconoir/blob/master/LICENSE).
-
-```html {.example}
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('iconoir', {
-    resolver: name => `https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@latest/icons/${name}.svg`
-  });
-</script>
-
-<div style="font-size: 24px;">
-  <wa-icon library="iconoir" name="check-circled-outline"></wa-icon>
-  <wa-icon library="iconoir" name="drawer"></wa-icon>
-  <wa-icon library="iconoir" name="keyframes"></wa-icon>
-  <wa-icon library="iconoir" name="headset-help"></wa-icon>
-  <wa-icon library="iconoir" name="color-picker"></wa-icon>
-  <wa-icon library="iconoir" name="wifi"></wa-icon>
-</div>
-```
-
-### Ionicons
-
-This will register the [Ionicons](https://ionicons.com/) library using the jsDelivr CDN. This library has three variations: outline (default), filled (`*-filled`), and sharp (`*-sharp`). A mutator function is required to polyfill a handful of styles we're not including.
-
-Icons in this library are licensed under the [MIT License](https://github.com/ionic-team/ionicons/blob/master/LICENSE).
-
-```html {.example}
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('ionicons', {
-    resolver: name => `https://cdn.jsdelivr.net/npm/ionicons@5.1.2/dist/ionicons/svg/${name}.svg`,
-    mutator: svg => {
-      svg.setAttribute('fill', 'currentColor');
-      svg.setAttribute('stroke', 'currentColor');
-      [...svg.querySelectorAll('.ionicon-fill-none')].map(el => el.setAttribute('fill', 'none'));
-      [...svg.querySelectorAll('.ionicon-stroke-width')].map(el => el.setAttribute('stroke-width', '32px'));
-    }
-  });
-</script>
-
-<div style="font-size: 24px;">
-  <wa-icon library="ionicons" name="alarm"></wa-icon>
-  <wa-icon library="ionicons" name="american-football"></wa-icon>
-  <wa-icon library="ionicons" name="bug"></wa-icon>
-  <wa-icon library="ionicons" name="chatbubble"></wa-icon>
-  <wa-icon library="ionicons" name="settings"></wa-icon>
-  <wa-icon library="ionicons" name="warning"></wa-icon>
-  <br />
-  <wa-icon library="ionicons" name="alarm-outline"></wa-icon>
-  <wa-icon library="ionicons" name="american-football-outline"></wa-icon>
-  <wa-icon library="ionicons" name="bug-outline"></wa-icon>
-  <wa-icon library="ionicons" name="chatbubble-outline"></wa-icon>
-  <wa-icon library="ionicons" name="settings-outline"></wa-icon>
-  <wa-icon library="ionicons" name="warning-outline"></wa-icon>
-  <br />
-  <wa-icon library="ionicons" name="alarm-sharp"></wa-icon>
-  <wa-icon library="ionicons" name="american-football-sharp"></wa-icon>
-  <wa-icon library="ionicons" name="bug-sharp"></wa-icon>
-  <wa-icon library="ionicons" name="chatbubble-sharp"></wa-icon>
-  <wa-icon library="ionicons" name="settings-sharp"></wa-icon>
-  <wa-icon library="ionicons" name="warning-sharp"></wa-icon>
-</div>
-```
-
-### Jam Icons
-
-This will register the [Jam Icons](https://jam-icons.com/) library using the jsDelivr CDN. This library has two variations: regular (default) and filled (`*-f`). A mutator function is required to set the SVG's `fill` to `currentColor`.
-
-Icons in this library are licensed under the [MIT License](https://github.com/michaelampr/jam/blob/master/LICENSE).
-
-```html {.example}
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('jam', {
-    resolver: name => `https://cdn.jsdelivr.net/npm/jam-icons@2.0.0/svg/${name}.svg`,
-    mutator: svg => svg.setAttribute('fill', 'currentColor')
-  });
-</script>
-
-<div style="font-size: 24px;">
-  <wa-icon library="jam" name="calendar"></wa-icon>
-  <wa-icon library="jam" name="camera"></wa-icon>
-  <wa-icon library="jam" name="filter"></wa-icon>
-  <wa-icon library="jam" name="leaf"></wa-icon>
-  <wa-icon library="jam" name="picture"></wa-icon>
-  <wa-icon library="jam" name="set-square"></wa-icon>
-  <br />
-  <wa-icon library="jam" name="calendar-f"></wa-icon>
-  <wa-icon library="jam" name="camera-f"></wa-icon>
-  <wa-icon library="jam" name="filter-f"></wa-icon>
-  <wa-icon library="jam" name="leaf-f"></wa-icon>
-  <wa-icon library="jam" name="picture-f"></wa-icon>
-  <wa-icon library="jam" name="set-square-f"></wa-icon>
-</div>
-```
-
-### Material Icons
-
-This will register the [Material Icons](https://material.io/resources/icons/?style=baseline) library using the jsDelivr CDN. This library has three variations: outline (default), round (`*_round`), and sharp (`*_sharp`). A mutator function is required to set the SVG's `fill` to `currentColor`.
-
-Icons in this library are licensed under the [Apache 2.0 License](https://github.com/google/material-design-icons/blob/master/LICENSE).
-
-```html {.example}
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('material', {
-    resolver: name => {
-      const match = name.match(/^(.*?)(_(round|sharp))?$/);
-      return `https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.5/svg/${match[1]}/${match[3] || 'outline'}.svg`;
-    },
-    mutator: svg => svg.setAttribute('fill', 'currentColor')
-  });
-</script>
-
-<div style="font-size: 24px;">
-  <wa-icon library="material" name="notifications"></wa-icon>
-  <wa-icon library="material" name="email"></wa-icon>
-  <wa-icon library="material" name="delete"></wa-icon>
-  <wa-icon library="material" name="volume_up"></wa-icon>
-  <wa-icon library="material" name="settings"></wa-icon>
-  <wa-icon library="material" name="shopping_basket"></wa-icon>
-  <br />
-  <wa-icon library="material" name="notifications_round"></wa-icon>
-  <wa-icon library="material" name="email_round"></wa-icon>
-  <wa-icon library="material" name="delete_round"></wa-icon>
-  <wa-icon library="material" name="volume_up_round"></wa-icon>
-  <wa-icon library="material" name="settings_round"></wa-icon>
-  <wa-icon library="material" name="shopping_basket_round"></wa-icon>
-  <br />
-  <wa-icon library="material" name="notifications_sharp"></wa-icon>
-  <wa-icon library="material" name="email_sharp"></wa-icon>
-  <wa-icon library="material" name="delete_sharp"></wa-icon>
-  <wa-icon library="material" name="volume_up_sharp"></wa-icon>
-  <wa-icon library="material" name="settings_sharp"></wa-icon>
-  <wa-icon library="material" name="shopping_basket_sharp"></wa-icon>
-</div>
-```
-
-### Remix Icon
-
-This will register the [Remix Icon](https://remixicon.com/) library using the jsDelivr CDN. This library groups icons by categories, so the name must include the category and icon separated by a slash, as well as the `-line` or `-fill` suffix as needed. A mutator function is required to set the SVG's `fill` to `currentColor`.
-
-Icons in this library are licensed under the [Apache 2.0 License](https://github.com/Remix-Design/RemixIcon/blob/master/License).
-
-```html {.example}
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('remixicon', {
-    resolver: name => {
-      const match = name.match(/^(.*?)\/(.*?)?$/);
-      match[1] = match[1].charAt(0).toUpperCase() + match[1].slice(1);
-      return `https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/${match[1]}/${match[2]}.svg`;
-    },
-    mutator: svg => svg.setAttribute('fill', 'currentColor')
-  });
-</script>
-
-<div style="font-size: 24px;">
-  <wa-icon library="remixicon" name="business/cloud-line"></wa-icon>
-  <wa-icon library="remixicon" name="design/brush-line"></wa-icon>
-  <wa-icon library="remixicon" name="business/pie-chart-line"></wa-icon>
-  <wa-icon library="remixicon" name="development/bug-line"></wa-icon>
-  <wa-icon library="remixicon" name="media/image-line"></wa-icon>
-  <wa-icon library="remixicon" name="system/alert-line"></wa-icon>
-  <br />
-  <wa-icon library="remixicon" name="business/cloud-fill"></wa-icon>
-  <wa-icon library="remixicon" name="design/brush-fill"></wa-icon>
-  <wa-icon library="remixicon" name="business/pie-chart-fill"></wa-icon>
-  <wa-icon library="remixicon" name="development/bug-fill"></wa-icon>
-  <wa-icon library="remixicon" name="media/image-fill"></wa-icon>
-  <wa-icon library="remixicon" name="system/alert-fill"></wa-icon>
-</div>
-```
-
-### Tabler Icons
-
-This will register the [Tabler Icons](https://tabler-icons.io/) library using the jsDelivr CDN. This library features over 1,950 open source icons.
-
-Icons in this library are licensed under the [MIT License](https://github.com/tabler/tabler-icons/blob/master/LICENSE).
-
-```html {.example}
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('tabler', {
-    resolver: name => `https://cdn.jsdelivr.net/npm/@tabler/icons@1.68.0/icons/${name}.svg`
-  });
-</script>
-
-<div style="font-size: 24px;">
-  <wa-icon library="tabler" name="alert-triangle"></wa-icon>
-  <wa-icon library="tabler" name="arrow-back"></wa-icon>
-  <wa-icon library="tabler" name="at"></wa-icon>
-  <wa-icon library="tabler" name="ball-baseball"></wa-icon>
-  <wa-icon library="tabler" name="cake"></wa-icon>
-  <wa-icon library="tabler" name="files"></wa-icon>
-  <br />
-  <wa-icon library="tabler" name="keyboard"></wa-icon>
-  <wa-icon library="tabler" name="moon"></wa-icon>
-  <wa-icon library="tabler" name="pig"></wa-icon>
-  <wa-icon library="tabler" name="printer"></wa-icon>
-  <wa-icon library="tabler" name="ship"></wa-icon>
-  <wa-icon library="tabler" name="toilet-paper"></wa-icon>
-</div>
-```
-
-### Unicons
-
-This will register the [Unicons](https://iconscout.com/unicons) library using the jsDelivr CDN. This library has two variations: line (default) and solid (`*-s`). A mutator function is required to set the SVG's `fill` to `currentColor`.
-
-Icons in this library are licensed under the [Apache 2.0 License](https://github.com/Iconscout/unicons/blob/master/LICENSE). Some of the icons that appear on the Unicons website, particularly many of the solid variations, require a license and are therefore not available in the CDN.
-
-```html {.example}
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('unicons', {
-    resolver: name => {
-      const match = name.match(/^(.*?)(-s)?$/);
-      return `https://cdn.jsdelivr.net/npm/@iconscout/unicons@3.0.3/svg/${match[2] === '-s' ? 'solid' : 'line'}/${
-        match[1]
-      }.svg`;
-    },
-    mutator: svg => svg.setAttribute('fill', 'currentColor')
-  });
-</script>
-
-<div style="font-size: 24px;">
-  <wa-icon library="unicons" name="clock"></wa-icon>
-  <wa-icon library="unicons" name="graph-bar"></wa-icon>
-  <wa-icon library="unicons" name="padlock"></wa-icon>
-  <wa-icon library="unicons" name="polygon"></wa-icon>
-  <wa-icon library="unicons" name="rocket"></wa-icon>
-  <wa-icon library="unicons" name="star"></wa-icon>
-  <br />
-  <wa-icon library="unicons" name="clock-s"></wa-icon>
-  <wa-icon library="unicons" name="graph-bar-s"></wa-icon>
-  <wa-icon library="unicons" name="padlock-s"></wa-icon>
-  <wa-icon library="unicons" name="polygon-s"></wa-icon>
-  <wa-icon library="unicons" name="rocket-s"></wa-icon>
-  <wa-icon library="unicons" name="star-s"></wa-icon>
-</div>
-```
-
-### Customizing the Default Library
-
-The default icon library contains over 1,300 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These are the icons that display when you use `<wa-icon>` without the `library` attribute. If you prefer to have these icons resolve elsewhere or to a different icon library, register an icon library using the `default` name and a custom resolver.
-
-This example will load the same set of icons from the jsDelivr CDN instead of your local assets folder.
-
-```html
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('default', {
-    resolver: name => `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.0.0/icons/${name}.svg`
-  });
-</script>
-```
-
-#### Customize the default library to use SVG sprites
-
-To improve performance you can use a SVG sprites to avoid multiple trips for each SVG. The browser will load the sprite sheet once and then you reference the particular SVG within the sprite sheet using hash selector.
-
-As always, make sure to benchmark these changes. When using HTTP/2, it may in fact be more bandwidth-friendly to use multiple small requests instead of 1 large sprite sheet.
-
-:::danger
-When using sprite sheets, the `wa-load` and `wa-error` events will not fire.
-
-For security reasons, browsers may apply the same-origin policy on `<use>` elements located in the `<wa-icon>` shadow DOM and may refuse to load a cross-origin URL. There is currently no defined way to set a cross-origin policy for `<use>` elements. For this reason, sprite sheets should only be used if you're self-hosting them.
-:::
-
-```html {.example}
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('sprite', {
-    resolver: name => `/assets/images/sprite.svg#${name}`,
-    mutator: svg => svg.setAttribute('fill', 'currentColor'),
-    spriteSheet: true
-  });
-</script>
-
-<div style="font-size: 24px;">
-  <wa-icon library="sprite" name="clock"></wa-icon>
-  <wa-icon library="sprite" name="speedometer"></wa-icon>
-</div>
-```
-
-### Customizing the System Library
-
-The system library contains only the icons used internally by Web Awesome components. Unlike the default icon library, the system library does not rely on physical assets. Instead, its icons are hard-coded as data URIs into the resolver to ensure their availability.
-
-If you want to change the icons Web Awesome uses internally, you can register an icon library using the `system` name and a custom resolver. If you choose to do this, it's your responsibility to provide all of the icons that are required by components. You can reference `src/components/library.system.ts` for a complete list of system icons used by Web Awesome.
-
-```html
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('system', {
-    resolver: name => `/path/to/custom/icons/${name}.svg`
-  });
-</script>
-```

docs/docs/components/image-comparer.md

@@ -1,85 +0,0 @@
----
-title: Image Comparer
-description: Compare visual differences between similar photos with a sliding panel.
-layout: component.njk
----
-
-For best results, use images that share the same dimensions. The slider can be controlled by dragging or pressing the left and right arrow keys. (Tip: press shift + arrows to move the slider in larger intervals, or home + end to jump to the beginning or end.)
-
-```html {.example}
-<wa-image-comparer>
-  <img
-    slot="before"
-    src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5"
-    alt="Grayscale version of kittens in a basket looking around."
-  />
-  <img
-    slot="after"
-    src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
-    alt="Color version of kittens in a basket looking around."
-  />
-</wa-image-comparer>
-```
-
-{% raw %}
-```jsx {.react}
-import WaImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';
-
-const App = () => (
-  <WaImageComparer>
-    <img
-      slot="before"
-      src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5"
-      alt="Grayscale version of kittens in a basket looking around."
-    />
-    <img
-      slot="after"
-      src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
-      alt="Color version of kittens in a basket looking around."
-    />
-  </WaImageComparer>
-);
-```
-{% endraw %}
-
-## Examples
-
-### Initial Position
-
-Use the `position` attribute to set the initial position of the slider. This is a percentage from `0` to `100`.
-
-```html {.example}
-<wa-image-comparer position="25">
-  <img
-    slot="before"
-    src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80"
-    alt="A person sitting on bricks wearing untied boots."
-  />
-  <img
-    slot="after"
-    src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
-    alt="A person sitting on a yellow curb tying shoelaces on a boot."
-  />
-</wa-image-comparer>
-```
-
-{% raw %}
-```jsx {.react}
-import WaImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';
-
-const App = () => (
-  <WaImageComparer position={25}>
-    <img
-      slot="before"
-      src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80"
-      alt="A person sitting on bricks wearing untied boots."
-    />
-    <img
-      slot="after"
-      src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
-      alt="A person sitting on a yellow curb tying shoelaces on a boot."
-    />
-  </WaImageComparer>
-);
-```
-{% endraw %}

docs/docs/components/input.md

@@ -1,304 +0,0 @@
----
-title: Input
-description: Inputs collect data from the user.
-layout: component.njk
----
-
-```html {.example}
-<form><wa-input></wa-input></form>
-```
-
-{% raw %}
-```jsx {.react}
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => <WaInput />;
-```
-{% endraw %}
-
-:::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
-
-### Labels
-
-Use the `label` attribute to give the input an accessible label. For labels that contain HTML, use the `label` slot instead.
-
-```html {.example}
-<wa-input label="What is your name?"></wa-input>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => <WaInput label="What is your name?" />;
-```
-{% endraw %}
-
-### Help Text
-
-Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
-
-```html {.example}
-<wa-input label="Nickname" help-text="What would you like people to call you?"></wa-input>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => <WaInput label="Nickname" help-text="What would you like people to call you?" />;
-```
-{% endraw %}
-
-### Placeholders
-
-Use the `placeholder` attribute to add a placeholder.
-
-```html {.example}
-<wa-input placeholder="Type something"></wa-input>
-```
-
-{% raw %}
-```jsx {.react}
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => <WaInput placeholder="Type something" />;
-```
-{% endraw %}
-
-### Clearable
-
-Add the `clearable` attribute to add a clear button when the input has content.
-
-```html {.example}
-<wa-input placeholder="Clearable" clearable></wa-input>
-```
-
-{% raw %}
-```jsx {.react}
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => <WaInput placeholder="Clearable" clearable />;
-```
-{% endraw %}
-
-### Toggle Password
-
-Add the `password-toggle` attribute to add a toggle button that will show the password when activated.
-
-```html {.example}
-<wa-input type="password" placeholder="Password Toggle" password-toggle></wa-input>
-```
-
-{% raw %}
-```jsx {.react}
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => <WaInput type="password" placeholder="Password Toggle" size="medium" password-toggle />;
-```
-{% endraw %}
-
-### Filled Inputs
-
-Add the `filled` attribute to draw a filled input.
-
-```html {.example}
-<wa-input placeholder="Type something" filled></wa-input>
-```
-
-{% raw %}
-```jsx {.react}
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => <WaInput placeholder="Type something" filled />;
-```
-{% endraw %}
-
-### Disabled
-
-Use the `disabled` attribute to disable an input.
-
-```html {.example}
-<wa-input placeholder="Disabled" disabled></wa-input>
-```
-
-{% raw %}
-```jsx {.react}
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => <WaInput placeholder="Disabled" disabled />;
-```
-{% endraw %}
-
-### Sizes
-
-Use the `size` attribute to change an input's size.
-
-```html {.example}
-<wa-input placeholder="Small" size="small"></wa-input>
-<br />
-<wa-input placeholder="Medium" size="medium"></wa-input>
-<br />
-<wa-input placeholder="Large" size="large"></wa-input>
-```
-
-{% raw %}
-```jsx {.react}
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => (
-  <>
-    <WaInput placeholder="Small" size="small" />
-    <br />
-    <WaInput placeholder="Medium" size="medium" />
-    <br />
-    <WaInput placeholder="Large" size="large" />
-  </>
-);
-```
-{% endraw %}
-
-### Pill
-
-Use the `pill` attribute to give inputs rounded edges.
-
-```html {.example}
-<wa-input placeholder="Small" size="small" pill></wa-input>
-<br />
-<wa-input placeholder="Medium" size="medium" pill></wa-input>
-<br />
-<wa-input placeholder="Large" size="large" pill></wa-input>
-```
-
-{% raw %}
-```jsx {.react}
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => (
-  <>
-    <WaInput placeholder="Small" size="small" pill />
-    <br />
-    <WaInput placeholder="Medium" size="medium" pill />
-    <br />
-    <WaInput placeholder="Large" size="large" pill />
-  </>
-);
-```
-{% endraw %}
-
-### Input Types
-
-The `type` attribute controls the type of input the browser renders.
-
-```html {.example}
-<wa-input type="email" placeholder="Email"></wa-input>
-<br />
-<wa-input type="number" placeholder="Number"></wa-input>
-<br />
-<wa-input type="date" placeholder="Date"></wa-input>
-```
-
-{% raw %}
-```jsx {.react}
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => (
-  <>
-    <WaInput type="email" placeholder="Email" />
-    <br />
-    <WaInput type="number" placeholder="Number" />
-    <br />
-    <WaInput type="date" placeholder="Date" />
-  </>
-);
-```
-{% endraw %}
-
-### Prefix & Suffix Icons
-
-Use the `prefix` and `suffix` slots to add icons.
-
-```html {.example}
-<wa-input placeholder="Small" size="small">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
-</wa-input>
-<br />
-<wa-input placeholder="Medium" size="medium">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
-</wa-input>
-<br />
-<wa-input placeholder="Large" size="large">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
-</wa-input>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-import WaInput from '@shoelace-style/shoelace/dist/react/input';
-
-const App = () => (
-  <>
-    <WaInput placeholder="Small" size="small">
-      <WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
-      <WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
-    </WaInput>
-    <br />
-    <WaInput placeholder="Medium" size="medium">
-      <WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
-      <WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
-    </WaInput>
-    <br />
-    <WaInput placeholder="Large" size="large">
-      <WaIcon name="house" variant="solid" slot="prefix"></WaIcon>
-      <WaIcon name="comment" variant="solid" slot="suffix"></WaIcon>
-    </WaInput>
-  </>
-);
-```
-{% endraw %}
-
-### Customizing Label Position
-
-Use [CSS parts](#css-parts) to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls.
-
-```html {.example}
-<wa-input class="label-on-left" label="Name" help-text="Enter your name"></wa-input>
-<wa-input class="label-on-left" label="Email" type="email" help-text="Enter your email"></wa-input>
-<wa-textarea class="label-on-left" label="Bio" help-text="Tell us something about yourself"></wa-textarea>
-
-<style>
-  .label-on-left {
-    --label-width: 3.75rem;
-    --gap-width: 1rem;
-  }
-
-  .label-on-left + .label-on-left {
-    margin-top: var(--wa-space-m);
-  }
-
-  .label-on-left::part(form-control) {
-    display: grid;
-    grid: auto / var(--label-width) 1fr;
-    gap: var(--wa-space-3xs) var(--gap-width);
-    align-items: center;
-  }
-
-  .label-on-left::part(form-control-label) {
-    text-align: right;
-  }
-
-  .label-on-left::part(form-control-help-text) {
-    grid-column-start: 2;
-  }
-</style>
-```

docs/docs/components/menu-item.md

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

docs/docs/components/menu-label.md

@@ -1,42 +0,0 @@
----
-title: Menu Label
-description: Menu labels are used to describe a group of menu items.
-layout: component.njk
----
-
-```html {.example}
-<wa-menu style="max-width: 200px;">
-  <wa-menu-label>Fruits</wa-menu-label>
-  <wa-menu-item value="apple">Apple</wa-menu-item>
-  <wa-menu-item value="banana">Banana</wa-menu-item>
-  <wa-menu-item value="orange">Orange</wa-menu-item>
-  <wa-divider></wa-divider>
-  <wa-menu-label>Vegetables</wa-menu-label>
-  <wa-menu-item value="broccoli">Broccoli</wa-menu-item>
-  <wa-menu-item value="carrot">Carrot</wa-menu-item>
-  <wa-menu-item value="zucchini">Zucchini</wa-menu-item>
-</wa-menu>
-```
-
-{% raw %}
-```jsx {.react}
-import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
-import WaMenu from '@shoelace-style/shoelace/dist/react/menu';
-import WaMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';
-import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
-
-const App = () => (
-  <WaMenu style={{ maxWidth: '200px' }}>
-    <WaMenuLabel>Fruits</WaMenuLabel>
-    <WaMenuItem value="apple">Apple</WaMenuItem>
-    <WaMenuItem value="banana">Banana</WaMenuItem>
-    <WaMenuItem value="orange">Orange</WaMenuItem>
-    <WaDivider />
-    <WaMenuLabel>Vegetables</WaMenuLabel>
-    <WaMenuItem value="broccoli">Broccoli</WaMenuItem>
-    <WaMenuItem value="carrot">Carrot</WaMenuItem>
-    <WaMenuItem value="zucchini">Zucchini</WaMenuItem>
-  </WaMenu>
-);
-```
-{% endraw %}

docs/docs/components/menu.md

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

docs/docs/components/option.md

@@ -1,85 +0,0 @@
----
-title: Option
-description: Options define the selectable items within various form controls such as select.
-layout: component.njk
----
-
-```html {.example}
-<wa-select label="Select one">
-  <wa-option value="option-1">Option 1</wa-option>
-  <wa-option value="option-2">Option 2</wa-option>
-  <wa-option value="option-3">Option 3</wa-option>
-</wa-select>
-```
-
-{% raw %}
-```jsx {.react}
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
-
-const App = () => (
-  <WaSelect>
-    <WaOption value="option-1">Option 1</WaOption>
-    <WaOption value="option-2">Option 2</WaOption>
-    <WaOption value="option-3">Option 3</WaOption>
-  </WaSelect>
-);
-```
-{% endraw %}
-
-## Examples
-
-### Disabled
-
-Use the `disabled` attribute to disable an option and prevent it from being selected.
-
-```html {.example}
-<wa-select label="Select one">
-  <wa-option value="option-1">Option 1</wa-option>
-  <wa-option value="option-2" disabled>Option 2</wa-option>
-  <wa-option value="option-3">Option 3</wa-option>
-</wa-select>
-```
-
-{% raw %}
-```jsx {.react}
-import WaOption from '@shoelace-style/shoelace/dist/react/option';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
-
-const App = () => (
-  <WaSelect>
-    <WaOption value="option-1">Option 1</WaOption>
-    <WaOption value="option-2" disabled>
-      Option 2
-    </WaOption>
-    <WaOption value="option-3">Option 3</WaOption>
-  </WaSelect>
-);
-```
-{% endraw %}
-
-### Prefix & Suffix
-
-Add icons to the start and end of menu items using the `prefix` and `suffix` slots.
-
-```html {.example}
-<wa-select label="Select one">
-  <wa-option value="option-1">
-    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
-    Email
-    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
-  </wa-option>
-
-  <wa-option value="option-2">
-    <wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
-    Phone
-    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
-  </wa-option>
-
-  <wa-option value="option-3">
-    <wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
-    Chat
-    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
-  </wa-option>
-</wa-select>
-```

docs/docs/components/page.md

@@ -1,118 +0,0 @@
----
-title: Page
-description: Layouts offer an easy way to scaffold pages using minimal markup.
-layout: 'component.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/progress-bar.md

@@ -1,134 +0,0 @@
----
-title: Progress Bar
-description: Progress bars are used to show the status of an ongoing operation.
-layout: component.njk
----
-
-```html {.example}
-<wa-progress-bar value="50"></wa-progress-bar>
-```
-
-{% raw %}
-```jsx {.react}
-import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
-
-const App = () => <WaProgressBar value={50} />;
-```
-{% endraw %}
-
-## Examples
-
-### Labels
-
-Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.
-
-```html {.example}
-<wa-progress-bar value="50" label="Upload progress"></wa-progress-bar>
-```
-
-{% raw %}
-```jsx {.react}
-import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
-
-const App = () => <WaProgressBar value="50" label="Upload progress" />;
-```
-{% endraw %}
-
-### Custom Height
-
-Use the `--height` custom property to set the progress bar's height.
-
-```html {.example}
-<wa-progress-bar value="50" style="--height: 6px;"></wa-progress-bar>
-```
-
-{% raw %}
-```jsx {.react}
-import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
-
-const App = () => <WaProgressBar value={50} style={{ '--height': '6px' }} />;
-```
-{% endraw %}
-
-### Showing Values
-
-Use the default slot to show a value.
-
-```html {.example}
-<wa-progress-bar value="50" class="progress-bar-values">50%</wa-progress-bar>
-
-<br />
-
-<wa-button circle><wa-icon name="minus" variant="solid" label="Decrease"></wa-icon></wa-button>
-<wa-button circle><wa-icon name="plus" variant="solid" label="Increase"></wa-icon></wa-button>
-
-<script>
-  const progressBar = document.querySelector('.progress-bar-values');
-  const subtractButton = progressBar.nextElementSibling.nextElementSibling;
-  const addButton = subtractButton.nextElementSibling;
-
-  addButton.addEventListener('click', () => {
-    const value = Math.min(100, progressBar.value + 10);
-    progressBar.value = value;
-    progressBar.textContent = `${value}%`;
-  });
-
-  subtractButton.addEventListener('click', () => {
-    const value = Math.max(0, progressBar.value - 10);
-    progressBar.value = value;
-    progressBar.textContent = `${value}%`;
-  });
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
-
-const App = () => {
-  const [value, setValue] = useState(50);
-
-  function adjustValue(amount) {
-    let newValue = value + amount;
-    if (newValue < 0) newValue = 0;
-    if (newValue > 100) newValue = 100;
-    setValue(newValue);
-  }
-
-  return (
-    <>
-      <WaProgressBar value={value}>{value}%</WaProgressBar>
-
-      <br />
-
-      <WaButton circle onClick={() => adjustValue(-10)}>
-        <WaIcon name="minus" variant="solid" label="Decrease" />
-      </WaButton>
-
-      <WaButton circle onClick={() => adjustValue(10)}>
-        <WaIcon name="plus" variant="solid" label="Increase" />
-      </WaButton>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Indeterminate
-
-The `indeterminate` attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, `value` is ignored and the label, if present, will not be shown.
-
-```html {.example}
-<wa-progress-bar indeterminate></wa-progress-bar>
-```
-
-{% raw %}
-```jsx {.react}
-import WaProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
-
-const App = () => <WaProgressBar indeterminate />;
-```
-{% endraw %}

docs/docs/components/progress-ring.md

@@ -1,166 +0,0 @@
----
-title: Progress Ring
-description: Progress rings are used to show the progress of a determinate operation in a circular fashion.
-layout: component.njk
----
-
-```html {.example}
-<wa-progress-ring value="25"></wa-progress-ring>
-```
-
-{% raw %}
-```jsx {.react}
-import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
-
-const App = () => <WaProgressRing value="25" />;
-```
-{% endraw %}
-
-## Examples
-
-### Size
-
-Use the `--size` custom property to set the diameter of the progress ring.
-
-```html {.example}
-<wa-progress-ring value="50" style="--size: 200px;"></wa-progress-ring>
-```
-
-{% raw %}
-```jsx {.react}
-import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
-
-const App = () => <WaProgressRing value="50" style={{ '--size': '200px' }} />;
-```
-{% endraw %}
-
-### Track and Indicator Width
-
-Use the `--track-width` and `--indicator-width` custom properties to set the width of the progress ring's track and indicator.
-
-```html {.example}
-<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></wa-progress-ring>
-```
-
-{% raw %}
-```jsx {.react}
-import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
-
-const App = () => <WaProgressRing value="50" style={{ '--track-width': '6px', '--indicator-width': '12px' }} />;
-```
-{% endraw %}
-
-### Colors
-
-To change the color, use the `--track-color` and `--indicator-color` custom properties.
-
-```html {.example}
-<wa-progress-ring
-  value="50"
-  style="
-    --track-color: pink;
-    --indicator-color: deeppink;
-  "
-></wa-progress-ring>
-```
-
-{% raw %}
-```jsx {.react}
-import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
-
-const App = () => (
-  <WaProgressRing
-    value="50"
-    style={{
-      '--track-color': 'pink',
-      '--indicator-color': 'deeppink'
-    }}
-  />
-);
-```
-{% endraw %}
-
-### Labels
-
-Use the `label` attribute to label the progress ring and tell assistive devices how to announce it.
-
-```html {.example}
-<wa-progress-ring value="50" label="Upload progress"></wa-progress-ring>
-```
-
-{% raw %}
-```jsx {.react}
-import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
-
-const App = () => <WaProgressRing value="50" label="Upload progress" />;
-```
-{% endraw %}
-
-### Showing Values
-
-Use the default slot to show a label inside the progress ring.
-
-```html {.example}
-<wa-progress-ring value="50" class="progress-ring-values" style="margin-bottom: .5rem;">50%</wa-progress-ring>
-
-<br />
-
-<wa-button circle><wa-icon name="minus" variant="solid" label="Decrease"></wa-icon></wa-button>
-<wa-button circle><wa-icon name="plus" variant="solid" label="Increase"></wa-icon></wa-button>
-
-<script>
-  const progressRing = document.querySelector('.progress-ring-values');
-  const subtractButton = progressRing.nextElementSibling.nextElementSibling;
-  const addButton = subtractButton.nextElementSibling;
-
-  addButton.addEventListener('click', () => {
-    const value = Math.min(100, progressRing.value + 10);
-    progressRing.value = value;
-    progressRing.textContent = `${value}%`;
-  });
-
-  subtractButton.addEventListener('click', () => {
-    const value = Math.max(0, progressRing.value - 10);
-    progressRing.value = value;
-    progressRing.textContent = `${value}%`;
-  });
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-import WaProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
-
-const App = () => {
-  const [value, setValue] = useState(50);
-
-  function adjustValue(amount) {
-    let newValue = value + amount;
-    if (newValue < 0) newValue = 0;
-    if (newValue > 100) newValue = 100;
-    setValue(newValue);
-  }
-
-  return (
-    <>
-      <WaProgressRing value={value} style={{ marginBottom: '.5rem' }}>
-        {value}%
-      </WaProgressRing>
-
-      <br />
-
-      <WaButton circle onClick={() => adjustValue(-10)}>
-        <WaIcon name="minus" variant="solid" label="Decrease" />
-      </WaButton>
-
-      <WaButton circle onClick={() => adjustValue(10)}>
-        <WaIcon name="plus" variant="solid" label="Increase" />
-      </WaButton>
-    </>
-  );
-};
-```
-{% endraw %}

docs/docs/components/radio-button.md

@@ -1,318 +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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadioButton value="1">Option 1</WaRadioButton>
-    <WaRadioButton value="2">Option 2</WaRadioButton>
-    <WaRadioButton value="3">Option 3</WaRadioButton>
-  </WaRadioGroup>
-);
-```
-{% endraw %}
-
-## 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadioButton value="1">Option 1</WaRadioButton>
-    <WaRadioButton value="2">Option 2</WaRadioButton>
-    <WaRadioButton value="3">Option 3</WaRadioButton>
-  </WaRadioGroup>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadioButton value="1">Option 1</WaRadioButton>
-    <WaRadioButton value="2" disabled>
-      Option 2
-    </WaRadioButton>
-    <WaRadioButton value="3">Option 3</WaRadioButton>
-  </WaRadioGroup>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => (
-  <WaRadioGroup size="small" label="Select an option" name="a" value="1">
-    <WaRadioButton value="1">Option 1</WaRadioButton>
-    <WaRadioButton value="2">Option 2</WaRadioButton>
-    <WaRadioButton value="3">Option 3</WaRadioButton>
-  </WaRadioGroup>
-
-  <br />
-
-  <WaRadioGroup size="medium" label="Select an option" name="a" value="1">
-    <WaRadioButton value="1">Option 1</WaRadioButton>
-    <WaRadioButton value="2">Option 2</WaRadioButton>
-    <WaRadioButton value="3">Option 3</WaRadioButton>
-  </WaRadioGroup>
-
-  <br />
-
-  <WaRadioGroup size="large" label="Select an option" name="a" value="1">
-    <WaRadioButton value="1">Option 1</WaRadioButton>
-    <WaRadioButton value="2">Option 2</WaRadioButton>
-    <WaRadioButton value="3">Option 3</WaRadioButton>
-  </WaRadioGroup>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => (
-  <WaRadioGroup size="small" label="Select an option" name="a" value="1">
-    <WaRadioButton pill value="1">Option 1</WaRadioButton>
-    <WaRadioButton pill value="2">Option 2</WaRadioButton>
-    <WaRadioButton pill value="3">Option 3</WaRadioButton>
-  </WaRadioGroup>
-
-  <br />
-
-  <WaRadioGroup size="medium" label="Select an option" name="a" value="1">
-    <WaRadioButton pill value="1">Option 1</WaRadioButton>
-    <WaRadioButton pill value="2">Option 2</WaRadioButton>
-    <WaRadioButton pill value="3">Option 3</WaRadioButton>
-  </WaRadioGroup>
-
-  <br />
-
-  <WaRadioGroup size="large" label="Select an option" name="a" value="1">
-    <WaRadioButton pill value="1">Option 1</WaRadioButton>
-    <WaRadioButton pill value="2">Option 2</WaRadioButton>
-    <WaRadioButton pill value="3">Option 3</WaRadioButton>
-  </WaRadioGroup>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadioButton value="1">
-      <WaIcon slot="prefix" name="archive" variant="solid" />
-      Option 1
-    </WaRadioButton>
-
-    <WaRadioButton value="2">
-      <WaIcon slot="suffix" name="bag" variant="solid" />
-      Option 2
-    </WaRadioButton>
-
-    <WaRadioButton value="3">
-      <WaIcon slot="prefix" name="gift" variant="solid" />
-      <WaIcon slot="suffix" name="cart" variant="solid" />
-      Option 3
-    </WaRadioButton>
-  </WaRadioGroup>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="neutral">
-    <WaRadioButton value="angry">
-      <WaIcon name="face-angry" label="Angry" />
-    </WaRadioButton>
-
-    <WaRadioButton value="sad">
-      <WaIcon name="face-frown" label="Sad" />
-    </WaRadioButton>
-
-    <WaRadioButton value="neutral">
-      <WaIcon name="face-neutral" label="Neutral" />
-    </WaRadioButton>
-
-    <WaRadioButton value="happy">
-      <WaIcon name="face-smile" label="Happy" />
-    </WaRadioButton>
-
-    <WaRadioButton value="laughing">
-      <WaIcon name="face-laughing" label="Laughing" />
-    </WaRadioButton>
-  </WaRadioGroup>
-);
-```
-{% endraw %}

docs/docs/components/radio-group.md

@@ -1,306 +0,0 @@
----
-title: Radio Group
-description: Radio groups are used to group multiple radios or radio buttons so they function as a single form control.
-layout: component.njk
----
-
-```html {.example}
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio value="1">Option 1</wa-radio>
-  <wa-radio value="2">Option 2</wa-radio>
-  <wa-radio value="3">Option 3</wa-radio>
-</wa-radio-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadio value="1">Option 1</WaRadio>
-    <WaRadio value="2">Option 2</WaRadio>
-    <WaRadio value="3">Option 3</WaRadio>
-  </WaRadioGroup>
-);
-```
-{% endraw %}
-
-## Examples
-
-### Help Text
-
-Add descriptive help text to a radio group with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
-
-```html {.example}
-<wa-radio-group label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
-  <wa-radio value="1">Option 1</wa-radio>
-  <wa-radio value="2">Option 2</wa-radio>
-  <wa-radio value="3">Option 3</wa-radio>
-</wa-radio-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => (
-  <WaRadioGroup label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
-    <WaRadio value="1">Option 1</WaRadio>
-    <WaRadio value="2">Option 2</WaRadio>
-    <WaRadio value="3">Option 3</WaRadio>
-  </WaRadioGroup>
-);
-```
-{% endraw %}
-
-### Radio Buttons
-
-[Radio buttons](/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/components/button-group) is used to group the buttons into a single, cohesive control.
-
-```html {.example}
-<wa-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadioButton value="1">Option 1</WaRadioButton>
-    <WaRadioButton value="2">Option 2</WaRadioButton>
-    <WaRadioButton value="3">Option 3</WaRadioButton>
-  </WaRadioGroup>
-);
-```
-{% endraw %}
-
-### Disabling Options
-
-Radios and radio buttons can be disabled by adding the `disabled` attribute to the respective options inside the radio group.
-
-```html {.example}
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio value="1">Option 1</wa-radio>
-  <wa-radio value="2" disabled>Option 2</wa-radio>
-  <wa-radio value="3">Option 3</wa-radio>
-</wa-radio-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadio value="1">Option 1</WaRadio>
-    <WaRadio value="2" disabled>
-      Option 2
-    </WaRadio>
-    <WaRadio value="3">Option 3</WaRadio>
-  </WaRadioGroup>
-);
-```
-{% endraw %}
-
-### Sizing Options
-
-The size of [Radios](/components/radio) and [Radio Buttons](/components/radio-buttons) will be determined by the Radio Group's `size` attribute.
-
-```html preview
-<wa-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
-  <wa-radio value="small">Small</wa-radio>
-  <wa-radio value="medium">Medium</wa-radio>
-  <wa-radio value="large">Large</wa-radio>
-</wa-radio-group>
-
-<script>
-  const radioGroup = document.querySelector('.radio-group-size');
-
-  radioGroup.addEventListener('wa-change', () => {
-    radioGroup.size = radioGroup.value;
-  });
-</script>
-```
-
-{% raw %}
-```jsx react
-import { useState } from 'react';
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => {
-  const [size, setSize] = useState('medium');
-
-  return (
-    <>
-      <WaRadioGroup
-        label="Select an option"
-        size={size}
-        value={size}
-        class="radio-group-size"
-        onWaChange={event => setSize(event.target.value)}
-      >
-        <WaRadio value="small">Small</WaRadio>
-        <WaRadio value="medium">Medium</WaRadio>
-        <WaRadio value="large">Large</WaRadio>
-      </WaRadioGroup>
-    </>
-  );
-};
-```
-{% endraw %}
-
-:::info
-[Radios](/components/radio) and [Radio Buttons](/components/radio-button) also have a `size` attribute. This can be useful in certain compositions, but it will be ignored when used inside of a Radio Group.
-:::
-
-### Validation
-
-Setting the `required` attribute to make selecting an option mandatory. If a value has not been selected, it will prevent the form from submitting and display an error message.
-
-```html {.example}
-<form class="validation">
-  <wa-radio-group label="Select an option" name="a" required>
-    <wa-radio value="1">Option 1</wa-radio>
-    <wa-radio value="2">Option 2</wa-radio>
-    <wa-radio value="3">Option 3</wa-radio>
-  </wa-radio-group>
-  <br />
-  <wa-button type="submit" variant="brand">Submit</wa-button>
-</form>
-
-<script>
-  const form = document.querySelector('.validation');
-
-  // Handle form submit
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!');
-  });
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-const App = () => {
-  function handleSubmit(event) {
-    event.preventDefault();
-    alert('All fields are valid!');
-  }
-
-  return (
-    <form class="custom-validity" onSubmit={handleSubmit}>
-      <WaRadioGroup label="Select an option" name="a" required onWaChange={handleChange}>
-        <WaRadio value="1">
-          Option 1
-        </WaRadio>
-        <WaRadiovalue="2">
-          Option 2
-        </WaRadio>
-        <WaRadio value="3">
-          Option 3
-        </WaRadio>
-      </WaRadioGroup>
-      <br />
-      <WaButton type="submit" variant="brand">
-        Submit
-      </WaButton>
-    </form>
-  );
-};
-```
-{% endraw %}
-
-### Custom Validity
-
-Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
-
-```html {.example}
-<form class="custom-validity">
-  <wa-radio-group label="Select an option" name="a" value="1">
-    <wa-radio value="1">Not me</wa-radio>
-    <wa-radio value="2">Me neither</wa-radio>
-    <wa-radio value="3">Choose me</wa-radio>
-  </wa-radio-group>
-  <br />
-  <wa-button type="submit" variant="brand">Submit</wa-button>
-</form>
-
-<script>
-  const form = document.querySelector('.custom-validity');
-  const radioGroup = form.querySelector('wa-radio-group');
-  const errorMessage = 'You must choose the last option';
-
-  // Set initial validity as soon as the element is defined
-  customElements.whenDefined('wa-radio-group').then(() => {
-    radioGroup.setCustomValidity(errorMessage);
-  });
-
-  // Update validity when a selection is made
-  form.addEventListener('wa-change', () => {
-    const isValid = radioGroup.value === '3';
-    radioGroup.setCustomValidity(isValid ? '' : errorMessage);
-  });
-
-  // Handle form submit
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!');
-  });
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useEffect, useRef } from 'react';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-const App = () => {
-  const radioGroup = useRef(null);
-  const errorMessage = 'You must choose this option';
-
-  function handleChange() {
-    radioGroup.current.setCustomValidity(radioGroup.current.value === '3' ? '' : errorMessage);
-  }
-
-  function handleSubmit(event) {
-    event.preventDefault();
-    alert('All fields are valid!');
-  }
-
-  useEffect(() => {
-    radio.current.setCustomValidity(errorMessage);
-  }, []);
-
-  return (
-    <form class="custom-validity" onSubmit={handleSubmit}>
-      <WaRadioGroup ref={radioGroup} label="Select an option" name="a" value="1" onWaChange={handleChange}>
-        <WaRadio value="1">Not me</WaRadio>
-        <WaRadio value="2">Me neither</WaRadio>
-        <WaRadio value="3">Choose me</WaRadio>
-      </WaRadioGroup>
-      <br />
-      <WaButton type="submit" variant="brand">
-        Submit
-      </WaButton>
-    </form>
-  );
-};
-```
-{% endraw %}

docs/docs/components/radio.md

@@ -1,148 +0,0 @@
----
-title: Radio
-description: Radios allow the user to select a single option from a group.
-layout: component.njk
----
-
-Radios are designed to be used with [radio groups](/components/radio-group).
-
-```html {.example}
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio value="1">Option 1</wa-radio><br>
-  <wa-radio value="2">Option 2</wa-radio><br>
-  <wa-radio value="3">Option 3</wa-radio>
-</wa-radio-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadio value="1">Option 1</WaRadio><br />
-    <WaRadio value="2">Option 2</WaRadio><br />
-    <WaRadio value="3">Option 3</WaRadio>
-  </WaRadioGroup>
-);
-```
-{% endraw %}
-
-:::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
-
-To set the initial value and checked state, use the `value` attribute on the containing radio group.
-
-```html {.example}
-<wa-radio-group label="Select an option" name="a" value="3">
-  <wa-radio value="1">Option 1</wa-radio><br>
-  <wa-radio value="2">Option 2</wa-radio><br>
-  <wa-radio value="3">Option 3</wa-radio>
-</wa-radio-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="3">
-    <WaRadio value="1">Option 1</WaRadio><br />
-    <WaRadio value="2">Option 2</WaRadio><br />
-    <WaRadio value="3">Option 3</WaRadio>
-  </WaRadioGroup>
-);
-```
-{% endraw %}
-
-### Disabled
-
-Use the `disabled` attribute to disable a radio.
-
-```html {.example}
-<wa-radio-group label="Select an option" name="a" value="1">
-  <wa-radio value="1">Option 1</wa-radio><br>
-  <wa-radio value="2" disabled>Option 2</wa-radio><br>
-  <wa-radio value="3">Option 3</wa-radio>
-</wa-radio-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
-
-const App = () => (
-  <WaRadioGroup label="Select an option" name="a" value="1">
-    <WaRadio value="1">Option 1</WaRadio><br />
-    <WaRadio value="2" disabled>Option 2</WaRadio><br />
-    <WaRadio value="3">Option 3</WaRadio>
-  </WaRadioGroup>
-);
-```
-{% endraw %}
-
-## Sizes
-
-Add the `size` attribute to the [Radio Group](/components/radio-group) to change the radios' size.
-
-```html {.example}
-<wa-radio-group size="small" value="1">
-  <wa-radio value="1">Small 1</wa-radio><br>
-  <wa-radio value="2">Small 2</wa-radio><br>
-  <wa-radio value="3">Small 3</wa-radio>
-</wa-radio-group>
-
-<br />
-
-<wa-radio-group size="medium" value="1">
-  <wa-radio value="1">Medium 1</wa-radio><br>
-  <wa-radio value="2">Medium 2</wa-radio><br>
-  <wa-radio value="3">Medium 3</wa-radio>
-</wa-radio-group>
-
-<br />
-
-<wa-radio-group size="large" value="1">
-  <wa-radio value="1">Large 1</wa-radio><br>
-  <wa-radio value="2">Large 2</wa-radio><br>
-  <wa-radio value="3">Large 3</wa-radio>
-</wa-radio-group>
-```
-
-```jsx react
-import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
-
-const App = () => (
-  <>
-    <WaRadioGroup size="small" value="1">
-      <WaRadio value="1">Small 1</WaRadio><br />
-      <WaRadio value="2">Small 2</WaRadio><br />
-      <WaRadio value="3">Small 3</WaRadio>
-    </WaRadioGroup>
-
-    <br />
-
-    <WaRadioGroup size="medium" value="1">
-      <WaRadio value="1">Medium 1</WaRadio><br />
-      <WaRadio value="2">Medium 2</WaRadio><br />
-      <WaRadio value="3">Medium 3</WaRadio>
-    </WaRadioGroup>
-
-    <br />
-
-    <WaRadioGroup size="large" value="1">
-      <WaRadio value="1">Large 1</WaRadio><br />
-      <WaRadio value="2">Large 2</WaRadio><br />
-      <WaRadio value="3">Large 3</WaRadio>
-    </WaRadioGroup>
-  </>
-);
-```

docs/docs/components/range.md

@@ -1,202 +0,0 @@
----
-title: Range
-description: Ranges allow the user to select a single value within a given range using a slider.
-layout: component.njk
----
-
-```html {.example}
-<wa-range></wa-range>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
-
-const App = () => <WaRange />;
-```
-{% endraw %}
-
-:::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
-
-### Labels
-
-Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.
-
-```html {.example}
-<wa-range label="Volume" min="0" max="100"></wa-range>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
-
-const App = () => <WaRange label="Volume" min={0} max={100} />;
-```
-{% endraw %}
-
-### Help Text
-
-Add descriptive help text to a range with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
-
-```html {.example}
-<wa-range label="Volume" help-text="Controls the volume of the current song." min="0" max="100"></wa-range>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
-
-const App = () => <WaRange label="Volume" help-text="Controls the volume of the current song." min={0} max={100} />;
-```
-{% endraw %}
-
-### Min, Max, and Step
-
-Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.
-
-```html {.example}
-<wa-range min="0" max="10" step="1"></wa-range>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
-
-const App = () => <WaRange min={0} max={10} step={1} />;
-```
-{% endraw %}
-
-### Disabled
-
-Use the `disabled` attribute to disable a slider.
-
-```html {.example}
-<wa-range disabled></wa-range>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
-
-const App = () => <WaRange disabled />;
-```
-{% endraw %}
-
-### Tooltip Placement
-
-By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
-
-```html {.example}
-<wa-range tooltip="bottom"></wa-range>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
-
-const App = () => <WaRange tooltip="bottom" />;
-```
-{% endraw %}
-
-### Disable the Tooltip
-
-To disable the tooltip, set `tooltip` to `none`.
-
-```html {.example}
-<wa-range tooltip="none"></wa-range>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
-
-const App = () => <WaRange tooltip="none" />;
-```
-{% endraw %}
-
-### Custom Track Colors
-
-You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.
-
-```html {.example}
-<wa-range
-  style="
-  --track-color-active: var(--wa-color-brand-spot);
-  --track-color-inactive: var(--wa-color-brand-fill-highlight);
-"
-></wa-range>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
-
-const App = () => (
-  <WaRange
-    style={{
-      '--track-color-active': 'var(--wa-color-brand-spot)',
-      '--track-color-inactive': 'var(--wa-color-brand-fill-highlight)'
-    }}
-  />
-);
-```
-{% endraw %}
-
-### Custom Track Offset
-
-You can customize the initial offset of the active track using the `--track-active-offset` custom property.
-
-```html {.example}
-<wa-range
-  min="-100"
-  max="100"
-  style="
-  --track-color-active: var(--wa-color-brand-spot);
-  --track-color-inactive: var(--wa-color-brand-fill-highlight);
-  --track-active-offset: 50%;
-"
-></wa-range>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
-
-const App = () => (
-  <WaRange
-    min={-100}
-    max={100}
-    style={{
-      '--track-color-active': 'var(--wa-color-brand-spot)',
-      '--track-color-inactive': 'var(--wa-color-brand-fill-highlight)',
-      '--track-active-offset': '50%'
-    }}
-  />
-);
-```
-{% endraw %}
-
-### Custom Tooltip Formatter
-
-You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.
-
-```html {.example}
-<wa-range min="0" max="100" step="1" class="range-with-custom-formatter"></wa-range>
-
-<script>
-  const range = document.querySelector('.range-with-custom-formatter');
-  range.tooltipFormatter = value => `Total - ${value}%`;
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRange from '@shoelace-style/shoelace/dist/react/range';
-
-const App = () => <WaRange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`} />;
-```
-{% endraw %}

docs/docs/components/rating.md

@@ -1,267 +0,0 @@
----
-title: Rating
-description: Ratings give users a way to quickly view and provide feedback.
-layout: component.njk
----
-
-```html {.example}
-<wa-rating label="Rating"></wa-rating>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
-
-const App = () => <WaRating label="Rating" />;
-```
-{% endraw %}
-
-## Examples
-
-### Labels
-
-Ratings are commonly identified contextually, so labels aren't displayed. However, you should always provide one for assistive devices using the `label` attribute.
-
-```html {.example}
-<wa-rating label="Rate this component"></wa-rating>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
-
-const App = () => <WaRating label="Rate this component" />;
-```
-{% endraw %}
-
-### Maximum Value
-
-Ratings are 0-5 by default. To change the maximum possible value, use the `max` attribute.
-
-```html {.example}
-<wa-rating label="Rating" max="3"></wa-rating>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
-
-const App = () => <WaRating label="Rating" max={3} />;
-```
-{% endraw %}
-
-### Precision
-
-Use the `precision` attribute to let users select fractional ratings.
-
-```html {.example}
-<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
-
-const App = () => <WaRating label="Rating" precision={0.5} value={2.5} />;
-```
-{% endraw %}
-
-### Symbol Sizes
-
-Set the `--symbol-size` custom property to adjust the size.
-
-```html {.example}
-<wa-rating label="Rating" style="--symbol-size: 2rem;"></wa-rating>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
-
-const App = () => <WaRating label="Rating" style={{ '--symbol-size': '2rem' }} />;
-```
-{% endraw %}
-
-### Readonly
-
-Use the `readonly` attribute to display a rating that users can't change.
-
-```html {.example}
-<wa-rating label="Rating" readonly value="3"></wa-rating>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
-
-const App = () => <WaRating label="Rating" readonly value={3} />;
-```
-{% endraw %}
-
-### Disabled
-
-Use the `disable` attribute to disable the rating.
-
-```html {.example}
-<wa-rating label="Rating" disabled value="3"></wa-rating>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
-
-const App = () => <WaRating label="Rating" disabled value={3} />;
-```
-{% endraw %}
-
-### Detecting Hover
-
-Use the `wa-hover` event to detect when the user hovers over (or touch and drag) the rating. This lets you hook into values as the user interacts with the rating, but before they select a value.
-
-The event has a payload with `phase` and `value` properties. The `phase` property tells when hovering starts, moves to a new value, and ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.
-
-```html {.example}
-<div class="detect-hover">
-  <wa-rating label="Rating"></wa-rating>
-  <span></span>
-</div>
-
-<script>
-  const rating = document.querySelector('.detect-hover > wa-rating');
-  const span = rating.nextElementSibling;
-  const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent'];
-
-  rating.addEventListener('wa-hover', event => {
-    span.textContent = terms[event.detail.value];
-
-    // Clear feedback when hovering stops
-    if (event.detail.phase === 'end') {
-      span.textContent = '';
-    }
-  });
-</script>
-
-<style>
-  .detect-hover span {
-    position: relative;
-    top: -4px;
-    left: 8px;
-    border-radius: var(--wa-corners-s);
-    background: var(--wa-color-neutral-spot);
-    color: var(--wa-color-neutral-text-on-spot);
-    text-align: center;
-    padding: 4px 6px;
-  }
-
-  .detect-hover span:empty {
-    display: none;
-  }
-</style>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
-
-const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent'];
-const css = `
-  .detect-hover span {
-    position: relative;
-    top: -4px;
-    left: 8px;
-    border-radius: var(--wa-corners-s);
-    background: var(--wa-color-neutral-spot);
-    color: var(--wa-color-neutral-text-on-spot);
-    text-align: center;
-    padding: 4px 6px;
-  }
-
-  .detect-hover span:empty {
-    display: none;
-  }
-`;
-
-function handleHover(event) {
-  rating.addEventListener('wa-hover', event => {
-    setFeedback(terms[event.detail.value]);
-
-    // Clear feedback when hovering stops
-    if (event.detail.phase === 'end') {
-      setFeedback('');
-    }
-  });
-}
-
-const App = () => {
-  const [feedback, setFeedback] = useState(true);
-
-  return (
-    <>
-      <div class="detect-hover">
-        <WaRating label="Rating" onWaHover={handleHover} />
-        <span>{feedback}</span>
-      </div>
-      <style>{css}</style>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Custom Icons
-
-You can provide custom icons by passing a function to the `getSymbol` property.
-
-```html {.example}
-<wa-rating label="Rating" class="rating-hearts" style="--symbol-color-active: #ff4136;"></wa-rating>
-
-<script>
-  const rating = document.querySelector('.rating-hearts');
-  rating.getSymbol = () => '<wa-icon name="heart" variant="solid"></wa-icon>';
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
-
-const App = () => (
-  <WaRating
-    label="Rating"
-    getSymbol={() => '<wa-icon name="heart" variant="solid"></wa-icon>'}
-    style={{ '--symbol-color-active': '#ff4136' }}
-  />
-);
-```
-{% endraw %}
-
-### Value-based Icons
-
-You can also use the `getSymbol` property to render different icons based on value.
-
-```html {.example}
-<wa-rating label="Rating" class="rating-emojis"></wa-rating>
-
-<script>
-  const rating = document.querySelector('.rating-emojis');
-
-  rating.getSymbol = value => {
-    const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh'];
-    return `<wa-icon name="${icons[value - 1]}"></wa-icon>`;
-  };
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import WaRating from '@shoelace-style/shoelace/dist/react/rating';
-
-function getSymbol(value) {
-  const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh'];
-  return `<wa-icon name="${icons[value - 1]}"></wa-icon>`;
-}
-
-const App = () => <WaRating label="Rating" getSymbol={getSymbol} />;
-```
-{% endraw %}

docs/docs/components/select.md

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

docs/docs/components/skeleton.md

@@ -1,455 +0,0 @@
----
-title: Skeleton
-description: Skeletons are used to provide a visual representation of where content will eventually be drawn.
-layout: component.njk
----
-
-These are simple containers for scaffolding layouts that mimic what users will see when content has finished loading. This prevents large areas of empty space during asynchronous operations.
-
-Skeletons try not to be opinionated, as there are endless possibilities for designing layouts. Therefore, you'll likely use more than one skeleton to create the effect you want. If you find yourself using them frequently, consider creating a template that renders them with the desired arrangement and styles.
-
-```html {.example}
-<div class="skeleton-overview">
-  <header>
-    <wa-skeleton effect="sheen"></wa-skeleton>
-    <wa-skeleton effect="sheen"></wa-skeleton>
-  </header>
-
-  <wa-skeleton effect="sheen"></wa-skeleton>
-  <wa-skeleton effect="sheen"></wa-skeleton>
-  <wa-skeleton effect="sheen"></wa-skeleton>
-</div>
-
-<style>
-  .skeleton-overview header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 1rem;
-  }
-
-  .skeleton-overview header wa-skeleton:last-child {
-    flex: 0 0 auto;
-    width: 30%;
-  }
-
-  .skeleton-overview wa-skeleton {
-    margin-bottom: 1rem;
-  }
-
-  .skeleton-overview wa-skeleton:nth-child(1) {
-    float: left;
-    width: 3rem;
-    height: 3rem;
-    margin-right: 1rem;
-    vertical-align: middle;
-  }
-
-  .skeleton-overview wa-skeleton:nth-child(3) {
-    width: 95%;
-  }
-
-  .skeleton-overview wa-skeleton:nth-child(4) {
-    width: 80%;
-  }
-</style>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
-
-const css = `
-  .skeleton-overview header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 1rem;
-  }
-
-  .skeleton-overview header wa-skeleton:last-child {
-    flex: 0 0 auto;
-    width: 30%;
-  }
-
-  .skeleton-overview wa-skeleton {
-    margin-bottom: 1rem;
-  }
-
-  .skeleton-overview wa-skeleton:nth-child(1) {
-    float: left;
-    width: 3rem;
-    height: 3rem;
-    margin-right: 1rem;
-    vertical-align: middle;
-  }
-
-  .skeleton-overview wa-skeleton:nth-child(3) {
-    width: 95%;
-  }
-
-  .skeleton-overview wa-skeleton:nth-child(4) {
-    width: 80%;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="skeleton-overview">
-      <header>
-        <WaSkeleton />
-        <WaSkeleton />
-      </header>
-
-      <WaSkeleton />
-      <WaSkeleton />
-      <WaSkeleton />
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}
-
-## Examples
-
-### Effects
-
-There are two built-in effects, `sheen` and `pulse`. Effects are intentionally subtle, as they can be distracting when used extensively. The default is `none`, which displays a static, non-animated skeleton.
-
-```html {.example}
-<div class="skeleton-effects">
-  <wa-skeleton effect="none"></wa-skeleton>
-  None
-
-  <wa-skeleton effect="sheen"></wa-skeleton>
-  Sheen
-
-  <wa-skeleton effect="pulse"></wa-skeleton>
-  Pulse
-</div>
-
-<style>
-  .skeleton-effects {
-    font-size: var(--wa-font-size-s);
-  }
-
-  .skeleton-effects wa-skeleton:not(:first-child) {
-    margin-top: 1rem;
-  }
-</style>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
-
-const css = `
-  .skeleton-effects {
-    font-size: var(--wa-font-size-s);
-  }
-
-  .skeleton-effects wa-skeleton:not(:first-child) {
-    margin-top: 1rem;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="skeleton-effects">
-      <WaSkeleton effect="none" />
-      None
-      <WaSkeleton effect="sheen" />
-      Sheen
-      <WaSkeleton effect="pulse" />
-      Pulse
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}
-
-### Paragraphs
-
-Use multiple skeletons and some clever styles to simulate paragraphs.
-
-```html {.example}
-<div class="skeleton-paragraphs">
-  <wa-skeleton></wa-skeleton>
-  <wa-skeleton></wa-skeleton>
-  <wa-skeleton></wa-skeleton>
-  <wa-skeleton></wa-skeleton>
-  <wa-skeleton></wa-skeleton>
-</div>
-
-<style>
-  .skeleton-paragraphs wa-skeleton {
-    margin-bottom: 1rem;
-  }
-
-  .skeleton-paragraphs wa-skeleton:nth-child(2) {
-    width: 95%;
-  }
-
-  .skeleton-paragraphs wa-skeleton:nth-child(4) {
-    width: 90%;
-  }
-
-  .skeleton-paragraphs wa-skeleton:last-child {
-    width: 50%;
-  }
-</style>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
-
-const css = `
-  .skeleton-paragraphs wa-skeleton {
-    margin-bottom: 1rem;
-  }
-
-  .skeleton-paragraphs wa-skeleton:nth-child(2) {
-    width: 95%;
-  }
-
-  .skeleton-paragraphs wa-skeleton:nth-child(4) {
-    width: 90%;
-  }
-
-  .skeleton-paragraphs wa-skeleton:last-child {
-    width: 50%;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="skeleton-paragraphs">
-      <WaSkeleton />
-      <WaSkeleton />
-      <WaSkeleton />
-      <WaSkeleton />
-      <WaSkeleton />
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}
-
-### Avatars
-
-Set a matching width and height to make a circle, square, or rounded avatar skeleton.
-
-```html {.example}
-<div class="skeleton-avatars">
-  <wa-skeleton></wa-skeleton>
-  <wa-skeleton></wa-skeleton>
-  <wa-skeleton></wa-skeleton>
-</div>
-
-<style>
-  .skeleton-avatars wa-skeleton {
-    display: inline-block;
-    width: 3rem;
-    height: 3rem;
-    margin-right: 0.5rem;
-  }
-
-  .skeleton-avatars wa-skeleton:nth-child(1) {
-    --border-radius: 0;
-  }
-
-  .skeleton-avatars wa-skeleton:nth-child(2) {
-    --border-radius: var(--wa-corners-s);
-  }
-</style>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
-
-const css = `
-  .skeleton-avatars wa-skeleton {
-    display: inline-block;
-    width: 3rem;
-    height: 3rem;
-    margin-right: .5rem;
-  }
-
-  .skeleton-avatars wa-skeleton:nth-child(1) {
-    --border-radius: 0;
-  }
-
-  .skeleton-avatars wa-skeleton:nth-child(2) {
-    --border-radius: var(--wa-corners-s);
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="skeleton-avatars">
-      <WaSkeleton />
-      <WaSkeleton />
-      <WaSkeleton />
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}
-
-### Custom Shapes
-
-Use the `--border-radius` custom property to make circles, squares, and rectangles. For more complex shapes, you can apply `clip-path` to the `indicator` part. [Try Clippy](https://bennettfeely.com/clippy/) if you need help generating custom shapes.
-
-```html {.example}
-<div class="skeleton-shapes">
-  <wa-skeleton class="square"></wa-skeleton>
-  <wa-skeleton class="circle"></wa-skeleton>
-  <wa-skeleton class="triangle"></wa-skeleton>
-  <wa-skeleton class="cross"></wa-skeleton>
-  <wa-skeleton class="comment"></wa-skeleton>
-</div>
-
-<style>
-  .skeleton-shapes wa-skeleton {
-    display: inline-flex;
-    width: 50px;
-    height: 50px;
-  }
-
-  .skeleton-shapes .square::part(indicator) {
-    --border-radius: var(--wa-corners-s);
-  }
-
-  .skeleton-shapes .circle::part(indicator) {
-    --border-radius: var(--wa-corners-circle);
-  }
-
-  .skeleton-shapes .triangle::part(indicator) {
-    --border-radius: 0;
-    clip-path: polygon(50% 0, 0 100%, 100% 100%);
-  }
-
-  .skeleton-shapes .cross::part(indicator) {
-    --border-radius: 0;
-    clip-path: polygon(
-      20% 0%,
-      0% 20%,
-      30% 50%,
-      0% 80%,
-      20% 100%,
-      50% 70%,
-      80% 100%,
-      100% 80%,
-      70% 50%,
-      100% 20%,
-      80% 0%,
-      50% 30%
-    );
-  }
-
-  .skeleton-shapes .comment::part(indicator) {
-    --border-radius: 0;
-    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
-  }
-
-  .skeleton-shapes wa-skeleton:not(:last-child) {
-    margin-right: 0.5rem;
-  }
-</style>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
-
-const css = `
-  .skeleton-shapes wa-skeleton {
-    display: inline-flex;
-    width: 50px;
-    height: 50px;
-  }
-
-  .skeleton-shapes .square::part(indicator) {
-    --border-radius: var(--wa-corners-s);
-  }
-
-  .skeleton-shapes .circle::part(indicator) {
-    --border-radius: var(--wa-corners-circle);
-  }
-
-  .skeleton-shapes .triangle::part(indicator) {
-    --border-radius: 0;
-    clip-path: polygon(50% 0, 0 100%, 100% 100%);
-  }
-
-  .skeleton-shapes .cross::part(indicator) {
-    --border-radius: 0;
-    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
-  }
-
-  .skeleton-shapes .comment::part(indicator) {
-    --border-radius: 0;
-    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
-  }
-
-  .skeleton-shapes wa-skeleton:not(:last-child) {
-    margin-right: .5rem;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="skeleton-shapes">
-      <WaSkeleton className="square" />
-      <WaSkeleton className="circle" />
-      <WaSkeleton className="triangle" />
-      <WaSkeleton className="cross" />
-      <WaSkeleton className="comment" />
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}
-
-### Custom Colors
-
-Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's color.
-
-```html {.example}
-<wa-skeleton effect="sheen" style="--color: tomato; --sheen-color: #ffb094;"></wa-skeleton>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
-
-const css = `
-  .skeleton-avatars wa-skeleton {
-    display: inline-block;
-    width: 3rem;
-    height: 3rem;
-    margin-right: .5rem;
-  }
-
-  .skeleton-avatars wa-skeleton:nth-child(1) {
-    --border-radius: 0;
-  }
-
-  .skeleton-avatars wa-skeleton:nth-child(2) {
-    --border-radius: var(--wa-corners-s);
-  }
-`;
-
-const App = () => <WaSkeleton effect="sheen" style={{ '--color': 'tomato', '--sheen-color': '#ffb094' }} />;
-```
-{% endraw %}

docs/docs/components/split-panel.md

@@ -1,822 +0,0 @@
----
-title: Split Panel
-description: Split panels display two adjacent panels, allowing the user to reposition them.
-layout: component.njk
----
-
-```html {.example}
-<wa-split-panel>
-  <div
-    slot="start"
-    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
-  >
-    Start
-  </div>
-  <div
-    slot="end"
-    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
-  >
-    End
-  </div>
-</wa-split-panel>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
-
-const App = () => (
-  <WaSplitPanel>
-    <div
-      slot="start"
-      style={{
-        height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      Start
-    </div>
-    <div
-      slot="end"
-      style={{
-        height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      End
-    </div>
-  </WaSplitPanel>
-);
-```
-{% endraw %}
-
-## Examples
-
-### Initial Position
-
-To set the initial position, use the `position` attribute. If no position is provided, it will default to 50% of the available space.
-
-```html {.example}
-<wa-split-panel position="75">
-  <div
-    slot="start"
-    style="
-      height: 200px;
-      background: var(--wa-color-surface-lowered);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-    "
-  >
-    Start
-  </div>
-  <div
-    slot="end"
-    style="
-      height: 200px;
-      background: var(--wa-color-surface-lowered);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-    "
-  >
-    End
-  </div>
-</wa-split-panel>
-```
-
-### Initial Position in Pixels
-
-To set the initial position in pixels instead of a percentage, use the `position-in-pixels` attribute.
-
-```html {.example}
-<wa-split-panel position-in-pixels="150">
-  <div
-    slot="start"
-    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
-  >
-    Start
-  </div>
-  <div
-    slot="end"
-    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
-  >
-    End
-  </div>
-</wa-split-panel>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
-
-const App = () => (
-  <WaSplitPanel position="200">
-    <div
-      slot="start"
-      style={{
-        height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      Start
-    </div>
-    <div
-      slot="end"
-      style={{
-        height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      End
-    </div>
-  </WaSplitPanel>
-);
-```
-{% endraw %}
-
-### Vertical
-
-Add the `vertical` attribute to render the split panel in a vertical orientation where the start and end panels are stacked. You also need to set a height when using the vertical orientation.
-
-```html {.example}
-<wa-split-panel vertical style="height: 400px;">
-  <div
-    slot="start"
-    style="height: 100%; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
-  >
-    Start
-  </div>
-  <div
-    slot="end"
-    style="height: 100%; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
-  >
-    End
-  </div>
-</wa-split-panel>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
-
-const App = () => (
-  <WaSplitPanel vertical style={{ height: '400px' }}>
-    <div
-      slot="start"
-      style={{
-        height: '100%',
-        background: 'var(--wa-color-surface-lowered)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      Start
-    </div>
-    <div
-      slot="end"
-      style={{
-        height: '100%',
-        background: 'var(--wa-color-surface-lowered)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      End
-    </div>
-  </WaSplitPanel>
-);
-```
-{% endraw %}
-
-### Snapping
-
-To snap panels at specific positions while dragging, add the `snap` attribute with one or more space-separated values. Values must be in pixels or percentages. For example, to snap the panel at `100px` and `50%`, use `snap="100px 50%"`. You can also customize how close the divider must be before snapping with the `snap-threshold` attribute.
-
-```html {.example}
-<div class="split-panel-snapping">
-  <wa-split-panel snap="100px 50%">
-    <div
-      slot="start"
-      style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
-    >
-      Start
-    </div>
-    <div
-      slot="end"
-      style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
-    >
-      End
-    </div>
-  </wa-split-panel>
-
-  <div class="split-panel-snapping-dots"></div>
-</div>
-
-<style>
-  .split-panel-snapping {
-    position: relative;
-  }
-
-  .split-panel-snapping-dots::before,
-  .split-panel-snapping-dots::after {
-    content: '';
-    position: absolute;
-    bottom: -12px;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--wa-color-neutral-spot);
-    transform: translateX(-3px);
-  }
-
-  .split-panel-snapping-dots::before {
-    left: 100px;
-  }
-
-  .split-panel-snapping-dots::after {
-    left: 50%;
-  }
-</style>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
-
-const css = `
-  .split-panel-snapping {
-    position: relative;
-  }
-
-  .split-panel-snapping-dots::before,
-  .split-panel-snapping-dots::after {
-    content: '';
-    position: absolute;
-    bottom: -12px;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--wa-color-neutral-spot);
-    transform: translateX(-3px);
-  }
-
-  .split-panel-snapping-dots::before {
-    left: 100px;
-  }
-
-  .split-panel-snapping-dots::after {
-    left: 50%;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="split-panel-snapping">
-      <WaSplitPanel snap="100px 50%">
-        <div
-          slot="start"
-          style={{
-            height: '200px',
-            background: 'var(--wa-color-surface-lowered)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          Start
-        </div>
-        <div
-          slot="end"
-          style={{
-            height: '200px',
-            background: 'var(--wa-color-surface-lowered)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          End
-        </div>
-      </WaSplitPanel>
-
-      <div className="split-panel-snapping-dots" />
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}
-
-### Disabled
-
-Add the `disabled` attribute to prevent the divider from being repositioned.
-
-```html {.example}
-<wa-split-panel disabled>
-  <div
-    slot="start"
-    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
-  >
-    Start
-  </div>
-  <div
-    slot="end"
-    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
-  >
-    End
-  </div>
-</wa-split-panel>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
-
-const App = () => (
-  <WaSplitPanel disabled>
-    <div
-      slot="start"
-      style={{
-        height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      Start
-    </div>
-    <div
-      slot="end"
-      style={{
-        height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      End
-    </div>
-  </WaSplitPanel>
-);
-```
-{% endraw %}
-
-### Setting the Primary Panel
-
-By default, both panels will grow or shrink proportionally when the host element is resized. If a primary panel is designated, it will maintain its size and the secondary panel will grow or shrink to fit the remaining space. You can set the primary panel to `start` or `end` using the `primary` attribute.
-
-Try resizing the example below with each option and notice how the panels respond.
-
-```html {.example}
-<div class="split-panel-primary">
-  <wa-split-panel>
-    <div
-      slot="start"
-      style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
-    >
-      Start
-    </div>
-    <div
-      slot="end"
-      style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
-    >
-      End
-    </div>
-  </wa-split-panel>
-
-  <wa-select label="Primary Panel" value="" style="max-width: 200px; margin-top: 1rem;">
-    <wa-option value="">None</wa-option>
-    <wa-option value="start">Start</wa-option>
-    <wa-option value="end">End</wa-option>
-  </wa-select>
-</div>
-
-<script>
-  const container = document.querySelector('.split-panel-primary');
-  const splitPanel = container.querySelector('wa-split-panel');
-  const select = container.querySelector('wa-select');
-
-  select.addEventListener('wa-change', () => (splitPanel.primary = select.value));
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
-import WaSelect from '@shoelace-style/shoelace/dist/react/select';
-import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
-
-const App = () => {
-  const [primary, setPrimary] = useState('');
-
-  return (
-    <>
-      <WaSplitPanel primary={primary}>
-        <div
-          slot="start"
-          style={{
-            height: '200px',
-            background: 'var(--wa-color-surface-lowered)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          Start
-        </div>
-        <div
-          slot="end"
-          style={{
-            height: '200px',
-            background: 'var(--wa-color-surface-lowered)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          End
-        </div>
-      </WaSplitPanel>
-
-      <WaSelect
-        label="Primary Panel"
-        value={primary}
-        style={{ maxWidth: '200px', marginTop: '1rem' }}
-        onWaChange={event => setPrimary(event.target.value)}
-      >
-        <WaMenuItem value="">None</WaMenuItem>
-        <WaMenuItem value="start">Start</WaMenuItem>
-        <WaMenuItem value="end">End</WaMenuItem>
-      </WaSelect>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Min & Max
-
-To set a minimum or maximum size of the primary panel, use the `--min` and `--max` custom properties. Since the secondary panel is flexible, size constraints can only be applied to the primary panel. If no primary panel is designated, these constraints will be applied to the `start` panel.
-
-This examples demonstrates how you can ensure both panels are at least 150px using `--min`, `--max`, and the `calc()` function.
-
-```html {.example}
-<wa-split-panel style="--min: 150px; --max: calc(100% - 150px);">
-  <div
-    slot="start"
-    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
-  >
-    Start
-  </div>
-  <div
-    slot="end"
-    style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
-  >
-    End
-  </div>
-</wa-split-panel>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
-
-const App = () => (
-  <WaSplitPanel style={{ '--min': '150px', '--max': 'calc(100% - 150px)' }}>
-    <div
-      slot="start"
-      style={{
-        height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      Start
-    </div>
-    <div
-      slot="end"
-      style={{
-        height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      End
-    </div>
-  </WaSplitPanel>
-);
-```
-{% endraw %}
-
-### Nested Split Panels
-
-Create complex layouts that can be repositioned independently by nesting split panels.
-
-```html {.example}
-<wa-split-panel>
-  <div
-    slot="start"
-    style="height: 400px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden"
-  >
-    Start
-  </div>
-  <div slot="end">
-    <wa-split-panel vertical style="height: 400px;">
-      <div
-        slot="start"
-        style="height: 100%; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden"
-      >
-        Top
-      </div>
-      <div
-        slot="end"
-        style="height: 100%; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden"
-      >
-        Bottom
-      </div>
-    </wa-split-panel>
-  </div>
-</wa-split-panel>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
-
-const App = () => (
-  <WaSplitPanel>
-    <div
-      slot="start"
-      style={{
-        height: '400px',
-        background: 'var(--wa-color-surface-lowered)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      Start
-    </div>
-    <div slot="end">
-      <WaSplitPanel vertical style={{ height: '400px' }}>
-        <div
-          slot="start"
-          style={{
-            height: '100%',
-            background: 'var(--wa-color-surface-lowered)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          Start
-        </div>
-        <div
-          slot="end"
-          style={{
-            height: '100%',
-            background: 'var(--wa-color-surface-lowered)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          End
-        </div>
-      </WaSplitPanel>
-    </div>
-  </WaSplitPanel>
-);
-```
-{% endraw %}
-
-### Customizing the Divider
-
-You can target the `divider` part to apply CSS properties to the divider. To add a custom handle, slot an icon into the `divider` slot. When customizing the divider, make sure to think about focus styles for keyboard users.
-
-```html {.example}
-<wa-split-panel style="--divider-width: 20px;">
-  <wa-icon slot="divider" name="grip-vertical" variant="solid"></wa-icon>
-  <div
-    slot="start"
-    style="
-      height: 200px;
-      background: var(--wa-color-surface-lowered);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-    "
-  >
-    Start
-  </div>
-  <div
-    slot="end"
-    style="
-      height: 200px;
-      background: var(--wa-color-surface-lowered);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-    "
-  >
-    End
-  </div>
-</wa-split-panel>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-const App = () => (
-  <WaSplitPanel style={{ '--divider-width': '20px' }}>
-    <WaIcon slot="divider" name="grip-vertical" variant="solid" />
-    <div
-      slot="start"
-      style={{
-        height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      Start
-    </div>
-    <div
-      slot="end"
-      style={{
-        height: '200px',
-        background: 'var(--wa-color-surface-lowered)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      End
-    </div>
-  </WaSplitPanel>
-);
-```
-{% endraw %}
-
-Here's a more elaborate example that changes the divider's color and width and adds a styled handle.
-
-```html {.example}
-<div class="split-panel-divider">
-  <wa-split-panel>
-    <wa-icon slot="divider" name="grip-vertical" variant="solid"></wa-icon>
-    <div
-      slot="start"
-      style="
-        height: 200px;
-        background: var(--wa-color-surface-lowered);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-      "
-    >
-      Start
-    </div>
-    <div
-      slot="end"
-      style="
-        height: 200px;
-        background: var(--wa-color-surface-lowered);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-      "
-    >
-      End
-    </div>
-  </wa-split-panel>
-</div>
-
-<style>
-  .split-panel-divider wa-split-panel {
-    --divider-width: 4px;
-  }
-
-  .split-panel-divider wa-split-panel::part(divider) {
-    background-color: var(--wa-color-red-50);
-  }
-
-  .split-panel-divider wa-icon {
-    position: absolute;
-    border-radius: var(--wa-corners-l);
-    background: var(--wa-color-red-50);
-    color: white;
-    padding: 0.5rem 0.25rem;
-  }
-
-  .split-panel-divider wa-split-panel::part(divider):focus-visible {
-    background-color: var(--wa-color-blue-50);
-  }
-
-  .split-panel-divider wa-split-panel:focus-within wa-icon {
-    background-color: var(--wa-color-blue-50);
-    color: white;
-  }
-</style>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
-import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
-
-const css = `
-  .split-panel-divider wa-split-panel {
-    --divider-width: 4px;
-    }
-
-  .split-panel-divider wa-split-panel::part(divider) {
-    background-color: var(--wa-color-red-50);
-  }
-
-  .split-panel-divider wa-icon {
-    position: absolute;
-    border-radius: var(--wa-corners-xs);
-    background: var(--wa-color-red-50);
-    color: white;
-    padding: .5rem .25rem;
-  }
-
-  .split-panel-divider wa-split-panel::part(divider):focus-visible {
-    background-color: var(--wa-color-blue-50);
-  }
-
-  .split-panel-divider wa-split-panel:focus-within wa-icon {
-    background-color: var(--wa-color-blue-50);
-    color: white;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="split-panel-divider">
-      <WaSplitPanel>
-        <WaIcon slot="divider" name="grip-vertical" variant="solid" />
-        <div
-          slot="start"
-          style={{
-            height: '200px',
-            background: 'var(--wa-color-surface-lowered)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          Start
-        </div>
-        <div
-          slot="end"
-          style={{
-            height: '200px',
-            background: 'var(--wa-color-surface-lowered)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          End
-        </div>
-      </WaSplitPanel>
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}

docs/docs/components/switch.md

@@ -1,123 +0,0 @@
----
-title: Switch
-description: Switches allow the user to toggle an option on or off.
-layout: component.njk
----
-
-```html {.example}
-<wa-switch>Switch</wa-switch>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
-
-const App = () => <WaSwitch>Switch</WaSwitch>;
-```
-{% endraw %}
-
-:::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
-
-### Checked
-
-Use the `checked` attribute to activate the switch.
-
-```html {.example}
-<wa-switch checked>Checked</wa-switch>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
-
-const App = () => <WaSwitch checked>Checked</WaSwitch>;
-```
-{% endraw %}
-
-### Disabled
-
-Use the `disabled` attribute to disable the switch.
-
-```html {.example}
-<wa-switch disabled>Disabled</wa-switch>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
-
-const App = () => <WaSwitch disabled>Disabled</WaSwitch>;
-```
-{% endraw %}
-
-### Sizes
-
-Use the `size` attribute to change a switch's size.
-
-```html {.example}
-<wa-switch size="small">Small</wa-switch>
-<br />
-<wa-switch size="medium">Medium</wa-switch>
-<br />
-<wa-switch size="large">Large</wa-switch>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
-
-const App = () => (
-  <>
-    <WaSwitch size="small">Small</WaSwitch>
-    <br />
-    <WaSwitch size="medium">Medium</WaSwitch>
-    <br />
-    <WaSwitch size="large">Large</WaSwitch>
-  </>
-);
-```
-{% endraw %}
-
-### Help Text
-
-Add descriptive help text to a switch with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
-
-```html {.example}
-<wa-switch help-text="What should the user know about the switch?">Label</wa-switch>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSwitch from '@shoelace-style/shoelace/dist/react/checkbox';
-
-const App = () => <WaSwitch help-text="What should the user know about the switch?">Label</WaSwitch>;
-```
-{% endraw %}
-
-### Custom Styles
-
-Use the available custom properties to change how the switch is styled.
-
-```html {.example}
-<wa-switch style="--width: 80px; --height: 40px; --thumb-size: 36px;">Really big</wa-switch>
-```
-
-{% raw %}
-```jsx {.react}
-import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
-
-const App = () => (
-  <WaSwitch
-    style={{
-      '--width': '80px',
-      '--height': '32px',
-      '--thumb-size': '26px'
-    }}
-  />
-);
-```
-{% endraw %}

docs/docs/components/tab-group.md

@@ -1,501 +0,0 @@
----
-title: Tab Group
-description: Tab groups organize content into a container that shows one section at a time.
-layout: component.njk
----
-
-Tab groups make use of [tabs](/components/tab) and [tab panels](/components/tab-panel). Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.
-
-```html {.example}
-<wa-tab-group>
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
-
-  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
-  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
-  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
-  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
-</wa-tab-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTab from '@shoelace-style/shoelace/dist/react/tab';
-import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
-import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
-
-const App = () => (
-  <WaTabGroup>
-    <WaTab slot="nav" panel="general">
-      General
-    </WaTab>
-    <WaTab slot="nav" panel="custom">
-      Custom
-    </WaTab>
-    <WaTab slot="nav" panel="advanced">
-      Advanced
-    </WaTab>
-    <WaTab slot="nav" panel="disabled" disabled>
-      Disabled
-    </WaTab>
-
-    <WaTabPanel name="general">This is the general tab panel.</WaTabPanel>
-    <WaTabPanel name="custom">This is the custom tab panel.</WaTabPanel>
-    <WaTabPanel name="advanced">This is the advanced tab panel.</WaTabPanel>
-    <WaTabPanel name="disabled">This is a disabled tab panel.</WaTabPanel>
-  </WaTabGroup>
-);
-```
-{% endraw %}
-
-## Examples
-
-### Setting the Active Tab
-
-To make a tab active, set the `active` attribute to the name of the appropriate panel.
-
-```html {.example}
-<wa-tab-group active="advanced">
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-
-  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
-  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
-  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
-</wa-tab-group>
-```
-
-### Tabs on Bottom
-
-Tabs can be shown on the bottom by setting `placement` to `bottom`.
-
-```html {.example}
-<wa-tab-group placement="bottom">
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
-
-  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
-  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
-  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
-  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
-</wa-tab-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTab from '@shoelace-style/shoelace/dist/react/tab';
-import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
-import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
-
-const App = () => (
-  <WaTabGroup placement="bottom">
-    <WaTab slot="nav" panel="general">
-      General
-    </WaTab>
-    <WaTab slot="nav" panel="custom">
-      Custom
-    </WaTab>
-    <WaTab slot="nav" panel="advanced">
-      Advanced
-    </WaTab>
-    <WaTab slot="nav" panel="disabled" disabled>
-      Disabled
-    </WaTab>
-
-    <WaTabPanel name="general">This is the general tab panel.</WaTabPanel>
-    <WaTabPanel name="custom">This is the custom tab panel.</WaTabPanel>
-    <WaTabPanel name="advanced">This is the advanced tab panel.</WaTabPanel>
-    <WaTabPanel name="disabled">This is a disabled tab panel.</WaTabPanel>
-  </WaTabGroup>
-);
-```
-{% endraw %}
-
-### Tabs on Start
-
-Tabs can be shown on the starting side by setting `placement` to `start`.
-
-```html {.example}
-<wa-tab-group placement="start">
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
-
-  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
-  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
-  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
-  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
-</wa-tab-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTab from '@shoelace-style/shoelace/dist/react/tab';
-import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
-import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
-
-const App = () => (
-  <WaTabGroup placement="start">
-    <WaTab slot="nav" panel="general">
-      General
-    </WaTab>
-    <WaTab slot="nav" panel="custom">
-      Custom
-    </WaTab>
-    <WaTab slot="nav" panel="advanced">
-      Advanced
-    </WaTab>
-    <WaTab slot="nav" panel="disabled" disabled>
-      Disabled
-    </WaTab>
-
-    <WaTabPanel name="general">This is the general tab panel.</WaTabPanel>
-    <WaTabPanel name="custom">This is the custom tab panel.</WaTabPanel>
-    <WaTabPanel name="advanced">This is the advanced tab panel.</WaTabPanel>
-    <WaTabPanel name="disabled">This is a disabled tab panel.</WaTabPanel>
-  </WaTabGroup>
-);
-```
-{% endraw %}
-
-### Tabs on End
-
-Tabs can be shown on the ending side by setting `placement` to `end`.
-
-```html {.example}
-<wa-tab-group placement="end">
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
-
-  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
-  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
-  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
-  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
-</wa-tab-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTab from '@shoelace-style/shoelace/dist/react/tab';
-import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
-import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
-
-const App = () => (
-  <WaTabGroup placement="end">
-    <WaTab slot="nav" panel="general">
-      General
-    </WaTab>
-    <WaTab slot="nav" panel="custom">
-      Custom
-    </WaTab>
-    <WaTab slot="nav" panel="advanced">
-      Advanced
-    </WaTab>
-    <WaTab slot="nav" panel="disabled" disabled>
-      Disabled
-    </WaTab>
-
-    <WaTabPanel name="general">This is the general tab panel.</WaTabPanel>
-    <WaTabPanel name="custom">This is the custom tab panel.</WaTabPanel>
-    <WaTabPanel name="advanced">This is the advanced tab panel.</WaTabPanel>
-    <WaTabPanel name="disabled">This is a disabled tab panel.</WaTabPanel>
-  </WaTabGroup>
-);
-```
-{% endraw %}
-
-### Closable Tabs
-
-You can make a tab closable by adding a close button next to the tab and inside the `nav` slot. You can position the button to your liking with CSS and handle close/restore behaviors by removing/appending the tab as desired. Note the use of `tabindex="-1"`, which prevents the close button from interfering with the tab order. The close button is still recognizable to the virtual cursor in screen readers.
-
-```html {.example}
-<wa-tab-group class="tabs-closable">
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="closable">Closable</wa-tab>
-  <wa-icon-button slot="nav" tabindex="-1" name="xmark" label="Close the closable tab"></wa-icon-button>
-  <wa-tab slot="nav" panel="closable-2">Advanced</wa-tab>
-
-  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
-  <wa-tab-panel name="closable">This is the closable tab panel.</wa-tab-panel>
-  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
-</wa-tab-group>
-
-<br>
-
-<wa-button disabled>Restore tab</wa-button>
-
-<style>
-  .tabs-closable wa-icon-button {
-    position: relative;
-    left: -1rem;
-    top: .75rem;  }
-</style>
-
-<script>
-  const tabGroup = document.querySelector('.tabs-closable');
-  const generalTab = tabGroup.querySelectorAll('wa-tab')[0];
-  const closableTab = tabGroup.querySelectorAll('wa-tab')[1];
-  const closeButton = tabGroup.querySelector('wa-icon-button[slot="nav"]');
-  const restoreButton = tabGroup.nextElementSibling.nextElementSibling;
-  
-  // Remove the tab when the close button is clicked
-  closeButton.addEventListener('click', () => {
-    closableTab.remove();
-    closeButton.remove();
-    restoreButton.disabled = false;
-  });
-
-  // Restore the tab
-  restoreButton.addEventListener('click', () => {
-    restoreButton.disabled = true;
-    generalTab.insertAdjacentElement('afterend', closeButton);
-    generalTab.insertAdjacentElement('afterend', closableTab);
-  })
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTab from '@shoelace-style/shoelace/dist/react/tab';
-import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
-import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
-
-const App = () => {
-  function handleClose(event) {
-    //
-    // This is a crude example that removes the tab and its panel from the DOM.
-    // There are better ways to manage tab creation/removal in React, but that
-    // would significantly complicate the example.
-    //
-    const tab = event.target;
-    const tabGroup = tab.closest('wa-tab-group');
-    const tabPanel = tabGroup.querySelector(`[aria-labelledby="${tab.id}"]`);
-
-    tab.remove();
-    tabPanel.remove();
-  }
-
-  return (
-    <WaTabGroup className="tabs-closable" onWaClose={handleClose}>
-      <WaTab slot="nav" panel="general">
-        General
-      </WaTab>
-      <WaTab slot="nav" panel="closable-1" closable onWaClose={handleClose}>
-        Closable 1
-      </WaTab>
-      <WaTab slot="nav" panel="closable-2" closable onWaClose={handleClose}>
-        Closable 2
-      </WaTab>
-      <WaTab slot="nav" panel="closable-3" closable onWaClose={handleClose}>
-        Closable 3
-      </WaTab>
-
-      <WaTabPanel name="general">This is the general tab panel.</WaTabPanel>
-      <WaTabPanel name="closable-1">This is the first closable tab panel.</WaTabPanel>
-      <WaTabPanel name="closable-2">This is the second closable tab panel.</WaTabPanel>
-      <WaTabPanel name="closable-3">This is the third closable tab panel.</WaTabPanel>
-    </WaTabGroup>
-  );
-};
-```
-{% endraw %}
-
-### Scrolling Tabs
-
-When there are more tabs than horizontal space allows, the nav will be scrollable.
-
-```html {.example}
-<wa-tab-group>
-  <wa-tab slot="nav" panel="tab-1">Tab 1</wa-tab>
-  <wa-tab slot="nav" panel="tab-2">Tab 2</wa-tab>
-  <wa-tab slot="nav" panel="tab-3">Tab 3</wa-tab>
-  <wa-tab slot="nav" panel="tab-4">Tab 4</wa-tab>
-  <wa-tab slot="nav" panel="tab-5">Tab 5</wa-tab>
-  <wa-tab slot="nav" panel="tab-6">Tab 6</wa-tab>
-  <wa-tab slot="nav" panel="tab-7">Tab 7</wa-tab>
-  <wa-tab slot="nav" panel="tab-8">Tab 8</wa-tab>
-  <wa-tab slot="nav" panel="tab-9">Tab 9</wa-tab>
-  <wa-tab slot="nav" panel="tab-10">Tab 10</wa-tab>
-  <wa-tab slot="nav" panel="tab-11">Tab 11</wa-tab>
-  <wa-tab slot="nav" panel="tab-12">Tab 12</wa-tab>
-  <wa-tab slot="nav" panel="tab-13">Tab 13</wa-tab>
-  <wa-tab slot="nav" panel="tab-14">Tab 14</wa-tab>
-  <wa-tab slot="nav" panel="tab-15">Tab 15</wa-tab>
-  <wa-tab slot="nav" panel="tab-16">Tab 16</wa-tab>
-  <wa-tab slot="nav" panel="tab-17">Tab 17</wa-tab>
-  <wa-tab slot="nav" panel="tab-18">Tab 18</wa-tab>
-  <wa-tab slot="nav" panel="tab-19">Tab 19</wa-tab>
-  <wa-tab slot="nav" panel="tab-20">Tab 20</wa-tab>
-
-  <wa-tab-panel name="tab-1">Tab panel 1</wa-tab-panel>
-  <wa-tab-panel name="tab-2">Tab panel 2</wa-tab-panel>
-  <wa-tab-panel name="tab-3">Tab panel 3</wa-tab-panel>
-  <wa-tab-panel name="tab-4">Tab panel 4</wa-tab-panel>
-  <wa-tab-panel name="tab-5">Tab panel 5</wa-tab-panel>
-  <wa-tab-panel name="tab-6">Tab panel 6</wa-tab-panel>
-  <wa-tab-panel name="tab-7">Tab panel 7</wa-tab-panel>
-  <wa-tab-panel name="tab-8">Tab panel 8</wa-tab-panel>
-  <wa-tab-panel name="tab-9">Tab panel 9</wa-tab-panel>
-  <wa-tab-panel name="tab-10">Tab panel 10</wa-tab-panel>
-  <wa-tab-panel name="tab-11">Tab panel 11</wa-tab-panel>
-  <wa-tab-panel name="tab-12">Tab panel 12</wa-tab-panel>
-  <wa-tab-panel name="tab-13">Tab panel 13</wa-tab-panel>
-  <wa-tab-panel name="tab-14">Tab panel 14</wa-tab-panel>
-  <wa-tab-panel name="tab-15">Tab panel 15</wa-tab-panel>
-  <wa-tab-panel name="tab-16">Tab panel 16</wa-tab-panel>
-  <wa-tab-panel name="tab-17">Tab panel 17</wa-tab-panel>
-  <wa-tab-panel name="tab-18">Tab panel 18</wa-tab-panel>
-  <wa-tab-panel name="tab-19">Tab panel 19</wa-tab-panel>
-  <wa-tab-panel name="tab-20">Tab panel 20</wa-tab-panel>
-</wa-tab-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTab from '@shoelace-style/shoelace/dist/react/tab';
-import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
-import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
-
-const App = () => (
-  <WaTabGroup>
-    <WaTab slot="nav" panel="tab-1">
-      Tab 1
-    </WaTab>
-    <WaTab slot="nav" panel="tab-2">
-      Tab 2
-    </WaTab>
-    <WaTab slot="nav" panel="tab-3">
-      Tab 3
-    </WaTab>
-    <WaTab slot="nav" panel="tab-4">
-      Tab 4
-    </WaTab>
-    <WaTab slot="nav" panel="tab-5">
-      Tab 5
-    </WaTab>
-    <WaTab slot="nav" panel="tab-6">
-      Tab 6
-    </WaTab>
-    <WaTab slot="nav" panel="tab-7">
-      Tab 7
-    </WaTab>
-    <WaTab slot="nav" panel="tab-8">
-      Tab 8
-    </WaTab>
-    <WaTab slot="nav" panel="tab-9">
-      Tab 9
-    </WaTab>
-    <WaTab slot="nav" panel="tab-10">
-      Tab 10
-    </WaTab>
-    <WaTab slot="nav" panel="tab-11">
-      Tab 11
-    </WaTab>
-    <WaTab slot="nav" panel="tab-12">
-      Tab 12
-    </WaTab>
-    <WaTab slot="nav" panel="tab-13">
-      Tab 13
-    </WaTab>
-    <WaTab slot="nav" panel="tab-14">
-      Tab 14
-    </WaTab>
-    <WaTab slot="nav" panel="tab-15">
-      Tab 15
-    </WaTab>
-    <WaTab slot="nav" panel="tab-16">
-      Tab 16
-    </WaTab>
-    <WaTab slot="nav" panel="tab-17">
-      Tab 17
-    </WaTab>
-    <WaTab slot="nav" panel="tab-18">
-      Tab 18
-    </WaTab>
-    <WaTab slot="nav" panel="tab-19">
-      Tab 19
-    </WaTab>
-    <WaTab slot="nav" panel="tab-20">
-      Tab 20
-    </WaTab>
-
-    <WaTabPanel name="tab-1">Tab panel 1</WaTabPanel>
-    <WaTabPanel name="tab-2">Tab panel 2</WaTabPanel>
-    <WaTabPanel name="tab-3">Tab panel 3</WaTabPanel>
-    <WaTabPanel name="tab-4">Tab panel 4</WaTabPanel>
-    <WaTabPanel name="tab-5">Tab panel 5</WaTabPanel>
-    <WaTabPanel name="tab-6">Tab panel 6</WaTabPanel>
-    <WaTabPanel name="tab-7">Tab panel 7</WaTabPanel>
-    <WaTabPanel name="tab-8">Tab panel 8</WaTabPanel>
-    <WaTabPanel name="tab-9">Tab panel 9</WaTabPanel>
-    <WaTabPanel name="tab-10">Tab panel 10</WaTabPanel>
-    <WaTabPanel name="tab-11">Tab panel 11</WaTabPanel>
-    <WaTabPanel name="tab-12">Tab panel 12</WaTabPanel>
-    <WaTabPanel name="tab-13">Tab panel 13</WaTabPanel>
-    <WaTabPanel name="tab-14">Tab panel 14</WaTabPanel>
-    <WaTabPanel name="tab-15">Tab panel 15</WaTabPanel>
-    <WaTabPanel name="tab-16">Tab panel 16</WaTabPanel>
-    <WaTabPanel name="tab-17">Tab panel 17</WaTabPanel>
-    <WaTabPanel name="tab-18">Tab panel 18</WaTabPanel>
-    <WaTabPanel name="tab-19">Tab panel 19</WaTabPanel>
-    <WaTabPanel name="tab-20">Tab panel 20</WaTabPanel>
-  </WaTabGroup>
-);
-```
-{% endraw %}
-
-### Manual Activation
-
-When focused, keyboard users can press [[Left]] or [[Right]] to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behavior by setting `activation="manual"` which will require the user to press [[Space]] or [[Enter]] before showing the tab panel (manual activation).
-
-```html {.example}
-<wa-tab-group activation="manual">
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
-
-  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
-  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
-  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
-  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
-</wa-tab-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTab from '@shoelace-style/shoelace/dist/react/tab';
-import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
-import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
-
-const App = () => (
-  <WaTabGroup activation="manual">
-    <WaTab slot="nav" panel="general">
-      General
-    </WaTab>
-    <WaTab slot="nav" panel="custom">
-      Custom
-    </WaTab>
-    <WaTab slot="nav" panel="advanced">
-      Advanced
-    </WaTab>
-    <WaTab slot="nav" panel="disabled" disabled>
-      Disabled
-    </WaTab>
-
-    <WaTabPanel name="general">This is the general tab panel.</WaTabPanel>
-    <WaTabPanel name="custom">This is the custom tab panel.</WaTabPanel>
-    <WaTabPanel name="advanced">This is the advanced tab panel.</WaTabPanel>
-    <WaTabPanel name="disabled">This is a disabled tab panel.</WaTabPanel>
-  </WaTabGroup>
-);
-```
-{% endraw %}

docs/docs/components/tab-panel.md

@@ -1,53 +0,0 @@
----
-title: Tab Panel
-description: Tab panels are used inside tab groups to display tabbed content.
-layout: component.njk
----
-
-```html {.example}
-<wa-tab-group>
-  <wa-tab slot="nav" panel="general">General</wa-tab>
-  <wa-tab slot="nav" panel="custom">Custom</wa-tab>
-  <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
-  <wa-tab slot="nav" panel="disabled" disabled>Disabled</wa-tab>
-
-  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
-  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
-  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
-  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
-</wa-tab-group>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTab from '@shoelace-style/shoelace/dist/react/tab';
-import WaTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
-import WaTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
-
-const App = () => (
-  <WaTabGroup>
-    <WaTab slot="nav" panel="general">
-      General
-    </WaTab>
-    <WaTab slot="nav" panel="custom">
-      Custom
-    </WaTab>
-    <WaTab slot="nav" panel="advanced">
-      Advanced
-    </WaTab>
-    <WaTab slot="nav" panel="disabled" disabled>
-      Disabled
-    </WaTab>
-
-    <WaTabPanel name="general">This is the general tab panel.</WaTabPanel>
-    <WaTabPanel name="custom">This is the custom tab panel.</WaTabPanel>
-    <WaTabPanel name="advanced">This is the advanced tab panel.</WaTabPanel>
-    <WaTabPanel name="disabled">This is a disabled tab panel.</WaTabPanel>
-  </WaTabGroup>
-);
-```
-{% endraw %}
-
-:::info
-Additional demonstrations can be found in the [tab group examples](/components/tab-group).
-:::

docs/docs/components/tab.md

@@ -1,31 +0,0 @@
----
-title: Tab
-description: Tabs are used inside tab groups to represent and activate tab panels.
-layout: component.njk
----
-
-```html {.example}
-<wa-tab>Tab</wa-tab>
-<wa-tab active>Active</wa-tab>
-<wa-tab closable>Closable</wa-tab>
-<wa-tab disabled>Disabled</wa-tab>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTab from '@shoelace-style/shoelace/dist/react/tab';
-
-const App = () => (
-  <>
-    <WaTab>Tab</WaTab>
-    <WaTab active>Active</WaTab>
-    <WaTab closable>Closable</WaTab>
-    <WaTab disabled>Disabled</WaTab>
-  </>
-);
-```
-{% endraw %}
-
-:::info
-Additional demonstrations can be found in the [tab group examples](/components/tab-group).
-:::

docs/docs/components/tag.md

@@ -1,153 +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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTag from '@shoelace-style/shoelace/dist/react/tag';
-
-const App = () => (
-  <>
-    <WaTag variant="brand">Brand</WaTag>
-    <WaTag variant="success">Success</WaTag>
-    <WaTag variant="neutral">Neutral</WaTag>
-    <WaTag variant="warning">Warning</WaTag>
-    <WaTag variant="danger">Danger</WaTag>
-  </>
-);
-```
-{% endraw %}
-
-## 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTag from '@shoelace-style/shoelace/dist/react/tag';
-
-const App = () => (
-  <>
-    <WaTag size="small">Small</WaTag>
-    <WaTag size="medium">Medium</WaTag>
-    <WaTag size="large">Large</WaTag>
-  </>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTag from '@shoelace-style/shoelace/dist/react/tag';
-
-const App = () => (
-  <>
-    <WaTag size="small" pill>
-      Small
-    </WaTag>
-    <WaTag size="medium" pill>
-      Medium
-    </WaTag>
-    <WaTag size="large" pill>
-      Large
-    </WaTag>
-  </>
-);
-```
-{% endraw %}
-
-### 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>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTag from '@shoelace-style/shoelace/dist/react/tag';
-
-const css = `
-  .tags-removable wa-tag {
-    transition: var(--wa-transition-fast) opacity;
-  }
-`;
-
-const App = () => {
-  function handleRemove(event) {
-    const tag = event.target;
-    tag.style.opacity = '0';
-    setTimeout(() => (tag.style.opacity = '1'), 2000);
-  }
-
-  return (
-    <>
-      <div className="tags-removable">
-        <WaTag size="small" removable onWaRemove={handleRemove}>
-          Small
-        </WaTag>
-
-        <WaTag size="medium" removable onWaRemove={handleRemove}>
-          Medium
-        </WaTag>
-
-        <WaTag size="large" removable onWaRemove={handleRemove}>
-          Large
-        </WaTag>
-      </div>
-
-      <style>{css}</style>
-    </>
-  );
-};
-```
-{% endraw %}

docs/docs/components/textarea.md

@@ -1,179 +0,0 @@
----
-title: Textarea
-description: Textareas collect data from the user and allow multiple lines of text.
-layout: component.njk
----
-
-```html {.example}
-<wa-textarea></wa-textarea>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';
-
-const App = () => <WaTextarea />;
-```
-{% endraw %}
-
-:::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
-
-### Labels
-
-Use the `label` attribute to give the textarea an accessible label. For labels that contain HTML, use the `label` slot instead.
-
-```html {.example}
-<wa-textarea label="Comments"></wa-textarea>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';
-
-const App = () => <WaTextarea label="Comments" />;
-```
-{% endraw %}
-
-### Help Text
-
-Add descriptive help text to a textarea with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
-
-```html {.example}
-<wa-textarea label="Feedback" help-text="Please tell us what you think."> </wa-textarea>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';
-
-const App = () => <WaTextarea label="Feedback" help-text="Please tell us what you think." />;
-```
-{% endraw %}
-
-### Rows
-
-Use the `rows` attribute to change the number of text rows that get shown.
-
-```html {.example}
-<wa-textarea rows="2"></wa-textarea>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';
-
-const App = () => <WaTextarea rows={2} />;
-```
-{% endraw %}
-
-### Placeholders
-
-Use the `placeholder` attribute to add a placeholder.
-
-```html {.example}
-<wa-textarea placeholder="Type something"></wa-textarea>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';
-
-const App = () => <WaTextarea placeholder="Type something" />;
-```
-{% endraw %}
-
-### Filled Textareas
-
-Add the `filled` attribute to draw a filled textarea.
-
-```html {.example}
-<wa-textarea placeholder="Type something" filled></wa-textarea>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';
-
-const App = () => <WaTextarea placeholder="Type something" filled />;
-```
-{% endraw %}
-
-### Disabled
-
-Use the `disabled` attribute to disable a textarea.
-
-```html {.example}
-<wa-textarea placeholder="Textarea" disabled></wa-textarea>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';
-
-const App = () => <WaTextarea placeholder="Textarea" disabled />;
-```
-{% endraw %}
-
-### Sizes
-
-Use the `size` attribute to change a textarea's size.
-
-```html {.example}
-<wa-textarea placeholder="Small" size="small"></wa-textarea>
-<br />
-<wa-textarea placeholder="Medium" size="medium"></wa-textarea>
-<br />
-<wa-textarea placeholder="Large" size="large"></wa-textarea>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';
-
-const App = () => (
-  <>
-    <WaTextarea placeholder="Small" size="small"></WaTextarea>
-    <br />
-    <WaTextarea placeholder="Medium" size="medium"></WaTextarea>
-    <br />
-    <WaTextarea placeholder="Large" size="large"></WaTextarea>
-  </>
-);
-```
-{% endraw %}
-
-### Prevent Resizing
-
-By default, textareas can be resized vertically by the user. To prevent resizing, set the `resize` attribute to `none`.
-
-```html {.example}
-<wa-textarea resize="none"></wa-textarea>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';
-
-const App = () => <WaTextarea resize="none" />;
-```
-{% endraw %}
-
-### Expand with Content
-
-Textareas will automatically resize to expand to fit their content when `resize` is set to `auto`.
-
-```html {.example}
-<wa-textarea resize="auto"></wa-textarea>
-```
-
-{% raw %}
-```jsx {.react}
-import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';
-
-const App = () => <WaTextarea resize="auto" />;
-```
-{% endraw %}

docs/docs/components/tooltip.md

@@ -1,443 +0,0 @@
----
-title: Tooltip
-description: Tooltips display additional information based on a specific action.
-layout: component.njk
----
-
-A tooltip's target is its _first child element_, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.
-
-Tooltips use `display: contents` so they won't interfere with how elements are positioned in a flex or grid layout.
-
-```html {.example}
-<wa-tooltip content="This is a tooltip">
-  <wa-button>Hover Me</wa-button>
-</wa-tooltip>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
-
-const App = () => (
-  <WaTooltip content="This is a tooltip">
-    <WaButton>Hover Me</WaButton>
-  </WaTooltip>
-);
-```
-{% endraw %}
-
-## Examples
-
-### Placement
-
-Use the `placement` attribute to set the preferred placement of the tooltip.
-
-```html {.example}
-<div class="tooltip-placement-example">
-  <div class="tooltip-placement-example-row">
-    <wa-tooltip content="top-start" placement="top-start">
-      <wa-button></wa-button>
-    </wa-tooltip>
-
-    <wa-tooltip content="top" placement="top">
-      <wa-button></wa-button>
-    </wa-tooltip>
-
-    <wa-tooltip content="top-end" placement="top-end">
-      <wa-button></wa-button>
-    </wa-tooltip>
-  </div>
-
-  <div class="tooltip-placement-example-row">
-    <wa-tooltip content="left-start" placement="left-start">
-      <wa-button></wa-button>
-    </wa-tooltip>
-
-    <wa-tooltip content="right-start" placement="right-start">
-      <wa-button></wa-button>
-    </wa-tooltip>
-  </div>
-
-  <div class="tooltip-placement-example-row">
-    <wa-tooltip content="left" placement="left">
-      <wa-button></wa-button>
-    </wa-tooltip>
-
-    <wa-tooltip content="right" placement="right">
-      <wa-button></wa-button>
-    </wa-tooltip>
-  </div>
-
-  <div class="tooltip-placement-example-row">
-    <wa-tooltip content="left-end" placement="left-end">
-      <wa-button></wa-button>
-    </wa-tooltip>
-
-    <wa-tooltip content="right-end" placement="right-end">
-      <wa-button></wa-button>
-    </wa-tooltip>
-  </div>
-
-  <div class="tooltip-placement-example-row">
-    <wa-tooltip content="bottom-start" placement="bottom-start">
-      <wa-button></wa-button>
-    </wa-tooltip>
-
-    <wa-tooltip content="bottom" placement="bottom">
-      <wa-button></wa-button>
-    </wa-tooltip>
-
-    <wa-tooltip content="bottom-end" placement="bottom-end">
-      <wa-button></wa-button>
-    </wa-tooltip>
-  </div>
-</div>
-
-<style>
-  .tooltip-placement-example {
-    width: 250px;
-    margin: 1rem;
-  }
-
-  .tooltip-placement-example-row:after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-
-  .tooltip-placement-example wa-button {
-    float: left;
-    width: 2.5rem;
-    margin-right: 0.25rem;
-    margin-bottom: 0.25rem;
-  }
-
-  .tooltip-placement-example-row:nth-child(1) wa-tooltip:first-child wa-button,
-  .tooltip-placement-example-row:nth-child(5) wa-tooltip:first-child wa-button {
-    margin-left: calc(40px + 0.25rem);
-  }
-
-  .tooltip-placement-example-row:nth-child(2) wa-tooltip:nth-child(2) wa-button,
-  .tooltip-placement-example-row:nth-child(3) wa-tooltip:nth-child(2) wa-button,
-  .tooltip-placement-example-row:nth-child(4) wa-tooltip:nth-child(2) wa-button {
-    margin-left: calc((40px * 3) + (0.25rem * 3));
-  }
-</style>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
-
-const css = `
-  .tooltip-placement-example {
-    width: 250px;
-  }
-
-  .tooltip-placement-example-row:after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-
-  .tooltip-placement-example wa-button {
-    float: left;
-    width: 2.5rem;
-    margin-right: 0.25rem;
-    margin-bottom: 0.25rem;
-  }
-
-  .tooltip-placement-example-row:nth-child(1) wa-tooltip:first-child wa-button,
-  .tooltip-placement-example-row:nth-child(5) wa-tooltip:first-child wa-button {
-    margin-left: calc(40px + 0.25rem);
-  }
-
-  .tooltip-placement-example-row:nth-child(2) wa-tooltip:nth-child(2) wa-button,
-  .tooltip-placement-example-row:nth-child(3) wa-tooltip:nth-child(2) wa-button,
-  .tooltip-placement-example-row:nth-child(4) wa-tooltip:nth-child(2) wa-button {
-    margin-left: calc((40px * 3) + (0.25rem * 3));
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="tooltip-placement-example">
-      <div className="tooltip-placement-example-row">
-        <WaTooltip content="top-start" placement="top-start">
-          <WaButton />
-        </WaTooltip>
-
-        <WaTooltip content="top" placement="top">
-          <WaButton />
-        </WaTooltip>
-
-        <WaTooltip content="top-end" placement="top-end">
-          <WaButton />
-        </WaTooltip>
-      </div>
-
-      <div className="tooltip-placement-example-row">
-        <WaTooltip content="left-start" placement="left-start">
-          <WaButton />
-        </WaTooltip>
-
-        <WaTooltip content="right-start" placement="right-start">
-          <WaButton />
-        </WaTooltip>
-      </div>
-
-      <div className="tooltip-placement-example-row">
-        <WaTooltip content="left" placement="left">
-          <WaButton />
-        </WaTooltip>
-
-        <WaTooltip content="right" placement="right">
-          <WaButton />
-        </WaTooltip>
-      </div>
-
-      <div className="tooltip-placement-example-row">
-        <WaTooltip content="left-end" placement="left-end">
-          <WaButton />
-        </WaTooltip>
-
-        <WaTooltip content="right-end" placement="right-end">
-          <WaButton />
-        </WaTooltip>
-      </div>
-
-      <div className="tooltip-placement-example-row">
-        <WaTooltip content="bottom-start" placement="bottom-start">
-          <WaButton />
-        </WaTooltip>
-
-        <WaTooltip content="bottom" placement="bottom">
-          <WaButton />
-        </WaTooltip>
-
-        <WaTooltip content="bottom-end" placement="bottom-end">
-          <WaButton />
-        </WaTooltip>
-      </div>
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}
-
-### Click Trigger
-
-Set the `trigger` attribute to `click` to toggle the tooltip on click instead of hover.
-
-```html {.example}
-<wa-tooltip content="Click again to dismiss" trigger="click">
-  <wa-button>Click to Toggle</wa-button>
-</wa-tooltip>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
-
-const App = () => (
-  <WaTooltip content="Click again to dismiss" trigger="click">
-    <WaButton>Click to Toggle</WaButton>
-  </WaTooltip>
-);
-```
-{% endraw %}
-
-### Manual Trigger
-
-Tooltips can be controller programmatically by setting the `trigger` attribute to `manual`. Use the `open` attribute to control when the tooltip is shown.
-
-```html {.example}
-<wa-button style="margin-right: 4rem;">Toggle Manually</wa-button>
-
-<wa-tooltip content="This is an avatar" trigger="manual" class="manual-tooltip">
-  <wa-avatar label="User"></wa-avatar>
-</wa-tooltip>
-
-<script>
-  const tooltip = document.querySelector('.manual-tooltip');
-  const toggle = tooltip.previousElementSibling;
-
-  toggle.addEventListener('click', () => (tooltip.open = !tooltip.open));
-</script>
-```
-
-{% raw %}
-```jsx {.react}
-import { useState } from 'react';
-import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar';
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <WaButton style={{ marginRight: '4rem' }} onClick={() => setOpen(!open)}>
-        Toggle Manually
-      </WaButton>
-
-      <WaTooltip open={open} content="This is an avatar" trigger="manual">
-        <WaAvatar />
-      </WaTooltip>
-    </>
-  );
-};
-```
-{% endraw %}
-
-### Removing Arrows
-
-You can control the size of tooltip arrows by overriding the `--wa-tooltip-arrow-size` design token. To remove them, set the value to `0` as shown below.
-
-```html {.example}
-<wa-tooltip content="This is a tooltip" style="--wa-tooltip-arrow-size: 0;">
-  <wa-button>No Arrow</wa-button>
-</wa-tooltip>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
-
-const App = () => (
-  <div style={{ '--wa-tooltip-arrow-size': '0' }}>
-    <WaTooltip content="This is a tooltip">
-      <WaButton>Above</WaButton>
-    </WaTooltip>
-
-    <WaTooltip content="This is a tooltip" placement="bottom">
-      <WaButton>Below</WaButton>
-    </WaTooltip>
-  </div>
-);
-```
-{% endraw %}
-
-To override it globally, set it in a root block in your stylesheet after the Web Awesome stylesheet is loaded.
-
-```css
-:root {
-  --wa-tooltip-arrow-size: 0;
-}
-```
-
-### HTML in Tooltips
-
-Use the `content` slot to create tooltips with HTML content. Tooltips are designed only for text and presentational elements. Avoid placing interactive content, such as buttons, links, and form controls, in a tooltip.
-
-```html {.example}
-<wa-tooltip>
-  <div slot="content">I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!</div>
-
-  <wa-button>Hover me</wa-button>
-</wa-tooltip>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
-
-const App = () => (
-  <WaTooltip>
-    <div slot="content">
-      I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
-    </div>
-
-    <WaButton>Hover Me</WaButton>
-  </WaTooltip>
-);
-```
-{% endraw %}
-
-### Setting a Maximum Width
-
-Use the `--max-width` custom property to change the width the tooltip can grow to before wrapping occurs.
-
-```html {.example}
-<wa-tooltip style="--max-width: 80px;" content="This tooltip will wrap after only 80 pixels.">
-  <wa-button>Hover me</wa-button>
-</wa-tooltip>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
-
-const App = () => (
-  <WaTooltip style={{ '--max-width': '80px' }} content="This tooltip will wrap after only 80 pixels.">
-    <WaButton>Hover Me</WaButton>
-  </WaTooltip>
-);
-```
-{% endraw %}
-
-### Hoisting
-
-Tooltips will be clipped if they're inside a container that has `overflow: auto|hidden|scroll`. The `hoist` attribute forces the tooltip to use a fixed positioning strategy, allowing it to break out of the container. In this case, the tooltip will be positioned relative to its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.
-
-```html {.example}
-<div class="tooltip-hoist">
-  <wa-tooltip content="This is a tooltip">
-    <wa-button>No Hoist</wa-button>
-  </wa-tooltip>
-
-  <wa-tooltip content="This is a tooltip" hoist>
-    <wa-button>Hoist</wa-button>
-  </wa-tooltip>
-</div>
-
-<style>
-  .tooltip-hoist {
-    position: relative;
-    border: solid 2px var(--wa-color-surface-border);
-    overflow: hidden;
-    padding: var(--wa-space-m);
-  }
-</style>
-```
-
-{% raw %}
-```jsx {.react}
-import WaButton from '@shoelace-style/shoelace/dist/react/button';
-import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
-
-const css = `
-  .tooltip-hoist {
-    border: solid 2px var(--wa-color-surface-border);
-    overflow: hidden;
-    padding: var(--wa-space-m);
-    position: relative;
-  }
-`;
-
-const App = () => (
-  <>
-    <div class="tooltip-hoist">
-      <WaTooltip content="This is a tooltip">
-        <WaButton>No Hoist</WaButton>
-      </WaTooltip>
-
-      <WaTooltip content="This is a tooltip" hoist>
-        <WaButton>Hoist</WaButton>
-      </WaTooltip>
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-{% endraw %}

docs/docs/components/tree-item.md

@@ -1,175 +0,0 @@
----
-title: Tree Item
-description: A tree item serves as a hierarchical node that lives inside a tree.
-layout: component.njk
----
-
-```html {.example}
-<wa-tree>
-  <wa-tree-item>
-    Item 1
-    <wa-tree-item>Item A</wa-tree-item>
-    <wa-tree-item>Item B</wa-tree-item>
-    <wa-tree-item>Item C</wa-tree-item>
-  </wa-tree-item>
-  <wa-tree-item>Item 2</wa-tree-item>
-  <wa-tree-item>Item 3</wa-tree-item>
-</wa-tree>
-```
-
-<!-- prettier-ignore -->
-{% raw %}
-```jsx {.react}
-import WaTree from '@shoelace-style/shoelace/dist/react/tree';
-import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
-
-const App = () => (
-  <WaTree>
-    <WaTreeItem>
-      Item 1
-      <WaTreeItem>Item A</WaTreeItem>
-      <WaTreeItem>Item B</WaTreeItem>
-      <WaTreeItem>Item C</WaTreeItem>
-    </WaTreeItem>
-    <WaTreeItem>Item 2</WaTreeItem>
-    <WaTreeItem>Item 3</WaTreeItem>
-  </WaTree>
-);
-```
-{% endraw %}
-
-## Examples
-
-### Nested tree items
-
-A tree item can contain other tree items. This allows the node to be expanded or collapsed by the user.
-
-```html {.example}
-<wa-tree>
-  <wa-tree-item>
-    Item 1
-    <wa-tree-item>
-      Item A
-      <wa-tree-item>Item Z</wa-tree-item>
-      <wa-tree-item>Item Y</wa-tree-item>
-      <wa-tree-item>Item X</wa-tree-item>
-    </wa-tree-item>
-    <wa-tree-item>Item B</wa-tree-item>
-    <wa-tree-item>Item C</wa-tree-item>
-  </wa-tree-item>
-  <wa-tree-item>Item 2</wa-tree-item>
-  <wa-tree-item>Item 3</wa-tree-item>
-</wa-tree>
-```
-
-<!-- prettier-ignore -->
-{% raw %}
-```jsx {.react}
-import WaTree from '@shoelace-style/shoelace/dist/react/tree';
-import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
-
-const App = () => (
-  <WaTree>
-    <WaTreeItem>
-      Item 1
-      <WaTreeItem>
-        Item A
-        <WaTreeItem>Item Z</WaTreeItem>
-        <WaTreeItem>Item Y</WaTreeItem>
-        <WaTreeItem>Item X</WaTreeItem>
-      </WaTreeItem>
-      <WaTreeItem>Item B</WaTreeItem>
-      <WaTreeItem>Item C</WaTreeItem>
-    </WaTreeItem>
-    <WaTreeItem>Item 2</WaTreeItem>
-    <WaTreeItem>Item 3</WaTreeItem>
-  </WaTree>
-);
-```
-{% endraw %}
-
-### Selected
-
-Use the `selected` attribute to select a tree item initially.
-
-```html {.example}
-<wa-tree>
-  <wa-tree-item selected>
-    Item 1
-    <wa-tree-item>Item A</wa-tree-item>
-    <wa-tree-item>Item B</wa-tree-item>
-    <wa-tree-item>Item C</wa-tree-item>
-  </wa-tree-item>
-  <wa-tree-item>Item 2</wa-tree-item>
-  <wa-tree-item>Item 3</wa-tree-item>
-</wa-tree>
-```
-
-<!-- prettier-ignore -->
-{% raw %}
-```jsx {.react}
-import WaTree from '@shoelace-style/shoelace/dist/react/tree';
-import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
-
-const App = () => (
-  <WaTree>
-    <WaTreeItem selected>
-      Item 1
-      <WaTreeItem>Item A</WaTreeItem>
-      <WaTreeItem>Item B</WaTreeItem>
-      <WaTreeItem>Item C</WaTreeItem>
-    </WaTreeItem>
-    <WaTreeItem>Item 2</WaTreeItem>
-    <WaTreeItem>Item 3</WaTreeItem>
-  </WaTree>
-);
-```
-{% endraw %}
-
-### Expanded
-
-Use the `expanded` attribute to expand a tree item initially.
-
-```html {.example}
-<wa-tree>
-  <wa-tree-item expanded>
-    Item 1
-    <wa-tree-item expanded>
-      Item A
-      <wa-tree-item>Item Z</wa-tree-item>
-      <wa-tree-item>Item Y</wa-tree-item>
-      <wa-tree-item>Item X</wa-tree-item>
-    </wa-tree-item>
-    <wa-tree-item>Item B</wa-tree-item>
-    <wa-tree-item>Item C</wa-tree-item>
-  </wa-tree-item>
-  <wa-tree-item>Item 2</wa-tree-item>
-  <wa-tree-item>Item 3</wa-tree-item>
-</wa-tree>
-```
-
-<!-- prettier-ignore -->
-{% raw %}
-```jsx {.react}
-import WaTree from '@shoelace-style/shoelace/dist/react/tree';
-import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
-
-const App = () => (
-  <WaTree>
-    <WaTreeItem expanded>
-      Item 1
-      <WaTreeItem expanded>
-        Item A
-        <WaTreeItem>Item Z</WaTreeItem>
-        <WaTreeItem>Item Y</WaTreeItem>
-        <WaTreeItem>Item X</WaTreeItem>
-      </WaTreeItem>
-      <WaTreeItem>Item B</WaTreeItem>
-      <WaTreeItem>Item C</WaTreeItem>
-    </WaTreeItem>
-    <WaTreeItem>Item 2</WaTreeItem>
-    <WaTreeItem>Item 3</WaTreeItem>
-  </WaTree>
-);
-```
-{% endraw %}

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

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

docs/docs/experimental/patterns.md

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

docs/docs/experimental/sandbox.md

@@ -1,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,195 +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/shoelace/%NPMDIR%"></script>
-
-<!-- Option 2: the setBasePath() method -->
-<script src="bundle.js"></script>
-<script type="module">
-  import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path.js';
-  setBasePath('/path/to/shoelace/%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 '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path.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>
-```
-
-## 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/shoelace/%NPMDIR%/themes/default.css" />
-
-<script type="module" data-webawesome="/path/to/shoelace/%NPMDIR%">
-  import '@shoelace-style/shoelace/%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 '@shoelace-style/webawesome/%NPMDIR%/themes/default.css';
-import '@shoelace-style/webawesome/%NPMDIR%/components/button/button.js';
-import '@shoelace-style/webawesome/%NPMDIR%/components/icon/icon.js';
-import '@shoelace-style/webawesome/%NPMDIR%/components/input/input.js';
-import '@shoelace-style/webawesome/%NPMDIR%/components/rating/rating.js';
-import { setBasePath } from '@shoelace-style/webawesome/%NPMDIR%/utilities/base-path.js';
-
-// Set the base path to the folder you copied Web Awesome's assets to
-setBasePath('/path/to/webawesome/%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:
-
-- `@shoelace-style/webawesome/%CDNDIR%` is for CDN users
-- `@shoelace-style/webawesome/%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
----