Merge branch 'next' into docs-fix

* add zoomable frame component; #986

* remove viewport demo component

* update changelog

* fix code demos

* update zoomable iframes with theme changes

.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

@@ -1,38 +1,35 @@
 ---
 name: Bug Report
-about: Create a report to help us improve.
+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**
-A clear and concise description of what the bug is.
+### Describe the bug
+A bug is _a demonstrable problem_ caused by code in the library. Please provide a clear and concise description of what the bug is here.
 
-**To Reproduce**
+### To Reproduce
 Steps to reproduce the behavior:
+
 1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
+2. Click on '...'
+3. Scroll down to '...'
 4. See error
 
-**Expected behavior**
-A clear and concise description of what you expected to happen.
+### Demo
 
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
+If the bug isn't obvious, please provide a link to a CodePen or Fiddle with a minimal reproduction. Bugs that have repros get attention faster than those that don't.
 
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+Tip: use the CodePen button on any example in the docs!
 
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+### Screenshots
+If applicable, add screenshots to help explain the bug.
 
-**Additional context**
-Add any other context about the problem here.
+### Browser / OS
+ - OS: [e.g. Mac, Windows]
+ - 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,20 +0,0 @@
----
-name: Feature Request
-about: Suggest an idea for this project.
-title: ''
-labels: feature
-assignees: claviska
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.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/release.yml

@@ -0,0 +1,17 @@
+# This workflow will create a GitHub release every time a tag is pushed
+name: Create GitHub Release
+
+on:
+  push:
+    tags:
+      - "v2.*"
+      - "v3.*"
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: "marvinpinto/action-automatic-releases@v1.2.1"
+        with:
+          repo_token: "${{ secrets.GITHUB_TOKEN }}"
+          prerelease: false

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

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install lint-staged

.prettierignore

@@ -1,9 +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
-src/components/icon/icons
+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

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bierner.lit-html",
+    "streetsidesoftware.code-spell-checker"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "editor.formatOnSave": true,
+  "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,78 +7,109 @@ 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 >= 12.10.0 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 >= 14.17 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/).
 
-### Forking the Repo
+### Understanding the Web Awesome monorepo
 
-Start by [forking the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, then clone it locally and install dependencies.
+Web Awesome uses [NPM workspaces](https://docs.npmjs.com/cli/v11/using-npm/workspaces) for its monorepo structure and is fairly minimal in what it provides.
+
+By using a NPM workspaces and a monorepo structure, we can get consistent builds, shared configurations, and reduced duplication across repositories which reduces regressions and forces consistency across `webawesome`, `webawesome-pro`, and `webawesome-app`.
+
+Generally, if you plan to only work with the free version of `webawesome` it is easiest to go to `packages/webawesome` and run all commands from there.
+
+### Where do NPM dependencies go?
+
+Any dependencies intended to be used across all packages (IE: `prettier`, `eslint`) that are _NOT_ used at runtime should be in the root `devDependencies` of `package.json`.
 
 ```bash
-git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
-cd shoelace
+npm install -D -w prettier
+```
+
+Any dependencies that will be used at runtime by a package should be part of the specific package's `"dependencies"` such as `lit`. This is required because if that dependency is not in the `packages/*/package.json`, it will not be installed when used via NPM.
+
+Individual packages are also free to install devDependencies as needed as long as they are specific to that package only.
+
+To do install a package specific to a package, change your working directory to that package's root
+
+IE: `cd packages/webawesome && npm install <package-name>`
+
+### Forking the Repo
+
+Start by [forking the repo](https://github.com/shoelace-style/webawesome/fork) on GitHub, then clone it locally and install dependencies.
+
+```bash
+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 exception is component metadata used by the docs, which is generated by TypeDoc. This tool takes a few seconds to run so, to prevent long reload delays, it only runs once at startup.
-
-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 browser's don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.
 
 ### Building
 
 To generate a production build, run the following command.
 
 ```bash
+cd packages/webawesome
 npm run build
 ```
 
+You can also run `npm run build:serve` to start an [`http-server`](https://www.npmjs.com/package/http-server) instance on `http://localhost:4000` after the build completes, so you can preview the production build.
+
+### Creating New Components
+
+To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
+
+```bash
+cd packages/webawesome
+npm run create wa-tag-name
+```
+
+This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
+
+### Adding additional packages
+
+Right now the only additional packages are in private repositories.
+
+To add additional packages from other repositories, run: `git clone <url> packages/<package-name>` to clone your repo into `packages/`.
+
+Make sure to run `npm install` at the root of the monorepo after adding your package!
+
 ### Contributing
 
-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.

cspell.json

@@ -0,0 +1,223 @@
+{
+  "version": "0.2",
+  "words": [
+    "activedescendant",
+    "allowfullscreen",
+    "animationend",
+    "Animista",
+    "APG",
+    "apos",
+    "atrule",
+    "autocorrect",
+    "autofix",
+    "autoload",
+    "autoloader",
+    "autoloading",
+    "autoplay",
+    "bezier",
+    "Blockquotes",
+    "boxicons",
+    "CACHEABLE",
+    "callout",
+    "callouts",
+    "canvastext",
+    "chatbubble",
+    "checkmark",
+    "Clippy",
+    "codebases",
+    "codepen",
+    "colocated",
+    "colorjs",
+    "colour",
+    "combobox",
+    "Commonmark",
+    "compat",
+    "Composability",
+    "Consolas",
+    "contenteditable",
+    "copydir",
+    "Cotte",
+    "coverpage",
+    "crossorigin",
+    "crutchcorn",
+    "csspart",
+    "cssproperty",
+    "cssstate",
+    "datetime",
+    "describedby",
+    "Docsify",
+    "dogfood",
+    "dropdowns",
+    "easings",
+    "ecommerce",
+    "endfor",
+    "endraw",
+    "endregion",
+    "enterkeyhint",
+    "eqeqeq",
+    "erroneou",
+    "errormessage",
+    "esbuild",
+    "exportmaps",
+    "exportparts",
+    "fieldsets",
+    "focusin",
+    "focusout",
+    "fontawesome",
+    "formaction",
+    "formdata",
+    "formenctype",
+    "formmethod",
+    "formnovalidate",
+    "formtarget",
+    "FOUC",
+    "FOUCE",
+    "Frontmatter",
+    "fullscreen",
+    "gestern",
+    "giga",
+    "globby",
+    "Grayscale",
+    "haspopup",
+    "heroicons",
+    "hexa",
+    "Hotwire",
+    "Iconoir",
+    "Iframes",
+    "iife",
+    "inputmode",
+    "ionicon",
+    "ionicons",
+    "jsDelivr",
+    "jsfiddle",
+    "keydown",
+    "keyframes",
+    "keymaker",
+    "Konnor",
+    "Kool",
+    "labelledby",
+    "Laravel",
+    "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",
+    "novalidate",
+    "Numberish",
+    "nums",
+    "oklab",
+    "oklch",
+    "onscrollend",
+    "outdir",
+    "ParamagicDev",
+    "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",
+    "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",
+    "unicons",
+    "unsanitized",
+    "unsupportive",
+    "valpha",
+    "valuenow",
+    "valuetext",
+    "viewports",
+    "Vuejs",
+    "WCAG",
+    "webawesome",
+    "webawesomer",
+    "WEBP",
+    "Webpacker",
+    "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])"
+  ],
+  "useGitignore": true
+}

docs/404.md

@@ -1,3 +0,0 @@
-# Not Found
-
-Sorry, I couldn't find that page.

docs/_sidebar.md

@@ -1,72 +0,0 @@
-- Getting Started
-  - [Overview](/)
-  - [Installation](/getting-started/installation.md)
-  - [Usage](/getting-started/usage.md)
-  - [Customizing](/getting-started/customizing.md)
-  - [Themes](/getting-started/themes.md)
-
-- Resources
-  - [Community](/resources/community.md)
-  - [Contributing](/resources/contributing.md)
-  - [Changelog](/resources/changelog.md)
-
-- Components
-  - [Alert](/components/alert.md)
-  - [Avatar](/components/avatar.md)
-  - [Badge](/components/badge.md)
-  - [Button](/components/button.md)
-  - [Button Group](/components/button-group.md)
-  - [Card](/components/card.md)
-  - [Checkbox](/components/checkbox.md)
-  - [Color Picker](/components/color-picker.md)
-  - [Details](/components/details.md)
-  - [Dialog](/components/dialog.md)
-  - [Drawer](/components/drawer.md)
-  - [Dropdown](/components/dropdown.md)
-  - [Form](/components/form.md)
-  - [Icon](/components/icon.md)
-  - [Icon Button](/components/icon-button.md)
-  - [Image Comparer](/components/image-comparer.md)
-  - [Input](/components/input.md)
-  - [Menu](/components/menu.md)
-  - [Menu Divider](/components/menu-divider.md)
-  - [Menu Item](/components/menu-item.md)
-  - [Menu Label](/components/menu-label.md)
-  - [Progress Bar](/components/progress-bar.md)
-  - [Progress Ring](/components/progress-ring.md)
-  - [Radio](/components/radio.md)
-  - [Range](/components/range.md)
-  - [Rating](/components/rating.md)
-  - [Responsive Embed](/components/responsive-embed.md)
-  - [Select](/components/select.md)
-  - [Skeleton](/components/skeleton.md)
-  - [Spinner](/components/spinner.md)
-  - [Switch](/components/switch.md)
-  - [Tab Group](/components/tab-group.md)
-  - [Tab](/components/tab.md)
-  - [Tab Panel](/components/tab-panel.md)
-  - [Tag](/components/tag.md)
-  - [Textarea](/components/textarea.md)
-  - [Tooltip](/components/tooltip.md)
-
-- Utilities
-  - [Animation](/components/animation.md)
-  - [Format Bytes](/components/format-bytes.md)
-  - [Format Date](/components/format-date.md)
-  - [Format Number](/components/format-number.md)
-  - [Include](/components/include.md)
-  - [Relative Time](/components/relative-time.md)
-  - [Resize Observer](/components/resize-observer.md)
-
-- Design Tokens
-  - [Typography](/tokens/typography.md)
-  - [Color](/tokens/color.md)
-  - [Spacing](/tokens/spacing.md)
-  - [Elevation](/tokens/elevation.md)
-  - [Border Radius](/tokens/border-radius.md)
-  - [Transition](/tokens/transition.md)
-  - [Z-index](/tokens/z-index.md)
-
-- Tutorials
-  - [Integrating with NextJS](/tutorials/integrating-with-nextjs.md)
-  - [Integrating with Rails](/tutorials/integrating-with-rails.md)

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="#409eff">
-      <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="#FFFFFF" 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="#009DFF" 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="#009DFF" 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="#009DFF" 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="#009DFF" 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="#009DFF" 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,167 +0,0 @@
-.code-block {
-  position: relative;
-  border-radius: 3px;
-  background: var(--sl-color-gray-50);
-  margin-bottom: 1.5rem;
-}
-
-.code-block__preview {
-  position: relative;
-  border: solid 1px var(--sl-color-gray-200);
-  border-bottom: none;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  background-color: white;
-  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-gray-500);
-  background-color: white;
-  border-left: solid 1px var(--sl-color-gray-200);
-  border-top-right-radius: 3px;
-  cursor: ew-resize;
-  transition: 250ms background-color;
-}
-
-.code-block__resizer:focus {
-  outline: none;
-  box-shadow: 0 0 0 1px var(--sl-color-primary-400), 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
-  background-color: var(--sl-color-primary-50);
-  color: var(--sl-color-primary-500);
-  z-index: 2;
-}
-
-@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-gray-200);
-  border-bottom: none;
-  border-radius: 0 !important;
-  margin: 0;
-  display: none;
-}
-
-.code-block__source .docsify-copy-code-button {
-  border-top-right-radius: 0;
-}
-
-.code-block--expanded .code-block__source {
-  display: block;
-}
-
-.code-block__toggle {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 2.5rem;
-  border: solid 1px var(--sl-color-gray-200);
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-  background: var(--sl-color-white);
-  font: inherit;
-  font-size: 0.875rem;
-  color: var(--sl-color-gray-600);
-  cursor: pointer;
-  transition: 250ms background-color;
-  -webkit-appearance: none;
-}
-
-.code-block__toggle:hover,
-.code-block__toggle:active {
-  border-color: var(--sl-color-primary-400);
-  background-color: var(--sl-color-primary-50);
-  color: var(--sl-color-primary-500);
-}
-
-.code-block__toggle:focus {
-  outline: none;
-  border-color: var(--sl-color-primary-400);
-  background-color: var(--sl-color-primary-50);
-  color: var(--sl-color-primary-500);
-  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
-}
-
-.code-block__toggle svg {
-  width: 1em;
-  height: 1em;
-  margin-left: 0.25rem;
-  transition: 250ms transform;
-}
-
-.code-block--expanded .code-block__toggle svg {
-  transform: rotate(180deg);
-}
-
-/* Dark theme */
-.sl-theme-dark .code-block {
-  background-color: var(--sl-color-gray-800);
-}
-
-.sl-theme-dark .code-block__preview {
-  background-color: var(--sl-color-gray-900);
-  border-color: var(--sl-color-gray-800);
-}
-
-.sl-theme-dark .code-block__source {
-  border-color: var(--sl-color-gray-800);
-}
-
-.sl-theme-dark .code-block__resizer {
-  border-left-color: var(--sl-color-gray-800);
-  background-color: var(--sl-color-gray-900);
-  color: var(--sl-color-gray-400);
-}
-
-.sl-theme-dark .code-block__toggle {
-  background-color: var(--sl-color-gray-900);
-  border-color: var(--sl-color-gray-800);
-  color: var(--sl-color-gray-400);
-}
-
-.sl-theme-dark .code-block__toggle:hover,
-.sl-theme-dark .code-block__toggle:active {
-  background-color: var(--sl-color-gray-900);
-  border-color: var(--sl-color-gray-800);
-  color: var(--sl-color-gray-400);
-}
-
-.sl-theme-dark .code-block__toggle:focus {
-  border-color: var(--sl-color-primary-500);
-  background-color: var(--sl-color-primary-900);
-  color: var(--sl-color-primary-500);
-}

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

@@ -1,160 +0,0 @@
-(() => {
-  let count = 1;
-
-  if (!window.$docsify) {
-    throw new Error('Docsify must be loaded before installing this plugin.');
-  }
-
-  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 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');
-
-      [...doc.querySelectorAll('code[class^="lang-"]')].map(code => {
-        if (code.classList.contains('preview')) {
-          const codeBlock = document.createElement('div');
-          const preview = document.createElement('div');
-          const pre = code.closest('pre');
-          const preId = `code-block-preview-${count}`;
-          const toggle = document.createElement('button');
-          const toggleId = `code-block-toggle-${count}`;
-
-          wrap(pre, codeBlock);
-
-          codeBlock.classList.add('code-block');
-
-          preview.classList.add('code-block__preview');
-          preview.innerHTML = code.textContent;
-          preview.innerHTML += `
-            <div
-              class="code-block__resizer"
-              tabindex="0"
-            >
-              <sl-icon name="grip-vertical"></sl-icon>
-            </div>
-          `;
-
-          pre.id = preId;
-          pre.classList.add('code-block__source');
-          pre.setAttribute('data-lang', pre.getAttribute('data-lang').replace(/ preview$/, ''));
-          pre.setAttribute('aria-labelledby', toggleId);
-
-          toggle.id = toggleId;
-          toggle.type = 'button';
-          toggle.classList.add('code-block__toggle');
-          toggle.setAttribute('aria-expanded', 'false');
-          toggle.setAttribute('aria-controls', preId);
-          toggle.innerHTML = `
-            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>
-          `;
-
-          codeBlock.prepend(preview);
-          codeBlock.append(toggle);
-
-          count++;
-        }
-      });
-
-      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();
-          resizer.focus();
-          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 handleKeyDown = event => {
-          if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
-            const currentWidth = preview.clientWidth;
-            const maxWidth = preview.parentElement.clientWidth;
-            const incr = event.shiftKey ? 100 : 10;
-
-            event.preventDefault();
-
-            if (event.key === 'ArrowLeft') setWidth(currentWidth - incr);
-            if (event.key === 'ArrowRight') setWidth(currentWidth + incr);
-            if (event.key === 'Home') setWidth(0);
-            if (event.key === 'End') setWidth(maxWidth);
-          }
-        };
-
-        const setWidth = width => (preview.style.width = width + 'px');
-
-        resizer.addEventListener('mousedown', dragStart);
-        resizer.addEventListener('touchstart', dragStart);
-        resizer.addEventListener('keydown', handleKeyDown);
-      }, false);
-    });
-  });
-
-  // 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'));
-    }
-  });
-})();

docs/assets/plugins/metadata/metadata.js

@@ -1,398 +0,0 @@
-(() => {
-  let metadataStore;
-
-  function getAttrName(propName) {
-    return propName.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).replace(/^-/, '');
-  }
-
-  function createPropsTable(props) {
-    const table = document.createElement('table');
-    table.innerHTML = `
-      <thead>
-        <tr>
-          <th>Property</th>
-          <th>Description</th>
-          <th>Type</th>
-          <th>Default</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${props
-          .map(prop => {
-            const attr = getAttrName(prop.name);
-            return `
-              <tr>
-                <td>
-                  <code>${escapeHtml(prop.name)}</code>
-                  ${
-                    prop.name !== attr
-                      ? `
-                        <br>
-                        <small>
-                          <sl-tooltip content="Use this attribute in your HTML">
-                            <code class="attribute-tooltip">${escapeHtml(attr)}</code>
-                          </sl-tooltip>
-                        </small>`
-                      : ''
-                  }
-                </td>
-                <td>${escapeHtml(prop.description)}</td>
-                <td><code style="white-space: normal;">${escapeHtml(prop.type)}</code></td>
-                <td><code style="white-space: normal;">${escapeHtml(prop.defaultValue)}</code></td>
-              </tr>
-          `;
-          })
-          .join('')}
-      </tbody>
-    `;
-
-    return table.outerHTML;
-  }
-
-  function createEventsTable(events) {
-    const table = document.createElement('table');
-    table.innerHTML = `
-      <thead>
-        <tr>
-          <th>Event</th>
-          <th>Description</th>
-          <th>Details</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${events
-          .map(
-            event => `
-        <tr>
-          <td><code>${escapeHtml(event.name)}</code></td>
-          <td>${escapeHtml(event.description)}</td>
-          <td><code style="white-space: normal;">${escapeHtml(event.details)}</code></td>
-        </tr>
-        `
-          )
-          .join('')}
-      </tbody>
-    `;
-
-    return table.outerHTML;
-  }
-
-  function createMethodsTable(methods) {
-    const table = document.createElement('table');
-    table.innerHTML = `
-      <thead>
-        <tr>
-          <th>Method</th>
-          <th>Description</th>
-          <th>Arguments</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${methods
-          .map(
-            method => `
-              <tr>
-                <td><code>${escapeHtml(method.name)}</code></td>
-                <td>${escapeHtml(method.description)}</td>
-                <td>
-                  ${
-                    method.params.length
-                      ? `
-                        <code style="white-space: normal;">${escapeHtml(
-                          method.params.map(param => `${param.name}: ${param.type}`).join(', ')
-                        )}</code>
-                      `
-                      : ''
-                  }
-                </td>
-              </tr>
-           `
-          )
-          .join('')}
-      </tbody>
-    `;
-
-    return table.outerHTML;
-  }
-
-  function createSlotsTable(slots) {
-    const table = document.createElement('table');
-    table.innerHTML = `
-      <thead>
-        <tr>
-          <th>Slot</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${slots
-          .map(
-            slot => `
-        <tr>
-          <td><code>${slot.name ? escapeHtml(slot.name) : '(default)'}</code></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>
-        </tr>
-      </thead>
-      <tbody>
-        ${styles
-          .map(
-            style => `
-        <tr>
-          <td><code>${escapeHtml(style.name)}</code></td>
-          <td>${escapeHtml(style.description)}</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><code>${escapeHtml(part.name)}</code></td>
-          <td>${escapeHtml(part.description)}</td>
-        </tr>
-        `
-          )
-          .join('')}
-      </tbody>
-    `;
-
-    return table.outerHTML;
-  }
-
-  function createDependenciesList(targetComponent, allComponents) {
-    const ul = document.createElement('ul');
-    const dependencies = [];
-
-    // Recursively fetch subdependencies
-    function getDependencies(tag) {
-      const component = allComponents.find(c => c.tag === 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 getMetadata() {
-    return new Promise((resolve, reject) => {
-      // Simple caching to prevent multiple XHR requests
-      if (metadataStore) {
-        return resolve(metadataStore);
-      }
-
-      fetch('/dist/components.json')
-        .then(res => res.json())
-        .then(data => {
-          metadataStore = data;
-          resolve(metadataStore);
-        })
-        .catch(err => console.error(err));
-    });
-  }
-
-  if (!window.$docsify) {
-    throw new Error('Docsify must be loaded before installing this plugin.');
-  }
-
-  window.$docsify.plugins.push((hook, vm) => {
-    hook.mounted(function () {
-      getMetadata().then(metadata => {
-        const target = document.querySelector('.app-name');
-
-        // Add version
-        const version = document.createElement('div');
-        version.classList.add('sidebar-version');
-        version.textContent = metadata.version;
-        target.appendChild(version);
-
-        // Add repo buttons
-        const buttons = document.createElement('div');
-        buttons.classList.add('sidebar-buttons');
-        buttons.innerHTML = `
-            <a class="repo-button repo-button--small repo-button--sponsor" href="https://github.com/sponsors/claviska" rel="noopener" target="_blank">
-              <sl-icon name="heart"></sl-icon> Sponsor
-            </a>
-            <a class="repo-button repo-button--small repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" rel="noopener" target="_blank">
-              <sl-icon name="github"></sl-icon> <span class="github-star-count">Star</span>
-            </a>
-            <a class="repo-button repo-button--small repo-button--twitter" href="https://twitter.com/shoelace_style" rel="noopener" target="_blank">
-              <sl-icon name="twitter"></sl-icon> Follow
-            </a>
-          `;
-        target.appendChild(buttons);
-      });
-    });
-
-    hook.beforeEach(async function (content, next) {
-      const metadata = await getMetadata();
-
-      // Replace %VERSION% placeholders
-      content = content.replace(/%VERSION%/g, metadata.version);
-
-      // Handle [component-header] tags
-      content = content.replace(/\[component-header:([a-z-]+)\]/g, (match, tag) => {
-        const component = metadata.components.filter(data => data.tag === tag)[0];
-        let result = '';
-
-        if (!component) {
-          console.error('Component not found in metadata: ' + tag);
-          next(content);
-        }
-
-        let badgeType = 'info';
-        if (component.status === 'stable') badgeType = 'primary';
-        if (component.status === 'experimental') badgeType = 'warning';
-        if (component.status === 'planned') badgeType = 'info';
-        if (component.status === 'deprecated') badgeType = 'danger';
-
-        result += `
-          <div class="component-header">
-            <div class="component-header__tag">
-              <code>${component.className} | &lt;${component.tag}&gt;</code>
-            </div>
-
-            <div class="component-header__info">
-              <sl-badge type="info" pill>
-                Since ${component.since || '?'}
-              </sl-badge>
-
-              <sl-badge type="${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 = metadata.components.filter(data => data.tag === tag)[0];
-        let result = '';
-
-        if (!component) {
-          console.error('Component not found in metadata: ' + tag);
-          next(content);
-        }
-
-        if (component.props.length) {
-          result += `
-            ## Properties
-            ${createPropsTable(component.props)}
-          `;
-        }
-
-        if (component.events.length) {
-          result += `
-            ## Events
-            ${createEventsTable(component.events)}
-          `;
-        }
-
-        if (component.methods.length) {
-          result += `
-            ## Methods
-            ${createMethodsTable(component.methods)}
-          `;
-        }
-
-        if (component.slots.length) {
-          result += `
-            ## Slots
-            ${createSlotsTable(component.slots)}
-          `;
-        }
-
-        if (component.cssCustomProperties.length) {
-          result += `
-            ## CSS Custom Properties
-            ${createCustomPropertiesTable(component.cssCustomProperties)}
-          `;
-        }
-
-        if (component.parts.length) {
-          result += `
-            ## CSS Parts
-            ${createPartsTable(component.parts)}
-          `;
-        }
-
-        if (component.dependencies.length) {
-          result += `
-            ## Dependencies
-
-            This component has the following dependencies so, if you're [cherry picking](/getting-started/installation#cherry-picking),
-            be sure to import these components in addition to <code>&lt;${tag}&gt;</code>.
-
-            ${createDependenciesList(component.tag, metadata.components)}
-          `;
-        }
-
-        // Strip whitespace so markdown doesn't process things as code blocks
-        return result.replace(/^ +| +$/gm, '');
-      });
-
-      next(content);
-    });
-  });
-})();

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

@@ -1,14 +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 () {
-      // Move search below the app name
-      const appName = document.querySelector('.sidebar .app-name');
-      const search = document.querySelector('.sidebar .search');
-      appName.insertAdjacentElement('afterend', search);
-    });
-  });
-})();

docs/assets/plugins/theme/theme.css

@@ -1,13 +0,0 @@
-.theme-toggle {
-  position: fixed;
-  top: 0.5rem;
-  right: 0.5rem;
-  z-index: 100;
-}
-
-@media screen and (max-width: 768px) {
-  .theme-toggle {
-    top: 0.25rem;
-    right: 0.25rem;
-  }
-}

docs/assets/plugins/theme/theme.js

@@ -1,41 +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 () {
-      let isDark = localStorage.getItem('theme') === 'sl-theme-dark';
-      const sidebarToggle = document.querySelector('.sidebar-toggle');
-      const noTransitions = Object.assign(document.createElement('style'), {
-        textContent: '* { transition: none !important; }'
-      });
-      const toggle = Object.assign(document.createElement('sl-icon-button'), {
-        name: isDark ? 'sun' : 'moon',
-        label: 'Toggle dark mode'
-      });
-      toggle.classList.add('theme-toggle');
-
-      // Set initial theme
-      if (isDark) {
-        document.body.classList.add('sl-theme-dark');
-      }
-
-      // Toggle theme
-      toggle.addEventListener('click', () => {
-        isDark = !isDark;
-        isDark ? localStorage.setItem('theme', 'sl-theme-dark') : localStorage.removeItem('theme');
-        toggle.name = isDark ? 'sun' : 'moon';
-
-        // Disable transitions as the theme changes
-        document.body.appendChild(noTransitions);
-        requestAnimationFrame(() => {
-          document.body.classList.toggle('sl-theme-dark', isDark);
-          requestAnimationFrame(() => document.body.removeChild(noTransitions));
-        });
-      });
-
-      sidebarToggle.insertAdjacentElement('afterend', toggle);
-    });
-  });
-})();

docs/assets/styles/demos.css

@@ -1,60 +0,0 @@
-/* Color demo */
-.color-demo {
-  width: 4rem;
-  height: 2rem;
-  border-radius: var(--sl-border-radius-small);
-  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.33);
-}
-
-/* Border radius demo */
-.border-radius-demo {
-  width: 3rem;
-  height: 3rem;
-  background: var(--sl-color-primary-500);
-}
-
-/* Transition demo */
-.transition-demo {
-  position: relative;
-  background: var(--sl-color-gray-200);
-  width: 8rem;
-  height: 2rem;
-}
-
-.transition-demo:after {
-  content: '';
-  position: absolute;
-  background-color: var(--sl-color-primary-500);
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 100%;
-  transition-duration: inherit;
-  transition-property: width;
-}
-
-.transition-demo:hover:after {
-  width: 100%;
-}
-
-.sl-theme-dark .transition-demo {
-  background: var(--sl-color-gray-800);
-}
-
-/* Spacing demo */
-.spacing-demo {
-  width: 100px;
-  background: var(--sl-color-primary-500);
-}
-
-/* Elevation dmeo */
-.elevation-demo {
-  background: var(--sl-color-white);
-  border-radius: 3px;
-  width: 4rem;
-  height: 4rem;
-}
-
-.sl-theme-dark .elevation-demo {
-  background-color: var(--sl-color-gray-800);
-}

docs/assets/styles/docs-dark.css

@@ -1,195 +0,0 @@
-/* Elevation tokens */
-.sl-theme-dark {
-  --sl-shadow-x-small: 0 1px 0 #6b72800d;
-  --sl-shadow-small: 0 1px 2px #6b72801a;
-  --sl-shadow-medium: 0 2px 4px #6b72801a;
-  --sl-shadow-large: 0 2px 8px #6b72801a;
-  --sl-shadow-x-large: 0 4px 16px #6b72801a;
-}
-
-.sl-theme-dark {
-  background: var(--sl-color-gray-900);
-  color: var(--sl-color-gray-200);
-}
-
-/* Sidebar **/
-.sl-theme-dark .sidebar {
-  background: var(--sl-color-gray-900);
-  border-right-color: var(--sl-color-gray-900);
-}
-
-.sl-theme-dark .sidebar li > p {
-  color: var(--sl-color-white);
-  border-bottom-color: var(--sl-color-gray-800);
-}
-
-.sl-theme-dark .sidebar-toggle {
-  background-color: var(--sl-color-gray-900);
-}
-
-.sl-theme-dark .docsify-pagination-container {
-  border-top-color: var(--sl-color-gray-800) !important;
-}
-
-/* Search */
-.sl-theme-dark .sidebar .search input[type='search'] {
-  background: var(--sl-input-background-color);
-  border-color: var(--sl-input-border-color);
-  color: var(--sl-input-color);
-}
-
-.sl-theme-dark .sidebar .search input[type='search']:hover {
-  border-color: var(--sl-input-border-color-hover);
-}
-
-.sl-theme-dark .sidebar .search input[type='search']:focus {
-  border-color: var(--sl-input-border-color-focus);
-}
-
-.sl-theme-dark .sidebar .clear-button {
-  color: var(--sl-color-gray-700);
-}
-
-.sl-theme-dark .sidebar .clear-button svg circle {
-  fill: currentColor;
-}
-
-/* Content */
-.sl-theme-dark .component-header {
-  border-bottom-color: var(--sl-color-gray-800);
-}
-
-.sl-theme-dark .anchor span {
-  color: var(--sl-color-white);
-}
-
-.sl-theme-dark .markdown-section h2 {
-  border-bottom-color: var(--sl-color-gray-800);
-}
-
-.sl-theme-dark .markdown-section blockquote {
-  border-left-color: var(--sl-color-gray-800);
-}
-
-.sl-theme-dark .markdown-section kbd {
-  border-color: var(--sl-color-gray-800);
-}
-
-/* Tables */
-.sl-theme-dark .markdown-section tr:nth-child(2n) {
-  background: var(--sl-color-gray-950);
-}
-
-.sl-theme-dark .markdown-section td {
-  border-top-color: var(--sl-color-gray-800);
-  border-bottom-color: var(--sl-color-gray-800);
-}
-
-.sl-theme-dark .markdown-section table .attribute-tooltip {
-  border-bottom-color: var(--sl-color-gray-700);
-}
-
-/* Tips & warnings */
-.sl-theme-dark .markdown-section p.tip,
-.sl-theme-dark .markdown-section p.warn {
-  background-color: var(--sl-color-gray-950);
-}
-
-.sl-theme-dark .markdown-section p.tip:before,
-.sl-theme-dark .markdown-section p.warn:before {
-  color: var(--sl-color-gray-900);
-}
-
-.sl-theme-dark .markdown-section p.tip code,
-.sl-theme-dark .markdown-section p.warn code {
-  background-color: var(--sl-color-gray-800);
-}
-
-/* Code */
-.sl-theme-dark .markdown-section code {
-  background: var(--sl-color-gray-950);
-}
-
-/* Code blocks */
-.sl-theme-dark .markdown-section pre,
-.sl-theme-dark .code-block__source {
-  background-color: var(--sl-color-gray-800);
-}
-
-.sl-theme-dark .markdown-section pre > code {
-  color: var(--sl-color-gray-200);
-}
-
-.sl-theme-dark .markdown-section pre .token.comment {
-  color: var(--sl-color-gray-600);
-}
-
-.sl-theme-dark .markdown-section pre .token.prolog,
-.sl-theme-dark .markdown-section pre .token.doctype,
-.sl-theme-dark .markdown-section pre .token.cdata,
-.sl-theme-dark .markdown-section pre .token.operator {
-  color: var(--sl-color-gray-300);
-}
-
-.sl-theme-dark .markdown-section pre .token.property,
-.sl-theme-dark .markdown-section pre .token.keyword,
-.sl-theme-dark .markdown-section pre .token.tag,
-.sl-theme-dark .markdown-section pre .token.url {
-  color: var(--sl-color-primary-400);
-}
-
-.sl-theme-dark .markdown-section pre .token.symbol,
-.sl-theme-dark .markdown-section pre .token.deleted {
-  color: #f92672;
-}
-
-.sl-theme-dark .markdown-section pre .token.boolean,
-.sl-theme-dark .markdown-section pre .token.constant,
-.sl-theme-dark .markdown-section pre .token.selector,
-.sl-theme-dark .markdown-section pre .token.attr-name,
-.sl-theme-dark .markdown-section pre .token.string,
-.sl-theme-dark .markdown-section pre .token.char,
-.sl-theme-dark .markdown-section pre .token.builtin,
-.sl-theme-dark .markdown-section pre .token.inserted {
-  color: var(--sl-color-success-400);
-}
-
-.sl-theme-dark .markdown-section pre .token.atrule,
-.sl-theme-dark .markdown-section pre .token.attr-value,
-.sl-theme-dark .markdown-section pre .token.number,
-.sl-theme-dark .markdown-section pre .token.variable {
-  color: #c380ff;
-}
-
-.sl-theme-dark .markdown-section pre .token.function,
-.sl-theme-dark .markdown-section pre .token.class-name {
-  color: #ffbb4d;
-}
-
-.sl-theme-dark .markdown-section pre .token.regex {
-  color: #f8bd5b;
-}
-
-.sl-theme-dark .markdown-section pre .token.important {
-  color: #fd495f;
-}
-
-/* Repo buttons */
-.sl-theme-dark .repo-button {
-  background-color: var(--sl-color-gray-900);
-  border-color: var(--sl-color-gray-800);
-  color: var(--sl-color-gray-200);
-}
-
-.sl-theme-dark .repo-button--github sl-icon {
-  color: var(--sl-color-white);
-}
-
-.sl-theme-dark .repo-button:hover {
-  background-color: var(--sl-color-gray-900);
-  border: solid 1px var(--sl-color-gray-700);
-}
-
-.sl-theme-dark .repo-button:focus {
-  border-color: var(--sl-color-primary-500);
-}

docs/assets/styles/docs.css

@@ -1,621 +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);
-  color: var(--sl-color-gray-800);
-  line-height: var(--sl-line-height-normal);
-}
-
-a {
-  color: var(--sl-color-primary-500);
-}
-
-strong {
-  font-weight: var(--sl-font-weight-bold);
-}
-
-/* Sidebar */
-.sidebar {
-  background: var(--sl-color-white);
-  border-right: solid 1px var(--sl-color-gray-200);
-}
-
-.sidebar .app-name {
-  padding: 0 1.5rem;
-  margin-top: 1.5rem;
-}
-
-.sidebar-version {
-  font-size: var(--sl-font-size-x-small);
-  font-weight: var(--sl-font-weight-normal);
-  color: var(--sl-color-gray-400);
-  text-align: right;
-  padding: 0 var(--sl-spacing-small);
-  margin: -1.25rem 0 0.6rem 0;
-}
-
-.sidebar-buttons {
-  text-align: center;
-  margin-top: 0;
-}
-
-/* Search */
-.sidebar .search {
-  position: relative;
-  border: none;
-}
-
-.sidebar .search input[type='search'] {
-  border: solid 1px var(--sl-input-border-color);
-  border-radius: var(--sl-border-radius-pill);
-  padding-left: 1rem;
-  padding-right: 2rem;
-  margin: 0 1.25rem;
-  transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
-}
-
-.sidebar .search input[type='search']:hover {
-  border-color: var(--sl-input-border-color-hover);
-}
-
-.sidebar .search input[type='search']:focus {
-  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
-  border-color: var(--sl-input-border-color-focus);
-  outline: none;
-}
-
-.sidebar .input-wrap {
-  position: relative;
-  width: 100%;
-  padding: 0 0.25rem;
-}
-
-.sidebar .clear-button {
-  position: absolute;
-  right: 30px;
-  top: 7px;
-  width: 22px !important;
-  height: 22px !important;
-}
-
-.sidebar .clear-button svg {
-  transform: scale(0.75) !important;
-}
-
-.sidebar .clear-button:focus {
-  outline: none;
-}
-
-.search .results-panel {
-  margin-top: 1rem;
-}
-
-.search .matching-post {
-  border-bottom: solid 1px var(--sl-color-gray-500) !important;
-  padding: 0.25rem 1.5rem;
-}
-
-.search .matching-post a {
-  display: block;
-  border-radius: inherit;
-  padding: 0.5rem;
-}
-
-.search .matching-post h2 {
-  margin-bottom: 0;
-}
-
-.search .matching-post p {
-  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-white);
-  padding: 0.5rem;
-}
-
-.sidebar-toggle:focus {
-  outline: none;
-  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
-}
-
-.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-500);
-}
-
-.sidebar li > p {
-  font-weight: var(--sl-font-weight-bold);
-  border-bottom: solid 1px var(--sl-color-gray-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;
-}
-
-@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;
-  overflow-anchor: none;
-}
-
-.markdown-section blockquote {
-  position: relative;
-  border-left: solid 4px var(--sl-color-gray-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-gray-200) !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-xx-large);
-}
-
-.markdown-section h2 {
-  font-size: var(--sl-font-size-x-large);
-  border-bottom: solid 1px var(--sl-color-gray-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: var(--sl-color-gray-50);
-  border-radius: var(--sl-border-radius-small);
-  padding: 2px 4px;
-}
-
-.markdown-section kbd {
-  font-family: var(--sl-font-mono);
-  font-size: 87.5%;
-  border-radius: var(--sl-border-radius-small);
-  border: solid 1px var(--sl-color-gray-200);
-  padding: 2px 4px;
-}
-
-/* Code blocks */
-.markdown-section pre {
-  position: relative;
-  background: var(--sl-color-gray-50);
-  border-radius: var(--sl-border-radius-medium);
-}
-
-.markdown-section pre > code {
-  display: block;
-  background: none;
-  border-radius: 0;
-  color: var(--sl-color-gray-700);
-  padding: var(--sl-spacing-medium);
-  overflow: auto;
-  hyphens: none;
-  tab-size: 2;
-}
-
-.markdown-section pre .token.comment {
-  color: var(--sl-color-gray-400);
-}
-
-.markdown-section pre .token.prolog,
-.markdown-section pre .token.doctype,
-.markdown-section pre .token.cdata,
-.markdown-section pre .token.operator {
-  color: var(--sl-color-gray-600);
-}
-
-.markdown-section pre .token.punctuation {
-  color: var(--sl-color-gray-500);
-}
-
-.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-primary-500);
-}
-
-.markdown-section pre .token.symbol,
-.markdown-section pre .token.deleted {
-  color: #f92672;
-}
-
-.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-success-600);
-}
-
-.markdown-section pre .token.atrule,
-.markdown-section pre .token.attr-value,
-.markdown-section pre .token.number,
-.markdown-section pre .token.variable {
-  color: #9013fe;
-}
-
-.markdown-section pre .token.function,
-.markdown-section pre .token.class-name {
-  color: #eb9200;
-}
-
-.markdown-section pre .token.regex {
-  color: #f5a623;
-}
-
-.markdown-section pre .token.important {
-  color: #d0021b;
-}
-
-.markdown-section pre .token.important,
-.markdown-section pre .token.bold {
-  font-weight: bold;
-}
-
-.markdown-section pre .token.italic {
-  font-style: italic;
-}
-
-/* Tables */
-.markdown-section table {
-  margin-bottom: 1.5rem;
-}
-
-.markdown-section tr {
-  border: none;
-}
-
-.markdown-section tr:nth-child(2n) {
-  background: var(--sl-color-gray-50);
-}
-
-.markdown-section th {
-  border: none;
-  font-weight: inherit;
-  text-align: left;
-}
-
-.markdown-section td {
-  border-top: solid 1px var(--sl-color-gray-200);
-  border-bottom: solid 1px var(--sl-color-gray-200);
-  border-left: none;
-  border-right: none;
-}
-
-.markdown-section td code {
-  white-space: nowrap;
-}
-
-.markdown-section table .attribute-tooltip {
-  background: none;
-  border-bottom: dashed 1px var(--sl-color-gray-200);
-  cursor: help;
-}
-
-/* Iframes */
-.markdown-section iframe {
-  border: none;
-}
-
-/* Tips & Warnings */
-.markdown-section p.tip,
-.markdown-section p.warn {
-  position: relative;
-  background: var(--sl-color-gray-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-white);
-  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-500);
-}
-
-.markdown-section p.warn:before {
-  background-color: var(--sl-color-primary-500);
-}
-
-.markdown-section p.tip {
-  border-left-color: var(--sl-color-danger-500);
-}
-
-.markdown-section p.tip:before {
-  background-color: var(--sl-color-danger-500);
-}
-
-.markdown-section p.tip code,
-.markdown-section p.warn code {
-  background-color: var(--sl-color-gray-100);
-}
-
-/* Component headers */
-.component-header {
-  border-bottom: solid 1px var(--sl-color-gray-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;
-}
-
-.component-header__tag code {
-  background: none;
-  color: var(--sl-color-gray-500);
-  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;
-}
-
-/* Copy button */
-.docsify-copy-code-button {
-  font-size: var(--sl-font-size-small) !important;
-  border-top-right-radius: var(--sl-border-radius-medium) !important;
-  border-bottom-left-radius: var(--sl-border-radius-medium) !important;
-}
-
-/* Repo buttons */
-html .repo-button {
-  display: inline-flex;
-  align-items: center;
-  background-color: var(--sl-color-white);
-  border: solid 1px var(--sl-color-gray-200);
-  border-radius: var(--sl-border-radius-medium);
-  box-shadow: var(--sl-shadow-x-small);
-  font-size: var(--sl-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-  line-height: 2;
-  text-decoration: none;
-  color: var(--sl-color-gray-700);
-  padding: var(--sl-spacing-xx-small) var(--sl-spacing-small);
-  margin-bottom: var(--sl-spacing-xx-small);
-  transition: 0.25s all;
-}
-
-html .repo-button:hover {
-  text-decoration: none;
-  background-color: var(--sl-color-gray-50);
-  border: solid 1px var(--sl-color-gray-200);
-}
-
-html .repo-button:focus {
-  outline: none;
-  border-color: var(--sl-color-primary-500);
-  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
-}
-
-html .repo-button:not(:last-of-type) {
-  margin-right: 0.125rem;
-}
-
-html .repo-button sl-icon {
-  position: relative;
-  vertical-align: middle;
-  margin-right: 0.35rem;
-}
-
-html .repo-button--small {
-  font-size: var(--sl-font-size-x-small);
-  padding: var(--sl-spacing-xxx-small) var(--sl-spacing-x-small);
-}
-
-html .repo-button--sponsor sl-icon {
-  color: #ea4aaa;
-}
-
-html .repo-button--github sl-icon {
-  color: #242a2e;
-}
-
-html .repo-button--twitter sl-icon {
-  color: #1ea0f2;
-}
-
-body[data-page^='tokens/'] .table-wrapper td:first-child,
-body[data-page^='tokens/'] .table-wrapper td:first-child code {
-  white-space: nowrap;
-}

docs/components/alert.md

@@ -1,234 +0,0 @@
-# Alert
-
-[component-header:sl-alert]
-
-Alerts are used to display important messages either 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>
-```
-
-?> Alerts will not be visible if the `open` attribute is not present.
-
-## Examples
-
-### Types
-
-Set the `type` attribute to change the alert's type.
-
-```html preview
-<sl-alert type="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 type="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 type="info" 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 type="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 type="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>
-```
-
-### Closable
-
-Add the `closable` attribute to show a close button that will hide the alert.
-
-```html preview
-<sl-alert type="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>
-```
-
-### Without Icons
-
-Icons are optional. Simply omit the `icon` slot if you don't want them.
-
-```html preview
-<sl-alert type="primary" open>
-  Nothing fancy here, just a simple alert.
-</sl-alert>
-```
-
-### Duration
-
-Set the `duration` prop 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 type="primary">Show Alert</sl-button>
-
-  <sl-alert type="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>
-```
-
-### 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` prop 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 type="primary">Primary</sl-button>
-  <sl-button type="success">Success</sl-button>
-  <sl-button type="info">Info</sl-button>
-  <sl-button type="warning">Warning</sl-button>
-  <sl-button type="danger">Danger</sl-button>
-  
-  <sl-alert type="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 type="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 type="info" 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 type="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 type="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', 'info', 'warning', 'danger'].map(type => {
-    const button = container.querySelector(`sl-button[type="${type}"]`);
-    const alert = container.querySelector(`sl-alert[type="${type}"]`);
-
-    button.addEventListener('click', () => alert.toast());
-  });
-</script>
-```
-
-### 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 type="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, type = 'primary', icon = 'info-circle', duration = 3000) {
-    const alert = Object.assign(document.createElement('sl-alert'), {
-      type: type,
-      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/animation.md

@@ -1,178 +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 a `name` and `duration`. Refer to the [properties table](#properties) for additional options.
-
-```html preview
-<div class="animation-overview">
-  <sl-animation name="bounce" duration="2000"><div class="box"></div></sl-animation>
-  <sl-animation name="jello" duration="2000"><div class="box"></div></sl-animation>
-  <sl-animation name="heartBeat" duration="2000"><div class="box"></div></sl-animation>
-  <sl-animation name="flip" duration="2000"><div class="box"></div></sl-animation>
-</div>
-
-<style>
-  .animation-overview .box {
-    display: inline-block;
-    width: 100px;
-    height: 100px;
-    background-color: var(--sl-color-primary-500);
-    margin: 1.5rem;
-  }
-</style>
-```
-
-?> The animation will be applied only 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">
-    <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-range min="0" max="2" step=".5" value="1"></sl-range>
-  </div>
-</div>
-
-<script type="module">
-  import { getAnimationNames, getEasingNames } from '/dist/shoelace.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-range');
-  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-change', () => animation.playbackRate = playbackRate.value);
-  playbackRate.tooltipFormatter = val => `Playback Rate = ${val}`;
-</script>
-
-<style>
-  .animation-sandbox .box {
-    width: 100px;
-    height: 100px;
-    background-color: var(--sl-color-primary-500);
-  }
-
-  .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.pause = null;
-    } else {
-      // Reset the animation when the box leaves the viewport
-      animation.pause = true;
-      animation.setCurrentTime(0);
-    }
-  });
-  observer.observe(box);
-</script>
-
-<style>
-  .animation-scroll .box {
-    display: inline-block;
-    width: 100px;
-    height: 100px;
-    background-color: var(--sl-color-primary-500);
-  }  
-</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">
-    <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-500);
-  }
-</style>
-```
-
-[component-metadata:sl-animation]

docs/components/avatar.md

@@ -1,86 +0,0 @@
-# Avatar
-
-[component-header:sl-avatar]
-
-Avatars are used to represent a person or object.
-
-```html preview
-<sl-avatar></sl-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"
-  alt="Gray tabby kitten looking down"
-></sl-avatar>
-```
-
-### 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"></sl-avatar>
-```
-
-### 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>
-  <sl-icon slot="icon" name="image"></sl-icon>
-</sl-avatar>
-
-<sl-avatar>
-  <sl-icon slot="icon" name="archive"></sl-icon>
-</sl-avatar>
-
-<sl-avatar>
-  <sl-icon slot="icon" name="briefcase"></sl-icon>
-</sl-avatar>
-```
-
-### Shapes
-
-Avatars can be shaped using the `shape` attribute.
-
-```html preview
-<sl-avatar shape="square"></sl-avatar>
-
-<sl-avatar shape="rounded"></sl-avatar>
-
-<sl-avatar shape="circle"></sl-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"></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"></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"></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"></sl-avatar>
-</div>
-
-<style>
-  .avatar-group sl-avatar:not(:first-of-type) {
-    margin-left: -1rem;
-  }
-
-  .avatar-group sl-avatar::part(base) {
-    border: solid 2px white;
-  }
-</style>
-```
-
-[component-metadata:sl-avatar]

docs/components/badge.md

@@ -1,90 +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>
-```
-
-## Examples
-
-### Types
-
-Set the `type` attribute to change the badge's type.
-
-```html preview
-<sl-badge type="primary">Primary</sl-badge>
-<sl-badge type="success">Success</sl-badge>
-<sl-badge type="info">Info</sl-badge>
-<sl-badge type="warning">Warning</sl-badge>
-<sl-badge type="danger">Danger</sl-badge>
-```
-
-### Pill Badges
-
-Use the `pill` attribute to give badges rounded edges.
-
-```html preview
-<sl-badge type="primary" pill>Primary</sl-badge>
-<sl-badge type="success" pill>Success</sl-badge>
-<sl-badge type="info" pill>Info</sl-badge>
-<sl-badge type="warning" pill>Warning</sl-badge>
-<sl-badge type="danger" pill>Danger</sl-badge>
-```
-
-### Pulsating Badges
-
-Use the `pulse` attribute to draw attention to the badge with a subtle animation.
-
-```html preview
-<div class="badge-pulse">
-  <sl-badge type="primary" pill pulse>1</sl-badge>
-  <sl-badge type="success" pill pulse>1</sl-badge>
-  <sl-badge type="info" pill pulse>1</sl-badge>
-  <sl-badge type="warning" pill pulse>1</sl-badge>
-  <sl-badge type="danger" pill pulse>1</sl-badge>
-</div>
-
-<style>
-  .badge-pulse sl-badge:not(:last-of-type) {
-    margin-right: 1rem;
-  }
-</style>
-```
-
-### With Buttons
-
-One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.
-
-```html preview
-<sl-button>
-  Requests
-  <sl-badge pill>30</sl-badge>
-</sl-button>
-
-<sl-button style="margin-left: 1rem;">
-  Warnings
-  <sl-badge type="warning" pill>8</sl-badge>
-</sl-button>
-
-<sl-button style="margin-left: 1rem;">
-  Errors
-  <sl-badge type="danger" pill>6</sl-badge>
-</sl-button>
-```
-
-### 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" type="info" pill>4</sl-badge></sl-menu-item>
-  <sl-menu-item>Replies <sl-badge slot="suffix" type="info" pill>12</sl-badge></sl-menu-item>
-</sl-menu>
-```
-
-[component-metadata:sl-badge]

docs/components/button-group.md

@@ -1,221 +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>
-```
-
-## 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>
-```
-
-### Theme Buttons
-
-Theme buttons are supported through the button's `type` attribute.
-
-```html preview
-<sl-button-group>
-  <sl-button type="primary">Left</sl-button>
-  <sl-button type="primary">Center</sl-button>
-  <sl-button type="primary">Right</sl-button>
-</sl-button-group>
-
-<br><br>
-
-<sl-button-group>
-  <sl-button type="success">Left</sl-button>
-  <sl-button type="success">Center</sl-button>
-  <sl-button type="success">Right</sl-button>
-</sl-button-group>
-
-<br><br>
-
-<sl-button-group>
-  <sl-button type="info">Left</sl-button>
-  <sl-button type="info">Center</sl-button>
-  <sl-button type="info">Right</sl-button>
-</sl-button-group>
-
-<br><br>
-
-<sl-button-group>
-  <sl-button type="warning">Left</sl-button>
-  <sl-button type="warning">Center</sl-button>
-  <sl-button type="warning">Right</sl-button>
-</sl-button-group>
-
-<br><br>
-
-<sl-button-group>
-  <sl-button type="danger">Left</sl-button>
-  <sl-button type="danger">Center</sl-button>
-  <sl-button type="danger">Right</sl-button>
-</sl-button-group>
-```
-
-### 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>
-```
-
-### Dropdowns in Button Groups
-
-Dropdowns can be placed inside button groups as long as the trigger is a `<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>
-```
-
-### Split Buttons
-
-Create a split button using a button and a dropdown.
-
-```html preview
-<sl-button-group> 
-  <sl-button type="primary">Save</sl-button>
-  <sl-dropdown placement="bottom-end">
-    <sl-button slot="trigger" type="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>
-```
-
-### 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>
-```
-
-### 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>
-```
-
-[component-metadata:sl-button-group]

docs/components/button.md

@@ -1,183 +0,0 @@
-# Button
-
-[component-header:sl-button]
-
-Buttons represent actions that are available to the user.
-
-```html preview
-<sl-button>Button</sl-button>
-```
-
-## Examples
-
-### Types
-
-Use the `type` attribute to set the button's type.
-
-```html preview
-<sl-button type="default">Default</sl-button>
-<sl-button type="primary">Primary</sl-button>
-<sl-button type="success">Success</sl-button>
-<sl-button type="info">Info</sl-button>
-<sl-button type="warning">Warning</sl-button>
-<sl-button type="danger">Danger</sl-button>
-```
-
-### Sizes
-
-Use the `size` prop 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>
-```
-
-### Pill Buttons
-
-Use the `pill` prop 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>
-```
-
-### Circle Buttons
-
-Use the `circle` prop to create circular icon buttons.
-
-```html preview
-<sl-button type="default" size="small" circle><sl-icon name="gear"></sl-icon></sl-button>
-<sl-button type="default" size="medium" circle><sl-icon name="gear"></sl-icon></sl-button>
-<sl-button type="default" size="large" circle><sl-icon name="gear"></sl-icon></sl-button>
-```
-
-### Text Buttons
-
-Use the `text` type to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.
-
-```html preview
-<sl-button type="text" size="small">Text</sl-button>
-<sl-button type="text" size="medium">Text</sl-button>
-<sl-button type="text" size="large">Text</sl-button>
-```
-
-### 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>
-```
-
-?> 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 its `width`. This is useful for making buttons span the full width of their container on smaller screens.
-
-```html preview
-<sl-button type="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
-<sl-button type="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
-<sl-button type="default" size="large" style="width: 100%;">Large</sl-button>
-```
-
-### Prefix and Suffix Icons
-
-Use the `prefix` and `suffix` slots to add icons.
-
-```html preview
-<sl-button type="default" size="small">
-  <sl-icon slot="prefix" name="gear"></sl-icon>
-  Settings
-</sl-button>
-
-<sl-button type="default" size="small">
-  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
-  Refresh
-</sl-button>
-
-<sl-button type="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 type="default">
-  <sl-icon slot="prefix" name="gear"></sl-icon>
-  Settings
-</sl-button>
-
-<sl-button type="default">
-  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
-  Refresh
-</sl-button>
-
-<sl-button type="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 type="default" size="large">
-  <sl-icon slot="prefix" name="gear"></sl-icon>
-  Settings
-</sl-button>
-
-<sl-button type="default" size="large">
-  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
-  Refresh
-</sl-button>
-
-<sl-button type="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>
-```
-
-### Caret
-
-Use the `caret` prop 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>
-```
-
-### Loading
-
-Use the `loading` prop 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 type="default" loading>Default</sl-button>
-<sl-button type="primary" loading>Primary</sl-button>
-<sl-button type="success" loading>Success</sl-button>
-<sl-button type="info" loading>Info</sl-button>
-<sl-button type="warning" loading>Warning</sl-button>
-<sl-button type="danger" loading>Danger</sl-button>
-```
-
-### Disabled
-
-Use the `disabled` prop to disable a button. Clicks will be suppressed until the disabled state is removed.
-
-```html preview
-<sl-button type="default" disabled>Default</sl-button>
-<sl-button type="primary" disabled>Primary</sl-button>
-<sl-button type="success" disabled>Success</sl-button>
-<sl-button type="info" disabled>Info</sl-button>
-<sl-button type="warning" disabled>Warning</sl-button>
-<sl-button type="danger" disabled>Danger</sl-button>
-```
-
-[component-metadata:sl-button]

docs/components/card.md

@@ -1,144 +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 type="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-gray-500);
-  }
-
-  .card-overview [slot="footer"] {
-    display: flex; 
-    justify-content: space-between; 
-    align-items: center;
-  }
-</style>
-```
-
-## Examples
-
-## Basic Card
-
-Basic cards aren't very exciting, but they can display any content you want them to.
-
-```html 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>
-```
-
-## 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>
-```
-
-## 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" type="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>
-```
-
-## 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>
-```
-
-[component-metadata:sl-card]

docs/components/checkbox.md

@@ -1,39 +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>
-```
-
-?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
-
-## Examples
-
-### Checked
-
-Use the `checked` attribute to activate the checkbox.
-
-```html preview
-<sl-checkbox checked>Checked</sl-checkbox>
-```
-
-### Indeterminate
-
-Use the `indeterminate` attribute to make the checkbox indeterminate.
-
-```html preview
-<sl-checkbox indeterminate>Indeterminate</sl-checkbox>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable the checkbox.
-
-```html preview
-<sl-checkbox disabled>Disabled</sl-checkbox>
-```
-
-[component-metadata:sl-checkbox]

docs/components/color-picker.md

@@ -1,52 +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>
-```
-
-## 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>
-```
-
-### 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>
-```
-
-### 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>
-```
-
-
-### 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>
-```
-
-[component-metadata:sl-color-picker]

docs/components/details.md

@@ -1,65 +0,0 @@
-# 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>
-```
-
-## 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>
-```
-
-### 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-xx-small);
-  }
-</style>
-```
-
-[component-metadata:sl-details]

docs/components/dialog.md

@@ -1,141 +0,0 @@
-# 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" type="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>
-```
-
-## 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" type="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>
-```
-
-### 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-gray-200); padding: 0 1rem;">
-    <p>Scroll down and give it a try! 👇</p>
-  </div>
-  <sl-button slot="footer" type="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>
-```
-
-### Ignoring Clicks on the Overlay
-
-By default, dialogs are closed when the user clicks or taps on the overlay. To prevent this behavior, cancel the `sl-overlay-dismiss` event.
-
-```html preview
-<sl-dialog label="Dialog" class="dialog-no-overlay-dismiss">
-  This dialog will not be closed when you click outside of it.
-  <sl-button slot="footer" type="primary">Close</sl-button>
-</sl-dialog>
-
-<sl-button>Open Dialog</sl-button>
-
-<script>
-  (() => {
-    const dialog = document.querySelector('.dialog-no-overlay-dismiss');
-    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-overlay-dismiss', event => event.preventDefault());
-  })();
-</script>
-```
-
-### Customizing Initial Focus
-
-By default, the dialog's panel will gain focus when opened. To set focus on a different element, listen for 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" type="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.setFocus({ preventScroll: true });
-    });
-  })();
-</script>
-```
-
-[component-metadata:sl-dialog]

docs/components/drawer.md

@@ -1,237 +0,0 @@
-# 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" type="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[type="primary"]');
-
-    openButton.addEventListener('click', () => drawer.show());
-    closeButton.addEventListener('click', () => drawer.hide());
-  })();
-</script>
-```
-
-## Examples
-
-### Slide in From Left
-
-To make the drawer slide in from the left, set the `placement` attribute to `left`.
-
-```html preview
-<sl-drawer label="Drawer" placement="left" class="drawer-placement-left">
-  This drawer slides in from the left.
-  <sl-button slot="footer" type="primary">Close</sl-button>
-</sl-drawer>
-
-<sl-button>Open Drawer</sl-button>
-
-<script>
-  (() => {
-    const drawer = document.querySelector('.drawer-placement-left');
-    const openButton = drawer.nextElementSibling;
-    const closeButton = drawer.querySelector('sl-button[type="primary"]');
-
-    openButton.addEventListener('click', () => drawer.show());
-    closeButton.addEventListener('click', () => drawer.hide());
-  })();
-</script>
-```
-
-### 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" type="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[type="primary"]');
-
-    openButton.addEventListener('click', () => drawer.show());
-    closeButton.addEventListener('click', () => drawer.hide());
-  })();
-</script>
-```
-
-### 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" type="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[type="primary"]');
-
-    openButton.addEventListener('click', () => drawer.show());
-    closeButton.addEventListener('click', () => drawer.hide());
-  })();
-</script>
-```
-
-### 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` prop 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" type="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[type="primary"]');
-
-    openButton.addEventListener('click', () => drawer.show());
-    closeButton.addEventListener('click', () => drawer.hide());
-  })();
-</script>
-```
-
-### 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" type="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[type="primary"]');
-
-    openButton.addEventListener('click', () => drawer.show());
-    closeButton.addEventListener('click', () => drawer.hide());
-  })();
-</script>
-```
-
-### 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-gray-200); padding: 0 1rem;">
-    <p>Scroll down and give it a try! 👇</p>
-  </div>
-  <sl-button slot="footer" type="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[type="primary"]');
-
-    openButton.addEventListener('click', () => drawer.show());
-    closeButton.addEventListener('click', () => drawer.hide());
-  })();
-</script>
-```
-
-### Ignoring Clicks on the Overlay
-
-By default, drawers are closed when the user clicks or taps on the overlay. To prevent this behavior, cancel the `sl-overlay-dismiss` event.
-
-```html preview
-<sl-drawer label="Drawer" class="drawer-no-overlay-dismiss">
-  This drawer will not be closed when you click outside of it.
-  <sl-button slot="footer" type="primary">Close</sl-button>
-</sl-drawer>
-
-<sl-button>Open Drawer</sl-button>
-
-<script>
-  (() => {
-    const drawer = document.querySelector('.drawer-no-overlay-dismiss');
-    const openButton = drawer.nextElementSibling;
-    const closeButton = drawer.querySelector('sl-button[type="primary"]');
-
-    openButton.addEventListener('click', () => drawer.show());
-    closeButton.addEventListener('click', () => drawer.hide());
-
-    drawer.addEventListener('sl-overlay-dismiss', event => event.preventDefault());
-  })();
-</script>
-```
-
-### Customizing Initial Focus
-
-By default, the drawer's panel will gain focus when opened. To set focus on a different element, listen for 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" type="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[type="primary"]');
-
-    openButton.addEventListener('click', () => drawer.show());
-    closeButton.addEventListener('click', () => drawer.hide());
-
-    drawer.addEventListener('sl-initial-focus', event => {
-      event.preventDefault();
-      input.setFocus({ preventScroll: true });
-    });    
-  })();
-</script>
-```
-
-[component-metadata:sl-drawer]

docs/components/dropdown.md

@@ -1,177 +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.md) 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.md) and [select](/components/select.md)). 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-menu-divider></sl-menu-divider>
-    <sl-menu-item checked>Checked</sl-menu-item>
-    <sl-menu-item disabled>Disabled</sl-menu-item>
-    <sl-menu-divider></sl-menu-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>
-```
-
-## Examples
-
-### 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-menu-divider></sl-menu-divider>
-    <sl-menu-item>Find</sl-menu-item>
-    <sl-menu-item>Replace</sl-menu-item>
-  </sl-menu>
-</sl-dropdown>
-```
-
-### 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-menu-divider></sl-menu-divider>
-    <sl-menu-item>Find</sl-menu-item>
-    <sl-menu-item>Replace</sl-menu-item>
-  </sl-menu>
-</sl-dropdown>
-```
-
-### 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-menu-divider></sl-menu-divider>
-    <sl-menu-item>Find</sl-menu-item>
-    <sl-menu-item>Replace</sl-menu-item>
-  </sl-menu>
-</sl-dropdown>
-```
-
-### 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>
-```
-
-### Getting the Selected Item
-
-When dropdowns are used with [menus](/components/menu.md), 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>
-```
-
-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>
-```
-
-[component-metadata:sl-dropdown]

docs/components/form.md

@@ -1,217 +0,0 @@
-# Form
-
-[component-header:sl-form]
-
-Forms collect data that can easily be processed and sent to a server.
-
-All Shoelace components make 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 will not recognize Shoelace form controls.
-
-This component solves that problem by serializing _both_ Shoelace form controls and native form controls when the form is submitted. The resulting form data is exposed in the `sl-submit` event as a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object in `event.detail.formData`. You can also find an array of form controls in `event.detail.formControls`.
-
-Shoelace forms don't make use of `action` and `method` attributes and they don't submit the same was as native forms. To handle submission, you need to listen for the `sl-submit` event as shown in the example below and make an XHR request with the resulting form data.
-
-```html preview
-<sl-form class="form-overview">
-  <sl-input name="name" type="text" label="Name"></sl-input>
-  <br>
-  <sl-select name="favorite" label="Select your favorite">
-    <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-select>
-  <br>
-  <sl-checkbox name="agree" value="yes">
-    I totally agree
-  </sl-checkbox>
-  <br><br>
-  <sl-button submit>Submit</sl-button>
-</sl-form>
-
-<script>
-  const form = document.querySelector('.form-overview');
-
-  // Watch for the slSubmit event
-  form.addEventListener('sl-submit', event => {
-    const formData = event.detail.formData;
-    let output = '';
-
-    //
-    // Example 1: Post data to a server and wait for a JSON response
-    //
-    fetch('https://jsonplaceholder.typicode.com/posts', {
-      method: 'POST',
-      body: formData
-    })
-    .then(response => response.json())
-    .then(result => {
-      console.log('Success:', result);
-    })
-    .catch(error => {
-      console.error('Error:', error);
-    });
-
-    //
-    // Example 2: Output all form control names + values
-    //
-    for (const entry of formData.entries()) {
-      output += `${entry[0]}: ${entry[1]}\n`;
-    }
-    alert(output);
-
-    //
-    // Example 3: Get all form controls that were serialized as 
-    // an array of HTML elements
-    //
-    console.log(event.detail.formControls);
-  });
-</script>
-```
-
-## 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 many form controls. You can enable it using props such as `required`, `pattern`, `minlength`, and `maxlength`. As the user interacts with the form control, the `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 `<sl-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.
-
-Note that validity is not checked until the user interacts with the control or its containing form is submitted. This prevents required controls from being rendered as invalid right away, which can result in a poor user experience. If you need this behavior, set the `invalid` attribute initially.
-
-!> 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
-<sl-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="primary" submit>Submit</sl-button>
-</sl-form>
-
-<script>
-  const form = document.querySelector('.input-validation-required');
-  form.addEventListener('sl-submit', () => alert('All fields are valid!'));
-</script>
-```
-
-### 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
-<sl-form class="input-validation-pattern">
-  <sl-input name="letters" required label="Letters" pattern="[A-Za-z]+"></sl-input>
-  <br>
-  <sl-button type="primary" submit>Submit</sl-button>
-</sl-form>
-
-<script>
-  const form = document.querySelector('.input-validation-pattern');
-  form.addEventListener('sl-submit', () => alert('All fields are valid!'));
-</script>
-```
-
-### Input Types
-
-Some input types will automatically trigger constraints, such as `email` and `url`.
-
-```html preview
-<sl-form class="input-validation-type">
-  <sl-input type="email" label="Email" placeholder="you@example.com" required></sl-input>
-  <br>
-  <sl-input type="url" label="URL" placeholder="https://example.com/" required></sl-input>
-  <br>
-  <sl-button type="primary" submit>Submit</sl-button>
-</sl-form>
-
-<script>
-  const form = document.querySelector('.input-validation-type');
-  form.addEventListener('sl-submit', () => alert('All fields are valid!'));
-</script>
-```
-
-### 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
-<sl-form class="input-validation-custom">
-  <sl-input label="Type 'shoelace'" required></sl-input>
-  <br>
-  <sl-button type="primary" submit>Submit</sl-button>
-</sl-form>
-
-<script>
-  const form = document.querySelector('.input-validation-custom');
-  const input = form.querySelector('sl-input');
-
-  form.addEventListener('sl-submit', () => 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>
-```
-
-### 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-ring: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-danger);
-  }
-</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` prop 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` prop 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
-<sl-form novalidate>
-  <sl-input class="invalid"></sl-input>
-</sl-form>
-
-<style>
-  sl-input.invalid {
-    ...
-  }
-</style>
-```
-
-[component-metadata:sl-form]

docs/components/format-bytes.md

@@ -1,58 +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>
-```
-
-## 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>
-```
-
-### 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>
-```
-
-### Localization
-
-Use the `locale` attribute to set the number formatting locale.
-
-```html preview
-<sl-format-bytes value="12" locale="de"></sl-format-bytes><br>
-<sl-format-bytes value="1200" locale="de"></sl-format-bytes><br>
-<sl-format-bytes value="1200000" locale="de"></sl-format-bytes><br>
-<sl-format-bytes value="1200000000" locale="de"></sl-format-bytes>
-```
-
-[component-metadata:sl-format-bytes]

docs/components/format-date.md

@@ -1,64 +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>
-```
-
-The `date` prop 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>
-```
-
-### 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 `hourFormat` prop 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>
-```
-
-### Localization
-
-Use the `locale` attribute to set the date/time formatting locale.
-
-```html preview
-English: <sl-format-date locale="en"></sl-format-date><br>
-French: <sl-format-date locale="fr"></sl-format-date><br>
-Russian: <sl-format-date locale="ru"></sl-format-date><br>
-```
-
-[component-metadata:sl-format-date]

docs/components/format-number.md

@@ -1,61 +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>
-```
-
-## 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=".25"></sl-format-number><br>
-<sl-format-number type="percent" value=".50"></sl-format-number><br>
-<sl-format-number type="percent" value=".75"></sl-format-number><br>
-<sl-format-number type="percent" value="1"></sl-format-number>
-```
-
-### Localization
-
-Use the `locale` attribute to set the number formatting locale.
-
-```html preview
-English: <sl-format-number value="2000" locale="en" minimum-fraction-digits="2"></sl-format-number><br>
-German: <sl-format-number value="2000" locale="de" minimum-fraction-digits="2"></sl-format-number><br>
-Russian: <sl-format-number value="2000" locale="ru" minimum-fraction-digits="2"></sl-format-number>
-```
-
-### 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 `locale` to ensure the the number is formatted correctly for the target locale.
-
-```html preview
-<sl-format-number type="currency" currency="USD" value="2000" locale="en-US"></sl-format-number><br>
-<sl-format-number type="currency" currency="GBP" value="2000" locale="en-GB"></sl-format-number><br>
-<sl-format-number type="currency" currency="EUR" value="2000" locale="de"></sl-format-number><br>
-<sl-format-number type="currency" currency="RUB" value="2000" locale="ru"></sl-format-number><br>
-<sl-format-number type="currency" currency="CNY" value="2000" locale="zh-cn"></sl-format-number>
-```
-
-[component-metadata:sl-format-number]

docs/components/icon-button.md

@@ -1,67 +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>
-```
-
-## 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>
-```
-
-### 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>
-```
-
-### 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>
-```
-
-### Disabled
-```html preview
-<sl-icon-button name="gear" label="Settings" disabled></sl-icon-button>
-```
-
-[component-metadata:sl-icon-button]

docs/components/icon.md

@@ -1,626 +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,300 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. If you prefer, you can also register a [custom icon library](#icon-libraries).
-
-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="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>
-  <sl-icon name="x-circle"></sl-icon>
-</div>
-```
-
-### 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="/assets/images/shoe.svg" style="font-size: 8rem;"></sl-icon>
-```
-
-## Icon Libraries
-
-Shoelace lets you register additional icons to use with the `<sl-icon>` component through icon libraries. The 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.
-
-To register an 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 '/shoelace/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/shoelace.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/shoelace.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/shoelace.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/shoelace.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>
-```
-
-### 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/shoelace.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/shoelace.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/shoelace.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 has two variations: line (default) and fill (`*-fill`). It also groups icons by categories, so the name must include the category and icon separated by a slash. 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/shoelace.js';
-
-  registerIconLibrary('remixicon', {
-    resolver: name => {
-      const match = name.match(/^(.*?)\/(.*?)(-(fill))?$/);
-      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]}${match[3] || '-line'}.svg`;
-    },
-    mutator: svg => svg.setAttribute('fill', 'currentColor')
-  });
-</script>
-
-<div style="font-size: 24px;">
-  <sl-icon library="remixicon" name="business/cloud"></sl-icon>
-  <sl-icon library="remixicon" name="design/brush"></sl-icon>
-  <sl-icon library="remixicon" name="business/pie-chart"></sl-icon>
-  <sl-icon library="remixicon" name="development/bug"></sl-icon>
-  <sl-icon library="remixicon" name="media/image"></sl-icon>
-  <sl-icon library="remixicon" name="system/alert"></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/shoelace.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
-
-Shoelace comes bundled with over 1,300 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These are the default icons that display when you use `<sl-icon>` without a `name` attribute. If you prefer to have these icons resolve elsewhere, you can register an icon library with 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 '/shoelace/dist/utilities/icon-library.js';
-
-  registerIconLibrary('default', {
-    resolver: name => `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.0.0/icons/${name}.svg`
-  });
-</script>
-```
-
-Alternatively, you can replace the default icons with a completely different icon set. Just keep in mind that some of the default icons are used by components so you'll want to make sure those names resolve to an appropriate alternative.
-
-```html
-<script type="module">
-  import { registerIconLibrary } from '/shoelace/dist/utilities/icon-library.js';
-
-  registerIconLibrary('default', {
-    name => `/my/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 = [];
-
-      // 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">
-            <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', () => {
-        [...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;
-          }
-        });
-      });
-
-      // 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-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-circle);
-    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-500);
-  }
-
-  .sl-theme-dark .icon-list-item:hover {
-    background-color: var(--sl-color-primary-900);
-  }
-
-  .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,29 +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>
-```
-
-## 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="0">
-  <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>
-```
-
-[component-metadata:sl-image-comparer]

docs/components/include.md

@@ -1,39 +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="/assets/examples/include.html"></sl-include>
-```
-
-## 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="/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,121 +0,0 @@
-# Input
-
-[component-header:sl-input]
-
-Inputs collect data from the user.
-
-```html preview
-<sl-input></sl-input>
-```
-
-?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
-
-?> Please refer to the section on [form control validation](/components/form?id=form-control-validation) to learn how to do client-side validation.
-
-## Examples
-
-### Placeholders
-
-Use the `placeholder` attribute to add a placeholder.
-
-```html preview
-<sl-input placeholder="Type something"></sl-input>
-```
-
-### Clearable
-
-Add the `clearable` prop to add a clear button when the input has content.
-
-```html preview
-<sl-input placeholder="Clearable" clearable></sl-input>
-```
-
-### Toggle Password
-
-Add the `toggle-password` prop 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>
-```
-
-### Pill
-
-Use the `pill` prop 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>
-```
-
-### 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>
-```
-
-### 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>
-```
-
-### Prefix & Suffix Icons
-
-Use the `prefix` and `suffix` slots to add icons.
-
-```html preview
-<sl-input placeholder="Small" size="small">
-  <sl-icon name="tag" slot="prefix"></sl-icon>
-  <sl-icon name="gear" slot="suffix"></sl-icon>
-</sl-input>
-<br>
-<sl-input placeholder="Medium" size="medium">
-  <sl-icon name="tag" slot="prefix"></sl-icon>
-  <sl-icon name="gear" slot="suffix"></sl-icon>
-</sl-input>
-<br>
-<sl-input placeholder="Large" size="large">
-  <sl-icon name="tag" slot="prefix"></sl-icon>
-  <sl-icon name="gear" slot="suffix"></sl-icon>
-</sl-input>
-```
-
-### 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>
-```
-
-### 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>
-```
-
-[component-metadata:sl-input]

docs/components/menu-divider.md

@@ -1,22 +0,0 @@
-# Menu Divider
-
-[component-header:sl-menu-divider]
-
-Menu dividers are used to visually group menu items.
-
-```html preview
-<sl-menu
-  style="max-width: 200px; border: solid 1px var(--sl-panel-border-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-divider></sl-menu-divider>
-  <sl-menu-item value="3">Option 3</sl-menu-item>
-  <sl-menu-item value="4">Option 4</sl-menu-item>
-  <sl-menu-divider></sl-menu-divider>
-  <sl-menu-item value="5">Option 5</sl-menu-item>
-  <sl-menu-item value="6">Option 6</sl-menu-item>
-</sl-menu>
-```
-
-[component-metadata:sl-menu-divider]

docs/components/menu-item.md

@@ -1,29 +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); 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-menu-divider></sl-menu-divider>
-  <sl-menu-item checked>Checked</sl-menu-item>
-  <sl-menu-item disabled>Disabled</sl-menu-item>
-  <sl-menu-divider></sl-menu-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>
-```
-
-[component-metadata:sl-menu-item]

docs/components/menu-label.md

@@ -1,23 +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); 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-menu-divider></sl-menu-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>
-```
-
-[component-metadata:sl-menu-label]

docs/components/menu.md

@@ -1,21 +0,0 @@
-# Menu
-
-[component-header:sl-menu]
-
-Menus provide a list of options for the user to choose from.
-
-Use [menu items](/components/menu-item.md), [menu dividers](/components/menu-divider.md), and [menu labels](/components/menu-label.md) to compose a menu.
-
-```html preview
-<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-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-menu-divider></sl-menu-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>
-```
-
-[component-metadata:sl-menu]

docs/components/progress-bar.md

@@ -1,60 +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 percentage="50"></sl-progress-bar>
-```
-
-## Examples
-
-### Custom Height
-
-Use the `--height` custom property to set the progress bar's height.
-
-```html preview
-<sl-progress-bar percentage="50" style="--height: 6px;"></sl-progress-bar>
-```
-
-### Labels
-
-Use the default slot to show a label.
-
-```html preview
-<sl-progress-bar percentage="50" class="progress-bar-labels">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-labels');
-  const subtractButton = progressBar.nextElementSibling.nextElementSibling;
-  const addButton = subtractButton.nextElementSibling;
-
-  addButton.addEventListener('click', () => {
-    const percentage = Math.min(100, progressBar.percentage + 10);
-    progressBar.percentage = percentage;
-    progressBar.textContent = `${percentage}%`;
-  });
-
-  subtractButton.addEventListener('click', () => {
-    const percentage = Math.max(0, progressBar.percentage - 10)
-    progressBar.percentage = percentage;
-    progressBar.textContent = `${percentage}%`;
-  });
-</script>
-```
-
-### 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, `percentage` is ignored and the label, if present, will not be shown.
-
-```html preview
-<sl-progress-bar indeterminate></sl-progress-bar>
-```
-
-[component-metadata:sl-progress-bar]

docs/components/progress-ring.md

@@ -1,71 +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 percentage="50"></sl-progress-ring>
-```
-
-## Examples
-
-### Size
-
-Use the `size` attribute to set the diameter of the progress ring.
-
-```html preview
-<sl-progress-ring percentage="50" size="200"></sl-progress-ring>
-```
-
-### Stroke Width
-
-Use the `stroke-width` attribute to set the width of the progress ring's indicator.
-
-```html preview
-<sl-progress-ring percentage="50" stroke-width="10"></sl-progress-ring>
-```
-
-### Colors
-
-To change the color, use the `--track-color` and `--indicator-color` custom properties.
-
-```html preview
-<sl-progress-ring 
-  percentage="50" 
-  style="--track-color: #ffe2c6; --indicator-color: tomato;"
-></sl-progress-ring>
-```
-
-### Labels
-
-Use the default slot to show a label.
-
-```html preview
-<sl-progress-ring percentage="50" size="200" class="progress-ring-labels" 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-labels');
-  const subtractButton = progressRing.nextElementSibling.nextElementSibling;
-  const addButton = subtractButton.nextElementSibling;
-
-  addButton.addEventListener('click', () => {
-    const percentage = Math.min(100, progressRing.percentage + 10);
-    progressRing.percentage = percentage;
-    progressRing.textContent = `${percentage}%`;
-  });
-
-  subtractButton.addEventListener('click', () => {
-    const percentage = Math.max(0, progressRing.percentage - 10)
-    progressRing.percentage = percentage;
-    progressRing.textContent = `${percentage}%`;
-  });
-</script>
-```
-
-[component-metadata:sl-progress-ring]

docs/components/radio.md

@@ -1,42 +0,0 @@
-# Radio
-
-[component-header:sl-radio]
-
-Radios allow the user to select one option from a group of many.
-
-```html preview
-<sl-radio>Radio</sl-radio>
-```
-
-?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
-
-## Examples
-
-### Checked
-
-Use the `checked` attribute to activate the radio.
-
-```html preview
-<sl-radio checked>Checked</sl-radio>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable the radio.
-
-```html preview
-<sl-radio disabled>Disabled</sl-radio>
-```
-
-### Grouping Radios
-
-Radios are grouped based on their `name` attribute and scoped to the nearest form.
-
-```html preview
-<sl-radio name="option" checked>Option 1</sl-radio><br>
-<sl-radio name="option">Option 2</sl-radio><br>
-<sl-radio name="option">Option 3</sl-radio><br>
-<sl-radio name="option">Option 4</sl-radio>
-```
-
-[component-metadata:sl-radio]

docs/components/range.md

@@ -1,73 +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 min="0" max="100" step="1"></sl-range>
-```
-
-?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
-
-## Examples
-
-### Disabled
-
-Use the `disabled` prop to disable a slider.
-
-```html preview
-<sl-range min="0" max="100" step="1" disabled></sl-range>
-```
-
-### Tooltip Placement
-
-By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
-
-```html preview
-<sl-range min="0" max="100" step="1" tooltip="bottom"></sl-range>
-```
-
-### Disable the Tooltip
-
-To disable the tooltip, set `tooltip` to `none`.
-
-```html preview
-<sl-range min="0" max="100" step="1" tooltip="none"></sl-range>
-```
-
-### Custom Tooltip Formatter
-
-You can change the tooltip's content by setting the `tooltipFormatter` prop 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>
-```
-
-### 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>
-```
-
-### 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>
-```
-
-[component-metadata:sl-range]

docs/components/rating.md

@@ -1,79 +0,0 @@
-# Rating
-
-[component-header:sl-rating]
-
-Ratings give users a way to quickly view and provide feedback.
-
-```html preview
-<sl-rating></sl-rating>
-```
-
-## 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>
-```
-
-### Precision
-
-Use the `precision` attribute to let users select fractional ratings.
-
-```html preview
-<sl-rating precision=".5" value="2.5"></sl-rating>
-```
-
-## Symbol Sizes
-
-Set the `--symbol-size` custom property to adjust the size.
-
-```html preview
-<sl-rating style="--symbol-size: 2rem;"></sl-rating>
-```
-
-### Readonly
-
-Use the `readonly` attribute to display a rating that users can't change.
-
-```html preview
-<sl-rating readonly value="3"></sl-rating>
-```
-
-### Disabled
-
-Use the `disable` attribute to disable the rating.
-
-```html preview
-<sl-rating disabled value="3"></sl-rating>
-```
-
-### 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>
-```
-
-### Value-based Icons
-
-```html preview
-<sl-rating class="rating-emojis"></sl-rating>
-
-<script>
-  const rating = document.querySelector('.rating-emojis');
-
-  rating.symbol = (value) => {
-    const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
-    return icons[value - 1];
-  };
-</script>
-```
-
-[component-metadata:sl-rating]

docs/components/relative-time.md

@@ -1,61 +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>
-```
-
-The `date` prop 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>
-```
-
-### 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>
-```
-
-### Localization
-
-Use the `locale` attribute to set the desired locale.
-
-```html preview
-English: <sl-relative-time date="2020-07-15T09:17:00-04:00" locale="en-US"></sl-relative-time><br>
-Chinese: <sl-relative-time date="2020-07-15T09:17:00-04:00" locale="zh-CN"></sl-relative-time><br>
-German: <sl-relative-time date="2020-07-15T09:17:00-04:00" locale="de"></sl-relative-time><br>
-Greek: <sl-relative-time date="2020-07-15T09:17:00-04:00" locale="el"></sl-relative-time><br>
-Russian: <sl-relative-time date="2020-07-15T09:17:00-04:00" locale="ru"></sl-relative-time>
-```
-
-[component-metadata:sl-relative-time]

docs/components/resize-observer.md

@@ -1,39 +0,0 @@
-# Resize Observer
-
-[component-header:sl-resize-observer]
-
-Resize observers offer 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`, containing 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);
-  });
-</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>
-```
-
-[component-metadata:sl-resize-observer]

docs/components/responsive-embed.md

@@ -1,27 +0,0 @@
-# Responsive Embed
-
-[component-header:sl-responsive-embed]
-
-Displays embedded media in a responsive manner based on its aspect ratio.
-
-You can embed any element of the `<iframe>`, `<embed>`, or `<object>` type. The default aspect ratio is `16:9`.
-
-```html preview
-<sl-responsive-embed>
-  <iframe src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
-</sl-responsive-embed>
-```
-
-## Examples
-
-### Aspect Ratio
-
-To set the aspect ratio, use the `aspect-ratio` attribute.
-
-```html preview
-<sl-responsive-embed aspect-ratio="4:3">
-  <iframe src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</sl-responsive-embed>
-```
-
-[component-metadata:sl-responsive-embed]

docs/components/select.md

@@ -1,191 +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-menu-divider></sl-menu-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>
-```
-
-?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
-
-## 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>
-```
-
-### 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>
-```
-
-### Pill
-
-Use the `pill` prop 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>
-```
-
-### Disabled
-
-Use the `disabled` prop 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>
-```
-
-### 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-menu-divider></sl-menu-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>
-```
-
-### Grouping Options
-
-Options can be grouped visually using menu labels and menu 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-menu-divider></sl-menu-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>
-```
-
-### 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>
-```
-
-### Selecting Options Programmatically
-
-The `value` prop 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 placeholder="">
-    <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>
-```
-
-### 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>
-```
-
-### 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="option-1">Novice</sl-menu-item>
-  <sl-menu-item value="option-2">Intermediate</sl-menu-item>
-  <sl-menu-item value="option-3">Advanced</sl-menu-item>
-</sl-select>
-```
-
-[component-metadata:sl-select]

docs/components/skeleton.md

@@ -1,204 +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>
-```
-
-## Examples
-
-### Effects
-
-The default effect is `sheen`, which animates a sheen horizontally across the skeleton. There's also `pulse`, which fades the skeleton in and out. To disable animations, use `none`. Effects are intentionally subtle, as they can be distracting otherwise.
-
-```html preview
-<div class="skeleton-effects">
-  <sl-skeleton effect="sheen"></sl-skeleton>
-  Sheen
-
-  <sl-skeleton effect="pulse"></sl-skeleton>
-  Pulse
-
-  <sl-skeleton effect="none"></sl-skeleton>
-  None
-</div>
-
-<style>
-  .skeleton-effects {
-    font-size: var(--sl-font-size-small);
-  }
-
-  .skeleton-effects sl-skeleton:not(:first-child) {
-    margin-top: 1rem;
-  }
-</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>
-```
-
-### 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>
-```
-
-### 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>
-```
-
-### Custom Colors
-
-Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's color.
-
-```html preview
-<sl-skeleton style="--color: tomato; --sheen-color: #ffb094;"></sl-skeleton>
-```
-
-[component-metadata:sl-skeleton]

docs/components/spinner.md

@@ -1,39 +0,0 @@
-# Spinner
-
-[component-header:sl-spinner]
-
-Spinners are used to show the progress of an indeterminate operation.
-
-```html preview
-<sl-spinner></sl-spinner>
-```
-
-## Examples
-
-### Size
-
-Spinners are sized relative to 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>
-```
-
-### Stroke Width
-
-The width of the spinner can be changed by setting the `--stroke-width` custom property.
-
-```html preview
-<sl-spinner style="font-size: 2rem; --stroke-width: 6px;"></sl-spinner>
-```
-
-### 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: 2rem; --indicator-color: tomato;"></sl-spinner>
-```
-
-[component-metadata:sl-spinner]

docs/components/switch.md

@@ -1,39 +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>
-```
-
-?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
-
-## Examples
-
-### Checked
-
-Use the `checked` attribute to activate the switch.
-
-```html preview
-<sl-switch checked>Checked</sl-switch>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable the switch.
-
-```html preview
-<sl-switch disabled>Disabled</sl-switch>
-```
-
-### 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>
-```
-
-[component-metadata:sl-switch]

docs/components/tab-group.md

@@ -1,165 +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.md) and [tab panels](/components/tab-panel.md). 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>
-```
-
-## 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>
-```
-
-### Tabs on Left
-
-Tabs can be shown on the left by setting `placement` to `left`.
-
-```html preview
-<sl-tab-group placement="left">
-  <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>
-```
-
-### Tabs on Right
-
-Tabs can be shown on the right by setting `placement` to `right`.
-
-```html preview
-<sl-tab-group placement="right">
-  <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>
-```
-
-### Closable Tabs
-
-Add the `closable` prop 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>
-```
-
-### 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>
-```
-
-[component-metadata:sl-tab-group]

docs/components/tab-panel.md

@@ -1,23 +0,0 @@
-# Tab Panel
-
-[component-header:sl-tab-panel]
-
-Tab panels are used inside tab groups to display 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>
-```
-
-?> Additional demonstrations can be found in the [tab group examples](/components/tab-group.md).
-
-[component-metadata:sl-tab-panel]

docs/components/tab.md

@@ -1,16 +0,0 @@
-# Tab
-
-[component-header:sl-tab]
-
-Tabs are used inside tab groups to represent tab panels.
-
-```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>
-```
-
-?> Additional demonstrations can be found in the [tab group examples](/components/tab-group.md).
-
-[component-metadata:sl-tab]

docs/components/tag.md

@@ -1,65 +0,0 @@
-# Tag
-
-[component-header:sl-tag]
-
-Tags are used as labels to organize things or to indicate a selection.
-
-```html preview
-<sl-tag type="primary">Primary</sl-tag>
-<sl-tag type="success">Success</sl-tag>
-<sl-tag type="info">Info</sl-tag>
-<sl-tag type="warning">Warning</sl-tag>
-<sl-tag type="danger">Danger</sl-tag>
-```
-
-## Examples
-
-### Sizes
-
-Use the `size` prop 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>
-```
-
-### Pill
-
-Use the `pill` prop 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>
-```
-
-### Clearable
-
-Use the `clearable` attribute to add a clear button to the tag.
-
-```html preview
-<div class="tags-clearable">
-  <sl-tag size="small" clearable>Small</sl-tag>
-  <sl-tag size="medium" clearable>Medium</sl-tag>
-  <sl-tag size="large" clearable>Large</sl-tag>
-</div>
-
-<script>
-  const div = document.querySelector('.tags-clearable');
-
-  div.addEventListener('sl-clear', event => {
-    const tag = event.target;
-    tag.style.opacity = '0';
-    setTimeout(() => tag.style.opacity = '1', 2000);
-  });
-</script>
-
-<style>
-  .tags-clearable sl-tag {
-    transition: var(--sl-transition-medium) opacity;
-  }
-</style>
-```
-
-[component-metadata:sl-tag]

docs/components/textarea.md

@@ -1,89 +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>
-```
-
-?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
-
-?> Please refer to the section on [form control validation](/components/form?id=form-control-validation) to learn how to do 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>
-```
-
-### Placeholders
-
-Use the `placeholder` attribute to add a placeholder.
-
-```html preview
-<sl-textarea placeholder="Type something"></sl-textarea>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable an input.
-
-```html preview
-<sl-textarea placeholder="Textarea" disabled></sl-textarea>
-```
-
-### 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>
-```
-
-### 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>
-```
-
-### 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>
-```
-
-### 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>
-```
-
-### 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>
-```
-
-[component-metadata:sl-textarea]

docs/components/tooltip.md

@@ -1,177 +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>
-```
-
-## 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" style="margin-left: 400px;">
-      <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 [placement='top-start'] sl-button,
-  .tooltip-placement-example [placement='bottom-start'] sl-button {
-    margin-left: calc(40px + 0.25rem);
-  }
-
-  .tooltip-placement-example [placement^='right'] sl-button {
-    margin-left: calc((40px * 3) + (0.25rem * 3));
-  }
-</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>
-```
-
-### Manual Trigger
-
-Tooltips can be controller programmatically by setting the `trigger` attribute to `manual`. Use the `open` prop 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>
-```
-
-### 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>
-```
-
-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.
-
-```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>
-```
-
-[component-metadata:sl-tooltip]

docs/getting-started/customizing.md

@@ -1,108 +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 CSS custom properties ("CSS variables") that are defined in the `:root` block of `themes/base.css`. This stylesheet is imported when you install Shoelace, so design tokens are available on your page at that point. Because design tokens are global, they're always prefixed with `--sl` to avoid collisions with other libraries.
-
-To customize a design token, simply override it in your stylesheet using a `:root` block.
-
-```css
-:root {
-  /* Changes the primary color palette to purple */
-  --sl-color-primary-50: #faf5ff;
-  --sl-color-primary-100: #f3e8ff;
-  --sl-color-primary-200: #e9d5ff;
-  --sl-color-primary-300: #d8b4fe;
-  --sl-color-primary-400: #c084fc;
-  --sl-color-primary-500: #a855f7;
-  --sl-color-primary-600: #9333ea;
-  --sl-color-primary-700: #7e22ce;
-  --sl-color-primary-800: #6b21a8;
-  --sl-color-primary-900: #581c87;
-}
-```
-
-Many design tokens are described further along in this documentation. For a complete list, refer to `themes/base.scss` in the project's [source code](https://github.com/shoelace-style/shoelace/blob/current/src/styles/shoelace.scss).
-
-!> **Never modify variables directly in `themes/base.css`** because your changes will be overwritten when you upgrade the library. Even if you don't plan on upgrading, it's always better to override design tokens in your own stylesheet for better maintainability.
-
-## 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: white;
-    border: solid 1px tomato;
-  }
-
-  .tomato-button::part(base):hover {
-    background: rgba(255, 99, 71, .1);
-  }  
-
-  .tomato-button::part(base):active {
-    background: rgba(255, 99, 71, .2);
-  }    
-
-  .tomato-button::part(base):focus {
-    box-shadow: 0 0 0 3px rgba(255, 99, 71, .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 documention 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.

docs/getting-started/installation.md

@@ -1,110 +0,0 @@
-# Installation
-
-You can use Shoelace via CDN or by installing it locally.
-
-## CDN Installation (Recommended)
-
-The easiest way to install Shoelace is with the CDN. Just add the following tags to your page.
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/base.css">
-<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.md)
-
-## 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 `/scripts/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="/scripts/shoelace/dist/themes/base.css">
-<script type="module" src="/scripts/shoelace/dist/shoelace.js"></script>
-```
-
-## 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. The following example assumes you're serving Shoelace's `dist` directory from `/scripts/shoelace`.
-
-```html
-<!-- Option 1: the data-shoelace attribute -->
-<script src="bundle.js" data-shoelace="/scripts/shoelace"></script>
-
-<!-- Option 2: the setBasePath() method -->
-<script src="bundle.js"></script>
-<script type="module">
-  import { setBasePath } from '/scripts/shoelace/dist/utilities/base-path.js';
-  setBasePath('/scripts/shoelace');
-</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, but 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 and register each component manually, including its dependencies.
-
-Here's an example that loads only the button component and its dependencies. Again, we're assuming you're serving Shoelace's `dist` directory from `/scripts/shoelace`.
-
-```html
-<!-- The base stylesheet is always required -->
-<link rel="stylesheet" href="/scripts/shoelace/dist/themes/base.css">
-
-<script type="module" data-shoelace="/scripts/shoelace">
-  import SlButton from '/scripts/shoelace/dist/components/button/button.js';
-  import SlSpinner from '/scripts/shoelace/dist/components/spinner/spinner.js';
-  
-  // <sl-button> and <sl-spinner> are ready to use!
-</script>
-```
-
-If a component has dependencies, they'll be listed in the "Dependencies" section of its documentation. These are always Shoelace components, not third-party libraries. For example, `<sl-button>` requires you to load `<sl-spinner>` because it's used internally for its loading state.
-
-!> 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/base.css';
-import SlButton from '@shoelace-style/shoelace/dist/components/button/button.js';
-import SlIcon from '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import SlInput from '@shoelace-style/shoelace/dist/components/input/input.js';
-import SlRating from '@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('/dist/shoelace');
-
-// <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 import components and utilities from their respective files as shown above.

docs/getting-started/overview.md

@@ -1,124 +0,0 @@
-<div class="splash">
-  <div class="splash-start">
-    <img class="splash-logo" src="/assets/images/wordmark.svg" alt="Shoelace">
-    <p><strong>A forward-thinking library of web components.</strong></p>
-    <ul>
-      <li>Works with all frameworks 🧩</li>
-      <li>Works with CDNs 🚛</li>
-      <li>Fully customizable with CSS 🎨</li>
-      <li>Includes an official dark theme 🌛</li>
-      <li>Built with accessibility in mind ♿️</li>
-      <li>Open source 😸</li>
-    </ul>
-    <p>Designed in New Hampshire by <a href="https://twitter.com/claviska" rel="noopener" target="_blank">Cory LaViska</a>.</p>
-  </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?style=rounded)](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace)
-[![npm](https://img.shields.io/npm/dw/@shoelace-style/shoelace?label=npm)](https://www.npmjs.com/package/@shoelace-style/shoelace)
-[![License](https://img.shields.io/badge/license-MIT-232323.svg?style=flat)](https://github.com/shoelace-style/shoelace/blob/next/LICENSE.md)<br>
-[![Discord](https://img.shields.io/badge/Discord-Join%20the%20chat-7289da.svg?style=flat&logo=discord)](https://discord.gg/mg8f26C)
-[![Twitter](https://img.shields.io/badge/Twitter-Follow-00acee.svg?style=flat&logo=twitter)](https://twitter.com/shoelace_style)
-[![Sponsor](https://img.shields.io/badge/Sponsor-%E2%9D%A4-232323.svg?style=flat&logo=github)](https://github.com/sponsors/claviska)
-
-## 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/base.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
-<sl-button>Click me</sl-button>
-```
-
-See the [installation instructions](getting-started/installation.md) for more details and other ways to install Shoelace.
-
-## 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, every day 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
-- Skip having to learn a new component library every time you switch frameworks
-
-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. 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! 👇
-
-<a class="repo-button repo-button--sponsor" href="https://github.com/sponsors/claviska" rel="noopener" target="_blank">
-  <sl-icon name="heart"></sl-icon> Become a sponsor
-</a>
-
-<a class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" rel="noopener" target="_blank">
-  <sl-icon name="github"></sl-icon> <span class="github-star-count">Star</span>
-</a>
-
-<a class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" rel="noopener" target="_blank">
-  <sl-icon name="twitter"></sl-icon> Follow
-</a>
-
-## Attribution
-
-Special thanks to the following projects and individuals that helped make Shoelace possible.
-
-- Components are built with [LitElement](https://lit-element.polymer-project.org/)
-- Documentation is powered by [Docsify](https://docsify.js.org/)
-- CDN services are provided by [jsDelivr](https://www.jsdelivr.com/)
-- The default theme is based on color palettes from [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/)
-- The animation component was inspired by [animatable-component](https://github.com/proyecto26/animatable-component)
-- The Shoelace logo was designed with a single shoelace by [Adam K Olson](https://twitter.com/adamkolson)

docs/getting-started/themes.md

@@ -1,99 +0,0 @@
-# Themes
-
-Shoelace ships with a dark theme that complements the default light theme. You can even take things a step further by designing your own custom theme.
-
-The default theme is included as part of `themse/base.css` and should always be loaded first, even if you want to use another theme exclusively. The default theme contains important base tokens and utilities that many components rely on.
-
-## Dark Mode
-
-To install the dark theme, add the following to the `<head>` section of your app.
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/dark.css">
-```
-
-**Themes must be activated after importing!** You can do this by adding the `sl-theme-[name]` class to the `<body>` element.
-
-```html
-<body class="sl-theme-dark">
-  ...
-</body>
-```
-
-### 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.
-
-## Creating a Theme
-
-A theme is nothing more than a stylesheet that uses the Shoelace API to customize design tokens and/or 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).
-
-The recommended way to create a theme is to piggyback on top of the default theme, adjusting design tokens and styling components as necessary to achieve the look you want. This makes your theme lightweight and "future proof", as upcoming versions of Shoelace may introduce new design tokens and components that your theme won't support initially. The default theme will account for these so components won't appear to be broken.
-
-Technically, you can roll your own theme from scratch without using the default theme as a baseline, but that approach isn't recommended.
-
-### Theme Classes
-
-All theme classes must use the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of your theme. For example, a theme called "Purple Power" would use the `sl-theme-purple-power` class.
-
-Every selector in a theme must be scoped to the theme's class to ensure interoperability with other themes.
-
-### Design Tokens
-
-[Design tokens](/getting-started/customizing?id=design-tokens) give you a high-level way to customize Shoelace components. You can customize them in your theme as shown below.
-
-```css
-.sl-theme-purple-power { 
-  --sl-color-primary-50: #faf5ff;
-  --sl-color-primary-100: #f3e8ff;
-  --sl-color-primary-200: #e9d5ff;
-  /* ... */
-}
-```
-
-?> Avoid scoping design tokens to `:root`. You may notice that the default theme does this, but that's because it's not technically a theme — it's a set of design tokens and base styles that themes can use as a foundation to build upon.
-
-### Components
-
-To customize individual components, use the following syntax. Available "parts" can be found in the CSS Parts section of each component's documentation.
-
-```css
-.sl-theme-purple-power sl-button::part(base) {
-  /* your custom button styles here */
-}
-```
-
-?> Pay special attention to each component's CSS Parts API. You almost always need to use a `::part` selector when theming components!
-
-## Using a Custom Theme
-
-If a theme adheres to the guidelines above, you can use it by importing the stylesheet and activating it with the `sl-theme-[name]` class.
-
-```html
-<head>
-  ...
-  <link rel="stylesheet" href="path/to/purple-power.css">
-</head>
-
-<body class="sl-theme-purple-power">
-   ...
-</body>
-```
-
-If desired, you can import and activate more than one theme on the same page.
-
-## Submitting a Theme
-
-**I am very interested in showcasing well-designed themes that complement this library.** To submit a theme for review, please [open an issue](https://github.com/shoelace-style/shoelace/issues/new) on GitHub with the theme linked or attached. Once approved, your theme will be showcased on this page.
-
-Please note the following requirements before submitting a theme.
-
-- Themes must be complete and of high quality
-- Themes must be available under an open source license
-- Derivative works must be properly credited

docs/getting-started/usage.md

@@ -1,251 +0,0 @@
-# Usage
-
-Shoelace components are just regular HTML elements, or "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.
-
-## Web Component Basics
-
-### Properties
-
-Many components have properties ("props") that can be set using attributes. For example, buttons accept a `size` attribute that dictates the button's size.
-
-```html
-<sl-button size="small">Click me</sl-button>
-```
-
-Some props are booleans, so they only have true/false values. To activate a boolean prop, add the corresponding attribute without a value.
-
-```html
-<sl-button disabled>Click me</sl-button>
-```
-
-In rare cases, a prop 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` prop 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 `setFocus()` method.
-
-```html
-<sl-input></sl-input>
-
-<script>
-  const input = document.querySelector('sl-input');
-  input.setFocus();
-</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). Similarly, you can't call `focus()` on a Shoelace input — you need to use the component's `setFocus()` method instead. There are technical reasons for some of these design decisions that are outside the scope of this page.
-
-?> **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 property, method, and event is intended to do.
-
-## 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.md#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!
-
-## React
-
-React [doesn't play nice](https://custom-elements-everywhere.com/#react) with custom elements — it's a bit finicky about props.
-
-> React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like `some-attr="[object Object]"` which can't actually be used.
-
-Event handling can also be cumbersome.
-
-> Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome.
-
-Fortunately, there's a utility that will wrap Shoelace components so you can use them as if they were React components. 👇
-
-?> If you're starting a new project, consider using [Preact](https://preactjs.com/) as an alternative. It shares the same API as React and [handles custom elements quite well](https://custom-elements-everywhere.com/#preact).
-
-### Wrapping Components
-
-You can use [this utility](https://www.npmjs.com/package/@shoelace-style/react-wrapper) to wrap Shoelace components so they work like regular React components. To install it, use this command.
-
-```bash
-npm install @shoelace-style/react-wrapper
-```
-
-Now you can "import" Shoelace components as React components! Remember to [install Shoelace](/getting-started/installation.md) first, otherwise this won't work.
-
-```js
-import wrapCustomElement from '@shoelace-style/react-wrapper';
-
-const ShoelaceButton = wrapCustomElement('sl-button');
-
-return <ShoelaceButton type="primary">Click me</ShoelaceButton>;
-```
-
-A reference ("ref") to the underlying custom element is exposed through the `element` property so you can access it directly. This is useful for calling methods.
-
-```jsx
-<ShoelaceButton 
-  ref={el => this.button = el} 
-  onClick={() => this.button.element.current.removeFocus()}
->
-  Click me
-</ShoelaceButton>
-```
-
-## Vue
-
-Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements. You just have to tell it to ignore Shoelace components. This is pretty easy because they all start with `sl-`.
-
-```js
-Vue.config.ignoredElements = [/^sl-/];
-
-new Vue({ ... });
-```
-
-### 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, you can use a custom directive instead. 👇
-
-### Using a Custom Directive
-
-You can use [this utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) to add a custom directive to Vue 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';
-
-Vue.config.ignoredElements = [/^sl-/];
-Vue.use(ShoelaceModelDirective);
-
-// Your init here
-new Vue({ ... });
-```
-
-Now you can use the `v-sl-model` directive to keep your data in sync!
-
-```html
-<sl-input v-sl-model="name">
-```
-
-## Angular
-
-Angular [plays nice](https://custom-elements-everywhere.com/#angular) with custom elements. Just 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 {}
-```

docs/index.html

@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Shoelace: A forward-thinking library of web components.</title>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta
-      name="description"
-      content="Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology."
-    />
-    <meta
-      name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    />
-    <meta property="og:title" content="Shoelace" />
-    <meta
-      property="og:description"
-      content="Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology."
-    />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://shoelace.style/" />
-    <meta property="og:image" content="https://shoelace.style/assets/images/og-image.png" />
-
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@shoelace_style" />
-    <meta name="twitter:creator" content="@claviska" />
-    <meta name="twitter:title" content="Shoelace" />
-    <meta
-      name="twitter:description"
-      content="Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology."
-    />
-    <meta name="twitter:image" content="https://shoelace.style/assets/images/twitter-card.png" />
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4/themes/pure.css" />
-    <link rel="stylesheet" href="/assets/styles/docs.css" />
-    <link rel="stylesheet" href="/assets/styles/docs-dark.css" />
-    <link rel="stylesheet" href="/assets/styles/demos.css" />
-    <link rel="stylesheet" href="/assets/plugins/code-block/code-block.css" />
-    <link rel="stylesheet" href="/assets/plugins/theme/theme.css" />
-    <link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/touch-icon.png" />
-
-    <!-- Import Shoelace -->
-    <link rel="stylesheet" href="/dist/themes/base.css" />
-    <link rel="stylesheet" href="/dist/themes/dark.css" />
-    <script type="module" src="/dist/shoelace.js"></script>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script>
-      window.$docsify = {
-        alias: {
-          '/.*/_sidebar.md': '/_sidebar.md'
-        },
-        auto2top: true,
-        copyCode: {
-          buttonText: 'Copy Code',
-          errorText: 'Failed to copy',
-          successText: 'Copied'
-        },
-        coverpage: false,
-        executeScript: true,
-        ga: 'UA-6412891-16',
-        homepage: '/getting-started/overview.md',
-        loadSidebar: true,
-        logo: '/assets/images/wordmark.svg',
-        maxLevel: 3,
-        subMaxLevel: 2,
-        name: 'Shoelace',
-        notFoundPage: '404.md',
-        pagination: {
-          previousText: 'Previous',
-          nextText: 'Next',
-          crossChapter: true,
-          crossChapterText: false
-        },
-        routerMode: location.port ? 'hash' : 'history',
-        search: {
-          maxAge: 86400000, // Expiration time, the default one day
-          paths: 'auto',
-          placeholder: 'Search',
-          noData: 'No Results',
-          depth: 3,
-          namespace: 'shoelace-docs'
-        },
-        themeColor: '#049dff'
-      };
-    </script>
-    <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/ga.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>
-    <script src="https://cdn.jsdelivr.net/npm/docsify-pagination@2/dist/docsify-pagination.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.19.0/components/prism-bash.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.19.0/components/prism-jsx.min.js"></script>
-    <script src="/assets/plugins/code-block/code-block.js"></script>
-    <script src="/assets/plugins/scroll-position/scroll-position.js"></script>
-    <script src="/assets/plugins/metadata/metadata.js"></script>
-    <script src="/assets/plugins/sidebar/sidebar.js"></script>
-    <script src="/assets/plugins/theme/theme.js"></script>
-  </body>
-</html>

docs/resources/changelog.md

@@ -1,460 +0,0 @@
-# Changelog
-
-Shoelace follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the <sl-badge type="primary" pill>Stable</sl-badge> badge will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary will be deprecated but not removed.
-
-Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
-
-_During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
-
-## 2.0.0-beta.35
-
-- Fixed a bug in `sl-animation` where `sl-cancel` and `sl-finish` events would never fire
-- Fixed a bug where `sl-alert` wouldn't always transition properly
-- Fixed a bug where using `sl-menu` inside a shadow root would break keyboard selections [#382](https://github.com/shoelace-style/shoelace/issues/382)
-- Fixed a bug where toggling `multiple` in `sl-select` would lead to a stale display label
-- Fixed a bug in `sl-tab-group` where changing `placement` could result in the active tab indicator being drawn a few pixels off
-- Improved `@watch` decorator to run after update instead of during
-- Updated `sl-menu-item` checked icon to `check` instead of `check2`
-- Upgraded the status of `sl-resize-observer` from experimental to stable
-
-## 2.0.0-beta.34
-
-This release changes the way components are registered if you're [cherry picking](/getting-started/installation?id=cherry-picking) or [using a bundler](/getting-started/installation?id=bundling). This recommendation came from the LitElement team and simplifies Shoelace's dependency graph. It also eliminates the need to call a `register()` function before using each component.
-
-From now on, importing a component will register it automatically. The caveat is that bundlers may not tree shake the library properly if you import from `@shoelace-style/shoelace`, so the recommendation is to import components and utilities from their corresponding files instead.
-
-- 🚨 BREAKING: removed `all.shoelace.js` (use `shoelace.js` instead)
-- 🚨 BREAKING: component modules now have a side effect, so bundlers may not tree shake properly when importing from `@shoelace-style/shoelace` (see the [installation page](/getting-started/installation?id=bundling) for more details and how to update)
-- Added `sl-clear` event to `sl-select`
-- Fixed a bug where dynamically changing menu items in `sl-select` would cause the display label to be blank [#374](https://github.com/shoelace-style/shoelace/discussions/374)
-- Fixed a bug where setting the `value` attribute or property on `sl-input` and `sl-textarea` would trigger validation too soon
-- Fixed the margin in `sl-menu-label` to align with menu items
-- Fixed `autofocus` attributes in `sl-input` and `sl-textarea`
-- Improved types for `autocapitalize` in `sl-input` and `sl-textarea`
-- Reverted the custom `@tag` decorator in favor of `@customElement` to enable auto-registration
-
-## 2.0.0-beta.33
-
-- Fixed a bug where link buttons could have incorrect `target`, `download`, and `rel` props
-- Fixed `aria-label` and `aria-labelledby` props in `sl-dialog` and `sl-drawer`
-- Fixed `tabindex` prop in `sl-menu`
-- Fixed a bug in `sl-select` where tags would always render as pills
-- Fixed a bug in `sl-button` where calling `setFocus()` would throw an error
-
-## 2.0.0-beta.32
-
-- Added tag name maps so TypeScript can identify Shoelace elements [#371](https://github.com/shoelace-style/shoelace/pull/371)
-- Fixed a bug where the active tab indicator wouldn't render properly on tabs styled with `flex-end` [#355](https://github.com/shoelace-style/shoelace/issues/355)
-- Fixed a bug where `sl-change` wasn't emitted by `sl-checkbox` or `sl-switch` [#370](https://github.com/shoelace-style/shoelace/issues/370)
-- Fixed a bug where some props weren't being watched correctly in `sl-alert` and `sl-color-picker`
-- Improved `@watch` decorator so watch handlers don't run before the first render
-- Removed guards that were added due to previous watch handler behavior
-
-## 2.0.0-beta.31
-
-- Add touch support to `sl-rating` [#362](https://github.com/shoelace-style/shoelace/pull/362)
-- Fixed a bug where the `open` attribute on `sl-details` would prevent it from opening [#357](https://github.com/shoelace-style/shoelace/issues/357)
-- Fixed event detail type parsing so component class names are shown instead of `default`
-
-## 2.0.0-beta.30
-
-- Fix default exports for all components so cherry picking works again [#365](https://github.com/shoelace-style/shoelace/issues/365)
-- Revert FOUC base style because it interferes with some framework and custom element use cases
-
-## 2.0.0-beta.29
-
-**This release migrates component implementations from Shoemaker to LitElement.** Due to feedback from the community, Shoelace will rely on a more heavily tested library for component implementations. This gives you a more solid foundation and reduces my maintenance burden. Thank you for all your comments, concerns, and encouragement! Aside from that, everything else from beta.28 still applies plus the following.
-
-- 🚨 BREAKING: removed the `symbol` prop from `sl-rating` and reverted to `getSymbol` for optimal flexibility
-- Added `vscode.html-custom-data.json` to the build to support IntelliSense (see [the usage section](/getting-started/usage#code-completion) for details)
-- Added a base style to prevent FOUC before components are defined
-- Fixed bug where TypeScript types weren't being generated [#364](https://github.com/shoelace-style/shoelace/pull/364)
-- Improved vertical padding in `sl-tooltip`
-- Moved chunk files into a separate folder
-- Reverted menu item active styles
-- Updated esbuild to 0.8.54
-
-## 2.0.0-beta.28
-
-**This release includes a major under the hood overhaul of the library and how it's distributed.** Until now, Shoelace was developed with Stencil. This release moves to a lightweight tool called Shoemaker, a homegrown utility that provides declarative templating and data binding while reducing the boilerplate required for said features.
-
-This change in tooling addresses a number of longstanding bugs and limitations. It also gives us more control over the library and build process while streamlining development and maintenance. Instead of two different distributions, Shoelace now offers a single, standards-compliant collection of ES modules. This may affect how you install and use the library, so please refer to the [installation page](/getting-started/installation) for details.
-
-!> Due to the large number of internal changes, I would consider this update to be less stable than previous ones. If you're using Shoelace in a production app, consider holding off until the next beta to allow for more exhaustive testing from the community. Please report any bugs you find on the [issue tracker](https://github.com/shoelace-style/shoelace/issues).
-
-The component API remains the same except for the changes noted below. Thanks for your patience as I work diligently to make Shoelace more stable and future-proof. 🙌
-
-- 🚨 BREAKING: removed the custom elements bundle (you can import ES modules directly)
-- 🚨 BREAKING: removed `getAnimationNames()` and `getEasingNames()` methods from `sl-animation` (you can import them from `utilities/animation.js` instead)
-- 🚨 BREAKING: removed the `sl-icon-library` component since it required imperative initialization (you can import the `registerIconLibrary()` function from `utilities/icon-library.js` instead)
-- 🚨 BREAKING: removed the experimental `sl-theme` component due to limitations (you should set the `sl-theme-[name]` class on the `<body>` instead)
-- 🚨 BREAKING: moved the base stylesheet from `dist/shoelace.css` to `dist/themes/base.css`
-- 🚨 BREAKING: moved `icons` into `assets/icons` to make future assets easier to colocate
-- 🚨 BREAKING: changed `getSymbol` prop in `sl-rating` to `symbol` (it now accepts a string or a function that returns an icon name)
-- 🚨 BREAKING: renamed `setAssetPath()` to `setBasePath()` and added the ability to set the library's base path with a `data-shoelace` attribute (`setBasePath()` is exported from `utilities/base-path.js`)
-- Fixed `min` and `max` types in `sl-input` to allow numbers and strings [#330](https://github.com/shoelace-style/shoelace/issues/330)
-- Fixed a bug where `sl-checkbox`, `sl-radio`, and `sl-switch` controls would shrink with long labels [#325](https://github.com/shoelace-style/shoelace/issues/325)
-- Fixed a bug in `sl-select` where the dropdown menu wouldn't reposition when the box resized [#340](https://github.com/shoelace-style/shoelace/issues/340)
-- Fixed a bug where ignoring clicks and clicking the overlay would prevent the escape key from closing the dialog/drawer [#344](https://github.com/shoelace-style/shoelace/pull/344)
-- Removed the lazy loading dist (importing `shoelace.js` will load and register all components now)
-- Switched from Stencil to Shoemaker
-- Switched to a custom build powered by [esbuild](https://esbuild.github.io/)
-- Updated to Bootstrap Icons 1.4.0
-
-## 2.0.0-beta.27
-
-- Added `handle-icon` slot to `sl-image-comparer` [#311](https://github.com/shoelace-style/shoelace/issues/311)
-- Added `label` and `helpText` props and slots to `sl-range` [#318](https://github.com/shoelace-style/shoelace/issues/318)
-- Added "Integrating with NextJS" tutorial to the docs, courtesy of [crutchcorn](https://github.com/crutchcorn)
-- Added `content` slot to `sl-tooltip` [#322](https://github.com/shoelace-style/shoelace/pull/322)
-- Fixed a bug in `sl-select` where removing a tag would toggle the dropdown
-- Fixed a bug in `sl-input` and `sl-textarea` where the input might not exist when the value watcher is called [#313](https://github.com/shoelace-style/shoelace/issues/313)
-- Fixed a bug in `sl-details` where hidden elements would receive focus when tabbing [#323](https://github.com/shoelace-style/shoelace/issues/323)
-- Fixed a bug in `sl-icon` where `sl-error` would only be emitted for network failures [#326](https://github.com/shoelace-style/shoelace/pull/326)
-- Reduced the default line-height for `sl-tooltip`
-- Updated `sl-menu-item` focus styles
-- Updated `sl-select` so tags will wrap when `multiple` is true
-- Updated to Stencil 2.4.0
-
-## 2.0.0-beta.26
-
-- 🚨 BREAKING: Fixed animations bloat
-  - Removed ~400 baked-in Animista animations because they were causing ~200KB of bloat (they can still be used with custom keyframes)
-  - Reworked animations into a separate module ([`@shoelace-style/animations`](https://github.com/shoelace-style/animations)) so it's more maintainable and animations are sync with the latest version of animate.css
-  - Animation and easing names are now camelcase (e.g. `easeInOut` instead of `ease-in-out`)
-- Added initial E2E tests [#169](https://github.com/shoelace-style/shoelace/pull/169)
-- Added the `FocusOptions` argument to all components that have a `setFocus()` method
-- Added `sl-initial-focus` event to `sl-dialog` and `sl-drawer` so focus can be customized to a specific element
-- Added `close-button` part to `sl-tab` so the close button can be customized
-- Added `scroll-button` part to `sl-tab-group` so the scroll buttons can be customized
-- Fixed a bug where `sl-hide` would be emitted twice when closing an alert with `hide()`
-- Fixed a bug in `sl-color-picker` where the toggle button was smaller than the preview button in Safari
-- Fixed a bug in `sl-tab-group` where activating a nested tab group didn't work properly [#299](https://github.com/shoelace-style/shoelace/issues/299)
-- Fixed a bug in `sl-tab-group` where removing tabs would throw an error
-- Fixed a bug in `sl-alert`, `sl-dialog`, `sl-drawer`, `sl-select`, and `sl-tag` where the close button's base wasn't exported so it couldn't be styled
-- Removed `text` type from `sl-badge` as it was erroneously copied and never had styles
-- Updated `sl-tab-group` so the `active` prop is reflected to the attribute
-- Updated the docs to show dependencies instead of dependents which is much more useful when working with the custom elements bundle
-- Updated to Bootstrap Icons 1.3.0
-
-## 2.0.0-beta.25
-
-- 🚨 BREAKING: Reworked color tokens
-  - Theme colors are now inspired by Tailwind's professionally-designed color palette
-  - Color token variations now range from 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
-  - Color token variations were inverted, e.g. 50 is lightest and 950 is darkest
-  - All component styles were adapted to use the new color tokens, but visual changes are subtle
-  - The dark theme was adapted use the new color tokens
-  - HSL is no longer used because it is not perceptually uniform (this may be revisited when all browsers support [LCH colors](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/))
-- 🚨 BREAKING: Refactored `sl-select` to improve accessibility [#216](https://github.com/shoelace-style/shoelace/issues/216)
-  - Removed the internal `sl-input` because it was causing problems with a11y and virtual keyboards
-  - Removed `input`, `prefix` and `suffix` parts
-- 🚨 BREAKING: Removed `copy-button` part from `sl-color-picker` since copying is now done by clicking the preview
-- Added `getFormattedValue()` method to `sl-color-picker` so you can retrieve the current value in any format
-- Added visual separators between solid buttons in `sl-button-group`
-- Added `help-text` prop to `sl-input`, `sl-textarea`, and `sl-select`
-- Fixed a bug where moving the mouse while `sl-dropdown` is closing would remove focus from the trigger
-- Fixed a bug where `sl-menu-item` didn't set a default color in the dark theme
-- Fixed a bug where `sl-color-picker` preview wouldn't update in Safari
-- Fixed a bug where removing an icon's `name` or `src` wouldn't remove the previously rendered SVG [#285](https://github.com/shoelace-style/shoelace/issues/285)
-- Fixed a bug where disabled link buttons didn't appear disabled
-- Improved button spacings and added split button example
-- Improved elevation tokens in dark theme
-- Improved accessibility in `sl-tooltip` by allowing escape to dismiss it [#219](https://github.com/shoelace-style/shoelace/issues/219)
-- Improved slot detection in `sl-card`, `sl-dialog`, and `sl-drawer`
-- Made `@types/resize-observer-browser` a dependency so users don't have to install it manually
-- Refactored internal label + help text logic into a functional component used by `sl-input`, `sl-textarea`, and `sl-select`
-- Removed `sl-blur` and `sl-focus` events from `sl-menu` since menus can't have focus as of 2.0.0-beta.22
-- Updated `sl-spinner` so the indicator is more obvious
-- Updated to Bootstrap Icons 1.2.2
-
-## 2.0.0-beta.24
-
-- Added `sl-format-date` component
-- Added `indeterminate` state to `sl-progress-bar` [#274](https://github.com/shoelace-style/shoelace/issues/274)
-- Added `--track-color`, `--indicator-color`, and `--label-color` to `sl-progress-bar` [#276](https://github.com/shoelace-style/shoelace/issues/276)
-- Added `allow-scripts` prop to `sl-include` [#280](https://github.com/shoelace-style/shoelace/issues/280)
-- Fixed a bug where `sl-menu-item` color variable was incorrect [#272](https://github.com/shoelace-style/shoelace/issues/272)
-- Fixed a bug where `sl-dialog` and `sl-drawer` would emit the `sl-hide` event twice [#275](https://github.com/shoelace-style/shoelace/issues/275)
-- Fixed a bug where calling `event.preventDefault()` on certain form elements wouldn't prevent `sl-form` from submitting [#277](https://github.com/shoelace-style/shoelace/issues/277)
-- Fixed drag handle orientation in `sl-image-comparer`
-- Restyled `sl-spinner` so the track is visible and the indicator is smaller.
-- Removed `resize-observer-polyfill` in favor of `@types/resize-observer-browser` since all target browsers support `ResizeObserver`
-- Upgraded the status of `sl-form`, `sl-image-comparer`, and `sl-include` from experimental to stable
-
-## 2.0.0-beta.23
-
-- Added `sl-format-number` component
-- Added `sl-relative-time` component
-- Added `closable` prop to `sl-tab`
-- Added experimental `sl-resize-observer` utility
-- Added experimental `sl-theme` utility and updated theming documentation
-- Fixed a bug where `sl-menu-item` wouldn't render properly in the dark theme
-- Fixed a bug where `sl-select` would show an autocomplete menu
-- Improved placeholder contrast in dark theme
-- Updated to Boostrap Icons 1.1.0
-- Updated to Stencil 2.3.0
-
-## 2.0.0-beta.22
-
-- 🚨 BREAKING: Refactored `sl-menu` and `sl-menu-item` to improve accessibility by using proper focus states [#217](https://github.com/shoelace-style/shoelace/issues/217)
-  - Moved `tabindex` from `sl-menu` to `sl-menu-item`
-  - Removed the `active` prop from `sl-menu-item` because synthetic focus states are bad for accessibility
-  - Removed the `sl-activate` and `sl-deactivate` events from `sl-menu-item` (listen for `focus` and `blur` instead)
-  - Updated `sl-select` so keyboard navigation still works
-- Added `no-scroll-controls` prop to `sl-tab-group` [#253](https://github.com/shoelace-style/shoelace/issues/253)
-- Fixed a bug where setting `open` initially wouldn't show `sl-dialog` or `sl-drawer` [#255](https://github.com/shoelace-style/shoelace/issues/255)
-- Fixed a bug where `disabled` could be set when buttons are rendered as links
-- Fixed a bug where hoisted dropdowns would render in the wrong position when placed inside `sl-dialog` [#252](https://github.com/shoelace-style/shoelace/issues/252)
-- Fixed a bug where boolean aria attributes didn't explicitly set `true|false` string values in the DOM
-- Fixed a bug where `aria-describedby` was never set on tooltip targets in `sl-tooltip`
-- Fixed a bug where setting `position` on `sl-image-comparer` wouldn't update the divider's position
-- Fixed a bug where the check icon was announced to screen readers in `sl-menu-item`
-- Improved `sl-icon-button` accessibility by encouraging proper use of `label` and hiding the internal icon from screen readers [#220](https://github.com/shoelace-style/shoelace/issues/220)
-- Improved `sl-dropdown` accessibility by attaching `aria-haspopup` and `aria-expanded` to the slotted trigger
-- Refactored position logic to remove an unnecessary state variable in `sl-image-comparer`
-- Refactored design tokens to use `rem` instead of `px` for input height and spacing [#221](https://github.com/shoelace-style/shoelace/issues/221)
-- Removed `console.log` from modal utility
-- Updated to Stencil 2.2.0
-
-## 2.0.0-beta.21
-
-- Added `label` slot to `sl-input`, `sl-select`, and `sl-textarea` [#248](https://github.com/shoelace-style/shoelace/issues/248)
-- Added `label` slot to `sl-dialog` and `sl-drawer`
-- Added experimental `sl-include` component
-- Added status code to the `sl-error` event in `sl-icon`
-- Fixed a bug where initial transitions didn't show in `sl-dialog` and `sl-drawer` [#247](https://github.com/shoelace-style/shoelace/issues/247)
-- Fixed a bug where indeterminate checkboxes would maintain the indeterminate state when toggled
-- Fixed a bug where concurrent active modals (i.e. dialog, drawer) would try to steal focus from each other
-- Improved `sl-color-picker` grid and slider handles [#246](https://github.com/shoelace-style/shoelace/issues/246)
-- Refactored `sl-icon` request logic and removed unused cache map
-- Reworked show/hide logic in `sl-alert`, `sl-dialog`, and `sl-drawer` to not use reflow hacks and the `hidden` attribute
-- Reworked slot logic in `sl-card`, `sl-dialog`, and `sl-drawer`
-- Updated to Popper 2.5.3 to address a fixed position bug in Firefox 
-
-## 2.0.0-beta.20
-
-- 🚨 BREAKING: Transformed all Shoelace events to lowercase ([details](#why-did-event-names-change))
-- Added support for dropdowns and non-icon elements to `sl-input`
-- Added `spellcheck` prop to `sl-input`
-- Added `sl-icon-library` to allow custom icon library registration
-- Added `library` prop to `sl-icon` and `sl-icon-button`
-- Added "Integrating with Rails" tutorial to the docs, courtesy of [ParamagicDev](https://github.com/ParamagicDev)
-- Fixed a bug where `sl-progress-ring` rendered incorrectly when zoomed in Safari [#227](https://github.com/shoelace-style/shoelace/issues/227)
-- Fixed a bug where tabbing into slotted elements closes `sl-dropdown` when used in a shadow root [#223](https://github.com/shoelace-style/shoelace/issues/223)
-- Fixed a bug where scroll anchoring caused undesirable scrolling when `sl-details` are grouped
-
-### Why did event names change?
-
-Shoelace events were updated to use a lowercase, kebab-style naming convention. Instead of event names such as `slChange` and `slAfterShow`, you'll need to use `sl-change` and `sl-after-show` now.
-
-This change was necessary to address a critical issue in frameworks that use DOM templates with declarative event bindings such as `<sl-button @slChange="handler">`. Due to HTML's case-insensitivity, browsers translate attribute names to lowercase, turning `@slChange` into `@slchange`, making it impossible to listen to `slChange`.
-
-While declarative event binding is a non-standard feature, not supporting it would make Shoelace much harder to use in popular frameworks. To accommodate those users and provide a better developer experience, we decided to change the naming convention while Shoelace is still in beta.
-
-The following pages demonstrate why this change was necessary.
-
-- [This Polymer FAQ from Custom Elements Everywhere](https://custom-elements-everywhere.com/#faq-polymer)
-- [Vue's Event Names documentation](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names)
-
-## 2.0.0-beta.19
-
-- Added `input`, `label`, `prefix`, `clear-button`, `suffix`, `help-text` exported parts to `sl-select` to make the input customizable
-- Added toast notifications through the `toast()` method on `sl-alert`
-- Fixed a bug where mouse events would bubble up when `sl-button` was disabled, causing tooltips to erroneously appear
-- Fixed a bug where pressing space would open and immediately close `sl-dropdown` panels in Firefox
-- Fixed a bug where `sl-tooltip` would throw an error on init
-- Fixed a bug in custom keyframes animation example
-- Refactored clear logic in `sl-input`
-
-## 2.0.0-beta.18
-
-- Added `name` and `invalid` prop to `sl-color-picker`
-- Added support for form submission and validation to `sl-color-picker`
-- Added touch support to demo resizers in the docs
-- Added `sl-responsive-embed` component
-- Fixed a bug where swapping an animated element wouldn't restart the animation in `sl-animation`
-- Fixed a bug where the cursor was incorrect when `sl-select` was disabled
-- Fixed a bug where `slblur` and `slfocus` were emitted twice in `sl-select`
-- Fixed a bug where clicking on `sl-menu` wouldn't focus it
-- Fixed a bug in the popover utility where `onAfterShow` would fire too soon
-- Fixed a bug where `bottom` and `right` placements didn't render properly in `sl-tab-group`
-- Improved keyboard logic in `sl-dropdown`, `sl-menu`, and `sl-select`
-- Updated `sl-animation` to stable
-- Updated to Stencil 2.0 (you may need to purge `node_modules` and run `npm install` after pulling)
-- Updated entry points in `package.json` to reflect new filenames generated by Stencil 2
-
-## 2.0.0-beta.17
-
-- Added `minlength` and `spellcheck` attributes to `sl-textarea`
-- Fixed a bug where clicking a tag in `sl-select` wouldn't toggle the menu
-- Fixed a bug where options where `sl-select` options weren't always visible or scrollable
-- Fixed a bug where setting `null` on `sl-input`, `sl-textarea`, or `sl-select` would throw an error
-- Fixed a bug where `role` was on the wrong element and aria attribute weren't explicit in `sl-checkbox`, `sl-switch`, and `sl-radio`
-- Fixed a bug where dynamically adding/removing a slot wouldn't work as expected in `sl-card`, `sl-dialog`, and `sl-drawer`
-- Fixed a bug where the value wasn't updated and events weren't emitted when using `setRangeText` in `sl-input` and `sl-textarea`
-- Optimized `hasSlot` utility by using a simpler selector
-- Updated Bootstrap Icons to 1.0.0 with many icons redrawn and improved
-- Updated contribution guidelines
-
-**Form validation has been reworked and is much more powerful now!**
-
-- The `invalid` prop now reflects the control's validity as determined by the browser's constraint validation API
-- Added `required` to `sl-checkbox`, `sl-select`, and `sl-switch`
-- Added `reportValidity()` and `setCustomValidity()` methods to all form controls
-- Added validation checking for custom and native form controls to `sl-form`
-- Added `novalidate` prop to `sl-form` to disable validation
-- Removed the `valid` prop from all form controls
-- Removed valid and invalid design tokens and related styles (you can use your own custom styles to achieve this)
-
-## 2.0.0-beta.16
-
-- Add `hoist` prop to `sl-color-picker`, `sl-dropdown`, and `sl-select` to work around panel clipping
-- Add `sl-format-bytes` utility component
-- Add `clearable` and `required` props to `sl-select`
-- Add `slclear` event to `sl-input`
-- Added keyboard support to the preview resizer in the docs
-- Fixed a bug where the `aria-selected` state was incorrect in `sl-menu-item`
-- Fixed a bug where custom properties applied to `sl-tooltip` didn't affect show/hide transitions
-- Fixed a bug where `--sl-input-color-*` custom properties had no affect on `sl-input` and `sl-textarea`
-- Refactored `sl-dropdown` and `sl-tooltip` to use positioner elements so panels/tooltips can be customized easier
-
-## 2.0.0-beta.15
-
-- Added `image-comparer` component
-- Added `--width`, `--height`, and `--thumb-size` custom props to `sl-switch`
-- Fixed an `aria-labelledby` attribute typo in a number of components
-- Fixed a bug where the `change` event wasn't updating the value in `sl-input`
-- Fixed a bug where `sl-color-picker` had the wrong border color in the dark theme
-- Fixed a bug where `sl-menu-item` had the wrong color in dark mode when disabled
-- Fixed a bug where WebKit's autocomplete styles made inputs looks broken
-- Fixed a bug where aria labels were wrong in `sl-select`
-- Fixed a bug where clicking the label wouldn't focus the control in `sl-select`
-
-## 2.0.0-beta.14
-
-- Added dark theme
-- Added `--sl-panel-background-color` and `--sl-panel-border-color` tokens
-- Added `--tabs-border-color` custom property to `sl-tab-group`
-- Added `--track-color` custom property to `sl-range`
-- Added `tag` part to `sl-select`
-- Updated `package.json` so custom elements imports can be consumed from the root
-- Fixed a bug where scrolling dialogs didn't resize properly in Safari
-- Fixed a bug where `slshow` and `slhide` would be emitted twice in some components
-- Fixed a bug where `custom-elements/index.d.ts` was broken due to an unclosed comment (fixed in Stencil 1.17.3)
-- Fixed bug where inputs were not using border radius tokens
-- Fixed a bug where the text color was being erroneously set in `sl-progress-ring`
-- Fixed a bug where `sl-progress-bar` used the wrong part name internally for `indicator`
-- Removed background color from `sl-menu`
-- Updated to Stencil 1.17.3
-
-## 2.0.0-beta.13
-
-- Added `slactivate` and `sldeactivate` events to `sl-menu-item`
-- Added experimental `sl-animation` component
-- Added shields to documentation
-- Fixed a bug where link buttons would have `type="button"`
-- Fixed a bug where button groups with tooltips experienced an odd spacing issue in Safari
-- Fixed a bug where scrolling in dropdowns/selects didn't work properly on Windows (special thanks to [Trendy](http://github.com/trendy) for helping troubleshoot!)
-- Fixed a bug where selecting a menu item in a dropdown would cause Safari to scroll
-- Fixed a bug where type to select wouldn't accept symbols
-- Moved scrolling logic from `sl-menu` to `sl-dropdown`
-
-## 2.0.0-beta.12
-
-- Added support for `href`, `target`, and `download` to buttons
-- Fixed a bug where buttons would have horizontal spacing in Safari
-- Fixed a bug that caused an import resolution error when using Shoelace in a Stencil app
-
-## 2.0.0-beta.11
-
-- Added button group component
-- Fixed icon button alignment
-- Fixed a bug where focus visible observer wasn't removed from `sl-details`
-- Replaced the deprecated `componentDidUnload` lifecycle method with `disconnectedCallback` to prevent issues with frameworks
-
-## 2.0.0-beta.10
-
-- Added community page to the docs
-- Fixed a bug where many components would erroneously receive an `id` when using the custom elements bundle
-- Fixed a bug where tab groups weren't scrollable with the mouse
-
-## 2.0.0-beta.9
-
-- Added the icon button component
-- Added the skeleton component
-- Added the `typeToSelect` method to menu so type-to-select behavior can be controlled externally
-- Added the `pulse` prop to badge
-- Fixed a bug where hovering over select showed the wrong cursor
-- Fixed a bug where tabbing into a select control would highlight the label
-- Fixed a bug where tabbing out of a select control wouldn't close it
-- Fixed a bug where closing dropdowns wouldn't give focus back to the trigger
-- Fixed a bug where type-to-select wasn't working after the first letter
-- Fixed a bug where clicking on menu items and dividers would steal focus from the menu
-- Fix a bug where the color picker wouldn't parse uppercase values
-- Removed `noFooter` prop from dialog and drawer (slot detection is automatic, so the prop is not required)
-- Removed `close-icon` slot from alert
-- Replaced make-shift icon buttons with `sl-icon-button` in alert, dialog, drawer, and tag
-- Updated Stencil to 1.17.1
-- Switched to jsDelivr for better CDN performance
-
-## 2.0.0-beta.8
-
-- Added the card component
-- Added `--focus-ring` custom property to tab
-- Fixed a bug where range tooltips didn't appear on iOS
-- Fixed constructor bindings so they don't break the custom elements bundle
-- Fixed tag color contrast to be AA compliant
-- Fixed a bug that made it difficult to vertically align rating
-- Fixed a bug where dropdowns would always close on mousedown when inside a shadow root
-- Made tag text colors AA compliant
-- Promoted badge to stable
-- Refactored `:host` variables and moved non-display props to base elements
-- Refactored event handler bindings to occur in `connectedCallback` instead of the constructor
-- Refactored scroll locking logic to use `Set` instead of an array
-- Updated the custom elements bundle documentation and added bundler examples
-- Upgraded Stencil to 1.17.0-0 (next) to fix custom elements bundle
-
-## 2.0.0-beta.7
-
-- Added links to version 1 resources to the docs
-- Added rating component
-- Fixed a bug where some build files were missing
-- Fixed clearable tags demo
-- Fixed touch icon size in docs
-
-## 2.0.0-beta.6
-
-- Enabled the `dist-custom-elements-bundle` output target
-- Fixed a bug where nested form controls were ignored in `<sl-form>`
-
-## 2.0.0-beta.5
-
-- Fixed bug where `npm install` would fail due to postinstall script
-- Removed unused dependency
-
-## 2.0.0-beta.4
-
-- Added `pill` variation to badges
-- Fixed a bug where all badges had `pointer-events: none`
-- Fixed `@since` props to show 2.0 instead of 1.0
-- Fixed giant cursors in inputs in Safari
-- Fixed color picker input width in Safari
-- Fixed initial transitions for drawer, dialog, and popover consumers
-- Fixed a bug where dialog, dropdown, and drawer would sometimes not transition in on the first open
-- Fixed various documentation typos
-
-## 2.0.0-beta.3
-
-- Fix version in docs
-- Remove custom elements bundle
-
-## 2.0.0-beta.2
-
-- Fix quick start and installation URLs
-- Switch Docsify theme
-- Update line heights tokens
-
-## 2.0.0-beta.1
-
-- Initial release

docs/resources/community.md

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

docs/resources/contributing.md

@@ -1,228 +0,0 @@
-# Contributing
-
-Shoelace is an open source project, meaning everyone can use it and contribute to its development. When you join our community, you'll find a friendly group of enthusiasts at all experience levels who are willing to chat about anything and everything related to Shoelace.
-
-The easiest way to get started contributing is to join the [community chat](https://discord.gg/mg8f26C). This is where we hang out, discuss new ideas, ask for feedback, and more!
-
-A common misconception about contributing to an open source project is that you need to know how to code. This simply isn't true. In fact, there are _many_ ways to contribute, and some of the most important contributions come from those who never write a single line of code. Here's a list of ways you can make a meaningful contribution to the project:
-
-- Submitting well-written bug reports
-- Submitting feature requests that are within the scope of the project
-- Improving the documentation
-- Responding to users that need help in the community chat or discussion forum
-- Triaging issues on GitHub
-- Being a developer advocate for the project
-- Sponsoring the project financially
-- Writing tests
-- Sharing ideas
-- And, of course, contributing code!
-
-Please take a moment to review these guidelines to make the contribution process as easy as possible for both yourself and the project's maintainers.
-
-## Using the Issue Tracker
-
-The [issue tracker](https://github.com/shoelace-style/shoelace/issues) is for bug reports, feature requests, and pull requests.
-
-- Please **do not** use the issue tracker for personal support requests. Use [the discussion forum](https://github.com/shoelace-style/shoelace/discussions/categories/help) instead.
-- Please **do not** derail, hijack, or troll issues. Keep the discussion on topic and be respectful of others.
-- Please **do not** post comments with "+1" or "👍". Use [reactions](https://github.blog/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/) instead.
-- Please **do** use the issue tracker for feature requests, bug reports, and pull requests.
-
-Issues that do not follow these guidelines are subject to closure. There simply aren't enough resources for the author and contributors to troubleshoot personal support requests.
-
-### Feature Requests
-
-Feature requests can be added using the issue tracker.
-
-- Please **do** search for an existing request before suggesting a new feature.
-- Please **do** use the "👍" reaction to vote for a feature.
-- Please **do** share substantial use cases and perspective that support new features if they haven't already been mentioned.
-- Please **do not** bump, spam, or ping contributors to prioritize your own feature.
-
-If you would like your feature prioritized, please consider [sponsoring the project](https://github.com/sponsors/claviska).
-
-### Bug Reports
-
-A bug is _a demonstrable problem_ caused by code in the library. Bug reports are an important contribution to the quality of the project. When submitting a bug report, there are a few steps you can take to make sure your issues gets attention quickly.
-
-- Please **do not** paste in large blocks of irrelevant code
-- Please **do** search for an existing issue before creating a new one
-- Please **do** explain the bug clearly
-- Please **do** provide a minimal test case that demonstrates the bug (e.g. [jsfiddle.net](https://jsfiddle.net/) or [CodePen](https://codepen.io/))
-- Please **do** provide additional information, when necessary, to replicate the bug
-
-**A minimal test case is critical to a successful bug report.** It demonstrates that the bug exists in the library and not in surrounding code. Contributors should be able to understand the bug without studying your code, otherwise they'll probably move on to another bug.
-
-If you would like your bug prioritized, please consider [sponsoring the project](https://github.com/sponsors/claviska).
-
-### Pull Requests
-
-To keep the project on track, please consider the following guidelines before submitting a PR.
-
-- Please **do not** submit a PR without opening an issue first, especially for non-trivial changes. This may prevent you from doing work that won't be accepted for various reasons (e.g. someone is already working on it, it's not a good fit for the project, it needs additional planning, etc.)
-- Please **do** make sure your PR clearly defines what you're changing. Even if you feel your changes are obvious, please explain them so other contributors can more easily review your works. PRs without detailed descriptions are subject to closure pending more details.
-- Please **do** open your PR against the `next` branch.
-- Please **do not** edit anything in `dist/`. These files are generated automatically, so you need to edit the source files instead.
-
-The author reserves the right to reject any PR that's outside the scope of the project or doesn't meet code quality standards.
-
-### Branches
-
-`current` - This branch reflects the latest release and powers [shoelace.style](https://shoelace.style/).
-
-`next` - This is the branch you should submit pull requests against. It reflects what's coming in the _next_ release, which can be previewed at [next.shoelace.style](https://next.shoelace.style/).
-
-## Developing
-
-To set up a local dev environment, [fork the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, clone it locally, and install its dependencies.
-
-```bash
-git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
-cd shoelace
-npm install
-```
-
-Once you've cloned the repo, run the following command to spin up the Shoelace dev server.
-
-```bash
-npm start
-```
-
-After the initial build, a browser will open automatically to a local version of the docs. The documentation is powered by Docsify, which uses raw markdown files to generate pages on the fly.
-
-### Dev Sandbox
-
-Component development occurs _within_ the local docs site. I've found that offering common variations _in the docs_ is more beneficial for users than segmenting demos and code examples into separate tools such as Storybook. This encourages more thorough documentation, streamlines development for maintainers, and simplifies how the project is built. It also reduces installation and startup times significantly.
-
-There is currently no hot module reloading (HMR), as browsers don't provide a way to unregister custom elements. However, most changes to the source will reload the browser automatically. The exception is component metadata, which is generated by TypeDoc. TypeDoc takes a few seconds to run so, to prevent long reload delays, it only runs once at startup.
-
-For more information about running and building the project locally, refer to `README.md` in the project's root.
-
-## Best Practices
-
-The following is a non-exhaustive list of conventions, patterns, and best practices we try to follow. As a contributor, we ask that you make a good faith effort to follow them as well. This ensures consistency and maintainability throughout the project.
-
-If in doubt, use your best judgment and the maintainers will be happy to guide you during the code review process. If you'd like clarification on something before submitting a PR, feel free to reach out on the [community chat](https://discord.gg/mg8f26C).
-
-?> This section can be a lot to digest in one sitting, so don't feel like you need to take it all in right now. Most contributors will be better off skimming this section and reviewing the relevant content as needed.
-
-### Accessibility
-
-Shoelace is built with accessibility in mind. Creating generic components that are fully accessible to users with varying capabilities across a multitude of circumstances is a daunting challenge. Oftentimes, the solution to an a11y problem is not written in black and white and, therefore, we may not get it right the first time around. There are, however, guidelines we can follow in our effort to make Shoelace an accessible foundation from which applications and websites can be built.
-
-We take this commitment seriously, so please ensure your contributions have this goal in mind. If you need help with anything a11y-related, please [reach out to the community](/resources/community) for assistance. If you discover an accessibility concern within the library, please file a bug on the [issue tracker](https://github.com/shoelace-style/shoelace/issues).
-
-It's important to remember that, although accessibility starts with foundational components, it doesn't end with them. It everyone's responsibility to encourage best practices and ensure we're providing an optimal experience for all of our users.
-
-### Documentation
-
-Maintaining good documentation can be a painstaking task, but poor documentation leads to frustration and makes the project less appealing to users. Fortunately, writing documentation for Shoelace is fast and easy!
-
-Most of Shoelace's technical documentation is generated with JSDoc comments and TypeScript metadata from the source code. Every property, method, event, etc. is documented this way. In-code comments encourage contributors to keep the documentation up to date as changes occur so the docs are less likely to become stale. Refer to an existing component to see how JSDoc comments are used in Shoelace.
-
-Instructions, code examples, and interactive demos are hand-curated to give users the best possible experience. Typically, the most relevant information is shown first and less common examples are shown towards the bottom. Edge cases and gotchas should be called out in context with tips or warnings.
-
-The docs are powered by [Docsify](https://docsify.now.sh/). Check out `docs/_sidebar.md` and `docs/components/` to get an idea of how pages are structured and formatted. If you're creating a new component, it may help to use an existing component's markdown file as a template.
-
-If you need help with documentation, feel free to reach out on the [community chat](https://discord.gg/mg8f26C).
-
-### Code Formatting
-
-Most code formatting is handled automatically by [Prettier](https://prettier.io/) via commit hooks. However, for the best experience, you should [install it in your editor](https://prettier.io/docs/en/editors.html) and enable format on save.
-
-Please do not make any changes to `prettier.config.cjs` without consulting the maintainers.
-
-### Composability
-
-Components should be composable, meaning you can easily reuse them with and within other components. This reduces the overall size of the library, expedites feature development, and maintains a consistent user experience.
-
-The `<sl-select>` component, for example, makes use of the dropdown, input, menu, and menu item components. Because it's offloading most of its functionality and styles to lower-level components, the select component remains lightweight and its appearance is consistent with other form controls and menus.
-
-### Component Stucture
-
-All components have a host element, which is a reference to the `<sl-*>` element itself. Make sure to always set the host element's `display` property to the appropriate value depending on your needs, as the default is `inline` per the custom element spec.
-
-```css
-:host {
-  display: block;
-}
-```
-
-Aside from `display`, avoid setting styles on the host element when possible. The reason for this is that styles applied to the host element are not encapsulated. Instead, create a base element that wraps the component's internals and style that instead. This convention also makes it easier to use BEM in components, as the base element can serve as the "block" entity.
-
-### Class Names
-
-All components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), so styles are completely encapsulated from the rest of the document. As a result, class names used _inside_ a component won't conflict with class names _outside_ the component, so we're free to name them anything we want.
-
-Internally, each component uses the [BEM methodology](http://getbem.com/) for class names. There is no technical requirement to do this — it's purely the preference of the author to enforce consistency and clarity throughout components. As such, all contributions are expected to follow this pattern.
-
-### Boolean Props
-
-Boolean props should _always_ default to `false`, otherwise there's no way for the user to unset the, without JavaScript. To keep the API as friendly and consistent as possible, use a name like `noHeader` with a default value of `false` instead of `header` with a default value of `true`.
-
-### Conditional Slots
-
-When a component relies on the presence of slotted content to do something, don't assume its initial state is permanent. Slotted content can be added or removed any time and components must be aware of this. A good practice to manage this is:
-
-- Add `@slotchange={this.handleSlotChange}` to the slots you want to watch
-- Add a `handleSlotChange` method and use the `hasSlot` utility to update state variables for the the respective slot(s)
-- Never conditionally render `<slot>` elements in a component — always use `hidden` so the slot remains in the DOM and the `slotchange` event can be captured
-
-See the source of card, dialog, or drawer for examples.
-
-### Custom Events
-
-Components must only emit custom events, and all custom events must start with `sl-` as a namespace. For compatibility with frameworks that utilize DOM templates, custom events must have lowercase, kebab-style names. For example, use `sl-change` instead of `slChange`.
-
-This convention avoids the problem of browsers lowercasing attributes, causing some frameworks to be unable to listen to them. This problem isn't specific to one framework, but [Vue's documentation](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names) provides a good explanation of the problem.
-
-### CSS Custom Properties
-
-To expose custom properties as part of a component's API, scope them to the `:host` block and use the following syntax for comments so they appear in the generated docs. Do not use the `--sl-` prefix, as that is reserved for design tokens that live in the global scope.
-
-```css
-/**
- * @prop --color: The component's text color.
- * @prop --background-color: The component's background color. 
- */
-:host {
-  --color: white;
-  --background-color: tomato;
-}
-```
-
-### When to use a prop vs. a CSS custom property
-
-When designing a component's API, standard properties ("props") are generally used to change the _behavior_ of a component, whereas CSS custom properties ("CSS variables") are used to change the _appearance_ of a component. Remember that props can't respond to media queries, but CSS variables can.
-
-There are some exceptions to this (e.g. when it significantly improves developer experience), but a good rule of thumbs is "will this need to change based on screen size?" If so, you probably want to use a CSS variable.
-
-### When to use a CSS custom property vs. a CSS part
-
-There are two ways to enable customizations for components. One way is with CSS custom properties ("CSS variables"), the other is with CSS parts ("parts").
-
-CSS variables are scoped to the host element and can be reused throughout the component. A good example of a CSS variable would be `--border-width`, which might get reused throughout a component to ensure borders share the same width for all internal elements.
-
-Parts let you target a specific element inside the component's shadow DOM but, by design, you can't target a part's children or siblings. You can _only_ customize the part itself. Use a part when you need to allow a single element inside the component to accept styles.
-
-This convention can be relaxed when the developer experience is greatly improved by not following these suggestions.
-
-### A Note About Sass
-
-The Shoelace _source_ is developed using Sass for the convenience of nested selectors, imports, and tedious things such as color palette generation. By design, Sass variables, color functions, and other preprocessor-specific feaures are not used in the source and will not be accepted in a PR.
-
-Consumers of the library should never need to worry about preprocessing the library.
-
-### Form Controls
-
-Form controls should support validation through the following conventions:
-
-- All form controls must have an `invalid` prop that reflects their validity
-- All form controls must have a `setCustomValidity()` method so the user can set a custom validation message
-- All form controls must have a `reportValidity()` method that report their validity during form submission
-- All form controls should mirror their native validation attributes such as `required`, `pattern`, `minlength`, `maxlength`, etc. when possible
-- All form controls must be serialized by `<sl-form>`
-
-### Positioning Popovers
-
-Shoelace uses an internal popover utility for dropdowns, tooltips, etc. This is a light abstraction of Popper.js designed to make positioning and transitioning things easy and consistent throughout the library. When possible, use this utility instead of relying on Popper directly. See `src/utilities/popover.ts` for details.

docs/tokens/border-radius.md

@@ -1,12 +0,0 @@
-# Border Radius Tokens
-
-Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
-
-| Token                        | Value          | Example                                                                                                  |
-| ---------------------------- | -------------- | -------------------------------------------------------------------------------------------------------- |
-| `--sl-border-radius-small`   | 0.125rem (2px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-small);"></div>             |
-| `--sl-border-radius-medium`  | 0.25rem (4px)  | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-medium);"></div>            |
-| `--sl-border-radius-large`   | 0.5rem (8px)   | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-large);"></div>             |
-| `--sl-border-radius-x-large` | 1rem (16px)    | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-x-large);"></div>           |
-| `--sl-border-radius-circle`  | 50%            | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-circle);"></div>            |
-| `--sl-border-radius-pill`    | 9999px         | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-pill); width: 6rem;"></div> |

docs/tokens/color.md

@@ -1,125 +0,0 @@
-# Color Tokens
-
-Color tokens are used to maintain consistent color use throughout your app.
-
-## Theme Colors
-
-Theme colors include primary, gray, success, info, warning, and danger. They are used extensively throughout the library to maintain a consistent appearance across components.
-
-This will make all colors in the primary color palette various shades of purple.
-
-```css
-:root {
-  /* Changes the primary color palette to purple */
-  --sl-color-primary-50: #faf5ff;
-  --sl-color-primary-100: #f3e8ff;
-  --sl-color-primary-200: #e9d5ff;
-  --sl-color-primary-300: #d8b4fe;
-  --sl-color-primary-400: #c084fc;
-  --sl-color-primary-500: #a855f7;
-  --sl-color-primary-600: #9333ea;
-  --sl-color-primary-700: #7e22ce;
-  --sl-color-primary-800: #6b21a8;
-  --sl-color-primary-900: #581c87;
-}
-```
-
-?> Although CSS lets you override custom properties on specific elements, these values _must_ be scoped to the `:root` block for the entire palette to be recalculated. [See this page for details.](https://stackoverflow.com/questions/52015737/css-scoped-custom-property-ignored-when-used-to-calculate-variable-in-outer-scop)
-
-## Primary
-
-| Token                    | Example                                                                               |
-| ------------------------ | ------------------------------------------------------------------------------------- |
-| `--sl-color-primary-50`  | <div class="color-demo" style="background-color: var(--sl-color-primary-50);"></div>  |
-| `--sl-color-primary-100` | <div class="color-demo" style="background-color: var(--sl-color-primary-100);"></div> |
-| `--sl-color-primary-200` | <div class="color-demo" style="background-color: var(--sl-color-primary-200);"></div> |
-| `--sl-color-primary-300` | <div class="color-demo" style="background-color: var(--sl-color-primary-300);"></div> |
-| `--sl-color-primary-400` | <div class="color-demo" style="background-color: var(--sl-color-primary-400);"></div> |
-| `--sl-color-primary-500` | <div class="color-demo" style="background-color: var(--sl-color-primary-500);"></div> |
-| `--sl-color-primary-600` | <div class="color-demo" style="background-color: var(--sl-color-primary-600);"></div> |
-| `--sl-color-primary-700` | <div class="color-demo" style="background-color: var(--sl-color-primary-700);"></div> |
-| `--sl-color-primary-800` | <div class="color-demo" style="background-color: var(--sl-color-primary-800);"></div> |
-| `--sl-color-primary-900` | <div class="color-demo" style="background-color: var(--sl-color-primary-900);"></div> |
-| `--sl-color-primary-950` | <div class="color-demo" style="background-color: var(--sl-color-primary-950);"></div> |
-
-## Gray
-
-| Token                    | Example                                                                         |
-| ------------------------ | ------------------------------------------------------------------------------- |
-| `--sl-color-white`    | <div class="color-demo" style="background-color: var(--sl-color-white);"></div>    |
-| `--sl-color-gray-50`  | <div class="color-demo" style="background-color: var(--sl-color-gray-50);"></div>  |
-| `--sl-color-gray-100` | <div class="color-demo" style="background-color: var(--sl-color-gray-100);"></div> |
-| `--sl-color-gray-200` | <div class="color-demo" style="background-color: var(--sl-color-gray-200);"></div> |
-| `--sl-color-gray-300` | <div class="color-demo" style="background-color: var(--sl-color-gray-300);"></div> |
-| `--sl-color-gray-400` | <div class="color-demo" style="background-color: var(--sl-color-gray-400);"></div> |
-| `--sl-color-gray-500` | <div class="color-demo" style="background-color: var(--sl-color-gray-500);"></div> |
-| `--sl-color-gray-600` | <div class="color-demo" style="background-color: var(--sl-color-gray-600);"></div> |
-| `--sl-color-gray-700` | <div class="color-demo" style="background-color: var(--sl-color-gray-700);"></div> |
-| `--sl-color-gray-800` | <div class="color-demo" style="background-color: var(--sl-color-gray-800);"></div> |
-| `--sl-color-gray-900` | <div class="color-demo" style="background-color: var(--sl-color-gray-900);"></div> |
-| `--sl-color-gray-950` | <div class="color-demo" style="background-color: var(--sl-color-gray-950);"></div> |
-| `--sl-color-black`    | <div class="color-demo" style="background-color: var(--sl-color-black);"></div>    |
-
-## Success
-
-| Token                    | Example                                                                               |
-| ------------------------ | ------------------------------------------------------------------------------------- |
-| `--sl-color-success-50`  | <div class="color-demo" style="background-color: var(--sl-color-success-50);"></div>  |
-| `--sl-color-success-100` | <div class="color-demo" style="background-color: var(--sl-color-success-100);"></div> |
-| `--sl-color-success-200` | <div class="color-demo" style="background-color: var(--sl-color-success-200);"></div> |
-| `--sl-color-success-300` | <div class="color-demo" style="background-color: var(--sl-color-success-300);"></div> |
-| `--sl-color-success-400` | <div class="color-demo" style="background-color: var(--sl-color-success-400);"></div> |
-| `--sl-color-success-500` | <div class="color-demo" style="background-color: var(--sl-color-success-500);"></div> |
-| `--sl-color-success-600` | <div class="color-demo" style="background-color: var(--sl-color-success-600);"></div> |
-| `--sl-color-success-700` | <div class="color-demo" style="background-color: var(--sl-color-success-700);"></div> |
-| `--sl-color-success-800` | <div class="color-demo" style="background-color: var(--sl-color-success-800);"></div> |
-| `--sl-color-success-900` | <div class="color-demo" style="background-color: var(--sl-color-success-900);"></div> |
-| `--sl-color-success-950` | <div class="color-demo" style="background-color: var(--sl-color-success-950);"></div> |
-
-## Info
-
-| Token                    | Example                                                                         |
-| ------------------------ | ------------------------------------------------------------------------------- |
-| `--sl-color-info-50`  | <div class="color-demo" style="background-color: var(--sl-color-info-50);"></div>  |
-| `--sl-color-info-100` | <div class="color-demo" style="background-color: var(--sl-color-info-100);"></div> |
-| `--sl-color-info-200` | <div class="color-demo" style="background-color: var(--sl-color-info-200);"></div> |
-| `--sl-color-info-300` | <div class="color-demo" style="background-color: var(--sl-color-info-300);"></div> |
-| `--sl-color-info-400` | <div class="color-demo" style="background-color: var(--sl-color-info-400);"></div> |
-| `--sl-color-info-500` | <div class="color-demo" style="background-color: var(--sl-color-info-500);"></div> |
-| `--sl-color-info-600` | <div class="color-demo" style="background-color: var(--sl-color-info-600);"></div> |
-| `--sl-color-info-700` | <div class="color-demo" style="background-color: var(--sl-color-info-700);"></div> |
-| `--sl-color-info-800` | <div class="color-demo" style="background-color: var(--sl-color-info-800);"></div> |
-| `--sl-color-info-900` | <div class="color-demo" style="background-color: var(--sl-color-info-900);"></div> |
-| `--sl-color-info-950` | <div class="color-demo" style="background-color: var(--sl-color-info-950);"></div> |
-
-## Warning
-
-| Token                    | Example                                                                               |
-| ------------------------ | ------------------------------------------------------------------------------------- |
-| `--sl-color-warning-50`  | <div class="color-demo" style="background-color: var(--sl-color-warning-50);"></div>  |
-| `--sl-color-warning-100` | <div class="color-demo" style="background-color: var(--sl-color-warning-100);"></div> |
-| `--sl-color-warning-200` | <div class="color-demo" style="background-color: var(--sl-color-warning-200);"></div> |
-| `--sl-color-warning-300` | <div class="color-demo" style="background-color: var(--sl-color-warning-300);"></div> |
-| `--sl-color-warning-400` | <div class="color-demo" style="background-color: var(--sl-color-warning-400);"></div> |
-| `--sl-color-warning-500` | <div class="color-demo" style="background-color: var(--sl-color-warning-500);"></div> |
-| `--sl-color-warning-600` | <div class="color-demo" style="background-color: var(--sl-color-warning-600);"></div> |
-| `--sl-color-warning-700` | <div class="color-demo" style="background-color: var(--sl-color-warning-700);"></div> |
-| `--sl-color-warning-800` | <div class="color-demo" style="background-color: var(--sl-color-warning-800);"></div> |
-| `--sl-color-warning-900` | <div class="color-demo" style="background-color: var(--sl-color-warning-900);"></div> |
-| `--sl-color-warning-950` | <div class="color-demo" style="background-color: var(--sl-color-warning-950);"></div> |
-
-## Danger
-
-| Token                    | Example                                                                             |
-| ------------------------ | ----------------------------------------------------------------------------------- |
-| `--sl-color-danger-50`  | <div class="color-demo" style="background-color: var(--sl-color-danger-50);"></div>  |
-| `--sl-color-danger-100` | <div class="color-demo" style="background-color: var(--sl-color-danger-100);"></div> |
-| `--sl-color-danger-200` | <div class="color-demo" style="background-color: var(--sl-color-danger-200);"></div> |
-| `--sl-color-danger-300` | <div class="color-demo" style="background-color: var(--sl-color-danger-300);"></div> |
-| `--sl-color-danger-400` | <div class="color-demo" style="background-color: var(--sl-color-danger-400);"></div> |
-| `--sl-color-danger-500` | <div class="color-demo" style="background-color: var(--sl-color-danger-500);"></div> |
-| `--sl-color-danger-600` | <div class="color-demo" style="background-color: var(--sl-color-danger-600);"></div> |
-| `--sl-color-danger-700` | <div class="color-demo" style="background-color: var(--sl-color-danger-700);"></div> |
-| `--sl-color-danger-800` | <div class="color-demo" style="background-color: var(--sl-color-danger-800);"></div> |
-| `--sl-color-danger-900` | <div class="color-demo" style="background-color: var(--sl-color-danger-900);"></div> |
-| `--sl-color-danger-950` | <div class="color-demo" style="background-color: var(--sl-color-danger-950);"></div> |

docs/tokens/elevation.md

@@ -1,11 +0,0 @@
-# Elevation Tokens
-
-Elevation tokens are used to give elements the appearance of being raised off the page. Use them with the `box-shadow` property. These are especially useful for menus, popovers, and dialogs.
-
-| Token                 | Example                                                                          |
-| --------------------- | -------------------------------------------------------------------------------- |
-| `--sl-shadow-x-small` | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-x-small);"></div> |
-| `--sl-shadow-small`   | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-small);"></div>   |
-| `--sl-shadow-medium`  | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-medium);"></div>  |
-| `--sl-shadow-large`   | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-large);"></div>   |
-| `--sl-shadow-x-large` | <div class="elevation-demo" style="box-shadow: var(--sl-shadow-x-large);"></div> |

docs/tokens/spacing.md

@@ -1,16 +0,0 @@
-# Spacing Tokens
-
-Spacing tokens are used to provide consistent spacing between components and content throughout your app.
-
-| Token                     | Value          | Example                                                                                                             |
-| ------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------- |
-| `--sl-spacing-xxx-small`  | 0.125rem (2px) | <div class="spacing-demo" style="width: var(--sl-spacing-xxx-small); height: var(--sl-spacing-xxx-small);"></div>   |
-| `--sl-spacing-xx-small`   | 0.25rem (4px)  | <div class="spacing-demo" style="width: var(--sl-spacing-xx-small); height: var(--sl-spacing-xx-small);"></div>     |
-| `--sl-spacing-x-small`    | 0.5rem (8px)   | <div class="spacing-demo" style="width: var(--sl-spacing-x-small); height: var(--sl-spacing-x-small);"></div>       |
-| `--sl-spacing-small`      | 0.75rem (12px) | <div class="spacing-demo" style="width: var(--sl-spacing-small); height: var(--sl-spacing-small);"></div>           |
-| `--sl-spacing-medium`     | 1rem (16px)    | <div class="spacing-demo" style="width: var(--sl-spacing-medium); height: var(--sl-spacing-medium);"></div>         |
-| `--sl-spacing-large`      | 1.25rem (20px) | <div class="spacing-demo" style="width: var(--sl-spacing-large); height: var(--sl-spacing-large);"></div>           |
-| `--sl-spacing-x-large`    | 1.75rem (28px) | <div class="spacing-demo" style="width: var(--sl-spacing-x-large); height: var(--sl-spacing-x-large);"></div>       |
-| `--sl-spacing-xx-large`   | 2.25rem (36px) | <div class="spacing-demo" style="width: var(--sl-spacing-xx-large); height: var(--sl-spacing-xx-large);"></div>     |
-| `--sl-spacing-xxx-large`  | 3rem (48px)    | <div class="spacing-demo" style="width: var(--sl-spacing-xxx-large); height: var(--sl-spacing-xxx-large);"></div>   |
-| `--sl-spacing-xxxx-large` | 4.5rem (72px)  | <div class="spacing-demo" style="width: var(--sl-spacing-xxxx-large); height: var(--sl-spacing-xxxx-large);"></div> |

docs/tokens/transition.md

@@ -1,11 +0,0 @@
-# Transition Tokens
-
-Transition tokens are used to provide consistent transitions throughout your app.
-
-| Token                    | Value  | Example                                                                                       |
-| ------------------------ | ------ | --------------------------------------------------------------------------------------------- |
-| `--sl-transition-x-slow` | 1000ms | <div class="transition-demo" style="transition-duration: var(--sl-transition-x-slow);"></div> |
-| `--sl-transition-slow`   | 500ms  | <div class="transition-demo" style="transition-duration: var(--sl-transition-slow);"></div>   |
-| `--sl-transition-medium` | 250ms  | <div class="transition-demo" style="transition-duration: var(--sl-transition-medium);"></div> |
-| `--sl-transition-fast`   | 150ms  | <div class="transition-demo" style="transition-duration: var(--sl-transition-fast);"></div>   |
-| `--sl-transition-x-fast` | 50ms   | <div class="transition-demo" style="transition-duration: var(--sl-transition-x-fast);"></div> |

docs/tokens/typography.md

@@ -1,54 +0,0 @@
-# Typography Tokens
-
-Typography tokens are used to maintain a consistent set of font styles throughout your app.
-
-## Font Family
-
-The default font stack is designed to be simple and highly available on as many devices as possible.
-
-| Token             | Value                                                                                                                                         | Example                                                                                              |
-| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `--sl-font-sans`  | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' | <span style="font-family: var(--sl-font-sans)">The quick brown fox jumped over the lazy dog.</span>  |
-| `--sl-font-serif` | Georgia, 'Times New Roman', serif                                                                                                             | <span style="font-family: var(--sl-font-serif)">The quick brown fox jumped over the lazy dog.</span> |
-| `--sl-font-mono`  | Menlo, Monaco, 'Courier New', monospace                                                                                                       | <span style="font-family: var(--sl-font-mono)">The quick brown fox jumped over the lazy dog.</span>  |
-
-## Font Size
-
-Font sizes use `rem` units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
-
-| Token                       | Value           | Example                                                           |
-| --------------------------- | --------------- | ----------------------------------------------------------------- |
-| `--sl-font-size-xx-small`   | 0.625rem (10px) | <span style="font-size: var(--sl-font-size-xx-small)">Aa</span>   |
-| `--sl-font-size-x-small`    | 0.75rem (12px)  | <span style="font-size: var(--sl-font-size-x-small)">Aa</span>    |
-| `--sl-font-size-small`      | 0.875rem (14px) | <span style="font-size: var(--sl-font-size-small)">Aa</span>      |
-| `--sl-font-size-medium`     | 1rem (16px)     | <span style="font-size: var(--sl-font-size-medium)">Aa</span>     |
-| `--sl-font-size-large`      | 1.25rem (20px)  | <span style="font-size: var(--sl-font-size-large)">Aa</span>      |
-| `--sl-font-size-x-large`    | 1.5rem (24px)   | <span style="font-size: var(--sl-font-size-x-large)">Aa</span>    |
-| `--sl-font-size-xx-large`   | 2.25rem (36px)  | <span style="font-size: var(--sl-font-size-xx-large)">Aa</span>   |
-| `--sl-font-size-xxx-large`  | 3rem (48px)     | <span style="font-size: var(--sl-font-size-xxx-large)">Aa</span>  |
-| `--sl-font-size-xxxx-large` | 4.5rem (72px)   | <span style="font-size: var(--sl-font-size-xxxx-large)">Aa</span> |
-
-## Font Weight
-
-| Token                       | Value | Example                                                                                                         |
-| --------------------------- | ----- | --------------------------------------------------------------------------------------------------------------- |
-| `--sl-font-weight-light`    | 300   | <span style="font-weight: var(--sl-font-weight-light);">The quick brown fox jumped over the lazy dog.</span>    |
-| `--sl-font-weight-normal`   | 400   | <span style="font-weight: var(--sl-font-weight-normal);">The quick brown fox jumped over the lazy dog.</span>   |
-| `--sl-font-weight-semibold` | 500   | <span style="font-weight: var(--sl-font-weight-semibold);">The quick brown fox jumped over the lazy dog.</span> |
-| `--sl-font-weight-bold`     | 700   | <span style="font-weight: var(--sl-font-weight-bold);">The quick brown fox jumped over the lazy dog.</span>     |
-
-## Letter Spacing
-
-| Token                        | Value    | Example                                                                                                             |
-| ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
-| `--sl-letter-spacing-dense`  | -0.015em | <span style="letter-spacing: var(--sl-letter-spacing-dense);">The quick brown fox jumped over the lazy dog.</span>  |
-| `--sl-letter-spacing-normal` | normal   | <span style="letter-spacing: var(--sl-letter-spacing-normal);">The quick brown fox jumped over the lazy dog.</span> |
-| `--sl-letter-spacing-loose`  | 0.075em  | <span style="letter-spacing: var(--sl-letter-spacing-loose);">The quick brown fox jumped over the lazy dog.</span>  |
-
-## Line Height
-
-| Token                     | Value | Example                                                                                                                                                                                                       |
-| ------------------------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sl-line-height-dense`  | 1.4  | <div style="line-height: var(--sl-line-height-dense);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>  |
-| `--sl-line-height-normal` | 1.8   | <div style="line-height: var(--sl-line-height-normal);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
-| `--sl-line-height-loose`  | 2.2  | <div style="line-height: var(--sl-line-height-loose);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div>  |

docs/tokens/z-index.md

@@ -1,11 +0,0 @@
-# Z-Index Tokens
-
-Z-indexes are used to stack components in a logical manner.
-
-| Token                        | Value |
-| ---------------------------- | ----- |
-| `--sl-z-index-drawer`        | 700   |
-| `--sl-z-index-dialog`        | 800   |
-| `--sl-z-index-dropdown`      | 900   |
-| `--sl-z-index-alert-group`   | 950   |
-| `--sl-z-index-tooltip`       | 1000  |

docs/tutorials/integrating-with-nextjs.md

@@ -1,134 +0,0 @@
-# Integrating with NextJS
-
-This page explains how to integrate Shoelace with a NextJS app. This is a community-maintained document. For questions about this integration, please [ask the community](/resources/community).
-
-## Requirements
-
-This integration has been tested with the following:
-
-- Node >= 12.10
-- NextJS >= 10.0.5
-
-## Instructions
-
-To get started using Shoelace with NextJS, the following packages must be installed.
-
-```bash
-yarn add @shoelace-style/shoelace @shoelace-style/react-wrapper copy-webpack-plugin
-```
-
-### Importing the Default Theme
-
-The next step is to import Shoelace's default theme (stylesheet) in your `_app.js` file:
-
-```css
-@import '~@shoelace-style/shoelace/dist/themes/base';
-```
-
-### Defining Custom Elements
-
-After importing the theme, you'll need to import the JavaScript files for Shoelace. However, this is a bit tricky to do in NextJS thanks to the SSR environment not having any of the required browser APIs to define endpoints.
-
-We'll want to create a component that uses [React's `useLayoutEffect`](https://reactjs.org/docs/hooks-reference.html#uselayouteffect) to add in the custom components before the first render:
-
-```javascript
-function CustomEls({ URL }) {
-  // useRef to avoid re-renders
-  const customEls = useRef(false);
-
-  useLayoutEffect(() => {
-    if (customEls.current) {
-      return;
-    }
-    setBasePath(`${URL}/static/static`);
-
-    // Define the components you intend to use
-    customElements.define("sl-alert", SlAlert);
-    customElements.define("sl-button", SlButton);
-    // ...
-
-    customEls.current = true;
-  }, [URL, customEls]);
-
-  return null;
-}
-```
-
-?> If we use `useEffect` instead of `useLayoutEffect`, the initial render will occur with the expected `sl-` props applied, but the subsequent render (caused by the `useEffect`) will remove those props as the custom components initialize. We _must_ use `useLayoutEffect` to have expected behavior
-
-?> This will import all Shoelace components for convenience. To selectively import components, refer to the [Using webpack](/getting-started/installation?id=using-webpack) section of the docs.
-
-You may be wondering where the `URL` property is coming from. We'll address that in the next few sections.
-
-### Using Our New Component In Code
-
-While we need to use `useLayoutEffect` for the initial render, NextJS will throw a warning at us for trying to use `useLayoutEffect` in SSR, which is disallowed. To fix this problem, we'll conditionally render the `CustomEls` component to only render in the browser
-
-```javascript
-function MyApp({ Component, pageProps, URL }) {
-  return (
-    <>
-      {process.browser && <CustomEls URL={URL} />}
-      <Component {...pageProps} />
-    </>
-  )
-}
-```
-
-### Environmental Variable
-
-However, to make `setBasePath()` work as-expected, we need to know where the file is hosted. To do this, we need to set [environmental variables](https://nextjs.org/docs/basic-features/environment-variables). Create a `.local.env` file and put the following inside:
-
-```
-BASE_URL="localhost:3000"
-```
-
-Then, modify your `MyApp` class in `_app.js` to pass this process environment into your render:
-
-```javascript
-MyApp.getInitialProps = async (context) => {
-  const URL = process.env.BASE_URL;
-
-  return {
-    URL,
-  };
-};
-```
-
-?> You'll need to set this `BASE_URL` variable inside the build process of whatever local build or CI/CD you have. This will need to be an absolute URL, as a relative URL will cause shoelace to throw a warning
-
-### webpack Config
-
-Next we need to add Shoelace's assets to the final build output. To do this, modify `next.config.js` to look like this.
-
-```javascript
-const path = require("path");
-const CopyPlugin = require("copy-webpack-plugin");
-
-module.exports = {
-    webpack: (config) => {
-        config.plugins.push(
-            new CopyPlugin({
-                patterns: [
-                    {
-                        from: path.resolve(
-                            __dirname,
-                            "node_modules/@shoelace-style/shoelace/dist/assets"
-                        ),
-                        to: path.resolve(__dirname, "static/assets"),
-                    },
-                ],
-            })
-        );
-        return config;
-    },
-};
-```
-
-?> This will copy the files from `node_modules` into your `static` folder on every development serve or build. You may want to avoid commiting these into your repo. To do so, simply add `static/assets` into your `.gitignore` folder
-
-## Additional Resources
-
-- There is a third-party [example repo](https://github.com/crutchcorn/nextjs-shoelace-example), courtesy of [crutchcorn](https://github.com/crutchcorn) available to help you get started.
-
-  

docs/tutorials/integrating-with-rails.md

@@ -1,98 +0,0 @@
-# Integrating with Rails
-
-This page explains how to integrate Shoelace with a Rails app. This is a community-maintained document. For questions about this integration, please [ask the community](/resources/community).
-
-## Requirements
-
-This integration has been tested with the following:
-
-- Rails >= 6
-- Node >= 12.10
-- Webpacker >= 5
-
-## Instructions
-
-To get started using Shoelace with Rails, the following packages must be installed.
-
-```bash
-yarn add @shoelace-style/shoelace copy-webpack-plugin
-```
-
-### Importing the Default Theme
-
-The next step is to import Shoelace's default theme (stylesheet) in `app/javascript/stylesheets/application.scss`.
-
-```css
-@import '~@shoelace-style/shoelace/dist/themes/base';
-```
-
-### Importing Required Scripts
-
-After importing the theme, you'll need to import the JavaScript files for Shoelace. Add the following code to `app/javascript/packs/application.js`.
-
-```js
-import '../stylesheets/application.scss'
-import { setBasePath, SlAlert, SlAnimation, SlButton, ... } from '@shoelace-style/shoelace'
-
-// ...
-
-const rootUrl = document.currentScript.src.replace(/\/packs.*$/, '')
-
-// Path to the assets folder (should be independent from the current script source path
-// to work correctly in different environments)
-setBasePath(rootUrl + '/packs/js/')
-```
-
-### webpack Config
-
-Next we need to add Shoelace's assets to the final build output. To do this, modify `config/webpack/environment.js` to look like this.
-
-```js
-const { environment } = require('@rails/webpacker')
-
-// Shoelace config
-const path = require('path')
-const CopyPlugin = require('copy-webpack-plugin')
-
-// Add shoelace assets to webpack's build process
-environment.plugins.append(
-  'CopyPlugin',
-  new CopyPlugin({
-    patterns: [
-      {
-        from: path.resolve(
-          __dirname,
-          '../../node_modules/@shoelace-style/shoelace/dist/assets'
-        ),
-        to: path.resolve(__dirname, '../../public/packs/js/assets')
-      }
-    ]
-  })
-)
-
-module.exports = environment
-```
-
-### Adding Pack Tags
-
-The final step is to add the corresponding `pack_tags` to the page. You should have the following `tags` in the `<head>` section of `app/views/layouts/application.html.erb`.
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <!-- ... -->
-
-    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
-  </head>
-  <body><%= yield %></body>
-</html>
-```
-
-Now you can start using Shoelace components with Rails!
-
-## Additional Resources
-
-- There is a third-party [example repo](https://github.com/ParamagicDev/rails-shoelace-example), courtesy of [ParamagicDev](https://github.com/ParamagicDev) available to help you get started.
-- If you would like to avoid repeating this process, check out the associated [Railsbyte for Shoelace](https://railsbytes.com/templates/X8BsEb).