use <sl-copy-button>

* remove extra react wrapper, upgrade to v2 of @lit-labs/react, call define in module.

* add changelog entry

* prettier

.editorconfig

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

.eslintignore

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

.eslintrc.cjs

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

.eslintrc.json

@@ -1,39 +0,0 @@
-{
-  "parserOptions": {
-    "project": "./tsconfig.json"
-  },
-  "extends": ["plugin:@stencil/recommended"],
-  "rules": {
-    "@stencil/async-methods": "error",
-    "@stencil/ban-prefix": ["error", ["stencil", "stnl", "st"]],
-    "@stencil/decorators-context": "error",
-    "@stencil/decorators-style": [
-      "error",
-      {
-        "prop": "inline",
-        "state": "inline",
-        "element": "inline",
-        "event": "inline",
-        "method": "multiline",
-        "watch": "multiline",
-        "listen": "multiline"
-      }
-    ],
-    "@stencil/element-type": "error",
-    "@stencil/host-data-deprecated": "error",
-    "@stencil/methods-must-be-public": "error",
-    "@stencil/no-unused-watch": "error",
-    "@stencil/own-methods-must-be-private": "off",
-    "@stencil/own-props-must-be-private": "off",
-    "@stencil/prefer-vdom-listener": "error",
-    "@stencil/props-must-be-public": "off",
-    "@stencil/props-must-be-readonly": "off",
-    "@stencil/render-returns-host": "error",
-    "@stencil/required-jsdoc": "error",
-    "@stencil/reserved-member-names": "error",
-    "@stencil/single-export": "error",
-    "@stencil/strict-boolean-conditions": "off",
-    "@stencil/strict-mutable": "off",
-    "react/jsx-no-bind": "off"
-  }
-}

.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,4 @@
 contact_links:
-  - name: Personal Support
-    url: https://github.com/sponsors/claviska
-    about: Support for issues outside the scope of the library can be obtained via sponsorship.
+  - 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

@@ -3,18 +3,13 @@ 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 [...]
+### What issue are you having?
+Provide a clear and concise description of the problem you're facing.
 
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
+### Describe the solution you'd like
+How would you like to see the library solve it?
 
-**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.
+### Describe alternatives you've considered
+In what ways have you tried to solve this with the current version?

.github/SECURITY.md

@@ -4,4 +4,4 @@ We take security issues in Shoelace very seriously and appreciate your efforts t
 
 To report a security issue, email [cory@abeautifulsite.net](mailto:cory@abeautifulsite.net) and include "SHOELACE 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/node.js.yml

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

.github/workflows/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

.gitignore

@@ -1,33 +1,9 @@
-src/components/*/readme.md
-src/components/icon/icons
-docs/assets/data/custom.json
-docs/assets/icons/sprite.svg
-
-dist/
-docs/dist/
-loader/
-temp/
-www/
-
-*~
-*.sw[mnpcod]
-*.log
-*.lock
-*.tmp
-*.tmp.*
-log.txt
-*.sublime-project
-*.sublime-workspace
-
-.stencil/
-.idea/
-.vscode/
-.sass-cache/
-.versions/
-node_modules/
-$RECYCLE.BIN/
-
+_site
+.cache
 .DS_Store
-Thumbs.db
-UserInterfaceState.xcuserstate
-.env
+dist
+docs/assets/images/sprite.svg
+node_modules
+src/react
+cdn
+web-types.json

.gitpod.yml

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

.husky/pre-commit

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

.prettierignore

@@ -1,11 +1,14 @@
+*.hbs
+.cache
 .github
-.stencil
+cspell.json
 dist
-docs/assets
-docs/**/*.md
-loader
+docs/search.json
+src/components/icon/icons
+src/react/index.ts
 node_modules
-src/components/**/readme.md
-src/components.d.ts
-www
+package.json
 package-lock.json
+tsconfig.json
+cdn
+_site

.vscode/extensions.json

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

.vscode/settings.json

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

CHANGELOG.md

@@ -1,27 +0,0 @@
-# Changelog
-
-## 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

CONTRIBUTING.md

@@ -1,117 +1,5 @@
 # Contributing to Shoelace
 
-Shoelace is an open source project, meaning everyone can use it and contribute to its development. Please take a moment to review these guidelines to make the contribution process as easy as possible for both you and the project's maintainers.
+Before contributing, please review the contributions guidelines at:
 
-## 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. Please [ask your question](https://stackoverflow.com/questions/ask) on StackOverflow 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 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
-
-`master` - This branch reflects the latest release and powers [shoelace.style](https://shoelace.style/).
-
-`next` - This branch is where pull requests will land. It reflects what's coming in the _next_ release, which can be previewed at [next.shoelace.style](https://next.shoelace.style/).
-
-## Conventions
-
-This section aims to describe some of the design decisions and code conventions that support the project. All contributors are expected to follow conventions and best practices, even those not explicitly defined in this document. When in doubt, refer to existing source code and execute your best judgment.
-
-In order to keep the project in a maintainable state, code that doesn't follow conventions and best practices will need to be refactored before it will be accepted. This isn't a knock on your code or your style — it's something the author considers necessary to operate a successful open source project.
-
-### Semantic Versioning
-
-This project follows [Semantic Versioning](https://semver.org/). Breaking changes in stable components 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 in future versions will be deprecated instead.
-
-**Components marked "experimental" should not be used in production,** as changes to them will not be subject to this rule.
-
-### Code Formatting & Linting
-
-The majority of code formatting is handled automatically by [Prettier](https://prettier.io/) at build time. However, for the best experience, you should [install it in your editor](https://prettier.io/docs/en/editors.html) and enable format on save.
-
-Linting is run automatically at build time. By design, the project will not build if the linter is unhappy. Contributors are strongly encouraged to install an ESLint plugin for your editor for the best developer experience.
-
-### BEM 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 _inside_ a component won't conflict with class names _outside_ the component, so we're free to name them whatever we want.
-
-Internally, each component uses the [BEM methodology](http://getbem.com/) for its class names. There is no technical requirement to do this — it's purely the preference of the author. However, all contributions are expected to follow this practice for the sake of consistency.
-
-## Developer Tips
-
-### Documentation is the key to success
-
-Nobody likes writing documentation, but not having good docs is frustrating to users and makes the project less appealing. Fortunately, writing documentation for Shoelace is really easy!
-
-A lot of the documentation is generated automatically based on JSDoc comments in each component's source code. If you have ESLint enabled, your editor will tell you when a comment is missing. This may feel a bit naggy, but it's a very good thing. Every property, method, event, etc. is documented this way. By adding comments as you code, the docs are more easily kept up to date.
-
-The documentation pages are served up by [Docsify](https://docsify.now.sh/). Check out `docs/_sidebar.md` and `docs/components/` to get an idea of how pages are created 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!
-
-### Choose composability when possible
-
-When designed right, web components are highly composable, meaning you can easily reuse them in other components. This reduces the overall size of the library, expedites feature development, and maintains a consistent user experience throughout.
-
-The select component, for example, makes use of the dropdown, input, and menu components. Because it's offloading most of its functionality and styles to these lower-level components, the select component remains very lightweight and its appearance and behavior is consistent with other form controls and menus.
-
-### When to use a standard property 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.
-
-### Boolean Props
-
-Boolean props should _always_ default to `false`, otherwise there's no way for the user to unset it 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`.
-
-### 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.
-
-### 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.
+[shoelace.style/resources/contributing](https://shoelace.style/resources/contributing)

README.md

@@ -5,6 +5,8 @@ A forward-thinking library of web components.
 - Works with all frameworks 🧩
 - Works with CDNs 🚛
 - Fully customizable with CSS 🎨
+- Includes an official dark theme 🌛
+- Built with accessibility in mind ♿️
 - Open source 😸
 
 Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
@@ -21,7 +23,7 @@ Twitter: [@shoelace_style](https://twitter.com/shoelace_style)
 
 ## Shoemakers 🥾
 
-Shoemakers, or "developers," can use this documentation to learn how to build Shoelace from source.
+Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace 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.
 
@@ -29,15 +31,13 @@ If that's not what you're trying to do, the [documentation website](https://shoe
 
 ### What are you using to build Shoelace?
 
-Components are built with [Stencil](https://stenciljs.com/), a compiler that generates standards-based web components. The source code is a combination of TypeScript + JSX (TSX). Stylesheets are written in SCSS.
-
-The build is done through a combination of Stencil's CLI and a handful of custom scripts.
+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
 
 Start by [forking the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, then clone it locally and install dependencies.
 
-```sh
+```bash
 git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
 cd shoelace
 npm install
@@ -47,24 +47,30 @@ npm install
 
 Once you've cloned the repo, run the following command.
 
-```sh
-npm run start
+```bash
+npm start
 ```
 
-This will spin up the Shoelace dev server. Note that the dev server requires ports 4000, 4001, and 4002 to be available.
-
-After the initial build, a browser will open at `http://localhost:4000`.
-
-Hot module reloading (HMR) is enabled for components, so changes will instantly reflect in the browser as you work. The documentation is powered by Docsify, which uses raw markdown files to generate pages. As such, no static files are built for the docs. Unfortunately, changes to _documentation pages_ will trigger a page refresh (no HMR).
+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.
 
-```sh
+```bash
 npm run build
 ```
 
+### Creating New Components
+
+To scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name.
+
+```bash
+npm run create sl-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.
+
 ### 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.

cspell.json

@@ -0,0 +1,184 @@
+{
+  "version": "0.2",
+  "words": [
+    "activedescendant",
+    "allowfullscreen",
+    "animationend",
+    "Animista",
+    "apos",
+    "atrule",
+    "autocorrect",
+    "autofix",
+    "autoload",
+    "autoloader",
+    "autoloading",
+    "autoplay",
+    "bezier",
+    "boxicons",
+    "CACHEABLE",
+    "callout",
+    "callouts",
+    "cdndir",
+    "chatbubble",
+    "checkmark",
+    "claviska",
+    "Clippy",
+    "codebases",
+    "codepen",
+    "colocated",
+    "colour",
+    "combobox",
+    "Commonmark",
+    "Composability",
+    "Consolas",
+    "contenteditable",
+    "copydir",
+    "Cotte",
+    "coverpage",
+    "crossorigin",
+    "crutchcorn",
+    "csspart",
+    "cssproperty",
+    "datetime",
+    "describedby",
+    "Docsify",
+    "dogfood",
+    "dropdowns",
+    "easings",
+    "endraw",
+    "enterkeyhint",
+    "eqeqeq",
+    "erroneou",
+    "errormessage",
+    "esbuild",
+    "exportmaps",
+    "exportparts",
+    "fieldsets",
+    "formaction",
+    "formdata",
+    "formenctype",
+    "formmethod",
+    "formnovalidate",
+    "formtarget",
+    "FOUC",
+    "FOUCE",
+    "fullscreen",
+    "gestern",
+    "giga",
+    "globby",
+    "Grayscale",
+    "haspopup",
+    "heroicons",
+    "hexa",
+    "Iconoir",
+    "Iframes",
+    "iife",
+    "inputmode",
+    "ionicon",
+    "ionicons",
+    "jsDelivr",
+    "jsfiddle",
+    "jsonata",
+    "keydown",
+    "keyframes",
+    "Kool",
+    "labelledby",
+    "Laravel",
+    "LaViska",
+    "linkify",
+    "listbox",
+    "listitem",
+    "litelement",
+    "lowercasing",
+    "Lucide",
+    "maxlength",
+    "Menlo",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "middlewares",
+    "minlength",
+    "monospace",
+    "mousedown",
+    "mousemove",
+    "mouseup",
+    "multiselectable",
+    "nextjs",
+    "nocheck",
+    "noopener",
+    "noreferrer",
+    "novalidate",
+    "npmdir",
+    "Numberish",
+    "outdir",
+    "ParamagicDev",
+    "peta",
+    "petabit",
+    "prismjs",
+    "progressbar",
+    "radiogroup",
+    "Railsbyte",
+    "remixicon",
+    "reregister",
+    "resizer",
+    "resizers",
+    "retargeted",
+    "RETRYABLE",
+    "rgba",
+    "roadmap",
+    "Roboto",
+    "roledescription",
+    "Sapan",
+    "saturationl",
+    "Schilp",
+    "scrollbars",
+    "scrollend",
+    "scroller",
+    "Segoe",
+    "semibold",
+    "sitedir",
+    "slotchange",
+    "smartquotes",
+    "spacebar",
+    "stylesheet",
+    "Tabbable",
+    "tabindex",
+    "tabler",
+    "tablist",
+    "tabpanel",
+    "templating",
+    "tera",
+    "testid",
+    "textareas",
+    "textfield",
+    "tinycolor",
+    "transitionend",
+    "treeitem",
+    "treeshaking",
+    "Triaging",
+    "turbolinks",
+    "typeof",
+    "unbundles",
+    "unbundling",
+    "unicons",
+    "unsanitized",
+    "unsupportive",
+    "valpha",
+    "valuenow",
+    "valuetext",
+    "WEBP",
+    "Webpacker",
+    "wordmark"
+  ],
+  "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
+}

custom-elements-manifest.config.js

@@ -0,0 +1,215 @@
+import * as path from 'path';
+import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
+import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
+import { parse } from 'comment-parser';
+import { pascalCase } from 'pascal-case';
+import commandLineArgs from 'command-line-args';
+import fs from 'fs';
+
+const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+const { name, description, version, author, homepage, license } = packageData;
+
+const { outdir } = commandLineArgs([
+  { name: 'litelement', type: String },
+  { name: 'analyze', defaultOption: true },
+  { name: 'outdir', type: String }
+]);
+
+function noDash(string) {
+  return string.replace(/^\s?-/, '').trim();
+}
+
+function replace(string, terms) {
+  terms.forEach(({ from, to }) => {
+    string = string?.replace(from, to);
+  });
+
+  return string;
+}
+
+export default {
+  globs: ['src/components/**/*.component.ts'],
+  exclude: ['**/*.styles.ts', '**/*.test.ts'],
+  plugins: [
+    // Append package data
+    {
+      name: 'shoelace-package-data',
+      packageLinkPhase({ customElementsManifest }) {
+        customElementsManifest.package = { name, description, version, author, homepage, license };
+      }
+    },
+    // Infer tag names because we no longer use @customElement decorators.
+    {
+      name: 'shoelace-infer-tag-names',
+      analyzePhase({ ts, node, moduleDoc }) {
+        switch (node.kind) {
+          case ts.SyntaxKind.ClassDeclaration: {
+            const className = node.name.getText();
+            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+
+            const importPath = moduleDoc.path;
+
+            // This is kind of a best guess at components. "thing.component.ts"
+            if (!importPath.endsWith('.component.ts')) {
+              return;
+            }
+
+            const tagNameWithoutPrefix = path.basename(importPath, '.component.ts');
+            const tagName = 'sl-' + tagNameWithoutPrefix;
+
+            classDoc.tagNameWithoutPrefix = tagNameWithoutPrefix;
+            classDoc.tagName = tagName;
+
+            // This used to be set to true by @customElement
+            classDoc.customElement = true;
+          }
+        }
+      }
+    },
+    // Parse custom jsDoc tags
+    {
+      name: 'shoelace-custom-tags',
+      analyzePhase({ ts, node, moduleDoc }) {
+        switch (node.kind) {
+          case ts.SyntaxKind.ClassDeclaration: {
+            const className = node.name.getText();
+            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+            const customTags = ['animation', 'dependency', 'documentation', 'since', 'status', 'title'];
+            let customComments = '/**';
+
+            node.jsDoc?.forEach(jsDoc => {
+              jsDoc?.tags?.forEach(tag => {
+                const tagName = tag.tagName.getText();
+
+                if (customTags.includes(tagName)) {
+                  customComments += `\n * @${tagName} ${tag.comment}`;
+                }
+              });
+            });
+
+            // This is what allows us to map JSDOC comments to ReactWrappers.
+            classDoc['jsDoc'] = node.jsDoc?.map(jsDoc => jsDoc.getFullText()).join('\n');
+
+            const parsed = parse(`${customComments}\n */`);
+            parsed[0].tags?.forEach(t => {
+              switch (t.tag) {
+                // Animations
+                case 'animation':
+                  if (!Array.isArray(classDoc['animations'])) {
+                    classDoc['animations'] = [];
+                  }
+                  classDoc['animations'].push({
+                    name: t.name,
+                    description: noDash(t.description)
+                  });
+                  break;
+
+                // Dependencies
+                case 'dependency':
+                  if (!Array.isArray(classDoc['dependencies'])) {
+                    classDoc['dependencies'] = [];
+                  }
+                  classDoc['dependencies'].push(t.name);
+                  break;
+
+                // Value-only metadata tags
+                case 'documentation':
+                case 'since':
+                case 'status':
+                case 'title':
+                  classDoc[t.tag] = t.name;
+                  break;
+
+                // All other tags
+                default:
+                  if (!Array.isArray(classDoc[t.tag])) {
+                    classDoc[t.tag] = [];
+                  }
+
+                  classDoc[t.tag].push({
+                    name: t.name,
+                    description: t.description,
+                    type: t.type || undefined
+                  });
+              }
+            });
+          }
+        }
+      }
+    },
+    {
+      name: 'shoelace-react-event-names',
+      analyzePhase({ ts, node, moduleDoc }) {
+        switch (node.kind) {
+          case ts.SyntaxKind.ClassDeclaration: {
+            const className = node.name.getText();
+            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+
+            if (classDoc?.events) {
+              classDoc.events.forEach(event => {
+                event.reactName = `on${pascalCase(event.name)}`;
+                event.eventName = `${pascalCase(event.name)}Event`;
+              });
+            }
+          }
+        }
+      }
+    },
+    {
+      name: 'shoelace-translate-module-paths',
+      packageLinkPhase({ customElementsManifest }) {
+        customElementsManifest?.modules?.forEach(mod => {
+          //
+          // CEM paths look like this:
+          //
+          //  src/components/button/button.ts
+          //
+          // But we want them to look like this:
+          //
+          //  components/button/button.js
+          //
+          const terms = [
+            { from: /^src\//, to: '' }, // Strip the src/ prefix
+            { from: /\.component.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
+          ];
+
+          mod.path = replace(mod.path, terms);
+
+          for (const ex of mod.exports ?? []) {
+            ex.declaration.module = replace(ex.declaration.module, terms);
+          }
+
+          for (const dec of mod.declarations ?? []) {
+            if (dec.kind === 'class') {
+              for (const member of dec.members ?? []) {
+                if (member.inheritedFrom) {
+                  member.inheritedFrom.module = replace(member.inheritedFrom.module, terms);
+                }
+              }
+            }
+          }
+        });
+      }
+    },
+    // Generate custom VS Code data
+    customElementVsCodePlugin({
+      outdir,
+      cssFileName: null,
+      referencesTemplate: (_, tag) => [
+        {
+          name: 'Documentation',
+          url: `https://shoelace.style/components/${tag.replace('sl-', '')}`
+        }
+      ]
+    }),
+    customElementJetBrainsPlugin({
+      excludeCss: true,
+      referencesTemplate: (_, tag) => {
+        return {
+          name: 'Documentation',
+          url: `https://shoelace.style/components/${tag.replace('sl-', '')}`
+        };
+      }
+    })
+  ]
+};

dev-server.js

@@ -1,76 +0,0 @@
-//
-// The Shoelace dev server! 🥾
-//
-// This is an Express + Browsersync script that:
-//
-//  - Proxies Stencil's dev server (for HMR of components)
-//  - Serves dist/ and docs/ from https://localhost:3000/
-//  - Launches the docs site and reloads the page when pages are modified
-//
-// Usage:
-//
-//   1. Run Stencil: `stencil build --dev --docs --watch --serve --no-open`
-//
-//   2. Run this script at the same time as Stencil
-//
-
-const bs = require('browser-sync').create();
-const chalk = require('chalk');
-const express = require('express');
-const fs = require('fs').promises;
-const path = require('path');
-const { createProxyMiddleware } = require('http-proxy-middleware');
-
-const app = express();
-const browserPort = 4000;
-const stencilPort = 4001;
-const proxyPort = 4002;
-
-// Proxy Stencil's dev server
-app.use(
-  '/~dev-server',
-  createProxyMiddleware({
-    target: `http://localhost:${stencilPort}`,
-    changeOrigin: true,
-    ws: true
-  })
-);
-
-// Inject Stencil's dev server iframe into the main entry point
-app.use(/^\/$/, async (req, res, next) => {
-  let index = await fs.readFile('./docs/index.html', 'utf8');
-  index = index
-    .replace('<head>', '<head><script>window.ShoelaceDevServer = true;</script>')
-    .replace(
-      '</body>',
-      '<iframe src="/~dev-server" style="display: block; width: 0; height: 0; border: 0;"></iframe></body>'
-    );
-  res.type('html').send(index);
-});
-app.use('/dist', express.static('./dist'));
-app.use('/', express.static('./docs'));
-app.listen(proxyPort);
-
-// Give Stencil's dev server a few seconds to spin up, then launch the browser
-setTimeout(() => {
-  console.log(chalk.cyan(`\nLaunching the Shoelace dev server at http://localhost:${browserPort}! 🥾\n`));
-
-  bs.init({
-    startPath: '/',
-    port: browserPort,
-    proxy: {
-      target: `http://localhost:${proxyPort}`,
-      ws: true
-    },
-    logLevel: 'silent',
-    notify: false,
-    snippetOptions: {
-      ignorePaths: '/~dev-server'
-    }
-  });
-
-  // Reload when docs change
-  bs.watch('docs/**/*').on('change', async () => {
-    bs.reload();
-  });
-}, 5000);

docs/404.md

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

docs/_includes/component.njk

@@ -0,0 +1,347 @@
+{% extends "default.njk" %}
+
+{# Find the component based on the `tag` front matter #}
+{% set component = getComponent('sl-' + page.fileSlug) %}
+
+{% block content %}
+  {# Determine the badge variant #}
+  {% if component.status == 'stable' %}
+    {% set badgeVariant = 'primary' %}
+  {% elseif component.status == 'experimental' %}
+    {% set badgeVariant = 'warning' %}
+  {% elseif component.status == 'planned' %}
+    {% set badgeVariant = 'neutral' %}
+  {% elseif component.status == 'deprecated' %}
+    {% set badgeVariant = 'danger' %}
+  {% else %}
+    {% set badgeVariant = 'neutral' %}
+  {% endif %}
+
+  {# Header #}
+  <header class="component-header">
+    <h1>{{ component.name | classNameToComponentName }}</h1>
+
+    <div class="component-header__tag">
+      <code>&lt;{{ component.tagName }}&gt; | {{ component.name }}</code>
+    </div>
+
+    <div class="component-header__info">
+      <sl-badge variant="neutral" pill>
+        Since {{component.since or '?' }}
+      </sl-badge>
+      <sl-badge variant="{{ badgeVariant }}" pill style="text-transform: capitalize;">
+        {{ component.status }}
+      </sl-badge>
+    </div>
+  </header>
+
+  <p class="component-summary">
+    {% if component.summary %}
+      {{ component.summary | markdownInline | safe }}
+    {% endif %}
+  </p>
+
+  {# Markdown content #}
+  {{ content | safe }}
+
+  {# Importing #}
+  <h2>Importing</h2>
+  <p>
+    If you're using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use
+    any of the following snippets to <a href="/getting-started/installation#cherry-picking">cherry pick</a> this component.
+  </p>
+
+  <sl-tab-group>
+    <sl-tab slot="nav" panel="script">Script</sl-tab>
+    <sl-tab slot="nav" panel="import">Import</sl-tab>
+    <sl-tab slot="nav" panel="bundler">Bundler</sl-tab>
+    <sl-tab slot="nav" panel="react">React</sl-tab>
+
+    <sl-tab-panel name="script">
+      <p>
+        To import this component from <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace">the CDN</a>
+        using a script tag:
+      </p>
+      <pre><code class="language-html">&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}&quot;&gt;&lt;/script&gt;</code></pre>
+    </sl-tab-panel>
+
+    <sl-tab-panel name="import">
+      <p>
+        To import this component from <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace">the CDN</a>
+        using a JavaScript import:
+      </p>
+      <pre><code class="language-js">import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}';</code></pre>
+    </sl-tab-panel>
+
+    <sl-tab-panel name="bundler">
+      <p>
+        To import this component using <a href="{{ rootUrl('/getting-started/installation#bundling') }}">a bundler</a>:
+      </p>
+      <pre><code class="language-js">import '@shoelace-style/shoelace/{{ meta.npmdir }}/{{ component.path }}';</code></pre>
+    </sl-tab-panel>
+
+    <sl-tab-panel name="react">
+      <p>
+        To import this component as a <a href="/frameworks/react">React component</a>:
+      </p>
+      <pre><code class="language-js">import {{ component.name }} from '@shoelace-style/shoelace/{{ meta.npmdir }}/react/{{ component.tagNameWithoutPrefix }}';</code></pre>
+    </sl-tab-panel>
+  </sl-tab-group>
+
+  {# Slots #}
+  {% if component.slots.length %}
+    <h2>Slots</h2>
+
+    <table>
+      <thead>
+        <tr>
+          <th class="table-name">Name</th>
+          <th class="table-description">Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for slot in component.slots %}
+          <tr>
+            <td class="nowrap">
+              {% if slot.name %}
+                <code>{{ slot.name }}</code>
+              {% else %}
+                (default)
+              {% endif %}
+            </td>
+            <td>{{ slot.description | markdownInline | safe }}</td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#slots') }}">using slots</a>.</em></p>
+  {% endif %}
+
+  {# Properties #}
+  {% if component.properties.length %}
+    <h2>Properties</h2>
+
+    <table>
+      <thead>
+        <tr>
+          <th class="table-name">Name</th>
+          <th class="table-description">Description</th>
+          <th class="table-reflects">Reflects</th>
+          <th class="table-type">Type</th>
+          <th class="table-default">Default</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for prop in component.properties %}
+          <tr>
+            <td>
+              <code class="nowrap">{{ prop.name }}</code>
+              {% if prop.attribute != prop.name %}
+                <br>
+                <sl-tooltip content="This attribute is different from its property">
+                  <small>
+                    <code class="nowrap">
+                      {{ prop.attribute }}
+                    </code>
+                  </small>
+                </sl-tooltip>
+              {% endif %}
+            </td>
+            <td>
+              {{ prop.description | markdownInline | safe }}
+            </td>
+            <td style="text-align: center;">
+              {% if prop.reflects %}
+                <sl-icon label="yes" name="check-lg"></sl-icon>
+              {% endif %}
+            </td>
+            <td>
+              {% if prop.type.text %}
+                <code>{{ prop.type.text | markdownInline | safe }}</code>
+              {% else %}
+                -
+              {% endif %}
+            </td>
+            <td>
+              {% if prop.default %}
+                <code>{{ prop.default | markdownInline | safe }}</code>
+              {% else %}
+                -
+              {% endif %}
+            </td>
+          </tr>
+        {% endfor %}
+        <tr>
+          <td class="nowrap"><code>updateComplete</code></td>
+          <td>
+            A read-only promise that resolves when the component has
+            <a href="/getting-started/usage?#component-rendering-and-updating">finished updating</a>.
+          </td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
+
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#properties') }}">attributes and properties</a>.</em></p>
+  {% endif %}
+
+  {# Events #}
+  {% if component.events.length %}
+    <h2>Events</h2>
+
+    <table>
+      <thead>
+        <tr>
+          <th class="table-name" data-flavor="html">Name</th>
+          <th class="table-name" data-flavor="react">React Event</th>
+          <th class="table-description">Description</th>
+          <th class="table-event-detail">Event Detail</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for event in component.events %}
+          <tr>
+            <td data-flavor="html"><code class="nowrap">{{ event.name }}</code></td>
+            <td data-flavor="react"><code class="nowrap">{{ event.reactName }}</code></td>
+            <td>{{ event.description | markdownInline | safe }}</td>
+            <td>
+              {% if event.type.text %}
+                <code>{{ event.type.text }}</code>
+              {% else %}
+                -
+              {% endif %}
+            </td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#events') }}">events</a>.</em></p>
+  {% endif %}
+
+  {# Methods #}
+  {% if component.methods.length %}
+    <h2>Methods</h2>
+
+    <table>
+      <thead>
+        <tr>
+          <th class="table-name">Name</th>
+          <th class="table-description">Description</th>
+          <th class="table-arguments">Arguments</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for method in component.methods %}
+          <tr>
+            <td class="nowrap"><code>{{ method.name }}()</code></td>
+            <td>{{ method.description | markdownInline | safe }}</td>
+            <td>
+              {% if method.parameters.length %}
+                <code>
+                  {% for param in method.parameters %}
+                    {{ param.name }}: {{ param.type.text }}{% if not loop.last %},{% endif %}
+                  {% endfor %}
+                </code>
+              {% else %}
+                -
+              {% endif %}
+            </td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#methods') }}">methods</a>.</em></p>
+  {% endif %}
+
+  {# Custom Properties #}
+  {% if component.cssProperties.length %}
+    <h2>Custom Properties</h2>
+
+    <table>
+      <thead>
+        <tr>
+          <th class="table-name">Name</th>
+          <th class="table-description">Description</th>
+          <th class="table-default">Default</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for cssProperty in component.cssProperties %}
+          <tr>
+            <td class="nowrap"><code>{{ cssProperty.name }}</code></td>
+            <td>{{ cssProperty.description | markdownInline | safe }}</td>
+            <td>{{ cssProperty.default }}</td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#custom-properties') }}">customizing CSS custom properties</a>.</em></p>
+  {% endif %}
+
+  {# CSS Parts #}
+  {% if component.cssParts.length %}
+    <h2>Parts</h2>
+
+    <table>
+      <thead>
+        <tr>
+          <th class="table-name">Name</th>
+          <th class="table-description">Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for cssPart in component.cssParts %}
+          <tr>
+            <td class="nowrap"><code>{{ cssPart.name }}</code></td>
+            <td>{{ cssPart.description | markdownInline | safe }}</td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#component-parts') }}">customizing CSS parts</a>.</em></p>
+  {% endif %}
+
+  {# Animations #}
+  {% if component.animations.length %}
+    <h2>Animations</h2>
+
+    <table>
+      <thead>
+        <tr>
+          <th class="table-name">Name</th>
+          <th class="table-description">Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for animation in component.animations %}
+          <tr>
+            <td class="nowrap"><code>{{ animation.name }}</code></td>
+            <td>{{ animation.description | markdownInline | safe }}</td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#animations') }}">customizing animations</a>.</em></p>
+  {% endif %}
+
+  {# Dependencies #}
+  {% if component.dependencies.length %}
+    <h2>Dependencies</h2>
+
+    <p>This component automatically imports the following dependencies.</p>
+
+    <ul>
+      {% for dependency in component.dependencies %}
+        <li><code>&lt;{{ dependency }}&gt;</code></li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endblock %}

docs/_includes/default.njk

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html
+  lang="en"
+  data-layout="{{ layout }}"
+  data-shoelace-version="{{ meta.version }}"
+>
+  <head>
+    {# Metadata #}
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="{{ meta.description }}" />
+    <title>{{ meta.title }}</title>
+
+    {# Opt out of Turbo caching #}
+    <meta name="turbo-cache-control">
+
+    {# Stylesheets #}
+    <link rel="stylesheet" href="{{ assetUrl('styles/docs.css') }}" />
+    <link rel="stylesheet" href="{{ assetUrl('styles/code-previews.css') }}" />
+    <link rel="stylesheet" href="{{ assetUrl('styles/search.css') }}" />
+
+    {# Favicons #}
+    <link rel="icon" href="{{ assetUrl('images/logo.svg') }}" type="image/x-icon" />
+
+    {# Twitter Cards #}
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:creator" content="shoelace_style" />
+    <meta name="twitter:image" content="{{ assetUrl(meta.image, true) }}" />
+
+    {# OpenGraph #}
+    <meta property="og:url" content="{{ rootUrl(page.url, true) }}" />
+    <meta property="og:title" content="{{ meta.title }}" />
+    <meta property="og:description" content="{{ meta.description }}" />
+    <meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
+
+    {# Shoelace #}
+    <link rel="stylesheet" href="/dist/themes/light.css" />
+    <link rel="stylesheet" href="/dist/themes/dark.css" />
+    <script type="module" src="/dist/shoelace-autoloader.js"></script>
+
+    {# Set the initial theme and menu states here to prevent flashing #}
+    <script>
+      (() => {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = localStorage.getItem('theme') || 'auto';
+        document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
+      })();
+    </script>
+
+    {# Turbo + Scroll positioning #}
+    <script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
+    <script src="{{ assetUrl('scripts/docs.js') }}" defer></script>
+    <script src="{{ assetUrl('scripts/code-previews.js') }}" defer></script>
+    <script src="{{ assetUrl('scripts/lunr.js') }}" defer></script>
+    <script src="{{ assetUrl('scripts/search.js') }}" defer></script>
+  </head>
+  <body>
+    <a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
+      Skip to main content
+    </a>
+
+    {# Menu toggle #}
+    <button id="menu-toggle" type="button" aria-label="Menu">
+      <svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
+        <g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
+          <path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
+        </g>
+      </svg>
+    </button>
+
+    {# Icon toolbar #}
+    <div id="icon-toolbar">
+      {# GitHub #}
+      <a href="https://github.com/shoelace-style/shoelace" title="View Shoelace on GitHub">
+        <sl-icon name="github"></sl-icon>
+      </a>
+
+      {# Twitter #}
+      <a href="https://twitter.com/shoelace_style" title="Follow Shoelace on Twitter">
+        <sl-icon name="twitter"></sl-icon>
+      </a>
+
+      {# Theme selector #}
+      <sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
+        <sl-button slot="trigger" size="small" variant="text" caret title="Press \ to toggle">
+          <sl-icon class="only-light" name="sun-fill"></sl-icon>
+          <sl-icon class="only-dark" name="moon-fill"></sl-icon>
+        </sl-button>
+        <sl-menu>
+          <sl-menu-item type="checkbox" value="light">Light</sl-menu-item>
+          <sl-menu-item type="checkbox" value="dark">Dark</sl-menu-item>
+          <sl-divider></sl-divider>
+          <sl-menu-item type="checkbox" value="auto">System</sl-menu-item>
+        </sl-menu>
+      </sl-dropdown>
+    </div>
+
+    <aside id="sidebar" data-preserve-scroll>
+      <header>
+        <a href="/">
+          <img src="{{ assetUrl('images/wordmark.svg') }}" alt="Shoelace" />
+        </a>
+        <div class="sidebar-version">
+          {{ meta.version }}
+        </div>
+      </header>
+
+      <div class="sidebar-buttons">
+        <sl-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
+          <sl-icon slot="prefix" name="github"></sl-icon> Code
+        </sl-button>
+        <sl-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
+          <sl-icon slot="prefix" name="star-fill"></sl-icon> Star
+        </sl-button>
+        <sl-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
+          <sl-icon slot="prefix" name="twitter"></sl-icon> Follow
+        </sl-button>
+      </div>
+
+      <button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
+        <sl-icon name="search"></sl-icon>
+        <span>Search</span>
+      </button>
+
+      <nav>
+        {% include 'sidebar.njk' %}
+      </nav>
+    </aside>
+
+    {# Content #}
+    <main>
+      <a id="main-content"></a>
+      <article id="content" class="content{% if toc %} content--with-toc{% endif %}">
+        {% if toc %}
+          <div class="content__toc">
+            <ul>
+              <li class="top"><a href="#">{{ meta.title }}</a></li>
+            </ul>
+          </div>
+        {% endif %}
+
+        <div class="content__body">
+          {% block content %}
+            {{ content | safe }}
+          {% endblock %}
+        </div>
+      </article>
+    </main>
+  </body>
+</html>

docs/_includes/sidebar.njk

@@ -0,0 +1,65 @@
+<ul>
+  <li>
+    <h2>Getting Started</h2>
+    <ul>
+      <li><a href="/">Home</a></li>
+      <li><a href="/getting-started/installation">Installation</a></li>
+      <li><a href="/getting-started/usage">Usage</a></li>
+      <li><a href="/getting-started/themes">Themes</a></li>
+      <li><a href="/getting-started/customizing">Customizing</a></li>
+      <li><a href="/getting-started/form-controls">Form Controls</a></li>
+      <li><a href="/getting-started/localization">Localization</a></li>
+    </ul>
+  </li>
+  <li>
+    <h2>Frameworks</h2>
+    <ul>
+      <li><a href="/frameworks/react">React</a></li>
+      <li><a href="/frameworks/vue">Vue</a></li>
+      <li><a href="/frameworks/angular">Angular</a></li>
+    </ul>
+  </li>
+  <li>
+    <h2>Resources</h2>
+    <ul>
+      <li><a href="/resources/community">Community</a></li>
+      <li><a href="https://github.com/shoelace-style/shoelace/discussions">Help &amp; Support</a></li>
+      <li><a href="/resources/accessibility">Accessibility</a></li>
+      <li><a href="/resources/contributing">Contributing</a></li>
+      <li><a href="/resources/changelog">Changelog</a></li>
+    </ul>
+  </li>
+  <li>
+    <h2>Components</h2>
+    <ul>
+      {% for component in meta.components %}
+        <li>
+          <a href="/components/{{ component.tagName | removeSlPrefix }}">
+            {{ component.name | classNameToComponentName }}
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  </li>
+  <li>
+    <h2>Design Tokens</h2>
+    <ul>
+      <li><a href="/tokens/typography">Typography</a></li>
+      <li><a href="/tokens/color">Color</a></li>
+      <li><a href="/tokens/spacing">Spacing</a></li>
+      <li><a href="/tokens/elevation">Elevation</a></li>
+      <li><a href="/tokens/border-radius">Border Radius</a></li>
+      <li><a href="/tokens/transition">Transition</a></li>
+      <li><a href="/tokens/z-index">Z-index</a></li>
+      <li><a href="/tokens/more">More Tokens</a></li>
+    </ul>
+  </li>
+  <li>
+    <h2>Tutorials</h2>
+    <ul>
+      <li><a href="/tutorials/integrating-with-laravel">Integrating with Laravel</a></li>
+      <li><a href="/tutorials/integrating-with-nextjs">Integrating with NextJS</a></li>
+      <li><a href="/tutorials/integrating-with-rails">Integrating with Rails</a></li>
+    </ul>
+  </li>
+</ul>

docs/_sidebar.md

@@ -1,49 +0,0 @@
-- Getting Started
-
-  - [Overview](/)
-  - [Installation](/getting-started/installation.md)
-  - [Usage](/getting-started/usage.md)
-  - [Customizing](/getting-started/customizing.md)
-  - [Roadmap](/getting-started/roadmap.md)
-
-- Components
-
-  - [Alert](/components/alert.md)
-  - [Avatar](/components/avatar.md)
-  - [Badge](/components/badge.md)
-  - [Button](/components/button.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)
-  - [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)
-  - [Select](/components/select.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)
-
-- 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)

docs/_utilities/active-links.cjs

@@ -0,0 +1,35 @@
+function normalizePathname(pathname) {
+  // Remove /index.html
+  if (pathname.endsWith('/index.html')) {
+    pathname = pathname.replace(/\/index\.html/, '');
+  }
+
+  // Remove trailing slashes
+  return pathname.replace(/\/$/, '');
+}
+
+/**
+ * Adds a class name to links that are currently active.
+ */
+module.exports = function (doc, options) {
+  options = {
+    className: 'active-link', // the class to add to active links
+    pathname: undefined, // the current pathname to compare
+    within: 'body', // element containing the target links
+    ...options
+  };
+
+  const within = doc.querySelector(options.within);
+
+  if (!within) {
+    return doc;
+  }
+
+  within.querySelectorAll('a').forEach(link => {
+    if (normalizePathname(options.pathname) === normalizePathname(link.pathname)) {
+      link.classList.add(options.className);
+    }
+  });
+
+  return doc;
+};

docs/_utilities/anchor-headings.cjs

@@ -0,0 +1,64 @@
+const { createSlug } = require('./strings.cjs');
+
+/**
+ * Turns headings into clickable, deep linkable anchors. The provided doc should be a document object provided by JSDOM.
+ * The same document will be returned with the appropriate DOM manipulations.
+ */
+module.exports = function (doc, options) {
+  options = {
+    levels: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], // the headings to convert
+    className: 'anchor-heading', // the class name to add
+    within: 'body', // the element containing the target headings
+    ...options
+  };
+
+  const within = doc.querySelector(options.within);
+
+  if (!within) {
+    return doc;
+  }
+
+  within.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(heading => {
+    const hasAnchor = heading.querySelector('a');
+    const anchor = doc.createElement('a');
+    let id = heading.textContent ?? '';
+    let suffix = 0;
+
+    // Skip heading levels we don't care about
+    if (!options.levels?.includes(heading.tagName.toLowerCase())) {
+      return;
+    }
+
+    // Convert dots to underscores
+    id = id.replace(/\./g, '_');
+
+    // Turn it into a slug
+    id = createSlug(id);
+
+    // Make sure it starts with a letter
+    if (!/^[a-z]/i.test(id)) {
+      id = `id_${id}`;
+    }
+
+    // Make sure the id is unique
+    const originalId = id;
+    while (doc.getElementById(id) !== null) {
+      id = `${originalId}-${++suffix}`;
+    }
+
+    if (hasAnchor || !id) return;
+
+    heading.setAttribute('id', id);
+    anchor.setAttribute('href', `#${encodeURIComponent(id)}`);
+    anchor.setAttribute('aria-label', `Direct link to "${heading.textContent}"`);
+
+    if (options.className) {
+      heading.classList.add(options.className);
+    }
+
+    // Append the anchor
+    heading.append(anchor);
+  });
+
+  return doc;
+};

docs/_utilities/cem.cjs

@@ -0,0 +1,71 @@
+const customElementsManifest = require('../../dist/custom-elements.json');
+
+//
+// Export it here so we can import it elsewhere and use the same version
+//
+module.exports.customElementsManifest = customElementsManifest;
+
+//
+// Gets all components from custom-elements.json and returns them in a more documentation-friendly format.
+//
+module.exports.getAllComponents = function () {
+  const allComponents = [];
+
+  customElementsManifest.modules?.forEach(module => {
+    module.declarations?.forEach(declaration => {
+      if (declaration.customElement) {
+        // Generate the dist path based on the src path and attach it to the component
+        declaration.path = module.path.replace(/^src\//, 'dist/').replace(/\.ts$/, '.js');
+
+        // Remove members that are private or don't have a description
+        const members = declaration.members?.filter(member => member.description && member.privacy !== 'private');
+        const methods = members?.filter(prop => prop.kind === 'method' && prop.privacy !== 'private');
+        const properties = members?.filter(prop => {
+          // Look for a corresponding attribute
+          const attribute = declaration.attributes?.find(attr => attr.fieldName === prop.name);
+          if (attribute) {
+            prop.attribute = attribute.name || attribute.fieldName;
+          }
+
+          return prop.kind === 'field' && prop.privacy !== 'private';
+        });
+        allComponents.push({
+          ...declaration,
+          methods,
+          properties
+        });
+      }
+    });
+  });
+
+  // Build dependency graphs
+  allComponents.forEach(component => {
+    const dependencies = [];
+
+    // Recursively fetch sub-dependencies
+    function getDependencies(tag) {
+      const cmp = allComponents.find(c => c.tagName === tag);
+      if (!cmp || !Array.isArray(component.dependencies)) {
+        return;
+      }
+
+      cmp.dependencies?.forEach(dependentTag => {
+        if (!dependencies.includes(dependentTag)) {
+          dependencies.push(dependentTag);
+        }
+        getDependencies(dependentTag);
+      });
+    }
+
+    getDependencies(component.tagName);
+
+    component.dependencies = dependencies.sort();
+  });
+
+  // Sort by name
+  return allComponents.sort((a, b) => {
+    if (a.name < b.name) return -1;
+    if (a.name > b.name) return 1;
+    return 0;
+  });
+};

docs/_utilities/code-previews.cjs

@@ -0,0 +1,138 @@
+let count = 1;
+
+function escapeHtml(str) {
+  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+/**
+ * Turns code fields with the :preview suffix into interactive code previews.
+ */
+module.exports = function (doc, options) {
+  options = {
+    within: 'body', // the element containing the code fields to convert
+    ...options
+  };
+
+  const within = doc.querySelector(options.within);
+  if (!within) {
+    return doc;
+  }
+
+  within.querySelectorAll('[class*=":preview"]').forEach(code => {
+    const pre = code.closest('pre');
+    if (!pre) {
+      return;
+    }
+    const adjacentPre = pre.nextElementSibling?.tagName.toLowerCase() === 'pre' ? pre.nextElementSibling : null;
+    const reactCode = adjacentPre?.querySelector('code[class$="react"]');
+    const sourceGroupId = `code-preview-source-group-${count}`;
+    const isExpanded = code.getAttribute('class').includes(':expanded');
+    const noCodePen = code.getAttribute('class').includes(':no-codepen');
+
+    count++;
+
+    const htmlButton = `
+      <button type="button"
+        title="Show HTML code"
+        class="code-preview__button code-preview__button--html"
+      >
+        HTML
+      </button>
+    `;
+
+    const reactButton = `
+      <button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
+        React
+      </button>
+    `;
+
+    const codePenButton = `
+      <button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
+        <svg
+          width="138"
+          height="26"
+          viewBox="0 0 138 26"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z" />
+        </svg>
+      </button>
+    `;
+
+    const codePreview = `
+      <div class="code-preview ${isExpanded ? 'code-preview--expanded' : ''}">
+        <div class="code-preview__preview">
+          ${code.textContent}
+          <div class="code-preview__resizer">
+            <sl-icon name="grip-vertical"></sl-icon>
+          </div>
+        </div>
+
+        <div class="code-preview__source-group" id="${sourceGroupId}">
+          <div class="code-preview__source code-preview__source--html" ${reactCode ? 'data-flavor="html"' : ''}>
+            <pre><code class="language-html">${escapeHtml(code.textContent)}</code></pre>
+          </div>
+
+          ${
+            reactCode
+              ? `
+            <div class="code-preview__source code-preview__source--react" data-flavor="react">
+              <pre><code class="language-jsx">${escapeHtml(reactCode.textContent)}</code></pre>
+            </div>
+          `
+              : ''
+          }
+        </div>
+
+        <div class="code-preview__buttons">
+          <button
+            type="button"
+            class="code-preview__button code-preview__toggle"
+            aria-expanded="${isExpanded ? 'true' : 'false'}"
+            aria-controls="${sourceGroupId}"
+          >
+            Source
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </button>
+
+          ${reactCode ? ` ${htmlButton} ${reactButton} ` : ''}
+
+          ${noCodePen ? '' : codePenButton}
+        </div>
+      </div>
+    `;
+
+    pre.insertAdjacentHTML('afterend', codePreview);
+    pre.remove();
+
+    if (adjacentPre) {
+      adjacentPre.remove();
+    }
+  });
+
+  // Wrap code preview scripts in anonymous functions so they don't run in the global scope
+  doc.querySelectorAll('.code-preview__preview script').forEach(script => {
+    if (script.type === 'module') {
+      // Modules are already scoped
+      script.textContent = script.innerHTML;
+    } else {
+      // Wrap non-modules in an anonymous function so they don't run in the global scope
+      script.textContent = `(() => { ${script.innerHTML} })();`;
+    }
+  });
+
+  return doc;
+};

docs/_utilities/copy-code-buttons.cjs

@@ -0,0 +1,23 @@
+let codeBlockId = 0;
+
+/**
+ * Adds copy code buttons to code fields. The provided doc should be a document object provided by JSDOM. The same
+ * document will be returned with the appropriate DOM manipulations.
+ */
+module.exports = function (doc) {
+  doc.querySelectorAll('pre > code').forEach(code => {
+    const pre = code.closest('pre');
+    const button = doc.createElement('sl-copy-button');
+
+    if (!code.id) {
+      code.id = `code-block-${++codeBlockId}`;
+    }
+
+    button.classList.add('copy-code-button');
+    button.setAttribute('from', code.id);
+
+    pre.append(button);
+  });
+
+  return doc;
+};

docs/_utilities/external-links.cjs

@@ -0,0 +1,41 @@
+const { isExternalLink } = require('./strings.cjs');
+
+/**
+ * Transforms external links to make them safer and optionally add a target. The provided doc should be a document
+ * object provided by JSDOM. The same document will be returned with the appropriate DOM manipulations.
+ */
+module.exports = function (doc, options) {
+  options = {
+    className: 'external-link', // the class name to add to links
+    noopener: true, // sets rel="noopener"
+    noreferrer: true, // sets rel="noreferrer"
+    ignore: () => false, // callback function to filter links that should be ignored
+    within: 'body', // element that contains the target links
+    target: '', // sets the target attribute
+    ...options
+  };
+
+  const within = doc.querySelector(options.within);
+
+  if (within) {
+    within.querySelectorAll('a').forEach(link => {
+      if (isExternalLink(link) && !options.ignore(link)) {
+        link.classList.add(options.className);
+
+        const rel = [];
+        if (options.noopener) rel.push('noopener');
+        if (options.noreferrer) rel.push('noreferrer');
+
+        if (rel.length) {
+          link.setAttribute('rel', rel.join(' '));
+        }
+
+        if (options.target) {
+          link.setAttribute('target', options.target);
+        }
+      }
+    });
+  }
+
+  return doc;
+};

docs/_utilities/highlight-code.cjs

@@ -0,0 +1,63 @@
+const Prism = require('prismjs');
+const PrismLoader = require('prismjs/components/index.js');
+
+PrismLoader('diff');
+PrismLoader.silent = true;
+
+/** Highlights a code string. */
+function highlight(code, language) {
+  const alias = language.replace(/^diff-/, '');
+  const isDiff = /^diff-/i.test(language);
+
+  // Auto-load the target language
+  if (!Prism.languages[alias]) {
+    PrismLoader(alias);
+
+    if (!Prism.languages[alias]) {
+      throw new Error(`Unsupported language for code highlighting: "${language}"`);
+    }
+  }
+
+  // Register diff-* languages to use the diff grammar
+  if (isDiff) {
+    Prism.languages[language] = Prism.languages.diff;
+  }
+
+  return Prism.highlight(code, Prism.languages[language], language);
+}
+
+/**
+ * Highlights all code fields that have a language parameter. If the language has a colon in its name, the first chunk
+ * will be the language used and additional chunks will be applied as classes to the `<pre>`. For example, a code field
+ * tagged with "html:preview" will be rendered as `<pre class="language-html preview">`.
+ *
+ * The provided doc should be a document object provided by JSDOM. The same document will be returned with the
+ * appropriate DOM manipulations.
+ */
+module.exports = function (doc) {
+  doc.querySelectorAll('pre > code[class]').forEach(code => {
+    // Look for class="language-*" and split colons into separate classes
+    code.classList.forEach(className => {
+      if (className.startsWith('language-')) {
+        //
+        // We use certain suffixes to indicate code previews, expanded states, etc. The class might look something like
+        // this:
+        //
+        //  class="language-html:preview:expanded"
+        //
+        // The language will always come first, so we need to drop the "language-" prefix and everything after the first
+        // color to get the highlighter language.
+        //
+        const language = className.replace(/^language-/, '').split(':')[0];
+
+        try {
+          code.innerHTML = highlight(code.textContent ?? '', language);
+        } catch (err) {
+          // Language not found, skip it
+        }
+      }
+    });
+  });
+
+  return doc;
+};

docs/_utilities/markdown.cjs

@@ -0,0 +1,67 @@
+const MarkdownIt = require('markdown-it');
+const markdownItContainer = require('markdown-it-container');
+const markdownItIns = require('markdown-it-ins');
+const markdownItKbd = require('markdown-it-kbd');
+const markdownItMark = require('markdown-it-mark');
+const markdownItReplaceIt = require('markdown-it-replace-it');
+
+const markdown = MarkdownIt({
+  html: true,
+  xhtmlOut: false,
+  breaks: false,
+  langPrefix: 'language-',
+  linkify: false,
+  typographer: false
+});
+
+// Third-party plugins
+markdown.use(markdownItContainer);
+markdown.use(markdownItIns);
+markdown.use(markdownItKbd);
+markdown.use(markdownItMark);
+markdown.use(markdownItReplaceIt);
+
+// Callouts
+['tip', 'warning', 'danger'].forEach(type => {
+  markdown.use(markdownItContainer, type, {
+    render: function (tokens, idx) {
+      if (tokens[idx].nesting === 1) {
+        return `<div role="alert" class="callout callout--${type}">`;
+      }
+      return '</div>\n';
+    }
+  });
+});
+
+// Asides
+markdown.use(markdownItContainer, 'aside', {
+  render: function (tokens, idx) {
+    if (tokens[idx].nesting === 1) {
+      return `<aside>`;
+    }
+    return '</aside>\n';
+  }
+});
+
+// Details
+markdown.use(markdownItContainer, 'details', {
+  validate: params => params.trim().match(/^details\s+(.*)$/),
+  render: (tokens, idx) => {
+    const m = tokens[idx].info.trim().match(/^details\s+(.*)$/);
+    if (tokens[idx].nesting === 1) {
+      return `<details>\n<summary><span>${markdown.utils.escapeHtml(m[1])}</span></summary>\n`;
+    }
+    return '</details>\n';
+  }
+});
+
+// Replace [#1234] with a link to GitHub issues
+markdownItReplaceIt.replacements.push({
+  name: 'github-issues',
+  re: /\[#([0-9]+)\]/gs,
+  sub: '<a href="https://github.com/shoelace-style/shoelace/issues/$1">#$1</a>',
+  html: true,
+  default: true
+});
+
+module.exports = markdown;

docs/_utilities/prettier.cjs

@@ -0,0 +1,26 @@
+const { format } = require('prettier');
+
+/** Formats markup using prettier. */
+module.exports = function (content, options) {
+  options = {
+    arrowParens: 'avoid',
+    bracketSpacing: true,
+    htmlWhitespaceSensitivity: 'css',
+    insertPragma: false,
+    bracketSameLine: false,
+    jsxSingleQuote: false,
+    parser: 'html',
+    printWidth: 120,
+    proseWrap: 'preserve',
+    quoteProps: 'as-needed',
+    requirePragma: false,
+    semi: true,
+    singleQuote: true,
+    tabWidth: 2,
+    trailingComma: 'none',
+    useTabs: false,
+    ...options
+  };
+
+  return format(content, options);
+};

docs/_utilities/replacer.cjs

@@ -0,0 +1,19 @@
+/**
+ * @typedef {object} Replacement
+ * @property {string | RegExp} pattern
+ * @property {string} replacement
+ */
+
+/**
+ * @typedef {Array<Replacement>} Replacements
+ */
+
+/**
+ * @param {Document} content
+ * @param {Replacements} replacements
+ */
+module.exports = function (content, replacements) {
+  replacements.forEach(replacement => {
+    content.body.innerHTML = content.body.innerHTML.replaceAll(replacement.pattern, replacement.replacement);
+  });
+};

docs/_utilities/scrolling-tables.cjs

@@ -0,0 +1,21 @@
+/**
+ * Turns headings into clickable, deep linkable anchors. The provided doc should be a document object provided by JSDOM.
+ * The same document will be returned with the appropriate DOM manipulations.
+ */
+module.exports = function (doc, options) {
+  const tables = [...doc.querySelectorAll('table')];
+
+  options = {
+    className: 'table-scroll', // the class name to add to the table's container
+    ...options
+  };
+
+  tables.forEach(table => {
+    const div = doc.createElement('div');
+    div.classList.add(options.className);
+    table.insertAdjacentElement('beforebegin', div);
+    div.append(table);
+  });
+
+  return doc;
+};

docs/_utilities/strings.cjs

@@ -0,0 +1,16 @@
+const slugify = require('slugify');
+
+/** Creates a slug from an arbitrary string of text. */
+module.exports.createSlug = function (text) {
+  return slugify(String(text), {
+    remove: /[^\w|\s]/g,
+    lower: true
+  });
+};
+
+/** Determines whether or not a link is external. */
+module.exports.isExternalLink = function (link) {
+  // We use the "internal" hostname when initializing JSDOM so we know that those are local links
+  if (!link.hostname || link.hostname === 'internal') return false;
+  return true;
+};

docs/_utilities/table-of-contents.cjs

@@ -0,0 +1,42 @@
+/**
+ * Generates an in-page table of contents based on headings.
+ */
+module.exports = function (doc, options) {
+  options = {
+    levels: ['h2'], // headings to include (they must have an id)
+    container: 'nav', // the container to append links to
+    listItem: true, // if true, links will be wrapped in <li>
+    within: 'body', // the element containing the headings to summarize
+    ...options
+  };
+
+  const container = doc.querySelector(options.container);
+  const within = doc.querySelector(options.within);
+  const headingSelector = options.levels.map(h => `${h}[id]`).join(', ');
+
+  if (!container || !within) {
+    return doc;
+  }
+
+  within.querySelectorAll(headingSelector).forEach(heading => {
+    const listItem = doc.createElement('li');
+    const link = doc.createElement('a');
+    const level = heading.tagName.slice(1);
+
+    link.href = `#${heading.id}`;
+    link.textContent = heading.textContent;
+
+    if (options.listItem) {
+      // List item + link
+      listItem.setAttribute('data-level', level);
+      listItem.append(link);
+      container.append(listItem);
+    } else {
+      // Link only
+      link.setAttribute('data-level', level);
+      container.append(link);
+    }
+  });
+
+  return doc;
+};

docs/_utilities/typography.cjs

@@ -0,0 +1,23 @@
+const smartquotes = require('smartquotes');
+
+smartquotes.replacements.push([/---/g, '\u2014']); // em dash
+smartquotes.replacements.push([/--/g, '\u2013']); // en dash
+smartquotes.replacements.push([/\.\.\./g, '\u2026']); // ellipsis
+smartquotes.replacements.push([/\(c\)/gi, '\u00A9']); // copyright
+smartquotes.replacements.push([/\(r\)/gi, '\u00AE']); // registered trademark
+smartquotes.replacements.push([/\?!/g, '\u2048']); // ?!
+smartquotes.replacements.push([/!!/g, '\u203C']); // !!
+smartquotes.replacements.push([/\?\?/g, '\u2047']); // ??
+smartquotes.replacements.push([/([0-9]\s?)-(\s?[0-9])/g, '$1\u2013$2']); // number ranges use en dash
+
+/**
+ * Improves typography by adding smart quotes and similar corrections within the specified element(s).
+ *
+ * The provided doc should be a document object provided by JSDOM. The same document will be returned with the
+ * appropriate DOM manipulations.
+ */
+module.exports = function (doc, selector = 'body') {
+  const elements = [...doc.querySelectorAll(selector)];
+  elements.forEach(el => smartquotes.element(el));
+  return doc;
+};

docs/assets/examples/include.html

@@ -0,0 +1,19 @@
+<p style="margin-top: 0">
+  The content in this example was included from
+  <a href="/assets/examples/include.html" target="_blank">a separate file</a>. 🤯
+</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla urna porttitor rhoncus dolor purus
+  non enim. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Gravida in fermentum et sollicitudin.
+</p>
+<p>
+  Cursus sit amet dictum sit amet justo donec enim. Sed id semper risus in hendrerit gravida. Viverra accumsan in nisl
+  nisi scelerisque eu ultrices vitae. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Nec
+  ullamcorper sit amet risus nullam. Et egestas quis ipsum suspendisse ultrices gravida dictum. Lorem donec massa sapien
+  faucibus et molestie. A cras semper auctor neque vitae.
+</p>
+
+<script>
+  console.log('This will only execute if the `allow-scripts` prop is present');
+</script>

docs/assets/images/awesome.svg

@@ -0,0 +1,11 @@
+<svg width="733" xmlns="http://www.w3.org/2000/svg" height="733">
+  <circle cy="366.5" cx="366.5" r="366.5"/>
+  <circle cy="366.5" cx="366.5" r="336.5" fill="#fede58"/>
+  <path d="M325 665c-121-21-194-115-212-233v-8l-25-1-1-18h481c6 13 10 27 13 41 13 94-38 146-114 193-45 23-93 29-142 26z"/>
+  <path d="M372 647c52-6 98-28 138-62 28-25 46-56 51-87 4-20 1-57-5-70l-423-1c-2 56 39 118 74 157 31 34 72 54 116 63 11 2 38 2 49 0z" fill="#871945"/>
+  <path d="M76 342c-13-26-13-57-9-85 6-27 18-52 35-68 21-20 50-23 77-18 15 4 28 12 39 23 18 17 30 40 36 67 4 20 4 41 0 60l-6 21z"/>
+  <path d="M234 323c5-6 6-40 2-58-3-16-4-16-10-10-14 14-38 14-52 0-15-18-12-41 6-55 3-3 5-5 5-6-1-4-22-8-34-7-42 4-57.6 40-66.2 77-3 17-1 53 4 59H234z" fill="#fff"/>
+  <path d="M378 343c-2-3-6-20-7-29-5-28-1-57 11-83 15-30 41-52 72-60 29-7 57 0 82 15 26 17 45 49 50 82 2 12 2 33 0 45-1 10-5 26-8 30z"/>
+  <path d="M565 324c4-5 5-34 4-50-2-14-6-24-8-24-1 0-3 2-6 5-17 17-47 13-58-9-7-16-4-31 8-43 4-4 7-8 7-9 0 0-4-2-8-3-51-17-105 20-115 80-3 15 0 43 3 53z" fill="#fff"/>
+  <path d="M504 590s-46 40-105 53c-66 15-114-7-114-7s14-76 93-95c76-18 126 49 126 49z" fill="#f9bedd"/>
+</svg>

docs/assets/images/github.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub icon</title><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

docs/assets/images/gitpod.svg

@@ -0,0 +1,23 @@
+<svg width="160" height="45" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_d)">
+    <rect x="2" y="2" width="156" height="40" rx="16" fill="#F9F9F9"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M30.425 11.174c.604 1.114.233 2.53-.83 3.164l-6.986 4.166a.378.378 0 00-.18.325v6.748c0 .134.069.258.18.325l5.714 3.407c.11.066.244.066.354 0l5.714-3.407a.378.378 0 00.18-.325V21.29l-4.986 2.936c-1.067.628-2.416.231-3.015-.886-.6-1.118-.22-2.532.846-3.16l7.008-4.127c2.048-1.206 4.576.345 4.576 2.806v6.718c0 1.803-.924 3.467-2.42 4.36l-5.713 3.407a4.596 4.596 0 01-4.734 0l-5.714-3.408C18.924 29.044 18 27.38 18 25.576V18.83c0-1.803.924-3.467 2.42-4.36l6.985-4.165c1.063-.634 2.415-.245 3.02.87z" fill="url(#paint0_linear)"/>
+    <path fill="#F9F9F9" d="M47 12.5h95v-1H47z"/>
+    <path d="M52.538 27.752c2.744 0 4.844-1.876 4.844-5.152 0-3.108-2.1-5.152-4.844-5.152s-4.802 2.002-4.802 5.152c0 3.29 2.058 5.152 4.802 5.152zm0-1.554c-1.736 0-2.912-1.316-2.912-3.598 0-2.226 1.162-3.598 2.912-3.598s2.954 1.4 2.954 3.598c0 2.31-1.218 3.598-2.954 3.598zm7.89 4.158V27.22c0-.196-.013-.378-.055-.658.434.7 1.022 1.19 2.17 1.19 1.736 0 3.066-1.414 3.066-3.626 0-2.17-1.19-3.682-2.996-3.682-1.078 0-1.806.476-2.24 1.204.042-.28.056-.462.056-.672v-.308H58.72v9.688h1.708zm1.695-3.948c-1.036 0-1.764-.938-1.764-2.31 0-1.414.742-2.296 1.764-2.296 1.092 0 1.75.952 1.75 2.296 0 1.372-.7 2.31-1.75 2.31zm7.866 1.344c1.848 0 3.052-1.078 3.192-2.478h-1.736c-.112.714-.714 1.134-1.456 1.134-1.036 0-1.722-.826-1.736-1.904h4.97v-.378c0-2.226-1.204-3.682-3.29-3.682-1.988 0-3.43 1.47-3.43 3.626 0 2.366 1.442 3.682 3.486 3.682zm-1.75-4.48c.098-.896.756-1.554 1.68-1.554.924 0 1.526.63 1.554 1.554H68.24zm8.006 4.228v-4.004c0-.952.616-1.694 1.456-1.694.798 0 1.288.63 1.288 1.638v4.06h1.708v-4.312c0-1.68-.896-2.744-2.408-2.744-1.078 0-1.722.518-2.1 1.204.042-.266.056-.476.056-.672v-.308h-1.708V27.5h1.708zm8.911-7.868h1.792V17.84h-1.792v1.792zm.042 1.036V27.5h1.708v-6.832h-1.708zm5.097 6.832v-4.004c0-.952.616-1.694 1.456-1.694.798 0 1.288.63 1.288 1.638v4.06h1.708v-4.312c0-1.68-.896-2.744-2.408-2.744-1.078 0-1.722.518-2.1 1.204.042-.266.056-.476.056-.672v-.308h-1.708V27.5h1.708zm13.238.252c1.526 0 2.52-.658 2.982-1.54-.07.322-.098.644-.098.98v.308h1.68v-5.222h-4.34v1.554h2.66v.07c0 1.4-1.134 2.296-2.59 2.296-1.792 0-3.024-1.372-3.024-3.598s1.26-3.598 3.066-3.598c1.302 0 2.17.756 2.296 1.736h1.89c-.182-1.904-1.764-3.29-4.214-3.29-2.954 0-4.928 2.128-4.928 5.152 0 3.136 1.848 5.152 4.62 5.152zm6.063-8.12h1.792V17.84h-1.792v1.792zm.042 1.036V27.5h1.708v-6.832h-1.708zm6.413 6.958c.434 0 .84-.07 1.008-.126v-1.288c-.168.028-.35.042-.518.042-.728 0-1.008-.42-1.008-1.134v-3.094h1.68v-1.358h-1.68v-2.464h-1.708v2.464h-1.554v1.358h1.554v3.346c0 1.526.77 2.254 2.226 2.254zm3.961 2.73V27.22c0-.196-.014-.378-.056-.658.434.7 1.022 1.19 2.17 1.19 1.736 0 3.066-1.414 3.066-3.626 0-2.17-1.19-3.682-2.996-3.682-1.078 0-1.806.476-2.24 1.204.042-.28.056-.462.056-.672v-.308h-1.708v9.688h1.708zm1.694-3.948c-1.036 0-1.764-.938-1.764-2.31 0-1.414.742-2.296 1.764-2.296 1.092 0 1.75.952 1.75 2.296 0 1.372-.7 2.31-1.75 2.31zm7.88 1.344c2.058 0 3.514-1.372 3.514-3.64 0-2.24-1.456-3.668-3.514-3.668-2.044 0-3.5 1.428-3.5 3.668 0 2.268 1.442 3.64 3.5 3.64zm0-1.344c-1.064 0-1.764-.84-1.764-2.296 0-1.484.728-2.31 1.764-2.31 1.05 0 1.778.826 1.778 2.31 0 1.456-.714 2.296-1.778 2.296zm7.551 1.344c1.26 0 1.876-.686 2.142-1.19-.056.238-.056.42-.056.658v.28h1.708v-9.8h-1.708v3.276c0 .21 0 .42.056.672-.392-.658-1.05-1.204-2.114-1.204-1.596 0-3.15 1.218-3.15 3.668 0 2.408 1.316 3.64 3.122 3.64zm.406-1.344c-1.022 0-1.792-.896-1.792-2.31 0-1.358.77-2.296 1.792-2.296s1.778.896 1.778 2.296c0 1.372-.756 2.31-1.778 2.31z" fill="#12100C"/>
+  </g>
+  <defs>
+    <linearGradient id="paint0_linear" x1="33.806" y1="13.629" x2="22.389" y2="30.86" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFB45B"/>
+      <stop offset="1" stop-color="#FF8A00"/>
+    </linearGradient>
+    <filter id="filter0_d" x="0" y=".5" width="160" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy=".5"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>

docs/assets/images/logo.svg

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

docs/assets/images/twitter.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter icon</title><path fill="currentColor" d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>

docs/assets/images/undraw-taken.svg

@@ -0,0 +1,32 @@
+<svg width="673" height="739" viewBox="0 0 673 739" xmlns="http://www.w3.org/2000/svg">
+  <g fill-rule="nonzero" fill="none">
+    <path d="M467 149.805c-46.62-7.44-99.71-11.41-155-11.41-50.6 0-99.35 3.32-142.98 9.58.01-.67.02-1.34.05-2.01C171.475 65.082 237.996.903 318.914 1.398c80.917.494 146.649 65.48 148.066 146.387.01.68.02 1.35.02 2.02Z" fill="#0BA5E9"/>
+    <path d="M337.55 1.342a149.047 149.047 0 0 0-168.93 143.229c-.031.67-.04 1.34-.05 2.01 12.961-1.86 26.384-3.454 40.164-4.784 3.478-71.745 57.64-130.8 128.816-140.455Z" opacity=".1" fill="#FFF"/>
+    <path d="M532.18 161.625a600.121 600.121 0 0 0-65.2-13.84 943.364 943.364 0 0 0-108.74-10.45 1133.608 1133.608 0 0 0-83.01-.34 973.29 973.29 0 0 0-106.16 8.97 624.292 624.292 0 0 0-77.25 15.66C32.61 177.995 0 199.935 0 223.395s32.61 45.4 91.82 61.77c41.64 11.52 92.98 19.37 148.92 22.97 23.09 1.5 46.96 2.26 71.26 2.26 24.38 0 48.33-.77 71.49-2.27 50.91-3.29 98.01-10.1 137.43-20 .21-.06.41-.11.62-.16 2.66-.66 5.28-1.35 7.87-2.04.93-.26 1.85-.51 2.77-.76a.978.978 0 0 1 .16-.05c.88-.24 1.75-.49 2.62-.73 1.74-.5 3.46-.99 5.15-1.5.08-.02.15-.04.22-.06 1.47-.44 2.91-.88 4.34-1.32 1.17-.37 2.33-.73 3.48-1.1.84-.27 1.67-.54 2.49-.81.6-.2 1.19-.39 1.77-.59.79-.26 1.58-.53 2.36-.8.33-.11.66-.22.98-.34.75-.25 1.48-.51 2.21-.77.79-.28 1.58-.57 2.36-.85.65-.23 1.3-.47 1.94-.71.54-.21 1.07-.41 1.61-.61 1.47-.55 2.91-1.12 4.33-1.68.71-.29 1.42-.57 2.12-.86.69-.28 1.39-.57 2.07-.86 1.12-.47 2.22-.94 3.3-1.41.52-.24 1.05-.47 1.56-.69.39-.18.77-.35 1.16-.53.28-.12.56-.25.83-.38 1.01-.46 2.01-.93 2.99-1.4 3.76-1.8 7.27-3.64 10.53-5.52 20.45-11.71 31.24-24.7 31.24-38.2 0-23.46-32.61-45.4-91.82-61.77Zm-.54 121.62c-41.69 11.53-93.17 19.38-149.26 22.95-22.81 1.45-46.39 2.2-70.38 2.2-23.91 0-47.41-.74-70.15-2.19-56.18-3.56-107.74-11.41-149.49-22.96C34.09 267.125 2 245.875 2 223.395c0-1.986.252-3.965.74-5.89 5.1-20.28 36.47-39.26 89.62-53.96a623.806 623.806 0 0 1 76.66-15.57 976.027 976.027 0 0 1 106.8-9c11.92-.39 23.98-.583 36.18-.58 15.41 0 30.65.31 45.63.91a941.367 941.367 0 0 1 109.37 10.5 598.858 598.858 0 0 1 64.64 13.74c53.14 14.7 84.5 33.67 89.61 53.94.496 1.93.75 3.916.75 5.91 0 22.48-32.09 43.73-90.36 59.85Z" fill="#3F3D56"/>
+    <path d="M623.43 224.305c0 13.36-11.01 26-30.67 37.29-3.27 1.88-6.79 3.72-10.53 5.52-.98.47-1.98.94-2.99 1.4-.27.13-.55.26-.83.38-.39.18-.77.35-1.16.53-.51.22-1.04.45-1.56.69-1.08.47-2.18.94-3.3 1.41-.68.29-1.38.58-2.07.86-.7.29-1.41.57-2.12.86-1.42.56-2.86 1.13-4.33 1.68-.54.2-1.07.4-1.61.61-.64.24-1.29.48-1.94.71-.78.28-1.57.57-2.36.85-.73.26-1.46.52-2.21.77-.32.12-.65.23-.98.34-.78.27-1.57.54-2.36.8-.58.2-1.17.39-1.77.59-.82.27-1.65.54-2.49.81-1.15.37-2.31.73-3.48 1.1-1.43.44-2.87.88-4.34 1.32-.07.02-.14.04-.22.06-1.69.51-3.41 1-5.15 1.5-.87.24-1.74.49-2.62.73a.978.978 0 0 0-.16.05c-.92.25-1.84.5-2.77.76-2.58.68-5.21 1.37-7.87 2.04-.21.05-.41.1-.62.16-38.35 9.58-85.4 16.56-137.47 19.93-22.81 1.47-46.59 2.25-71.02 2.25-24.65 0-48.63-.79-71.62-2.29-137.24-8.95-239.38-43.03-239.38-83.71.01-2.475.388-4.936 1.12-7.3.06.17.12.33.19.5 14.27 37.48 115.54 67.77 246.94 75.16 20.13 1.14 40.98 1.73 62.32 1.73 21.43 0 42.36-.6 62.57-1.74 131.29-7.42 232.46-37.72 246.68-75.17.24-.6.45-1.2.63-1.8a25.304 25.304 0 0 1 1.55 8.62ZM91.67 213.54c-16.643 0-34.331-3.58-34.331-10.216 0-6.636 17.688-10.217 34.33-10.217 16.643 0 34.331 3.58 34.331 10.217 0 6.636-17.688 10.217-34.33 10.217Zm0-18.433c-19.054 0-32.331 4.33-32.331 8.217 0 3.886 13.277 8.217 32.33 8.217 19.053 0 32.331-4.33 32.331-8.217 0-3.886-13.278-8.217-32.33-8.217Z" fill="#3F3D56"/>
+    <path d="M162.67 260.54c-16.643 0-34.331-3.58-34.331-10.216 0-6.636 17.688-10.217 34.33-10.217 16.643 0 34.331 3.58 34.331 10.217 0 6.636-17.688 10.217-34.33 10.217Zm0-18.433c-19.054 0-32.331 4.33-32.331 8.217 0 3.886 13.277 8.217 32.33 8.217 19.053 0 32.331-4.33 32.331-8.217 0-3.886-13.278-8.217-32.33-8.217ZM531.67 213.54c-16.643 0-34.331-3.58-34.331-10.216 0-6.636 17.688-10.217 34.33-10.217 16.643 0 34.331 3.58 34.331 10.217 0 6.636-17.688 10.217-34.33 10.217Zm0-18.433c-19.054 0-32.331 4.33-32.331 8.217 0 3.886 13.277 8.217 32.33 8.217 19.053 0 32.331-4.33 32.331-8.217 0-3.886-13.278-8.217-32.33-8.217ZM460.67 260.54c-16.643 0-34.331-3.58-34.331-10.216 0-6.636 17.688-10.217 34.33-10.217 16.643 0 34.331 3.58 34.331 10.217 0 6.636-17.688 10.217-34.33 10.217Zm0-18.433c-19.054 0-32.331 4.33-32.331 8.217 0 3.886 13.277 8.217 32.33 8.217 19.053 0 32.331-4.33 32.331-8.217 0-3.886-13.278-8.217-32.33-8.217ZM311.67 282.54c-16.643 0-34.331-3.58-34.331-10.216 0-6.636 17.688-10.217 34.33-10.217 16.643 0 34.331 3.58 34.331 10.217 0 6.636-17.688 10.217-34.33 10.217Zm0-18.433c-19.054 0-32.331 4.33-32.331 8.217 0 3.886 13.277 8.217 32.33 8.217 19.053 0 32.331-4.33 32.331-8.217 0-3.886-13.278-8.217-32.33-8.217Z" fill="#3F3D56"/>
+    <circle fill="#2F2E41" cx="336.978" cy="450.705" r="42.012"/>
+    <path fill="#2F2E41" d="m300.555 488.547 20.447-10.24 5.715 11.413-20.447 10.24z"/>
+    <ellipse fill="#2F2E41" transform="rotate(-56.601 300.086 492.946)" cx="300.086" cy="492.946" rx="3.989" ry="10.636"/>
+    <path fill="#2F2E41" d="m347.239 489.72 5.715-11.412 20.447 10.24-5.715 11.412z"/>
+    <ellipse fill="#2F2E41" transform="rotate(-33.399 373.87 492.946)" cx="373.87" cy="492.946" rx="10.636" ry="3.989"/>
+    <circle fill="#FFF" cx="334.037" cy="440.429" r="14.359"/>
+    <ellipse fill="#3F3D56" transform="rotate(-45 334.135 434.282)" cx="334.135" cy="434.282" rx="4.766" ry="4.8"/>
+    <path d="M370.12 405c.632-15.553-12.773-28.727-29.941-29.425-17.168-.697-31.597 11.346-32.229 26.9-.632 15.553 11.302 19.087 28.47 19.785 17.167.697 33.068-1.706 33.7-17.26Z" fill="#0BA5E9"/>
+    <ellipse fill="#2F2E41" transform="rotate(-40.645 380.654 456.766)" cx="380.654" cy="456.766" rx="6.594" ry="21.006"/>
+    <ellipse fill="#2F2E41" transform="rotate(-49.355 293.42 456.766)" cx="293.419" cy="456.766" rx="21.006" ry="6.594"/>
+    <path d="M348.517 467.262a9.572 9.572 0 1 1-18.836 3.428l-.003-.018c-.942-5.202 3.08-7.043 8.282-7.985 5.203-.942 9.615-.628 10.557 4.575Z" fill="#FFF"/>
+    <path d="M266 495.395a2 2 0 0 1-2-2v-118a2 2 0 0 1 4 0v118a2 2 0 0 1-2 2ZM236 601.395a2 2 0 0 1-2-2v-86a2 2 0 0 1 4 0v86a2 2 0 0 1-2 2ZM313 530.395a2 2 0 0 1-2-2v-118a2 2 0 0 1 4 0v118a2 2 0 0 1-2 2ZM284 615.395a2 2 0 0 1-2-2v-48a2 2 0 0 1 4 0v48a2 2 0 0 1-2 2ZM325 369.395a2 2 0 0 1-2-2v-48a2 2 0 0 1 4 0v48a2 2 0 0 1-2 2ZM225 390.395a2 2 0 0 1-2-2v-48a2 2 0 0 1 4 0v48a2 2 0 0 1-2 2ZM399 395.395a2 2 0 0 1-2-2v-48a2 2 0 0 1 4 0v48a2 2 0 0 1-2 2ZM395 545.395a2 2 0 0 1-2-2v-58a2 2 0 0 1 4 0v58a2 2 0 0 1-2 2ZM355 596.395a2 2 0 0 1-2-2v-86a2 2 0 0 1 4 0v86a2 2 0 0 1-2 2ZM363 449.395a2 2 0 0 1-2-2v-118a2 2 0 0 1 4 0v118a2 2 0 0 1-2 2Z" fill="#CCC"/>
+    <ellipse fill="#2F2E41" transform="rotate(-39.938 594.37 683.981)" cx="594.369" cy="683.981" rx="6.76" ry="21.534"/>
+    <circle fill="#2F2E41" transform="rotate(-71.565 548.562 676.503)" cx="548.562" cy="676.503" r="43.067"/>
+    <path fill="#2F2E41" d="M553.707 710.303h13.084v23.442h-13.084zM527.54 710.303h13.084v23.442H527.54z"/>
+    <ellipse fill="#2F2E41" cx="555.888" cy="734.017" rx="10.903" ry="4.089"/>
+    <ellipse fill="#2F2E41" cx="529.72" cy="733.472" rx="10.903" ry="4.089"/>
+    <path d="M535.04 622.366c3.845-15.487 20.82-24.6 37.914-20.356 17.094 4.245 27.834 20.24 23.989 35.727-3.846 15.487-16.604 15.537-33.698 11.293-17.094-4.245-32.051-11.177-28.206-26.664Z" fill="#0BA5E9"/>
+    <ellipse fill="#2F2E41" transform="rotate(-64.626 500.054 656.52)" cx="500.054" cy="656.52" rx="6.76" ry="21.534"/>
+    <circle fill="#FFF" cx="542.124" cy="667.416" r="14.359"/>
+    <circle fill="#3F3D56" cx="536.222" cy="662.269" r="4.786"/>
+    <circle fill="#FFF" cx="542" cy="697.395" r="6"/>
+    <path d="M671.531 738.395h-236a1 1 0 1 1 0-2h236a1 1 0 0 1 0 2Z" fill="#3F3D56"/>
+  </g>
+</svg>

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

@@ -1,108 +0,0 @@
-.code-block {
-  position: relative;
-  border-radius: 3px;
-  background: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 97%);
-  margin-bottom: 1.5rem;
-}
-
-.code-block__preview {
-  position: relative;
-  border: solid 1px var(--sl-color-gray-90);
-  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;
-}
-
-.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-50);
-  background-color: white;
-  border-left: solid 1px var(--sl-color-gray-90);
-  border-top-right-radius: 3px;
-  cursor: ew-resize;
-  transition: 250ms background-color;
-}
-
-@media screen and (max-width: 600px) {
-  .code-block__preview {
-    padding-right: 1.5rem;
-  }
-
-  .code-block__resizer {
-    display: none;
-  }
-}
-
-.code-block__source {
-  border: solid 1px var(--sl-color-gray-90);
-  border-bottom: none;
-  border-radius: 0 !important;
-  margin: 0 !important;
-  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-90);
-  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-40);
-  cursor: pointer;
-  transition: 250ms background-color;
-  -webkit-appearance: none;
-}
-
-.code-block__toggle:hover,
-.code-block__toggle:active {
-  border-color: var(--sl-color-primary-80);
-  background-color: var(--sl-color-primary-95);
-  color: var(--sl-color-primary-50);
-}
-
-.code-block__toggle:focus {
-  outline: none;
-  border-color: var(--sl-color-primary-50);
-  background-color: var(--sl-color-primary-95);
-  color: var(--sl-color-primary-50);
-  box-shadow: var(--sl-focus-ring-box-shadow);
-}
-
-.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);
-}

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

@@ -1,133 +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');
-    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">
-              <sl-icon name="grip-horizontal"></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-labeledby', 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(resizeElement => {
-        let startX;
-        let startY;
-        let startWidth;
-        let startHeight;
-
-        const initDrag = event => {
-          startX = event.clientX;
-          startY = event.clientY;
-          startWidth = parseInt(document.defaultView.getComputedStyle(resizeElement).width, 10);
-          startHeight = parseInt(document.defaultView.getComputedStyle(resizeElement).height, 10);
-          document.documentElement.addEventListener('mousemove', doDrag, false);
-          document.documentElement.addEventListener('mouseup', stopDrag, false);
-          event.preventDefault();
-        };
-
-        const doDrag = event => {
-          resizeElement.style.width = startWidth + event.clientX - startX + 'px';
-        };
-
-        const stopDrag = event => {
-          document.documentElement.removeEventListener('mousemove', doDrag, false);
-          document.documentElement.removeEventListener('mouseup', stopDrag, false);
-        };
-
-        resizeElement.querySelector('.code-block__resizer').addEventListener('mousedown', initDrag);
-      }, 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,379 +0,0 @@
-(() => {
-  let metadataStore;
-
-  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 => `
-        <tr>
-          <td>
-            <code>${escapeHtml(prop.name)}</code>
-            ${prop.name !== prop.attr && prop.attr !== undefined ? (`
-              <br>
-              <small>
-                <sl-tooltip content="Use the kebab-case variation in your HTML">
-                  <code class="attribute-tooltip">${escapeHtml(prop.attr)}</code>
-                </sl-tooltip>
-              </small>`
-            ) : ''}
-          </td>
-          <td>${escapeHtml(prop.docs)}</td>
-          <td><code style="white-space: normal;">${escapeHtml(prop.type)}</code></td>
-          <td><code style="white-space: normal;">${escapeHtml(prop.default)}</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>Type</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${events
-          .map(
-            event => `
-        <tr>
-          <td><code>${escapeHtml(event.event)}</code></td>
-          <td>${escapeHtml(event.docs)}</td>
-          <td><code>CustomEvent&lt;${escapeHtml(event.detail)}&gt;</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>Returns</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${methods
-          .map(
-            method => `
-        <tr>
-          <td><code>${escapeHtml(method.name)}</code></td>
-          <td>${escapeHtml(method.docs)}</td>
-          <td><code>${escapeHtml(method.returns.type)}</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.docs)}</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.docs)}</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.docs)}</td>
-        </tr>
-        `
-          )
-          .join('')}
-      </tbody>
-    `;
-
-    return table.outerHTML;
-  }
-
-  function createDependentsList(dependents) {
-    const ul = document.createElement('ul');
-    ul.innerHTML = `
-        ${dependents
-          .map(
-            dependent => `
-              <li><code>${escapeHtml(dependent)}</code></li>
-            `
-          )
-          .join('')}
-    `;
-
-    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));
-    });
-  }
-
-  function getDocsTagsObject(docsTags) {
-    let tags = {};
-
-    for (const tag of docsTags) {
-      tags[tag.name] = tag.text;
-    }
-
-    return tags;
-  }
-
-  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 src="/assets/images/github.svg"></sl-icon> Star
-          </a>
-          <a class="repo-button repo-button--small repo-button--twitter" href="https://twitter.com/shoelace_style" rel="noopener" target="_blank">
-            <sl-icon src="/assets/images/twitter.svg"></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 data = metadata.components.filter(data => data.tag === tag)[0];
-        let result = '';
-
-        if (!data) {
-          console.error('Component not found in metadata: ' + tag);
-          next(content);
-        }
-
-        const tags = getDocsTagsObject(data.docsTags);
-
-        if (tags && tags.status) {
-          let badgeType = 'info';
-          if (tags.status === 'stable') badgeType = 'primary';
-          if (tags.status === 'experimental') badgeType = 'warning';
-          if (tags.status === 'planned') badgeType = 'info';
-          if (tags.status === 'deprecated') badgeType = 'danger';
-
-          result += `
-            <div class="component-header">
-              <div class="component-header__tag">
-                <code>&lt;${tag}&gt;</code>
-              </div>
-
-              <div class="component-header__info">
-                <sl-badge type="info" pill>
-                  Since ${tags.since || '?'}
-                </sl-badge>
-
-                <sl-badge type="${badgeType}" pill style="text-transform: capitalize;">
-                  ${tags.status}
-                </sl-badge>
-              </div>
-            </div>
-          `;
-        }
-
-        return result.replace(/^ +| +$/gm, '');
-      });
-
-      // Handle [component-metadata] tags
-      content = content.replace(/\[component-metadata:([a-z-]+)\]/g, (match, tag) => {
-        const data = metadata.components.filter(data => data.tag === tag)[0];
-        let result = '';
-
-        if (!data) {
-          console.error('Component not found in metadata: ' + tag);
-          next(content);
-        }
-
-        if (data.props.length) {
-          result += `
-            ## Properties
-            ${createPropsTable(data.props)}
-          `;
-        }
-
-        if (data.events.length) {
-          result += `
-            ## Events
-            ${createEventsTable(data.events)}
-          `;
-        }
-
-        if (data.methods.length) {
-          result += `
-            ## Methods
-            ${createMethodsTable(data.methods)}
-          `;
-        }
-
-        if (data.slots.length) {
-          result += `
-            ## Slots
-            ${createSlotsTable(data.slots)}
-          `;
-        }
-
-        if (data.styles.length) {
-          result += `
-            ## CSS Custom Properties
-            ${createCustomPropertiesTable(data.styles)}
-          `;
-        }
-
-        if (data.parts.length) {
-          result += `
-            ## CSS Parts
-            ${createPartsTable(data.parts)}
-          `;
-        }
-
-        if (data.dependents.length) {
-          result += `
-            ## Dependents
-
-            The following components make use of this component.
-
-            ${createDependentsList(data.dependents)}
-          `;
-        }
-
-        // Strip whitespace so markdown doesn't process things as code blocks
-        return result.replace(/^ +| +$/gm, '');
-      });
-
-      next(content);
-    });
-  });
-})();

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/scripts/code-previews.js

@@ -0,0 +1,249 @@
+(() => {
+  function convertModuleLinks(html) {
+    html = html
+      .replace(/@shoelace-style\/shoelace/g, `https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}`)
+      .replace(/from 'react'/g, `from 'https://esm.sh/react@${reactVersion}'`)
+      .replace(/from "react"/g, `from "https://esm.sh/react@${reactVersion}"`);
+
+    return html;
+  }
+
+  function getAdjacentExample(name, pre) {
+    let currentPre = pre.nextElementSibling;
+
+    while (currentPre?.tagName.toLowerCase() === 'pre') {
+      if (currentPre?.getAttribute('data-lang').split(' ').includes(name)) {
+        return currentPre;
+      }
+
+      currentPre = currentPre.nextElementSibling;
+    }
+
+    return null;
+  }
+
+  function runScript(script) {
+    const newScript = document.createElement('script');
+
+    if (script.type === 'module') {
+      newScript.type = 'module';
+      newScript.textContent = script.innerHTML;
+    } else {
+      newScript.appendChild(document.createTextNode(`(() => { ${script.innerHTML} })();`));
+    }
+
+    script.parentNode.replaceChild(newScript, script);
+  }
+
+  function getFlavor() {
+    return sessionStorage.getItem('flavor') || 'html';
+  }
+
+  function setFlavor(newFlavor) {
+    flavor = ['html', 'react'].includes(newFlavor) ? newFlavor : 'html';
+    sessionStorage.setItem('flavor', flavor);
+
+    // Set the flavor class on the body
+    document.documentElement.classList.toggle('flavor-html', flavor === 'html');
+    document.documentElement.classList.toggle('flavor-react', flavor === 'react');
+  }
+
+  function syncFlavor() {
+    setFlavor(getFlavor());
+
+    document.querySelectorAll('.code-preview__button--html').forEach(preview => {
+      if (flavor === 'html') {
+        preview.classList.add('code-preview__button--selected');
+      }
+    });
+
+    document.querySelectorAll('.code-preview__button--react').forEach(preview => {
+      if (flavor === 'react') {
+        preview.classList.add('code-preview__button--selected');
+      }
+    });
+  }
+
+  const shoelaceVersion = document.documentElement.getAttribute('data-shoelace-version');
+  const reactVersion = '18.2.0';
+  const cdndir = 'cdn';
+  const npmdir = 'dist';
+  let flavor = getFlavor();
+  let count = 1;
+
+  // We need the version to open
+  if (!shoelaceVersion) {
+    throw new Error('The data-shoelace-version attribute is missing from <html>.');
+  }
+
+  // Sync flavor UI on page load
+  syncFlavor();
+
+  //
+  // Resizing previews
+  //
+  document.addEventListener('mousedown', handleResizerDrag);
+  document.addEventListener('touchstart', handleResizerDrag, { passive: true });
+
+  function handleResizerDrag(event) {
+    const resizer = event.target.closest('.code-preview__resizer');
+    const preview = event.target.closest('.code-preview__preview');
+
+    if (!resizer || !preview) return;
+
+    let startX = event.changedTouches ? event.changedTouches[0].pageX : event.clientX;
+    let startWidth = parseInt(document.defaultView.getComputedStyle(preview).width, 10);
+
+    event.preventDefault();
+    preview.classList.add('code-preview__preview--dragging');
+    document.documentElement.addEventListener('mousemove', dragMove);
+    document.documentElement.addEventListener('touchmove', dragMove);
+    document.documentElement.addEventListener('mouseup', dragStop);
+    document.documentElement.addEventListener('touchend', dragStop);
+
+    function dragMove(event) {
+      const width = startWidth + (event.changedTouches ? event.changedTouches[0].pageX : event.pageX) - startX;
+      preview.style.width = `${width}px`;
+    }
+
+    function dragStop() {
+      preview.classList.remove('code-preview__preview--dragging');
+      document.documentElement.removeEventListener('mousemove', dragMove);
+      document.documentElement.removeEventListener('touchmove', dragMove);
+      document.documentElement.removeEventListener('mouseup', dragStop);
+      document.documentElement.removeEventListener('touchend', dragStop);
+    }
+  }
+
+  //
+  // Toggle source mode
+  //
+  document.addEventListener('click', event => {
+    const button = event.target.closest('.code-preview__button');
+    const codeBlock = button?.closest('.code-preview');
+
+    if (button?.classList.contains('code-preview__button--html')) {
+      // Show HTML
+      setFlavor('html');
+      toggleSource(codeBlock, true);
+    } else if (button?.classList.contains('code-preview__button--react')) {
+      // Show React
+      setFlavor('react');
+      toggleSource(codeBlock, true);
+    } else if (button?.classList.contains('code-preview__toggle')) {
+      // Toggle source
+      toggleSource(codeBlock);
+    } else {
+      return;
+    }
+
+    // Update flavor buttons
+    [...document.querySelectorAll('.code-preview')].forEach(cb => {
+      cb.querySelector('.code-preview__button--html')?.classList.toggle(
+        'code-preview__button--selected',
+        flavor === 'html'
+      );
+      cb.querySelector('.code-preview__button--react')?.classList.toggle(
+        'code-preview__button--selected',
+        flavor === 'react'
+      );
+    });
+  });
+
+  function toggleSource(codeBlock, force) {
+    codeBlock.classList.toggle('code-preview--expanded', force);
+    event.target.setAttribute('aria-expanded', codeBlock.classList.contains('code-preview--expanded'));
+  }
+
+  //
+  // Open in CodePen
+  //
+  document.addEventListener('click', event => {
+    const button = event.target.closest('button');
+
+    if (button?.classList.contains('code-preview__button--codepen')) {
+      const codeBlock = button.closest('.code-preview');
+      const htmlExample = codeBlock.querySelector('.code-preview__source--html > pre > code')?.textContent;
+      const reactExample = codeBlock.querySelector('.code-preview__source--react > pre > code')?.textContent;
+      const isReact = flavor === 'react' && typeof reactExample === 'string';
+      const theme = document.documentElement.classList.contains('sl-theme-dark') ? 'dark' : 'light';
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const isDark = theme === 'dark' || (theme === 'auto' && prefersDark);
+      const editors = isReact ? '0010' : '1000';
+      let htmlTemplate = '';
+      let jsTemplate = '';
+      let cssTemplate = '';
+
+      const form = document.createElement('form');
+      form.action = 'https://codepen.io/pen/define';
+      form.method = 'POST';
+      form.target = '_blank';
+
+      // HTML templates
+      if (!isReact) {
+        htmlTemplate =
+          `<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/shoelace.js"></script>\n` +
+          `\n${htmlExample}`;
+        jsTemplate = '';
+      }
+
+      // React templates
+      if (isReact) {
+        htmlTemplate = '<div id="root"></div>';
+        jsTemplate =
+          `import React from 'https://esm.sh/react@${reactVersion}';\n` +
+          `import ReactDOM from 'https://esm.sh/react-dom@${reactVersion}';\n` +
+          `import { setBasePath } from 'https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/utilities/base-path';\n` +
+          `\n` +
+          `// Set the base path for Shoelace assets\n` +
+          `setBasePath('https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${npmdir}/')\n` +
+          `\n${convertModuleLinks(reactExample)}\n` +
+          `\n` +
+          `ReactDOM.render(<App />, document.getElementById('root'));`;
+      }
+
+      // CSS templates
+      cssTemplate =
+        `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/themes/${
+          isDark ? 'dark' : 'light'
+        }.css';\n` +
+        '\n' +
+        'body {\n' +
+        '  font: 16px sans-serif;\n' +
+        '  background-color: var(--sl-color-neutral-0);\n' +
+        '  color: var(--sl-color-neutral-900);\n' +
+        '  padding: 1rem;\n' +
+        '}';
+
+      // Docs: https://blog.codepen.io/documentation/prefill/
+      const data = {
+        title: '',
+        description: '',
+        tags: ['shoelace', 'web components'],
+        editors,
+        head: `<meta name="viewport" content="width=device-width">`,
+        html_classes: `sl-theme-${isDark ? 'dark' : 'light'}`,
+        css_external: ``,
+        js_external: ``,
+        js_module: true,
+        js_pre_processor: isReact ? 'babel' : 'none',
+        html: htmlTemplate,
+        css: cssTemplate,
+        js: jsTemplate
+      };
+
+      const input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = 'data';
+      input.value = JSON.stringify(data);
+      form.append(input);
+
+      document.documentElement.append(form);
+      form.submit();
+      form.remove();
+    }
+  });
+
+  // Set the initial flavor
+  window.addEventListener('turbo:load', syncFlavor);
+})();

docs/assets/scripts/docs.js

@@ -0,0 +1,272 @@
+//
+// Sidebar
+//
+// When the sidebar is hidden, we apply the inert attribute to prevent focus from reaching it. Due to the many states
+// the sidebar can have (e.g. static, hidden, expanded), we test for visibility by checking to see if it's placed
+// offscreen or not. Then, on resize/transition we make sure to update the attribute accordingly.
+//
+(() => {
+  function getSidebar() {
+    return document.getElementById('sidebar');
+  }
+
+  function isSidebarOpen() {
+    return document.documentElement.classList.contains('sidebar-open');
+  }
+
+  function isSidebarVisible() {
+    return getSidebar().getBoundingClientRect().x >= 0;
+  }
+
+  function toggleSidebar(force) {
+    const isOpen = typeof force === 'boolean' ? force : !isSidebarOpen();
+    return document.documentElement.classList.toggle('sidebar-open', isOpen);
+  }
+
+  function updateInert() {
+    getSidebar().inert = !isSidebarVisible();
+  }
+
+  // Toggle the menu
+  document.addEventListener('click', event => {
+    const menuToggle = event.target.closest('#menu-toggle');
+    if (!menuToggle) return;
+    toggleSidebar();
+  });
+
+  // Update the sidebar's inert state when the window resizes and when the sidebar transitions
+  window.addEventListener('resize', () => toggleSidebar(false));
+
+  document.addEventListener('transitionend', event => {
+    const sidebar = event.target.closest('#sidebar');
+    if (!sidebar) return;
+    updateInert();
+  });
+
+  // Close when a menu item is selected on mobile
+  document.addEventListener('click', event => {
+    const sidebar = event.target.closest('#sidebar');
+    const link = event.target.closest('a');
+    if (!sidebar || !link) return;
+
+    if (isSidebarOpen()) {
+      toggleSidebar();
+    }
+  });
+
+  // Close when open and escape is pressed
+  document.addEventListener('keydown', event => {
+    if (event.key === 'Escape' && isSidebarOpen()) {
+      event.stopImmediatePropagation();
+      toggleSidebar();
+    }
+  });
+
+  // Close when clicking outside of the sidebar
+  document.addEventListener('mousedown', event => {
+    if (isSidebarOpen() & !event.target?.closest('#sidebar, #menu-toggle')) {
+      event.stopImmediatePropagation();
+      toggleSidebar();
+    }
+  });
+
+  updateInert();
+})();
+
+//
+// Theme selector
+//
+(() => {
+  function getTheme() {
+    return localStorage.getItem('theme') || 'auto';
+  }
+
+  function isDark() {
+    if (theme === 'auto') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    return theme === 'dark';
+  }
+
+  function setTheme(newTheme) {
+    theme = newTheme;
+    localStorage.setItem('theme', theme);
+
+    // Update the UI
+    updateSelection();
+
+    // Toggle the dark mode class
+    document.documentElement.classList.toggle('sl-theme-dark', isDark());
+  }
+
+  function updateSelection() {
+    const menu = document.querySelector('#theme-selector sl-menu');
+    if (!menu) return;
+    [...menu.querySelectorAll('sl-menu-item')].map(item => (item.checked = item.getAttribute('value') === theme));
+  }
+
+  let theme = getTheme();
+
+  // Selection is not preserved when changing page, so update when opening dropdown
+  document.addEventListener('sl-show', event => {
+    const themeSelector = event.target.closest('#theme-selector');
+    if (!themeSelector) return;
+    updateSelection();
+  });
+
+  // Listen for selections
+  document.addEventListener('sl-select', event => {
+    const menu = event.target.closest('#theme-selector sl-menu');
+    if (!menu) return;
+    setTheme(event.detail.item.value);
+  });
+
+  // Update the theme when the preference changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setTheme(theme));
+
+  // Toggle with backslash
+  document.addEventListener('keydown', event => {
+    if (
+      event.key === '\\' &&
+      !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
+    ) {
+      event.preventDefault();
+      setTheme(isDark() ? 'light' : 'dark');
+    }
+  });
+
+  // Set the initial theme and sync the UI
+  setTheme(theme);
+})();
+
+//
+// Open details when printing
+//
+(() => {
+  const detailsOpenOnPrint = new Set();
+
+  window.addEventListener('beforeprint', () => {
+    detailsOpenOnPrint.clear();
+    document.querySelectorAll('details').forEach(details => {
+      if (details.open) {
+        detailsOpenOnPrint.add(details);
+      }
+      details.open = true;
+    });
+  });
+
+  window.addEventListener('afterprint', () => {
+    document.querySelectorAll('details').forEach(details => {
+      details.open = detailsOpenOnPrint.has(details);
+    });
+    detailsOpenOnPrint.clear();
+  });
+})();
+
+//
+// Smooth links
+//
+(() => {
+  document.addEventListener('click', event => {
+    const link = event.target.closest('a');
+    const id = (link?.hash ?? '').substr(1);
+    const isFragment = link?.hasAttribute('href') && link?.getAttribute('href').startsWith('#');
+
+    if (!link || !isFragment || link.getAttribute('data-smooth-link') === 'false') {
+      return;
+    }
+
+    // Scroll to the top
+    if (link.hash === '') {
+      event.preventDefault();
+      window.scroll({ top: 0, behavior: 'smooth' });
+      history.pushState(undefined, undefined, location.pathname);
+    }
+
+    // Scroll to an id
+    if (id) {
+      const target = document.getElementById(id);
+
+      if (target) {
+        event.preventDefault();
+        window.scroll({ top: target.offsetTop, behavior: 'smooth' });
+        history.pushState(undefined, undefined, `#${id}`);
+      }
+    }
+  });
+})();
+
+//
+// Table of Contents scrollspy
+//
+(() => {
+  // This will be stale if its not a function.
+  const getLinks = () => [...document.querySelectorAll('.content__toc a')];
+  const linkTargets = new WeakMap();
+  const visibleTargets = new WeakSet();
+  const observer = new IntersectionObserver(handleIntersect, { rootMargin: '0px 0px' });
+  let debounce;
+
+  function handleIntersect(entries) {
+    entries.forEach(entry => {
+      // Remember which targets are visible
+      if (entry.isIntersecting) {
+        visibleTargets.add(entry.target);
+      } else {
+        visibleTargets.delete(entry.target);
+      }
+    });
+
+    updateActiveLinks();
+  }
+
+  function updateActiveLinks() {
+    const links = getLinks();
+    // Find the first visible target and activate the respective link
+    links.find(link => {
+      const target = linkTargets.get(link);
+
+      if (target && visibleTargets.has(target)) {
+        links.forEach(el => el.classList.toggle('active', el === link));
+        return true;
+      }
+
+      return false;
+    });
+  }
+
+  // Observe link targets
+  function observeLinks() {
+    getLinks().forEach(link => {
+      const hash = link.hash.slice(1);
+      const target = hash ? document.querySelector(`.content__body #${hash}`) : null;
+
+      if (target) {
+        linkTargets.set(link, target);
+        observer.observe(target);
+      }
+    });
+  }
+
+  observeLinks();
+
+  document.addEventListener('turbo:load', updateActiveLinks);
+  document.addEventListener('turbo:load', observeLinks);
+})();
+
+//
+// Show custom versions in the sidebar
+//
+(() => {
+  function updateVersion() {
+    const el = document.querySelector('.sidebar-version');
+    if (!el) return;
+
+    if (location.hostname === 'next.shoelace.style') el.textContent = 'Next';
+    if (location.hostname === 'localhost') el.textContent = 'Development';
+  }
+
+  updateVersion();
+
+  document.addEventListener('turbo:load', updateVersion);
+})();

docs/assets/scripts/search.js

@@ -0,0 +1,376 @@
+(() => {
+  // Append the search dialog to the body
+  const siteSearch = document.createElement('div');
+  const scrollbarWidth = Math.abs(window.innerWidth - document.documentElement.clientWidth);
+
+  siteSearch.classList.add('search');
+  siteSearch.innerHTML = `
+    <div class="search__overlay"></div>
+    <dialog id="search-dialog" class="search__dialog">
+      <div class="search__content">
+        <div class="search__header">
+          <div id="search-combobox" class="search__input-wrapper">
+            <sl-icon name="search"></sl-icon>
+            <input
+              id="search-input"
+              class="search__input"
+              type="search"
+              placeholder="Search"
+              autocomplete="off"
+              autocorrect="off"
+              autocapitalize="off"
+              enterkeyhint="go"
+              spellcheck="false"
+              maxlength="100"
+              role="combobox"
+              aria-autocomplete="list"
+              aria-expanded="true"
+              aria-controls="search-listbox"
+              aria-haspopup="listbox"
+              aria-activedescendant
+            >
+            <button type="button" class="search__clear-button" aria-label="Clear entry" tabindex="-1" hidden>
+              <sl-icon name="x-circle-fill"></sl-icon>
+            </button>
+          </div>
+        </div>
+        <div class="search__body">
+          <ul
+            id="search-listbox"
+            class="search__results"
+            role="listbox"
+            aria-label="Search results"
+          ></ul>
+          <div class="search__empty">No matching pages</div>
+        </div>
+        <footer class="search__footer">
+          <small><kbd>↑</kbd> <kbd>↓</kbd> Navigate</small>
+          <small><kbd>↲</kbd> Select</small>
+          <small><kbd>Esc</kbd> Close</small>
+        </footer>
+      </div>
+    </dialog>
+  `;
+
+  const overlay = siteSearch.querySelector('.search__overlay');
+  const dialog = siteSearch.querySelector('.search__dialog');
+  const input = siteSearch.querySelector('.search__input');
+  const clearButton = siteSearch.querySelector('.search__clear-button');
+  const results = siteSearch.querySelector('.search__results');
+  const version = document.documentElement.getAttribute('data-shoelace-version');
+  const key = `search_${version}`;
+  const searchDebounce = 50;
+  const animationDuration = 150;
+  let isShowing = false;
+  let searchTimeout;
+  let searchIndex;
+  let map;
+
+  const loadSearchIndex = new Promise(resolve => {
+    const cache = localStorage.getItem(key);
+    const wait = 'requestIdleCallback' in window ? requestIdleCallback : requestAnimationFrame;
+
+    // Cleanup older search indices (everything before this version)
+    try {
+      const items = { ...localStorage };
+
+      Object.keys(items).forEach(k => {
+        if (key > k) {
+          localStorage.removeItem(k);
+        }
+      });
+    } catch {
+      /* do nothing */
+    }
+
+    // Look for a cached index
+    try {
+      if (cache) {
+        const data = JSON.parse(cache);
+
+        searchIndex = window.lunr.Index.load(data.searchIndex);
+        map = data.map;
+
+        return resolve();
+      }
+    } catch {
+      /* do nothing */
+    }
+
+    // Wait until idle to fetch the index
+    wait(() => {
+      fetch('/assets/search.json')
+        .then(res => res.json())
+        .then(data => {
+          if (!window.lunr) {
+            console.error('The Lunr search client has not yet been loaded.');
+          }
+
+          searchIndex = window.lunr.Index.load(data.searchIndex);
+          map = data.map;
+
+          // Cache the search index for this version
+          if (version) {
+            try {
+              localStorage.setItem(key, JSON.stringify(data));
+            } catch (err) {
+              console.warn(`Unable to cache the search index: ${err}`);
+            }
+          }
+
+          resolve();
+        });
+    });
+  });
+
+  async function show() {
+    isShowing = true;
+    document.body.append(siteSearch);
+    document.body.classList.add('search-visible');
+    document.body.style.setProperty('--docs-search-scroll-lock-size', `${scrollbarWidth}px`);
+    clearButton.hidden = true;
+    requestAnimationFrame(() => input.focus());
+    updateResults();
+
+    dialog.showModal();
+
+    await Promise.all([
+      dialog.animate(
+        [
+          { opacity: 0, transform: 'scale(.9)', transformOrigin: 'top' },
+          { opacity: 1, transform: 'scale(1)', transformOrigin: 'top' }
+        ],
+        { duration: animationDuration }
+      ).finished,
+      overlay.animate([{ opacity: 0 }, { opacity: 1 }], { duration: animationDuration }).finished
+    ]);
+
+    dialog.addEventListener('mousedown', handleMouseDown);
+    dialog.addEventListener('keydown', handleKeyDown);
+  }
+
+  async function hide() {
+    isShowing = false;
+
+    await Promise.all([
+      dialog.animate(
+        [
+          { opacity: 1, transform: 'scale(1)', transformOrigin: 'top' },
+          { opacity: 0, transform: 'scale(.9)', transformOrigin: 'top' }
+        ],
+        { duration: animationDuration }
+      ).finished,
+      overlay.animate([{ opacity: 1 }, { opacity: 0 }], { duration: animationDuration }).finished
+    ]);
+
+    dialog.close();
+
+    input.blur(); // otherwise Safari will scroll to the bottom of the page on close
+    input.value = '';
+    document.body.classList.remove('search-visible');
+    document.body.style.removeProperty('--docs-search-scroll-lock-size');
+    siteSearch.remove();
+    updateResults();
+
+    dialog.removeEventListener('mousedown', handleMouseDown);
+    dialog.removeEventListener('keydown', handleKeyDown);
+  }
+
+  function handleInput() {
+    clearButton.hidden = input.value === '';
+
+    // Debounce search queries
+    clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => updateResults(input.value), searchDebounce);
+  }
+
+  function handleClear() {
+    clearButton.hidden = true;
+    input.value = '';
+    input.focus();
+    updateResults();
+  }
+
+  function handleMouseDown(event) {
+    if (!event.target.closest('.search__content')) {
+      hide();
+    }
+  }
+
+  function handleKeyDown(event) {
+    // Close when pressing escape
+    if (event.key === 'Escape') {
+      event.preventDefault(); // prevent <dialog> from closing immediately so it can animate
+      event.stopImmediatePropagation();
+      hide();
+      return;
+    }
+
+    // Handle keyboard selections
+    if (['ArrowDown', 'ArrowUp', 'Home', 'End', 'Enter'].includes(event.key)) {
+      event.preventDefault();
+
+      const currentEl = results.querySelector('[data-selected="true"]');
+      const items = [...results.querySelectorAll('li')];
+      const index = items.indexOf(currentEl);
+      let nextEl;
+
+      if (items.length === 0) {
+        return;
+      }
+
+      switch (event.key) {
+        case 'ArrowUp':
+          nextEl = items[Math.max(0, index - 1)];
+          break;
+        case 'ArrowDown':
+          nextEl = items[Math.min(items.length - 1, index + 1)];
+          break;
+        case 'Home':
+          nextEl = items[0];
+          break;
+        case 'End':
+          nextEl = items[items.length - 1];
+          break;
+        case 'Enter':
+          currentEl?.querySelector('a')?.click();
+          break;
+      }
+
+      // Update the selected item
+      items.forEach(item => {
+        if (item === nextEl) {
+          input.setAttribute('aria-activedescendant', item.id);
+          item.setAttribute('data-selected', 'true');
+          nextEl.scrollIntoView({ block: 'nearest' });
+        } else {
+          item.setAttribute('data-selected', 'false');
+        }
+      });
+    }
+  }
+
+  async function updateResults(query = '') {
+    try {
+      await loadSearchIndex;
+
+      const hasQuery = query.length > 0;
+      const searchTerms = query
+        .split(' ')
+        .map((term, index, arr) => {
+          // Search API: https://lunrjs.com/guides/searching.html
+          if (index === arr.length - 1) {
+            // The last term is not mandatory and 1x fuzzy. We also duplicate it with a wildcard to match partial words
+            // as the user types.
+            return `${term}~1 ${term}*`;
+          } else {
+            // All other terms are mandatory and 1x fuzzy
+            return `+${term}~1`;
+          }
+        })
+        .join(' ');
+      const matches = hasQuery ? searchIndex.search(searchTerms) : [];
+      const hasResults = hasQuery && matches.length > 0;
+
+      siteSearch.classList.toggle('search--has-results', hasQuery && hasResults);
+      siteSearch.classList.toggle('search--no-results', hasQuery && !hasResults);
+
+      input.setAttribute('aria-activedescendant', '');
+      results.innerHTML = '';
+
+      matches.forEach((match, index) => {
+        const page = map[match.ref];
+        const li = document.createElement('li');
+        const a = document.createElement('a');
+        const displayTitle = page.title ?? '';
+        const displayDescription = page.description ?? '';
+        const displayUrl = page.url.replace(/^\//, '').replace(/\/$/, '');
+        let icon = 'file-text';
+
+        a.setAttribute('role', 'option');
+        a.setAttribute('id', `search-result-item-${match.ref}`);
+
+        if (page.url.includes('getting-started/')) {
+          icon = 'lightbulb';
+        }
+        if (page.url.includes('resources/')) {
+          icon = 'book';
+        }
+        if (page.url.includes('components/')) {
+          icon = 'puzzle';
+        }
+        if (page.url.includes('tokens/')) {
+          icon = 'palette2';
+        }
+        if (page.url.includes('utilities/')) {
+          icon = 'wrench';
+        }
+        if (page.url.includes('tutorials/')) {
+          icon = 'joystick';
+        }
+
+        li.classList.add('search__result');
+        li.setAttribute('role', 'option');
+        li.setAttribute('id', `search-result-item-${match.ref}`);
+        li.setAttribute('data-selected', index === 0 ? 'true' : 'false');
+
+        a.href = page.url;
+        a.innerHTML = `
+          <div class="search__result-icon" aria-hidden="true">
+            <sl-icon name="${icon}"></sl-icon>
+          </div>
+          <div class="search__result__details">
+            <div class="search__result-title"></div>
+            <div class="search__result-description"></div>
+            <div class="search__result-url"></div>
+          </div>
+        `;
+        a.querySelector('.search__result-title').textContent = displayTitle;
+        a.querySelector('.search__result-description').textContent = displayDescription;
+        a.querySelector('.search__result-url').textContent = displayUrl;
+
+        li.appendChild(a);
+        results.appendChild(li);
+      });
+    } catch {
+      // Ignore query errors as the user types
+    }
+  }
+
+  // Show the search dialog when clicking on data-plugin="search"
+  document.addEventListener('click', event => {
+    const searchButton = event.target.closest('[data-plugin="search"]');
+    if (searchButton) {
+      show();
+    }
+  });
+
+  // Show the search dialog when slash (or CMD+K) is pressed and focus is not inside a form element
+  document.addEventListener('keydown', event => {
+    if (
+      !isShowing &&
+      (event.key === '/' || (event.key === 'k' && (event.metaKey || event.ctrlKey))) &&
+      !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
+    ) {
+      event.preventDefault();
+      show();
+    }
+  });
+
+  // Purge cache when we press CMD+CTRL+R
+  document.addEventListener('keydown', event => {
+    if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key === 'r') {
+      localStorage.clear();
+    }
+  });
+
+  input.addEventListener('input', handleInput);
+  clearButton.addEventListener('click', handleClear);
+
+  // Close when a result is selected
+  results.addEventListener('click', event => {
+    if (event.target.closest('a')) {
+      hide();
+    }
+  });
+})();

docs/assets/scripts/turbo.js

@@ -0,0 +1,29 @@
+import * as Turbo from 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/+esm';
+
+(() => {
+  if (!window.scrollPositions) {
+    window.scrollPositions = {};
+  }
+
+  function preserveScroll() {
+    document.querySelectorAll('[data-preserve-scroll').forEach(element => {
+      scrollPositions[element.id] = element.scrollTop;
+    });
+  }
+
+  function restoreScroll(event) {
+    document.querySelectorAll('[data-preserve-scroll').forEach(element => {
+      element.scrollTop = scrollPositions[element.id];
+    });
+
+    if (event.detail && event.detail.newBody) {
+      event.detail.newBody.querySelectorAll('[data-preserve-scroll').forEach(element => {
+        element.scrollTop = scrollPositions[element.id];
+      });
+    }
+  }
+
+  window.addEventListener('turbo:before-cache', preserveScroll);
+  window.addEventListener('turbo:before-render', restoreScroll);
+  window.addEventListener('turbo:render', restoreScroll);
+})();

docs/assets/styles/code-previews.css

@@ -0,0 +1,173 @@
+/* Interactive code blocks */
+.code-preview {
+  position: relative;
+  border-radius: 3px;
+  background-color: var(--sl-color-neutral-50);
+  margin-bottom: 1.5rem;
+}
+
+.code-preview__preview {
+  position: relative;
+  border: solid 1px var(--sl-color-neutral-200);
+  border-bottom: none;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  background-color: var(--sl-color-neutral-0);
+  min-width: 20rem;
+  max-width: 100%;
+  padding: 1.5rem 3.25rem 1.5rem 1.5rem;
+}
+
+/* Block the preview while dragging to prevent iframes from intercepting drag events */
+.code-preview__preview--dragging:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: ew-resize;
+}
+
+.code-preview__resizer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 1.75rem;
+  font-size: 20px;
+  color: var(--sl-color-neutral-600);
+  background-color: var(--sl-color-neutral-0);
+  border-left: solid 1px var(--sl-color-neutral-200);
+  border-top-right-radius: 3px;
+  cursor: ew-resize;
+}
+
+@media screen and (max-width: 600px) {
+  .code-preview__preview {
+    padding-right: 1.5rem;
+  }
+
+  .code-preview__resizer {
+    display: none;
+  }
+}
+
+.code-preview__source {
+  border: solid 1px var(--sl-color-neutral-200);
+  border-bottom: none;
+  border-radius: 0 !important;
+  display: none;
+}
+
+.code-preview--expanded .code-preview__source {
+  display: block;
+}
+
+.code-preview__source pre {
+  margin: 0;
+}
+
+.code-preview__buttons {
+  position: relative;
+  border: solid 1px var(--sl-color-neutral-200);
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  display: flex;
+}
+
+.code-preview__button {
+  flex: 0 0 auto;
+  height: 2.5rem;
+  min-width: 2.5rem;
+  border: none;
+  border-radius: 0;
+  background: var(--sl-color-neutral-0);
+  font: inherit;
+  font-size: 0.7rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: var(--sl-color-neutral-600);
+  padding: 0 1rem;
+  cursor: pointer;
+}
+
+.code-preview__button:not(:last-of-type) {
+  border-right: solid 1px var(--sl-color-neutral-200);
+}
+
+.code-preview__button--html,
+.code-preview__button--react {
+  width: 70px;
+  display: flex;
+  place-items: center;
+  justify-content: center;
+}
+
+.code-preview__button--selected {
+  font-weight: 700;
+  color: var(--sl-color-primary-600);
+}
+
+.code-preview__button--codepen {
+  display: flex;
+  place-items: center;
+  width: 6rem;
+}
+
+.code-preview__button:first-of-type {
+  border-bottom-left-radius: 3px;
+}
+
+.code-preview__button:last-of-type {
+  border-bottom-right-radius: 3px;
+}
+
+.code-preview__button:hover,
+.code-preview__button:active {
+  box-shadow: 0 0 0 1px var(--sl-color-primary-400);
+  border-right-color: transparent;
+  background-color: var(--sl-color-primary-50);
+  color: var(--sl-color-primary-600);
+  z-index: 1;
+}
+
+.code-preview__button:focus-visible {
+  outline: none;
+  outline: var(--sl-focus-ring);
+  z-index: 2;
+}
+
+.code-preview__toggle {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  color: var(--sl-color-neutral-600);
+  cursor: pointer;
+}
+
+.code-preview__toggle svg {
+  width: 1em;
+  height: 1em;
+  margin-left: 0.25rem;
+}
+
+.code-preview--expanded .code-preview__toggle svg {
+  transform: rotate(180deg);
+}
+
+/* We can apply data-flavor="html|react" to any element on the page to toggle it when the flavor changes */
+.flavor-html [data-flavor]:not([data-flavor='html']) {
+  display: none;
+}
+
+.flavor-react [data-flavor]:not([data-flavor='react']) {
+  display: none;
+}

docs/assets/styles/demos.css

@@ -1,52 +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-50);
-}
-
-/* Transition demo */
-.transition-demo {
-  position: relative;
-  background: var(--sl-color-gray-90);
-  width: 8rem;
-  height: 2rem;
-}
-
-.transition-demo::after {
-  content: '';
-  position: absolute;
-  background-color: var(--sl-color-primary-50);
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 100%;
-  transition-duration: inherit;
-  transition-property: width;
-}
-
-.transition-demo:hover::after {
-  width: 100%;
-}
-
-/* Spacing demo */
-.spacing-demo {
-  width: 100px;
-  background: var(--sl-color-primary-50);
-}
-
-/* Elevation dmeo */
-.elevation-demo {
-  background: var(--sl-color-white);
-  border-radius: 3px;
-  width: 4rem;
-  height: 4rem;
-}

docs/assets/styles/search.css

@@ -0,0 +1,347 @@
+/* Search plugin */
+:root,
+:root.sl-theme-dark {
+  --docs-search-box-background: var(--sl-color-neutral-0);
+  --docs-search-box-border-width: 1px;
+  --docs-search-box-border-color: var(--sl-color-neutral-300);
+  --docs-search-box-color: var(--sl-color-neutral-600);
+  --docs-search-dialog-background: var(--sl-color-neutral-0);
+  --docs-search-border-width: var(--docs-border-width);
+  --docs-search-border-color: var(--docs-border-color);
+  --docs-search-text-color: var(--sl-color-neutral-900);
+  --docs-search-text-color-muted: var(--sl-color-neutral-500);
+  --docs-search-font-weight-normal: var(--sl-font-weight-normal);
+  --docs-search-font-weight-semibold: var(--sl-font-weight-semibold);
+  --docs-search-border-radius: calc(2 * var(--docs-border-radius));
+  --docs-search-accent-color: var(--sl-color-primary-600);
+  --docs-search-icon-color: var(--sl-color-neutral-500);
+  --docs-search-icon-color-active: var(--sl-color-neutral-600);
+  --docs-search-shadow: var(--docs-shadow-x-large);
+  --docs-search-result-background-hover: var(--sl-color-neutral-100);
+  --docs-search-result-color-hover: var(--sl-color-neutral-900);
+  --docs-search-result-background-active: var(--sl-color-primary-600);
+  --docs-search-result-color-active: var(--sl-color-neutral-0);
+  --docs-search-focus-ring: var(--sl-focus-ring);
+  --docs-search-overlay-background: rgb(0 0 0 / 0.33);
+}
+
+:root.sl-theme-dark {
+  --docs-search-overlay-background: rgb(71 71 71 / 0.33);
+}
+
+body.search-visible {
+  padding-right: var(--docs-search-scroll-lock-size) !important;
+  overflow: hidden !important;
+}
+
+/* Search box */
+.search-box {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border: none;
+  border-radius: 9999px;
+  background: var(--docs-search-box-background);
+  border: solid var(--docs-search-box-border-width) var(--docs-search-box-border-color);
+  font: inherit;
+  color: var(--docs-search-box-color);
+  padding: 0.75rem 1rem;
+  margin: var(--sl-spacing-large) 0;
+  cursor: pointer;
+}
+
+.search-box span {
+  flex: 1 1 auto;
+  width: 1rem;
+  height: 1rem;
+  text-align: left;
+  line-height: 1;
+  margin: 0 0.75rem;
+}
+
+.search-box:focus {
+  outline: none;
+}
+
+.search-box:focus-visible {
+  outline: var(--docs-search-focus-ring);
+}
+
+/* Site search */
+.search {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+}
+
+.search[hidden] {
+  display: none;
+}
+
+.search__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--docs-search-overlay-background);
+  z-index: -1;
+}
+
+.search__dialog {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.search__dialog:focus {
+  outline: none;
+}
+
+.search__dialog::backdrop {
+  display: none;
+}
+
+/* Fixes an iOS Safari 16.4 bug that draws the parent element's border radius incorrectly when showing/hiding results */
+.search__header {
+  background-color: var(--docs-search-dialog-background);
+  border-radius: var(--docs-search-border-radius);
+}
+
+.search--has-results .search__header {
+  border-top-left-radius: var(--docs-search-border-radius);
+  border-top-right-radius: var(--docs-search-border-radius);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.search__content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 500px;
+  max-height: calc(100vh - 20rem);
+  background-color: var(--docs-search-dialog-background);
+  border-radius: var(--docs-search-border-radius);
+  box-shadow: var(--docs-search-shadow);
+  padding: 0;
+  margin: 10rem auto;
+}
+
+@media screen and (max-width: 900px) {
+  .search__content {
+    max-width: calc(100% - 2rem);
+    max-height: calc(90svh);
+    margin: 4vh 1rem;
+  }
+}
+
+.search__input-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.search__input-wrapper sl-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex: 0 0 auto;
+  color: var(--docs-search-icon-color);
+  margin: 0 1.5rem;
+}
+
+.search__clear-button {
+  display: flex;
+  background: none;
+  border: none;
+  font: inherit;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.search__clear-button[hidden] {
+  display: none;
+}
+
+.search__clear-button:active sl-icon {
+  color: var(--docs-search-icon-color-active);
+}
+
+.search__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: none;
+  font: inherit;
+  font-size: 1.5rem;
+  font-weight: var(--docs-search-font-weight-normal);
+  color: var(--docs-search-text-color);
+  background: transparent;
+  padding: 1rem 0;
+  margin: 0;
+}
+
+.search__input::placeholder {
+  color: var(--docs-search-text-color-muted);
+}
+
+.search__input::-webkit-search-decoration,
+.search__input::-webkit-search-cancel-button,
+.search__input::-webkit-search-results-button,
+.search__input::-webkit-search-results-decoration {
+  display: none;
+}
+
+.search__input:focus,
+.search__input:focus-visible {
+  outline: none;
+}
+
+.search__body {
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.search--has-results .search__body {
+  border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);
+}
+
+.search__results {
+  display: none;
+  line-height: 1.2;
+  list-style: none;
+  padding: 0.5rem 0;
+  margin: 0;
+}
+
+.search--has-results .search__results {
+  display: block;
+}
+
+.search__results a {
+  display: block;
+  text-decoration: none;
+  padding: 0.5rem 1.5rem;
+}
+
+.search__results a:focus-visible {
+  outline: var(--docs-search-focus-ring);
+}
+
+.search__results li a:hover,
+.search__results li a:hover small {
+  background-color: var(--docs-search-result-background-hover);
+  color: var(--docs-search-result-color-hover);
+}
+
+.search__results li[data-selected='true'] a,
+.search__results li[data-selected='true'] a * {
+  outline: none;
+  background-color: var(--docs-search-result-background-active);
+  color: var(--docs-search-result-color-active);
+}
+
+.search__results h3 {
+  font-weight: var(--docs-search-font-weight-semibold);
+  margin: 0;
+}
+
+.search__results small {
+  display: block;
+  color: var(--docs-search-text-color-muted);
+}
+
+.search__result {
+  padding: 0;
+  margin: 0;
+}
+
+.search__result a {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.search__result-icon {
+  flex: 0 0 auto;
+  display: flex;
+  color: var(--docs-search-text-color-muted);
+}
+
+.search__result-icon sl-icon {
+  font-size: 1.5rem;
+}
+
+.search__result__details {
+  width: calc(100% - 3rem);
+}
+
+.search__result-title,
+.search__result-description,
+.search__result-url {
+  max-width: 400px;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.search__result-title {
+  font-size: 1.2rem;
+  font-weight: var(--docs-search-font-weight-semibold);
+  color: var(--docs-search-accent-color);
+}
+
+.search__result-description {
+  font-size: 0.875rem;
+  color: var(--docs-search-text-color);
+}
+
+.search__result-url {
+  font-size: 0.875rem;
+  color: var(--docs-search-text-color-muted);
+}
+
+.search__empty {
+  display: none;
+  border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);
+  text-align: center;
+  color: var(--docs-search-text-color-muted);
+  padding: 2rem;
+}
+
+.search--no-results .search__empty {
+  display: block;
+}
+
+.search__footer {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  padding: 1rem;
+}
+
+.search__footer small {
+  color: var(--docs-search-text-color-muted);
+}
+
+.search__footer small kbd:last-of-type {
+  margin-right: 0.25rem;
+}
+
+@media screen and (max-width: 900px) {
+  .search__footer {
+    display: none;
+  }
+}

docs/components/alert.md

@@ -1,90 +0,0 @@
-# Alert
-
-[component-header:sl-alert]
-
-Alerts are used to display important messages.
-
-Alerts are designed to be shown dynamically, so you need to include the `open` attribute to display them.
-
-```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>
-```
-
-## 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>
-  Some settings will take affect the next time you log in.
-</sl-alert>
-
-<br>
-
-<sl-alert type="warning" open>
-  <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
-  <strong>This will end your session</strong><br>
-  You will be logged out until you log in again.
-</sl-alert>
-
-<br>
-
-<sl-alert type="danger" open>
-  <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
-  <strong>Delete this file?</strong><br>
-  This is permanent, which means forever!
-</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('slAfterHide', () => {
-    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>
-```
-
-[component-metadata:sl-alert]

docs/components/avatar.md

@@ -1,62 +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>
-```
-
-[component-metadata:sl-avatar]

docs/components/badge.md

@@ -1,70 +0,0 @@
-# Badge
-
-[component-header:sl-badge]
-
-Badges are used to draw attention and display statuses or counts.
-
-```html preview
-<sl-badge>Badge</sl-icon></sl-badge>
-```
-
-## Examples
-
-### Types
-
-Set the `type` attribute to change the badge's type.
-
-```html preview
-<sl-badge type="primary">Primary</sl-icon></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
-
-```html preview
-<sl-badge type="primary" pill>Primary</sl-icon></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>
-```
-
-### 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-color-gray-90); border-radius: var(--sl-border-radius-medium);"
->
-  <sl-menu-label>Messages</sl-menu-label>
-  <sl-menu-item>Comments <sl-badge slot="suffix" pill>4</sl-badge></sl-menu-item>
-  <sl-menu-item>Replies <sl-badge slot="suffix" pill>12</sl-badge></sl-menu-item>
-</sl-menu>
-```
-
-[component-metadata:sl-badge]

docs/components/button.md

@@ -1,134 +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>
-```
-
-### 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">
-  <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>
-```
-
-### 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/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,39 +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 format="hsl"></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 will accept any parsable format (including CSS color names) regardless of this option.
-
-```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>
-```
-
-### 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 `slShow` 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('slShow', 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,111 +0,0 @@
-# Dialog
-
-[component-header:sl-dialog]
-
-Dialogs 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-80); 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 `slOverlayDismiss` 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('slOverlayDismiss', event => event.preventDefault());
-  })();
-</script>
-```
-
-[component-metadata:sl-dialog]

docs/components/drawer.md

@@ -1,207 +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, set this prop and add `position: relative` to the parent.
-
-```html preview
-<div
-  style="position: relative; border: solid 2px var(--sl-color-gray-80); 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-80); 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 `slOverlayDismiss` 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('slOverlayDismiss', event => event.preventDefault());
-  })();
-</script>
-```
-
-[component-metadata:sl-drawer]

docs/components/dropdown.md

@@ -1,90 +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>
-```
-
-[component-metadata:sl-dropdown]

docs/components/form.md

@@ -1,69 +0,0 @@
-# Form
-
-[component-header:sl-form]
-
-Forms collect data that can easily be processed and sent to a server.
-
-All of Shoelace's components make use of the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate markup, style, and behavior. One caveat of this approach is that native `<form>` elements don't recognize Shoelace form controls.
-
-This component solves that problem by serializing _both_ Shoelace form controls and native form controls. The resulting form data is exposed in the `slSubmit` event in a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object.
-
-```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');
-
-  form.addEventListener('slSubmit', 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>
-```
-
-?> Shoelace forms don't make use of `action` and `method` attributes and they don't submit automatically like native forms. To handle submission, you need to listen for the `slSubmit` event as shown in the example above.
-
-[component-metadata:sl-form]

docs/components/icon.md

@@ -1,223 +0,0 @@
-# Icon
-
-[component-header:sl-icon]
-
-Icons are symbols that can be used to represent or provide context to various options and actions within an application.
-
-Shoelace comes bundled with over 1,000 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. Click or tap on an icon below to copy the name and use it like this.
-
-```html
-<sl-icon name="icon-name-here" hidden></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
-
-### Icon Sizes
-
-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 by setting the `src` attribute. Only SVG images are supported
-
-```html preview
-<sl-icon src="/assets/images/shoe.svg" style="font-size: 8rem;"></sl-icon>
-```
-
-<script>
-  fetch('/dist/shoelace/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('slInput', () => {
-        [...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('slChange', () => {
-        list.setAttribute('data-type', select.value);
-        localStorage.setItem('sl-icon:type', select.value);
-      });
-    });
-</script>
-
-<style>
-  .icon-search {
-    border: solid 1px var(--sl-color-gray-90);
-    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 {
-    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: pointer;
-    transition: var(--sl-transition-medium) all;
-  }
-
-  .icon-list-item:hover {
-    background-color: var(--sl-color-primary-95);
-    color: var(--sl-color-primary-50);
-  }
-
-  .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-search-controls {
-      display: block;
-    }
-
-    .icon-search-controls sl-select {
-      margin-left: 0;
-      margin-top: 1rem;
-    }
-
-    .icon-list {
-      grid-template-columns: repeat(8, 1fr);
-    }
-
-    .icon-list-item {
-      font-size: 20px;
-    }    
-  }
-
-  @media screen and (max-width: 500px) {
-    .icon-list {
-      grid-template-columns: repeat(4, 1fr);
-    }    
-  }
-</style>
-
-[component-metadata:sl-icon]

docs/components/input.md

@@ -1,140 +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.
-
-## Examples
-
-### Labels
-
-Use the `label` attribute to give the input an accessible label.
-
-```html preview
-<sl-input label="Name"></sl-input>
-<br>
-<sl-input type="email" label="Email" placeholder="bob@example.com"></sl-input>
-```
-
-### Help Text
-
-Add descriptive help text to an input with the `help-text` slot.
-
-```html preview
-<sl-input label="Nickname">
-  <div slot="help-text">What would you like people to call you?</div>
-</sl-input>
-```
-
-### Placeholder
-
-Use the `placeholder` attribute to add a placeholder.
-
-```html preview
-<sl-input placeholder="Type something"></sl-input>
-```
-
-### Size
-
-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>
-```
-
-### 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>
-```
-
-### 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>
-```
-
-### Clearable
-
-Add the `clearable` prop to add a clear button when the input has content.
-
-```html preview
-<sl-input placeholder="Clearable" size="small" clearable></sl-input>
-<br>
-<sl-input placeholder="Clearable" size="medium" clearable></sl-input>
-<br>
-<sl-input placeholder="Clearable" size="large" 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>
-```
-
-### 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>
-```
-
-### Validation
-
-Show a valid or invalid state by setting the `valid` and `invalid` attributes, respectively. Help text can be used to provide feedback for validation and will be styled accordingly.
-
-```html preview
-<sl-input label="Valid" valid>
-  <div slot="help-text">This is a valid input</div>
-</sl-input>
-
-<br>
-
-<sl-input label="Invalid" invalid>
-  <div slot="help-text">This is an invalid input</div>
-</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-color-gray-90); 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-color-gray-90); 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-color-gray-90); 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,23 +0,0 @@
-# Menu
-
-[component-header:sl-menu]
-
-Menus provide a list of options for the user.
-
-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-color-gray-90); 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,52 +0,0 @@
-# Progress Bar
-
-[component-header:sl-progress-bar]
-
-Progress bars are used to show the progress of a determinate 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>
-```
-
-[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,52 +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>
-```
-
-[component-metadata:sl-range]

docs/components/select.md

@@ -1,159 +0,0 @@
-# Select
-
-[component-header:sl-select]
-
-Selects allow you to choose one or more items from a dropdown menu.
-
-```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-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
-
-### Labels
-
-Use the `label` attribute to give the select an accessible label.
-
-```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 an input with the `help-text` slot.
-
-```html preview
-<sl-select label="Experience">
-  <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>
-
-  <div slot="help-text">Please tell us your skill level.</div>
-</sl-select>
-```
-
-### Multiple
-
-To allow multiple options to be selected, use the `multiple` attribute.
-
-```html preview
-<sl-select placeholder="Select a few" 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-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>
-```
-
-### Size
-
-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>
-```
-
-### Pill
-
-Use the `pill` prop to give selects rounded edges.
-
-```html preview
-<sl-select label="Select one" pill 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>
-```
-
-### Groups
-
-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>
-```
-
-### 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>
-```
-
-### Validation
-
-Show a valid or invalid state by setting the `valid` and `invalid` attributes, respectively. Help text can be used to provide feedback for validation and will be styled accordingly.
-
-```html preview
-<sl-select placeholder="Valid" valid>
-  <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>
-
-  <div slot="help-text">This is a valid selection!</div>
-</sl-select>
-
-<br>
-
-<sl-select placeholder="Invalid" invalid>
-  <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>
-
-  <div slot="help-text">This is not a valid selection!</div>
-</sl-select>
-```
-
-[component-metadata:sl-select]

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 color can be changed by setting the `--color` custom property.
-
-```html preview
-<sl-spinner style="font-size: 2rem; --color: tomato;"></sl-spinner>
-```
-
-[component-metadata:sl-spinner]

docs/components/switch.md

@@ -1,32 +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>
-```
-
-
-[component-metadata:sl-switch]

docs/components/tab-group.md

@@ -1,129 +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>
-```
-
-### 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]