fix tooltip reconnection; closes #1595

* only show one tooltip in range mode; fixes #1320

* remove unused import

.editorconfig

@@ -1,4 +1,4 @@
-# http://editorconfig.org
+# https://editorconfig.org
 
 root = true
 

.github/CODE_OF_CONDUCT.md

@@ -35,7 +35,7 @@ This Code of Conduct applies within all project spaces, and it also applies when
 
 ## Enforcement
 
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at cory@abeautifulsite.net. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at support@fontawesome.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
 
 Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
 

.github/FUNDING.yml

@@ -1 +0,0 @@
-github: [claviska]

.github/ISSUE_TEMPLATE/bug_report.md

@@ -3,8 +3,7 @@ name: Bug Report
 about: Create a bug report to help us fix a demonstrable problem with code in the library.
 title: ''
 labels: bug
-assignees: claviska
-
+assignees: 
 ---
 
 ### Describe the bug
@@ -29,8 +28,8 @@ If applicable, add screenshots to help explain the bug.
 
 ### Browser / OS
  - OS: [e.g. Mac, Windows]
- - Browser [e.g. Chrome, Firefox, Safari]
- - Browser version [e.g. 22]
+ - Browser: [e.g. Chrome, Firefox, Safari]
+ - Browser version: [e.g. 22]
 
 ### Additional information
 Provide any additional information about the bug here.

.github/ISSUE_TEMPLATE/config.yml

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

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,17 +0,0 @@
----
-name: Feature Request
-about: Suggest an idea for this project.
-title: ''
-labels: feature
-assignees: claviska
-
----
-
-### What issue are you having?
-Provide a clear and concise description of the problem you're facing.
-
-### Describe the solution you'd like
-How would you like to see the library solve it?
-
-### Describe alternatives you've considered
-In what ways have you tried to solve this with the current version?

.github/SECURITY.md

@@ -1,7 +1,7 @@
 # Reporting Security Issues
 
-We take security issues in Shoelace very seriously and appreciate your efforts to disclose your findings responsibly.
+We take security issues in Web Awesome very seriously and appreciate your efforts to disclose your findings responsibly.
 
-To report a security issue, email [cory@abeautifulsite.net](mailto:cory@abeautifulsite.net) and include "SHOELACE SECURITY" in the subject line.
+To report a security issue, email [support@fontawesome.com](mailto:support@fontawesome.com) and include "WEB AWESOME SECURITY" in the subject line.
 
-Well respond as soon as possible and keep you updated throughout the process.
+We'll respond as soon as possible and keep you updated throughout the process.

.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: [14.x, 16.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
-        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,8 +1,12 @@
-.DS_Store
+_site
 .cache
-docs/dist
-docs/search.json
-dist
-examples
+.DS_Store
+dist/
+dist-cdn/
 node_modules
-src/react
+packages/**/*/src/react
+cdn/
+yarn.lock
+_bundle_
+/packages/webawesome-pro
+/packages/webawesome-app

.prettierignore

@@ -1,12 +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
-dist
-docs/*.md
-docs/search.json
-src/components/icon/icons
-src/react/index.ts
+cspell.json
+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-lock.json
-tsconfig.json
+
+packages/**/*/_site
+packages/webawesome/docs/assets/scripts/prism-downloaded.js

.vscode/extensions.json

@@ -1,9 +1,9 @@
 {
   "recommendations": [
-    "ms-vscode.vscode-typescript-tslint-plugin",
+    "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,4 +1,9 @@
 {
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.enable": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "debug.enableStatusBarColor": false
 }

CONTRIBUTING.md

@@ -1,5 +1,5 @@
-# Contributing to Shoelace
+# Contributing to Web Awesome
 
 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)

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) 2020 A Beautiful Site, LLC
+Copyright (c) 2023 Fonticons, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,6 +1,4 @@
-# Shoelace
-
-A forward-thinking library of web components.
+# Web Awesome
 
 - Works with all frameworks 🧩
 - Works with CDNs 🚛
@@ -9,86 +7,107 @@ A forward-thinking library of web components.
 - Built with accessibility in mind ♿️
 - Open source 😸
 
-Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
+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)
 
 ---
 
-## Shoemakers 🥾
+## Developers ✨
 
-Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace from source. You will need Node >= 14.15 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 Shoelace!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Shoelace.
+**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 Shoelace?
+### 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/shoelace
-cd shoelace
+git clone https://github.com/YOUR_GITHUB_USERNAME/webawesome
+cd webawesome
 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 Shoelace 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.
-
-The documentation is powered by Docsify, which uses raw markdown files to generate pages. As such, no static files are built for the docs.
+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 `sl-tag-name` with the desired tag name.
+To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
 
 ```bash
-npm run create sl-tag-name
+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
 
-Shoelace is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
+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
 
-Shoelace is designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It’s available under the terms of the MIT license.
-
-Designing, developing, and supporting this library requires a lot of time, effort, and skill. I’d like to keep it open source so everyone can use it, but that doesn’t provide me with any income.
-
-**Therefore, if you’re using my software to make a profit,** I respectfully ask that you help [fund its development](https://github.com/sponsors/claviska) by becoming a sponsor. There are multiple tiers to choose from with benefits at every level, including prioritized support, bug fixes, feature requests, and advertising.
-
-👇 Your support is very much appreciated! 👇
-
-- [Become a sponsor](https://github.com/sponsors/claviska)
-- [Star on GitHub](https://github.com/shoelace-style/shoelace/stargazers)
-- [Follow on Twitter](https://twitter.com/shoelace_style)
-
-Whether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾
+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

@@ -1,110 +1,240 @@
 {
   "version": "0.2",
   "words": [
+    "activedescendant",
     "allowfullscreen",
     "animationend",
     "Animista",
+    "APG",
     "apos",
     "atrule",
+    "autocapitalize",
     "autocorrect",
+    "autofix",
+    "autofocus",
+    "autoload",
+    "autoloader",
+    "autoloading",
     "autoplay",
     "bezier",
+    "Blockquotes",
     "boxicons",
+    "CACHEABLE",
+    "callout",
+    "callouts",
+    "canvastext",
     "chatbubble",
-    "claviska",
+    "checkmark",
     "Clippy",
+    "codebases",
     "codepen",
     "colocated",
+    "colorjs",
+    "colour",
     "combobox",
+    "Commonmark",
+    "compat",
     "Composability",
     "Consolas",
     "contenteditable",
     "copydir",
+    "Cotte",
     "coverpage",
     "crossorigin",
     "crutchcorn",
     "csspart",
     "cssproperty",
+    "cssstate",
+    "datalist",
     "datetime",
+    "describedby",
+    "dictsort",
     "Docsify",
+    "dogfood",
     "dropdowns",
     "easings",
+    "ecommerce",
+    "eleventy",
+    "elif",
+    "endfor",
+    "endmarkdown",
+    "endraw",
+    "endregion",
+    "endset",
+    "enterkeyhint",
+    "eqeqeq",
     "erroneou",
+    "errormessage",
     "esbuild",
+    "exportmaps",
     "exportparts",
+    "fetchpriority",
     "fieldsets",
+    "focusin",
+    "focusout",
+    "fontawesome",
+    "formaction",
     "formdata",
+    "formenctype",
+    "formmethod",
+    "formnovalidate",
+    "formtarget",
     "FOUC",
     "FOUCE",
+    "Frontmatter",
     "fullscreen",
+    "gestern",
+    "giga",
     "globby",
     "Grayscale",
+    "groupby",
     "haspopup",
     "heroicons",
     "hexa",
+    "Hotwire",
+    "hrefs",
     "Iconoir",
     "Iframes",
+    "iife",
     "inputmode",
     "ionicon",
     "ionicons",
+    "jank",
     "jsDelivr",
     "jsfiddle",
     "keydown",
     "keyframes",
+    "keymaker",
+    "Konnor",
+    "Kool",
     "labelledby",
     "Laravel",
-    "LaViska",
+    "linkify",
+    "listbox",
+    "listitem",
     "litelement",
+    "longform",
     "lowercasing",
+    "Lucide",
     "maxlength",
     "Menlo",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "metaframeworks",
+    "middlewares",
     "minlength",
+    "minmax",
     "monospace",
     "mousedown",
+    "mousemove",
+    "mouseout",
     "mouseup",
+    "multiselectable",
     "nextjs",
+    "nocheck",
+    "noindex",
     "noopener",
     "noreferrer",
+    "noscript",
+    "Notdog",
     "novalidate",
+    "nowrap",
+    "Numberish",
+    "nums",
+    "oklab",
+    "oklch",
+    "onscrollend",
     "outdir",
     "ParamagicDev",
-    "popperjs",
+    "peta",
+    "petabit",
+    "Preact",
+    "preconnect",
+    "prerendered",
+    "prismjs",
     "progressbar",
     "radiogroup",
     "Railsbyte",
+    "referrerpolicy",
     "remixicon",
     "reregister",
     "resizer",
     "resizers",
+    "retargeted",
+    "RETRYABLE",
     "rgba",
     "roadmap",
     "Roboto",
+    "roledescription",
+    "Sapan",
+    "saturationl",
     "Schilp",
+    "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",
+    "treeitem",
+    "treeshaking",
     "Triaging",
     "turbolinks",
+    "typeof",
     "unbundles",
     "unbundling",
+    "Uncategorized",
     "unicons",
+    "unsanitized",
     "unsupportive",
     "valpha",
     "valuenow",
     "valuetext",
+    "viewports",
+    "Vuejs",
+    "WCAG",
+    "webawesome",
+    "webawesomer",
     "WEBP",
     "Webpacker",
-    "wordmark"
+    "xmark",
+    "zoomable"
+  ],
+  "ignorePaths": [
+    "package.json",
+    "package-lock.json",
+    "docs/assets/examples/include.html",
+    ".vscode/**",
+    "src/translations/!(en).ts",
+    "**/*.min.js"
+  ],
+  "ignoreRegExpList": [
+    "(^|[^a-z])sl[a-z]*(^|[^a-z])"
   ],
-  "ignorePaths": ["package.json", "package-lock.json", ".vscode/**", "src/translations/!(en).ts", "**/*.min.js"],
-  "ignoreRegExpList": ["(^|[^a-z])sl[a-z]*(^|[^a-z])"],
   "useGitignore": true
 }

custom-elements-manifest.config.js

@@ -1,104 +0,0 @@
-import fs from 'fs';
-import { parse } from 'comment-parser';
-import { pascalCase } from 'pascal-case';
-
-const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
-const { name, description, version, author, homepage, license } = packageData;
-const noDash = string => string.replace(/^\s?-/, '').trim();
-
-export default {
-  globs: ['src/components/**/*.ts'],
-  exclude: ['**/*.test.ts'],
-  plugins: [
-    // Append package data
-    {
-      name: 'shoelace-package-data',
-      packageLinkPhase({ customElementsManifest, context }) {
-        customElementsManifest.package = { name, description, version, author, homepage, license };
-      }
-    },
-
-    // Parse custom jsDoc tags
-    {
-      name: 'shoelace-custom-tags',
-      analyzePhase({ ts, node, moduleDoc, context }) {
-        switch (node.kind) {
-          case ts.SyntaxKind.ClassDeclaration:
-            const className = node.name.getText();
-            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
-            const customTags = ['animation', 'dependency', 'since', 'status'];
-            let customComments = '/**';
-
-            node.jsDoc?.forEach(jsDoc => {
-              jsDoc?.tags?.forEach(tag => {
-                const tagName = tag.tagName.getText();
-
-                if (customTags.includes(tagName)) {
-                  customComments += `\n * @${tagName} ${tag.comment}`;
-                }
-              });
-            });
-
-            const parsed = parse(customComments + '\n */');
-            parsed[0].tags?.map(t => {
-              switch (t.tag) {
-                // Animations
-                case 'animation':
-                  if (!Array.isArray(classDoc['animations'])) {
-                    classDoc['animations'] = [];
-                  }
-                  classDoc['animations'].push({
-                    name: t.name,
-                    description: noDash(t.description)
-                  });
-                  break;
-
-                // Dependencies
-                case 'dependency':
-                  if (!Array.isArray(classDoc['dependencies'])) {
-                    classDoc['dependencies'] = [];
-                  }
-                  classDoc['dependencies'].push(t.name);
-                  break;
-
-                // Value-only metadata tags
-                case 'since':
-                case 'status':
-                  classDoc[t.tag] = t.name;
-                  break;
-
-                // All other tags
-                default:
-                  if (!Array.isArray(classDoc[t.tag])) {
-                    classDoc[t.tag] = [];
-                  }
-
-                  classDoc[t.tag].push({
-                    name: t.name,
-                    description: t.description,
-                    type: t.type || undefined
-                  });
-              }
-            });
-        }
-      }
-    },
-
-    {
-      name: 'shoelace-react-event-names',
-      analyzePhase({ ts, node, moduleDoc, context }) {
-        switch (node.kind) {
-          case ts.SyntaxKind.ClassDeclaration:
-            const className = node.name.getText();
-            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
-
-            if (classDoc?.events) {
-              classDoc.events.map(event => {
-                event.reactName = `on${pascalCase(event.name)}`;
-              });
-            }
-        }
-      }
-    }
-  ]
-};

docs/404.md

@@ -1,5 +0,0 @@
-# Not Found
-
-<img class="not-found-image" src="/assets/images/undraw-not-found.svg" alt="Cute monsters hiding behind a tree">
-
-Sorry, I couldn't find that page. Have you tried pressing <kbd>/</kbd> to search?

docs/_sidebar.md

@@ -1,89 +0,0 @@
-- Getting Started
-  - [Overview](/)
-  - [Installation](/getting-started/installation)
-  - [Usage](/getting-started/usage)
-  - [Themes](/getting-started/themes)
-  - [Customizing](/getting-started/customizing)
-  - [Form Controls](/getting-started/form-controls)
-  - [Localization](/getting-started/localization)
-
-- Frameworks
-  - [React](/frameworks/react)
-  - [Vue](/frameworks/vue)
-  - [Angular](/frameworks/angular)
-
-- Resources
-  - [Community](/resources/community)
-  - [Accessibility](/resources/accessibility)
-  - [Contributing](/resources/contributing)
-  - [Changelog](/resources/changelog)
-
-- Components
-  - [Alert](/components/alert)
-  - [Avatar](/components/avatar)
-  - [Badge](/components/badge)
-  - [Breadcrumb](/components/breadcrumb)
-  - [Breadcrumb Item](/components/breadcrumb-item)
-  - [Button](/components/button)
-  - [Button Group](/components/button-group)
-  - [Card](/components/card)
-  - [Checkbox](/components/checkbox)
-  - [Color Picker](/components/color-picker)
-  - [Details](/components/details)
-  - [Dialog](/components/dialog)
-  - [Divider](/components/divider)
-  - [Drawer](/components/drawer)
-  - [Dropdown](/components/dropdown)
-  - [Icon](/components/icon)
-  - [Icon Button](/components/icon-button)
-  - [Image Comparer](/components/image-comparer)
-  - [Input](/components/input)
-  - [Menu](/components/menu)
-  - [Menu Item](/components/menu-item)
-  - [Menu Label](/components/menu-label)
-  - [Progress Bar](/components/progress-bar)
-  - [Progress Ring](/components/progress-ring)
-  - [QR Code](/components/qr-code)
-  - [Radio](/components/radio)
-  - [Radio Group](/components/radio-group)
-  - [Range](/components/range)
-  - [Rating](/components/rating)
-  - [Select](/components/select)
-  - [Skeleton](/components/skeleton)
-  - [Spinner](/components/spinner)
-  - [Split Panel](/components/split-panel)
-  - [Switch](/components/switch)
-  - [Tab Group](/components/tab-group)
-  - [Tab](/components/tab)
-  - [Tab Panel](/components/tab-panel)
-  - [Tag](/components/tag)
-  - [Textarea](/components/textarea)
-  - [Tooltip](/components/tooltip)
-  <!--plop:component-->
-
-- Utilities
-  - [Animated Image](/components/animated-image)
-  - [Animation](/components/animation)
-  - [Format Bytes](/components/format-bytes)
-  - [Format Date](/components/format-date)
-  - [Format Number](/components/format-number)
-  - [Include](/components/include)
-  - [Mutation Observer](/components/mutation-observer)
-  - [Relative Time](/components/relative-time)
-  - [Resize Observer](/components/resize-observer)
-  - [Responsive Media](/components/responsive-media)
-  - [Visually Hidden](/components/visually-hidden)
-
-- Design Tokens
-  - [Typography](/tokens/typography)
-  - [Color](/tokens/color)
-  - [Spacing](/tokens/spacing)
-  - [Elevation](/tokens/elevation)
-  - [Border Radius](/tokens/border-radius)
-  - [Transition](/tokens/transition)
-  - [Z-index](/tokens/z-index)
-
-- Tutorials
-  - [Integrating with Laravel](/tutorials/integrating-with-laravel)
-  - [Integrating with NextJS](/tutorials/integrating-with-nextjs)
-  - [Integrating with Rails](/tutorials/integrating-with-rails)

docs/assets/images/logo.svg

@@ -1,7 +0,0 @@
-<svg viewBox="0 0 127 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-    <g fill-rule="nonzero" fill="#0ea5e9">
-      <path d="M102.375,90.85 C102.979,90.557 103.57,90.215 104.15,89.826 L106.425,88.501 C106.848,88.19 107.64,87.573 108.8,86.65 L108.95,86.501 C109.883,85.567 110.916,85.117 112.05,85.15 C112.55,85.15 113.133,85.284 113.8,85.55 L122.3,78 C122.533,77.8 122.767,77.633 123,77.5 L123.05,77.5 C123.95,76.967 124.7,77 125.3,77.6 C126.367,78.166 126.45,79.133 125.55,80.5 L116.65,88.399 C116.717,88.533 116.75,88.666 116.75,88.799 C116.883,89.399 116.833,89.999 116.6,90.599 C116.4,90.999 116.117,91.382 115.75,91.749 C115.379,92.145 114.996,92.528 114.6,92.898 L109.45,96.648 C108.99,96.97 108.523,97.27 108.05,97.548 C107.46,97.906 106.86,98.232 106.25,98.523 C105.985,98.644 105.718,98.76 105.45,98.874 C103.841,99.559 102.174,100.017 100.45,100.249 C99.65,106.982 97.35,113.183 93.55,118.849 C88.75,125.915 82.183,131.299 73.85,134.999 C65.55,138.699 56.567,140.549 46.9,140.549 C33.567,140.415 22.75,137.415 14.45,131.549 C4.817,124.75 0,115.7 0,104.399 L0,102.849 C0.333,95.149 2.6,87.849 6.8,80.95 C10.933,74.116 16.983,69.5 24.95,67.1 C29.05,65.9 33.166,65.3 37.3,65.3 C41.567,65.3 45.967,66.083 50.5,67.65 C55.033,69.216 60.15,71.916 65.85,75.75 L80.7,85.7 C84.833,88.399 88.6,90.233 92,91.2 C91.3,84.3 88.8,78.399 84.5,73.5 C80.2,68.533 74.717,64.9 68.05,62.6 L61.65,60.4 C55.783,58.333 51.417,56.3 48.55,54.3 C40.817,49.067 36.517,41.883 35.65,32.75 L35.5,30.05 C35.5,21.25 39.067,13.883 46.2,7.95 C52.567,2.65 60.133,0 68.9,0 C75.5,0 81.417,1.9 86.65,5.7 C91.917,9.533 94.9,14.967 95.6,22 L95.75,24.75 C95.75,29.85 94.433,34.216 91.8,37.85 C89.1,41.483 86.717,43.3 84.65,43.3 C84.21,43.269 83.802,43.21 83.425,43.125 L74.1,51.9 C72.6,52.733 71.583,52.583 71.05,51.45 C70.517,50.85 70.567,50.1 71.2,49.2 L71.25,49.15 C71.383,48.95 71.567,48.733 71.8,48.5 L80.475,40.275 C80.376,39.872 80.318,39.431 80.3,38.95 C80.3,37.817 80.75,36.867 81.65,36.1 C85.45,32.7 87.35,28.784 87.35,24.35 C87.35,19.95 85.683,16.25 82.35,13.25 C79.017,10.25 74.467,8.716 68.7,8.65 C61.5,8.65 55.583,10.817 50.95,15.15 C46.317,19.483 44,24.683 44,30.75 C44,35.65 45.883,40.066 49.65,44 C53.383,47.9 59.15,50.966 66.95,53.2 C77.883,56.367 86.233,61.7 92,69.2 C97.133,75.833 100,83.283 100.6,91.55 C101.199,91.365 101.791,91.132 102.375,90.85 Z M71.95,49.05 C71.95,49.35 72.117,49.5 72.45,49.5 C72.483,49.5 75.117,47.066 80.35,42.2 C80.35,41.533 78.95,42.45 76.15,44.95 C73.35,47.483 71.95,48.85 71.95,49.05 Z M74.15,50.8 C74.15,50.533 74.017,50.4 73.75,50.4 C73.45,50.4 73.183,50.55 72.95,50.85 C72.416,50.817 72.033,50.884 71.8,51.05 C71.7,51.117 71.65,51.183 71.65,51.25 C71.65,51.45 71.783,51.6 72.05,51.7 L72.95,51.7 C73.75,51.4 74.15,51.1 74.15,50.8 Z M80.35,45.35 C80.35,44.583 79.9,44.583 79,45.35 C78.567,45.75 78.017,46.317 77.35,47.05 C77.117,47.217 76.633,47.667 75.9,48.4 C75.133,49.2 74.75,49.683 74.75,49.85 L74.8,50.2 C75,50.267 75.133,50.3 75.2,50.3 C75.233,50.3 76.1,49.5 77.8,47.9 C79.5,46.3 80.35,45.45 80.35,45.35 Z M124.2,78.3 L115.8,85.7 C116.3,85.967 116.667,86.349 116.9,86.849 L125.2,79.45 C125.266,79.116 125.217,78.849 125.05,78.649 C124.883,78.517 124.6,78.399 124.2,78.3 Z M123.75,78.05 L123.55,77.85 L116.15,83.85 L116.6,84.4 L123.75,78.05 Z M91.85,99.899 C89.65,99.333 87.617,98.649 85.75,97.849 C81.55,96.149 76.333,93.183 70.1,88.95 L59.85,82 C55.517,79.233 51.567,77.166 48,75.8 C44.4,74.467 40.867,73.8 37.4,73.8 L35.9,73.8 C27.067,74.267 20.2,77.583 15.3,83.75 C10.734,89.45 8.45,96.184 8.45,103.95 C8.45,112.683 11.95,119.516 18.95,124.45 C25.916,129.416 35.467,131.899 47.6,131.899 C57.133,131.899 65.166,130.2 71.7,126.799 C78.2,123.399 83.25,118.899 86.85,113.299 C89.55,109.033 91.217,104.566 91.85,99.899 Z"></path>
-    </g>
-  </g>
-</svg>

docs/assets/images/undraw-content-team.svg

@@ -1,80 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="879px" height="553px" viewBox="0 0 879 553" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
-    <title>undraw-content-team</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="undraw-content-team" transform="translate(-3.000000, 0.000000)">
-            <rect id="Rectangle" fill-opacity="0.25" fill="#fff" x="180" y="16" width="579" height="343" rx="20"></rect>
-            <path d="M840.86295,552.21468 L98.22937,552.21468 C84.4769827,552.21468 73.32847,541.066167 73.32847,527.31378 L73.32847,527.31378 C342.533003,496.02706 606.678133,496.02706 865.76386,527.31378 L865.76386,527.31378 C865.763854,541.066169 854.615339,552.21468 840.86295,552.21468 Z" id="Path" fill="#CCCCCC" fill-rule="nonzero"></path>
-            <path d="M865.76386,528.77851 L73.32847,527.31375 L165.16896,372.78153 L165.60837,372.04915 L165.60837,31.47769 C165.607672,23.1290737 168.923838,15.1221947 174.827202,9.21883153 C180.730565,3.31546831 188.737444,-0.00069762467 197.08606,2.84217094e-14 L737.61198,2.84217094e-14 C745.960596,-0.00069762467 753.967475,3.31546831 759.870838,9.21883153 C765.774202,15.1221947 769.090368,23.1290737 769.08967,31.47769 L769.08967,374.39269 L865.76386,528.77851 Z M196.36834,21.97141 C190.70822,21.9777587 186.121369,26.5646095 186.11502,32.22473 L186.11502,342.75394 C186.121622,348.413956 190.708324,353.000658 196.36834,353.00726 L742.72398,353.00726 C748.383893,353.000411 752.970451,348.413853 752.9773,342.75394 L752.9773,32.22473 C752.970704,26.5647122 748.383998,21.9780061 742.72398,21.97141 L196.36834,21.97141 Z" id="Combined-Shape" fill="#E6E6E6" fill-rule="nonzero"></path>
-            <path d="M199.95903,394.02055 C198.24391,394.023463 196.686317,395.021305 195.9667,396.57816 L167.66779,458.0981 C167.041726,459.458563 167.151668,461.044211 167.959498,462.305253 C168.767328,463.566295 170.161797,464.32907 171.6594,464.3291 L766.77054,464.3291 C768.293506,464.329083 769.707849,463.540407 770.508355,462.244793 C771.308862,460.949179 771.381351,459.331427 770.69993,457.96941 L739.93993,396.44947 C739.199697,394.957483 737.676056,394.015676 736.01054,394.0206 L199.95903,394.02055 Z" id="Path" fill="#CCCCCC" fill-rule="nonzero"></path>
-            <circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="467.34902" cy="10.25332" r="6.59142"></circle>
-            <path d="M408.85444,476.04714 C406.86865,476.049642 405.130517,477.381666 404.61179,479.29851 L397.51328,505.66419 C397.15753,506.984241 397.436508,508.39467 398.26801,509.479887 C399.099513,510.565104 400.388783,511.201438 401.75593,511.20139 L536.75349,511.20139 C538.174875,511.201399 539.508438,510.513737 540.332692,509.355747 C541.156947,508.197757 541.370032,506.712543 540.9046,505.36952 L531.77845,479.00384 C531.165175,477.234516 529.498505,476.04781 527.62591,476.04714 L408.85444,476.04714 Z" id="Path" fill="#CCCCCC" fill-rule="nonzero"></path>
-            <polygon id="Path" fill="#CCCCCC" fill-rule="nonzero" points="769.09 366.922 769.09 372.782 165.169 372.782 165.623 372.049 165.623 366.922"></polygon>
-            <path d="M694.54732,380.34397 C694.063752,380.344578 693.640491,380.668942 693.51417,381.13572 L691.78557,387.55617 C691.698952,387.877623 691.766894,388.221078 691.969377,388.485341 C692.17186,388.749605 692.485812,388.904563 692.81873,388.90456 L725.69267,388.90456 C726.038798,388.904561 726.36354,388.737104 726.564256,388.455115 C726.764973,388.173127 726.816861,387.811455 726.70352,387.48441 L724.48117,381.06397 C724.331826,380.633113 723.925966,380.344133 723.46996,380.34397 L694.54732,380.34397 Z" id="Path" fill="#CCCCCC" fill-rule="nonzero"></path>
-            <path d="M646.54732,380.34397 C646.063752,380.344578 645.640491,380.668942 645.51417,381.13572 L643.78557,387.55617 C643.698952,387.877623 643.766894,388.221078 643.969377,388.485341 C644.17186,388.749605 644.485812,388.904563 644.81873,388.90456 L677.69267,388.90456 C678.038798,388.904561 678.36354,388.737104 678.564256,388.455115 C678.764973,388.173127 678.816861,387.811455 678.70352,387.48441 L676.48117,381.06397 C676.331826,380.633113 675.925966,380.344133 675.46996,380.34397 L646.54732,380.34397 Z" id="Path" fill="#CCCCCC" fill-rule="nonzero"></path>
-            <path d="M507.48137,421.13959 L510.05784,421.13959 L504.90484,76.75135 L502.32836,76.75135 L502.43115,83.62195 L444.68449,83.62195 L444.78727,76.75135 L442.2108,76.75135 L437.0578,421.13959 L439.63428,421.13959 L439.96839,398.81019 L507.14722,398.81019 L507.48137,421.13959 Z M503.76762,172.93959 L443.34807,172.93959 L443.9777,130.85725 L503.13798,130.85725 L503.76762,172.93959 Z M503.8062,175.51607 L504.43583,217.5984 L442.67983,217.5984 L443.30947,175.51607 L503.8062,175.51607 Z M504.47441,220.17488 L505.10405,262.25722 L442.01164,262.25722 L442.64128,220.17488 L504.47441,220.17488 Z M505.14262,264.83369 L505.77226,306.91603 L441.34343,306.91603 L441.97307,264.83369 L505.14262,264.83369 Z M505.81083,309.49251 L506.44047,351.5749 L440.67517,351.5749 L441.30481,309.49251 L505.81083,309.49251 Z M502.46977,86.19843 L503.09941,128.28077 L444.01628,128.28077 L444.64592,86.19843 L502.46977,86.19843 Z M440.007,396.23371 L440.63664,354.15137 L506.47905,354.15137 L507.10869,396.23371 L440.007,396.23371 Z" id="Shape" fill="#3F3D56" fill-rule="nonzero"></path>
-            <circle id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="460.7944" cy="153.35761" r="42.01233"></circle>
-            <rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" transform="translate(481.263536, 194.779340) rotate(-10.261060) translate(-481.263536, -194.779340) " x="474.881916" y="183.345595" width="12.76324" height="22.86749"></rect>
-            <rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" transform="translate(456.145380, 199.326392) rotate(-10.261060) translate(-456.145380, -199.326392) " x="449.76376" y="187.892647" width="12.76324" height="22.86749"></rect>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(455.991944, 213.405824) rotate(-40.261060) translate(-455.991944, -213.405824) " cx="455.991944" cy="213.405824" rx="10.63602" ry="3.98853"></ellipse>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(480.586874, 208.953401) rotate(-40.261060) translate(-480.586874, -208.953401) " cx="480.586874" cy="208.953401" rx="10.63605" ry="3.98853"></ellipse>
-            <circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="457.85318" cy="143.08115" r="14.35864"></circle>
-            <circle id="Oval" fill="#3F3D56" fill-rule="nonzero" cx="451.95181" cy="137.93436" r="4.78622"></circle>
-            <path d="M493.93625,107.65269 C494.56802,92.0991 481.16312,78.92509 463.99545,78.22776 C446.82778,77.53043 432.39853,89.57376 431.76672,105.12736 C431.13491,120.68096 443.06863,124.21482 460.23627,124.91221 C477.40391,125.6096 493.30447,123.20627 493.93625,107.65269 Z" id="Path" fill="#0ea5e9" fill-rule="nonzero"></path>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(422.001785, 145.703659) rotate(-77.089900) translate(-422.001785, -145.703659) " cx="422.001785" cy="145.703659" rx="6.59448" ry="21.00616"></ellipse>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(504.470422, 159.418119) rotate(-77.089900) translate(-504.470422, -159.418119) " cx="504.470422" cy="159.418119" rx="6.59448" ry="21.00616"></ellipse>
-            <path d="M472.3331,169.91416 C472.9488,173.280144 471.720947,176.718794 469.112518,178.933525 C466.504089,181.148255 462.911834,181.802199 459.690258,180.648779 C456.468682,179.495358 454.107795,176.710012 453.4978,173.34299 L453.49445,173.3245 C452.5527,168.12235 456.57483,166.2815 461.77701,165.33976 C466.97919,164.39802 471.39139,164.71201 472.3331,169.91416 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(312.185926, 293.633672) rotate(-69.082170) translate(-312.185926, -293.633672) " cx="312.185926" cy="293.633672" rx="21.53369" ry="6.76007"></ellipse>
-            <circle id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(272.378778, 326.155721) rotate(-80.782520) translate(-272.378778, -326.155721) " cx="272.378778" cy="326.155721" r="43.06735"></circle>
-            <rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="252.75315" y="359.95537" width="13.08374" height="23.44171"></rect>
-            <rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="278.92063" y="359.95537" width="13.08374" height="23.44171"></rect>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="263.65629" cy="383.66967" rx="10.90314" ry="4.08868"></ellipse>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="289.82377" cy="383.12453" rx="10.90314" ry="4.08868"></ellipse>
-            <path d="M230.60203,286.10434 C227.12455,270.53055 238.2407,254.79388 255.43064,250.9555 C272.62058,247.11712 289.37486,256.63058 292.85233,272.20438 C296.3298,287.77818 284.93742,293.52203 267.74748,297.36038 C250.55754,301.19873 234.07951,301.67812 230.60203,286.10434 Z" id="Path" fill="#0ea5e9" fill-rule="nonzero"></path>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(223.870603, 306.172293) rotate(-64.625740) translate(-223.870603, -306.172293) " cx="223.870603" cy="306.172293" rx="6.76007" ry="21.53368"></ellipse>
-            <circle id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="85.9008" cy="369.76318" r="43.06733"></circle>
-            <rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="66.27519" y="403.56287" width="13.08374" height="23.44171"></rect>
-            <rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="92.44267" y="403.56287" width="13.08374" height="23.44171"></rect>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="77.17827" cy="427.27716" rx="10.90314" ry="4.08868"></ellipse>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="103.34581" cy="426.732" rx="10.90314" ry="4.08868"></ellipse>
-            <circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="86.99113" cy="358.86008" r="14.71922"></circle>
-            <circle id="Oval" fill="#3F3D56" fill-rule="nonzero" cx="86.99113" cy="358.86008" r="4.90642"></circle>
-            <path d="M44.12401,329.71183 C40.64653,314.13804 51.76268,298.4014 68.95262,294.56302 C86.14256,290.72464 102.89683,300.23813 106.37431,315.81192 C109.85179,331.38571 98.45939,337.12961 81.26945,340.96792 C64.07951,344.80623 47.60154,345.28568 44.12401,329.71183 Z" id="Path" fill="#E6E6E6" fill-rule="nonzero"></path>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(110.988725, 213.490755) rotate(-69.082170) translate(-110.988725, -213.490755) " cx="110.988725" cy="213.490755" rx="21.53369" ry="6.76007"></ellipse>
-            <circle id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(71.181568, 246.012788) rotate(-80.782520) translate(-71.181568, -246.012788) " cx="71.1815681" cy="246.012788" r="43.06735"></circle>
-            <rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="51.55595" y="279.81244" width="13.08374" height="23.44171"></rect>
-            <rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="77.72343" y="279.81244" width="13.08374" height="23.44171"></rect>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="62.45909" cy="303.52674" rx="10.90314" ry="4.08868"></ellipse>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="88.62657" cy="302.9816" rx="10.90314" ry="4.08868"></ellipse>
-            <circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="72.27189" cy="235.10965" r="14.71922"></circle>
-            <circle id="Oval" fill="#3F3D56" fill-rule="nonzero" cx="72.27189" cy="235.10965" r="4.90642"></circle>
-            <path d="M29.40483,205.96134 C25.92735,190.38755 37.0435,174.65088 54.23344,170.8125 C71.42338,166.97412 88.17766,176.48758 91.65513,192.06138 C95.1326,207.63518 83.74022,213.37903 66.55028,217.21738 C49.36034,221.05573 32.88231,221.53519 29.40483,205.96134 Z" id="Path" fill="#0ea5e9" fill-rule="nonzero"></path>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(22.673401, 226.029366) rotate(-64.625740) translate(-22.673401, -226.029366) " cx="22.6734006" cy="226.029366" rx="6.76007" ry="21.53368"></ellipse>
-            <path d="M50.02702,261.54972 C50.02702,265.76487 60.88029,274.08829 72.92357,274.08829 C84.96685,274.08829 96.25871,262.22129 96.25871,258.0062 C96.25871,253.79111 84.96678,258.82395 72.92357,258.82395 C60.88036,258.82395 50.02702,257.33457 50.02702,261.54972 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
-            <path d="M113.52376,81.56869 C111.867655,81.5704977 110.525568,82.9125851 110.52376,84.56869 L110.52376,208.56869 C110.525568,210.224795 111.867655,211.566882 113.52376,211.56869 L400.52376,211.56869 C402.179865,211.566882 403.521952,210.224795 403.52376,208.56869 L403.52376,84.56869 C403.521952,82.9125851 402.179865,81.5704977 400.52376,81.56869 L113.52376,81.56869 Z" id="Path" fill="#fbc024" fill-rule="nonzero"></path>
-            <circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="191.01816" cy="146.56869" r="29.1211"></circle>
-            <path d="M256.7436,142.69417 C254.884983,142.724723 253.39428,144.240132 253.39428,146.099 C253.39428,147.957868 254.884983,149.473277 256.7436,149.50383 L348.68926,149.50383 C349.906316,149.524778 351.042001,148.894505 351.668119,147.850647 C352.294237,146.806789 352.31556,145.508108 351.72405,144.444258 C351.132539,143.380407 350.018157,142.713189 348.80107,142.69417 C348.763797,142.693537 348.726527,142.693537 348.68926,142.69417 L256.7436,142.69417 Z" id="b71acdfd-6a55-428e-917a-53f192cb0203" fill="#FFFFFF" fill-rule="nonzero"></path>
-            <path d="M256.7436,122.96697 C254.884983,122.997523 253.39428,124.512932 253.39428,126.3718 C253.39428,128.230668 254.884983,129.746077 256.7436,129.77663 L302.65917,129.77663 C303.876249,129.797613 305.011971,129.167347 305.638111,128.123473 C306.26425,127.0796 306.285572,125.78089 305.694037,124.717025 C305.102503,123.65316 303.988082,122.985951 302.77097,122.96697 C302.733703,122.966337 302.696437,122.966337 302.65917,122.96697 L256.7436,122.96697 Z" id="ad4fbcfa-41b0-45f9-a593-23b6dc3fe165" fill="#FFFFFF" fill-rule="nonzero"></path>
-            <path d="M256.7436,163.36076 C254.884983,163.391313 253.39428,164.906722 253.39428,166.76559 C253.39428,168.624458 254.884983,170.139867 256.7436,170.17042 L348.68926,170.17042 C349.906316,170.191368 351.042001,169.561095 351.668119,168.517237 C352.294237,167.473379 352.31556,166.174698 351.72405,165.110848 C351.132539,164.046997 350.018157,163.379779 348.80107,163.36076 C348.763797,163.360093 348.726527,163.360093 348.68926,163.36076 L256.7436,163.36076 Z" id="bce2a7cd-a325-424d-9b3a-f63d1dad5aba" fill="#FFFFFF" fill-rule="nonzero"></path>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(695.602650, 372.610085) rotate(-20.917830) translate(-695.602650, -372.610085) " cx="695.60265" cy="372.610085" rx="6.76007" ry="21.53369"></ellipse>
-            <circle id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(726.409811, 414.132115) rotate(-9.217470) translate(-726.409811, -414.132115) " cx="726.409811" cy="414.132115" r="43.06733"></circle>
-            <polygon id="Path" fill="#2F2E41" fill-rule="nonzero" points="746.035 447.932 732.952 447.932 735.512 476.005 746.058 473.14"></polygon>
-            <polygon id="Path" fill="#2F2E41" fill-rule="nonzero" points="717.512 448.005 704.428 448.005 706.988 476.078 717.058 473.14"></polygon>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(706.318056, 473.319125) rotate(-4.181640) translate(-706.318056, -473.319125) " cx="706.318056" cy="473.319125" rx="10.90314" ry="4.08868"></ellipse>
-            <circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="725.31949" cy="403.22896" r="14.71922"></circle>
-            <circle id="Oval" fill="#3F3D56" fill-rule="nonzero" cx="725.31949" cy="403.22896" r="4.90642"></circle>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(771.918005, 384.148727) rotate(-53.549900) translate(-771.918005, -384.148727) " cx="771.918005" cy="384.148727" rx="21.53368" ry="6.76007"></ellipse>
-            <path d="M705.39698,436.33866 C705.39698,432.86466 714.34198,426.00466 724.26778,426.00466 C734.19358,426.00466 743.50006,435.78516 743.50006,439.25914 C743.50006,442.73312 734.19351,438.58514 724.26778,438.58514 C714.34205,438.58514 705.39698,439.81268 705.39698,436.33866 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero" transform="translate(724.448520, 433.325266) rotate(-180.000000) translate(-724.448520, -433.325266) "></path>
-            <path d="M847.1767,378.54172 L611.43117,345.86064 C607.604361,345.32541 604.932725,341.793834 605.45868,337.96574 L631.96057,146.79396 C632.495641,142.967058 636.027329,140.295337 639.85547,140.82147 L875.60098,173.50256 C879.427885,174.037626 882.099609,177.569318 881.57347,181.39746 L855.0716,372.56924 C854.536375,376.396051 851.004794,379.067687 847.1767,378.54172 L847.1767,378.54172 Z" id="Path" fill="#11a5e9" fill-rule="nonzero"></path>
-            <path d="M762.72231,318.87957 L642.36784,302.19498 C642.216871,302.176045 642.067969,302.14324 641.92302,302.09698 L712.51355,211.39072 C713.394132,210.238632 714.82651,209.649483 716.262854,209.8486 C717.699198,210.047717 718.917295,211.004295 719.45127,212.35248 L748.48059,283.8148 L749.87186,287.23459 L762.72231,318.87957 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
-            <polygon id="Path" fill="#000000" fill-rule="nonzero" opacity="0.2" points="762.722 318.879 721.63 313.183 745.864 286.679 747.609 284.77 748.481 283.815 749.872 287.235"></polygon>
-            <path d="M829.73481,328.16942 L725.63807,313.73863 L749.87186,287.23463 L751.61612,285.32515 L783.19533,250.78503 C784.29885,249.735613 785.796059,249.204111 787.314261,249.322828 C788.832463,249.441546 790.228856,250.199316 791.15584,251.40751 C791.271244,251.575507 791.375823,251.750689 791.46894,251.93199 L829.73481,328.16942 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
-            <circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="764.18602" cy="224.18353" r="18"></circle>
-            <rect id="Rectangle" fill="#3F3D56" fill-rule="nonzero" transform="translate(653.262165, 167.923576) rotate(7.892770) translate(-653.262165, -167.923576) " x="642.262129" y="156.923541" width="22.0000711" height="22.0000711"></rect>
-            <path d="M768.18655,374.08068 C771.66403,358.50689 760.54788,342.77022 743.35794,338.93184 C726.168,335.09346 709.41373,344.60692 705.93625,360.18071 C702.45877,375.7545 713.85117,381.49837 731.04111,385.33671 C748.23105,389.17505 764.70908,389.6545 768.18655,374.08068 Z" id="Path" fill="#F2F2F2" fill-rule="nonzero"></path>
-            <ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(735.010556, 473.249892) rotate(-4.181640) translate(-735.010556, -473.249892) " cx="735.010556" cy="473.249892" rx="10.90314" ry="4.08868"></ellipse>
-        </g>
-    </g>
-</svg>

docs/assets/plugins/code-block/code-block.css

@@ -1,228 +0,0 @@
-.code-block {
-  position: relative;
-  border-radius: 3px;
-  background-color: var(--sl-color-neutral-50);
-  margin-bottom: 1.5rem;
-}
-
-.code-block__preview {
-  position: relative;
-  border: solid 1px var(--sl-color-neutral-200);
-  border-bottom: none;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  background-color: var(--sl-color-neutral-0);
-  min-width: 20rem;
-  max-width: 100%;
-  padding: 1.5rem 3.25rem 1.5rem 1.5rem;
-}
-
-/* Block the preview while dragging to prevent iframes from intercepting drag events */
-.code-block__preview--dragging:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: ew-resize;
-}
-
-.code-block__resizer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 1.75rem;
-  font-size: 20px;
-  color: var(--sl-color-neutral-600);
-  background-color: var(--sl-color-neutral-0);
-  border-left: solid 1px var(--sl-color-neutral-200);
-  border-top-right-radius: 3px;
-  cursor: ew-resize;
-  transition: 250ms background-color;
-}
-
-@media screen and (max-width: 600px) {
-  .code-block__preview {
-    padding-right: 1.5rem;
-  }
-
-  .code-block__resizer {
-    display: none;
-  }
-}
-
-.code-block__source {
-  border: solid 1px var(--sl-color-neutral-200);
-  border-bottom: none;
-  border-radius: 0 !important;
-  display: none;
-}
-
-.code-block--expanded .code-block__source {
-  display: block;
-}
-
-.code-block__source pre {
-  margin: 0;
-}
-
-.code-block__buttons {
-  position: relative;
-  border: solid 1px var(--sl-color-neutral-200);
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-  display: flex;
-}
-
-.code-block__button {
-  flex: 0 0 auto;
-  height: 2.5rem;
-  min-width: 2.5rem;
-  border: none;
-  border-radius: 0;
-  background: var(--sl-color-neutral-0);
-  font: inherit;
-  font-size: 0.7rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: var(--sl-color-neutral-600);
-  padding: 0 1rem;
-  cursor: pointer;
-}
-
-.code-block__button:not(:last-of-type) {
-  border-right: solid 1px var(--sl-color-neutral-200);
-}
-
-.code-block__button--html,
-.code-block__button--react {
-  width: 70px;
-  display: flex;
-  place-items: center;
-  justify-content: center;
-}
-
-.code-block__button--selected {
-  font-weight: 700;
-  color: var(--sl-color-primary-600);
-}
-
-.code-block__button--codepen {
-  display: flex;
-  place-items: center;
-  width: 6rem;
-}
-
-.code-block__button:first-of-type {
-  border-bottom-left-radius: 3px;
-}
-
-.code-block__button:last-of-type {
-  border-bottom-right-radius: 3px;
-}
-
-.code-block__button:hover,
-.code-block__button:active {
-  box-shadow: 0 0 0 1px var(--sl-color-primary-400);
-  border-right-color: transparent;
-  background-color: var(--sl-color-primary-50);
-  color: var(--sl-color-primary-700);
-  z-index: 1;
-}
-
-.code-block__button:focus-visible {
-  outline: none;
-  color: var(--sl-color-primary-600);
-  border-color: var(--sl-color-primary-400);
-  border-right-color: transparent;
-  background-color: var(--sl-color-primary-50);
-  box-shadow: 0 0 0 1px var(--sl-color-primary-400), var(--sl-focus-ring);
-  z-index: 2;
-}
-
-.code-block__toggle {
-  position: relative;
-  display: flex;
-  flex: 1 1 auto;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  color: var(--sl-color-neutral-600);
-  cursor: pointer;
-  -webkit-appearance: none;
-}
-
-.code-block__toggle svg {
-  width: 1em;
-  height: 1em;
-  margin-left: 0.25rem;
-}
-
-.code-block--expanded .code-block__toggle svg {
-  transform: rotate(180deg);
-}
-
-/* Copy button styles */
-.markdown-section .docsify-copy-code-button {
-  top: 4px;
-  right: 4px;
-  background-color: var(--sl-color-neutral-500);
-  border-radius: var(--sl-border-radius-medium);
-  font-family: var(--sl-font-sans);
-  font-size: var(--sl-font-size-x-small);
-  font-weight: var(--sl-font-weight-semibold);
-  text-transform: uppercase;
-  padding: 8px;
-  user-select: none;
-  transition: 0.1s all;
-}
-
-.markdown-section .docsify-copy-code-button.copied {
-  animation: pulse 0.75s;
-  --pulse-color: var(--sl-color-neutral-600);
-}
-
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 0 0 var(--pulse-color);
-  }
-  70% {
-    box-shadow: 0 0 0 0.5rem transparent;
-  }
-  100% {
-    box-shadow: 0 0 0 0 transparent;
-  }
-}
-
-.markdown-section .docsify-copy-code-button .label {
-  transition: none;
-}
-
-.markdown-section .docsify-copy-code-button .success,
-.markdown-section .docsify-copy-code-button .error {
-  display: none;
-}
-
-.markdown-section .docsify-copy-code-button:focus-visible {
-  box-shadow: var(--sl-focus-ring);
-}
-
-.markdown-section .docsify-copy-code-button:active {
-  background-color: var(--sl-color-neutral-600);
-  transform: scale(0.92);
-}
-
-/* We can apply data-flavor="html|react" to any element on the page to toggle it when the user's flavor changes */
-body.flavor-html [data-flavor]:not([data-flavor='html']) {
-  display: none;
-}
-
-body.flavor-react [data-flavor]:not([data-flavor='react']) {
-  display: none;
-}

docs/assets/plugins/code-block/code-block.js

@@ -1,376 +0,0 @@
-(() => {
-  const reactVersion = '17.0.2';
-  let flavor = getFlavor();
-  let count = 1;
-
-  // Sync flavor UI on page load
-  setFlavor(getFlavor());
-
-  if (!window.$docsify) {
-    throw new Error('Docsify must be loaded before installing this plugin.');
-  }
-
-  function convertModuleLinks(html) {
-    const version = sessionStorage.getItem('sl-version');
-
-    html = html
-      .replace(/@shoelace-style\/shoelace/g, `https://cdn.skypack.dev/@shoelace-style/shoelace@${version}`)
-      .replace(/from 'react'/g, `from 'https://cdn.skypack.dev/react@${reactVersion}'`)
-      .replace(/from "react"/g, `from "https://cdn.skypack.dev/react@${reactVersion}"`);
-
-    return html;
-  }
-
-  function getAdjacentExample(name, pre) {
-    let currentPre = pre.nextElementSibling;
-
-    while (currentPre?.tagName.toLowerCase() === 'pre') {
-      if (currentPre?.getAttribute('data-lang').split(' ').includes(name)) {
-        return currentPre;
-      }
-
-      currentPre = currentPre.nextElementSibling;
-    }
-
-    return null;
-  }
-
-  function runScript(script) {
-    const newScript = document.createElement('script');
-
-    if (script.type === 'module') {
-      newScript.type = 'module';
-      newScript.textContent = script.innerHTML;
-    } else {
-      newScript.appendChild(document.createTextNode(`(() => { ${script.innerHTML} })();`));
-    }
-
-    script.parentNode.replaceChild(newScript, script);
-  }
-
-  function getFlavor() {
-    return localStorage.getItem('flavor') || 'html';
-  }
-
-  function setFlavor(newFlavor) {
-    flavor = ['html', 'react'].includes(newFlavor) ? newFlavor : 'html';
-    localStorage.setItem('flavor', flavor);
-
-    // Set the flavor class on the body
-    document.body.classList.toggle('flavor-html', flavor === 'html');
-    document.body.classList.toggle('flavor-react', flavor === 'react');
-  }
-
-  function wrap(el, wrapper) {
-    el.parentNode.insertBefore(wrapper, el);
-    wrapper.appendChild(el);
-  }
-
-  window.$docsify.plugins.push((hook, vm) => {
-    // Convert code blocks to previews
-    hook.afterEach(function (html, next) {
-      const domParser = new DOMParser();
-      const doc = domParser.parseFromString(html, 'text/html');
-
-      const htmlButton = `
-        <button
-          type="button"
-          title="Show HTML code"
-          class="code-block__button code-block__button--html ${flavor === 'html' ? 'code-block__button--selected' : ''}"
-        >
-          HTML
-        </button>
-      `;
-
-      const reactButton = `
-        <button
-          type="button"
-          title="Show React code"
-          class="code-block__button code-block__button--react ${
-            flavor === 'react' ? 'code-block__button--selected' : ''
-          }"
-        >
-          React
-        </button>
-      `;
-
-      const codePenButton = `
-        <button type="button" class="code-block__button code-block__button--codepen" title="Edit on CodePen">
-          <svg
-            width="138"
-            height="26"
-            viewBox="0 0 138 26"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.3"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z" />
-          </svg>
-        </button>
-      `;
-
-      [...doc.querySelectorAll('code[class^="lang-"]')].map(code => {
-        if (code.classList.contains('preview')) {
-          const isExpanded = code.classList.contains('expanded');
-          const pre = code.closest('pre');
-          const sourceGroupId = `code-block-source-group-${count}`;
-          const toggleId = `code-block-toggle-${count}`;
-          const reactPre = getAdjacentExample('react', pre);
-          const hasReact = reactPre !== null;
-          const examples = [
-            {
-              name: 'HTML',
-              codeBlock: pre
-            }
-          ];
-
-          pre.setAttribute('data-lang', pre.getAttribute('data-lang').replace(/ preview$/, ''));
-          pre.setAttribute('aria-labelledby', toggleId);
-
-          const codeBlock = `
-            <div class="code-block ${isExpanded ? 'code-block--expanded' : ''}">
-              <div class="code-block__preview">
-                ${code.textContent}
-                <div class="code-block__resizer">
-                  <sl-icon name="grip-vertical"></sl-icon>
-                </div>
-              </div>
-
-              <div class="code-block__source-group" id="${sourceGroupId}">
-                <div class="code-block__source code-block__source--html" ${hasReact ? 'data-flavor="html"' : ''}>
-                  ${pre.outerHTML}
-                </div>
-
-                ${
-                  hasReact
-                    ? `
-                  <div class="code-block__source code-block__source--react" data-flavor="react">
-                    ${reactPre.outerHTML}
-                  </div>
-                `
-                    : ''
-                }
-              </div>
-
-              <div class="code-block__buttons">
-                ${hasReact ? ` ${htmlButton} ${reactButton} ` : ''}
-
-                <button
-                  type="button"
-                  class="code-block__button code-block__toggle"
-                  aria-expanded="${isExpanded ? 'true' : 'false'}"
-                  aria-controls="${sourceGroupId}"
-                >
-                  Source
-                  <svg
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <polyline points="6 9 12 15 18 9"></polyline>
-                  </svg>
-                </button>
-
-                ${!code.classList.contains('no-codepen') ? codePenButton : ''}
-              </div>
-            </div>
-          `;
-
-          pre.replaceWith(domParser.parseFromString(codeBlock, 'text/html').body);
-          if (reactPre) reactPre.remove();
-
-          count++;
-        }
-      });
-
-      // Force the highlighter to run again so JSX fields get highlighted properly
-      requestAnimationFrame(() => Prism.highlightAll());
-
-      next(doc.body.innerHTML);
-    });
-
-    // After the page is done loading, force scripts in previews to execute
-    hook.doneEach(() => {
-      [...document.querySelectorAll('.code-block__preview script')].map(script => runScript(script));
-    });
-
-    // Horizontal resizing
-    hook.doneEach(() => {
-      [...document.querySelectorAll('.code-block__preview')].map(preview => {
-        const resizer = preview.querySelector('.code-block__resizer');
-        let startX;
-        let startWidth;
-
-        const dragStart = event => {
-          startX = event.changedTouches ? event.changedTouches[0].pageX : event.clientX;
-          startWidth = parseInt(document.defaultView.getComputedStyle(preview).width, 10);
-          preview.classList.add('code-block__preview--dragging');
-          event.preventDefault();
-          document.documentElement.addEventListener('mousemove', dragMove, false);
-          document.documentElement.addEventListener('touchmove', dragMove, false);
-          document.documentElement.addEventListener('mouseup', dragStop, false);
-          document.documentElement.addEventListener('touchend', dragStop, false);
-        };
-
-        const dragMove = event => {
-          setWidth(startWidth + (event.changedTouches ? event.changedTouches[0].pageX : event.pageX) - startX);
-        };
-
-        const dragStop = event => {
-          preview.classList.remove('code-block__preview--dragging');
-          document.documentElement.removeEventListener('mousemove', dragMove, false);
-          document.documentElement.removeEventListener('touchmove', dragMove, false);
-          document.documentElement.removeEventListener('mouseup', dragStop, false);
-          document.documentElement.removeEventListener('touchend', dragStop, false);
-        };
-
-        const setWidth = width => (preview.style.width = width + 'px');
-
-        resizer.addEventListener('mousedown', dragStart);
-        resizer.addEventListener('touchstart', dragStart);
-      }, false);
-    });
-  });
-
-  // Toggle source mode
-  document.addEventListener('click', event => {
-    const button = event.target.closest('button');
-    const codeBlock = button?.closest('.code-block');
-
-    if (button?.classList.contains('code-block__button--html')) {
-      setFlavor('html');
-    } else if (button?.classList.contains('code-block__button--react')) {
-      setFlavor('react');
-    } else {
-      return;
-    }
-
-    // Update flavor buttons
-    [...document.querySelectorAll('.code-block')].map(codeBlock => {
-      codeBlock
-        .querySelector('.code-block__button--html')
-        ?.classList.toggle('code-block__button--selected', flavor === 'html');
-      codeBlock
-        .querySelector('.code-block__button--react')
-        ?.classList.toggle('code-block__button--selected', flavor === 'react');
-    });
-  });
-
-  // Expand and collapse code blocks
-  document.addEventListener('click', event => {
-    const toggle = event.target.closest('.code-block__toggle');
-    if (toggle) {
-      const codeBlock = event.target.closest('.code-block');
-      codeBlock.classList.toggle('code-block--expanded');
-      event.target.setAttribute('aria-expanded', codeBlock.classList.contains('code-block--expanded'));
-    }
-  });
-
-  // Show pulse when copying
-  document.addEventListener('click', event => {
-    const button = event.target.closest('.docsify-copy-code-button');
-    if (button) {
-      button.classList.remove('copied');
-      requestAnimationFrame(() => {
-        button.addEventListener('animationend', () => button.classList.remove('copied'), { once: true });
-        button.classList.add('copied');
-      });
-    }
-  });
-
-  // Open in CodePen
-  document.addEventListener('click', event => {
-    const button = event.target.closest('button');
-    const version = sessionStorage.getItem('sl-version');
-
-    if (button?.classList.contains('code-block__button--codepen')) {
-      const codeBlock = button.closest('.code-block');
-      const htmlExample = codeBlock.querySelector('.code-block__source--html > pre > code')?.textContent;
-      const reactExample = codeBlock.querySelector('.code-block__source--react > pre > code')?.textContent;
-      const isReact = flavor === 'react' && typeof reactExample === 'string';
-      const theme = localStorage.getItem('theme');
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      const isDark = theme === 'dark' || (theme === 'auto' && prefersDark);
-      const editors = isReact ? '0010' : '1000';
-      let htmlTemplate = '';
-      let jsTemplate = '';
-      let cssTemplate = '';
-
-      const form = document.createElement('form');
-      form.action = 'https://codepen.io/pen/define';
-      form.method = 'POST';
-      form.target = '_blank';
-
-      // HTML templates
-      if (!isReact) {
-        htmlTemplate =
-          `<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/shoelace.js"></script>\n` +
-          '\n' +
-          htmlExample;
-        jsTemplate = '';
-      }
-
-      // React templates
-      if (isReact) {
-        htmlTemplate = '<div id="root"></div>';
-        jsTemplate =
-          `import React from 'https://cdn.skypack.dev/react@${reactVersion}';\n` +
-          `import ReactDOM from 'https://cdn.skypack.dev/react-dom@${reactVersion}';\n` +
-          `import { setBasePath } from 'https://cdn.skypack.dev/@shoelace-style/shoelace@${version}/dist/utilities/base-path';\n` +
-          '\n' +
-          `// Set the base path for Shoelace assets\n` +
-          `setBasePath('https://cdn.skypack.dev/@shoelace-style/shoelace@${version}/dist/')\n` +
-          '\n' +
-          convertModuleLinks(reactExample) +
-          '\n' +
-          '\n' +
-          `ReactDOM.render(<App />, document.getElementById('root'));`;
-      }
-
-      // CSS templates
-      cssTemplate =
-        `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/themes/${
-          isDark ? 'dark' : 'light'
-        }.css';\n` +
-        '\n' +
-        'body {\n' +
-        '  font: 16px sans-serif;\n' +
-        '  background-color: var(--sl-color-neutral-0);\n' +
-        '  color: var(--sl-color-neutral-900);\n' +
-        '  padding: 1rem;\n' +
-        '}';
-
-      // Docs: https://blog.codepen.io/documentation/prefill/
-      const data = {
-        title: '',
-        description: '',
-        tags: ['shoelace', 'web components'],
-        editors,
-        head: `<meta name="viewport" content="width=device-width">`,
-        html_classes: `sl-theme-${isDark ? 'dark' : 'light'}`,
-        css_external: ``,
-        js_external: ``,
-        js_module: true,
-        js_pre_processor: isReact ? 'babel' : 'none',
-        html: htmlTemplate,
-        css: cssTemplate,
-        js: jsTemplate
-      };
-
-      const input = document.createElement('input');
-      input.type = 'hidden';
-      input.name = 'data';
-      input.value = JSON.stringify(data);
-      form.append(input);
-
-      document.body.append(form);
-      form.submit();
-      form.remove();
-    }
-  });
-})();

docs/assets/plugins/metadata/metadata.js

@@ -1,537 +0,0 @@
-(() => {
-  const isDev = location.hostname === 'localhost';
-  const isNext = location.hostname === 'next.shoelace.style';
-  const customElements = fetch('/dist/custom-elements.json')
-    .then(res => res.json())
-    .catch(err => console.error(err));
-
-  function createPropsTable(props) {
-    const table = document.createElement('table');
-    table.innerHTML = `
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Description</th>
-          <th>Reflects</th>
-          <th>Type</th>
-          <th>Default</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${props
-          .map(prop => {
-            const hasAttribute = !!prop.attribute;
-            const isAttributeDifferent = prop.attribute !== prop.name;
-            let attributeInfo = '';
-
-            if (!hasAttribute) {
-              attributeInfo = `<br><small>(property only)</small>`;
-            } else if (isAttributeDifferent) {
-              attributeInfo = `
-                <br>
-                <sl-tooltip content="This attribute is different from its property">
-                  <small>
-                    <code class="nowrap">
-                      ${escapeHtml(prop.attribute)}
-                    </code>
-                  </small>
-                </sl-tooltip>`;
-            }
-
-            return `
-              <tr>
-                <td>
-                  <code class="nowrap">${escapeHtml(prop.name)}</code>
-                  ${attributeInfo}
-                </td>
-                <td>
-                  ${escapeHtml(prop.description)}
-                </td>
-                <td style="text-align: center;">${
-                  prop.reflects ? '<sl-icon label="yes" name="check"></sl-icon>' : ''
-                }</td>
-                <td>${prop.type?.text ? `<code>${escapeHtml(prop.type?.text || '')}</code>` : '-'}</td>
-                <td>${prop.default ? `<code>${escapeHtml(prop.default)}</code>` : '-'}</td>
-              </tr>
-            `;
-          })
-          .join('')}
-      </tbody>
-    `;
-
-    return table.outerHTML;
-  }
-
-  function createEventsTable(events) {
-    const table = document.createElement('table');
-    table.innerHTML = `
-      <thead>
-        <tr>
-          <th data-flavor="html">Name</th>
-          <th data-flavor="react">React Event</th>
-          <th>Description</th>
-          <th>Event Detail</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${events
-          .map(
-            event => `
-              <tr>
-                <td data-flavor="html"><code class="nowrap">${escapeHtml(event.name)}</code></td>
-                <td data-flavor="react"><code class="nowrap">${escapeHtml(event.reactName)}</code></td>
-                <td>${escapeHtml(event.description)}</td>
-                <td>${event.type?.text ? `<code>${escapeHtml(event.type?.text)}` : '-'}</td>
-              </tr>
-            `
-          )
-          .join('')}
-      </tbody>
-    `;
-
-    return table.outerHTML;
-  }
-
-  function createMethodsTable(methods) {
-    const table = document.createElement('table');
-    table.innerHTML = `
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Description</th>
-          <th>Arguments</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${methods
-          .map(
-            method => `
-              <tr>
-                <td class="nowrap"><code>${escapeHtml(method.name)}</code></td>
-                <td>${escapeHtml(method.description)}</td>
-                <td>
-                  ${
-                    method.parameters?.length
-                      ? `
-                        <code>${escapeHtml(
-                          method.parameters.map(param => `${param.name}: ${param.type.text}`).join(', ')
-                        )}</code>
-                      `
-                      : '-'
-                  }
-                </td>
-              </tr>
-           `
-          )
-          .join('')}
-      </tbody>
-    `;
-
-    return table.outerHTML;
-  }
-
-  function createSlotsTable(slots) {
-    const table = document.createElement('table');
-    table.innerHTML = `
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${slots
-          .map(
-            slot => `
-              <tr>
-                <td class="nowrap">${slot.name ? `<code>${escapeHtml(slot.name)}</code>` : '(default)'}</td>
-                <td>${escapeHtml(slot.description)}</td>
-              </tr>
-            `
-          )
-          .join('')}
-      </tbody>
-    `;
-
-    return table.outerHTML;
-  }
-
-  function createCustomPropertiesTable(styles) {
-    const table = document.createElement('table');
-    table.innerHTML = `
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Description</th>
-          <th>Default</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${styles
-          .map(
-            style => `
-              <tr>
-                <td class="nowrap"><code>${escapeHtml(style.name)}</code></td>
-                <td>${escapeHtml(style.description)}</td>
-                <td><code>${escapeHtml(style.default)}</code></td>
-              </tr>
-            `
-          )
-          .join('')}
-      </tbody>
-    `;
-
-    return table.outerHTML;
-  }
-
-  function createPartsTable(parts) {
-    const table = document.createElement('table');
-    table.innerHTML = `
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${parts
-          .map(
-            part => `
-              <tr>
-                <td class="nowrap"><code>${escapeHtml(part.name)}</code></td>
-                <td>${escapeHtml(part.description)}</td>
-              </tr>
-           `
-          )
-          .join('')}
-      </tbody>
-    `;
-
-    return table.outerHTML;
-  }
-
-  function createAnimationsTable(animations) {
-    const table = document.createElement('table');
-    table.innerHTML = `
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${animations
-          .map(
-            animation => `
-              <tr>
-                <td class="nowrap"><code>${escapeHtml(animation.name)}</code></td>
-                <td>${escapeHtml(animation.description)}</td>
-              </tr>
-            `
-          )
-          .join('')}
-      </tbody>
-    `;
-
-    return table.outerHTML;
-  }
-
-  function createDependenciesList(targetComponent, allComponents) {
-    const ul = document.createElement('ul');
-    const dependencies = [];
-
-    // Recursively fetch sub-dependencies
-    function getDependencies(tag) {
-      const component = allComponents.find(c => c.tagName === tag);
-      if (!component || !Array.isArray(component.dependencies)) {
-        return [];
-      }
-
-      component.dependencies?.map(tag => {
-        if (!dependencies.includes(tag)) {
-          dependencies.push(tag);
-        }
-        getDependencies(tag);
-      });
-    }
-
-    getDependencies(targetComponent);
-    dependencies.sort().map(tag => {
-      const li = document.createElement('li');
-      li.innerHTML = `<code>&lt;${tag}&gt;</code>`;
-      ul.appendChild(li);
-    });
-
-    return ul.outerHTML;
-  }
-
-  function escapeHtml(html) {
-    return (html + '')
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&apos;')
-      .replace(/`(.*?)`/g, '<code>$1</code>');
-  }
-
-  function getAllComponents(metadata) {
-    const allComponents = [];
-    metadata.modules?.map(module => {
-      module.declarations?.map(declaration => {
-        if (declaration.customElement) {
-          // Generate the dist path based on the src path and attach it to the component
-          declaration.path = module.path.replace(/^src\//, 'dist/').replace(/\.ts$/, '.js');
-
-          allComponents.push(declaration);
-        }
-      });
-    });
-
-    return allComponents;
-  }
-
-  function getComponent(metadata, tagName) {
-    return getAllComponents(metadata).find(component => component.tagName === tagName);
-  }
-
-  if (!window.$docsify) {
-    throw new Error('Docsify must be loaded before installing this plugin.');
-  }
-
-  window.$docsify.plugins.push((hook, vm) => {
-    hook.mounted(async function () {
-      const metadata = await customElements;
-      const target = document.querySelector('.app-name');
-
-      // Add version
-      const version = document.createElement('div');
-      version.classList.add('sidebar-version');
-      version.textContent = isDev ? 'Development' : isNext ? 'Next' : metadata.package.version;
-      target.appendChild(version);
-
-      // Store version for reuse
-      sessionStorage.setItem('sl-version', metadata.package.version);
-
-      // Add repo buttons
-      const buttons = document.createElement('div');
-      buttons.classList.add('sidebar-buttons');
-      buttons.innerHTML = `
-        <sl-button size="small" class="repo-button repo-button--sponsor" href="https://github.com/sponsors/claviska" target="_blank">
-          <sl-icon slot="prefix" name="heart"></sl-icon> Sponsor
-        </sl-button>
-        <sl-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
-          <sl-icon slot="prefix" name="github"></sl-icon> <span class="github-star-count">Star</span>
-        </sl-button>
-        <sl-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
-          <sl-icon slot="prefix" name="twitter"></sl-icon> Follow
-        </sl-button>
-      `;
-      target.appendChild(buttons);
-    });
-
-    hook.beforeEach(async function (content, next) {
-      const metadata = await customElements;
-
-      // Replace %VERSION% placeholders
-      content = content.replace(/%VERSION%/g, metadata.package.version);
-
-      // Handle [component-header] tags
-      content = content.replace(/\[component-header:([a-z-]+)\]/g, (match, tag) => {
-        const component = getComponent(metadata, tag);
-        let result = '';
-
-        if (!component) {
-          console.error('Component not found in metadata: ' + tag);
-          return next(content);
-        }
-
-        let badgeType = 'neutral';
-        if (component.status === 'stable') badgeType = 'primary';
-        if (component.status === 'experimental') badgeType = 'warning';
-        if (component.status === 'planned') badgeType = 'neutral';
-        if (component.status === 'deprecated') badgeType = 'danger';
-
-        result += `
-          <div class="component-header">
-            <div class="component-header__tag">
-              <code>&lt;${component.tagName}&gt; | ${component.name}</code>
-            </div>
-
-            <div class="component-header__info">
-              <sl-badge variant="neutral" pill>
-                Since ${component.since || '?'}
-              </sl-badge>
-
-              <sl-badge variant="${badgeType}" pill style="text-transform: capitalize;">
-                ${component.status}
-              </sl-badge>
-            </div>
-          </div>
-        `;
-
-        return result.replace(/^ +| +$/gm, '');
-      });
-
-      // Handle [component-metadata] tags
-      content = content.replace(/\[component-metadata:([a-z-]+)\]/g, (match, tag) => {
-        const component = getComponent(metadata, tag);
-        let result = '';
-
-        if (!component) {
-          console.error('Component not found in metadata: ' + tag);
-          return next(content);
-        }
-
-        // Remove members that are private or don't have a description
-        const members = component.members?.filter(member => member.description && member.privacy !== 'private');
-        const methods = members?.filter(prop => prop.kind === 'method' && prop.privacy !== 'private');
-        const props = members?.filter(prop => {
-          // Look for a corresponding attribute
-          const attribute = component.attributes?.find(attr => attr.fieldName === prop.name);
-          if (attribute) {
-            prop.attribute = attribute.name || attribute.fieldName;
-          }
-
-          return prop.kind === 'field' && prop.privacy !== 'private';
-        });
-
-        if (component.path) {
-          /* prettier-ignore */
-          result += `
-            ## Importing
-
-            <sl-tab-group>
-            <sl-tab slot="nav" panel="script">Script</sl-tab>
-            <sl-tab slot="nav" panel="import">Import</sl-tab>
-            <sl-tab slot="nav" panel="bundler">Bundler</sl-tab>
-            <sl-tab slot="nav" panel="react">React</sl-tab>
-
-            <sl-tab-panel name="script">\n
-            To import this component from [the CDN](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace) using a script tag:
-
-            \`\`\`html
-            <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${metadata.package.version}/${component.path}"></script>
-            \`\`\`
-            </sl-tab-panel>
-
-            <sl-tab-panel name="import">\n
-            To import this component from [the CDN](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace) using a JavaScript import:
-
-            \`\`\`js
-            import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${metadata.package.version}/${component.path}';
-            \`\`\`
-            </sl-tab-panel>
-
-            <sl-tab-panel name="bundler">\n
-            To import this component using [a bundler](/getting-started/installation#bundling):
-            \`\`\`js
-            import '@shoelace-style/shoelace/${component.path}';
-            \`\`\`
-            </sl-tab-panel>
-
-            <sl-tab-panel name="react">\n
-            To import this component as a [React component](/frameworks/react):
-            \`\`\`js
-            import { ${component.name} } from '@shoelace-style/shoelace/dist/react';
-            \`\`\`
-            </sl-tab-panel>
-            </sl-tab-group>
-          `;
-        }
-
-        if (props?.length) {
-          result += `
-            ## Properties
-            ${createPropsTable(props)}
-          `;
-        }
-
-        if (component.events?.length) {
-          result += `
-            ## Events
-            ${createEventsTable(component.events)}
-          `;
-        }
-
-        if (methods?.length) {
-          result += `
-            ## Methods
-
-            <p data-flavor="html">
-              Methods can be called by obtaining a reference to the element and calling
-              <code>el.methodName()</code>.
-            </p>
-
-
-            <p data-flavor="react">
-              Methods can be called by obtaining a <code>ref</code> to the element and calling
-              <code>ref.current.methodName()</code>.
-            </p>
-
-            ${createMethodsTable(methods)}
-          `;
-        }
-
-        if (component.slots?.length) {
-          result += `
-            ## Slots
-            ${createSlotsTable(component.slots)}
-          `;
-        }
-
-        if (component.cssProperties?.length) {
-          result += `
-            ## CSS Custom Properties
-            ${createCustomPropertiesTable(component.cssProperties)}
-          `;
-        }
-
-        if (component.cssParts?.length) {
-          result += `
-            ## CSS Parts
-            ${createPartsTable(component.cssParts)}
-          `;
-        }
-
-        if (component.animations?.length) {
-          result += `
-            ## Animations
-            ${createAnimationsTable(component.animations)}
-
-            Learn how to [customize animations](/getting-started/customizing#animations).
-          `;
-        }
-
-        if (component.dependencies?.length) {
-          result += `
-            ## Dependencies
-
-            This component imports the following dependencies.
-
-            ${createDependenciesList(component.tagName, getAllComponents(metadata))}
-          `;
-        }
-
-        // Strip whitespace so markdown doesn't process things as code blocks
-        return result.replace(/^ +| +$/gm, '');
-      });
-
-      next(content);
-    });
-
-    // Wrap tables so we can scroll them horizontally when needed
-    hook.doneEach(function () {
-      const content = document.querySelector('.content');
-      const tables = [...content.querySelectorAll('table')];
-
-      tables.map(table => {
-        table.outerHTML = `
-          <div class="table-wrapper">
-            ${table.outerHTML}
-          </div>
-        `;
-      });
-    });
-  });
-})();

docs/assets/plugins/scroll-position/scroll-position.js

@@ -1,24 +0,0 @@
-(() => {
-  if (!window.$docsify) {
-    throw new Error('Docsify must be loaded before installing this plugin.');
-  }
-
-  //
-  // Docsify generates pages dynamically and asynchronously, so when a reload happens, the scroll position can't be
-  // be restored immediately. This plugin waits until Docsify loads the page and then restores it.
-  //
-  window.$docsify.plugins.push((hook, vm) => {
-    hook.ready(() => {
-      // Restore
-      const scrollTop = sessionStorage.getItem('bs-scroll');
-      if (scrollTop) {
-        document.documentElement.scrollTop = scrollTop;
-      }
-
-      // Remember
-      document.addEventListener('scroll', event => {
-        sessionStorage.setItem('bs-scroll', document.documentElement.scrollTop);
-      });
-    });
-  });
-})();

docs/assets/plugins/search/search.css

@@ -1,180 +0,0 @@
-body.site-search-visible {
-  overflow: hidden;
-}
-
-.sidebar .search-box {
-  margin: 1.25rem 26px;
-}
-
-.sidebar .search-box kbd {
-  margin-top: 2px;
-  margin-right: 1rem;
-}
-
-/* Site search */
-.site-search {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1000;
-}
-
-.site-search[hidden] {
-  display: none;
-}
-
-.site-search__overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--sl-overlay-background-color);
-  z-index: -1;
-}
-
-.site-search__panel {
-  display: flex;
-  flex-direction: column;
-  max-width: 460px;
-  max-height: calc(100vh - 20rem);
-  background-color: var(--sl-panel-background-color);
-  border-radius: var(--sl-border-radius-large);
-  box-shadow: var(--sl-shadow-x-large);
-  margin: 10rem auto;
-}
-
-@media screen and (max-width: 900px) {
-  .site-search__panel {
-    max-width: 100%;
-    max-height: calc(92vh - 120px); /* allow iOS browser chrome */
-    margin: 4vh var(--sl-spacing-medium);
-  }
-}
-
-.site-search__input::part(base) {
-  border: none;
-  background: transparent;
-  border-radius: var(--sl-border-radius-large);
-}
-
-.site-search__input:focus-within::part(base) {
-  outline: none;
-  box-shadow: none;
-}
-
-.site-search__input {
-  --sl-input-height-large: 4rem;
-}
-
-.site-search__body {
-  flex: 1 1 auto;
-  overflow: auto;
-}
-
-.site-search--has-results .site-search__body {
-  border-top: solid 1px var(--sl-color-neutral-200);
-}
-
-.site-search__results {
-  display: none;
-  line-height: var(--sl-line-height-dense);
-  list-style: none;
-  padding: var(--sl-spacing-x-small) 0;
-  margin: 0;
-}
-
-.site-search--has-results .site-search__results {
-  display: block;
-}
-
-.site-search__results a {
-  display: block;
-  text-decoration: none;
-  padding: var(--sl-spacing-x-small) var(--sl-spacing-large);
-}
-
-.site-search__results li a:hover,
-.site-search__results li a:hover small {
-  background-color: var(--sl-color-neutral-100);
-}
-
-.site-search__results li[aria-selected='true'] a,
-.site-search__results li[aria-selected='true'] a small,
-.site-search__results li[aria-selected='true'] a sl-icon {
-  outline: none;
-  color: var(--sl-color-neutral-0);
-  background-color: var(--sl-color-primary-600);
-}
-
-.sl-theme-dark .site-search__results li[aria-selected='true'] a,
-.sl-theme-dark .site-search__results li[aria-selected='true'] a small,
-.sl-theme-dark .site-search__results li[aria-selected='true'] a sl-icon {
-  background-color: var(--sl-color-primary-400);
-  color: var(--sl-color-neutral-1000);
-}
-
-.site-search__results h3 {
-  font-weight: var(--sl-font-weight-semibold);
-  margin: 0;
-}
-
-.site-search__results small {
-  display: block;
-  color: var(--sl-color-neutral-600);
-}
-
-.site-search__result {
-  padding: 0;
-  margin: 0;
-}
-
-.site-search__result a {
-  display: flex;
-  align-items: center;
-  gap: var(--sl-spacing-medium);
-}
-
-.site-search__result-icon {
-  flex: 0 0 auto;
-  display: flex;
-  color: var(--sl-color-neutral-400);
-  font-size: var(--sl-font-size-x-large);
-}
-
-.site-search__result-description {
-  flex: 1 1 auto;
-}
-
-.site-search__empty {
-  display: none;
-  border-top: solid 1px var(--sl-color-neutral-200);
-  text-align: center;
-  padding: var(--sl-spacing-x-large);
-}
-
-.site-search--no-results .site-search__empty {
-  display: block;
-}
-
-.site-search__footer {
-  display: flex;
-  justify-content: center;
-  gap: var(--sl-spacing-large);
-  border-top: solid 1px var(--sl-color-neutral-200);
-  border-bottom-left-radius: inherit;
-  border-bottom-right-radius: inherit;
-  padding: var(--sl-spacing-medium);
-}
-
-.site-search__footer small {
-  color: var(--sl-color-neutral-700);
-}
-
-@media screen and (max-width: 900px) {
-  .site-search__footer {
-    display: none;
-  }
-}

docs/assets/plugins/search/search.js

@@ -1,293 +0,0 @@
-(() => {
-  if (!window.$docsify) {
-    throw new Error('Docsify must be loaded before installing this plugin.');
-  }
-
-  window.$docsify.plugins.push((hook, vm) => {
-    // Append the search box to the sidebar
-    hook.mounted(function () {
-      const appName = document.querySelector('.sidebar .app-name');
-      const searchBox = document.createElement('div');
-      searchBox.classList.add('search-box');
-      searchBox.innerHTML = `
-        <sl-input
-          type="search"
-          placeholder="Search"
-          clearable
-          pill
-        >
-          <sl-icon slot="prefix" name="search"></sl-icon>
-          <kbd slot="suffix" title="Press / to search">/</kbd>
-        </sl-input>
-      `;
-      const searchBoxInput = searchBox.querySelector('sl-input');
-
-      appName.insertAdjacentElement('afterend', searchBox);
-
-      // Show the search panel when the search is clicked
-      searchBoxInput.addEventListener('mousedown', event => {
-        event.preventDefault();
-        show();
-      });
-
-      // Show the search panel when a key is pressed
-      searchBoxInput.addEventListener('keydown', event => {
-        if (event.key === 'Tab') {
-          return;
-        }
-
-        // Pass the character that was typed through to the search input
-        if (event.key.length === 1) {
-          event.preventDefault();
-          input.value = event.key;
-          show();
-        }
-      });
-    });
-
-    // Append the search panel to the body
-    const siteSearch = document.createElement('div');
-    siteSearch.classList.add('site-search');
-    siteSearch.hidden = true;
-    siteSearch.innerHTML = `
-      <div class="site-search__overlay"></div>
-      <div class="site-search__panel">
-        <header class="site-search__header">
-          <sl-input
-            class="site-search__input"
-            type="search"
-            placeholder="Search this site"
-            size="large"
-            clearable
-          >
-            <sl-icon slot="prefix" name="search"></sl-icon>
-          </sl-input>
-        </header>
-        <div class="site-search__body">
-          <ul class="site-search__results"></ul>
-          <div class="site-search__empty">No results found.</div>
-        </div>
-        <footer class="site-search__footer">
-          <small><kbd>↑</kbd> <kbd>↓</kbd> navigate</small>
-          <small><kbd>↲</kbd> select</small>
-          <small><kbd>esc</kbd> close</small>
-        </footer>
-      </div>
-    `;
-    document.body.append(siteSearch);
-
-    const searchButtons = [...document.querySelectorAll('[data-site-search]')];
-    const overlay = siteSearch.querySelector('.site-search__overlay');
-    const panel = siteSearch.querySelector('.site-search__panel');
-    const input = siteSearch.querySelector('.site-search__input');
-    const results = siteSearch.querySelector('.site-search__results');
-    const animationDuration = 150;
-    const searchDebounce = 200;
-    let isShowing = false;
-    let searchTimeout;
-    let searchIndex;
-    let map;
-
-    // Load search data
-    const searchData = fetch('../../../search.json')
-      .then(res => res.json())
-      .then(data => {
-        searchIndex = lunr.Index.load(data.searchIndex);
-        map = data.map;
-      });
-
-    async function show() {
-      isShowing = true;
-      document.body.classList.add('site-search-visible');
-      siteSearch.hidden = false;
-      input.focus();
-      updateResults();
-
-      await Promise.all([
-        panel.animate(
-          [
-            { opacity: 0, transform: 'scale(.9)' },
-            { opacity: 1, transform: 'scale(1)' }
-          ],
-          { duration: animationDuration }
-        ).finished,
-        overlay.animate([{ opacity: 0 }, { opacity: 1 }], { duration: animationDuration }).finished
-      ]);
-
-      document.addEventListener('mousedown', handleDocumentMouseDown);
-      document.addEventListener('keydown', handleDocumentKeyDown);
-      document.addEventListener('focusin', handleDocumentFocusIn);
-    }
-
-    async function hide() {
-      isShowing = false;
-      document.body.classList.remove('site-search-visible');
-
-      await Promise.all([
-        panel.animate(
-          [
-            { opacity: 1, transform: 'scale(1)' },
-            { opacity: 0, transform: 'scale(.9)' }
-          ],
-          { duration: animationDuration }
-        ).finished,
-        overlay.animate([{ opacity: 1 }, { opacity: 0 }], { duration: animationDuration }).finished
-      ]);
-
-      siteSearch.hidden = true;
-      input.value = '';
-      updateResults();
-
-      document.removeEventListener('mousedown', handleDocumentMouseDown);
-      document.removeEventListener('keydown', handleDocumentKeyDown);
-      document.removeEventListener('focusin', handleDocumentFocusIn);
-    }
-
-    function handleInput() {
-      // Debounce search queries
-      clearTimeout(searchTimeout);
-      searchTimeout = setTimeout(() => updateResults(input.value), searchDebounce);
-    }
-
-    function handleDocumentFocusIn(event) {
-      // Close when focus leaves the panel
-      if (event.target.closest('.site-search__panel') !== panel) {
-        hide();
-      }
-    }
-
-    function handleDocumentMouseDown(event) {
-      // Close when clicking outside of the panel
-      if (event.target.closest('.site-search__overlay') === overlay) {
-        hide();
-      }
-    }
-
-    function handleDocumentKeyDown(event) {
-      // Close when pressing escape
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        hide();
-        return;
-      }
-
-      // Handle keyboard selections
-      if (['ArrowDown', 'ArrowUp', 'Home', 'End', 'Enter'].includes(event.key)) {
-        event.preventDefault();
-
-        const currentEl = results.querySelector('[aria-selected="true"]');
-        const items = [...results.querySelectorAll('li')];
-        const index = items.indexOf(currentEl);
-        let nextEl;
-
-        if (items.length === 0) {
-          return;
-        }
-
-        switch (event.key) {
-          case 'ArrowUp':
-            nextEl = items[Math.max(0, index - 1)];
-            break;
-          case 'ArrowDown':
-            nextEl = items[Math.min(items.length - 1, index + 1)];
-            break;
-          case 'Home':
-            nextEl = items[0];
-            break;
-          case 'End':
-            nextEl = items[items.length - 1];
-            break;
-          case 'Enter':
-            currentEl?.querySelector('a')?.click();
-            break;
-        }
-
-        // Update the selected item
-        items.map(item => {
-          if (item === nextEl) {
-            item.setAttribute('aria-selected', 'true');
-            nextEl.scrollIntoView({ block: 'nearest' });
-          } else {
-            item.setAttribute('aria-selected', 'false');
-          }
-        });
-
-        return;
-      }
-    }
-
-    async function updateResults(query = '') {
-      try {
-        await searchIndex;
-
-        const hasQuery = query.length > 0;
-        let matches = hasQuery ? searchIndex.search(`${query}`) : [];
-
-        // Fall back to a fuzzy search if no matches are found
-        if (matches.length === 0 && hasQuery) {
-          matches = searchIndex.search(`${query}~2`);
-        }
-
-        let hasResults = hasQuery && matches.length > 0;
-        siteSearch.classList.toggle('site-search--has-results', hasQuery && hasResults);
-        siteSearch.classList.toggle('site-search--no-results', hasQuery && !hasResults);
-        panel.setAttribute('aria-expanded', hasQuery && hasResults ? 'true' : 'false');
-
-        results.innerHTML = '';
-
-        matches.map((match, index) => {
-          const page = map[match.ref];
-          const li = document.createElement('li');
-          const a = document.createElement('a');
-          let icon = 'file-text';
-
-          if (page.url.includes('getting-started/')) icon = 'lightbulb';
-          if (page.url.includes('resources/')) icon = 'book';
-          if (page.url.includes('components/')) icon = 'puzzle';
-          if (page.url.includes('tokens/')) icon = 'palette2';
-          if (page.url.includes('utilities/')) icon = 'wrench';
-          if (page.url.includes('tutorials/')) icon = 'joystick';
-
-          a.href = $docsify.routerMode === 'hash' ? `/#/${page.url}` : `/${page.url}`;
-          a.innerHTML = `
-            <div class="site-search__result-icon">
-              <sl-icon name="${icon}" aria-hidden="true"></sl-icon>
-            </div>
-            <div class="site-search__result__details">
-              <h3>${page.title}</h3>
-              <small>${page.url}</small>
-            </div>
-          `;
-
-          li.classList.add('site-search__result');
-          li.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
-          li.appendChild(a);
-          results.appendChild(li);
-        });
-      } catch {
-        // Ignore query errors as the user types
-      }
-    }
-
-    // Show the search panel slash is pressed outside of a form element
-    document.addEventListener('keydown', event => {
-      if (
-        !isShowing &&
-        event.key === '/' &&
-        !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
-      ) {
-        event.preventDefault();
-        show();
-      }
-    });
-
-    input.addEventListener('sl-input', handleInput);
-
-    // Close when a result is selected
-    results.addEventListener('click', event => {
-      if (event.target.closest('a')) {
-        hide();
-      }
-    });
-  });
-})();

docs/assets/plugins/theme-picker/theme-picker.css

@@ -1,29 +0,0 @@
-.theme-picker {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  z-index: 30;
-}
-
-.theme-picker:not(:defined) {
-  display: none;
-}
-
-.theme-picker sl-menu-label {
-  white-space: nowrap;
-}
-
-.theme-picker sl-menu-label kbd {
-  margin-left: 0.5rem;
-}
-
-@media screen and (max-width: 768px) {
-  .theme-picker {
-    top: 0.5rem;
-    right: 0.5rem;
-  }
-
-  .theme-picker sl-menu-label {
-    display: none;
-  }
-}

docs/assets/plugins/theme-picker/theme-picker.js

@@ -1,83 +0,0 @@
-(() => {
-  if (!window.$docsify) {
-    throw new Error('Docsify must be loaded before installing this plugin.');
-  }
-
-  window.$docsify.plugins.push((hook, vm) => {
-    hook.mounted(function () {
-      function getTheme() {
-        return localStorage.getItem('theme') || 'auto';
-      }
-
-      function isDark() {
-        if (theme === 'auto') {
-          return window.matchMedia('(prefers-color-scheme: dark)').matches;
-        } else {
-          return theme === 'dark';
-        }
-      }
-
-      function setTheme(newTheme) {
-        const noTransitions = Object.assign(document.createElement('style'), {
-          textContent: '* { transition: none !important; }'
-        });
-
-        theme = newTheme;
-        localStorage.setItem('theme', theme);
-
-        // Update the UI
-        [...menu.querySelectorAll('sl-menu-item')].map(item => (item.checked = item.getAttribute('value') === theme));
-        menuIcon.name = isDark() ? 'moon' : 'sun';
-
-        // Toggle the dark mode class without transitions
-        document.body.appendChild(noTransitions);
-        requestAnimationFrame(() => {
-          document.documentElement.classList.toggle('sl-theme-dark', isDark());
-          requestAnimationFrame(() => document.body.removeChild(noTransitions));
-        });
-      }
-
-      let theme = getTheme();
-
-      // Generate the theme picker dropdown
-      const dropdown = document.createElement('sl-dropdown');
-      dropdown.classList.add('theme-picker');
-      dropdown.innerHTML = `
-        <sl-button size="small" pill slot="trigger" caret>
-          <sl-icon name="sun" label="Select Theme"></sl-icon>
-        </sl-button>
-        <sl-menu>
-          <sl-menu-label>Toggle <kbd>\\</kbd></sl-menu-label>
-          <sl-menu-item value="light">Light</sl-menu-item>
-          <sl-menu-item value="dark">Dark</sl-menu-item>
-          <sl-divider></sl-divider>
-          <sl-menu-item value="auto">Auto</sl-menu-item>
-        </sl-menu>
-      `;
-      document.querySelector('.sidebar-toggle').insertAdjacentElement('afterend', dropdown);
-
-      // Listen for selections
-      const menu = dropdown.querySelector('sl-menu');
-      const menuIcon = dropdown.querySelector('sl-icon');
-      menu.addEventListener('sl-select', event => setTheme(event.detail.item.value));
-
-      // Update the theme when the preference changes
-      window.matchMedia('(prefers-color-scheme: dark)').addListener(event => setTheme(theme));
-
-      // Toggle themes when pressing backslash
-      document.addEventListener('keydown', event => {
-        if (
-          event.key === '\\' &&
-          !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
-        ) {
-          event.preventDefault();
-
-          setTheme(isDark() ? 'light' : 'dark');
-        }
-      });
-
-      // Set the initial theme and sync the UI
-      setTheme(theme);
-    });
-  });
-})();

docs/assets/styles/docs.css

@@ -1,642 +0,0 @@
-html {
-  box-sizing: border-box;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
-body {
-  font-family: var(--sl-font-sans);
-  font-size: var(--sl-font-size-medium);
-  font-weight: var(--sl-font-weight-normal);
-  letter-spacing: var(--sl-letter-spacing-normal);
-  background-color: var(--sl-color-neutral-0);
-  color: var(--sl-color-neutral-900);
-  line-height: var(--sl-line-height-normal);
-}
-
-a {
-  color: var(--sl-color-primary-600);
-}
-
-a:hover {
-  color: var(--sl-color-primary-700);
-}
-
-strong {
-  font-weight: var(--sl-font-weight-bold);
-}
-
-/* Sidebar */
-.sidebar {
-  background-color: var(--sl-color-neutral-0);
-  border-right: solid 1px var(--sl-color-neutral-200);
-}
-
-.sidebar .app-name {
-  padding: 0 1.5rem;
-}
-
-.sidebar-version {
-  font-size: var(--sl-font-size-x-small);
-  font-weight: var(--sl-font-weight-normal);
-  color: var(--sl-color-neutral-500);
-  text-align: right;
-  padding: 0 var(--sl-spacing-small);
-  margin: -1.25rem 0 0.6rem 0;
-}
-
-.sidebar-buttons {
-  text-align: center;
-  margin-top: 0;
-}
-
-/* Sidebar toggle */
-.sidebar-toggle {
-  top: 0.25rem;
-  left: 0.25rem;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--sl-border-radius-medium);
-  background-color: var(--sl-color-neutral-0);
-  padding: 0.5rem;
-}
-
-.sidebar-toggle:hover .sidebar-toggle-button {
-  opacity: 1;
-}
-
-.sidebar-toggle:active .sidebar-toggle-button span {
-  background-color: var(--sl-color-primary-600);
-}
-
-.sidebar-toggle:focus {
-  outline: none;
-  box-shadow: var(--sl-focus-ring);
-}
-
-.sidebar-toggle span:last-child {
-  margin-bottom: 0;
-}
-
-@media screen and (max-width: 768px) {
-  body.close .sidebar-toggle {
-    width: 2rem;
-    background: none;
-    padding: 0.5rem;
-  }
-}
-
-/* Sidebar nav */
-.sidebar-nav {
-  padding: 0 1rem;
-}
-
-.sidebar-nav li {
-  line-height: 1;
-  padding: 0;
-}
-
-.sidebar-nav a {
-  color: inherit;
-  text-decoration: none;
-  line-height: 1.5em;
-  padding-top: 0.25em;
-  padding-bottom: 0.25em;
-}
-
-.sidebar-nav li.collapse > a,
-.sidebar-nav li.active > a {
-  color: var(--sl-color-primary-600);
-}
-
-.sidebar li > p {
-  font-weight: var(--sl-font-weight-bold);
-  border-bottom: solid 1px var(--sl-color-neutral-200);
-  margin: 0 0.75rem 0.5rem 0;
-}
-
-.sidebar ul li ul {
-  padding-left: 0.5rem;
-  margin: 0 0.75rem 1.5rem 0;
-}
-
-.sidebar ul ul ul {
-  padding: 0;
-  margin: 0 0 0 0.5rem;
-}
-
-.sidebar ul ul ul li {
-  list-style: disc;
-  margin-left: 1.5rem;
-}
-
-/* Splash */
-.splash {
-  display: flex;
-  padding-top: 2rem;
-}
-
-.splash-start {
-  min-width: 420px;
-}
-
-.splash-end {
-  display: flex;
-  align-items: flex-end;
-  width: auto;
-  padding-left: 1rem;
-}
-
-.splash-image {
-  width: 100%;
-  height: auto;
-}
-
-.splash-logo {
-  max-width: 22rem;
-}
-
-.markdown-section .splash-start h1:first-of-type {
-  font-size: var(--sl-font-size-large);
-  margin: 0 0 0.5rem 0;
-}
-
-@media screen and (max-width: 1040px) {
-  .splash {
-    display: block;
-  }
-
-  .splash-start {
-    min-width: 0;
-    padding-bottom: 1rem;
-  }
-
-  .splash-end {
-    padding: 0;
-  }
-
-  .splash-image {
-    display: block;
-    max-width: 400px;
-  }
-
-  /* Shields */
-  .splash + p {
-    margin-top: 2rem;
-  }
-}
-
-/* Content */
-.content {
-  padding-top: 0;
-}
-
-.markdown-section {
-  max-width: 860px;
-}
-
-.anchor span {
-  color: var(--sl-color-neutral-1000);
-}
-
-.markdown-section blockquote {
-  position: relative;
-  border-left: solid 4px var(--sl-color-neutral-200);
-  font-style: italic;
-  padding: 1rem 1.5rem;
-  margin: 0 0 1rem 0;
-}
-
-.markdown-section blockquote p:first-child {
-  margin-top: 0;
-}
-
-.markdown-section blockquote p:last-child {
-  margin-bottom: 0;
-}
-
-.markdown-section ul {
-  padding: 0 0 0 1.5rem;
-  margin: 0 0 1rem 0;
-}
-
-.markdown-section ul ul {
-  margin-bottom: 0;
-}
-
-.docsify-pagination-container {
-  border-top-color: var(--sl-color-neutral-200) !important;
-}
-
-.pagination-item-label,
-.pagination-item-subtitle,
-.pagination-item-title {
-  opacity: 1 !important;
-}
-
-.markdown-section h1,
-.markdown-section h2,
-.markdown-section h3,
-.markdown-section h4,
-.markdown-section h5,
-.markdown-section h6 {
-  font-weight: var(--sl-font-weight-normal);
-  margin: 0 0 1em 0;
-}
-
-.markdown-section h1 {
-  font-size: var(--sl-font-size-2x-large);
-}
-
-.markdown-section h2 {
-  font-size: var(--sl-font-size-x-large);
-  border-bottom: solid 1px var(--sl-color-neutral-200);
-  margin-top: 2rem;
-}
-
-.markdown-section h3 {
-  font-size: var(--sl-font-size-large);
-}
-
-.markdown-section h4 {
-  font-size: var(--sl-font-size-medium);
-}
-
-.markdown-section h5 {
-  font-size: var(--sl-font-size-small);
-}
-
-.markdown-section h6 {
-  font-size: var(--sl-font-size-x-small);
-}
-
-.markdown-section pre {
-  font-family: var(--sl-font-mono);
-}
-
-.markdown-section h1:first-of-type {
-  margin-bottom: 0;
-}
-
-.markdown-section code {
-  font-family: var(--sl-font-mono);
-  font-size: 87.5%;
-  background-color: var(--sl-color-neutral-50);
-  border-radius: var(--sl-border-radius-small);
-  padding: 2px 4px;
-}
-
-.markdown-section tr:nth-child(2n) code {
-  background-color: var(--sl-color-neutral-100);
-}
-
-kbd,
-.markdown-section kbd {
-  font-family: var(--sl-font-mono);
-  font-size: 87.5%;
-  background-color: var(--sl-color-neutral-50);
-  border-radius: var(--sl-border-radius-small);
-  border: solid 1px var(--sl-color-neutral-200);
-  box-shadow: inset 0 1px 0 var(--sl-color-neutral-0);
-  padding: 2px 5px;
-}
-
-/* Code blocks */
-.markdown-section pre {
-  position: relative;
-  background-color: var(--sl-color-neutral-50);
-  border-radius: var(--sl-border-radius-medium);
-}
-
-.markdown-section pre > code {
-  display: block;
-  background: none;
-  border-radius: 0;
-  color: var(--sl-color-neutral-800);
-  padding: var(--sl-spacing-medium);
-  overflow: auto;
-  hyphens: none;
-  tab-size: 2;
-}
-
-.markdown-section pre .token.comment {
-  color: var(--sl-color-neutral-500);
-}
-
-.markdown-section pre .token.prolog,
-.markdown-section pre .token.doctype,
-.markdown-section pre .token.cdata,
-.markdown-section pre .token.operator {
-  color: var(--sl-color-neutral-600);
-}
-
-.markdown-section pre .token.punctuation {
-  color: var(--sl-color-neutral-600);
-}
-
-.namespace {
-  opacity: 0.7;
-}
-
-.markdown-section pre .token.property,
-.markdown-section pre .token.keyword,
-.markdown-section pre .token.tag,
-.markdown-section pre .token.url {
-  color: var(--sl-color-blue-600);
-}
-
-.markdown-section pre .token.symbol,
-.markdown-section pre .token.deleted {
-  color: var(--sl-color-pink-600);
-}
-
-.markdown-section pre .token.boolean,
-.markdown-section pre .token.constant,
-.markdown-section pre .token.selector,
-.markdown-section pre .token.attr-name,
-.markdown-section pre .token.string,
-.markdown-section pre .token.char,
-.markdown-section pre .token.builtin,
-.markdown-section pre .token.inserted {
-  color: var(--sl-color-emerald-600);
-}
-
-.markdown-section pre .token.atrule,
-.markdown-section pre .token.attr-value,
-.markdown-section pre .token.number,
-.markdown-section pre .token.variable {
-  color: var(--sl-color-violet-700);
-}
-
-.markdown-section pre .token.function,
-.markdown-section pre .token.class-name,
-.markdown-section pre .token.regex {
-  color: var(--sl-color-orange-600);
-}
-
-.markdown-section pre .token.important {
-  color: var(--sl-color-red-600);
-}
-
-.markdown-section pre .token.important,
-.markdown-section pre .token.bold {
-  font-weight: bold;
-}
-
-.markdown-section pre .token.italic {
-  font-style: italic;
-}
-
-/* Tables */
-.table-wrapper {
-  overflow-x: auto;
-}
-
-@media screen and (max-width: 1200px) {
-  .table-wrapper table {
-    min-width: 800px;
-  }
-}
-
-.markdown-section table {
-  display: table;
-  margin-bottom: 1.5rem;
-}
-
-.markdown-section tr {
-  border: none;
-}
-
-.markdown-section tr:nth-child(2n) {
-  background: var(--sl-color-neutral-50);
-}
-
-.markdown-section th {
-  border: none;
-  font-weight: var(--sl-font-weight-semibold);
-  text-align: left;
-}
-
-.markdown-section td {
-  border-top: solid 1px var(--sl-color-neutral-200);
-  border-bottom: solid 1px var(--sl-color-neutral-200);
-  border-left: none;
-  border-right: none;
-}
-
-.markdown-section table .nowrap {
-  white-space: nowrap;
-}
-
-.markdown-section table sl-tooltip code {
-  border-bottom: dashed 1px var(--sl-color-neutral-300);
-  cursor: help;
-}
-
-/* Iframes */
-.markdown-section iframe {
-  border: none;
-}
-
-/* Tips & Warnings */
-.markdown-section p.tip,
-.markdown-section p.warn {
-  position: relative;
-  background-color: var(--sl-color-neutral-50);
-  border-left: solid 4px transparent;
-  border-radius: var(--sl-border-radius-medium);
-  padding-left: 1.5rem;
-}
-
-.markdown-section p.tip:before,
-.markdown-section p.warn:before {
-  content: '!';
-  border-radius: 100%;
-  color: var(--sl-color-neutral-0);
-  font-size: 14px;
-  font-weight: bold;
-  left: -12px;
-  line-height: 20px;
-  position: absolute;
-  height: 20px;
-  width: 20px;
-  text-align: center;
-  top: calc(50% - 10px);
-}
-
-.markdown-section p.warn {
-  border-left-color: var(--sl-color-primary-600);
-}
-
-.markdown-section p.warn:before {
-  background-color: var(--sl-color-primary-600);
-}
-
-.markdown-section p.tip {
-  border-left-color: var(--sl-color-danger-600);
-}
-
-.markdown-section p.tip:before {
-  background-color: var(--sl-color-danger-600);
-}
-
-.markdown-section p.tip code,
-.markdown-section p.warn code {
-  background-color: var(--sl-color-neutral-100);
-}
-
-/* Component headers */
-.component-header {
-  border-bottom: solid 1px var(--sl-color-neutral-200);
-  padding-bottom: 2rem;
-  margin-top: -1rem;
-  margin-bottom: 2rem;
-}
-
-.component-header__tag {
-  border-bottom: none;
-  padding: 0;
-  margin: 0.75rem 0 0.25rem 0;
-}
-
-.markdown-section .component-header__tag code {
-  background: none;
-  color: var(--sl-color-neutral-600);
-  font-size: var(--sl-font-size-large);
-  padding: 0;
-  margin: 0;
-}
-
-.component-header__info {
-  margin-bottom: 0.5rem;
-}
-
-/* Lead sentences that occur immediately after the header */
-.component-header + p {
-  font-size: var(--sl-font-size-large);
-  line-height: 1.6;
-}
-
-/* Repo buttons */
-.repo-button--sponsor sl-icon {
-  color: var(--sl-color-pink-600);
-}
-
-.repo-button--github sl-icon {
-  color: var(--sl-color-neutral-700);
-}
-
-.repo-button--twitter sl-icon {
-  color: var(--sl-color-sky-500);
-}
-
-@media screen and (max-width: 400px) {
-  :not(.sidebar-buttons) > .repo-button {
-    width: 100%;
-    margin-bottom: 1rem;
-  }
-}
-
-body[data-page^='/tokens/'] .table-wrapper td:first-child,
-body[data-page^='/tokens/'] .table-wrapper td:first-child code {
-  white-space: nowrap;
-}
-
-/* Border radius demo */
-.border-radius-demo {
-  width: 3rem;
-  height: 3rem;
-  background: var(--sl-color-primary-600);
-}
-
-/* Transition demo */
-.transition-demo {
-  position: relative;
-  background: var(--sl-color-neutral-200);
-  width: 8rem;
-  height: 2rem;
-}
-
-.transition-demo:after {
-  content: '';
-  position: absolute;
-  background-color: var(--sl-color-primary-600);
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 100%;
-  transition-duration: inherit;
-  transition-property: width;
-}
-
-.transition-demo:hover:after {
-  width: 100%;
-}
-
-/* Spacing demo */
-.spacing-demo {
-  width: 100px;
-  background: var(--sl-color-primary-600);
-}
-
-/* Elevation demo */
-.elevation-demo {
-  background: transparent;
-  border-radius: 3px;
-  width: 4rem;
-  height: 4rem;
-  margin: 1rem;
-}
-
-/* Color palettes */
-.color-palette {
-  display: grid;
-  grid-template-columns: 200px repeat(11, 1fr);
-  gap: 1rem var(--sl-spacing-2x-small);
-  margin: 2rem 0;
-}
-
-.color-palette__name {
-  font-size: var(--sl-font-size-medium);
-  font-weight: var(--sl-font-weight-semibold);
-  grid-template-columns: repeat(11, 1fr);
-}
-
-.color-palette__name code {
-  background: none;
-  font-size: var(--sl-font-size-x-small);
-}
-
-.color-palette__example {
-  font-size: var(--sl-font-size-x-small);
-  text-align: center;
-}
-
-.color-palette__swatch {
-  height: 3rem;
-  border-radius: var(--sl-border-radius-small);
-}
-
-.color-palette__swatch--border {
-  box-shadow: inset 0 0 0 1px var(--sl-color-neutral-300);
-}
-
-@media screen and (max-width: 1200px) {
-  .color-palette {
-    grid-template-columns: repeat(6, 1fr);
-  }
-
-  .color-palette__name {
-    grid-column-start: span 6;
-  }
-}
-
-.not-found-image {
-  display: block;
-  max-width: 460px;
-  margin: 2rem 0;
-}

docs/components/alert.md

@@ -1,441 +0,0 @@
-# Alert
-
-[component-header:sl-alert]
-
-Alerts are used to display important messages inline or as toast notifications.
-
-```html preview
-<sl-alert open>
-  <sl-icon slot="icon" name="info-circle"></sl-icon>
-  This is a standard alert. You can customize its content and even the icon.
-</sl-alert>
-```
-
-```jsx react
-import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlAlert open>
-    <SlIcon slot="icon" name="info-circle" />
-    This is a standard alert. You can customize its content and even the icon.
-  </SlAlert>
-);
-```
-
-?> Alerts will not be visible if the `open` attribute is not present.
-
-## Examples
-
-### Variants
-
-Set the `variant` attribute to change the alert's variant.
-
-```html preview
-<sl-alert variant="primary" open>
-  <sl-icon slot="icon" name="info-circle"></sl-icon>
-  <strong>This is super informative</strong><br>
-  You can tell by how pretty the alert is.
-</sl-alert>
-
-<br>
-
-<sl-alert variant="success" open>
-  <sl-icon slot="icon" name="check2-circle"></sl-icon>
-  <strong>Your changes have been saved</strong><br>
-  You can safely exit the app now.
-</sl-alert>
-
-<br>
-
-<sl-alert variant="neutral" open>
-  <sl-icon slot="icon" name="gear"></sl-icon>
-  <strong>Your settings have been updated</strong><br>
-  Settings will take affect on next login.
-</sl-alert>
-
-<br>
-
-<sl-alert variant="warning" open>
-  <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
-  <strong>Your session has ended</strong><br>
-  Please login again to continue.
-</sl-alert>
-
-<br>
-
-<sl-alert variant="danger" open>
-  <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
-    <strong>Your account has been deleted</strong><br>
-    We're very sorry to see you go!
-</sl-alert>
-```
-
-```jsx react
-import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlAlert variant="primary" open>
-      <SlIcon slot="icon" name="info-circle" />
-      <strong>This is super informative</strong><br />
-      You can tell by how pretty the alert is.
-    </SlAlert>
-
-    <br />
-
-    <SlAlert variant="success" open>
-      <SlIcon slot="icon" name="check2-circle" />
-      <strong>Your changes have been saved</strong><br />
-      You can safely exit the app now.
-    </SlAlert>
-
-    <br />
-
-    <SlAlert variant="neutral" open>
-      <SlIcon slot="icon" name="gear" />
-      <strong>Your settings have been updated</strong><br />
-      Settings will take affect on next login.
-    </SlAlert>
-
-    <br />
-
-    <SlAlert variant="warning" open>
-      <SlIcon slot="icon" name="exclamation-triangle" />
-      <strong>Your session has ended</strong><br />
-      Please login again to continue.
-    </SlAlert>
-
-    <br />
-
-    <SlAlert variant="danger" open>
-      <SlIcon slot="icon" name="exclamation-octagon" />
-        <strong>Your account has been deleted</strong><br />
-        We're very sorry to see you go!
-    </SlAlert>
-  </>
-);
-```
-
-### Closable
-
-Add the `closable` attribute to show a close button that will hide the alert.
-
-```html preview
-<sl-alert variant="primary" open closable class="alert-closable">
-  <sl-icon slot="icon" name="info-circle"></sl-icon>
-  You can close this alert any time!
-</sl-alert>
-
-<script>
-  const alert = document.querySelector('.alert-closable');
-  alert.addEventListener('sl-after-hide', () => {
-    setTimeout(() => alert.open = true, 2000);
-  });
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(true);
-
-  function handleHide() {
-    setOpen(false);
-    setTimeout(() => setOpen(true), 2000);
-  }
-
-  return (
-    <SlAlert 
-      open={open}
-      closable
-      onSlAfterHide={handleHide}
-    >
-      <SlIcon slot="icon" name="info-circle" />
-      You can close this alert any time!
-    </SlAlert>
-  );
-};
-```
-
-### Without Icons
-
-Icons are optional. Simply omit the `icon` slot if you don't want them.
-
-```html preview
-<sl-alert variant="primary" open>
-  Nothing fancy here, just a simple alert.
-</sl-alert>
-```
-
-```jsx react
-import { SlAlert } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlAlert variant="primary" open>
-    Nothing fancy here, just a simple alert.
-  </SlAlert>
-);
-```
-
-### Duration
-
-Set the `duration` attribute to automatically hide an alert after a period of time. This is useful for alerts that don't require acknowledgement.
-
-```html preview
-<div class="alert-duration">
-  <sl-button variant="primary">Show Alert</sl-button>
-
-  <sl-alert variant="primary" duration="3000" closable>
-    <sl-icon slot="icon" name="info-circle"></sl-icon>
-    This alert will automatically hide itself after three seconds, unless you interact with it.
-  </sl-alert>
-</div>
-
-<script>
-  const container = document.querySelector('.alert-duration');
-  const button = container.querySelector('sl-button');
-  const alert = container.querySelector('sl-alert');
-
-  button.addEventListener('click', () => alert.show());
-</script>
-
-<style>
-  .alert-duration sl-alert {
-    margin-top: var(--sl-spacing-medium);
-  }
-</style>
-```
-
-```jsx react
-import { useState } from 'react';
-import {
-  SlAlert,
-  SlButton,
-  SlIcon
-} from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .alert-duration sl-alert {
-    margin-top: var(--sl-spacing-medium);
-  }
-`;
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <div className="alert-duration">
-        <SlButton variant="primary" onClick={() => setOpen(true)}>Show Alert</SlButton>
-
-        <SlAlert 
-          variant="primary" 
-          duration="3000" 
-          open={open} 
-          closable 
-          onSlAfterHide={() => setOpen(false)}
-        >
-          <SlIcon slot="icon" name="info-circle" />
-          This alert will automatically hide itself after three seconds, unless you interact with it.
-        </SlAlert>
-      </div>
-
-      <style>{css}</style>
-    </>
-  );
-};
-```
-
-### Toast Notifications
-
-To display an alert as a toast notification, or "toast", create the alert and call its `toast()` method. This will move the alert out of its position in the DOM and into [the toast stack](#the-toast-stack) where it will be shown. Once dismissed, it will be removed from the DOM completely. To reuse a toast, store a reference to it and call `toast()` again later on.
-
-You should always use the `closable` attribute so users can dismiss the notification. It's also common to set a reasonable `duration` when the notification doesn't require acknowledgement.
-
-```html preview
-<div class="alert-toast">
-  <sl-button variant="primary">Primary</sl-button>
-  <sl-button variant="success">Success</sl-button>
-  <sl-button variant="neutral">Neutral</sl-button>
-  <sl-button variant="warning">Warning</sl-button>
-  <sl-button variant="danger">Danger</sl-button>
-  
-  <sl-alert variant="primary" duration="3000" closable>
-    <sl-icon slot="icon" name="info-circle"></sl-icon>
-    <strong>This is super informative</strong><br>
-    You can tell by how pretty the alert is.
-  </sl-alert>
-
-  <sl-alert variant="success" duration="3000" closable>
-    <sl-icon slot="icon" name="check2-circle"></sl-icon>
-    <strong>Your changes have been saved</strong><br>
-    You can safely exit the app now.
-  </sl-alert>
-
-  <sl-alert variant="neutral" duration="3000" closable>
-    <sl-icon slot="icon" name="gear"></sl-icon>
-    <strong>Your settings have been updated</strong><br>
-    Settings will take affect on next login.
-  </sl-alert>
-
-  <sl-alert variant="warning" duration="3000" closable>
-    <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
-    <strong>Your session has ended</strong><br>
-    Please login again to continue.
-  </sl-alert>
-
-  <sl-alert variant="danger" duration="3000" closable>
-    <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
-    <strong>Your account has been deleted</strong><br>
-    We're very sorry to see you go!
-  </sl-alert>
-</div>
-
-<script>
-  const container = document.querySelector('.alert-toast');
-
-  ['primary', 'success', 'neutral', 'warning', 'danger'].map(variant => {
-    const button = container.querySelector(`sl-button[variant="${variant}"]`);
-    const alert = container.querySelector(`sl-alert[variant="${variant}"]`);
-
-    button.addEventListener('click', () => alert.toast());
-  });
-</script>
-```
-
-```jsx react
-import { useRef } from 'react';
-import {
-  SlAlert,
-  SlButton,
-  SlIcon
-} from '@shoelace-style/shoelace/dist/react';
-
-function showToast(alert) {
-  alert.toast();
-}
-
-const App = () => {
-  const primary = useRef(null);
-  const success = useRef(null);
-  const neutral = useRef(null);
-  const warning = useRef(null);
-  const danger = useRef(null);
-
-  return (
-    <>
-      <SlButton variant="primary" onClick={() => primary.current.toast()}>
-        Primary
-      </SlButton>
-
-      <SlButton variant="success" onClick={() => success.current.toast()}>
-        Success
-      </SlButton>
-
-      <SlButton variant="neutral" onClick={() => neutral.current.toast()}>
-        Neutral
-      </SlButton>
-
-      <SlButton variant="warning" onClick={() => warning.current.toast()}>
-        Warning
-      </SlButton>
-
-      <SlButton variant="danger" onClick={() => danger.current.toast()}>
-        Danger
-      </SlButton>
-
-      <SlAlert ref={primary} variant="primary" duration="3000" closable>
-        <SlIcon slot="icon" name="info-circle" />
-        <strong>This is super informative</strong><br />
-        You can tell by how pretty the alert is.
-      </SlAlert>
-
-      <SlAlert ref={success} variant="success" duration="3000" closable>
-        <SlIcon slot="icon" name="check2-circle" />
-        <strong>Your changes have been saved</strong><br />
-        You can safely exit the app now.
-      </SlAlert>
-
-      <SlAlert ref={neutral} variant="neutral" duration="3000" closable>
-        <SlIcon slot="icon" name="gear" />
-        <strong>Your settings have been updated</strong><br />
-        Settings will take affect on next login.
-      </SlAlert>
-
-      <SlAlert ref={warning} variant="warning" duration="3000" closable>
-        <SlIcon slot="icon" name="exclamation-triangle" />
-        <strong>Your session has ended</strong><br />
-        Please login again to continue.
-      </SlAlert>
-
-      <SlAlert ref={danger} variant="danger" duration="3000" closable>
-        <SlIcon slot="icon" name="exclamation-octagon" />
-        <strong>Your account has been deleted</strong><br />
-        We're very sorry to see you go!
-      </SlAlert>
-    </>
-  );
-};
-```
-
-### Creating Toasts Imperatively
-
-For convenience, you can create a utility that emits toast notifications with a function call rather than composing them in your HTML. To do this, generate the alert with JavaScript, append it to the body, and call the `toast()` method as shown in the example below.
-
-```html preview
-<div class="alert-toast-wrapper">
-  <sl-button variant="primary">Create Toast</sl-button>
-</div>
-
-<script>
-  const container = document.querySelector('.alert-toast-wrapper');
-  const button = container.querySelector('sl-button');
-  let count = 0;
-
-  // Always escape HTML for text arguments!
-  function escapeHtml(html) {
-    const div = document.createElement('div');
-    div.textContent = html;
-    return div.innerHTML;
-  }  
-
-  // Custom function to emit toast notifications
-  function notify(message, variant = 'primary', icon = 'info-circle', duration = 3000) {
-    const alert = Object.assign(document.createElement('sl-alert'), {
-      variant,
-      closable: true,
-      duration: duration,
-      innerHTML: `
-        <sl-icon name="${icon}" slot="icon"></sl-icon>
-        ${escapeHtml(message)}
-      `
-    });
-
-    document.body.append(alert);
-    return alert.toast();
-  }
-
-  button.addEventListener('click', () => {
-    notify(`This is custom toast #${++count}`);
-  });
-</script>
-```
-
-### The Toast Stack
-
-The toast stack is a fixed position singleton element created and managed internally by the alert component. It will be added and removed from the DOM as needed when toasts are shown. When more than one toast is visible, they will stack vertically in the toast stack.
-
-By default, the toast stack is positioned at the top-right of the viewport. You can change its position by targeting `.sl-toast-stack` in your stylesheet. To make toasts appear at the top-left of the viewport, for example, use the following styles.
-
-```css
-.sl-toast-stack {
-  left: 0;
-  right: auto;
-}
-```
-
-?> By design, it is not possible to show toasts in more than one stack simultaneously. Such behavior is confusing and makes for a poor user experience.
-
-[component-metadata:sl-alert]

docs/components/animated-image.md

@@ -1,128 +0,0 @@
-# Animated Image
-
-[component-header:sl-animated-image]
-
-A component for displaying animated GIFs and WEBPs that play and pause on interaction.
-
-```html preview
-<sl-animated-image 
-  src="https://shoelace.style/assets/images/walk.gif" 
-  alt="Animation of untied shoes walking on pavement"
-></sl-animated-image>
-```
-
-```jsx react
-import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlAnimatedImage
-    src="https://shoelace.style/assets/images/walk.gif" 
-    alt="Animation of untied shoes walking on pavement"
-  />
-);
-```
-
-?> This component uses `<canvas>` to draw freeze frames, so images are subject to [cross-origin restrictions](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image).
-
-## Examples
-
-### WEBP Images
-
-Both GIF and WEBP images are supported.
-
-```html preview
-<sl-animated-image 
-  src="https://shoelace.style/assets/images/tie.webp" 
-  alt="Animation of a shoe being tied"
-></sl-animated-image>
-```
-
-```jsx react
-import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlAnimatedImage
-    src="https://shoelace.style/assets/images/tie.webp" 
-    alt="Animation of a shoe being tied"
-  />
-);
-```
-
-### Setting a Width and Height
-
-To set a custom size, apply a width and/or height to the host element.
-
-```html preview
-<sl-animated-image 
-  src="https://shoelace.style/assets/images/walk.gif" 
-  alt="Animation of untied shoes walking on pavement"
-  style="width: 150px; height: 200px;"
->
-</sl-animated-image>
-```
-
-```jsx react
-import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlAnimatedImage
-    src="https://shoelace.style/assets/images/walk.gif" 
-    alt="Animation of untied shoes walking on pavement"
-    style={{ width: '150px', height: '200px' }}
-  />
-);
-```
-
-### Customizing the Control Box
-
-You can change the appearance and location of the control box by targeting the `control-box` part in your styles.
-
-```html preview
-<sl-animated-image 
-  src="https://shoelace.style/assets/images/walk.gif" 
-  alt="Animation of untied shoes walking on pavement"
-  class="animated-image-custom-control-box"
-></sl-animated-image>
-
-<style>
-  .animated-image-custom-control-box::part(control-box) {
-    top: auto;
-    right: auto;
-    bottom: 1rem;
-    left: 1rem;
-    background-color: deeppink;
-    border: none;
-    color: pink;
-  }
-</style>
-```
-
-```jsx react
-import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .animated-image-custom-control-box::part(control-box) {
-    top: auto;
-    right: auto;
-    bottom: 1rem;
-    left: 1rem;
-    background-color: deeppink;
-    border: none;
-    color: pink;
-  }
-`;
-
-const App = () => (
-  <>
-    <SlAnimatedImage
-      className="animated-image-custom-control-box"
-      src="https://shoelace.style/assets/images/walk.gif" 
-      alt="Animation of untied shoes walking on pavement"
-    />
-
-    <style>{css}</style>
-  </>
-);
-```
-
-[component-metadata:sl-animated-image]

docs/components/animation.md

@@ -1,351 +0,0 @@
-# Animation
-
-[component-header:sl-animation]
-
-Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
-
-To animate an element, wrap it in `<sl-animation>` and set an animation `name`. The animation will not start until you add the `play` attribute. Refer to the [properties table](#properties) for a list of all animation options.
-
-```html preview
-<div class="animation-overview">
-  <sl-animation name="bounce" duration="2000" play><div class="box"></div></sl-animation>
-  <sl-animation name="jello" duration="2000" play><div class="box"></div></sl-animation>
-  <sl-animation name="heartBeat" duration="2000" play><div class="box"></div></sl-animation>
-  <sl-animation name="flip" duration="2000" play><div class="box"></div></sl-animation>
-</div>
-
-<style>
-  .animation-overview .box {
-    display: inline-block;
-    width: 100px;
-    height: 100px;
-    background-color: var(--sl-color-primary-600);
-    margin: 1.5rem;
-  }
-</style>
-```
-
-```jsx react
-import { SlAnimation } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .animation-overview .box {
-    display: inline-block;
-    width: 100px;
-    height: 100px;
-    background-color: var(--sl-color-primary-600);
-    margin: 1.5rem;
-  }
-`;
-
-const App = () => (
-  <>
-    <div class="animation-overview">
-      <SlAnimation name="bounce" duration={2000} play><div class="box" /></SlAnimation>
-      <SlAnimation name="jello" duration={2000} play><div class="box" /></SlAnimation>
-      <SlAnimation name="heartBeat" duration={2000} play><div class="box" /></SlAnimation>
-      <SlAnimation name="flip" duration={2000} play><div class="box" /></SlAnimation>
-    </div>
-
-    <style>{css}</style> 
-  </>
-);
-```
-
-?> The animation will only be applied to the first child element found in `<sl-animation>`.
-
-## Examples
-
-### Animations & Easings
-
-This example demonstrates all of the baked-in animations and easings. Animations are based on those found in the popular [Animate.css](https://animate.style/) library.
-
-```html preview
-<div class="animation-sandbox">
-  <sl-animation name="bounce" easing="ease-in-out" duration="2000" play>
-    <div class="box"></div>
-  </sl-animation>
-
-  <div class="controls">
-    <sl-select label="Animation" value="bounce"></sl-select>
-    <sl-select label="Easing" value="linear"></sl-select>
-    <sl-input label="Playback Rate" type="number" min="0" max="2" step=".25" value="1"></sl-input>
-  </div>
-</div>
-
-<script type="module">
-  import { getAnimationNames, getEasingNames } from '/dist/utilities/animation.js';
-
-  const container = document.querySelector('.animation-sandbox');
-  const animation = container.querySelector('sl-animation');
-  const animationName = container.querySelector('.controls sl-select:nth-child(1)');
-  const easingName = container.querySelector('.controls sl-select:nth-child(2)');
-  const playbackRate = container.querySelector('sl-input[type="number"]');
-  const animations = getAnimationNames();
-  const easings = getEasingNames();
-
-  animations.map(name => {
-    const menuItem = Object.assign(document.createElement('sl-menu-item'), {
-      textContent: name,
-      value: name
-    });
-    animationName.appendChild(menuItem);
-  });
-  
-  easings.map(name => {
-    const menuItem = Object.assign(document.createElement('sl-menu-item'), {
-      textContent: name,
-      value: name
-    });
-    easingName.appendChild(menuItem);
-  });
-
-  animationName.addEventListener('sl-change', () => animation.name = animationName.value);
-  easingName.addEventListener('sl-change', () => animation.easing = easingName.value);
-  playbackRate.addEventListener('sl-input', () => animation.playbackRate = playbackRate.value);
-</script>
-
-<style>
-  .animation-sandbox .box {
-    width: 100px;
-    height: 100px;
-    background-color: var(--sl-color-primary-600);
-  }
-
-  .animation-sandbox .controls {
-    max-width: 300px;
-    margin-top: 2rem;
-  }
-
-  .animation-sandbox .controls sl-select {
-    margin-bottom: 1rem;
-  }
-</style>
-```
-
-### Using Intersection Observer
-
-Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to control the animation when an element enters or exits the viewport. For example, scroll the box below in and out of your screen. The animation stops when the box exits the viewport and restarts each time it enters the viewport.
-
-```html preview
-<div class="animation-scroll">
-  <sl-animation name="jackInTheBox" duration="2000" iterations="1"><div class="box"></div></sl-animation>
-</div>
-
-<script>
-  const container = document.querySelector('.animation-scroll');
-  const animation = container.querySelector('sl-animation');
-  const box = animation.querySelector('.box');
-
-  // Watch for the box to enter and exit the viewport. Note that we're observing the box, not the animation element!
-  const observer = new IntersectionObserver(entries => {
-    if (entries[0].isIntersecting) {
-      // Start the animation when the box enters the viewport
-      animation.play = true;
-    } else {
-      animation.play = false;
-      animation.currentTime = 0;
-    }
-  });
-  observer.observe(box);
-</script>
-
-<style>
-  .animation-scroll .box {
-    display: inline-block;
-    width: 100px;
-    height: 100px;
-    background-color: var(--sl-color-primary-600);
-  }  
-</style>
-```
-
-```jsx react
-import { useEffect, useRef, useState } from 'react';
-import { SlAnimation } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .animation-scroll {
-    height: calc(100vh + 100px);
-  }
-
-  .animation-scroll .box {
-    display: inline-block;
-    width: 100px;
-    height: 100px;
-    background-color: var(--sl-color-primary-600);
-  }
-`;
-
-const App = () => {
-  const animation = useRef(null);
-  const box = useRef(null);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting) {
-          animation.current.play = true;
-        } else {
-          animation.current.play = false;
-          animation.current.currentTime = 0;
-        }
-      }
-    );
-
-    if (box.current) {
-      observer.observe(box.current);
-    }
-  }, [box]);
-
-  return (
-    <>
-      <div class="animation-scroll">
-        <SlAnimation
-          ref={animation}
-          name="jackInTheBox" 
-          duration={2000} 
-          iterations={1}
-        >
-          <div ref={box} class="box" />
-        </SlAnimation>
-      </div>
-
-      <style>{css}</style> 
-    </>
-  );
-};
-```
-
-### Custom Keyframe Formats
-
-Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) to build custom animations.
-
-```html preview
-<div class="animation-keyframes">
-  <sl-animation easing="ease-in-out" duration="2000" play>
-    <div class="box"></div>
-  </sl-animation>
-</div>
-
-<script>
-  const animation = document.querySelector('.animation-keyframes sl-animation');
-  animation.keyframes = [
-    {
-      offset: 0,
-      easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-      fillMode: 'both',
-      transformOrigin: 'center center',
-      transform: 'rotate(0)'
-    },
-    {
-      offset: 1,
-      easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-      fillMode: 'both',
-      transformOrigin: 'center center',
-      transform: 'rotate(90deg)'
-    }
-  ];
-</script>
-
-<style>
-  .animation-keyframes .box {
-    width: 100px;
-    height: 100px;
-    background-color: var(--sl-color-primary-600);
-  }
-</style>
-```
-
-```jsx react
-import { SlAnimation } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .animation-keyframes .box {
-    width: 100px;
-    height: 100px;
-    background-color: var(--sl-color-primary-600);
-  }
-`;
-
-const App = () => (
-  <>
-    <div class="animation-keyframes">
-      <SlAnimation 
-        easing="ease-in-out" 
-        duration={2000} 
-        play
-        keyframes={[
-          {
-            offset: 0,
-            easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-            fillMode: 'both',
-            transformOrigin: 'center center',
-            transform: 'rotate(0)'
-          },
-          {
-            offset: 1,
-            easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-            fillMode: 'both',
-            transformOrigin: 'center center',
-            transform: 'rotate(90deg)'
-          }
-        ]}
-      >
-        <div class="box" />
-      </SlAnimation>
-    </div>
-
-    <style>{css}</style> 
-  </>
-);
-```
-
-### Playing Animations on Demand
-
-Animations won't play until you apply the `play` attribute. You can omit it initially, then apply it on demand such as after a user interaction. In this example, the button will animate once every time the button is clicked.
-
-```html preview
-<div class="animation-form">
-  <sl-animation name="rubberBand" duration="1000" iterations="1">
-    <sl-button variant="primary">Click me</sl-button>
-  </sl-animation>
-</div>
-
-<script>
-  const container = document.querySelector('.animation-form');
-  const animation = container.querySelector('sl-animation');
-  const button = container.querySelector('sl-button');
-
-  button.addEventListener('click', () => {
-    animation.play = true;
-  });
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlAnimation, SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [play, setPlay] = useState(false);
-
-  return (
-    <div class="animation-form">
-      <SlAnimation 
-        name="rubberBand" 
-        duration={1000} 
-        iterations={1} 
-        play={play}
-        onSlFinish={() => setPlay(false)}
-      >
-        <SlButton variant="primary" onClick={() => setPlay(true)}>
-          Click me
-        </SlButton>
-      </SlAnimation>
-    </div>
-  );
-};
-```
-
-[component-metadata:sl-animation]

docs/components/avatar.md

@@ -1,201 +0,0 @@
-# Avatar
-
-[component-header:sl-avatar]
-
-Avatars are used to represent a person or object.
-
-Like [images](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), you should always provide `alt` text for avatars as alternate text for assistive devices.
-
-```html preview
-<sl-avatar label="User avatar"></sl-avatar>
-```
-
-```jsx react
-import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlAvatar label="User avatar" />
-);
-```
-
-## Examples
-
-### Images
-
-To use an image for the avatar, set the `image` and `alt` attributes. This will take priority and be shown over initials and icons.
-
-```html preview
-<sl-avatar
-  image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
-  label="Avatar of a gray tabby kitten looking down"
-></sl-avatar>
-```
-
-```jsx react
-import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlAvatar
-    image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
-    label="Avatar of a gray tabby kitten looking down"
-  />
-);
-```
-
-### Initials
-
-When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon.
-
-```html preview
-<sl-avatar initials="SL" label="Avatar with initials: SL"></sl-avatar>
-```
-
-```jsx react
-import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlAvatar initials="SL" label="Avatar with initials: SL" />
-);
-```
-
-### Custom Icons
-
-When no image or initials are set, an icon will be shown. The default avatar shows a generic "user" icon, but you can customize this with the `icon` slot.
-
-```html preview
-<sl-avatar label="Avatar with an image icon">
-  <sl-icon slot="icon" name="image"></sl-icon>
-</sl-avatar>
-
-<sl-avatar label="Avatar with an archive icon">
-  <sl-icon slot="icon" name="archive"></sl-icon>
-</sl-avatar>
-
-<sl-avatar label="Avatar with a briefcase icon">
-  <sl-icon slot="icon" name="briefcase"></sl-icon>
-</sl-avatar>
-```
-
-```jsx react
-import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlAvatar label="Avatar with an image icon">
-      <SlIcon slot="icon" name="image" />
-    </SlAvatar>
-
-    <SlAvatar label="Avatar with an archive icon">
-      <SlIcon slot="icon" name="archive" />
-    </SlAvatar>
-
-    <SlAvatar label="Avatar with a briefcase icon">
-      <SlIcon slot="icon" name="briefcase" />
-    </SlAvatar>
-  </>
-);
-```
-
-### Shapes
-
-Avatars can be shaped using the `shape` attribute.
-
-```html preview
-<sl-avatar shape="square" label="Square avatar"></sl-avatar>
-<sl-avatar shape="rounded" label="Rounded avatar"></sl-avatar>
-<sl-avatar shape="circle" label="Circle avatar"></sl-avatar>
-```
-
-```jsx react
-import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlAvatar shape="square" label="Square avatar" />
-    <SlAvatar shape="rounded" label="Rounded avatar" />
-    <SlAvatar shape="circle" label="Circle avatar" />
-  </>
-);
-```
-
-### Avatar Groups
-
-You can group avatars with a few lines of CSS.
-
-```html preview
-<div class="avatar-group">
-  <sl-avatar 
-    image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right"
-    label="Avatar 1 of 4"
-  ></sl-avatar>
-
-  <sl-avatar 
-    image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
-    label="Avatar 2 of 4"
-  ></sl-avatar>
-
-  <sl-avatar 
-    image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
-    label="Avatar 3 of 4"
-  ></sl-avatar>
-
-  <sl-avatar 
-    image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80"
-    label="Avatar 4 of 4"
-  ></sl-avatar>
-</div>
-
-<style>
-  .avatar-group sl-avatar:not(:first-of-type) {
-    margin-left: -1rem;
-  }
-
-  .avatar-group sl-avatar::part(base) {
-    border: solid 2px var(--sl-color-neutral-0);
-  }
-</style>
-```
-
-```jsx react
-import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .avatar-group sl-avatar:not(:first-of-type) {
-    margin-left: -1rem;
-  }
-
-  .avatar-group sl-avatar::part(base) {
-    border: solid 2px var(--sl-color-neutral-0);
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="avatar-group">
-      <SlAvatar 
-        image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right" 
-        label="Avatar 1 of 4" 
-      />
-
-      <SlAvatar 
-        image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80" 
-        label="Avatar 2 of 4" 
-      />
-      
-      <SlAvatar 
-        image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80" 
-        label="Avatar 3 of 4" 
-      />
-      
-      <SlAvatar 
-        image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80" 
-        label="Avatar 4 of 4" 
-      />
-    </div>
-
-    <style>{css}</style>    
-  </>
-);
-```
-
-[component-metadata:sl-avatar]

docs/components/badge.md

@@ -1,191 +0,0 @@
-# Badge
-
-[component-header:sl-badge]
-
-Badges are used to draw attention and display statuses or counts.
-
-```html preview
-<sl-badge>Badge</sl-badge>
-```
-
-```jsx react
-import { SlBadge } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBadge>Badge</SlBadge>
-);
-```
-
-## Examples
-
-### Variants
-
-Set the `variant` attribute to change the badge's variant.
-
-```html preview
-<sl-badge variant="primary">Primary</sl-badge>
-<sl-badge variant="success">Success</sl-badge>
-<sl-badge variant="neutral">Neutral</sl-badge>
-<sl-badge variant="warning">Warning</sl-badge>
-<sl-badge variant="danger">Danger</sl-badge>
-```
-
-```jsx react
-import { SlBadge } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlBadge variant="primary">Primary</SlBadge>
-    <SlBadge variant="success">Success</SlBadge>
-    <SlBadge variant="neutral">Neutral</SlBadge>
-    <SlBadge variant="warning">Warning</SlBadge>
-    <SlBadge variant="danger">Danger</SlBadge>  
-  </>
-);
-```
-
-### Pill Badges
-
-Use the `pill` attribute to give badges rounded edges.
-
-```html preview
-<sl-badge variant="primary" pill>Primary</sl-badge>
-<sl-badge variant="success" pill>Success</sl-badge>
-<sl-badge variant="neutral" pill>Neutral</sl-badge>
-<sl-badge variant="warning" pill>Warning</sl-badge>
-<sl-badge variant="danger" pill>Danger</sl-badge>
-```
-
-```jsx react
-import { SlBadge } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlBadge variant="primary" pill>Primary</SlBadge>
-    <SlBadge variant="success" pill>Success</SlBadge>
-    <SlBadge variant="neutral" pill>Neutral</SlBadge>
-    <SlBadge variant="warning" pill>Warning</SlBadge>
-    <SlBadge variant="danger" pill>Danger</SlBadge>  
-  </>
-);
-```
-
-### Pulsating Badges
-
-Use the `pulse` attribute to draw attention to the badge with a subtle animation.
-
-```html preview
-<div class="badge-pulse">
-  <sl-badge variant="primary" pill pulse>1</sl-badge>
-  <sl-badge variant="success" pill pulse>1</sl-badge>
-  <sl-badge variant="neutral" pill pulse>1</sl-badge>
-  <sl-badge variant="warning" pill pulse>1</sl-badge>
-  <sl-badge variant="danger" pill pulse>1</sl-badge>
-</div>
-
-<style>
-  .badge-pulse sl-badge:not(:last-of-type) {
-    margin-right: 1rem;
-  }
-</style>
-```
-
-```jsx react
-import { SlBadge } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .badge-pulse sl-badge:not(:last-of-type) {
-    margin-right: 1rem;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="badge-pulse">
-      <SlBadge variant="primary" pill pulse>1</SlBadge>
-      <SlBadge variant="success" pill pulse>1</SlBadge>
-      <SlBadge variant="neutral" pill pulse>1</SlBadge>
-      <SlBadge variant="warning" pill pulse>1</SlBadge>
-      <SlBadge variant="danger" pill pulse>1</SlBadge>
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-### With Buttons
-
-One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.
-
-```html preview
-<sl-button>
-  Requests
-  <sl-badge pill>30</sl-badge>
-</sl-button>
-
-<sl-button style="margin-left: 1rem;">
-  Warnings
-  <sl-badge variant="warning" pill>8</sl-badge>
-</sl-button>
-
-<sl-button style="margin-left: 1rem;">
-  Errors
-  <sl-badge variant="danger" pill>6</sl-badge>
-</sl-button>
-```
-
-```jsx react
-import { SlBadge, SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButton>
-      Requests
-      <SlBadge pill>30</SlBadge>
-    </SlButton>
-
-    <SlButton style={{ marginLeft: '1rem' }}>
-      Warnings
-      <SlBadge variant="warning" pill>8</SlBadge>
-    </SlButton>
-
-    <SlButton style={{ marginLeft: '1rem' }}>
-      Errors
-      <SlBadge variant="danger" pill>6</SlBadge>
-    </SlButton>
-  </>
-);
-```
-
-### With Menu Items
-
-When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
-
-```html preview
-<sl-menu style="max-width: 240px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);">
-  <sl-menu-label>Messages</sl-menu-label>
-  <sl-menu-item>Comments <sl-badge slot="suffix" variant="neutral" pill>4</sl-badge></sl-menu-item>
-  <sl-menu-item>Replies <sl-badge slot="suffix" variant="neutral" pill>12</sl-badge></sl-menu-item>
-</sl-menu>
-```
-
-```jsx react
-import { SlBadge, SlButton, SlMenu, SlMenuItem, SlMenuLabel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlMenu 
-    style={{
-      maxWidth: '240px',
-      border: 'solid 1px var(--sl-panel-border-color)',
-      borderRadius: 'var(--sl-border-radius-medium)'
-    }}
-  >
-    <SlMenuLabel>Messages</SlMenuLabel>
-    <SlMenuItem>Comments <SlBadge slot="suffix" variant="neutral" pill>4</SlBadge></SlMenuItem>
-    <SlMenuItem>Replies <SlBadge slot="suffix" variant="neutral" pill>12</SlBadge></SlMenuItem>
-  </SlMenu>
-);
-```
-
-[component-metadata:sl-badge]

docs/components/breadcrumb-item.md

@@ -1,35 +0,0 @@
-# Breadcrumb Item
-
-[component-header:sl-breadcrumb-item]
-
-Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
-
-```html preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>
-    <sl-icon slot="prefix" name="house"></sl-icon>
-    Home
-  </sl-breadcrumb-item>
-  <sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Shirts</sl-breadcrumb-item>
-</sl-breadcrumb>
-```
-
-```jsx react
-import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>
-      <SlIcon slot="prefix" name="house"></SlIcon>
-      Home
-    </SlBreadcrumbItem>
-    <SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Shirts</SlBreadcrumbItem>
-  </SlBreadcrumb>
-);
-```
-
-?> Additional demonstrations can be found in the [breadcrumb examples](/components/breadcrumb).
-
-[component-metadata:sl-breadcrumb-item]

docs/components/breadcrumb.md

@@ -1,266 +0,0 @@
-# Breadcrumb
-
-[component-header:sl-breadcrumb]
-
-Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
-
-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 preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>Catalog</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Women's</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Shirts &amp; Tops</sl-breadcrumb-item>
-</sl-breadcrumb>
-```
-
-```jsx react
-import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>Catalog</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Women's</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Shirts &amp; Tops</SlBreadcrumbItem>
-  </SlBreadcrumb>
-);
-```
-
-## 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 preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item href="https://example.com/home">
-    Homepage
-  </sl-breadcrumb-item>
-
-  <sl-breadcrumb-item href="https://example.com/home/services">
-    Our Services
-  </sl-breadcrumb-item>
-
-  <sl-breadcrumb-item href="https://example.com/home/services/digital">
-    Digital Media
-  </sl-breadcrumb-item>
-
-  <sl-breadcrumb-item href="https://example.com/home/services/digital/web-design">
-    Web Design
-  </sl-breadcrumb-item>
-</sl-breadcrumb>
-```
-
-```jsx react
-import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem href="https://example.com/home">
-      Homepage
-    </SlBreadcrumbItem>
-
-    <SlBreadcrumbItem href="https://example.com/home/services">
-      Our Services
-    </SlBreadcrumbItem>
-
-    <SlBreadcrumbItem href="https://example.com/home/services/digital">
-      Digital Media
-    </SlBreadcrumbItem>
-
-    <SlBreadcrumbItem href="https://example.com/home/services/digital/web-design">
-      Web Design
-    </SlBreadcrumbItem>
-  </SlBreadcrumb>
-);
-```
-
-### 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 preview
-<sl-breadcrumb>
-  <sl-icon name="dot" slot="separator"></sl-icon>
-  <sl-breadcrumb-item>First</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Third</sl-breadcrumb-item> 
-</sl-breadcrumb>
-
-<br>
-
-<sl-breadcrumb>
-  <sl-icon name="arrow-right" slot="separator"></sl-icon>
-  <sl-breadcrumb-item>First</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Third</sl-breadcrumb-item> 
-</sl-breadcrumb>
-
-<br>
-
-<sl-breadcrumb>
-  <span slot="separator">/</span>
-  <sl-breadcrumb-item>First</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Third</sl-breadcrumb-item> 
-</sl-breadcrumb>
-```
-
-```jsx react
-import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlBreadcrumb>
-      <sl-icon name="dot" slot="separator" />
-      <SlBreadcrumbItem>First</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Third</SlBreadcrumbItem> 
-    </SlBreadcrumb>
-
-    <br />
-
-    <SlBreadcrumb>
-      <sl-icon name="arrow-right" slot="separator" />
-      <SlBreadcrumbItem>First</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Third</SlBreadcrumbItem> 
-    </SlBreadcrumb>
-
-    <br />
-
-    <SlBreadcrumb>
-      <span slot="separator">/</span>
-      <SlBreadcrumbItem>First</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Third</SlBreadcrumbItem> 
-    </SlBreadcrumb>
-  </>
-);
-```
-
-### Prefixes
-
-Use the `prefix` slot to add content before any breadcrumb item.
-
-```html preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>
-    <sl-icon slot="prefix" name="house"></sl-icon>
-    Home
-  </sl-breadcrumb-item>
-  <sl-breadcrumb-item>Articles</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Traveling</sl-breadcrumb-item>
-</sl-breadcrumb>
-```
-
-```jsx react
-import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>
-      <SlIcon slot="prefix" name="house" />
-      Home
-    </SlBreadcrumbItem>
-    <SlBreadcrumbItem>Articles</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Traveling</SlBreadcrumbItem>
-  </SlBreadcrumb>
-);
-```
-
-### Suffixes
-
-Use the `suffix` slot to add content after any breadcrumb item.
-
-```html preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>Documents</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Policies</sl-breadcrumb-item>
-  <sl-breadcrumb-item>
-    Security
-    <sl-icon slot="suffix" name="shield-lock"></sl-icon>
-  </sl-breadcrumb-item>
-</sl-breadcrumb>
-```
-
-```jsx react
-import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>Documents</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Policies</SlBreadcrumbItem>
-    <SlBreadcrumbItem>
-      Security
-      <SlIcon slot="suffix" name="shield-lock"></SlIcon>
-    </SlBreadcrumbItem>
-  </SlBreadcrumb>
-);
-```
-
-### With Dropdowns
-
-Dropdown menus can be placed in a prefix or suffix slot to provide additional options.
-
-```html preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>Homepage</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Our Services</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Digital Media</sl-breadcrumb-item>
-  <sl-breadcrumb-item>
-    Web Design
-    <sl-dropdown slot="suffix">
-      <sl-button slot="trigger" size="small" circle>
-        <sl-icon label="More options" name="three-dots"></sl-icon>
-      </sl-button>
-      <sl-menu>
-        <sl-menu-item checked>Web Design</sl-menu-item>
-        <sl-menu-item>Web Development</sl-menu-item>
-        <sl-menu-item>Marketing</sl-menu-item>
-      </sl-menu>
-    </sl-dropdown>    
-  </sl-breadcrumb-item>
-</sl-breadcrumb>
-```
-
-```jsx react
-import { 
-  SlBreadcrumb, 
-  SlBreadcrumbItem, 
-  SlButton,
-  SlDropdown,
-  SlIcon,
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>Homepage</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Our Services</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Digital Media</SlBreadcrumbItem>
-    <SlBreadcrumbItem>
-      Web Design
-      <SlDropdown slot="suffix">
-        <SlButton slot="trigger" size="small" circle>
-          <SlIcon label="More options" name="three-dots"></SlIcon>
-        </SlButton>
-        <SlMenu>
-          <SlMenuItem checked>Web Design</SlMenuItem>
-          <SlMenuItem>Web Development</SlMenuItem>
-          <SlMenuItem>Marketing</SlMenuItem>
-        </SlMenu>
-      </SlDropdown>    
-    </SlBreadcrumbItem>
-  </SlBreadcrumb>
-);
-```
-
-[component-metadata:sl-breadcrumb]

docs/components/button-group.md

@@ -1,470 +0,0 @@
-# Button Group
-
-[component-header:sl-button-group]
-
-Button groups can be used to group related buttons into sections.
-
-```html preview
-<sl-button-group>
-  <sl-button>Left</sl-button>
-  <sl-button>Center</sl-button>
-  <sl-button>Right</sl-button>
-</sl-button-group>
-```
-
-```jsx react
-import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlButtonGroup>
-    <SlButton>Left</SlButton>
-    <SlButton>Center</SlButton>
-    <SlButton>Right</SlButton>
-  </SlButtonGroup>
-);
-```
-
-## Examples
-
-### Button Sizes
-
-All button sizes are supported, but avoid mixing sizes within the same button group.
-
-```html preview
-<sl-button-group>
-  <sl-button size="small">Left</sl-button>
-  <sl-button size="small">Center</sl-button>
-  <sl-button size="small">Right</sl-button>
-</sl-button-group>
-
-<br><br>
-
-<sl-button-group>
-  <sl-button size="medium">Left</sl-button>
-  <sl-button size="medium">Center</sl-button>
-  <sl-button size="medium">Right</sl-button>
-</sl-button-group>
-
-<br><br>
-
-<sl-button-group>
-  <sl-button size="large">Left</sl-button>
-  <sl-button size="large">Center</sl-button>
-  <sl-button size="large">Right</sl-button>
-</sl-button-group>
-```
-
-```jsx react
-import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButtonGroup>
-      <SlButton size="small">Left</SlButton>
-      <SlButton size="small">Center</SlButton>
-      <SlButton size="small">Right</SlButton>
-    </SlButtonGroup>
-
-    <br /><br />
-
-    <SlButtonGroup>
-      <SlButton size="medium">Left</SlButton>
-      <SlButton size="medium">Center</SlButton>
-      <SlButton size="medium">Right</SlButton>
-    </SlButtonGroup>
-
-    <br /><br />
-
-    <SlButtonGroup>
-      <SlButton size="large">Left</SlButton>
-      <SlButton size="large">Center</SlButton>
-      <SlButton size="large">Right</SlButton>
-    </SlButtonGroup>
-  </>
-);
-```
-
-### Theme Buttons
-
-Theme buttons are supported through the button's `type` attribute.
-
-```html preview
-<sl-button-group>
-  <sl-button variant="primary">Left</sl-button>
-  <sl-button variant="primary">Center</sl-button>
-  <sl-button variant="primary">Right</sl-button>
-</sl-button-group>
-
-<br><br>
-
-<sl-button-group>
-  <sl-button variant="success">Left</sl-button>
-  <sl-button variant="success">Center</sl-button>
-  <sl-button variant="success">Right</sl-button>
-</sl-button-group>
-
-<br><br>
-
-<sl-button-group>
-  <sl-button variant="neutral">Left</sl-button>
-  <sl-button variant="neutral">Center</sl-button>
-  <sl-button variant="neutral">Right</sl-button>
-</sl-button-group>
-
-<br><br>
-
-<sl-button-group>
-  <sl-button variant="warning">Left</sl-button>
-  <sl-button variant="warning">Center</sl-button>
-  <sl-button variant="warning">Right</sl-button>
-</sl-button-group>
-
-<br><br>
-
-<sl-button-group>
-  <sl-button variant="danger">Left</sl-button>
-  <sl-button variant="danger">Center</sl-button>
-  <sl-button variant="danger">Right</sl-button>
-</sl-button-group>
-```
-
-```jsx react
-import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButtonGroup>
-      <SlButton variant="primary">Left</SlButton>
-      <SlButton variant="primary">Center</SlButton>
-      <SlButton variant="primary">Right</SlButton>
-    </SlButtonGroup>
-
-    <br /><br />
-
-    <SlButtonGroup>
-      <SlButton variant="success">Left</SlButton>
-      <SlButton variant="success">Center</SlButton>
-      <SlButton variant="success">Right</SlButton>
-    </SlButtonGroup>
-
-    <br /><br />
-
-    <SlButtonGroup>
-      <SlButton variant="neutral">Left</SlButton>
-      <SlButton variant="neutral">Center</SlButton>
-      <SlButton variant="neutral">Right</SlButton>
-    </SlButtonGroup>
-
-    <br /><br />
-
-    <SlButtonGroup>
-      <SlButton variant="warning">Left</SlButton>
-      <SlButton variant="warning">Center</SlButton>
-      <SlButton variant="warning">Right</SlButton>
-    </SlButtonGroup>
-
-    <br /><br />
-
-    <SlButtonGroup>
-      <SlButton variant="danger">Left</SlButton>
-      <SlButton variant="danger">Center</SlButton>
-      <SlButton variant="danger">Right</SlButton>
-    </SlButtonGroup>
-  </>
-);
-```
-
-### Pill Buttons
-
-Pill buttons are supported through the button's `pill` attribute.
-
-```html preview
-<sl-button-group>
-  <sl-button size="small" pill>Left</sl-button>
-  <sl-button size="small" pill>Center</sl-button>
-  <sl-button size="small" pill>Right</sl-button>
-</sl-button-group>
-
-<br><br>
-
-<sl-button-group>
-  <sl-button size="medium" pill>Left</sl-button>
-  <sl-button size="medium" pill>Center</sl-button>
-  <sl-button size="medium" pill>Right</sl-button>
-</sl-button-group>
-
-<br><br>
-
-<sl-button-group>
-  <sl-button size="large" pill>Left</sl-button>
-  <sl-button size="large" pill>Center</sl-button>
-  <sl-button size="large" pill>Right</sl-button>
-</sl-button-group>
-```
-
-```jsx react
-import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButtonGroup>
-      <SlButton size="small" pill>Left</SlButton>
-      <SlButton size="small" pill>Center</SlButton>
-      <SlButton size="small" pill>Right</SlButton>
-    </SlButtonGroup>
-
-    <br /><br />
-
-    <SlButtonGroup>
-      <SlButton size="medium" pill>Left</SlButton>
-      <SlButton size="medium" pill>Center</SlButton>
-      <SlButton size="medium" pill>Right</SlButton>
-    </SlButtonGroup>
-
-    <br /><br />
-
-    <SlButtonGroup>
-      <SlButton size="large" pill>Left</SlButton>
-      <SlButton size="large" pill>Center</SlButton>
-      <SlButton size="large" pill>Right</SlButton>
-    </SlButtonGroup>
-  </>
-);
-```
-
-### Dropdowns in Button Groups
-
-Dropdowns can be placed inside button groups as long as the trigger is an `<sl-button>` element.
-
-```html preview
-<sl-button-group> 
-  <sl-button>Button</sl-button>
-  <sl-button>Button</sl-button>
-  <sl-dropdown>
-    <sl-button slot="trigger" caret>Dropdown</sl-button>
-    <sl-menu>
-      <sl-menu-item>Item 1</sl-menu-item>
-      <sl-menu-item>Item 2</sl-menu-item>
-      <sl-menu-item>Item 3</sl-menu-item>
-    </sl-menu>
-  </sl-dropdown>
-</sl-button-group>
-```
-
-```jsx react
-import { 
-  SlButton, 
-  SlButtonGroup,
-  SlDropdown,
-  SlMenu,
-  SlMenuItem,
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlButtonGroup> 
-    <SlButton>Button</SlButton>
-    <SlButton>Button</SlButton>
-    <SlDropdown>
-      <SlButton slot="trigger" caret>Dropdown</SlButton>
-      <SlMenu>
-        <SlMenuItem>Item 1</SlMenuItem>
-        <SlMenuItem>Item 2</SlMenuItem>
-        <SlMenuItem>Item 3</SlMenuItem>
-      </SlMenu>
-    </SlDropdown>
-  </SlButtonGroup>
-);
-```
-
-### Split Buttons
-
-Create a split button using a button and a dropdown.
-
-```html preview
-<sl-button-group> 
-  <sl-button variant="primary">Save</sl-button>
-  <sl-dropdown placement="bottom-end">
-    <sl-button slot="trigger" variant="primary" caret></sl-button>
-    <sl-menu>
-      <sl-menu-item>Save</sl-menu-item>
-      <sl-menu-item>Save as&hellip;</sl-menu-item>
-      <sl-menu-item>Save all</sl-menu-item>
-    </sl-menu>
-  </sl-dropdown>
-</sl-button-group>
-```
-
-```jsx react
-import { 
-  SlButton, 
-  SlButtonGroup,
-  SlDropdown,
-  SlMenu,
-  SlMenuItem,
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlButtonGroup> 
-    <SlButton variant="primary">Save</SlButton>
-    <SlDropdown placement="bottom-end">
-      <SlButton slot="trigger" variant="primary" caret></SlButton>
-      <SlMenu>
-        <SlMenuItem>Save</SlMenuItem>
-        <SlMenuItem>Save as&hellip;</SlMenuItem>
-        <SlMenuItem>Save all</SlMenuItem>
-      </SlMenu>
-    </SlDropdown>
-  </SlButtonGroup>
-);
-```
-
-### Tooltips in Button Groups
-
-Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.
-
-```html preview
-<sl-button-group>
-  <sl-tooltip content="I'm on the left">
-    <sl-button>Left</sl-button>
-  </sl-tooltip>
-
-  <sl-tooltip content="I'm in the middle">
-    <sl-button>Center</sl-button>
-  </sl-tooltip>
-
-  <sl-tooltip content="I'm on the right">
-    <sl-button>Right</sl-button>
-  </sl-tooltip>
-</sl-button-group>
-```
-
-```jsx react
-import { 
-  SlButton, 
-  SlButtonGroup,
-  SlTooltip
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButtonGroup>
-      <SlTooltip content="I'm on the left">
-        <SlButton>Left</SlButton>
-      </SlTooltip>
-
-      <SlTooltip content="I'm in the middle">
-        <SlButton>Center</SlButton>
-      </SlTooltip>
-
-      <SlTooltip content="I'm on the right">
-        <SlButton>Right</SlButton>
-      </SlTooltip>
-    </SlButtonGroup>
-  </>
-);
-```
-
-### Toolbar Example
-
-Create interactive toolbars with button groups.
-
-```html preview
-<div class="button-group-toolbar">
-  <sl-button-group label="History">
-    <sl-tooltip content="Undo">
-      <sl-button><sl-icon name="arrow-counterclockwise"></sl-icon></sl-button>
-    </sl-tooltip>
-    <sl-tooltip content="Redo">
-      <sl-button><sl-icon name="arrow-clockwise"></sl-icon></sl-button>
-    </sl-tooltip>
-  </sl-button-group>
-
-  <sl-button-group label="Formatting">
-    <sl-tooltip content="Bold">
-      <sl-button><sl-icon name="type-bold"></sl-icon></sl-button>
-    </sl-tooltip>
-    <sl-tooltip content="Italic">
-      <sl-button><sl-icon name="type-italic"></sl-icon></sl-button>
-    </sl-tooltip>
-    <sl-tooltip content="Underline">
-      <sl-button><sl-icon name="type-underline"></sl-icon></sl-button>
-    </sl-tooltip>
-  </sl-button-group>
-
-  <sl-button-group label="Alignment">
-    <sl-tooltip content="Align Left">
-      <sl-button><sl-icon name="justify-left"></sl-icon></sl-button>
-    </sl-tooltip>
-    <sl-tooltip content="Align Center">
-      <sl-button><sl-icon name="justify"></sl-icon></sl-button>
-    </sl-tooltip>
-    <sl-tooltip content="Align Right">
-      <sl-button><sl-icon name="justify-right"></sl-icon></sl-button>
-    </sl-tooltip>
-  </sl-button-group>
-</div>
-
-<style>
-  .button-group-toolbar sl-button-group:not(:last-of-type) {
-    margin-right: var(--sl-spacing-x-small);
-  }
-</style>
-```
-
-```jsx react
-import { 
-  SlButton, 
-  SlButtonGroup,
-  SlIcon,
-  SlTooltip
-} from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .button-group-toolbar sl-button-group:not(:last-of-type) {
-    margin-right: var(--sl-spacing-x-small);
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="button-group-toolbar">
-      <SlButtonGroup label="History">
-        <SlTooltip content="Undo">
-          <SlButton><SlIcon name="arrow-counterclockwise"></SlIcon></SlButton>
-        </SlTooltip>
-        <SlTooltip content="Redo">
-          <SlButton><SlIcon name="arrow-clockwise"></SlIcon></SlButton>
-        </SlTooltip>
-      </SlButtonGroup>
-
-      <SlButtonGroup label="Formatting">
-        <SlTooltip content="Bold">
-          <SlButton><SlIcon name="type-bold"></SlIcon></SlButton>
-        </SlTooltip>
-        <SlTooltip content="Italic">
-          <SlButton><SlIcon name="type-italic"></SlIcon></SlButton>
-        </SlTooltip>
-        <SlTooltip content="Underline">
-          <SlButton><SlIcon name="type-underline"></SlIcon></SlButton>
-        </SlTooltip>
-      </SlButtonGroup>
-
-      <SlButtonGroup label="Alignment">
-        <SlTooltip content="Align Left">
-          <SlButton><SlIcon name="justify-left"></SlIcon></SlButton>
-        </SlTooltip>
-        <SlTooltip content="Align Center">
-          <SlButton><SlIcon name="justify"></SlIcon></SlButton>
-        </SlTooltip>
-        <SlTooltip content="Align Right">
-          <SlButton><SlIcon name="justify-right"></SlIcon></SlButton>
-        </SlTooltip>
-      </SlButtonGroup>
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-[component-metadata:sl-button-group]

docs/components/button.md

@@ -1,453 +0,0 @@
-# Button
-
-[component-header:sl-button]
-
-Buttons represent actions that are available to the user.
-
-```html preview
-<sl-button>Button</sl-button>
-```
-
-```jsx react
-import { SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlButton>Button</SlButton>
-);
-```
-
-## Examples
-
-### Variants
-
-Use the `variant` attribute to set the button's variant.
-
-```html preview
-<sl-button variant="default">Default</sl-button>
-<sl-button variant="primary">Primary</sl-button>
-<sl-button variant="success">Success</sl-button>
-<sl-button variant="neutral">Neutral</sl-button>
-<sl-button variant="warning">Warning</sl-button>
-<sl-button variant="danger">Danger</sl-button>
-```
-
-```jsx react
-import { SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButton variant="default">Default</SlButton>
-    <SlButton variant="primary">Primary</SlButton>
-    <SlButton variant="success">Success</SlButton>
-    <SlButton variant="neutral">Neutral</SlButton>
-    <SlButton variant="warning">Warning</SlButton>
-    <SlButton variant="danger">Danger</SlButton>  
-  </>
-);
-```
-
-### Sizes
-
-Use the `size` attribute to change a button's size.
-
-```html preview
-<sl-button size="small">Small</sl-button>
-<sl-button size="medium">Medium</sl-button>
-<sl-button size="large">Large</sl-button>
-```
-
-```jsx react
-import { SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButton size="small">Small</SlButton>
-    <SlButton size="medium">Medium</SlButton>
-    <SlButton size="large">Large</SlButton>
-  </>
-);
-```
-
-### Outline Buttons
-
-Use the `outline` attribute to draw outlined buttons with transparent backgrounds.
-
-```html preview
-<sl-button variant="default" outline>Default</sl-button>
-<sl-button variant="primary" outline>Primary</sl-button>
-<sl-button variant="success" outline>Success</sl-button>
-<sl-button variant="neutral" outline>Neutral</sl-button>
-<sl-button variant="warning" outline>Warning</sl-button>
-<sl-button variant="danger" outline>Danger</sl-button>
-```
-
-```jsx react
-import { SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButton variant="default" outline>Default</SlButton>
-    <SlButton variant="primary" outline>Primary</SlButton>
-    <SlButton variant="success" outline>Success</SlButton>
-    <SlButton variant="neutral" outline>Neutral</SlButton>
-    <SlButton variant="warning" outline>Warning</SlButton>
-    <SlButton variant="danger" outline>Danger</SlButton>
-  </>
-);
-```
-
-### Pill Buttons
-
-Use the `pill` attribute to give buttons rounded edges.
-
-```html preview
-<sl-button size="small" pill>Small</sl-button>
-<sl-button size="medium" pill>Medium</sl-button>
-<sl-button size="large" pill>Large</sl-button>
-```
-
-```jsx react
-import { SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButton size="small" pill>Small</SlButton>
-    <SlButton size="medium" pill>Medium</SlButton>
-    <SlButton size="large" pill>Large</SlButton>
-  </>
-);
-```
-
-### Circle Buttons
-
-Use the `circle` attribute to create circular icon buttons.
-
-```html preview
-<sl-button variant="default" size="small" circle><sl-icon name="gear"></sl-icon></sl-button>
-<sl-button variant="default" size="medium" circle><sl-icon name="gear"></sl-icon></sl-button>
-<sl-button variant="default" size="large" circle><sl-icon name="gear"></sl-icon></sl-button>
-```
-
-```jsx react
-import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButton variant="default" size="small" circle><SlIcon name="gear" /></SlButton>
-    <SlButton variant="default" size="medium" circle><SlIcon name="gear" /></SlButton>
-    <SlButton variant="default" size="large" circle><SlIcon name="gear" /></SlButton>
-  </>
-);
-```
-
-### 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 preview
-<sl-button variant="text" size="small">Text</sl-button>
-<sl-button variant="text" size="medium">Text</sl-button>
-<sl-button variant="text" size="large">Text</sl-button>
-```
-
-```jsx react
-import { SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButton variant="text" size="small">Text</SlButton>
-    <SlButton variant="text" size="medium">Text</SlButton>
-    <SlButton variant="text" size="large">Text</SlButton>
-  </>
-);
-```
-
-### 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. <kbd>CMD/CTRL/SHIFT + CLICK</kbd>) and exposes the `target` and `download` attributes.
-
-```html preview
-<sl-button href="https://example.com/">Link</sl-button>
-<sl-button href="https://example.com/" target="_blank">New Window</sl-button>
-<sl-button href="/assets/images/wordmark.svg" download="shoelace.svg">Download</sl-button>
-<sl-button href="https://example.com/" disabled>Disabled</sl-button>
-```
-
-```jsx react
-import { SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButton href="https://example.com/">Link</SlButton>
-    <SlButton href="https://example.com/" target="_blank">New Window</SlButton>
-    <SlButton href="/assets/images/wordmark.svg" download="shoelace.svg">Download</SlButton>
-    <SlButton href="https://example.com/" disabled>Disabled</SlButton>
-  </>
-);
-```
-
-?> 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 preview
-<sl-button variant="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
-<sl-button variant="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
-<sl-button variant="default" size="large" style="width: 100%;">Large</sl-button>
-```
-
-```jsx react
-import { SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButton variant="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>Small</SlButton>
-    <SlButton variant="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>Medium</SlButton>
-    <SlButton variant="default" size="large" style={{ width: '100%' }}>Large</SlButton>
-  </>
-);
-```
-
-### Prefix and Suffix Icons
-
-Use the `prefix` and `suffix` slots to add icons.
-
-```html preview
-<sl-button variant="default" size="small">
-  <sl-icon slot="prefix" name="gear"></sl-icon>
-  Settings
-</sl-button>
-
-<sl-button variant="default" size="small">
-  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
-  Refresh
-</sl-button>
-
-<sl-button variant="default" size="small">
-  <sl-icon slot="prefix" name="link-45deg"></sl-icon>
-  <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
-  Open
-</sl-button>
-
-<br><br>
-
-<sl-button variant="default">
-  <sl-icon slot="prefix" name="gear"></sl-icon>
-  Settings
-</sl-button>
-
-<sl-button variant="default">
-  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
-  Refresh
-</sl-button>
-
-<sl-button variant="default">
-  <sl-icon slot="prefix" name="link-45deg"></sl-icon>
-  <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
-  Open
-</sl-button>
-
-<br><br>
-
-<sl-button variant="default" size="large">
-  <sl-icon slot="prefix" name="gear"></sl-icon>
-  Settings
-</sl-button>
-
-<sl-button variant="default" size="large">
-  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
-  Refresh
-</sl-button>
-
-<sl-button variant="default" size="large">
-  <sl-icon slot="prefix" name="link-45deg"></sl-icon>
-  <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
-  Open
-</sl-button>
-```
-
-```jsx react
-import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButton variant="default" size="small">
-      <SlIcon slot="prefix" name="gear"></SlIcon>
-      Settings
-    </SlButton>
-
-    <SlButton variant="default" size="small">
-      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
-      Refresh
-    </SlButton>
-
-    <SlButton variant="default" size="small">
-      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
-      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
-      Open
-    </SlButton>
-
-    <br /><br/ >
-
-    <SlButton variant="default">
-      <SlIcon slot="prefix" name="gear"></SlIcon>
-      Settings
-    </SlButton>
-
-    <SlButton variant="default">
-      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
-      Refresh
-    </SlButton>
-
-    <SlButton variant="default">
-      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
-      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
-      Open
-    </SlButton>
-
-    <br /><br />
-
-    <SlButton variant="default" size="large">
-      <SlIcon slot="prefix" name="gear"></SlIcon>
-      Settings
-    </SlButton>
-
-    <SlButton variant="default" size="large">
-      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
-      Refresh
-    </SlButton>
-
-    <SlButton variant="default" size="large">
-      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
-      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
-      Open
-    </SlButton>
-  </>
-);
-```
-
-### Caret
-
-Use the `caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
-
-```html preview
-<sl-button size="small" caret>Small</sl-button>
-<sl-button size="medium" caret>Medium</sl-button>
-<sl-button size="large" caret>Large</sl-button>
-```
-
-```jsx react
-import { SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButton size="small" caret>Small</SlButton>
-    <SlButton size="medium" caret>Medium</SlButton>
-    <SlButton size="large" caret>Large</SlButton>
-  </>
-);
-```
-
-### Loading
-
-Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
-
-```html preview
-<sl-button variant="default" loading>Default</sl-button>
-<sl-button variant="primary" loading>Primary</sl-button>
-<sl-button variant="success" loading>Success</sl-button>
-<sl-button variant="neutral" loading>Neutral</sl-button>
-<sl-button variant="warning" loading>Warning</sl-button>
-<sl-button variant="danger" loading>Danger</sl-button>
-```
-
-```jsx react
-import { SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButton variant="default" loading>Default</SlButton>
-    <SlButton variant="primary" loading>Primary</SlButton>
-    <SlButton variant="success" loading>Success</SlButton>
-    <SlButton variant="neutral" loading>Neutral</SlButton>
-    <SlButton variant="warning" loading>Warning</SlButton>
-    <SlButton variant="danger" loading>Danger</SlButton>
-  </>
-);
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a button. Clicks will be suppressed until the disabled state is removed.
-
-```html preview
-<sl-button variant="default" disabled>Default</sl-button>
-<sl-button variant="primary" disabled>Primary</sl-button>
-<sl-button variant="success" disabled>Success</sl-button>
-<sl-button variant="neutral" disabled>Neutral</sl-button>
-<sl-button variant="warning" disabled>Warning</sl-button>
-<sl-button variant="danger" disabled>Danger</sl-button>
-```
-
-```jsx react
-import { SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButton variant="default" disabled>Default</SlButton>
-    <SlButton variant="primary" disabled>Primary</SlButton>
-    <SlButton variant="success" disabled>Success</SlButton>
-    <SlButton variant="neutral" disabled>Neutral</SlButton>
-    <SlButton variant="warning" disabled>Warning</SlButton>
-    <SlButton variant="danger" disabled>Danger</SlButton>
-  </>
-);
-```
-
-### 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. `sl-button[variant="primary"]`).
-
-```html preview
-<sl-button class="pink">Pink Button</sl-button>
-
-<style>
-  sl-button.pink::part(base) {
-    /* Set design tokens for height and border width */
-    --sl-input-height-medium: 48px;
-    --sl-input-border-width: 4px;
-    
-    border-radius: 0;
-    background-color: #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(--sl-transition-medium) transform ease, var(--sl-transition-medium) border ease;
-  }
-
-  sl-button.pink::part(base):hover {
-    transform: scale(1.05) rotate(-1deg);
-  }
-
-  sl-button.pink::part(base):active {
-    border-top-color: #ad005c;
-    border-right-color: #ff7ac1;
-    border-bottom-color: #ff7ac1;
-    border-left-color: #ad005c;
-    transform: scale(1.05) rotate(-1deg) translateY(2px);
-  }
-
-  sl-button.pink::part(base):focus-visible {
-    outline: dashed 2px deeppink;
-    outline-offset: 4px;
-  }
-</style>
-```
-
-[component-metadata:sl-button]

docs/components/card.md

@@ -1,311 +0,0 @@
-# Card
-
-[component-header:sl-card]
-
-Cards can be used to group related subjects in a container.
-
-```html preview
-<sl-card 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">
-    <sl-button variant="primary" pill>More Info</sl-button>
-    <sl-rating></sl-rating>
-  </div>
-</sl-card>
-
-<style>
-  .card-overview {
-    max-width: 300px;
-  }
-
-  .card-overview small {
-    color: var(--sl-color-neutral-500);
-  }
-
-  .card-overview [slot="footer"] {
-    display: flex; 
-    justify-content: space-between; 
-    align-items: center;
-  }
-</style>
-```
-
-```jsx react
-import { 
-  SlButton, 
-  SlCard, 
-  SlRating 
-} from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .card-overview {
-    max-width: 300px;
-  }
-
-  .card-overview small {
-    color: var(--sl-color-neutral-500);
-  }
-
-  .card-overview [slot="footer"] {
-    display: flex; 
-    justify-content: space-between; 
-    align-items: center;
-  }
-`;
-
-const App = () => (
-  <>
-    <SlCard 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">
-        <SlButton variant="primary" pill>More Info</SlButton>
-        <SlRating></SlRating>
-      </div>
-    </SlCard>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-## Examples
-
-## Basic Card
-
-Basic cards aren't very exciting, but they can display any content you want them to.
-
-```html preview
-<sl-card class="card-basic">
-  This is just a basic card. No image, no header, and no footer. Just your content.
-</sl-card>
-
-<style>
-  .card-basic {
-    max-width: 300px;
-  }
-</style>
-```
-
-```jsx react
-import { SlCard } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .card-basic {
-    max-width: 300px;
-  }
-`;
-
-const App = () => (
-  <>
-    <SlCard className="card-basic">
-      This is just a basic card. No image, no header, and no footer. Just your content.
-    </SlCard>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-## Card with Header
-
-Headers can be used to display titles and more.
-
-```html preview
-<sl-card class="card-header">
-  <div slot="header">
-    Header Title
-
-    <sl-icon-button name="gear"></sl-icon-button>
-  </div>
-
-  This card has a header. You can put all sorts of things in it!
-</sl-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 sl-icon-button {
-    font-size: var(--sl-font-size-medium);
-  }
-</style>
-```
-
-```jsx react
-import { SlCard, SlIconButton } from '@shoelace-style/shoelace/dist/react';
-
-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 sl-icon-button {
-    font-size: var(--sl-font-size-medium);
-  }
-`;
-
-const App = () => (
-  <>
-    <SlCard className="card-header">
-      <div slot="header">
-        Header Title
-
-        <SlIconButton name="gear"></SlIconButton>
-      </div>
-
-      This card has a header. You can put all sorts of things in it!
-    </SlCard>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-## Card with Footer
-
-Footers can be used to display actions, summaries, or other relevant content.
-
-```html preview
-<sl-card class="card-footer">
-  This card has a footer. You can put all sorts of things in it!
-
-  <div slot="footer">
-    <sl-rating></sl-rating>
-    <sl-button slot="footer" variant="primary">Preview</sl-button>
-  </div>
-</sl-card>
-
-<style>
-  .card-footer {
-    max-width: 300px;
-  }
-
-  .card-footer [slot="footer"] {
-    display: flex; 
-    justify-content: space-between; 
-    align-items: center;
-  }
-</style>
-```
-
-```jsx react
-import { 
-  SlButton, 
-  SlCard, 
-  SlRating 
-} from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .card-footer {
-    max-width: 300px;
-  }
-
-  .card-footer [slot="footer"] {
-    display: flex; 
-    justify-content: space-between; 
-    align-items: center;
-  }
-`;
-
-const App = () => (
-  <>
-    <SlCard className="card-footer">
-      This card has a footer. You can put all sorts of things in it!
-
-      <div slot="footer">
-        <SlRating></SlRating>
-        <SlButton slot="footer" variant="primary">Preview</SlButton>
-      </div>
-    </SlCard>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-## Images
-
-Cards accept an `image` slot. The image is displayed atop the card and stretches to fit.
-
-```html preview
-<sl-card 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.
-</sl-card>
-
-<style>
-  .card-image {
-    max-width: 300px;
-  }
-</style>
-```
-
-```jsx react
-import { SlCard } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .card-image {
-    max-width: 300px;
-  }
-`;
-
-const App = () => (
-  <>
-    <SlCard 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.
-    </SlCard>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-[component-metadata:sl-card]

docs/components/checkbox.md

@@ -1,71 +0,0 @@
-# Checkbox
-
-[component-header:sl-checkbox]
-
-Checkboxes allow the user to toggle an option on or off.
-
-```html preview
-<sl-checkbox>Checkbox</sl-checkbox>
-```
-
-```jsx react
-import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlCheckbox>Checkbox</SlCheckbox>
-);
-```
-
-?> 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 preview
-<sl-checkbox checked>Checked</sl-checkbox>
-```
-
-```jsx react
-import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlCheckbox checked>Checked</SlCheckbox>
-);
-```
-
-### Indeterminate
-
-Use the `indeterminate` attribute to make the checkbox indeterminate.
-
-```html preview
-<sl-checkbox indeterminate>Indeterminate</sl-checkbox>
-```
-
-```jsx react
-import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlCheckbox indeterminate>Indeterminate</SlCheckbox>
-);
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable the checkbox.
-
-```html preview
-<sl-checkbox disabled>Disabled</sl-checkbox>
-```
-
-```jsx react
-import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlCheckbox disabled>Disabled</SlCheckbox>
-);
-```
-
-[component-metadata:sl-checkbox]

docs/components/color-picker.md

@@ -1,101 +0,0 @@
-# Color Picker
-
-[component-header:sl-color-picker]
-
-Color pickers allow the user to select a color.
-
-```html preview
-<sl-color-picker></sl-color-picker>
-```
-
-```jsx react
-import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlColorPicker />
-);
-```
-
-?> 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
-
-### Opacity
-
-Use the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, or HSLA based on `format`.
-
-```html preview
-<sl-color-picker opacity></sl-color-picker>
-```
-
-```jsx react
-import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlColorPicker opacity />
-);
-```
-
-### Formats
-
-Set the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, and `hsl`. 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 preview
-<sl-color-picker format="hex" value="#4a90e2"></sl-color-picker>
-<sl-color-picker format="rgb" value="rgb(80, 227, 194)"></sl-color-picker>
-<sl-color-picker format="hsl" value="hsl(290, 87%, 47%)"></sl-color-picker>
-```
-
-```jsx react
-import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlColorPicker format="hex" value="#4a90e2" />
-    <SlColorPicker format="rgb" value="rgb(80, 227, 194)" />
-    <SlColorPicker format="hsl" value="hsl(290, 87%, 47%)" />
-  </>
-);
-```
-
-### Sizes
-
-Use the `size` attribute to change the color picker's trigger size.
-
-```html preview
-<sl-color-picker size="small"></sl-color-picker>
-<sl-color-picker size="medium"></sl-color-picker>
-<sl-color-picker size="large"></sl-color-picker>
-```
-
-```jsx react
-import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlColorPicker size="small" />
-    <SlColorPicker size="medium" />
-    <SlColorPicker size="large" />
-  </>
-);
-```
-
-### Inline
-
-The color picker can be rendered inline instead of in a dropdown using the `inline` attribute.
-
-```html preview
-<sl-color-picker inline></sl-color-picker>
-```
-
-```jsx react
-import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlColorPicker inline />
-);
-```
-
-[component-metadata:sl-color-picker]

docs/components/details.md

@@ -1,89 +0,0 @@
-<!-- cspell:dictionaries lorem-ipsum -->
-
-# Details
-
-[component-header:sl-details]
-
-Details show a brief summary and expand to show additional content.
-
-```html preview
-<sl-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.
-</sl-details>
-```
-
-```jsx react
-import { SlDetails } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlDetails 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.
-  </SlDetails>
-);
-```
-
-## Examples
-
-### Disabled
-
-Use the `disable` attribute to prevent the details from expanding.
-
-```html preview
-<sl-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.
-</sl-details>
-```
-
-```jsx react
-import { SlDetails } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlDetails 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.
-  </SlDetails>
-);
-```
-
-### 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 `sl-show` event.
-
-```html preview
-<div class="details-group-example">
-  <sl-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.
-  </sl-details>
-
-  <sl-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.
-  </sl-details>
-
-  <sl-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.
-  </sl-details>
-</div>
-
-<script>
-  const container = document.querySelector('.details-group-example');
-
-  // Close all other details when one is shown
-  container.addEventListener('sl-show', event => {
-    [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
-  });
-</script>
-
-<style>
-  .details-group-example sl-details:not(:last-of-type) {
-    margin-bottom: var(--sl-spacing-2x-small);
-  }
-</style>
-```
-
-[component-metadata:sl-details]

docs/components/dialog.md

@@ -1,265 +0,0 @@
-<!-- cspell:dictionaries lorem-ipsum -->
-
-# Dialog
-
-[component-header:sl-dialog]
-
-Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
-
-```html preview
-<sl-dialog label="Dialog" class="dialog-overview">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <sl-button slot="footer" variant="primary">Close</sl-button>
-</sl-dialog>
-
-<sl-button>Open Dialog</sl-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-overview');
-  const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
-
-  openButton.addEventListener('click', () => dialog.show());
-  closeButton.addEventListener('click', () => dialog.hide());
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-          Close
-        </SlButton>
-      </SlDialog>
-
-      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
-    </>
-  );
-};
-```
-
-## UX Tips
-
-- Use a dialog when you immediately require the user's attention, e.g. confirming a destructive action.
-- Always provide an obvious way for the user to dismiss the dialog.
-- Don't nest dialogs. It almost always leads to a poor experience for the user.
-
-## Examples
-
-### Custom Width
-
-Use the `--width` custom property to set the dialog's width.
-
-```html preview
-<sl-dialog label="Dialog" class="dialog-width" style="--width: 50vw;">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <sl-button slot="footer" variant="primary">Close</sl-button>
-</sl-dialog>
-
-<sl-button>Open Dialog</sl-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-width');
-  const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
-
-  openButton.addEventListener('click', () => dialog.show());
-  closeButton.addEventListener('click', () => dialog.hide());
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <SlDialog label="Dialog" open={open} style={{ '--width': '50vw' }} onSlAfterHide={() => setOpen(false)}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-          Close
-        </SlButton>
-      </SlDialog>
-
-      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
-    </>
-  );
-};
-```
-
-### 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 preview
-<sl-dialog label="Dialog" class="dialog-scrolling">
-  <div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
-    <p>Scroll down and give it a try! 👇</p>
-  </div>
-  <sl-button slot="footer" variant="primary">Close</sl-button>
-</sl-dialog>
-
-<sl-button>Open Dialog</sl-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-scrolling');
-  const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
-
-  openButton.addEventListener('click', () => dialog.show());
-  closeButton.addEventListener('click', () => dialog.hide());
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
-        <div
-          style={{
-            height: '150vh',
-            border: 'dashed 2px var(--sl-color-neutral-200)',
-            padding: '0 1rem'
-          }}
-        >
-          <p>Scroll down and give it a try! 👇</p>
-        </div>
-
-        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-          Close
-        </SlButton>
-      </SlDialog>
-
-      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
-    </>
-  );
-};
-```
-
-### Preventing the Dialog from Closing
-
-By default, dialogs will close when the user clicks the close button, clicks the overlay, or presses the <kbd>Escape</kbd> 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 `sl-request-close` event. When canceled, the dialog will remain open and pulse briefly to draw the user's attention to it.
-
-```html preview
-<sl-dialog label="Dialog" class="dialog-deny-close">
-  This dialog will not close unless you use the button below.
-  <sl-button slot="footer" variant="primary">Save &amp; Close</sl-button>
-</sl-dialog>
-
-<sl-button>Open Dialog</sl-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-deny-close');
-  const openButton = dialog.nextElementSibling;
-  const saveButton = dialog.querySelector('sl-button[slot="footer"]');
-
-  openButton.addEventListener('click', () => dialog.show());
-  saveButton.addEventListener('click', () => dialog.hide());
-
-  dialog.addEventListener('sl-request-close', event => event.preventDefault());
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <SlDialog
-        label="Dialog"
-        open={open}
-        onSlRequestClose={event => event.preventDefault()}
-        onSlAfterHide={() => setOpen(false)}
-      >
-        This dialog will not close unless you use the button below.
-        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-          Save &amp; Close
-        </SlButton>
-      </SlDialog>
-
-      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
-    </>
-  );
-};
-```
-
-### Customizing Initial Focus
-
-By default, the dialog's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element within the dialog. To set focus on a different element, listen for and cancel the `sl-initial-focus` event.
-
-```html preview
-<sl-dialog label="Dialog" class="dialog-focus">
-  <sl-input placeholder="I will have focus when the dialog is opened"></sl-input>
-  <sl-button slot="footer" variant="primary">Close</sl-button>
-</sl-dialog>
-
-<sl-button>Open Dialog</sl-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-focus');
-  const input = dialog.querySelector('sl-input');
-  const openButton = dialog.nextElementSibling;
-  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
-
-  openButton.addEventListener('click', () => dialog.show());
-  closeButton.addEventListener('click', () => dialog.hide());
-
-  dialog.addEventListener('sl-initial-focus', event => {
-    event.preventDefault();
-    input.focus({ preventScroll: true });
-  });
-</script>
-```
-
-```jsx react
-import { useRef, useState } from 'react';
-import { SlButton, SlDialog, SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const input = useRef(null);
-  const [open, setOpen] = useState(false);
-
-  function handleInitialFocus(event) {
-    event.preventDefault();
-    input.current.focus();
-  }
-
-  return (
-    <>
-      <SlDialog label="Dialog" open={open} onSlInitialFocus={handleInitialFocus} onSlAfterHide={() => setOpen(false)}>
-        <SlInput ref={input} placeholder="I will have focus when the dialog is opened" />
-        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-          Close
-        </SlButton>
-      </SlDialog>
-
-      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
-    </>
-  );
-};
-```
-
-[component-metadata:sl-dialog]

docs/components/divider.md

@@ -1,152 +0,0 @@
-# Divider
-
-[component-header:sl-divider]
-
-Dividers are used to visually separate or group elements.
-
-```html preview
-<sl-divider></sl-divider>
-```
-
-```jsx react
-import { SlDivider } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlDivider />
-);
-```
-## Examples
-
-### Width
-
-Use the `--width` custom property to change the width of the divider.
-
-```html preview
-<sl-divider style="--width: 4px;"></sl-divider>
-```
-
-```jsx react
-import { SlDivider } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlDivider style={{ '--width': '4px' }} />
-);
-```
-
-### Color
-
-Use the `--color` custom property to change the color of the divider.
-
-```html preview
-<sl-divider style="--color: tomato;"></sl-divider>
-```
-
-```jsx react
-import { SlDivider } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlDivider style={{ '--color': 'tomato' }} />
-);
-```
-
-### Spacing
-
-Use the `--spacing` custom property to change the amount of space between the divider and it's neighboring elements.
-
-```html preview
-<div style="text-align: center;">
-  Above
-  <sl-divider style="--spacing: 2rem;"></sl-divider>
-  Below
-</div>
-```
-
-```jsx react
-import { SlDivider } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    Above
-    <SlDivider style={{ '--spacing': '2rem' }} />
-    Below
-  </>
-);
-```
-
-### 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 preview
-<div style="display: flex; align-items: center; height: 2rem;">
-  First
-  <sl-divider vertical></sl-divider>
-  Middle
-  <sl-divider vertical></sl-divider>
-  Last
-</div>
-```
-
-```jsx react
-import { SlDivider } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <div 
-    style={{ 
-      display: 'flex', 
-      alignItems: 'center', 
-      height: '2rem'
-    }}
-  >
-    First
-    <SlDivider vertical />
-    Middle
-    <SlDivider vertical />
-    Last
-  </div>
-);
-```
-
-### Menu Dividers
-
-Use dividers in [menus](/components/menu) to visually group menu items.
-
-```html preview
-<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);">
-  <sl-menu-item value="1">Option 1</sl-menu-item>
-  <sl-menu-item value="2">Option 2</sl-menu-item>
-  <sl-menu-item value="3">Option 3</sl-menu-item>
-  <sl-divider></sl-divider>
-  <sl-menu-item value="4">Option 4</sl-menu-item>
-  <sl-menu-item value="5">Option 5</sl-menu-item>
-  <sl-menu-item value="6">Option 6</sl-menu-item>
-</sl-menu>
-```
-
-```jsx react
-import { 
-  SlDivider, 
-  SlMenu, 
-  SlMenuItem 
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlMenu 
-    style={{
-      maxWidth: '200px',
-      border: 'solid 1px var(--sl-panel-border-color)',
-      borderRadius: 'var(--sl-border-radius-medium)'
-    }}
-  >
-    <SlMenuItem value="1">Option 1</SlMenuItem>
-    <SlMenuItem value="2">Option 2</SlMenuItem>
-    <SlMenuItem value="3">Option 3</SlMenuItem>
-    <sl-divider />
-    <SlMenuItem value="4">Option 4</SlMenuItem>
-    <SlMenuItem value="5">Option 5</SlMenuItem>
-    <SlMenuItem value="6">Option 6</SlMenuItem>
-  </SlMenu>
-);
-```
-
-[component-metadata:sl-divider]

docs/components/drawer.md

@@ -1,452 +0,0 @@
-<!-- cspell:dictionaries lorem-ipsum -->
-
-# Drawer
-
-[component-header:sl-drawer]
-
-Drawers slide in from a container to expose additional options and information.
-
-```html preview
-<sl-drawer label="Drawer" class="drawer-overview">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <sl-button slot="footer" variant="primary">Close</sl-button>
-</sl-drawer>
-
-<sl-button>Open Drawer</sl-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-overview');
-  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
-
-  openButton.addEventListener('click', () => drawer.show());
-  closeButton.addEventListener('click', () => drawer.hide());
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-          Close
-        </SlButton>
-      </SlDrawer>
-
-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
-    </>
-  );
-};
-```
-
-## Examples
-
-### 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 preview
-<sl-drawer label="Drawer" placement="start" class="drawer-placement-start">
-  This drawer slides in from the start.
-  <sl-button slot="footer" variant="primary">Close</sl-button>
-</sl-drawer>
-
-<sl-button>Open Drawer</sl-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-placement-start');
-  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
-
-  openButton.addEventListener('click', () => drawer.show());
-  closeButton.addEventListener('click', () => drawer.hide());
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <SlDrawer label="Drawer" placement="start" open={open} onSlAfterHide={() => setOpen(false)}>
-        This drawer slides in from the start.
-        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-          Close
-        </SlButton>
-      </SlDrawer>
-
-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
-    </>
-  );
-};
-```
-
-### Slide in From Top
-
-To make the drawer slide in from the top, set the `placement` attribute to `top`.
-
-```html preview
-<sl-drawer label="Drawer" placement="top" class="drawer-placement-top">
-  This drawer slides in from the top.
-  <sl-button slot="footer" variant="primary">Close</sl-button>
-</sl-drawer>
-
-<sl-button>Open Drawer</sl-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-placement-top');
-  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
-
-  openButton.addEventListener('click', () => drawer.show());
-  closeButton.addEventListener('click', () => drawer.hide());
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <SlDrawer label="Drawer" placement="top" open={open} onSlAfterHide={() => setOpen(false)}>
-        This drawer slides in from the top.
-        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-          Close
-        </SlButton>
-      </SlDrawer>
-
-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
-    </>
-  );
-};
-```
-
-### Slide in From Bottom
-
-To make the drawer slide in from the bottom, set the `placement` attribute to `bottom`.
-
-```html preview
-<sl-drawer label="Drawer" placement="bottom" class="drawer-placement-bottom">
-  This drawer slides in from the bottom.
-  <sl-button slot="footer" variant="primary">Close</sl-button>
-</sl-drawer>
-
-<sl-button>Open Drawer</sl-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-placement-bottom');
-  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
-
-  openButton.addEventListener('click', () => drawer.show());
-  closeButton.addEventListener('click', () => drawer.hide());
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <SlDrawer label="Drawer" placement="bottom" open={open} onSlAfterHide={() => setOpen(false)}>
-        This drawer slides in from the bottom.
-        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-          Close
-        </SlButton>
-      </SlDrawer>
-
-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
-    </>
-  );
-};
-```
-
-### Contained to an Element
-
-By default, the drawer slides out of its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport. To make the drawer slide out of its parent element, add the `contained` attribute and `position: relative` to the parent.
-
-```html preview
-<div
-  style="position: relative; border: solid 2px var(--sl-panel-border-color); height: 300px; padding: 1rem; margin-bottom: 1rem;"
->
-  The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.
-
-  <sl-drawer label="Drawer" contained class="drawer-contained" style="--size: 50%;">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    <sl-button slot="footer" variant="primary">Close</sl-button>
-  </sl-drawer>
-</div>
-
-<sl-button>Open Drawer</sl-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-contained');
-  const openButton = drawer.parentElement.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
-
-  openButton.addEventListener('click', () => drawer.show());
-  closeButton.addEventListener('click', () => drawer.hide());
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <div
-        style={{
-          position: 'relative',
-          border: 'solid 2px var(--sl-panel-border-color)',
-          height: '300px',
-          padding: '1rem',
-          marginBottom: '1rem'
-        }}
-      >
-        The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer
-        opens.
-        <SlDrawer label="Drawer" contained open={open} onSlAfterHide={() => setOpen(false)} style={{ '--size': '50%' }}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-            Close
-          </SlButton>
-        </SlDrawer>
-      </div>
-
-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
-    </>
-  );
-};
-```
-
-### 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 preview
-<sl-drawer label="Drawer" class="drawer-custom-size" style="--size: 50vw;">
-  This drawer is always 50% of the viewport.
-  <sl-button slot="footer" variant="primary">Close</sl-button>
-</sl-drawer>
-
-<sl-button>Open Drawer</sl-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-custom-size');
-  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
-
-  openButton.addEventListener('click', () => drawer.show());
-  closeButton.addEventListener('click', () => drawer.hide());
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)} style={{ '--size': '50vw' }}>
-        This drawer is always 50% of the viewport.
-        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-          Close
-        </SlButton>
-      </SlDrawer>
-
-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
-    </>
-  );
-};
-```
-
-### 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 preview
-<sl-drawer label="Drawer" class="drawer-scrolling">
-  <div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
-    <p>Scroll down and give it a try! 👇</p>
-  </div>
-  <sl-button slot="footer" variant="primary">Close</sl-button>
-</sl-drawer>
-
-<sl-button>Open Drawer</sl-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-scrolling');
-  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
-
-  openButton.addEventListener('click', () => drawer.show());
-  closeButton.addEventListener('click', () => drawer.hide());
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
-        <div
-          style={{
-            height: '150vh',
-            border: 'dashed 2px var(--sl-color-neutral-200)',
-            padding: '0 1rem'
-          }}
-        >
-          <p>Scroll down and give it a try! 👇</p>
-        </div>
-        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-          Close
-        </SlButton>
-      </SlDrawer>
-
-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
-    </>
-  );
-};
-```
-
-### Preventing the Drawer from Closing
-
-By default, drawers will close when the user clicks the close button, clicks the overlay, or presses the <kbd>Escape</kbd> 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 `sl-request-close` event. When canceled, the drawer will remain open and pulse briefly to draw the user's attention to it.
-
-```html preview
-<sl-drawer label="Drawer" class="drawer-deny-close">
-  This drawer will not close unless you use the button below.
-  <sl-button slot="footer" variant="primary">Save &amp; Close</sl-button>
-</sl-drawer>
-
-<sl-button>Open Drawer</sl-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-deny-close');
-  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
-
-  openButton.addEventListener('click', () => drawer.show());
-  closeButton.addEventListener('click', () => drawer.hide());
-
-  drawer.addEventListener('sl-request-close', event => event.preventDefault());
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <SlDrawer
-        label="Drawer"
-        open={open}
-        onSlRequestClose={event => event.preventDefault()}
-        onSlAfterHide={() => setOpen(false)}
-      >
-        This drawer will not close unless you use the button below.
-        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-          Save &amp; Close
-        </SlButton>
-      </SlDrawer>
-
-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
-    </>
-  );
-};
-```
-
-### Customizing Initial Focus
-
-By default, the drawer's panel will gain focus when opened. This allows the first tab press to focus on the first tabbable element within the drawer. To set focus on a different element, listen for and cancel the `sl-initial-focus` event.
-
-```html preview
-<sl-drawer label="Drawer" class="drawer-focus">
-  <sl-input placeholder="I will have focus when the drawer is opened"></sl-input>
-  <sl-button slot="footer" variant="primary">Close</sl-button>
-</sl-drawer>
-
-<sl-button>Open Drawer</sl-button>
-
-<script>
-  const drawer = document.querySelector('.drawer-focus');
-  const input = drawer.querySelector('sl-input');
-  const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
-
-  openButton.addEventListener('click', () => drawer.show());
-  closeButton.addEventListener('click', () => drawer.hide());
-
-  drawer.addEventListener('sl-initial-focus', event => {
-    event.preventDefault();
-    input.focus({ preventScroll: true });
-  });
-</script>
-```
-
-```jsx react
-import { useRef, useState } from 'react';
-import { SlButton, SlDrawer, SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const input = useRef(null);
-  const [open, setOpen] = useState(false);
-
-  function handleInitialFocus(event) {
-    event.preventDefault();
-    input.current.focus();
-  }
-
-  return (
-    <>
-      <SlDrawer label="Drawer" open={open} onSlInitialFocus={handleInitialFocus} onSlAfterHide={() => setOpen(false)}>
-        <SlInput ref={input} placeholder="I will have focus when the drawer is opened" />
-        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
-          Close
-        </SlButton>
-      </SlDrawer>
-
-      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
-    </>
-  );
-};
-```
-
-[component-metadata:sl-drawer]

docs/components/dropdown.md

@@ -1,389 +0,0 @@
-# Dropdown
-
-[component-header:sl-dropdown]
-
-Dropdowns expose additional content that "drops down" in a panel.
-
-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) and [select](/components/select)). The API gives you complete control over showing, hiding, and positioning the panel.
-
-```html preview
-<sl-dropdown>
-  <sl-button slot="trigger" caret>Dropdown</sl-button>
-  <sl-menu>
-    <sl-menu-item>Dropdown Item 1</sl-menu-item>
-    <sl-menu-item>Dropdown Item 2</sl-menu-item>
-    <sl-menu-item>Dropdown Item 3</sl-menu-item>
-    <sl-divider></sl-divider>
-    <sl-menu-item checked>Checked</sl-menu-item>
-    <sl-menu-item disabled>Disabled</sl-menu-item>
-    <sl-divider></sl-divider>
-    <sl-menu-item>
-      Prefix
-      <sl-icon slot="prefix" name="gift"></sl-icon>
-    </sl-menu-item>
-    <sl-menu-item>
-      Suffix Icon
-      <sl-icon slot="suffix" name="heart"></sl-icon>
-    </sl-menu-item>
-  </sl-menu>
-</sl-dropdown>
-```
-
-```jsx react
-import { 
-  SlButton,
-  SlDivider,
-  SlDropdown,
-  SlIcon,
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlDropdown>
-    <SlButton slot="trigger" caret>Dropdown</SlButton>
-    <SlMenu>
-      <SlMenuItem>Dropdown Item 1</SlMenuItem>
-      <SlMenuItem>Dropdown Item 2</SlMenuItem>
-      <SlMenuItem>Dropdown Item 3</SlMenuItem>
-      <SlDivider />
-      <SlMenuItem checked>Checked</SlMenuItem>
-      <SlMenuItem disabled>Disabled</SlMenuItem>
-      <SlDivider />
-      <SlMenuItem>
-        Prefix
-        <SlIcon slot="prefix" name="gift" />
-      </SlMenuItem>
-      <SlMenuItem>
-        Suffix Icon
-        <SlIcon slot="suffix" name="heart" />
-      </SlMenuItem>
-    </SlMenu>
-  </SlDropdown>  
-);
-```
-
-## Examples
-
-### Getting the Selected Item
-
-When dropdowns are used with [menus](/components/menu), you can listen for the `sl-select` 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 preview
-<div class="dropdown-selection">
-  <sl-dropdown>
-    <sl-button slot="trigger" caret>Edit</sl-button>
-    <sl-menu>
-      <sl-menu-item value="cut">Cut</sl-menu-item>
-      <sl-menu-item value="copy">Copy</sl-menu-item>
-      <sl-menu-item value="paste">Paste</sl-menu-item>
-    </sl-menu>
-  </sl-dropdown>
-</div>
-
-<script>
-  const container = document.querySelector('.dropdown-selection');
-  const dropdown = container.querySelector('sl-dropdown');
-
-  dropdown.addEventListener('sl-select', event => {
-    const selectedItem = event.detail.item;
-    console.log(selectedItem.value);
-  });
-</script>
-```
-
-```jsx react
-import { 
-  SlButton,
-  SlDropdown,
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  function handleSelect(event) {
-    const selectedItem = event.detail.item;
-    console.log(selectedItem.value);
-  }
-
-  return (
-    <SlDropdown>
-      <SlButton slot="trigger" caret>Edit</SlButton>
-      <SlMenu onSlSelect={handleSelect}>
-        <SlMenuItem value="cut">Cut</SlMenuItem>
-        <SlMenuItem value="copy">Copy</SlMenuItem>
-        <SlMenuItem value="paste">Paste</SlMenuItem>
-      </SlMenu>
-    </SlDropdown> 
-  );
-};
-```
-
-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 preview
-<div class="dropdown-selection-alt">
-  <sl-dropdown>
-    <sl-button slot="trigger" caret>Edit</sl-button>
-    <sl-menu>
-      <sl-menu-item value="cut">Cut</sl-menu-item>
-      <sl-menu-item value="copy">Copy</sl-menu-item>
-      <sl-menu-item value="paste">Paste</sl-menu-item>
-    </sl-menu>
-  </sl-dropdown>
-</div>
-
-<script>
-  const container = document.querySelector('.dropdown-selection-alt');
-  const cut = container.querySelector('sl-menu-item[value="cut"]');
-  const copy = container.querySelector('sl-menu-item[value="copy"]');
-  const paste = container.querySelector('sl-menu-item[value="paste"]');
-
-  cut.addEventListener('click', () => console.log('cut'));
-  copy.addEventListener('click', () => console.log('copy'));
-  paste.addEventListener('click', () => console.log('paste'));
-</script>
-```
-
-```jsx react
-import { 
-  SlButton,
-  SlDropdown,
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  function handleCut() {
-    console.log('cut');
-  }
-
-  function handleCopy() {
-    console.log('copy');
-  }
-
-  function handlePaste() {
-    console.log('paste');
-  }
-
-  return (
-    <SlDropdown>
-      <SlButton slot="trigger" caret>Edit</SlButton>
-      <SlMenu>
-        <SlMenuItem onClick={handleCut}>Cut</SlMenuItem>
-        <SlMenuItem onClick={handleCopy}>Copy</SlMenuItem>
-        <SlMenuItem onClick={handlePaste}>Paste</SlMenuItem>
-      </SlMenu>
-    </SlDropdown> 
-  );
-};
-```
-
-### 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 preview
-<sl-dropdown placement="top-start">
-  <sl-button slot="trigger" caret>Edit</sl-button>
-  <sl-menu>
-    <sl-menu-item>Cut</sl-menu-item>
-    <sl-menu-item>Copy</sl-menu-item>
-    <sl-menu-item>Paste</sl-menu-item>
-    <sl-divider></sl-divider>
-    <sl-menu-item>Find</sl-menu-item>
-    <sl-menu-item>Replace</sl-menu-item>
-  </sl-menu>
-</sl-dropdown>
-```
-
-```jsx react
-import { 
-  SlButton,
-  SlDivider,
-  SlDropdown,
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlDropdown placement="top-start">
-    <SlButton slot="trigger" caret>Edit</SlButton>
-    <SlMenu>
-      <SlMenuItem>Cut</SlMenuItem>
-      <SlMenuItem>Copy</SlMenuItem>
-      <SlMenuItem>Paste</SlMenuItem>
-      <SlDivider />
-      <SlMenuItem>Find</SlMenuItem>
-      <SlMenuItem>Replace</SlMenuItem>
-    </SlMenu>
-  </SlDropdown> 
-);
-```
-
-### Distance
-
-The distance from the panel to the trigger can be customized using the `distance` attribute. This value is specified in pixels.
-
-```html preview
-<sl-dropdown distance="30">
-  <sl-button slot="trigger" caret>Edit</sl-button>
-  <sl-menu>
-    <sl-menu-item>Cut</sl-menu-item>
-    <sl-menu-item>Copy</sl-menu-item>
-    <sl-menu-item>Paste</sl-menu-item>
-    <sl-divider></sl-divider>
-    <sl-menu-item>Find</sl-menu-item>
-    <sl-menu-item>Replace</sl-menu-item>
-  </sl-menu>
-</sl-dropdown>
-```
-
-```jsx react
-import { 
-  SlButton,
-  SlDivider,
-  SlDropdown,
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlDropdown distance={30}>
-    <SlButton slot="trigger" caret>Edit</SlButton>
-    <SlMenu>
-      <SlMenuItem>Cut</SlMenuItem>
-      <SlMenuItem>Copy</SlMenuItem>
-      <SlMenuItem>Paste</SlMenuItem>
-      <SlDivider />
-      <SlMenuItem>Find</SlMenuItem>
-      <SlMenuItem>Replace</SlMenuItem>
-    </SlMenu>
-  </SlDropdown> 
-);
-```
-
-### Skidding
-
-The offset of the panel along the trigger can be customized using the `skidding` attribute. This value is specified in pixels.
-
-```html preview
-<sl-dropdown skidding="30">
-  <sl-button slot="trigger" caret>Edit</sl-button>
-  <sl-menu>
-    <sl-menu-item>Cut</sl-menu-item>
-    <sl-menu-item>Copy</sl-menu-item>
-    <sl-menu-item>Paste</sl-menu-item>
-    <sl-divider></sl-divider>
-    <sl-menu-item>Find</sl-menu-item>
-    <sl-menu-item>Replace</sl-menu-item>
-  </sl-menu>
-</sl-dropdown>
-```
-
-```jsx react
-import { 
-  SlButton,
-  SlDivider,
-  SlDropdown,
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlDropdown skidding={30}>
-    <SlButton slot="trigger" caret>Edit</SlButton>
-    <SlMenu>
-      <SlMenuItem>Cut</SlMenuItem>
-      <SlMenuItem>Copy</SlMenuItem>
-      <SlMenuItem>Paste</SlMenuItem>
-      <SlDivider />
-      <SlMenuItem>Find</SlMenuItem>
-      <SlMenuItem>Replace</SlMenuItem>
-    </SlMenu>
-  </SlDropdown> 
-);
-```
-
-### 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, 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 preview
-<div class="dropdown-hoist">
-  <sl-dropdown>
-    <sl-button slot="trigger" caret>No Hoist</sl-button>
-    <sl-menu>
-      <sl-menu-item>Item 1</sl-menu-item>
-      <sl-menu-item>Item 2</sl-menu-item>
-      <sl-menu-item>Item 3</sl-menu-item>
-    </sl-menu>
-  </sl-dropdown>
-
-  <sl-dropdown hoist>
-    <sl-button slot="trigger" caret>Hoist</sl-button>
-    <sl-menu>
-      <sl-menu-item>Item 1</sl-menu-item>
-      <sl-menu-item>Item 2</sl-menu-item>
-      <sl-menu-item>Item 3</sl-menu-item>
-    </sl-menu>
-  </sl-dropdown>
-</div>
-
-<style>
-  .dropdown-hoist {
-    border: solid 2px var(--sl-panel-border-color);
-    padding: var(--sl-spacing-medium);
-    overflow: hidden;
-  }
-</style>
-```
-
-```jsx react
-import { 
-  SlButton,
-  SlDivider,
-  SlDropdown,
-  SlIcon,
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .dropdown-hoist {
-    border: solid 2px var(--sl-panel-border-color);
-    padding: var(--sl-spacing-medium);
-    overflow: hidden;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="dropdown-hoist">
-      <SlDropdown>
-        <SlButton slot="trigger" caret>No Hoist</SlButton>
-        <SlMenu>
-          <SlMenuItem>Item 1</SlMenuItem>
-          <SlMenuItem>Item 2</SlMenuItem>
-          <SlMenuItem>Item 3</SlMenuItem>
-        </SlMenu>
-      </SlDropdown>
-
-      <SlDropdown hoist>
-        <SlButton slot="trigger" caret>Hoist</SlButton>
-        <SlMenu>
-          <SlMenuItem>Item 1</SlMenuItem>
-          <SlMenuItem>Item 2</SlMenuItem>
-          <SlMenuItem>Item 3</SlMenuItem>
-        </SlMenu>
-      </SlDropdown>
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-[component-metadata:sl-dropdown]

docs/components/format-bytes.md

@@ -1,126 +0,0 @@
-# Format Bytes
-
-[component-header:sl-format-bytes]
-
-Formats a number as a human readable bytes value.
-
-```html preview
-<div class="format-bytes-overview">
-  The file is <sl-format-bytes value="1000"></sl-format-bytes> in size.
-  <br><br>
-  <sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input>  
-</div>
-
-<script>
-  const container = document.querySelector('.format-bytes-overview');
-  const formatter = container.querySelector('sl-format-bytes');
-  const input = container.querySelector('sl-input');
-
-  input.addEventListener('sl-input', () => formatter.value = input.value || 0);
-</script>
-```
-
-
-```jsx react
-import { useState } from 'react';
-import { 
-  SlButton, 
-  SlFormatBytes, 
-  SlInput 
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [value, setValue] = useState(1000);
-
-  return (
-    <>
-      The file is <SlFormatBytes value={value} /> in size.
-      <br /><br />
-      <SlInput 
-        type="number" 
-        value={value}
-        label="Number to Format" 
-        style={{ maxWidth: '180px' }}
-        onSlInput={event => setValue(event.target.value)}
-      />
-    </>
-  );
-};
-```
-
-## Examples
-
-### Formatting Bytes
-
-Set the `value` attribute to a number to get the value in bytes.
-
-```html preview
-<sl-format-bytes value="12"></sl-format-bytes><br>
-<sl-format-bytes value="1200"></sl-format-bytes><br>
-<sl-format-bytes value="1200000"></sl-format-bytes><br>
-<sl-format-bytes value="1200000000"></sl-format-bytes>
-```
-
-
-```jsx react
-import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlFormatBytes value="12" /><br />
-    <SlFormatBytes value="1200" /><br />
-    <SlFormatBytes value="1200000" /><br />
-    <SlFormatBytes value="1200000000" />
-  </>
-);
-```
-
-### Formatting Bits
-
-To get the value in bits, set the `unit` attribute to `bits`.
-
-```html preview
-<sl-format-bytes value="12" unit="bits"></sl-format-bytes><br>
-<sl-format-bytes value="1200" unit="bits"></sl-format-bytes><br>
-<sl-format-bytes value="1200000" unit="bits"></sl-format-bytes><br>
-<sl-format-bytes value="1200000000" unit="bits"></sl-format-bytes>
-```
-
-```jsx react
-import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlFormatBytes value="12" unit="bits" /><br />
-    <SlFormatBytes value="1200" unit="bits" /><br />
-    <SlFormatBytes value="1200000" unit="bits" /><br />
-    <SlFormatBytes value="1200000000" unit="bits" />
-  </>
-);
-```
-
-### Localization
-
-Use the `lang` attribute to set the number formatting locale.
-
-```html preview
-<sl-format-bytes value="12" lang="de"></sl-format-bytes><br>
-<sl-format-bytes value="1200" lang="de"></sl-format-bytes><br>
-<sl-format-bytes value="1200000" lang="de"></sl-format-bytes><br>
-<sl-format-bytes value="1200000000" lang="de"></sl-format-bytes>
-```
-
-```jsx react
-import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlFormatBytes value="12" lang="de" /><br />
-    <SlFormatBytes value="1200" lang="de" /><br />
-    <SlFormatBytes value="1200000" lang="de" /><br />
-    <SlFormatBytes value="1200000000" lang="de" />
-  </>
-);
-```
-
-[component-metadata:sl-format-bytes]

docs/components/format-date.md

@@ -1,120 +0,0 @@
-# Format Date
-
-[component-header:sl-format-date]
-
-Formats a date/time using the specified locale and options.
-
-Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). No language packs are required.
-
-```html preview
-<!-- Shoelace 2 release date 🎉 -->
-<sl-format-date date="2020-07-15T09:17:00-04:00"></sl-format-date>
-```
-
-```jsx react
-import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlFormatDate date="2020-07-15T09:17:00-04:00" />
-);
-```
-
-The `date` attribute determines the date/time to use when formatting. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript. If omitted, the current date/time will be assumed.
-
-?> When using strings, avoid ambiguous dates such as `03/04/2020` which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) to ensure the date will be parsed properly by all clients.
-
-## Examples
-
-### Date & Time Formatting
-
-Formatting options are based on those found in the [`Intl.DateTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). When formatting options are provided, the date/time will be formatted according to those values. When no formatting options are provided, a localized, numeric date will be displayed instead.
-
-```html preview
-<!-- Human-readable date -->
-<sl-format-date month="long" day="numeric" year="numeric"></sl-format-date><br>
-
-<!-- Time -->
-<sl-format-date hour="numeric" minute="numeric"></sl-format-date><br>
-
-<!-- Weekday -->
-<sl-format-date weekday="long"></sl-format-date><br>
-
-<!-- Month -->
-<sl-format-date month="long"></sl-format-date><br>
-
-<!-- Year -->
-<sl-format-date year="numeric"></sl-format-date><br>
-
-<!-- No formatting options -->
-<sl-format-date></sl-format-date>
-```
-
-```jsx react
-import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    {/* Human-readable date */}
-    <SlFormatDate month="long" day="numeric" year="numeric" /><br />
-
-    {/* Time */}
-    <SlFormatDate hour="numeric" minute="numeric" /><br />
-
-    {/* Weekday */}
-    <SlFormatDate weekday="long" /><br />
-
-    {/* Month */}
-    <SlFormatDate month="long" /><br />
-
-    {/* Year */}
-    <SlFormatDate year="numeric" /><br />
-
-    {/* No formatting options */}
-    <SlFormatDate />
-  </>
-);
-```
-
-### Hour Formatting
-
-By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the `hour-format` attribute to `12` or `24`.
-
-```html preview
-<sl-format-date hour="numeric" minute="numeric" hour-format="12"></sl-format-date><br>
-<sl-format-date hour="numeric" minute="numeric" hour-format="24"></sl-format-date>
-```
-
-```jsx react
-import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlFormatDate hour="numeric" minute="numeric" hour-format="12" /><br />
-    <SlFormatDate hour="numeric" minute="numeric" hour-format="24" />
-  </>
-);
-```
-
-### Localization
-
-Use the `lang` attribute to set the date/time formatting locale.
-
-```html preview
-English: <sl-format-date lang="en"></sl-format-date><br>
-French: <sl-format-date lang="fr"></sl-format-date><br>
-Russian: <sl-format-date lang="ru"></sl-format-date>
-```
-
-```jsx react
-import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    English: <SlFormatDate lang="en" /><br />
-    French: <SlFormatDate lang="fr" /><br />
-    Russian: <SlFormatDate lang="ru" />
-  </>
-);
-```
-
-[component-metadata:sl-format-date]

docs/components/format-number.md

@@ -1,124 +0,0 @@
-# Format Number
-
-[component-header:sl-format-number]
-
-Formats a number using the specified locale and options.
-
-Localization is handled by the browser's [`Intl.NumberFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat). No language packs are required.
-
-```html preview
-<div class="format-number-overview">
-  <sl-format-number value="1000"></sl-format-number> 
-  <br><br>
-  <sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input>  
-</div>
-
-<script>
-  const container = document.querySelector('.format-number-overview');
-  const formatter = container.querySelector('sl-format-number');
-  const input = container.querySelector('sl-input');
-
-  input.addEventListener('sl-input', () => formatter.value = input.value || 0);
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlFormatNumber, SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [value, setValue] = useState(1000);
-
-  return (
-    <>
-      <SlFormatNumber value={value} />
-      <br /><br />
-      <SlInput 
-        type="number" 
-        value={value} 
-        label="Number to Format" 
-        style={{ maxWidth: '180px' }}
-        onSlInput={event => setValue(event.target.value)}
-      />
-    </>
-  );
-};
-```
-
-## Examples
-
-### Percentages
-
-To get the value as a percent, set the `type` attribute to `percent`.
-
-```html preview
-<sl-format-number type="percent" value="0"></sl-format-number><br>
-<sl-format-number type="percent" value="0.25"></sl-format-number><br>
-<sl-format-number type="percent" value="0.50"></sl-format-number><br>
-<sl-format-number type="percent" value="0.75"></sl-format-number><br>
-<sl-format-number type="percent" value="1"></sl-format-number>
-```
-
-```jsx react
-import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlFormatNumber type="percent" value={0} /><br />
-    <SlFormatNumber type="percent" value={0.25} /><br />
-    <SlFormatNumber type="percent" value={0.50} /><br />
-    <SlFormatNumber type="percent" value={0.75} /><br />
-    <SlFormatNumber type="percent" value={1} />  
-  </>
-);
-```
-
-### Localization
-
-Use the `lang` attribute to set the number formatting locale.
-
-```html preview
-English: <sl-format-number value="2000" lang="en" minimum-fraction-digits="2"></sl-format-number><br>
-German: <sl-format-number value="2000" lang="de" minimum-fraction-digits="2"></sl-format-number><br>
-Russian: <sl-format-number value="2000" lang="ru" minimum-fraction-digits="2"></sl-format-number>
-```
-
-```jsx react
-import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    English: <SlFormatNumber value="2000" lang="en" minimum-fraction-digits="2" /><br />
-    German: <SlFormatNumber value="2000" lang="de" minimum-fraction-digits="2" /><br />
-    Russian: <SlFormatNumber value="2000" lang="ru" minimum-fraction-digits="2" />
-  </>
-);
-```
-
-### Currency
-
-To format a number as a monetary value, set the `type` attribute to `currency` and set the `currency` attribute to the desired ISO 4217 currency code. You should also specify `lang` to ensure the the number is formatted correctly for the target locale.
-
-```html preview
-<sl-format-number type="currency" currency="USD" value="2000" lang="en-US"></sl-format-number><br>
-<sl-format-number type="currency" currency="GBP" value="2000" lang="en-GB"></sl-format-number><br>
-<sl-format-number type="currency" currency="EUR" value="2000" lang="de"></sl-format-number><br>
-<sl-format-number type="currency" currency="RUB" value="2000" lang="ru"></sl-format-number><br>
-<sl-format-number type="currency" currency="CNY" value="2000" lang="zh-cn"></sl-format-number>
-```
-
-```jsx react
-import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlFormatNumber type="currency" currency="USD" value="2000" lang="en-US" /><br />
-    <SlFormatNumber type="currency" currency="GBP" value="2000" lang="en-GB" /><br />
-    <SlFormatNumber type="currency" currency="EUR" value="2000" lang="de" /><br />
-    <SlFormatNumber type="currency" currency="RUB" value="2000" lang="ru" /><br />
-    <SlFormatNumber type="currency" currency="CNY" value="2000" lang="zh-cn" />
-  </>
-);
-```
-
-[component-metadata:sl-format-number]

docs/components/icon-button.md

@@ -1,160 +0,0 @@
-# Icon Button
-
-[component-header:sl-icon-button]
-
-Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
-
-For a full list of icons that come bundled with Shoelace, refer to the [icon component](/components/icon).
-
-```html preview
-<sl-icon-button name="gear" label="Settings"></sl-icon-button>
-```
-
-```jsx react
-import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlIconButton name="gear" label="Settings" />
-);
-```
-
-## Examples
-
-### Sizes
-
-Icon buttons inherit their parent element's `font-size`.
-
-```html preview
-<sl-icon-button name="pencil" label="Edit" style="font-size: 1.5rem;"></sl-icon-button>
-<sl-icon-button name="pencil" label="Edit" style="font-size: 2rem;"></sl-icon-button>
-<sl-icon-button name="pencil" label="Edit" style="font-size: 2.5rem;"></sl-icon-button>
-```
-
-```jsx react
-import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '1.5rem' }} />
-    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '2rem' }} />
-    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '2.5rem' }} />
-  </>
-);
-```
-
-### 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 preview
-<div class="icon-button-color">
-  <sl-icon-button name="type-bold" label="Bold"></sl-icon-button>
-  <sl-icon-button name="type-italic" label="Italic"></sl-icon-button>
-  <sl-icon-button name="type-underline" label="Underline"></sl-icon-button>
-</div>
-
-<style>
-  .icon-button-color sl-icon-button::part(base) {
-    color: #b00091;
-  }
-
-  .icon-button-color sl-icon-button::part(base):hover,
-  .icon-button-color sl-icon-button::part(base):focus {
-    color: #c913aa;
-  }
-
-  .icon-button-color sl-icon-button::part(base):active {
-    color: #960077;
-  }
-</style>
-```
-
-```jsx react
-import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .icon-button-color sl-icon-button::part(base) {
-    color: #b00091;
-  }
-
-  .icon-button-color sl-icon-button::part(base):hover,
-  .icon-button-color sl-icon-button::part(base):focus {
-    color: #c913aa;
-  }
-
-  .icon-button-color sl-icon-button::part(base):active {
-    color: #960077;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="icon-button-color">
-      <SlIconButton name="type-bold" label="Bold" />
-      <SlIconButton name="type-italic" label="Italic" />
-      <SlIconButton name="type-underline" label="Underline" />
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-### Link Buttons
-
-Use the `href` attribute to convert the button to a link.
-
-```html preview
-<sl-icon-button name="gear" label="Settings" href="https://example.com" target="_blank"></sl-icon-button>
-```
-
-```jsx react
-import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlIconButton 
-    name="gear" 
-    label="Settings" 
-    href="https://example.com" 
-    target="_blank"
-  />
-);
-```
-
-### Icon Button with Tooltip
-
-Wrap a tooltip around an icon button to provide contextual information to the user.
-
-```html preview
-<sl-tooltip content="Settings">
-  <sl-icon-button name="gear" label="Settings"></sl-icon-button>
-</sl-tooltip>
-```
-
-```jsx react
-import { SlIconButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlTooltip content="Settings">
-    <SlIconButton name="gear" label="Settings" />
-  </SlTooltip>
-);
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable the icon button.
-
-```html preview
-<sl-icon-button name="gear" label="Settings" disabled></sl-icon-button>
-```
-
-```jsx react
-import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlIconButton name="gear" label="Settings" disabled />
-);
-```
-
-[component-metadata:sl-icon-button]

docs/components/icon.md

@@ -1,711 +0,0 @@
-# Icon
-
-[component-header:sl-icon]
-
-Icons are symbols that can be used to represent various options within an application.
-
-Shoelace 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.
-
-Click or tap on an icon below to copy its name and use it like this.
-
-```html
-<sl-icon name="icon-name-here"></sl-icon>
-```
-
-<div class="icon-search">
-  <div class="icon-search-controls">
-    <sl-input placeholder="Search Icons" clearable>
-      <sl-icon slot="prefix" name="search"></sl-icon>
-    </sl-input>
-    <sl-select value="outline">
-      <sl-menu-item value="outline">Outlined</sl-menu-item>
-      <sl-menu-item value="fill">Filled</sl-menu-item>
-      <sl-menu-item value="all">All icons</sl-menu-item>
-    </sl-select>
-  </div>
-  <div class="icon-list"></div>
-  <input type="text" class="icon-copy-input">
-</div>
-
-## Examples
-
-### 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 preview
-<div style="font-size: 32px;">
-  <sl-icon name="exclamation-triangle"></sl-icon>
-  <sl-icon name="archive"></sl-icon>
-  <sl-icon name="battery-charging"></sl-icon>
-  <sl-icon name="bell"></sl-icon>
-  <sl-icon name="clock"></sl-icon>
-  <sl-icon name="cloud"></sl-icon>
-  <sl-icon name="download"></sl-icon>
-  <sl-icon name="file-earmark"></sl-icon>
-  <sl-icon name="flag"></sl-icon>
-  <sl-icon name="heart"></sl-icon>
-  <sl-icon name="image"></sl-icon>
-  <sl-icon name="lightning"></sl-icon>
-  <sl-icon name="mic"></sl-icon>
-  <sl-icon name="search"></sl-icon>
-  <sl-icon name="star"></sl-icon>
-  <sl-icon name="trash"></sl-icon>
-</div>
-```
-
-```jsx react
-import { SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <div style={{ fontSize: '32px' }}>
-    <SlIcon name="exclamation-triangle" />
-    <SlIcon name="archive" />
-    <SlIcon name="battery-charging" />
-    <SlIcon name="bell" />
-    <SlIcon name="clock" />
-    <SlIcon name="cloud" />
-    <SlIcon name="download" />
-    <SlIcon name="file-earmark" />
-    <SlIcon name="flag" />
-    <SlIcon name="heart" />
-    <SlIcon name="image" />
-    <SlIcon name="lightning" />
-    <SlIcon name="mic" />
-    <SlIcon name="search" />
-    <SlIcon name="star" />
-    <SlIcon name="trash" />
-  </div>  
-);
-```
-
-### Labels
-
-For non-decorative icons, use the `label` attribute to announce it to assistive devices.
-
-```html preview
-<sl-icon name="star-fill" label="Add to favorites"></sl-icon>
-```
-
-```jsx react
-import { SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlIcon name="star-fill" label="Add to favorites" />
-);
-```
-
-### 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 preview
-<sl-icon src="https://shoelace.style/assets/images/shoe.svg" style="font-size: 8rem;"></sl-icon>
-```
-
-
-```jsx react
-import { SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></SlIcon>
-);
-```
-
-## Icon Libraries
-
-You can register additional icons to use with the `<sl-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.
-
-Shoelace 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 Shoelace 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 `<sl-icon>` element.
-
-```html
-<!-- This will show the icon located at /assets/icons/smile.svg -->
-<sl-icon library="my-icons" name="smile"></sl-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 preview
-<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;">
-  <sl-icon library="boxicons" name="bx-bot"></sl-icon>
-  <sl-icon library="boxicons" name="bx-cookie"></sl-icon>
-  <sl-icon library="boxicons" name="bx-joystick"></sl-icon>
-  <sl-icon library="boxicons" name="bx-save"></sl-icon>
-  <sl-icon library="boxicons" name="bx-server"></sl-icon>
-  <sl-icon library="boxicons" name="bx-wine"></sl-icon>
-  <br>
-  <sl-icon library="boxicons" name="bxs-bot"></sl-icon>
-  <sl-icon library="boxicons" name="bxs-cookie"></sl-icon>
-  <sl-icon library="boxicons" name="bxs-joystick"></sl-icon>
-  <sl-icon library="boxicons" name="bxs-save"></sl-icon>
-  <sl-icon library="boxicons" name="bxs-server"></sl-icon>
-  <sl-icon library="boxicons" name="bxs-wine"></sl-icon>
-  <br>
-  <sl-icon library="boxicons" name="bxl-apple"></sl-icon>
-  <sl-icon library="boxicons" name="bxl-chrome"></sl-icon>
-  <sl-icon library="boxicons" name="bxl-edge"></sl-icon>
-  <sl-icon library="boxicons" name="bxl-firefox"></sl-icon>
-  <sl-icon library="boxicons" name="bxl-opera"></sl-icon>
-  <sl-icon library="boxicons" name="bxl-microsoft"></sl-icon>
-</div>
-```
-
-### Feather Icons
-
-This will register the [Feather Icons](https://feathericons.com/) library using the jsDelivr CDN.
-
-Icons in this library are licensed under the [MIT License](https://github.com/feathericons/feather/blob/master/LICENSE).
-
-```html preview
-<div style="font-size: 24px;">
-  <sl-icon library="feather" name="feather"></sl-icon>
-  <sl-icon library="feather" name="pie-chart"></sl-icon>
-  <sl-icon library="feather" name="settings"></sl-icon>
-  <sl-icon library="feather" name="map-pin"></sl-icon>
-  <sl-icon library="feather" name="printer"></sl-icon>
-  <sl-icon library="feather" name="shopping-cart"></sl-icon>
-</div>
-
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('feather', {
-    resolver: name => `https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/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 preview
-<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;">
-  <sl-icon library="fa" name="far-bell"></sl-icon>
-  <sl-icon library="fa" name="far-comment"></sl-icon>
-  <sl-icon library="fa" name="far-hand-point-right"></sl-icon>
-  <sl-icon library="fa" name="far-hdd"></sl-icon>
-  <sl-icon library="fa" name="far-heart"></sl-icon>
-  <sl-icon library="fa" name="far-star"></sl-icon>
-  <br>
-  <sl-icon library="fa" name="fas-archive"></sl-icon>
-  <sl-icon library="fa" name="fas-book"></sl-icon>
-  <sl-icon library="fa" name="fas-chess-knight"></sl-icon>
-  <sl-icon library="fa" name="fas-dice"></sl-icon>
-  <sl-icon library="fa" name="fas-pizza-slice"></sl-icon>
-  <sl-icon library="fa" name="fas-scroll"></sl-icon>
-  <br>
-  <sl-icon library="fa" name="fab-apple"></sl-icon>
-  <sl-icon library="fa" name="fab-chrome"></sl-icon>
-  <sl-icon library="fa" name="fab-edge"></sl-icon>
-  <sl-icon library="fa" name="fab-firefox"></sl-icon>
-  <sl-icon library="fa" name="fab-opera"></sl-icon>
-  <sl-icon library="fa" name="fab-microsoft"></sl-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 preview
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('heroicons', {
-    resolver: name => `https://cdn.jsdelivr.net/npm/heroicons@0.4.2/outline/${name}.svg`
-  });
-</script>
-
-<div style="font-size: 24px;">
-  <sl-icon library="heroicons" name="chat"></sl-icon>
-  <sl-icon library="heroicons" name="cloud"></sl-icon>
-  <sl-icon library="heroicons" name="cog"></sl-icon>
-  <sl-icon library="heroicons" name="document-text"></sl-icon>
-  <sl-icon library="heroicons" name="gift"></sl-icon>
-  <sl-icon library="heroicons" name="volume-up"></sl-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 preview
-<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;">
-  <sl-icon library="iconoir" name="check-circled-outline"></sl-icon>
-  <sl-icon library="iconoir" name="drawer"></sl-icon>
-  <sl-icon library="iconoir" name="keyframes"></sl-icon>
-  <sl-icon library="iconoir" name="headset-help"></sl-icon>
-  <sl-icon library="iconoir" name="color-picker"></sl-icon>
-  <sl-icon library="iconoir" name="wifi"></sl-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 preview
-<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;">
-  <sl-icon library="ionicons" name="alarm"></sl-icon>
-  <sl-icon library="ionicons" name="american-football"></sl-icon>
-  <sl-icon library="ionicons" name="bug"></sl-icon>
-  <sl-icon library="ionicons" name="chatbubble"></sl-icon>
-  <sl-icon library="ionicons" name="settings"></sl-icon>
-  <sl-icon library="ionicons" name="warning"></sl-icon>
-  <br>
-  <sl-icon library="ionicons" name="alarm-outline"></sl-icon>
-  <sl-icon library="ionicons" name="american-football-outline"></sl-icon>
-  <sl-icon library="ionicons" name="bug-outline"></sl-icon>
-  <sl-icon library="ionicons" name="chatbubble-outline"></sl-icon>
-  <sl-icon library="ionicons" name="settings-outline"></sl-icon>
-  <sl-icon library="ionicons" name="warning-outline"></sl-icon>
-  <br>
-  <sl-icon library="ionicons" name="alarm-sharp"></sl-icon>
-  <sl-icon library="ionicons" name="american-football-sharp"></sl-icon>
-  <sl-icon library="ionicons" name="bug-sharp"></sl-icon>
-  <sl-icon library="ionicons" name="chatbubble-sharp"></sl-icon>
-  <sl-icon library="ionicons" name="settings-sharp"></sl-icon>
-  <sl-icon library="ionicons" name="warning-sharp"></sl-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 preview
-<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;">
-  <sl-icon library="jam" name="calendar"></sl-icon>
-  <sl-icon library="jam" name="camera"></sl-icon>
-  <sl-icon library="jam" name="filter"></sl-icon>
-  <sl-icon library="jam" name="leaf"></sl-icon>
-  <sl-icon library="jam" name="picture"></sl-icon>
-  <sl-icon library="jam" name="set-square"></sl-icon>
-  <br>
-  <sl-icon library="jam" name="calendar-f"></sl-icon>
-  <sl-icon library="jam" name="camera-f"></sl-icon>
-  <sl-icon library="jam" name="filter-f"></sl-icon>
-  <sl-icon library="jam" name="leaf-f"></sl-icon>
-  <sl-icon library="jam" name="picture-f"></sl-icon>
-  <sl-icon library="jam" name="set-square-f"></sl-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 preview
-<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;">
-  <sl-icon library="material" name="notifications"></sl-icon>
-  <sl-icon library="material" name="email"></sl-icon>
-  <sl-icon library="material" name="delete"></sl-icon>
-  <sl-icon library="material" name="volume_up"></sl-icon>
-  <sl-icon library="material" name="settings"></sl-icon>
-  <sl-icon library="material" name="shopping_basket"></sl-icon>
-  <br>
-  <sl-icon library="material" name="notifications_round"></sl-icon>
-  <sl-icon library="material" name="email_round"></sl-icon>
-  <sl-icon library="material" name="delete_round"></sl-icon>
-  <sl-icon library="material" name="volume_up_round"></sl-icon>
-  <sl-icon library="material" name="settings_round"></sl-icon>
-  <sl-icon library="material" name="shopping_basket_round"></sl-icon>
-  <br>
-  <sl-icon library="material" name="notifications_sharp"></sl-icon>
-  <sl-icon library="material" name="email_sharp"></sl-icon>
-  <sl-icon library="material" name="delete_sharp"></sl-icon>
-  <sl-icon library="material" name="volume_up_sharp"></sl-icon>
-  <sl-icon library="material" name="settings_sharp"></sl-icon>
-  <sl-icon library="material" name="shopping_basket_sharp"></sl-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 preview
-<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;">
-  <sl-icon library="remixicon" name="business/cloud-line"></sl-icon>
-  <sl-icon library="remixicon" name="design/brush-line"></sl-icon>
-  <sl-icon library="remixicon" name="business/pie-chart-line"></sl-icon>
-  <sl-icon library="remixicon" name="development/bug-line"></sl-icon>
-  <sl-icon library="remixicon" name="media/image-line"></sl-icon>
-  <sl-icon library="remixicon" name="system/alert-line"></sl-icon>
-  <br>
-  <sl-icon library="remixicon" name="business/cloud-fill"></sl-icon>
-  <sl-icon library="remixicon" name="design/brush-fill"></sl-icon>
-  <sl-icon library="remixicon" name="business/pie-chart-fill"></sl-icon>
-  <sl-icon library="remixicon" name="development/bug-fill"></sl-icon>
-  <sl-icon library="remixicon" name="media/image-fill"></sl-icon>
-  <sl-icon library="remixicon" name="system/alert-fill"></sl-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 preview
-<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;">
-  <sl-icon library="unicons" name="clock"></sl-icon>
-  <sl-icon library="unicons" name="graph-bar"></sl-icon>
-  <sl-icon library="unicons" name="padlock"></sl-icon>
-  <sl-icon library="unicons" name="polygon"></sl-icon>
-  <sl-icon library="unicons" name="rocket"></sl-icon>
-  <sl-icon library="unicons" name="star"></sl-icon>
-  <br>
-  <sl-icon library="unicons" name="clock-s"></sl-icon>
-  <sl-icon library="unicons" name="graph-bar-s"></sl-icon>
-  <sl-icon library="unicons" name="padlock-s"></sl-icon>
-  <sl-icon library="unicons" name="polygon-s"></sl-icon>
-  <sl-icon library="unicons" name="rocket-s"></sl-icon>  
-  <sl-icon library="unicons" name="star-s"></sl-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 `<sl-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>
-```
-
-### Customizing the System Library
-
-The system library contains only the icons used internally by Shoelace 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 Shoelace 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 Shoelace.
-
-```html
-<script type="module">
-  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
-
-  registerIconLibrary('system', {
-    resolver: name => `/path/to/custom/icons/${name}.svg`
-  });
-</script>
-```
-
-<!-- Supporting scripts and styles for the search utility -->
-<script>
-  fetch('/dist/assets/icons/icons.json')
-    .then(res => res.json())  
-    .then(icons => {
-      const container = document.querySelector('.icon-search');
-      const input = container.querySelector('sl-input');
-      const select = container.querySelector('sl-select');
-      const copyInput = container.querySelector('.icon-copy-input');
-      const loader = container.querySelector('.icon-loader');
-      const list = container.querySelector('.icon-list');
-      const queue = [];
-      let inputTimeout;
-
-      // Generate icons
-      icons.map(i => {
-        const item = document.createElement('div');
-        item.classList.add('icon-list-item');
-        item.setAttribute('data-name', i.name);
-        item.setAttribute('data-terms', [i.name, i.title, ...(i.tags || []), ...(i.categories || [])].join(' '));
-        item.innerHTML = `
-          <svg width="1em" height="1em" fill="currentColor">
-            <use xlink:href="/assets/icons/sprite.svg#${i.name}"></use>
-          </svg>      
-        `;
-
-        const tooltip = document.createElement('sl-tooltip');
-        tooltip.content = i.name;
-        
-        tooltip.appendChild(item);
-        list.appendChild(tooltip);
-
-        item.addEventListener('click', () => {
-          copyInput.value = i.name;
-          copyInput.select();
-          document.execCommand('copy');
-          tooltip.content = 'Copied!';
-          setTimeout(() => tooltip.content = i.name, 1000);
-        });
-      });
-
-      // Filter as the user types
-      input.addEventListener('sl-input', () => {
-        clearTimeout(inputTimeout);
-        inputTimeout = setTimeout(() => {
-          [...list.querySelectorAll('.icon-list-item')].map(item => {
-            const filter = input.value.toLowerCase();
-            if (filter === '') {
-              item.hidden = false;
-            } else {
-              const terms = item.getAttribute('data-terms').toLowerCase();
-              item.hidden = terms.indexOf(filter) < 0;
-            }
-          });
-        }, 250);
-      });
-
-      // Sort by type and remember preference
-      const iconType = localStorage.getItem('sl-icon:type') || 'outline';
-      select.value = iconType;
-      list.setAttribute('data-type', select.value);
-      select.addEventListener('sl-change', () => {
-        list.setAttribute('data-type', select.value);
-        localStorage.setItem('sl-icon:type', select.value);
-      });
-    });
-</script>
-
-<style>
-  .icon-search {
-    border: solid 1px var(--sl-panel-border-color);
-    border-radius: var(--sl-border-radius-medium);
-    padding: var(--sl-spacing-medium);
-  }
-
-  .icon-search [hidden] {
-    display: none;
-  }
-
-  .icon-search-controls {
-    display: flex;
-  }
-
-  .icon-search-controls sl-input {
-    flex: 1 1 auto;
-  }
-
-  .icon-search-controls sl-select {
-    width: 10rem;
-    flex: 0 0 auto;
-    margin-left: 1rem;
-  }
-
-  .icon-loader {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 30vh;
-  }
-
-  .icon-list {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    position: relative;
-    margin-top: 1rem;
-  }
-
-  .icon-loader[hidden],
-  .icon-list[hidden] {
-    display: none;
-  }
-
-  .icon-list-item {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--sl-border-radius-medium);
-    font-size: 24px;
-    width: 2em;
-    height: 2em;
-    margin: 0 auto;
-    cursor: copy;
-    transition: var(--sl-transition-medium) all;
-  }
-
-  .icon-list-item:hover {
-    background-color: var(--sl-color-primary-50);
-    color: var(--sl-color-primary-600);
-  }
-
-  .icon-list[data-type="outline"] .icon-list-item[data-name$="-fill"] {
-    display: none;
-  }
-
-  .icon-list[data-type="fill"] .icon-list-item:not([data-name$="-fill"]) {
-    display: none;
-  }
-
-  .icon-copy-input {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  @media screen and (max-width: 1000px) {
-    .icon-list {
-      grid-template-columns: repeat(8, 1fr);
-    }
-
-    .icon-list-item {
-      font-size: 20px;
-    }
-
-    .icon-search-controls {
-      display: block;
-    }
-
-    .icon-search-controls sl-select {
-      width: auto;
-      margin: 1rem 0 0 0;
-    }
-  }
-
-  @media screen and (max-width: 500px) {
-    .icon-list {
-      grid-template-columns: repeat(4, 1fr);
-    }    
-  }
-</style>
-
-[component-metadata:sl-icon]

docs/components/image-comparer.md

@@ -1,51 +0,0 @@
-# Image Comparer
-
-[component-header:sl-image-comparer]
-
-Compare visual differences between similar photos with a sliding panel.
-
-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 preview
-<sl-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.">
-</sl-image-comparer>
-```
-
-```jsx react
-import { SlImageComparer } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlImageComparer>
-    <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." />
-  </SlImageComparer>
-);
-```
-
-## Examples
-
-### Initial Position
-
-Use the `position` attribute to set the initial position of the slider. This is a percentage from `0` to `100`.
-
-```html preview
-<sl-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.">
-</sl-image-comparer>
-```
-
-```jsx react
-import { SlImageComparer } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlImageComparer 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." />
-  </SlImageComparer>
-);
-```
-
-[component-metadata:sl-image-comparer]

docs/components/include.md

@@ -1,47 +0,0 @@
-# Include
-
-[component-header:sl-include]
-
-Includes give you the power to embed external HTML files into the page.
-
-Included files are asynchronously requested using `window.fetch()`. Requests are cached, so the same file can be included multiple times, but only one request will be made.
-
-The included content will be inserted into the `<sl-include>` element's default slot so it can be easily accessed and styled through the light DOM.
-
-```html preview
-<sl-include src="https://shoelace.style/assets/examples/include.html"></sl-include>
-```
-
-```jsx react
-import { SlInclude } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlInclude src="https://shoelace.style/assets/examples/include.html" />
-);
-```
-
-## Examples
-
-### Listening for Events
-
-When an include file loads successfully, the `sl-load` event will be emitted. You can listen for this event to add custom loading logic to your includes.
-
-If the request fails, the `sl-error` event will be emitted. In this case, `event.detail.status` will contain the resulting HTTP status code of the request, e.g. 404 (not found).
-
-```html
-<sl-include src="https://shoelace.style/assets/examples/include.html"></sl-include>
-
-<script>
-  const include = document.querySelector('sl-include');
-  
-  include.addEventListener('sl-load', () => {
-    console.log('Success');
-  });
-
-  include.addEventListener('sl-error', event => {
-    console.log('Error', event.detail.status);
-  });
-</script>
-```
-
-[component-metadata:sl-include]

docs/components/input.md

@@ -1,283 +0,0 @@
-# Input
-
-[component-header:sl-input]
-
-Inputs collect data from the user.
-
-```html preview
-<sl-input></sl-input>
-```
-
-```jsx react
-import { SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlInput />
-);
-```
-
-?> 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
-
-### Placeholders
-
-Use the `placeholder` attribute to add a placeholder.
-
-```html preview
-<sl-input placeholder="Type something"></sl-input>
-```
-
-```jsx react
-import { SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlInput placeholder="Type something" />
-);
-```
-
-### Clearable
-
-Add the `clearable` attribute to add a clear button when the input has content.
-
-```html preview
-<sl-input placeholder="Clearable" clearable></sl-input>
-```
-
-```jsx react
-import { SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlInput placeholder="Clearable" clearable />
-);
-```
-
-### Toggle Password
-
-Add the `toggle-password` attribute to add a toggle button that will show the password when activated.
-
-```html preview
-<sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input>
-<br>
-<sl-input type="password" placeholder="Password Toggle" size="medium" toggle-password></sl-input>
-<br>
-<sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>
-```
-
-```jsx react
-import { SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlInput type="password" placeholder="Password Toggle" size="small" toggle-password />
-    <br />
-    <SlInput type="password" placeholder="Password Toggle" size="medium" toggle-password />
-    <br />
-    <SlInput type="password" placeholder="Password Toggle" size="large" toggle-password />  
-  </>
-);
-```
-
-### Filled Inputs
-
-Add the `filled` attribute to draw a filled input.
-
-```html preview
-<sl-input placeholder="Type something" filled></sl-input>
-```
-
-```jsx react
-import { SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlInput placeholder="Type something" filled />
-);
-```
-
-### Pill
-
-Use the `pill` attribute to give inputs rounded edges.
-
-```html preview
-<sl-input placeholder="Small" size="small" pill></sl-input>
-<br>
-<sl-input placeholder="Medium" size="medium" pill></sl-input>
-<br>
-<sl-input placeholder="Large" size="large" pill></sl-input>
-```
-
-```jsx react
-import { SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlInput placeholder="Small" size="small" pill />
-    <br />
-    <SlInput placeholder="Medium" size="medium" pill />
-    <br />
-    <SlInput placeholder="Large" size="large" pill />
-  </>
-);
-```
-
-### Input Types
-
-The `type` attribute controls the type of input the browser renders.
-
-```html preview
-<sl-input type="email" Placeholder="Email"></sl-input>
-<br>
-<sl-input type="number" Placeholder="Number"></sl-input>
-<br>
-<sl-input type="date" Placeholder="Date"></sl-input>
-```
-
-```jsx react
-import { SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlInput type="email" Placeholder="Email" />
-    <br />
-    <SlInput type="number" Placeholder="Number" />
-    <br />
-    <SlInput type="date" Placeholder="Date" />
-  </>
-);
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable an input.
-
-```html preview
-<sl-input placeholder="Disabled" size="small" disabled></sl-input>
-<br>
-<sl-input placeholder="Disabled" size="medium" disabled></sl-input>
-<br>
-<sl-input placeholder="Disabled" size="large" disabled></sl-input>
-```
-
-```jsx react
-import { SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlInput placeholder="Disabled" size="small" disabled />
-    <br />
-    <SlInput placeholder="Disabled" size="medium" disabled />
-    <br />
-    <SlInput placeholder="Disabled" size="large" disabled />
-  </>
-);
-```
-
-### Sizes
-
-Use the `size` attribute to change an input's size.
-
-```html preview
-<sl-input placeholder="Small" size="small"></sl-input>
-<br>
-<sl-input placeholder="Medium" size="medium"></sl-input>
-<br>
-<sl-input placeholder="Large" size="large"></sl-input>
-```
-
-```jsx react
-import { SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlInput placeholder="Small" size="small" />
-    <br />
-    <SlInput placeholder="Medium" size="medium" />
-    <br />
-    <SlInput placeholder="Large" size="large" />
-  </>
-);
-```
-
-### Prefix & Suffix Icons
-
-Use the `prefix` and `suffix` slots to add icons.
-
-```html preview
-<sl-input placeholder="Small" size="small">
-  <sl-icon name="house" slot="prefix"></sl-icon>
-  <sl-icon name="chat" slot="suffix"></sl-icon>
-</sl-input>
-<br>
-<sl-input placeholder="Medium" size="medium">
-  <sl-icon name="house" slot="prefix"></sl-icon>
-  <sl-icon name="chat" slot="suffix"></sl-icon>
-</sl-input>
-<br>
-<sl-input placeholder="Large" size="large">
-  <sl-icon name="house" slot="prefix"></sl-icon>
-  <sl-icon name="chat" slot="suffix"></sl-icon>
-</sl-input>
-```
-
-```jsx react
-import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlInput placeholder="Small" size="small">
-      <SlIcon name="house" slot="prefix"></SlIcon>
-      <SlIcon name="chat" slot="suffix"></SlIcon>
-    </SlInput>
-    <br />
-    <SlInput placeholder="Medium" size="medium">
-      <SlIcon name="house" slot="prefix"></SlIcon>
-      <SlIcon name="chat" slot="suffix"></SlIcon>
-    </SlInput>
-    <br />
-    <SlInput placeholder="Large" size="large">
-      <SlIcon name="house" slot="prefix"></SlIcon>
-      <SlIcon name="chat" slot="suffix"></SlIcon>
-    </SlInput>
-  </>
-);
-```
-
-### Labels
-
-Use the `label` attribute to give the input an accessible label. For labels that contain HTML, use the `label` slot instead.
-
-```html preview
-<sl-input label="What is your name?"></sl-input>
-```
-
-```jsx react
-import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlInput label="What is your name?" />
-);
-```
-
-### 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 preview
-<sl-input 
-  label="Nickname" 
-  help-text="What would you like people to call you?"
-></sl-input>
-```
-
-```jsx react
-import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlInput 
-    label="Nickname" 
-    help-text="What would you like people to call you?" 
-  />
-);
-```
-
-[component-metadata:sl-input]

docs/components/menu-item.md

@@ -1,255 +0,0 @@
-# Menu Item
-
-[component-header:sl-menu-item]
-
-Menu items provide options for the user to pick from in a menu.
-
-```html preview
-<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);">
-  <sl-menu-item>Option 1</sl-menu-item>
-  <sl-menu-item>Option 2</sl-menu-item>
-  <sl-menu-item>Option 3</sl-menu-item>
-  <sl-divider></sl-divider>
-  <sl-menu-item checked>Checked</sl-menu-item>
-  <sl-menu-item disabled>Disabled</sl-menu-item>
-  <sl-divider></sl-divider>
-  <sl-menu-item>
-    Prefix Icon
-    <sl-icon slot="prefix" name="gift"></sl-icon>
-  </sl-menu-item>
-  <sl-menu-item>
-    Suffix Icon
-    <sl-icon slot="suffix" name="heart"></sl-icon>
-  </sl-menu-item>
-</sl-menu>
-```
-
-```jsx react
-import { 
-  SlDivider,
-  SlIcon,
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlMenu 
-    style={{
-      maxWidth: '200px',
-      border: 'solid 1px var(--sl-panel-border-color)',
-      borderRadius: 'var(--sl-border-radius-medium)'
-    }}
-  >
-    <SlMenuItem>Option 1</SlMenuItem>
-    <SlMenuItem>Option 2</SlMenuItem>
-    <SlMenuItem>Option 3</SlMenuItem>
-    <SlDivider />
-    <SlMenuItem checked>Checked</SlMenuItem>
-    <SlMenuItem disabled>Disabled</SlMenuItem>
-    <SlDivider />
-    <SlMenuItem>
-      Prefix Icon
-      <SlIcon slot="prefix" name="gift" />
-    </SlMenuItem>
-    <SlMenuItem>
-      Suffix Icon
-      <SlIcon slot="suffix" name="heart" />
-    </SlMenuItem>
-  </SlMenu>  
-);
-```
-
-## Examples
-
-### Checked
-
-Use the `checked` attribute to draw menu items in a checked state.
-
-```html preview
-<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);">
-  <sl-menu-item>Option 1</sl-menu-item>
-  <sl-menu-item checked>Option 2</sl-menu-item>
-  <sl-menu-item>Option 3</sl-menu-item>
-</sl-menu>
-```
-
-```jsx react
-import { 
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlMenu 
-    style={{
-      maxWidth: '200px',
-      border: 'solid 1px var(--sl-panel-border-color)',
-      borderRadius: 'var(--sl-border-radius-medium)'
-    }}
-  >
-    <SlMenuItem>Option 1</SlMenuItem>
-    <SlMenuItem checked>Option 2</SlMenuItem>
-    <SlMenuItem>Option 3</SlMenuItem>
-  </SlMenu>  
-);
-```
-
-### Disabled
-
-Add the `disabled` attribute to disable the menu item so it cannot be selected.
-
-```html preview
-<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);">
-  <sl-menu-item>Option 1</sl-menu-item>
-  <sl-menu-item disabled>Option 2</sl-menu-item>
-  <sl-menu-item>Option 3</sl-menu-item>
-</sl-menu>
-```
-
-```jsx react
-import { 
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlMenu 
-    style={{
-      maxWidth: '200px',
-      border: 'solid 1px var(--sl-panel-border-color)',
-      borderRadius: 'var(--sl-border-radius-medium)'
-    }}
-  >
-    <SlMenuItem>Option 1</SlMenuItem>
-    <SlMenuItem disabled>Option 2</SlMenuItem>
-    <SlMenuItem>Option 3</SlMenuItem>
-  </SlMenu>  
-);
-```
-
-### Prefix & Suffix
-
-Add content to the start and end of menu items using the `prefix` and `suffix` slots.
-
-```html preview
-<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);">
-  <sl-menu-item>
-    <sl-icon slot="prefix" name="house"></sl-icon>
-    Home
-  </sl-menu-item>
-
-  <sl-menu-item>
-    <sl-icon slot="prefix" name="envelope"></sl-icon>
-    Messages
-    <sl-badge slot="suffix" variant="primary" pill>12</sl-badge>
-  </sl-menu-item>
-
-  <sl-divider></sl-divider>
-
-  <sl-menu-item>
-    <sl-icon slot="prefix" name="gear"></sl-icon>
-    Settings
-  </sl-menu-item>
-</sl-menu>
-```
-
-```jsx react
-import {
-  SlBadge,
-  SlDivider,
-  SlIcon,
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlMenu 
-    style={{
-      maxWidth: '200px',
-      border: 'solid 1px var(--sl-panel-border-color)',
-      borderRadius: 'var(--sl-border-radius-medium)'
-    }}
-  >
-    <SlMenuItem>
-      <SlIcon slot="prefix" name="house" />
-      Home
-    </SlMenuItem>
-
-    <SlMenuItem>
-      <SlIcon slot="prefix" name="envelope" />
-      Messages
-      <SlBadge slot="suffix" variant="primary" pill>12</SlBadge>
-    </SlMenuItem>
-
-    <SlDivider />
-
-    <SlMenuItem>
-      <SlIcon slot="prefix" name="gear" />
-      Settings
-    </SlMenuItem>
-  </SlMenu>  
-);
-```
-
-### 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 `sl-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 preview
-<sl-menu class="menu-value" style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);">
-  <sl-menu-item value="opt-1">Option 1</sl-menu-item>
-  <sl-menu-item value="opt-2">Option 2</sl-menu-item>
-  <sl-menu-item value="opt-3">Option 3</sl-menu-item>
-</sl-menu>
-
-<script>
-  const menu = document.querySelector('.menu-value');
-
-  menu.addEventListener('sl-select', event => {
-    const item = event.detail.item;
-
-    // Toggle checked state
-    item.checked = !item.checked;
-
-    // Log value
-    console.log(`Selected value: ${item.value}`);
-  });
-</script>
-```
-
-```jsx react
-import { 
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-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 (
-    <SlMenu 
-      style={{
-        maxWidth: '200px',
-        border: 'solid 1px var(--sl-panel-border-color)',
-        borderRadius: 'var(--sl-border-radius-medium)'
-      }}
-      onSlSelect={handleSelect}
-    >
-      <SlMenuItem value="opt-1">Option 1</SlMenuItem>
-      <SlMenuItem value="opt-2">Option 2</SlMenuItem>
-      <SlMenuItem value="opt-3">Option 3</SlMenuItem>
-    </SlMenu>
-  );
-};
-```
-
-[component-metadata:sl-menu-item]

docs/components/menu-label.md

@@ -1,52 +0,0 @@
-# Menu Label
-
-[component-header:sl-menu-label]
-
-Menu labels are used to describe a group of menu items.
-
-```html preview
-<sl-menu
-  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);"
->
-  <sl-menu-label>Fruits</sl-menu-label>
-  <sl-menu-item value="apple">Apple</sl-menu-item>
-  <sl-menu-item value="banana">Banana</sl-menu-item>
-  <sl-menu-item value="orange">Orange</sl-menu-item>
-  <sl-divider></sl-divider>
-  <sl-menu-label>Vegetables</sl-menu-label>
-  <sl-menu-item value="broccoli">Broccoli</sl-menu-item>
-  <sl-menu-item value="carrot">Carrot</sl-menu-item>
-  <sl-menu-item value="zucchini">Zucchini</sl-menu-item>
-</sl-menu>
-```
-
-```jsx react
-import { 
-  SlDivider,
-  SlMenu,
-  SlMenuLabel,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlMenu 
-    style={{
-      maxWidth: '200px',
-      border: 'solid 1px var(--sl-panel-border-color)',
-      borderRadius: 'var(--sl-border-radius-medium)'
-    }}
-  >
-    <SlMenuLabel>Fruits</SlMenuLabel>
-    <SlMenuItem value="apple">Apple</SlMenuItem>
-    <SlMenuItem value="banana">Banana</SlMenuItem>
-    <SlMenuItem value="orange">Orange</SlMenuItem>
-    <SlDivider />
-    <SlMenuLabel>Vegetables</SlMenuLabel>
-    <SlMenuItem value="broccoli">Broccoli</SlMenuItem>
-    <SlMenuItem value="carrot">Carrot</SlMenuItem>
-    <SlMenuItem value="zucchini">Zucchini</SlMenuItem>
-  </SlMenu>  
-);
-```
-
-[component-metadata:sl-menu-label]

docs/components/menu.md

@@ -1,49 +0,0 @@
-# Menu
-
-[component-header:sl-menu]
-
-Menus provide a list of options for the user to choose from.
-
-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 preview
-<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);">
-  <sl-menu-item value="undo">Undo</sl-menu-item>
-  <sl-menu-item value="redo">Redo</sl-menu-item>
-  <sl-divider></sl-divider>
-  <sl-menu-item value="cut">Cut</sl-menu-item>
-  <sl-menu-item value="copy">Copy</sl-menu-item>
-  <sl-menu-item value="paste">Paste</sl-menu-item>
-  <sl-menu-item value="delete">Delete</sl-menu-item>
-</sl-menu>
-```
-
-```jsx react
-import { 
-  SlDivider,
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlMenu 
-    style={{
-      maxWidth: '200px',
-      border: 'solid 1px var(--sl-panel-border-color)',
-      borderRadius: 'var(--sl-border-radius-medium)'
-    }}
-  >
-    <SlMenuItem value="undo">Undo</SlMenuItem>
-    <SlMenuItem value="redo">Redo</SlMenuItem>
-    <SlDivider />
-    <SlMenuItem value="cut">Cut</SlMenuItem>
-    <SlMenuItem value="copy">Copy</SlMenuItem>
-    <SlMenuItem value="paste">Paste</SlMenuItem>
-    <SlMenuItem value="delete">Delete</SlMenuItem>
-  </SlMenu>  
-);
-```
-
-?> 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.
-
-[component-metadata:sl-menu]

docs/components/mutation-observer.md

@@ -1,196 +0,0 @@
-# Mutation Observer
-
-[component-header:sl-mutation-observer]
-
-The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
-
-The mutation observer will report changes to the content it wraps through the `sl-mutation` event. When emitted, a collection of [MutationRecord](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects will be attached to `event.detail` that contains information about how it changed.
-
-```html preview
-<div class="mutation-overview">
-  <sl-mutation-observer attr="variant">
-    <sl-button variant="primary">Click to mutate</sl-button>
-  </sl-mutation-observer>
-
-  <br>
-  👆 Click the button and watch the console
-
-  <script>
-    const container = document.querySelector('.mutation-overview');
-    const mutationObserver = container.querySelector('sl-mutation-observer');
-    const button = container.querySelector('sl-button');
-    const variants = ['primary', 'success', 'neutral', 'warning', 'danger']; 
-    let clicks = 0;
-
-    // Change the button's variant attribute
-    button.addEventListener('click', () => {
-      clicks++;
-      button.setAttribute('variant', variants[clicks % variants.length]);
-    });
-
-    // Log mutations
-    mutationObserver.addEventListener('sl-mutation', event => {
-      console.log(event.detail);
-    });
-  </script>
-
-  <style>
-    .mutation-overview sl-button {
-      margin-bottom: 1rem;
-    }
-  </style>
-</div>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlMutationObserver } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .resize-observer-overview div {
-    display: flex; 
-    border: solid 2px var(--sl-input-border-color); 
-    align-items: center; 
-    justify-content: center;
-    text-align: center;
-    padding: 4rem 2rem;
-  }
-`;
-
-const variants = ['primary', 'success', 'neutral', 'warning', 'danger']; 
-let clicks = 0;
-
-const App = () => {
-  const [variant, setVariant] = useState('primary');
-
-  function handleClick() {
-    clicks++;
-    setVariant(variants[clicks % variants.length]);
-  }
-
-  return (
-    <>
-      <SlMutationObserver 
-        attr="*"
-        onSlMutation={event => console.log(event.detail)}
-      >
-        <SlButton variant={variant} onClick={handleClick}>Click to mutate</SlButton>
-      </SlMutationObserver>
-
-      <style>{css}</style>
-    </>
-  );
-};
-```
-
-?> When you create a mutation observer, you must indicate what changes it should respond to by including at least one of `attr`, `child-list`, or `char-data`. If you don't specify at least one of these attributes, no mutation events will be emitted.
-
-## Examples
-
-### Child List
-
-Use the `child-list` attribute to watch for new child elements that are added or removed.
-
-```html preview
-<div class="mutation-child-list">
-  <sl-mutation-observer child-list>
-    <div class="buttons">
-      <sl-button variant="primary">Add button</sl-button>
-    </div>
-  </sl-mutation-observer>
-
-  👆 Add and remove buttons and watch the console
-
-  <script>
-    const container = document.querySelector('.mutation-child-list');
-    const mutationObserver = container.querySelector('sl-mutation-observer');
-    const buttons = container.querySelector('.buttons');
-    const button = container.querySelector('sl-button[variant="primary"]');
-    let i = 0;
-
-    // Add a button
-    button.addEventListener('click', () => {
-      const button = document.createElement('sl-button');
-      button.textContent = ++i;
-      buttons.append(button);
-    });
-
-    // Remove a button
-    buttons.addEventListener('click', event => {
-      const target = event.target.closest('sl-button:not([variant="primary"])');
-      event.stopPropagation();
-
-      if (target) {
-        target.remove();
-      }
-    });
-
-    // Log mutations
-    mutationObserver.addEventListener('sl-mutation', event => {
-      console.log(event.detail);
-    });
-  </script>
-
-  <style>
-    .mutation-child-list .buttons {
-      display: flex;
-      gap: .25rem;
-      flex-wrap: wrap;
-      margin-bottom: 1rem;
-    }
-  </style>
-</div>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlMutationObserver } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .mutation-child-list .buttons {
-    display: flex;
-    gap: .25rem;
-    flex-wrap: wrap;
-    margin-bottom: 1rem;
-  }
-`;
-
-let buttonCount = 0;
-
-const App = () => {
-  const [buttonIds, setButtonIds] = useState([]);
-
-  function addButton() {
-    setButtonIds([...buttonIds, ++buttonCount]);
-  }
-
-  function removeButton(id) {
-    setButtonIds(buttonIds.filter(i => i !== id));
-  }
-
-  return (
-    <>
-      <div className="mutation-child-list">
-        <SlMutationObserver 
-          child-list 
-          onSlMutation={event => console.log(event.detail)}
-        >
-          <div className="buttons">
-            <SlButton variant="primary" onClick={addButton}>Add button</SlButton>
-            {buttonIds.map(id => (
-              <SlButton key={id} variant="default" onClick={() => removeButton(id)}>
-                {id}
-              </SlButton>
-            ))}
-          </div>
-        </SlMutationObserver>
-      </div>
-
-      👆 Add and remove buttons and watch the console
-      <style>{css}</style>
-    </>
-  );
-};
-```
-
-[component-metadata:sl-mutation-observer]

docs/components/progress-bar.md

@@ -1,144 +0,0 @@
-# Progress Bar
-
-[component-header:sl-progress-bar]
-
-Progress bars are used to show the status of an ongoing operation.
-
-```html preview
-<sl-progress-bar value="50"></sl-progress-bar>
-```
-
-```jsx react
-import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlProgressBar value={50} />
-);
-```
-
-## Examples
-
-### Custom Height
-
-Use the `--height` custom property to set the progress bar's height.
-
-```html preview
-<sl-progress-bar value="50" style="--height: 6px;"></sl-progress-bar>
-```
-
-```jsx react
-import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlProgressBar 
-    value={50}
-    style={{ '--height': '6px' }}
-  />
-);
-```
-
-### Labels
-
-Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.
-
-```html preview
-<sl-progress-bar value="50" label="Upload progress"></sl-progress-bar>
-```
-
-```jsx react
-import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlProgressBar
-    value="50" 
-    label="Upload progress"
-  />
-);
-```
-
-### Showing Values
-
-Use the default slot to show a value.
-
-```html preview
-<sl-progress-bar value="50" class="progress-bar-values">50%</sl-progress-bar>
-
-<br>
-
-<sl-button circle><sl-icon name="dash"></sl-icon></sl-button>
-<sl-button circle><sl-icon name="plus"></sl-icon></sl-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>
-```
-
-```jsx react
-import { useState } from 'react';
-import { 
-  SlButton,
-  SlIcon,
-  SlProgressBar
-} from '@shoelace-style/shoelace/dist/react';
-
-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 (
-    <>
-      <SlProgressBar value={value}>
-        {value}%
-      </SlProgressBar>
-
-      <br />
-
-      <SlButton circle onClick={() => adjustValue(-10)}>
-        <SlIcon name="dash" />
-      </SlButton>
-
-      <SlButton circle onClick={() => adjustValue(10)}>
-        <SlIcon name="plus" />
-      </SlButton>
-    </>
-  );
-};
-```
-
-### 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 preview
-<sl-progress-bar indeterminate></sl-progress-bar>
-```
-
-```jsx react
-import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlProgressBar indeterminate />
-);
-```
-
-[component-metadata:sl-progress-bar]

docs/components/progress-ring.md

@@ -1,178 +0,0 @@
-# Progress Ring
-
-[component-header:sl-progress-ring]
-
-Progress rings are used to show the progress of a determinate operation in a circular fashion.
-
-```html preview
-<sl-progress-ring value="25"></sl-progress-ring>
-```
-
-```jsx react
-import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlProgressRing value="25" />
-);
-```
-
-## Examples
-
-### Size
-
-Use the `--size` custom property to set the diameter of the progress ring.
-
-```html preview
-<sl-progress-ring value="50" style="--size: 200px;"></sl-progress-ring>
-```
-
-```jsx react
-import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlProgressRing 
-    value="50" 
-    style={{ '--size': '200px' }}
-  />
-);
-```
-
-### Track Width
-
-Use the `--track-width` custom property to set the width of the progress ring's track.
-
-```html preview
-<sl-progress-ring value="50" style="--track-width: 10px;"></sl-progress-ring>
-```
-
-```jsx react
-import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlProgressRing 
-    value="50" 
-    style={{ '--track-width': '10px' }}
-  />
-);
-```
-
-### Colors
-
-To change the color, use the `--track-color` and `--indicator-color` custom properties.
-
-```html preview
-<sl-progress-ring 
-  value="50" 
-  style="
-    --track-color: pink; 
-    --indicator-color: deeppink;
-  "
-></sl-progress-ring>
-```
-
-```jsx react
-import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlProgressRing 
-    value="50" 
-    style={{ 
-      '--track-color': 'pink',
-      '--indicator-color': 'deeppink'
-    }}
-  />
-);
-```
-
-### Labels
-
-Use the `label` attribute to label the progress ring and tell assistive devices how to announce it.
-
-```html preview
-<sl-progress-ring value="50" label="Upload progress"></sl-progress-ring>
-```
-
-```jsx react
-import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlProgressRing 
-    value="50" 
-    label="Upload progress"
-  />
-);
-```
-
-### Showing Values
-
-Use the default slot to show a label inside the progress ring.
-
-```html preview
-<sl-progress-ring value="50" class="progress-ring-values" style="margin-bottom: .5rem;">50%</sl-progress-ring>
-
-<br>
-
-<sl-button circle><sl-icon name="dash"></sl-icon></sl-button>
-<sl-button circle><sl-icon name="plus"></sl-icon></sl-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>
-```
-
-```jsx react
-import { useState } from 'react';
-import { 
-  SlButton,
-  SlIcon,
-  SlProgressRing
-} from '@shoelace-style/shoelace/dist/react';
-
-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 (
-    <>
-      <SlProgressRing 
-        value={value} 
-        style={{ marginBottom: '.5rem' }}
-      >
-        {value}%
-      </SlProgressRing>
-
-      <br />
-
-      <SlButton circle onClick={() => adjustValue(-10)}>
-        <SlIcon name="dash" />
-      </SlButton>
-
-      <SlButton circle onClick={() => adjustValue(10)}>
-        <SlIcon name="plus" />
-      </SlButton>
-    </>
-  );
-};
-```
-
-[component-metadata:sl-progress-ring]

docs/components/qr-code.md

@@ -1,167 +0,0 @@
-# QR Code
-
-[component-header:sl-qr-code]
-
-Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
-
-QR codes are useful for providing small pieces of information to users who can quickly scan them with a smartphone. Most smartphones have built-in QR code scanners, so simply pointing the camera at a QR code will decode it and allow the user to visit a website, dial a phone number, read a message, etc.
-
-```html preview
-<div class="qr-overview">
-  <sl-qr-code value="https://shoelace.style/" label="Scan this code to visit Shoelace on the web!"></sl-qr-code>
-  <br>
-
-  <sl-input maxlength="255" clearable></sl-input>
-</div>
-
-<script>
-  const container = document.querySelector('.qr-overview');
-  const qrCode = container.querySelector('sl-qr-code');
-  const input = container.querySelector('sl-input');
-
-  input.value = qrCode.value;
-  input.addEventListener('sl-input', () => qrCode.value = input.value);
-</script>
-
-<style>
-  .qr-overview {
-    max-width: 256px;
-  }
-
-  .qr-overview sl-input {
-    margin-top: 1rem;
-  }
-</style>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlQrCode, SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .qr-overview {
-    max-width: 256px;
-  }
-
-  .qr-overview sl-input {
-    margin-top: 1rem;
-  }
-`;
-
-const App = () => {
-  const [value, setValue] = useState('https://shoelace.style/');
-
-  return (
-    <>
-      <div className="qr-overview">
-        <SlQrCode value={value} label="Scan this code to visit Shoelace on the web!" />
-        <br />
-
-        <SlInput maxlength="255" clearable onInput={event => setValue(event.target.value)} />
-      </div>
-
-      <style>{css}</style>
-    </>
-  );
-};
-```
-
-## Examples
-
-### Colors
-
-Use the `fill` and `background` attributes to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.
-
-```html preview
-<sl-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></sl-qr-code>
-```
-
-```jsx react
-import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />
-);
-```
-
-### Size
-
-Use the `size` attribute to change the size of the QR code.
-
-```html preview
-<sl-qr-code value="https://shoelace.style/" size="64"></sl-qr-code>
-```
-
-```jsx react
-import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlQrCode value="https://shoelace.style/" size="64" />
-);
-```
-
-### Radius
-
-Create a rounded effect with the `radius` attribute.
-
-```html preview
-<sl-qr-code value="https://shoelace.style/" radius="0.5"></sl-qr-code>
-```
-
-```jsx react
-import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlQrCode value="https://shoelace.style/" radius="0.5" />
-);
-```
-
-### Error Correction
-
-QR codes can be rendered with various levels of [error correction](https://www.qrcode.com/en/about/error_correction.html) that can be set using the `error-correction` attribute. This example generates four codes with the same value using different error correction levels.
-
-```html preview
-<div class="qr-error-correction">
-  <sl-qr-code value="https://shoelace.style/" error-correction="L"></sl-qr-code>
-  <sl-qr-code value="https://shoelace.style/" error-correction="M"></sl-qr-code>
-  <sl-qr-code value="https://shoelace.style/" error-correction="Q"></sl-qr-code>
-  <sl-qr-code value="https://shoelace.style/" error-correction="H"></sl-qr-code>
-</div>
-
-<style>
-  .qr-error-correction {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
-</style>
-```
-
-```jsx react
-import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .qr-error-correction {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
-`;
-
-const App = () => {
-  return (
-    <>
-      <div className="qr-error-correction">
-        <SlQrCode value="https://shoelace.style/" error-correction="L" />
-        <SlQrCode value="https://shoelace.style/" error-correction="M" />
-        <SlQrCode value="https://shoelace.style/" error-correction="Q" />
-        <SlQrCode value="https://shoelace.style/" error-correction="H" />
-      </div>
-
-      <style>{css}</style>
-    </>
-  );
-};
-```
-
-[component-metadata:sl-qr-code]

docs/components/radio-group.md

@@ -1,52 +0,0 @@
-# Radio Group
-
-[component-header:sl-radio-group]
-
-Radio Groups are used to group multiple radios so they function as a single control.
-
-```html preview
-<sl-radio-group label="Select an option">
-  <sl-radio value="1" checked>Option 1</sl-radio>
-  <sl-radio value="2">Option 2</sl-radio>
-  <sl-radio value="3">Option 3</sl-radio>
-</sl-radio-group>
-```
-
-```jsx react
-import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRadioGroup label="Select an option">
-    <SlRadio value="1" checked>Option 1</SlRadio>
-    <SlRadio value="2">Option 2</SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
-  </SlRadioGroup>
-);
-```
-
-## Examples
-
-### Showing the Fieldset
-
-You can show a fieldset and legend that wraps the radio group using the `fieldset` attribute.
-
-```html preview
-<sl-radio-group label="Select an option" fieldset>
-  <sl-radio value="1" checked>Option 1</sl-radio>
-  <sl-radio value="2">Option 2</sl-radio>
-  <sl-radio value="3">Option 3</sl-radio>
-</sl-radio-group>
-```
-
-```jsx react
-import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRadioGroup label="Select an option" fieldset>
-    <SlRadio value="1" checked>Option 1</SlRadio>
-    <SlRadio value="2">Option 2</SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
-  </SlRadioGroup>
-);
-```
-[component-metadata:sl-radio-group]

docs/components/radio.md

@@ -1,59 +0,0 @@
-# Radio
-
-[component-header:sl-radio]
-
-Radios allow the user to select one option from a group of many.
-
-Radios are designed to be used with [radio groups](/components/radio-group). As such, all of the examples on this page utilize them to demonstrate their correct usage.
-
-```html preview
-<sl-radio-group label="Select an option">
-  <sl-radio value="1" checked>Option 1</sl-radio>
-  <sl-radio value="2">Option 2</sl-radio>
-  <sl-radio value="3">Option 3</sl-radio>
-</sl-radio-group>
-```
-
-```jsx react
-import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRadioGroup label="Select an option">
-    <SlRadio value="1" checked>Option 1</SlRadio>
-    <SlRadio value="2">Option 2</SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
-  </SlRadioGroup>
-);
-```
-
-?> 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
-
-### Disabled
-
-Use the `disabled` attribute to disable a radio.
-
-```html preview
-<sl-radio-group label="Select an option">
-  <sl-radio value="1" checked>Option 1</sl-radio>
-  <sl-radio value="2">Option 2</sl-radio>
-  <sl-radio value="3">Option 3</sl-radio>
-  <sl-radio value="4" disabled>Disabled</sl-radio>
-</sl-radio-group>
-```
-
-```jsx react
-import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRadioGroup label="Select an option">
-    <SlRadio value="1" checked>Option 1</SlRadio>
-    <SlRadio value="2">Option 2</SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
-    <SlRadio value="4" disabled>Disabled</SlRadio>
-  </SlRadioGroup>
-);
-```
-
-[component-metadata:sl-radio]

docs/components/range.md

@@ -1,180 +0,0 @@
-# Range
-
-[component-header:sl-range]
-
-Ranges allow the user to select a single value within a given range using a slider.
-
-```html preview
-<sl-range></sl-range>
-```
-
-```jsx react
-import { SlRange } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRange />
-);
-```
-
-?> 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
-
-### 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 preview
-<sl-range min="0" max="10" step="1"></sl-range>
-```
-
-```jsx react
-import { SlRange } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRange min={0} max={10} step={1} />
-);
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a slider.
-
-```html preview
-<sl-range disabled></sl-range>
-```
-
-
-```jsx react
-import { SlRange } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRange disabled />
-);
-```
-
-### Tooltip Placement
-
-By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
-
-```html preview
-<sl-range tooltip="bottom"></sl-range>
-```
-
-```jsx react
-import { SlRange } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRange tooltip="bottom" />
-);
-```
-
-### Disable the Tooltip
-
-To disable the tooltip, set `tooltip` to `none`.
-
-```html preview
-<sl-range tooltip="none"></sl-range>
-```
-
-```jsx react
-import { SlRange } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRange tooltip="none" />
-);
-```
-
-### 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 preview
-<sl-range style="
-  --track-color-active: var(--sl-color-primary-600);
-  --track-color-inactive: var(--sl-color-primary-100);
-"></sl-range>
-```
-
-```jsx react
-import { SlRange } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRange 
-    style={{
-      '--track-color-active': 'var(--sl-color-primary-600)',
-      '--track-color-inactive': 'var(--sl-color-primary-200)'
-    }}
-  />
-);
-```
-
-### 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 preview
-<sl-range min="0" max="100" step="1" class="range-with-custom-formatter"></sl-range>
-
-<script>
-  const range = document.querySelector('.range-with-custom-formatter');
-  range.tooltipFormatter = value => `Total - ${value}%`;
-</script>
-```
-
-```jsx react
-import { SlRange } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRange 
-    min={0}
-    max={100}
-    step={1}
-    tooltipFormatter={value => `Total - ${value}%`}
-  />
-);
-```
-
-### Labels
-
-Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.
-
-```html preview
-<sl-range label="Volume" min="0" max="100"></sl-input>
-```
-
-```jsx react
-import { SlRange } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRange label="Volume" min={0} max={100} />
-);
-```
-
-### 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 preview
-<sl-range 
-  label="Volume" 
-  help-text="Controls the volume of the current song."
-  min="0"
-  max="100"
-></sl-input>
-```
-
-```jsx react
-import { SlRange } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRange 
-    label="Volume" 
-    help-text="Controls the volume of the current song."
-    min={0}
-    max={100}
-  />
-);
-```
-
-[component-metadata:sl-range]

docs/components/rating.md

@@ -1,153 +0,0 @@
-# Rating
-
-[component-header:sl-rating]
-
-Ratings give users a way to quickly view and provide feedback.
-
-```html preview
-<sl-rating></sl-rating>
-```
-
-```jsx react
-import { SlRating } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRating />
-);
-```
-
-## Examples
-
-### Maximum Value
-
-Ratings are 0-5 by default. To change the maximum possible value, use the `max` attribute.
-
-```html preview
-<sl-rating max="3"></sl-rating>
-```
-
-```jsx react
-import { SlRating } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRating max={3} />
-);
-```
-
-### Precision
-
-Use the `precision` attribute to let users select fractional ratings.
-
-```html preview
-<sl-rating precision="0.5" value="2.5"></sl-rating>
-```
-
-```jsx react
-import { SlRating } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRating precision={0.5} value={2.5} />
-);
-```
-
-## Symbol Sizes
-
-Set the `--symbol-size` custom property to adjust the size.
-
-```html preview
-<sl-rating style="--symbol-size: 2rem;"></sl-rating>
-```
-
-```jsx react
-import { SlRating } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRating style={{ '--symbol-size': '2rem' }} />
-);
-```
-
-### Readonly
-
-Use the `readonly` attribute to display a rating that users can't change.
-
-```html preview
-<sl-rating readonly value="3"></sl-rating>
-```
-
-```jsx react
-import { SlRating } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRating readonly value={3} />
-);
-```
-
-### Disabled
-
-Use the `disable` attribute to disable the rating.
-
-```html preview
-<sl-rating disabled value="3"></sl-rating>
-```
-
-```jsx react
-import { SlRating } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRating disabled value={3} />
-);
-```
-
-### Custom Icons
-
-```html preview
-<sl-rating class="rating-hearts" style="--symbol-color-active: #ff4136;"></sl-rating>
-
-<script>
-  const rating = document.querySelector('.rating-hearts');
-  rating.getSymbol = () => '<sl-icon name="heart-fill"></sl-icon>'; 
-</script>
-```
-
-```jsx react
-import '@shoelace-style/shoelace/dist/components/icon/icon';
-import { SlRating } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRating 
-    getSymbol={() => '<sl-icon name="heart-fill"></sl-icon>'}
-    style={{ '--symbol-color-active': '#ff4136' }} 
-  />
-);
-```
-
-### Value-based Icons
-
-```html preview
-<sl-rating class="rating-emojis"></sl-rating>
-
-<script>
-  const rating = document.querySelector('.rating-emojis');
-
-  rating.getSymbol = (value) => {
-    const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
-    return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
-  };
-</script>
-```
-
-```jsx react
-import '@shoelace-style/shoelace/dist/components/icon/icon';
-import { SlRating } from '@shoelace-style/shoelace/dist/react';
-
-function getSymbol(value) {
-  const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
-  return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
-}
-
-const App = () => (
-  <SlRating getSymbol={getSymbol} />
-);
-```
-
-[component-metadata:sl-rating]

docs/components/relative-time.md

@@ -1,105 +0,0 @@
-# Relative Time
-
-[component-header:sl-relative-time]
-
-Outputs a localized time phrase relative to the current date and time.
-
-Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). No language packs are required.
-
-```html preview
-<!-- Shoelace 2 release date 🎉 -->
-<sl-relative-time date="2020-07-15T09:17:00-04:00"></sl-relative-time>
-```
-
-```jsx react
-import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRelativeTime date="2020-07-15T09:17:00-04:00" />
-);
-```
-
-The `date` attribute determines when the date/time is calculated from. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript.
-
-?> When using strings, avoid ambiguous dates such as `03/04/2020` which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) to ensure the date will be parsed properly by all clients.
-
-!> The `Intl.RelativeTimeFormat` API is available [in all major browsers](https://caniuse.com/mdn-javascript_builtins_intl_relativetimeformat), but it only became available to Safari in version 14. If you need to support Safari 13, you'll need to [use a polyfill](https://github.com/catamphetamine/relative-time-format).
-
-## Examples
-
-### Keeping Time in Sync
-
-Use the `sync` attribute to update the displayed value automatically as time passes.
-
-```html preview
-<div class="relative-time-sync">
-  <sl-relative-time sync></sl-relative-time>
-</div>
-
-<script>
-  const container = document.querySelector('.relative-time-sync');
-  const relativeTime = container.querySelector('sl-relative-time');
-
-  relativeTime.date = new Date(new Date().getTime() - 60000);
-</script>
-```
-
-```jsx react
-import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
-
-const date = new Date(new Date().getTime() - 60000);
-
-const App = () => (
-  <SlRelativeTime date={date} sync />
-);
-```
-
-### Formatting Styles
-
-You can change how the time is displayed using the `format` attribute. Note that some locales may display the same values for `narrow` and `short` formats.
-
-```html preview
-<sl-relative-time date="2020-07-15T09:17:00-04:00" format="narrow"></sl-relative-time><br>
-<sl-relative-time date="2020-07-15T09:17:00-04:00" format="short"></sl-relative-time><br>
-<sl-relative-time date="2020-07-15T09:17:00-04:00" format="long"></sl-relative-time>
-```
-
-```jsx react
-import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" /><br />
-    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="short" /><br />
-    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="long" />
-  </>
-);
-```
-
-### Localization
-
-Use the `lang` attribute to set the desired locale.
-
-```html preview
-English: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="en-US"></sl-relative-time><br>
-Chinese: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="zh-CN"></sl-relative-time><br>
-German: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="de"></sl-relative-time><br>
-Greek: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="el"></sl-relative-time><br>
-Russian: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="ru"></sl-relative-time>
-```
-
-```jsx react
-import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    English: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="en-US" /><br />
-    Chinese: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="zh-CN" /><br />
-    German: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="de" /><br />
-    Greek: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="el" /><br />
-    Russian: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="ru" />
-  </>
-);
-```
-
-[component-metadata:sl-relative-time]

docs/components/resize-observer.md

@@ -1,68 +0,0 @@
-# Resize Observer
-
-[component-header:sl-resize-observer]
-
-The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
-
-The resize observer will report changes to the dimensions of the elements it wraps through the `sl-resize` event. When emitted, a collection of [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) objects will be attached to `event.detail` that contains the target element and information about its dimensions.
-
-```html preview
-<div class="resize-observer-overview">
-  <sl-resize-observer>
-    <div>
-      Resize this box and watch the console 👉
-    </div>
-  </sl-resize-observer>
-</div>
-
-<script>
-  const container = document.querySelector('.resize-observer-overview');
-  const resizeObserver = container.querySelector('sl-resize-observer');
-
-  resizeObserver.addEventListener('sl-resize', event => {
-    console.log(event.detail);
-  });
-</script>
-
-<style>
-  .resize-observer-overview div {
-    display: flex; 
-    border: solid 2px var(--sl-input-border-color); 
-    align-items: center; 
-    justify-content: center;
-    text-align: center;
-    padding: 4rem 2rem;
-  }
-</style>
-```
-
-```jsx react
-import { SlResizeObserver } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .resize-observer-overview div {
-    display: flex; 
-    border: solid 2px var(--sl-input-border-color); 
-    align-items: center; 
-    justify-content: center;
-    text-align: center;
-    padding: 4rem 2rem;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="resize-observer-overview">
-      <SlResizeObserver onSlResize={event => console.log(event.detail)}>
-        <div>
-          Resize this box and watch the console 👉
-        </div>
-      </SlResizeObserver>
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-[component-metadata:sl-resize-observer]

docs/components/responsive-media.md

@@ -1,73 +0,0 @@
-# Responsive Media
-
-[component-header:sl-responsive-media]
-
-Displays media in the desired aspect ratio.
-
-You can slot in any [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), including `<iframe>`, `<img>`, and `<video>`. As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container. The default aspect ratio is `16:9`.
-
-```html preview
-<sl-responsive-media>
-  <img src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80" alt="A train riding through autumn foliage with mountains in the distance.">
-</sl-responsive-media>
-```
-
-```jsx react
-import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlResponsiveMedia>
-    <img 
-      src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
-      alt="A train riding through autumn foliage with mountains in the distance."
-    />
-  </SlResponsiveMedia>
-);
-```
-
-## Examples
-
-### Responsive Images
-
-The following image maintains a `4:3` aspect ratio as its container is resized.
-
-```html preview
-<sl-responsive-media aspect-ratio="4:3">
-  <img src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80" alt="Two blue chairs on a sandy beach.">
-</sl-responsive-media>
-```
-
-```jsx react
-import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlResponsiveMedia aspect-ratio="4:3">
-    <img 
-      src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80" 
-      alt="Two blue chairs on a sandy beach."
-    />
-  </SlResponsiveMedia>
-);
-```
-
-### Responsive Videos
-
-The following video is embedded using an `iframe` and maintains a `16:9` aspect ratio as its container is resized.
-
-```html preview
-<sl-responsive-media aspect-ratio="16:9">
-  <iframe src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
-</sl-responsive-media>
-```
-
-```jsx react
-import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlResponsiveMedia aspect-ratio="16:9">
-    <iframe src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen />
-  </SlResponsiveMedia>
-);
-```
-
-[component-metadata:sl-responsive-media]

docs/components/select.md

@@ -1,457 +0,0 @@
-# Select
-
-[component-header:sl-select]
-
-Selects allow you to choose one or more items from a dropdown menu.
-
-```html preview
-<sl-select>
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-  <sl-divider></sl-divider>
-  <sl-menu-item value="option-4">Option 4</sl-menu-item>
-  <sl-menu-item value="option-5">Option 5</sl-menu-item>
-  <sl-menu-item value="option-6">Option 6</sl-menu-item>
-</sl-select>
-```
-
-```jsx react
-import { SlDivider, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSelect>
-    <SlMenuItem value="option-1">Option 1</SlMenuItem>
-    <SlMenuItem value="option-2">Option 2</SlMenuItem>
-    <SlMenuItem value="option-3">Option 3</SlMenuItem>
-    <SlDivider />
-    <SlMenuItem value="option-4">Option 4</SlMenuItem>
-    <SlMenuItem value="option-5">Option 5</SlMenuItem>
-    <SlMenuItem value="option-6">Option 6</SlMenuItem>
-  </SlSelect>
-);
-```
-
-?> 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
-
-### Placeholders
-
-Use the `placeholder` attribute to add a placeholder.
-
-```html preview
-<sl-select placeholder="Select one">
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-</sl-select>
-```
-
-```jsx react
-import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSelect placeholder="Select one">
-    <SlMenuItem value="option-1">Option 1</SlMenuItem>
-    <SlMenuItem value="option-2">Option 2</SlMenuItem>
-    <SlMenuItem value="option-3">Option 3</SlMenuItem>
-  </SlSelect>
-);
-```
-
-### Clearable
-
-Use the `clearable` attribute to make the control clearable.
-
-```html preview
-<sl-select placeholder="Clearable" clearable>
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-</sl-select>
-```
-
-```jsx react
-import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSelect placeholder="Clearable" clearable>
-    <SlMenuItem value="option-1">Option 1</SlMenuItem>
-    <SlMenuItem value="option-2">Option 2</SlMenuItem>
-    <SlMenuItem value="option-3">Option 3</SlMenuItem>
-  </SlSelect>
-);
-```
-
-### Filled Selects
-
-Add the `filled` attribute to draw a filled select.
-
-```html preview
-<sl-select filled>
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-</sl-select>
-```
-
-```jsx react
-import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSelect filled>
-    <SlMenuItem value="option-1">Option 1</SlMenuItem>
-    <SlMenuItem value="option-2">Option 2</SlMenuItem>
-    <SlMenuItem value="option-3">Option 3</SlMenuItem>
-  </SlSelect>
-);
-```
-
-### Pill
-
-Use the `pill` attribute to give selects rounded edges.
-
-```html preview
-<sl-select pill>
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-</sl-select>
-```
-
-```jsx react
-import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSelect pill>
-    <SlMenuItem value="option-1">Option 1</SlMenuItem>
-    <SlMenuItem value="option-2">Option 2</SlMenuItem>
-    <SlMenuItem value="option-3">Option 3</SlMenuItem>
-  </SlSelect>
-);
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a select.
-
-```html preview
-<sl-select placeholder="Disabled" disabled>
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-</sl-select>
-```
-
-```jsx react
-import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSelect placeholder="Disabled" disabled>
-    <SlMenuItem value="option-1">Option 1</SlMenuItem>
-    <SlMenuItem value="option-2">Option 2</SlMenuItem>
-    <SlMenuItem value="option-3">Option 3</SlMenuItem>
-  </SlSelect>
-);
-```
-
-### 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. When using this option, `value` will be an array instead of a string.
-
-```html preview
-<sl-select placeholder="Select a few" multiple clearable>
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-  <sl-divider></sl-divider>
-  <sl-menu-item value="option-4">Option 4</sl-menu-item>
-  <sl-menu-item value="option-5">Option 5</sl-menu-item>
-  <sl-menu-item value="option-6">Option 6</sl-menu-item>
-</sl-select>
-```
-
-```jsx react
-import { SlDivider, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSelect placeholder="Select a few" multiple clearable>
-    <SlMenuItem value="option-1">Option 1</SlMenuItem>
-    <SlMenuItem value="option-2">Option 2</SlMenuItem>
-    <SlMenuItem value="option-3">Option 3</SlMenuItem>
-    <SlDivider />
-    <SlMenuItem value="option-4">Option 4</SlMenuItem>
-    <SlMenuItem value="option-5">Option 5</SlMenuItem>
-    <SlMenuItem value="option-6">Option 6</SlMenuItem>
-  </SlSelect>
-);
-```
-
-### Grouping Options
-
-Options can be grouped visually using menu labels and dividers.
-
-```html preview
-<sl-select placeholder="Select one">
-  <sl-menu-label>Group 1</sl-menu-label>
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-  <sl-divider></sl-divider>
-  <sl-menu-label>Group 2</sl-menu-label>
-  <sl-menu-item value="option-4">Option 4</sl-menu-item>
-  <sl-menu-item value="option-5">Option 5</sl-menu-item>
-  <sl-menu-item value="option-6">Option 6</sl-menu-item>
-</sl-select>
-```
-
-```jsx react
-import { SlDivider, SlMenuItem, SlMenuLabel, SlSelect } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSelect placeholder="Select one">
-    <SlMenuLabel>Group 1</SlMenuLabel>
-    <SlMenuItem value="option-1">Option 1</SlMenuItem>
-    <SlMenuItem value="option-2">Option 2</SlMenuItem>
-    <SlMenuItem value="option-3">Option 3</SlMenuItem>
-    <SlDivider></SlDivider>
-    <SlMenuLabel>Group 2</SlMenuLabel>
-    <SlMenuItem value="option-4">Option 4</SlMenuItem>
-    <SlMenuItem value="option-5">Option 5</SlMenuItem>
-    <SlMenuItem value="option-6">Option 6</SlMenuItem>
-  </SlSelect>
-);
-```
-
-### Sizes
-
-Use the `size` attribute to change a select's size.
-
-```html preview
-<sl-select placeholder="Small" size="small" multiple>
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-</sl-select>
-
-<br>
-
-<sl-select placeholder="Medium" size="medium" multiple>
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-</sl-select>
-
-<br>
-
-<sl-select placeholder="Large" size="large" multiple>
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-</sl-select>
-```
-
-```jsx react
-import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlSelect placeholder="Small" size="small" multiple>
-      <SlMenuItem value="option-1">Option 1</SlMenuItem>
-      <SlMenuItem value="option-2">Option 2</SlMenuItem>
-      <SlMenuItem value="option-3">Option 3</SlMenuItem>
-    </SlSelect>
-
-    <br />
-
-    <SlSelect placeholder="Medium" size="medium" multiple>
-      <SlMenuItem value="option-1">Option 1</SlMenuItem>
-      <SlMenuItem value="option-2">Option 2</SlMenuItem>
-      <SlMenuItem value="option-3">Option 3</SlMenuItem>
-    </SlSelect>
-
-    <br />
-
-    <SlSelect placeholder="Large" size="large" multiple>
-      <SlMenuItem value="option-1">Option 1</SlMenuItem>
-      <SlMenuItem value="option-2">Option 2</SlMenuItem>
-      <SlMenuItem value="option-3">Option 3</SlMenuItem>
-    </SlSelect>
-  </>
-);
-```
-
-### Selecting Options Programmatically
-
-The `value` property is bound to the current selection. As the selection changes, so will the value. To programmatically manage the selection, update the `value` property.
-
-```html preview
-<div class="selecting-example">
-  <sl-select>
-    <sl-menu-item value="option-1">Option 1</sl-menu-item>
-    <sl-menu-item value="option-2">Option 2</sl-menu-item>
-    <sl-menu-item value="option-3">Option 3</sl-menu-item>
-  </sl-select>
-
-  <br>
-
-  <sl-button data-option="option-1">Set 1</sl-button>
-  <sl-button data-option="option-2">Set 2</sl-button>
-  <sl-button data-option="option-3">Set 3</sl-button>
-</div>
-
-<script>
-  const container = document.querySelector('.selecting-example');
-  const select = container.querySelector('sl-select');
-
-  [...container.querySelectorAll('sl-button')].map(button => {
-    button.addEventListener('click', () => {
-      select.value = button.dataset.option; 
-    });
-  });
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlButton, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [value, setValue] = useState('option-1');
-
-  return (
-    <>
-      <SlSelect value={value} onSlChange={event => setValue(event.target.value)}>
-        <SlMenuItem value="option-1">Option 1</SlMenuItem>
-        <SlMenuItem value="option-2">Option 2</SlMenuItem>
-        <SlMenuItem value="option-3">Option 3</SlMenuItem>
-      </SlSelect>
-
-      <br />
-
-      <SlButton onClick={() => setValue('option-1')}>Set 1</SlButton>
-      <SlButton onClick={() => setValue('option-2')}>Set 2</SlButton>
-      <SlButton onClick={() => setValue('option-3')}>Set 3</SlButton>
-    </>
-  );
-};
-```
-
-### Labels
-
-Use the `label` attribute to give the select an accessible label. For labels that contain HTML, use the `label` slot instead.
-
-```html preview
-<sl-select label="Select one">
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-</sl-select>
-```
-
-```jsx react
-import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSelect label="Select one">
-    <SlMenuItem value="option-1">Option 1</SlMenuItem>
-    <SlMenuItem value="option-2">Option 2</SlMenuItem>
-    <SlMenuItem value="option-3">Option 3</SlMenuItem>
-  </SlSelect>
-);
-```
-
-### 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 preview
-<sl-select 
-  label="Experience" 
-  help-text="Please tell us your skill level."
->
-  <sl-menu-item value="1">Novice</sl-menu-item>
-  <sl-menu-item value="2">Intermediate</sl-menu-item>
-  <sl-menu-item value="3">Advanced</sl-menu-item>
-</sl-select>
-```
-
-```jsx react
-import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSelect 
-    label="Experience"
-    help-text="Please tell us your skill level."
-  >
-    <SlMenuItem value="1">Novice</SlMenuItem>
-    <SlMenuItem value="2">Intermediate</SlMenuItem>
-    <SlMenuItem value="3">Advanced</SlMenuItem>
-  </SlSelect>
-);
-```
-
-### Prefix & Suffix Icons
-
-Use the `prefix` and `suffix` slots to add icons.
-
-```html preview
-<sl-select placeholder="Small" size="small">
-  <sl-icon name="house" slot="prefix"></sl-icon>
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-  <sl-icon name="chat" slot="suffix"></sl-icon>
-</sl-select>
-<br>
-<sl-select placeholder="Medium" size="medium">
-  <sl-icon name="house" slot="prefix"></sl-icon>
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-  <sl-icon name="chat" slot="suffix"></sl-icon>
-</sl-select>
-<br>
-<sl-select placeholder="Large" size="large">
-  <sl-icon name="house" slot="prefix"></sl-icon>
-  <sl-menu-item value="option-1">Option 1</sl-menu-item>
-  <sl-menu-item value="option-2">Option 2</sl-menu-item>
-  <sl-menu-item value="option-3">Option 3</sl-menu-item>
-  <sl-icon name="chat" slot="suffix"></sl-icon>
-</sl-select>
-```
-
-```jsx react
-import { SlIcon, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlSelect placeholder="Small" size="small">
-      <SlIcon name="house" slot="prefix"></SlIcon>
-      <SlMenuItem value="option-1">Option 1</SlMenuItem>
-      <SlMenuItem value="option-2">Option 2</SlMenuItem>
-      <SlMenuItem value="option-3">Option 3</SlMenuItem>
-      <SlIcon name="chat" slot="suffix"></SlIcon>
-    </SlSelect>
-    <br />
-    <SlSelect placeholder="Medium" size="medium">
-      <SlIcon name="house" slot="prefix"></SlIcon>
-      <SlMenuItem value="option-1">Option 1</SlMenuItem>
-      <SlMenuItem value="option-2">Option 2</SlMenuItem>
-      <SlMenuItem value="option-3">Option 3</SlMenuItem>
-      <SlIcon name="chat" slot="suffix"></SlIcon>
-    </SlSelect>
-    <br />
-    <SlSelect placeholder="Large" size="large">
-      <SlIcon name="house" slot="prefix"></SlIcon>
-      <SlMenuItem value="option-1">Option 1</SlMenuItem>
-      <SlMenuItem value="option-2">Option 2</SlMenuItem>
-      <SlMenuItem value="option-3">Option 3</SlMenuItem>
-      <SlIcon name="chat" slot="suffix"></SlIcon>
-    </SlSelect>
-  </>
-);
-```
-
-[component-metadata:sl-select]

docs/components/skeleton.md

@@ -1,439 +0,0 @@
-# Skeleton
-
-[component-header:sl-skeleton]
-
-Skeletons are used to show where content will eventually be drawn.
-
-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 preview
-<div class="skeleton-overview">
-  <header>
-    <sl-skeleton></sl-skeleton>
-    <sl-skeleton></sl-skeleton>
-  </header>
-
-  <sl-skeleton></sl-skeleton>
-  <sl-skeleton></sl-skeleton>
-  <sl-skeleton></sl-skeleton>
-</div>
-
-<style>
-  .skeleton-overview header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 1rem;
-  }
-
-  .skeleton-overview header sl-skeleton:last-child {
-    flex: 0 0 auto;
-    width: 30%;
-  }
-
-  .skeleton-overview sl-skeleton {
-    margin-bottom: 1rem;
-  }
-
-  .skeleton-overview sl-skeleton:nth-child(1) {
-    float: left;
-    width: 3rem;
-    height: 3rem;
-    margin-right: 1rem;
-    vertical-align: middle;
-  }
-
-  .skeleton-overview sl-skeleton:nth-child(3) {
-    width: 95%;
-  }
-
-  .skeleton-overview sl-skeleton:nth-child(4) {
-    width: 80%;
-  }
-</style>
-```
-
-```jsx react
-import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .skeleton-overview header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 1rem;
-  }
-
-  .skeleton-overview header sl-skeleton:last-child {
-    flex: 0 0 auto;
-    width: 30%;
-  }
-
-  .skeleton-overview sl-skeleton {
-    margin-bottom: 1rem;
-  }
-
-  .skeleton-overview sl-skeleton:nth-child(1) {
-    float: left;
-    width: 3rem;
-    height: 3rem;
-    margin-right: 1rem;
-    vertical-align: middle;
-  }
-
-  .skeleton-overview sl-skeleton:nth-child(3) {
-    width: 95%;
-  }
-
-  .skeleton-overview sl-skeleton:nth-child(4) {
-    width: 80%;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="skeleton-overview">
-      <header>
-        <SlSkeleton />
-        <SlSkeleton />
-      </header>
-
-      <SlSkeleton />
-      <SlSkeleton />
-      <SlSkeleton />
-    </div>  
-
-    <style>{css}</style>
-  </>
-);
-```
-
-## 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 preview
-<div class="skeleton-effects">
-  <sl-skeleton effect="none"></sl-skeleton>
-  None
-
-  <sl-skeleton effect="sheen"></sl-skeleton>
-  Sheen
-
-  <sl-skeleton effect="pulse"></sl-skeleton>
-  Pulse
-</div>
-
-<style>
-  .skeleton-effects {
-    font-size: var(--sl-font-size-small);
-  }
-
-  .skeleton-effects sl-skeleton:not(:first-child) {
-    margin-top: 1rem;
-  }
-</style>
-```
-
-```jsx react
-import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .skeleton-effects {
-    font-size: var(--sl-font-size-small);
-  }
-
-  .skeleton-effects sl-skeleton:not(:first-child) {
-    margin-top: 1rem;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="skeleton-effects">
-      <SlSkeleton effect="none" />
-      None
-
-      <SlSkeleton effect="sheen" />
-      Sheen
-
-      <SlSkeleton effect="pulse" />
-      Pulse
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-### Paragraphs
-
-Use multiple skeletons and some clever styles to simulate paragraphs.
-
-```html preview
-<div class="skeleton-paragraphs">
-  <sl-skeleton></sl-skeleton>
-  <sl-skeleton></sl-skeleton>
-  <sl-skeleton></sl-skeleton>
-  <sl-skeleton></sl-skeleton>
-  <sl-skeleton></sl-skeleton>
-</div>
-
-<style>
-  .skeleton-paragraphs sl-skeleton {
-    margin-bottom: 1rem;
-  }
-
-  .skeleton-paragraphs sl-skeleton:nth-child(2) {
-    width: 95%;
-  }
-
-  .skeleton-paragraphs sl-skeleton:nth-child(4) {
-    width: 90%;
-  }
-
-  .skeleton-paragraphs sl-skeleton:last-child {
-    width: 50%;
-  }
-</style>
-```
-
-```jsx react
-import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .skeleton-paragraphs sl-skeleton {
-    margin-bottom: 1rem;
-  }
-
-  .skeleton-paragraphs sl-skeleton:nth-child(2) {
-    width: 95%;
-  }
-
-  .skeleton-paragraphs sl-skeleton:nth-child(4) {
-    width: 90%;
-  }
-
-  .skeleton-paragraphs sl-skeleton:last-child {
-    width: 50%;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="skeleton-paragraphs">
-      <SlSkeleton />
-      <SlSkeleton />
-      <SlSkeleton />
-      <SlSkeleton />
-      <SlSkeleton />
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-### Avatars
-
-Set a matching width and height to make a circle, square, or rounded avatar skeleton.
-
-```html preview
-<div class="skeleton-avatars">
-  <sl-skeleton></sl-skeleton>
-  <sl-skeleton></sl-skeleton>
-  <sl-skeleton></sl-skeleton>
-</div>
-
-<style>
-  .skeleton-avatars sl-skeleton {
-    display: inline-block;
-    width: 3rem;
-    height: 3rem;
-    margin-right: .5rem;
-  }
-
-  .skeleton-avatars sl-skeleton:nth-child(1) {
-    --border-radius: 0;
-  }
-  
-  .skeleton-avatars sl-skeleton:nth-child(2) {
-    --border-radius: var(--sl-border-radius-medium);
-  }
-</style>
-```
-
-```jsx react
-import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .skeleton-avatars sl-skeleton {
-    display: inline-block;
-    width: 3rem;
-    height: 3rem;
-    margin-right: .5rem;
-  }
-
-  .skeleton-avatars sl-skeleton:nth-child(1) {
-    --border-radius: 0;
-  }
-  
-  .skeleton-avatars sl-skeleton:nth-child(2) {
-    --border-radius: var(--sl-border-radius-medium);
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="skeleton-avatars">
-      <SlSkeleton />
-      <SlSkeleton />
-      <SlSkeleton />
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-### 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 preview
-<div class="skeleton-shapes">
-  <sl-skeleton class="square"></sl-skeleton>
-  <sl-skeleton class="circle"></sl-skeleton>
-  <sl-skeleton class="triangle"></sl-skeleton>
-  <sl-skeleton class="cross"></sl-skeleton>
-  <sl-skeleton class="comment"></sl-skeleton>
-</div>
-
-<style>
-  .skeleton-shapes sl-skeleton {
-    display: inline-flex;
-    width: 50px;
-    height: 50px;
-  }
-
-  .skeleton-shapes .square::part(indicator) {
-    --border-radius: var(--sl-border-radius-medium);
-  }
-
-  .skeleton-shapes .circle::part(indicator) {
-    --border-radius: var(--sl-border-radius-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 sl-skeleton:not(:last-child) {
-    margin-right: .5rem;
-  }
-</style>
-```
-
-```jsx react
-import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .skeleton-shapes sl-skeleton {
-    display: inline-flex;
-    width: 50px;
-    height: 50px;
-  }
-
-  .skeleton-shapes .square::part(indicator) {
-    --border-radius: var(--sl-border-radius-medium);
-  }
-
-  .skeleton-shapes .circle::part(indicator) {
-    --border-radius: var(--sl-border-radius-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 sl-skeleton:not(:last-child) {
-    margin-right: .5rem;
-  }
-`;
-
-const App = () => (
-  <>
-  <div className="skeleton-shapes">
-    <SlSkeleton className="square" />
-    <SlSkeleton className="circle" />
-    <SlSkeleton className="triangle" />
-    <SlSkeleton className="cross" />
-    <SlSkeleton className="comment" />
-  </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-### Custom Colors
-
-Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's color.
-
-```html preview
-<sl-skeleton effect="sheen" style="--color: tomato; --sheen-color: #ffb094;"></sl-skeleton>
-```
-
-```jsx react
-import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .skeleton-avatars sl-skeleton {
-    display: inline-block;
-    width: 3rem;
-    height: 3rem;
-    margin-right: .5rem;
-  }
-
-  .skeleton-avatars sl-skeleton:nth-child(1) {
-    --border-radius: 0;
-  }
-  
-  .skeleton-avatars sl-skeleton:nth-child(2) {
-    --border-radius: var(--sl-border-radius-medium);
-  }
-`;
-
-const App = () => (
-  <SlSkeleton 
-    effect="sheen" 
-    style={{ '--color': 'tomato', '--sheen-color': '#ffb094' }} 
-  />
-);
-```
-
-[component-metadata:sl-skeleton]

docs/components/spinner.md

@@ -1,86 +0,0 @@
-# Spinner
-
-[component-header:sl-spinner]
-
-Spinners are used to show the progress of an indeterminate operation.
-
-```html preview
-<sl-spinner></sl-spinner>
-```
-
-```jsx react
-import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSpinner />
-);
-```
-
-## Examples
-
-### Size
-
-Spinners are sized based on the current font size. To change their size, set the `font-size` property on the spinner itself or on a parent element as shown below.
-
-```html preview
-<sl-spinner></sl-spinner>
-<sl-spinner style="font-size: 2rem;"></sl-spinner>
-<sl-spinner style="font-size: 3rem;"></sl-spinner>
-```
-
-```jsx react
-import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlSpinner />
-    <SlSpinner style={{ fontSize: '2rem' }} />
-    <SlSpinner style={{ fontSize: '3rem' }} />
-  </>
-);
-```
-
-### Track Width
-
-The width of the spinner's track can be changed by setting the `--track-width` custom property.
-
-```html preview
-<sl-spinner style="font-size: 3rem; --track-width: 6px;"></sl-spinner>
-```
-
-```jsx react
-import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSpinner 
-    style={{
-      fontSize: '3rem',
-      '--track-width': '6px'
-    }} 
-  />
-);
-```
-
-### Color
-
-The spinner's colors can be changed by setting the `--indicator-color` and `--track-color` custom properties.
-
-```html preview
-<sl-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"></sl-spinner>
-```
-
-```jsx react
-import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSpinner 
-    style={{
-      fontSize: '3rem',
-      '--indicator-color': 'deeppink',
-      '--track-color': 'pink'
-    }} 
-  />
-);
-```
-
-[component-metadata:sl-spinner]

docs/components/split-panel.md

@@ -1,671 +0,0 @@
-# Split Panel
-
-[component-header:sl-split-panel]
-
-Split panels display two adjacent panels, allowing the user to reposition them.
-
-```html preview
-<sl-split-panel>
-  <div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    Start
-  </div>
-  <div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    End
-  </div>
-</sl-split-panel>
-```
-
-```jsx react
-import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSplitPanel>
-    <div slot="start" style={{
-      height: '200px',
-      background: 'var(--sl-color-neutral-50)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}>
-      Start
-    </div>
-    <div slot="end" style={{
-      height: '200px',
-      background: 'var(--sl-color-neutral-50)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}>
-      End
-    </div>
-  </SlSplitPanel>
-);
-```
-
-## 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 preview
-<sl-split-panel position="75">
-  <div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    Start
-  </div>
-  <div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    End
-  </div>
-</sl-split-panel>
-```
-
-### Initial Position in Pixels
-
-To set the initial position in pixels instead of a percentage, use the `position-in-pixels` attribute.
-
-```html preview
-<sl-split-panel position-in-pixels="150">
-  <div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    Start
-  </div>
-  <div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    End
-  </div>
-</sl-split-panel>
-```
-
-```jsx react
-import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSplitPanel position="200">
-    <div 
-      slot="start" 
-      style={{
-        height: '200px',
-        background: 'var(--sl-color-neutral-50)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      Start
-    </div>
-    <div 
-      slot="end" 
-      style={{
-        height: '200px',
-        background: 'var(--sl-color-neutral-50)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      End
-    </div>
-  </SlSplitPanel>
-);
-```
-
-### 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 preview
-<sl-split-panel vertical style="height: 400px;">
-  <div slot="start" style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    Start
-  </div>
-  <div slot="end" style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    End
-  </div>
-</sl-split-panel>
-```
-
-```jsx react
-import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSplitPanel vertical style={{ height: '400px' }}>
-    <div 
-      slot="start" 
-      style={{ 
-        height: '100%', 
-        background: 'var(--sl-color-neutral-50)', 
-        display: 'flex', 
-        alignItems: 'center',
-        justifyContent: 'center' 
-      }}
-    >
-      Start
-    </div>
-    <div 
-      slot="end"
-      style={{ 
-        height: '100%', 
-        background: 'var(--sl-color-neutral-50)', 
-        display: 'flex', 
-        alignItems: 'center',
-        justifyContent: 'center' 
-      }}
-    >
-      End
-    </div>
-  </SlSplitPanel>
-);
-```
-
-### 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 preview
-<div class="split-panel-snapping">
-  <sl-split-panel snap="100px 50%">
-    <div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-      Start
-    </div>
-    <div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-      End
-    </div>
-  </sl-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(--sl-color-neutral-400);
-    transform: translateX(-3px);
-  }
-
-  .split-panel-snapping-dots::before {
-    left: 100px;
-  }
-
-  .split-panel-snapping-dots::after {
-    left: 50%;
-  }
-</style>
-```
-
-```jsx react
-import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react';
-
-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(--sl-color-neutral-400);
-    transform: translateX(-3px);
-  }
-
-  .split-panel-snapping-dots::before {
-    left: 100px;
-  }
-
-  .split-panel-snapping-dots::after {
-    left: 50%;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="split-panel-snapping">
-      <SlSplitPanel snap="100px 50%">
-        <div 
-          slot="start" 
-          style={{
-            height: '200px',
-            background: 'var(--sl-color-neutral-50)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          Start
-        </div>
-        <div 
-          slot="end" 
-          style={{
-            height: '200px',
-            background: 'var(--sl-color-neutral-50)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          End
-        </div>
-      </SlSplitPanel>
-
-      <div className="split-panel-snapping-dots" />
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-### Disabled
-
-Add the `disabled` attribute to prevent the divider from being repositioned.
-
-```html preview
-<sl-split-panel disabled>
-  <div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    Start
-  </div>
-  <div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    End
-  </div>
-</sl-split-panel>
-```
-
-```jsx react
-import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSplitPanel disabled>
-    <div 
-      slot="start" 
-      style={{
-        height: '200px',
-        background: 'var(--sl-color-neutral-50)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      Start
-    </div>
-    <div 
-      slot="end" 
-      style={{
-        height: '200px',
-        background: 'var(--sl-color-neutral-50)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      End
-    </div>
-  </SlSplitPanel>
-);
-```
-
-### 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 preview
-<div class="split-panel-primary">
-  <sl-split-panel>
-    <div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-      Start
-    </div>
-    <div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-      End
-    </div>
-  </sl-split-panel>
-
-  <sl-select label="Primary Panel" value="" style="max-width: 200px; margin-top: 1rem;">
-    <sl-menu-item value="">None</sl-menu-item>
-    <sl-menu-item value="start">Start</sl-menu-item>
-    <sl-menu-item value="end">End</sl-menu-item>
-  </sl-select>
-</div>
-
-<script>
-  const container = document.querySelector('.split-panel-primary');
-  const splitPanel = container.querySelector('sl-split-panel');
-  const select = container.querySelector('sl-select');
-
-  select.addEventListener('sl-change', () => splitPanel.primary = select.value);
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlSplitPanel, SlSelect, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [primary, setPrimary] = useState('');
-
-  return (
-    <>
-      <SlSplitPanel primary={primary}>
-        <div 
-          slot="start" 
-          style={{
-            height: '200px',
-            background: 'var(--sl-color-neutral-50)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          Start
-        </div>
-        <div 
-          slot="end" 
-          style={{
-            height: '200px',
-            background: 'var(--sl-color-neutral-50)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          End
-        </div>
-      </SlSplitPanel>
-
-      <SlSelect 
-        label="Primary Panel" 
-        value={primary} 
-        style={{ maxWidth: '200px', marginTop: '1rem' }} 
-        onSlChange={event => setPrimary(event.target.value)}
-      >
-        <SlMenuItem value="">None</SlMenuItem>
-        <SlMenuItem value="start">Start</SlMenuItem>
-        <SlMenuItem value="end">End</SlMenuItem>
-      </SlSelect>      
-    </>
-  );
-};
-```
-
-### 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 preview
-<sl-split-panel style="--min: 150px; --max: calc(100% - 150px);">
-  <div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    Start
-  </div>
-  <div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    End
-  </div>
-</sl-split-panel>
-```
-
-```jsx react
-import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSplitPanel style={{ '--min': '150px', '--max': 'calc(100% - 150px)' }}>
-    <div 
-      slot="start" 
-      style={{
-        height: '200px',
-        background: 'var(--sl-color-neutral-50)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      Start
-    </div>
-    <div 
-      slot="end" 
-      style={{
-        height: '200px',
-        background: 'var(--sl-color-neutral-50)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      End
-    </div>
-  </SlSplitPanel>
-);
-```
-
-### Nested Split Panels
-
-Create complex layouts that can be repositioned independently by nesting split panels.
-
-```html preview
-<sl-split-panel>
-  <div slot="start" style="height: 400px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    Start
-  </div>
-  <div slot="end">
-    <sl-split-panel vertical style="height: 400px;">
-      <div slot="start" style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-        Top
-      </div>
-      <div slot="end" style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-        Bottom
-      </div>
-    </sl-split-panel>    
-  </div>
-</sl-split-panel>
-```
-
-```jsx react
-import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSplitPanel>
-    <div 
-      slot="start" 
-      style={{
-        height: '400px',
-        background: 'var(--sl-color-neutral-50)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-    >
-      Start
-    </div>
-    <div slot="end">
-      <SlSplitPanel vertical style={{ height: '400px' }}>
-        <div 
-          slot="start" 
-          style={{ 
-            height: '100%',
-            background: 'var(--sl-color-neutral-50)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          Start
-        </div>
-        <div 
-          slot="end" 
-          style={{ 
-            height: '100%',
-            background: 'var(--sl-color-neutral-50)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}      
-        >
-          End
-        </div>
-      </SlSplitPanel>
-    </div>
-  </SlSplitPanel>
-);
-```
-
-### Customizing the Divider
-
-You can target the `divider` part to apply CSS properties to the divider. To add a handle, slot an icon or another element into the `handle` slot. When customizing the divider, make sure to think about focus styles for keyboard users.
-
-```html preview
-<sl-split-panel style="--divider-width: 20px;">
-  <sl-icon slot="handle" name="grip-vertical"></sl-icon>
-  <div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    Start
-  </div>
-  <div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-    End
-  </div>
-</sl-split-panel>
-```
-
-```jsx react
-import { SlSplitPanel, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSplitPanel style={{ '--divider-width': '20px' }}>
-    <SlIcon slot="handle" name="grip-vertical" />
-    <div slot="start" style={{
-      height: '200px',
-      background: 'var(--sl-color-neutral-50)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}>
-      Start
-    </div>
-    <div slot="end" style={{
-      height: '200px',
-      background: 'var(--sl-color-neutral-50)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}>
-      End
-    </div>
-  </SlSplitPanel>
-);
-```
-
-Here's a more elaborate example that changes the divider's color and width and adds a styled handle.
-
-```html preview
-<div class="split-panel-handle">
-  <sl-split-panel>
-    <sl-icon slot="handle" name="grip-vertical"></sl-icon>
-    <div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-      Start
-    </div>
-    <div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
-      End
-    </div>
-  </sl-split-panel>
-</div>
-
-<style>
-  .split-panel-handle sl-split-panel {
-    --divider-width: 2px;
-  }
-
-  .split-panel-handle sl-split-panel::part(divider) {
-    background-color: var(--sl-color-pink-600);
-  }
-
-  .split-panel-handle sl-icon {
-    position: absolute;
-    border-radius: var(--sl-border-radius-small);
-    background: var(--sl-color-pink-600);
-    color: var(--sl-color-neutral-0);
-    padding: .5rem .125rem;
-  }
-
-  .split-panel-handle sl-split-panel::part(divider):focus-visible {
-    background-color: var(--sl-color-primary-600);
-  }
-
-  .split-panel-handle sl-split-panel:focus-within sl-icon {
-    background-color: var(--sl-color-primary-600);
-    color: var(--sl-color-neutral-0);
-  }
-</style>
-```
-
-```jsx react
-import { SlSplitPanel, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .split-panel-handle sl-split-panel {
-    --divider-width: 2px;
-  }
-
-  .split-panel-handle sl-split-panel::part(divider) {
-    background-color: var(--sl-color-pink-600);
-  }
-
-  .split-panel-handle sl-icon {
-    position: absolute;
-    border-radius: var(--sl-border-radius-small);
-    background: var(--sl-color-pink-600);
-    color: var(--sl-color-neutral-0);
-    padding: .5rem .125rem;
-  }
-
-  .split-panel-handle sl-split-panel::part(divider):focus-visible {
-    background-color: var(--sl-color-primary-600);
-  }
-
-  .split-panel-handle sl-split-panel:focus-within sl-icon {
-    background-color: var(--sl-color-primary-600);
-    color: var(--sl-color-neutral-0);
-  }
-`;
-
-const App = () => (
-  <>
-  <div className="split-panel-handle">
-    <SlSplitPanel>
-      <SlIcon slot="handle" name="grip-vertical" />
-      <div slot="start" style={{
-        height: '200px',
-        background: 'var(--sl-color-neutral-50)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}>
-        Start
-      </div>
-      <div slot="end" style={{
-        height: '200px',
-        background: 'var(--sl-color-neutral-50)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}>
-        End
-      </div>
-    </SlSplitPanel>
-  </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-[component-metadata:sl-split-panel]

docs/components/switch.md

@@ -1,77 +0,0 @@
-# Switch
-
-[component-header:sl-switch]
-
-Switches allow the user to toggle an option on or off. 
-
-```html preview
-<sl-switch>Switch</sl-switch>
-```
-
-```jsx react
-import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSwitch>Switch</SlSwitch>
-);
-```
-
-?> 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 preview
-<sl-switch checked>Checked</sl-switch>
-```
-
-```jsx react
-import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSwitch checked>Checked</SlSwitch>
-);
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable the switch.
-
-```html preview
-<sl-switch disabled>Disabled</sl-switch>
-```
-
-```jsx react
-import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSwitch disabled>Disabled</SlSwitch>
-);
-```
-
-### Custom Size
-
-Use the available custom properties to make the switch a different size.
-
-```html preview
-<sl-switch style="--width: 80px; --height: 32px; --thumb-size: 26px;"></sl-switch>
-```
-
-```jsx react
-import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlSwitch 
-    style={{
-      '--width': '80px',
-      '--height': '32px',
-      '--thumb-size': '26px'
-    }} 
-  />
-);
-```
-
-[component-metadata:sl-switch]

docs/components/tab-group.md

@@ -1,359 +0,0 @@
-# Tab Group
-
-[component-header:sl-tab-group]
-
-Tab groups organize content into a container that shows one section at a time.
-
-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 preview
-<sl-tab-group>
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
-
-  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
-  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
-  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
-  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
-</sl-tab-group>
-```
-
-```jsx react
-import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlTabGroup>
-    <SlTab slot="nav" panel="general">General</SlTab>
-    <SlTab slot="nav" panel="custom">Custom</SlTab>
-    <SlTab slot="nav" panel="advanced">Advanced</SlTab>
-    <SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
-
-    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
-    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
-    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
-    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
-  </SlTabGroup>
-);
-```
-
-## Examples
-
-### Tabs on Bottom
-
-Tabs can be shown on the bottom by setting `placement` to `bottom`.
-
-```html preview
-<sl-tab-group placement="bottom">
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
-
-  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
-  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
-  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
-  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
-</sl-tab-group>
-```
-
-```jsx react
-import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlTabGroup placement="bottom">
-    <SlTab slot="nav" panel="general">General</SlTab>
-    <SlTab slot="nav" panel="custom">Custom</SlTab>
-    <SlTab slot="nav" panel="advanced">Advanced</SlTab>
-    <SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
-
-    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
-    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
-    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
-    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
-  </SlTabGroup>
-);
-```
-
-### Tabs on Start
-
-Tabs can be shown on the starting side by setting `placement` to `start`.
-
-```html preview
-<sl-tab-group placement="start">
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
-
-  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
-  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
-  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
-  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
-</sl-tab-group>
-```
-
-
-```jsx react
-import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlTabGroup placement="start">
-    <SlTab slot="nav" panel="general">General</SlTab>
-    <SlTab slot="nav" panel="custom">Custom</SlTab>
-    <SlTab slot="nav" panel="advanced">Advanced</SlTab>
-    <SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
-
-    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
-    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
-    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
-    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
-  </SlTabGroup>
-);
-```
-
-### Tabs on End
-
-Tabs can be shown on the ending side by setting `placement` to `end`.
-
-```html preview
-<sl-tab-group placement="end">
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
-
-  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
-  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
-  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
-  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
-</sl-tab-group>
-```
-
-
-```jsx react
-import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlTabGroup placement="end">
-    <SlTab slot="nav" panel="general">General</SlTab>
-    <SlTab slot="nav" panel="custom">Custom</SlTab>
-    <SlTab slot="nav" panel="advanced">Advanced</SlTab>
-    <SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
-
-    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
-    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
-    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
-    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
-  </SlTabGroup>
-);
-```
-
-### Closable Tabs
-
-Add the `closable` attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated.
-
-```html preview
-<sl-tab-group class="tabs-closable">
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="closable-1" closable>Closable 1</sl-tab>
-  <sl-tab slot="nav" panel="closable-2" closable>Closable 2</sl-tab>
-  <sl-tab slot="nav" panel="closable-3" closable>Closable 3</sl-tab>
-
-  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
-  <sl-tab-panel name="closable-1">This is the first closable tab panel.</sl-tab-panel>
-  <sl-tab-panel name="closable-2">This is the second closable tab panel.</sl-tab-panel>
-  <sl-tab-panel name="closable-3">This is the third closable tab panel.</sl-tab-panel>
-</sl-tab-group>
-
-<script>
-  const tabGroup = document.querySelector('.tabs-closable');
-
-  tabGroup.addEventListener('sl-close', async event => {
-    const tab = event.target;
-    const panel = tabGroup.querySelector(`sl-tab-panel[name="${tab.panel}"]`);
-
-    // Show the previous tab if the tab is currently active
-    if (tab.active) {
-      tabGroup.show(tab.previousElementSibling.panel);
-    }
-
-    // Remove the tab + panel
-    tab.remove();
-    panel.remove();
-  });
-</script>
-```
-
-```jsx react
-import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
-
-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('sl-tab-group');
-    const tabPanel = tabGroup.querySelector(`[aria-labelledby="${tab.id}"]`);
-    
-    tab.remove();
-    tabPanel.remove();
-  }
-
-  return (
-    <SlTabGroup className="tabs-closable" onSlClose={handleClose}>
-      <SlTab slot="nav" panel="general">General</SlTab>
-      <SlTab slot="nav" panel="closable-1" closable onSlClose={handleClose}>Closable 1</SlTab>
-      <SlTab slot="nav" panel="closable-2" closable onSlClose={handleClose}>Closable 2</SlTab>
-      <SlTab slot="nav" panel="closable-3" closable onSlClose={handleClose}>Closable 3</SlTab>
-
-      <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
-      <SlTabPanel name="closable-1">This is the first closable tab panel.</SlTabPanel>
-      <SlTabPanel name="closable-2">This is the second closable tab panel.</SlTabPanel>
-      <SlTabPanel name="closable-3">This is the third closable tab panel.</SlTabPanel>
-    </SlTabGroup>
-  );
-};
-```
-
-### Scrolling Tabs
-
-When there are more tabs than horizontal space allows, the nav will be scrollable.
-
-```html preview
-<sl-tab-group>
-  <sl-tab slot="nav" panel="tab-1">Tab 1</sl-tab>
-  <sl-tab slot="nav" panel="tab-2">Tab 2</sl-tab>
-  <sl-tab slot="nav" panel="tab-3">Tab 3</sl-tab>
-  <sl-tab slot="nav" panel="tab-4">Tab 4</sl-tab>
-  <sl-tab slot="nav" panel="tab-5">Tab 5</sl-tab>
-  <sl-tab slot="nav" panel="tab-6">Tab 6</sl-tab>
-  <sl-tab slot="nav" panel="tab-7">Tab 7</sl-tab>
-  <sl-tab slot="nav" panel="tab-8">Tab 8</sl-tab>
-  <sl-tab slot="nav" panel="tab-9">Tab 9</sl-tab>
-  <sl-tab slot="nav" panel="tab-10">Tab 10</sl-tab>
-  <sl-tab slot="nav" panel="tab-11">Tab 11</sl-tab>
-  <sl-tab slot="nav" panel="tab-12">Tab 12</sl-tab>
-  <sl-tab slot="nav" panel="tab-13">Tab 13</sl-tab>
-  <sl-tab slot="nav" panel="tab-14">Tab 14</sl-tab>
-  <sl-tab slot="nav" panel="tab-15">Tab 15</sl-tab>
-  <sl-tab slot="nav" panel="tab-16">Tab 16</sl-tab>
-  <sl-tab slot="nav" panel="tab-17">Tab 17</sl-tab>
-  <sl-tab slot="nav" panel="tab-18">Tab 18</sl-tab>
-  <sl-tab slot="nav" panel="tab-19">Tab 19</sl-tab>
-  <sl-tab slot="nav" panel="tab-20">Tab 20</sl-tab>
-
-  <sl-tab-panel name="tab-1">Tab panel 1</sl-tab-panel>
-  <sl-tab-panel name="tab-2">Tab panel 2</sl-tab-panel>
-  <sl-tab-panel name="tab-3">Tab panel 3</sl-tab-panel>
-  <sl-tab-panel name="tab-4">Tab panel 4</sl-tab-panel>
-  <sl-tab-panel name="tab-5">Tab panel 5</sl-tab-panel>
-  <sl-tab-panel name="tab-6">Tab panel 6</sl-tab-panel>
-  <sl-tab-panel name="tab-7">Tab panel 7</sl-tab-panel>
-  <sl-tab-panel name="tab-8">Tab panel 8</sl-tab-panel>
-  <sl-tab-panel name="tab-9">Tab panel 9</sl-tab-panel>
-  <sl-tab-panel name="tab-10">Tab panel 10</sl-tab-panel>
-  <sl-tab-panel name="tab-11">Tab panel 11</sl-tab-panel>
-  <sl-tab-panel name="tab-12">Tab panel 12</sl-tab-panel>
-  <sl-tab-panel name="tab-13">Tab panel 13</sl-tab-panel>
-  <sl-tab-panel name="tab-14">Tab panel 14</sl-tab-panel>
-  <sl-tab-panel name="tab-15">Tab panel 15</sl-tab-panel>
-  <sl-tab-panel name="tab-16">Tab panel 16</sl-tab-panel>
-  <sl-tab-panel name="tab-17">Tab panel 17</sl-tab-panel>
-  <sl-tab-panel name="tab-18">Tab panel 18</sl-tab-panel>
-  <sl-tab-panel name="tab-19">Tab panel 19</sl-tab-panel>
-  <sl-tab-panel name="tab-20">Tab panel 20</sl-tab-panel>
-</sl-tab-group>
-```
-
-```jsx react
-import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlTabGroup>
-    <SlTab slot="nav" panel="tab-1">Tab 1</SlTab>
-    <SlTab slot="nav" panel="tab-2">Tab 2</SlTab>
-    <SlTab slot="nav" panel="tab-3">Tab 3</SlTab>
-    <SlTab slot="nav" panel="tab-4">Tab 4</SlTab>
-    <SlTab slot="nav" panel="tab-5">Tab 5</SlTab>
-    <SlTab slot="nav" panel="tab-6">Tab 6</SlTab>
-    <SlTab slot="nav" panel="tab-7">Tab 7</SlTab>
-    <SlTab slot="nav" panel="tab-8">Tab 8</SlTab>
-    <SlTab slot="nav" panel="tab-9">Tab 9</SlTab>
-    <SlTab slot="nav" panel="tab-10">Tab 10</SlTab>
-    <SlTab slot="nav" panel="tab-11">Tab 11</SlTab>
-    <SlTab slot="nav" panel="tab-12">Tab 12</SlTab>
-    <SlTab slot="nav" panel="tab-13">Tab 13</SlTab>
-    <SlTab slot="nav" panel="tab-14">Tab 14</SlTab>
-    <SlTab slot="nav" panel="tab-15">Tab 15</SlTab>
-    <SlTab slot="nav" panel="tab-16">Tab 16</SlTab>
-    <SlTab slot="nav" panel="tab-17">Tab 17</SlTab>
-    <SlTab slot="nav" panel="tab-18">Tab 18</SlTab>
-    <SlTab slot="nav" panel="tab-19">Tab 19</SlTab>
-    <SlTab slot="nav" panel="tab-20">Tab 20</SlTab>
-
-    <SlTabPanel name="tab-1">Tab panel 1</SlTabPanel>
-    <SlTabPanel name="tab-2">Tab panel 2</SlTabPanel>
-    <SlTabPanel name="tab-3">Tab panel 3</SlTabPanel>
-    <SlTabPanel name="tab-4">Tab panel 4</SlTabPanel>
-    <SlTabPanel name="tab-5">Tab panel 5</SlTabPanel>
-    <SlTabPanel name="tab-6">Tab panel 6</SlTabPanel>
-    <SlTabPanel name="tab-7">Tab panel 7</SlTabPanel>
-    <SlTabPanel name="tab-8">Tab panel 8</SlTabPanel>
-    <SlTabPanel name="tab-9">Tab panel 9</SlTabPanel>
-    <SlTabPanel name="tab-10">Tab panel 10</SlTabPanel>
-    <SlTabPanel name="tab-11">Tab panel 11</SlTabPanel>
-    <SlTabPanel name="tab-12">Tab panel 12</SlTabPanel>
-    <SlTabPanel name="tab-13">Tab panel 13</SlTabPanel>
-    <SlTabPanel name="tab-14">Tab panel 14</SlTabPanel>
-    <SlTabPanel name="tab-15">Tab panel 15</SlTabPanel>
-    <SlTabPanel name="tab-16">Tab panel 16</SlTabPanel>
-    <SlTabPanel name="tab-17">Tab panel 17</SlTabPanel>
-    <SlTabPanel name="tab-18">Tab panel 18</SlTabPanel>
-    <SlTabPanel name="tab-19">Tab panel 19</SlTabPanel>
-    <SlTabPanel name="tab-20">Tab panel 20</SlTabPanel>
-  </SlTabGroup>
-);
-```
-
-### Manual Activation
-
-When focused, keyboard users can press <kbd>Left</kbd> or <kbd>Right</kbd> 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 <kbd>Space</kbd> or <kbd>Enter</kbd> before showing the tab panel (manual activation).
-
-```html preview
-<sl-tab-group activation="manual">
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
-
-  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
-  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
-  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
-  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
-</sl-tab-group>
-```
-
-```jsx react
-import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlTabGroup activation="manual">
-    <SlTab slot="nav" panel="general">General</SlTab>
-    <SlTab slot="nav" panel="custom">Custom</SlTab>
-    <SlTab slot="nav" panel="advanced">Advanced</SlTab>
-    <SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
-
-    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
-    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
-    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
-    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
-  </SlTabGroup>
-);
-```
-
-[component-metadata:sl-tab-group]

docs/components/tab-panel.md

@@ -1,41 +0,0 @@
-# Tab Panel
-
-[component-header:sl-tab-panel]
-
-Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
-
-```html preview
-<sl-tab-group>
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
-
-  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
-  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
-  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
-  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
-</sl-tab-group>
-```
-
-```jsx react
-import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlTabGroup>
-    <SlTab slot="nav" panel="general">General</SlTab>
-    <SlTab slot="nav" panel="custom">Custom</SlTab>
-    <SlTab slot="nav" panel="advanced">Advanced</SlTab>
-    <SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
-
-    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
-    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
-    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
-    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
-  </SlTabGroup>
-);
-```
-
-?> Additional demonstrations can be found in the [tab group examples](/components/tab-group).
-
-[component-metadata:sl-tab-panel]

docs/components/tab.md

@@ -1,29 +0,0 @@
-# Tab
-
-[component-header:sl-tab]
-
-Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
-
-```html preview
-<sl-tab>Tab</sl-tab>
-<sl-tab active>Active</sl-tab>
-<sl-tab closable>Closable</sl-tab>
-<sl-tab disabled>Disabled</sl-tab>
-```
-
-```jsx react
-import { SlTab } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlTab>Tab</SlTab>
-    <SlTab active>Active</SlTab>
-    <SlTab closable>Closable</SlTab>
-    <SlTab disabled>Disabled</SlTab>
-  </>
-);
-```
-
-?> Additional demonstrations can be found in the [tab group examples](/components/tab-group).
-
-[component-metadata:sl-tab]

docs/components/tag.md

@@ -1,142 +0,0 @@
-# Tag
-
-[component-header:sl-tag]
-
-Tags are used as labels to organize things or to indicate a selection.
-
-```html preview
-<sl-tag variant="primary">Primary</sl-tag>
-<sl-tag variant="success">Success</sl-tag>
-<sl-tag variant="neutral">Neutral</sl-tag>
-<sl-tag variant="warning">Warning</sl-tag>
-<sl-tag variant="danger">Danger</sl-tag>
-```
-
-
-```jsx react
-import { SlTag } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlTag variant="primary">Primary</SlTag>
-    <SlTag variant="success">Success</SlTag>
-    <SlTag variant="neutral">Neutral</SlTag>
-    <SlTag variant="warning">Warning</SlTag>
-    <SlTag variant="danger">Danger</SlTag> 
-  </>
-);
-```
-
-## Examples
-
-### Sizes
-
-Use the `size` attribute to change a tab's size.
-
-```html preview
-<sl-tag size="small">Small</sl-tag>
-<sl-tag size="medium">Medium</sl-tag>
-<sl-tag size="large">Large</sl-tag>
-```
-
-```jsx react
-import { SlTag } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlTag size="small">Small</SlTag>
-    <SlTag size="medium">Medium</SlTag>
-    <SlTag size="large">Large</SlTag>
-  </>
-);
-```
-
-### Pill
-
-Use the `pill` attribute to give tabs rounded edges.
-
-```html preview
-<sl-tag size="small" pill>Small</sl-tag>
-<sl-tag size="medium" pill>Medium</sl-tag>
-<sl-tag size="large" pill>Large</sl-tag>
-```
-
-```jsx react
-import { SlTag } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlTag size="small" pill>Small</SlTag>
-    <SlTag size="medium" pill>Medium</SlTag>
-    <SlTag size="large" pill>Large</SlTag>
-  </>
-);
-```
-
-### Removable
-
-Use the `removable` attribute to add a remove button to the tag.
-
-```html preview
-<div class="tags-removable">
-  <sl-tag size="small" removable>Small</sl-tag>
-  <sl-tag size="medium" removable>Medium</sl-tag>
-  <sl-tag size="large" removable>Large</sl-tag>
-</div>
-
-<script>
-  const div = document.querySelector('.tags-removable');
-
-  div.addEventListener('sl-remove', event => {
-    const tag = event.target;
-    tag.style.opacity = '0';
-    setTimeout(() => tag.style.opacity = '1', 2000);
-  });
-</script>
-
-<style>
-  .tags-removable sl-tag {
-    transition: var(--sl-transition-medium) opacity;
-  }
-</style>
-```
-
-```jsx react
-import { SlTag } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .tags-removable sl-tag {
-    transition: var(--sl-transition-medium) 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">
-        <SlTag size="small" removable onSlRemove={handleRemove}>
-          Small
-        </SlTag>
-
-        <SlTag size="medium" removable onSlRemove={handleRemove}>
-          Medium
-        </SlTag>
-
-        <SlTag size="large" removable onSlRemove={handleRemove}>
-          Large
-        </SlTag>
-      </div>
-
-      <style>{css}</style>
-    </>
-  )
-};
-```
-
-[component-metadata:sl-tag]

docs/components/textarea.md

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

docs/components/tooltip.md

@@ -1,410 +0,0 @@
-# Tooltip
-
-[component-header:sl-tooltip]
-
-Tooltips display additional information based on a specific action.
-
-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 preview
-<sl-tooltip content="This is a tooltip">
-  <sl-button>Hover Me</sl-button>
-</sl-tooltip>
-```
-
-```jsx react
-import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlTooltip content="This is a tooltip">
-    <SlButton>Hover Me</SlButton>
-  </SlTooltip>  
-);
-```
-
-## Examples
-
-### Placement
-
-Use the `placement` attribute to set the preferred placement of the tooltip.
-
-```html preview
-<div class="tooltip-placement-example">
-  <div class="tooltip-placement-example-row">
-    <sl-tooltip content="top-start" placement="top-start">
-      <sl-button></sl-button>
-    </sl-tooltip>
-
-    <sl-tooltip content="top" placement="top">
-      <sl-button></sl-button>
-    </sl-tooltip>
-
-    <sl-tooltip content="top-end" placement="top-end">
-      <sl-button></sl-button>
-    </sl-tooltip>
-  </div>
-
-  <div class="tooltip-placement-example-row">
-    <sl-tooltip content="left-start" placement="left-start">
-      <sl-button></sl-button>
-    </sl-tooltip>
-
-    <sl-tooltip content="right-start" placement="right-start">
-      <sl-button></sl-button>
-    </sl-tooltip>
-  </div>
-
-  <div class="tooltip-placement-example-row">
-    <sl-tooltip content="left" placement="left">
-      <sl-button></sl-button>
-    </sl-tooltip>
-
-    <sl-tooltip content="right" placement="right">
-      <sl-button></sl-button>
-    </sl-tooltip>
-  </div>
-
-  <div class="tooltip-placement-example-row">
-    <sl-tooltip content="left-end" placement="left-end">
-      <sl-button></sl-button>
-    </sl-tooltip>
-
-    <sl-tooltip content="right-end" placement="right-end">
-      <sl-button></sl-button>
-    </sl-tooltip>
-  </div>
-
-  <div class="tooltip-placement-example-row">
-    <sl-tooltip content="bottom-start" placement="bottom-start">
-      <sl-button></sl-button>
-    </sl-tooltip>
-
-    <sl-tooltip content="bottom" placement="bottom">
-      <sl-button></sl-button>
-    </sl-tooltip>
-
-    <sl-tooltip content="bottom-end" placement="bottom-end">
-      <sl-button></sl-button>
-    </sl-tooltip>
-  </div>
-</div>
-
-<style>
-  .tooltip-placement-example {
-    width: 250px;
-  }
-
-  .tooltip-placement-example-row:after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-
-  .tooltip-placement-example sl-button {
-    float: left;
-    width: 2.5rem;
-    margin-right: 0.25rem;
-    margin-bottom: 0.25rem;
-  }
-
-  .tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
-  .tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button {
-    margin-left: calc(40px + 0.25rem);
-  }
-
-  .tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
-  .tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
-  .tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button {
-    margin-left: calc((40px * 3) + (0.25rem * 3));
-  }
-</style>
-```
-
-```jsx react
-import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .tooltip-placement-example {
-    width: 250px;
-  }
-
-  .tooltip-placement-example-row:after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-
-  .tooltip-placement-example sl-button {
-    float: left;
-    width: 2.5rem;
-    margin-right: 0.25rem;
-    margin-bottom: 0.25rem;
-  }
-
-  .tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
-  .tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button {
-    margin-left: calc(40px + 0.25rem);
-  }
-
-  .tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
-  .tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
-  .tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button {
-    margin-left: calc((40px * 3) + (0.25rem * 3));
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="tooltip-placement-example">
-      <div className="tooltip-placement-example-row">
-        <SlTooltip content="top-start" placement="top-start">
-          <SlButton />
-        </SlTooltip>
-
-        <SlTooltip content="top" placement="top">
-          <SlButton />
-        </SlTooltip>
-
-        <SlTooltip content="top-end" placement="top-end">
-          <SlButton />
-        </SlTooltip>
-      </div>
-
-      <div className="tooltip-placement-example-row">
-        <SlTooltip content="left-start" placement="left-start">
-          <SlButton />
-        </SlTooltip>
-
-        <SlTooltip content="right-start" placement="right-start">
-          <SlButton />
-        </SlTooltip>
-      </div>
-
-      <div className="tooltip-placement-example-row">
-        <SlTooltip content="left" placement="left">
-          <SlButton />
-        </SlTooltip>
-
-        <SlTooltip content="right" placement="right">
-          <SlButton />
-        </SlTooltip>
-      </div>
-
-      <div className="tooltip-placement-example-row">
-        <SlTooltip content="left-end" placement="left-end">
-          <SlButton />
-        </SlTooltip>
-
-        <SlTooltip content="right-end" placement="right-end">
-          <SlButton />
-        </SlTooltip>
-      </div>
-
-      <div className="tooltip-placement-example-row">
-        <SlTooltip content="bottom-start" placement="bottom-start">
-          <SlButton />
-        </SlTooltip>
-
-        <SlTooltip content="bottom" placement="bottom">
-          <SlButton />
-        </SlTooltip>
-
-        <SlTooltip content="bottom-end" placement="bottom-end">
-          <SlButton />
-        </SlTooltip>
-      </div>
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-### Click Trigger
-
-Set the `trigger` attribute to `click` to toggle the tooltip on click instead of hover.
-
-```html preview
-<sl-tooltip content="Click again to dismiss" trigger="click">
-  <sl-button>Click to Toggle</sl-button>
-</sl-tooltip>
-```
-
-```jsx react
-import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlTooltip content="Click again to dismiss" trigger="click">
-    <SlButton>Click to Toggle</SlButton>
-  </SlTooltip>  
-);
-```
-
-### 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 preview
-<sl-button style="margin-right: 4rem;">Toggle Manually</sl-button>
-
-<sl-tooltip content="This is an avatar" trigger="manual" class="manual-tooltip">
-  <sl-avatar></sl-avatar>
-</sl-tooltip>
-
-<script>
-  const tooltip = document.querySelector('.manual-tooltip');
-  const toggle = tooltip.previousElementSibling;
-
-  toggle.addEventListener('click', () => (tooltip.open = !tooltip.open));
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlAvatar, SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <SlButton
-        style={{ marginRight: '4rem' }}
-        onClick={() => setOpen(!open)}
-      >
-        Toggle Manually
-      </SlButton>
-
-      <SlTooltip open={open} content="This is an avatar" trigger="manual">
-        <SlAvatar />
-      </SlTooltip>
-    </>
-  );
-};
-```
-
-### Remove Arrows
-
-You can control the size of tooltip arrows by overriding the `--sl-tooltip-arrow-size` design token.
-
-```html preview
-<div style="--sl-tooltip-arrow-size: 0;">
-  <sl-tooltip content="This is a tooltip">
-    <sl-button>Above</sl-button>
-  </sl-tooltip>
-
-  <sl-tooltip content="This is a tooltip" placement="bottom">
-    <sl-button>Below</sl-button>
-  </sl-tooltip>
-</div>
-```
-
-```jsx react
-import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <div style={{ '--sl-tooltip-arrow-size': '0' }}>
-    <SlTooltip content="This is a tooltip">
-      <SlButton>Above</SlButton>
-    </SlTooltip>
-
-    <SlTooltip content="This is a tooltip" placement="bottom">
-      <SlButton>Below</SlButton>
-    </SlTooltip>
-  </div>
-);
-```
-
-To override it globally, set it in a root block in your stylesheet after the Shoelace stylesheet is loaded.
-
-```css
-:root {
-  --sl-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 preview
-<sl-tooltip>
-  <div slot="content">
-    I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
-  </div>
-  
-  <sl-button>Hover me</sl-button>
-</sl-tooltip>
-```
-
-```jsx react
-import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlTooltip content="This is a tooltip">
-    <div slot="content">
-      I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
-    </div>
-
-    <SlButton>Hover Me</SlButton>
-  </SlTooltip>  
-);
-```
-
-### 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, 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 preview
-<div class="tooltip-hoist">
-  <sl-tooltip content="This is a tooltip">
-    <sl-button>No Hoist</sl-button>
-  </sl-tooltip>
-
-  <sl-tooltip content="This is a tooltip" hoist>
-    <sl-button>Hoist</sl-button>
-  </sl-tooltip>
-</div>
-
-<style>
-  .tooltip-hoist {
-    border: solid 2px var(--sl-panel-border-color);
-    overflow: hidden;
-    padding: var(--sl-spacing-medium);
-    position: relative;
-  }
-</style>
-```
-
-```jsx react
-import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .tooltip-hoist {
-    border: solid 2px var(--sl-panel-border-color);
-    overflow: hidden;
-    padding: var(--sl-spacing-medium);
-    position: relative;
-  }
-`;
-
-const App = () => (
-  <>
-    <div class="tooltip-hoist">
-      <SlTooltip content="This is a tooltip">
-        <SlButton>No Hoist</SlButton>
-      </SlTooltip>
-
-      <SlTooltip content="This is a tooltip" hoist>
-        <SlButton>Hoist</SlButton>
-      </SlTooltip>
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-[component-metadata:sl-tooltip]

docs/components/visually-hidden.md

@@ -1,47 +0,0 @@
-# Visually Hidden
-
-[component-header:sl-visually-hidden]
-
-The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
-
-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 keyboards user won't be able to determine where the focus indicator is without it.
-
-```html preview
-<div style="min-height: 100px;">
-  <sl-visually-hidden>
-    <a href="#">Skip to main content</a>
-  </sl-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 preview
-<a href="https://example.com/" target="_blank">
-  Visit External Page
-  <sl-icon name="box-arrow-up-right"></sl-icon>
-  <sl-visually-hidden>opens in a new window</sl-visually-hidden>
-</a>
-```
-
-### Content Conveyed By Context
-
-Adding a title or 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.
-
-```html preview
-<sl-card style="width: 100%; max-width: 360px;">
-  <header>
-    <sl-visually-hidden>Personal Info</sl-visually-hidden>
-  </header>
-  <sl-input label="Name" style="margin-bottom: .5rem;"></sl-input>
-  <sl-input label="Email" type="email"></sl-input>
-</sl-card>
-```
-
-[component-metadata:sl-visually-hidden]

docs/frameworks/angular.md

@@ -1,46 +0,0 @@
-# Angular
-
-Angular [plays nice](https://custom-elements-everywhere.com/#angular) with custom elements, so you can use Shoelace in your Angular apps with ease.
-
-## Installation
-
-To add Shoelace to your Angular app, install the package from npm.
-
-```bash
-npm install @shoelace-style/shoelace
-```
-
-Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
-
-```jsx
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
-
-setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/');
-```
-
-?> If you'd rather not use the CDN for assets, you can create a build task that copies `node_modules/@shoelace-style/shoelace/dist/assets` into a public folder in your app. Then you can point the base path to that folder instead.
-
-## Configuration
-
-Then make sure to apply the custom elements schema as shown below.
-
-```js
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule],
-  providers: [],
-  bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class AppModule {}
-```
-
-Now you can start using Shoelace components in your app!
-
-?> Are you using Shoelace with Angular? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/angular.md)

docs/frameworks/react.md

@@ -1,156 +0,0 @@
-# React
-
-Shoelace offers a React version of every component to provide an idiomatic experience for React users. You can easily toggle between HTML and React examples throughout the documentation.
-
-## Installation
-
-To add Shoelace to your React app, install the package from npm.
-
-```bash
-npm install @shoelace-style/shoelace
-```
-
-Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
-
-```jsx
-// App.jsx
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
-
-setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/');
-```
-
-?> If you'd rather not use the CDN for assets, you can create a [build task](https://webpack.js.org/plugins/copy-webpack-plugin/) that copies `node_modules/@shoelace-style/shoelace/dist/assets` into your app's `public` directory. Then you can point the base path to that folder instead.
-
-Now you can start using components!
-
-## Usage
-
-### Importing Components
-
-Every Shoelace component is available to import as a React component. Note that we're importing the `<SlButton>` _React component_ instead of the `<sl-button>` _custom element_ in the example below.
-
-```jsx
-import { SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const MyComponent = () => (
-  <SlButton variant="primary">
-    Click me
-  </SlButton>
-);
-
-export default MyComponent;
-```
-
-You can find a copy + paste import for each component in the "importing" section of its documentation.
-
-### Event Handling
-
-Many Shoelace components emit [custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). For example, the [input component](/components/input) emits the `sl-input` event when it receives input. In React, you can listen for the event using `onSlInput`.
-
-Here's how you can bind the input's value to a state variable.
-
-```jsx
-import { useState } from 'react';
-import { SlInput } from '@shoelace-style/shoelace/dist/react';
-
-function MyComponent() {
-  const [value, setValue] = useState('');
-
-  return (
-    <SlInput 
-      value={value} 
-      onSlInput={event => setValue(event.target.value)} 
-    />
-  )
-};
-
-export default MyComponent;
-```
-
-If you're using TypeScript, it's important to note that `event.target` will be a reference to the underlying custom element. You can use `(event.target as any).value` as a quick fix, or you can strongly type the event target as shown below.
-
-```tsx
-import { useState } from 'react';
-import { SlInput } from '@shoelace-style/shoelace/dist/react';
-import type SlInputElement from '@shoelace-style/shoelace/dist/components/input/input';
-
-function MyComponent() {
-  const [value, setValue] = useState('');
-
-  return (
-    <SlInput 
-      value={value} 
-      onSlInput={event => setValue((event.target as SlInputElement).value)} 
-    />
-  )
-};
-
-export default MyComponent;
-```
-
-## Testing with Jest
-
-Testing with web components can be challenging if your test environment runs in a Node environment (i.e. it doesn't run in a real browser). Fortunately, [Jest](https://jestjs.io/) has made a number of strides to support web components and provide additional browser APIs. However, it's still not a complete replication of a browser environment.
-
-Here are some tips that will help smooth things over if you're having trouble with Jest + Shoelace.
-
-?> If you're looking for a fast, modern testing alternative, consider [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/).
-
-### Upgrade Jest
-
-Jest underwent a major revamp and received support for web components in [version 26.5.0](https://github.com/facebook/jest/blob/main/CHANGELOG.md#2650) when it introduced [JSDOM 16.2.0](https://github.com/jsdom/jsdom/blob/master/Changelog.md#1620). This release also included a number of mocks for built-in browser functions such as `MutationObserver`, `document.createRange`, and others.
-
-If you're using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app), you can update `react-scripts` which will also update Jest.
-
-```
-npm install react-scripts@latest
-```
-
-### Mock Missing APIs
-
-Some components use `window.matchMedia`, but this function isn't supported by JSDOM so you'll need to mock it yourself.
-
-In `src/setupTests.js`, add the following.
-
-```js
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});
-```
-
-For more details, refer to Jest's [manual mocking](https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom) documentation.
-
-### Transform ES Modules
-
-ES Modules are a [well-supported browser standard](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/). This is how Shoelace is distributed, but most React apps expect CommonJS. As a result, you'll probably run into the following error.
-
-```
-Error: Unable to import outside of a module
-```
-
-To fix this, add the following to your `package.json` which tells the transpiler to process Shoelace modules.
-
-```js
-{
-  "jest": {
-    "transformIgnorePatterns": ["node_modules/?!(@shoelace)"]
-  }
-}
-```
-
-These instructions are for apps created via Create React App. If you're using Jest directly, you can add `transformIgnorePatterns` directly into `jest.config.js`.
-
-For more details, refer to Jest's [`transformIgnorePatterns` customization](https://jestjs.io/docs/tutorial-react-native#transformignorepatterns-customization) documentation.
-
-?> Are you using Shoelace with React? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/react.md)

docs/frameworks/vue.md

@@ -1,92 +0,0 @@
-# Vue
-
-Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Shoelace in your Vue apps with ease.
-
-?> These instructions are for Vue 2. If you're using Vue 3, [please help us update this page](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md).
-
-## Installation
-
-To add Shoelace to your Vue app, install the package from npm.
-
-```bash
-npm install @shoelace-style/shoelace
-```
-
-Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
-
-```jsx
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
-
-setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/');
-```
-
-?> If you'd rather not use the CDN for assets, you can create a build task that copies `node_modules/@shoelace-style/shoelace/dist/assets` into a public folder in your app. Then you can point the base path to that folder instead.
-
-## Configuration
-
-You'll need to tell Vue to ignore Shoelace components. This is pretty easy because they all start with `sl-`.
-
-```js
-import { createApp } from 'vue';
-import App from './App.vue';
-
-const app = createApp(App);
-
-app.config.compilerOptions.isCustomElement = tag => tag.startsWith('sl-');
-
-app.mount('#app');
-```
-
-Now you can start using Shoelace components in your app!
-
-## Usage
-
-### Binding Complex Data
-
-When binding complex data such as objects and arrays, use the `.prop` modifier to make Vue bind them as a property instead of an attribute.
-
-```html
-<sl-color-picker :swatches.prop="mySwatches" />
-```
-
-### Two-way Binding
-
-One caveat is there's currently [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830), but you can still achieve two-way binding manually.
-
-```html
-<!-- This doesn't work -->
-<sl-input v-model="name">
-
-<!-- This works, but it's a bit longer -->
-<sl-input :value="name" @input="name = $event.target.value">
-```
-
-If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Shoelace components. To install it, use this command.
-
-```bash
-npm install @shoelace-style/vue-sl-model
-```
-
-Next, import the directive and enable it like this.
-
-```js
-import ShoelaceModelDirective from '@shoelace-style/vue-sl-model';
-import { createApp } from 'vue';
-import App from './App.vue';
-
-const app = createApp(App);
-app.use(ShoelaceModelDirective);
-
-app.config.compilerOptions.isCustomElement = tag => tag.startsWith('sl-');
-
-app.mount('#app');
-```
-
-Now you can use the `v-sl-model` directive to keep your data in sync!
-
-```html
-<sl-input v-sl-model="name">
-```
-
-?> Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md)

docs/getting-started/customizing.md

@@ -1,153 +0,0 @@
-# Customizing
-
-Shoelace 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 component parts and custom properties to target individual components.
-
-## Design Tokens
-
-Shoelace 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 [Component Parts](#component-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 `--sl-` 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 */
-  --sl-color-primary-50: var(--sl-color-purple-50);
-  --sl-color-primary-100: var(--sl-color-purple-100);
-  --sl-color-primary-200: var(--sl-color-purple-200);
-  --sl-color-primary-300: var(--sl-color-purple-300);
-  --sl-color-primary-400: var(--sl-color-purple-400);
-  --sl-color-primary-500: var(--sl-color-purple-500);
-  --sl-color-primary-600: var(--sl-color-purple-600);
-  --sl-color-primary-700: var(--sl-color-purple-700);
-  --sl-color-primary-800: var(--sl-color-purple-800);
-  --sl-color-primary-900: var(--sl-color-purple-900);
-  --sl-color-primary-950: var(--sl-color-purple-950);
-}
-```
-
-Many design tokens are described further along in this documentation. For a complete list, refer to `src/themes/light.styles.ts` in the project's [source code](https://github.com/shoelace-style/shoelace/blob/current/src/themes/light.styles.ts).
-
-## Component Parts
-
-Whereas design tokens offer a high-level way to customize the library, component parts offer a low-level way to customize individual components. Again, this is done with pure CSS — no preprocessor required.
-
-Shoelace 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 preview
-<sl-button class="tomato-button"> Tomato Button </sl-button>
-
-<style>
-  .tomato-button::part(base) {
-    background: var(--sl-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 component 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 `--sl-` prefix since they're scoped to a component.
-
-You can set custom properties on a component in your stylesheet.
-
-```css
-sl-avatar {
-  --size: 6rem;
-}
-```
-
-This will also work if you need to target a subset of components with a specific class.
-
-```css
-sl-avatar.your-class {
-  --size: 6rem;
-}
-```
-
-Alternatively, you can set them inline directly on the element.
-
-```html
-<sl-avatar style="--size: 6rem;"></sl-avatar>
-```
-
-Not all components expose CSS custom properties. For those that do, they can be found in the component's API documentation.
-
-## Animations
-
-Some components use animation, such as when a dialog is shown or hidden. Animations are performed using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) rather than CSS. However, you can still customize them through Shoelace's animation registry. If a component has customizable animations, they'll be listed in the "Animation" section of its documentation.
-
-To customize a default animation, use the `setDefaultAnimation()` method. The function accepts an animation name (found in the component's docs) and an object with `keyframes` and `options` or `null` to disable the animation.
-
-This example will make all dialogs use a custom show animation.
-
-```js
-import { setDefaultAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry.js';
-
-// Change the default animation for all dialogs
-setDefaultAnimation('dialog.show', {
-  keyframes: [
-    { transform: 'rotate(-10deg) scale(0.5)', opacity: '0' },
-    { transform: 'rotate(0deg) scale(1)', opacity: '1' }
-  ],
-  options: {
-    duration: 500
-  }
-});
-```
-
-If you only want to target a single component, use the `setAnimation()` method instead. This function accepts an element, an animation name, and an object comprised of animation `keyframes` and `options`.
-
-In this example, only the target dialog will use a custom show animation.
-
-```js
-import { setAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry.js';
-
-// Change the animation for a single dialog
-const dialog = document.querySelector('#my-dialog');
-
-setAnimation(dialog, 'dialog.show', {
-  keyframes: [
-    { transform: 'rotate(-10deg) scale(0.5)', opacity: '0' },
-    { transform: 'rotate(0deg) scale(1)', opacity: '1' }
-  ],
-  options: {
-    duration: 500
-  }
-});
-```
-
-To learn more about creating Web Animations, refer to the documentation for [`Element.animate()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate).
-
-?> Animations respect the users `prefers-reduced-motion` setting. When this setting is enabled, animations will not be played. To disable animations for all users, pass in `null` instead of a keyframes/options object.

docs/getting-started/form-controls.md

@@ -1,336 +0,0 @@
-# Form Controls
-
-Every Shoelace component makes use of a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate markup, styles, and behavior. One caveat of this approach is that native `<form>` elements do not recognize form controls located inside a shadow root.
-
-Shoelace solves this problem by using the [`formdata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event) event, which is [available in all modern browsers](https://caniuse.com/mdn-api_htmlformelement_formdata_event). This means, when a form is submitted, Shoelace form controls will automatically append their values to the `FormData` object that's used to submit the form. In most cases, things will "just work." However, if you're using a form serialization library, it might need to be adapted to recognize Shoelace form controls.
-
-?> If you're using an older browser that doesn't support the `formdata` event, a lightweight polyfill will be automatically applied to ensure forms submit as expected.
-
-## Form Serialization
-
-Serialization is just a fancy word for collecting form data. If you're relying on standard form submissions, e.g. `<form action="...">`, you can probably skip this section. However, most modern apps use the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) or a library such as [axios](https://github.com/axios/axios) to submit forms using JavaScript.
-
-The [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) interface offers a standard way to serialize forms in the browser. You can create a `FormData` object from any `<form>` element like this.
-
-```js
-const form = document.querySelector('form');
-const data = new FormData(form);
-
-// All form control data is available in a FormData object
-```
-
-However, some folks find `FormData` tricky to work with or they need to pass a JSON payload to their server. To accommodate this, Shoelace offers a serialization utility that gathers form data and returns a simple JavaScript object instead.
-
-```js
-import { serialize } from '@shoelace-style/shoelace/dist/utilities/form.js';
-
-const form = document.querySelector('form');
-const data = serialize(form);
-
-// All form control data is available in a plain object
-```
-
-This results in an object with name/value pairs that map to each form control. If more than one form control shares the same name, the values will be passed as an array, e.g. `{ name: ['value1', 'value2'] }`.
-
-## Form Control Validation
-
-Client-side validation can be enabled through the browser's [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for Shoelace form controls. You can activate it using attributes such as `required`, `pattern`, `minlength`, and `maxlength`. Shoelace implements many of the same attributes as native form controls, but check each form control's documentation for a list of all supported properties.
-
-As the user interacts with a form control, its `invalid` attribute will reflect its validity based on its current value and the constraints that have been defined. When a form control is invalid, the containing form will not be submitted. Instead, the browser will show the user a relevant error message. If you don't want to use client-side validation, you can suppress this behavior by adding `novalidate` to the surrounding `<form>` element.
-
-All form controls support validation, but not all validation props are available for every component. Refer to a component's documentation to see which validation props it supports.
-
-!> Client-side validation can be used to improve the UX of forms, but it is not a replacement for server-side validation. **You should always validate and sanitize user input on the server!**
-
-### Required Fields
-
-To make a field required, use the `required` prop. The form will not be submitted if a required form control is empty.
-
-```html preview
-<form class="input-validation-required">
-  <sl-input name="name" label="Name" required></sl-input>
-  <br>
-  <sl-select label="Favorite Animal" clearable required>
-    <sl-menu-item value="birds">Birds</sl-menu-item>
-    <sl-menu-item value="cats">Cats</sl-menu-item>
-    <sl-menu-item value="dogs">Dogs</sl-menu-item>
-    <sl-menu-item value="other">Other</sl-menu-item>
-  </sl-select>
-  <br>
-  <sl-textarea name="comment" label="Comment" required></sl-textarea>
-  <br>
-  <sl-checkbox required>Check me before submitting</sl-checkbox>
-  <br><br>
-  <sl-button type="submit" variant="primary">Submit</sl-button>
-</form>
-
-<script>
-  const form = document.querySelector('.input-validation-required');
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!')
-  });
-</script>
-```
-
-```jsx react
-import { 
-  SlButton,
-  SlCheckbox, 
-  SlInput,
-  SlMenuItem, 
-  SlSelect,
-  SlTextarea
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  function handleSubmit(event) {
-    event.preventDefault();
-    alert('All fields are valid!');
-  }
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <SlInput name="name" label="Name" required />
-      <br />
-      <SlSelect label="Favorite Animal" clearable required>
-        <SlMenuItem value="birds">Birds</SlMenuItem>
-        <SlMenuItem value="cats">Cats</SlMenuItem>
-        <SlMenuItem value="dogs">Dogs</SlMenuItem>
-        <SlMenuItem value="other">Other</SlMenuItem>
-      </SlSelect>
-      <br />
-      <SlTextarea name="comment" label="Comment" required></SlTextarea>
-      <br />
-      <SlCheckbox required>Check me before submitting</SlCheckbox>
-      <br /><br />
-      <SlButton type="submit" variant="primary">Submit</SlButton>
-    </form>
-  );
-};
-```
-
-### Input Patterns
-
-To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern), use the `pattern` attribute. This example only allows the letters A-Z, so the form will not submit if a number or symbol is entered. This only works with `<sl-input>` elements.
-
-```html preview
-<form class="input-validation-pattern">
-  <sl-input name="letters" required label="Letters" pattern="[A-Za-z]+"></sl-input>
-  <br>
-  <sl-button type="submit" variant="primary">Submit</sl-button>
-</form>
-
-<script>
-  const form = document.querySelector('.input-validation-pattern');
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!')
-  });
-</script>
-```
-
-```jsx react
-import { SlButton, SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  function handleSubmit(event) {
-    event.preventDefault();
-    alert('All fields are valid!');
-  }
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <SlInput name="letters" required label="Letters" pattern="[A-Za-z]+" />
-      <br />
-      <SlButton type="submit" variant="primary">Submit</SlButton>
-    </form>
-  );
-};
-```
-
-### Input Types
-
-Some input types will automatically trigger constraints, such as `email` and `url`.
-
-```html preview
-<form class="input-validation-type">
-  <sl-input variant="email" label="Email" placeholder="you@example.com" required></sl-input>
-  <br>
-  <sl-input variant="url" label="URL" placeholder="https://example.com/" required></sl-input>
-  <br>
-  <sl-button type="submit" variant="primary">Submit</sl-button>
-</form>
-
-<script>
-  const form = document.querySelector('.input-validation-type');
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!')
-  });
-</script>
-```
-
-```jsx react
-import { SlButton, SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  function handleSubmit(event) {
-    event.preventDefault();
-    alert('All fields are valid!');
-  }
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <SlInput variant="email" label="Email" placeholder="you@example.com" required />
-      <br />
-      <SlInput variant="url" label="URL" placeholder="https://example.com/" required />
-      <br />
-      <SlButton type="submit" variant="primary">Submit</SlButton>
-    </form>
-  );
-};
-```
-
-### Custom Validation
-
-To create a custom validation error, use the `setCustomValidity` method. The form will not be submitted when this method is called with anything other than an empty string, and its message will be shown by the browser as the validation error. To make the input valid again, call the method a second time with an empty string as the argument.
-
-```html preview
-<form class="input-validation-custom">
-  <sl-input label="Type 'shoelace'" required></sl-input>
-  <br>
-  <sl-button type="submit" variant="primary">Submit</sl-button>
-</form>
-
-<script>
-  const form = document.querySelector('.input-validation-custom');
-  const input = form.querySelector('sl-input');
-
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!')
-  });
-
-  input.addEventListener('sl-input', () => {
-    if (input.value === 'shoelace') {
-      input.setCustomValidity('');
-    } else {
-      input.setCustomValidity('Hey, you\'re supposed to type \'shoelace\' before submitting this!');
-    }
-  });
-</script>
-```
-
-```jsx react
-import { useRef, useState } from 'react';
-import { SlButton, SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const input = useRef(null);
-  const [value, setValue] = useState('');
-
-  function handleInput(event) {
-    setValue(event.target.value);
-
-    if (event.target.value === 'shoelace') {
-      input.current.setCustomValidity('');
-    } else {
-      input.current.setCustomValidity('Hey, you\'re supposed to type \'shoelace\' before submitting this!');
-    }
-  }
-
-  function handleSubmit(event) {
-    event.preventDefault();
-    alert('All fields are valid!');
-  }
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <SlInput 
-        ref={input}
-        label="Type 'shoelace'" 
-        required 
-        value={value} 
-        onSlInput={handleInput}
-      />
-      <br />
-      <SlButton type="submit" variant="primary">Submit</SlButton>
-    </form>
-  );
-};
-```
-
-### Custom Validation Styles
-
-The `invalid` attribute reflects the form control's validity, so you can style invalid fields using the `[invalid]` selector. The example below demonstrates how you can give erroneous fields a different appearance. Type something other than "shoelace" to demonstrate this.
-
-```html preview
-<sl-input class="custom-input" required pattern="shoelace">
-  <small slot="help-text">Please enter "shoelace" to continue</small>
-</sl-input>
-
-<style>
-  .custom-input[invalid]:not([disabled])::part(label),
-  .custom-input[invalid]:not([disabled])::part(help-text) {
-    color: var(--sl-color-danger-600);
-  }
-
-  .custom-input[invalid]:not([disabled])::part(base) {      
-    border-color: var(--sl-color-danger-500);
-  } 
-
-  .custom-input[invalid]:focus-within::part(base) {
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-500);
-  }
-</style>
-```
-
-```jsx react
-import { SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .custom-input[invalid]:not([disabled])::part(label),
-  .custom-input[invalid]:not([disabled])::part(help-text) {
-    color: var(--sl-color-danger-600);
-  }
-
-  .custom-input[invalid]:not([disabled])::part(base) {      
-    border-color: var(--sl-color-danger-500);
-  } 
-
-  .custom-input[invalid]:focus-within::part(base) {
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-500);
-  }
-`;
-
-const App = () => (
-  <>
-    <SlInput className="custom-input" required pattern="shoelace">
-      <small slot="help-text">Please enter "shoelace" to continue</small>
-    </SlInput>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-### Third-party Validation
-
-To opt out of the browser's built-in validation and use your own, add the `novalidate` attribute to the form. This will ignore all constraints and prevent the browser from showing its own warnings when form controls are invalid.
-
-Remember that the `invalid` attribute on form controls reflects validity as defined by the [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation). You can set it initially, but the `invalid` attribute will update as the user interacts with the form control. As such, you should not rely on it to set invalid styles using a custom validation library.
-
-Instead, toggle a class and target it in your stylesheet as shown below.
-
-```html
-<form novalidate>
-  <sl-input class="invalid"></sl-input>
-</form>
-
-<style>
-  sl-input.invalid {
-    ...
-  }
-</style>
-```

docs/getting-started/installation.md

@@ -1,137 +0,0 @@
-# Installation
-
-You can use Shoelace via CDN or by installing it locally. You can also [cherry pick](#cherry-picking) individual components for faster load times.
-
-If you're using a framework, make sure to check out the pages for [React](/frameworks/react), [Vue](/frameworks/vue), and [Angular](/frameworks/angular).
-
-## CDN Installation (Easiest)
-
-The easiest way to install Shoelace is with the CDN. Just add the following tags to your page to get all components and the default light theme.
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
-```
-
-?> If you're only using a handful of components, it will be more efficient to [cherry pick](#cherry-picking) the ones you need.
-
-### Dark Theme
-
-If you prefer to use the [dark theme](/getting-started/themes#dark-theme) instead, use this code and add `<html class="sl-theme-dark">` to the page.
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/dark.css">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
-```
-
-### Light & Dark Theme
-
-If you want to load the light or dark theme based on the user's `prefers-color-scheme` setting, use this. 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%/dist/themes/light.css">
-<link rel="stylesheet" media="(prefers-color-scheme:dark)"
-      href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/dark.css"
-      onload="document.documentElement.classList.add('sl-theme-dark');">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
-```
-
-Now you can [start using Shoelace!](/getting-started/usage)
-
-## Local Installation
-
-If you don't want to use the CDN, you can install Shoelace locally 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/dist/themes/light.css">
-<script type="module" src="/shoelace/dist/shoelace.js"></script>
-```
-
-Alternatively, [you can use a bundler](#bundling).
-
-?> 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 Shoelace is in.
-
-## Setting the Base Path
-
-Some components rely on assets (icons, images, etc.) and Shoelace needs to know where they're located. For convenience, Shoelace will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `shoelace.js` and will "just work" for most users.
-
-However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Shoelace, you'll need to set the base path. You can do this one of two ways.
-
-```html
-<!-- Option 1: the data-shoelace attribute -->
-<script src="bundle.js" data-shoelace="/path/to/shoelace/dist"></script>
-
-<!-- Option 2: the setBasePath() method -->
-<script src="bundle.js"></script>
-<script type="module">
-  import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
-  setBasePath('/path/to/shoelace/dist');
-</script>
-```
-
-?> The library also exports a `getBasePath()` method you can use to reference assets.
-
-## Cherry Picking
-
-The previous approach is the _easiest_ way to load Shoelace, but easy isn't always efficient. You'll incur the full size of the library even if you only use a handful of components. This is convenient for prototyping or if you're using most of the components, but it may result in longer load times in production. To improve this, you can cherry pick the components you need.
-
-Cherry picking can be done from your local install or [directly from the CDN](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/). This will limit the number of files the browser has to download and reduce the amount of bytes being transferred. The disadvantage is that you need to load component manually.
-
-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 Shoelace is in.
-
-```html
-<link rel="stylesheet" href="/path/to/shoelace/dist/themes/light.css">
-
-<script type="module" data-shoelace="/path/to/shoelace/dist">
-  import '@shoelace-style/shoelace/dist/components/button/button.js';
-
-  // <sl-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.
-
-!> Never cherry pick components or utilities from `shoelace.js` as this will cause the browser to load the entire library. Instead, cherry pick from specific modules as shown above.
-
-!> 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
-
-Shoelace 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 Shoelace with a bundler, first install Shoelace along with your bundler of choice.
-
-```bash
-npm install @shoelace-style/shoelace
-```
-
-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 Shoelace components and utilities.
-
-```js
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import '@shoelace-style/shoelace/dist/components/button/button.js';
-import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import '@shoelace-style/shoelace/dist/components/input/input.js';
-import '@shoelace-style/shoelace/dist/components/rating/rating.js';
-import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
-
-// Set the base path to the folder you copied Shoelace's assets to
-setBasePath('/path/to/shoelace/dist');
-
-// <sl-button>, <sl-icon>, <sl-input>, and <sl-rating> are ready to use!
-```
-
-!> Component modules include side effects for registration purposes. Because of this, importing directly from `@shoelace-style/shoelace` may result in a larger bundle size than necessary. For optimal tree shaking, always cherry pick, i.e. import components and utilities from their respective files, as shown above.

docs/getting-started/overview.md

@@ -1,131 +0,0 @@
-<div class="splash">
-<div class="splash-start">
-<img class="splash-logo" src="/assets/images/wordmark.svg" alt="Shoelace">
-
-# <span hidden>Shoelace:</span> A forward-thinking library of web components.
-
-- Works with all frameworks 🧩
-- Works with CDNs 🚛
-- Fully customizable with CSS 🎨
-- Includes a dark theme 🌛
-- Built with accessibility in mind ♿️
-- First-class [React support](/frameworks/react) ⚛️
-- Built-in localization 💬
-- Open source 😸
-
-Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
-</div>
-<div class="splash-end">
-<img class="splash-image" src="/assets/images/undraw-content-team.svg" alt="Cartoon of people assembling components while standing on a giant laptop.">
-</div>
-</div>
-
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@shoelace-style/shoelace/badge)](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace)
-[![npm](https://img.shields.io/npm/dw/@shoelace-style/shoelace?label=npm&style=flat-square)](https://www.npmjs.com/package/@shoelace-style/shoelace)
-[![License](https://img.shields.io/badge/license-MIT-232323.svg?style=flat-square)](https://github.com/shoelace-style/shoelace/blob/next/LICENSE.md)<br>
-[![Discord](https://img.shields.io/badge/Discord-Join%20the%20chat-5965f2.svg?style=flat-square&logo=discord&logoColor=white)](https://discord.gg/mg8f26C)
-[![Twitter](https://img.shields.io/badge/Twitter-Follow-00acee.svg?style=flat-square&logo=twitter&logoColor=white)](https://twitter.com/shoelace_style)
-[![Sponsor](https://img.shields.io/badge/GitHub-Code-232323.svg?style=flat-square&logo=github&logoColor=white)](https://github.com/shoelace-style/shoelace)
-
-## Quick Start
-
-Add the following code to your page.
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
-```
-
-Now you have access to all of Shoelace's components! Try adding a button:
-
-```html preview expanded
-<sl-button>Click me</sl-button>
-```
-
-?> This will load all of Shoelace's components, but you should probably only load the ones you're actually using. To learn how, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation).
-
-
-## New to Web Components?
-
-**TL;DR** – we finally have a way to create [our own HTML elements](https://html.spec.whatwg.org/multipage/custom-elements.html) and use them in any framework we want!
-
-Thanks to the popularity of frameworks such as Angular, Vue, and React, component-driven development has become a part of our every day lives. Components help us encapsulate styles and behaviors into reusable building blocks. They make a lot of sense in terms of design, development, and testing.
-
-Unfortunately, _framework-specific_ components fail us in a number of ways:
-
-- You can only use them in the framework they're designed for 🔒
-- Their lifespan is limited to that of the framework's ⏳
-- New frameworks/versions can lead to breaking changes, requiring substantial effort to update components 😭
-
-Web components solve these problems. They're [supported by all modern browsers](https://caniuse.com/#feat=custom-elementsv1), they're framework-agnostic, and they're [part of the standard](https://developer.mozilla.org/en-US/docs/Web/Web_Components), so we know they'll be supported for many years to come.
-
-This is the technology that Shoelace is built on.
-
-## What Problem Does This Solve?
-
-Shoelace provides a collection of professionally designed, highly customizable UI components built on a framework agnostic technology. Why spend hundreds of hours (or more) building a design system from scratch? Why make a component library that only works with one framework?
-
-With Shoelace, you can:
-
-- Start building things faster (no need to roll your own buttons)
-- Build multiple apps with different frameworks that all share the same UI components
-- Fully customize components to match your existing designs
-- Incrementally adopt components as needed (no need to ditch your framework)
-- Upgrade or switch frameworks without rebuilding foundational components
-
-If your organization is looking to build a design system, [Shoelace will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871).* All the foundational components you need are right here, ready to be customized for your brand. And since it's built on web standards, browsers will continue to support it for many years to come.
-
-Whether you use Shoelace as a starting point for your organization's design system or for a fun personal project, there's no limit to what you can do with it.
-
-<small>*Please consider giving back some of what you save by [supporting this project with a sponsorship](https://github.com/sponsors/claviska).</small>
-
-## Browser Support
-
-Shoelace is tested in the latest two versions of the following browsers.
-
-<img src="/assets/images/chrome.png" alt="Chrome" width="64" height="64">
-<img src="/assets/images/edge.png" alt="Edge" width="64" height="64">
-<img src="/assets/images/firefox.png" alt="Firefox" width="64" height="64">
-<img src="/assets/images/opera.png" alt="Opera" width="64" height="64">
-<img src="/assets/images/safari.png" alt="Safari" width="64" height="64">
-
-Critical bug fixes in earlier versions will be addressed based on their severity and impact.
-
-If you need to support IE11 or pre-Chromium Edge, this library isn't for you. Although web components can (to some degree) be polyfilled for legacy browsers, supporting them is outside the scope of this project. If you're using Shoelace in such a browser, you're gonna have a bad time. ⛷
-
-## License
-
-Shoelace is designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It's available under the terms of the MIT license.
-
-Designing, developing, and supporting this library requires a lot of time, effort, and skill. If you're using this software to make a profit, I respectfully ask that you help [fund its development](https://github.com/sponsors/claviska) by becoming a sponsor.
-
-👇 Your support is very much appreciated! 👇
-
-<sl-button class="repo-button repo-button--sponsor" href="https://github.com/sponsors/claviska" target="_blank">
-  <sl-icon slot="prefix" name="heart"></sl-icon> Become a sponsor
-</sl-button>
-
-<sl-button class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
-  <sl-icon slot="prefix" name="github"></sl-icon> <span class="github-star-count">Star</span>
-</sl-button>
-
-<sl-button class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
-  <sl-icon slot="prefix" name="twitter"></sl-icon> Follow
-</sl-button>
-
-## Attribution
-
-Special thanks to the following projects and individuals that help make Shoelace possible.
-
-- Components are built with [LitElement](https://lit-element.polymer-project.org/)
-- Component metadata is generated by the [Custom Elements Manifest Analyzer](https://github.com/open-wc/custom-elements-manifest)
-- Documentation is powered by [Docsify](https://docsify.js.org/)
-- CDN services are provided by [jsDelivr](https://www.jsdelivr.com/)
-- Color primitives are inspired by [Tailwind](https://tailwindcss.com/)
-- Icons are courtesy of [Bootstrap Icons](https://icons.getbootstrap.com/)
-- The homepage illustration is courtesy of [unDraw](https://undraw.co/)
-- Positioning of menus, tooltips, et al is handled by [Popper.js](https://popper.js.org/)
-- Animations are courtesy of [animate.css](https://animate.style/)
-- QR codes are generated with [qr-creator](https://github.com/nimiq/qr-creator)
-- Search is powered by [Lunr](https://lunrjs.com/)
-- The Shoelace logo was designed with a single shoelace by [Adam K Olson](https://twitter.com/adamkolson)

docs/getting-started/themes.md

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

docs/getting-started/usage.md

@@ -1,173 +0,0 @@
-# Usage
-
-Shoelace components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.
-
-If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them. 
-
-## Properties
-
-Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size.
-
-```html
-<sl-button size="small">Click me</sl-button>
-```
-
-Some properties are boolean, so they only have true/false values. To activate a boolean property, add the corresponding attribute without a value.
-
-```html
-<sl-button disabled>Click me</sl-button>
-```
-
-In rare cases, a property may require an array, an object, or a function. For example, to customize the color picker's list of preset swatches, you set the `swatches` property to an array of colors. This can be done with JavaScript.
-
-```html
-<sl-color-picker></sl-color-picker>
-
-<script>
-  const colorPicker = document.querySelector('sl-color-picker');
-  colorPicker.swatches = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
-</script>
-```
-
-Refer to a component's documentation for a complete list of its properties.
-
-## Events
-
-You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. In addition, some components emit custom events. These work the same way as standard events, but are prefixed with `sl-` to prevent collisions with standard events and other libraries.
-
-```html
-<sl-checkbox>Check me</sl-checkbox>
-
-<script>
-  const checkbox = document.querySelector('sl-checkbox');
-  checkbox.addEventListener('sl-change', event => {
-    console.log(event.target.checked ? 'checked' : 'not checked');
-  });
-</script>
-```
-
-Refer to a component's documentation for a complete list of its custom events.
-
-## Methods
-
-Some components have methods you can call to trigger various behaviors. For example, you can set focus on a Shoelace input using the `focus()` method.
-
-```html
-<sl-input></sl-input>
-
-<script>
-  const input = document.querySelector('sl-input');
-  input.focus();
-</script>
-```
-
-Refer to a component's documentation for a complete list of its methods and their arguments.
-
-## Slots
-
-Many components use slots to accept content inside of them. The most common slot is the _default_ slot, which includes any content inside the component that doesn't have a `slot` attribute.
-
-For example, a button's default slot is used to populate its label.
-
-```html
-<sl-button>Click me</sl-button>
-```
-
-Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="prefix"` attribute? This tells the component to place the icon into its `prefix` slot.
-
-```html
-<sl-button>
-  <sl-icon slot="prefix" name="gear"></sl-icon>
-  Settings
-</sl-button>
-```
-
-The location of a named slot doesn't matter. You can put it anywhere inside the component and the browser will move it to the right place automatically!
-
-Refer to a component's documentation for a complete list of available slots.
-
-## Don't Use Self-closing Tags
-
-Custom elements cannot have self-closing tags. Similar to `<script>` and `<textarea>`, you must always include the full closing tag.
-
-```html
-<!-- Don't do this -->
-<sl-input />
-
-<!-- Always do this -->
-<sl-input></sl-input>
-```
-
-## Differences from Native Elements
-
-You might expect similarly named elements to share the same API as native HTML elements. This is not always the case. Shoelace components **are not** designed to be one-to-one replacements for their HTML counterparts.
-
-For example, `<button>` and `<sl-button>` both have a `type` attribute, but it does different things. The former controls whether the button submits a form and the latter controls the button's appearance.
-
-?> **Don't make assumptions about a component's API!** To prevent unexpected behaviors, please take the time to review the documentation and make sure you understand what each attribute, property, method, and event is intended to do.
-
-## Waiting for Components to Load
-
-Web components are registered with JavaScript, so depending on how and when you load Shoelace, you may notice a [Flash of Undefined Custom Elements (FOUCE)](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/) when the page loads. There are a couple ways to prevent this, both of which are described in the linked article.
-
-One option is to use the [`:defined`](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined) CSS pseudo-class to "hide" custom elements that haven't been registered yet. You can scope it to specific tags or you can hide all undefined custom elements as shown below.
-
-```css
-:not(:defined) {
-  visibility: hidden;
-}
-```
-
-As soon as a custom element is registered, it will immediately appear with all of its styles, effectively eliminating FOUCE. Note the use of `visibility: hidden` instead of `display: none` to reduce shifting as elements are registered. The drawback to this approach is that custom elements can potentially appear one by one instead of all at the same time.
-
-Another option is to use [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined), which returns a promise that resolves when the specified element gets registered. You'll probably want to use it with [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) in case an element fails to load for some reason.
-
-A clever way to use this method is to hide the `<body>` with `opacity: 0` and add a class that fades it in as soon as all your custom elements are defined.
-
-```html
-<style>
-  body {
-    opacity: 0;
-  }
-
-  body.ready {
-    opacity: 1;
-    transition: .25s opacity;
-  }
-</style>
-
-<script type="module">
-  await Promise.allSettled([
-    customElements.whenDefined('sl-button'),
-    customElements.whenDefined('sl-card'),
-    customElements.whenDefined('sl-rating')
-  ]);
-
-  // Button, card, and rating are registered now! Add
-  // the `ready` class so the UI fades in.
-  document.body.classList.add('ready');
-</script>
-```
-
-## Code Completion
-
-### VS Code
-
-Shoelace ships with a file called `vscode.html-custom-data.json` that can be used to describe its components to Visual Studio Code. This enables code completion for Shoelace components (also known as "code hinting" or "IntelliSense"). To enable it, you need to tell VS Code where the file is.
-
-1. [Install Shoelace locally](/getting-started/installation#local-installation)
-2. Create a folder called `.vscode` at the root of your project
-3. Create a file inside the folder called `settings.json`
-4. Add the following to the file
-
-```js
-{
-  "html.customData": ["./node_modules/@shoelace-style/shoelace/dist/vscode.html-custom-data.json"]
-}
-```
-
-If `settings.json` already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take affect.
-
-### Other Editors
-
-Most popular editors support custom code completion with a bit of configuration. Please [submit a feature request](https://github.com/shoelace-style/shoelace/issues/new/choose) for your editor of choice. PRs are also welcome!