[ { "path": ".editorconfig", "content": "# https://editorconfig.org\n\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\ninsert_final_newline = false\ntrim_trailing_whitespace = false\n" }, { "path": ".eslintignore", "content": ".cache\ndocs/dist\ndocs/search.json\ndocs/**/*.min.js\ndist\nexamples\nnode_modules\nsrc/react\nscripts\n\n" }, { "path": ".eslintrc.cjs", "content": "/* eslint-env node */\n\nmodule.exports = {\n plugins: [\n '@typescript-eslint',\n 'wc',\n 'lit',\n 'lit-a11y',\n 'chai-expect',\n 'chai-friendly',\n 'import',\n 'sort-imports-es6-autofix'\n ],\n extends: [\n 'eslint:recommended',\n 'plugin:wc/recommended',\n 'plugin:wc/best-practice',\n 'plugin:lit/recommended',\n 'plugin:lit-a11y/recommended'\n ],\n env: {\n es2021: true,\n browser: true\n },\n parserOptions: {\n sourceType: 'module'\n },\n overrides: [\n {\n extends: [\n 'plugin:@typescript-eslint/eslint-recommended',\n 'plugin:@typescript-eslint/recommended',\n 'plugin:@typescript-eslint/recommended-requiring-type-checking'\n ],\n parser: '@typescript-eslint/parser',\n parserOptions: {\n sourceType: 'module',\n project: './tsconfig.json',\n tsconfigRootDir: __dirname\n },\n files: ['*.ts'],\n rules: {\n 'default-param-last': 'off',\n '@typescript-eslint/default-param-last': 'error',\n 'no-empty-function': 'off',\n '@typescript-eslint/no-empty-function': 'warn',\n 'no-implied-eval': 'off',\n '@typescript-eslint/no-implied-eval': 'error',\n 'no-invalid-this': 'off',\n '@typescript-eslint/no-invalid-this': 'error',\n 'no-shadow': 'off',\n '@typescript-eslint/no-shadow': 'error',\n 'no-throw-literal': 'off',\n '@typescript-eslint/no-throw-literal': 'error',\n 'no-unused-expressions': 'off',\n '@typescript-eslint/prefer-regexp-exec': 'off',\n '@typescript-eslint/no-unused-expressions': 'error',\n '@typescript-eslint/unbound-method': 'off',\n '@typescript-eslint/no-non-null-assertion': 'off',\n '@typescript-eslint/no-floating-promises': 'off',\n '@typescript-eslint/no-misused-promises': [\n 'error',\n {\n checksVoidReturn: false\n }\n ],\n '@typescript-eslint/consistent-type-assertions': [\n 'warn',\n {\n assertionStyle: 'as',\n objectLiteralTypeAssertions: 'never'\n }\n ],\n '@typescript-eslint/consistent-type-imports': 'warn',\n '@typescript-eslint/no-base-to-string': 'error',\n '@typescript-eslint/no-confusing-non-null-assertion': 'error',\n '@typescript-eslint/no-invalid-void-type': 'error',\n '@typescript-eslint/no-require-imports': 'error',\n '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'warn',\n '@typescript-eslint/no-unnecessary-condition': 'off',\n '@typescript-eslint/no-unnecessary-qualifier': 'warn',\n '@typescript-eslint/no-unnecessary-type-assertion': 'off',\n '@typescript-eslint/non-nullable-type-assertion-style': 'warn',\n '@typescript-eslint/prefer-for-of': 'warn',\n '@typescript-eslint/prefer-optional-chain': 'warn',\n '@typescript-eslint/prefer-ts-expect-error': 'warn',\n '@typescript-eslint/prefer-return-this-type': 'error',\n '@typescript-eslint/prefer-string-starts-ends-with': 'warn',\n '@typescript-eslint/require-array-sort-compare': 'error',\n '@typescript-eslint/unified-signatures': 'warn',\n '@typescript-eslint/array-type': 'warn',\n '@typescript-eslint/consistent-type-definitions': ['warn', 'interface'],\n '@typescript-eslint/member-delimiter-style': 'warn',\n '@typescript-eslint/method-signature-style': 'warn',\n '@typescript-eslint/no-extraneous-class': 'error',\n '@typescript-eslint/no-redundant-type-constituents': 'off',\n '@typescript-eslint/parameter-properties': 'error',\n '@typescript-eslint/strict-boolean-expressions': 'off'\n }\n },\n {\n files: ['**/*.cjs'],\n env: {\n node: true\n }\n },\n {\n extends: ['plugin:chai-expect/recommended', 'plugin:chai-friendly/recommended'],\n files: ['*.test.ts'],\n rules: {\n '@typescript-eslint/no-unsafe-call': 'off',\n '@typescript-eslint/no-unused-expressions': 'off'\n }\n }\n ],\n rules: {\n 'no-template-curly-in-string': 'error',\n 'array-callback-return': 'error',\n 'comma-dangle': 'off',\n 'consistent-return': 'error',\n curly: 'off',\n 'default-param-last': 'error',\n eqeqeq: 'error',\n 'lit-a11y/click-events-have-key-events': 'off',\n 'no-constructor-return': 'error',\n 'no-empty-function': 'warn',\n 'no-eval': 'error',\n 'no-extend-native': 'error',\n 'no-extra-bind': 'error',\n 'no-floating-decimal': 'error',\n 'no-implicit-coercion': 'off',\n 'no-implicit-globals': 'error',\n 'no-implied-eval': 'error',\n 'no-invalid-this': 'error',\n 'no-labels': 'error',\n 'no-lone-blocks': 'error',\n 'no-new': 'error',\n 'no-new-func': 'error',\n 'no-new-wrappers': 'error',\n 'no-octal-escape': 'error',\n 'no-proto': 'error',\n 'no-return-assign': 'warn',\n 'no-script-url': 'error',\n 'no-self-compare': 'warn',\n 'no-sequences': 'warn',\n 'no-throw-literal': 'error',\n 'no-unmodified-loop-condition': 'error',\n 'no-unused-expressions': 'warn',\n 'no-useless-call': 'error',\n 'no-useless-concat': 'error',\n 'no-useless-return': 'warn',\n 'prefer-promise-reject-errors': 'error',\n radix: 'off',\n 'require-await': 'error',\n 'wrap-iife': ['warn', 'inside'],\n 'no-shadow': 'error',\n 'no-array-constructor': 'error',\n 'no-bitwise': 'error',\n 'no-multi-assign': 'warn',\n 'no-new-object': 'error',\n 'no-useless-computed-key': 'warn',\n 'no-useless-rename': 'warn',\n 'no-var': 'error',\n 'prefer-const': 'warn',\n 'prefer-numeric-literals': 'warn',\n 'prefer-object-spread': 'warn',\n 'prefer-rest-params': 'warn',\n 'prefer-spread': 'warn',\n 'prefer-template': 'off',\n 'no-else-return': 'off',\n 'func-names': ['warn', 'never'],\n 'one-var': ['warn', 'never'],\n 'operator-assignment': 'warn',\n 'prefer-arrow-callback': 'warn',\n 'no-restricted-imports': [\n 'warn',\n {\n paths: [\n {\n name: '.',\n message: 'Usage of local index imports is not allowed.'\n },\n {\n name: './index',\n message: 'Import from the source file instead.'\n }\n ]\n }\n ],\n 'import/extensions': [\n 'error',\n 'always',\n {\n ignorePackages: true,\n pattern: {\n js: 'always',\n ts: 'never'\n }\n }\n ],\n 'import/no-duplicates': 'warn',\n 'sort-imports-es6-autofix/sort-imports-es6': [\n 2,\n {\n ignoreCase: true,\n ignoreMemberSort: false,\n memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single']\n }\n ],\n 'wc/guard-super-call': 'off'\n }\n};\n" }, { "path": ".github/CODE_OF_CONDUCT.md", "content": "\n# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment include:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies within all project spaces, and it also applies when an individual is representing the project or its community in public spaces. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at cory@abeautifulsite.net. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 1.4.\n" }, { "path": ".github/FUNDING.yml", "content": "github: [claviska]\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug Report\nabout: Create a bug report to help us fix a demonstrable problem with code in the library.\ntitle: ''\nlabels: bug\nassignees: \n---\n\n### Describe the bug\nA bug is _a demonstrable problem_ caused by code in the library. Please provide a clear and concise description of what the bug is here.\n\n### To Reproduce\nSteps to reproduce the behavior:\n\n1. Go to '...'\n2. Click on '...'\n3. Scroll down to '...'\n4. See error\n\n### Demo\n\nIf 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.\n\nTip: use the CodePen button on any example in the docs!\n\n### Screenshots\nIf applicable, add screenshots to help explain the bug.\n\n### Browser / OS\n - OS: [e.g. Mac, Windows]\n - Browser: [e.g. Chrome, Firefox, Safari]\n - Browser version: [e.g. 22]\n\n### Additional information\nProvide any additional information about the bug here.\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "contact_links:\n - name: Feature Requests\n url: https://github.com/shoelace-style/shoelace/discussions/categories/ideas\n about: All requests for new features should go here.\n - name: Help & Support\n url: https://github.com/shoelace-style/shoelace/discussions/categories/help\n about: Please don't create issues for personal help requests. Instead, ask your question on the discussion forum.\n" }, { "path": ".github/SECURITY.md", "content": "# Reporting Security Issues\n\nWe take security issues in Shoelace very seriously and appreciate your efforts to disclose your findings responsibly.\n\nTo report a security issue, email [cory@abeautifulsite.net](mailto:cory@abeautifulsite.net) and include \"SHOELACE SECURITY\" in the subject line.\n\nWe'll respond as soon as possible and keep you updated throughout the process.\n" }, { "path": ".github/workflows/node.js.yml", "content": "# 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\n# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions\n\nname: Node.js CI\n\non:\n push:\n branches: [next]\n pull_request:\n branches: [next]\n\njobs:\n build:\n runs-on: ubuntu-22.04\n\n steps:\n - uses: actions/checkout@v3\n - name: Update system packages\n run: |\n sudo apt-get update\n sudo apt-get upgrade -y\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v3\n with:\n node-version: ${{ matrix.node-version }}\n cache: 'npm'\n - run: npx playwright install --with-deps\n - run: npm ci\n - run: npm run verify\n" }, { "path": ".github/workflows/release.yml", "content": "# This workflow will create a GitHub release every time a tag is pushed\nname: Create GitHub Release\n\non:\n push:\n tags:\n - \"v2.*\"\n - \"v3.*\"\n\njobs:\n release:\n runs-on: ubuntu-latest\n steps:\n - uses: \"marvinpinto/action-automatic-releases@v1.2.1\"\n with:\n repo_token: \"${{ secrets.GITHUB_TOKEN }}\"\n prerelease: false\n" }, { "path": ".gitignore", "content": "_site\n.cache\n.DS_Store\ncdn\ndist\ndocs/assets/images/sprite.svg\nnode_modules\nsrc/react\n" }, { "path": ".gitpod.yml", "content": "tasks:\n - init: npm install && npm run build\n command: npm run start\n\nports:\n - port: 3001\n onOpen: ignore\n - port: 4000-4999\n onOpen: open-preview\n\ngithub:\n prebuilds:\n # enable for the master/default branch (defaults to true)\n master: true\n # enable for all branches in this repo (defaults to false)\n branches: true\n # enable for pull requests coming from this repo (defaults to true)\n pullRequests: true\n # enable for pull requests coming from forks (defaults to false)\n pullRequestsFromForks: true\n # add a check to pull requests (defaults to true)\n addCheck: true\n # add a \"Review in Gitpod\" button as a comment to pull requests (defaults to false)\n addComment: false\n # add a \"Review in Gitpod\" button to the pull request's description (defaults to false)\n addBadge: true\n # add a label once the prebuild is ready to pull requests (defaults to false)\n addLabel: true\n" }, { "path": ".husky/pre-commit", "content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx --no-install lint-staged\n" }, { "path": ".prettierignore", "content": "*.hbs\n.cache\n.github\ncspell.json\ndist\ndocs/search.json\nsrc/components/icon/icons\nsrc/react/index.ts\nnode_modules\npackage.json\npackage-lock.json\ntsconfig.json\ncdn\n_site\n" }, { "path": ".vscode/extensions.json", "content": "{\n \"recommendations\": [\n \"dbaeumer.vscode-eslint\",\n \"esbenp.prettier-vscode\",\n \"bierner.lit-html\",\n \"bashmish.es6-string-css\",\n \"streetsidesoftware.code-spell-checker\"\n ]\n}\n" }, { "path": ".vscode/settings.json", "content": "{\n \"editor.formatOnSave\": true,\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": \"explicit\"\n }\n}\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to Shoelace\n\nBefore contributing, please review the contributions guidelines at:\n\n[shoelace.style/resources/contributing](https://shoelace.style/resources/contributing)\n" }, { "path": "LICENSE.md", "content": "Copyright (c) 2020 A Beautiful Site, LLC\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n" }, { "path": "README.md", "content": "# Shoelace is now Web Awesome 🧡!\n\n> [!IMPORTANT] \n> **Shoelace is in maintenance mode (LTS)**. It is no longer actively being developed but remains available for use under the MIT license. Critical fixes may be released as needed; there is no fixed end date.\n> For active development and new features, check out Web Awesome at [https://webawesome.com](https://webawesome.com) and [https://github.com/shoelace-style/webawesome](https://github.com/shoelace-style/webawesome).\n\nWeb Awesome has an even larger library of free web [components](https://webawesome.com/docs/components/), plus [themes](https://webawesome.com/docs/themes/), [utilities](https://webawesome.com/docs/utilities/), [patterns](https://webawesome.com/docs/patterns/), and more.\n\n---\n\n# Shoelace\n\nA forward-thinking library of web components.\n\n- Works with all frameworks 🧩\n- Works with CDNs 🚛\n- Fully customizable with CSS 🎨\n- Includes an official dark theme 🌛\n- Built with accessibility in mind ♿️\n- Open source 😸\n\n---\n\n- Documentation: [shoelace.style](https://shoelace.style)\n- Shoelace Source (Maintenance Mode - LTS): [github.com/shoelace-style/shoelace](https://github.com/shoelace-style/shoelace)\n- Web Awesome Source (Active Development): [github.com/shoelace-style/webawesome](https://github.com/shoelace-style/webawesome)\n\n---\n\n## Shoemakers 🥾\n\nShoemakers, 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.\n\n**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.\n\nIf that's not what you're trying to do, the [documentation website](https://shoelace.style) is where you want to be.\n\n### What are you using to build Shoelace?\n\nComponents 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/).\n\n### Forking the Repo\n\nStart by [forking the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, then clone it locally and install dependencies.\n\n```bash\ngit clone https://github.com/YOUR_GITHUB_USERNAME/shoelace\ncd shoelace\nnpm install\n```\n\n### Developing\n\nOnce you've cloned the repo, run the following command.\n\n```bash\nnpm start\n```\n\nThis will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browsers don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.\n\n### Building\n\nTo generate a production build, run the following command.\n\n```bash\nnpm run build\n```\n\n### Creating New Components\n\nTo scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name.\n\n```bash\nnpm run create sl-tag-name\n```\n\nThis 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.\n\n### Contributing\n\nShoelace is open source under the MIT license. Bug fixes and maintenance updates may still be considered; for new features and active development, see [Web Awesome](https://webawesome.com). If you want to contribute here, please review the [contribution guidelines](CONTRIBUTING.md) first.\n\n## License\n\nShoelace is available under the terms of the MIT license.\n\nWhether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾\n" }, { "path": "cspell.json", "content": "{\n \"version\": \"0.2\",\n \"words\": [\n \"activedescendant\",\n \"allowfullscreen\",\n \"animationend\",\n \"Animista\",\n \"apos\",\n \"atrule\",\n \"autocorrect\",\n \"autofix\",\n \"autoload\",\n \"autoloader\",\n \"autoloading\",\n \"autoplay\",\n \"bezier\",\n \"Bokmål\",\n \"boxicons\",\n \"CACHEABLE\",\n \"callout\",\n \"callouts\",\n \"cdndir\",\n \"chatbubble\",\n \"checkmark\",\n \"claviska\",\n \"Clippy\",\n \"codebases\",\n \"codepen\",\n \"colocated\",\n \"colour\",\n \"combobox\",\n \"Commonmark\",\n \"Composability\",\n \"Consolas\",\n \"contenteditable\",\n \"copydir\",\n \"Cotte\",\n \"coverpage\",\n \"crossorigin\",\n \"crutchcorn\",\n \"csspart\",\n \"cssproperty\",\n \"datetime\",\n \"describedby\",\n \"Docsify\",\n \"dogfood\",\n \"dropdowns\",\n \"easings\",\n \"endraw\",\n \"enterkeyhint\",\n \"eqeqeq\",\n \"erroneou\",\n \"errormessage\",\n \"esbuild\",\n \"exportmaps\",\n \"exportparts\",\n \"fieldsets\",\n \"formaction\",\n \"formdata\",\n \"formenctype\",\n \"formmethod\",\n \"formnovalidate\",\n \"formtarget\",\n \"FOUC\",\n \"FOUCE\",\n \"fullscreen\",\n \"gestern\",\n \"giga\",\n \"globby\",\n \"Grayscale\",\n \"haspopup\",\n \"heroicons\",\n \"hexa\",\n \"Iconoir\",\n \"Iframes\",\n \"iife\",\n \"inputmode\",\n \"ionicon\",\n \"ionicons\",\n \"jsDelivr\",\n \"jsfiddle\",\n \"keydown\",\n \"keyframes\",\n \"Kool\",\n \"labelledby\",\n \"Laravel\",\n \"LaViska\",\n \"linkify\",\n \"listbox\",\n \"listitem\",\n \"litelement\",\n \"lowercasing\",\n \"Lucide\",\n \"maxlength\",\n \"Menlo\",\n \"menuitemcheckbox\",\n \"menuitemradio\",\n \"middlewares\",\n \"minlength\",\n \"monospace\",\n \"mousedown\",\n \"mousemove\",\n \"mouseout\",\n \"mouseup\",\n \"multiselectable\",\n \"nextjs\",\n \"nocheck\",\n \"noopener\",\n \"noreferrer\",\n \"novalidate\",\n \"npmdir\",\n \"Numberish\",\n \"onscrollend\",\n \"outdir\",\n \"ParamagicDev\",\n \"peta\",\n \"petabit\",\n \"prismjs\",\n \"progressbar\",\n \"radiogroup\",\n \"Railsbyte\",\n \"remixicon\",\n \"reregister\",\n \"resizer\",\n \"resizers\",\n \"retargeted\",\n \"RETRYABLE\",\n \"rgba\",\n \"roadmap\",\n \"Roboto\",\n \"roledescription\",\n \"Sapan\",\n \"saturationl\",\n \"Schilp\",\n \"scrollbars\",\n \"scrollend\",\n \"scroller\",\n \"Segoe\",\n \"semibold\",\n \"sitedir\",\n \"slotchange\",\n \"smartquotes\",\n \"spacebar\",\n \"stylesheet\",\n \"Tabbable\",\n \"tabindex\",\n \"tabler\",\n \"tablist\",\n \"tabpanel\",\n \"templating\",\n \"tera\",\n \"testid\",\n \"textareas\",\n \"textfield\",\n \"tinycolor\",\n \"transitionend\",\n \"treeitem\",\n \"treeshaking\",\n \"Triaging\",\n \"turbolinks\",\n \"typeof\",\n \"unbundles\",\n \"unbundling\",\n \"unicons\",\n \"unsanitized\",\n \"unsupportive\",\n \"valpha\",\n \"valuenow\",\n \"valuetext\",\n \"vuejs\",\n \"WEBP\",\n \"Webpacker\",\n \"wordmark\"\n ],\n \"ignorePaths\": [\n \"package.json\",\n \"package-lock.json\",\n \"docs/assets/examples/include.html\",\n \".vscode/**\",\n \"src/translations/!(en).ts\",\n \"**/*.min.js\"\n ],\n \"ignoreRegExpList\": [\n \"(^|[^a-z])sl[a-z]*(^|[^a-z])\"\n ],\n \"useGitignore\": true\n}\n" }, { "path": "custom-elements-manifest.config.js", "content": "import * as path from 'path';\nimport { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';\nimport { customElementVsCodePlugin } from 'custom-element-vs-code-integration';\nimport { customElementVuejsPlugin } from 'custom-element-vuejs-integration';\nimport { parse } from 'comment-parser';\nimport { pascalCase } from 'pascal-case';\nimport commandLineArgs from 'command-line-args';\nimport fs from 'fs';\n\nconst packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));\nconst { name, description, version, author, homepage, license } = packageData;\n\nconst { outdir } = commandLineArgs([\n { name: 'litelement', type: String },\n { name: 'analyze', defaultOption: true },\n { name: 'outdir', type: String }\n]);\n\nfunction noDash(string) {\n return string.replace(/^\\s?-/, '').trim();\n}\n\nfunction replace(string, terms) {\n terms.forEach(({ from, to }) => {\n string = string?.replace(from, to);\n });\n\n return string;\n}\n\nexport default {\n globs: ['src/components/**/*.component.ts'],\n exclude: ['**/*.styles.ts', '**/*.test.ts'],\n plugins: [\n // Append package data\n {\n name: 'shoelace-package-data',\n packageLinkPhase({ customElementsManifest }) {\n customElementsManifest.package = { name, description, version, author, homepage, license };\n }\n },\n\n // Infer tag names because we no longer use @customElement decorators.\n {\n name: 'shoelace-infer-tag-names',\n analyzePhase({ ts, node, moduleDoc }) {\n switch (node.kind) {\n case ts.SyntaxKind.ClassDeclaration: {\n const className = node.name.getText();\n const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);\n\n const importPath = moduleDoc.path;\n\n // This is kind of a best guess at components. \"thing.component.ts\"\n if (!importPath.endsWith('.component.ts')) {\n return;\n }\n\n const tagNameWithoutPrefix = path.basename(importPath, '.component.ts');\n const tagName = 'sl-' + tagNameWithoutPrefix;\n\n classDoc.tagNameWithoutPrefix = tagNameWithoutPrefix;\n classDoc.tagName = tagName;\n\n // This used to be set to true by @customElement\n classDoc.customElement = true;\n }\n }\n }\n },\n\n // Parse custom jsDoc tags\n {\n name: 'shoelace-custom-tags',\n analyzePhase({ ts, node, moduleDoc }) {\n switch (node.kind) {\n case ts.SyntaxKind.ClassDeclaration: {\n const className = node.name.getText();\n const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);\n const customTags = ['animation', 'dependency', 'documentation', 'since', 'status', 'title'];\n let customComments = '/**';\n\n node.jsDoc?.forEach(jsDoc => {\n jsDoc?.tags?.forEach(tag => {\n const tagName = tag.tagName.getText();\n\n if (customTags.includes(tagName)) {\n customComments += `\\n * @${tagName} ${tag.comment}`;\n }\n });\n });\n\n // This is what allows us to map JSDOC comments to ReactWrappers.\n classDoc['jsDoc'] = node.jsDoc?.map(jsDoc => jsDoc.getFullText()).join('\\n');\n\n const parsed = parse(`${customComments}\\n */`);\n parsed[0].tags?.forEach(t => {\n switch (t.tag) {\n // Animations\n case 'animation':\n if (!Array.isArray(classDoc['animations'])) {\n classDoc['animations'] = [];\n }\n classDoc['animations'].push({\n name: t.name,\n description: noDash(t.description)\n });\n break;\n\n // Dependencies\n case 'dependency':\n if (!Array.isArray(classDoc['dependencies'])) {\n classDoc['dependencies'] = [];\n }\n classDoc['dependencies'].push(t.name);\n break;\n\n // Value-only metadata tags\n case 'documentation':\n case 'since':\n case 'status':\n case 'title':\n classDoc[t.tag] = t.name;\n break;\n\n // All other tags\n default:\n if (!Array.isArray(classDoc[t.tag])) {\n classDoc[t.tag] = [];\n }\n\n classDoc[t.tag].push({\n name: t.name,\n description: t.description,\n type: t.type || undefined\n });\n }\n });\n }\n }\n }\n },\n\n {\n name: 'shoelace-react-event-names',\n analyzePhase({ ts, node, moduleDoc }) {\n switch (node.kind) {\n case ts.SyntaxKind.ClassDeclaration: {\n const className = node.name.getText();\n const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);\n\n if (classDoc?.events) {\n classDoc.events.forEach(event => {\n event.reactName = `on${pascalCase(event.name)}`;\n event.eventName = `${pascalCase(event.name)}Event`;\n });\n }\n }\n }\n }\n },\n\n {\n name: 'shoelace-translate-module-paths',\n packageLinkPhase({ customElementsManifest }) {\n customElementsManifest?.modules?.forEach(mod => {\n //\n // CEM paths look like this:\n //\n // src/components/button/button.ts\n //\n // But we want them to look like this:\n //\n // components/button/button.js\n //\n const terms = [\n { from: /^src\\//, to: '' }, // Strip the src/ prefix\n { from: /\\.component.(t|j)sx?$/, to: '.js' } // Convert .ts to .js\n ];\n\n mod.path = replace(mod.path, terms);\n\n for (const ex of mod.exports ?? []) {\n ex.declaration.module = replace(ex.declaration.module, terms);\n }\n\n for (const dec of mod.declarations ?? []) {\n if (dec.kind === 'class') {\n for (const member of dec.members ?? []) {\n if (member.inheritedFrom) {\n member.inheritedFrom.module = replace(member.inheritedFrom.module, terms);\n }\n }\n }\n }\n });\n }\n },\n\n // Generate custom VS Code data\n customElementVsCodePlugin({\n outdir,\n cssFileName: null,\n referencesTemplate: (_, tag) => [\n {\n name: 'Documentation',\n url: `https://shoelace.style/components/${tag.replace('sl-', '')}`\n }\n ]\n }),\n\n customElementJetBrainsPlugin({\n outdir: './dist',\n excludeCss: true,\n packageJson: false,\n referencesTemplate: (_, tag) => {\n return {\n name: 'Documentation',\n url: `https://shoelace.style/components/${tag.replace('sl-', '')}`\n };\n }\n }),\n\n customElementVuejsPlugin({\n outdir: './dist/types/vue',\n fileName: 'index.d.ts',\n componentTypePath: (_, tag) => `../../components/${tag.replace('sl-', '')}/${tag.replace('sl-', '')}.component.js`\n })\n ]\n};\n" }, { "path": "docs/_includes/component.njk", "content": "{% extends \"default.njk\" %}\n\n{# Find the component based on the `tag` front matter #}\n{% set component = getComponent('sl-' + page.fileSlug) %}\n\n{% block content %}\n {# Determine the badge variant #}\n {% if component.status == 'stable' %}\n {% set badgeVariant = 'primary' %}\n {% elseif component.status == 'experimental' %}\n {% set badgeVariant = 'warning' %}\n {% elseif component.status == 'planned' %}\n {% set badgeVariant = 'neutral' %}\n {% elseif component.status == 'deprecated' %}\n {% set badgeVariant = 'danger' %}\n {% else %}\n {% set badgeVariant = 'neutral' %}\n {% endif %}\n\n {# Header #}\n
\n

{{ component.name | classNameToComponentName }}

\n\n
\n <{{ component.tagName }}> | {{ component.name }}\n
\n\n
\n \n Since {{component.since or '?' }}\n \n \n {{ component.status }}\n \n
\n
\n\n

\n {% if component.summary %}\n {{ component.summary | markdownInline | safe }}\n {% endif %}\n

\n\n {# Markdown content #}\n {{ content | safe }}\n\n {# Importing #}\n

Importing

\n

\n If you're using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use\n any of the following snippets to cherry pick this component.\n

\n\n \n Script\n Import\n Bundler\n React\n\n \n

\n To import this component from the CDN\n using a script tag:\n

\n 
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}"></script>
\n \n\n \n

\n To import this component from the CDN\n using a JavaScript import:\n

\n 
import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}';
\n \n\n \n

\n To import this component using a bundler:\n

\n 
import '@shoelace-style/shoelace/{{ meta.npmdir }}/{{ component.path }}';
\n \n\n \n

\n To import this component as a React component:\n

\n 
import {{ component.name }} from '@shoelace-style/shoelace/{{ meta.npmdir }}/react/{{ component.tagNameWithoutPrefix }}';
\n \n \n\n {# Slots #}\n {% if component.slots.length %}\n

Slots

\n\n \n \n \n \n \n \n \n \n {% for slot in component.slots %}\n \n \n \n \n {% endfor %}\n \n
NameDescription
\n {% if slot.name %}\n {{ slot.name }}\n {% else %}\n (default)\n {% endif %}\n {{ slot.description | markdownInline | safe }}
\n\n

Learn more about using slots.

\n {% endif %}\n\n {# Properties #}\n {% if component.properties.length %}\n

Properties

\n\n \n \n \n \n \n \n \n \n \n \n \n {% for prop in component.properties %}\n \n \n \n \n \n \n \n {% endfor %}\n \n \n \n \n \n \n \n \n
NameDescriptionReflectsTypeDefault
\n {{ prop.name }}\n {% if prop.attribute | length > 0 %}\n {% if prop.attribute != prop.name %}\n
\n \n \n \n {{ prop.attribute }}\n \n \n \n {% endif %}\n {% endif %}\n 		\n {{ prop.description | markdownInline | safe }}\n \n {% if prop.reflects %}\n \n {% endif %}\n \n {% if prop.type.text %}\n {{ prop.type.text | trimPipes | markdownInline | safe }}\n {% else %}\n -\n {% endif %}\n \n {% if prop.default %}\n {{ prop.default | markdownInline | safe }}\n {% else %}\n -\n {% endif %}\n
updateComplete\n A read-only promise that resolves when the component has\n finished updating.\n
\n\n

Learn more about attributes and properties.

\n {% endif %}\n\n {# Events #}\n {% if component.events.length %}\n

Events

\n\n \n \n \n \n \n \n \n \n \n \n {% for event in component.events %}\n \n \n \n \n \n \n {% endfor %}\n \n
NameReact EventDescriptionEvent Detail
{{ event.name }}{{ event.reactName }}{{ event.description | markdownInline | safe }}\n {% if event.type.text %}\n {{ event.type.text | trimPipes }}\n {% else %}\n -\n {% endif %}\n
\n\n

Learn more about events.

\n {% endif %}\n\n {# Methods #}\n {% if component.methods.length %}\n

Methods

\n\n \n \n \n \n \n \n \n \n \n {% for method in component.methods %}\n \n \n \n \n \n {% endfor %}\n \n
NameDescriptionArguments
{{ method.name }}(){{ method.description | markdownInline | safe }}\n {% if method.parameters.length %}\n \n {% for param in method.parameters %}\n {{ param.name }}: {{ param.type.text | trimPipes }}{% if not loop.last %},{% endif %}\n {% endfor %}\n \n {% else %}\n -\n {% endif %}\n
\n\n

Learn more about methods.

\n {% endif %}\n\n {# Custom Properties #}\n {% if component.cssProperties.length %}\n

Custom Properties

\n\n \n \n \n \n \n \n \n \n \n {% for cssProperty in component.cssProperties %}\n \n \n \n \n \n {% endfor %}\n \n
NameDescriptionDefault
{{ cssProperty.name }}{{ cssProperty.description | markdownInline | safe }}{{ cssProperty.default }}
\n\n

Learn more about customizing CSS custom properties.

\n {% endif %}\n\n {# CSS Parts #}\n {% if component.cssParts.length %}\n

Parts

\n\n \n \n \n \n \n \n \n \n {% for cssPart in component.cssParts %}\n \n \n \n \n {% endfor %}\n \n
NameDescription
{{ cssPart.name }}{{ cssPart.description | markdownInline | safe }}
\n\n

Learn more about customizing CSS parts.

\n {% endif %}\n\n {# Animations #}\n {% if component.animations.length %}\n

Animations

\n\n \n \n \n \n \n \n \n \n {% for animation in component.animations %}\n \n \n \n \n {% endfor %}\n \n
NameDescription
{{ animation.name }}{{ animation.description | markdownInline | safe }}
\n\n

Learn more about customizing animations.

\n {% endif %}\n\n {# Dependencies #}\n {% if component.dependencies.length %}\n

Dependencies

\n\n

This component automatically imports the following dependencies.

\n\n \n {% endif %}\n{% endblock %}\n" }, { "path": "docs/_includes/default.njk", "content": "\n\n \n {# Metadata #}\n \n \n \n {{ meta.title }}\n\n {# Opt out of Turbo caching #}\n \n\n {# Stylesheets #}\n \n \n \n\n {# Favicons #}\n \n\n {# Twitter Cards #}\n \n \n \n\n {# OpenGraph #}\n \n \n \n \n\n {# Shoelace #}\n \n \n \n\n {# Set the initial theme and menu states here to prevent flashing #}\n \n\n {# Turbo + Scroll positioning #}\n \n \n \n \n \n \n \n \n Skip to main content\n \n\n {# Menu toggle #}\n \n\n {# Icon toolbar #}\n
\n {# GitHub #}\n \n \n \n\n {# Twitter #}\n \n \n \n\n {# Theme selector #}\n \n \n \n \n \n \n Light\n Dark\n \n System\n \n \n
\n\n \n
\n
\n {% include 'wa-logo-icon.njk' %}\n

Shoelace is now Web Awesome!

\n
\n
\n\n
\n

Web Awesome has an even bigger library of free web components. Plus themes, utilities, patterns, and more!

\n\n

Still open source. Now with more awesome.

\n\n \n\n
\n Okay, got it\n
\n \n See What's New\n \n \n
\n
\n
\n\n
\n
\n FYI, Shoelace is no longer actively being developed\n

But it is still available for use and may receive updates as needed.

\n
\n
\n \n \n\n \n\n {# Content #}\n
\n \n
\n {% if toc %}\n
\n \n
\n {% endif %}\n\n
\n {% block content %}\n {{ content | safe }}\n {% endblock %}\n
\n
\n
\n \n\n" }, { "path": "docs/_includes/sidebar.njk", "content": "\n" }, { "path": "docs/_includes/wa-logo-icon.njk", "content": "\n" }, { "path": "docs/_utilities/active-links.cjs", "content": "function normalizePathname(pathname) {\n // Remove /index.html\n if (pathname.endsWith('/index.html')) {\n pathname = pathname.replace(/\\/index\\.html/, '');\n }\n\n // Remove trailing slashes\n return pathname.replace(/\\/$/, '');\n}\n\n/**\n * Adds a class name to links that are currently active.\n */\nmodule.exports = function (doc, options) {\n options = {\n className: 'active-link', // the class to add to active links\n pathname: undefined, // the current pathname to compare\n within: 'body', // element containing the target links\n ...options\n };\n\n const within = doc.querySelector(options.within);\n\n if (!within) {\n return doc;\n }\n\n within.querySelectorAll('a').forEach(link => {\n if (normalizePathname(options.pathname) === normalizePathname(link.pathname)) {\n link.classList.add(options.className);\n }\n });\n\n return doc;\n};\n" }, { "path": "docs/_utilities/anchor-headings.cjs", "content": "const { createSlug } = require('./strings.cjs');\n\n/**\n * Turns headings into clickable, deep linkable anchors. The provided doc should be a document object provided by JSDOM.\n * The same document will be returned with the appropriate DOM manipulations.\n */\nmodule.exports = function (doc, options) {\n options = {\n levels: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], // the headings to convert\n className: 'anchor-heading', // the class name to add\n within: 'body', // the element containing the target headings\n ...options\n };\n\n const within = doc.querySelector(options.within);\n\n if (!within) {\n return doc;\n }\n\n within.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(heading => {\n const hasAnchor = heading.querySelector('a');\n const anchor = doc.createElement('a');\n let id = heading.textContent ?? '';\n let suffix = 0;\n\n // Skip heading levels we don't care about\n if (!options.levels?.includes(heading.tagName.toLowerCase())) {\n return;\n }\n\n // Convert dots to underscores\n id = id.replace(/\\./g, '_');\n\n // Turn it into a slug\n id = createSlug(id);\n\n // Make sure it starts with a letter\n if (!/^[a-z]/i.test(id)) {\n id = `id_${id}`;\n }\n\n // Make sure the id is unique\n const originalId = id;\n while (doc.getElementById(id) !== null) {\n id = `${originalId}-${++suffix}`;\n }\n\n if (hasAnchor || !id) return;\n\n heading.setAttribute('id', id);\n anchor.setAttribute('href', `#${encodeURIComponent(id)}`);\n anchor.setAttribute('aria-label', `Direct link to \"${heading.textContent}\"`);\n\n if (options.className) {\n heading.classList.add(options.className);\n }\n\n // Append the anchor\n heading.append(anchor);\n });\n\n return doc;\n};\n" }, { "path": "docs/_utilities/cem.cjs", "content": "const customElementsManifest = require('../../dist/custom-elements.json');\n\n//\n// Export it here so we can import it elsewhere and use the same version\n//\nmodule.exports.customElementsManifest = customElementsManifest;\n\n//\n// Gets all components from custom-elements.json and returns them in a more documentation-friendly format.\n//\nmodule.exports.getAllComponents = function () {\n const allComponents = [];\n\n customElementsManifest.modules?.forEach(module => {\n module.declarations?.forEach(declaration => {\n if (declaration.customElement) {\n // Generate the dist path based on the src path and attach it to the component\n declaration.path = module.path.replace(/^src\\//, 'dist/').replace(/\\.ts$/, '.js');\n\n // Remove members that are private or don't have a description\n const members = declaration.members?.filter(member => member.description && member.privacy !== 'private');\n const methods = members?.filter(prop => prop.kind === 'method' && prop.privacy !== 'private');\n const properties = members?.filter(prop => {\n // Look for a corresponding attribute\n const attribute = declaration.attributes?.find(attr => attr.fieldName === prop.name);\n if (attribute) {\n prop.attribute = attribute.name || attribute.fieldName;\n }\n\n return prop.kind === 'field' && prop.privacy !== 'private';\n });\n allComponents.push({\n ...declaration,\n methods,\n properties\n });\n }\n });\n });\n\n // Build dependency graphs\n allComponents.forEach(component => {\n const dependencies = [];\n\n // Recursively fetch sub-dependencies\n function getDependencies(tag) {\n const cmp = allComponents.find(c => c.tagName === tag);\n if (!cmp || !Array.isArray(component.dependencies)) {\n return;\n }\n\n cmp.dependencies?.forEach(dependentTag => {\n if (!dependencies.includes(dependentTag)) {\n dependencies.push(dependentTag);\n }\n getDependencies(dependentTag);\n });\n }\n\n getDependencies(component.tagName);\n\n component.dependencies = dependencies.sort();\n });\n\n // Sort by name\n return allComponents.sort((a, b) => {\n if (a.name < b.name) return -1;\n if (a.name > b.name) return 1;\n return 0;\n });\n};\n" }, { "path": "docs/_utilities/code-previews.cjs", "content": "let count = 1;\n\nfunction escapeHtml(str) {\n return String(str).replace(/&/g, '&').replace(//g, '>').replace(/\"/g, '"');\n}\n\n/**\n * Turns code fields with the :preview suffix into interactive code previews.\n */\nmodule.exports = function (doc, options) {\n options = {\n within: 'body', // the element containing the code fields to convert\n ...options\n };\n\n const within = doc.querySelector(options.within);\n if (!within) {\n return doc;\n }\n\n within.querySelectorAll('[class*=\":preview\"]').forEach(code => {\n const pre = code.closest('pre');\n if (!pre) {\n return;\n }\n const adjacentPre = pre.nextElementSibling?.tagName.toLowerCase() === 'pre' ? pre.nextElementSibling : null;\n const reactCode = adjacentPre?.querySelector('code[class$=\"react\"]');\n const sourceGroupId = `code-preview-source-group-${count}`;\n const isExpanded = code.getAttribute('class').includes(':expanded');\n const noCodePen = code.getAttribute('class').includes(':no-codepen');\n\n count++;\n\n const htmlButton = `\n \n `;\n\n const reactButton = `\n \n `;\n\n const codePenButton = `\n \n `;\n\n const codePreview = `\n
\n
\n ${code.textContent}\n
\n \n
\n
\n\n
\n
\n 
${escapeHtml(code.textContent)}
\n
\n\n ${\n reactCode\n ? `\n
\n 
${escapeHtml(reactCode.textContent)}
\n
\n `\n : ''\n }\n
\n\n
\n \n Source\n \n \n \n \n\n ${reactCode ? ` ${htmlButton} ${reactButton} ` : ''}\n\n ${noCodePen ? '' : codePenButton}\n
\n
\n `;\n\n pre.insertAdjacentHTML('afterend', codePreview);\n pre.remove();\n\n if (adjacentPre) {\n adjacentPre.remove();\n }\n });\n\n // Wrap code preview scripts in anonymous functions so they don't run in the global scope\n doc.querySelectorAll('.code-preview__preview script').forEach(script => {\n if (script.type === 'module') {\n // Modules are already scoped\n script.textContent = script.innerHTML;\n } else {\n // Wrap non-modules in an anonymous function so they don't run in the global scope\n script.textContent = `(() => { ${script.innerHTML} })();`;\n }\n });\n\n return doc;\n};\n" }, { "path": "docs/_utilities/copy-code-buttons.cjs", "content": "let codeBlockId = 0;\n\n/**\n * Adds copy code buttons to code fields. The provided doc should be a document object provided by JSDOM. The same\n * document will be returned with the appropriate DOM manipulations.\n */\nmodule.exports = function (doc) {\n doc.querySelectorAll('pre > code').forEach(code => {\n const pre = code.closest('pre');\n const button = doc.createElement('sl-copy-button');\n\n if (!code.id) {\n code.id = `code-block-${++codeBlockId}`;\n }\n\n button.classList.add('copy-code-button');\n button.setAttribute('from', code.id);\n\n pre.append(button);\n });\n\n return doc;\n};\n" }, { "path": "docs/_utilities/external-links.cjs", "content": "const { isExternalLink } = require('./strings.cjs');\n\n/**\n * Transforms external links to make them safer and optionally add a target. The provided doc should be a document\n * object provided by JSDOM. The same document will be returned with the appropriate DOM manipulations.\n */\nmodule.exports = function (doc, options) {\n options = {\n className: 'external-link', // the class name to add to links\n noopener: true, // sets rel=\"noopener\"\n noreferrer: true, // sets rel=\"noreferrer\"\n ignore: () => false, // callback function to filter links that should be ignored\n within: 'body', // element that contains the target links\n target: '', // sets the target attribute\n ...options\n };\n\n const within = doc.querySelector(options.within);\n\n if (within) {\n within.querySelectorAll('a').forEach(link => {\n if (isExternalLink(link) && !options.ignore(link)) {\n link.classList.add(options.className);\n\n const rel = [];\n if (options.noopener) rel.push('noopener');\n if (options.noreferrer) rel.push('noreferrer');\n\n if (rel.length) {\n link.setAttribute('rel', rel.join(' '));\n }\n\n if (options.target) {\n link.setAttribute('target', options.target);\n }\n }\n });\n }\n\n return doc;\n};\n" }, { "path": "docs/_utilities/highlight-code.cjs", "content": "const Prism = require('prismjs');\nconst PrismLoader = require('prismjs/components/index.js');\n\nPrismLoader('diff');\nPrismLoader.silent = true;\n\n/** Highlights a code string. */\nfunction highlight(code, language) {\n const alias = language.replace(/^diff-/, '');\n const isDiff = /^diff-/i.test(language);\n\n // Auto-load the target language\n if (!Prism.languages[alias]) {\n PrismLoader(alias);\n\n if (!Prism.languages[alias]) {\n throw new Error(`Unsupported language for code highlighting: \"${language}\"`);\n }\n }\n\n // Register diff-* languages to use the diff grammar\n if (isDiff) {\n Prism.languages[language] = Prism.languages.diff;\n }\n\n return Prism.highlight(code, Prism.languages[language], language);\n}\n\n/**\n * Highlights all code fields that have a language parameter. If the language has a colon in its name, the first chunk\n * will be the language used and additional chunks will be applied as classes to the `
`. For example, a code field\n * tagged with \"html:preview\" will be rendered as `
`.\n *\n * The provided doc should be a document object provided by JSDOM. The same document will be returned with the\n * appropriate DOM manipulations.\n */\nmodule.exports = function (doc) {\n  doc.querySelectorAll('pre > code[class]').forEach(code => {\n    // Look for class=\"language-*\" and split colons into separate classes\n    code.classList.forEach(className => {\n      if (className.startsWith('language-')) {\n        //\n        // We use certain suffixes to indicate code previews, expanded states, etc. The class might look something like\n        // this:\n        //\n        //  class=\"language-html:preview:expanded\"\n        //\n        // The language will always come first, so we need to drop the \"language-\" prefix and everything after the first\n        // color to get the highlighter language.\n        //\n        const language = className.replace(/^language-/, '').split(':')[0];\n\n        try {\n          code.innerHTML = highlight(code.textContent ?? '', language);\n        } catch (err) {\n          // Language not found, skip it\n        }\n      }\n    });\n  });\n\n  return doc;\n};\n"
  },
  {
    "path": "docs/_utilities/markdown.cjs",
    "content": "const MarkdownIt = require('markdown-it');\nconst markdownItContainer = require('markdown-it-container');\nconst markdownItIns = require('markdown-it-ins');\nconst markdownItKbd = require('markdown-it-kbd');\nconst markdownItMark = require('markdown-it-mark');\nconst markdownItReplaceIt = require('markdown-it-replace-it');\n\nconst markdown = MarkdownIt({\n  html: true,\n  xhtmlOut: false,\n  breaks: false,\n  langPrefix: 'language-',\n  linkify: false,\n  typographer: false\n});\n\n// Third-party plugins\nmarkdown.use(markdownItContainer);\nmarkdown.use(markdownItIns);\nmarkdown.use(markdownItKbd);\nmarkdown.use(markdownItMark);\nmarkdown.use(markdownItReplaceIt);\n\n// Callouts\n['tip', 'warning', 'danger'].forEach(type => {\n  markdown.use(markdownItContainer, type, {\n    render: function (tokens, idx) {\n      if (tokens[idx].nesting === 1) {\n        return `
`;\n      }\n      return '
\\n';\n    }\n  });\n});\n\n// Asides\nmarkdown.use(markdownItContainer, 'aside', {\n  render: function (tokens, idx) {\n    if (tokens[idx].nesting === 1) {\n      return `\\n';\n  }\n});\n\n// Details\nmarkdown.use(markdownItContainer, 'details', {\n  validate: params => params.trim().match(/^details\\s+(.*)$/),\n  render: (tokens, idx) => {\n    const m = tokens[idx].info.trim().match(/^details\\s+(.*)$/);\n    if (tokens[idx].nesting === 1) {\n      return `
\\n${markdown.utils.escapeHtml(m[1])}\\n`;\n    }\n    return '
\\n';\n  }\n});\n\n// Replace [#1234] with a link to GitHub issues\nmarkdownItReplaceIt.replacements.push({\n  name: 'github-issues',\n  re: /\\[#([0-9]+)\\]/gs,\n  sub: '#$1',\n  html: true,\n  default: true\n});\n\nmodule.exports = markdown;\n"
  },
  {
    "path": "docs/_utilities/prettier.cjs",
    "content": "const { format } = require('prettier');\n\n/** Formats markup using prettier. */\nmodule.exports = function (content, options) {\n  options = {\n    arrowParens: 'avoid',\n    bracketSpacing: true,\n    htmlWhitespaceSensitivity: 'css',\n    insertPragma: false,\n    bracketSameLine: false,\n    jsxSingleQuote: false,\n    parser: 'html',\n    printWidth: 120,\n    proseWrap: 'preserve',\n    quoteProps: 'as-needed',\n    requirePragma: false,\n    semi: true,\n    singleQuote: true,\n    tabWidth: 2,\n    trailingComma: 'none',\n    useTabs: false,\n    ...options\n  };\n\n  return format(content, options);\n};\n"
  },
  {
    "path": "docs/_utilities/replacer.cjs",
    "content": "/**\n * @typedef {object} Replacement\n * @property {string | RegExp} pattern\n * @property {string} replacement\n */\n\n/**\n * @typedef {Array} Replacements\n */\n\n/**\n * @param {String} rawContent\n * @param {Replacements} replacements\n */\nmodule.exports = function (rawContent, replacements) {\n  let content = rawContent;\n  replacements.forEach(replacement => {\n    content = content.replaceAll(replacement.pattern, replacement.replacement);\n  });\n\n  return content;\n};\n"
  },
  {
    "path": "docs/_utilities/scrolling-tables.cjs",
    "content": "/**\n * Turns headings into clickable, deep linkable anchors. The provided doc should be a document object provided by JSDOM.\n * The same document will be returned with the appropriate DOM manipulations.\n */\nmodule.exports = function (doc, options) {\n  const tables = [...doc.querySelectorAll('table')];\n\n  options = {\n    className: 'table-scroll', // the class name to add to the table's container\n    ...options\n  };\n\n  tables.forEach(table => {\n    const div = doc.createElement('div');\n    div.classList.add(options.className);\n    table.insertAdjacentElement('beforebegin', div);\n    div.append(table);\n  });\n\n  return doc;\n};\n"
  },
  {
    "path": "docs/_utilities/strings.cjs",
    "content": "const slugify = require('slugify');\n\n/** Creates a slug from an arbitrary string of text. */\nmodule.exports.createSlug = function (text) {\n  return slugify(String(text), {\n    remove: /[^\\w|\\s]/g,\n    lower: true\n  });\n};\n\n/** Determines whether or not a link is external. */\nmodule.exports.isExternalLink = function (link) {\n  // We use the \"internal\" hostname when initializing JSDOM so we know that those are local links\n  if (!link.hostname || link.hostname === 'internal') return false;\n  return true;\n};\n"
  },
  {
    "path": "docs/_utilities/table-of-contents.cjs",
    "content": "/**\n * Generates an in-page table of contents based on headings.\n */\nmodule.exports = function (doc, options) {\n  options = {\n    levels: ['h2'], // headings to include (they must have an id)\n    container: 'nav', // the container to append links to\n    listItem: true, // if true, links will be wrapped in 
  • \n    within: 'body', // the element containing the headings to summarize\n    ...options\n  };\n\n  const container = doc.querySelector(options.container);\n  const within = doc.querySelector(options.within);\n  const headingSelector = options.levels.map(h => `${h}[id]`).join(', ');\n\n  if (!container || !within) {\n    return doc;\n  }\n\n  within.querySelectorAll(headingSelector).forEach(heading => {\n    const listItem = doc.createElement('li');\n    const link = doc.createElement('a');\n    const level = heading.tagName.slice(1);\n\n    link.href = `#${heading.id}`;\n    link.textContent = heading.textContent;\n\n    if (options.listItem) {\n      // List item + link\n      listItem.setAttribute('data-level', level);\n      listItem.append(link);\n      container.append(listItem);\n    } else {\n      // Link only\n      link.setAttribute('data-level', level);\n      container.append(link);\n    }\n  });\n\n  return doc;\n};\n"
  },
  {
    "path": "docs/_utilities/typography.cjs",
    "content": "const smartquotes = require('smartquotes');\n\nsmartquotes.replacements.push([/---/g, '\\u2014']); // em dash\nsmartquotes.replacements.push([/--/g, '\\u2013']); // en dash\nsmartquotes.replacements.push([/\\.\\.\\./g, '\\u2026']); // ellipsis\nsmartquotes.replacements.push([/\\(c\\)/gi, '\\u00A9']); // copyright\nsmartquotes.replacements.push([/\\(r\\)/gi, '\\u00AE']); // registered trademark\nsmartquotes.replacements.push([/\\?!/g, '\\u2048']); // ?!\nsmartquotes.replacements.push([/!!/g, '\\u203C']); // !!\nsmartquotes.replacements.push([/\\?\\?/g, '\\u2047']); // ??\nsmartquotes.replacements.push([/([0-9]\\s?)-(\\s?[0-9])/g, '$1\\u2013$2']); // number ranges use en dash\n\n/**\n * Improves typography by adding smart quotes and similar corrections within the specified element(s).\n *\n * The provided doc should be a document object provided by JSDOM. The same document will be returned with the\n * appropriate DOM manipulations.\n */\nmodule.exports = function (doc, selector = 'body') {\n  const elements = [...doc.querySelectorAll(selector)];\n  elements.forEach(el => smartquotes.element(el));\n  return doc;\n};\n"
  },
  {
    "path": "docs/assets/examples/include.html",
    "content": "
    \n  The content in this example was included from\n  a separate file. 🤯\n
    \n
    \n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n  aliqua. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla urna porttitor rhoncus dolor purus\n  non enim. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Gravida in fermentum et sollicitudin.\n
    \n
    \n  Cursus sit amet dictum sit amet justo donec enim. Sed id semper risus in hendrerit gravida. Viverra accumsan in nisl\n  nisi scelerisque eu ultrices vitae. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Nec\n  ullamcorper sit amet risus nullam. Et egestas quis ipsum suspendisse ultrices gravida dictum. Lorem donec massa sapien\n  faucibus et molestie. A cras semper auctor neque vitae.\n
    \n\n\n"
  },
  {
    "path": "docs/assets/scripts/code-previews.js",
    "content": "(() => {\n  function convertModuleLinks(html) {\n    html = html\n      .replace(/@shoelace-style\\/shoelace/g, `https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}`)\n      .replace(/from 'react'/g, `from 'https://esm.sh/react@${reactVersion}'`)\n      .replace(/from \"react\"/g, `from \"https://esm.sh/react@${reactVersion}\"`);\n\n    return html;\n  }\n\n  function getAdjacentExample(name, pre) {\n    let currentPre = pre.nextElementSibling;\n\n    while (currentPre?.tagName.toLowerCase() === 'pre') {\n      if (currentPre?.getAttribute('data-lang').split(' ').includes(name)) {\n        return currentPre;\n      }\n\n      currentPre = currentPre.nextElementSibling;\n    }\n\n    return null;\n  }\n\n  function runScript(script) {\n    const newScript = document.createElement('script');\n\n    if (script.type === 'module') {\n      newScript.type = 'module';\n      newScript.textContent = script.innerHTML;\n    } else {\n      newScript.appendChild(document.createTextNode(`(() => { ${script.innerHTML} })();`));\n    }\n\n    script.parentNode.replaceChild(newScript, script);\n  }\n\n  function getFlavor() {\n    return sessionStorage.getItem('flavor') || 'html';\n  }\n\n  function setFlavor(newFlavor) {\n    flavor = ['html', 'react'].includes(newFlavor) ? newFlavor : 'html';\n    sessionStorage.setItem('flavor', flavor);\n\n    // Set the flavor class on the body\n    document.documentElement.classList.toggle('flavor-html', flavor === 'html');\n    document.documentElement.classList.toggle('flavor-react', flavor === 'react');\n  }\n\n  function syncFlavor() {\n    setFlavor(getFlavor());\n\n    document.querySelectorAll('.code-preview__button--html').forEach(preview => {\n      if (flavor === 'html') {\n        preview.classList.add('code-preview__button--selected');\n      }\n    });\n\n    document.querySelectorAll('.code-preview__button--react').forEach(preview => {\n      if (flavor === 'react') {\n        preview.classList.add('code-preview__button--selected');\n      }\n    });\n  }\n\n  const shoelaceVersion = document.documentElement.getAttribute('data-shoelace-version');\n  const reactVersion = '^18';\n  const cdndir = 'cdn';\n  const npmdir = 'dist';\n  let flavor = getFlavor();\n  let count = 1;\n\n  // We need the version to open\n  if (!shoelaceVersion) {\n    throw new Error('The data-shoelace-version attribute is missing from .');\n  }\n\n  // Sync flavor UI on page load\n  syncFlavor();\n\n  //\n  // Resizing previews\n  //\n  document.addEventListener('mousedown', handleResizerDrag);\n  document.addEventListener('touchstart', handleResizerDrag, { passive: true });\n\n  function handleResizerDrag(event) {\n    const resizer = event.target.closest('.code-preview__resizer');\n    const preview = event.target.closest('.code-preview__preview');\n\n    if (!resizer || !preview) return;\n\n    let startX = event.changedTouches ? event.changedTouches[0].pageX : event.clientX;\n    let startWidth = parseInt(document.defaultView.getComputedStyle(preview).width, 10);\n\n    event.preventDefault();\n    preview.classList.add('code-preview__preview--dragging');\n    document.documentElement.addEventListener('mousemove', dragMove);\n    document.documentElement.addEventListener('touchmove', dragMove);\n    document.documentElement.addEventListener('mouseup', dragStop);\n    document.documentElement.addEventListener('touchend', dragStop);\n\n    function dragMove(event) {\n      const width = startWidth + (event.changedTouches ? event.changedTouches[0].pageX : event.pageX) - startX;\n      preview.style.width = `${width}px`;\n    }\n\n    function dragStop() {\n      preview.classList.remove('code-preview__preview--dragging');\n      document.documentElement.removeEventListener('mousemove', dragMove);\n      document.documentElement.removeEventListener('touchmove', dragMove);\n      document.documentElement.removeEventListener('mouseup', dragStop);\n      document.documentElement.removeEventListener('touchend', dragStop);\n    }\n  }\n\n  //\n  // Toggle source mode\n  //\n  document.addEventListener('click', event => {\n    const button = event.target.closest('.code-preview__button');\n    const codeBlock = button?.closest('.code-preview');\n\n    if (button?.classList.contains('code-preview__button--html')) {\n      // Show HTML\n      setFlavor('html');\n      toggleSource(codeBlock, true);\n    } else if (button?.classList.contains('code-preview__button--react')) {\n      // Show React\n      setFlavor('react');\n      toggleSource(codeBlock, true);\n    } else if (button?.classList.contains('code-preview__toggle')) {\n      // Toggle source\n      toggleSource(codeBlock);\n    } else {\n      return;\n    }\n\n    // Update flavor buttons\n    [...document.querySelectorAll('.code-preview')].forEach(cb => {\n      cb.querySelector('.code-preview__button--html')?.classList.toggle(\n        'code-preview__button--selected',\n        flavor === 'html'\n      );\n      cb.querySelector('.code-preview__button--react')?.classList.toggle(\n        'code-preview__button--selected',\n        flavor === 'react'\n      );\n    });\n  });\n\n  function toggleSource(codeBlock, force) {\n    codeBlock.classList.toggle('code-preview--expanded', force);\n    event.target.setAttribute('aria-expanded', codeBlock.classList.contains('code-preview--expanded'));\n  }\n\n  //\n  // Open in CodePen\n  //\n  document.addEventListener('click', event => {\n    const button = event.target.closest('button');\n\n    if (button?.classList.contains('code-preview__button--codepen')) {\n      const codeBlock = button.closest('.code-preview');\n      const htmlExample = codeBlock.querySelector('.code-preview__source--html > pre > code')?.textContent;\n      const reactExample = codeBlock.querySelector('.code-preview__source--react > pre > code')?.textContent;\n      const isReact = flavor === 'react' && typeof reactExample === 'string';\n      const theme = document.documentElement.classList.contains('sl-theme-dark') ? 'dark' : 'light';\n      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n      const isDark = theme === 'dark' || (theme === 'auto' && prefersDark);\n      const editors = isReact ? '0010' : '1000';\n      let htmlTemplate = '';\n      let jsTemplate = '';\n      let cssTemplate = '';\n\n      const form = document.createElement('form');\n      form.action = 'https://codepen.io/pen/define';\n      form.method = 'POST';\n      form.target = '_blank';\n\n      // HTML templates\n      if (!isReact) {\n        htmlTemplate =\n          `\\n` +\n          `\\n${htmlExample}`;\n        jsTemplate = '';\n      }\n\n      // React templates\n      if (isReact) {\n        htmlTemplate = '
    ';\n        jsTemplate =\n          `import React from 'https://esm.sh/react@${reactVersion}';\\n` +\n          `import ReactDOM from 'https://esm.sh/react-dom@${reactVersion}';\\n` +\n          `import { setBasePath } from 'https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/utilities/base-path';\\n` +\n          `\\n` +\n          `// Set the base path for Shoelace assets\\n` +\n          `setBasePath('https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${npmdir}/')\\n` +\n          `\\n${convertModuleLinks(reactExample)}\\n` +\n          `\\n` +\n          `ReactDOM.render(, document.getElementById('root'));`;\n      }\n\n      // CSS templates\n      cssTemplate =\n        `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/themes/${\n          isDark ? 'dark' : 'light'\n        }.css';\\n` +\n        '\\n' +\n        'body {\\n' +\n        '  font: 16px sans-serif;\\n' +\n        '  background-color: var(--sl-color-neutral-0);\\n' +\n        '  color: var(--sl-color-neutral-900);\\n' +\n        '  padding: 1rem;\\n' +\n        '}';\n\n      // Docs: https://blog.codepen.io/documentation/prefill/\n      const data = {\n        title: '',\n        description: '',\n        tags: ['shoelace', 'web components'],\n        editors,\n        head: ``,\n        html_classes: `sl-theme-${isDark ? 'dark' : 'light'}`,\n        css_external: ``,\n        js_external: ``,\n        js_module: true,\n        js_pre_processor: isReact ? 'babel' : 'none',\n        html: htmlTemplate,\n        css: cssTemplate,\n        js: jsTemplate\n      };\n\n      const input = document.createElement('input');\n      input.type = 'hidden';\n      input.name = 'data';\n      input.value = JSON.stringify(data);\n      form.append(input);\n\n      document.documentElement.append(form);\n      form.submit();\n      form.remove();\n    }\n  });\n\n  // Set the initial flavor\n  window.addEventListener('turbo:load', syncFlavor);\n})();\n"
  },
  {
    "path": "docs/assets/scripts/docs.js",
    "content": "//\n// Sidebar\n//\n// When the sidebar is hidden, we apply the inert attribute to prevent focus from reaching it. Due to the many states\n// the sidebar can have (e.g. static, hidden, expanded), we test for visibility by checking to see if it's placed\n// offscreen or not. Then, on resize/transition we make sure to update the attribute accordingly.\n//\n(() => {\n  function getSidebar() {\n    return document.getElementById('sidebar');\n  }\n\n  function isSidebarOpen() {\n    return document.documentElement.classList.contains('sidebar-open');\n  }\n\n  function isSidebarVisible() {\n    return getSidebar().getBoundingClientRect().x >= 0;\n  }\n\n  function toggleSidebar(force) {\n    const isOpen = typeof force === 'boolean' ? force : !isSidebarOpen();\n    return document.documentElement.classList.toggle('sidebar-open', isOpen);\n  }\n\n  function updateInert() {\n    getSidebar().inert = !isSidebarVisible();\n  }\n\n  // Toggle the menu\n  document.addEventListener('click', event => {\n    const menuToggle = event.target.closest('#menu-toggle');\n    if (!menuToggle) return;\n    toggleSidebar();\n  });\n\n  // Update the sidebar's inert state when the window resizes and when the sidebar transitions\n  window.addEventListener('resize', () => toggleSidebar(false));\n\n  document.addEventListener('transitionend', event => {\n    const sidebar = event.target.closest('#sidebar');\n    if (!sidebar) return;\n    updateInert();\n  });\n\n  // Close when a menu item is selected on mobile\n  document.addEventListener('click', event => {\n    const sidebar = event.target.closest('#sidebar');\n    const link = event.target.closest('a');\n    if (!sidebar || !link) return;\n\n    if (isSidebarOpen()) {\n      toggleSidebar();\n    }\n  });\n\n  // Close when open and escape is pressed\n  document.addEventListener('keydown', event => {\n    if (event.key === 'Escape' && isSidebarOpen()) {\n      event.stopImmediatePropagation();\n      toggleSidebar();\n    }\n  });\n\n  // Close when clicking outside of the sidebar\n  document.addEventListener('mousedown', event => {\n    if (isSidebarOpen() & !event.target?.closest('#sidebar, #menu-toggle')) {\n      event.stopImmediatePropagation();\n      toggleSidebar();\n    }\n  });\n\n  updateInert();\n})();\n\n//\n// Theme selector\n//\n(() => {\n  function getTheme() {\n    return localStorage.getItem('theme') || 'auto';\n  }\n\n  function isDark() {\n    if (theme === 'auto') {\n      return window.matchMedia('(prefers-color-scheme: dark)').matches;\n    }\n    return theme === 'dark';\n  }\n\n  function setTheme(newTheme) {\n    theme = newTheme;\n    localStorage.setItem('theme', theme);\n\n    // Update the UI\n    updateSelection();\n\n    // Toggle the dark mode class\n    document.documentElement.classList.toggle('sl-theme-dark', isDark());\n  }\n\n  function updateSelection() {\n    const menu = document.querySelector('#theme-selector sl-menu');\n    if (!menu) return;\n    [...menu.querySelectorAll('sl-menu-item')].map(item => (item.checked = item.getAttribute('value') === theme));\n  }\n\n  let theme = getTheme();\n\n  // Selection is not preserved when changing page, so update when opening dropdown\n  document.addEventListener('sl-show', event => {\n    const themeSelector = event.target.closest('#theme-selector');\n    if (!themeSelector) return;\n    updateSelection();\n  });\n\n  // Listen for selections\n  document.addEventListener('sl-select', event => {\n    const menu = event.target.closest('#theme-selector sl-menu');\n    if (!menu) return;\n    setTheme(event.detail.item.value);\n  });\n\n  // Update the theme when the preference changes\n  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setTheme(theme));\n\n  // Toggle with backslash\n  document.addEventListener('keydown', event => {\n    if (\n      event.key === '\\\\' &&\n      !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))\n    ) {\n      event.preventDefault();\n      setTheme(isDark() ? 'light' : 'dark');\n    }\n  });\n\n  // Set the initial theme and sync the UI\n  setTheme(theme);\n})();\n\n//\n// Open details when printing\n//\n(() => {\n  const detailsOpenOnPrint = new Set();\n\n  window.addEventListener('beforeprint', () => {\n    detailsOpenOnPrint.clear();\n    document.querySelectorAll('details').forEach(details => {\n      if (details.open) {\n        detailsOpenOnPrint.add(details);\n      }\n      details.open = true;\n    });\n  });\n\n  window.addEventListener('afterprint', () => {\n    document.querySelectorAll('details').forEach(details => {\n      details.open = detailsOpenOnPrint.has(details);\n    });\n    detailsOpenOnPrint.clear();\n  });\n})();\n\n//\n// Smooth links\n//\n(() => {\n  document.addEventListener('click', event => {\n    const link = event.target.closest('a');\n    const id = (link?.hash ?? '').substr(1);\n    const isFragment = link?.hasAttribute('href') && link?.getAttribute('href').startsWith('#');\n\n    if (!link || !isFragment || link.getAttribute('data-smooth-link') === 'false') {\n      return;\n    }\n\n    // Scroll to the top\n    if (link.hash === '') {\n      event.preventDefault();\n      window.scroll({ top: 0, behavior: 'smooth' });\n      history.pushState(undefined, undefined, location.pathname);\n    }\n\n    // Scroll to an id\n    if (id) {\n      const target = document.getElementById(id);\n\n      if (target) {\n        event.preventDefault();\n        window.scroll({ top: target.offsetTop, behavior: 'smooth' });\n        history.pushState(undefined, undefined, `#${id}`);\n      }\n    }\n  });\n})();\n\n//\n// Table of Contents scrollspy\n//\n(() => {\n  // This will be stale if its not a function.\n  const getLinks = () => [...document.querySelectorAll('.content__toc a')];\n  const linkTargets = new WeakMap();\n  const visibleTargets = new WeakSet();\n  const observer = new IntersectionObserver(handleIntersect, { rootMargin: '0px 0px' });\n  let debounce;\n\n  function handleIntersect(entries) {\n    entries.forEach(entry => {\n      // Remember which targets are visible\n      if (entry.isIntersecting) {\n        visibleTargets.add(entry.target);\n      } else {\n        visibleTargets.delete(entry.target);\n      }\n    });\n\n    updateActiveLinks();\n  }\n\n  function updateActiveLinks() {\n    const links = getLinks();\n    // Find the first visible target and activate the respective link\n    links.find(link => {\n      const target = linkTargets.get(link);\n\n      if (target && visibleTargets.has(target)) {\n        links.forEach(el => el.classList.toggle('active', el === link));\n        return true;\n      }\n\n      return false;\n    });\n  }\n\n  // Observe link targets\n  function observeLinks() {\n    getLinks().forEach(link => {\n      const hash = link.hash.slice(1);\n      const target = hash ? document.querySelector(`.content__body #${hash}`) : null;\n\n      if (target) {\n        linkTargets.set(link, target);\n        observer.observe(target);\n      }\n    });\n  }\n\n  observeLinks();\n\n  document.addEventListener('turbo:load', updateActiveLinks);\n  document.addEventListener('turbo:load', observeLinks);\n})();\n\n//\n// Show custom versions in the sidebar\n//\n(() => {\n  function updateVersion() {\n    const el = document.querySelector('.sidebar-version');\n    if (!el) return;\n\n    if (location.hostname === 'next.shoelace.style') el.textContent = 'Next';\n    if (location.hostname === 'localhost') el.textContent = 'Development';\n  }\n\n  updateVersion();\n\n  document.addEventListener('turbo:load', updateVersion);\n})();\n"
  },
  {
    "path": "docs/assets/scripts/search.js",
    "content": "(() => {\n  // Append the search dialog to the body\n  const siteSearch = document.createElement('div');\n  const scrollbarWidth = Math.abs(window.innerWidth - document.documentElement.clientWidth);\n\n  siteSearch.classList.add('search');\n  siteSearch.innerHTML = `\n    
    \n    \n      
    \n        
    \n          
    \n            \n            \n            \n          
    \n        
    \n        
    \n          \n          
    No matching pages
    \n        
    \n        
    \n          ↑ ↓ Navigate\n          ↲ Select\n          Esc Close\n        
    \n      
    \n        \n  `;\n\n  const overlay = siteSearch.querySelector('.search__overlay');\n  const dialog = siteSearch.querySelector('.search__dialog');\n  const input = siteSearch.querySelector('.search__input');\n  const clearButton = siteSearch.querySelector('.search__clear-button');\n  const results = siteSearch.querySelector('.search__results');\n  const version = document.documentElement.getAttribute('data-shoelace-version');\n  const key = `search_${version}`;\n  const searchDebounce = 50;\n  const animationDuration = 150;\n  let isShowing = false;\n  let searchTimeout;\n  let searchIndex;\n  let map;\n\n  const loadSearchIndex = new Promise(resolve => {\n    const cache = localStorage.getItem(key);\n    const wait = 'requestIdleCallback' in window ? requestIdleCallback : requestAnimationFrame;\n\n    // Cleanup older search indices (everything before this version)\n    try {\n      const items = { ...localStorage };\n\n      Object.keys(items).forEach(k => {\n        if (key > k) {\n          localStorage.removeItem(k);\n        }\n      });\n    } catch {\n      /* do nothing */\n    }\n\n    // Look for a cached index\n    try {\n      if (cache) {\n        const data = JSON.parse(cache);\n\n        searchIndex = window.lunr.Index.load(data.searchIndex);\n        map = data.map;\n\n        return resolve();\n      }\n    } catch {\n      /* do nothing */\n    }\n\n    // Wait until idle to fetch the index\n    wait(() => {\n      fetch('/assets/search.json')\n        .then(res => res.json())\n        .then(data => {\n          if (!window.lunr) {\n            console.error('The Lunr search client has not yet been loaded.');\n          }\n\n          searchIndex = window.lunr.Index.load(data.searchIndex);\n          map = data.map;\n\n          // Cache the search index for this version\n          if (version) {\n            try {\n              localStorage.setItem(key, JSON.stringify(data));\n            } catch (err) {\n              console.warn(`Unable to cache the search index: ${err}`);\n            }\n          }\n\n          resolve();\n        });\n    });\n  });\n\n  async function show() {\n    isShowing = true;\n    document.body.append(siteSearch);\n    document.body.classList.add('search-visible');\n    document.body.style.setProperty('--docs-search-scroll-lock-size', `${scrollbarWidth}px`);\n    clearButton.hidden = true;\n    requestAnimationFrame(() => input.focus());\n    updateResults();\n\n    dialog.showModal();\n\n    await Promise.all([\n      dialog.animate(\n        [\n          { opacity: 0, transform: 'scale(.9)', transformOrigin: 'top' },\n          { opacity: 1, transform: 'scale(1)', transformOrigin: 'top' }\n        ],\n        { duration: animationDuration }\n      ).finished,\n      overlay.animate([{ opacity: 0 }, { opacity: 1 }], { duration: animationDuration }).finished\n    ]);\n\n    dialog.addEventListener('mousedown', handleMouseDown);\n    dialog.addEventListener('keydown', handleKeyDown);\n  }\n\n  async function hide() {\n    isShowing = false;\n\n    await Promise.all([\n      dialog.animate(\n        [\n          { opacity: 1, transform: 'scale(1)', transformOrigin: 'top' },\n          { opacity: 0, transform: 'scale(.9)', transformOrigin: 'top' }\n        ],\n        { duration: animationDuration }\n      ).finished,\n      overlay.animate([{ opacity: 1 }, { opacity: 0 }], { duration: animationDuration }).finished\n    ]);\n\n    dialog.close();\n\n    input.blur(); // otherwise Safari will scroll to the bottom of the page on close\n    input.value = '';\n    document.body.classList.remove('search-visible');\n    document.body.style.removeProperty('--docs-search-scroll-lock-size');\n    siteSearch.remove();\n    updateResults();\n\n    dialog.removeEventListener('mousedown', handleMouseDown);\n    dialog.removeEventListener('keydown', handleKeyDown);\n  }\n\n  function handleInput() {\n    clearButton.hidden = input.value === '';\n\n    // Debounce search queries\n    clearTimeout(searchTimeout);\n    searchTimeout = setTimeout(() => updateResults(input.value), searchDebounce);\n  }\n\n  function handleClear() {\n    clearButton.hidden = true;\n    input.value = '';\n    input.focus();\n    updateResults();\n  }\n\n  function handleMouseDown(event) {\n    if (!event.target.closest('.search__content')) {\n      hide();\n    }\n  }\n\n  function handleKeyDown(event) {\n    // Close when pressing escape\n    if (event.key === 'Escape') {\n      event.preventDefault(); // prevent  from closing immediately so it can animate\n      event.stopImmediatePropagation();\n      hide();\n      return;\n    }\n\n    // Handle keyboard selections\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End', 'Enter'].includes(event.key)) {\n      event.preventDefault();\n\n      const currentEl = results.querySelector('[data-selected=\"true\"]');\n      const items = [...results.querySelectorAll('li')];\n      const index = items.indexOf(currentEl);\n      let nextEl;\n\n      if (items.length === 0) {\n        return;\n      }\n\n      switch (event.key) {\n        case 'ArrowUp':\n          nextEl = items[Math.max(0, index - 1)];\n          break;\n        case 'ArrowDown':\n          nextEl = items[Math.min(items.length - 1, index + 1)];\n          break;\n        case 'Home':\n          nextEl = items[0];\n          break;\n        case 'End':\n          nextEl = items[items.length - 1];\n          break;\n        case 'Enter':\n          currentEl?.querySelector('a')?.click();\n          break;\n      }\n\n      // Update the selected item\n      items.forEach(item => {\n        if (item === nextEl) {\n          input.setAttribute('aria-activedescendant', item.id);\n          item.setAttribute('data-selected', 'true');\n          nextEl.scrollIntoView({ block: 'nearest' });\n        } else {\n          item.setAttribute('data-selected', 'false');\n        }\n      });\n    }\n  }\n\n  async function updateResults(query = '') {\n    try {\n      await loadSearchIndex;\n\n      const hasQuery = query.length > 0;\n      const searchTerms = query\n        .split(' ')\n        .map((term, index, arr) => {\n          // Search API: https://lunrjs.com/guides/searching.html\n          if (index === arr.length - 1) {\n            // The last term is not mandatory and 1x fuzzy. We also duplicate it with a wildcard to match partial words\n            // as the user types.\n            return `${term}~1 ${term}*`;\n          } else {\n            // All other terms are mandatory and 1x fuzzy\n            return `+${term}~1`;\n          }\n        })\n        .join(' ');\n      const matches = hasQuery ? searchIndex.search(searchTerms) : [];\n      const hasResults = hasQuery && matches.length > 0;\n\n      siteSearch.classList.toggle('search--has-results', hasQuery && hasResults);\n      siteSearch.classList.toggle('search--no-results', hasQuery && !hasResults);\n\n      input.setAttribute('aria-activedescendant', '');\n      results.innerHTML = '';\n\n      matches.forEach((match, index) => {\n        const page = map[match.ref];\n        const li = document.createElement('li');\n        const a = document.createElement('a');\n        const displayTitle = page.title ?? '';\n        const displayDescription = page.description ?? '';\n        const displayUrl = page.url.replace(/^\\//, '').replace(/\\/$/, '');\n        let icon = 'file-text';\n\n        a.setAttribute('role', 'option');\n        a.setAttribute('id', `search-result-item-${match.ref}`);\n\n        if (page.url.includes('getting-started/')) {\n          icon = 'lightbulb';\n        }\n        if (page.url.includes('resources/')) {\n          icon = 'book';\n        }\n        if (page.url.includes('components/')) {\n          icon = 'puzzle';\n        }\n        if (page.url.includes('tokens/')) {\n          icon = 'palette2';\n        }\n        if (page.url.includes('utilities/')) {\n          icon = 'wrench';\n        }\n        if (page.url.includes('tutorials/')) {\n          icon = 'joystick';\n        }\n\n        li.classList.add('search__result');\n        li.setAttribute('role', 'option');\n        li.setAttribute('id', `search-result-item-${match.ref}`);\n        li.setAttribute('data-selected', index === 0 ? 'true' : 'false');\n\n        a.href = page.url;\n        a.innerHTML = `\n          
    \n            \n          
    \n          
    \n            
    \n            
    \n            
    \n          
    \n        `;\n        a.querySelector('.search__result-title').textContent = displayTitle;\n        a.querySelector('.search__result-description').textContent = displayDescription;\n        a.querySelector('.search__result-url').textContent = displayUrl;\n\n        li.appendChild(a);\n        results.appendChild(li);\n      });\n    } catch {\n      // Ignore query errors as the user types\n    }\n  }\n\n  // Show the search dialog when clicking on data-plugin=\"search\"\n  document.addEventListener('click', event => {\n    const searchButton = event.target.closest('[data-plugin=\"search\"]');\n    if (searchButton) {\n      show();\n    }\n  });\n\n  // Show the search dialog when slash (or CMD+K) is pressed and focus is not inside a form element\n  document.addEventListener('keydown', event => {\n    if (\n      !isShowing &&\n      (event.key === '/' || (event.key === 'k' && (event.metaKey || event.ctrlKey))) &&\n      !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))\n    ) {\n      event.preventDefault();\n      show();\n    }\n  });\n\n  // Purge cache when we press CMD+CTRL+R\n  document.addEventListener('keydown', event => {\n    if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key === 'r') {\n      localStorage.clear();\n    }\n  });\n\n  input.addEventListener('input', handleInput);\n  clearButton.addEventListener('click', handleClear);\n\n  // Close when a result is selected\n  results.addEventListener('click', event => {\n    if (event.target.closest('a')) {\n      hide();\n    }\n  });\n\n  // We're using Turbo, so when a user searches for something, visits a result, and presses the back button, the search\n  // UI will still be visible but not interactive. This removes the search UI when Turbo renders a page so they don't\n  // get trapped.\n  window.addEventListener('turbo:render', () => {\n    document.body.classList.remove('search-visible');\n    document.querySelectorAll('.search__overlay, .search__dialog').forEach(el => el.remove());\n  });\n})();\n"
  },
  {
    "path": "docs/assets/scripts/turbo.js",
    "content": "import * as Turbo from 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm';\n\n(() => {\n  if (!window.scrollPositions) {\n    window.scrollPositions = {};\n  }\n\n  function preserveScroll() {\n    document.querySelectorAll('[data-preserve-scroll]').forEach(element => {\n      scrollPositions[element.id] = element.scrollTop;\n    });\n  }\n\n  function restoreScroll(event) {\n    document.querySelectorAll('[data-preserve-scroll]').forEach(element => {\n      element.scrollTop = scrollPositions[element.id];\n    });\n\n    if (event.detail && event.detail.newBody) {\n      event.detail.newBody.querySelectorAll('[data-preserve-scroll').forEach(element => {\n        element.scrollTop = scrollPositions[element.id];\n      });\n    }\n  }\n\n  window.addEventListener('turbo:before-cache', preserveScroll);\n  window.addEventListener('turbo:before-render', restoreScroll);\n  window.addEventListener('turbo:render', restoreScroll);\n})();\n"
  },
  {
    "path": "docs/assets/styles/code-previews.css",
    "content": "/* Interactive code blocks */\n.code-preview {\n  position: relative;\n  border-radius: 3px;\n  background-color: var(--sl-color-neutral-50);\n  margin-bottom: 1.5rem;\n}\n\n.code-preview__preview {\n  position: relative;\n  border: solid 1px var(--sl-color-neutral-200);\n  border-bottom: none;\n  border-top-left-radius: 3px;\n  border-top-right-radius: 3px;\n  background-color: var(--sl-color-neutral-0);\n  min-width: 20rem;\n  max-width: 100%;\n  padding: 1.5rem 3.25rem 1.5rem 1.5rem;\n}\n\n/* Block the preview while dragging to prevent iframes from intercepting drag events */\n.code-preview__preview--dragging:after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: ew-resize;\n}\n\n.code-preview__resizer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 1.75rem;\n  font-size: 20px;\n  color: var(--sl-color-neutral-600);\n  background-color: var(--sl-color-neutral-0);\n  border-left: solid 1px var(--sl-color-neutral-200);\n  border-top-right-radius: 3px;\n  cursor: ew-resize;\n}\n\n@media screen and (max-width: 600px) {\n  .code-preview__preview {\n    padding-right: 1.5rem;\n  }\n\n  .code-preview__resizer {\n    display: none;\n  }\n}\n\n.code-preview__source {\n  border: solid 1px var(--sl-color-neutral-200);\n  border-bottom: none;\n  border-radius: 0 !important;\n  display: none;\n}\n\n.code-preview--expanded .code-preview__source {\n  display: block;\n}\n\n.code-preview__source pre {\n  margin: 0;\n}\n\n.code-preview__buttons {\n  position: relative;\n  border: solid 1px var(--sl-color-neutral-200);\n  border-bottom-left-radius: 3px;\n  border-bottom-right-radius: 3px;\n  display: flex;\n}\n\n.code-preview__button {\n  flex: 0 0 auto;\n  height: 2.5rem;\n  min-width: 2.5rem;\n  border: none;\n  border-radius: 0;\n  background: var(--sl-color-neutral-0);\n  font: inherit;\n  font-size: 0.7rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  color: var(--sl-color-neutral-600);\n  padding: 0 1rem;\n  cursor: pointer;\n}\n\n.code-preview__button:not(:last-of-type) {\n  border-right: solid 1px var(--sl-color-neutral-200);\n}\n\n.code-preview__button--html,\n.code-preview__button--react {\n  width: 70px;\n  display: flex;\n  place-items: center;\n  justify-content: center;\n}\n\n.code-preview__button--selected {\n  font-weight: 700;\n  color: var(--sl-color-primary-600);\n}\n\n.code-preview__button--codepen {\n  display: flex;\n  place-items: center;\n  width: 6rem;\n}\n\n.code-preview__button:first-of-type {\n  border-bottom-left-radius: 3px;\n}\n\n.code-preview__button:last-of-type {\n  border-bottom-right-radius: 3px;\n}\n\n.code-preview__button:hover,\n.code-preview__button:active {\n  box-shadow: 0 0 0 1px var(--sl-color-primary-400);\n  border-right-color: transparent;\n  background-color: var(--sl-color-primary-50);\n  color: var(--sl-color-primary-600);\n  z-index: 1;\n}\n\n.code-preview__button:focus-visible {\n  outline: none;\n  outline: var(--sl-focus-ring);\n  z-index: 2;\n}\n\n.code-preview__toggle {\n  position: relative;\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  color: var(--sl-color-neutral-600);\n  cursor: pointer;\n}\n\n.code-preview__toggle svg {\n  width: 1em;\n  height: 1em;\n  margin-left: 0.25rem;\n}\n\n.code-preview--expanded .code-preview__toggle svg {\n  transform: rotate(180deg);\n}\n\n/* We can apply data-flavor=\"html|react\" to any element on the page to toggle it when the flavor changes */\n.flavor-html [data-flavor]:not([data-flavor='html']) {\n  display: none;\n}\n\n.flavor-react [data-flavor]:not([data-flavor='react']) {\n  display: none;\n}\n"
  },
  {
    "path": "docs/assets/styles/docs.css",
    "content": ":root {\n  --docs-background-color: var(--sl-color-neutral-0);\n  --docs-border-color: var(--sl-color-neutral-200);\n  --docs-border-width: 1px;\n  --docs-border-radius: var(--sl-border-radius-medium);\n  --docs-content-max-width: 860px;\n  --docs-sidebar-width: 320px;\n  --docs-sidebar-transition-speed: 250ms;\n  --docs-content-toc-max-width: 260px;\n  --docs-content-padding: 2rem;\n  --docs-content-vertical-spacing: 2rem;\n  --docs-search-overlay-background: rgb(0 0 0 / 0.2);\n  --docs-skip-to-main-width: 200px;\n}\n\n/* Light theme */\n:root {\n  color-scheme: normal;\n\n  --sl-color-primary-50: var(--sl-color-sky-50);\n  --sl-color-primary-100: var(--sl-color-sky-100);\n  --sl-color-primary-200: var(--sl-color-sky-200);\n  --sl-color-primary-300: var(--sl-color-sky-300);\n  --sl-color-primary-400: var(--sl-color-sky-400);\n  --sl-color-primary-500: var(--sl-color-sky-500);\n  --sl-color-primary-600: var(--sl-color-sky-600);\n  --sl-color-primary-700: var(--sl-color-sky-700);\n  --sl-color-primary-800: var(--sl-color-sky-800);\n  --sl-color-primary-900: var(--sl-color-sky-900);\n  --sl-color-primary-950: var(--sl-color-sky-950);\n\n  --docs-overlay-color: hsl(240 3.8% 46.1% / 33%);\n  --docs-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);\n  --docs-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 24%);\n  --docs-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 24%);\n  --docs-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 24%);\n  --docs-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 24%);\n}\n\n/* Dark theme */\n.sl-theme-dark {\n  color-scheme: dark;\n\n  --docs-overlay-color: hsl(0 0% 0% / 66%);\n  --docs-shadow-x-small: 0 1px 2px rgb(0 0 0 / 36%);\n  --docs-shadow-small: 0 1px 2px rgb(0 0 0 / 48%);\n  --docs-shadow-medium: 0 2px 4px rgb(0 0 0 / 48%);\n  --docs-shadow-large: 0 2px 8px rgb(0 0 0 / 48%);\n  --docs-shadow-x-large: 0 4px 16px rgb(0 0 0 / 48%);\n}\n\n/* Utils */\nhtml.sl-theme-dark .only-light,\nhtml:not(.sl-theme-dark) .only-dark {\n  display: none !important;\n}\n\n.visually-hidden:not(:focus-within) {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  clip: rect(0 0 0 0) !important;\n  clip-path: inset(50%) !important;\n  border: none !important;\n  overflow: hidden !important;\n  white-space: nowrap !important;\n  padding: 0 !important;\n}\n\n.nowrap {\n  white-space: nowrap;\n}\n\n@media screen and (max-width: 900px) {\n  :root {\n    --docs-content-padding: 1rem;\n  }\n}\n\n/* Bare styles */\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n}\n\na:focus,\nbutton:focus {\n  outline: none;\n}\n\na:focus-visible,\nbutton:focus-visible {\n  outline: var(--sl-focus-ring);\n  outline-offset: var(--sl-focus-ring-offset);\n}\n\n::selection {\n  background-color: var(--sl-color-primary-200);\n  color: var(--sl-color-neutral-900);\n}\n\n/* Show custom elements only after they're registered */\n:not(:defined),\n:not(:defined) * {\n  opacity: 0;\n}\n\n:defined {\n  opacity: 1;\n  transition: 0.1s opacity;\n}\n\nhtml {\n  height: 100%;\n  box-sizing: border-box;\n  line-height: var(--sl-line-height-normal);\n  padding: 0;\n  margin: 0;\n}\n\nbody {\n  height: 100%;\n  font: 16px var(--sl-font-sans);\n  font-weight: var(--sl-font-weight-normal);\n  background-color: var(--docs-background-color);\n  line-height: var(--sl-line-height-normal);\n  color: var(--sl-color-neutral-900);\n  padding: 0;\n  margin: 0;\n  overflow-x: hidden;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n/* Common elements */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-family: var(--sl-font-sans);\n  font-weight: var(--sl-font-weight-semibold);\n  margin: 3rem 0 1.5rem 0;\n}\n\nh1:first-of-type {\n  margin-top: 1rem;\n}\n\nh1 {\n  font-size: 2.5rem;\n}\n\nh2 {\n  font-size: 1.875rem;\n  border-bottom: solid var(--docs-border-width) var(--docs-border-color);\n}\n\nh3 {\n  font-size: 1.625rem;\n}\n\nh4 {\n  font-size: 1.375rem;\n}\n\nh5 {\n  font-size: 1.125rem;\n}\n\nh6 {\n  font-size: 0.875rem;\n}\n\np {\n  margin-block-end: 1.5em;\n}\n\nimg {\n  max-width: 100%;\n}\n\n.badges img {\n  border-radius: var(--sl-border-radius-medium);\n}\n\n.callout img,\ndetails img {\n  width: 100%;\n  margin-left: 0;\n  margin-right: 0;\n}\n\ndetails pre {\n  border: solid var(--docs-border-width) var(--docs-border-color);\n}\n\na {\n  color: var(--sl-color-primary-700);\n}\n\na:hover {\n  color: var(--sl-color-primary-800);\n}\n\nabbr[title] {\n  text-decoration: none;\n  border-bottom: dashed 1px var(--sl-color-primary-700);\n  cursor: help;\n}\n\nem {\n  font-style: italic;\n}\n\nstrong {\n  font-weight: var(--sl-font-weight-bold);\n}\n\ncode {\n  font-family: var(--sl-font-mono);\n  font-size: 0.9125em;\n  background-color: rgba(0 0 0 / 0.025);\n  background-blend-mode: darken;\n  border-radius: var(--docs-border-radius);\n  padding: 0.125em 0.25em;\n}\n\n.sl-theme-dark code {\n  background-color: rgba(255 255 255 / 0.03);\n}\n\nkbd {\n  background: var(--sl-color-neutral-100);\n  border: solid 1px var(--sl-color-neutral-200);\n  box-shadow:\n    inset 0 1px 0 0 var(--sl-color-neutral-0),\n    inset 0 -1px 0 0 var(--sl-color-neutral-200);\n  font-family: var(--sl-font-mono);\n  font-size: 0.9125em;\n  border-radius: var(--docs-border-radius);\n  color: var(--sl-color-neutral-800);\n  padding: 0.125em 0.4em;\n}\n\nins {\n  background-color: var(--sl-color-green-200);\n  color: var(--sl-color-green-900);\n  border-radius: var(--docs-border-radius);\n  text-decoration: none;\n  padding: 0.125em 0.25em;\n}\n\ns {\n  background-color: var(--sl-color-red-200);\n  color: var(--sl-color-red-900);\n  border-radius: var(--docs-border-radius);\n  text-decoration: none;\n  padding: 0.125em 0.25em;\n}\n\nmark {\n  background-color: var(--sl-color-yellow-200);\n  border-radius: var(--docs-border-radius);\n  padding: 0.125em 0.25em;\n}\n\nhr {\n  border: none;\n  border-bottom: solid var(--docs-border-width) var(--docs-border-color);\n  margin: calc(var(--docs-content-vertical-spacing) * 2) 0;\n}\n\n/* Block quotes */\nblockquote {\n  position: relative;\n  font-family: var(--sl-font-serif);\n  font-size: 1.33rem;\n  font-style: italic;\n  color: var(--sl-color-neutral-700);\n  background-color: var(--sl-color-neutral-100);\n  border-radius: var(--docs-border-radius);\n  border-left: solid 6px var(--sl-color-neutral-300);\n  padding: 1.5rem;\n  margin: 0 0 1.5rem 0;\n}\n\nblockquote > :first-child {\n  margin-top: 0;\n}\n\nblockquote > :last-child {\n  margin-bottom: 0;\n}\n\n/* Lists */\nul,\nol {\n  padding: 0;\n  margin: 0 0 var(--docs-content-vertical-spacing) 2rem;\n}\n\nul {\n  list-style: disc;\n}\n\nli {\n  padding: 0;\n  margin: 0 0 0.25rem 0;\n}\n\nli ul,\nli ol {\n  margin-top: 0.25rem;\n}\n\nul ul:last-child,\nul ol:last-child,\nol ul:last-child,\nol ol:last-child {\n  margin-bottom: 0;\n}\n\n/* Anchor headings */\n.anchor-heading {\n  position: relative;\n  color: inherit;\n  text-decoration: none;\n}\n\n.anchor-heading a {\n  text-decoration: none;\n  color: inherit;\n}\n\n.anchor-heading a::after {\n  content: '#';\n  color: var(--sl-color-primary-700);\n  margin-inline: 0.5rem;\n  opacity: 0;\n  transition: 100ms opacity;\n}\n\n.anchor-heading:hover a::after,\n.anchor-heading:focus-within a::after {\n  opacity: 1;\n}\n\n/* External links */\n.external-link__icon {\n  width: 0.75em;\n  height: 0.75em;\n  vertical-align: 0;\n  margin-left: 0.25em;\n  margin-right: 0.125em;\n}\n\n/* Tables */\ntable {\n  max-width: 100%;\n  border: none;\n  border-collapse: collapse;\n  color: inherit;\n  margin-bottom: var(--docs-content-vertical-spacing);\n}\n\ntable tr {\n  border-bottom: solid var(--docs-border-width) var(--docs-border-color);\n}\n\ntable th {\n  font-weight: var(--sl-font-weight-semibold);\n  text-align: left;\n}\n\ntable td,\ntable th {\n  line-height: var(--sl-line-height-normal);\n  padding: 1rem 1rem;\n}\n\ntable th p:first-child,\ntable td p:first-child {\n  margin-top: 0;\n}\n\ntable th p:last-child,\ntable td p:last-child {\n  margin-bottom: 0;\n}\n\n.table-scroll {\n  max-width: 100%;\n  overflow-x: auto;\n}\n\n.table-scroll code {\n  white-space: nowrap;\n}\n\nth.table-name,\nth.table-event-detail {\n  min-width: 15ch;\n}\n\nth.table-description {\n  min-width: 50ch !important;\n  max-width: 70ch;\n}\n\n/* Code blocks */\npre {\n  position: relative;\n  background-color: var(--sl-color-neutral-50);\n  font-family: var(--sl-font-mono);\n  color: var(--sl-color-neutral-900);\n  border-radius: var(--docs-border-radius);\n  padding: 1rem;\n  white-space: pre;\n}\n\n.sl-theme-dark pre {\n  background-color: var(--sl-color-neutral-50);\n}\n\npre:not(:last-child) {\n  margin-bottom: 1.5rem;\n}\n\npre > code {\n  display: block;\n  background: none !important;\n  border-radius: 0;\n  hyphens: none;\n  tab-size: 2;\n  white-space: pre;\n  padding: 1rem;\n  margin: -1rem;\n  overflow: auto;\n}\n\npre .token.comment {\n  color: var(--sl-color-neutral-600);\n}\n\npre .token.prolog,\npre .token.doctype,\npre .token.cdata,\npre .token.operator,\npre .token.punctuation {\n  color: var(--sl-color-neutral-700);\n}\n\n.namespace {\n  opacity: 0.7;\n}\n\npre .token.property,\npre .token.keyword,\npre .token.tag,\npre .token.url {\n  color: var(--sl-color-blue-700);\n}\n\npre .token.symbol,\npre .token.deleted {\n  color: var(--sl-color-red-700);\n}\n\npre .token.boolean,\npre .token.constant,\npre .token.selector,\npre .token.attr-name,\npre .token.string,\npre .token.char,\npre .token.builtin,\npre .token.inserted {\n  color: var(--sl-color-emerald-700);\n}\n\npre .token.atrule,\npre .token.attr-value,\npre .token.number,\npre .token.variable {\n  color: var(--sl-color-violet-700);\n}\n\npre .token.function,\npre .token.class-name,\npre .token.regex {\n  color: var(--sl-color-orange-700);\n}\n\npre .token.important {\n  color: var(--sl-color-red-700);\n}\n\npre .token.important,\npre .token.bold {\n  font-weight: bold;\n}\n\npre .token.italic {\n  font-style: italic;\n}\n\n/* Copy code button */\n.copy-code-button {\n  position: absolute;\n  top: 0;\n  right: 0;\n  white-space: normal;\n  color: var(--sl-color-neutral-800);\n  transition:\n    150ms opacity,\n    150ms scale;\n}\n\n.copy-code-button::part(button) {\n  background-color: var(--sl-color-neutral-50);\n  border-radius: 0 var(--docs-border-radius) 0 var(--docs-border-radius);\n  padding: 0.75rem;\n}\n\n.copy-code-button::part(button):hover {\n  background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 3%);\n}\n\n.copy-code-button::part(button):active {\n  background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 6%);\n}\n\npre .copy-code-button {\n  opacity: 0;\n  scale: 0.75;\n}\n\npre:hover .copy-code-button,\n.copy-code-button:focus-within {\n  opacity: 1;\n  scale: 1;\n}\n\n/* Callouts */\n.callout {\n  position: relative;\n  background-color: var(--sl-color-neutral-100);\n  border-left: solid 4px var(--sl-color-neutral-500);\n  border-radius: var(--docs-border-radius);\n  color: var(--sl-color-neutral-800);\n  padding: 1.5rem 1.5rem 1.5rem 2rem;\n  margin-bottom: var(--docs-content-vertical-spacing);\n}\n\n.callout > :first-child {\n  margin-top: 0;\n}\n\n.callout > :last-child {\n  margin-bottom: 0;\n}\n\n.callout--tip {\n  background-color: var(--sl-color-primary-100);\n  border-left-color: var(--sl-color-primary-600);\n  color: var(--sl-color-primary-800);\n}\n\n.callout::before {\n  content: '';\n  position: absolute;\n  top: calc(50% - 0.8rem);\n  left: calc(-0.8rem - 2px);\n  width: 1.6rem;\n  height: 1.6rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--sl-font-serif);\n  font-weight: var(--sl-font-weight-bold);\n  color: var(--sl-color-neutral-0);\n  clip-path: circle(50% at 50% 50%);\n}\n\n.callout--tip::before {\n  content: 'i';\n  font-style: italic;\n  background-color: var(--sl-color-primary-600);\n}\n\n.callout--warning {\n  background-color: var(--sl-color-warning-100);\n  border-left-color: var(--sl-color-warning-600);\n  color: var(--sl-color-warning-800);\n}\n\n.callout--warning::before {\n  content: '!';\n  background-color: var(--sl-color-warning-600);\n}\n\n.callout--danger {\n  background-color: var(--sl-color-danger-100);\n  border-left-color: var(--sl-color-danger-600);\n  color: var(--sl-color-danger-800);\n}\n\n.callout--danger::before {\n  content: '‼';\n  background-color: var(--sl-color-danger-600);\n}\n\n.callout + .callout {\n  margin-top: calc(-0.5 * var(--docs-content-vertical-spacing));\n}\n\n.callout a {\n  color: inherit;\n}\n\n/* Aside */\n.content aside {\n  float: right;\n  min-width: 300px;\n  max-width: 50%;\n  background: var(--sl-color-neutral-100);\n  border-radius: var(--docs-border-radius);\n  padding: 1rem;\n  margin-left: 1rem;\n}\n\n.content aside > :first-child {\n  margin-top: 0;\n}\n\n.content aside > :last-child {\n  margin-bottom: 0;\n}\n\n@media screen and (max-width: 600px) {\n  .content aside {\n    float: none;\n    width: calc(100% + (var(--docs-content-padding) * 2));\n    max-width: none;\n    margin: var(--docs-content-vertical-spacing) calc(-1 * var(--docs-content-padding));\n  }\n}\n\n/* Details */\n.content details {\n  background-color: var(--sl-color-neutral-100);\n  border-radius: var(--docs-border-radius);\n  padding: 1rem;\n  margin: 0 0 var(--docs-content-vertical-spacing) 0;\n}\n\n.content details summary {\n  font-weight: var(--sl-font-weight-semibold);\n  border-radius: var(--docs-border-radius);\n  padding: 1rem;\n  margin: -1rem;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.content details summary span {\n  padding-left: 0.5rem;\n}\n\n.content details[open] summary {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  margin-bottom: 1rem;\n}\n\n.content details[open] summary:focus-visible {\n  border-radius: var(--docs-border-radius);\n}\n\n.content details > :last-child {\n  margin-bottom: 0;\n}\n\n.content details > :nth-child(2) {\n  margin-top: 0;\n}\n\n.content details + details {\n  margin-top: calc(-1 * var(--docs-content-vertical-spacing) + (2 * var(--docs-border-width)));\n}\n\n/* Sidebar */\n#sidebar {\n  position: fixed;\n  flex: 0;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  z-index: 20;\n  width: var(--docs-sidebar-width);\n  background-color: var(--docs-background-color);\n  border-right: solid var(--docs-border-width) var(--docs-border-color);\n  border-radius: 0;\n  padding: 2rem;\n  margin: 0;\n  overflow: auto;\n  scrollbar-width: thin;\n  transition: var(--docs-sidebar-transition-speed) translate ease-in-out;\n}\n\n#sidebar::-webkit-scrollbar {\n  width: 4px;\n}\n\n#sidebar::-webkit-scrollbar-thumb {\n  background: transparent;\n  border-radius: 9999px;\n}\n\n#sidebar:hover::-webkit-scrollbar-thumb {\n  background: var(--sl-color-neutral-400);\n}\n\n#sidebar:hover::-webkit-scrollbar-track {\n  background: var(--sl-color-neutral-100);\n}\n\n#sidebar > header {\n  margin-bottom: 1.5rem;\n}\n\n#sidebar > header h1 {\n  margin: 0;\n}\n\n#sidebar > header a {\n  display: block;\n}\n\n#sidebar nav a {\n  text-decoration: none;\n}\n\n#sidebar nav h2 {\n  font-size: var(--sl-font-size-medium);\n  font-weight: var(--sl-font-weight-semibold);\n  border-bottom: solid var(--docs-border-width) var(--docs-border-color);\n  margin: 1.5rem 0 0.5rem 0;\n}\n\n#sidebar ul {\n  padding: 0;\n  margin: 0;\n}\n\n#sidebar ul li {\n  list-style: none;\n  padding: 0;\n  margin: 0.125rem 0.5rem;\n}\n\n#sidebar ul ul ul {\n  margin-left: 0.75rem;\n}\n\n#sidebar ul li a {\n  line-height: 1.33;\n  color: inherit;\n  display: inline-block;\n  padding: 0;\n}\n\n#sidebar ul li a:not(.active-link):hover {\n  color: var(--sl-color-primary-700);\n}\n\n#sidebar nav .active-link {\n  color: var(--sl-color-primary-700);\n  border-bottom: dashed 1px var(--sl-color-primary-700);\n}\n\n#sidebar > header img {\n  display: block;\n  width: 100%;\n  height: auto;\n  margin: 0 auto;\n}\n\n@media screen and (max-width: 900px) {\n  #sidebar {\n    translate: -100%;\n  }\n\n  .sidebar-open #sidebar {\n    translate: 0;\n  }\n}\n\n.sidebar-version {\n  font-size: var(--sl-font-size-x-small);\n  color: var(--sl-color-neutral-500);\n  text-align: right;\n  margin-top: -0.5rem;\n  margin-right: 1rem;\n  margin-bottom: -0.5rem;\n}\n\n.sidebar-buttons {\n  display: flex;\n  justify-content: space-between;\n}\n\n/* Main content */\nmain {\n  position: relative;\n  padding: var(--docs-content-vertical-spacing) var(--docs-content-padding)\n    calc(var(--docs-content-vertical-spacing) * 2) var(--docs-content-padding);\n  margin-left: var(--docs-sidebar-width);\n}\n\n.sidebar-open .content {\n  margin-left: 0;\n}\n\n.content__body > :last-child {\n  margin-bottom: 0;\n}\n\n@media screen and (max-width: 900px) {\n  main {\n    margin-left: 0;\n  }\n}\n\n/* Component layouts */\n.content {\n  display: grid;\n  grid-template-columns: 100%;\n  gap: 2rem;\n  position: relative;\n  max-width: var(--docs-content-max-width);\n  margin: 0 auto;\n}\n\n.content--with-toc {\n  /* There's a 2rem gap, so we need to remove it from the column */\n  grid-template-columns: calc(75% - 2rem) min(25%, var(--docs-content-toc-max-width));\n  max-width: calc(var(--docs-content-max-width) + var(--docs-content-toc-max-width));\n}\n\n.content__body {\n  order: 1;\n  width: 100%;\n}\n\n.content:not(.content--with-toc) .content__toc {\n  display: none;\n}\n\n.content__toc {\n  order: 2;\n  display: flex;\n  flex-direction: column;\n  margin-top: 0;\n}\n\n.content__toc ul {\n  position: sticky;\n  top: 5rem;\n  max-height: calc(100vh - 6rem);\n  font-size: var(--sl-font-size-small);\n  line-height: 1.33;\n  border-left: solid 1px var(--sl-color-neutral-200);\n  list-style: none;\n  padding: 1rem 0;\n  margin: 0;\n  padding-left: 1rem;\n  overflow-y: auto;\n}\n\n.content__toc li {\n  padding: 0 0 0 0.5rem;\n  margin: 0;\n}\n\n.content__toc li[data-level='3'] {\n  margin-left: 1rem;\n}\n\n/* We don't use them, but just in case */\n.content__toc li[data-level='4'],\n.content__toc li[data-level='5'],\n.content__toc li[data-level='6'] {\n  margin-left: 2rem;\n}\n\n.content__toc li:not(:last-of-type) {\n  margin-bottom: 0.6rem;\n}\n\n.content__toc a {\n  color: var(--sl-color-neutral-700);\n  text-decoration: none;\n}\n\n.content__toc a:hover {\n  color: var(--sl-color-primary-700);\n}\n\n.content__toc a.active {\n  color: var(--sl-color-primary-700);\n  border-bottom: dashed 1px var(--sl-color-primary-700);\n}\n\n.content__toc .top a {\n  font-weight: var(--sl-font-weight-semibold);\n  color: var(--sl-color-neutral-500);\n}\n\n@media screen and (max-width: 1024px) {\n  .content {\n    grid-template-columns: 100%;\n    gap: 0;\n  }\n\n  .content__toc {\n    position: relative;\n    order: 1;\n  }\n\n  .content__toc ul {\n    display: flex;\n    justify-content: start;\n    gap: 1rem 1.5rem;\n    position: static;\n    border: none;\n    border-bottom: solid 1px var(--sl-color-neutral-200);\n    border-radius: 0;\n    padding: 1rem 1.5rem 1rem 0.5rem; /* extra right padding to hide the fade effect */\n    margin-top: 1rem;\n    overflow-x: auto;\n  }\n\n  .content__toc ul::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 1rem; /* don't cover the scrollbar */\n    right: 0;\n    width: 2rem;\n    background: linear-gradient(90deg, rgba(0 0 0 / 0) 0%, var(--sl-color-neutral-0) 100%);\n  }\n\n  .content__toc li {\n    white-space: nowrap;\n  }\n\n  .content__toc li:not(:last-of-type) {\n    margin-bottom: 0;\n  }\n\n  .content__toc [data-level]:not([data-level='2']) {\n    display: none;\n  }\n\n  .content__body {\n    order: 2;\n  }\n}\n\n/* Menu toggle */\n#menu-toggle {\n  display: none;\n  position: fixed;\n  z-index: 30;\n  top: 0.25rem;\n  left: 0.25rem;\n  height: auto;\n  width: auto;\n  color: black;\n  border: none;\n  border-radius: 50%;\n  background: var(--sl-color-neutral-0);\n  padding: 0.5rem;\n  margin: 0;\n  cursor: pointer;\n  transition:\n    250ms scale ease,\n    250ms rotate ease;\n}\n\n@media screen and (max-width: 900px) {\n  #menu-toggle {\n    display: flex;\n  }\n}\n\n.sl-theme-dark #menu-toggle {\n  color: white;\n}\n\n#menu-toggle:hover {\n  scale: 1.1;\n}\n\n#menu-toggle svg {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\nhtml.sidebar-open #menu-toggle {\n  rotate: 180deg;\n}\n\n/* Skip to main content */\n#skip-to-main {\n  position: fixed;\n  top: 0.25rem;\n  left: calc(50% - var(--docs-skip-to-main-width) / 2);\n  z-index: 100;\n  width: var(--docs-skip-to-main-width);\n  text-align: center;\n  text-decoration: none;\n  border-radius: 9999px;\n  background: var(--sl-color-neutral-0);\n  color: var(--sl-color-neutral-1000);\n  padding: 0.5rem;\n}\n\n/* Icon toolbar */\n#icon-toolbar {\n  display: flex;\n  position: fixed;\n  top: 0;\n  right: 1rem;\n  z-index: 10;\n  background: var(--sl-color-neutral-800);\n  border-bottom-left-radius: calc(var(--docs-border-radius) * 2);\n  border-bottom-right-radius: calc(var(--docs-border-radius) * 2);\n  padding: 0.125rem 0.25rem;\n}\n\n#icon-toolbar button,\n#icon-toolbar a {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  width: auto;\n  height: auto;\n  background: transparent;\n  border: none;\n  border-radius: var(--docs-border-radius);\n  font-size: 1.25rem;\n  color: var(--sl-color-neutral-0);\n  text-decoration: none;\n  padding: 0.5rem;\n  margin: 0;\n  cursor: pointer;\n}\n\n#theme-selector:not(:defined) {\n  /* Hide when not defined to prevent extra wide icon toolbar while loading */\n  display: none;\n}\n\n#theme-selector sl-menu {\n  /* Set an initial size to prevent width being too small when first opening on small screen width */\n  width: 140px;\n}\n\n#theme-selector sl-button {\n  transition: 250ms scale ease;\n}\n\n#theme-selector sl-button::part(base) {\n  color: var(--sl-color-neutral-0);\n}\n\n#theme-selector sl-button::part(label) {\n  display: flex;\n  padding: 0.5rem;\n}\n\n#theme-selector sl-icon {\n  font-size: 1.25rem;\n}\n\n.sl-theme-dark #theme-selector sl-button::part(base) {\n  color: var(--sl-color-neutral-1000);\n}\n\n.sl-theme-dark #icon-toolbar {\n  background: var(--sl-color-neutral-200);\n}\n\n.sl-theme-dark #icon-toolbar button,\n.sl-theme-dark #icon-toolbar a {\n  color: var(--sl-color-neutral-1000);\n}\n\n#icon-toolbar a:not(:last-child),\n#icon-toolbar button:not(:last-child) {\n  margin-right: 0.25rem;\n}\n\n@media screen and (max-width: 900px) {\n  #icon-toolbar {\n    right: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  #icon-toolbar button,\n  #icon-toolbar a {\n    font-size: 1rem;\n    padding: 0.5rem;\n  }\n\n  #theme-selector sl-icon {\n    font-size: 1rem;\n  }\n}\n\n/* Sidebar addons */\n#sidebar-addons:not(:empty) {\n  margin-bottom: var(--docs-content-vertical-spacing);\n}\n\n/* Print styles */\n@media print {\n  a:not(.anchor-heading)[href]::after {\n    content: ' (' attr(href) ')';\n  }\n\n  details,\n  pre,\n  .callout {\n    border: solid var(--docs-border-width) var(--docs-border-color);\n  }\n\n  details summary {\n    list-style: none;\n  }\n\n  details summary span {\n    padding-left: 0;\n  }\n\n  details summary::marker,\n  details summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .callout::before {\n    border: solid var(--docs-border-width) var(--docs-border-color);\n  }\n\n  .component-page__navigation,\n  .copy-code-button,\n  .code-preview__buttons,\n  .code-preview__resizer {\n    display: none !important;\n  }\n\n  .flavor-html .code-preview__source--html,\n  .flavor-react .code-preview__source--react {\n    display: block !important;\n  }\n\n  .flavor-html .code-preview__source--html > pre,\n  .flavor-react .code-preview__source--react > pre {\n    border: none;\n  }\n\n  .code-preview__source-group {\n    border-bottom: solid 1px var(--sl-color-neutral-200);\n    border-bottom-left-radius: var(--sl-border-radius-medium);\n    border-bottom-right-radius: var(--sl-border-radius-medium);\n  }\n\n  #sidebar {\n    display: none;\n  }\n\n  #content {\n    margin-left: 0;\n  }\n\n  #menu-toggle,\n  #icon-toolbar,\n  .external-link__icon {\n    display: none;\n  }\n}\n\n/* Splash */\n.splash {\n  display: flex;\n  padding-top: 2rem;\n}\n\n.splash-start {\n  min-width: 420px;\n}\n\n.splash-start h1 {\n  font-size: var(--sl-font-size-large);\n  font-weight: var(--sl-font-weight-normal);\n}\n\n.splash li img {\n  width: 1em;\n  height: 1em;\n  vertical-align: -2px;\n}\n\n.splash-end {\n  display: flex;\n  align-items: flex-end;\n  width: auto;\n  padding-left: 1rem;\n}\n\n.splash-image {\n  width: 100%;\n  height: auto;\n}\n\n.splash-logo {\n  max-width: 22rem;\n}\n\n.splash-start h1:first-of-type {\n  font-size: var(--sl-font-size-large);\n  margin: 0 0 0.5rem 0;\n}\n\n@media screen and (max-width: 1280px) {\n  .splash {\n    display: block;\n  }\n\n  .splash-start {\n    min-width: 0;\n    padding-bottom: 1rem;\n  }\n\n  .splash-end {\n    padding: 0;\n  }\n\n  .splash-image {\n    display: block;\n    max-width: 400px;\n  }\n\n  /* Shields */\n  .splash + p {\n    margin-top: 2rem;\n  }\n}\n\n/* Component headers */\n.component-header h1 {\n  margin-bottom: 0;\n}\n\n.component-header__tag {\n  margin-top: -0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.component-header__tag code {\n  background: none;\n  color: var(--sl-color-neutral-600);\n  font-size: var(--sl-font-size-large);\n  padding: 0;\n  margin: 0;\n}\n\n.component-header__info {\n  margin-bottom: var(--sl-spacing-x-large);\n}\n\n.component-summary {\n  font-size: var(--sl-font-size-large);\n  line-height: 1.6;\n  margin: 2rem 0;\n}\n\n/* Repo buttons */\n.sidebar-buttons {\n  display: flex;\n  gap: 0.125rem;\n  justify-content: space-between;\n}\n\n.sidebar-buttons .repo-button {\n  flex: 1 1 auto;\n}\n\n.repo-button--github sl-icon {\n  color: var(--sl-color-neutral-700);\n}\n\n.repo-button--star sl-icon {\n  color: var(--sl-color-yellow-500);\n}\n\n.repo-button--twitter sl-icon {\n  color: var(--sl-color-sky-500);\n}\n\n@media screen and (max-width: 400px) {\n  :not(.sidebar-buttons) > .repo-button {\n    width: 100%;\n    margin-bottom: 1rem;\n  }\n}\n\nbody[data-page^='/tokens/'] .table-wrapper td:first-child,\nbody[data-page^='/tokens/'] .table-wrapper td:first-child code {\n  white-space: nowrap;\n}\n\n/* Border radius demo */\n.border-radius-demo {\n  width: 3rem;\n  height: 3rem;\n  background: var(--sl-color-primary-600);\n}\n\n/* Transition demo */\n.transition-demo {\n  position: relative;\n  background: var(--sl-color-neutral-200);\n  width: 8rem;\n  height: 2rem;\n}\n\n.transition-demo:after {\n  content: '';\n  position: absolute;\n  background-color: var(--sl-color-primary-600);\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  transition-duration: inherit;\n  transition-property: width;\n}\n\n.transition-demo:hover:after {\n  width: 100%;\n}\n\n/* Spacing demo */\n.spacing-demo {\n  width: 100px;\n  background: var(--sl-color-primary-600);\n}\n\n/* Elevation demo */\n.elevation-demo {\n  background: transparent;\n  border-radius: 3px;\n  width: 4rem;\n  height: 4rem;\n  margin: 1rem;\n}\n\n/* Color palettes */\n.color-palette {\n  display: grid;\n  grid-template-columns: 200px repeat(11, 1fr);\n  gap: 1rem var(--sl-spacing-2x-small);\n  margin: 2rem 0;\n}\n\n.color-palette__name {\n  font-size: var(--sl-font-size-medium);\n  font-weight: var(--sl-font-weight-semibold);\n  grid-template-columns: repeat(11, 1fr);\n}\n\n.color-palette__name code {\n  background: none;\n  font-size: var(--sl-font-size-x-small);\n}\n\n.color-palette__example {\n  font-size: var(--sl-font-size-x-small);\n  text-align: center;\n}\n\n.color-palette__swatch {\n  height: 3rem;\n  border-radius: var(--sl-border-radius-small);\n}\n\n.color-palette__swatch--border {\n  box-shadow: inset 0 0 0 1px var(--sl-color-neutral-300);\n}\n\n@media screen and (max-width: 1200px) {\n  .color-palette {\n    grid-template-columns: repeat(6, 1fr);\n  }\n\n  .color-palette__name {\n    grid-column-start: span 6;\n  }\n}\n\n/* custom styling - WA dialog */\n#wa-dialog {\n  --action-color: #cd491c;\n  --action-color-hover: color-mix(in oklab, var(--action-color), var(--sl-color-neutral-1000) 5%);\n}\n\n#wa-dialog a {\n  color: var(--action-color);\n}\n\n#wa-dialog a:hover {\n  color: var(--action-color-hover);\n}\n\n#wa-dialog::part(header) {\n  display: none;\n}\n\n#wa-dialog::part(body) {\n  padding: 0;\n}\n\n#wa-dialog::part(footer) {\n  background-color: var(--sl-color-gray-50);\n  font-size: var(--sl-font-size-small);\n  text-align: start;\n}\n\n#wa-dialog::part(panel) {\n  overflow: clip; /* preserve border-radius of panel w/ footer + billboard backgrounds */\n}\n\n#wa-dialog .dialog-body {\n  padding: var(--sl-spacing-x-large) var(--body-spacing);\n}\n\n#wa-dialog .dialog-billboard {\n  position: relative;\n  padding: var(--sl-spacing-3x-large) var(--sl-spacing-2x-large);\n  gap: var(--sl-spacing-medium);\n  background: linear-gradient(to bottom, #f46a45, #cd491c);\n  color: var(--sl-color-neutral-0);\n}\n\n#wa-dialog .dialog-billboard::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background-color: transparent;\n  background-image: url('/assets/images/wa-bg-pattern.svg');\n  background-repeat: repeat;\n  opacity: 0.3;\n}\n\n#wa-dialog .dialog-billboard-content {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sl-spacing-x-small);\n}\n\n#wa-dialog .dialog-billboard-content .wa-logo {\n  inline-size: auto;\n  max-inline-size: 100%;\n  block-size: 4rem;\n}\n\n#wa-dialog .dialog-billboard-content h2 {\n  margin-block: 0;\n  border-bottom: none;\n  text-align: center;\n  line-height: 1.4;\n  font-weight: var(--sl-font-weight-bold);\n  font-size: var(--sl-font-size-x-large);\n}\n\n#wa-dialog p {\n  margin-block-end: var(--sl-spacing-small);\n}\n\n#wa-dialog p:last-of-type {\n  margin-block-end: 0;\n}\n\n#wa-dialog h4,\n#wa-dialog p {\n  margin-block-start: 0;\n}\n\n#wa-dialog .dialog-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sl-spacing-x-small);\n  justify-content: space-between;\n  align-items: center;\n}\n\n#wa-dialog .dialog-actions .wa-ctas {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sl-spacing-x-small);\n  align-items: center;\n}\n\n#wa-dialog sl-divider {\n  --spacing: var(--sl-spacing-x-large);\n}\n\n#wa-dialog .wa-cta::part(base) {\n  border-color: var(--action-color);\n}\n\n#wa-dialog .close-wa-dialog::part(label) {\n  color: var(--action-color);\n}\n\n#wa-dialog .close-wa-dialog::part(label):hover {\n  color: var(--action-color-hover);\n}\n\n#wa-dialog .close-wa-cta::part(label):hover {\n  color: var(--sl-color-neutral-0);\n}\n\n#wa-dialog .wa-cta::part(base) {\n  color: var(--action-color);\n}\n\n#wa-dialog .wa-pro-cta::part(base) {\n  background-color: var(--action-color);\n  border-color: var(--action-color);\n}\n\n#wa-dialog .wa-cta::part(base):hover,\n#wa-dialog .wa-pro-cta::part(base):hover {\n  background-color: var(--action-color-hover);\n  border-color: var(--action-color-hover);\n  color: var(--sl-color-neutral-0);\n}\n"
  },
  {
    "path": "docs/assets/styles/search.css",
    "content": "/* Search plugin */\n:root,\n:root.sl-theme-dark {\n  --docs-search-box-background: var(--sl-color-neutral-0);\n  --docs-search-box-border-width: 1px;\n  --docs-search-box-border-color: var(--sl-color-neutral-300);\n  --docs-search-box-color: var(--sl-color-neutral-600);\n  --docs-search-dialog-background: var(--sl-color-neutral-0);\n  --docs-search-border-width: var(--docs-border-width);\n  --docs-search-border-color: var(--docs-border-color);\n  --docs-search-text-color: var(--sl-color-neutral-900);\n  --docs-search-text-color-muted: var(--sl-color-neutral-500);\n  --docs-search-font-weight-normal: var(--sl-font-weight-normal);\n  --docs-search-font-weight-semibold: var(--sl-font-weight-semibold);\n  --docs-search-border-radius: calc(2 * var(--docs-border-radius));\n  --docs-search-accent-color: var(--sl-color-primary-600);\n  --docs-search-icon-color: var(--sl-color-neutral-500);\n  --docs-search-icon-color-active: var(--sl-color-neutral-600);\n  --docs-search-shadow: var(--docs-shadow-x-large);\n  --docs-search-result-background-hover: var(--sl-color-neutral-100);\n  --docs-search-result-color-hover: var(--sl-color-neutral-900);\n  --docs-search-result-background-active: var(--sl-color-primary-600);\n  --docs-search-result-color-active: var(--sl-color-neutral-0);\n  --docs-search-focus-ring: var(--sl-focus-ring);\n  --docs-search-overlay-background: rgb(0 0 0 / 0.33);\n}\n\n:root.sl-theme-dark {\n  --docs-search-overlay-background: rgb(71 71 71 / 0.33);\n}\n\nbody.search-visible {\n  padding-right: var(--docs-search-scroll-lock-size) !important;\n  overflow: hidden !important;\n}\n\n/* Search box */\n.search-box {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border: none;\n  border-radius: 9999px;\n  background: var(--docs-search-box-background);\n  border: solid var(--docs-search-box-border-width) var(--docs-search-box-border-color);\n  font: inherit;\n  color: var(--docs-search-box-color);\n  padding: 0.75rem 1rem;\n  margin: var(--sl-spacing-large) 0;\n  cursor: pointer;\n}\n\n.search-box span {\n  flex: 1 1 auto;\n  width: 1rem;\n  height: 1rem;\n  text-align: left;\n  line-height: 1;\n  margin: 0 0.75rem;\n}\n\n.search-box:focus {\n  outline: none;\n}\n\n.search-box:focus-visible {\n  outline: var(--docs-search-focus-ring);\n}\n\n/* Site search */\n.search {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 9999;\n}\n\n.search[hidden] {\n  display: none;\n}\n\n.search__overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--docs-search-overlay-background);\n  z-index: -1;\n}\n\n.search__dialog {\n  width: 100%;\n  height: 100%;\n  max-width: none;\n  max-height: none;\n  background: transparent;\n  border: none;\n  padding: 0;\n  margin: 0;\n}\n\n.search__dialog:focus {\n  outline: none;\n}\n\n.search__dialog::backdrop {\n  display: none;\n}\n\n/* Fixes an iOS Safari 16.4 bug that draws the parent element's border radius incorrectly when showing/hiding results */\n.search__header {\n  background-color: var(--docs-search-dialog-background);\n  border-radius: var(--docs-search-border-radius);\n}\n\n.search--has-results .search__header {\n  border-top-left-radius: var(--docs-search-border-radius);\n  border-top-right-radius: var(--docs-search-border-radius);\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.search__content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 500px;\n  max-height: calc(100vh - 20rem);\n  background-color: var(--docs-search-dialog-background);\n  border-radius: var(--docs-search-border-radius);\n  box-shadow: var(--docs-search-shadow);\n  padding: 0;\n  margin: 10rem auto;\n}\n\n@media screen and (max-width: 900px) {\n  .search__content {\n    max-width: calc(100% - 2rem);\n    max-height: calc(90svh);\n    margin: 4vh 1rem;\n  }\n}\n\n.search__input-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.search__input-wrapper sl-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex: 0 0 auto;\n  color: var(--docs-search-icon-color);\n  margin: 0 1.5rem;\n}\n\n.search__clear-button {\n  display: flex;\n  background: none;\n  border: none;\n  font: inherit;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.search__clear-button[hidden] {\n  display: none;\n}\n\n.search__clear-button:active sl-icon {\n  color: var(--docs-search-icon-color-active);\n}\n\n.search__input {\n  flex: 1 1 auto;\n  min-width: 0;\n  border: none;\n  font: inherit;\n  font-size: 1.5rem;\n  font-weight: var(--docs-search-font-weight-normal);\n  color: var(--docs-search-text-color);\n  background: transparent;\n  padding: 1rem 0;\n  margin: 0;\n}\n\n.search__input::placeholder {\n  color: var(--docs-search-text-color-muted);\n}\n\n.search__input::-webkit-search-decoration,\n.search__input::-webkit-search-cancel-button,\n.search__input::-webkit-search-results-button,\n.search__input::-webkit-search-results-decoration {\n  display: none;\n}\n\n.search__input:focus,\n.search__input:focus-visible {\n  outline: none;\n}\n\n.search__body {\n  flex: 1 1 auto;\n  overflow: auto;\n}\n\n.search--has-results .search__body {\n  border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);\n}\n\n.search__results {\n  display: none;\n  line-height: 1.2;\n  list-style: none;\n  padding: 0.5rem 0;\n  margin: 0;\n}\n\n.search--has-results .search__results {\n  display: block;\n}\n\n.search__results a {\n  display: block;\n  text-decoration: none;\n  padding: 0.5rem 1.5rem;\n}\n\n.search__results a:focus-visible {\n  outline: var(--docs-search-focus-ring);\n}\n\n.search__results li a:hover,\n.search__results li a:hover small {\n  background-color: var(--docs-search-result-background-hover);\n  color: var(--docs-search-result-color-hover);\n}\n\n.search__results li[data-selected='true'] a,\n.search__results li[data-selected='true'] a * {\n  outline: none;\n  background-color: var(--docs-search-result-background-active);\n  color: var(--docs-search-result-color-active);\n}\n\n.search__results h3 {\n  font-weight: var(--docs-search-font-weight-semibold);\n  margin: 0;\n}\n\n.search__results small {\n  display: block;\n  color: var(--docs-search-text-color-muted);\n}\n\n.search__result {\n  padding: 0;\n  margin: 0;\n}\n\n.search__result a {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.search__result-icon {\n  flex: 0 0 auto;\n  display: flex;\n  color: var(--docs-search-text-color-muted);\n}\n\n.search__result-icon sl-icon {\n  font-size: 1.5rem;\n}\n\n.search__result__details {\n  width: calc(100% - 3rem);\n}\n\n.search__result-title,\n.search__result-description,\n.search__result-url {\n  max-width: 400px;\n  line-height: 1.3;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.search__result-title {\n  font-size: 1.2rem;\n  font-weight: var(--docs-search-font-weight-semibold);\n  color: var(--docs-search-accent-color);\n}\n\n.search__result-description {\n  font-size: 0.875rem;\n  color: var(--docs-search-text-color);\n}\n\n.search__result-url {\n  font-size: 0.875rem;\n  color: var(--docs-search-text-color-muted);\n}\n\n.search__empty {\n  display: none;\n  border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);\n  text-align: center;\n  color: var(--docs-search-text-color-muted);\n  padding: 2rem;\n}\n\n.search--no-results .search__empty {\n  display: block;\n}\n\n.search__footer {\n  display: flex;\n  justify-content: center;\n  gap: 2rem;\n  border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);\n  border-bottom-left-radius: inherit;\n  border-bottom-right-radius: inherit;\n  padding: 1rem;\n}\n\n.search__footer small {\n  color: var(--docs-search-text-color-muted);\n}\n\n.search__footer small kbd:last-of-type {\n  margin-right: 0.25rem;\n}\n\n@media screen and (max-width: 900px) {\n  .search__footer {\n    display: none;\n  }\n}\n"
  },
  {
    "path": "docs/eleventy.config.cjs",
    "content": "/* eslint-disable no-invalid-this */\nconst fs = require('fs');\nconst path = require('path');\nconst lunr = require('lunr');\nconst { capitalCase } = require('change-case');\nconst { JSDOM } = require('jsdom');\nconst { customElementsManifest, getAllComponents } = require('./_utilities/cem.cjs');\nconst shoelaceFlavoredMarkdown = require('./_utilities/markdown.cjs');\nconst activeLinks = require('./_utilities/active-links.cjs');\nconst anchorHeadings = require('./_utilities/anchor-headings.cjs');\nconst codePreviews = require('./_utilities/code-previews.cjs');\nconst copyCodeButtons = require('./_utilities/copy-code-buttons.cjs');\nconst externalLinks = require('./_utilities/external-links.cjs');\nconst highlightCodeBlocks = require('./_utilities/highlight-code.cjs');\nconst tableOfContents = require('./_utilities/table-of-contents.cjs');\nconst prettier = require('./_utilities/prettier.cjs');\nconst scrollingTables = require('./_utilities/scrolling-tables.cjs');\nconst typography = require('./_utilities/typography.cjs');\nconst replacer = require('./_utilities/replacer.cjs');\n\nconst assetsDir = 'assets';\nconst cdndir = 'cdn';\nconst npmdir = 'dist';\nconst allComponents = getAllComponents();\nlet hasBuiltSearchIndex = false;\n\nmodule.exports = function (eleventyConfig) {\n  //\n  // Global data\n  //\n  eleventyConfig.addGlobalData('baseUrl', 'https://shoelace.style/'); // the production URL\n  eleventyConfig.addGlobalData('layout', 'default'); // make 'default' the default layout\n  eleventyConfig.addGlobalData('toc', true); // enable the table of contents\n  eleventyConfig.addGlobalData('meta', {\n    title: 'Shoelace',\n    description: 'A forward-thinking library of web components.',\n    image: 'images/og-image.png',\n    version: customElementsManifest.package.version,\n    components: allComponents,\n    cdndir,\n    npmdir\n  });\n\n  //\n  // Layout aliases\n  //\n  eleventyConfig.addLayoutAlias('default', 'default.njk');\n\n  //\n  // Copy assets\n  //\n  eleventyConfig.addPassthroughCopy(assetsDir);\n  eleventyConfig.setServerPassthroughCopyBehavior('passthrough'); // emulates passthrough copy during --serve\n\n  //\n  // Functions\n  //\n\n  // Generates a URL relative to the site's root\n  eleventyConfig.addNunjucksGlobal('rootUrl', (value = '', absolute = false) => {\n    value = path.join('/', value);\n    return absolute ? new URL(value, eleventyConfig.globalData.baseUrl).toString() : value;\n  });\n\n  // Generates a URL relative to the site's asset directory\n  eleventyConfig.addNunjucksGlobal('assetUrl', (value = '', absolute = false) => {\n    value = path.join(`/${assetsDir}`, value);\n    return absolute ? new URL(value, eleventyConfig.globalData.baseUrl).toString() : value;\n  });\n\n  // Fetches a specific component's metadata\n  eleventyConfig.addNunjucksGlobal('getComponent', tagName => {\n    const component = allComponents.find(c => c.tagName === tagName);\n    if (!component) {\n      throw new Error(\n        `Unable to find a component called \"${tagName}\". Make sure the file name is the same as the component's tag ` +\n          `name (minus the sl- prefix).`\n      );\n    }\n    return component;\n  });\n\n  //\n  // Custom markdown syntaxes\n  //\n  eleventyConfig.setLibrary('md', shoelaceFlavoredMarkdown);\n\n  //\n  // Filters\n  //\n  eleventyConfig.addFilter('markdown', content => {\n    return shoelaceFlavoredMarkdown.render(content);\n  });\n\n  eleventyConfig.addFilter('markdownInline', content => {\n    return shoelaceFlavoredMarkdown.renderInline(content);\n  });\n\n  // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.\n  // With Prettier 3, this means a leading pipe will exist if the line wraps.\n  eleventyConfig.addFilter('trimPipes', content => {\n    return typeof content === 'string' ? content.replace(/^(\\s|\\|)/g, '').replace(/(\\s|\\|)$/g, '') : content;\n  });\n\n  eleventyConfig.addFilter('classNameToComponentName', className => {\n    let name = capitalCase(className.replace(/^Sl/, ''));\n    if (name === 'Qr Code') name = 'QR Code'; // manual override\n    return name;\n  });\n\n  eleventyConfig.addFilter('removeSlPrefix', tagName => {\n    return tagName.replace(/^sl-/, '');\n  });\n\n  //\n  // Transforms\n  //\n  eleventyConfig.addTransform('html-transform', function (rawContent) {\n    let content = replacer(rawContent, [\n      { pattern: '%VERSION%', replacement: customElementsManifest.package.version },\n      { pattern: '%CDNDIR%', replacement: cdndir },\n      { pattern: '%NPMDIR%', replacement: npmdir }\n    ]);\n\n    // Parse the template and get a Document object\n    const doc = new JSDOM(content, {\n      // We must set a default URL so links are parsed with a hostname. Let's use a bogus TLD so we can easily\n      // identify which ones are internal and which ones are external.\n      url: `https://internal/`\n    }).window.document;\n\n    // DOM transforms\n    activeLinks(doc, { pathname: this.page.url });\n    anchorHeadings(doc, {\n      within: '#content .content__body',\n      levels: ['h2', 'h3', 'h4', 'h5']\n    });\n    tableOfContents(doc, {\n      levels: ['h2', 'h3'],\n      container: '#content .content__toc > ul',\n      within: '#content .content__body'\n    });\n    codePreviews(doc);\n    externalLinks(doc, { target: '_blank' });\n    highlightCodeBlocks(doc);\n    scrollingTables(doc);\n    copyCodeButtons(doc); // must be after codePreviews + highlightCodeBlocks\n    typography(doc, '#content');\n\n    // Serialize the Document object to an HTML string and prepend the doctype\n    content = `\\n${doc.documentElement.outerHTML}`;\n\n    // String transforms\n    content = prettier(content);\n\n    return content;\n  });\n\n  //\n  // Build a search index\n  //\n  eleventyConfig.on('eleventy.after', ({ results }) => {\n    // We only want to build the search index on the first run so all pages get indexed.\n    if (hasBuiltSearchIndex) {\n      return;\n    }\n\n    const map = {};\n    const searchIndexFilename = path.join(eleventyConfig.dir.output, assetsDir, 'search.json');\n    const lunrInput = path.resolve('../node_modules/lunr/lunr.min.js');\n    const lunrOutput = path.join(eleventyConfig.dir.output, assetsDir, 'scripts/lunr.js');\n    const searchIndex = lunr(function () {\n      // The search index uses these field names extensively, so shortening them can save some serious bytes. The\n      // initial index file went from 468 KB => 401 KB by using single-character names!\n      this.ref('id'); // id\n      this.field('t', { boost: 50 }); // title\n      this.field('h', { boost: 25 }); // headings\n      this.field('c'); // content\n\n      results.forEach((result, index) => {\n        const url = path\n          .join('/', path.relative(eleventyConfig.dir.output, result.outputPath))\n          .replace(/\\\\/g, '/') // convert backslashes to forward slashes\n          .replace(/\\/index.html$/, '/'); // convert trailing /index.html to /\n        const doc = new JSDOM(result.content, {\n          // We must set a default URL so links are parsed with a hostname. Let's use a bogus TLD so we can easily\n          // identify which ones are internal and which ones are external.\n          url: `https://internal/`\n        }).window.document;\n        const content = doc.querySelector('#content');\n\n        // Get title and headings\n        const title = (doc.querySelector('title')?.textContent || path.basename(result.outputPath)).trim();\n        const headings = [...content.querySelectorAll('h1, h2, h3, h4')]\n          .map(heading => heading.textContent)\n          .join(' ')\n          .replace(/\\s+/g, ' ')\n          .trim();\n\n        // Remove code blocks and whitespace from content\n        [...content.querySelectorAll('code[class|=language]')].forEach(code => code.remove());\n        const textContent = content.textContent.replace(/\\s+/g, ' ').trim();\n\n        // Update the index and map\n        this.add({ id: index, t: title, h: headings, c: textContent });\n        map[index] = { title, url };\n      });\n    });\n\n    // Copy the Lunr search client and write the index\n    fs.mkdirSync(path.dirname(lunrOutput), { recursive: true });\n    fs.copyFileSync(lunrInput, lunrOutput);\n    fs.writeFileSync(searchIndexFilename, JSON.stringify({ searchIndex, map }), 'utf-8');\n\n    hasBuiltSearchIndex = true;\n  });\n\n  //\n  // Send a signal to stdout that let's the build know we've reached this point\n  //\n  eleventyConfig.on('eleventy.after', () => {\n    console.log('[eleventy.after]');\n  });\n\n  //\n  // Dev server options (see https://www.11ty.dev/docs/dev-server/#options)\n  //\n  eleventyConfig.setServerOptions({\n    domDiff: false, // disable dom diffing so custom elements don't break on reload,\n    port: 4000, // if port 4000 is taken, 11ty will use the next one available\n    watch: ['cdn/**/*'] // additional files to watch that will trigger server updates (array of paths or globs)\n  });\n\n  //\n  // 11ty config\n  //\n  return {\n    dir: {\n      input: 'pages',\n      output: '../_site',\n      includes: '../_includes' // resolved relative to the input dir\n    },\n    markdownTemplateEngine: 'njk', // use Nunjucks instead of Liquid for markdown files\n    templateEngineOverride: ['njk'] // just Nunjucks and then markdown\n  };\n};\n"
  },
  {
    "path": "docs/pages/404.md",
    "content": "---\nmeta:\n  title: Page Not Found\n  description: \"The page you were looking for couldn't be found.\"\npermalink: 404.html\ntoc: false\n---\n\n
    \n\n# Page Not Found\n\n![A UFO takes one of the little worker monsters](/assets/images/undraw-taken.svg)\n\nThe page you were looking for couldn't be found.\n\nPress [[/]] to search, or [head back to the homepage](/).\n\n
    \n"
  },
  {
    "path": "docs/pages/components/alert.md",
    "content": "---\nmeta:\n  title: Alert\n  description: Alerts are used to display important messages inline or as toast notifications.\nlayout: component\n---\n\n```html:preview\n\n  \n  This is a standard alert. You can customize its content and even the icon.\n\n```\n\n```jsx:react\nimport SlAlert from '@shoelace-style/shoelace/dist/react/alert';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => (\n  \n    \n    This is a standard alert. You can customize its content and even the icon.\n  \n);\n```\n\n:::tip\nAlerts will not be visible if the `open` attribute is not present.\n:::\n\n## Examples\n\n### Variants\n\nSet the `variant` attribute to change the alert's variant.\n\n```html:preview\n\n  \n  This is super informative
    \n  You can tell by how pretty the alert is.\n    \n\n
    \n\n\n  \n  Your changes have been saved
    \n  You can safely exit the app now.\n    \n\n
    \n\n\n  \n  Your settings have been updated
    \n  Settings will take effect on next login.\n    \n\n
    \n\n\n  \n  Your session has ended
    \n  Please login again to continue.\n    \n\n
    \n\n\n  \n  Your account has been deleted
    \n  We're very sorry to see you go!\n    \n```\n\n```jsx:react\nimport SlAlert from '@shoelace-style/shoelace/dist/react/alert';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => (\n  <>\n    \n      \n      This is super informative\n      
    \n      You can tell by how pretty the alert is.\n        \n\n    
    \n\n    \n      \n      Your changes have been saved\n      
    \n      You can safely exit the app now.\n        \n\n    
    \n\n    \n      \n      Your settings have been updated\n      
    \n      Settings will take effect on next login.\n        \n\n    
    \n\n    \n      \n      Your session has ended\n      
    \n      Please login again to continue.\n        \n\n    
    \n\n    \n      \n      Your account has been deleted\n      
    \n      We're very sorry to see you go!\n        \n  \n);\n```\n\n### Closable\n\nAdd the `closable` attribute to show a close button that will hide the alert.\n\n```html:preview\n\n  \n  You can close this alert any time!\n\n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlAlert from '@shoelace-style/shoelace/dist/react/alert';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => {\n  const [open, setOpen] = useState(true);\n\n  function handleHide() {\n    setOpen(false);\n    setTimeout(() => setOpen(true), 2000);\n  }\n\n  return (\n    \n      \n      You can close this alert any time!\n    \n  );\n};\n```\n\n### Without Icons\n\nIcons are optional. Simply omit the `icon` slot if you don't want them.\n\n```html:preview\n Nothing fancy here, just a simple alert. \n```\n\n```jsx:react\nimport SlAlert from '@shoelace-style/shoelace/dist/react/alert';\n\nconst App = () => (\n  \n    Nothing fancy here, just a simple alert.\n  \n);\n```\n\n### Duration\n\nSet the `duration` attribute to automatically hide an alert after a period of time. This is useful for alerts that don't require acknowledgement.\n\n```html:preview\n
    \n  Show Alert\n\n  \n    \n    This alert will automatically hide itself after three seconds, unless you interact with it.\n  \n
    \n\n\n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlAlert from '@shoelace-style/shoelace/dist/react/alert';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst css = `\n  .alert-duration sl-alert {\n    margin-top: var(--sl-spacing-medium);\n  }\n`;\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      
    \n         setOpen(true)}>\n          Show Alert\n        \n\n         setOpen(false)}>\n          \n          This alert will automatically hide itself after three seconds, unless you interact with it.\n        \n      
    \n\n      \n    \n  );\n};\n```\n\n### Countdown\n\nSet the `countdown` attribute to display a loading bar that indicates the alert remaining time. This is useful for alerts with relatively long duration.\n\n```html:preview\n
    \n  Show Alert\n\n  \n    \n    You're not stuck, the alert will close after a pretty long duration.\n  \n
    \n\n\n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlAlert from '@shoelace-style/shoelace/dist/react/alert';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst css = `\n  .alert-countdown sl-alert {\n    margin-top: var(--sl-spacing-medium);\n  }\n`;\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      
    \n         setOpen(true)}>\n          Show Alert\n        \n\n         setOpen(false)}>\n          \n          You're not stuck, the alert will close after a pretty long duration.\n        \n      
    \n\n      \n    \n  );\n};\n```\n\n### Toast Notifications\n\nTo display an alert as a toast notification, or \"toast\", create the alert and call its `toast()` method. This will move the alert out of its position in the DOM and into [the toast stack](#the-toast-stack) where it will be shown. Once dismissed, it will be removed from the DOM completely. To reuse a toast, store a reference to it and call `toast()` again later on.\n\nYou should always use the `closable` attribute so users can dismiss the notification. It's also common to set a reasonable `duration` when the notification doesn't require acknowledgement.\n\n```html:preview\n
    \n  Primary\n  Success\n  Neutral\n  Warning\n  Danger\n\n  \n    \n    This is super informative
    \n    You can tell by how pretty the alert is.\n      \n\n  \n    \n    Your changes have been saved
    \n    You can safely exit the app now.\n      \n\n  \n    \n    Your settings have been updated
    \n    Settings will take effect on next login.\n      \n\n  \n    \n    Your session has ended
    \n    Please login again to continue.\n      \n\n  \n    \n    Your account has been deleted
    \n    We're very sorry to see you go!\n      \n
    \n\n\n```\n\n```jsx:react\nimport { useRef } from 'react';\nimport SlAlert from '@shoelace-style/shoelace/dist/react/alert';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nfunction showToast(alert) {\n  alert.toast();\n}\n\nconst App = () => {\n  const primary = useRef(null);\n  const success = useRef(null);\n  const neutral = useRef(null);\n  const warning = useRef(null);\n  const danger = useRef(null);\n\n  return (\n    <>\n       primary.current.toast()}>\n        Primary\n      \n\n       success.current.toast()}>\n        Success\n      \n\n       neutral.current.toast()}>\n        Neutral\n      \n\n       warning.current.toast()}>\n        Warning\n      \n\n       danger.current.toast()}>\n        Danger\n      \n\n      \n        \n        This is super informative\n        
    \n        You can tell by how pretty the alert is.\n          \n\n      \n        \n        Your changes have been saved\n        
    \n        You can safely exit the app now.\n          \n\n      \n        \n        Your settings have been updated\n        
    \n        Settings will take effect on next login.\n          \n\n      \n        \n        Your session has ended\n        
    \n        Please login again to continue.\n          \n\n      \n        \n        Your account has been deleted\n        
    \n        We're very sorry to see you go!\n          \n    \n  );\n};\n```\n\n### Creating Toasts Imperatively\n\nFor convenience, you can create a utility that emits toast notifications with a function call rather than composing them in your HTML. To do this, generate the alert with JavaScript, append it to the body, and call the `toast()` method as shown in the example below.\n\n```html:preview\n
    \n  Create Toast\n
    \n\n\n```\n\n### The Toast Stack\n\nThe toast stack is a fixed position singleton element created and managed internally by the alert component. It will be added and removed from the DOM as needed when toasts are shown. When more than one toast is visible, they will stack vertically in the toast stack.\n\nBy default, the toast stack is positioned at the top-right of the viewport. You can change its position by targeting `.sl-toast-stack` in your stylesheet. To make toasts appear at the top-left of the viewport, for example, use the following styles.\n\n```css\n.sl-toast-stack {\n  left: 0;\n  right: auto;\n}\n```\n\n:::tip\nBy design, it is not possible to show toasts in more than one stack simultaneously. Such behavior is confusing and makes for a poor user experience.\n:::\n"
  },
  {
    "path": "docs/pages/components/animated-image.md",
    "content": "---\nmeta:\n  title: Animated Image\n  description: A component for displaying animated GIFs and WEBPs that play and pause on interaction.\nlayout: component\n---\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';\n\nconst App = () => (\n  \n);\n```\n\n:::tip\nThis component uses `` to draw freeze frames, so images are subject to [cross-origin restrictions](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image).\n:::\n\n## Examples\n\n### WEBP Images\n\nBoth GIF and WEBP images are supported.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';\n\nconst App = () => (\n  \n);\n```\n\n### Setting a Width and Height\n\nTo set a custom size, apply a width and/or height to the host element.\n\n```html:preview\n\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';\n\nconst App = () => (\n  \n);\n```\n\n{% endraw %}\n\n### Customizing the Control Box\n\nYou can change the appearance and location of the control box by targeting the `control-box` part in your styles.\n\n```html:preview\n\n\n\n```\n\n```jsx:react\nimport SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';\n\nconst css = `\n  .animated-image-custom-control-box::part(control-box) {\n    top: auto;\n    right: auto;\n    bottom: 1rem;\n    left: 1rem;\n    background-color: deeppink;\n    border: none;\n    color: pink;\n  }\n`;\n\nconst App = () => (\n  <>\n    \n\n    \n  \n);\n```\n"
  },
  {
    "path": "docs/pages/components/animation.md",
    "content": "---\nmeta:\n  title: Animation\n  description: Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.\nlayout: component\n---\n\nTo animate an element, wrap it in `` and set an animation `name`. The animation will not start until you add the `play` attribute. Refer to the [properties table](#properties) for a list of all animation options.\n\n```html:preview\n
    \n  
    \n  
    \n  
    \n  
    \n
    \n\n\n```\n\n```jsx:react\nimport SlAnimation from '@shoelace-style/shoelace/dist/react/animation';\n\nconst css = `\n  .animation-overview .box {\n    display: inline-block;\n    width: 100px;\n    height: 100px;\n    background-color: var(--sl-color-primary-600);\n    margin: 1.5rem;\n  }\n`;\n\nconst App = () => (\n  <>\n    
    \n      \n        
    \n      \n      \n        
    \n      \n      \n        
    \n      \n      \n        
    \n      \n    
    \n\n    \n  \n);\n```\n\n:::tip\nThe animation will only be applied to the first child element found in ``.\n:::\n\n## Examples\n\n### Animations & Easings\n\nThis example demonstrates all of the baked-in animations and easings. Animations are based on those found in the popular [Animate.css](https://animate.style/) library.\n\n```html:preview\n
    \n  \n    
    \n      \n\n  
    \n    \n    \n    \n  
    \n
    \n\n\n\n\n```\n\n### Using Intersection Observer\n\nUse an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to control the animation when an element enters or exits the viewport. For example, scroll the box below in and out of your screen. The animation stops when the box exits the viewport and restarts each time it enters the viewport.\n\n```html:preview\n
    \n  
    \n
    \n\n\n\n\n```\n\n```jsx:react\nimport { useEffect, useRef, useState } from 'react';\nimport SlAnimation from '@shoelace-style/shoelace/dist/react/animation';\n\nconst css = `\n  .animation-scroll {\n    height: calc(100vh + 100px);\n  }\n\n  .animation-scroll .box {\n    display: inline-block;\n    width: 100px;\n    height: 100px;\n    background-color: var(--sl-color-primary-600);\n  }\n`;\n\nconst App = () => {\n  const animation = useRef(null);\n  const box = useRef(null);\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(entries => {\n      if (entries[0].isIntersecting) {\n        animation.current.play = true;\n      } else {\n        animation.current.play = false;\n        animation.current.currentTime = 0;\n      }\n    });\n\n    if (box.current) {\n      observer.observe(box.current);\n    }\n  }, [box]);\n\n  return (\n    <>\n      
    \n        \n          
    \n        \n      
    \n\n      \n    \n  );\n};\n```\n\n### Custom Keyframe Formats\n\nSupply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) to build custom animations.\n\n```html:preview\n
    \n  \n    
    \n      \n
    \n\n\n\n\n```\n\n```jsx:react\nimport SlAnimation from '@shoelace-style/shoelace/dist/react/animation';\n\nconst css = `\n  .animation-keyframes .box {\n    width: 100px;\n    height: 100px;\n    background-color: var(--sl-color-primary-600);\n  }\n`;\n\nconst App = () => (\n  <>\n    
    \n      \n        
    \n      \n    
    \n\n    \n  \n);\n```\n\n### Playing Animations on Demand\n\nAnimations won't play until you apply the `play` attribute. You can omit it initially, then apply it on demand such as after a user interaction. In this example, the button will animate once every time the button is clicked.\n\n```html:preview\n
    \n  \n    Click me\n  \n
    \n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlAnimation from '@shoelace-style/shoelace/dist/react/animation';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\n\nconst App = () => {\n  const [play, setPlay] = useState(false);\n\n  return (\n    
    \n       setPlay(false)}>\n         setPlay(true)}>\n          Click me\n        \n      \n    
    \n  );\n};\n```\n"
  },
  {
    "path": "docs/pages/components/avatar.md",
    "content": "---\nmeta:\n  title: Avatar\n  description: Avatars are used to represent a person or object.\nlayout: component\n---\n\nBy default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a `label` for assistive devices.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';\n\nconst App = () => ;\n```\n\n## Examples\n\n### Images\n\nTo use an image for the avatar, set the `image` and `label` attributes. This will take priority and be shown over initials and icons.\nAvatar images can be lazily loaded by setting the `loading` attribute to `lazy`.\n\n```html:preview\n\n\n```\n\n```jsx:react\nimport SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';\n\nconst App = () => (\n  \n  \n);\n```\n\n### Initials\n\nWhen you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';\n\nconst App = () => ;\n```\n\n### Custom Icons\n\nWhen 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.\n\n```html:preview\n\n  \n\n\n\n  \n\n\n\n  \n\n```\n\n```jsx:react\nimport SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => (\n  <>\n    \n      \n    \n\n    \n      \n    \n\n    \n      \n    \n  \n);\n```\n\n### Shapes\n\nAvatars can be shaped using the `shape` attribute.\n\n```html:preview\n\n\n\n```\n\n```jsx:react\nimport SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => (\n  <>\n    \n    \n    \n  \n);\n```\n\n### Avatar Groups\n\nYou can group avatars with a few lines of CSS.\n\n```html:preview\n
    \n  \n\n  \n\n  \n\n  \n
    \n\n\n```\n\n```jsx:react\nimport SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst css = `\n  .avatar-group sl-avatar:not(:first-of-type) {\n    margin-left: -1rem;\n  }\n\n  .avatar-group sl-avatar::part(base) {\n    border: solid 2px var(--sl-color-neutral-0);\n  }\n`;\n\nconst App = () => (\n  <>\n    
    \n      \n\n      \n\n      \n\n      \n    
    \n\n    \n  \n);\n```\n"
  },
  {
    "path": "docs/pages/components/badge.md",
    "content": "---\nmeta:\n  title: Badge\n  description: Badges are used to draw attention and display statuses or counts.\nlayout: component\n---\n\n```html:preview\nBadge\n```\n\n```jsx:react\nimport SlBadge from '@shoelace-style/shoelace/dist/react/badge';\n\nconst App = () => Badge;\n```\n\n## Examples\n\n### Variants\n\nSet the `variant` attribute to change the badge's variant.\n\n```html:preview\nPrimary\nSuccess\nNeutral\nWarning\nDanger\n```\n\n```jsx:react\nimport SlBadge from '@shoelace-style/shoelace/dist/react/badge';\n\nconst App = () => (\n  <>\n    Primary\n    Success\n    Neutral\n    Warning\n    Danger\n  \n);\n```\n\n### Pill Badges\n\nUse the `pill` attribute to give badges rounded edges.\n\n```html:preview\nPrimary\nSuccess\nNeutral\nWarning\nDanger\n```\n\n```jsx:react\nimport SlBadge from '@shoelace-style/shoelace/dist/react/badge';\n\nconst App = () => (\n  <>\n    \n      Primary\n    \n    \n      Success\n    \n    \n      Neutral\n    \n    \n      Warning\n    \n    \n      Danger\n    \n  \n);\n```\n\n### Pulsating Badges\n\nUse the `pulse` attribute to draw attention to the badge with a subtle animation.\n\n```html:preview\n
    \n  1\n  1\n  1\n  1\n  1\n
    \n\n\n```\n\n```jsx:react\nimport SlBadge from '@shoelace-style/shoelace/dist/react/badge';\n\nconst css = `\n  .badge-pulse sl-badge:not(:last-of-type) {\n    margin-right: 1rem;\n  }\n`;\n\nconst App = () => (\n  <>\n    
    \n      \n        1\n      \n      \n        1\n      \n      \n        1\n      \n      \n        1\n      \n      \n        1\n      \n    
    \n\n    \n  \n);\n```\n\n### With Buttons\n\nOne 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.\n\n```html:preview\n\n  Requests\n  30\n\n\n\n  Warnings\n  8\n\n\n\n  Errors\n  6\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlBadge from '@shoelace-style/shoelace/dist/react/badge';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\n\nconst App = () => (\n  <>\n    \n      Requests\n      30\n    \n\n    \n      Warnings\n      \n        8\n      \n    \n\n    \n      Errors\n      \n        6\n      \n    \n  \n);\n```\n\n{% endraw %}\n\n### With Menu Items\n\nWhen including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.\n\n```html:preview\n\n  Messages\n  Comments 4\n  Replies 12\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlBadge from '@shoelace-style/shoelace/dist/react/badge';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\nimport SlMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';\n\nconst App = () => (\n  \n    Messages\n    \n      Comments\n      \n        4\n      \n    \n    \n      Replies\n      \n        12\n      \n    \n  \n);\n```\n\n{% endraw %}\n"
  },
  {
    "path": "docs/pages/components/breadcrumb-item.md",
    "content": "---\nmeta:\n  title: Breadcrumb Item\n  description: Breadcrumb Items are used inside breadcrumbs to represent different links.\nlayout: component\n---\n\n```html:preview\n\n  \n    \n    Home\n  \n  Clothing\n  Shirts\n\n```\n\n```jsx:react\nimport SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';\nimport SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => (\n  \n    \n      \n      Home\n    \n    Clothing\n    Shirts\n  \n);\n```\n\n:::tip\nAdditional demonstrations can be found in the [breadcrumb examples](/components/breadcrumb).\n:::\n"
  },
  {
    "path": "docs/pages/components/breadcrumb.md",
    "content": "---\nmeta:\n  title: Breadcrumb\n  description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\nlayout: component\n---\n\nBreadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.\n\n```html:preview\n\n  Catalog\n  Clothing\n  Women's\n  Shirts & Tops\n\n```\n\n```jsx:react\nimport SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';\nimport SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';\n\nconst App = () => (\n  \n    Catalog\n    Clothing\n    Women's\n    Shirts & Tops\n  \n);\n```\n\n## Examples\n\n### Breadcrumb Links\n\nBy default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you'll need to add event listeners to handle clicks.\n\nFor websites, you'll probably want to use links instead. You can make any breadcrumb item a link by applying an `href` attribute to it. Now, when the user activates it, they'll be taken to the corresponding page — no event listeners required.\n\n```html:preview\n\n  Homepage\n\n  Our Services\n\n  Digital Media\n\n  Web Design\n\n```\n\n```jsx:react\nimport SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';\nimport SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';\n\nconst App = () => (\n  \n    Homepage\n\n    Our Services\n\n    Digital Media\n\n    Web Design\n  \n);\n```\n\n### Custom Separators\n\nUse the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.\n\n```html:preview\n\n  \n  First\n  Second\n  Third\n\n\n
    \n\n\n  \n  First\n  Second\n  Third\n\n\n
    \n\n\n  /\n  First\n  Second\n  Third\n\n```\n\n```jsx:react\nimport '@shoelace-style/shoelace/dist/components/icon/icon.js';\nimport SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';\nimport SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';\n\nconst App = () => (\n  <>\n    \n      \n      First\n      Second\n      Third\n    \n\n    
    \n\n    \n      \n      First\n      Second\n      Third\n    \n\n    
    \n\n    \n      /\n      First\n      Second\n      Third\n    \n  \n);\n```\n\n### Prefixes\n\nUse the `prefix` slot to add content before any breadcrumb item.\n\n```html:preview\n\n  \n    \n    Home\n  \n  Articles\n  Traveling\n\n```\n\n```jsx:react\nimport SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';\nimport SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => (\n  \n    \n      \n      Home\n    \n    Articles\n    Traveling\n  \n);\n```\n\n### Suffixes\n\nUse the `suffix` slot to add content after any breadcrumb item.\n\n```html:preview\n\n  Documents\n  Policies\n  \n    Security\n    \n  \n\n```\n\n```jsx:react\nimport SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';\nimport SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => (\n  \n    Documents\n    Policies\n    \n      Security\n      \n    \n  \n);\n```\n\n### With Dropdowns\n\nDropdown menus can be placed in the default slot to provide additional options.\n\n```html:preview\n\n  Homepage\n  \n    \n      \n        \n      \n      \n        Web Design\n        Web Development\n        Marketing\n      \n    \n  \n  Our Services\n  Digital Media\n\n```\n\n```jsx:react\nimport {\n  SlBreadcrumb,\n  SlBreadcrumbItem,\n  SlButton,\n  SlDropdown,\n  SlIcon,\n  SlMenu,\n  SlMenuItem\n} from '@shoelace-style/shoelace/dist/react';\n\nconst App = () => (\n  \n    Homepage\n    \n      \n        \n          \n        \n        \n          \n            Web Design\n          \n          Web Development\n          Marketing\n        \n      \n    \n    Our Services\n    Digital Media\n  \n);\n```\n\nAlternatively, you can place dropdown menus in a prefix or suffix slot.\n\n```html:preview\n\n  Homepage\n  Our Services\n  Digital Media\n  \n    Web Design\n    \n      \n        \n      \n      \n        Web Design\n        Web Development\n        Marketing\n      \n    \n  \n\n```\n\n```jsx:react\nimport {\n  SlBreadcrumb,\n  SlBreadcrumbItem,\n  SlButton,\n  SlDropdown,\n  SlIcon,\n  SlMenu,\n  SlMenuItem\n} from '@shoelace-style/shoelace/dist/react';\n\nconst App = () => (\n  \n    Homepage\n    Our Services\n    Digital Media\n    \n      Web Design\n      \n        \n          \n        \n        \n          \n            Web Design\n          \n          Web Development\n          Marketing\n        \n      \n    \n  \n);\n```\n"
  },
  {
    "path": "docs/pages/components/button-group.md",
    "content": "---\nmeta:\n  title: Button Group\n  description: Button groups can be used to group related buttons into sections.\nlayout: component\n---\n\n```html:preview\n\n  Left\n  Center\n  Right\n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';\n\nconst App = () => (\n  \n    Left\n    Center\n    Right\n  \n);\n```\n\n## Examples\n\n### Button Sizes\n\nAll button sizes are supported, but avoid mixing sizes within the same button group.\n\n```html:preview\n\n  Left\n  Center\n  Right\n\n\n

    \n\n\n  Left\n  Center\n  Right\n\n\n

    \n\n\n  Left\n  Center\n  Right\n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';\n\nconst App = () => (\n  <>\n    \n      Left\n      Center\n      Right\n    \n\n    
    \n    
    \n\n    \n      Left\n      Center\n      Right\n    \n\n    
    \n    
    \n\n    \n      Left\n      Center\n      Right\n    \n  \n);\n```\n\n### Theme Buttons\n\nTheme buttons are supported through the button's `variant` attribute.\n\n```html:preview\n\n  Left\n  Center\n  Right\n\n\n

    \n\n\n  Left\n  Center\n  Right\n\n\n

    \n\n\n  Left\n  Center\n  Right\n\n\n

    \n\n\n  Left\n  Center\n  Right\n\n\n

    \n\n\n  Left\n  Center\n  Right\n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';\n\nconst App = () => (\n  <>\n    \n      Left\n      Center\n      Right\n    \n\n    
    \n    
    \n\n    \n      Left\n      Center\n      Right\n    \n\n    
    \n    
    \n\n    \n      Left\n      Center\n      Right\n    \n\n    
    \n    
    \n\n    \n      Left\n      Center\n      Right\n    \n\n    
    \n    
    \n\n    \n      Left\n      Center\n      Right\n    \n  \n);\n```\n\n### Pill Buttons\n\nPill buttons are supported through the button's `pill` attribute.\n\n```html:preview\n\n  Left\n  Center\n  Right\n\n\n

    \n\n\n  Left\n  Center\n  Right\n\n\n

    \n\n\n  Left\n  Center\n  Right\n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';\n\nconst App = () => (\n  <>\n    \n      \n        Left\n      \n      \n        Center\n      \n      \n        Right\n      \n    \n\n    
    \n    
    \n\n    \n      \n        Left\n      \n      \n        Center\n      \n      \n        Right\n      \n    \n\n    
    \n    
    \n\n    \n      \n        Left\n      \n      \n        Center\n      \n      \n        Right\n      \n    \n  \n);\n```\n\n### Dropdowns in Button Groups\n\nDropdowns can be placed inside button groups as long as the trigger is an `` element.\n\n```html:preview\n\n  Button\n  Button\n  \n    Dropdown\n    \n      Item 1\n      Item 2\n      Item 3\n    \n  \n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';\nimport SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => (\n  \n    Button\n    Button\n    \n      \n        Dropdown\n      \n      \n        Item 1\n        Item 2\n        Item 3\n      \n    \n  \n);\n```\n\n### Split Buttons\n\nCreate a split button using a button and a dropdown. Use a [visually hidden](/components/visually-hidden) label to ensure the dropdown is accessible to users with assistive devices.\n\n```html:preview\n\n  Save\n  \n    \n      More options\n    \n    \n      Save\n      Save as…\n      Save all\n    \n  \n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';\nimport SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => (\n  \n    Save\n    \n      \n      \n        Save\n        Save as…\n        Save all\n      \n    \n  \n);\n```\n\n### Tooltips in Button Groups\n\nButtons can be wrapped in tooltips to provide more detail when the user interacts with them.\n\n```html:preview\n\n  \n    Left\n  \n\n  \n    Center\n  \n\n  \n    Right\n  \n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';\nimport SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';\n\nconst App = () => (\n  <>\n    \n      \n        Left\n      \n\n      \n        Center\n      \n\n      \n        Right\n      \n    \n  \n);\n```\n\n### Toolbar Example\n\nCreate interactive toolbars with button groups.\n\n```html:preview\n
    \n  \n    \n      \n    \n    \n      \n    \n  \n\n  \n    \n      \n    \n    \n      \n    \n    \n      \n    \n  \n\n  \n    \n      \n    \n    \n      \n    \n    \n      \n    \n  \n
    \n\n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\nimport SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';\n\nconst css = `\n  .button-group-toolbar sl-button-group:not(:last-of-type) {\n    margin-right: var(--sl-spacing-x-small);\n  }\n`;\n\nconst App = () => (\n  <>\n    
    \n      \n        \n          \n            \n          \n        \n        \n          \n            \n          \n        \n      \n\n      \n        \n          \n            \n          \n        \n        \n          \n            \n          \n        \n        \n          \n            \n          \n        \n      \n\n      \n        \n          \n            \n          \n        \n        \n          \n            \n          \n        \n        \n          \n            \n          \n        \n      \n    
    \n\n    \n  \n);\n```\n"
  },
  {
    "path": "docs/pages/components/button.md",
    "content": "---\nmeta:\n  title: Button\n  description: Buttons represent actions that are available to the user.\nlayout: component\n---\n\n```html:preview\nButton\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\n\nconst App = () => Button;\n```\n\n## Examples\n\n### Variants\n\nUse the `variant` attribute to set the button's variant.\n\n```html:preview\nDefault\nPrimary\nSuccess\nNeutral\nWarning\nDanger\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\n\nconst App = () => (\n  <>\n    Default\n    Primary\n    Success\n    Neutral\n    Warning\n    Danger\n  \n);\n```\n\n### Sizes\n\nUse the `size` attribute to change a button's size.\n\n```html:preview\nSmall\nMedium\nLarge\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\n\nconst App = () => (\n  <>\n    Small\n    Medium\n    Large\n  \n);\n```\n\n### Outline Buttons\n\nUse the `outline` attribute to draw outlined buttons with transparent backgrounds.\n\n```html:preview\nDefault\nPrimary\nSuccess\nNeutral\nWarning\nDanger\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\n\nconst App = () => (\n  <>\n    \n      Default\n    \n    \n      Primary\n    \n    \n      Success\n    \n    \n      Neutral\n    \n    \n      Warning\n    \n    \n      Danger\n    \n  \n);\n```\n\n### Pill Buttons\n\nUse the `pill` attribute to give buttons rounded edges.\n\n```html:preview\nSmall\nMedium\nLarge\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\n\nconst App = () => (\n  <>\n    \n      Small\n    \n    \n      Medium\n    \n    \n      Large\n    \n  \n);\n```\n\n### Circle Buttons\n\nUse the `circle` attribute to create circular icon buttons. When this attribute is set, the button expects a single `` in the default slot.\n\n```html:preview\n\n  \n\n\n\n  \n\n\n\n  \n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => (\n  <>\n    \n      \n    \n    \n      \n    \n    \n      \n    \n  \n);\n```\n\n### Text Buttons\n\nUse the `text` variant to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.\n\n```html:preview\nText\nText\nText\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\n\nconst App = () => (\n  <>\n    \n      Text\n    \n    \n      Text\n    \n    \n      Text\n    \n  \n);\n```\n\n### Link Buttons\n\nIt's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `` under the hood. This gives you all the default link behavior the browser provides (e.g. [[CMD/CTRL/SHIFT]] + [[CLICK]]) and exposes the `target` and `download` attributes.\n\n```html:preview\nLink\nNew Window\nDownload\nDisabled\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\n\nconst App = () => (\n  <>\n    Link\n    \n      New Window\n    \n    \n      Download\n    \n    \n      Disabled\n    \n  \n);\n```\n\n:::tip\nWhen a `target` is set, the link will receive `rel=\"noreferrer noopener\"` for [security reasons](https://mathiasbynens.github.io/rel-noopener/).\n:::\n\n### Setting a Custom Width\n\nAs expected, buttons can be given a custom width by passing inline styles to the component (or using a class). This is useful for making buttons span the full width of their container on smaller screens.\n\n```html:preview\nSmall\nMedium\nLarge\n```\n\n{% raw %}\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\n\nconst App = () => (\n  <>\n    \n      Small\n    \n    \n      Medium\n    \n    \n      Large\n    \n  \n);\n```\n\n{% endraw %}\n\n### Prefix and Suffix Icons\n\nUse the `prefix` and `suffix` slots to add icons.\n\n```html:preview\n\n  \n  Settings\n\n\n\n  \n  Refresh\n\n\n\n  \n  \n  Open\n\n\n

    \n\n\n  \n  Settings\n\n\n\n  \n  Refresh\n\n\n\n  \n  \n  Open\n\n\n

    \n\n\n  \n  Settings\n\n\n\n  \n  Refresh\n\n\n\n  \n  \n  Open\n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => (\n  <>\n    \n      \n      Settings\n    \n\n    \n      \n      Refresh\n    \n\n    \n      \n      \n      Open\n    \n\n    
    \n    
    \n\n    \n      \n      Settings\n    \n\n    \n      \n      Refresh\n    \n\n    \n      \n      \n      Open\n    \n\n    
    \n    
    \n\n    \n      \n      Settings\n    \n\n    \n      \n      Refresh\n    \n\n    \n      \n      \n      Open\n    \n  \n);\n```\n\n### Caret\n\nUse the `caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.\n\n```html:preview\nSmall\nMedium\nLarge\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\n\nconst App = () => (\n  <>\n    \n      Small\n    \n    \n      Medium\n    \n    \n      Large\n    \n  \n);\n```\n\n### Loading\n\nUse the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.\n\n```html:preview\nDefault\nPrimary\nSuccess\nNeutral\nWarning\nDanger\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\n\nconst App = () => (\n  <>\n    \n      Default\n    \n    \n      Primary\n    \n    \n      Success\n    \n    \n      Neutral\n    \n    \n      Warning\n    \n    \n      Danger\n    \n  \n);\n```\n\n### Disabled\n\nUse the `disabled` attribute to disable a button.\n\n```html:preview\nDefault\nPrimary\nSuccess\nNeutral\nWarning\nDanger\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\n\nconst App = () => (\n  <>\n    \n      Default\n    \n\n    \n      Primary\n    \n\n    \n      Success\n    \n\n    \n      Neutral\n    \n\n    \n      Warning\n    \n\n    \n      Danger\n    \n  \n);\n```\n\n### Styling Buttons\n\nThis example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's `variant` attribute instead of a class (e.g. `sl-button[variant=\"primary\"]`).\n\n```html:preview\nPink Button\n\n\n```\n"
  },
  {
    "path": "docs/pages/components/card.md",
    "content": "---\nmeta:\n  title: Card\n  description: Cards can be used to group related subjects in a container.\nlayout: component\n---\n\n```html:preview\n\n  \n\n  Mittens
    \n  This kitten is as cute as he is playful. Bring him home today!
    \n  6 weeks old\n\n  
    \n    More Info\n    \n  
    \n    \n\n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlCard from '@shoelace-style/shoelace/dist/react/card';\nimport SlRating from '@shoelace-style/shoelace/dist/react/rating';\n\nconst css = `\n  .card-overview {\n    max-width: 300px;\n  }\n\n  .card-overview small {\n    color: var(--sl-color-neutral-500);\n  }\n\n  .card-overview [slot=\"footer\"] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n`;\n\nconst App = () => (\n  <>\n    \n      \n      Mittens\n      
    \n      This kitten is as cute as he is playful. Bring him home today!\n      
    \n      6 weeks old\n      
    \n        \n          More Info\n        \n        \n      
    \n        \n\n    \n  \n);\n```\n\n## Examples\n\n### Basic Card\n\nBasic cards aren't very exciting, but they can display any content you want them to.\n\n```html:preview\n\n  This is just a basic card. No image, no header, and no footer. Just your content.\n\n\n\n```\n\n```jsx:react\nimport SlCard from '@shoelace-style/shoelace/dist/react/card';\n\nconst css = `\n  .card-basic {\n    max-width: 300px;\n  }\n`;\n\nconst App = () => (\n  <>\n    \n      This is just a basic card. No image, no header, and no footer. Just your content.\n    \n\n    \n  \n);\n```\n\n### Card with Header\n\nHeaders can be used to display titles and more.\n\n```html:preview\n\n  
    \n    Header Title\n    \n  
    \n\n  This card has a header. You can put all sorts of things in it!\n    \n\n\n```\n\n```jsx:react\nimport SlCard from '@shoelace-style/shoelace/dist/react/card';\nimport SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';\n\nconst css = `\n  .card-header {\n    max-width: 300px;\n  }\n\n  .card-header [slot=\"header\"] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .card-header h3 {\n    margin: 0;\n  }\n\n  .card-header sl-icon-button {\n    font-size: var(--sl-font-size-medium);\n  }\n`;\n\nconst App = () => (\n  <>\n    \n      
    \n        Header Title\n        \n      
    \n      This card has a header. You can put all sorts of things in it!\n        \n\n    \n  \n);\n```\n\n### Card with Footer\n\nFooters can be used to display actions, summaries, or other relevant content.\n\n```html:preview\n\n  This card has a footer. You can put all sorts of things in it!\n\n  
    \n    \n    Preview\n  
    \n    \n\n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlCard from '@shoelace-style/shoelace/dist/react/card';\nimport SlRating from '@shoelace-style/shoelace/dist/react/rating';\n\nconst css = `\n  .card-footer {\n    max-width: 300px;\n  }\n\n  .card-footer [slot=\"footer\"] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n`;\n\nconst App = () => (\n  <>\n    \n      This card has a footer. You can put all sorts of things in it!\n      
    \n        \n        \n          Preview\n        \n      
    \n        \n\n    \n  \n);\n```\n\n### Images\n\nCards accept an `image` slot. The image is displayed atop the card and stretches to fit.\n\n```html:preview\n\n  \n  This is a kitten, but not just any kitten. This kitten likes walking along pallets.\n\n\n\n```\n\n```jsx:react\nimport SlCard from '@shoelace-style/shoelace/dist/react/card';\n\nconst css = `\n  .card-image {\n    max-width: 300px;\n  }\n`;\n\nconst App = () => (\n  <>\n    \n      \n      This is a kitten, but not just any kitten. This kitten likes walking along pallets.\n    \n\n    \n  \n);\n```\n"
  },
  {
    "path": "docs/pages/components/carousel-item.md",
    "content": "---\nmeta:\n  title: Carousel Item\n  description: A carousel item represent a slide within a carousel.\nlayout: component\n---\n\n```html:preview\n\n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n\n```\n\n```jsx:react\nimport SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';\nimport SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';\n\nconst App = () => (\n  \n    \n      \n    \n    \n      \n    \n    \n      \n    \n    \n      \n    \n    \n      \n    \n  \n);\n```\n\n:::tip\nAdditional demonstrations can be found in the [carousel examples](/components/carousel).\n:::\n"
  },
  {
    "path": "docs/pages/components/carousel.md",
    "content": "---\nmeta:\n  title: Carousel\n  description: Carousels display an arbitrary number of content slides along a horizontal or vertical axis.\nlayout: component\n---\n\n```html:preview\n\n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n\n```\n\n```jsx:react\nimport SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';\nimport SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';\n\nconst App = () => (\n  <>\n    \n      \n        \n      \n      \n        \n      \n      \n        \n      \n      \n        \n      \n      \n        \n      \n    \n  \n);\n```\n\n## Examples\n\n### Pagination\n\nUse the `pagination` attribute to show the total number of slides and the current slide as a set of interactive dots.\n\n```html:preview\n\n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n\n```\n\n```jsx:react\nimport SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';\nimport SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';\n\nconst App = () => (\n  \n    \n      \n    \n    \n      \n    \n    \n      \n    \n    \n      \n    \n    \n      \n    \n  \n);\n```\n\n### Navigation\n\nUse the `navigation` attribute to show previous and next buttons.\n\n```html:preview\n\n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n\n```\n\n```jsx:react\nimport SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';\nimport SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';\n\nconst App = () => (\n  \n    \n      \n    \n    \n      \n    \n    \n      \n    \n    \n      \n    \n    \n      \n    \n  \n);\n```\n\n### Looping\n\nBy default, the carousel will not advanced beyond the first and last slides. You can change this behavior and force the carousel to \"wrap\" with the `loop` attribute.\n\n```html:preview\n\n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n\n```\n\n```jsx:react\nimport SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';\nimport SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';\n\nconst App = () => (\n  \n    \n      \n    \n    \n      \n    \n    \n      \n    \n    \n      \n    \n    \n      \n    \n  \n);\n```\n\n### Autoplay\n\nThe carousel will automatically advance when the `autoplay` attribute is used. To change how long a slide is shown before advancing, set `autoplay-interval` to the desired number of milliseconds. For best results, use the `loop` attribute when autoplay is enabled. Note that autoplay will pause while the user interacts with the carousel.\n\n```html:preview\n\n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n\n```\n\n```jsx:react\nimport SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';\nimport SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';\n\nconst App = () => (\n  \n    \n      \n    \n    \n      \n    \n    \n      \n    \n    \n      \n    \n    \n      \n    \n  \n);\n```\n\n### Mouse Dragging\n\nThe carousel uses [scroll snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap) to position slides at various snap positions. This allows users to scroll through the slides very naturally, especially on touch devices. Unfortunately, desktop users won't be able to click and drag with a mouse, which can feel unnatural. Adding the `mouse-dragging` attribute can help with this.\n\nThis example is best demonstrated using a mouse. Try clicking and dragging the slide to move it. Then toggle the switch and try again.\n\n```html:preview\n
    \n  \n    \n      \n    \n    \n      \n    \n    \n      \n    \n    \n      \n    \n    \n      \n    \n  \n\n  \n\n  Enable mouse dragging\n
    \n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';\nimport SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlSwitch from '@shoelace-style/shoelace/dist/react/switch';\n\nconst App = () => {\n  const [isEnabled, setIsEnabled] = useState(false);\n\n  return (\n    <>\n      \n        \n          \n        \n        \n          \n        \n        \n          \n        \n        \n          \n        \n        \n          \n        \n      \n\n      \n\n       setIsEnabled(!isEnabled)}>\n        Enable mouse dragging\n      \n    \n  );\n};\n```\n\n### Multiple Slides Per View\n\nThe `slides-per-page` attribute makes it possible to display multiple slides at a time. You can also use the `slides-per-move` attribute to advance more than once slide at a time, if desired.\n\n```html:preview\n\n  Slide 1\n  Slide 2\n  Slide 3\n  Slide 4\n  Slide 5\n  Slide 6\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';\nimport SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';\n\nconst App = () => (\n  \n    Slide 1\n    Slide 2\n    Slide 3\n    Slide 4\n    Slide 5\n    Slide 6\n  \n);\n```\n\n{% endraw %}\n\n### Adding and Removing Slides\n\nThe content of the carousel can be changed by adding or removing carousel items. The carousel will update itself automatically.\n\n```html:preview\n\n  Slide 1\n  Slide 2\n  Slide 3\n\n\n
    \n  Add slide\n  Remove slide\n
    \n\n\n\n\n```\n\n{% raw %}\n\n```jsx:react\nimport { useState } from 'react';\nimport SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';\nimport SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';\n\nconst css = `\n  .dynamic-carousel {\n    --aspect-ratio: 3 / 2;\n  }\n\n  .dynamic-carousel ~ .carousel-options {\n    display: flex;\n    justify-content: center;\n    margin-top: var(--sl-spacing-large);\n  }\n\n  .dynamic-carousel sl-carousel-item {\n    flex: 0 0 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: var(--sl-font-size-2x-large);\n  }\n`;\n\nconst App = () => {\n  const [slides, setSlides] = useState(['#204ed8', '#be133d', '#6e28d9']);\n  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'violet'];\n\n  const addSlide = () => {\n    setSlides([...slides, getRandomColor()]);\n  };\n\n  const removeSlide = () => {\n    setSlides(slides.slice(0, -1));\n  };\n\n  return (\n    <>\n      \n        {slides.map((color, i) => (\n          \n            Slide {i}\n          \n        ))}\n      \n\n      
    \n        Add slide\n        Remove slide\n      
    \n\n      \n    \n  );\n};\n```\n\n{% endraw %}\n\n### Vertical Scrolling\n\nSetting the `orientation` attribute to `vertical` will render the carousel in a vertical layout. If the content of your slides vary in height, you will need to set amn explicit `height` or `max-height` on the carousel using CSS.\n\n```html:preview\n\n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n\n\n```\n\n```jsx:react\nimport SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';\nimport SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';\n\nconst css = `\n  .vertical {\n    max-height: 400px;\n  }\n\n  .vertical::part(base) {\n    grid-template-areas: 'slides slides pagination';\n  }\n\n  .vertical::part(pagination) {\n    flex-direction: column;\n  }\n\n  .vertical::part(navigation) {\n    transform: rotate(90deg);\n    display: flex;\n  }\n`;\n\nconst App = () => (\n  <>\n    \n      \n        \n      \n      \n        \n      \n      \n        \n      \n      \n        \n      \n      \n        \n      \n    \n    \n  \n);\n```\n\n### Aspect Ratio\n\nUse the `--aspect-ratio` custom property to customize the size of the carousel's viewport from the default value of 16/9.\n\n```html:preview\n\n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n\n\n\n\n\n  1/1\n  3/2\n  16/9\n\n\n\n```\n\n{% raw %}\n\n```jsx:react\nimport { useState } from 'react';\nimport SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';\nimport SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlSelect from '@shoelace-style/shoelace/dist/react/select';\nimport SlOption from '@shoelace-style/shoelace/dist/react/option';\n\nconst App = () => {\n  const [aspectRatio, setAspectRatio] = useState('3/2');\n\n  return (\n    <>\n      \n        \n          \n        \n        \n          \n        \n        \n          \n        \n        \n          \n        \n        \n          \n        \n      \n\n      \n\n       setAspectRatio(event.target.value)}\n      >\n        1 / 1\n        3 / 2\n        16 / 9\n      \n\n      \n    \n  );\n};\n```\n\n{% endraw %}\n\n### Scroll Hint\n\nUse the `--scroll-hint` custom property to add inline padding in horizontal carousels and block padding in vertical carousels. This will make the closest slides slightly visible, hinting that there are more items in the carousel.\n\n```html:preview\n\n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n\n```\n\n{% raw %}\n\n```jsx:react\nimport { useState } from 'react';\nimport SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';\nimport SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlRange from '@shoelace-style/shoelace/dist/react/range';\n\nconst App = () => (\n  <>\n    \n      \n        \n      \n      \n        \n      \n      \n        \n      \n      \n        \n      \n      \n        \n      \n    \n  \n);\n```\n\n{% endraw %}\n\n### Gallery Example\n\nThe carousel has a robust API that makes it possible to extend and customize. This example syncs the active slide with a set of thumbnails, effectively creating a gallery-style carousel.\n\n```html:preview\n\n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n  \n    \n  \n\n\n
    \n  
    \n    \"Thumbnail\n    \"Thumbnail\n    \"Thumbnail\n    \"Thumbnail\n    \"Thumbnail\n  
    \n
    \n\n\n\n\n```\n\n```jsx:react\nimport { useRef } from 'react';\nimport SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';\nimport SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlRange from '@shoelace-style/shoelace/dist/react/range';\n\nconst css = `\n  .carousel-thumbnails {\n    --slide-aspect-ratio: 3 / 2;\n  }\n\n  .thumbnails {\n    display: flex;\n    justify-content: center;\n  }\n\n  .thumbnails__scroller {\n    display: flex;\n    gap: var(--sl-spacing-small);\n    overflow-x: auto;\n    scrollbar-width: none;\n    scroll-behavior: smooth;\n    scroll-padding: var(--sl-spacing-small);\n  }\n\n  .thumbnails__scroller::-webkit-scrollbar {\n    display: none;\n  }\n\n  .thumbnails__image {\n    width: 64px;\n    height: 64px;\n    object-fit: cover;\n\n    opacity: 0.3;\n    will-change: opacity;\n    transition: 250ms opacity;\n\n    cursor: pointer;\n  }\n\n  .thumbnails__image.active {\n    opacity: 1;\n  }\n`;\n\nconst images = [\n  {\n    src: '/assets/examples/carousel/mountains.jpg',\n    alt: 'The sun shines on the mountains and trees (by Adam Kool on Unsplash'\n  },\n  {\n    src: '/assets/examples/carousel/waterfall.jpg',\n    alt: 'A waterfall in the middle of a forest (by Thomas Kelly on Unsplash'\n  },\n  {\n    src: '/assets/examples/carousel/sunset.jpg',\n    alt: 'The sun is setting over a lavender field (by Leonard Cotte on Unsplash'\n  },\n  {\n    src: '/assets/examples/carousel/field.jpg',\n    alt: 'A field of grass with the sun setting in the background (by Sapan Patel on Unsplash'\n  },\n  {\n    src: '/assets/examples/carousel/valley.jpg',\n    alt: 'A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash'\n  }\n];\n\nconst App = () => {\n  const carouselRef = useRef();\n  const thumbnailsRef = useRef();\n  const [currentSlide, setCurrentSlide] = useState(0);\n\n  useEffect(() => {\n    const thumbnails = Array.from(thumbnailsRef.current.querySelectorAll('.thumbnails__image'));\n\n    thumbnails[currentSlide]..scrollIntoView({\n      block: 'nearest'\n    });\n  }, [currentSlide]);\n\n  const handleThumbnailClick = (index) => {\n    carouselRef.current.goToSlide(index);\n  }\n\n  const handleSlideChange = (event) => {\n    const slideIndex = e.detail.index;\n    setCurrentSlide(slideIndex);\n  }\n\n  return (\n    <>\n      \n        {images.map({ src, alt }) => (\n          \n            \n          \n        )}\n      \n\n      
    \n        
    \n          {images.map({ src, alt }, i) => (\n             handleThumbnailClick(i)}\n              src={src}\n            />\n          )}\n        
    \n      
    \n      \n    \n  );\n};\n```\n"
  },
  {
    "path": "docs/pages/components/checkbox.md",
    "content": "---\nmeta:\n  title: Checkbox\n  description: Checkboxes allow the user to toggle an option on or off.\nlayout: component\n---\n\n```html:preview\nCheckbox\n```\n\n```jsx:react\nimport SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';\n\nconst App = () => Checkbox;\n```\n\n:::tip\nThis component works with standard `
    ` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.\n:::\n\n## Examples\n\n### Checked\n\nUse the `checked` attribute to activate the checkbox.\n\n```html:preview\nChecked\n```\n\n```jsx:react\nimport SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';\n\nconst App = () => Checked;\n```\n\n### Indeterminate\n\nUse the `indeterminate` attribute to make the checkbox indeterminate.\n\n```html:preview\nIndeterminate\n```\n\n```jsx:react\nimport SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';\n\nconst App = () => Indeterminate;\n```\n\n### Disabled\n\nUse the `disabled` attribute to disable the checkbox.\n\n```html:preview\nDisabled\n```\n\n```jsx:react\nimport SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';\n\nconst App = () => Disabled;\n```\n\n### Sizes\n\nUse the `size` attribute to change a checkbox's size.\n\n```html:preview\nSmall\n
    \nMedium\n
    \nLarge\n```\n\n```jsx:react\nimport SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';\n\nconst App = () => (\n  <>\n    Small\n    
    \n    Medium\n    
    \n    Large\n  \n);\n```\n\n### Help Text\n\nAdd descriptive help text to a switch with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.\n\n```html:preview\nLabel\n```\n\n```jsx:react\nimport SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';\n\nconst App = () => Label;\n```\n\n### Custom Validity\n\nUse the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.\n\n```html:preview\n\n  Check me\n  
    \n  Submit\n
    \n\n```\n\n{% raw %}\n\n```jsx:react\nimport { useEffect, useRef } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';\n\nconst App = () => {\n  const checkbox = useRef(null);\n  const errorMessage = `Don't forget to check me!`;\n\n  function handleChange() {\n    checkbox.current.setCustomValidity(checkbox.current.checked ? '' : errorMessage);\n  }\n\n  function handleSubmit(event) {\n    event.preventDefault();\n    alert('All fields are valid!');\n  }\n\n  useEffect(() => {\n    checkbox.current.setCustomValidity(errorMessage);\n  }, []);\n\n  return (\n    
    \n      \n        Check me\n      \n      
    \n      \n        Submit\n      \n    
    \n  );\n};\n```\n\n{% endraw %}\n"
  },
  {
    "path": "docs/pages/components/color-picker.md",
    "content": "---\nmeta:\n  title: Color Picker\n  description: Color pickers allow the user to select a color.\nlayout: component\n---\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';\n\nconst App = () => ;\n```\n\n:::tip\nThis component works with standard `
    ` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.\n:::\n\n## Examples\n\n### Initial Value\n\nUse the `value` attribute to set an initial value for the color picker.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';\n\nconst App = () => ;\n```\n\n### Opacity\n\nUse the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, HSLA, or HSVA based on `format`.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';\n\nconst App = () => ;\n```\n\n### Formats\n\nSet the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, `hsl`, and `hsv`. Note that the color picker's input will accept any parsable format (including CSS color names) regardless of this option.\n\nTo prevent users from toggling the format themselves, add the `no-format-toggle` attribute.\n\n```html:preview\n\n\n\n\n```\n\n```jsx:react\nimport SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';\n\nconst App = () => (\n  <>\n    \n    \n    \n    \n  \n);\n```\n\n### Swatches\n\nUse the `swatches` attribute to add convenient presets to the color picker. Any format the color picker can parse is acceptable (including CSS color names), but each value must be separated by a semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';\n\nconst App = () => (\n  \n);\n```\n\n### Sizes\n\nUse the `size` attribute to change the color picker's trigger size.\n\n```html:preview\n\n\n\n```\n\n```jsx:react\nimport SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';\n\nconst App = () => (\n  <>\n    \n    \n    \n  \n);\n```\n\n### Inline\n\nThe color picker can be rendered inline instead of in a dropdown using the `inline` attribute.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';\n\nconst App = () => ;\n```\n"
  },
  {
    "path": "docs/pages/components/copy-button.md",
    "content": "---\nmeta:\n  title: Copy Button\n  description: Copies data to the clipboard when the user clicks the button.\nlayout: component\n---\n\n```html:preview\n\n```\n\n```jsx:react\nimport { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';\n\nconst App = () => (\n  \n);\n```\n\n## Examples\n\n### Custom Labels\n\nCopy Buttons display feedback in a tooltip. You can customize the labels using the `copy-label`, `success-label`, and `error-label` attributes.\n\n```html:preview\n\n```\n\n```jsx:react\nimport { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';\n\nconst App = () => (\n  \n);\n```\n\n### Custom Icons\n\nUse the `copy-icon`, `success-icon`, and `error-icon` slots to customize the icons that get displayed for each state. You can use [``](/components/icon) or your own images.\n\n```html:preview\n\n  \n  \n  \n\n```\n\n```jsx:react\nimport { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';\nimport { SlIcon } from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => (\n  <>\n    \n      \n      \n      \n    \n  \n);\n```\n\n### Copying Values From Other Elements\n\nNormally, the data that gets copied will come from the component's `value` attribute, but you can copy data from any element within the same document by providing its `id` to the `from` attribute.\n\nWhen using the `from` attribute, the element's [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) will be copied by default. Passing an attribute or property modifier will let you copy data from one of the element's attributes or properties instead.\n\nTo copy data from an attribute, use `from=\"id[attr]\"` where `id` is the id of the target element and `attr` is the name of the attribute you'd like to copy. To copy data from a property, use `from=\"id.prop\"` where `id` is the id of the target element and `prop` is the name of the property you'd like to copy.\n\n```html:preview\n\n+1 (234) 456-7890\n\n\n

    \n\n\n\n\n\n

    \n\n\n    Shoelace Website\n\n```\n\n```jsx:react\nimport { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';\nimport { SlInput } from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => (\n  <>\n    {/* Copies the span's textContent */}\n    +1 (234) 456-7890\n    \n\n    

    \n\n    {/* Copies the input's \"value\" property */}\n    \n    \n\n    

    \n\n    {/* Copies the link's \"href\" attribute */}\n    Shoelace Website\n    \n  \n);\n```\n\n### Handling Errors\n\nA copy error will occur if the value is an empty string, if the `from` attribute points to an id that doesn't exist, or if the browser rejects the operation for any reason. When this happens, the `sl-error` event will be emitted.\n\nThis example demonstrates what happens when a copy error occurs. You can customize the error label and icon using the `error-label` attribute and the `error-icon` slot, respectively.\n\n```html:preview\n\n```\n\n```jsx:react\nimport { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';\n\nconst App = () => (\n  \n);\n```\n\n### Disabled\n\nCopy buttons can be disabled by adding the `disabled` attribute.\n\n```html:preview\n\n```\n\n```jsx:react\nimport { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';\n\nconst App = () => (\n  \n);\n```\n\n### Changing Feedback Duration\n\nA success indicator is briefly shown after copying. You can customize the length of time the indicator is shown using the `feedback-duration` attribute.\n\n```html:preview\n\n```\n\n```jsx:react\nimport { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';\n\nconst App = () => (\n  \n);\n```\n\n### Custom Styles\n\nYou can customize the button to your liking with CSS.\n\n```html:preview\n\n  \n  \n  \n\n\n\n```\n\n```jsx:react\nimport { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';\n\nconst css = `\n  .custom-styles {\n    --success-color: white;\n    --error-color: white;\n    color: white;\n  }\n\n  .custom-styles::part(button) {\n    background-color: #ff1493;\n    border: solid 4px #ff7ac1;\n    border-right-color: #ad005c;\n    border-bottom-color: #ad005c;\n    border-radius: 0;\n    transition: 100ms scale ease-in-out, 100ms translate ease-in-out;\n  }\n\n  .custom-styles::part(button):hover {\n    scale: 1.1;\n  }\n\n  .custom-styles::part(button):active {\n    translate: 0 2px;\n  }\n\n  .custom-styles::part(button):focus-visible {\n    outline: dashed 2px deeppink;\n    outline-offset: 4px;\n  }\n`;\n\nconst App = () => (\n  <>\n    \n\n    \n  \n);\n```\n"
  },
  {
    "path": "docs/pages/components/details.md",
    "content": "---\nmeta:\n  title: Details\n  description: Details show a brief summary and expand to show additional content.\nlayout: component\n---\n\n\n\n```html:preview\n\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\n```\n\n```jsx:react\nimport SlDetails from '@shoelace-style/shoelace/dist/react/details';\n\nconst App = () => (\n  \n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n  \n);\n```\n\n## Examples\n\n### Disabled\n\nUse the `disable` attribute to prevent the details from expanding.\n\n```html:preview\n\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\n```\n\n```jsx:react\nimport SlDetails from '@shoelace-style/shoelace/dist/react/details';\n\nconst App = () => (\n  \n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n  \n);\n```\n\n### Customizing the Summary Icon\n\nUse the `expand-icon` and `collapse-icon` slots to change the expand and collapse icons, respectively. To disable the animation, override the `rotate` property on the `summary-icon` part as shown below.\n\n```html:preview\n\n  \n  \n\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\n\n\n```\n\n```jsx:react\nimport SlDetails from '@shoelace-style/shoelace/dist/react/details';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst css = `\n  sl-details.custom-icon::part(summary-icon) {\n    /* Disable the expand/collapse animation */\n    rotate: none;\n  }\n`;\n\nconst App = () => (\n  <>\n    \n      \n      \n      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat.\n    \n\n    \n  \n);\n```\n\n### Grouping Details\n\nDetails are designed to function independently, but you can simulate a group or \"accordion\" where only one is shown at a time by listening for the `sl-show` event.\n\n```html:preview\n
    \n  \n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n  \n\n  \n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n  \n\n  \n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n  \n
    \n\n\n\n\n```\n"
  },
  {
    "path": "docs/pages/components/dialog.md",
    "content": "---\nmeta:\n  title: Dialog\n  description: 'Dialogs, sometimes called \"modals\", appear above the page and require the user''s immediate attention.'\nlayout: component\n---\n\n\n\n```html:preview\n\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  Close\n\n\nOpen Dialog\n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDialog from '@shoelace-style/shoelace/dist/react/dialog';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n       setOpen(false)}>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n         setOpen(false)}>\n          Close\n        \n      \n\n       setOpen(true)}>Open Dialog\n    \n  );\n};\n```\n\n## Examples\n\n### Custom Width\n\nUse the `--width` custom property to set the dialog's width.\n\n```html:preview\n\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  Close\n\n\nOpen Dialog\n\n\n```\n\n{% raw %}\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDialog from '@shoelace-style/shoelace/dist/react/dialog';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n       setOpen(false)}>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n         setOpen(false)}>\n          Close\n        \n      \n\n       setOpen(true)}>Open Dialog\n    \n  );\n};\n```\n\n{% endraw %}\n\n### Scrolling\n\nBy 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.\n\n```html:preview\n\n  
    \n    
    Scroll down and give it a try! 👇
    \n  
    \n  Close\n    \n\nOpen Dialog\n\n\n```\n\n{% raw %}\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDialog from '@shoelace-style/shoelace/dist/react/dialog';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n       setOpen(false)}>\n        \n          
    Scroll down and give it a try! 👇
    \n        
    \n\n         setOpen(false)}>\n          Close\n        \n      \n\n       setOpen(true)}>Open Dialog\n    \n  );\n};\n```\n\n{% endraw %}\n\n### Header Actions\n\nThe header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed.\n\n```html:preview\n\n  \n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  Close\n\n\nOpen Dialog\n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDialog from '@shoelace-style/shoelace/dist/react/dialog';\nimport SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n       setOpen(false)}>\n         window.open(location.href)}\n        />\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n         setOpen(false)}>\n          Close\n        \n      \n\n       setOpen(true)}>Open Dialog\n    \n  );\n};\n```\n\n### Preventing the Dialog from Closing\n\nBy default, dialogs will close when the user clicks the close button, clicks the overlay, or presses the [[Escape]] key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.\n\nTo keep the dialog open in such cases, you can cancel the `sl-request-close` event. When canceled, the dialog will remain open and pulse briefly to draw the user's attention to it.\n\nYou can use `event.detail.source` to determine what triggered the request to close. This example prevents the dialog from closing when the overlay is clicked, but allows the close button or [[Escape]] to dismiss it.\n\n```html:preview\n\n  This dialog will not close when you click on the overlay.\n  Close\n\n\nOpen Dialog\n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDialog from '@shoelace-style/shoelace/dist/react/dialog';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  // Prevent the dialog from closing when the user clicks on the overlay\n  function handleRequestClose(event) {\n    if (event.detail.source === 'overlay') {\n      event.preventDefault();\n    }\n  }\n\n  return (\n    <>\n       setOpen(false)}>\n        This dialog will not close when you click on the overlay.\n         setOpen(false)}>\n          Close\n        \n      \n\n       setOpen(true)}>Open Dialog\n    \n  );\n};\n```\n\n### Customizing Initial Focus\n\nBy default, the dialog's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the dialog. If you want a different element to have focus, add the `autofocus` attribute to it as shown below.\n\n```html:preview\n\n  \n  Close\n\n\nOpen Dialog\n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDialog from '@shoelace-style/shoelace/dist/react/dialog';\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n       setOpen(false)}>\n        \n         setOpen(false)}>\n          Close\n        \n      \n\n       setOpen(true)}>Open Dialog\n    \n  );\n};\n```\n\n:::tip\nYou can further customize initial focus behavior by canceling the `sl-initial-focus` event and setting focus yourself inside the event handler.\n:::\n"
  },
  {
    "path": "docs/pages/components/divider.md",
    "content": "---\nmeta:\n  title: Divider\n  description: Dividers are used to visually separate or group elements.\nlayout: component\n---\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\n\nconst App = () => ;\n```\n\n## Examples\n\n### Width\n\nUse the `--width` custom property to change the width of the divider.\n\n```html:preview\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\n\nconst App = () => ;\n```\n\n{% endraw %}\n\n### Color\n\nUse the `--color` custom property to change the color of the divider.\n\n```html:preview\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\n\nconst App = () => ;\n```\n\n{% endraw %}\n\n### Spacing\n\nUse the `--spacing` custom property to change the amount of space between the divider and it's neighboring elements.\n\n```html:preview\n
    \n  Above\n  \n  Below\n
    \n```\n\n{% raw %}\n\n```jsx:react\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\n\nconst App = () => (\n  <>\n    Above\n    \n    Below\n  \n);\n```\n\n{% endraw %}\n\n### Vertical\n\nAdd the `vertical` attribute to draw the divider in a vertical orientation. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container.\n\n```html:preview\n
    \n  First\n  \n  Middle\n  \n  Last\n
    \n```\n\n{% raw %}\n\n```jsx:react\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\n\nconst App = () => (\n  \n    First\n    \n    Middle\n    \n    Last\n  
    \n);\n```\n\n{% endraw %}\n\n### Menu Dividers\n\nUse dividers in [menus](/components/menu) to visually group menu items.\n\n```html:preview\n\n  Option 1\n  Option 2\n  Option 3\n  \n  Option 4\n  Option 5\n  Option 6\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => (\n  \n    Option 1\n    Option 2\n    Option 3\n    \n    Option 4\n    Option 5\n    Option 6\n  \n);\n```\n\n### Tailwind users\n\nUsing TailwindCSS with Shoelace [may override divider styles](https://github.com/shoelace-style/shoelace/issues/2088), making them invisible. As a workaround, add this to your Tailwind config file.\n\n```css\n@layer base {\n  sl-divider:not([vertical]) {\n    border-top: solid var(--width) var(--color);\n  }\n\n  sl-divider[vertical] {\n    border-left: solid var(--width) var(--color);\n  }\n}\n```\n\n{% endraw %}\n"
  },
  {
    "path": "docs/pages/components/drawer.md",
    "content": "---\nmeta:\n  title: Drawer\n  description: Drawers slide in from a container to expose additional options and information.\nlayout: component\n---\n\n\n\n```html:preview\n\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  Close\n\n\nOpen Drawer\n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n       setOpen(false)}>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n         setOpen(false)}>\n          Close\n        \n      \n\n       setOpen(true)}>Open Drawer\n    \n  );\n};\n```\n\n## Examples\n\n### Slide in From Start\n\nBy default, drawers slide in from the end. To make the drawer slide in from the start, set the `placement` attribute to `start`.\n\n```html:preview\n\n  This drawer slides in from the start.\n  Close\n\n\nOpen Drawer\n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n       setOpen(false)}>\n        This drawer slides in from the start.\n         setOpen(false)}>\n          Close\n        \n      \n\n       setOpen(true)}>Open Drawer\n    \n  );\n};\n```\n\n### Slide in From Top\n\nTo make the drawer slide in from the top, set the `placement` attribute to `top`.\n\n```html:preview\n\n  This drawer slides in from the top.\n  Close\n\n\nOpen Drawer\n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n       setOpen(false)}>\n        This drawer slides in from the top.\n         setOpen(false)}>\n          Close\n        \n      \n\n       setOpen(true)}>Open Drawer\n    \n  );\n};\n```\n\n### Slide in From Bottom\n\nTo make the drawer slide in from the bottom, set the `placement` attribute to `bottom`.\n\n```html:preview\n\n  This drawer slides in from the bottom.\n  Close\n\n\nOpen Drawer\n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n       setOpen(false)}>\n        This drawer slides in from the bottom.\n         setOpen(false)}>\n          Close\n        \n      \n\n       setOpen(true)}>Open Drawer\n    \n  );\n};\n```\n\n### Contained to an Element\n\nBy default, drawers slide out of their [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport. To make a drawer slide out of a parent element, add the `contained` attribute to the drawer and apply `position: relative` to its parent.\n\nUnlike normal drawers, contained drawers are not modal. This means they do not show an overlay, they do not trap focus, and they are not dismissible with [[Escape]]. This is intentional to allow users to interact with elements outside of the drawer.\n\n```html:preview\n\n  The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.\n\n  \n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n    Close\n  \n
    \n\nToggle Drawer\n\n\n```\n\n{% raw %}\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      \n        The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer\n        opens.\n         setOpen(false)}\n          style={{ '--size': '50%' }}\n        >\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n           setOpen(false)}>\n            Close\n          \n        \n      
    \n\n       setOpen(true)}>Open Drawer\n    \n  );\n};\n```\n\n{% endraw %}\n\n### Custom Size\n\nUse 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`.\n\n```html:preview\n\n  This drawer is always 50% of the viewport.\n  Close\n\n\nOpen Drawer\n\n\n```\n\n{% raw %}\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n       setOpen(false)} style={{ '--size': '50vw' }}>\n        This drawer is always 50% of the viewport.\n         setOpen(false)}>\n          Close\n        \n      \n\n       setOpen(true)}>Open Drawer\n    \n  );\n};\n```\n\n{% endraw %}\n\n### Scrolling\n\nBy 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.\n\n```html:preview\n\n  
    \n    
    Scroll down and give it a try! 👇
    \n  
    \n  Close\n    \n\nOpen Drawer\n\n\n```\n\n{% raw %}\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n       setOpen(false)}>\n        \n          
    Scroll down and give it a try! 👇
    \n        
    \n         setOpen(false)}>\n          Close\n        \n      \n\n       setOpen(true)}>Open Drawer\n    \n  );\n};\n```\n\n{% endraw %}\n\n### Header Actions\n\nThe header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed.\n\n```html:preview\n\n  \n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  Close\n\n\nOpen Drawer\n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';\nimport SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n       setOpen(false)}>\n         window.open(location.href)} />\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n         setOpen(false)}>\n          Close\n        \n      \n\n       setOpen(true)}>Open Drawer\n    \n  );\n};\n```\n\n### Preventing the Drawer from Closing\n\nBy default, drawers will close when the user clicks the close button, clicks the overlay, or presses the [[Escape]] key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.\n\nTo keep the drawer open in such cases, you can cancel the `sl-request-close` event. When canceled, the drawer will remain open and pulse briefly to draw the user's attention to it.\n\nYou can use `event.detail.source` to determine what triggered the request to close. This example prevents the drawer from closing when the overlay is clicked, but allows the close button or [[Escape]] to dismiss it.\n\n```html:preview\n\n  This drawer will not close when you click on the overlay.\n  Close\n\n\nOpen Drawer\n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  // Prevent the drawer from closing when the user clicks on the overlay\n  function handleRequestClose(event) {\n    if (event.detail.source === 'overlay') {\n      event.preventDefault();\n    }\n  }\n\n  return (\n    <>\n       setOpen(false)}>\n        This drawer will not close when you click on the overlay.\n         setOpen(false)}>\n          Save & Close\n        \n      \n\n       setOpen(true)}>Open Drawer\n    \n  );\n};\n```\n\n### Customizing Initial Focus\n\nBy default, the drawer's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the `autofocus` attribute to it as shown below.\n\n```html:preview\n\n  \n  Close\n\n\nOpen Drawer\n\n\n```\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n       setOpen(false)}>\n        \n         setOpen(false)}>\n          Close\n        \n      \n\n       setOpen(true)}>Open Drawer\n    \n  );\n};\n```\n\n:::tip\nYou can further customize initial focus behavior by canceling the `sl-initial-focus` event and setting focus yourself inside the event handler.\n:::\n"
  },
  {
    "path": "docs/pages/components/dropdown.md",
    "content": "---\nmeta:\n  title: Dropdown\n  description: 'Dropdowns expose additional content that \"drops down\" in a panel.'\nlayout: component\n---\n\nDropdowns 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.\n\nDropdowns are designed to work well with [menus](/components/menu) to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. [color picker](/components/color-picker)). The API gives you complete control over showing, hiding, and positioning the panel.\n\n```html:preview\n\n  Dropdown\n  \n    Dropdown Item 1\n    Dropdown Item 2\n    Dropdown Item 3\n    \n    Checkbox\n    Disabled\n    \n    \n      Prefix\n      \n    \n    \n      Suffix Icon\n      \n    \n  \n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => (\n  \n    \n      Dropdown\n    \n    \n      Dropdown Item 1\n      Dropdown Item 2\n      Dropdown Item 3\n      \n      \n        Checkbox\n      \n      Disabled\n      \n      \n        Prefix\n        \n      \n      \n        Suffix Icon\n        \n      \n    \n  \n);\n```\n\n## Examples\n\n### Getting the Selected Item\n\nWhen dropdowns are used with [menus](/components/menu), you can listen for the [`sl-select`](/components/menu#events) event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands.\n\n```html:preview\n
    \n  \n    Edit\n    \n      Cut\n      Copy\n      Paste\n    \n  \n
    \n\n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => {\n  function handleSelect(event) {\n    const selectedItem = event.detail.item;\n    console.log(selectedItem.value);\n  }\n\n  return (\n    \n      \n        Edit\n      \n      \n        Cut\n        Copy\n        Paste\n      \n    \n  );\n};\n```\n\nAlternatively, you can listen for the `click` event on individual menu items. Note that, using this approach, disabled menu items will still emit a `click` event.\n\n```html:preview\n
    \n  \n    Edit\n    \n      Cut\n      Copy\n      Paste\n    \n  \n
    \n\n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => {\n  function handleCut() {\n    console.log('cut');\n  }\n\n  function handleCopy() {\n    console.log('copy');\n  }\n\n  function handlePaste() {\n    console.log('paste');\n  }\n\n  return (\n    \n      \n        Edit\n      \n      \n        Cut\n        Copy\n        Paste\n      \n    \n  );\n};\n```\n\n### Placement\n\nThe 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.\n\n```html:preview\n\n  Edit\n  \n    Cut\n    Copy\n    Paste\n    \n    Find\n    Replace\n  \n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => (\n  \n    \n      Edit\n    \n    \n      Cut\n      Copy\n      Paste\n      \n      Find\n      Replace\n    \n  \n);\n```\n\n### Distance\n\nThe distance from the panel to the trigger can be customized using the `distance` attribute. This value is specified in pixels.\n\n```html:preview\n\n  Edit\n  \n    Cut\n    Copy\n    Paste\n    \n    Find\n    Replace\n  \n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => (\n  \n    \n      Edit\n    \n    \n      Cut\n      Copy\n      Paste\n      \n      Find\n      Replace\n    \n  \n);\n```\n\n### Skidding\n\nThe offset of the panel along the trigger can be customized using the `skidding` attribute. This value is specified in pixels.\n\n```html:preview\n\n  Edit\n  \n    Cut\n    Copy\n    Paste\n    \n    Find\n    Replace\n  \n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => (\n  \n    \n      Edit\n    \n    \n      Cut\n      Copy\n      Paste\n      \n      Find\n      Replace\n    \n  \n);\n```\n\n### Submenus\n\nTo create a submenu, nest an `` element in a [menu item](/components/menu-item).\n\n```html:preview\n\n  Edit\n\n  \n    Undo\n    Redo\n    \n    Cut\n    Copy\n    Paste\n    \n    \n      Find\n      \n        Find…\n        Find Next\n        Find Previous\n      \n    \n    \n      Transformations\n      \n        Make uppercase\n        Make lowercase\n        Capitalize\n      \n    \n  \n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst css = `\n  .dropdown-hoist {\n    border: solid 2px var(--sl-panel-border-color);\n    padding: var(--sl-spacing-medium);\n    overflow: hidden;\n  }\n`;\n\nconst App = () => (\n  <>\n    \n      Edit\n\n      \n        Undo\n        Redo\n        \n        Cut\n        Copy\n        Paste\n        \n        \n          Find\n          \n            Find…\n            Find Next\n            Find Previous\n          \n        \n        \n          Transformations\n          \n            Make uppercase\n            Make lowercase\n            Capitalize\n          \n        \n      \n    \n  \n);\n```\n\n:::warning\nAs a UX best practice, avoid using more than one level of submenu when possible.\n:::\n\n### Hoisting\n\nDropdown panels will be clipped if they're inside a container that has `overflow: auto|hidden`. The `hoist` attribute forces the panel to use a fixed positioning strategy, allowing it to break out of the container. In this case, the panel will be positioned relative to its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.\n\n```html:preview\n
    \n  \n    No Hoist\n    \n      Item 1\n      Item 2\n      Item 3\n    \n  \n\n  \n    Hoist\n    \n      Item 1\n      Item 2\n      Item 3\n    \n  \n
    \n\n\n```\n\n```jsx:react\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst css = `\n  .dropdown-hoist {\n    border: solid 2px var(--sl-panel-border-color);\n    padding: var(--sl-spacing-medium);\n    overflow: hidden;\n  }\n`;\n\nconst App = () => (\n  <>\n    
    \n      \n        \n          No Hoist\n        \n        \n          Item 1\n          Item 2\n          Item 3\n        \n      \n\n      \n        \n          Hoist\n        \n        \n          Item 1\n          Item 2\n          Item 3\n        \n      \n    
    \n\n    \n  \n);\n```\n"
  },
  {
    "path": "docs/pages/components/format-bytes.md",
    "content": "---\nmeta:\n  title: Format Bytes\n  description: Formats a number as a human readable bytes value.\nlayout: component\n---\n\n```html:preview\n
    \n  The file is  in size. 

    \n  \n
    \n\n\n```\n\n{% raw %}\n\n```jsx:react\nimport { useState } from 'react';\nimport SlButton from '@shoelace-style/shoelace/dist/react/button';\nimport SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => {\n  const [value, setValue] = useState(1000);\n\n  return (\n    <>\n      The file is  in size.\n      
    \n      
    \n       setValue(event.target.value)}\n      />\n    \n  );\n};\n```\n\n{% endraw %}\n\n## Examples\n\n### Formatting Bytes\n\nSet the `value` attribute to a number to get the value in bytes.\n\n```html:preview\n
    \n
    \n
    \n\n```\n\n```jsx:react\nimport SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';\n\nconst App = () => (\n  <>\n    \n    
    \n    \n    
    \n    \n    
    \n    \n  \n);\n```\n\n### Formatting Bits\n\nTo get the value in bits, set the `unit` attribute to `bit`.\n\n```html:preview\n
    \n
    \n
    \n\n```\n\n```jsx:react\nimport SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';\n\nconst App = () => (\n  <>\n    \n    
    \n    \n    
    \n    \n    
    \n    \n  \n);\n```\n\n### Localization\n\nUse the `lang` attribute to set the number formatting locale.\n\n```html:preview\n
    \n
    \n
    \n\n```\n\n```jsx:react\nimport SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';\n\nconst App = () => (\n  <>\n    \n    
    \n    \n    
    \n    \n    
    \n    \n  \n);\n```\n"
  },
  {
    "path": "docs/pages/components/format-date.md",
    "content": "---\nmeta:\n  title: Format Date\n  description: Formats a date/time using the specified locale and options.\nlayout: component\n---\n\nLocalization is handled by the browser's [`Intl.DateTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). No language packs are required.\n\n```html:preview\n\n\n```\n\n```jsx:react\nimport SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';\n\nconst App = () => ;\n```\n\nThe `date` attribute determines the date/time to use when formatting. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript. If omitted, the current date/time will be assumed.\n\n:::tip\nWhen using strings, avoid ambiguous dates such as `03/04/2020` which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) to ensure the date will be parsed properly by all clients.\n:::\n\n## Examples\n\n### Date & Time Formatting\n\nFormatting options are based on those found in the [`Intl.DateTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). When formatting options are provided, the date/time will be formatted according to those values. When no formatting options are provided, a localized, numeric date will be displayed instead.\n\n```html:preview\n\n
    \n\n\n
    \n\n\n
    \n\n\n
    \n\n\n
    \n\n\n\n```\n\n```jsx:react\nimport SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';\n\nconst App = () => (\n  <>\n    {/* Human-readable date */}\n    \n    
    \n\n    {/* Time */}\n    \n    
    \n\n    {/* Weekday */}\n    \n    
    \n\n    {/* Month */}\n    \n    
    \n\n    {/* Year */}\n    \n    
    \n\n    {/* No formatting options */}\n    \n  \n);\n```\n\n### Hour Formatting\n\nBy default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the `hour-format` attribute to `12` or `24`.\n\n```html:preview\n
    \n\n```\n\n```jsx:react\nimport SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';\n\nconst App = () => (\n  <>\n    \n    
    \n    \n  \n);\n```\n\n### Localization\n\nUse the `lang` attribute to set the date/time formatting locale.\n\n```html:preview\nEnglish: 
    \nFrench: 
    \nRussian: \n```\n\n```jsx:react\nimport SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';\n\nconst App = () => (\n  <>\n    English: \n    
    \n    French: \n    
    \n    Russian: \n  \n);\n```\n"
  },
  {
    "path": "docs/pages/components/format-number.md",
    "content": "---\nmeta:\n  title: Format Number\n  description: Formats a number using the specified locale and options.\nlayout: component\n---\n\nLocalization is handled by the browser's [`Intl.NumberFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat). No language packs are required.\n\n```html:preview\n
    \n  \n  

    \n  \n
    \n\n\n```\n\n{% raw %}\n\n```jsx:react\nimport { useState } from 'react';\nimport SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => {\n  const [value, setValue] = useState(1000);\n\n  return (\n    <>\n      \n      
    \n      
    \n       setValue(event.target.value)}\n      />\n    \n  );\n};\n```\n\n{% endraw %}\n\n## Examples\n\n### Percentages\n\nTo get the value as a percent, set the `type` attribute to `percent`.\n\n```html:preview\n
    \n
    \n
    \n
    \n\n```\n\n```jsx:react\nimport SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';\n\nconst App = () => (\n  <>\n    \n    
    \n    \n    
    \n    \n    
    \n    \n    
    \n    \n  \n);\n```\n\n### Localization\n\nUse the `lang` attribute to set the number formatting locale.\n\n```html:preview\nEnglish: 
    \nGerman: 
    \nRussian: \n```\n\n```jsx:react\nimport SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';\n\nconst App = () => (\n  <>\n    English: \n    
    \n    German: \n    
    \n    Russian: \n  \n);\n```\n\n### Currency\n\nTo format a number as a monetary value, set the `type` attribute to `currency` and set the `currency` attribute to the desired ISO 4217 currency code. You should also specify `lang` to ensure the the number is formatted correctly for the target locale.\n\n```html:preview\n
    \n
    \n
    \n
    \n\n```\n\n```jsx:react\nimport SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';\n\nconst App = () => (\n  <>\n    \n    
    \n    \n    
    \n    \n    
    \n    \n    
    \n    \n  \n);\n```\n"
  },
  {
    "path": "docs/pages/components/icon-button.md",
    "content": "---\nmeta:\n  title: Icon Button\n  description: Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\nlayout: component\n---\n\nFor a full list of icons that come bundled with Shoelace, refer to the [icon component](/components/icon).\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';\n\nconst App = () => ;\n```\n\n## Examples\n\n### Sizes\n\nIcon buttons inherit their parent element's `font-size`.\n\n```html:preview\n\n\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';\n\nconst App = () => (\n  <>\n    \n    \n    \n  \n);\n```\n\n{% endraw %}\n\n### Colors\n\nIcon buttons are designed to have a uniform appearance, so their color is not inherited. However, you can still customize them by styling the `base` part.\n\n```html:preview\n
    \n  \n  \n  \n
    \n\n\n```\n\n```jsx:react\nimport SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';\n\nconst css = `\n  .icon-button-color sl-icon-button::part(base) {\n    color: #b00091;\n  }\n\n  .icon-button-color sl-icon-button::part(base):hover,\n  .icon-button-color sl-icon-button::part(base):focus {\n    color: #c913aa;\n  }\n\n  .icon-button-color sl-icon-button::part(base):active {\n    color: #960077;\n  }\n`;\n\nconst App = () => (\n  <>\n    
    \n      \n      \n      \n    
    \n\n    \n  \n);\n```\n\n### Link Buttons\n\nUse the `href` attribute to convert the button to a link.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';\n\nconst App = () => ;\n```\n\n### Icon Button with Tooltip\n\nWrap a tooltip around an icon button to provide contextual information to the user.\n\n```html:preview\n\n  \n\n```\n\n```jsx:react\nimport SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';\nimport SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';\n\nconst App = () => (\n  \n    \n  \n);\n```\n\n### Disabled\n\nUse the `disabled` attribute to disable the icon button.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';\n\nconst App = () => ;\n```\n"
  },
  {
    "path": "docs/pages/components/icon.md",
    "content": "---\nmeta:\n  title: Icon\n  description: Icons are symbols that can be used to represent various options within an application.\nlayout: component\n---\n\nShoelace comes bundled with over 1,500 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These icons are part of the `default` icon library. If you prefer, you can register [custom icon libraries](#icon-libraries) as well.\n\n:::tip\nDepending on how you're loading Shoelace, you may need to copy icon assets and/or [set the base path](/getting-started/installation/#setting-the-base-path) so Shoelace knows where to load them from. Otherwise, icons may not appear and you'll see 404 Not Found errors in the dev console.\n:::\n\n## Default Icons\n\nAll available icons in the `default` icon library are shown below. Click or tap on any icon to copy its name, then you can use it in your HTML like this.\n\n```html\n\n```\n\n
    \n  
    \n    \n      \n    \n    \n      Outlined\n      Filled\n      All icons\n    \n  
    \n  
    \n  \n
    \n\n## Examples\n\n### Colors\n\nIcons inherit their color from the current text color. Thus, you can set the `color` property on the `` element or an ancestor to change the color.\n\n```html:preview\n
    \n  \n  \n  \n  \n
    \n
    \n  \n  \n  \n  \n
    \n
    \n  \n  \n  \n  \n
    \n
    \n  \n  \n  \n  \n
    \n```\n\n{% raw %}\n\n```jsx:react\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => (\n  <>\n    
    \n      \n      \n      \n      \n    
    \n    
    \n      \n      \n      \n      \n    
    \n    
    \n      \n      \n      \n      \n    
    \n    
    \n      \n      \n      \n      \n    
    \n  \n);\n```\n\n{% endraw %}\n\n### Sizing\n\nIcons 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.\n\n```html:preview\n
    \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n
    \n```\n\n{% raw %}\n\n```jsx:react\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => (\n  
    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n  
    \n);\n```\n\n{% endraw %}\n\n### Labels\n\nFor non-decorative icons, use the `label` attribute to announce it to assistive devices.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => ;\n```\n\n### Custom Icons\n\nCustom icons can be loaded individually with the `src` attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a [custom icon library](#icon-libraries).\n\n```html:preview\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\n\nconst App = () => ;\n```\n\n{% endraw %}\n\n## Icon Libraries\n\nYou can register additional icons to use with the `` component through icon libraries. Icon files can exist locally or on a CORS-enabled endpoint (e.g. a CDN). There is no limit to how many icon libraries you can register and there is no cost associated with registering them, as individual icons are only requested when they're used.\n\nShoelace ships with two built-in icon libraries, `default` and `system`. The [default icon library](#customizing-the-default-library) contains all of the icons in the Bootstrap Icons project. The [system icon library](#customizing-the-system-library) contains only a small subset of icons that are used internally by Shoelace components.\n\nTo register an additional icon library, use the `registerIconLibrary()` function that's exported from `utilities/icon-library.js`. At a minimum, you must provide a name and a resolver function. The resolver function translates an icon name to a URL where the corresponding SVG file exists. Refer to the examples below to better understand how it works.\n\nIf necessary, a mutator function can be used to mutate the SVG element before rendering. This is necessary for some libraries due to the many possible ways SVGs are crafted. For example, icons should ideally inherit the current text color via `currentColor`, so you may need to apply `fill=\"currentColor` or `stroke=\"currentColor\"` to the SVG element using this function.\n\nHere's an example that registers an icon library located in the `/assets/icons` directory.\n\n```html\n\n```\n\nTo display an icon, set the `library` and `name` attributes of an `` element.\n\n```html\n\n\n```\n\nIf an icon is used before registration occurs, it will be empty initially but shown when registered.\n\nThe following examples demonstrate how to register a number of popular, open source icon libraries via CDN. Feel free to adapt the code as you see fit to use your own origin or naming conventions.\n\n### Boxicons\n\nThis will register the [Boxicons](https://boxicons.com/) library using the jsDelivr CDN. This library has three variations: regular (`bx-*`), solid (`bxs-*`), and logos (`bxl-*`). A mutator function is required to set the SVG's `fill` to `currentColor`.\n\nIcons in this library are licensed under the [Creative Commons 4.0 License](https://github.com/atisawd/boxicons#license).\n\n```html:preview\n\n\n
    \n  \n  \n  \n  \n  \n  \n  
    \n  \n  \n  \n  \n  \n  \n  
    \n  \n  \n  \n  \n  \n  \n
    \n```\n\n### Lucide\n\nThis will register the [Lucide](https://lucide.dev/) icon library using the jsDelivr CDN. This project is a community-maintained fork of the popular [Feather](https://feathericons.com/) icon library.\n\nIcons in this library are licensed under the [MIT License](https://github.com/lucide-icons/lucide/blob/master/LICENSE).\n\n```html:preview\n
    \n  \n  \n  \n  \n  \n  \n
    \n\n\n```\n\n### Font Awesome\n\nThis will register the [Font Awesome Free](https://fontawesome.com/) library using the jsDelivr CDN. This library has three variations: regular (`far-*`), solid (`fas-*`), and brands (`fab-*`). A mutator function is required to set the SVG's `fill` to `currentColor`.\n\nIcons in this library are licensed under the [Font Awesome Free License](https://github.com/FortAwesome/Font-Awesome/blob/master/LICENSE.txt). Some of the icons that appear on the Font Awesome website require a license and are therefore not available in the CDN.\n\n```html:preview\n\n\n
    \n  \n  \n  \n  \n  \n  \n  
    \n  \n  \n  \n  \n  \n  \n  
    \n  \n  \n  \n  \n  \n  \n
    \n```\n\n### Heroicons\n\nThis will register the [Heroicons](https://heroicons.com/) library using the jsDelivr CDN.\n\nIcons in this library are licensed under the [MIT License](https://github.com/tailwindlabs/heroicons/blob/master/LICENSE).\n\n```html:preview\n\n\n
    \n  \n  \n  \n  \n  \n  \n
    \n```\n\n### Iconoir\n\nThis will register the [Iconoir](https://iconoir.com/) library using the jsDelivr CDN.\n\nIcons in this library are licensed under the [MIT License](https://github.com/lucaburgio/iconoir/blob/master/LICENSE).\n\n```html:preview\n\n\n
    \n  \n  \n  \n  \n  \n  \n
    \n```\n\n### Ionicons\n\nThis will register the [Ionicons](https://ionicons.com/) library using the jsDelivr CDN. This library has three variations: outline (default), filled (`*-filled`), and sharp (`*-sharp`). A mutator function is required to polyfill a handful of styles we're not including.\n\nIcons in this library are licensed under the [MIT License](https://github.com/ionic-team/ionicons/blob/master/LICENSE).\n\n```html:preview\n\n\n
    \n  \n  \n  \n  \n  \n  \n  
    \n  \n  \n  \n  \n  \n  \n  
    \n  \n  \n  \n  \n  \n  \n
    \n```\n\n### Jam Icons\n\nThis will register the [Jam Icons](https://jam-icons.com/) library using the jsDelivr CDN. This library has two variations: regular (default) and filled (`*-f`). A mutator function is required to set the SVG's `fill` to `currentColor`.\n\nIcons in this library are licensed under the [MIT License](https://github.com/michaelampr/jam/blob/master/LICENSE).\n\n```html:preview\n\n\n
    \n  \n  \n  \n  \n  \n  \n  
    \n  \n  \n  \n  \n  \n  \n
    \n```\n\n### Material Icons\n\nThis will register the [Material Icons](https://material.io/resources/icons/?style=baseline) library using the jsDelivr CDN. This library has three variations: outline (default), round (`*_round`), and sharp (`*_sharp`). A mutator function is required to set the SVG's `fill` to `currentColor`.\n\nIcons in this library are licensed under the [Apache 2.0 License](https://github.com/google/material-design-icons/blob/master/LICENSE).\n\n```html:preview\n\n\n
    \n  \n  \n  \n  \n  \n  \n  
    \n  \n  \n  \n  \n  \n  \n  
    \n  \n  \n  \n  \n  \n  \n
    \n```\n\n### Remix Icon\n\nThis will register the [Remix Icon](https://remixicon.com/) library using the jsDelivr CDN. This library groups icons by categories, so the name must include the category and icon separated by a slash, as well as the `-line` or `-fill` suffix as needed. A mutator function is required to set the SVG's `fill` to `currentColor`.\n\nIcons in this library are licensed under the [Apache 2.0 License](https://github.com/Remix-Design/RemixIcon/blob/master/License).\n\n```html:preview\n\n\n
    \n  \n  \n  \n  \n  \n  \n  
    \n  \n  \n  \n  \n  \n  \n
    \n```\n\n### Tabler Icons\n\nThis will register the [Tabler Icons](https://tabler-icons.io/) library using the jsDelivr CDN. This library features over 1,950 open source icons.\n\nIcons in this library are licensed under the [MIT License](https://github.com/tabler/tabler-icons/blob/master/LICENSE).\n\n```html:preview\n\n\n
    \n  \n  \n  \n  \n  \n  \n  
    \n  \n  \n  \n  \n  \n  \n
    \n```\n\n### Unicons\n\nThis will register the [Unicons](https://iconscout.com/unicons) library using the jsDelivr CDN. This library has two variations: line (default) and solid (`*-s`). A mutator function is required to set the SVG's `fill` to `currentColor`.\n\nIcons in this library are licensed under the [Apache 2.0 License](https://github.com/Iconscout/unicons/blob/master/LICENSE). Some of the icons that appear on the Unicons website, particularly many of the solid variations, require a license and are therefore not available in the CDN.\n\n```html:preview\n\n\n
    \n  \n  \n  \n  \n  \n  \n  
    \n  \n  \n  \n  \n  \n  \n
    \n```\n\n### Customizing the Default Library\n\nThe default icon library contains over 1,300 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These are the icons that display when you use `` without the `library` attribute. If you prefer to have these icons resolve elsewhere or to a different icon library, register an icon library using the `default` name and a custom resolver.\n\nThis example will load the same set of icons from the jsDelivr CDN instead of your local assets folder.\n\n```html\n\n```\n\n#### Customize the default library to use SVG sprites\n\nTo improve performance you can use a SVG sprites to avoid multiple trips for each SVG. The browser will load the sprite sheet once and then you reference the particular SVG within the sprite sheet using hash selector.\n\nAs always, make sure to benchmark these changes. When using HTTP/2, it may in fact be more bandwidth-friendly to use multiple small requests instead of 1 large sprite sheet.\n\n:::danger\nWhen using sprite sheets, the `sl-load` and `sl-error` events will not fire.\n:::\n\n:::danger\nFor security reasons, browsers may apply the same-origin policy on `` elements located in the `` shadow DOM and may refuse to load a cross-origin URL. There is currently no defined way to set a cross-origin policy for `` elements. For this reason, sprite sheets should only be used if you're self-hosting them.\n:::\n\n```html:preview\n\n\n
    \n  \n  \n
    \n```\n\n### Customizing the System Library\n\nThe system library contains only the icons used internally by Shoelace components. Unlike the default icon library, the system library does not rely on physical assets. Instead, its icons are hard-coded as data URIs into the resolver to ensure their availability.\n\nIf you want to change the icons Shoelace uses internally, you can register an icon library using the `system` name and a custom resolver. If you choose to do this, it's your responsibility to provide all of the icons that are required by components. You can reference `src/components/library.system.ts` for a complete list of system icons used by Shoelace.\n\n```html\n\n```\n\n\n\n\n\n"
  },
  {
    "path": "docs/pages/components/image-comparer.md",
    "content": "---\nmeta:\n  title: Image Comparer\n  description: Compare visual differences between similar photos with a sliding panel.\nlayout: component\n---\n\nFor best results, use images that share the same dimensions. The slider can be controlled by dragging or pressing the left and right arrow keys. (Tip: press shift + arrows to move the slider in larger intervals, or home + end to jump to the beginning or end.)\n\n```html:preview\n\n  \n  \n\n```\n\n```jsx:react\nimport SlImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';\n\nconst App = () => (\n  \n    \n    \n  \n);\n```\n\n## Examples\n\n### Initial Position\n\nUse the `position` attribute to set the initial position of the slider. This is a percentage from `0` to `100`.\n\n```html:preview\n\n  \n  \n\n```\n\n```jsx:react\nimport SlImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';\n\nconst App = () => (\n  \n    \n    \n  \n);\n```\n"
  },
  {
    "path": "docs/pages/components/include.md",
    "content": "---\nmeta:\n  title: Include\n  description: Includes give you the power to embed external HTML files into the page.\nlayout: component\n---\n\nIncluded files are asynchronously requested using `window.fetch()`. Requests are cached, so the same file can be included multiple times, but only one request will be made.\n\nThe included content will be inserted into the `` element's default slot so it can be easily accessed and styled through the light DOM.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlInclude from '@shoelace-style/shoelace/dist/react/include';\n\nconst App = () => ;\n```\n\n## Examples\n\n### Listening for Events\n\nWhen an include file loads successfully, the `sl-load` event will be emitted. You can listen for this event to add custom loading logic to your includes.\n\nIf the request fails, the `sl-error` event will be emitted. In this case, `event.detail.status` will contain the resulting HTTP status code of the request, e.g. 404 (not found).\n\n```html\n\n\n\n```\n"
  },
  {
    "path": "docs/pages/components/input.md",
    "content": "---\nmeta:\n  title: Input\n  description: Inputs collect data from the user.\nlayout: component\n---\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => ;\n```\n\n:::tip\nThis component works with standard `` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.\n:::\n\n## Examples\n\n### Labels\n\nUse the `label` attribute to give the input an accessible label. For labels that contain HTML, use the `label` slot instead.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => ;\n```\n\n### Help Text\n\nAdd descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => ;\n```\n\n### Placeholders\n\nUse the `placeholder` attribute to add a placeholder.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => ;\n```\n\n### Clearable\n\nAdd the `clearable` attribute to add a clear button when the input has content.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => ;\n```\n\n### Toggle Password\n\nAdd the `password-toggle` attribute to add a toggle button that will show the password when activated.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => ;\n```\n\n### Filled Inputs\n\nAdd the `filled` attribute to draw a filled input.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => ;\n```\n\n### Disabled\n\nUse the `disabled` attribute to disable an input.\n\n```html:preview\n\n```\n\n```jsx:react\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => ;\n```\n\n### Sizes\n\nUse the `size` attribute to change an input's size.\n\n```html:preview\n\n
    \n\n
    \n\n```\n\n```jsx:react\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => (\n  <>\n    \n    
    \n    \n    
    \n    \n  \n);\n```\n\n### Pill\n\nUse the `pill` attribute to give inputs rounded edges.\n\n```html:preview\n\n
    \n\n
    \n\n```\n\n```jsx:react\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => (\n  <>\n    \n    
    \n    \n    
    \n    \n  \n);\n```\n\n### Input Types\n\nThe `type` attribute controls the type of input the browser renders.\n\n```html:preview\n\n
    \n\n
    \n\n```\n\n```jsx:react\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => (\n  <>\n    \n    
    \n    \n    
    \n    \n  \n);\n```\n\n### Prefix & Suffix Icons\n\nUse the `prefix` and `suffix` slots to add icons.\n\n```html:preview\n\n  \n  \n\n
    \n\n  \n  \n\n
    \n\n  \n  \n\n```\n\n```jsx:react\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\nimport SlInput from '@shoelace-style/shoelace/dist/react/input';\n\nconst App = () => (\n  <>\n    \n      \n      \n    \n    
    \n    \n      \n      \n    \n    
    \n    \n      \n      \n    \n  \n);\n```\n\n### Customizing Label Position\n\nUse [CSS parts](#css-parts) to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls.\n\n```html:preview\n\n\n\n\n\n```\n"
  },
  {
    "path": "docs/pages/components/menu-item.md",
    "content": "---\nmeta:\n  title: Menu Item\n  description: Menu items provide options for the user to pick from in a menu.\nlayout: component\n---\n\n```html:preview\n\n  Option 1\n  Option 2\n  Option 3\n  \n  Checkbox\n  Disabled\n  \n  \n    Prefix Icon\n    \n  \n  \n    Suffix Icon\n    \n  \n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => (\n  \n    Option 1\n    Option 2\n    Option 3\n    \n    \n      Checkbox\n    \n    Disabled\n    \n    \n      Prefix Icon\n      \n    \n    \n      Suffix Icon\n      \n    \n  \n);\n```\n\n{% endraw %}\n\n## Examples\n\n### Prefix & Suffix\n\nAdd content to the start and end of menu items using the `prefix` and `suffix` slots.\n\n```html:preview\n\n  \n    \n    Home\n  \n\n  \n    \n    Messages\n    12\n  \n\n  \n\n  \n    \n    Settings\n  \n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlBadge from '@shoelace-style/shoelace/dist/react/badge';\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlIcon from '@shoelace-style/shoelace/dist/react/icon';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => (\n  \n    \n      \n      Home\n    \n\n    \n      \n      Messages\n      \n        12\n      \n    \n\n    \n\n    \n      \n      Settings\n    \n  \n);\n```\n\n{% endraw %}\n\n### Disabled\n\nAdd the `disabled` attribute to disable the menu item so it cannot be selected.\n\n```html:preview\n\n  Option 1\n  Option 2\n  Option 3\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => (\n  \n    Option 1\n    Option 2\n    Option 3\n  \n);\n```\n\n{% endraw %}\n\n### Loading\n\nUse the `loading` attribute to indicate that a menu item is busy. Like a disabled menu item, clicks will be suppressed until the loading state is removed.\n\n```html:preview\n\n  Option 1\n  Option 2\n  Option 3\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => (\n  \n    Option 1\n    Option 2\n    Option 3\n  \n);\n```\n\n{% endraw %}\n\n### Checkbox Menu Items\n\nSet the `type` attribute to `checkbox` to create a menu item that will toggle on and off when selected. You can use the `checked` attribute to set the initial state.\n\nCheckbox menu items are visually indistinguishable from regular menu items. Their ability to be toggled is primarily inferred from context, much like you'd find in the menu of a native app.\n\n```html:preview\n\n  Autosave\n  Check Spelling\n  Word Wrap\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => (\n  \n    Autosave\n    \n      Check Spelling\n    \n    Word Wrap\n  \n);\n```\n\n{% endraw %}\n\n### Value & Selection\n\nThe `value` attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the `sl-select` event will be emitted and a reference to the item will be available at `event.detail.item`. You can use this reference to access the selected item's value, its checked state, and more.\n\n```html:preview\n\n  Option 1\n  Option 2\n  Option 3\n  \n  Checkbox 4\n  Checkbox 5\n  Checkbox 6\n\n\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => {\n  function handleSelect(event) {\n    const item = event.detail.item;\n\n    // Toggle checked state\n    item.checked = !item.checked;\n\n    // Log value\n    console.log(`Selected value: ${item.value}`);\n  }\n\n  return (\n    \n      Option 1\n      Option 2\n      Option 3\n    \n  );\n};\n```\n\n{% endraw %}\n"
  },
  {
    "path": "docs/pages/components/menu-label.md",
    "content": "---\nmeta:\n  title: Menu Label\n  description: Menu labels are used to describe a group of menu items.\nlayout: component\n---\n\n```html:preview\n\n  Fruits\n  Apple\n  Banana\n  Orange\n  \n  Vegetables\n  Broccoli\n  Carrot\n  Zucchini\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => (\n  \n    Fruits\n    Apple\n    Banana\n    Orange\n    \n    Vegetables\n    Broccoli\n    Carrot\n    Zucchini\n  \n);\n```\n\n{% endraw %}\n"
  },
  {
    "path": "docs/pages/components/menu.md",
    "content": "---\nmeta:\n  title: Menu\n  description: Menus provide a list of options for the user to choose from.\nlayout: component\n---\n\nYou can use [menu items](/components/menu-item), [menu labels](/components/menu-label), and [dividers](/components/divider) to compose a menu. Menus support keyboard interactions, including type-to-select an option.\n\n```html:preview\n\n  Undo\n  Redo\n  \n  Cut\n  Copy\n  Paste\n  Delete\n\n```\n\n{% raw %}\n\n```jsx:react\nimport SlDivider from '@shoelace-style/shoelace/dist/react/divider';\nimport SlMenu from '@shoelace-style/shoelace/dist/react/menu';\nimport SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';\n\nconst App = () => (\n  \n    Undo\n    Redo\n    \n    Cut\n    Copy\n    Paste\n    Delete\n  \n);\n```\n\n{% endraw %}\n\n:::tip\nMenus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you're building navigation, use `
    \n          \n        \n\n        \n          ${this.helpText}\n        \n      \n    `;\n  }\n}\n\nsetDefaultAnimation('select.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.9 },\n    { opacity: 1, scale: 1 }\n  ],\n  options: { duration: 100, easing: 'ease' }\n});\n\nsetDefaultAnimation('select.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.9 }\n  ],\n  options: { duration: 100, easing: 'ease' }\n});\n"
  },
  {
    "path": "src/components/select/select.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .select {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .select::part(popup) {\n    z-index: var(--sl-z-index-dropdown);\n  }\n\n  .select[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .select[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .select__combobox {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--sl-input-font-family);\n    font-weight: var(--sl-input-font-weight);\n    letter-spacing: var(--sl-input-letter-spacing);\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition:\n      var(--sl-transition-fast) color,\n      var(--sl-transition-fast) border,\n      var(--sl-transition-fast) box-shadow,\n      var(--sl-transition-fast) background-color;\n  }\n\n  .select__display-input {\n    position: relative;\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--sl-input-color);\n    cursor: inherit;\n    overflow: hidden;\n    padding: 0;\n    margin: 0;\n    -webkit-appearance: none;\n  }\n\n  .select__display-input::placeholder {\n    color: var(--sl-input-placeholder-color);\n  }\n\n  .select:not(.select--disabled):hover .select__display-input {\n    color: var(--sl-input-color-hover);\n  }\n\n  .select__display-input:focus {\n    outline: none;\n  }\n\n  /* Visually hide the display input when multiple is enabled */\n  .select--multiple:not(.select--placeholder-visible) .select__display-input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n\n  .select__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n  }\n\n  .select__tags {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    margin-inline-start: var(--sl-spacing-2x-small);\n  }\n\n  .select__tags::slotted(sl-tag) {\n    cursor: pointer !important;\n  }\n\n  .select--disabled .select__tags,\n  .select--disabled .select__tags::slotted(sl-tag) {\n    cursor: not-allowed !important;\n  }\n\n  /* Standard selects */\n  .select--standard .select__combobox {\n    background-color: var(--sl-input-background-color);\n    border: solid var(--sl-input-border-width) var(--sl-input-border-color);\n  }\n\n  .select--standard.select--disabled .select__combobox {\n    background-color: var(--sl-input-background-color-disabled);\n    border-color: var(--sl-input-border-color-disabled);\n    color: var(--sl-input-color-disabled);\n    opacity: 0.5;\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .select--standard:not(.select--disabled).select--open .select__combobox,\n  .select--standard:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--sl-input-background-color-focus);\n    border-color: var(--sl-input-border-color-focus);\n    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);\n  }\n\n  /* Filled selects */\n  .select--filled .select__combobox {\n    border: none;\n    background-color: var(--sl-input-filled-background-color);\n    color: var(--sl-input-color);\n  }\n\n  .select--filled:hover:not(.select--disabled) .select__combobox {\n    background-color: var(--sl-input-filled-background-color-hover);\n  }\n\n  .select--filled.select--disabled .select__combobox {\n    background-color: var(--sl-input-filled-background-color-disabled);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .select--filled:not(.select--disabled).select--open .select__combobox,\n  .select--filled:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--sl-input-filled-background-color-focus);\n    outline: var(--sl-focus-ring);\n  }\n\n  /* Sizes */\n  .select--small .select__combobox {\n    border-radius: var(--sl-input-border-radius-small);\n    font-size: var(--sl-input-font-size-small);\n    min-height: var(--sl-input-height-small);\n    padding-block: 0;\n    padding-inline: var(--sl-input-spacing-small);\n  }\n\n  .select--small .select__clear {\n    margin-inline-start: var(--sl-input-spacing-small);\n  }\n\n  .select--small .select__prefix::slotted(*) {\n    margin-inline-end: var(--sl-input-spacing-small);\n  }\n\n  .select--small.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {\n    margin-inline-start: var(--sl-input-spacing-small);\n  }\n\n  .select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {\n    padding-block: 2px;\n    padding-inline-start: 0;\n  }\n\n  .select--small .select__tags {\n    gap: 2px;\n  }\n\n  .select--medium .select__combobox {\n    border-radius: var(--sl-input-border-radius-medium);\n    font-size: var(--sl-input-font-size-medium);\n    min-height: var(--sl-input-height-medium);\n    padding-block: 0;\n    padding-inline: var(--sl-input-spacing-medium);\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--sl-input-spacing-medium);\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--sl-input-spacing-medium);\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {\n    margin-inline-start: var(--sl-input-spacing-medium);\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {\n    padding-inline-start: 0;\n    padding-block: 3px;\n  }\n\n  .select--medium .select__tags {\n    gap: 3px;\n  }\n\n  .select--large .select__combobox {\n    border-radius: var(--sl-input-border-radius-large);\n    font-size: var(--sl-input-font-size-large);\n    min-height: var(--sl-input-height-large);\n    padding-block: 0;\n    padding-inline: var(--sl-input-spacing-large);\n  }\n\n  .select--large .select__clear {\n    margin-inline-start: var(--sl-input-spacing-large);\n  }\n\n  .select--large .select__prefix::slotted(*) {\n    margin-inline-end: var(--sl-input-spacing-large);\n  }\n\n  .select--large.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {\n    margin-inline-start: var(--sl-input-spacing-large);\n  }\n\n  .select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {\n    padding-inline-start: 0;\n    padding-block: 4px;\n  }\n\n  .select--large .select__tags {\n    gap: 4px;\n  }\n\n  /* Pills */\n  .select--pill.select--small .select__combobox {\n    border-radius: var(--sl-input-height-small);\n  }\n\n  .select--pill.select--medium .select__combobox {\n    border-radius: var(--sl-input-height-medium);\n  }\n\n  .select--pill.select--large .select__combobox {\n    border-radius: var(--sl-input-height-large);\n  }\n\n  /* Prefix and Suffix */\n  .select__prefix,\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--sl-input-placeholder-color);\n  }\n\n  .select__suffix::slotted(*) {\n    margin-inline-start: var(--sl-spacing-small);\n  }\n\n  /* Clear button */\n  .select__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--sl-input-icon-color);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: var(--sl-transition-fast) color;\n    cursor: pointer;\n  }\n\n  .select__clear:hover {\n    color: var(--sl-input-icon-color-hover);\n  }\n\n  .select__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: var(--sl-transition-medium) rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--sl-spacing-small);\n  }\n\n  .select--open .select__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .select__listbox {\n    display: block;\n    position: relative;\n    font-family: var(--sl-font-sans);\n    font-size: var(--sl-font-size-medium);\n    font-weight: var(--sl-font-weight-normal);\n    box-shadow: var(--sl-shadow-large);\n    background: var(--sl-panel-background-color);\n    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);\n    border-radius: var(--sl-border-radius-medium);\n    padding-block: var(--sl-spacing-x-small);\n    padding-inline: 0;\n    overflow: auto;\n    overscroll-behavior: none;\n\n    /* Make sure it adheres to the popup's auto size */\n    max-width: var(--auto-size-available-width);\n    max-height: var(--auto-size-available-height);\n  }\n\n  .select__listbox ::slotted(sl-divider) {\n    --spacing: var(--sl-spacing-x-small);\n  }\n\n  .select__listbox ::slotted(small) {\n    display: block;\n    font-size: var(--sl-font-size-small);\n    font-weight: var(--sl-font-weight-semibold);\n    color: var(--sl-color-neutral-500);\n    padding-block: var(--sl-spacing-2x-small);\n    padding-inline: var(--sl-spacing-x-large);\n  }\n`;\n"
  },
  {
    "path": "src/components/select/select.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport { aTimeout, expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';\nimport { clickOnElement } from '../../internal/test.js';\nimport { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { serialize } from '../../utilities/form.js';\nimport sinon from 'sinon';\nimport type SlOption from '../option/option.js';\nimport type SlSelect from './select.js';\n\ndescribe('', () => {\n  describe('accessibility', () => {\n    it('should pass accessibility tests when closed', async () => {\n      const select = await fixture(html`\n        \n          Option 1\n          Option 2\n          Option 3\n        \n      `);\n      await expect(select).to.be.accessible();\n    });\n\n    it('should pass accessibility tests when open', async () => {\n      const select = await fixture(html`\n        \n          Option 1\n          Option 2\n          Option 3\n        \n      `);\n\n      await select.show();\n\n      await expect(select).to.be.accessible();\n    });\n  });\n\n  it('should be disabled with the disabled attribute', async () => {\n    const el = await fixture(html`\n      \n        Option 1\n        Option 2\n        Option 3\n      \n    `);\n    expect(el.displayInput.disabled).to.be.true;\n  });\n\n  it('should show a placeholder when no options are selected', async () => {\n    const el = await fixture(html`\n      \n        Option 1\n        Option 2\n        Option 3\n      \n    `);\n    const displayInput = el.shadowRoot!.querySelector('[part~=\"display-input\"]')!;\n\n    expect(getComputedStyle(displayInput).opacity).to.not.equal('0');\n    expect(displayInput.placeholder).to.equal('Select one');\n  });\n\n  it('should show a placeholder when no options are selected and multiple is set', async () => {\n    const el = await fixture(html`\n      \n        Option 1\n        Option 2\n        Option 3\n      \n    `);\n    const displayInput = el.shadowRoot!.querySelector('[part~=\"display-input\"]')!;\n\n    expect(getComputedStyle(displayInput).opacity).to.not.equal('0');\n    expect(displayInput.placeholder).to.equal('Select a few');\n  });\n\n  it('should not allow selection when the option is disabled', async () => {\n    const el = await fixture(html`\n      \n        Option 1\n        Option 2\n      \n    `);\n    const disabledOption = el.querySelector('sl-option[disabled]')!;\n\n    await el.show();\n    await clickOnElement(disabledOption);\n    await el.updateComplete;\n\n    expect(el.value).to.equal('option-1');\n  });\n\n  it('should focus the select when clicking on the label', async () => {\n    const el = await fixture(html`\n      \n        Option 1\n        Option 2\n        Option 3\n      \n    `);\n    const label = el.shadowRoot!.querySelector('[part~=\"form-control-label\"]')!;\n    const submitHandler = sinon.spy();\n\n    el.addEventListener('sl-focus', submitHandler);\n    (label as HTMLLabelElement).click();\n    await waitUntil(() => submitHandler.calledOnce);\n\n    expect(submitHandler).to.have.been.calledOnce;\n  });\n\n  describe('when the value changes', () => {\n    it('should emit sl-change when the value is changed with the mouse', async () => {\n      const el = await fixture(html`\n        \n          Option 1\n          Option 2\n          Option 3\n        \n      `);\n      const secondOption = el.querySelectorAll('sl-option')[1];\n      const changeHandler = sinon.spy();\n      const inputHandler = sinon.spy();\n\n      el.addEventListener('sl-change', changeHandler);\n      el.addEventListener('sl-input', inputHandler);\n\n      await el.show();\n      await clickOnElement(secondOption);\n      await el.updateComplete;\n\n      expect(changeHandler).to.have.been.calledOnce;\n      expect(inputHandler).to.have.been.calledOnce;\n      expect(el.value).to.equal('option-2');\n    });\n\n    it('should emit sl-change and sl-input when the value is changed with the keyboard', async () => {\n      const el = await fixture(html`\n        \n          Option 1\n          Option 2\n          Option 3\n        \n      `);\n      const changeHandler = sinon.spy();\n      const inputHandler = sinon.spy();\n\n      el.addEventListener('sl-change', changeHandler);\n      el.addEventListener('sl-input', inputHandler);\n\n      el.focus();\n      await el.updateComplete;\n      await sendKeys({ press: ' ' }); // open the dropdown\n      await aTimeout(500); // wait for the dropdown to open\n      await sendKeys({ press: 'ArrowDown' }); // move selection to the second option\n      await el.updateComplete;\n      await sendKeys({ press: 'ArrowDown' }); // move selection to the third option\n      await el.updateComplete;\n      el.focus(); // For some reason, the browser loses focus before we press enter. Refocus the select.\n      await sendKeys({ press: 'Enter' }); // commit the selection\n      await el.updateComplete;\n\n      expect(changeHandler).to.have.been.calledOnce;\n      expect(inputHandler).to.have.been.calledOnce;\n      expect(el.value).to.equal('option-3');\n    });\n\n    it('should not emit sl-change or sl-input when the value is changed programmatically', async () => {\n      const el = await fixture(html`\n        \n          Option 1\n          Option 2\n          Option 3\n        \n      `);\n\n      el.addEventListener('sl-change', () => expect.fail('sl-change should not be emitted'));\n      el.addEventListener('sl-input', () => expect.fail('sl-input should not be emitted'));\n      el.value = 'option-2';\n\n      await el.updateComplete;\n    });\n\n    it('should emit sl-change and sl-input with the correct validation message when the value changes', async () => {\n      const el = await fixture(html`\n        \n          Option 1\n          Option 2\n          Option 3\n        \n      `);\n      const option2 = el.querySelectorAll('sl-option')[1];\n      const handler = sinon.spy((event: CustomEvent) => {\n        if (el.validationMessage) {\n          expect.fail(`Validation message should be empty when ${event.type} is emitted and a value is set`);\n        }\n      });\n\n      el.addEventListener('sl-change', handler);\n      el.addEventListener('sl-input', handler);\n\n      await clickOnElement(el);\n      await aTimeout(500);\n      await clickOnElement(option2);\n      await el.updateComplete;\n\n      expect(handler).to.be.calledTwice;\n    });\n\n    // this can happen in on ms-edge autofilling an associated input element in the same form\n    // https://github.com/shoelace-style/shoelace/issues/2117\n    it('should not throw on incomplete events', async () => {\n      const el = await fixture(html`\n        \n          Option 1\n        \n      `);\n\n      const event = new KeyboardEvent('keydown');\n      Object.defineProperty(event, 'target', { writable: false, value: el });\n      Object.defineProperty(event, 'key', { writable: false, value: undefined });\n\n      /**\n       * If Edge does autofill, it creates a broken KeyboardEvent\n       * which is missing the key value.\n       * Using the normal dispatch mechanism does not allow to do this\n       * Thus passing the event directly to the private method for testing\n       *\n       * @ts-expect-error */\n      el.handleDocumentKeyDown(event);\n    });\n  });\n\n  it('should open the listbox when any letter key is pressed with sl-select is on focus', async () => {\n    const el = await fixture(html`\n      \n        Option 1\n        Option 2\n        Option 3\n      \n    `);\n    const displayInput = el.shadowRoot!.querySelector('.select__display-input')!;\n\n    el.focus();\n    await sendKeys({ press: 'r' });\n    await el.updateComplete;\n\n    expect(displayInput.getAttribute('aria-expanded')).to.equal('true');\n  });\n\n  it('should not open the listbox when ctrl + R is pressed with sl-select is on focus', async () => {\n    const el = await fixture(html`\n      \n        Option 1\n        Option 2\n        Option 3\n      \n    `);\n    const displayInput = el.shadowRoot!.querySelector('.select__display-input')!;\n\n    el.focus();\n    await sendKeys({ down: 'Control' });\n    await sendKeys({ press: 'r' });\n    await sendKeys({ up: 'Control' });\n    await el.updateComplete;\n    expect(displayInput.getAttribute('aria-expanded')).to.equal('false');\n  });\n\n  describe('when using constraint validation', () => {\n    it('should be valid by default', async () => {\n      const el = await fixture(html`\n        \n          \n            Option 1\n            Option 2\n            Option 3\n          \n        \n      `);\n      const select = el.querySelector('sl-select')!;\n      expect(select.checkValidity()).to.be.true;\n    });\n\n    it('should be invalid when required and empty', async () => {\n      const el = await fixture(html`\n        
    \n          \n            Option 1\n            Option 2\n            Option 3\n          \n        
    \n      `);\n      const select = el.querySelector('sl-select')!;\n      expect(select.checkValidity()).to.be.false;\n    });\n\n    it('should focus on the displayInput when constraint validation occurs', async () => {\n      const el = await fixture(html`\n        
    \n          \n            Option 1\n            Option 2\n            Option 3\n          \n        
    \n      `);\n      const select = el.querySelector('sl-select')!;\n      el.requestSubmit();\n      expect(select.shadowRoot!.activeElement).to.equal(select.displayInput);\n    });\n\n    it('should receive the correct validation attributes (\"states\") when valid', async () => {\n      const el = await fixture(html`\n        \n          Option 1\n          Option 2\n          Option 3\n        \n      `);\n      const secondOption = el.querySelectorAll('sl-option')[1]!;\n\n      expect(el.checkValidity()).to.be.true;\n      expect(el.hasAttribute('data-required')).to.be.true;\n      expect(el.hasAttribute('data-optional')).to.be.false;\n      expect(el.hasAttribute('data-invalid')).to.be.false;\n      expect(el.hasAttribute('data-valid')).to.be.true;\n      expect(el.hasAttribute('data-user-invalid')).to.be.false;\n      expect(el.hasAttribute('data-user-valid')).to.be.false;\n\n      await el.show();\n      await clickOnElement(secondOption);\n      await el.updateComplete;\n      el.blur();\n      await el.updateComplete;\n\n      expect(el.checkValidity()).to.be.true;\n      expect(el.hasAttribute('data-user-invalid')).to.be.false;\n      expect(el.hasAttribute('data-user-valid')).to.be.true;\n    });\n\n    it('should receive the correct validation attributes (\"states\") when invalid', async () => {\n      const el = await fixture(html`\n        \n          Option 1\n          Option 2\n          Option 3\n        \n      `);\n      const secondOption = el.querySelectorAll('sl-option')[1]!;\n\n      expect(el.hasAttribute('data-required')).to.be.true;\n      expect(el.hasAttribute('data-optional')).to.be.false;\n      expect(el.hasAttribute('data-invalid')).to.be.true;\n      expect(el.hasAttribute('data-valid')).to.be.false;\n      expect(el.hasAttribute('data-user-invalid')).to.be.false;\n      expect(el.hasAttribute('data-user-valid')).to.be.false;\n\n      await el.show();\n      await clickOnElement(secondOption);\n      el.value = '';\n      await el.updateComplete;\n      el.blur();\n      await el.updateComplete;\n\n      expect(el.hasAttribute('data-user-invalid')).to.be.true;\n      expect(el.hasAttribute('data-user-valid')).to.be.false;\n    });\n\n    it('should receive validation attributes (\"states\") even when novalidate is used on the parent form', async () => {\n      const el = await fixture(html`\n        
    \n          \n            Option 1\n            Option 2\n            Option 3\n          \n        
    \n      `);\n      const select = el.querySelector('sl-select')!;\n\n      expect(select.hasAttribute('data-required')).to.be.true;\n      expect(select.hasAttribute('data-optional')).to.be.false;\n      expect(select.hasAttribute('data-invalid')).to.be.true;\n      expect(select.hasAttribute('data-valid')).to.be.false;\n      expect(select.hasAttribute('data-user-invalid')).to.be.false;\n      expect(select.hasAttribute('data-user-valid')).to.be.false;\n    });\n  });\n\n  describe('when submitting a form', () => {\n    it('should serialize its name and value with FormData', async () => {\n      const form = await fixture(html`\n        
    \n          \n            Option 1\n            Option 2\n            Option 3\n          \n        
    \n      `);\n      const formData = new FormData(form);\n      expect(formData.get('a')).to.equal('option-1');\n    });\n\n    it('should serialize its name and value in FormData when multiple options are selected', async () => {\n      const form = await fixture(html`\n        
    \n          \n            Option 1\n            Option 2\n            Option 3\n          \n        
    \n      `);\n      const formData = new FormData(form);\n      expect(formData.getAll('a')).to.include('option-2');\n      expect(formData.getAll('a')).to.include('option-3');\n    });\n\n    it('should serialize its name and value in JSON', async () => {\n      const form = await fixture(html`\n        
    \n          \n            Option 1\n            Option 2\n            Option 3\n          \n        
    \n      `);\n      const json = serialize(form);\n      expect(json.a).to.equal('option-1');\n    });\n\n    it('should serialize its name and value in JSON when multiple options are selected', async () => {\n      const form = await fixture(html`\n        
    \n          \n            Option 1\n            Option 2\n            Option 3\n          \n        
    \n      `);\n      const json = serialize(form);\n      expect(JSON.stringify(json)).to.equal(JSON.stringify({ a: ['option-2', 'option-3'] }));\n    });\n\n    it('should be present in form data when using the form attribute and located outside of a 
    ', async () => {\n      const el = await fixture(html`\n        
    \n          \n            Submit\n          \n          \n            Option 1\n            Option 2\n            Option 3\n          \n        
    \n      `);\n      const form = el.querySelector('form')!;\n      const formData = new FormData(form);\n\n      expect(formData.get('a')).to.equal('option-1');\n    });\n  });\n\n  describe('when resetting a form', () => {\n    it('should reset the element to its initial value', async () => {\n      const form = await fixture(html`\n        
    \n          \n            Option 1\n            Option 2\n            Option 3\n          \n          Reset\n        
    \n      `);\n      const resetButton = form.querySelector('sl-button')!;\n      const select = form.querySelector('sl-select')!;\n\n      select.value = 'option-3';\n      await select.updateComplete;\n      expect(select.value).to.equal('option-3');\n\n      setTimeout(() => resetButton.click());\n      await oneEvent(form, 'reset');\n      await select.updateComplete;\n      expect(select.value).to.equal('option-1');\n    });\n  });\n\n  it('should update the display label when an option changes', async () => {\n    const el = await fixture(html`\n      \n        Option 1\n        Option 2\n        Option 3\n      \n    `);\n    const displayInput = el.shadowRoot!.querySelector('.select__display-input')!;\n    const option = el.querySelector('sl-option')!;\n\n    expect(displayInput.value).to.equal('Option 1');\n\n    option.textContent = 'updated';\n\n    await aTimeout(250);\n    await option.updateComplete;\n    await el.updateComplete;\n\n    expect(displayInput.value).to.equal('updated');\n  });\n\n  it('should emit sl-focus and sl-blur when receiving and losing focus', async () => {\n    const el = await fixture(html`\n      \n        Option 1\n        Option 2\n        Option 3\n      \n    `);\n    const focusHandler = sinon.spy();\n    const blurHandler = sinon.spy();\n\n    el.addEventListener('sl-focus', focusHandler);\n    el.addEventListener('sl-blur', blurHandler);\n\n    el.focus();\n    await el.updateComplete;\n    el.blur();\n    await el.updateComplete;\n\n    expect(focusHandler).to.have.been.calledOnce;\n    expect(blurHandler).to.have.been.calledOnce;\n  });\n\n  it('should emit sl-clear when the clear button is clicked', async () => {\n    const el = await fixture(html`\n      \n        Option 1\n        Option 2\n        Option 3\n      \n    `);\n    const clearHandler = sinon.spy();\n    const clearButton = el.shadowRoot!.querySelector('[part~=\"clear-button\"]')!;\n\n    el.addEventListener('sl-clear', clearHandler);\n    await el.show();\n    await clickOnElement(clearButton);\n    await el.updateComplete;\n\n    expect(clearHandler).to.have.been.calledOnce;\n  });\n\n  it('should emit sl-change and sl-input when a tag is removed', async () => {\n    const el = await fixture(html`\n      \n        Option 1\n        Option 2\n        Option 3\n      \n    `);\n    const changeHandler = sinon.spy();\n    const inputHandler = sinon.spy();\n    const tag = el.shadowRoot!.querySelector('[part~=\"tag\"]')!;\n    const removeButton = tag.shadowRoot!.querySelector('[part~=\"remove-button\"]')!;\n\n    el.addEventListener('sl-change', changeHandler);\n    el.addEventListener('sl-input', inputHandler);\n\n    await clickOnElement(removeButton);\n    await el.updateComplete;\n\n    expect(changeHandler).to.have.been.calledOnce;\n    expect(inputHandler).to.have.been.calledOnce;\n  });\n\n  it('should emit sl-show, sl-after-show, sl-hide, and sl-after-hide events when the listbox opens and closes', async () => {\n    const el = await fixture(html`\n      \n        Option 1\n        Option 2\n        Option 3\n      \n    `);\n    const showHandler = sinon.spy();\n    const afterShowHandler = sinon.spy();\n    const hideHandler = sinon.spy();\n    const afterHideHandler = sinon.spy();\n\n    el.addEventListener('sl-show', showHandler);\n    el.addEventListener('sl-after-show', afterShowHandler);\n    el.addEventListener('sl-hide', hideHandler);\n    el.addEventListener('sl-after-hide', afterHideHandler);\n\n    await el.show();\n    expect(showHandler).to.have.been.calledOnce;\n    expect(afterShowHandler).to.have.been.calledOnce;\n\n    await el.hide();\n    expect(hideHandler).to.have.been.calledOnce;\n    expect(afterHideHandler).to.have.been.calledOnce;\n  });\n\n  it('should have rounded tags when using the pill attribute', async () => {\n    const el = await fixture(html`\n      \n        Option 1\n        Option 2\n        Option 3\n      \n    `);\n    const tag = el.shadowRoot!.querySelector('[part~=\"tag\"]')!;\n\n    expect(tag.hasAttribute('pill')).to.be.true;\n  });\n  describe('With lazily loaded options', () => {\n    describe('With no existing options', () => {\n      it('Should wait to select the option when the option exists for single select', async () => {\n        const form = await fixture(\n          html`
    `\n        );\n        const el = form.querySelector('sl-select')!;\n\n        await aTimeout(10);\n        expect(el.value).to.equal('');\n        expect(new FormData(form).get('select')).equal('');\n\n        const option = document.createElement('sl-option');\n        option.value = 'option-1';\n        option.innerText = 'Option 1';\n        el.append(option);\n\n        await aTimeout(10);\n        await el.updateComplete;\n        expect(el.value).to.equal('option-1');\n        expect(new FormData(form).get('select')).equal('option-1');\n      });\n\n      it('Should wait to select the option when the option exists for multiple select', async () => {\n        const form = await fixture(\n          html`
    `\n        );\n\n        const el = form.querySelector('sl-select')!;\n        expect(Array.isArray(el.value)).to.equal(true);\n        expect(el.value.length).to.equal(0);\n\n        const option = document.createElement('sl-option');\n        option.value = 'option-1';\n        option.innerText = 'Option 1';\n        el.append(option);\n\n        await aTimeout(10);\n        await el.updateComplete;\n        expect(el.value.length).to.equal(1);\n        expect(el.value).to.have.members(['option-1']);\n        expect(new FormData(form).getAll('select')).have.members(['option-1']);\n      });\n    });\n\n    describe('With existing options', () => {\n      it('Should not select the option if options already exist for single select', async () => {\n        const form = await fixture(\n          html` 
    \n            \n              Bar\n              Baz\n            \n          
    `\n        );\n\n        const el = form.querySelector('sl-select')!;\n        expect(el.value).to.equal('');\n        expect(new FormData(form).get('select')).to.equal('');\n\n        const option = document.createElement('sl-option');\n        option.value = 'foo';\n        option.innerText = 'Foo';\n        el.append(option);\n\n        await aTimeout(10);\n        await el.updateComplete;\n        expect(el.value).to.equal('foo');\n        expect(new FormData(form).get('select')).to.equal('foo');\n      });\n\n      it('Should not select the option if options already exists for multiple select', async () => {\n        const form = await fixture(\n          html` 
    \n            \n              Bar\n              Baz\n            \n          
    `\n        );\n\n        const el = form.querySelector('sl-select')!;\n        expect(el.value).to.be.an('array');\n        expect(el.value.length).to.equal(0);\n\n        const option = document.createElement('sl-option');\n        option.value = 'foo';\n        option.innerText = 'Foo';\n        el.append(option);\n\n        await aTimeout(10);\n        await el.updateComplete;\n        expect(el.value).to.have.members(['foo']);\n        expect(new FormData(form).getAll('select')).to.have.members(['foo']);\n      });\n\n      it('Should only select the existing options if options already exists for multiple select', async () => {\n        const form = await fixture(\n          html` 
    \n            \n              Bar\n              Baz\n            \n          
    `\n        );\n\n        const el = form.querySelector('sl-select')!;\n        expect(el.value).to.have.members(['bar', 'baz']);\n        expect(el.value.length).to.equal(2);\n        expect(new FormData(form).getAll('select')).to.have.members(['bar', 'baz']);\n\n        const option = document.createElement('sl-option');\n        option.value = 'foo';\n        option.innerText = 'Foo';\n        el.append(option);\n\n        await aTimeout(10);\n        await el.updateComplete;\n        expect(el.value).to.have.members(['foo', 'bar', 'baz']);\n        expect(new FormData(form).getAll('select')).to.have.members(['foo', 'bar', 'baz']);\n      });\n    });\n\n    /**\n     * @see {https://github.com/shoelace-style/shoelace/issues/2254}\n     */\n    it('Should account for if `value` changed before connecting', async () => {\n      const select = await fixture(html`\n        \n          Foo\n          Bar\n        \n      `);\n\n      // just for safe measure.\n      await aTimeout(10);\n\n      expect(select.value).to.deep.equal(['foo', 'bar']);\n    });\n\n    /**\n     * @see {https://github.com/shoelace-style/shoelace/issues/2254}\n     */\n    it('Should still work if using the value attribute', async () => {\n      const select = await fixture(html`\n        \n          Foo\n          Bar\n        \n      `);\n\n      // just for safe measure.\n      await aTimeout(10);\n\n      expect(select.value).to.deep.equal(['foo', 'bar']);\n\n      await clickOnElement(select);\n      await select.updateComplete;\n      await clickOnElement(select.querySelector(\"[value='foo']\")!);\n\n      await select.updateComplete;\n      await aTimeout(10);\n      expect(select.value).to.deep.equal(['bar']);\n\n      select.setAttribute('value', 'foo bar');\n      await aTimeout(10);\n      expect(select.value).to.deep.equal(['foo', 'bar']);\n    });\n  });\n\n  runFormControlBaseTests('sl-select');\n});\n"
  },
  {
    "path": "src/components/select/select.ts",
    "content": "import SlSelect from './select.component.js';\n\nexport * from './select.component.js';\nexport default SlSelect;\n\nSlSelect.define('sl-select');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-select': SlSelect;\n  }\n}\n"
  },
  {
    "path": "src/components/skeleton/skeleton.component.ts",
    "content": "import { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport ShoelaceElement from '../../internal/shoelace-element.js';\nimport styles from './skeleton.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Skeletons are used to provide a visual representation of where content will eventually be drawn.\n * @documentation https://shoelace.style/components/skeleton\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n * @csspart indicator - The skeleton's indicator which is responsible for its color and animation.\n *\n * @cssproperty --border-radius - The skeleton's border radius.\n * @cssproperty --color - The color of the skeleton.\n * @cssproperty --sheen-color - The sheen color when the skeleton is in its loading state.\n */\nexport default class SlSkeleton extends ShoelaceElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  /** Determines which effect the skeleton will use. */\n  @property() effect: 'pulse' | 'sheen' | 'none' = 'none';\n\n  render() {\n    return html`\n      \n        
    \n      \n    `;\n  }\n}\n"
  },
  {
    "path": "src/components/skeleton/skeleton.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  :host {\n    --border-radius: var(--sl-border-radius-pill);\n    --color: var(--sl-color-neutral-200);\n    --sheen-color: var(--sl-color-neutral-300);\n\n    display: block;\n    position: relative;\n  }\n\n  .skeleton {\n    display: flex;\n    width: 100%;\n    height: 100%;\n    min-height: 1rem;\n  }\n\n  .skeleton__indicator {\n    flex: 1 1 auto;\n    background: var(--color);\n    border-radius: var(--border-radius);\n  }\n\n  .skeleton--sheen .skeleton__indicator {\n    background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));\n    background-size: 400% 100%;\n    animation: sheen 8s ease-in-out infinite;\n  }\n\n  .skeleton--pulse .skeleton__indicator {\n    animation: pulse 2s ease-in-out 0.5s infinite;\n  }\n\n  /* Forced colors mode */\n  @media (forced-colors: active) {\n    :host {\n      --color: GrayText;\n    }\n  }\n\n  @keyframes sheen {\n    0% {\n      background-position: 200% 0;\n    }\n    to {\n      background-position: -200% 0;\n    }\n  }\n\n  @keyframes pulse {\n    0% {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0.4;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n`;\n"
  },
  {
    "path": "src/components/skeleton/skeleton.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport { expect, fixture, html } from '@open-wc/testing';\nimport type SlSkeleton from './skeleton.js';\n\ndescribe('', () => {\n  it('should render default skeleton', async () => {\n    const el = await fixture(html`  `);\n\n    await expect(el).to.be.accessible();\n\n    const base = el.shadowRoot!.querySelector('[part~=\"base\"]')!;\n    const indicator = el.shadowRoot!.querySelector('[part~=\"indicator\"]')!;\n\n    expect(base.getAttribute('class')).to.equal(' skeleton ');\n    expect(indicator.getAttribute('class')).to.equal('skeleton__indicator');\n  });\n\n  it('should set pulse effect by attribute', async () => {\n    const el = await fixture(html`  `);\n\n    const base = el.shadowRoot!.querySelector('[part~=\"base\"]')!;\n\n    expect(base.getAttribute('class')).to.equal(' skeleton skeleton--pulse ');\n  });\n\n  it('should set sheen effect by attribute', async () => {\n    const el = await fixture(html`  `);\n\n    const base = el.shadowRoot!.querySelector('[part~=\"base\"]')!;\n\n    expect(base.getAttribute('class')).to.equal(' skeleton skeleton--sheen ');\n  });\n});\n"
  },
  {
    "path": "src/components/skeleton/skeleton.ts",
    "content": "import SlSkeleton from './skeleton.component.js';\n\nexport * from './skeleton.component.js';\nexport default SlSkeleton;\n\nSlSkeleton.define('sl-skeleton');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-skeleton': SlSkeleton;\n  }\n}\n"
  },
  {
    "path": "src/components/spinner/spinner.component.ts",
    "content": "import { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport ShoelaceElement from '../../internal/shoelace-element.js';\nimport styles from './spinner.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Spinners are used to show the progress of an indeterminate operation.\n * @documentation https://shoelace.style/components/spinner\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */\nexport default class SlSpinner extends ShoelaceElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  private readonly localize = new LocalizeController(this);\n\n  render() {\n    return html`\n      \n        \n        \n      \n    `;\n  }\n}\n"
  },
  {
    "path": "src/components/spinner/spinner.styles.ts",
    "content": "import { css } from 'lit';\n\n// Resizing a spinner element using anything but font-size will break the animation because the animation uses em units.\n// Therefore, if a spinner is used in a flex container without `flex: none` applied, the spinner can grow/shrink and\n// break the animation. The use of `flex: none` on the host element prevents this by always having the spinner sized\n// according to its actual dimensions.\n\nexport default css`\n  :host {\n    --track-width: 2px;\n    --track-color: rgb(128 128 128 / 25%);\n    --indicator-color: var(--sl-color-primary-600);\n    --speed: 2s;\n\n    display: inline-flex;\n    width: 1em;\n    height: 1em;\n    flex: none;\n  }\n\n  .spinner {\n    flex: 1 1 auto;\n    height: 100%;\n    width: 100%;\n  }\n\n  .spinner__track,\n  .spinner__indicator {\n    fill: none;\n    stroke-width: var(--track-width);\n    r: calc(0.5em - var(--track-width) / 2);\n    cx: 0.5em;\n    cy: 0.5em;\n    transform-origin: 50% 50%;\n  }\n\n  .spinner__track {\n    stroke: var(--track-color);\n    transform-origin: 0% 0%;\n  }\n\n  .spinner__indicator {\n    stroke: var(--indicator-color);\n    stroke-linecap: round;\n    stroke-dasharray: 150% 75%;\n    animation: spin var(--speed) linear infinite;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n      stroke-dasharray: 0.05em, 3em;\n    }\n\n    50% {\n      transform: rotate(450deg);\n      stroke-dasharray: 1.375em, 1.375em;\n    }\n\n    100% {\n      transform: rotate(1080deg);\n      stroke-dasharray: 0.05em, 3em;\n    }\n  }\n`;\n"
  },
  {
    "path": "src/components/spinner/spinner.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport { expect, fixture, html } from '@open-wc/testing';\nimport type SlSpinner from './spinner.js';\n\ndescribe('', () => {\n  describe('when provided no parameters', () => {\n    it('should pass accessibility tests', async () => {\n      const spinner = await fixture(html`  `);\n      await expect(spinner).to.be.accessible();\n    });\n\n    it('should have a role of \"status\".', async () => {\n      const spinner = await fixture(html`  `);\n      const base = spinner.shadowRoot!.querySelector('[part~=\"base\"]')!;\n      expect(base).have.attribute('role', 'progressbar');\n    });\n\n    it('should use \"transform: rotate(x)\" instead of \"rotate: x\" when animating', async () => {\n      const spinner = await fixture(html`  `);\n      const indicator = spinner.shadowRoot!.querySelector('.spinner__indicator')!;\n\n      //\n      // This matrix is the computed value when using `transform: rotate(x)` on the indicator. When using `rotate: x`,\n      // it will be \"none\" instead.\n      //\n      // Related: https://github.com/shoelace-style/shoelace/issues/1121\n      //\n      expect(getComputedStyle(indicator).transform).to.equal('matrix(1, 0, 0, 1, 0, 0)');\n    });\n\n    it('should have flex:none to prevent flex re-sizing', async () => {\n      const spinner = await fixture(html`  `);\n\n      // 0 0 auto is a compiled value for `none`\n      expect(getComputedStyle(spinner).flex).to.equal('0 0 auto');\n    });\n  });\n});\n"
  },
  {
    "path": "src/components/spinner/spinner.ts",
    "content": "import SlSpinner from './spinner.component.js';\n\nexport * from './spinner.component.js';\nexport default SlSpinner;\n\nSlSpinner.define('sl-spinner');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-spinner': SlSpinner;\n  }\n}\n"
  },
  {
    "path": "src/components/split-panel/split-panel.component.ts",
    "content": "import { clamp } from '../../internal/math.js';\nimport { drag } from '../../internal/drag.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport ShoelaceElement from '../../internal/shoelace-element.js';\nimport styles from './split-panel.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nexport interface SnapFunctionParams {\n  /** The position the divider has been dragged to, in pixels. */\n  pos: number;\n  /** The size of the split-panel across its primary axis, in pixels. */\n  size: number;\n  /** The snap-threshold passed to the split-panel, in pixels. May be infinity. */\n  snapThreshold: number;\n  /** Whether or not the user-agent is RTL. */\n  isRtl: boolean;\n  /** Whether or not the split panel is vertical. */\n  vertical: boolean;\n}\n\n/** Used by sl-split-panel to convert an input position into a snapped position. */\nexport type SnapFunction = (opt: SnapFunctionParams) => number | null;\n\n/** A SnapFunction which performs no snapping. */\nexport const SNAP_NONE = () => null;\n\n/**\n * @summary Split panels display two adjacent panels, allowing the user to reposition them.\n * @documentation https://shoelace.style/components/split-panel\n * @status stable\n * @since 2.0\n *\n * @event sl-reposition - Emitted when the divider's position changes.\n *\n * @slot start - Content to place in the start panel.\n * @slot end - Content to place in the end panel.\n * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.\n *\n * @csspart start - The start panel.\n * @csspart end - The end panel.\n * @csspart panel - Targets both the start and end panels.\n * @csspart divider - The divider that separates the start and end panels.\n *\n * @cssproperty [--divider-width=4px] - The width of the visible divider.\n * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is\n *  usually wider than the divider to facilitate easier dragging.\n * @cssproperty [--min=0] - The minimum allowed size of the primary panel.\n * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.\n */\nexport default class SlSplitPanel extends ShoelaceElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  private cachedPositionInPixels: number;\n  private isCollapsed = false;\n  private readonly localize = new LocalizeController(this);\n  private positionBeforeCollapsing = 0;\n  private resizeObserver: ResizeObserver;\n  private size: number;\n\n  @query('.divider') divider: HTMLElement;\n\n  /**\n   * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n   * container's initial size.\n   */\n  @property({ type: Number, reflect: true }) position = 50;\n\n  /** The current position of the divider from the primary panel's edge in pixels. */\n  @property({ attribute: 'position-in-pixels', type: Number }) positionInPixels: number;\n\n  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n   * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n   * host element is resized.\n   */\n  @property() primary?: 'start' | 'end';\n\n  // Returned when the property is queried, so that string 'snap's are preserved.\n  private snapValue: string | SnapFunction = '';\n  // Actually used for computing snap points. All string snaps are converted via `toSnapFunction`.\n  private snapFunction: SnapFunction = SNAP_NONE;\n\n  /**\n   * Converts a string containing either a series of fixed/repeated snap points (e.g. \"repeat(20%)\", \"100px 200px 800px\", or \"10% 50% repeat(10px)\") into a SnapFunction. `SnapFunction`s take in a `SnapFunctionOpts` and return the position that the split panel should snap to.\n   *\n   * @param snap - The snap string.\n   * @returns a `SnapFunction` representing the snap string's logic.\n   */\n  private toSnapFunction(snap: string): SnapFunction {\n    const snapPoints = snap.split(' ');\n\n    return ({ pos, size, snapThreshold, isRtl, vertical }) => {\n      let newPos = pos;\n      let minDistance = Number.POSITIVE_INFINITY;\n\n      snapPoints.forEach(value => {\n        let snapPoint: number;\n\n        if (value.startsWith('repeat(')) {\n          const repeatVal = snap.substring('repeat('.length, snap.length - 1);\n          const isPercent = repeatVal.endsWith('%');\n          const repeatNum = Number.parseFloat(repeatVal);\n          const snapIntervalPx = isPercent ? size * (repeatNum / 100) : repeatNum;\n          snapPoint = Math.round((isRtl && !vertical ? size - pos : pos) / snapIntervalPx) * snapIntervalPx;\n        } else if (value.endsWith('%')) {\n          snapPoint = size * (Number.parseFloat(value) / 100);\n        } else {\n          snapPoint = Number.parseFloat(value);\n        }\n\n        if (isRtl && !vertical) {\n          snapPoint = size - snapPoint;\n        }\n\n        const distance = Math.abs(pos - snapPoint);\n\n        if (distance <= snapThreshold && distance < minDistance) {\n          newPos = snapPoint;\n          minDistance = distance;\n        }\n      });\n\n      return newPos;\n    };\n  }\n\n  /**\n   * Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,\n   * or a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`.\n   */\n  @property({ reflect: true })\n  set snap(snap: string | SnapFunction | null | undefined) {\n    this.snapValue = snap ?? '';\n    if (snap) {\n      this.snapFunction = typeof snap === 'string' ? this.toSnapFunction(snap) : snap;\n    } else {\n      this.snapFunction = SNAP_NONE;\n    }\n  }\n\n  get snap(): string | SnapFunction {\n    return this.snapValue;\n  }\n\n  /** How close the divider must be to a snap point until snapping occurs. */\n  @property({ type: Number, attribute: 'snap-threshold' }) snapThreshold = 12;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(entries => this.handleResize(entries));\n    this.updateComplete.then(() => this.resizeObserver.observe(this));\n\n    this.detectSize();\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.unobserve(this);\n  }\n\n  private detectSize() {\n    const { width, height } = this.getBoundingClientRect();\n    this.size = this.vertical ? height : width;\n  }\n\n  private percentageToPixels(value: number) {\n    return this.size * (value / 100);\n  }\n\n  private pixelsToPercentage(value: number) {\n    return (value / this.size) * 100;\n  }\n\n  private handleDrag(event: PointerEvent) {\n    const isRtl = this.localize.dir() === 'rtl';\n\n    if (this.disabled) {\n      return;\n    }\n\n    // Prevent text selection when dragging\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n\n    drag(this, {\n      onMove: (x, y) => {\n        let newPositionInPixels = this.vertical ? y : x;\n\n        // Flip for end panels\n        if (this.primary === 'end') {\n          newPositionInPixels = this.size - newPositionInPixels;\n        }\n\n        // Check snap points\n        newPositionInPixels =\n          this.snapFunction({\n            pos: newPositionInPixels,\n            size: this.size,\n            snapThreshold: this.snapThreshold,\n            isRtl: isRtl,\n            vertical: this.vertical\n          }) ?? newPositionInPixels;\n\n        this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);\n      },\n      initialEvent: event\n    });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter'].includes(event.key)) {\n      let newPosition = this.position;\n      const incr = (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n      event.preventDefault();\n\n      if ((event.key === 'ArrowLeft' && !this.vertical) || (event.key === 'ArrowUp' && this.vertical)) {\n        newPosition -= incr;\n      }\n\n      if ((event.key === 'ArrowRight' && !this.vertical) || (event.key === 'ArrowDown' && this.vertical)) {\n        newPosition += incr;\n      }\n\n      if (event.key === 'Home') {\n        newPosition = this.primary === 'end' ? 100 : 0;\n      }\n\n      if (event.key === 'End') {\n        newPosition = this.primary === 'end' ? 0 : 100;\n      }\n\n      // Collapse/expand the primary panel when enter is pressed\n      if (event.key === 'Enter') {\n        if (this.isCollapsed) {\n          newPosition = this.positionBeforeCollapsing;\n          this.isCollapsed = false;\n        } else {\n          const positionBeforeCollapsing = this.position;\n\n          newPosition = 0;\n\n          // Wait for position to update before setting the collapsed state\n          requestAnimationFrame(() => {\n            this.isCollapsed = true;\n            this.positionBeforeCollapsing = positionBeforeCollapsing;\n          });\n        }\n      }\n\n      this.position = clamp(newPosition, 0, 100);\n    }\n  }\n\n  private handleResize(entries: ResizeObserverEntry[]) {\n    const { width, height } = entries[0].contentRect;\n    this.size = this.vertical ? height : width;\n\n    // There's some weird logic that gets `this.cachedPositionInPixels = NaN` or `this.position === Infinity` when\n    // a split-panel goes from `display: none;` to showing.\n    if (isNaN(this.cachedPositionInPixels) || this.position === Infinity) {\n      this.cachedPositionInPixels = Number(this.getAttribute('position-in-pixels'));\n      this.positionInPixels = Number(this.getAttribute('position-in-pixels'));\n      this.position = this.pixelsToPercentage(this.positionInPixels);\n    }\n\n    // Resize when a primary panel is set\n    if (this.primary) {\n      this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n    }\n  }\n\n  @watch('position')\n  handlePositionChange() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.isCollapsed = false;\n    this.positionBeforeCollapsing = 0;\n    this.positionInPixels = this.percentageToPixels(this.position);\n    this.emit('sl-reposition');\n  }\n\n  @watch('positionInPixels')\n  handlePositionInPixelsChange() {\n    this.position = this.pixelsToPercentage(this.positionInPixels);\n  }\n\n  @watch('vertical')\n  handleVerticalChange() {\n    this.detectSize();\n  }\n\n  render() {\n    const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';\n    const gridTemplateAlt = this.vertical ? 'gridTemplateColumns' : 'gridTemplateRows';\n    const isRtl = this.localize.dir() === 'rtl';\n    const primary = `\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;\n    const secondary = 'auto';\n\n    if (this.primary === 'end') {\n      if (isRtl && !this.vertical) {\n        this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n      } else {\n        this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n      }\n    } else {\n      if (isRtl && !this.vertical) {\n        this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n      } else {\n        this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n      }\n    }\n\n    // Unset the alt grid template property\n    this.style[gridTemplateAlt] = '';\n\n    return html`\n      \n\n      \n        \n      \n\n      \n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-split-panel': SlSplitPanel;\n  }\n}\n"
  },
  {
    "path": "src/components/split-panel/split-panel.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  :host {\n    --divider-width: 4px;\n    --divider-hit-area: 12px;\n    --min: 0%;\n    --max: 100%;\n\n    display: grid;\n  }\n\n  .start,\n  .end {\n    overflow: hidden;\n  }\n\n  .divider {\n    flex: 0 0 var(--divider-width);\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--sl-color-neutral-200);\n    color: var(--sl-color-neutral-900);\n    z-index: 1;\n  }\n\n  .divider:focus {\n    outline: none;\n  }\n\n  :host(:not([disabled])) .divider:focus-visible {\n    background-color: var(--sl-color-primary-600);\n    color: var(--sl-color-neutral-0);\n  }\n\n  :host([disabled]) .divider {\n    cursor: not-allowed;\n  }\n\n  /* Horizontal */\n  :host(:not([vertical], [disabled])) .divider {\n    cursor: col-resize;\n  }\n\n  :host(:not([vertical])) .divider::after {\n    display: flex;\n    content: '';\n    position: absolute;\n    height: 100%;\n    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n    width: var(--divider-hit-area);\n  }\n\n  /* Vertical */\n  :host([vertical]) {\n    flex-direction: column;\n  }\n\n  :host([vertical]:not([disabled])) .divider {\n    cursor: row-resize;\n  }\n\n  :host([vertical]) .divider::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n    height: var(--divider-hit-area);\n  }\n\n  @media (forced-colors: active) {\n    .divider {\n      outline: solid 1px transparent;\n    }\n  }\n`;\n"
  },
  {
    "path": "src/components/split-panel/split-panel.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport { dragElement } from '../../internal/test.js';\nimport { expect, fixture, html, oneEvent } from '@open-wc/testing';\nimport { queryByTestId } from '../../internal/test/data-testid-helpers.js';\nimport { resetMouse } from '@web/test-runner-commands';\nimport type SlSplitPanel from './split-panel.js';\n\nconst DIVIDER_WIDTH_IN_PX = 4;\n\nconst getPanel = (splitPanel: SlSplitPanel, testid: string): HTMLElement => {\n  const startPanel = queryByTestId(splitPanel, testid);\n  expect(startPanel).not.to.be.null;\n  return startPanel!;\n};\n\nconst getPanelWidth = (splitPanel: SlSplitPanel, testid: string) => {\n  const panel = getPanel(splitPanel, testid);\n  const { width } = panel.getBoundingClientRect();\n  return width;\n};\n\nconst getPanelHeight = (splitPanel: SlSplitPanel, testid: string) => {\n  const panel = getPanel(splitPanel, testid);\n  const { height } = panel.getBoundingClientRect();\n  return height;\n};\n\nconst getDivider = (splitPanel: SlSplitPanel): Element => {\n  const divider = splitPanel.shadowRoot?.querySelector('[part=\"divider\"]');\n  expect(divider).not.to.be.null;\n  return divider!;\n};\n\ndescribe('', () => {\n  afterEach(async () => {\n    await resetMouse();\n  });\n\n  it('should render a component', async () => {\n    const splitPanel = await fixture(html`  `);\n\n    expect(splitPanel).to.exist;\n  });\n\n  it('should be accessible', async () => {\n    const splitPanel = await fixture(\n      html`\n        
    Start
    \n        
    End
    \n          `\n    );\n\n    await expect(splitPanel).to.be.accessible();\n  });\n\n  it('should show both panels', async () => {\n    const splitPanel = await fixture(\n      html`\n        
    Start
    \n        
    End
    \n          `\n    );\n\n    expect(splitPanel).to.contain.text('Start');\n    expect(splitPanel).to.contain.text('End');\n  });\n\n  describe('panel sizing horizontal', () => {\n    it('has two evenly sized panels by default', async () => {\n      const splitPanel = await fixture(\n        html`\n          
    Start
    \n          
    End
    \n            `\n      );\n\n      const startPanelWidth = getPanelWidth(splitPanel, 'start-panel');\n      const endPanelWidth = getPanelWidth(splitPanel, 'end-panel');\n\n      expect(startPanelWidth).to.be.equal(endPanelWidth);\n    });\n\n    it('changes the sizing of the panels based on the position attribute', async () => {\n      const splitPanel = await fixture(\n        html`\n          
    Start
    \n          
    End
    \n            `\n      );\n\n      const startPanelWidth = getPanelWidth(splitPanel, 'start-panel');\n      const endPanelWidth = getPanelWidth(splitPanel, 'end-panel');\n\n      expect(startPanelWidth * 3).to.be.equal(endPanelWidth - DIVIDER_WIDTH_IN_PX);\n    });\n\n    it('updates the position in pixels to the correct result', async () => {\n      const splitPanel = await fixture(\n        html`\n          
    Start
    \n          
    End
    \n            `\n      );\n\n      splitPanel.position = 10;\n\n      const startPanelWidth = getPanelWidth(splitPanel, 'start-panel');\n\n      expect(startPanelWidth).to.be.equal(splitPanel.positionInPixels - DIVIDER_WIDTH_IN_PX / 2);\n    });\n\n    it('emits the sl-reposition\tevent on position change', async () => {\n      const splitPanel = await fixture(\n        html`\n          
    Start
    \n          
    End
    \n            `\n      );\n\n      const repositionPromise = oneEvent(splitPanel, 'sl-reposition');\n      splitPanel.position = 10;\n      return repositionPromise;\n    });\n\n    it('can be resized using the mouse', async () => {\n      const splitPanel = await fixture(\n        html`\n          
    Start
    \n          
    End
    \n            `\n      );\n\n      const positionInPixels = splitPanel.positionInPixels;\n\n      const divider = getDivider(splitPanel);\n\n      await dragElement(divider, -30);\n\n      const positionInPixelsAfterDrag = splitPanel.positionInPixels;\n      expect(positionInPixelsAfterDrag).to.be.equal(positionInPixels - 30);\n    });\n\n    it('cannot be resized if disabled', async () => {\n      const splitPanel = await fixture(\n        html`\n          
    Start
    \n          
    End
    \n            `\n      );\n\n      const positionInPixels = splitPanel.positionInPixels;\n\n      const divider = getDivider(splitPanel);\n\n      await dragElement(divider, -30);\n\n      const positionInPixelsAfterDrag = splitPanel.positionInPixels;\n      expect(positionInPixelsAfterDrag).to.be.equal(positionInPixels);\n    });\n\n    it('snaps to predefined positions', async () => {\n      const splitPanel = await fixture(\n        html`\n          
    Start
    \n          
    End
    \n            `\n      );\n\n      const positionInPixels = splitPanel.positionInPixels;\n      splitPanel.snap = `${positionInPixels - 40}px`;\n\n      const divider = getDivider(splitPanel);\n\n      await dragElement(divider, -30);\n\n      const positionInPixelsAfterDrag = splitPanel.positionInPixels;\n      expect(positionInPixelsAfterDrag).to.be.equal(positionInPixels - 40);\n    });\n  });\n\n  describe('panel sizing vertical', () => {\n    it('has two evenly sized panels by default', async () => {\n      const splitPanel = await fixture(\n        html`\n          
    Start
    \n          
    End
    \n            `\n      );\n\n      const startPanelHeight = getPanelHeight(splitPanel, 'start-panel');\n      const endPanelHeight = getPanelHeight(splitPanel, 'end-panel');\n\n      expect(startPanelHeight).to.be.equal(endPanelHeight);\n    });\n\n    it('changes the sizing of the panels based on the position attribute', async () => {\n      const splitPanel = await fixture(\n        html`\n          
    Start
    \n          
    End
    \n            `\n      );\n\n      const startPanelHeight = getPanelHeight(splitPanel, 'start-panel');\n      const endPanelHeight = getPanelHeight(splitPanel, 'end-panel');\n\n      expect(startPanelHeight * 3).to.be.equal(endPanelHeight - DIVIDER_WIDTH_IN_PX);\n    });\n\n    it('updates the position in pixels to the correct result', async () => {\n      const splitPanel = await fixture(\n        html`\n          
    Start
    \n          
    End
    \n            `\n      );\n\n      splitPanel.position = 10;\n\n      const startPanelHeight = getPanelHeight(splitPanel, 'start-panel');\n\n      expect(startPanelHeight).to.be.equal(splitPanel.positionInPixels - DIVIDER_WIDTH_IN_PX / 2);\n    });\n\n    it('emits the sl-reposition\tevent on position change ', async () => {\n      const splitPanel = await fixture(\n        html`\n          
    Start
    \n          
    End
    \n            `\n      );\n\n      const repositionPromise = oneEvent(splitPanel, 'sl-reposition');\n      splitPanel.position = 10;\n      return repositionPromise;\n    });\n\n    it('can be resized using the mouse ', async () => {\n      const splitPanel = await fixture(\n        html`\n          
    Start
    \n          
    End
    \n            `\n      );\n\n      const positionInPixels = splitPanel.positionInPixels;\n\n      const divider = getDivider(splitPanel);\n\n      await dragElement(divider, 0, -30);\n\n      const positionInPixelsAfterDrag = splitPanel.positionInPixels;\n      expect(positionInPixelsAfterDrag).to.be.equal(positionInPixels - 30);\n    });\n\n    it('cannot be resized if disabled', async () => {\n      const splitPanel = await fixture(\n        html`\n          
    Start
    \n          
    End
    \n            `\n      );\n\n      const positionInPixels = splitPanel.positionInPixels;\n\n      const divider = getDivider(splitPanel);\n\n      await dragElement(divider, 0, -30);\n\n      const positionInPixelsAfterDrag = splitPanel.positionInPixels;\n      expect(positionInPixelsAfterDrag).to.be.equal(positionInPixels);\n    });\n\n    it('snaps to predefined positions', async () => {\n      const splitPanel = await fixture(\n        html`\n          
    Start
    \n          
    End
    \n            `\n      );\n\n      const positionInPixels = splitPanel.positionInPixels;\n      splitPanel.snap = `${positionInPixels - 40}px`;\n\n      const divider = getDivider(splitPanel);\n\n      await dragElement(divider, 0, -30);\n\n      const positionInPixelsAfterDrag = splitPanel.positionInPixels;\n      expect(positionInPixelsAfterDrag).to.be.equal(positionInPixels - 40);\n    });\n  });\n});\n"
  },
  {
    "path": "src/components/split-panel/split-panel.ts",
    "content": "import SlSplitPanel from './split-panel.component.js';\n\nexport * from './split-panel.component.js';\nexport default SlSplitPanel;\n\nSlSplitPanel.define('sl-split-panel');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-split-panel': SlSplitPanel;\n  }\n}\n"
  },
  {
    "path": "src/components/switch/switch.component.ts",
    "content": "import { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport ShoelaceElement from '../../internal/shoelace-element.js';\nimport styles from './switch.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { ShoelaceFormControl } from '../../internal/shoelace-element.js';\n\n/**\n * @summary Switches allow the user to toggle an option on or off.\n * @documentation https://shoelace.style/components/switch\n * @status stable\n * @since 2.0\n *\n * @slot - The switch's label.\n * @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.\n *\n * @event sl-blur - Emitted when the control loses focus.\n * @event sl-change - Emitted when the control's checked state changes.\n * @event sl-input - Emitted when the control receives input.\n * @event sl-focus - Emitted when the control gains focus.\n * @event sl-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The control that houses the switch's thumb.\n * @csspart thumb - The switch's thumb.\n * @csspart label - The switch's label.\n * @csspart form-control-help-text - The help text's wrapper.\n *\n * @cssproperty --width - The width of the switch.\n * @cssproperty --height - The height of the switch.\n * @cssproperty --thumb-size - The size of the thumb.\n */\nexport default class SlSwitch extends ShoelaceElement implements ShoelaceFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];\n\n  private readonly formControlController = new FormControlController(this, {\n    value: (control: SlSwitch) => (control.checked ? control.value || 'on' : undefined),\n    defaultValue: (control: SlSwitch) => control.defaultChecked,\n    setValue: (control: SlSwitch, checked: boolean) => (control.checked = checked)\n  });\n  private readonly hasSlotController = new HasSlotController(this, 'help-text');\n\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  @state() private hasFocus = false;\n  @property() title = ''; // make reactive to pass through\n\n  /** The name of the switch, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the switch, submitted as a name/value pair with form data. */\n  @property() value: string;\n\n  /** The switch's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the switch. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the switch in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue('checked') defaultChecked = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `
    ` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the switch a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** The switch's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.input.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.input.validationMessage;\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('sl-blur');\n  }\n\n  private handleInput() {\n    this.emit('sl-input');\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    this.emit('sl-change');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('sl-focus');\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.checked = false;\n      this.emit('sl-change');\n      this.emit('sl-input');\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.checked = true;\n      this.emit('sl-change');\n      this.emit('sl-input');\n    }\n  }\n\n  @watch('checked', { waitUntilFirstUpdate: true })\n  handleCheckedChange() {\n    this.input.checked = this.checked; // force a sync update\n    this.formControlController.updateValidity();\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(true);\n  }\n\n  /** Simulates a click on the switch. */\n  click() {\n    this.input.click();\n  }\n\n  /** Sets focus on the switch. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the switch. */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  render() {\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n    return html`\n      \n        \n          \n\n          \n            \n          \n\n          
    \n            \n          
    \n        \n\n        \n          ${this.helpText}\n        \n      \n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-switch': SlSwitch;\n  }\n}\n"
  },
  {
    "path": "src/components/switch/switch.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([size='small']) {\n    --height: var(--sl-toggle-size-small);\n    --thumb-size: calc(var(--sl-toggle-size-small) + 4px);\n    --width: calc(var(--height) * 2);\n\n    font-size: var(--sl-input-font-size-small);\n  }\n\n  :host([size='medium']) {\n    --height: var(--sl-toggle-size-medium);\n    --thumb-size: calc(var(--sl-toggle-size-medium) + 4px);\n    --width: calc(var(--height) * 2);\n\n    font-size: var(--sl-input-font-size-medium);\n  }\n\n  :host([size='large']) {\n    --height: var(--sl-toggle-size-large);\n    --thumb-size: calc(var(--sl-toggle-size-large) + 4px);\n    --width: calc(var(--height) * 2);\n\n    font-size: var(--sl-input-font-size-large);\n  }\n\n  .switch {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    font-family: var(--sl-input-font-family);\n    font-size: inherit;\n    font-weight: var(--sl-input-font-weight);\n    color: var(--sl-input-label-color);\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .switch__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--width);\n    height: var(--height);\n    background-color: var(--sl-color-neutral-400);\n    border: solid var(--sl-input-border-width) var(--sl-color-neutral-400);\n    border-radius: var(--height);\n    transition:\n      var(--sl-transition-fast) border-color,\n      var(--sl-transition-fast) background-color;\n  }\n\n  .switch__control .switch__thumb {\n    width: var(--thumb-size);\n    height: var(--thumb-size);\n    background-color: var(--sl-color-neutral-0);\n    border-radius: 50%;\n    border: solid var(--sl-input-border-width) var(--sl-color-neutral-400);\n    translate: calc((var(--width) - var(--height)) / -2);\n    transition:\n      var(--sl-transition-fast) translate ease,\n      var(--sl-transition-fast) background-color,\n      var(--sl-transition-fast) border-color,\n      var(--sl-transition-fast) box-shadow;\n  }\n\n  .switch__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* Hover */\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n    background-color: var(--sl-color-neutral-400);\n    border-color: var(--sl-color-neutral-400);\n  }\n\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {\n    background-color: var(--sl-color-neutral-0);\n    border-color: var(--sl-color-neutral-400);\n  }\n\n  /* Focus */\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {\n    background-color: var(--sl-color-neutral-400);\n    border-color: var(--sl-color-neutral-400);\n  }\n\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {\n    background-color: var(--sl-color-neutral-0);\n    border-color: var(--sl-color-primary-600);\n    outline: var(--sl-focus-ring);\n    outline-offset: var(--sl-focus-ring-offset);\n  }\n\n  /* Checked */\n  .switch--checked .switch__control {\n    background-color: var(--sl-color-primary-600);\n    border-color: var(--sl-color-primary-600);\n  }\n\n  .switch--checked .switch__control .switch__thumb {\n    background-color: var(--sl-color-neutral-0);\n    border-color: var(--sl-color-primary-600);\n    translate: calc((var(--width) - var(--height)) / 2);\n  }\n\n  /* Checked + hover */\n  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n    background-color: var(--sl-color-primary-600);\n    border-color: var(--sl-color-primary-600);\n  }\n\n  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {\n    background-color: var(--sl-color-neutral-0);\n    border-color: var(--sl-color-primary-600);\n  }\n\n  /* Checked + focus */\n  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {\n    background-color: var(--sl-color-primary-600);\n    border-color: var(--sl-color-primary-600);\n  }\n\n  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {\n    background-color: var(--sl-color-neutral-0);\n    border-color: var(--sl-color-primary-600);\n    outline: var(--sl-focus-ring);\n    outline-offset: var(--sl-focus-ring-offset);\n  }\n\n  /* Disabled */\n  .switch--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .switch__label {\n    display: inline-block;\n    line-height: var(--height);\n    margin-inline-start: 0.5em;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([required]) .switch__label::after {\n    content: var(--sl-input-required-content);\n    color: var(--sl-input-required-content-color);\n    margin-inline-start: var(--sl-input-required-content-offset);\n  }\n\n  @media (forced-colors: active) {\n    .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,\n    .switch--checked .switch__control .switch__thumb {\n      background-color: ButtonText;\n    }\n  }\n`;\n"
  },
  {
    "path": "src/components/switch/switch.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport { aTimeout, expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';\nimport { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';\nimport { sendKeys } from '@web/test-runner-commands';\nimport sinon from 'sinon';\nimport type SlSwitch from './switch.js';\n\ndescribe('', () => {\n  it('should pass accessibility tests', async () => {\n    const el = await fixture(html` Switch `);\n    await expect(el).to.be.accessible();\n  });\n\n  it('default properties', async () => {\n    const el = await fixture(html`  `);\n\n    expect(el.name).to.equal('');\n    expect(el.value).to.be.undefined;\n    expect(el.title).to.equal('');\n    expect(el.disabled).to.be.false;\n    expect(el.required).to.be.false;\n    expect(el.checked).to.be.false;\n    expect(el.defaultChecked).to.be.false;\n    expect(el.helpText).to.equal('');\n  });\n\n  it('should have title if title attribute is set', async () => {\n    const el = await fixture(html`  `);\n    const input = el.shadowRoot!.querySelector('input')!;\n\n    expect(input.title).to.equal('Test');\n  });\n\n  it('should be disabled with the disabled attribute', async () => {\n    const el = await fixture(html`  `);\n    const input = el.shadowRoot!.querySelector('input')!;\n\n    expect(input.disabled).to.be.true;\n  });\n\n  it('should be valid by default', async () => {\n    const el = await fixture(html`  `);\n\n    expect(el.checkValidity()).to.be.true;\n  });\n\n  it('should emit sl-change and sl-input when clicked', async () => {\n    const el = await fixture(html`  `);\n    const changeHandler = sinon.spy();\n    const inputHandler = sinon.spy();\n\n    el.addEventListener('sl-change', changeHandler);\n    el.addEventListener('sl-input', inputHandler);\n    el.click();\n    await el.updateComplete;\n\n    expect(changeHandler).to.have.been.calledOnce;\n    expect(inputHandler).to.have.been.calledOnce;\n    expect(el.checked).to.be.true;\n  });\n\n  it('should emit sl-change when toggled with spacebar', async () => {\n    const el = await fixture(html`  `);\n    const changeHandler = sinon.spy();\n    const inputHandler = sinon.spy();\n\n    el.addEventListener('sl-change', changeHandler);\n    el.addEventListener('sl-input', inputHandler);\n    el.focus();\n    await sendKeys({ press: ' ' });\n\n    expect(changeHandler).to.have.been.calledOnce;\n    expect(inputHandler).to.have.been.calledOnce;\n    expect(el.checked).to.be.true;\n  });\n\n  it('should emit sl-change and sl-input when toggled with the right arrow', async () => {\n    const el = await fixture(html`  `);\n    const changeHandler = sinon.spy();\n    const inputHandler = sinon.spy();\n\n    el.addEventListener('sl-change', changeHandler);\n    el.addEventListener('sl-input', inputHandler);\n    el.focus();\n    await sendKeys({ press: 'ArrowRight' });\n    await el.updateComplete;\n\n    expect(changeHandler).to.have.been.calledOnce;\n    expect(inputHandler).to.have.been.calledOnce;\n    expect(el.checked).to.be.true;\n  });\n\n  it('should emit sl-change and sl-input when toggled with the left arrow', async () => {\n    const el = await fixture(html`  `);\n    const changeHandler = sinon.spy();\n    const inputHandler = sinon.spy();\n\n    el.addEventListener('sl-change', changeHandler);\n    el.addEventListener('sl-input', inputHandler);\n    el.focus();\n    await sendKeys({ press: 'ArrowLeft' });\n    await el.updateComplete;\n\n    expect(changeHandler).to.have.been.calledOnce;\n    expect(inputHandler).to.have.been.calledOnce;\n    expect(el.checked).to.be.false;\n  });\n\n  it('should not emit sl-change or sl-input when checked is set by JavaScript', async () => {\n    const el = await fixture(html`  `);\n    el.addEventListener('sl-change', () => expect.fail('sl-change incorrectly emitted'));\n    el.addEventListener('sl-input', () => expect.fail('sl-change incorrectly emitted'));\n    el.checked = true;\n    await el.updateComplete;\n    el.checked = false;\n    await el.updateComplete;\n  });\n\n  it('should hide the native input with the correct positioning to scroll correctly when contained in an overflow', async () => {\n    //\n    // See: https://github.com/shoelace-style/shoelace/issues/1169\n    //\n    const el = await fixture(html`  `);\n    const label = el.shadowRoot!.querySelector('.switch')!;\n    const input = el.shadowRoot!.querySelector('.switch__input')!;\n\n    const labelPosition = getComputedStyle(label).position;\n    const inputPosition = getComputedStyle(input).position;\n\n    expect(labelPosition).to.equal('relative');\n    expect(inputPosition).to.equal('absolute');\n  });\n\n  describe('when submitting a form', () => {\n    it('should submit the correct value when a value is provided', async () => {\n      const form = await fixture(html`\n        \n          \n          Submit\n        \n      `);\n      const button = form.querySelector('sl-button')!;\n      const submitHandler = sinon.spy((event: SubmitEvent) => {\n        formData = new FormData(form);\n        event.preventDefault();\n      });\n      let formData: FormData;\n\n      form.addEventListener('submit', submitHandler);\n      button.click();\n\n      await waitUntil(() => submitHandler.calledOnce);\n\n      expect(formData!.get('a')).to.equal('1');\n    });\n\n    it('should submit \"on\" when no value is provided', async () => {\n      const form = await fixture(html`\n        
    \n          \n          Submit\n        
    \n      `);\n      const button = form.querySelector('sl-button')!;\n      const submitHandler = sinon.spy((event: SubmitEvent) => {\n        formData = new FormData(form);\n        event.preventDefault();\n      });\n      let formData: FormData;\n\n      form.addEventListener('submit', submitHandler);\n      button.click();\n\n      await waitUntil(() => submitHandler.calledOnce);\n\n      expect(formData!.get('a')).to.equal('on');\n    });\n\n    it('should show a constraint validation error when setCustomValidity() is called', async () => {\n      const form = await fixture(html`\n        
    \n          \n          Submit\n        
    \n      `);\n      const button = form.querySelector('sl-button')!;\n      const slSwitch = form.querySelector('sl-switch')!;\n      const submitHandler = sinon.spy((event: SubmitEvent) => event.preventDefault());\n\n      // Submitting the form after setting custom validity should not trigger the handler\n      slSwitch.setCustomValidity('Invalid selection');\n      form.addEventListener('submit', submitHandler);\n      button.click();\n      await aTimeout(100);\n\n      expect(submitHandler).to.not.have.been.called;\n    });\n\n    it('should be invalid when required and unchecked', async () => {\n      const slSwitch = await fixture(html`  `);\n      expect(slSwitch.checkValidity()).to.be.false;\n    });\n\n    it('should be valid when required and checked', async () => {\n      const slSwitch = await fixture(html`  `);\n      expect(slSwitch.checkValidity()).to.be.true;\n    });\n\n    it('should be present in form data when using the form attribute and located outside of a 
    ', async () => {\n      const el = await fixture(html`\n        
    \n          \n            Submit\n          \n          \n        
    \n      `);\n      const form = el.querySelector('form')!;\n      const formData = new FormData(form);\n\n      expect(formData.get('a')).to.equal('1');\n    });\n\n    it('should receive validation attributes (\"states\") even when novalidate is used on the parent form', async () => {\n      const el = await fixture(html` 
     `);\n      const slSwitch = el.querySelector('sl-switch')!;\n\n      expect(slSwitch.hasAttribute('data-required')).to.be.true;\n      expect(slSwitch.hasAttribute('data-optional')).to.be.false;\n      expect(slSwitch.hasAttribute('data-invalid')).to.be.true;\n      expect(slSwitch.hasAttribute('data-valid')).to.be.false;\n      expect(slSwitch.hasAttribute('data-user-invalid')).to.be.false;\n      expect(slSwitch.hasAttribute('data-user-valid')).to.be.false;\n    });\n  });\n\n  describe('when resetting a form', () => {\n    it('should reset the element to its initial value', async () => {\n      const form = await fixture(html`\n        
    \n          \n          Reset\n        
    \n      `);\n      const button = form.querySelector('sl-button')!;\n      const switchEl = form.querySelector('sl-switch')!;\n      switchEl.checked = false;\n\n      await switchEl.updateComplete;\n      setTimeout(() => button.click());\n\n      await oneEvent(form, 'reset');\n      await switchEl.updateComplete;\n\n      expect(switchEl.checked).to.true;\n\n      switchEl.defaultChecked = false;\n\n      setTimeout(() => button.click());\n      await oneEvent(form, 'reset');\n      await switchEl.updateComplete;\n\n      expect(switchEl.checked).to.false;\n    });\n  });\n\n  it('should not jump the page to the bottom when focusing a switch at the bottom of an element with overflow: auto;', async () => {\n    // https://github.com/shoelace-style/shoelace/issues/1169\n    const el = await fixture(html`\n      
    \n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n        Switch\n      
    \n      ;\n    `);\n\n    const switches = el.querySelectorAll('sl-switch');\n    const lastSwitch = switches[switches.length - 1];\n\n    expect(window.scrollY).to.equal(0);\n    // Without these 2 timeouts, tests will pass unexpectedly in Safari.\n    await aTimeout(10);\n    lastSwitch.focus();\n    await aTimeout(10);\n    expect(window.scrollY).to.equal(0);\n  });\n\n  runFormControlBaseTests('sl-switch');\n});\n"
  },
  {
    "path": "src/components/switch/switch.ts",
    "content": "import SlSwitch from './switch.component.js';\n\nexport * from './switch.component.js';\nexport default SlSwitch;\n\nSlSwitch.define('sl-switch');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-switch': SlSwitch;\n  }\n}\n"
  },
  {
    "path": "src/components/tab/tab.component.ts",
    "content": "import { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport ShoelaceElement from '../../internal/shoelace-element.js';\nimport SlIconButton from '../icon-button/icon-button.component.js';\nimport styles from './tab.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nlet id = 0;\n\n/**\n * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n * @documentation https://shoelace.style/components/tab\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon-button\n *\n * @slot - The tab's label.\n *\n * @event sl-close - Emitted when the tab is closable and the close button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart close-button - The close button, an ``.\n * @csspart close-button__base - The close button's exported `base` part.\n */\nexport default class SlTab extends ShoelaceElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n  static dependencies = { 'sl-icon-button': SlIconButton };\n\n  private readonly localize = new LocalizeController(this);\n\n  private readonly attrId = ++id;\n  private readonly componentId = `sl-tab-${this.attrId}`;\n\n  @query('.tab') tab: HTMLElement;\n\n  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */\n  @property({ reflect: true }) panel = '';\n\n  /** Draws the tab in an active state. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Makes the tab closable and shows a close button. */\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  /** Disables the tab and prevents selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * @internal\n   * Need to wrap in a `@property()` otherwise CustomElement throws a \"The result must not have attributes\" runtime error.\n   */\n  @property({ type: Number, reflect: true }) tabIndex = 0;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'tab');\n  }\n\n  private handleCloseClick(event: Event) {\n    event.stopPropagation();\n    this.emit('sl-close');\n  }\n\n  @watch('active')\n  handleActiveChange() {\n    this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n\n    if (this.disabled && !this.active) {\n      this.tabIndex = -1;\n    } else {\n      this.tabIndex = 0;\n    }\n  }\n\n  render() {\n    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n\n    return html`\n      \n        \n        ${this.closable\n          ? html`\n              \n            `\n          : ''}\n      \n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-tab': SlTab;\n  }\n}\n"
  },
  {
    "path": "src/components/tab/tab.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: inline-block;\n  }\n\n  .tab {\n    display: inline-flex;\n    align-items: center;\n    font-family: var(--sl-font-sans);\n    font-size: var(--sl-font-size-small);\n    font-weight: var(--sl-font-weight-semibold);\n    border-radius: var(--sl-border-radius-medium);\n    color: var(--sl-color-neutral-600);\n    padding: var(--sl-spacing-medium) var(--sl-spacing-large);\n    white-space: nowrap;\n    user-select: none;\n    -webkit-user-select: none;\n    cursor: pointer;\n    transition:\n      var(--transition-speed) box-shadow,\n      var(--transition-speed) color;\n  }\n\n  .tab:hover:not(.tab--disabled) {\n    color: var(--sl-color-primary-600);\n  }\n\n  :host(:focus) {\n    outline: transparent;\n  }\n\n  :host(:focus-visible) {\n    color: var(--sl-color-primary-600);\n    outline: var(--sl-focus-ring);\n    outline-offset: calc(-1 * var(--sl-focus-ring-width) - var(--sl-focus-ring-offset));\n  }\n\n  .tab.tab--active:not(.tab--disabled) {\n    color: var(--sl-color-primary-600);\n  }\n\n  .tab.tab--closable {\n    padding-inline-end: var(--sl-spacing-small);\n  }\n\n  .tab.tab--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .tab__close-button {\n    font-size: var(--sl-font-size-small);\n    margin-inline-start: var(--sl-spacing-small);\n  }\n\n  .tab__close-button::part(base) {\n    padding: var(--sl-spacing-3x-small);\n  }\n\n  @media (forced-colors: active) {\n    .tab.tab--active:not(.tab--disabled) {\n      outline: solid 1px transparent;\n      outline-offset: -3px;\n    }\n  }\n`;\n"
  },
  {
    "path": "src/components/tab/tab.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport { expect, fixture, html } from '@open-wc/testing';\nimport sinon from 'sinon';\nimport type SlIconButton from '../icon-button/icon-button.js';\nimport type SlTab from './tab.js';\nimport type SlTabGroup from '../tab-group/tab-group.js';\n\ndescribe('', () => {\n  it('passes accessibility test', async () => {\n    const el = await fixture(html`\n      \n        Test\n      \n    `);\n\n    await expect(el).to.be.accessible();\n  });\n\n  it('should render default tab', async () => {\n    const el = await fixture(html` Test `);\n\n    const base = el.shadowRoot!.querySelector('[part~=\"base\"]')!;\n\n    expect(el.getAttribute('role')).to.equal('tab');\n    expect(el.getAttribute('aria-disabled')).to.equal('false');\n    expect(el.getAttribute('aria-selected')).to.equal('false');\n    expect(el.getAttribute('tabindex')).to.equal('0');\n    expect(base.getAttribute('class')).to.equal(' tab ');\n    expect(el.active).to.equal(false);\n    expect(el.closable).to.equal(false);\n    expect(el.disabled).to.equal(false);\n  });\n\n  it('should disable tab by attribute', async () => {\n    const el = await fixture(html` Test `);\n\n    const base = el.shadowRoot!.querySelector('[part~=\"base\"]')!;\n\n    expect(el.disabled).to.equal(true);\n    expect(el.getAttribute('aria-disabled')).to.equal('true');\n    expect(base.getAttribute('class')).to.equal(' tab tab--disabled ');\n    expect(el.getAttribute('tabindex')).to.equal('-1');\n  });\n\n  it('should set active tab by attribute', async () => {\n    const el = await fixture(html` Test `);\n\n    const base = el.shadowRoot!.querySelector('[part~=\"base\"]')!;\n\n    expect(el.active).to.equal(true);\n    expect(el.getAttribute('aria-selected')).to.equal('true');\n    expect(base.getAttribute('class')).to.equal(' tab tab--active ');\n    expect(el.getAttribute('tabindex')).to.equal('0');\n  });\n\n  it('should set closable by attribute', async () => {\n    const el = await fixture(html` Test `);\n\n    const base = el.shadowRoot!.querySelector('[part~=\"base\"]')!;\n    const closeButton = el.shadowRoot!.querySelector('[part~=\"close-button\"]');\n\n    expect(el.closable).to.equal(true);\n    expect(base.getAttribute('class')).to.match(/tab tab--closable/);\n    expect(closeButton).not.to.be.null;\n  });\n\n  describe('focus', () => {\n    it('should focus itself', async () => {\n      const el = await fixture(html` Test `);\n\n      el.focus();\n      await el.updateComplete;\n\n      expect(document.activeElement).to.equal(el);\n    });\n  });\n\n  describe('blur', () => {\n    it('should blur itself', async () => {\n      const el = await fixture(html` Test `);\n\n      el.focus();\n      await el.updateComplete;\n\n      expect(document.activeElement).to.equal(el);\n\n      el.blur();\n      await el.updateComplete;\n\n      expect(document.activeElement).to.not.equal(el);\n    });\n  });\n\n  describe('closable', () => {\n    it('should emit close event when the close button is clicked', async () => {\n      const tabGroup = await fixture(html`\n        \n          General\n          Custom\n          This is the general tab panel.\n          This is the custom tab panel.\n        \n      `);\n      const closeButton = tabGroup\n        .querySelectorAll('sl-tab')[0]!\n        .shadowRoot!.querySelector('[part~=\"close-button\"]')!;\n\n      const handleClose = sinon.spy();\n      const handleTabShow = sinon.spy();\n\n      tabGroup.addEventListener('sl-close', handleClose, { once: true });\n      // The sl-tab-show event shouldn't be emitted when clicking the close button\n      tabGroup.addEventListener('sl-tab-show', handleTabShow);\n\n      closeButton.click();\n      await closeButton?.updateComplete;\n\n      expect(handleClose.called).to.equal(true);\n      expect(handleTabShow.called).to.equal(false);\n    });\n  });\n});\n"
  },
  {
    "path": "src/components/tab/tab.ts",
    "content": "import SlTab from './tab.component.js';\n\nexport * from './tab.component.js';\nexport default SlTab;\n\nSlTab.define('sl-tab');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-tab': SlTab;\n  }\n}\n"
  },
  {
    "path": "src/components/tab-group/tab-group.component.ts",
    "content": "import '../../internal/scrollend-polyfill.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { eventOptions, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { scrollIntoView } from '../../internal/scroll.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport ShoelaceElement from '../../internal/shoelace-element.js';\nimport SlIconButton from '../icon-button/icon-button.component.js';\nimport SlResizeObserver from '../resize-observer/resize-observer.component.js';\nimport styles from './tab-group.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type SlTab from '../tab/tab.js';\nimport type SlTabPanel from '../tab-panel/tab-panel.js';\n\n/**\n * @summary Tab groups organize content into a container that shows one section at a time.\n * @documentation https://shoelace.style/components/tab-group\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon-button\n *\n * @slot - Used for grouping tab panels in the tab group. Must be `` elements.\n * @slot nav - Used for grouping tabs in the tab group. Must be `` elements.\n *\n * @event {{ name: String }} sl-tab-show - Emitted when a tab is shown.\n * @event {{ name: String }} sl-tab-hide - Emitted when a tab is hidden.\n *\n * @csspart base - The component's base wrapper.\n * @csspart nav - The tab group's navigation container where tabs are slotted in.\n * @csspart tabs - The container that wraps the tabs.\n * @csspart active-tab-indicator - The line that highlights the currently selected tab.\n * @csspart body - The tab group's body where tab panels are slotted in.\n * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an ``.\n * @csspart scroll-button--start - The starting scroll button.\n * @csspart scroll-button--end - The ending scroll button.\n * @csspart scroll-button__base - The scroll button's exported `base` part.\n *\n * @cssproperty --indicator-color - The color of the active tab indicator.\n * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).\n * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).\n */\nexport default class SlTabGroup extends ShoelaceElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n  static dependencies = { 'sl-icon-button': SlIconButton, 'sl-resize-observer': SlResizeObserver };\n\n  private activeTab?: SlTab;\n  private mutationObserver: MutationObserver;\n  private resizeObserver: ResizeObserver;\n  private tabs: SlTab[] = [];\n  private focusableTabs: SlTab[] = [];\n  private panels: SlTabPanel[] = [];\n  private readonly localize = new LocalizeController(this);\n\n  @query('.tab-group') tabGroup: HTMLElement;\n  @query('.tab-group__body') body: HTMLSlotElement;\n  @query('.tab-group__nav') nav: HTMLElement;\n  @query('.tab-group__indicator') indicator: HTMLElement;\n\n  @state() private hasScrollControls = false;\n\n  @state() private shouldHideScrollStartButton = false;\n  @state() private shouldHideScrollEndButton = false;\n\n  /** The placement of the tabs. */\n  @property() placement: 'top' | 'bottom' | 'start' | 'end' = 'top';\n\n  /**\n   * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\n   * manual, the tab will receive focus but will not show until the user presses spacebar or enter.\n   */\n  @property() activation: 'auto' | 'manual' = 'auto';\n\n  /** Disables the scroll arrows that appear when tabs overflow. */\n  @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;\n\n  /** Prevent scroll buttons from being hidden when inactive. */\n  @property({ attribute: 'fixed-scroll-controls', type: Boolean }) fixedScrollControls = false;\n\n  connectedCallback() {\n    const whenAllDefined = Promise.all([\n      customElements.whenDefined('sl-tab'),\n      customElements.whenDefined('sl-tab-panel')\n    ]);\n\n    super.connectedCallback();\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.repositionIndicator();\n      this.updateScrollControls();\n    });\n\n    this.mutationObserver = new MutationObserver(mutations => {\n      // Make sure to only observe the direct children of the tab group\n      // instead of other sub elements that might be slotted in.\n      // @see https://github.com/shoelace-style/shoelace/issues/2320\n      const instanceMutations = mutations.filter(({ target }) => {\n        if (target === this) return true; // Allow self updates\n        if ((target as HTMLElement).closest('sl-tab-group') !== this) return false; // We are not direct children\n\n        // We should only care about changes to the tab or tab panel\n        const tagName = (target as HTMLElement).tagName.toLowerCase();\n        return tagName === 'sl-tab' || tagName === 'sl-tab-panel';\n      });\n\n      if (instanceMutations.length === 0) {\n        return;\n      }\n\n      // Update aria labels when the DOM changes\n      if (instanceMutations.some(m => !['aria-labelledby', 'aria-controls'].includes(m.attributeName!))) {\n        setTimeout(() => this.setAriaLabels());\n      }\n\n      // Sync tabs when disabled states change\n      if (instanceMutations.some(m => m.attributeName === 'disabled')) {\n        this.syncTabsAndPanels();\n        // sync tabs when active state on tab changes\n      } else if (instanceMutations.some(m => m.attributeName === 'active')) {\n        const tabs = instanceMutations\n          .filter(m => m.attributeName === 'active' && (m.target as HTMLElement).tagName.toLowerCase() === 'sl-tab')\n          .map(m => m.target as SlTab);\n        const newActiveTab = tabs.find(tab => tab.active);\n\n        if (newActiveTab) {\n          this.setActiveTab(newActiveTab);\n        }\n      }\n    });\n\n    // After the first update...\n    this.updateComplete.then(() => {\n      this.syncTabsAndPanels();\n\n      this.mutationObserver.observe(this, {\n        attributes: true,\n        attributeFilter: ['active', 'disabled', 'name', 'panel'],\n        childList: true,\n        subtree: true\n      });\n\n      this.resizeObserver.observe(this.nav);\n\n      // Wait for tabs and tab panels to be registered\n      whenAllDefined.then(() => {\n        // Set initial tab state when the tabs become visible\n        const intersectionObserver = new IntersectionObserver((entries, observer) => {\n          if (entries[0].intersectionRatio > 0) {\n            this.setAriaLabels();\n            this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });\n            observer.unobserve(entries[0].target);\n          }\n        });\n        intersectionObserver.observe(this.tabGroup);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.mutationObserver?.disconnect();\n\n    if (this.nav) {\n      this.resizeObserver?.unobserve(this.nav);\n    }\n  }\n\n  private getAllTabs() {\n    const slot = this.shadowRoot!.querySelector('slot[name=\"nav\"]')!;\n\n    return slot.assignedElements() as SlTab[];\n  }\n\n  private getAllPanels() {\n    return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === 'sl-tab-panel') as [SlTabPanel];\n  }\n\n  private getActiveTab() {\n    return this.tabs.find(el => el.active);\n  }\n\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('sl-tab');\n    const tabGroup = tab?.closest('sl-tab-group');\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    if (tab !== null) {\n      this.setActiveTab(tab, { scrollBehavior: 'smooth' });\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('sl-tab');\n    const tabGroup = tab?.closest('sl-tab-group');\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      if (tab !== null) {\n        this.setActiveTab(tab, { scrollBehavior: 'smooth' });\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n      const activeEl = this.tabs.find(t => t.matches(':focus'));\n      const isRtl = this.localize.dir() === 'rtl';\n      let nextTab: null | SlTab = null;\n\n      if (activeEl?.tagName.toLowerCase() === 'sl-tab') {\n        if (event.key === 'Home') {\n          nextTab = this.focusableTabs[0];\n        } else if (event.key === 'End') {\n          nextTab = this.focusableTabs[this.focusableTabs.length - 1];\n        } else if (\n          (['top', 'bottom'].includes(this.placement) && event.key === (isRtl ? 'ArrowRight' : 'ArrowLeft')) ||\n          (['start', 'end'].includes(this.placement) && event.key === 'ArrowUp')\n        ) {\n          const currentIndex = this.tabs.findIndex(el => el === activeEl);\n          nextTab = this.findNextFocusableTab(currentIndex, 'backward');\n        } else if (\n          (['top', 'bottom'].includes(this.placement) && event.key === (isRtl ? 'ArrowLeft' : 'ArrowRight')) ||\n          (['start', 'end'].includes(this.placement) && event.key === 'ArrowDown')\n        ) {\n          const currentIndex = this.tabs.findIndex(el => el === activeEl);\n          nextTab = this.findNextFocusableTab(currentIndex, 'forward');\n        }\n\n        if (!nextTab) {\n          return;\n        }\n\n        nextTab.tabIndex = 0;\n        nextTab.focus({ preventScroll: true });\n\n        if (this.activation === 'auto') {\n          this.setActiveTab(nextTab, { scrollBehavior: 'smooth' });\n        } else {\n          this.tabs.forEach(tabEl => {\n            tabEl.tabIndex = tabEl === nextTab ? 0 : -1;\n          });\n        }\n\n        if (['top', 'bottom'].includes(this.placement)) {\n          scrollIntoView(nextTab, this.nav, 'horizontal');\n        }\n\n        event.preventDefault();\n      }\n    }\n  }\n\n  private handleScrollToStart() {\n    this.nav.scroll({\n      left:\n        this.localize.dir() === 'rtl'\n          ? this.nav.scrollLeft + this.nav.clientWidth\n          : this.nav.scrollLeft - this.nav.clientWidth,\n      behavior: 'smooth'\n    });\n  }\n\n  private handleScrollToEnd() {\n    this.nav.scroll({\n      left:\n        this.localize.dir() === 'rtl'\n          ? this.nav.scrollLeft - this.nav.clientWidth\n          : this.nav.scrollLeft + this.nav.clientWidth,\n      behavior: 'smooth'\n    });\n  }\n\n  private setActiveTab(tab: SlTab, options?: { emitEvents?: boolean; scrollBehavior?: 'auto' | 'smooth' }) {\n    options = {\n      emitEvents: true,\n      scrollBehavior: 'auto',\n      ...options\n    };\n\n    if (tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync active tab and panel\n      this.tabs.forEach(el => {\n        el.active = el === this.activeTab;\n        el.tabIndex = el === this.activeTab ? 0 : -1;\n      });\n      this.panels.forEach(el => (el.active = el.name === this.activeTab?.panel));\n      this.syncIndicator();\n\n      if (['top', 'bottom'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', options.scrollBehavior);\n      }\n\n      // Emit events\n      if (options.emitEvents) {\n        if (previousTab) {\n          this.emit('sl-tab-hide', { detail: { name: previousTab.panel } });\n        }\n\n        this.emit('sl-tab-show', { detail: { name: this.activeTab.panel } });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    // Link each tab with its corresponding panel\n    this.tabs.forEach(tab => {\n      const panel = this.panels.find(el => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id')!);\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id')!);\n      }\n    });\n  }\n\n  private repositionIndicator() {\n    const currentTab = this.getActiveTab();\n\n    if (!currentTab) {\n      return;\n    }\n\n    const width = currentTab.clientWidth;\n    const height = currentTab.clientHeight;\n    const isRtl = this.localize.dir() === 'rtl';\n\n    // We can't used offsetLeft/offsetTop here due to a shadow parent issue where neither can getBoundingClientRect\n    // because it provides invalid values for animating elements: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n    const allTabs = this.getAllTabs();\n    const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));\n    const offset = precedingTabs.reduce(\n      (previous, current) => ({\n        left: previous.left + current.clientWidth,\n        top: previous.top + current.clientHeight\n      }),\n      { left: 0, top: 0 }\n    );\n\n    switch (this.placement) {\n      case 'top':\n      case 'bottom':\n        this.indicator.style.width = `${width}px`;\n        this.indicator.style.height = 'auto';\n        this.indicator.style.translate = isRtl ? `${-1 * offset.left}px` : `${offset.left}px`;\n        break;\n\n      case 'start':\n      case 'end':\n        this.indicator.style.width = 'auto';\n        this.indicator.style.height = `${height}px`;\n        this.indicator.style.translate = `0 ${offset.top}px`;\n        break;\n    }\n  }\n\n  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n  private syncTabsAndPanels() {\n    this.tabs = this.getAllTabs();\n    this.focusableTabs = this.tabs.filter(el => !el.disabled);\n\n    this.panels = this.getAllPanels();\n    this.syncIndicator();\n\n    // After updating, show or hide scroll controls as needed\n    this.updateComplete.then(() => this.updateScrollControls());\n  }\n\n  private findNextFocusableTab(currentIndex: number, direction: 'forward' | 'backward') {\n    let nextTab = null;\n    const iterator = direction === 'forward' ? 1 : -1;\n    let nextIndex = currentIndex + iterator;\n\n    while (currentIndex < this.tabs.length) {\n      nextTab = this.tabs[nextIndex] || null;\n\n      if (nextTab === null) {\n        // This is where wrapping happens. If we're moving forward and get to the end, then we jump to the beginning. If we're moving backward and get to the start, then we jump to the end.\n        if (direction === 'forward') {\n          nextTab = this.focusableTabs[0];\n        } else {\n          nextTab = this.focusableTabs[this.focusableTabs.length - 1];\n        }\n        break;\n      }\n\n      if (!nextTab.disabled) {\n        break;\n      }\n\n      nextIndex += iterator;\n    }\n\n    return nextTab;\n  }\n\n  /**\n   * The reality of the browser means that we can't expect the scroll position to be exactly what we want it to be, so\n   * we add one pixel of wiggle room to our calculations.\n   */\n  private scrollOffset = 1;\n\n  @eventOptions({ passive: true })\n  private updateScrollButtons() {\n    if (this.hasScrollControls && !this.fixedScrollControls) {\n      this.shouldHideScrollStartButton = this.scrollFromStart() <= this.scrollOffset;\n      this.shouldHideScrollEndButton = this.isScrolledToEnd();\n    }\n  }\n\n  private isScrolledToEnd() {\n    return this.scrollFromStart() + this.nav.clientWidth >= this.nav.scrollWidth - this.scrollOffset;\n  }\n\n  private scrollFromStart() {\n    return this.localize.dir() === 'rtl' ? -this.nav.scrollLeft : this.nav.scrollLeft;\n  }\n\n  @watch('noScrollControls', { waitUntilFirstUpdate: true })\n  updateScrollControls() {\n    if (this.noScrollControls) {\n      this.hasScrollControls = false;\n    } else {\n      // In most cases, we can compare scrollWidth to clientWidth to determine if scroll controls should show. However,\n      // Safari appears to calculate this incorrectly when zoomed at 110%, causing the controls to toggle indefinitely.\n      // Adding a single pixel to the comparison seems to resolve it.\n      //\n      // See https://github.com/shoelace-style/shoelace/issues/1839\n      this.hasScrollControls =\n        ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth + 1;\n    }\n\n    this.updateScrollButtons();\n  }\n\n  @watch('placement', { waitUntilFirstUpdate: true })\n  syncIndicator() {\n    const tab = this.getActiveTab();\n\n    if (tab) {\n      this.indicator.style.display = 'block';\n      this.repositionIndicator();\n    } else {\n      this.indicator.style.display = 'none';\n    }\n  }\n\n  /** Shows the specified tab panel. */\n  show(panel: string) {\n    const tab = this.tabs.find(el => el.panel === panel);\n\n    if (tab) {\n      this.setActiveTab(tab, { scrollBehavior: 'smooth' });\n    }\n  }\n\n  render() {\n    const isRtl = this.localize.dir() === 'rtl';\n\n    return html`\n      \n        
    \n          ${this.hasScrollControls\n            ? html`\n                \n              `\n            : ''}\n\n          
    \n            
    \n              
    \n              \n                \n              \n            
    \n          
    \n\n          ${this.hasScrollControls\n            ? html`\n                \n              `\n            : ''}\n        
    \n\n        \n      \n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-tab-group': SlTabGroup;\n  }\n}\n"
  },
  {
    "path": "src/components/tab-group/tab-group.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  :host {\n    --indicator-color: var(--sl-color-primary-600);\n    --track-color: var(--sl-color-neutral-200);\n    --track-width: 2px;\n\n    display: block;\n  }\n\n  .tab-group {\n    display: flex;\n    border-radius: 0;\n  }\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n  }\n\n  .tab-group__indicator {\n    position: absolute;\n    transition:\n      var(--sl-transition-fast) translate ease,\n      var(--sl-transition-fast) width ease;\n  }\n\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    position: relative;\n    padding: 0 var(--sl-spacing-x-large);\n  }\n\n  .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden,\n  .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden {\n    visibility: hidden;\n  }\n\n  .tab-group__body {\n    display: block;\n    overflow: auto;\n  }\n\n  .tab-group__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: var(--sl-spacing-x-large);\n  }\n\n  .tab-group__scroll-button--start {\n    left: 0;\n  }\n\n  .tab-group__scroll-button--end {\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--start {\n    left: auto;\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--end {\n    left: 0;\n    right: auto;\n  }\n\n  /*\n   * Top\n   */\n\n  .tab-group--top {\n    flex-direction: column;\n  }\n\n  .tab-group--top .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--top .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--top .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--top .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-bottom: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--top .tab-group__indicator {\n    bottom: calc(-1 * var(--track-width));\n    border-bottom: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--top .tab-group__body {\n    order: 2;\n  }\n\n  .tab-group--top ::slotted(sl-tab-panel) {\n    --padding: var(--sl-spacing-medium) 0;\n  }\n\n  /*\n   * Bottom\n   */\n\n  .tab-group--bottom {\n    flex-direction: column;\n  }\n\n  .tab-group--bottom .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--bottom .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--bottom .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-top: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--bottom .tab-group__indicator {\n    top: calc(-1 * var(--track-width));\n    border-top: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--bottom .tab-group__body {\n    order: 1;\n  }\n\n  .tab-group--bottom ::slotted(sl-tab-panel) {\n    --padding: var(--sl-spacing-medium) 0;\n  }\n\n  /*\n   * Start\n   */\n\n  .tab-group--start {\n    flex-direction: row;\n  }\n\n  .tab-group--start .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--start .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-inline-end: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--start .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    border-right: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--start.tab-group--rtl .tab-group__indicator {\n    right: auto;\n    left: calc(-1 * var(--track-width));\n  }\n\n  .tab-group--start .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n\n  .tab-group--start ::slotted(sl-tab-panel) {\n    --padding: 0 var(--sl-spacing-medium);\n  }\n\n  /*\n   * End\n   */\n\n  .tab-group--end {\n    flex-direction: row;\n  }\n\n  .tab-group--end .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--end .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-left: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--end .tab-group__indicator {\n    left: calc(-1 * var(--track-width));\n    border-inline-start: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--end.tab-group--rtl .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    left: auto;\n  }\n\n  .tab-group--end .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n\n  .tab-group--end ::slotted(sl-tab-panel) {\n    --padding: 0 var(--sl-spacing-medium);\n  }\n`;\n"
  },
  {
    "path": "src/components/tab-group/tab-group.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport { aTimeout, elementUpdated, expect, fixture, oneEvent, waitUntil } from '@open-wc/testing';\nimport { clickOnElement } from '../../internal/test.js';\nimport { html } from 'lit';\nimport { isElementVisibleFromOverflow } from '../../internal/test/element-visible-overflow.js';\nimport { queryByTestId } from '../../internal/test/data-testid-helpers.js';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { waitForScrollingToEnd } from '../../internal/test/wait-for-scrolling.js';\nimport type { HTMLTemplateResult } from 'lit';\nimport type { SlTabShowEvent } from '../../events/sl-tab-show.js';\nimport type SlTab from '../tab/tab.js';\nimport type SlTabGroup from './tab-group.js';\nimport type SlTabPanel from '../tab-panel/tab-panel.js';\n\ninterface ClientRectangles {\n  body?: DOMRect;\n  navigation?: DOMRect;\n}\n\nconst waitForScrollButtonsToBeRendered = async (tabGroup: SlTabGroup): Promise => {\n  await waitUntil(() => {\n    const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('sl-icon-button');\n    return scrollButtons?.length === 2;\n  });\n};\n\nconst getClientRectangles = (tabGroup: SlTabGroup): ClientRectangles => {\n  const shadowRoot = tabGroup.shadowRoot;\n  if (shadowRoot) {\n    const nav = shadowRoot.querySelector('[part=nav]');\n    const body = shadowRoot.querySelector('[part=body]');\n    return {\n      body: body?.getBoundingClientRect(),\n      navigation: nav?.getBoundingClientRect()\n    };\n  }\n  return {};\n};\n\nconst expectHeaderToBeVisible = (container: HTMLElement, dataTestId: string): void => {\n  const generalHeader = queryByTestId(container, dataTestId);\n  expect(generalHeader).not.to.be.null;\n  expect(generalHeader).to.be.visible;\n};\n\nconst expectOnlyOneTabPanelToBeActive = async (container: HTMLElement, dataTestIdOfActiveTab: string) => {\n  await waitUntil(() => {\n    const tabPanels = Array.from(container.getElementsByTagName('sl-tab-panel'));\n    const activeTabPanels = tabPanels.filter((element: SlTabPanel) => element.hasAttribute('active'));\n    return activeTabPanels.length === 1;\n  });\n  const tabPanels = Array.from(container.getElementsByTagName('sl-tab-panel'));\n  const activeTabPanels = tabPanels.filter((element: SlTabPanel) => element.hasAttribute('active'));\n  expect(activeTabPanels).to.have.lengthOf(1);\n  expect(activeTabPanels[0]).to.have.attribute('data-testid', dataTestIdOfActiveTab);\n};\n\nconst expectPromiseToHaveName = async (showEventPromise: Promise, expectedName: string) => {\n  const showEvent = await showEventPromise;\n  expect(showEvent.detail.name).to.equal(expectedName);\n};\n\nconst waitForHeaderToBeActive = async (container: HTMLElement, headerTestId: string): Promise => {\n  const generalHeader = queryByTestId(container, headerTestId);\n  await waitUntil(() => {\n    return generalHeader?.hasAttribute('active');\n  });\n  if (generalHeader) {\n    return generalHeader;\n  } else {\n    throw new Error(`did not find error with testid=${headerTestId}`);\n  }\n};\n\ndescribe('', () => {\n  it('renders', async () => {\n    const tabGroup = await fixture(html`\n      \n        General\n        This is the general tab panel.\n      \n    `);\n\n    expect(tabGroup).to.be.visible;\n  });\n\n  it('should not throw error when unmounted too fast', async () => {\n    const el = await fixture(html` 
     `);\n\n    el.innerHTML = '';\n    el.innerHTML = '';\n  });\n\n  it('is accessible', async () => {\n    const tabGroup = await fixture(html`\n      \n        General\n        This is the general tab panel.\n      \n    `);\n\n    await expect(tabGroup).to.be.accessible();\n  });\n\n  it('displays all tabs', async () => {\n    const tabGroup = await fixture(html`\n      \n        General\n        Disabled\n        This is the general tab panel.\n        This is a disabled tab panel.\n      \n    `);\n\n    expectHeaderToBeVisible(tabGroup, 'general-tab-header');\n    expectHeaderToBeVisible(tabGroup, 'disabled-tab-header');\n  });\n\n  it('shows the first tab to be active by default', async () => {\n    const tabGroup = await fixture(html`\n      \n        General\n        Custom\n        This is the general tab panel.\n        This is the custom tab panel.\n      \n    `);\n\n    await expectOnlyOneTabPanelToBeActive(tabGroup, 'general-tab-content');\n  });\n\n  describe('proper positioning', () => {\n    it('shows the header above the tabs by default', async () => {\n      const tabGroup = await fixture(html`\n        \n          General\n          This is the general tab panel.\n        \n      `);\n\n      await aTimeout(0);\n\n      const clientRectangles = getClientRectangles(tabGroup);\n      expect(clientRectangles.body?.top).to.be.greaterThanOrEqual(clientRectangles.navigation?.bottom || -Infinity);\n    });\n\n    it('shows the header below the tabs by setting placement to bottom', async () => {\n      const tabGroup = await fixture(html`\n        \n          General\n          This is the general tab panel.\n        \n      `);\n      tabGroup.placement = 'bottom';\n\n      await aTimeout(0);\n\n      const clientRectangles = getClientRectangles(tabGroup);\n      expect(clientRectangles.body?.bottom).to.be.lessThanOrEqual(clientRectangles.navigation?.top || +Infinity);\n    });\n\n    it('shows the header left of the tabs by setting placement to start', async () => {\n      const tabGroup = await fixture(html`\n        \n          General\n          This is the general tab panel.\n        \n      `);\n      tabGroup.placement = 'start';\n\n      await aTimeout(0);\n\n      const clientRectangles = getClientRectangles(tabGroup);\n      expect(clientRectangles.body?.left).to.be.greaterThanOrEqual(clientRectangles.navigation?.right || -Infinity);\n    });\n\n    it('shows the header right of the tabs by setting placement to end', async () => {\n      const tabGroup = await fixture(html`\n        \n          General\n          This is the general tab panel.\n        \n      `);\n      tabGroup.placement = 'end';\n\n      await aTimeout(0);\n\n      const clientRectangles = getClientRectangles(tabGroup);\n      expect(clientRectangles.body?.right).to.be.lessThanOrEqual(clientRectangles.navigation?.left || -Infinity);\n    });\n  });\n\n  describe('scrolling behavior', () => {\n    const generateTabs = (n: number): HTMLTemplateResult[] => {\n      const result: HTMLTemplateResult[] = [];\n      for (let i = 0; i < n; i++) {\n        result.push(\n          html`Tab ${i}\n            Content of tab ${i}0 `\n        );\n      }\n      return result;\n    };\n\n    before(() => {\n      // disabling failing on resize observer ... unfortunately on webkit this is not really specific\n      // https://github.com/WICG/resize-observer/issues/38#issuecomment-422126006\n      // https://stackoverflow.com/a/64197640\n      const errorHandler = window.onerror;\n      window.onerror = (\n        event: string | Event,\n        source?: string | undefined,\n        lineno?: number | undefined,\n        colno?: number | undefined,\n        error?: Error | undefined\n      ) => {\n        if ((event as string).includes('ResizeObserver') || event === 'Script error.') {\n          return true;\n        } else if (errorHandler) {\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n          return errorHandler(event, source, lineno, colno, error);\n        } else {\n          return true;\n        }\n      };\n    });\n\n    it('shows scroll buttons on too many tabs', async () => {\n      const tabGroup = await fixture(html` ${generateTabs(30)} `);\n\n      await waitForScrollButtonsToBeRendered(tabGroup);\n\n      const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('sl-icon-button');\n      expect(scrollButtons, 'Both scroll buttons should be shown').to.have.length(2);\n\n      tabGroup.disconnectedCallback();\n    });\n\n    it('does not show scroll buttons on too many tabs if deactivated', async () => {\n      const tabGroup = await fixture(html` ${generateTabs(30)} `);\n      tabGroup.noScrollControls = true;\n\n      await aTimeout(0);\n\n      const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('sl-icon-button');\n      expect(scrollButtons).to.have.length(0);\n    });\n\n    it('does not show scroll buttons if all tabs fit on the screen', async () => {\n      const tabGroup = await fixture(html` ${generateTabs(2)} `);\n\n      await aTimeout(0);\n\n      const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('sl-icon-button');\n      expect(scrollButtons).to.have.length(0);\n    });\n\n    // TODO - this fails sporadically, likely due to a timing issue. It tests fine manually.\n    it.skip('does not show scroll buttons if placement is start', async () => {\n      const tabGroup = await fixture(html` ${generateTabs(50)} `);\n      tabGroup.placement = 'start';\n\n      await aTimeout(0);\n\n      const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('sl-icon-button');\n      expect(scrollButtons).to.have.length(0);\n    });\n\n    // TODO - this fails sporadically, likely due to a timing issue. It tests fine manually.\n    it.skip('does not show scroll buttons if placement is end', async () => {\n      const tabGroup = await fixture(html` ${generateTabs(50)} `);\n      tabGroup.placement = 'end';\n\n      await aTimeout(0);\n\n      const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('sl-icon-button');\n      expect(scrollButtons).to.have.length(0);\n    });\n\n    // TODO - this fails sporadically, likely due to a timing issue. It tests fine manually.\n    it.skip('does scroll on scroll button click', async () => {\n      const numberOfElements = 15;\n      const tabGroup = await fixture(\n        html` ${generateTabs(numberOfElements)} `\n      );\n\n      await waitForScrollButtonsToBeRendered(tabGroup);\n      const scrollButtons = tabGroup.shadowRoot?.querySelectorAll('sl-icon-button');\n      expect(scrollButtons).to.have.length(2);\n\n      const firstTab = tabGroup.querySelector('[panel=\"tab-0\"]');\n      expect(firstTab).not.to.be.null;\n      const lastTab = tabGroup.querySelector(`[panel=\"tab-${numberOfElements - 1}\"]`);\n      expect(lastTab).not.to.be.null;\n      expect(isElementVisibleFromOverflow(tabGroup, firstTab!)).to.be.true;\n      expect(isElementVisibleFromOverflow(tabGroup, lastTab!)).to.be.false;\n\n      const scrollToRightButton = tabGroup.shadowRoot?.querySelector('sl-icon-button[part*=\"scroll-button--end\"]');\n      expect(scrollToRightButton).not.to.be.null;\n      await clickOnElement(scrollToRightButton!);\n\n      await elementUpdated(tabGroup);\n      await waitForScrollingToEnd(firstTab!);\n      await waitForScrollingToEnd(lastTab!);\n\n      expect(isElementVisibleFromOverflow(tabGroup, firstTab!)).to.be.false;\n      expect(isElementVisibleFromOverflow(tabGroup, lastTab!)).to.be.true;\n    });\n  });\n\n  describe('tab selection', () => {\n    const expectCustomTabToBeActiveAfter = async (tabGroup: SlTabGroup, action: () => Promise): Promise => {\n      const generalHeader = await waitForHeaderToBeActive(tabGroup, 'general-header');\n      generalHeader.focus();\n\n      const customHeader = queryByTestId(tabGroup, 'custom-header');\n      expect(customHeader).not.to.have.attribute('active');\n\n      const showEventPromise = oneEvent(tabGroup, 'sl-tab-show') as Promise;\n      await action();\n\n      expect(customHeader).to.have.attribute('active');\n      await expectPromiseToHaveName(showEventPromise, 'custom');\n      return expectOnlyOneTabPanelToBeActive(tabGroup, 'custom-tab-content');\n    };\n\n    const expectGeneralTabToBeStillActiveAfter = async (\n      tabGroup: SlTabGroup,\n      action: () => Promise\n    ): Promise => {\n      const generalHeader = await waitForHeaderToBeActive(tabGroup, 'general-header');\n      generalHeader.focus();\n\n      let showEventFired = false;\n      let hideEventFired = false;\n      oneEvent(tabGroup, 'sl-tab-show').then(() => (showEventFired = true));\n      oneEvent(tabGroup, 'sl-tab-hide').then(() => (hideEventFired = true));\n      await action();\n\n      expect(generalHeader).to.have.attribute('active');\n      expect(showEventFired).to.be.false;\n      expect(hideEventFired).to.be.false;\n      return expectOnlyOneTabPanelToBeActive(tabGroup, 'general-tab-content');\n    };\n\n    it('selects a tab by clicking on it', async () => {\n      const tabGroup = await fixture(html`\n        \n          General\n          Custom\n          This is the general tab panel.\n          This is the custom tab panel.\n        \n      `);\n\n      const customHeader = queryByTestId(tabGroup, 'custom-header');\n      return expectCustomTabToBeActiveAfter(tabGroup, () => clickOnElement(customHeader!));\n    });\n\n    it('selects a tab by changing it via active property', async () => {\n      const tabGroup = await fixture(html`\n        \n          General\n          Custom\n          This is the general tab panel.\n          This is the custom tab panel.\n        \n      `);\n\n      const customHeader = queryByTestId(tabGroup, 'custom-header')!;\n      const generalHeader = await waitForHeaderToBeActive(tabGroup, 'general-header');\n      generalHeader.focus();\n\n      expect(customHeader).not.to.have.attribute('active');\n\n      const showEventPromise = oneEvent(tabGroup, 'sl-tab-show') as Promise;\n      customHeader.active = true;\n\n      await tabGroup.updateComplete;\n      expect(customHeader).to.have.attribute('active');\n      await expectPromiseToHaveName(showEventPromise, 'custom');\n      return expectOnlyOneTabPanelToBeActive(tabGroup, 'custom-tab-content');\n    });\n\n    it('does not change if the active tab is reselected', async () => {\n      const tabGroup = await fixture(html`\n        \n          General\n          Custom\n          This is the general tab panel.\n          This is the custom tab panel.\n        \n      `);\n\n      const generalHeader = queryByTestId(tabGroup, 'general-header');\n      return expectGeneralTabToBeStillActiveAfter(tabGroup, () => clickOnElement(generalHeader!));\n    });\n\n    it('does not change if a disabled tab is clicked', async () => {\n      const tabGroup = await fixture(html`\n        \n          General\n          disabled\n          This is the general tab panel.\n          This is the disabled tab panel.\n        \n      `);\n\n      const disabledHeader = queryByTestId(tabGroup, 'disabled-header');\n      return expectGeneralTabToBeStillActiveAfter(tabGroup, () => clickOnElement(disabledHeader!));\n    });\n\n    it('selects a tab by using the arrow keys', async () => {\n      const tabGroup = await fixture(html`\n        \n          General\n          Custom\n          This is the general tab panel.\n          This is the custom tab panel.\n        \n      `);\n\n      return expectCustomTabToBeActiveAfter(tabGroup, () => sendKeys({ press: 'ArrowRight' }));\n    });\n\n    it('selects a tab by using the arrow keys and enter if activation is set to manual', async () => {\n      const tabGroup = await fixture(html`\n        \n          General\n          Custom\n          This is the general tab panel.\n          This is the custom tab panel.\n        \n      `);\n      tabGroup.activation = 'manual';\n\n      const generalHeader = await waitForHeaderToBeActive(tabGroup, 'general-header');\n      generalHeader.focus();\n\n      const customHeader = queryByTestId(tabGroup, 'custom-header');\n      expect(customHeader).not.to.have.attribute('active');\n\n      const showEventPromise = oneEvent(tabGroup, 'sl-tab-show') as Promise;\n      await sendKeys({ press: 'ArrowRight' });\n      await aTimeout(0);\n      expect(generalHeader).to.have.attribute('active');\n\n      await sendKeys({ press: 'Enter' });\n\n      expect(customHeader).to.have.attribute('active');\n      await expectPromiseToHaveName(showEventPromise, 'custom');\n      return expectOnlyOneTabPanelToBeActive(tabGroup, 'custom-tab-content');\n    });\n\n    it('does not allow selection of disabled tabs with arrow keys', async () => {\n      const tabGroup = await fixture(html`\n        \n          General\n          Disabled\n          This is the general tab panel.\n          This is the custom tab panel.\n        \n      `);\n\n      return expectGeneralTabToBeStillActiveAfter(tabGroup, () => sendKeys({ press: 'ArrowRight' }));\n    });\n\n    it('selects a tab by using the show function', async () => {\n      const tabGroup = await fixture(html`\n        \n          General\n          Custom\n          This is the general tab panel.\n          This is the custom tab panel.\n        \n      `);\n\n      return expectCustomTabToBeActiveAfter(tabGroup, () => {\n        tabGroup.show('custom');\n        return aTimeout(0);\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "src/components/tab-group/tab-group.ts",
    "content": "import SlTabGroup from './tab-group.component.js';\n\nexport * from './tab-group.component.js';\nexport default SlTabGroup;\n\nSlTabGroup.define('sl-tab-group');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-tab-group': SlTabGroup;\n  }\n}\n"
  },
  {
    "path": "src/components/tab-panel/tab-panel.component.ts",
    "content": "import { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport ShoelaceElement from '../../internal/shoelace-element.js';\nimport styles from './tab-panel.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n * @documentation https://shoelace.style/components/tab-panel\n * @status stable\n * @since 2.0\n *\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --padding - The tab panel's padding.\n */\nexport default class SlTabPanel extends ShoelaceElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  private readonly attrId = ++id;\n  private readonly componentId = `sl-tab-panel-${this.attrId}`;\n\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = '';\n\n  /** When true, the tab panel will be shown. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute('role', 'tabpanel');\n  }\n\n  @watch('active')\n  handleActiveChange() {\n    this.setAttribute('aria-hidden', this.active ? 'false' : 'true');\n  }\n\n  render() {\n    return html`\n      \n    `;\n  }\n}\n"
  },
  {
    "path": "src/components/tab-panel/tab-panel.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  :host {\n    --padding: 0;\n\n    display: none;\n  }\n\n  :host([active]) {\n    display: block;\n  }\n\n  .tab-panel {\n    display: block;\n    padding: var(--padding);\n  }\n`;\n"
  },
  {
    "path": "src/components/tab-panel/tab-panel.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport { aTimeout, expect, fixture, html } from '@open-wc/testing';\nimport type SlTabPanel from './tab-panel.js';\n\ndescribe('', () => {\n  it('passes accessibility test', async () => {\n    const el = await fixture(html` Test `);\n    await expect(el).to.be.accessible();\n  });\n\n  it('default properties', async () => {\n    const el = await fixture(html` Test `);\n\n    expect(el.id).to.equal('sl-tab-panel-2');\n    expect(el.name).to.equal('');\n    expect(el.active).to.equal(false);\n    expect(el.getAttribute('role')).to.equal('tabpanel');\n    expect(el.getAttribute('aria-hidden')).to.equal('true');\n  });\n\n  it('properties should reflect', async () => {\n    const el = await fixture(html` Test `);\n\n    el.name = 'test';\n    el.active = true;\n    await aTimeout(100);\n    expect(el.getAttribute('name')).to.equal('test');\n    expect(el.hasAttribute('active')).to.equal(true);\n  });\n\n  it('changing active should always update aria-hidden role', async () => {\n    const el = await fixture(html` Test `);\n\n    el.active = true;\n    await aTimeout(100);\n    expect(el.getAttribute('aria-hidden')).to.equal('false');\n  });\n\n  it('passed id should be used', async () => {\n    const el = await fixture(html` Test `);\n\n    expect(el.id).to.equal('test-id');\n  });\n});\n"
  },
  {
    "path": "src/components/tab-panel/tab-panel.ts",
    "content": "import SlTabPanel from './tab-panel.component.js';\n\nexport * from './tab-panel.component.js';\nexport default SlTabPanel;\n\nSlTabPanel.define('sl-tab-panel');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-tab-panel': SlTabPanel;\n  }\n}\n"
  },
  {
    "path": "src/components/tag/tag.component.ts",
    "content": "import { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport ShoelaceElement from '../../internal/shoelace-element.js';\nimport SlIconButton from '../icon-button/icon-button.component.js';\nimport styles from './tag.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @documentation https://shoelace.style/components/tag\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon-button\n *\n * @slot - The tag's content.\n *\n * @event sl-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an ``.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\nexport default class SlTag extends ShoelaceElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n  static dependencies = { 'sl-icon-button': SlIconButton };\n\n  private readonly localize = new LocalizeController(this);\n\n  /** The tag's theme variant. */\n  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';\n\n  /** The tag's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws a pill-style tag with rounded edges. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  /** Makes the tag removable and shows a remove button. */\n  @property({ type: Boolean }) removable = false;\n\n  private handleRemoveClick() {\n    this.emit('sl-remove');\n  }\n\n  render() {\n    return html`\n      \n        \n\n        ${this.removable\n          ? html`\n              \n            `\n          : ''}\n      \n    `;\n  }\n}\n"
  },
  {
    "path": "src/components/tag/tag.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: inline-block;\n  }\n\n  .tag {\n    display: flex;\n    align-items: center;\n    border: solid 1px;\n    line-height: 1;\n    white-space: nowrap;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .tag__remove::part(base) {\n    color: inherit;\n    padding: 0;\n  }\n\n  /*\n   * Variant modifiers\n   */\n\n  .tag--primary {\n    background-color: var(--sl-color-primary-50);\n    border-color: var(--sl-color-primary-200);\n    color: var(--sl-color-primary-800);\n  }\n\n  .tag--primary:active > sl-icon-button {\n    color: var(--sl-color-primary-600);\n  }\n\n  .tag--success {\n    background-color: var(--sl-color-success-50);\n    border-color: var(--sl-color-success-200);\n    color: var(--sl-color-success-800);\n  }\n\n  .tag--success:active > sl-icon-button {\n    color: var(--sl-color-success-600);\n  }\n\n  .tag--neutral {\n    background-color: var(--sl-color-neutral-50);\n    border-color: var(--sl-color-neutral-200);\n    color: var(--sl-color-neutral-800);\n  }\n\n  .tag--neutral:active > sl-icon-button {\n    color: var(--sl-color-neutral-600);\n  }\n\n  .tag--warning {\n    background-color: var(--sl-color-warning-50);\n    border-color: var(--sl-color-warning-200);\n    color: var(--sl-color-warning-800);\n  }\n\n  .tag--warning:active > sl-icon-button {\n    color: var(--sl-color-warning-600);\n  }\n\n  .tag--danger {\n    background-color: var(--sl-color-danger-50);\n    border-color: var(--sl-color-danger-200);\n    color: var(--sl-color-danger-800);\n  }\n\n  .tag--danger:active > sl-icon-button {\n    color: var(--sl-color-danger-600);\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .tag--small {\n    font-size: var(--sl-button-font-size-small);\n    height: calc(var(--sl-input-height-small) * 0.8);\n    line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);\n    border-radius: var(--sl-input-border-radius-small);\n    padding: 0 var(--sl-spacing-x-small);\n  }\n\n  .tag--medium {\n    font-size: var(--sl-button-font-size-medium);\n    height: calc(var(--sl-input-height-medium) * 0.8);\n    line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);\n    border-radius: var(--sl-input-border-radius-medium);\n    padding: 0 var(--sl-spacing-small);\n  }\n\n  .tag--large {\n    font-size: var(--sl-button-font-size-large);\n    height: calc(var(--sl-input-height-large) * 0.8);\n    line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);\n    border-radius: var(--sl-input-border-radius-large);\n    padding: 0 var(--sl-spacing-medium);\n  }\n\n  .tag__remove {\n    margin-inline-start: var(--sl-spacing-x-small);\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .tag--pill {\n    border-radius: var(--sl-border-radius-pill);\n  }\n`;\n"
  },
  {
    "path": "src/components/tag/tag.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport { expect, fixture, html } from '@open-wc/testing';\nimport sinon from 'sinon';\nimport type SlTag from './tag.js';\n\ndescribe('', () => {\n  it('should render default tag', async () => {\n    const el = await fixture(html` Test `);\n\n    const base = el.shadowRoot!.querySelector('[part~=\"base\"]')!;\n\n    expect(el.getAttribute('size')).to.equal('medium');\n    expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--medium ');\n  });\n\n  it('should set variant by attribute', async () => {\n    const el = await fixture(html` Test `);\n\n    const base = el.shadowRoot!.querySelector('[part~=\"base\"]')!;\n\n    expect(base.getAttribute('class')).to.equal(' tag tag--danger tag--medium ');\n  });\n\n  it('should set size by attribute', async () => {\n    const el = await fixture(html` Test `);\n\n    const base = el.shadowRoot!.querySelector('[part~=\"base\"]')!;\n\n    expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--large ');\n  });\n\n  it('should set pill-attribute by attribute', async () => {\n    const el = await fixture(html` Test `);\n\n    const base = el.shadowRoot!.querySelector('[part~=\"base\"]')!;\n\n    expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--medium tag--pill ');\n  });\n\n  it('should set removable by attribute', async () => {\n    const el = await fixture(html` Test `);\n\n    const base = el.shadowRoot!.querySelector('[part~=\"base\"]')!;\n    const removeButton = el.shadowRoot!.querySelector('[part~=\"remove-button\"]');\n\n    expect(el.removable).to.equal(true);\n    expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--medium tag--removable ');\n    expect(removeButton).not.to.be.null;\n  });\n\n  describe('removable', () => {\n    it('should emit remove event when remove button clicked', async () => {\n      const el = await fixture(html` Test `);\n\n      const removeButton = el.shadowRoot!.querySelector('[part~=\"remove-button\"]')!;\n      const spy = sinon.spy();\n\n      el.addEventListener('sl-remove', spy, { once: true });\n\n      removeButton.click();\n\n      expect(spy.called).to.equal(true);\n    });\n  });\n});\n"
  },
  {
    "path": "src/components/tag/tag.ts",
    "content": "import SlTag from './tag.component.js';\n\nexport * from './tag.component.js';\nexport default SlTag;\n\nSlTag.define('sl-tag');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-tag': SlTag;\n  }\n}\n"
  },
  {
    "path": "src/components/textarea/textarea.component.ts",
    "content": "import { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport ShoelaceElement from '../../internal/shoelace-element.js';\nimport styles from './textarea.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { ShoelaceFormControl } from '../../internal/shoelace-element.js';\n\n/**\n * @summary Textareas collect data from the user and allow multiple lines of text.\n * @documentation https://shoelace.style/components/textarea\n * @status stable\n * @since 2.0\n *\n * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event sl-blur - Emitted when the control loses focus.\n * @event sl-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sl-focus - Emitted when the control gains focus.\n * @event sl-input - Emitted when the control receives input.\n * @event sl-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart textarea - The internal `\n            \n            
    \n          \n        \n\n        \n          ${this.helpText}\n        \n      \n    `;\n  }\n}\n"
  },
  {
    "path": "src/components/textarea/textarea.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n  }\n\n  .textarea {\n    display: grid;\n    align-items: center;\n    position: relative;\n    width: 100%;\n    font-family: var(--sl-input-font-family);\n    font-weight: var(--sl-input-font-weight);\n    line-height: var(--sl-line-height-normal);\n    letter-spacing: var(--sl-input-letter-spacing);\n    vertical-align: middle;\n    transition:\n      var(--sl-transition-fast) color,\n      var(--sl-transition-fast) border,\n      var(--sl-transition-fast) box-shadow,\n      var(--sl-transition-fast) background-color;\n    cursor: text;\n  }\n\n  /* Standard textareas */\n  .textarea--standard {\n    background-color: var(--sl-input-background-color);\n    border: solid var(--sl-input-border-width) var(--sl-input-border-color);\n  }\n\n  .textarea--standard:hover:not(.textarea--disabled) {\n    background-color: var(--sl-input-background-color-hover);\n    border-color: var(--sl-input-border-color-hover);\n  }\n  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n    color: var(--sl-input-color-hover);\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled) {\n    background-color: var(--sl-input-background-color-focus);\n    border-color: var(--sl-input-border-color-focus);\n    color: var(--sl-input-color-focus);\n    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);\n  }\n\n  .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {\n    color: var(--sl-input-color-focus);\n  }\n\n  .textarea--standard.textarea--disabled {\n    background-color: var(--sl-input-background-color-disabled);\n    border-color: var(--sl-input-border-color-disabled);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .textarea__control,\n  .textarea__size-adjuster {\n    grid-area: 1 / 1 / 2 / 2;\n  }\n\n  .textarea__size-adjuster {\n    visibility: hidden;\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control {\n    color: var(--sl-input-color-disabled);\n  }\n\n  .textarea--standard.textarea--disabled .textarea__control::placeholder {\n    color: var(--sl-input-placeholder-color-disabled);\n  }\n\n  /* Filled textareas */\n  .textarea--filled {\n    border: none;\n    background-color: var(--sl-input-filled-background-color);\n    color: var(--sl-input-color);\n  }\n\n  .textarea--filled:hover:not(.textarea--disabled) {\n    background-color: var(--sl-input-filled-background-color-hover);\n  }\n\n  .textarea--filled.textarea--focused:not(.textarea--disabled) {\n    background-color: var(--sl-input-filled-background-color-focus);\n    outline: var(--sl-focus-ring);\n    outline-offset: var(--sl-focus-ring-offset);\n  }\n\n  .textarea--filled.textarea--disabled {\n    background-color: var(--sl-input-filled-background-color-disabled);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .textarea__control {\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: 1.4;\n    color: var(--sl-input-color);\n    border: none;\n    background: none;\n    box-shadow: none;\n    cursor: inherit;\n    -webkit-appearance: none;\n  }\n\n  .textarea__control::-webkit-search-decoration,\n  .textarea__control::-webkit-search-cancel-button,\n  .textarea__control::-webkit-search-results-button,\n  .textarea__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .textarea__control::placeholder {\n    color: var(--sl-input-placeholder-color);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .textarea__control:focus {\n    outline: none;\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .textarea--small {\n    border-radius: var(--sl-input-border-radius-small);\n    font-size: var(--sl-input-font-size-small);\n  }\n\n  .textarea--small .textarea__control {\n    padding: 0.5em var(--sl-input-spacing-small);\n  }\n\n  .textarea--medium {\n    border-radius: var(--sl-input-border-radius-medium);\n    font-size: var(--sl-input-font-size-medium);\n  }\n\n  .textarea--medium .textarea__control {\n    padding: 0.5em var(--sl-input-spacing-medium);\n  }\n\n  .textarea--large {\n    border-radius: var(--sl-input-border-radius-large);\n    font-size: var(--sl-input-font-size-large);\n  }\n\n  .textarea--large .textarea__control {\n    padding: 0.5em var(--sl-input-spacing-large);\n  }\n\n  /*\n   * Resize types\n   */\n\n  .textarea--resize-none .textarea__control {\n    resize: none;\n  }\n\n  .textarea--resize-vertical .textarea__control {\n    resize: vertical;\n  }\n\n  .textarea--resize-auto .textarea__control {\n    height: auto;\n    resize: none;\n    overflow-y: hidden;\n  }\n`;\n"
  },
  {
    "path": "src/components/textarea/textarea.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';\nimport { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { serialize } from '../../utilities/form.js';\nimport sinon from 'sinon';\nimport type SlTextarea from './textarea.js';\n\ndescribe('', () => {\n  it('should pass accessibility tests', async () => {\n    const el = await fixture(html`  `);\n    await expect(el).to.be.accessible();\n  });\n\n  it('default properties', async () => {\n    const el = await fixture(html`  `);\n\n    expect(el.size).to.equal('medium');\n    expect(el.name).to.equal('');\n    expect(el.value).to.equal('');\n    expect(el.defaultValue).to.equal('');\n    expect(el.title).to.equal('');\n    expect(el.filled).to.be.false;\n    expect(el.label).to.equal('');\n    expect(el.helpText).to.equal('');\n    expect(el.placeholder).to.equal('');\n    expect(el.rows).to.equal(4);\n    expect(el.resize).to.equal('vertical');\n    expect(el.disabled).to.be.false;\n    expect(el.readonly).to.be.false;\n    expect(el.minlength).to.be.undefined;\n    expect(el.maxlength).to.be.undefined;\n    expect(el.required).to.be.false;\n    expect(el.autocapitalize).to.be.undefined;\n    expect(el.autocorrect).to.be.undefined;\n    expect(el.autocomplete).to.be.undefined;\n    expect(el.autofocus).to.be.undefined;\n    expect(el.enterkeyhint).to.be.undefined;\n    expect(el.spellcheck).to.be.true;\n    expect(el.inputmode).to.be.undefined;\n  });\n\n  it('should have title if title attribute is set', async () => {\n    const el = await fixture(html`  `);\n    const textarea = el.shadowRoot!.querySelector('textarea')!;\n\n    expect(textarea.title).to.equal('Test');\n  });\n\n  it('should be disabled with the disabled attribute', async () => {\n    const el = await fixture(html`  `);\n    const textarea = el.shadowRoot!.querySelector('[part~=\"textarea\"]')!;\n\n    expect(textarea.disabled).to.be.true;\n  });\n\n  it('should focus the textarea when clicking on the label', async () => {\n    const el = await fixture(html`  `);\n    const label = el.shadowRoot!.querySelector('[part~=\"form-control-label\"]')!;\n    const submitHandler = sinon.spy();\n\n    el.addEventListener('sl-focus', submitHandler);\n    (label as HTMLLabelElement).click();\n    await waitUntil(() => submitHandler.calledOnce);\n\n    expect(submitHandler).to.have.been.calledOnce;\n  });\n\n  describe('when the value changes', () => {\n    it('should emit sl-change and sl-input when the user types in the textarea', async () => {\n      const el = await fixture(html`  `);\n      const inputHandler = sinon.spy();\n      const changeHandler = sinon.spy();\n\n      el.addEventListener('sl-input', inputHandler);\n      el.addEventListener('sl-change', changeHandler);\n      el.focus();\n      await sendKeys({ type: 'abc' });\n      el.blur();\n      await el.updateComplete;\n\n      expect(changeHandler).to.have.been.calledOnce;\n      expect(inputHandler).to.have.been.calledThrice;\n    });\n\n    it('should not emit sl-change or sl-input when the value is set programmatically', async () => {\n      const el = await fixture(html`  `);\n\n      el.addEventListener('sl-change', () => expect.fail('sl-change should not be emitted'));\n      el.addEventListener('sl-input', () => expect.fail('sl-input should not be emitted'));\n      el.value = 'abc';\n\n      await el.updateComplete;\n    });\n\n    it('should not emit sl-change or sl-input when calling setRangeText()', async () => {\n      const el = await fixture(html`  `);\n\n      el.addEventListener('sl-change', () => expect.fail('sl-change should not be emitted'));\n      el.addEventListener('sl-input', () => expect.fail('sl-input should not be emitted'));\n      el.focus();\n      el.setSelectionRange(0, 2);\n      el.setRangeText('hello');\n\n      await el.updateComplete;\n    });\n  });\n\n  describe('when using constraint validation', () => {\n    it('should be valid by default', async () => {\n      const el = await fixture(html`  `);\n\n      expect(el.checkValidity()).to.be.true;\n    });\n\n    it('should be invalid when required and empty', async () => {\n      const el = await fixture(html`  `);\n\n      expect(el.checkValidity()).to.be.false;\n    });\n\n    it('should be invalid when required and after removing disabled ', async () => {\n      const el = await fixture(html`  `);\n\n      el.disabled = false;\n      await el.updateComplete;\n\n      expect(el.checkValidity()).to.be.false;\n    });\n\n    it('should be invalid when required and disabled is removed', async () => {\n      const el = await fixture(html`  `);\n      el.disabled = false;\n      await el.updateComplete;\n      expect(el.checkValidity()).to.be.false;\n    });\n\n    it('should receive the correct validation attributes (\"states\") when valid', async () => {\n      const el = await fixture(html`  `);\n\n      expect(el.checkValidity()).to.be.true;\n      expect(el.hasAttribute('data-required')).to.be.true;\n      expect(el.hasAttribute('data-optional')).to.be.false;\n      expect(el.hasAttribute('data-invalid')).to.be.false;\n      expect(el.hasAttribute('data-valid')).to.be.true;\n      expect(el.hasAttribute('data-user-invalid')).to.be.false;\n      expect(el.hasAttribute('data-user-valid')).to.be.false;\n\n      el.focus();\n      await sendKeys({ press: 'b' });\n      await el.updateComplete;\n      el.blur();\n      await el.updateComplete;\n\n      expect(el.checkValidity()).to.be.true;\n      expect(el.hasAttribute('data-user-invalid')).to.be.false;\n      expect(el.hasAttribute('data-user-valid')).to.be.true;\n    });\n\n    it('should receive the correct validation attributes (\"states\") when invalid', async () => {\n      const el = await fixture(html`  `);\n\n      expect(el.hasAttribute('data-required')).to.be.true;\n      expect(el.hasAttribute('data-optional')).to.be.false;\n      expect(el.hasAttribute('data-invalid')).to.be.true;\n      expect(el.hasAttribute('data-valid')).to.be.false;\n      expect(el.hasAttribute('data-user-invalid')).to.be.false;\n      expect(el.hasAttribute('data-user-valid')).to.be.false;\n\n      el.focus();\n      await sendKeys({ press: 'a' });\n      await sendKeys({ press: 'Backspace' });\n      await el.updateComplete;\n      el.blur();\n      await el.updateComplete;\n\n      expect(el.hasAttribute('data-user-invalid')).to.be.true;\n      expect(el.hasAttribute('data-user-valid')).to.be.false;\n    });\n\n    it('should receive validation attributes (\"states\") even when novalidate is used on the parent form', async () => {\n      const el = await fixture(html` 
     `);\n      const textarea = el.querySelector('sl-textarea')!;\n\n      expect(textarea.hasAttribute('data-required')).to.be.true;\n      expect(textarea.hasAttribute('data-optional')).to.be.false;\n      expect(textarea.hasAttribute('data-invalid')).to.be.true;\n      expect(textarea.hasAttribute('data-valid')).to.be.false;\n      expect(textarea.hasAttribute('data-user-invalid')).to.be.false;\n      expect(textarea.hasAttribute('data-user-valid')).to.be.false;\n    });\n  });\n\n  describe('when submitting a form', () => {\n    it('should serialize its name and value with FormData', async () => {\n      const form = await fixture(html` 
     `);\n      const formData = new FormData(form);\n      expect(formData.get('a')).to.equal('1');\n    });\n\n    it('should serialize its name and value with JSON', async () => {\n      const form = await fixture(html` 
     `);\n      const json = serialize(form);\n      expect(json.a).to.equal('1');\n    });\n\n    it('should be invalid when setCustomValidity() is called with a non-empty value', async () => {\n      const textarea = await fixture(html`  `);\n\n      textarea.setCustomValidity('Invalid selection');\n      await textarea.updateComplete;\n\n      expect(textarea.checkValidity()).to.be.false;\n      expect(textarea.hasAttribute('data-invalid')).to.be.true;\n      expect(textarea.hasAttribute('data-valid')).to.be.false;\n      expect(textarea.hasAttribute('data-user-invalid')).to.be.false;\n      expect(textarea.hasAttribute('data-user-valid')).to.be.false;\n\n      textarea.focus();\n      await sendKeys({ type: 'test' });\n      await textarea.updateComplete;\n      textarea.blur();\n      await textarea.updateComplete;\n\n      expect(textarea.hasAttribute('data-user-invalid')).to.be.true;\n      expect(textarea.hasAttribute('data-user-valid')).to.be.false;\n    });\n\n    it('should be present in form data when using the form attribute and located outside of a 
    ', async () => {\n      const el = await fixture(html`\n        
    \n          \n            Submit\n          \n          \n        
    \n      `);\n      const form = el.querySelector('form')!;\n      const formData = new FormData(form);\n\n      expect(formData.get('a')).to.equal('1');\n    });\n  });\n\n  describe('when resetting a form', () => {\n    it('should reset the element to its initial value', async () => {\n      const form = await fixture(html`\n        
    \n          \n          Reset\n        
    \n      `);\n      const button = form.querySelector('sl-button')!;\n      const textarea = form.querySelector('sl-textarea')!;\n      textarea.value = '1234';\n\n      await textarea.updateComplete;\n\n      setTimeout(() => button.click());\n      await oneEvent(form, 'reset');\n      await textarea.updateComplete;\n\n      expect(textarea.value).to.equal('test');\n\n      textarea.defaultValue = '';\n\n      setTimeout(() => button.click());\n      await oneEvent(form, 'reset');\n      await textarea.updateComplete;\n\n      expect(textarea.value).to.equal('');\n    });\n  });\n\n  describe('when using spellcheck', () => {\n    it('should enable spellcheck when no attribute is present', async () => {\n      const el = await fixture(html`  `);\n      const textarea = el.shadowRoot!.querySelector('textarea')!;\n      expect(textarea.getAttribute('spellcheck')).to.equal('true');\n      expect(textarea.spellcheck).to.be.true;\n    });\n\n    it('should enable spellcheck when set to \"true\"', async () => {\n      const el = await fixture(html`  `);\n      const textarea = el.shadowRoot!.querySelector('textarea')!;\n      expect(textarea.getAttribute('spellcheck')).to.equal('true');\n      expect(textarea.spellcheck).to.be.true;\n    });\n\n    it('should disable spellcheck when set to \"false\"', async () => {\n      const el = await fixture(html`  `);\n      const textarea = el.shadowRoot!.querySelector('textarea')!;\n      expect(textarea.getAttribute('spellcheck')).to.equal('false');\n      expect(textarea.spellcheck).to.be.false;\n    });\n  });\n\n  describe('when using the setRangeText() function', () => {\n    it('should set replacement text in the correct location', async () => {\n      const el = await fixture(html`  `);\n\n      el.focus();\n      el.setSelectionRange(1, 3);\n      el.setRangeText('boom');\n      await el.updateComplete;\n      expect(el.value).to.equal('tboomt'); // cspell:disable-line\n    });\n  });\n\n  runFormControlBaseTests('sl-textarea');\n});\n"
  },
  {
    "path": "src/components/textarea/textarea.ts",
    "content": "import SlTextarea from './textarea.component.js';\n\nexport * from './textarea.component.js';\nexport default SlTextarea;\n\nSlTextarea.define('sl-textarea');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-textarea': SlTextarea;\n  }\n}\n"
  },
  {
    "path": "src/components/tooltip/tooltip.component.ts",
    "content": "import { animateTo, parseDuration, stopAnimations } from '../../internal/animate.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport ShoelaceElement from '../../internal/shoelace-element.js';\nimport SlPopup from '../popup/popup.component.js';\nimport styles from './tooltip.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Tooltips display additional information based on a specific action.\n * @documentation https://shoelace.style/components/tooltip\n * @status stable\n * @since 2.0\n *\n * @dependency sl-popup\n *\n * @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n *\n * @event sl-show - Emitted when the tooltip begins to show.\n * @event sl-after-show - Emitted after the tooltip has shown and all animations are complete.\n * @event sl-hide - Emitted when the tooltip begins to hide.\n * @event sl-after-hide - Emitted after the tooltip has hidden and all animations are complete.\n *\n * @csspart base - The component's base wrapper, an `` element.\n * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n * @csspart body - The tooltip's body where its content is rendered.\n *\n * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.\n * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.\n * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.\n *\n * @animation tooltip.show - The animation to use when showing the tooltip.\n * @animation tooltip.hide - The animation to use when hiding the tooltip.\n */\nexport default class SlTooltip extends ShoelaceElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n  static dependencies = { 'sl-popup': SlPopup };\n\n  private hoverTimeout: number;\n  private readonly localize = new LocalizeController(this);\n  private closeWatcher: CloseWatcher | null;\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n  @query('.tooltip__body') body: HTMLElement;\n  @query('sl-popup') popup: SlPopup;\n\n  /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */\n  @property() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @property() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Disables the tooltip so it won't show when triggered. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @property({ type: Number }) distance = 8;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @property({ type: Number }) skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @property() trigger = 'hover focus';\n\n  /**\n   * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n   * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\n   * scenarios.\n   */\n  @property({ type: Boolean }) hoist = false;\n\n  constructor() {\n    super();\n    this.addEventListener('blur', this.handleBlur, true);\n    this.addEventListener('focus', this.handleFocus, true);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('mouseover', this.handleMouseOver);\n    this.addEventListener('mouseout', this.handleMouseOut);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // Cleanup this event in case the tooltip is removed while open\n    this.closeWatcher?.destroy();\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  firstUpdated() {\n    this.body.hidden = !this.open;\n\n    // If the tooltip is visible on init, update its position\n    if (this.open) {\n      this.popup.active = true;\n      this.popup.reposition();\n    }\n  }\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when a tooltip is open should dismiss it\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay'));\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.show(), delay);\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay'));\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.hide(), delay);\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      if (this.disabled) {\n        return;\n      }\n\n      // Show\n      this.emit('sl-show');\n      if ('CloseWatcher' in window) {\n        this.closeWatcher?.destroy();\n        this.closeWatcher = new CloseWatcher();\n        this.closeWatcher.onclose = () => {\n          this.hide();\n        };\n      } else {\n        document.addEventListener('keydown', this.handleDocumentKeyDown);\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n      this.popup.active = true;\n      const { keyframes, options } = getAnimation(this, 'tooltip.show', { dir: this.localize.dir() });\n      await animateTo(this.popup.popup, keyframes, options);\n      this.popup.reposition();\n\n      this.emit('sl-after-show');\n    } else {\n      // Hide\n      this.emit('sl-hide');\n      this.closeWatcher?.destroy();\n      document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n      await stopAnimations(this.body);\n      const { keyframes, options } = getAnimation(this, 'tooltip.hide', { dir: this.localize.dir() });\n      await animateTo(this.popup.popup, keyframes, options);\n      this.popup.active = false;\n      this.body.hidden = true;\n\n      this.emit('sl-after-hide');\n    }\n  }\n\n  @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])\n  async handleOptionsChange() {\n    if (this.hasUpdated) {\n      await this.updateComplete;\n      this.popup.reposition();\n    }\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    if (this.disabled && this.open) {\n      this.hide();\n    }\n  }\n\n  /** Shows the tooltip. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'sl-after-show');\n  }\n\n  /** Hides the tooltip */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'sl-after-hide');\n  }\n\n  //\n  // NOTE: Tooltip is a bit unique in that we're using aria-live instead of aria-labelledby to trick screen readers into\n  // announcing the content. It works really well, but it violates an accessibility rule. We're also adding the\n  // aria-describedby attribute to a slot, which is required by  to correctly locate the first assigned\n  // element, otherwise positioning is incorrect.\n  //\n  render() {\n    return html`\n      \n        ${'' /* eslint-disable-next-line lit-a11y/no-aria-slot */}\n        \n\n        ${'' /* eslint-disable-next-line lit-a11y/accessible-name */}\n        
    \n          ${this.content}\n        
    \n          \n    `;\n  }\n}\n\nsetDefaultAnimation('tooltip.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 }\n  ],\n  options: { duration: 150, easing: 'ease' }\n});\n\nsetDefaultAnimation('tooltip.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 }\n  ],\n  options: { duration: 150, easing: 'ease' }\n});\n"
  },
  {
    "path": "src/components/tooltip/tooltip.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  :host {\n    --max-width: 20rem;\n    --hide-delay: 0ms;\n    --show-delay: 150ms;\n\n    display: contents;\n  }\n\n  .tooltip {\n    --arrow-size: var(--sl-tooltip-arrow-size);\n    --arrow-color: var(--sl-tooltip-background-color);\n  }\n\n  .tooltip::part(popup) {\n    z-index: var(--sl-z-index-tooltip);\n  }\n\n  .tooltip[placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .tooltip[placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .tooltip[placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .tooltip[placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .tooltip__body {\n    display: block;\n    width: max-content;\n    max-width: var(--max-width);\n    border-radius: var(--sl-tooltip-border-radius);\n    background-color: var(--sl-tooltip-background-color);\n    font-family: var(--sl-tooltip-font-family);\n    font-size: var(--sl-tooltip-font-size);\n    font-weight: var(--sl-tooltip-font-weight);\n    line-height: var(--sl-tooltip-line-height);\n    text-align: start;\n    white-space: normal;\n    color: var(--sl-tooltip-color);\n    padding: var(--sl-tooltip-padding);\n    pointer-events: none;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n`;\n"
  },
  {
    "path": "src/components/tooltip/tooltip.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport { expect, fixture, html, waitUntil } from '@open-wc/testing';\nimport sinon from 'sinon';\nimport type SlTooltip from './tooltip.js';\n\ndescribe('', () => {\n  it('should be visible with the open attribute', async () => {\n    const el = await fixture(html`\n      \n        Hover Me\n      \n    `);\n    const body = el.shadowRoot!.querySelector('[part~=\"body\"]')!;\n\n    expect(body.hidden).to.be.false;\n  });\n\n  it('should not be visible without the open attribute', async () => {\n    const el = await fixture(html`\n      \n        Hover Me\n      \n    `);\n    const body = el.shadowRoot!.querySelector('[part~=\"body\"]')!;\n\n    expect(body.hidden).to.be.true;\n  });\n\n  it('should emit sl-show and sl-after-show when calling show()', async () => {\n    const el = await fixture(html`\n      \n        Hover Me\n      \n    `);\n    const body = el.shadowRoot!.querySelector('[part~=\"body\"]')!;\n    const showHandler = sinon.spy();\n    const afterShowHandler = sinon.spy();\n\n    el.addEventListener('sl-show', showHandler);\n    el.addEventListener('sl-after-show', afterShowHandler);\n    el.show();\n\n    await waitUntil(() => showHandler.calledOnce);\n    await waitUntil(() => afterShowHandler.calledOnce);\n\n    expect(showHandler).to.have.been.calledOnce;\n    expect(afterShowHandler).to.have.been.calledOnce;\n    expect(body.hidden).to.be.false;\n  });\n\n  it('should emit sl-hide and sl-after-hide when calling hide()', async () => {\n    const el = await fixture(html`\n      \n        Hover Me\n      \n    `);\n    const body = el.shadowRoot!.querySelector('[part~=\"body\"]')!;\n    const hideHandler = sinon.spy();\n    const afterHideHandler = sinon.spy();\n\n    el.addEventListener('sl-hide', hideHandler);\n    el.addEventListener('sl-after-hide', afterHideHandler);\n    el.hide();\n\n    await waitUntil(() => hideHandler.calledOnce);\n    await waitUntil(() => afterHideHandler.calledOnce);\n\n    expect(hideHandler).to.have.been.calledOnce;\n    expect(afterHideHandler).to.have.been.calledOnce;\n    expect(body.hidden).to.be.true;\n  });\n\n  it('should emit sl-show and sl-after-show when setting open = true', async () => {\n    const el = await fixture(html`\n      \n        Hover Me\n      \n    `);\n    const body = el.shadowRoot!.querySelector('[part~=\"body\"]')!;\n    const showHandler = sinon.spy();\n    const afterShowHandler = sinon.spy();\n\n    el.addEventListener('sl-show', showHandler);\n    el.addEventListener('sl-after-show', afterShowHandler);\n    el.open = true;\n\n    await waitUntil(() => showHandler.calledOnce);\n    await waitUntil(() => afterShowHandler.calledOnce);\n\n    expect(showHandler).to.have.been.calledOnce;\n    expect(afterShowHandler).to.have.been.calledOnce;\n    expect(body.hidden).to.be.false;\n  });\n\n  it('should emit sl-hide and sl-after-hide when setting open = false', async () => {\n    const el = await fixture(html`\n      \n        Hover Me\n      \n    `);\n    const body = el.shadowRoot!.querySelector('[part~=\"body\"]')!;\n    const hideHandler = sinon.spy();\n    const afterHideHandler = sinon.spy();\n\n    el.addEventListener('sl-hide', hideHandler);\n    el.addEventListener('sl-after-hide', afterHideHandler);\n    el.open = false;\n\n    await waitUntil(() => hideHandler.calledOnce);\n    await waitUntil(() => afterHideHandler.calledOnce);\n\n    expect(hideHandler).to.have.been.calledOnce;\n    expect(afterHideHandler).to.have.been.calledOnce;\n    expect(body.hidden).to.be.true;\n  });\n\n  it('should hide the tooltip when tooltip is visible and disabled becomes true', async () => {\n    const el = await fixture(html`\n      \n        Hover Me\n      \n    `);\n    const body = el.shadowRoot!.querySelector('[part~=\"body\"]')!;\n    const hideHandler = sinon.spy();\n    const afterHideHandler = sinon.spy();\n\n    el.addEventListener('sl-hide', hideHandler);\n    el.addEventListener('sl-after-hide', afterHideHandler);\n    el.disabled = true;\n\n    await waitUntil(() => hideHandler.calledOnce);\n    await waitUntil(() => afterHideHandler.calledOnce);\n\n    expect(hideHandler).to.have.been.calledOnce;\n    expect(afterHideHandler).to.have.been.calledOnce;\n    expect(body.hidden).to.be.true;\n  });\n\n  it('should show when open initially', async () => {\n    const el = await fixture(html`\n      \n        Hover Me\n      \n    `);\n    const body = el.shadowRoot!.querySelector('[part~=\"body\"]')!;\n    await el.updateComplete;\n\n    expect(body.hidden).to.be.false;\n  });\n\n  it('should not accept user selection on the tooltip', async () => {\n    const el = await fixture(html`\n      \n        Hover Me\n      \n    `);\n    const tooltipBody = el.shadowRoot!.querySelector('.tooltip__body')!;\n    const userSelect = getComputedStyle(tooltipBody).userSelect || getComputedStyle(tooltipBody).webkitUserSelect;\n\n    expect(userSelect).to.equal('none');\n  });\n});\n"
  },
  {
    "path": "src/components/tooltip/tooltip.ts",
    "content": "import SlTooltip from './tooltip.component.js';\n\nexport * from './tooltip.component.js';\nexport default SlTooltip;\n\nSlTooltip.define('sl-tooltip');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-tooltip': SlTooltip;\n  }\n}\n"
  },
  {
    "path": "src/components/tree/tree.component.ts",
    "content": "import { clamp } from '../../internal/math.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport ShoelaceElement from '../../internal/shoelace-element.js';\nimport SlTreeItem from '../tree-item/tree-item.component.js';\nimport styles from './tree.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nfunction syncCheckboxes(changedTreeItem: SlTreeItem, initialSync = false) {\n  function syncParentItem(treeItem: SlTreeItem) {\n    const children = treeItem.getChildrenItems({ includeDisabled: false });\n\n    if (children.length) {\n      const allChecked = children.every(item => item.selected);\n      const allUnchecked = children.every(item => !item.selected && !item.indeterminate);\n\n      treeItem.selected = allChecked;\n      treeItem.indeterminate = !allChecked && !allUnchecked;\n    }\n  }\n\n  function syncAncestors(treeItem: SlTreeItem) {\n    const parentItem: SlTreeItem | null = treeItem.parentElement as SlTreeItem;\n\n    if (SlTreeItem.isTreeItem(parentItem)) {\n      syncParentItem(parentItem);\n      syncAncestors(parentItem);\n    }\n  }\n\n  function syncDescendants(treeItem: SlTreeItem) {\n    for (const childItem of treeItem.getChildrenItems()) {\n      childItem.selected = initialSync\n        ? treeItem.selected || childItem.selected\n        : !childItem.disabled && treeItem.selected;\n\n      syncDescendants(childItem);\n    }\n\n    if (initialSync) {\n      syncParentItem(treeItem);\n    }\n  }\n\n  syncDescendants(changedTreeItem);\n  syncAncestors(changedTreeItem);\n}\n\n/**\n * @summary Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.\n * @documentation https://shoelace.style/components/tree\n * @status stable\n * @since 2.0\n *\n * @event {{ selection: SlTreeItem[] }} sl-selection-change - Emitted when a tree item is selected or deselected.\n *\n * @slot - The default slot.\n * @slot expand-icon - The icon to show when the tree item is expanded. Works best with ``.\n * @slot collapse-icon - The icon to show when the tree item is collapsed. Works best with ``.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty [--indent-size=var(--sl-spacing-medium)] - The size of the indentation for nested items.\n * @cssproperty [--indent-guide-color=var(--sl-color-neutral-200)] - The color of the indentation line.\n * @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the\n *  indentation line's starting position.\n * @cssproperty [--indent-guide-style=solid] - The style of the indentation line, e.g. solid, dotted, dashed.\n * @cssproperty [--indent-guide-width=0] - The width of the indentation line.\n */\nexport default class SlTree extends ShoelaceElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n  @query('slot[name=expand-icon]') expandedIconSlot: HTMLSlotElement;\n  @query('slot[name=collapse-icon]') collapsedIconSlot: HTMLSlotElement;\n\n  /**\n   * The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple\n   * displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.\n   */\n  @property() selection: 'single' | 'multiple' | 'leaf' = 'single';\n\n  //\n  // A collection of all the items in the tree, in the order they appear. The collection is live, meaning it is\n  // automatically updated when the underlying document is changed.\n  //\n  private lastFocusedItem: SlTreeItem | null;\n  private mutationObserver: MutationObserver;\n  private clickTarget: SlTreeItem | null = null;\n  private readonly localize = new LocalizeController(this);\n\n  constructor() {\n    super();\n    this.addEventListener('focusin', this.handleFocusIn);\n    this.addEventListener('focusout', this.handleFocusOut);\n    this.addEventListener('sl-lazy-change', this.handleSlotChange);\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n\n    this.setAttribute('role', 'tree');\n    this.setAttribute('tabindex', '0');\n\n    await this.updateComplete;\n\n    this.mutationObserver = new MutationObserver(this.handleTreeChanged);\n    this.mutationObserver.observe(this, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.mutationObserver?.disconnect();\n  }\n\n  // Generates a clone of the expand icon element to use for each tree item\n  private getExpandButtonIcon(status: 'expand' | 'collapse') {\n    const slot = status === 'expand' ? this.expandedIconSlot : this.collapsedIconSlot;\n    const icon = slot.assignedElements({ flatten: true })[0] as HTMLElement;\n\n    // Clone it, remove ids, and slot it\n    if (icon) {\n      const clone = icon.cloneNode(true) as HTMLElement;\n      [clone, ...clone.querySelectorAll('[id]')].forEach(el => el.removeAttribute('id'));\n      clone.setAttribute('data-default', '');\n      clone.slot = `${status}-icon`;\n\n      return clone;\n    }\n\n    return null;\n  }\n\n  // Initializes new items by setting the `selectable` property and the expanded/collapsed icons if any\n  private initTreeItem = (item: SlTreeItem) => {\n    item.selectable = this.selection === 'multiple';\n\n    ['expand', 'collapse']\n      .filter(status => !!this.querySelector(`[slot=\"${status}-icon\"]`))\n      .forEach((status: 'expand' | 'collapse') => {\n        const existingIcon = item.querySelector(`[slot=\"${status}-icon\"]`);\n\n        const expandButtonIcon = this.getExpandButtonIcon(status);\n\n        if (!expandButtonIcon) return;\n\n        if (existingIcon === null) {\n          // No separator exists, add one\n          item.append(expandButtonIcon);\n        } else if (existingIcon.hasAttribute('data-default')) {\n          // A default separator exists, replace it\n          existingIcon.replaceWith(expandButtonIcon);\n        } else {\n          // The user provided a custom icon, leave it alone\n        }\n      });\n  };\n\n  private handleTreeChanged = (mutations: MutationRecord[]) => {\n    for (const mutation of mutations) {\n      const addedNodes: SlTreeItem[] = [...mutation.addedNodes].filter(SlTreeItem.isTreeItem) as SlTreeItem[];\n      const removedNodes = [...mutation.removedNodes].filter(SlTreeItem.isTreeItem) as SlTreeItem[];\n\n      addedNodes.forEach(this.initTreeItem);\n\n      if (this.lastFocusedItem && removedNodes.includes(this.lastFocusedItem)) {\n        this.lastFocusedItem = null;\n      }\n    }\n  };\n\n  private selectItem(selectedItem: SlTreeItem) {\n    const previousSelection = [...this.selectedItems];\n\n    if (this.selection === 'multiple') {\n      selectedItem.selected = !selectedItem.selected;\n      if (selectedItem.lazy) {\n        selectedItem.expanded = true;\n      }\n      syncCheckboxes(selectedItem);\n    } else if (this.selection === 'single' || selectedItem.isLeaf) {\n      const items = this.getAllTreeItems();\n      for (const item of items) {\n        item.selected = item === selectedItem;\n      }\n    } else if (this.selection === 'leaf') {\n      selectedItem.expanded = !selectedItem.expanded;\n    }\n\n    const nextSelection = this.selectedItems;\n\n    if (\n      previousSelection.length !== nextSelection.length ||\n      nextSelection.some(item => !previousSelection.includes(item))\n    ) {\n      // Wait for the tree items' DOM to update before emitting\n      Promise.all(nextSelection.map(el => el.updateComplete)).then(() => {\n        this.emit('sl-selection-change', { detail: { selection: nextSelection } });\n      });\n    }\n  }\n\n  private getAllTreeItems() {\n    return [...this.querySelectorAll('sl-tree-item')];\n  }\n\n  private focusItem(item?: SlTreeItem | null) {\n    item?.focus();\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Ignore key presses we aren't interested in\n    if (!['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Home', 'End', 'Enter', ' '].includes(event.key)) {\n      return;\n    }\n\n    // Ignore key presses when focus is inside a text field. This prevents the component from hijacking nested form\n    // controls that exist inside tree items.\n    if (event.composedPath().some((el: HTMLElement) => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))) {\n      return;\n    }\n\n    const items = this.getFocusableItems();\n    const isLtr = this.localize.dir() === 'ltr';\n    const isRtl = this.localize.dir() === 'rtl';\n\n    if (items.length > 0) {\n      event.preventDefault();\n      const activeItemIndex = items.findIndex(item => item.matches(':focus'));\n      const activeItem: SlTreeItem | undefined = items[activeItemIndex];\n\n      const focusItemAt = (index: number) => {\n        const item = items[clamp(index, 0, items.length - 1)];\n        this.focusItem(item);\n      };\n      const toggleExpand = (expanded: boolean) => {\n        activeItem.expanded = expanded;\n      };\n\n      if (event.key === 'ArrowDown') {\n        // Moves focus to the next node that is focusable without opening or closing a node.\n        focusItemAt(activeItemIndex + 1);\n      } else if (event.key === 'ArrowUp') {\n        // Moves focus to the next node that is focusable without opening or closing a node.\n        focusItemAt(activeItemIndex - 1);\n      } else if ((isLtr && event.key === 'ArrowRight') || (isRtl && event.key === 'ArrowLeft')) {\n        //\n        // When focus is on a closed node, opens the node; focus does not move.\n        // When focus is on a open node, moves focus to the first child node.\n        // When focus is on an end node (a tree item with no children), does nothing.\n        //\n        if (!activeItem || activeItem.disabled || activeItem.expanded || (activeItem.isLeaf && !activeItem.lazy)) {\n          focusItemAt(activeItemIndex + 1);\n        } else {\n          toggleExpand(true);\n        }\n      } else if ((isLtr && event.key === 'ArrowLeft') || (isRtl && event.key === 'ArrowRight')) {\n        //\n        // When focus is on an open node, closes the node.\n        // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.\n        // When focus is on a closed `tree`, does nothing.\n        //\n        if (!activeItem || activeItem.disabled || activeItem.isLeaf || !activeItem.expanded) {\n          focusItemAt(activeItemIndex - 1);\n        } else {\n          toggleExpand(false);\n        }\n      } else if (event.key === 'Home') {\n        // Moves focus to the first node in the tree without opening or closing a node.\n        focusItemAt(0);\n      } else if (event.key === 'End') {\n        // Moves focus to the last node in the tree that is focusable without opening the node.\n        focusItemAt(items.length - 1);\n      } else if (event.key === 'Enter' || event.key === ' ') {\n        // Selects the focused node.\n        if (!activeItem.disabled) {\n          this.selectItem(activeItem);\n        }\n      }\n    }\n  }\n\n  private handleClick(event: Event) {\n    const target = event.target as SlTreeItem;\n    const treeItem = target.closest('sl-tree-item')!;\n    const isExpandButton = event\n      .composedPath()\n      .some((el: HTMLElement) => el?.classList?.contains('tree-item__expand-button'));\n\n    //\n    // Don't Do anything if there's no tree item, if it's disabled, or if the click doesn't match the initial target\n    // from mousedown. The latter case prevents the user from starting a click on one item and ending it on another,\n    // causing the parent node to collapse.\n    //\n    // See https://github.com/shoelace-style/shoelace/issues/1082\n    //\n    if (!treeItem || treeItem.disabled || target !== this.clickTarget) {\n      return;\n    }\n\n    if (isExpandButton) {\n      treeItem.expanded = !treeItem.expanded;\n    } else {\n      this.selectItem(treeItem);\n    }\n  }\n\n  handleMouseDown(event: MouseEvent) {\n    // Record the click target so we know which item the click initially targeted\n    this.clickTarget = event.target as SlTreeItem;\n  }\n\n  private handleFocusOut = (event: FocusEvent) => {\n    const relatedTarget = event.relatedTarget as HTMLElement;\n\n    // If the element that got the focus is not in the tree\n    if (!relatedTarget || !this.contains(relatedTarget)) {\n      this.tabIndex = 0;\n    }\n  };\n\n  private handleFocusIn = (event: FocusEvent) => {\n    const target = event.target as SlTreeItem;\n\n    // If the tree has been focused, move the focus to the last focused item\n    if (event.target === this) {\n      this.focusItem(this.lastFocusedItem || this.getAllTreeItems()[0]);\n    }\n\n    // If the target is a tree item, update the tabindex\n    if (SlTreeItem.isTreeItem(target) && !target.disabled) {\n      if (this.lastFocusedItem) {\n        this.lastFocusedItem.tabIndex = -1;\n      }\n      this.lastFocusedItem = target;\n      this.tabIndex = -1;\n\n      target.tabIndex = 0;\n    }\n  };\n\n  private handleSlotChange() {\n    const items = this.getAllTreeItems();\n    items.forEach(this.initTreeItem);\n  }\n\n  @watch('selection')\n  async handleSelectionChange() {\n    const isSelectionMultiple = this.selection === 'multiple';\n    const items = this.getAllTreeItems();\n\n    this.setAttribute('aria-multiselectable', isSelectionMultiple ? 'true' : 'false');\n\n    for (const item of items) {\n      item.selectable = isSelectionMultiple;\n    }\n\n    if (isSelectionMultiple) {\n      await this.updateComplete;\n\n      [...this.querySelectorAll(':scope > sl-tree-item')].forEach((treeItem: SlTreeItem) =>\n        syncCheckboxes(treeItem, true)\n      );\n    }\n  }\n\n  /** @internal Returns the list of tree items that are selected in the tree. */\n  get selectedItems(): SlTreeItem[] {\n    const items = this.getAllTreeItems();\n    const isSelected = (item: SlTreeItem) => item.selected;\n\n    return items.filter(isSelected);\n  }\n\n  /** @internal Gets focusable tree items in the tree. */\n  getFocusableItems() {\n    const items = this.getAllTreeItems();\n    const collapsedItems = new Set();\n\n    return items.filter(item => {\n      // Exclude disabled elements\n      if (item.disabled) return false;\n\n      // Exclude those whose parent is collapsed or loading\n      const parent: SlTreeItem | null | undefined = item.parentElement?.closest('[role=treeitem]');\n      if (parent && (!parent.expanded || parent.loading || collapsedItems.has(parent))) {\n        collapsedItems.add(item);\n      }\n\n      return !collapsedItems.has(item);\n    });\n  }\n\n  render() {\n    return html`\n      \n        \n        \n        \n      \n    `;\n  }\n}\n"
  },
  {
    "path": "src/components/tree/tree.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  :host {\n    /*\n     * These are actually used by tree item, but we define them here so they can more easily be set and all tree items\n     * stay consistent.\n     */\n    --indent-guide-color: var(--sl-color-neutral-200);\n    --indent-guide-offset: 0;\n    --indent-guide-style: solid;\n    --indent-guide-width: 0;\n    --indent-size: var(--sl-spacing-large);\n\n    display: block;\n\n    /*\n     * Tree item indentation uses the \"em\" unit to increment its width on each level, so setting the font size to zero\n     * here removes the indentation for all the nodes on the first level.\n     */\n    font-size: 0;\n  }\n`;\n"
  },
  {
    "path": "src/components/tree/tree.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport { aTimeout, expect, fixture, html, triggerBlurFor, triggerFocusFor } from '@open-wc/testing';\nimport { clickOnElement } from '../../internal/test.js';\nimport { sendKeys } from '@web/test-runner-commands';\nimport sinon from 'sinon';\nimport type SlTree from './tree.component.js';\nimport type SlTreeItem from '../tree-item/tree-item.js';\n\ndescribe('', () => {\n  let el: SlTree;\n\n  beforeEach(async () => {\n    el = await fixture(html`\n      \n        Node 1\n        Node 2\n        \n          Parent Node\n          Child Node 1\n          \n            Child Node 2\n            Child Node 2 - 1\n            Child Node 2 - 2\n          \n        \n        Node 3\n      \n    `);\n  });\n\n  it('should render a component', () => {\n    expect(el).to.exist;\n    expect(el).to.have.attribute('role', 'tree');\n    expect(el).to.have.attribute('tabindex', '0');\n  });\n\n  it('should pass accessibility tests', async () => {\n    await expect(el).to.be.accessible();\n  });\n\n  it('should not focus collapsed nodes', async () => {\n    // Arrange\n    const parentNode = el.children[2] as SlTreeItem;\n    const childNode = parentNode.children[1] as SlTreeItem;\n    childNode.expanded = true;\n    parentNode.expanded = false;\n\n    await el.updateComplete;\n\n    // Act\n    const focusableItems = el.getFocusableItems();\n\n    // Assert\n    expect(focusableItems).to.have.lengthOf(4);\n    expect(focusableItems).not.to.include.all.members([childNode, ...childNode.children]);\n    expect(focusableItems).not.to.include.all.members([...parentNode.children]);\n  });\n\n  describe('when a custom expanded/collapsed icon is provided', () => {\n    beforeEach(async () => {\n      el = await fixture(html`\n        \n          
    \n          
    \n\n          Node 1\n          Node 2\n            \n      `);\n    });\n\n    it('should append a clone of the icon in the proper slot of the tree item', async () => {\n      // Arrange\n      await el.updateComplete;\n\n      // Act\n      const treeItems = [...el.querySelectorAll('sl-tree-item')];\n\n      // Assert\n      treeItems.forEach(treeItem => {\n        expect(treeItem.querySelector('div[slot=\"expand-icon\"]')).to.be.ok;\n        expect(treeItem.querySelector('div[slot=\"collapse-icon\"]')).to.be.ok;\n      });\n    });\n  });\n\n  describe('Keyboard navigation', () => {\n    describe('when ArrowDown is pressed', () => {\n      it('should move the focus to the next tree item', async () => {\n        // Arrange\n        el.focus();\n        await el.updateComplete;\n\n        // Act\n        await sendKeys({ press: 'ArrowDown' });\n\n        // Assert\n        expect(el).to.have.attribute('tabindex', '-1');\n        expect(el.children[0]).to.have.attribute('tabindex', '-1');\n        expect(el.children[1]).to.have.attribute('tabindex', '0');\n      });\n    });\n\n    describe('when ArrowUp is pressed', () => {\n      it('should move the focus to the prev tree item', async () => {\n        // Arrange\n        (el.children[1] as HTMLElement).focus();\n        await el.updateComplete;\n\n        // Act\n        await sendKeys({ press: 'ArrowUp' });\n\n        // Assert\n        expect(el).to.have.attribute('tabindex', '-1');\n        expect(el.children[0]).to.have.attribute('tabindex', '0');\n        expect(el.children[1]).to.have.attribute('tabindex', '-1');\n      });\n    });\n\n    describe('when ArrowRight is pressed', () => {\n      describe('and node is a leaf', () => {\n        it('should move the focus to the next tree item', async () => {\n          // Arrange\n          (el.children[0] as HTMLElement).focus();\n          await el.updateComplete;\n\n          // Act\n          await sendKeys({ press: 'ArrowRight' });\n\n          // Assert\n          expect(el).to.have.attribute('tabindex', '-1');\n          expect(el.children[0]).to.have.attribute('tabindex', '-1');\n          expect(el.children[1]).to.have.attribute('tabindex', '0');\n        });\n      });\n\n      describe('and node is collapsed', () => {\n        it('should expand the tree item', async () => {\n          // Arrange\n          const parentNode = el.children[2] as SlTreeItem;\n          parentNode.focus();\n          await el.updateComplete;\n\n          // Act\n          await sendKeys({ press: 'ArrowRight' });\n\n          // Assert\n          expect(el).to.have.attribute('tabindex', '-1');\n          expect(parentNode).to.have.attribute('tabindex', '0');\n          expect(parentNode).to.have.attribute('expanded');\n        });\n      });\n\n      describe('and node is expanded', () => {\n        it('should move the focus to the next tree item', async () => {\n          // Arrange\n          const parentNode = el.children[2] as SlTreeItem;\n          parentNode.expanded = true;\n          parentNode.focus();\n\n          await el.updateComplete;\n\n          // Act\n          await sendKeys({ press: 'ArrowRight' });\n\n          // Assert\n          expect(el).to.have.attribute('tabindex', '-1');\n          expect(parentNode).to.have.attribute('tabindex', '-1');\n          expect(parentNode.children[0]).to.have.attribute('tabindex', '0');\n        });\n      });\n    });\n\n    describe('when ArrowLeft is pressed', () => {\n      describe('and node is a leaf', () => {\n        it('should move the focus to the prev tree item', async () => {\n          // Arrange\n          (el.children[1] as HTMLElement).focus();\n          await el.updateComplete;\n\n          // Act\n          await sendKeys({ press: 'ArrowLeft' });\n\n          // Assert\n          expect(el).to.have.attribute('tabindex', '-1');\n          expect(el.children[0]).to.have.attribute('tabindex', '0');\n          expect(el.children[1]).to.have.attribute('tabindex', '-1');\n        });\n      });\n\n      describe('and node is collapsed', () => {\n        it('should move the focus to the prev tree item', async () => {\n          // Arrange\n          (el.children[2] as HTMLElement).focus();\n          await el.updateComplete;\n\n          // Act\n          await sendKeys({ press: 'ArrowLeft' });\n\n          // Assert\n          expect(el).to.have.attribute('tabindex', '-1');\n          expect(el.children[1]).to.have.attribute('tabindex', '0');\n          expect(el.children[2]).to.have.attribute('tabindex', '-1');\n        });\n      });\n\n      describe('and node is expanded', () => {\n        it('should collapse the tree item', async () => {\n          // Arrange\n          const parentNode = el.children[2] as SlTreeItem;\n          parentNode.expanded = true;\n          parentNode.focus();\n\n          await el.updateComplete;\n\n          // Act\n          await sendKeys({ press: 'ArrowLeft' });\n\n          // Assert\n          expect(el).to.have.attribute('tabindex', '-1');\n          expect(parentNode).to.have.attribute('tabindex', '0');\n          expect(parentNode).not.to.have.attribute('expanded');\n        });\n      });\n    });\n\n    describe('when Home is pressed', () => {\n      it('should move the focus to the first tree item in the tree', async () => {\n        // Arrange\n        const parentNode = el.children[3] as SlTreeItem;\n        parentNode.focus();\n        await el.updateComplete;\n\n        // Act\n        await sendKeys({ press: 'Home' });\n\n        // Assert\n        expect(el).to.have.attribute('tabindex', '-1');\n        expect(el.children[0]).to.have.attribute('tabindex', '0');\n        expect(el.children[3]).to.have.attribute('tabindex', '-1');\n      });\n    });\n\n    describe('when End is pressed', () => {\n      it('should move the focus to the last tree item in the tree', async () => {\n        // Arrange\n        const parentNode = el.children[0] as SlTreeItem;\n        parentNode.focus();\n        await el.updateComplete;\n\n        // Act\n        await sendKeys({ press: 'End' });\n\n        // Assert\n        expect(el).to.have.attribute('tabindex', '-1');\n        expect(el.children[0]).to.have.attribute('tabindex', '-1');\n        expect(el.children[3]).to.have.attribute('tabindex', '0');\n      });\n    });\n\n    describe('when Enter is pressed', () => {\n      describe('and selection is \"single\"', () => {\n        it('should select only one tree item', async () => {\n          // Arrange\n          el.selection = 'single';\n          const node = el.children[1] as SlTreeItem;\n          node.focus();\n          await el.updateComplete;\n\n          // Act\n          await sendKeys({ press: 'Enter' });\n          await sendKeys({ press: 'ArrowRight' });\n          await sendKeys({ press: 'Enter' });\n\n          // Assert\n          expect(el.selectedItems.length).to.eq(1);\n          expect(el.children[2]).to.have.attribute('selected');\n        });\n      });\n\n      describe('and selection is \"leaf\"', () => {\n        it('should select only one tree item', async () => {\n          // Arrange\n          el.selection = 'leaf';\n          const node = el.children[0] as SlTreeItem;\n          node.focus();\n          await el.updateComplete;\n\n          // Act\n          await sendKeys({ press: 'Enter' });\n          await sendKeys({ press: 'ArrowRight' });\n          await sendKeys({ press: 'Enter' });\n\n          // Assert\n          expect(el.selectedItems.length).to.eq(1);\n        });\n\n        it('should expand/collapse a parent node', async () => {\n          // Arrange\n          el.selection = 'leaf';\n          const parentNode = el.children[2] as SlTreeItem;\n          parentNode.focus();\n          await el.updateComplete;\n\n          // Act\n          await sendKeys({ press: 'Enter' });\n\n          // Assert\n          expect(el).to.have.attribute('tabindex', '-1');\n          expect(el.selectedItems.length).to.eq(0);\n          expect(parentNode).to.have.attribute('expanded');\n        });\n      });\n\n      describe('and selection is \"multiple\"', () => {\n        it('should toggle the selection on the tree item', async () => {\n          // Arrange\n          el.selection = 'multiple';\n          const node = el.children[1] as SlTreeItem;\n          node.focus();\n          await el.updateComplete;\n\n          // Act\n          await sendKeys({ press: 'Enter' });\n          await sendKeys({ press: 'ArrowRight' });\n          await sendKeys({ press: 'Enter' });\n\n          // Assert\n          expect(el.selectedItems.length).to.eq(6);\n        });\n      });\n    });\n\n    describe('when Space is pressed', () => {\n      describe('and selection is \"single\"', () => {\n        it('should select only one tree item', async () => {\n          // Arrange\n          el.selection = 'single';\n          const node = el.children[1] as SlTreeItem;\n          node.focus();\n          await el.updateComplete;\n\n          // Act\n          await sendKeys({ press: ' ' });\n          await sendKeys({ press: 'ArrowRight' });\n          await sendKeys({ press: ' ' });\n\n          // Assert\n          expect(el.selectedItems.length).to.eq(1);\n        });\n      });\n\n      describe('and selection is \"leaf\"', () => {\n        it('should select only one tree item', async () => {\n          // Arrange\n          el.selection = 'leaf';\n          const node = el.children[0] as SlTreeItem;\n          node.focus();\n          await el.updateComplete;\n\n          // Act\n          await sendKeys({ press: ' ' });\n          await sendKeys({ press: 'ArrowRight' });\n          await sendKeys({ press: ' ' });\n\n          // Assert\n          expect(el.selectedItems.length).to.eq(1);\n        });\n\n        it('should expand/collapse a parent node', async () => {\n          // Arrange\n          el.selection = 'leaf';\n          const parentNode = el.children[2] as SlTreeItem;\n          parentNode.focus();\n          await el.updateComplete;\n\n          // Act\n          await sendKeys({ press: ' ' });\n\n          // Assert\n          expect(el).to.have.attribute('tabindex', '-1');\n          expect(el.selectedItems.length).to.eq(0);\n          expect(parentNode).to.have.attribute('expanded');\n        });\n      });\n\n      describe('and selection is \"multiple\"', () => {\n        it('should toggle the selection on the tree item', async () => {\n          // Arrange\n          el.selection = 'multiple';\n          const node = el.children[0] as SlTreeItem;\n          node.focus();\n          await el.updateComplete;\n\n          // Act\n          await sendKeys({ press: ' ' });\n          await sendKeys({ press: 'ArrowRight' });\n          await sendKeys({ press: ' ' });\n\n          // Assert\n          expect(el.selectedItems.length).to.eq(2);\n        });\n      });\n    });\n  });\n\n  describe('Interactions', () => {\n    describe('when the tree is about to receive the focus', () => {\n      it('should set the focus to the last focused item', async () => {\n        // Arrange\n        const node = el.children[1] as SlTreeItem;\n        node.focus();\n        await el.updateComplete;\n\n        // Act\n        triggerBlurFor(node);\n        triggerFocusFor(el);\n\n        // Assert\n        expect(el).to.have.attribute('tabindex', '-1');\n        expect(node).to.have.attribute('tabindex', '0');\n      });\n    });\n\n    describe('when the user clicks the expand button', () => {\n      it('should expand the tree item', async () => {\n        // Arrange\n        el.selection = 'single';\n        await el.updateComplete;\n\n        const node = el.children[2] as SlTreeItem;\n        await node.updateComplete;\n\n        const expandButton: HTMLElement = node.shadowRoot!.querySelector('.tree-item__expand-button')!;\n\n        // Act\n        await clickOnElement(expandButton);\n        await el.updateComplete;\n\n        // Assert\n        expect(node).to.have.attribute('expanded');\n      });\n    });\n\n    describe('when the user clicks on a tree item', () => {\n      describe('and selection is \"single\"', () => {\n        it('should select only one tree item', async () => {\n          // Arrange\n          el.selection = 'single';\n          const node0 = el.children[0] as SlTreeItem;\n          const node1 = el.children[1] as SlTreeItem;\n\n          await el.updateComplete;\n\n          // Act\n          await clickOnElement(node0);\n          await el.updateComplete;\n\n          await clickOnElement(node1);\n          await el.updateComplete;\n\n          // Assert\n          expect(el.selectedItems.length).to.eq(1);\n        });\n      });\n\n      describe('and selection is \"leaf\"', () => {\n        it('should select only one tree item', async () => {\n          // Arrange\n          el.selection = 'leaf';\n          const node0 = el.children[0] as SlTreeItem;\n          const node1 = el.children[1] as SlTreeItem;\n\n          await el.updateComplete;\n\n          // Act\n          await clickOnElement(node0);\n          await el.updateComplete;\n\n          await clickOnElement(node1);\n          await el.updateComplete;\n\n          // Assert\n          expect(el.selectedItems.length).to.eq(1);\n        });\n\n        it('should expand/collapse a parent node', async () => {\n          // Arrange\n          el.selection = 'leaf';\n          const parentNode = el.children[2] as SlTreeItem;\n\n          await el.updateComplete;\n\n          // Act\n          await clickOnElement(parentNode);\n          await parentNode.updateComplete;\n\n          // Assert\n          expect(el.selectedItems.length).to.eq(0);\n          expect(parentNode).to.have.attribute('expanded');\n        });\n      });\n\n      describe('and selection is \"multiple\"', () => {\n        it('should toggle the selection on the tree item', async () => {\n          // Arrange\n          el.selection = 'multiple';\n          const node0 = el.children[0] as SlTreeItem;\n          const node1 = el.children[1] as SlTreeItem;\n\n          await el.updateComplete;\n\n          // Act\n          await clickOnElement(node0);\n          await el.updateComplete;\n\n          await clickOnElement(node1);\n          await el.updateComplete;\n\n          // Assert\n          expect(el.selectedItems.length).to.eq(2);\n        });\n\n        it('should select all the child tree items', async () => {\n          // Arrange\n          el.selection = 'multiple';\n          await el.updateComplete;\n\n          const parentNode = el.children[2] as SlTreeItem;\n\n          // Act\n          await clickOnElement(parentNode);\n          await el.updateComplete;\n\n          // Assert\n          expect(parentNode).to.have.attribute('selected');\n          expect(parentNode.indeterminate).to.be.false;\n          parentNode.getChildrenItems().forEach(child => {\n            expect(child).to.have.attribute('selected');\n          });\n        });\n\n        it('should set the indeterminate state to tree items if a child is selected', async () => {\n          // Arrange\n          el.selection = 'multiple';\n          await el.updateComplete;\n\n          const parentNode = el.children[2] as SlTreeItem;\n          const childNode = parentNode.children[0] as SlTreeItem;\n\n          // Act\n          parentNode.expanded = true;\n          await parentNode.updateComplete;\n          await aTimeout(300);\n          await clickOnElement(childNode);\n          await el.updateComplete;\n\n          // Assert\n          expect(parentNode).not.to.have.attribute('selected');\n          expect(parentNode.indeterminate).to.be.true;\n        });\n      });\n    });\n\n    describe('when selection is \"single\"', () => {\n      describe('and user clicks on same item twice', () => {\n        it('should emit `sl-selection-change` event once', async () => {\n          // Arrange\n          el.selection = 'single';\n          await el.updateComplete;\n\n          const selectedChangeSpy = sinon.spy();\n          el.addEventListener('sl-selection-change', selectedChangeSpy);\n\n          const node = el.children[0] as SlTreeItem;\n\n          // Act\n          await clickOnElement(node);\n          await el.updateComplete;\n          await clickOnElement(node);\n          await Promise.all([node.updateComplete, el.updateComplete]);\n\n          // Assert\n          expect(selectedChangeSpy).to.have.been.calledOnce;\n          expect(selectedChangeSpy.args[0][0]).to.deep.include({ detail: { selection: [node] } });\n        });\n      });\n    });\n  });\n\n  describe('when selection is \"leaf\"', () => {\n    describe('and user clicks on same leaf item twice', () => {\n      it('should emit `sl-selection-change` event once', async () => {\n        // Arrange\n        el.selection = 'leaf';\n        await el.updateComplete;\n\n        const selectedChangeSpy = sinon.spy();\n        el.addEventListener('sl-selection-change', selectedChangeSpy);\n\n        const node = el.children[0] as SlTreeItem;\n\n        // Act\n        await clickOnElement(node);\n        await el.updateComplete;\n        await clickOnElement(node);\n        await Promise.all([node.updateComplete, el.updateComplete]);\n\n        // Assert\n        expect(selectedChangeSpy).to.have.been.calledOnce;\n        expect(selectedChangeSpy.args[0][0]).to.deep.include({ detail: { selection: [node] } });\n      });\n    });\n\n    describe('and user clicks on expandable item', () => {\n      it('should not emit `sl-selection-change` event', async () => {\n        // Arrange\n        el.selection = 'leaf';\n        await el.updateComplete;\n\n        const selectedChangeSpy = sinon.spy();\n        el.addEventListener('sl-selection-change', selectedChangeSpy);\n\n        const node = el.querySelector('#expandable')!;\n\n        // Act\n        await clickOnElement(node);\n        await Promise.all([node.updateComplete, el.updateComplete]);\n\n        // Assert\n        expect(selectedChangeSpy).to.not.have.been.called;\n      });\n    });\n  });\n\n  describe('when selection is \"multiple\"', () => {\n    describe('and user clicks on same item twice', () => {\n      it('should emit `sl-selection-change` event twice', async () => {\n        // Arrange\n        el.selection = 'multiple';\n        await el.updateComplete;\n\n        const selectedChangeSpy = sinon.spy();\n        el.addEventListener('sl-selection-change', selectedChangeSpy);\n\n        const node = el.children[0] as SlTreeItem;\n\n        // Act\n        await clickOnElement(node);\n        await Promise.all([node.updateComplete, el.updateComplete]);\n        await clickOnElement(node);\n        await Promise.all([node.updateComplete, el.updateComplete]);\n\n        // Assert\n        expect(selectedChangeSpy).to.have.been.calledTwice;\n        expect(selectedChangeSpy.args[0][0]).to.deep.include({ detail: { selection: [node] } });\n        expect(selectedChangeSpy.args[1][0]).to.deep.include({ detail: { selection: [] } });\n      });\n    });\n  });\n\n  describe('Checkboxes synchronization', () => {\n    describe('when the tree gets initialized', () => {\n      describe('and a parent node is selected', () => {\n        it('should select all the nested children', async () => {\n          // Arrange\n          const tree = await fixture(html`\n            \n              \n                Parent Node\n                Child Node 1\n                \n                  Child Node 2\n                  Child Node 2 - 1\n                  Child Node 2 - 2\n                \n              \n            \n          `);\n          const treeItems = Array.from(tree.querySelectorAll('sl-tree-item'));\n\n          // Act\n          await tree.updateComplete;\n\n          // Assert\n          treeItems.forEach(treeItem => {\n            expect(treeItem).to.have.attribute('selected');\n          });\n        });\n      });\n\n      describe('and a parent node is not selected', () => {\n        describe('and all the children are selected', () => {\n          it('should select the parent node', async () => {\n            // Arrange\n            const tree = await fixture(html`\n              \n                \n                  Parent Node\n                  Child Node 1\n                  \n                    Child Node 2\n                    Child Node 2 - 1\n                    Child Node 2 - 2\n                  \n                \n              \n            `);\n            const treeItems = Array.from(tree.querySelectorAll('sl-tree-item'));\n\n            // Act\n            await tree.updateComplete;\n\n            // Assert\n            treeItems.forEach(treeItem => {\n              expect(treeItem).to.have.attribute('selected');\n            });\n            expect(treeItems[0].indeterminate).to.be.false;\n          });\n        });\n\n        describe('and some of the children are selected', () => {\n          it('should set the parent node to indeterminate state', async () => {\n            // Arrange\n            const tree = await fixture(html`\n              \n                \n                  Parent Node\n                  Child Node 1\n                  \n                    Child Node 2\n                    Child Node 2 - 1\n                    Child Node 2 - 2\n                  \n                \n              \n            `);\n            const treeItems = Array.from(tree.querySelectorAll('sl-tree-item'));\n\n            // Act\n            await tree.updateComplete;\n\n            // Assert\n            expect(treeItems[0]).not.to.have.attribute('selected');\n            expect(treeItems[0].indeterminate).to.be.true;\n            expect(treeItems[1]).to.have.attribute('selected');\n            expect(treeItems[2]).not.to.have.attribute('selected');\n            expect(treeItems[3]).not.to.have.attribute('selected');\n            expect(treeItems[4]).not.to.have.attribute('selected');\n          });\n        });\n      });\n    });\n  });\n\n  // https://github.com/shoelace-style/shoelace/issues/1916\n  it(\"Should not render 'null' if it can't find a custom icon\", async () => {\n    const tree = await fixture(html`\n      \n        \n          Item 1\n          \n           Item A \n        \n        \n          Item 2\n          Item A\n          Item B\n        \n        \n          Item 3\n          Item A\n          Item B\n        \n      \n    `);\n\n    expect(tree.textContent).to.not.includes('null');\n  });\n});\n"
  },
  {
    "path": "src/components/tree/tree.ts",
    "content": "import SlTree from './tree.component.js';\n\nexport * from './tree.component.js';\nexport default SlTree;\n\nSlTree.define('sl-tree');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-tree': SlTree;\n  }\n}\n"
  },
  {
    "path": "src/components/tree-item/tree-item.component.ts",
    "content": "import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../../internal/animate.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { html } from 'lit';\nimport { live } from 'lit/directives/live.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport { when } from 'lit/directives/when.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport ShoelaceElement from '../../internal/shoelace-element.js';\nimport SlCheckbox from '../checkbox/checkbox.component.js';\nimport SlIcon from '../icon/icon.component.js';\nimport SlSpinner from '../spinner/spinner.component.js';\nimport styles from './tree-item.styles.js';\nimport type { CSSResultGroup, PropertyValueMap } from 'lit';\n\n/**\n * @summary A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).\n * @documentation https://shoelace.style/components/tree-item\n * @status stable\n * @since 2.0\n *\n * @dependency sl-checkbox\n * @dependency sl-icon\n * @dependency sl-spinner\n *\n * @event sl-expand - Emitted when the tree item expands.\n * @event sl-after-expand - Emitted after the tree item expands and all animations are complete.\n * @event sl-collapse - Emitted when the tree item collapses.\n * @event sl-after-collapse - Emitted after the tree item collapses and all animations are complete.\n * @event sl-lazy-change - Emitted when the tree item's lazy state changes.\n * @event sl-lazy-load - Emitted when a lazy item is selected. Use this event to asynchronously load data and append\n *  items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading\n *  state and update the tree.\n *\n * @slot - The default slot.\n * @slot expand-icon - The icon to show when the tree item is expanded.\n * @slot collapse-icon - The icon to show when the tree item is collapsed.\n *\n * @csspart base - The component's base wrapper.\n * @csspart item - The tree item's container. This element wraps everything except slotted tree item children.\n * @csspart item--disabled - Applied when the tree item is disabled.\n * @csspart item--expanded - Applied when the tree item is expanded.\n * @csspart item--indeterminate - Applied when the selection is indeterminate.\n * @csspart item--selected - Applied when the tree item is selected.\n * @csspart indentation - The tree item's indentation container.\n * @csspart expand-button - The container that wraps the tree item's expand button and spinner.\n * @csspart spinner - The spinner that shows when a lazy tree item is in the loading state.\n * @csspart spinner__base - The spinner's base part.\n * @csspart label - The tree item's label.\n * @csspart children - The container that wraps the tree item's nested children.\n * @csspart checkbox - The checkbox that shows when using multiselect.\n * @csspart checkbox__base - The checkbox's exported `base` part.\n * @csspart checkbox__control - The checkbox's exported `control` part.\n * @csspart checkbox__control--checked - The checkbox's exported `control--checked` part.\n * @csspart checkbox__control--indeterminate - The checkbox's exported `control--indeterminate` part.\n * @csspart checkbox__checked-icon - The checkbox's exported `checked-icon` part.\n * @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.\n * @csspart checkbox__label - The checkbox's exported `label` part.\n */\nexport default class SlTreeItem extends ShoelaceElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n  static dependencies = {\n    'sl-checkbox': SlCheckbox,\n    'sl-icon': SlIcon,\n    'sl-spinner': SlSpinner\n  };\n\n  static isTreeItem(node: Node) {\n    return node instanceof Element && node.getAttribute('role') === 'treeitem';\n  }\n\n  private readonly localize = new LocalizeController(this);\n\n  @state() indeterminate = false;\n  @state() isLeaf = false;\n  @state() loading = false;\n  @state() selectable = false;\n\n  /** Expands the tree item. */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /** Draws the tree item in a selected state. */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /** Disables the tree item. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Enables lazy loading behavior. */\n  @property({ type: Boolean, reflect: true }) lazy = false;\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n  @query('slot[name=children]') childrenSlot: HTMLSlotElement;\n  @query('.tree-item__item') itemElement: HTMLDivElement;\n  @query('.tree-item__children') childrenContainer: HTMLDivElement;\n  @query('.tree-item__expand-button slot') expandButtonSlot: HTMLSlotElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this.setAttribute('role', 'treeitem');\n    this.setAttribute('tabindex', '-1');\n\n    if (this.isNestedItem()) {\n      this.slot = 'children';\n    }\n  }\n\n  firstUpdated() {\n    this.childrenContainer.hidden = !this.expanded;\n    this.childrenContainer.style.height = this.expanded ? 'auto' : '0';\n\n    this.isLeaf = !this.lazy && this.getChildrenItems().length === 0;\n    this.handleExpandedChange();\n  }\n\n  private async animateCollapse() {\n    this.emit('sl-collapse');\n\n    await stopAnimations(this.childrenContainer);\n\n    const { keyframes, options } = getAnimation(this, 'tree-item.collapse', { dir: this.localize.dir() });\n    await animateTo(\n      this.childrenContainer,\n      shimKeyframesHeightAuto(keyframes, this.childrenContainer.scrollHeight),\n      options\n    );\n    this.childrenContainer.hidden = true;\n\n    this.emit('sl-after-collapse');\n  }\n\n  // Checks whether the item is nested into an item\n  private isNestedItem(): boolean {\n    const parent = this.parentElement;\n    return !!parent && SlTreeItem.isTreeItem(parent);\n  }\n\n  private handleChildrenSlotChange() {\n    this.loading = false;\n    this.isLeaf = !this.lazy && this.getChildrenItems().length === 0;\n  }\n\n  protected willUpdate(changedProperties: PropertyValueMap | Map) {\n    if (changedProperties.has('selected') && !changedProperties.has('indeterminate')) {\n      this.indeterminate = false;\n    }\n  }\n\n  private async animateExpand() {\n    this.emit('sl-expand');\n\n    await stopAnimations(this.childrenContainer);\n    this.childrenContainer.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, 'tree-item.expand', { dir: this.localize.dir() });\n    await animateTo(\n      this.childrenContainer,\n      shimKeyframesHeightAuto(keyframes, this.childrenContainer.scrollHeight),\n      options\n    );\n    this.childrenContainer.style.height = 'auto';\n\n    this.emit('sl-after-expand');\n  }\n\n  @watch('loading', { waitUntilFirstUpdate: true })\n  handleLoadingChange() {\n    this.setAttribute('aria-busy', this.loading ? 'true' : 'false');\n\n    if (!this.loading) {\n      this.animateExpand();\n    }\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('expanded', { waitUntilFirstUpdate: true })\n  handleExpandedChange() {\n    if (!this.isLeaf) {\n      this.setAttribute('aria-expanded', this.expanded ? 'true' : 'false');\n    } else {\n      this.removeAttribute('aria-expanded');\n    }\n  }\n\n  @watch('expanded', { waitUntilFirstUpdate: true })\n  handleExpandAnimation() {\n    if (this.expanded) {\n      if (this.lazy) {\n        this.loading = true;\n\n        this.emit('sl-lazy-load');\n      } else {\n        this.animateExpand();\n      }\n    } else {\n      this.animateCollapse();\n    }\n  }\n\n  @watch('lazy', { waitUntilFirstUpdate: true })\n  handleLazyChange() {\n    this.emit('sl-lazy-change');\n  }\n\n  /** Gets all the nested tree items in this node. */\n  getChildrenItems({ includeDisabled = true }: { includeDisabled?: boolean } = {}): SlTreeItem[] {\n    return this.childrenSlot\n      ? ([...this.childrenSlot.assignedElements({ flatten: true })].filter(\n          (item: SlTreeItem) => SlTreeItem.isTreeItem(item) && (includeDisabled || !item.disabled)\n        ) as SlTreeItem[])\n      : [];\n  }\n\n  render() {\n    const isRtl = this.localize.dir() === 'rtl';\n    const showExpandButton = !this.loading && (!this.isLeaf || this.lazy);\n\n    return html`\n      \n        \n          
    \n\n          \n            ${when(\n              this.loading,\n              () => html`  `\n            )}\n            \n              \n            \n            \n              \n            \n          \n\n          ${when(\n            this.selectable,\n            () => html`\n              \n            `\n          )}\n\n          \n        \n\n        
    \n          \n        
    \n      \n    `;\n  }\n}\n\nsetDefaultAnimation('tree-item.expand', {\n  keyframes: [\n    { height: '0', opacity: '0', overflow: 'hidden' },\n    { height: 'auto', opacity: '1', overflow: 'hidden' }\n  ],\n  options: { duration: 250, easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)' }\n});\n\nsetDefaultAnimation('tree-item.collapse', {\n  keyframes: [\n    { height: 'auto', opacity: '1', overflow: 'hidden' },\n    { height: '0', opacity: '0', overflow: 'hidden' }\n  ],\n  options: { duration: 200, easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)' }\n});\n"
  },
  {
    "path": "src/components/tree-item/tree-item.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n    outline: 0;\n    z-index: 0;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  slot:not([name])::slotted(sl-icon) {\n    margin-inline-end: var(--sl-spacing-x-small);\n  }\n\n  .tree-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    flex-direction: column;\n    color: var(--sl-color-neutral-700);\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .tree-item__checkbox {\n    pointer-events: none;\n  }\n\n  .tree-item__expand-button,\n  .tree-item__checkbox,\n  .tree-item__label {\n    font-family: var(--sl-font-sans);\n    font-size: var(--sl-font-size-medium);\n    font-weight: var(--sl-font-weight-normal);\n    line-height: var(--sl-line-height-dense);\n    letter-spacing: var(--sl-letter-spacing-normal);\n  }\n\n  .tree-item__checkbox::part(base) {\n    display: flex;\n    align-items: center;\n  }\n\n  .tree-item__indentation {\n    display: block;\n    width: 1em;\n    flex-shrink: 0;\n  }\n\n  .tree-item__expand-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: content-box;\n    color: var(--sl-color-neutral-500);\n    padding: var(--sl-spacing-x-small);\n    width: 1rem;\n    height: 1rem;\n    flex-shrink: 0;\n    cursor: pointer;\n  }\n\n  .tree-item__expand-button {\n    transition: var(--sl-transition-medium) rotate ease;\n  }\n\n  .tree-item--expanded .tree-item__expand-button {\n    rotate: 90deg;\n  }\n\n  .tree-item--expanded.tree-item--rtl .tree-item__expand-button {\n    rotate: -90deg;\n  }\n\n  .tree-item--expanded slot[name='expand-icon'],\n  .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {\n    display: none;\n  }\n\n  .tree-item__expand-button--visible {\n    cursor: pointer;\n  }\n\n  .tree-item__item {\n    display: flex;\n    align-items: center;\n    border-inline-start: solid 3px transparent;\n  }\n\n  .tree-item--disabled .tree-item__item {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n\n  :host(:focus-visible) .tree-item__item {\n    outline: var(--sl-focus-ring);\n    outline-offset: var(--sl-focus-ring-offset);\n    z-index: 2;\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n    background-color: var(--sl-color-neutral-100);\n    border-inline-start-color: var(--sl-color-primary-600);\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item__expand-button {\n    color: var(--sl-color-neutral-600);\n  }\n\n  .tree-item__label {\n    display: flex;\n    align-items: center;\n    transition: var(--sl-transition-fast) color;\n  }\n\n  .tree-item__children {\n    display: block;\n    font-size: calc(1em + var(--indent-size, var(--sl-spacing-medium)));\n  }\n\n  /* Indentation lines */\n  .tree-item__children {\n    position: relative;\n  }\n\n  .tree-item__children::before {\n    content: '';\n    position: absolute;\n    top: var(--indent-guide-offset);\n    bottom: var(--indent-guide-offset);\n    left: calc(1em - (var(--indent-guide-width) / 2) - 1px);\n    border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n    z-index: 1;\n  }\n\n  .tree-item--rtl .tree-item__children::before {\n    left: auto;\n    right: 1em;\n  }\n\n  @media (forced-colors: active) {\n    :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n      outline: dashed 1px SelectedItem;\n    }\n  }\n`;\n"
  },
  {
    "path": "src/components/tree-item/tree-item.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';\nimport sinon from 'sinon';\nimport type SlTreeItem from './tree-item.js';\n\ndescribe('', () => {\n  let leafItem: SlTreeItem;\n  let parentItem: SlTreeItem;\n\n  beforeEach(async () => {\n    leafItem = await fixture(html` Node 1 `);\n    parentItem = await fixture(html`\n      \n        Parent Node\n        Node 1\n        Node 1\n      \n    `);\n  });\n\n  it('should render a component', () => {\n    expect(leafItem).to.exist;\n    expect(parentItem).to.exist;\n\n    expect(leafItem).to.have.attribute('role', 'treeitem');\n    expect(leafItem).to.have.attribute('aria-selected', 'false');\n    expect(leafItem).to.have.attribute('aria-disabled', 'false');\n  });\n\n  describe('when it contains child tree items', () => {\n    it('should set isLeaf to false', () => {\n      // Assert\n      expect(parentItem.isLeaf).to.be.false;\n    });\n\n    it('should show the expand button', () => {\n      // Arrange\n      const expandButton = parentItem.shadowRoot?.querySelector('.tree-item__expand-button');\n\n      // Act\n\n      // Assert\n      expect(expandButton?.childElementCount).to.be.greaterThan(0);\n    });\n\n    it('should set the aria-expanded attribute', () => {\n      expect(parentItem).to.have.attribute('aria-expanded', 'false');\n    });\n  });\n\n  describe('when the user clicks the expand button', () => {\n    describe('and the item is collapsed', () => {\n      it('should emit sl-expand and sl-after-expand events', async () => {\n        // Arrange\n        const expandSpy = sinon.spy();\n        const afterExpandSpy = sinon.spy();\n\n        parentItem.addEventListener('sl-expand', expandSpy);\n        parentItem.addEventListener('sl-after-expand', afterExpandSpy);\n\n        // Act\n        parentItem.expanded = true;\n        await waitUntil(() => expandSpy.calledOnce);\n        await waitUntil(() => afterExpandSpy.calledOnce);\n\n        // Assert\n        expect(expandSpy).to.have.been.calledOnce;\n        expect(afterExpandSpy).to.have.been.calledOnce;\n      });\n    });\n\n    describe('and the item is expanded', () => {\n      it('should emit sl-collapse and sl-after-collapse events', async () => {\n        // Arrange\n        const collapseSpy = sinon.spy();\n        const afterCollapseSpy = sinon.spy();\n\n        parentItem.addEventListener('sl-collapse', collapseSpy);\n        parentItem.addEventListener('sl-after-collapse', afterCollapseSpy);\n\n        parentItem.expanded = true;\n        await oneEvent(parentItem, 'sl-after-expand');\n\n        // Act\n        parentItem.expanded = false;\n        await waitUntil(() => collapseSpy.calledOnce);\n        await waitUntil(() => afterCollapseSpy.calledOnce);\n\n        // Assert\n        expect(collapseSpy).to.have.been.calledOnce;\n        expect(afterCollapseSpy).to.have.been.calledOnce;\n      });\n\n      describe('and the item is disabled', () => {\n        it('should not expand', async () => {\n          // Arrange\n          const expandButton: HTMLElement = parentItem.shadowRoot!.querySelector('.tree-item__expand-button')!;\n          parentItem.disabled = true;\n\n          // Act\n          expandButton.click();\n          await parentItem.updateComplete;\n\n          // Assert\n          expect(parentItem).not.to.have.attribute('expanded');\n          expect(parentItem).to.have.attribute('aria-expanded', 'false');\n        });\n      });\n    });\n  });\n\n  describe('when the item is selected', () => {\n    it('should update the aria-selected attribute', async () => {\n      // Act\n      leafItem.selected = true;\n      await leafItem.updateComplete;\n\n      // Assert\n      expect(leafItem).to.have.attribute('aria-selected', 'true');\n    });\n\n    it('should set item--selected part', async () => {\n      // Act\n      leafItem.selected = true;\n      await leafItem.updateComplete;\n\n      // Assert\n      expect(leafItem.shadowRoot?.querySelector('.tree-item__item')?.part.contains('item--selected')).to.be.true;\n    });\n  });\n\n  describe('when the item is disabled', () => {\n    it('should update the aria-disabled attribute', async () => {\n      // Act\n      leafItem.disabled = true;\n      await leafItem.updateComplete;\n\n      // Assert\n      expect(leafItem).to.have.attribute('aria-disabled', 'true');\n    });\n\n    it('should set item--disabled part', async () => {\n      // Act\n      leafItem.disabled = true;\n      await leafItem.updateComplete;\n\n      // Assert\n      expect(leafItem.shadowRoot?.querySelector('.tree-item__item')?.part.contains('item--disabled')).to.be.true;\n    });\n  });\n\n  describe('when the item is expanded', () => {\n    it('should set item--expanded part', async () => {\n      // Act\n      leafItem.expanded = true;\n      await leafItem.updateComplete;\n\n      // Assert\n      expect(leafItem.shadowRoot?.querySelector('.tree-item__item')?.part.contains('item--expanded')).to.be.true;\n    });\n  });\n\n  describe('when the item is lazy', () => {\n    it('should emit sl-lazy-change when the lazy attribute is added and removed', async () => {\n      // Arrange\n      const lazyChangeSpy = sinon.spy();\n\n      parentItem.addEventListener('sl-lazy-change', lazyChangeSpy);\n      parentItem.lazy = true;\n\n      // Act\n      await waitUntil(() => lazyChangeSpy.calledOnce);\n      parentItem.lazy = false;\n      await waitUntil(() => lazyChangeSpy.calledOnce);\n\n      // Assert\n      expect(lazyChangeSpy).to.have.been.calledTwice;\n    });\n  });\n});\n"
  },
  {
    "path": "src/components/tree-item/tree-item.ts",
    "content": "import SlTreeItem from './tree-item.component.js';\n\nexport * from './tree-item.component.js';\nexport default SlTreeItem;\n\nSlTreeItem.define('sl-tree-item');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-tree-item': SlTreeItem;\n  }\n}\n"
  },
  {
    "path": "src/components/visually-hidden/visually-hidden.component.ts",
    "content": "import { html } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\nimport ShoelaceElement from '../../internal/shoelace-element.js';\nimport styles from './visually-hidden.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.\n * @documentation https://shoelace.style/components/visually-hidden\n * @status stable\n * @since 2.0\n *\n * @slot - The content to be visually hidden.\n */\nexport default class SlVisuallyHidden extends ShoelaceElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  render() {\n    return html`  `;\n  }\n}\n"
  },
  {
    "path": "src/components/visually-hidden/visually-hidden.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  :host(:not(:focus-within)) {\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    clip: rect(0 0 0 0) !important;\n    clip-path: inset(50%) !important;\n    border: none !important;\n    overflow: hidden !important;\n    white-space: nowrap !important;\n    padding: 0 !important;\n  }\n`;\n"
  },
  {
    "path": "src/components/visually-hidden/visually-hidden.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport { expect, fixture, html } from '@open-wc/testing';\n\ndescribe('', () => {\n  it('should render but not display visually hidden content', async () => {\n    const el = await fixture(html`\n      \n        
    Skip to main content\n      \n    `);\n\n    const { width, height, overflow, clipPath } = getComputedStyle(el);\n\n    expect(width).to.equal('1px');\n    expect(height).to.equal('1px');\n    expect(overflow).to.equal('hidden');\n    expect(clipPath).to.equal('inset(50%)');\n  });\n\n  // should show visually hidden content when focused\n  it('should show visually hidden content when focused', async () => {\n    const el = await fixture(html`\n      \n        Skip to main content\n      \n    `);\n\n    const a = el.querySelector('a')!;\n    a.focus();\n\n    const { width, height, overflow, clipPath } = getComputedStyle(el);\n\n    expect(width).not.to.equal('1px');\n    expect(height).not.to.equal('1px');\n    expect(overflow).not.to.equal('hidden');\n    expect(clipPath).not.to.equal('inset(50%)');\n  });\n});\n"
  },
  {
    "path": "src/components/visually-hidden/visually-hidden.ts",
    "content": "import SlVisuallyHidden from './visually-hidden.component.js';\n\nexport * from './visually-hidden.component.js';\nexport default SlVisuallyHidden;\n\nSlVisuallyHidden.define('sl-visually-hidden');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sl-visually-hidden': SlVisuallyHidden;\n  }\n}\n"
  },
  {
    "path": "src/declaration.d.ts",
    "content": "declare module '*.css' {\n  const styles: string;\n  export default styles;\n}\n\ndeclare namespace Chai {\n  interface Assertion {\n    // chai-a11y-axe returns a promise-like object and should be awaited but the types are incorrect\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    accessible: (options?: Object) => PromiseLike;\n  }\n}\n\ninterface HTMLInputElement {\n  showPicker: () => void;\n}\n\n/* eslint-disable */\ninterface CloseWatcher extends EventTarget {\n  new (options?: CloseWatcherOptions): CloseWatcher;\n  requestClose(): void;\n  close(): void;\n  destroy(): void;\n\n  oncancel: (event: Event) => void | null;\n  onclose: (event: Event) => void | null;\n}\n\ndeclare const CloseWatcher: CloseWatcher;\n\ninterface CloseWatcherOptions {\n  signal: AbortSignal;\n}\n\ndeclare interface Window {\n  CloseWatcher?: CloseWatcher;\n}\n/* eslint-enable */\n"
  },
  {
    "path": "src/events/events.ts",
    "content": "export type { SlAfterCollapseEvent } from './sl-after-collapse.js';\nexport type { SlAfterExpandEvent } from './sl-after-expand.js';\nexport type { SlAfterHideEvent } from './sl-after-hide.js';\nexport type { SlAfterShowEvent } from './sl-after-show.js';\nexport type { SlBlurEvent } from './sl-blur.js';\nexport type { SlCancelEvent } from './sl-cancel.js';\nexport type { SlChangeEvent } from './sl-change.js';\nexport type { SlClearEvent } from './sl-clear.js';\nexport type { SlCloseEvent } from './sl-close.js';\nexport type { SlCollapseEvent } from './sl-collapse.js';\nexport type { SlCopyEvent } from './sl-copy.js';\nexport type { SlErrorEvent } from './sl-error.js';\nexport type { SlExpandEvent } from './sl-expand.js';\nexport type { SlFinishEvent } from './sl-finish.js';\nexport type { SlFocusEvent } from './sl-focus.js';\nexport type { SlHideEvent } from './sl-hide.js';\nexport type { SlHoverEvent } from './sl-hover.js';\nexport type { SlInitialFocusEvent } from './sl-initial-focus.js';\nexport type { SlInputEvent } from './sl-input.js';\nexport type { SlInvalidEvent } from './sl-invalid.js';\nexport type { SlLazyChangeEvent } from './sl-lazy-change.js';\nexport type { SlLazyLoadEvent } from './sl-lazy-load.js';\nexport type { SlLoadEvent } from './sl-load.js';\nexport type { SlMutationEvent } from './sl-mutation.js';\nexport type { SlRemoveEvent } from './sl-remove.js';\nexport type { SlRepositionEvent } from './sl-reposition.js';\nexport type { SlRequestCloseEvent } from './sl-request-close.js';\nexport type { SlResizeEvent } from './sl-resize.js';\nexport type { SlSelectEvent } from './sl-select.js';\nexport type { SlSelectionChangeEvent } from './sl-selection-change.js';\nexport type { SlShowEvent } from './sl-show.js';\nexport type { SlSlideChangeEvent } from './sl-slide-change.js';\nexport type { SlStartEvent } from './sl-start.js';\nexport type { SlTabHideEvent } from './sl-tab-hide.js';\nexport type { SlTabShowEvent } from './sl-tab-show.js';\n"
  },
  {
    "path": "src/events/sl-after-collapse.ts",
    "content": "export type SlAfterCollapseEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-after-collapse': SlAfterCollapseEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-after-expand.ts",
    "content": "export type SlAfterExpandEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-after-expand': SlAfterExpandEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-after-hide.ts",
    "content": "export type SlAfterHideEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-after-hide': SlAfterHideEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-after-show.ts",
    "content": "export type SlAfterShowEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-after-show': SlAfterShowEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-blur.ts",
    "content": "export type SlBlurEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-blur': SlBlurEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-cancel.ts",
    "content": "export type SlCancelEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-cancel': SlCancelEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-change.ts",
    "content": "export type SlChangeEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-change': SlChangeEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-clear.ts",
    "content": "export type SlClearEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-clear': SlClearEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-close.ts",
    "content": "export type SlCloseEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-close': SlCloseEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-collapse.ts",
    "content": "export type SlCollapseEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-collapse': SlCollapseEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-copy.ts",
    "content": "export type SlCopyEvent = CustomEvent<{ value: string }>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-copy': SlCopyEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-error.ts",
    "content": "export type SlErrorEvent = CustomEvent<{ status?: number }>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-error': SlErrorEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-expand.ts",
    "content": "export type SlExpandEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-expand': SlExpandEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-finish.ts",
    "content": "export type SlFinishEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-finish': SlFinishEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-focus.ts",
    "content": "export type SlFocusEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-focus': SlFocusEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-hide.ts",
    "content": "export type SlHideEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-hide': SlHideEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-hover.ts",
    "content": "export type SlHoverEvent = CustomEvent<{\n  phase: 'start' | 'move' | 'end';\n  value: number;\n}>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-hover': SlHoverEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-initial-focus.ts",
    "content": "export type SlInitialFocusEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-initial-focus': SlInitialFocusEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-input.ts",
    "content": "export type SlInputEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-input': SlInputEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-invalid.ts",
    "content": "export type SlInvalidEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-invalid': SlInvalidEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-lazy-change.ts",
    "content": "export type SlLazyChangeEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-lazy-change': SlLazyChangeEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-lazy-load.ts",
    "content": "export type SlLazyLoadEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-lazy-load': SlLazyLoadEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-load.ts",
    "content": "export type SlLoadEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-load': SlLoadEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-mutation.ts",
    "content": "export type SlMutationEvent = CustomEvent<{ mutationList: MutationRecord[] }>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-mutation': SlMutationEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-remove.ts",
    "content": "export type SlRemoveEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-remove': SlRemoveEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-reposition.ts",
    "content": "export type SlRepositionEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-reposition': SlRepositionEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-request-close.ts",
    "content": "export type SlRequestCloseEvent = CustomEvent<{ source: 'close-button' | 'keyboard' | 'overlay' }>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-request-close': SlRequestCloseEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-resize.ts",
    "content": "export type SlResizeEvent = CustomEvent<{ entries: ResizeObserverEntry[] }>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-resize': SlResizeEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-select.ts",
    "content": "import type SlMenuItem from '../components/menu-item/menu-item.js';\n\nexport type SlSelectEvent = CustomEvent<{ item: SlMenuItem }>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-select': SlSelectEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-selection-change.ts",
    "content": "import type SlTreeItem from '../components/tree-item/tree-item.js';\n\nexport type SlSelectionChangeEvent = CustomEvent<{ selection: SlTreeItem[] }>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-selection-change': SlSelectionChangeEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-show.ts",
    "content": "export type SlShowEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-show': SlShowEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-slide-change.ts",
    "content": "import type SlCarouselItem from '../components/carousel-item/carousel-item.js';\n\nexport type SlSlideChangeEvent = CustomEvent<{ index: number; slide: SlCarouselItem }>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-slide-change': SlSlideChangeEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-start.ts",
    "content": "export type SlStartEvent = CustomEvent>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-start': SlStartEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-tab-hide.ts",
    "content": "export type SlTabHideEvent = CustomEvent<{ name: string }>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-tab-hide': SlTabHideEvent;\n  }\n}\n"
  },
  {
    "path": "src/events/sl-tab-show.ts",
    "content": "export type SlTabShowEvent = CustomEvent<{ name: string }>;\n\ndeclare global {\n  interface GlobalEventHandlersEventMap {\n    'sl-tab-show': SlTabShowEvent;\n  }\n}\n"
  },
  {
    "path": "src/internal/active-elements.ts",
    "content": "/**\n * Use a generator so we can iterate and possibly break early.\n * @example\n *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.\n *   const allActiveElements = [...activeElements()]\n *\n *   // Early return\n *   for (const activeElement of activeElements()) {\n *     if () {\n *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!\n *     }\n *   }\n */\nexport function* activeElements(activeElement: Element | null = document.activeElement): Generator {\n  if (activeElement === null || activeElement === undefined) return;\n\n  yield activeElement;\n\n  if ('shadowRoot' in activeElement && activeElement.shadowRoot && activeElement.shadowRoot.mode !== 'closed') {\n    yield* activeElements(activeElement.shadowRoot.activeElement);\n  }\n}\n\nexport function getDeepestActiveElement() {\n  return [...activeElements()].pop();\n}\n"
  },
  {
    "path": "src/internal/animate.ts",
    "content": "/**\n * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.\n */\nexport function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions) {\n  return new Promise(resolve => {\n    if (options?.duration === Infinity) {\n      throw new Error('Promise-based animations must be finite.');\n    }\n\n    const animation = el.animate(keyframes, {\n      ...options,\n      duration: prefersReducedMotion() ? 0 : options!.duration\n    });\n\n    animation.addEventListener('cancel', resolve, { once: true });\n    animation.addEventListener('finish', resolve, { once: true });\n  });\n}\n\n/** Parses a CSS duration and returns the number of milliseconds. */\nexport function parseDuration(delay: number | string) {\n  delay = delay.toString().toLowerCase();\n\n  if (delay.indexOf('ms') > -1) {\n    return parseFloat(delay);\n  }\n\n  if (delay.indexOf('s') > -1) {\n    return parseFloat(delay) * 1000;\n  }\n\n  return parseFloat(delay);\n}\n\n/** Tells if the user has enabled the \"reduced motion\" setting in their browser or OS. */\nexport function prefersReducedMotion() {\n  const query = window.matchMedia('(prefers-reduced-motion: reduce)');\n  return query.matches;\n}\n\n/**\n * Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.\n */\nexport function stopAnimations(el: HTMLElement) {\n  return Promise.all(\n    el.getAnimations().map(animation => {\n      return new Promise(resolve => {\n        animation.cancel();\n        requestAnimationFrame(resolve);\n      });\n    })\n  );\n}\n\n/**\n * We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the\n * element's scrollHeight before the animation.\n */\nexport function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number) {\n  return keyframes.map(keyframe => ({\n    ...keyframe,\n    height: keyframe.height === 'auto' ? `${calculatedHeight}px` : keyframe.height\n  }));\n}\n"
  },
  {
    "path": "src/internal/closeActiveElement.ts",
    "content": "/**\n * Calls the blur method on the current active element if it is a child of the provided element.\n * Needed for fixing a11y errors in console.\n * @see https://github.com/shoelace-style/shoelace/issues/2283\n * @param elm The element to check\n */\nexport const blurActiveElement = (elm: HTMLElement) => {\n  const { activeElement } = document;\n  if (activeElement && elm.contains(activeElement)) {\n    (document.activeElement as HTMLElement)?.blur();\n  }\n};\n"
  },
  {
    "path": "src/internal/debounce.ts",
    "content": "// @debounce decorator\n//\n// Delays the execution until the provided delay in milliseconds has\n// passed since the last time the function has been called.\n//\n//\n// Usage:\n//\n//  @debounce(1000)\n//  handleInput() {\n//    ...\n//  }\n//\n\n// Each class instance will need to store its timer id, so this unique symbol will be used as property key.\nconst TIMER_ID_KEY = Symbol();\n\nexport const debounce = (delay: number) => {\n  return (_target: T, _propertyKey: string, descriptor: PropertyDescriptor) => {\n    const fn = descriptor.value as (this: T & { [TIMER_ID_KEY]: number }, ...args: unknown[]) => unknown;\n\n    descriptor.value = function (this: ThisParameterType, ...args: Parameters) {\n      clearTimeout(this[TIMER_ID_KEY]);\n\n      this[TIMER_ID_KEY] = window.setTimeout(() => {\n        fn.apply(this, args);\n      }, delay);\n    };\n  };\n};\n"
  },
  {
    "path": "src/internal/default-value.ts",
    "content": "// @defaultValue decorator\n//\n// Runs when the corresponding attribute of the observed property changes, e.g. after calling Element.setAttribute or after updating\n// the observed property.\n//\n// The decorator checks whether the value of the attribute is different from the value of the property and in that case\n// it saves the new value.\n//\n//\n// Usage:\n//\n//  @property({ type: Boolean, reflect: true }) checked = false;\n//\n//  @defaultValue('checked') defaultChecked = false;\n//\n\nimport { defaultConverter } from 'lit';\nimport type { ReactiveElement } from 'lit';\n\nexport const defaultValue =\n  (propertyName = 'value') =>\n  (proto: ReactiveElement, key: string) => {\n    const ctor = proto.constructor as typeof ReactiveElement;\n\n    const attributeChangedCallback = ctor.prototype.attributeChangedCallback;\n    ctor.prototype.attributeChangedCallback = function (\n      this: ReactiveElement & { [name: string]: unknown },\n      name,\n      old,\n      value\n    ) {\n      const options = ctor.getPropertyOptions(propertyName);\n      const attributeName = typeof options.attribute === 'string' ? options.attribute : propertyName;\n\n      if (name === attributeName) {\n        const converter = options.converter || defaultConverter;\n        const fromAttribute =\n          typeof converter === 'function' ? converter : (converter?.fromAttribute ?? defaultConverter.fromAttribute);\n\n        const newValue: unknown = fromAttribute!(value, options.type);\n\n        if (this[propertyName] !== newValue) {\n          this[key] = newValue;\n        }\n      }\n\n      attributeChangedCallback.call(this, name, old, value);\n    };\n  };\n"
  },
  {
    "path": "src/internal/drag.ts",
    "content": "interface DragOptions {\n  /** Callback that runs as dragging occurs. */\n  onMove: (x: number, y: number) => void;\n  /** Callback that runs when dragging stops. */\n  onStop: () => void;\n  /**\n   * When an initial event is passed, the first drag will be triggered immediately using the coordinates therein. This\n   * is useful when the drag is initiated by a mousedown/touchstart event but you want the initial \"click\" to activate\n   * a drag (e.g. positioning a handle initially at the click target).\n   */\n  initialEvent: PointerEvent;\n}\n\n/** Begins listening for dragging. */\nexport function drag(container: HTMLElement, options?: Partial) {\n  function move(pointerEvent: PointerEvent) {\n    const dims = container.getBoundingClientRect();\n    const defaultView = container.ownerDocument.defaultView!;\n    const offsetX = dims.left + defaultView.scrollX;\n    const offsetY = dims.top + defaultView.scrollY;\n    const x = pointerEvent.pageX - offsetX;\n    const y = pointerEvent.pageY - offsetY;\n\n    if (options?.onMove) {\n      options.onMove(x, y);\n    }\n  }\n\n  function stop() {\n    document.removeEventListener('pointermove', move);\n    document.removeEventListener('pointerup', stop);\n\n    if (options?.onStop) {\n      options.onStop();\n    }\n  }\n\n  document.addEventListener('pointermove', move, { passive: true });\n  document.addEventListener('pointerup', stop);\n\n  // If an initial event is set, trigger the first drag immediately\n  if (options?.initialEvent instanceof PointerEvent) {\n    move(options.initialEvent);\n  }\n}\n"
  },
  {
    "path": "src/internal/event.ts",
    "content": "/** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */\nexport function waitForEvent(el: HTMLElement, eventName: string) {\n  return new Promise(resolve => {\n    function done(event: Event) {\n      if (event.target === el) {\n        el.removeEventListener(eventName, done);\n        resolve();\n      }\n    }\n\n    el.addEventListener(eventName, done);\n  });\n}\n"
  },
  {
    "path": "src/internal/form.test.ts",
    "content": "import '../../../dist/shoelace.js';\nimport sinon from 'sinon';\n\nimport { expect, fixture, html, waitUntil } from '@open-wc/testing';\n\n// Reproduction of this issue: https://github.com/shoelace-style/shoelace/issues/1703\nit('Should still run form validations if an element is removed', async () => {\n  const form = await fixture(html`\n    
    \n      \n      \n    
    \n  `);\n\n  expect(form.checkValidity()).to.equal(false);\n  expect(form.reportValidity()).to.equal(false);\n\n  form.querySelector('sl-input')!.remove();\n\n  expect(form.checkValidity()).to.equal(false);\n  expect(form.reportValidity()).to.equal(false);\n});\n\nit('should submit the correct form values', async () => {\n  const form = await fixture(html`\n    
    \n      \n      \n      \n      Submit\n    
    \n  `);\n\n  const button = form.querySelector('sl-button')!;\n  const submitHandler = sinon.spy((event: SubmitEvent) => {\n    formData = new FormData(form);\n    event.preventDefault();\n  });\n  let formData: FormData;\n\n  form.addEventListener('submit', submitHandler);\n  button.click();\n\n  await waitUntil(() => submitHandler.calledOnce);\n\n  expect(formData!.get('a')).to.equal('1');\n  expect(formData!.get('b')).to.equal('2');\n  expect(formData!.get('c')).to.equal('3');\n});\n\nit('should submit the correct form values when form controls are removed from the DOM', async () => {\n  const form = await fixture(html`\n    
    \n      \n      \n      \n      Submit\n    
    \n  `);\n\n  const button = form.querySelector('sl-button')!;\n  const submitHandler = sinon.spy((event: SubmitEvent) => {\n    formData = new FormData(form);\n    event.preventDefault();\n  });\n  let formData: FormData;\n\n  form.addEventListener('submit', submitHandler);\n  form.querySelector('[name=\"b\"]')!.remove();\n\n  button.click();\n\n  await waitUntil(() => submitHandler.calledOnce);\n\n  expect(formData!.get('a')).to.equal('1');\n  expect(formData!.get('b')).to.equal(null);\n  expect(formData!.get('c')).to.equal('3');\n});\n"
  },
  {
    "path": "src/internal/form.ts",
    "content": "import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { ShoelaceFormControl } from '../internal/shoelace-element.js';\nimport type SlButton from '../components/button/button.js';\n\n//\n// We store a WeakMap of forms + controls so we can keep references to all Shoelace controls within a given form. As\n// elements connect and disconnect to/from the DOM, their containing form is used as the key and the form control is\n// added and removed from the form's set, respectively.\n//\nexport const formCollections: WeakMap> = new WeakMap();\n\n//\n// We store a WeakMap of reportValidity() overloads so we can override it when form controls connect to the DOM and\n// restore the original behavior when they disconnect.\n//\nconst reportValidityOverloads: WeakMap boolean> = new WeakMap();\nconst checkValidityOverloads: WeakMap boolean> = new WeakMap();\n\n//\n// We store a Set of controls that users have interacted with. This allows us to determine the interaction state\n// without littering the DOM with additional data attributes.\n//\nconst userInteractedControls: WeakSet = new WeakSet();\n\n//\n// We store a WeakMap of interactions for each form control so we can track when all conditions are met for validation.\n//\nconst interactions = new WeakMap();\n\nexport interface FormControlControllerOptions {\n  /** A function that returns the form containing the form control. */\n  form: (input: ShoelaceFormControl) => HTMLFormElement | null;\n  /** A function that returns the form control's name, which will be submitted with the form data. */\n  name: (input: ShoelaceFormControl) => string;\n  /** A function that returns the form control's current value. */\n  value: (input: ShoelaceFormControl) => unknown | unknown[];\n  /** A function that returns the form control's default value. */\n  defaultValue: (input: ShoelaceFormControl) => unknown | unknown[];\n  /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */\n  disabled: (input: ShoelaceFormControl) => boolean;\n  /**\n   * A function that maps to the form control's reportValidity() function. When the control is invalid, this will\n   * prevent submission and trigger the browser's constraint violation warning.\n   */\n  reportValidity: (input: ShoelaceFormControl) => boolean;\n\n  /**\n   * A function that maps to the form control's `checkValidity()` function. When the control is invalid, this will return false.\n   *   this is helpful is you want to check validation without triggering the native browser constraint violation warning.\n   */\n  checkValidity: (input: ShoelaceFormControl) => boolean;\n  /** A function that sets the form control's value */\n  setValue: (input: ShoelaceFormControl, value: unknown) => void;\n  /**\n   * An array of event names to listen to. When all events in the list are emitted, the control will receive validity\n   * states such as user-valid and user-invalid.user interacted validity states. */\n  assumeInteractionOn: string[];\n}\n\n/** A reactive controller to allow form controls to participate in form submission, validation, etc. */\nexport class FormControlController implements ReactiveController {\n  host: ShoelaceFormControl & ReactiveControllerHost;\n  form?: HTMLFormElement | null;\n  options: FormControlControllerOptions;\n\n  constructor(host: ReactiveControllerHost & ShoelaceFormControl, options?: Partial) {\n    (this.host = host).addController(this);\n    this.options = {\n      form: input => {\n        // If there's a form attribute, use it to find the target form by id\n        // Controls may not always reflect the 'form' property. For example, `` doesn't reflect.\n        const formId = input.form;\n\n        if (formId) {\n          const root = input.getRootNode() as Document | ShadowRoot | HTMLElement;\n          const form = root.querySelector(`#${formId}`);\n\n          if (form) {\n            return form as HTMLFormElement;\n          }\n        }\n\n        return input.closest('form');\n      },\n      name: input => input.name,\n      value: input => input.value,\n      defaultValue: input => input.defaultValue,\n      disabled: input => input.disabled ?? false,\n      reportValidity: input => (typeof input.reportValidity === 'function' ? input.reportValidity() : true),\n      checkValidity: input => (typeof input.checkValidity === 'function' ? input.checkValidity() : true),\n      setValue: (input, value: string) => (input.value = value),\n      assumeInteractionOn: ['sl-input'],\n      ...options\n    };\n  }\n\n  hostConnected() {\n    const form = this.options.form(this.host);\n\n    if (form) {\n      this.attachForm(form);\n    }\n\n    // Listen for interactions\n    interactions.set(this.host, []);\n    this.options.assumeInteractionOn.forEach(event => {\n      this.host.addEventListener(event, this.handleInteraction);\n    });\n  }\n\n  hostDisconnected() {\n    this.detachForm();\n\n    // Clean up interactions\n    interactions.delete(this.host);\n    this.options.assumeInteractionOn.forEach(event => {\n      this.host.removeEventListener(event, this.handleInteraction);\n    });\n  }\n\n  hostUpdated() {\n    const form = this.options.form(this.host);\n\n    // Detach if the form no longer exists\n    if (!form) {\n      this.detachForm();\n    }\n\n    // If the form has changed, reattach it\n    if (form && this.form !== form) {\n      this.detachForm();\n      this.attachForm(form);\n    }\n\n    if (this.host.hasUpdated) {\n      this.setValidity(this.host.validity.valid);\n    }\n  }\n\n  private attachForm(form?: HTMLFormElement) {\n    if (form) {\n      this.form = form;\n\n      // Add this element to the form's collection\n      if (formCollections.has(this.form)) {\n        formCollections.get(this.form)!.add(this.host);\n      } else {\n        formCollections.set(this.form, new Set([this.host]));\n      }\n\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n      this.form.addEventListener('reset', this.handleFormReset);\n\n      // Overload the form's reportValidity() method so it looks at Shoelace form controls\n      if (!reportValidityOverloads.has(this.form)) {\n        reportValidityOverloads.set(this.form, this.form.reportValidity);\n        this.form.reportValidity = () => this.reportFormValidity();\n      }\n\n      // Overload the form's checkValidity() method so it looks at Shoelace form controls\n      if (!checkValidityOverloads.has(this.form)) {\n        checkValidityOverloads.set(this.form, this.form.checkValidity);\n        this.form.checkValidity = () => this.checkFormValidity();\n      }\n    } else {\n      this.form = undefined;\n    }\n  }\n\n  private detachForm() {\n    if (!this.form) return;\n\n    const formCollection = formCollections.get(this.form);\n\n    if (!formCollection) {\n      return;\n    }\n\n    // Remove this host from the form's collection\n    formCollection.delete(this.host);\n\n    // Check to make sure there's no other form controls in the collection. If we do this\n    // without checking if any other controls are still in the collection, then we will wipe out the\n    // validity checks for all other elements.\n    // see: https://github.com/shoelace-style/shoelace/issues/1703\n    if (formCollection.size <= 0) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form.removeEventListener('reset', this.handleFormReset);\n\n      // Remove the overload and restore the original method\n      if (reportValidityOverloads.has(this.form)) {\n        this.form.reportValidity = reportValidityOverloads.get(this.form)!;\n        reportValidityOverloads.delete(this.form);\n      }\n\n      if (checkValidityOverloads.has(this.form)) {\n        this.form.checkValidity = checkValidityOverloads.get(this.form)!;\n        checkValidityOverloads.delete(this.form);\n      }\n\n      // So it looks weird here to not always set the form to undefined. But I _think_ if we unattach this.form here,\n      // we end up in this fun spot where future validity checks don't have a reference to the form validity handler.\n      // First form element in sets the validity handler. So we can't clean up `this.form` until there are no other form elements in the form.\n      this.form = undefined;\n    }\n  }\n\n  private handleFormData = (event: FormDataEvent) => {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    // For buttons, we only submit the value if they were the submitter. This is currently done in doAction() by\n    // injecting the name/value on a temporary button, so we can just skip them here.\n    const isButton = this.host.tagName.toLowerCase() === 'sl-button';\n\n    if (\n      this.host.isConnected &&\n      !disabled &&\n      !isButton &&\n      typeof name === 'string' &&\n      name.length > 0 &&\n      typeof value !== 'undefined'\n    ) {\n      if (Array.isArray(value)) {\n        (value as unknown[]).forEach(val => {\n          event.formData.append(name, (val as string | number | boolean).toString());\n        });\n      } else {\n        event.formData.append(name, (value as string | number | boolean).toString());\n      }\n    }\n  };\n\n  private handleFormSubmit = (event: Event) => {\n    const disabled = this.options.disabled(this.host);\n    const reportValidity = this.options.reportValidity;\n\n    // Update the interacted state for all controls when the form is submitted\n    if (this.form && !this.form.noValidate) {\n      formCollections.get(this.form)?.forEach(control => {\n        this.setUserInteracted(control, true);\n      });\n    }\n\n    if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  };\n\n  private handleFormReset = () => {\n    this.options.setValue(this.host, this.options.defaultValue(this.host));\n    this.setUserInteracted(this.host, false);\n    interactions.set(this.host, []);\n  };\n\n  private handleInteraction = (event: Event) => {\n    const emittedEvents = interactions.get(this.host)!;\n\n    if (!emittedEvents.includes(event.type)) {\n      emittedEvents.push(event.type);\n    }\n\n    // Mark it as user-interacted as soon as all associated events have been emitted\n    if (emittedEvents.length === this.options.assumeInteractionOn.length) {\n      this.setUserInteracted(this.host, true);\n    }\n  };\n\n  private checkFormValidity = () => {\n    //\n    // This is very similar to the `reportFormValidity` function, but it does not trigger native constraint validation\n    // Allow the user to simply check if the form is valid and handling validity in their own way.\n    //\n    // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger\n    // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't\n    // be necessary once we can use ElementInternals.\n    //\n    // Note that we're also honoring the form's novalidate attribute.\n    //\n    if (this.form && !this.form.noValidate) {\n      // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom\n      // elements that support the constraint validation API.\n      const elements = this.form.querySelectorAll('*');\n\n      for (const element of elements) {\n        if (typeof element.checkValidity === 'function') {\n          if (!element.checkValidity()) {\n            return false;\n          }\n        }\n      }\n    }\n\n    return true;\n  };\n\n  private reportFormValidity = () => {\n    //\n    // Shoelace form controls work hard to act like regular form controls. They support the Constraint Validation API\n    // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also\n    // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using\n    // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.\n    //\n    // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger\n    // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't\n    // be necessary once we can use ElementInternals.\n    //\n    // Note that we're also honoring the form's novalidate attribute.\n    //\n    if (this.form && !this.form.noValidate) {\n      // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom\n      // elements that support the constraint validation API.\n      const elements = this.form.querySelectorAll('*');\n\n      for (const element of elements) {\n        if (typeof element.reportValidity === 'function') {\n          if (!element.reportValidity()) {\n            return false;\n          }\n        }\n      }\n    }\n\n    return true;\n  };\n\n  private setUserInteracted(el: ShoelaceFormControl, hasInteracted: boolean) {\n    if (hasInteracted) {\n      userInteractedControls.add(el);\n    } else {\n      userInteractedControls.delete(el);\n    }\n\n    el.requestUpdate();\n  }\n\n  private doAction(type: 'submit' | 'reset', submitter?: HTMLInputElement | SlButton) {\n    if (this.form) {\n      const button = document.createElement('button');\n      button.type = type;\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n\n      // Pass name, value, and form attributes through to the temporary button\n      if (submitter) {\n        button.name = submitter.name;\n        button.value = submitter.value;\n\n        ['formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget'].forEach(attr => {\n          if (submitter.hasAttribute(attr)) {\n            button.setAttribute(attr, submitter.getAttribute(attr)!);\n          }\n        });\n      }\n\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n\n  /** Returns the associated `
    ` element, if one exists. */\n  getForm() {\n    return this.form ?? null;\n  }\n\n  /** Resets the form, restoring all the control to their default value */\n  reset(submitter?: HTMLInputElement | SlButton) {\n    this.doAction('reset', submitter);\n  }\n\n  /** Submits the form, triggering validation and form data injection. */\n  submit(submitter?: HTMLInputElement | SlButton) {\n    // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a\n    // native submit button into the form, \"click\" it, then remove it to simulate a standard form submission.\n    this.doAction('submit', submitter);\n  }\n\n  /**\n   * Synchronously sets the form control's validity. Call this when you know the future validity but need to update\n   * the host element immediately, i.e. before Lit updates the component in the next update.\n   */\n  setValidity(isValid: boolean) {\n    const host = this.host;\n    const hasInteracted = Boolean(userInteractedControls.has(host));\n    const required = Boolean(host.required);\n\n    //\n    // We're mapping the following \"states\" to data attributes. In the future, we can use ElementInternals.states to\n    // create a similar mapping, but instead of [data-invalid] it will look like :--invalid.\n    //\n    // See this RFC for more details: https://github.com/shoelace-style/shoelace/issues/1011\n    //\n    host.toggleAttribute('data-required', required);\n    host.toggleAttribute('data-optional', !required);\n    host.toggleAttribute('data-invalid', !isValid);\n    host.toggleAttribute('data-valid', isValid);\n    host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);\n    host.toggleAttribute('data-user-valid', isValid && hasInteracted);\n  }\n\n  /**\n   * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything\n   * that affects constraint validation changes so the component receives the correct validity states.\n   */\n  updateValidity() {\n    const host = this.host;\n    this.setValidity(host.validity.valid);\n  }\n\n  /**\n   * Dispatches a non-bubbling, cancelable custom event of type `sl-invalid`.\n   * If the `sl-invalid` event will be cancelled then the original `invalid`\n   * event (which may have been passed as argument) will also be cancelled.\n   * If no original `invalid` event has been passed then the `sl-invalid`\n   * event will be cancelled before being dispatched.\n   */\n  emitInvalidEvent(originalInvalidEvent?: Event) {\n    const slInvalidEvent = new CustomEvent>('sl-invalid', {\n      bubbles: false,\n      composed: false,\n      cancelable: true,\n      detail: {}\n    });\n\n    if (!originalInvalidEvent) {\n      slInvalidEvent.preventDefault();\n    }\n\n    if (!this.host.dispatchEvent(slInvalidEvent)) {\n      originalInvalidEvent?.preventDefault();\n    }\n  }\n}\n\n/*\n * Predefined common validity states.\n * All of them are read-only.\n */\n\n// A validity state object that represents `valid`\nexport const validValidityState: ValidityState = Object.freeze({\n  badInput: false,\n  customError: false,\n  patternMismatch: false,\n  rangeOverflow: false,\n  rangeUnderflow: false,\n  stepMismatch: false,\n  tooLong: false,\n  tooShort: false,\n  typeMismatch: false,\n  valid: true,\n  valueMissing: false\n});\n\n// A validity state object that represents `value missing`\nexport const valueMissingValidityState: ValidityState = Object.freeze({\n  ...validValidityState,\n  valid: false,\n  valueMissing: true\n});\n\n// A validity state object that represents a custom error\nexport const customErrorValidityState: ValidityState = Object.freeze({\n  ...validValidityState,\n  valid: false,\n  customError: true\n});\n"
  },
  {
    "path": "src/internal/math.ts",
    "content": "/** Ensures a number stays within a minimum and maximum value */\nexport function clamp(value: number, min: number, max: number) {\n  const noNegativeZero = (n: number) => (Object.is(n, -0) ? 0 : n);\n\n  if (value < min) {\n    return noNegativeZero(min);\n  }\n\n  if (value > max) {\n    return noNegativeZero(max);\n  }\n\n  return noNegativeZero(value);\n}\n"
  },
  {
    "path": "src/internal/modal.ts",
    "content": "import { activeElements, getDeepestActiveElement } from './active-elements.js';\nimport { getTabbableElements } from './tabbable.js';\n\nlet activeModals: HTMLElement[] = [];\n\nexport default class Modal {\n  element: HTMLElement;\n  isExternalActivated: boolean;\n  tabDirection: 'forward' | 'backward' = 'forward';\n  currentFocus: HTMLElement | null;\n  previousFocus: HTMLElement | null;\n  elementsWithTabbableControls: string[];\n\n  constructor(element: HTMLElement) {\n    this.element = element;\n\n    this.elementsWithTabbableControls = ['iframe'];\n  }\n\n  /** Activates focus trapping. */\n  activate() {\n    activeModals.push(this.element);\n    document.addEventListener('focusin', this.handleFocusIn);\n    document.addEventListener('keydown', this.handleKeyDown);\n    document.addEventListener('keyup', this.handleKeyUp);\n  }\n\n  /** Deactivates focus trapping. */\n  deactivate() {\n    activeModals = activeModals.filter(modal => modal !== this.element);\n    this.currentFocus = null;\n    document.removeEventListener('focusin', this.handleFocusIn);\n    document.removeEventListener('keydown', this.handleKeyDown);\n    document.removeEventListener('keyup', this.handleKeyUp);\n  }\n\n  /** Determines if this modal element is currently active or not. */\n  isActive() {\n    // The \"active\" modal is always the most recent one shown\n    return activeModals[activeModals.length - 1] === this.element;\n  }\n\n  /** Activates external modal behavior and temporarily disables focus trapping. */\n  activateExternal() {\n    this.isExternalActivated = true;\n  }\n\n  /** Deactivates external modal behavior and re-enables focus trapping. */\n  deactivateExternal() {\n    this.isExternalActivated = false;\n  }\n\n  private checkFocus() {\n    if (this.isActive() && !this.isExternalActivated) {\n      const tabbableElements = getTabbableElements(this.element);\n      if (!this.element.matches(':focus-within')) {\n        const start = tabbableElements[0];\n        const end = tabbableElements[tabbableElements.length - 1];\n        const target = this.tabDirection === 'forward' ? start : end;\n\n        if (typeof target?.focus === 'function') {\n          this.currentFocus = target;\n          target.focus({ preventScroll: false });\n        }\n      }\n    }\n  }\n\n  private handleFocusIn = () => {\n    if (!this.isActive()) return;\n    this.checkFocus();\n  };\n\n  private possiblyHasTabbableChildren(element: HTMLElement) {\n    return (\n      this.elementsWithTabbableControls.includes(element.tagName.toLowerCase()) || element.hasAttribute('controls')\n      // Should we add a data-attribute for people to set just in case they have an element where we don't know if it has possibly tabbable elements?\n    );\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'Tab' || this.isExternalActivated) return;\n    if (!this.isActive()) return;\n\n    // Because sometimes focus can actually be taken over from outside sources,\n    // we don't want to rely on `this.currentFocus`. Instead we check the actual `activeElement` and\n    // recurse through shadowRoots.\n    const currentActiveElement = getDeepestActiveElement();\n    this.previousFocus = currentActiveElement as HTMLElement | null;\n\n    if (this.previousFocus && this.possiblyHasTabbableChildren(this.previousFocus)) {\n      return;\n    }\n\n    if (event.shiftKey) {\n      this.tabDirection = 'backward';\n    } else {\n      this.tabDirection = 'forward';\n    }\n\n    const tabbableElements = getTabbableElements(this.element);\n\n    let currentFocusIndex = tabbableElements.findIndex(el => el === currentActiveElement);\n\n    this.previousFocus = this.currentFocus;\n\n    const addition = this.tabDirection === 'forward' ? 1 : -1;\n\n    // eslint-disable-next-line\n    while (true) {\n      if (currentFocusIndex + addition >= tabbableElements.length) {\n        currentFocusIndex = 0;\n      } else if (currentFocusIndex + addition < 0) {\n        currentFocusIndex = tabbableElements.length - 1;\n      } else {\n        currentFocusIndex += addition;\n      }\n\n      this.previousFocus = this.currentFocus;\n      const nextFocus = /** @type {HTMLElement} */ tabbableElements[currentFocusIndex];\n\n      // This is a special case. We need to make sure we're not calling .focus() if we're already focused on an element\n      // that possibly has \"controls\"\n      if (this.tabDirection === 'backward') {\n        if (this.previousFocus && this.possiblyHasTabbableChildren(this.previousFocus)) {\n          return;\n        }\n      }\n\n      if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {\n        return;\n      }\n\n      event.preventDefault();\n      this.currentFocus = nextFocus;\n      this.currentFocus?.focus({ preventScroll: false });\n\n      // Check to make sure focus actually changed. It may not always be the next focus, we just don't want it to be the previousFocus.\n      const allActiveElements = [...activeElements()];\n      if (allActiveElements.includes(this.currentFocus) || !allActiveElements.includes(this.previousFocus!)) {\n        break;\n      }\n    }\n\n    setTimeout(() => this.checkFocus());\n  };\n\n  private handleKeyUp = () => {\n    this.tabDirection = 'forward';\n  };\n}\n"
  },
  {
    "path": "src/internal/offset.ts",
    "content": "/**\n * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n * parent doesn't have to be positioned relative or absolute.\n *\n * NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent seems\n * to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n */\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  return {\n    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),\n    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)\n  };\n}\n"
  },
  {
    "path": "src/internal/scroll.ts",
    "content": "import { getOffset } from './offset.js';\n\nconst locks = new Set();\n\n/** Returns the width of the document's scrollbar */\nfunction getScrollbarWidth() {\n  const documentWidth = document.documentElement.clientWidth;\n  return Math.abs(window.innerWidth - documentWidth);\n}\n\n/**\n * Used in conjunction with `scrollbarWidth` to set proper body padding in case the user has padding already on the `` element.\n */\nfunction getExistingBodyPadding() {\n  const padding = Number(getComputedStyle(document.body).paddingRight.replace(/px/, ''));\n\n  if (isNaN(padding) || !padding) {\n    return 0;\n  }\n\n  return padding;\n}\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n\n  // When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from\n  // shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden.\n  if (!document.documentElement.classList.contains('sl-scroll-lock')) {\n    /** Scrollbar width + body padding calculation can go away once Safari has scrollbar-gutter support. */\n    const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding(); // must be measured before the `sl-scroll-lock` class is applied\n\n    let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;\n\n    // default is auto, unsupported browsers is \"undefined\"\n    if (!scrollbarGutterProperty || scrollbarGutterProperty === 'auto') {\n      scrollbarGutterProperty = 'stable';\n    }\n\n    /** Sometimes the scrollbar width is 1px, even then, we assume nothing is overflowing. */\n    if (scrollbarWidth < 2) {\n      // if there's no scrollbar, just set it to an empty string so whatever the user has set gets used. This is useful if the page is not overflowing and showing a scrollbar, or if the user has overflow: hidden, or any other reason a scrollbar may not be showing.\n      scrollbarGutterProperty = '';\n    }\n    document.documentElement.style.setProperty('--sl-scroll-lock-gutter', scrollbarGutterProperty);\n    document.documentElement.classList.add('sl-scroll-lock');\n    document.documentElement.style.setProperty('--sl-scroll-lock-size', `${scrollbarWidth}px`);\n  }\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.documentElement.classList.remove('sl-scroll-lock');\n    document.documentElement.style.removeProperty('--sl-scroll-lock-size');\n  }\n}\n\n/** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  behavior: 'smooth' | 'auto' = 'smooth'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n"
  },
  {
    "path": "src/internal/scrollend-polyfill.ts",
    "content": "type GenericCallback = (this: unknown, ...args: unknown[]) => unknown;\n\ntype MethodOf = T[K] extends GenericCallback ? T[K] : never;\n\nconst debounce = (fn: T, delay: number) => {\n  let timerId = 0;\n\n  return function (this: unknown, ...args: unknown[]) {\n    window.clearTimeout(timerId);\n    timerId = window.setTimeout(() => {\n      fn.call(this, ...args);\n    }, delay);\n  };\n};\n\nconst decorate = (\n  proto: T,\n  method: M,\n  decorateFn: (this: unknown, superFn: T[M], ...args: unknown[]) => unknown\n) => {\n  const superFn = proto[method] as MethodOf;\n\n  proto[method] = function (this: unknown, ...args: unknown[]) {\n    superFn.call(this, ...args);\n    decorateFn.call(this, superFn, ...args);\n  } as MethodOf;\n};\n\n(() => {\n  // SSR environments should not apply the polyfill\n  if (typeof window === 'undefined') {\n    return;\n  }\n\n  const isSupported = 'onscrollend' in window;\n\n  if (!isSupported) {\n    const pointers = new Set();\n    const scrollHandlers = new WeakMap();\n\n    const handlePointerDown = (event: TouchEvent) => {\n      for (const touch of event.changedTouches) {\n        pointers.add(touch.identifier);\n      }\n    };\n\n    const handlePointerUp = (event: TouchEvent) => {\n      for (const touch of event.changedTouches) {\n        pointers.delete(touch.identifier);\n      }\n    };\n\n    document.addEventListener('touchstart', handlePointerDown, true);\n    document.addEventListener('touchend', handlePointerUp, true);\n    document.addEventListener('touchcancel', handlePointerUp, true);\n\n    decorate(EventTarget.prototype, 'addEventListener', function (this: EventTarget, addEventListener, type) {\n      if (type !== 'scrollend') return;\n\n      const handleScrollEnd = debounce(() => {\n        if (!pointers.size) {\n          // If no pointer is active in the scroll area then the scroll has ended\n          this.dispatchEvent(new Event('scrollend'));\n        } else {\n          // otherwise let's wait a bit more\n          handleScrollEnd();\n        }\n      }, 100);\n\n      addEventListener.call(this, 'scroll', handleScrollEnd, { passive: true });\n      scrollHandlers.set(this, handleScrollEnd);\n    });\n\n    decorate(EventTarget.prototype, 'removeEventListener', function (this: EventTarget, removeEventListener, type) {\n      if (type !== 'scrollend') return;\n\n      const scrollHandler = scrollHandlers.get(this);\n      if (scrollHandler) {\n        removeEventListener.call(this, 'scroll', scrollHandler, { passive: true } as unknown as EventListenerOptions);\n      }\n    });\n  }\n})();\n\n// Without an import or export, TypeScript sees vars in this file as global\nexport {};\n"
  },
  {
    "path": "src/internal/shoelace-element.test.ts",
    "content": "// TODO: Write logic around custom element definitions, no defs, conflicting defs, same defs, etc.\nimport { expect } from '@open-wc/testing';\nimport { readFile } from '@web/test-runner-commands';\n\nimport SlButton from '../../dist/components/button/button.component.js';\n\n// We don't use ShoelaceElement directly because it shouldn't exist in the final bundle.\n/* eslint-disable */\nconst ShoelaceElement = Object.getPrototypeOf(SlButton);\n/* eslint-enable */\n\n// @ts-expect-error Isn't written in TS.\nimport { getAllComponents } from '../../scripts/shared.js';\n\nimport Sinon from 'sinon';\n\nconst getMetadata = () => readFile({ path: '../../dist/custom-elements.json' }) as unknown as Promise;\n\nlet counter = 0;\n\n// These tests all run in the same tab so they pollute the global custom element registry.\n// Some tests use this stub to be able to just test registration.\nfunction stubCustomElements() {\n  const map = new Map();\n\n  Sinon.stub(window.customElements, 'get').callsFake(str => {\n    return map.get(str);\n  });\n\n  const stub = Sinon.stub(window.customElements, 'define');\n  stub.callsFake((str, ctor) => {\n    if (map.get(str)) {\n      return;\n    }\n\n    // Assign it a random string so it doesn't pollute globally.\n    const randomTagName = str + '-' + counter.toString();\n    counter++;\n    stub.wrappedMethod.apply(window.customElements, [randomTagName, ctor]);\n    map.set(str, ctor);\n  });\n}\n\nbeforeEach(() => {\n  Sinon.restore();\n  stubCustomElements();\n});\n\nit('Should provide a console warning if attempting to register the same tag twice', () => {\n  class MyButton extends SlButton {\n    static version = '0.4.5';\n  }\n\n  const stub = Sinon.stub(console, 'warn');\n\n  expect(Boolean(window.customElements.get('sl-button'))).to.be.false;\n  /* eslint-disable */\n  SlButton.define('sl-button');\n  expect(Boolean(window.customElements.get('sl-button'))).to.be.true;\n  MyButton.define('sl-button');\n  /* eslint-enable */\n\n  expect(stub).calledOnce;\n\n  const warning = stub.getCall(0).args.join('');\n\n  expect(warning).to.match(\n    new RegExp(\n      /* eslint-disable */\n      `Attempted to register  v${MyButton.version}, but  v${SlButton.version} has already been registered`\n      /* eslint-enable */\n    ),\n    'i'\n  );\n});\n\nit('Should not provide a console warning if versions match', () => {\n  class MyButton extends SlButton {}\n\n  const stub = Sinon.stub(console, 'warn');\n\n  /* eslint-disable */\n  expect(Boolean(window.customElements.get('sl-button'))).to.be.false;\n  SlButton.define('sl-button');\n  expect(Boolean(window.customElements.get('sl-button'))).to.be.true;\n  MyButton.define('sl-button');\n  /* eslint-enable */\n\n  expect(stub).not.called;\n});\n\nit('Should register dependencies when the element is constructed the first time', () => {\n  /* eslint-disable */\n  class MyElement extends ShoelaceElement {\n    static dependencies = { 'sl-button': SlButton };\n    static version = 'random-version';\n  }\n  /* eslint-enable */\n\n  expect(Boolean(window.customElements.get('sl-button'))).to.be.false;\n\n  // eslint-disable\n  MyElement.define('sl-element');\n  // eslint-enable\n\n  // this should be false until the constructor is called via new\n  expect(Boolean(window.customElements.get('sl-button'))).to.be.false;\n\n  // We can call it directly since we know its registered.\n  /* eslint-disable */\n  // @ts-expect-error If its undefined, error.\n  new (window.customElements.get('sl-element'))();\n  /* eslint-enable */\n\n  expect(Boolean(window.customElements.get('sl-button'))).to.be.true;\n});\n\n// This looks funky here. This grabs all of our components and tests for side effects.\n// We \"abuse\" mocha and dynamically define tests.\nbefore(async () => {\n  const metadata = JSON.parse(await getMetadata()) as Record;\n\n  const tagNames: string[] = [];\n\n  const relevantMetadata: { tagName: string; path: string }[] = getAllComponents(metadata).map(\n    (component: { tagName: string; path: string }) => {\n      const { tagName, path } = component;\n      tagNames.push(tagName);\n\n      return { tagName, path };\n    }\n  );\n\n  relevantMetadata.forEach(({ tagName, path }) => {\n    it(`Should not register any components: ${tagName}`, async () => {\n      await import('../../dist/' + path);\n\n      // Need to make sure we remove the current tag from the tagNames and *then* see whats been registered.\n      const registeredTags = tagNames.filter(tag => tag !== tagName && Boolean(window.customElements.get(tag)));\n\n      const errorMessage =\n        `Expected ${path} to not register any tags, but it registered the following tags: ` +\n        registeredTags.map(tag => tag).join(', ');\n      expect(registeredTags.length).to.equal(0, errorMessage);\n    });\n  });\n});\n"
  },
  {
    "path": "src/internal/shoelace-element.ts",
    "content": "import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n// Match event type name strings that are registered on GlobalEventHandlersEventMap...\ntype EventTypeRequiresDetail = T extends keyof GlobalEventHandlersEventMap\n  ? // ...where the event detail is an object...\n    GlobalEventHandlersEventMap[T] extends CustomEvent>\n    ? // ...that is non-empty...\n      GlobalEventHandlersEventMap[T] extends CustomEvent>\n      ? never\n      : // ...and has at least one non-optional property\n        Partial extends GlobalEventHandlersEventMap[T]['detail']\n        ? never\n        : T\n    : never\n  : never;\n\n// The inverse of the above (match any type that doesn't match EventTypeRequiresDetail)\ntype EventTypeDoesNotRequireDetail = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent>\n      ? T\n      : Partial extends GlobalEventHandlersEventMap[T]['detail']\n        ? T\n        : never\n    : T\n  : T;\n\n// `keyof EventTypesWithRequiredDetail` lists all registered event types that require detail\ntype EventTypesWithRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail]: true;\n};\n\n// `keyof EventTypesWithoutRequiredDetail` lists all registered event types that do NOT require detail\ntype EventTypesWithoutRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail]: true;\n};\n\n// Helper to make a specific property of an object non-optional\ntype WithRequired = T & { [P in K]-?: T[P] };\n\n// Given an event name string, get a valid type for the options to initialize the event that is more restrictive than\n// just CustomEventInit when appropriate (validate the type of the event detail, and require it to be provided if the\n// event requires it)\ntype SlEventInit = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent>\n      ? CustomEventInit\n      : Partial extends GlobalEventHandlersEventMap[T]['detail']\n        ? CustomEventInit\n        : WithRequired, 'detail'>\n    : CustomEventInit\n  : CustomEventInit;\n\n// Given an event name string, get the type of the event\ntype GetCustomEventType = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent\n    ? GlobalEventHandlersEventMap[T]\n    : CustomEvent\n  : CustomEvent;\n\n// `keyof ValidEventTypeMap` is equivalent to `keyof GlobalEventHandlersEventMap` but gives a nicer error message\ntype ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail;\n\nexport default class ShoelaceElement extends LitElement {\n  // Make localization attributes reactive\n  @property() dir: string;\n  @property() lang: string;\n\n  /** Emits a custom event with more convenient defaults. */\n  emit(\n    name: EventTypeDoesNotRequireDetail,\n    options?: SlEventInit | undefined\n  ): GetCustomEventType;\n  emit(\n    name: EventTypeRequiresDetail,\n    options: SlEventInit\n  ): GetCustomEventType;\n  emit(\n    name: T,\n    options?: SlEventInit | undefined\n  ): GetCustomEventType {\n    const event = new CustomEvent(name, {\n      bubbles: true,\n      cancelable: false,\n      composed: true,\n      detail: {},\n      ...options\n    });\n\n    this.dispatchEvent(event);\n\n    return event as GetCustomEventType;\n  }\n\n  /* eslint-disable */\n  // @ts-expect-error This is auto-injected at build time.\n  static version = __SHOELACE_VERSION__;\n  /* eslint-enable */\n\n  static define(name: string, elementConstructor = this, options: ElementDefinitionOptions = {}) {\n    const currentlyRegisteredConstructor = customElements.get(name) as\n      | CustomElementConstructor\n      | typeof ShoelaceElement;\n\n    if (!currentlyRegisteredConstructor) {\n      // We try to register as the actual class first. If for some reason that fails, we fall back to anonymous classes.\n      // customElements can only have 1 class of the same \"object id\" per registry, so that is why the try {} catch {} exists.\n      // Some tools like Jest Snapshots and if you import the constructor and call `new SlButton()` they will fail with\n      //   the anonymous class version.\n      try {\n        customElements.define(name, elementConstructor, options);\n      } catch (_err) {\n        customElements.define(name, class extends elementConstructor {}, options);\n      }\n      return;\n    }\n\n    let newVersion = ' (unknown version)';\n    let existingVersion = newVersion;\n\n    if ('version' in elementConstructor && elementConstructor.version) {\n      newVersion = ' v' + elementConstructor.version;\n    }\n\n    if ('version' in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {\n      existingVersion = ' v' + currentlyRegisteredConstructor.version;\n    }\n\n    // Need to make sure we're not working with null or empty strings before doing version comparisons.\n    if (newVersion && existingVersion && newVersion === existingVersion) {\n      // If versions match, we don't need to warn anyone. Carry on.\n      return;\n    }\n\n    console.warn(\n      `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`\n    );\n  }\n\n  static dependencies: Record = {};\n\n  constructor() {\n    super();\n    Object.entries((this.constructor as typeof ShoelaceElement).dependencies).forEach(([name, component]) => {\n      (this.constructor as typeof ShoelaceElement).define(name, component);\n    });\n  }\n\n  #hasRecordedInitialProperties = false;\n\n  // Store the constructor value of all `static properties = {}`\n  initialReflectedProperties: Map = new Map();\n\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\n    if (!this.#hasRecordedInitialProperties) {\n      (this.constructor as typeof ShoelaceElement).elementProperties.forEach(\n        (obj, prop: keyof typeof this & string) => {\n          // eslint-disable-next-line\n          if (obj.reflect && this[prop] != null) {\n            this.initialReflectedProperties.set(prop, this[prop]);\n          }\n        }\n      );\n\n      this.#hasRecordedInitialProperties = true;\n    }\n\n    super.attributeChangedCallback(name, oldValue, newValue);\n  }\n\n  protected willUpdate(changedProperties: Parameters[0]): void {\n    super.willUpdate(changedProperties);\n\n    // Run the morph fixing *after* willUpdate.\n    this.initialReflectedProperties.forEach((value, prop: string & keyof typeof this) => {\n      // If a prop changes to `null`, we assume this happens via an attribute changing to `null`.\n      // eslint-disable-next-line\n      if (changedProperties.has(prop) && this[prop] == null) {\n        // Silly type gymnastics to appease the compiler.\n        (this as Record)[prop] = value;\n      }\n    });\n  }\n}\n\nexport interface ShoelaceFormControl extends ShoelaceElement {\n  // Form attributes\n  name: string;\n  value: unknown;\n  disabled?: boolean;\n  defaultValue?: unknown;\n  defaultChecked?: boolean;\n  form?: string;\n\n  // Constraint validation attributes\n  pattern?: string;\n  min?: number | string | Date;\n  max?: number | string | Date;\n  step?: number | 'any';\n  required?: boolean;\n  minlength?: number;\n  maxlength?: number;\n\n  // Form validation properties\n  readonly validity: ValidityState;\n  readonly validationMessage: string;\n\n  // Form validation methods\n  checkValidity: () => boolean;\n  getForm: () => HTMLFormElement | null;\n  reportValidity: () => boolean;\n  setCustomValidity: (message: string) => void;\n}\n"
  },
  {
    "path": "src/internal/slot.ts",
    "content": "import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/** A reactive controller that determines when slots exist. */\nexport class HasSlotController implements ReactiveController {\n  host: ReactiveControllerHost & Element;\n  slotNames: string[] = [];\n\n  constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {\n    (this.host = host).addController(this);\n    this.slotNames = slotNames;\n  }\n\n  private hasDefaultSlot() {\n    return [...this.host.childNodes].some(node => {\n      if (node.nodeType === node.TEXT_NODE && node.textContent!.trim() !== '') {\n        return true;\n      }\n\n      if (node.nodeType === node.ELEMENT_NODE) {\n        const el = node as HTMLElement;\n        const tagName = el.tagName.toLowerCase();\n\n        // Ignore visually hidden elements since they aren't rendered\n        if (tagName === 'sl-visually-hidden') {\n          return false;\n        }\n\n        // If it doesn't have a slot attribute, it's part of the default slot\n        if (!el.hasAttribute('slot')) {\n          return true;\n        }\n      }\n\n      return false;\n    });\n  }\n\n  private hasNamedSlot(name: string) {\n    return this.host.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n  }\n\n  test(slotName: string) {\n    return slotName === '[default]' ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);\n  }\n\n  hostConnected() {\n    this.host.shadowRoot!.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  hostDisconnected() {\n    this.host.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private handleSlotChange = (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n\n    if ((this.slotNames.includes('[default]') && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {\n      this.host.requestUpdate();\n    }\n  };\n}\n\n/**\n * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n */\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let html = '';\n\n  [...nodes].forEach(node => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      html += (node as HTMLElement).outerHTML;\n    }\n\n    if (node.nodeType === Node.TEXT_NODE) {\n      html += node.textContent;\n    }\n  });\n\n  return html;\n}\n\n/**\n * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement | undefined | null): string {\n  if (!slot) {\n    return '';\n  }\n  const nodes = slot.assignedNodes({ flatten: true });\n  let text = '';\n\n  [...nodes].forEach(node => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent;\n    }\n  });\n\n  return text;\n}\n"
  },
  {
    "path": "src/internal/string.ts",
    "content": "/** Converts the first letter of a string to uppercase */\nexport function uppercaseFirstLetter(string: string) {\n  return string.charAt(0).toUpperCase() + string.slice(1);\n}\n"
  },
  {
    "path": "src/internal/tabbable.test.ts",
    "content": "import { aTimeout, elementUpdated, expect, fixture } from '@open-wc/testing';\n\nimport { activeElements, getDeepestActiveElement } from './active-elements.js';\nimport { clickOnElement } from './test.js';\nimport { html } from 'lit';\nimport { sendKeys } from '@web/test-runner-commands';\nimport type { SlDialog } from '../shoelace.js';\n\nimport '../../../dist/shoelace.js';\n\nasync function holdShiftKey(callback: () => Promise) {\n  await sendKeys({ down: 'Shift' });\n  await callback();\n  await sendKeys({ up: 'Shift' });\n}\n\nconst tabKey =\n  navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('HeadlessChrome') ? 'Alt+Tab' : 'Tab';\n\n// Simple helper to turn the activeElements generator into an array\nfunction activeElementsArray() {\n  return [...activeElements()];\n}\n\nwindow.customElements.define(\n  'tab-test-1',\n  class extends HTMLElement {\n    constructor() {\n      super();\n      this.attachShadow({ mode: 'open' });\n    }\n    connectedCallback() {\n      this.shadowRoot!.innerHTML = `\n      \n        \n\n        \n\n        \n      \n    `;\n    }\n  }\n);\n\nit('Should allow tabbing to slotted elements', async () => {\n  const el = await fixture(html`\n    \n      
    \n        Focus 1\n      
    \n\n      
    \n        \n        Focus 3\n        
    \n\n      
    \n        
    Focus 6
    \n        \n      
    \n        \n  `);\n\n  const drawer = el.shadowRoot?.querySelector('sl-drawer');\n\n  if (drawer === null || drawer === undefined) throw Error('Could not find drawer inside of the test element');\n\n  await drawer.show();\n\n  await elementUpdated(drawer);\n\n  const focusZero = drawer.shadowRoot?.querySelector(\"[role='dialog']\");\n\n  if (focusZero === null || focusZero === undefined) throw Error('Could not find dialog panel inside ');\n\n  const focusOne = el.querySelector('#focus-1');\n  const focusTwo = drawer.shadowRoot?.querySelector(\"[part~='close-button']\");\n\n  if (focusTwo === null || focusTwo === undefined) throw Error('Could not find close button inside ');\n\n  const focusThree = el.querySelector('#focus-3');\n  const focusFour = el.querySelector('#focus-4');\n  const focusFive = el.querySelector('#focus-5');\n  const focusSix = el.querySelector('#focus-6');\n\n  // When we open drawer, we should be focused on the panel to start.\n  expect(getDeepestActiveElement()).to.equal(focusZero);\n\n  await sendKeys({ press: tabKey });\n  expect(activeElementsArray()).to.include(focusOne);\n\n  // When we hit the  key we should go to the \"close button\" on the drawer\n  await sendKeys({ press: tabKey });\n  expect(activeElementsArray()).to.include(focusTwo);\n\n  await sendKeys({ press: tabKey });\n  expect(activeElementsArray()).to.include(focusThree);\n\n  await sendKeys({ press: tabKey });\n  expect(activeElementsArray()).to.include(focusFour);\n\n  await sendKeys({ press: tabKey });\n  expect(activeElementsArray()).to.include(focusFive);\n\n  await sendKeys({ press: tabKey });\n  expect(activeElementsArray()).to.include(focusSix);\n\n  // Now we should loop back to #panel\n  await sendKeys({ press: tabKey });\n  expect(activeElementsArray()).to.include(focusZero);\n\n  // Now we should loop back to #panel\n  await sendKeys({ press: tabKey });\n  expect(activeElementsArray()).to.include(focusOne);\n\n  // Let's reset and try from starting point 0 and go backwards.\n  await holdShiftKey(async () => await sendKeys({ press: tabKey }));\n  expect(activeElementsArray()).to.include(focusZero);\n\n  await holdShiftKey(async () => await sendKeys({ press: tabKey }));\n  expect(activeElementsArray()).to.include(focusSix);\n\n  await holdShiftKey(async () => await sendKeys({ press: tabKey }));\n  expect(activeElementsArray()).to.include(focusFive);\n\n  await holdShiftKey(async () => await sendKeys({ press: tabKey }));\n  expect(activeElementsArray()).to.include(focusFour);\n\n  await holdShiftKey(async () => await sendKeys({ press: tabKey }));\n  expect(activeElementsArray()).to.include(focusThree);\n\n  await holdShiftKey(async () => await sendKeys({ press: tabKey }));\n  expect(activeElementsArray()).to.include(focusTwo);\n\n  await holdShiftKey(async () => await sendKeys({ press: tabKey }));\n  expect(activeElementsArray()).to.include(focusOne);\n\n  await holdShiftKey(async () => await sendKeys({ press: tabKey }));\n  expect(activeElementsArray()).to.include(focusZero);\n\n  await holdShiftKey(async () => await sendKeys({ press: tabKey }));\n  expect(activeElementsArray()).to.include(focusSix);\n});\n\nit.skip('Should account for when focus is changed from outside sources (like clicking)', async () => {\n  const dialog = await fixture(html`\n    \n      Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n      \n      Close\n    \n  `);\n\n  const inputEl = dialog.querySelector('sl-input')!;\n  const closeButton = dialog.shadowRoot!.querySelector('sl-icon-button')!;\n  const footerButton = dialog.querySelector('sl-button')!;\n\n  expect(activeElementsArray()).to.not.include(inputEl);\n\n  // Sets focus to the input element\n  inputEl.focus();\n\n  expect(activeElementsArray()).to.include(inputEl);\n\n  await sendKeys({ press: tabKey });\n\n  expect(activeElementsArray()).not.to.include(inputEl);\n  expect(activeElementsArray()).to.include(footerButton);\n\n  // Reset focus back to input el\n  inputEl.focus();\n  expect(activeElementsArray()).to.include(inputEl);\n\n  await holdShiftKey(async () => await sendKeys({ press: tabKey }));\n  expect(activeElementsArray()).to.include(closeButton);\n});\n\n// https://github.com/shoelace-style/shoelace/issues/1710\nit('Should respect nested modal instances', async () => {\n  const dialogOne = (): SlDialog => document.querySelector('#dialog-1')!;\n  const dialogTwo = (): SlDialog => document.querySelector('#dialog-2')!;\n\n  // lit-a11y doesn't like the \"autofocus\" attribute.\n  /* eslint-disable */\n  await fixture(html`\n    
    \n       dialogOne().show()}>\n      \n         dialogTwo().show()} id=\"open-dialog-2\">Open Dialog 2\n        Close\n      \n\n      \n        \n        \n        Close\n      \n    
    \n  `);\n  /* eslint-enable */\n\n  const firstFocusedEl = document.querySelector('#focus-1');\n  const secondFocusedEl = document.querySelector('#focus-2');\n\n  // So we can trigger auto-focus stuff\n  await clickOnElement(document.querySelector('#open-dialog-1')!);\n  // These clicks need a ~100ms timeout. I'm assuming for animation reasons?\n  await aTimeout(100);\n  await clickOnElement(document.querySelector('#open-dialog-2')!);\n  await aTimeout(100);\n\n  expect(activeElementsArray()).to.include(firstFocusedEl);\n\n  await sendKeys({ press: tabKey });\n  expect(activeElementsArray()).to.include(secondFocusedEl);\n});\n"
  },
  {
    "path": "src/internal/tabbable.ts",
    "content": "// Cached compute style calls. This is specifically for browsers that dont support `checkVisibility()`.\n// computedStyle calls are \"live\" so they only need to be retrieved once for an element.\nconst computedStyleMap = new WeakMap();\n\nfunction getCachedComputedStyle(el: HTMLElement): CSSStyleDeclaration {\n  let computedStyle: undefined | CSSStyleDeclaration = computedStyleMap.get(el);\n\n  if (!computedStyle) {\n    computedStyle = window.getComputedStyle(el, null);\n    computedStyleMap.set(el, computedStyle);\n  }\n\n  return computedStyle;\n}\n\nfunction isVisible(el: HTMLElement): boolean {\n  // This is the fastest check, but isn't supported in Safari.\n  if (typeof el.checkVisibility === 'function') {\n    // Opacity is focusable, visibility is not.\n    return el.checkVisibility({ checkOpacity: false, checkVisibilityCSS: true });\n  }\n\n  // Fallback \"polyfill\" for \"checkVisibility\"\n  const computedStyle = getCachedComputedStyle(el);\n\n  return computedStyle.visibility !== 'hidden' && computedStyle.display !== 'none';\n}\n\n// While this behavior isn't standard in Safari / Chrome yet, I think it's the most reasonable\n// way of handling tabbable overflow areas. Browser sniffing seems gross, and it's the most\n// accessible way of handling overflow areas. [Konnor]\nfunction isOverflowingAndTabbable(el: HTMLElement): boolean {\n  const computedStyle = getCachedComputedStyle(el);\n\n  const { overflowY, overflowX } = computedStyle;\n\n  if (overflowY === 'scroll' || overflowX === 'scroll') {\n    return true;\n  }\n\n  if (overflowY !== 'auto' || overflowX !== 'auto') {\n    return false;\n  }\n\n  // Always overflow === \"auto\" by this point\n  const isOverflowingY = el.scrollHeight > el.clientHeight;\n\n  if (isOverflowingY && overflowY === 'auto') {\n    return true;\n  }\n\n  const isOverflowingX = el.scrollWidth > el.clientWidth;\n\n  if (isOverflowingX && overflowX === 'auto') {\n    return true;\n  }\n\n  return false;\n}\n\n/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */\nfunction isTabbable(el: HTMLElement) {\n  const tag = el.tagName.toLowerCase();\n\n  const tabindex = Number(el.getAttribute('tabindex'));\n  const hasTabindex = el.hasAttribute('tabindex');\n\n  // elements with a tabindex attribute that is either NaN or <= -1 are not tabbable\n  if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {\n    return false;\n  }\n\n  // Elements with a disabled attribute are not tabbable\n  if (el.hasAttribute('disabled')) {\n    return false;\n  }\n\n  // If any parents have \"inert\", we aren't \"tabbable\"\n  if (el.closest('[inert]')) {\n    return false;\n  }\n\n  if (tag === 'input' && el.getAttribute('type') === 'radio') {\n    const rootNode = el.getRootNode() as HTMLElement;\n\n    const findRadios = `input[type='radio'][name=\"${el.getAttribute('name')}\"]`;\n    const firstChecked = rootNode.querySelector(`${findRadios}:checked`);\n\n    if (firstChecked) {\n      return firstChecked === el;\n    }\n\n    const firstRadio = rootNode.querySelector(findRadios);\n\n    return firstRadio === el;\n  }\n\n  if (!isVisible(el)) {\n    return false;\n  }\n\n  // Audio and video elements with the controls attribute are tabbable\n  if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {\n    return true;\n  }\n\n  // Elements with a tabindex other than -1 are tabbable\n  if (el.hasAttribute('tabindex')) {\n    return true;\n  }\n\n  // Elements with a contenteditable attribute are tabbable\n  if (el.hasAttribute('contenteditable') && el.getAttribute('contenteditable') !== 'false') {\n    return true;\n  }\n\n  // At this point, the following elements are considered tabbable\n  const isNativelyTabbable = [\n    'button',\n    'input',\n    'select',\n    'textarea',\n    'a',\n    'audio',\n    'video',\n    'summary',\n    'iframe'\n  ].includes(tag);\n\n  if (isNativelyTabbable) {\n    return true;\n  }\n\n  // We save the overflow checks for last, because they're the most expensive\n  return isOverflowingAndTabbable(el);\n}\n\n/**\n * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single\n * element because it short-circuits after finding the first and last ones.\n */\nexport function getTabbableBoundary(root: HTMLElement | ShadowRoot) {\n  const tabbableElements = getTabbableElements(root);\n\n  // Find the first and last tabbable elements\n  const start = tabbableElements[0] ?? null;\n  const end = tabbableElements[tabbableElements.length - 1] ?? null;\n\n  return { start, end };\n}\n\n/**\n * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.\n * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.\n * This fixes that fun edge case.\n */\nfunction getSlottedChildrenOutsideRootElement(slotElement: HTMLSlotElement, root: HTMLElement | ShadowRoot) {\n  return (slotElement.getRootNode({ composed: true }) as ShadowRoot | null)?.host !== root;\n}\n\nexport function getTabbableElements(root: HTMLElement | ShadowRoot) {\n  const walkedEls = new WeakMap();\n  const tabbableElements: HTMLElement[] = [];\n\n  function walk(el: HTMLElement | ShadowRoot) {\n    if (el instanceof Element) {\n      // if the element has \"inert\" we can just no-op it.\n      if (el.hasAttribute('inert') || el.closest('[inert]')) {\n        return;\n      }\n\n      if (walkedEls.has(el)) {\n        return;\n      }\n      walkedEls.set(el, true);\n\n      if (!tabbableElements.includes(el) && isTabbable(el)) {\n        tabbableElements.push(el);\n      }\n\n      if (el instanceof HTMLSlotElement && getSlottedChildrenOutsideRootElement(el, root)) {\n        el.assignedElements({ flatten: true }).forEach((assignedEl: HTMLElement) => {\n          walk(assignedEl);\n        });\n      }\n\n      if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {\n        walk(el.shadowRoot);\n      }\n    }\n\n    for (const e of el.children) {\n      walk(e as HTMLElement);\n    }\n  }\n\n  // Collect all elements including the root\n  walk(root);\n\n  // Is this worth having? Most sorts will always add increased overhead. And positive tabindexes shouldn't really be used.\n  // So is it worth being right? Or fast?\n  return tabbableElements.sort((a, b) => {\n    // Make sure we sort by tabindex.\n    const aTabindex = Number(a.getAttribute('tabindex')) || 0;\n    const bTabindex = Number(b.getAttribute('tabindex')) || 0;\n    return bTabindex - aTabindex;\n  });\n}\n"
  },
  {
    "path": "src/internal/test/data-testid-helpers.ts",
    "content": "/**\n * Allows you to find a DOM element based on the value of its `data-testid` attribute.\n * This attribute can be used to decouple identifying dom elements for testing from\n * styling (which is typically done via class selectors) or other ids which serve\n * different purposes.\n * See also https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change\n * Inspired by https://testing-library.com/docs/queries/bytestid/\n * @param {HTMLElement} container - A parent element of the DOM element to find\n * @param {string} testId - The value of the `data-testid` attribute of the component to find.\n * @returns The found element or null if there was no such element\n */\nexport const queryByTestId = (container: HTMLElement, testId: string): T | null => {\n  return container.querySelector(`[data-testid=\"${testId}\"]`);\n};\n"
  },
  {
    "path": "src/internal/test/element-visible-overflow.ts",
    "content": "/**\n * Given a parent element featuring `overflow: hidden` and a child element inside the parent, this\n * function determines whether the child will be visible taking only the overflow of the parent into account\n * Id does NOT check whether it is hidden or overlapped by another element\n * It basically checks whether the bounding rects of the parent and the child overlap\n *\n * @param {HTMLElement} outerElement - The parent element\n * @param {HTMLElement} innerElement - the child element\n * @returns {Boolean} whether the two elements overlap\n */\nexport const isElementVisibleFromOverflow = (outerElement: Element, innerElement: Element): boolean => {\n  const outerRect = outerElement.getBoundingClientRect();\n  const innerRect = innerElement.getBoundingClientRect();\n  return (\n    outerRect.top <= innerRect.bottom &&\n    innerRect.top <= outerRect.bottom &&\n    outerRect.left <= innerRect.right &&\n    innerRect.left <= outerRect.right\n  );\n};\n"
  },
  {
    "path": "src/internal/test/form-control-base-tests.ts",
    "content": "import { expect, fixture } from '@open-wc/testing';\nimport type { ShoelaceFormControl } from '../shoelace-element.js';\n\ntype CreateControlFn = () => Promise;\n\n/** Runs a set of generic tests for Shoelace form controls */\nexport function runFormControlBaseTests(\n  tagNameOrConfig:\n    | string\n    | {\n        tagName: string;\n        init?: (control: T) => void;\n        variantName: string;\n      }\n) {\n  const isStringArg = typeof tagNameOrConfig === 'string';\n  const tagName = isStringArg ? tagNameOrConfig : tagNameOrConfig.tagName;\n\n  // component initialization function or null\n  const init =\n    isStringArg || !tagNameOrConfig.init //\n      ? null\n      : tagNameOrConfig.init || null;\n\n  // either `` or ` ()\n  const displayName = isStringArg //\n    ? tagName\n    : `${tagName} (${tagNameOrConfig.variantName})`;\n\n  // creates a testable form control instance\n  const createControl = async () => {\n    const control = await createFormControl(tagName);\n    init?.(control);\n    return control;\n  };\n\n  runAllValidityTests(tagName, displayName, createControl);\n}\n\n//\n// Applicable for all Shoelace form controls. This function checks the behavior of:\n//   - `.validity`\n//   - `.validationMessage`,\n//   - `.checkValidity()`\n//   - `.reportValidity()`\n//   - `.setCustomValidity(msg)`\n//   - `.getForm()`\n//\nfunction runAllValidityTests(\n  tagName: string, //\n  displayName: string,\n  createControl: () => Promise\n) {\n  // will be used later to retrieve meta information about the control\n  describe(`Form validity base test for ${displayName}`, async () => {\n    it('should have a property `validity` of type `object`', async () => {\n      const control = await createControl();\n      expect(control).satisfy(() => control.validity !== null && typeof control.validity === 'object');\n    });\n\n    it('should have a property `validationMessage` of type `string`', async () => {\n      const control = await createControl();\n      expect(control).satisfy(() => typeof control.validationMessage === 'string');\n    });\n\n    it('should implement method `checkValidity`', async () => {\n      const control = await createControl();\n      expect(control).satisfies(() => typeof control.checkValidity === 'function');\n    });\n\n    it('should implement method `setCustomValidity`', async () => {\n      const control = await createControl();\n      expect(control).satisfies(() => typeof control.setCustomValidity === 'function');\n    });\n\n    it('should implement method `reportValidity`', async () => {\n      const control = await createControl();\n      expect(control).satisfies(() => typeof control.reportValidity === 'function');\n    });\n\n    it('should be valid initially', async () => {\n      const control = await createControl();\n      expect(control.validity.valid).to.equal(true);\n    });\n\n    it('should make sure that calling `.checkValidity()` will return `true` when valid', async () => {\n      const control = await createControl();\n      expect(control.checkValidity()).to.equal(true);\n    });\n\n    it('should make sure that calling `.reportValidity()` will return `true` when valid', async () => {\n      const control = await createControl();\n      expect(control.reportValidity()).to.equal(true);\n    });\n\n    it('should not emit an `sl-invalid` event when `.checkValidity()` is called while valid', async () => {\n      const control = await createControl();\n      const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.checkValidity());\n      expect(emittedEvents.length).to.equal(0);\n    });\n\n    it('should not emit an `sl-invalid` event when `.reportValidity()` is called while valid', async () => {\n      const control = await createControl();\n      const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.reportValidity());\n      expect(emittedEvents.length).to.equal(0);\n    });\n\n    // TODO: As soon as `SlRadioGroup` has a property `disabled` this\n    // condition can be removed\n    if (tagName !== 'sl-radio-group') {\n      it('should not emit an `sl-invalid` event when `.checkValidity()` is called in custom error case while disabled', async () => {\n        const control = await createControl();\n        control.setCustomValidity('error');\n        control.disabled = true;\n        await control.updateComplete;\n        const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.checkValidity());\n        expect(emittedEvents.length).to.equal(0);\n      });\n\n      it('should not emit an `sl-invalid` event when `.reportValidity()` is called in custom error case while disabled', async () => {\n        const control = await createControl();\n        control.setCustomValidity('error');\n        control.disabled = true;\n        await control.updateComplete;\n        const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.reportValidity());\n        expect(emittedEvents.length).to.equal(0);\n      });\n\n      it('Should find the correct form when given a form property', async () => {\n        const formId = 'test-form';\n        const form = await fixture(``);\n        const control = await createControl();\n        expect(control.getForm()).to.equal(null);\n        control.form = 'test-form';\n        await control.updateComplete;\n        expect(control.getForm()).to.equal(form);\n      });\n\n      it('Should find the correct form when given a form attribute', async () => {\n        const formId = 'test-form';\n        const form = await fixture(`
    `);\n        const control = await createControl();\n        expect(control.getForm()).to.equal(null);\n        control.setAttribute('form', 'test-form');\n\n        await control.updateComplete;\n        expect(control.getForm()).to.equal(form);\n      });\n    }\n\n    // Run special tests depending on component type\n\n    const mode = getMode(await createControl());\n\n    if (mode === 'slButtonOfTypeButton') {\n      runSpecialTests_slButtonOfTypeButton(createControl);\n    } else if (mode === 'slButtonWithHRef') {\n      runSpecialTests_slButtonWithHref(createControl);\n    } else {\n      runSpecialTests_standard(createControl);\n    }\n  });\n}\n\n//\n//  Special tests for \n//\nfunction runSpecialTests_slButtonOfTypeButton(createControl: CreateControlFn) {\n  it('should make sure that `.validity.valid` is `false` in custom error case', async () => {\n    const control = await createControl();\n    control.setCustomValidity('error');\n    expect(control.validity.valid).to.equal(false);\n  });\n\n  it('should make sure that calling `.checkValidity()` will still return `true` when custom error has been set', async () => {\n    const control = await createControl();\n    control.setCustomValidity('error');\n    expect(control.checkValidity()).to.equal(true);\n  });\n\n  it('should make sure that calling `.reportValidity()` will still return `true` when custom error has been set', async () => {\n    const control = await createControl();\n    control.setCustomValidity('error');\n    expect(control.reportValidity()).to.equal(true);\n  });\n\n  it('should not emit an `sl-invalid` event when `.checkValidity()` is called in custom error case, and not disabled', async () => {\n    const control = await createControl();\n    control.setCustomValidity('error');\n    control.disabled = false;\n    await control.updateComplete;\n    const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.checkValidity());\n    expect(emittedEvents.length).to.equal(0);\n  });\n\n  it('should not emit an `sl-invalid` event when `.reportValidity()` is called in custom error case, and not disabled', async () => {\n    const control = await createControl();\n    control.setCustomValidity('error');\n    control.disabled = false;\n    await control.updateComplete;\n    const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.reportValidity());\n\n    expect(emittedEvents.length).to.equal(0);\n  });\n}\n\n//\n// Special tests for \n//\nfunction runSpecialTests_slButtonWithHref(createControl: CreateControlFn) {\n  it('should make sure that calling `.checkValidity()` will return `true` in custom error case', async () => {\n    const control = await createControl();\n    control.setCustomValidity('error');\n    expect(control.checkValidity()).to.equal(true);\n  });\n\n  it('should make sure that calling `.reportValidity()` will return `true` in custom error case', async () => {\n    const control = await createControl();\n    control.setCustomValidity('error');\n    expect(control.reportValidity()).to.equal(true);\n  });\n\n  it('should not emit an `sl-invalid` event when `.checkValidity()` is called in custom error case', async () => {\n    const control = await createControl();\n    control.setCustomValidity('error');\n    await control.updateComplete;\n    const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.checkValidity());\n    expect(emittedEvents.length).to.equal(0);\n  });\n\n  it('should not emit an `sl-invalid` event when `.reportValidity()` is called in custom error case', async () => {\n    const control = await createControl();\n    control.setCustomValidity('error');\n    await control.updateComplete;\n    const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.reportValidity());\n    expect(emittedEvents.length).to.equal(0);\n  });\n}\n\n//\n// Special tests for all components with standard behavior\n//\nfunction runSpecialTests_standard(createControl: CreateControlFn) {\n  it('should make sure that `.validity.valid` is `false` in custom error case', async () => {\n    const control = await createControl();\n    control.setCustomValidity('error');\n    expect(control.validity.valid).to.equal(false);\n  });\n\n  it('should make sure that calling `.checkValidity()` will return `false` in custom error case', async () => {\n    const control = await createControl();\n    control.setCustomValidity('error');\n    expect(control.checkValidity()).to.equal(false);\n  });\n\n  it('should make sure that calling `.reportValidity()` will return `false` in custom error case', async () => {\n    const control = await createControl();\n    control.setCustomValidity('error');\n    expect(control.reportValidity()).to.equal(false);\n  });\n\n  it('should emit an `sl-invalid` event when `.checkValidity()` is called in custom error case and not disabled', async () => {\n    const control = await createControl();\n    control.setCustomValidity('error');\n    control.disabled = false;\n    await control.updateComplete;\n    const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.checkValidity());\n    expect(emittedEvents.length).to.equal(1);\n  });\n\n  it('should emit an `sl-invalid` event when `.reportValidity()` is called in custom error case and not disabled', async () => {\n    const control = await createControl();\n    control.setCustomValidity('error');\n    control.disabled = false;\n    await control.updateComplete;\n    const emittedEvents = checkEventEmissions(control, 'sl-invalid', () => control.reportValidity());\n    expect(emittedEvents.length).to.equal(1);\n  });\n}\n\n//\n// Local helper functions\n//\n\n// Creates a testable Shoelace form control instance\nasync function createFormControl(tagName: string): Promise {\n  return await fixture(`<${tagName}>`);\n}\n\n// Runs an action while listening for emitted events of a given type. Returns an array of all events of the given type\n// that have been been emitted while the action was running.\nfunction checkEventEmissions(control: ShoelaceFormControl, eventType: string, action: () => void): Event[] {\n  const emittedEvents: Event[] = [];\n\n  const eventHandler = (event: Event) => {\n    emittedEvents.push(event);\n  };\n\n  try {\n    control.addEventListener(eventType, eventHandler);\n    action();\n  } finally {\n    control.removeEventListener(eventType, eventHandler);\n  }\n\n  return emittedEvents;\n}\n\n// Component `sl-button` behaves quite different to the other components. To keep things simple we use simple conditions\n// here. `sl-button` might stay the only component in Shoelace core behaves that way, so we just hard code it here.\nfunction getMode(control: ShoelaceFormControl) {\n  if (\n    control.localName === 'sl-button' && //\n    'href' in control &&\n    'type' in control &&\n    control.type === 'button' &&\n    !control.href\n  ) {\n    return 'slButtonOfTypeButton';\n  }\n\n  // \n  if (control.localName === 'sl-button' && 'href' in control && !!control.href) {\n    return 'slButtonWithHRef';\n  }\n\n  // all other components\n  return 'standard';\n}\n"
  },
  {
    "path": "src/internal/test/wait-for-scrolling.ts",
    "content": "/**\n * Wait until an element has stopped scrolling\n * This considers the element to have stopped scrolling, as soon as it did not change its\n * scroll position for 20 successive animation frames\n * @param {HTMLElement} element - The element which is scrolled\n * @param {numeric} timeoutInMs - A timeout in ms. If the timeout has elapsed, the promise rejects\n * @returns A promise which resolves after the scrolling has stopped\n */\nexport const waitForScrollingToEnd = (element: Element, timeoutInMs = 500): Promise => {\n  let lastLeft = element.scrollLeft;\n  let lastTop = element.scrollTop;\n  let framesWithoutChange = 0;\n\n  return new Promise((resolve, reject) => {\n    const timeout = window.setTimeout(() => {\n      reject(new Error('Waiting for scroll end timed out'));\n    }, timeoutInMs);\n\n    function checkScrollingChanged() {\n      if (element.scrollLeft !== lastLeft || element.scrollTop !== lastTop) {\n        framesWithoutChange = 0;\n        lastLeft = window.scrollX;\n        lastTop = window.scrollY;\n      } else {\n        framesWithoutChange++;\n        if (framesWithoutChange >= 20) {\n          clearTimeout(timeout);\n          resolve();\n        }\n      }\n      window.requestAnimationFrame(checkScrollingChanged);\n    }\n\n    checkScrollingChanged();\n  });\n};\n"
  },
  {
    "path": "src/internal/test.ts",
    "content": "import { sendMouse } from '@web/test-runner-commands';\n\nfunction determineMousePosition(el: Element, position: string, offsetX: number, offsetY: number) {\n  const { x, y, width, height } = el.getBoundingClientRect();\n  const centerX = Math.floor(x + window.scrollX + width / 2);\n  const centerY = Math.floor(y + window.scrollY + height / 2);\n  let clickX: number;\n  let clickY: number;\n\n  switch (position) {\n    case 'top':\n      clickX = centerX;\n      clickY = y;\n      break;\n    case 'right':\n      clickX = x + width - 1;\n      clickY = centerY;\n      break;\n    case 'bottom':\n      clickX = centerX;\n      clickY = y + height - 1;\n      break;\n    case 'left':\n      clickX = x;\n      clickY = centerY;\n      break;\n    default:\n      clickX = centerX;\n      clickY = centerY;\n  }\n\n  clickX += offsetX;\n  clickY += offsetY;\n  return { clickX, clickY };\n}\n\n/** A testing utility that measures an element's position and clicks on it. */\nexport async function clickOnElement(\n  /** The element to click */\n  el: Element,\n  /** The location of the element to click */\n  position: 'top' | 'right' | 'bottom' | 'left' | 'center' = 'center',\n  /** The horizontal offset to apply to the position when clicking */\n  offsetX = 0,\n  /** The vertical offset to apply to the position when clicking */\n  offsetY = 0\n) {\n  const { clickX, clickY } = determineMousePosition(el, position, offsetX, offsetY);\n\n  await sendMouse({ type: 'click', position: [Math.round(clickX), Math.round(clickY)] });\n}\n\n/** A testing utility that moves the mouse onto an element. */\nexport async function moveMouseOnElement(\n  /** The element to click */\n  el: Element,\n  /** The location of the element to click */\n  position: 'top' | 'right' | 'bottom' | 'left' | 'center' = 'center',\n  /** The horizontal offset to apply to the position when clicking */\n  offsetX = 0,\n  /** The vertical offset to apply to the position when clicking */\n  offsetY = 0\n) {\n  const { clickX, clickY } = determineMousePosition(el, position, offsetX, offsetY);\n\n  await sendMouse({ type: 'move', position: [clickX, clickY] });\n}\n\n/** A testing utility that drags an element with the mouse. */\nexport async function dragElement(\n  /** The element to drag */\n  el: Element,\n  /** The horizontal distance to drag in pixels */\n  deltaX = 0,\n  /** The vertical distance to drag in pixels */\n  deltaY = 0,\n  callbacks: {\n    afterMouseDown?: () => void | Promise;\n    afterMouseMove?: () => void | Promise;\n  } = {}\n): Promise {\n  await moveMouseOnElement(el);\n  await sendMouse({ type: 'down' });\n\n  await callbacks.afterMouseDown?.();\n\n  const { clickX, clickY } = determineMousePosition(el, 'center', deltaX, deltaY);\n  await sendMouse({ type: 'move', position: [clickX, clickY] });\n\n  await callbacks.afterMouseMove?.();\n\n  await sendMouse({ type: 'up' });\n}\n"
  },
  {
    "path": "src/internal/watch.ts",
    "content": "import type { LitElement } from 'lit';\n\ntype UpdateHandler = (prev?: unknown, next?: unknown) => void;\n\ntype NonUndefined = A extends undefined ? never : A;\n\ntype UpdateHandlerFunctionKeys = {\n  [K in keyof T]-?: NonUndefined extends UpdateHandler ? K : never;\n}[keyof T];\n\ninterface WatchOptions {\n  /**\n   * If true, will only start watching after the initial update/render\n   */\n  waitUntilFirstUpdate?: boolean;\n}\n\n/**\n * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an\n * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the\n * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.\n *\n * Usage:\n *\n * @watch('propName')\n * handlePropChange(oldValue, newValue) {\n *   ...\n * }\n */\nexport function watch(propertyName: string | string[], options?: WatchOptions) {\n  const resolvedOptions: Required = {\n    waitUntilFirstUpdate: false,\n    ...options\n  };\n  return (proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys) => {\n    // @ts-expect-error - update is a protected property\n    const { update } = proto;\n    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];\n\n    // @ts-expect-error - update is a protected property\n    proto.update = function (this: ElemClass, changedProps: Map) {\n      watchedProperties.forEach(property => {\n        const key = property as keyof ElemClass;\n        if (changedProps.has(key)) {\n          const oldValue = changedProps.get(key);\n          const newValue = this[key];\n\n          if (oldValue !== newValue) {\n            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {\n              (this[decoratedFnName] as unknown as UpdateHandler)(oldValue, newValue);\n            }\n          }\n        }\n      });\n\n      update.call(this, changedProps);\n    };\n  };\n}\n"
  },
  {
    "path": "src/shoelace-autoloader.ts",
    "content": "import { getBasePath } from './utilities/base-path.js';\n\nconst observer = new MutationObserver(mutations => {\n  for (const { addedNodes } of mutations) {\n    for (const node of addedNodes) {\n      if (node.nodeType === Node.ELEMENT_NODE) {\n        discover(node as Element);\n      }\n    }\n  }\n});\n\n/**\n * Checks a node for undefined elements and attempts to register them.\n */\nexport async function discover(root: Element | ShadowRoot) {\n  const rootTagName = root instanceof Element ? root.tagName.toLowerCase() : '';\n  const rootIsShoelaceElement = rootTagName?.startsWith('sl-');\n  const tags = [...root.querySelectorAll(':not(:defined)')]\n    .map(el => el.tagName.toLowerCase())\n    .filter(tag => tag.startsWith('sl-'));\n\n  // If the root element is an undefined Shoelace component, add it to the list\n  if (rootIsShoelaceElement && !customElements.get(rootTagName)) {\n    tags.push(rootTagName);\n  }\n\n  // Make the list unique\n  const tagsToRegister = [...new Set(tags)];\n\n  await Promise.allSettled(tagsToRegister.map(tagName => register(tagName)));\n}\n\n/**\n * Registers an element by tag name.\n */\nfunction register(tagName: string): Promise {\n  // If the element is already defined, there's nothing more to do\n  if (customElements.get(tagName)) {\n    return Promise.resolve();\n  }\n\n  const tagWithoutPrefix = tagName.replace(/^sl-/i, '');\n  const path = getBasePath(`components/${tagWithoutPrefix}/${tagWithoutPrefix}.js`);\n\n  // Register it\n  return new Promise((resolve, reject) => {\n    import(path).then(() => resolve()).catch(() => reject(new Error(`Unable to autoload <${tagName}> from ${path}`)));\n  });\n}\n\n// Initial discovery\ndiscover(document.body);\n\n// Listen for new undefined elements\nobserver.observe(document.documentElement, { subtree: true, childList: true });\n"
  },
  {
    "path": "src/shoelace.ts",
    "content": "// Components\nexport { default as SlAlert } from './components/alert/alert.js';\nexport { default as SlAnimatedImage } from './components/animated-image/animated-image.js';\nexport { default as SlAnimation } from './components/animation/animation.js';\nexport { default as SlAvatar } from './components/avatar/avatar.js';\nexport { default as SlBadge } from './components/badge/badge.js';\nexport { default as SlBreadcrumb } from './components/breadcrumb/breadcrumb.js';\nexport { default as SlBreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item.js';\nexport { default as SlButton } from './components/button/button.js';\nexport { default as SlButtonGroup } from './components/button-group/button-group.js';\nexport { default as SlCard } from './components/card/card.js';\nexport { default as SlCarousel } from './components/carousel/carousel.js';\nexport { default as SlCarouselItem } from './components/carousel-item/carousel-item.js';\nexport { default as SlCheckbox } from './components/checkbox/checkbox.js';\nexport { default as SlColorPicker } from './components/color-picker/color-picker.js';\nexport { default as SlCopyButton } from './components/copy-button/copy-button.js';\nexport { default as SlDetails } from './components/details/details.js';\nexport { default as SlDialog } from './components/dialog/dialog.js';\nexport { default as SlDivider } from './components/divider/divider.js';\nexport { default as SlDrawer } from './components/drawer/drawer.js';\nexport { default as SlDropdown } from './components/dropdown/dropdown.js';\nexport { default as SlFormatBytes } from './components/format-bytes/format-bytes.js';\nexport { default as SlFormatDate } from './components/format-date/format-date.js';\nexport { default as SlFormatNumber } from './components/format-number/format-number.js';\nexport { default as SlIcon } from './components/icon/icon.js';\nexport { default as SlIconButton } from './components/icon-button/icon-button.js';\nexport { default as SlImageComparer } from './components/image-comparer/image-comparer.js';\nexport { default as SlInclude } from './components/include/include.js';\nexport { default as SlInput } from './components/input/input.js';\nexport { default as SlMenu } from './components/menu/menu.js';\nexport { default as SlMenuItem } from './components/menu-item/menu-item.js';\nexport { default as SlMenuLabel } from './components/menu-label/menu-label.js';\nexport { default as SlMutationObserver } from './components/mutation-observer/mutation-observer.js';\nexport { default as SlOption } from './components/option/option.js';\nexport { default as SlPopup } from './components/popup/popup.js';\nexport { default as SlProgressBar } from './components/progress-bar/progress-bar.js';\nexport { default as SlProgressRing } from './components/progress-ring/progress-ring.js';\nexport { default as SlQrCode } from './components/qr-code/qr-code.js';\nexport { default as SlRadio } from './components/radio/radio.js';\nexport { default as SlRadioButton } from './components/radio-button/radio-button.js';\nexport { default as SlRadioGroup } from './components/radio-group/radio-group.js';\nexport { default as SlRange } from './components/range/range.js';\nexport { default as SlRating } from './components/rating/rating.js';\nexport { default as SlRelativeTime } from './components/relative-time/relative-time.js';\nexport { default as SlResizeObserver } from './components/resize-observer/resize-observer.js';\nexport { default as SlSelect } from './components/select/select.js';\nexport { default as SlSkeleton } from './components/skeleton/skeleton.js';\nexport { default as SlSpinner } from './components/spinner/spinner.js';\nexport { default as SlSplitPanel } from './components/split-panel/split-panel.js';\nexport { default as SlSwitch } from './components/switch/switch.js';\nexport { default as SlTab } from './components/tab/tab.js';\nexport { default as SlTabGroup } from './components/tab-group/tab-group.js';\nexport { default as SlTabPanel } from './components/tab-panel/tab-panel.js';\nexport { default as SlTag } from './components/tag/tag.js';\nexport { default as SlTextarea } from './components/textarea/textarea.js';\nexport { default as SlTooltip } from './components/tooltip/tooltip.js';\nexport { default as SlTree } from './components/tree/tree.js';\nexport { default as SlTreeItem } from './components/tree-item/tree-item.js';\nexport { default as SlVisuallyHidden } from './components/visually-hidden/visually-hidden.js';\n/* plop:component */\n\n// Utilities\nexport * from './utilities/animation.js';\nexport * from './utilities/base-path.js';\nexport * from './utilities/icon-library.js';\nexport * from './utilities/form.js';\n\n// Events\nexport * from './events/events.js';\n"
  },
  {
    "path": "src/styles/component.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n`;\n"
  },
  {
    "path": "src/styles/form-control.styles.ts",
    "content": "import { css } from 'lit';\n\nexport default css`\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: var(--sl-input-label-color);\n    margin-bottom: var(--sl-spacing-3x-small);\n  }\n\n  .form-control--has-label.form-control--small .form-control__label {\n    font-size: var(--sl-input-label-font-size-small);\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--sl-input-label-font-size-medium);\n  }\n\n  .form-control--has-label.form-control--large .form-control__label {\n    font-size: var(--sl-input-label-font-size-large);\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: var(--sl-input-required-content);\n    margin-inline-start: var(--sl-input-required-content-offset);\n    color: var(--sl-input-required-content-color);\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--sl-input-help-text-color);\n    margin-top: var(--sl-spacing-3x-small);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--sl-input-help-text-font-size-small);\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--sl-input-help-text-font-size-medium);\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--sl-input-help-text-font-size-large);\n  }\n\n  .form-control--has-help-text.form-control--radio-group .form-control__help-text {\n    margin-top: var(--sl-spacing-2x-small);\n  }\n`;\n"
  },
  {
    "path": "src/themes/_utility.css",
    "content": "/*\n * This file contains utility classes that can't be contained in a component and must be applied to the light DOM. None\n * of the rules in this stylesheet should target component tags or HTML tags, and all classes *must* start with \".sl-\"\n * to reduce the possibility of collisions.\n */\n\n@supports (scrollbar-gutter: stable) {\n  .sl-scroll-lock {\n    scrollbar-gutter: var(--sl-scroll-lock-gutter) !important;\n  }\n\n  .sl-scroll-lock body {\n    overflow: hidden !important;\n  }\n}\n\n/** This can go away once Safari has scrollbar-gutter support. */\n@supports not (scrollbar-gutter: stable) {\n  .sl-scroll-lock body {\n    padding-right: var(--sl-scroll-lock-size) !important;\n    overflow: hidden !important;\n  }\n}\n\n.sl-toast-stack {\n  position: fixed;\n  top: 0;\n  inset-inline-end: 0;\n  z-index: var(--sl-z-index-toast);\n  width: 28rem;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: auto;\n}\n\n.sl-toast-stack sl-alert {\n  margin: var(--sl-spacing-medium);\n}\n\n.sl-toast-stack sl-alert::part(base) {\n  box-shadow: var(--sl-shadow-large);\n}\n"
  },
  {
    "path": "src/themes/dark.css",
    "content": ":host,\n.sl-theme-dark {\n  color-scheme: dark;\n\n  /*\n   * Color Primitives\n   */\n\n  /* Gray */\n  --sl-color-gray-50: hsl(240 5.1% 15%);\n  --sl-color-gray-100: hsl(240 5.7% 18.2%);\n  --sl-color-gray-200: hsl(240 4.6% 22%);\n  --sl-color-gray-300: hsl(240 5% 27.6%);\n  --sl-color-gray-400: hsl(240 5% 35.5%);\n  --sl-color-gray-500: hsl(240 3.7% 44%);\n  --sl-color-gray-600: hsl(240 5.3% 58%);\n  --sl-color-gray-700: hsl(240 5.6% 73%);\n  --sl-color-gray-800: hsl(240 7.3% 84%);\n  --sl-color-gray-900: hsl(240 9.1% 91.8%);\n  --sl-color-gray-950: hsl(0 0% 95%);\n\n  /* Red */\n  --sl-color-red-50: hsl(0 56% 23.9%);\n  --sl-color-red-100: hsl(0.6 60% 33.9%);\n  --sl-color-red-200: hsl(0.9 67.2% 37.1%);\n  --sl-color-red-300: hsl(1.1 71.3% 43.7%);\n  --sl-color-red-400: hsl(1 76% 52.5%);\n  --sl-color-red-500: hsl(0.7 89.6% 57.2%);\n  --sl-color-red-600: hsl(0 98.6% 67.9%);\n  --sl-color-red-700: hsl(0 100% 72.3%);\n  --sl-color-red-800: hsl(0 100% 85.6%);\n  --sl-color-red-900: hsl(0 100% 90.3%);\n  --sl-color-red-950: hsl(0 100% 95.9%);\n\n  /* Orange */\n  --sl-color-orange-50: hsl(15 64.2% 23.3%);\n  --sl-color-orange-100: hsl(15.1 70.9% 31.1%);\n  --sl-color-orange-200: hsl(15.3 75.7% 35.5%);\n  --sl-color-orange-300: hsl(17.1 83.5% 42.7%);\n  --sl-color-orange-400: hsl(20.1 88% 50.8%);\n  --sl-color-orange-500: hsl(24.3 100% 50.5%);\n  --sl-color-orange-600: hsl(27.2 100% 57.7%);\n  --sl-color-orange-700: hsl(31.3 100% 68.7%);\n  --sl-color-orange-800: hsl(33.8 100% 79.3%);\n  --sl-color-orange-900: hsl(38.9 100% 87.7%);\n  --sl-color-orange-950: hsl(46.2 100% 95%);\n\n  /* Amber */\n  --sl-color-amber-50: hsl(21.9 66.3% 21.1%);\n  --sl-color-amber-100: hsl(21.5 73.6% 29.7%);\n  --sl-color-amber-200: hsl(22.3 77.6% 33.3%);\n  --sl-color-amber-300: hsl(25.4 84.2% 39.6%);\n  --sl-color-amber-400: hsl(31.4 87.4% 46.7%);\n  --sl-color-amber-500: hsl(37 96.6% 48.3%);\n  --sl-color-amber-600: hsl(43.3 100% 53.4%);\n  --sl-color-amber-700: hsl(46.5 100% 61.1%);\n  --sl-color-amber-800: hsl(49.3 100% 73%);\n  --sl-color-amber-900: hsl(51.8 100% 85%);\n  --sl-color-amber-950: hsl(60 100% 94.6%);\n\n  /* Yellow */\n  --sl-color-yellow-50: hsl(32.5 60% 18.2%);\n  --sl-color-yellow-100: hsl(28.1 68.6% 29%);\n  --sl-color-yellow-200: hsl(31.3 75.8% 30.8%);\n  --sl-color-yellow-300: hsl(34.7 84.4% 35.3%);\n  --sl-color-yellow-400: hsl(40.1 87.3% 43.3%);\n  --sl-color-yellow-500: hsl(44.7 88% 46%);\n  --sl-color-yellow-600: hsl(47.7 100% 50.9%);\n  --sl-color-yellow-700: hsl(51.3 100% 59.9%);\n  --sl-color-yellow-800: hsl(54.6 100% 73%);\n  --sl-color-yellow-900: hsl(58.9 100% 84.2%);\n  --sl-color-yellow-950: hsl(60 100% 94%);\n\n  /* Lime */\n  --sl-color-lime-50: hsl(86.5 54.4% 18%);\n  --sl-color-lime-100: hsl(87.6 56.8% 23.3%);\n  --sl-color-lime-200: hsl(85.8 63.2% 24.5%);\n  --sl-color-lime-300: hsl(86.1 72% 29.4%);\n  --sl-color-lime-400: hsl(85.5 76.8% 37.3%);\n  --sl-color-lime-500: hsl(84.3 74.2% 42.1%);\n  --sl-color-lime-600: hsl(82.8 81.5% 52.6%);\n  --sl-color-lime-700: hsl(82 89.9% 64%);\n  --sl-color-lime-800: hsl(80.9 97.9% 76.6%);\n  --sl-color-lime-900: hsl(77.9 100% 85.8%);\n  --sl-color-lime-950: hsl(69.5 100% 93.8%);\n\n  /* Green */\n  --sl-color-green-50: hsl(144.3 53.6% 16%);\n  --sl-color-green-100: hsl(143.2 55.4% 23.5%);\n  --sl-color-green-200: hsl(141.5 58.2% 26.3%);\n  --sl-color-green-300: hsl(140.8 64.2% 31.8%);\n  --sl-color-green-400: hsl(140.3 68% 39.2%);\n  --sl-color-green-500: hsl(141.1 64.9% 43%);\n  --sl-color-green-600: hsl(141.6 72.4% 55.2%);\n  --sl-color-green-700: hsl(141.7 82.7% 70.1%);\n  --sl-color-green-800: hsl(141 90.9% 82.1%);\n  --sl-color-green-900: hsl(142 100% 89.1%);\n  --sl-color-green-950: hsl(144 100% 95.5%);\n\n  /* Emerald */\n  --sl-color-emerald-50: hsl(164.3 75% 13.5%);\n  --sl-color-emerald-100: hsl(163.5 72.6% 20.1%);\n  --sl-color-emerald-200: hsl(162.1 73.7% 22.4%);\n  --sl-color-emerald-300: hsl(161.3 77.3% 27.6%);\n  --sl-color-emerald-400: hsl(159.6 77.1% 34.3%);\n  --sl-color-emerald-500: hsl(159.1 73.5% 37.9%);\n  --sl-color-emerald-600: hsl(157.8 66.8% 48.9%);\n  --sl-color-emerald-700: hsl(156.2 76.1% 63.8%);\n  --sl-color-emerald-800: hsl(152.4 84.4% 77.4%);\n  --sl-color-emerald-900: hsl(149.3 100% 87%);\n  --sl-color-emerald-950: hsl(158.6 100% 94.8%);\n\n  /* Teal */\n  --sl-color-teal-50: hsl(176.5 51.5% 15.4%);\n  --sl-color-teal-100: hsl(175.9 54.7% 22.3%);\n  --sl-color-teal-200: hsl(175.9 60.7% 23.9%);\n  --sl-color-teal-300: hsl(174.5 67.3% 28.8%);\n  --sl-color-teal-400: hsl(174.4 71.9% 34.9%);\n  --sl-color-teal-500: hsl(173.1 71% 38.3%);\n  --sl-color-teal-600: hsl(172.3 68.2% 48.1%);\n  --sl-color-teal-700: hsl(170.5 81.3% 61.5%);\n  --sl-color-teal-800: hsl(168.4 92.1% 75.2%);\n  --sl-color-teal-900: hsl(168.3 100% 86%);\n  --sl-color-teal-950: hsl(180 100% 95.5%);\n\n  /* Cyan */\n  --sl-color-cyan-50: hsl(197.1 53.8% 20.3%);\n  --sl-color-cyan-100: hsl(196.8 57.3% 27.2%);\n  --sl-color-cyan-200: hsl(195.3 62.7% 29.4%);\n  --sl-color-cyan-300: hsl(193.5 71.3% 34.1%);\n  --sl-color-cyan-400: hsl(192.5 76.8% 40.6%);\n  --sl-color-cyan-500: hsl(189.4 78.6% 42.6%);\n  --sl-color-cyan-600: hsl(188.2 89.1% 51.7%);\n  --sl-color-cyan-700: hsl(187 98.6% 66.2%);\n  --sl-color-cyan-800: hsl(184.9 100% 78.3%);\n  --sl-color-cyan-900: hsl(180 100% 86.6%);\n  --sl-color-cyan-950: hsl(180 100% 94.8%);\n\n  /* Sky */\n  --sl-color-sky-50: hsl(203 63.8% 20.9%);\n  --sl-color-sky-100: hsl(203.4 70.4% 28%);\n  --sl-color-sky-200: hsl(202.7 75.8% 30.8%);\n  --sl-color-sky-300: hsl(203.1 80.4% 36.1%);\n  --sl-color-sky-400: hsl(202.1 80.5% 44.3%);\n  --sl-color-sky-500: hsl(199.7 85.9% 47.7%);\n  --sl-color-sky-600: hsl(198.7 97.9% 57.2%);\n  --sl-color-sky-700: hsl(198.7 100% 70.5%);\n  --sl-color-sky-800: hsl(198.8 100% 82.5%);\n  --sl-color-sky-900: hsl(198.5 100% 89.9%);\n  --sl-color-sky-950: hsl(186 100% 95.5%);\n\n  /* Blue */\n  --sl-color-blue-50: hsl(227.1 49.5% 22.7%);\n  --sl-color-blue-100: hsl(225.8 58.9% 36.8%);\n  --sl-color-blue-200: hsl(227.7 64.4% 42.9%);\n  --sl-color-blue-300: hsl(226.1 72.7% 51.2%);\n  --sl-color-blue-400: hsl(222.6 86.5% 56.3%);\n  --sl-color-blue-500: hsl(217.8 95.8% 57.4%);\n  --sl-color-blue-600: hsl(213.3 100% 65%);\n  --sl-color-blue-700: hsl(210.9 100% 74.8%);\n  --sl-color-blue-800: hsl(211.5 100% 83.4%);\n  --sl-color-blue-900: hsl(211 100% 88.9%);\n  --sl-color-blue-950: hsl(201.8 100% 95.3%);\n\n  /* Indigo */\n  --sl-color-indigo-50: hsl(243.5 40.8% 27%);\n  --sl-color-indigo-100: hsl(242.9 45.7% 37.6%);\n  --sl-color-indigo-200: hsl(244.7 52.7% 43.1%);\n  --sl-color-indigo-300: hsl(245.3 60.5% 52.4%);\n  --sl-color-indigo-400: hsl(244.1 79.2% 60.4%);\n  --sl-color-indigo-500: hsl(239.6 88.7% 63.8%);\n  --sl-color-indigo-600: hsl(234.5 96.7% 70.9%);\n  --sl-color-indigo-700: hsl(229.4 100% 78.3%);\n  --sl-color-indigo-800: hsl(227.1 100% 85%);\n  --sl-color-indigo-900: hsl(223.8 100% 89.9%);\n  --sl-color-indigo-950: hsl(220 100% 95.1%);\n\n  /* Violet */\n  --sl-color-violet-50: hsl(265.1 57.3% 25.4%);\n  --sl-color-violet-100: hsl(263.5 63.8% 39.4%);\n  --sl-color-violet-200: hsl(263.4 66.2% 44.1%);\n  --sl-color-violet-300: hsl(263.7 72.8% 52.4%);\n  --sl-color-violet-400: hsl(262.5 87.3% 59.8%);\n  --sl-color-violet-500: hsl(258.3 95.1% 63.2%);\n  --sl-color-violet-600: hsl(255.1 100% 67.2%);\n  --sl-color-violet-700: hsl(253 100% 81.5%);\n  --sl-color-violet-800: hsl(251.7 100% 87.9%);\n  --sl-color-violet-900: hsl(254.1 100% 91.7%);\n  --sl-color-violet-950: hsl(257.1 100% 96.1%);\n\n  /* Purple */\n  --sl-color-purple-50: hsl(276 54.3% 20.5%);\n  --sl-color-purple-100: hsl(273.6 61.8% 35.4%);\n  --sl-color-purple-200: hsl(272.9 64% 41.4%);\n  --sl-color-purple-300: hsl(271.9 68.1% 49.2%);\n  --sl-color-purple-400: hsl(271.5 85.1% 57.8%);\n  --sl-color-purple-500: hsl(270.7 96.4% 62.1%);\n  --sl-color-purple-600: hsl(270.5 100% 71.9%);\n  --sl-color-purple-700: hsl(270.9 100% 81.3%);\n  --sl-color-purple-800: hsl(272.4 100% 87.7%);\n  --sl-color-purple-900: hsl(276.7 100% 91.5%);\n  --sl-color-purple-950: hsl(300 100% 96.5%);\n\n  /* Fuchsia */\n\n  --sl-color-fuchsia-50: hsl(297.1 51.2% 18.6%);\n  --sl-color-fuchsia-100: hsl(296.7 59.5% 31.5%);\n  --sl-color-fuchsia-200: hsl(295.4 65.4% 35.1%);\n  --sl-color-fuchsia-300: hsl(294.6 67.4% 42.2%);\n  --sl-color-fuchsia-400: hsl(293.3 68.7% 51.2%);\n  --sl-color-fuchsia-500: hsl(292.1 88.4% 57.7%);\n  --sl-color-fuchsia-600: hsl(292 98.5% 59.5%);\n  --sl-color-fuchsia-700: hsl(292.4 100% 79.5%);\n  --sl-color-fuchsia-800: hsl(292.9 100% 86.8%);\n  --sl-color-fuchsia-900: hsl(300 100% 91.5%);\n  --sl-color-fuchsia-950: hsl(300 100% 96.3%);\n\n  /* Pink */\n  --sl-color-pink-50: hsl(336.2 59.6% 20%);\n  --sl-color-pink-100: hsl(336.8 63.9% 34%);\n  --sl-color-pink-200: hsl(336.8 68.7% 37.6%);\n  --sl-color-pink-300: hsl(336.1 71.8% 44.5%);\n  --sl-color-pink-400: hsl(333.9 74.9% 53.1%);\n  --sl-color-pink-500: hsl(330.7 86.3% 57.7%);\n  --sl-color-pink-600: hsl(328.6 91.5% 67.2%);\n  --sl-color-pink-700: hsl(327.4 97.6% 78.7%);\n  --sl-color-pink-800: hsl(325.1 100% 86.6%);\n  --sl-color-pink-900: hsl(322.1 100% 91.3%);\n  --sl-color-pink-950: hsl(315 100% 95.9%);\n\n  /* Rose */\n  --sl-color-rose-50: hsl(342.3 62.9% 21.5%);\n  --sl-color-rose-100: hsl(342.8 68.9% 34.2%);\n  --sl-color-rose-200: hsl(344.8 72.6% 37.3%);\n  --sl-color-rose-300: hsl(346.9 75.8% 43.7%);\n  --sl-color-rose-400: hsl(348.2 80.1% 52.7%);\n  --sl-color-rose-500: hsl(350.4 94.8% 57.5%);\n  --sl-color-rose-600: hsl(351.2 100% 58.1%);\n  --sl-color-rose-700: hsl(352.3 100% 78.1%);\n  --sl-color-rose-800: hsl(352 100% 86.2%);\n  --sl-color-rose-900: hsl(354.5 100% 90.7%);\n  --sl-color-rose-950: hsl(353.3 100% 95.7%);\n\n  /*\n   * Theme Tokens\n   */\n\n  /* Primary */\n  --sl-color-primary-50: var(--sl-color-sky-50);\n  --sl-color-primary-100: var(--sl-color-sky-100);\n  --sl-color-primary-200: var(--sl-color-sky-200);\n  --sl-color-primary-300: var(--sl-color-sky-300);\n  --sl-color-primary-400: var(--sl-color-sky-400);\n  --sl-color-primary-500: var(--sl-color-sky-500);\n  --sl-color-primary-600: var(--sl-color-sky-600);\n  --sl-color-primary-700: var(--sl-color-sky-700);\n  --sl-color-primary-800: var(--sl-color-sky-800);\n  --sl-color-primary-900: var(--sl-color-sky-900);\n  --sl-color-primary-950: var(--sl-color-sky-950);\n\n  /* Success */\n  --sl-color-success-50: var(--sl-color-green-50);\n  --sl-color-success-100: var(--sl-color-green-100);\n  --sl-color-success-200: var(--sl-color-green-200);\n  --sl-color-success-300: var(--sl-color-green-300);\n  --sl-color-success-400: var(--sl-color-green-400);\n  --sl-color-success-500: var(--sl-color-green-500);\n  --sl-color-success-600: var(--sl-color-green-600);\n  --sl-color-success-700: var(--sl-color-green-700);\n  --sl-color-success-800: var(--sl-color-green-800);\n  --sl-color-success-900: var(--sl-color-green-900);\n  --sl-color-success-950: var(--sl-color-green-950);\n\n  /* Warning */\n  --sl-color-warning-50: var(--sl-color-amber-50);\n  --sl-color-warning-100: var(--sl-color-amber-100);\n  --sl-color-warning-200: var(--sl-color-amber-200);\n  --sl-color-warning-300: var(--sl-color-amber-300);\n  --sl-color-warning-400: var(--sl-color-amber-400);\n  --sl-color-warning-500: var(--sl-color-amber-500);\n  --sl-color-warning-600: var(--sl-color-amber-600);\n  --sl-color-warning-700: var(--sl-color-amber-700);\n  --sl-color-warning-800: var(--sl-color-amber-800);\n  --sl-color-warning-900: var(--sl-color-amber-900);\n  --sl-color-warning-950: var(--sl-color-amber-950);\n\n  /* Danger */\n  --sl-color-danger-50: var(--sl-color-red-50);\n  --sl-color-danger-100: var(--sl-color-red-100);\n  --sl-color-danger-200: var(--sl-color-red-200);\n  --sl-color-danger-300: var(--sl-color-red-300);\n  --sl-color-danger-400: var(--sl-color-red-400);\n  --sl-color-danger-500: var(--sl-color-red-500);\n  --sl-color-danger-600: var(--sl-color-red-600);\n  --sl-color-danger-700: var(--sl-color-red-700);\n  --sl-color-danger-800: var(--sl-color-red-800);\n  --sl-color-danger-900: var(--sl-color-red-900);\n  --sl-color-danger-950: var(--sl-color-red-950);\n\n  /* Neutral */\n  --sl-color-neutral-50: var(--sl-color-gray-50);\n  --sl-color-neutral-100: var(--sl-color-gray-100);\n  --sl-color-neutral-200: var(--sl-color-gray-200);\n  --sl-color-neutral-300: var(--sl-color-gray-300);\n  --sl-color-neutral-400: var(--sl-color-gray-400);\n  --sl-color-neutral-500: var(--sl-color-gray-500);\n  --sl-color-neutral-600: var(--sl-color-gray-600);\n  --sl-color-neutral-700: var(--sl-color-gray-700);\n  --sl-color-neutral-800: var(--sl-color-gray-800);\n  --sl-color-neutral-900: var(--sl-color-gray-900);\n  --sl-color-neutral-950: var(--sl-color-gray-950);\n\n  /* Neutral one-offs */\n  --sl-color-neutral-0: hsl(240, 5.9%, 11%);\n  --sl-color-neutral-1000: hsl(0, 0%, 100%);\n\n  /*\n   * Border radii\n   */\n\n  --sl-border-radius-small: 0.1875rem; /* 3px */\n  --sl-border-radius-medium: 0.25rem; /* 4px */\n  --sl-border-radius-large: 0.5rem; /* 8px */\n  --sl-border-radius-x-large: 1rem; /* 16px */\n\n  --sl-border-radius-circle: 50%;\n  --sl-border-radius-pill: 9999px;\n\n  /*\n   * Elevations\n   */\n\n  --sl-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);\n  --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);\n  --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 24%);\n  --sl-shadow-large: 0 2px 8px rgb(0 0 0 / 24%);\n  --sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 24%);\n\n  /*\n   * Spacings\n   */\n\n  --sl-spacing-3x-small: 0.125rem; /* 2px */\n  --sl-spacing-2x-small: 0.25rem; /* 4px */\n  --sl-spacing-x-small: 0.5rem; /* 8px */\n  --sl-spacing-small: 0.75rem; /* 12px */\n  --sl-spacing-medium: 1rem; /* 16px */\n  --sl-spacing-large: 1.25rem; /* 20px */\n  --sl-spacing-x-large: 1.75rem; /* 28px */\n  --sl-spacing-2x-large: 2.25rem; /* 36px */\n  --sl-spacing-3x-large: 3rem; /* 48px */\n  --sl-spacing-4x-large: 4.5rem; /* 72px */\n\n  /*\n   * Transitions\n   */\n\n  --sl-transition-x-slow: 1000ms;\n  --sl-transition-slow: 500ms;\n  --sl-transition-medium: 250ms;\n  --sl-transition-fast: 150ms;\n  --sl-transition-x-fast: 50ms;\n\n  /*\n   * Typography\n   */\n\n  /* Fonts */\n  --sl-font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n  --sl-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  --sl-font-serif: Georgia, 'Times New Roman', serif;\n\n  /* Font sizes */\n  --sl-font-size-2x-small: 0.625rem; /* 10px */\n  --sl-font-size-x-small: 0.75rem; /* 12px */\n  --sl-font-size-small: 0.875rem; /* 14px */\n  --sl-font-size-medium: 1rem; /* 16px */\n  --sl-font-size-large: 1.25rem; /* 20px */\n  --sl-font-size-x-large: 1.5rem; /* 24px */\n  --sl-font-size-2x-large: 2.25rem; /* 36px */\n  --sl-font-size-3x-large: 3rem; /* 48px */\n  --sl-font-size-4x-large: 4.5rem; /* 72px */\n\n  /* Font weights */\n  --sl-font-weight-light: 300;\n  --sl-font-weight-normal: 400;\n  --sl-font-weight-semibold: 500;\n  --sl-font-weight-bold: 700;\n\n  /* Letter spacings */\n  --sl-letter-spacing-denser: -0.03em;\n  --sl-letter-spacing-dense: -0.015em;\n  --sl-letter-spacing-normal: normal;\n  --sl-letter-spacing-loose: 0.075em;\n  --sl-letter-spacing-looser: 0.15em;\n\n  /* Line heights */\n  --sl-line-height-denser: 1;\n  --sl-line-height-dense: 1.4;\n  --sl-line-height-normal: 1.8;\n  --sl-line-height-loose: 2.2;\n  --sl-line-height-looser: 2.6;\n\n  /* Focus rings */\n  --sl-focus-ring-color: var(--sl-color-primary-700);\n  --sl-focus-ring-style: solid;\n  --sl-focus-ring-width: 3px;\n  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);\n  --sl-focus-ring-offset: 1px;\n\n  /*\n   * Forms\n   */\n\n  /* Buttons */\n  --sl-button-font-size-small: var(--sl-font-size-x-small);\n  --sl-button-font-size-medium: var(--sl-font-size-small);\n  --sl-button-font-size-large: var(--sl-font-size-medium);\n\n  /* Inputs */\n  --sl-input-height-small: 1.875rem; /* 30px */\n  --sl-input-height-medium: 2.5rem; /* 40px */\n  --sl-input-height-large: 3.125rem; /* 50px */\n\n  --sl-input-background-color: var(--sl-color-neutral-0);\n  --sl-input-background-color-hover: var(--sl-input-background-color);\n  --sl-input-background-color-focus: var(--sl-input-background-color);\n  --sl-input-background-color-disabled: var(--sl-color-neutral-100);\n  --sl-input-border-color: var(--sl-color-neutral-400);\n  --sl-input-border-color-hover: var(--sl-color-neutral-500);\n  --sl-input-border-color-focus: var(--sl-color-primary-600);\n  --sl-input-border-color-disabled: var(--sl-color-neutral-400);\n  --sl-input-border-width: 1px;\n  --sl-input-required-content: '*';\n  --sl-input-required-content-offset: -2px;\n  --sl-input-required-content-color: var(--sl-input-label-color);\n\n  --sl-input-border-radius-small: var(--sl-border-radius-medium);\n  --sl-input-border-radius-medium: var(--sl-border-radius-medium);\n  --sl-input-border-radius-large: var(--sl-border-radius-medium);\n\n  --sl-input-font-family: var(--sl-font-sans);\n  --sl-input-font-weight: var(--sl-font-weight-normal);\n  --sl-input-font-size-small: var(--sl-font-size-small);\n  --sl-input-font-size-medium: var(--sl-font-size-medium);\n  --sl-input-font-size-large: var(--sl-font-size-large);\n  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);\n\n  --sl-input-color: var(--sl-color-neutral-700);\n  --sl-input-color-hover: var(--sl-color-neutral-700);\n  --sl-input-color-focus: var(--sl-color-neutral-700);\n  --sl-input-color-disabled: var(--sl-color-neutral-900);\n  --sl-input-icon-color: var(--sl-color-neutral-500);\n  --sl-input-icon-color-hover: var(--sl-color-neutral-600);\n  --sl-input-icon-color-focus: var(--sl-color-neutral-600);\n  --sl-input-placeholder-color: var(--sl-color-neutral-500);\n  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);\n  --sl-input-spacing-small: var(--sl-spacing-small);\n  --sl-input-spacing-medium: var(--sl-spacing-medium);\n  --sl-input-spacing-large: var(--sl-spacing-large);\n\n  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);\n  --sl-input-focus-ring-offset: 0;\n\n  --sl-input-filled-background-color: var(--sl-color-neutral-100);\n  --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);\n  --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);\n  --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);\n  --sl-input-filled-color: var(--sl-color-neutral-800);\n  --sl-input-filled-color-hover: var(--sl-color-neutral-800);\n  --sl-input-filled-color-focus: var(--sl-color-neutral-700);\n  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);\n\n  /* Labels */\n  --sl-input-label-font-size-small: var(--sl-font-size-small);\n  --sl-input-label-font-size-medium: var(--sl-font-size-medium);\n  --sl-input-label-font-size-large: var(--sl-font-size-large);\n  --sl-input-label-color: inherit;\n\n  /* Help text */\n  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);\n  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);\n  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);\n  --sl-input-help-text-color: var(--sl-color-neutral-600);\n\n  /* Toggles (checkboxes, radios, switches) */\n  --sl-toggle-size-small: 0.875rem; /* 14px */\n  --sl-toggle-size-medium: 1.125rem; /* 18px */\n  --sl-toggle-size-large: 1.375rem; /* 22px */\n\n  /*\n   * Overlays\n   */\n\n  --sl-overlay-background-color: hsl(0 0% 0% / 43%);\n\n  /*\n   * Panels\n   */\n\n  --sl-panel-background-color: var(--sl-color-neutral-50);\n  --sl-panel-border-color: var(--sl-color-neutral-200);\n  --sl-panel-border-width: 1px;\n\n  /*\n   * Tooltips\n   */\n\n  --sl-tooltip-border-radius: var(--sl-border-radius-medium);\n  --sl-tooltip-background-color: var(--sl-color-neutral-800);\n  --sl-tooltip-color: var(--sl-color-neutral-0);\n  --sl-tooltip-font-family: var(--sl-font-sans);\n  --sl-tooltip-font-weight: var(--sl-font-weight-normal);\n  --sl-tooltip-font-size: var(--sl-font-size-small);\n  --sl-tooltip-line-height: var(--sl-line-height-dense);\n  --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);\n  --sl-tooltip-arrow-size: 6px;\n\n  /*\n   * Z-indexes\n   */\n\n  --sl-z-index-drawer: 700;\n  --sl-z-index-dialog: 800;\n  --sl-z-index-dropdown: 900;\n  --sl-z-index-toast: 950;\n  --sl-z-index-tooltip: 1000;\n}\n\n/* _utility.css */\n"
  },
  {
    "path": "src/themes/light.css",
    "content": ":root,\n:host,\n.sl-theme-light {\n  color-scheme: light;\n\n  /*\n   * Color Primitives\n   */\n\n  /* Gray */\n  --sl-color-gray-50: hsl(0 0% 97.5%);\n  --sl-color-gray-100: hsl(240 4.8% 95.9%);\n  --sl-color-gray-200: hsl(240 5.9% 90%);\n  --sl-color-gray-300: hsl(240 4.9% 83.9%);\n  --sl-color-gray-400: hsl(240 5% 64.9%);\n  --sl-color-gray-500: hsl(240 3.8% 46.1%);\n  --sl-color-gray-600: hsl(240 5.2% 33.9%);\n  --sl-color-gray-700: hsl(240 5.3% 26.1%);\n  --sl-color-gray-800: hsl(240 3.7% 15.9%);\n  --sl-color-gray-900: hsl(240 5.9% 10%);\n  --sl-color-gray-950: hsl(240 7.3% 8%);\n\n  /* Red */\n  --sl-color-red-50: hsl(0 85.7% 97.3%);\n  --sl-color-red-100: hsl(0 93.3% 94.1%);\n  --sl-color-red-200: hsl(0 96.3% 89.4%);\n  --sl-color-red-300: hsl(0 93.5% 81.8%);\n  --sl-color-red-400: hsl(0 90.6% 70.8%);\n  --sl-color-red-500: hsl(0 84.2% 60.2%);\n  --sl-color-red-600: hsl(0 72.2% 50.6%);\n  --sl-color-red-700: hsl(0 73.7% 41.8%);\n  --sl-color-red-800: hsl(0 70% 35.3%);\n  --sl-color-red-900: hsl(0 62.8% 30.6%);\n  --sl-color-red-950: hsl(0 60% 19.6%);\n\n  /* Orange */\n  --sl-color-orange-50: hsl(33.3 100% 96.5%);\n  --sl-color-orange-100: hsl(34.3 100% 91.8%);\n  --sl-color-orange-200: hsl(32.1 97.7% 83.1%);\n  --sl-color-orange-300: hsl(30.7 97.2% 72.4%);\n  --sl-color-orange-400: hsl(27 96% 61%);\n  --sl-color-orange-500: hsl(24.6 95% 53.1%);\n  --sl-color-orange-600: hsl(20.5 90.2% 48.2%);\n  --sl-color-orange-700: hsl(17.5 88.3% 40.4%);\n  --sl-color-orange-800: hsl(15 79.1% 33.7%);\n  --sl-color-orange-900: hsl(15.3 74.6% 27.8%);\n  --sl-color-orange-950: hsl(15.2 69.1% 19%);\n\n  /* Amber */\n  --sl-color-amber-50: hsl(48 100% 96.1%);\n  --sl-color-amber-100: hsl(48 96.5% 88.8%);\n  --sl-color-amber-200: hsl(48 96.6% 76.7%);\n  --sl-color-amber-300: hsl(45.9 96.7% 64.5%);\n  --sl-color-amber-400: hsl(43.3 96.4% 56.3%);\n  --sl-color-amber-500: hsl(37.7 92.1% 50.2%);\n  --sl-color-amber-600: hsl(32.1 94.6% 43.7%);\n  --sl-color-amber-700: hsl(26 90.5% 37.1%);\n  --sl-color-amber-800: hsl(22.7 82.5% 31.4%);\n  --sl-color-amber-900: hsl(21.7 77.8% 26.5%);\n  --sl-color-amber-950: hsl(22.9 74.1% 16.7%);\n\n  /* Yellow */\n  --sl-color-yellow-50: hsl(54.5 91.7% 95.3%);\n  --sl-color-yellow-100: hsl(54.9 96.7% 88%);\n  --sl-color-yellow-200: hsl(52.8 98.3% 76.9%);\n  --sl-color-yellow-300: hsl(50.4 97.8% 63.5%);\n  --sl-color-yellow-400: hsl(47.9 95.8% 53.1%);\n  --sl-color-yellow-500: hsl(45.4 93.4% 47.5%);\n  --sl-color-yellow-600: hsl(40.6 96.1% 40.4%);\n  --sl-color-yellow-700: hsl(35.5 91.7% 32.9%);\n  --sl-color-yellow-800: hsl(31.8 81% 28.8%);\n  --sl-color-yellow-900: hsl(28.4 72.5% 25.7%);\n  --sl-color-yellow-950: hsl(33.1 69% 13.9%);\n\n  /* Lime */\n  --sl-color-lime-50: hsl(78.3 92% 95.1%);\n  --sl-color-lime-100: hsl(79.6 89.1% 89.2%);\n  --sl-color-lime-200: hsl(80.9 88.5% 79.6%);\n  --sl-color-lime-300: hsl(82 84.5% 67.1%);\n  --sl-color-lime-400: hsl(82.7 78% 55.5%);\n  --sl-color-lime-500: hsl(83.7 80.5% 44.3%);\n  --sl-color-lime-600: hsl(84.8 85.2% 34.5%);\n  --sl-color-lime-700: hsl(85.9 78.4% 27.3%);\n  --sl-color-lime-800: hsl(86.3 69% 22.7%);\n  --sl-color-lime-900: hsl(87.6 61.2% 20.2%);\n  --sl-color-lime-950: hsl(86.5 60.6% 13.9%);\n\n  /* Green */\n  --sl-color-green-50: hsl(138.5 76.5% 96.7%);\n  --sl-color-green-100: hsl(140.6 84.2% 92.5%);\n  --sl-color-green-200: hsl(141 78.9% 85.1%);\n  --sl-color-green-300: hsl(141.7 76.6% 73.1%);\n  --sl-color-green-400: hsl(141.9 69.2% 58%);\n  --sl-color-green-500: hsl(142.1 70.6% 45.3%);\n  --sl-color-green-600: hsl(142.1 76.2% 36.3%);\n  --sl-color-green-700: hsl(142.4 71.8% 29.2%);\n  --sl-color-green-800: hsl(142.8 64.2% 24.1%);\n  --sl-color-green-900: hsl(143.8 61.2% 20.2%);\n  --sl-color-green-950: hsl(144.3 60.7% 12%);\n\n  /* Emerald */\n  --sl-color-emerald-50: hsl(151.8 81% 95.9%);\n  --sl-color-emerald-100: hsl(149.3 80.4% 90%);\n  --sl-color-emerald-200: hsl(152.4 76% 80.4%);\n  --sl-color-emerald-300: hsl(156.2 71.6% 66.9%);\n  --sl-color-emerald-400: hsl(158.1 64.4% 51.6%);\n  --sl-color-emerald-500: hsl(160.1 84.1% 39.4%);\n  --sl-color-emerald-600: hsl(161.4 93.5% 30.4%);\n  --sl-color-emerald-700: hsl(162.9 93.5% 24.3%);\n  --sl-color-emerald-800: hsl(163.1 88.1% 19.8%);\n  --sl-color-emerald-900: hsl(164.2 85.7% 16.5%);\n  --sl-color-emerald-950: hsl(164.3 87.5% 9.4%);\n\n  /* Teal */\n  --sl-color-teal-50: hsl(166.2 76.5% 96.7%);\n  --sl-color-teal-100: hsl(167.2 85.5% 89.2%);\n  --sl-color-teal-200: hsl(168.4 83.8% 78.2%);\n  --sl-color-teal-300: hsl(170.6 76.9% 64.3%);\n  --sl-color-teal-400: hsl(172.5 66% 50.4%);\n  --sl-color-teal-500: hsl(173.4 80.4% 40%);\n  --sl-color-teal-600: hsl(174.7 83.9% 31.6%);\n  --sl-color-teal-700: hsl(175.3 77.4% 26.1%);\n  --sl-color-teal-800: hsl(176.1 69.4% 21.8%);\n  --sl-color-teal-900: hsl(175.9 60.8% 19%);\n  --sl-color-teal-950: hsl(176.5 58.6% 11.4%);\n\n  /* Cyan */\n  --sl-color-cyan-50: hsl(183.2 100% 96.3%);\n  --sl-color-cyan-100: hsl(185.1 95.9% 90.4%);\n  --sl-color-cyan-200: hsl(186.2 93.5% 81.8%);\n  --sl-color-cyan-300: hsl(187 92.4% 69%);\n  --sl-color-cyan-400: hsl(187.9 85.7% 53.3%);\n  --sl-color-cyan-500: hsl(188.7 94.5% 42.7%);\n  --sl-color-cyan-600: hsl(191.6 91.4% 36.5%);\n  --sl-color-cyan-700: hsl(192.9 82.3% 31%);\n  --sl-color-cyan-800: hsl(194.4 69.6% 27.1%);\n  --sl-color-cyan-900: hsl(196.4 63.6% 23.7%);\n  --sl-color-cyan-950: hsl(196.8 61% 16.1%);\n\n  /* Sky */\n  --sl-color-sky-50: hsl(204 100% 97.1%);\n  --sl-color-sky-100: hsl(204 93.8% 93.7%);\n  --sl-color-sky-200: hsl(200.6 94.4% 86.1%);\n  --sl-color-sky-300: hsl(199.4 95.5% 73.9%);\n  --sl-color-sky-400: hsl(198.4 93.2% 59.6%);\n  --sl-color-sky-500: hsl(198.6 88.7% 48.4%);\n  --sl-color-sky-600: hsl(200.4 98% 39.4%);\n  --sl-color-sky-700: hsl(201.3 96.3% 32.2%);\n  --sl-color-sky-800: hsl(201 90% 27.5%);\n  --sl-color-sky-900: hsl(202 80.3% 23.9%);\n  --sl-color-sky-950: hsl(202.3 73.8% 16.5%);\n\n  /* Blue */\n  --sl-color-blue-50: hsl(213.8 100% 96.9%);\n  --sl-color-blue-100: hsl(214.3 94.6% 92.7%);\n  --sl-color-blue-200: hsl(213.3 96.9% 87.3%);\n  --sl-color-blue-300: hsl(211.7 96.4% 78.4%);\n  --sl-color-blue-400: hsl(213.1 93.9% 67.8%);\n  --sl-color-blue-500: hsl(217.2 91.2% 59.8%);\n  --sl-color-blue-600: hsl(221.2 83.2% 53.3%);\n  --sl-color-blue-700: hsl(224.3 76.3% 48%);\n  --sl-color-blue-800: hsl(225.9 70.7% 40.2%);\n  --sl-color-blue-900: hsl(224.4 64.3% 32.9%);\n  --sl-color-blue-950: hsl(226.2 55.3% 18.4%);\n\n  /* Indigo */\n  --sl-color-indigo-50: hsl(225.9 100% 96.7%);\n  --sl-color-indigo-100: hsl(226.5 100% 93.9%);\n  --sl-color-indigo-200: hsl(228 96.5% 88.8%);\n  --sl-color-indigo-300: hsl(229.7 93.5% 81.8%);\n  --sl-color-indigo-400: hsl(234.5 89.5% 73.9%);\n  --sl-color-indigo-500: hsl(238.7 83.5% 66.7%);\n  --sl-color-indigo-600: hsl(243.4 75.4% 58.6%);\n  --sl-color-indigo-700: hsl(244.5 57.9% 50.6%);\n  --sl-color-indigo-800: hsl(243.7 54.5% 41.4%);\n  --sl-color-indigo-900: hsl(242.2 47.4% 34.3%);\n  --sl-color-indigo-950: hsl(243.5 43.6% 22.9%);\n\n  /* Violet */\n  --sl-color-violet-50: hsl(250 100% 97.6%);\n  --sl-color-violet-100: hsl(251.4 91.3% 95.5%);\n  --sl-color-violet-200: hsl(250.5 95.2% 91.8%);\n  --sl-color-violet-300: hsl(252.5 94.7% 85.1%);\n  --sl-color-violet-400: hsl(255.1 91.7% 76.3%);\n  --sl-color-violet-500: hsl(258.3 89.5% 66.3%);\n  --sl-color-violet-600: hsl(262.1 83.3% 57.8%);\n  --sl-color-violet-700: hsl(263.4 70% 50.4%);\n  --sl-color-violet-800: hsl(263.4 69.3% 42.2%);\n  --sl-color-violet-900: hsl(263.5 67.4% 34.9%);\n  --sl-color-violet-950: hsl(265.1 61.5% 21.4%);\n\n  /* Purple */\n  --sl-color-purple-50: hsl(270 100% 98%);\n  --sl-color-purple-100: hsl(268.7 100% 95.5%);\n  --sl-color-purple-200: hsl(268.6 100% 91.8%);\n  --sl-color-purple-300: hsl(269.2 97.4% 85.1%);\n  --sl-color-purple-400: hsl(270 95.2% 75.3%);\n  --sl-color-purple-500: hsl(270.7 91% 65.1%);\n  --sl-color-purple-600: hsl(271.5 81.3% 55.9%);\n  --sl-color-purple-700: hsl(272.1 71.7% 47.1%);\n  --sl-color-purple-800: hsl(272.9 67.2% 39.4%);\n  --sl-color-purple-900: hsl(273.6 65.6% 32%);\n  --sl-color-purple-950: hsl(276 59.5% 16.5%);\n\n  /* Fuchsia */\n  --sl-color-fuchsia-50: hsl(289.1 100% 97.8%);\n  --sl-color-fuchsia-100: hsl(287 100% 95.5%);\n  --sl-color-fuchsia-200: hsl(288.3 95.8% 90.6%);\n  --sl-color-fuchsia-300: hsl(291.1 93.1% 82.9%);\n  --sl-color-fuchsia-400: hsl(292 91.4% 72.5%);\n  --sl-color-fuchsia-500: hsl(292.2 84.1% 60.6%);\n  --sl-color-fuchsia-600: hsl(293.4 69.5% 48.8%);\n  --sl-color-fuchsia-700: hsl(294.7 72.4% 39.8%);\n  --sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%);\n  --sl-color-fuchsia-900: hsl(296.7 63.6% 28%);\n  --sl-color-fuchsia-950: hsl(297.1 56.8% 14.5%);\n\n  /* Pink */\n  --sl-color-pink-50: hsl(327.3 73.3% 97.1%);\n  --sl-color-pink-100: hsl(325.7 77.8% 94.7%);\n  --sl-color-pink-200: hsl(325.9 84.6% 89.8%);\n  --sl-color-pink-300: hsl(327.4 87.1% 81.8%);\n  --sl-color-pink-400: hsl(328.6 85.5% 70.2%);\n  --sl-color-pink-500: hsl(330.4 81.2% 60.4%);\n  --sl-color-pink-600: hsl(333.3 71.4% 50.6%);\n  --sl-color-pink-700: hsl(335.1 77.6% 42%);\n  --sl-color-pink-800: hsl(335.8 74.4% 35.3%);\n  --sl-color-pink-900: hsl(335.9 69% 30.4%);\n  --sl-color-pink-950: hsl(336.2 65.4% 15.9%);\n\n  /* Rose */\n  --sl-color-rose-50: hsl(355.7 100% 97.3%);\n  --sl-color-rose-100: hsl(355.6 100% 94.7%);\n  --sl-color-rose-200: hsl(352.7 96.1% 90%);\n  --sl-color-rose-300: hsl(352.6 95.7% 81.8%);\n  --sl-color-rose-400: hsl(351.3 94.5% 71.4%);\n  --sl-color-rose-500: hsl(349.7 89.2% 60.2%);\n  --sl-color-rose-600: hsl(346.8 77.2% 49.8%);\n  --sl-color-rose-700: hsl(345.3 82.7% 40.8%);\n  --sl-color-rose-800: hsl(343.4 79.7% 34.7%);\n  --sl-color-rose-900: hsl(341.5 75.5% 30.4%);\n  --sl-color-rose-950: hsl(341.3 70.1% 17.1%);\n\n  /*\n   * Theme Tokens\n   */\n\n  /* Primary */\n  --sl-color-primary-50: var(--sl-color-sky-50);\n  --sl-color-primary-100: var(--sl-color-sky-100);\n  --sl-color-primary-200: var(--sl-color-sky-200);\n  --sl-color-primary-300: var(--sl-color-sky-300);\n  --sl-color-primary-400: var(--sl-color-sky-400);\n  --sl-color-primary-500: var(--sl-color-sky-500);\n  --sl-color-primary-600: var(--sl-color-sky-600);\n  --sl-color-primary-700: var(--sl-color-sky-700);\n  --sl-color-primary-800: var(--sl-color-sky-800);\n  --sl-color-primary-900: var(--sl-color-sky-900);\n  --sl-color-primary-950: var(--sl-color-sky-950);\n\n  /* Success */\n  --sl-color-success-50: var(--sl-color-green-50);\n  --sl-color-success-100: var(--sl-color-green-100);\n  --sl-color-success-200: var(--sl-color-green-200);\n  --sl-color-success-300: var(--sl-color-green-300);\n  --sl-color-success-400: var(--sl-color-green-400);\n  --sl-color-success-500: var(--sl-color-green-500);\n  --sl-color-success-600: var(--sl-color-green-600);\n  --sl-color-success-700: var(--sl-color-green-700);\n  --sl-color-success-800: var(--sl-color-green-800);\n  --sl-color-success-900: var(--sl-color-green-900);\n  --sl-color-success-950: var(--sl-color-green-950);\n\n  /* Warning */\n  --sl-color-warning-50: var(--sl-color-amber-50);\n  --sl-color-warning-100: var(--sl-color-amber-100);\n  --sl-color-warning-200: var(--sl-color-amber-200);\n  --sl-color-warning-300: var(--sl-color-amber-300);\n  --sl-color-warning-400: var(--sl-color-amber-400);\n  --sl-color-warning-500: var(--sl-color-amber-500);\n  --sl-color-warning-600: var(--sl-color-amber-600);\n  --sl-color-warning-700: var(--sl-color-amber-700);\n  --sl-color-warning-800: var(--sl-color-amber-800);\n  --sl-color-warning-900: var(--sl-color-amber-900);\n  --sl-color-warning-950: var(--sl-color-amber-950);\n\n  /* Danger */\n  --sl-color-danger-50: var(--sl-color-red-50);\n  --sl-color-danger-100: var(--sl-color-red-100);\n  --sl-color-danger-200: var(--sl-color-red-200);\n  --sl-color-danger-300: var(--sl-color-red-300);\n  --sl-color-danger-400: var(--sl-color-red-400);\n  --sl-color-danger-500: var(--sl-color-red-500);\n  --sl-color-danger-600: var(--sl-color-red-600);\n  --sl-color-danger-700: var(--sl-color-red-700);\n  --sl-color-danger-800: var(--sl-color-red-800);\n  --sl-color-danger-900: var(--sl-color-red-900);\n  --sl-color-danger-950: var(--sl-color-red-950);\n\n  /* Neutral */\n  --sl-color-neutral-50: var(--sl-color-gray-50);\n  --sl-color-neutral-100: var(--sl-color-gray-100);\n  --sl-color-neutral-200: var(--sl-color-gray-200);\n  --sl-color-neutral-300: var(--sl-color-gray-300);\n  --sl-color-neutral-400: var(--sl-color-gray-400);\n  --sl-color-neutral-500: var(--sl-color-gray-500);\n  --sl-color-neutral-600: var(--sl-color-gray-600);\n  --sl-color-neutral-700: var(--sl-color-gray-700);\n  --sl-color-neutral-800: var(--sl-color-gray-800);\n  --sl-color-neutral-900: var(--sl-color-gray-900);\n  --sl-color-neutral-950: var(--sl-color-gray-950);\n\n  /* Neutral one-offs */\n  --sl-color-neutral-0: hsl(0, 0%, 100%);\n  --sl-color-neutral-1000: hsl(0, 0%, 0%);\n\n  /*\n   * Border radii\n   */\n\n  --sl-border-radius-small: 0.1875rem; /* 3px */\n  --sl-border-radius-medium: 0.25rem; /* 4px */\n  --sl-border-radius-large: 0.5rem; /* 8px */\n  --sl-border-radius-x-large: 1rem; /* 16px */\n\n  --sl-border-radius-circle: 50%;\n  --sl-border-radius-pill: 9999px;\n\n  /*\n   * Elevations\n   */\n\n  --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);\n  --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);\n  --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);\n  --sl-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);\n  --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);\n\n  /*\n   * Spacings\n   */\n\n  --sl-spacing-3x-small: 0.125rem; /* 2px */\n  --sl-spacing-2x-small: 0.25rem; /* 4px */\n  --sl-spacing-x-small: 0.5rem; /* 8px */\n  --sl-spacing-small: 0.75rem; /* 12px */\n  --sl-spacing-medium: 1rem; /* 16px */\n  --sl-spacing-large: 1.25rem; /* 20px */\n  --sl-spacing-x-large: 1.75rem; /* 28px */\n  --sl-spacing-2x-large: 2.25rem; /* 36px */\n  --sl-spacing-3x-large: 3rem; /* 48px */\n  --sl-spacing-4x-large: 4.5rem; /* 72px */\n\n  /*\n   * Transitions\n   */\n\n  --sl-transition-x-slow: 1000ms;\n  --sl-transition-slow: 500ms;\n  --sl-transition-medium: 250ms;\n  --sl-transition-fast: 150ms;\n  --sl-transition-x-fast: 50ms;\n\n  /*\n   * Typography\n   */\n\n  /* Fonts */\n  --sl-font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n  --sl-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  --sl-font-serif: Georgia, 'Times New Roman', serif;\n\n  /* Font sizes */\n  --sl-font-size-2x-small: 0.625rem; /* 10px */\n  --sl-font-size-x-small: 0.75rem; /* 12px */\n  --sl-font-size-small: 0.875rem; /* 14px */\n  --sl-font-size-medium: 1rem; /* 16px */\n  --sl-font-size-large: 1.25rem; /* 20px */\n  --sl-font-size-x-large: 1.5rem; /* 24px */\n  --sl-font-size-2x-large: 2.25rem; /* 36px */\n  --sl-font-size-3x-large: 3rem; /* 48px */\n  --sl-font-size-4x-large: 4.5rem; /* 72px */\n\n  /* Font weights */\n  --sl-font-weight-light: 300;\n  --sl-font-weight-normal: 400;\n  --sl-font-weight-semibold: 500;\n  --sl-font-weight-bold: 700;\n\n  /* Letter spacings */\n  --sl-letter-spacing-denser: -0.03em;\n  --sl-letter-spacing-dense: -0.015em;\n  --sl-letter-spacing-normal: normal;\n  --sl-letter-spacing-loose: 0.075em;\n  --sl-letter-spacing-looser: 0.15em;\n\n  /* Line heights */\n  --sl-line-height-denser: 1;\n  --sl-line-height-dense: 1.4;\n  --sl-line-height-normal: 1.8;\n  --sl-line-height-loose: 2.2;\n  --sl-line-height-looser: 2.6;\n\n  /* Focus rings */\n  --sl-focus-ring-color: var(--sl-color-primary-600);\n  --sl-focus-ring-style: solid;\n  --sl-focus-ring-width: 3px;\n  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);\n  --sl-focus-ring-offset: 1px;\n\n  /*\n   * Forms\n   */\n\n  /* Buttons */\n  --sl-button-font-size-small: var(--sl-font-size-x-small);\n  --sl-button-font-size-medium: var(--sl-font-size-small);\n  --sl-button-font-size-large: var(--sl-font-size-medium);\n\n  /* Inputs */\n  --sl-input-height-small: 1.875rem; /* 30px */\n  --sl-input-height-medium: 2.5rem; /* 40px */\n  --sl-input-height-large: 3.125rem; /* 50px */\n\n  --sl-input-background-color: var(--sl-color-neutral-0);\n  --sl-input-background-color-hover: var(--sl-input-background-color);\n  --sl-input-background-color-focus: var(--sl-input-background-color);\n  --sl-input-background-color-disabled: var(--sl-color-neutral-100);\n  --sl-input-border-color: var(--sl-color-neutral-300);\n  --sl-input-border-color-hover: var(--sl-color-neutral-400);\n  --sl-input-border-color-focus: var(--sl-color-primary-500);\n  --sl-input-border-color-disabled: var(--sl-color-neutral-300);\n  --sl-input-border-width: 1px;\n  --sl-input-required-content: '*';\n  --sl-input-required-content-offset: -2px;\n  --sl-input-required-content-color: var(--sl-input-label-color);\n\n  --sl-input-border-radius-small: var(--sl-border-radius-medium);\n  --sl-input-border-radius-medium: var(--sl-border-radius-medium);\n  --sl-input-border-radius-large: var(--sl-border-radius-medium);\n\n  --sl-input-font-family: var(--sl-font-sans);\n  --sl-input-font-weight: var(--sl-font-weight-normal);\n  --sl-input-font-size-small: var(--sl-font-size-small);\n  --sl-input-font-size-medium: var(--sl-font-size-medium);\n  --sl-input-font-size-large: var(--sl-font-size-large);\n  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);\n\n  --sl-input-color: var(--sl-color-neutral-700);\n  --sl-input-color-hover: var(--sl-color-neutral-700);\n  --sl-input-color-focus: var(--sl-color-neutral-700);\n  --sl-input-color-disabled: var(--sl-color-neutral-900);\n  --sl-input-icon-color: var(--sl-color-neutral-500);\n  --sl-input-icon-color-hover: var(--sl-color-neutral-600);\n  --sl-input-icon-color-focus: var(--sl-color-neutral-600);\n  --sl-input-placeholder-color: var(--sl-color-neutral-500);\n  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);\n  --sl-input-spacing-small: var(--sl-spacing-small);\n  --sl-input-spacing-medium: var(--sl-spacing-medium);\n  --sl-input-spacing-large: var(--sl-spacing-large);\n\n  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);\n  --sl-input-focus-ring-offset: 0;\n\n  --sl-input-filled-background-color: var(--sl-color-neutral-100);\n  --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);\n  --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);\n  --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);\n  --sl-input-filled-color: var(--sl-color-neutral-800);\n  --sl-input-filled-color-hover: var(--sl-color-neutral-800);\n  --sl-input-filled-color-focus: var(--sl-color-neutral-700);\n  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);\n\n  /* Labels */\n  --sl-input-label-font-size-small: var(--sl-font-size-small);\n  --sl-input-label-font-size-medium: var(--sl-font-size-medium);\n  --sl-input-label-font-size-large: var(--sl-font-size-large);\n  --sl-input-label-color: inherit;\n\n  /* Help text */\n  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);\n  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);\n  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);\n  --sl-input-help-text-color: var(--sl-color-neutral-500);\n\n  /* Toggles (checkboxes, radios, switches) */\n  --sl-toggle-size-small: 0.875rem; /* 14px */\n  --sl-toggle-size-medium: 1.125rem; /* 18px */\n  --sl-toggle-size-large: 1.375rem; /* 22px */\n\n  /*\n   * Overlays\n   */\n\n  --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);\n\n  /*\n   * Panels\n   */\n\n  --sl-panel-background-color: var(--sl-color-neutral-0);\n  --sl-panel-border-color: var(--sl-color-neutral-200);\n  --sl-panel-border-width: 1px;\n\n  /*\n   * Tooltips\n   */\n\n  --sl-tooltip-border-radius: var(--sl-border-radius-medium);\n  --sl-tooltip-background-color: var(--sl-color-neutral-800);\n  --sl-tooltip-color: var(--sl-color-neutral-0);\n  --sl-tooltip-font-family: var(--sl-font-sans);\n  --sl-tooltip-font-weight: var(--sl-font-weight-normal);\n  --sl-tooltip-font-size: var(--sl-font-size-small);\n  --sl-tooltip-line-height: var(--sl-line-height-dense);\n  --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);\n  --sl-tooltip-arrow-size: 6px;\n\n  /*\n   * Z-indexes\n   */\n\n  --sl-z-index-drawer: 700;\n  --sl-z-index-dialog: 800;\n  --sl-z-index-dropdown: 900;\n  --sl-z-index-toast: 950;\n  --sl-z-index-tooltip: 1000;\n}\n\n/* _utility.css */\n"
  },
  {
    "path": "src/translations/ar.ts",
    "content": "import { registerTranslation } from '@shoelace-style/localize';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'ar',\n  $name: 'العربية',\n  $dir: 'rtl',\n\n  carousel: 'كاروسيل',\n  clearEntry: 'حذف الخيارات',\n  close: 'اغلاق',\n  copied: 'تم النسخ',\n  copy: 'نسخ',\n  currentValue: 'القيمة الحالية',\n  error: 'خطأ',\n  goToSlide: (slide, count) => `عرض شريحة رقم ${slide} من ${count}`,\n  hidePassword: 'اخفاء كلمة المرور',\n  loading: 'جاري التحميل',\n  nextSlide: 'الشريحة التالية',\n  numOptionsSelected: num => {\n    if (num === 0) return 'لم يتم تحديد أي خيارات';\n    if (num === 1) return 'تم تحديد خيار واحد';\n    if (num === 2) return 'تم تحديد خياران';\n    if (num > 2 && num < 11) return `تم تحديد ${num} خيارات`;\n    return `تم تحديد ${num} خيار`;\n  },\n  previousSlide: 'الشريحة السابقة',\n  progress: 'مقدار التقدم',\n  remove: 'حذف',\n  resize: 'تغيير الحجم',\n  scrollToEnd: 'الانتقال الى النهاية',\n  scrollToStart: 'الانتقال الى البداية',\n  selectAColorFromTheScreen: 'اختر لون من الشاشة',\n  showPassword: 'عرض كلمة المرور',\n  slideNum: slide => `شريحة ${slide}`,\n  toggleColorFormat: 'تغيير صيغة عرض  اللون'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/cs.ts",
    "content": "import { registerTranslation } from '@shoelace-style/localize';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'cs',\n  $name: 'Čeština',\n  $dir: 'ltr',\n\n  carousel: 'Karusel',\n  clearEntry: 'Smazat položku',\n  close: 'Zavřít',\n  copied: 'Zkopírováno',\n  copy: 'Kopírovat',\n  currentValue: 'Současná hodnota',\n  error: 'Chyba',\n  goToSlide: (slide, count) => `Přejít na slide ${slide} z ${count}`,\n  hidePassword: 'Skrýt heslo',\n  loading: 'Nahrává se',\n  nextSlide: 'Další slide',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Nejsou vybrány žádné možnosti';\n    if (num === 1) return 'Je vybrána jedna možnost';\n    return `Počet vybraných možností: ${num}`;\n  },\n  previousSlide: 'Předchozí slide',\n  progress: 'Průběh',\n  remove: 'Odstranit',\n  resize: 'Změnit velikost',\n  scrollToEnd: 'Scrollovat na konec',\n  scrollToStart: 'Scrollovat na začátek',\n  selectAColorFromTheScreen: 'Vybrat barvu z obrazovky',\n  showPassword: 'Zobrazit heslo',\n  slideNum: slide => `Slide ${slide}`,\n  toggleColorFormat: 'Přepnout formát barvy'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/da.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'da',\n  $name: 'Dansk',\n  $dir: 'ltr',\n\n  carousel: 'Karrusel',\n  clearEntry: 'Ryd indtastning',\n  close: 'Luk',\n  copied: 'Kopieret',\n  copy: 'Kopier',\n  currentValue: 'Nuværende værdi',\n  error: 'Fejl',\n  goToSlide: (slide, count) => `Gå til dias ${slide} af ${count}`,\n  hidePassword: 'Skjul adgangskode',\n  loading: 'Indlæser',\n  nextSlide: 'Næste slide',\n  numOptionsSelected: (num: number) => {\n    if (num === 0) return 'Ingen valgt';\n    if (num === 1) return '1 valgt';\n    return `${num} valgt`;\n  },\n  previousSlide: 'Forrige dias',\n  progress: 'Status',\n  remove: 'Fjern',\n  resize: 'Tilpas størrelse',\n  scrollToEnd: 'Scroll til slut',\n  scrollToStart: 'Scroll til start',\n  selectAColorFromTheScreen: 'Vælg en farve fra skærmen',\n  showPassword: 'Vis adgangskode',\n  slideNum: slide => `Slide ${slide}`,\n  toggleColorFormat: 'Skift farveformat'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/de-ch.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport baseTranslation from './de.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  ...baseTranslation,\n  $code: 'de-CH',\n  $name: 'Deutsch (Schweiz)',\n\n  close: 'Schliessen',\n  resize: 'Grösse ändern'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/de.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'de',\n  $name: 'Deutsch',\n  $dir: 'ltr',\n\n  carousel: 'Karussell',\n  clearEntry: 'Eingabe löschen',\n  close: 'Schließen',\n  copied: 'Kopiert',\n  copy: 'Kopieren',\n  currentValue: 'Aktueller Wert',\n  error: 'Fehler',\n  goToSlide: (slide, count) => `Zu Folie ${slide} von ${count} gehen`,\n  hidePassword: 'Passwort verbergen',\n  loading: 'Wird geladen',\n  nextSlide: 'Nächste Folie',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Keine Optionen ausgewählt';\n    if (num === 1) return '1 Option ausgewählt';\n    return `${num} Optionen ausgewählt`;\n  },\n  previousSlide: 'Vorherige Folie',\n  progress: 'Fortschritt',\n  remove: 'Entfernen',\n  resize: 'Größe ändern',\n  scrollToEnd: 'Zum Ende scrollen',\n  scrollToStart: 'Zum Anfang scrollen',\n  selectAColorFromTheScreen: 'Farbe vom Bildschirm auswählen',\n  showPassword: 'Passwort anzeigen',\n  slideNum: slide => `Folie ${slide}`,\n  toggleColorFormat: 'Farbformat umschalten'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/en-gb.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport baseTranslation from './en.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  ...baseTranslation,\n  $code: 'en-GB',\n  $name: 'English (United Kingdom)',\n\n  selectAColorFromTheScreen: 'Select a colour from the screen',\n  toggleColorFormat: 'Toggle colour format'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/en.ts",
    "content": "import { registerTranslation } from '@shoelace-style/localize';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'en',\n  $name: 'English',\n  $dir: 'ltr',\n\n  carousel: 'Carousel',\n  clearEntry: 'Clear entry',\n  close: 'Close',\n  copied: 'Copied',\n  copy: 'Copy',\n  currentValue: 'Current value',\n  error: 'Error',\n  goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,\n  hidePassword: 'Hide password',\n  loading: 'Loading',\n  nextSlide: 'Next slide',\n  numOptionsSelected: num => {\n    if (num === 0) return 'No options selected';\n    if (num === 1) return '1 option selected';\n    return `${num} options selected`;\n  },\n  previousSlide: 'Previous slide',\n  progress: 'Progress',\n  remove: 'Remove',\n  resize: 'Resize',\n  scrollToEnd: 'Scroll to end',\n  scrollToStart: 'Scroll to start',\n  selectAColorFromTheScreen: 'Select a color from the screen',\n  showPassword: 'Show password',\n  slideNum: slide => `Slide ${slide}`,\n  toggleColorFormat: 'Toggle color format'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/es.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'es',\n  $name: 'Español',\n  $dir: 'ltr',\n\n  carousel: 'Carrusel',\n  clearEntry: 'Borrar entrada',\n  close: 'Cerrar',\n  copied: 'Copiado',\n  copy: 'Copiar',\n  currentValue: 'Valor actual',\n  error: 'Error',\n  goToSlide: (slide, count) => `Ir a la diapositiva ${slide} de ${count}`,\n  hidePassword: 'Ocultar contraseña',\n  loading: 'Cargando',\n  nextSlide: 'Siguiente diapositiva',\n  numOptionsSelected: num => {\n    if (num === 0) return 'No hay opciones seleccionadas';\n    if (num === 1) return '1 opción seleccionada';\n    return `${num} opción seleccionada`;\n  },\n  previousSlide: 'Diapositiva anterior',\n  progress: 'Progreso',\n  remove: 'Eliminar',\n  resize: 'Cambiar el tamaño',\n  scrollToEnd: 'Desplazarse hasta el final',\n  scrollToStart: 'Desplazarse al inicio',\n  selectAColorFromTheScreen: 'Seleccione un color de la pantalla',\n  showPassword: 'Mostrar contraseña',\n  slideNum: slide => `Diapositiva ${slide}`,\n  toggleColorFormat: 'Alternar formato de color'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/fa.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'fa',\n  $name: 'فارسی',\n  $dir: 'rtl',\n\n  carousel: 'چرخ فلک',\n  clearEntry: 'پاک کردن ورودی',\n  close: 'بستن',\n  copied: 'کپی شد',\n  copy: 'رونوشت',\n  currentValue: 'مقدار فعلی',\n  error: 'خطا',\n  goToSlide: (slide, count) => `رفتن به اسلاید ${slide} از ${count}`,\n  hidePassword: 'پنهان کردن رمز',\n  loading: 'بارگذاری',\n  nextSlide: 'اسلاید بعدی',\n  numOptionsSelected: num => {\n    if (num === 0) return 'هیچ گزینه ای انتخاب نشده است';\n    if (num === 1) return '1 گزینه انتخاب شده است';\n    return `${num} گزینه انتخاب شده است`;\n  },\n  previousSlide: 'اسلاید قبلی',\n  progress: 'پیشرفت',\n  remove: 'حذف',\n  resize: 'تغییر اندازه',\n  scrollToEnd: 'پیمایش به انتها',\n  scrollToStart: 'پیمایش به ابتدا',\n  selectAColorFromTheScreen: 'انتخاب یک رنگ از صفحه نمایش',\n  showPassword: 'نمایش رمز',\n  slideNum: slide => `اسلاید ${slide}`,\n  toggleColorFormat: 'تغییر قالب رنگ'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/fi.ts",
    "content": "import { registerTranslation } from '@shoelace-style/localize';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'fi',\n  $name: 'Suomi',\n  $dir: 'ltr',\n\n  carousel: 'Karuselli',\n  clearEntry: 'Poista merkintä',\n  close: 'Sulje',\n  copied: 'Kopioitu',\n  copy: 'Kopioi',\n  currentValue: 'Nykyinen arvo',\n  error: 'Virhe',\n  goToSlide: (slide, count) => `Siirry diaan ${slide} / ${count}`,\n  hidePassword: 'Piilota salasana',\n  loading: 'Ladataan',\n  nextSlide: 'Seuraava dia',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Ei valittuja vaihtoehtoja';\n    if (num === 1) return 'Yksi vaihtoehto valittu';\n    return `${num} vaihtoehtoa valittu`;\n  },\n  previousSlide: 'Edellinen dia',\n  progress: 'Edistyminen',\n  remove: 'Poista',\n  resize: 'Muuta kokoa',\n  scrollToEnd: 'Vieritä loppuun',\n  scrollToStart: 'Vieritä alkuun',\n  selectAColorFromTheScreen: 'Valitse väri näytöltä',\n  showPassword: 'Näytä salasana',\n  slideNum: slide => `Dia ${slide}`,\n  toggleColorFormat: 'Vaihda väriformaattia'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/fr.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'fr',\n  $name: 'Français',\n  $dir: 'ltr',\n\n  carousel: 'Carrousel',\n  clearEntry: `Effacer l'entrée`,\n  close: 'Fermer',\n  copied: 'Copié',\n  copy: 'Copier',\n  currentValue: 'Valeur actuelle',\n  error: 'Erreur',\n  goToSlide: (slide, count) => `Aller à la diapositive ${slide} de ${count}`,\n  hidePassword: 'Masquer le mot de passe',\n  loading: 'Chargement',\n  nextSlide: 'Diapositive suivante',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Aucune option sélectionnée';\n    if (num === 1) return '1 option sélectionnée';\n    return `${num} options sélectionnées`;\n  },\n  previousSlide: 'Diapositive précédente',\n  progress: 'Progrès',\n  remove: 'Retirer',\n  resize: 'Redimensionner',\n  scrollToEnd: `Faire défiler jusqu'à la fin`,\n  scrollToStart: `Faire défiler jusqu'au début`,\n  selectAColorFromTheScreen: `Sélectionnez une couleur à l'écran`,\n  showPassword: 'Montrer le mot de passe',\n  slideNum: slide => `Diapositive ${slide}`,\n  toggleColorFormat: 'Changer le format de couleur'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/he.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'he',\n  $name: 'עברית',\n  $dir: 'rtl',\n\n  carousel: 'קרוסלה',\n  clearEntry: 'נקה קלט',\n  close: 'סגור',\n  copied: 'מוּעֲתָק',\n  copy: 'העתק',\n  currentValue: 'ערך נוכחי',\n  error: 'שְׁגִיאָה',\n  goToSlide: (slide, count) => `עבור לשקופית ${slide} של ${count}`,\n  hidePassword: 'הסתר סיסמא',\n  loading: 'טוען',\n  nextSlide: 'Next slide',\n  numOptionsSelected: num => {\n    if (num === 0) return 'לא נבחרו אפשרויות';\n    if (num === 1) return 'נבחרה אפשרות אחת';\n    return `נבחרו ${num} אפשרויות`;\n  },\n  previousSlide: 'Previous slide',\n  progress: 'התקדמות',\n  remove: 'לְהַסִיר',\n  resize: 'שנה גודל',\n  scrollToEnd: 'גלול עד הסוף',\n  scrollToStart: 'גלול להתחלה',\n  selectAColorFromTheScreen: 'בחור צבע מהמסך',\n  showPassword: 'הראה סיסמה',\n  slideNum: slide => `שקופית ${slide}`,\n  toggleColorFormat: 'החלף פורמט צבע'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/hr.ts",
    "content": "import { registerTranslation } from '@shoelace-style/localize';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'hr',\n  $name: 'Hrvatski',\n  $dir: 'ltr',\n\n  carousel: 'Vrtuljak',\n  clearEntry: 'Očisti unos',\n  close: 'Zatvori',\n  copied: 'Kopirano',\n  copy: 'Kopiraj',\n  currentValue: 'Trenutna vrijednost',\n  error: 'Greška',\n  goToSlide: (slide, count) => `Idi na slajd ${slide} od ${count}`,\n  hidePassword: 'Sakrij lozinku',\n  loading: 'Učitavanje',\n  nextSlide: 'Sljedeći slajd',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Nije odabrana nijedna opcija';\n    if (num === 1) return '1 opcija je odabrana';\n    return `${num} odabranih opcija`;\n  },\n  previousSlide: 'Prethodni slajd',\n  progress: 'Napredak',\n  remove: 'Makni',\n  resize: 'Promijeni veličinu',\n  scrollToEnd: 'Skrolaj do kraja',\n  scrollToStart: 'Skrolaj na početak',\n  selectAColorFromTheScreen: 'Odaberi boju sa ekrana',\n  showPassword: 'Pokaži lozinku',\n  slideNum: slide => `Slajd ${slide}`,\n  toggleColorFormat: 'Zamijeni format boje'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/hu.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'hu',\n  $name: 'Magyar',\n  $dir: 'ltr',\n\n  carousel: 'Körhinta',\n  clearEntry: 'Bejegyzés törlése',\n  close: 'Bezárás',\n  copied: 'Másolva',\n  copy: 'Másolás',\n  currentValue: 'Aktuális érték',\n  error: 'Hiba',\n  goToSlide: (slide, count) => `Ugrás a ${count}/${slide}. diára`,\n  hidePassword: 'Jelszó elrejtése',\n  loading: 'Betöltés',\n  nextSlide: 'Következő dia',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Nincsenek kiválasztva opciók';\n    if (num === 1) return '1 lehetőség kiválasztva';\n    return `${num} lehetőség kiválasztva`;\n  },\n  previousSlide: 'Előző dia',\n  progress: 'Folyamat',\n  remove: 'Eltávolítás',\n  resize: 'Átméretezés',\n  scrollToEnd: 'Görgessen a végére',\n  scrollToStart: 'Görgessen az elejére',\n  selectAColorFromTheScreen: 'Szín választása a képernyőről',\n  showPassword: 'Jelszó megjelenítése',\n  slideNum: slide => `${slide}. dia`,\n  toggleColorFormat: 'Színformátum változtatása'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/id.ts",
    "content": "import { registerTranslation } from '@shoelace-style/localize';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'id',\n  $name: 'Bahasa Indonesia',\n  $dir: 'ltr',\n\n  carousel: 'Karousel',\n  clearEntry: 'Hapus entri',\n  close: 'Tutup',\n  copied: 'Disalin',\n  copy: 'Salin',\n  currentValue: 'Nilai saat ini',\n  error: 'Kesalahan',\n  goToSlide: (slide, count) => `Pergi ke slide ${slide} dari ${count}`,\n  hidePassword: 'Sembunyikan sandi',\n  loading: 'Memuat',\n  nextSlide: 'Slide berikutnya',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Tidak ada opsi yang dipilih';\n    if (num === 1) return '1 opsi yang dipilih';\n    return `${num} opsi yang dipilih`;\n  },\n  previousSlide: 'Slide sebelumnya',\n  progress: 'Kemajuan',\n  remove: 'Hapus',\n  resize: 'Ubah ukuran',\n  scrollToEnd: 'Gulir ke akhir',\n  scrollToStart: 'Gulir ke awal',\n  selectAColorFromTheScreen: 'Pilih warna dari layar',\n  showPassword: 'Tampilkan sandi',\n  slideNum: slide => `Slide ${slide}`,\n  toggleColorFormat: 'Beralih format warna'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/it.ts",
    "content": "import { registerTranslation } from '@shoelace-style/localize';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'it',\n  $name: 'Italian',\n  $dir: 'ltr',\n\n  carousel: 'Carosello',\n  clearEntry: 'Cancella inserimento',\n  close: 'Chiudi',\n  copied: 'Copiato',\n  copy: 'Copia',\n  currentValue: 'Valore attuale',\n  error: 'Errore',\n  goToSlide: (slide, count) => `Vai alla diapositiva ${slide} di ${count}`,\n  hidePassword: 'Nascondi password',\n  loading: 'In caricamento',\n  nextSlide: 'Prossima diapositiva',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Nessuna opzione selezionata';\n    if (num === 1) return '1 opzione selezionata';\n    return `${num} opzioni selezionate`;\n  },\n  previousSlide: 'Diapositiva precedente',\n  progress: 'Avanzamento',\n  remove: 'Rimuovi',\n  resize: 'Ridimensiona',\n  scrollToEnd: 'Scorri alla fine',\n  scrollToStart: \"Scorri all'inizio\",\n  selectAColorFromTheScreen: 'Seleziona un colore dalla schermo',\n  showPassword: 'Mostra password',\n  slideNum: slide => `Diapositiva ${slide}`,\n  toggleColorFormat: 'Cambia formato colore'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/ja.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'ja',\n  $name: '日本語',\n  $dir: 'ltr',\n\n  carousel: 'カルーセル',\n  clearEntry: 'クリア',\n  close: '閉じる',\n  copied: 'コピーしました',\n  copy: 'コピー',\n  currentValue: '現在の値',\n  error: 'エラー',\n  goToSlide: (slide, count) => `${count} 枚中 ${slide} 枚のスライドに移動`,\n  hidePassword: 'パスワードを隠す',\n  loading: '読み込み中',\n  nextSlide: '次のスライド',\n  numOptionsSelected: num => {\n    if (num === 0) return '項目が選択されていません';\n    return `${num} 個の項目が選択されました`;\n  },\n  previousSlide: '前のスライド',\n  progress: '進行',\n  remove: '削除',\n  resize: 'サイズ変更',\n  scrollToEnd: '最後にスクロールする',\n  scrollToStart: '最初にスクロールする',\n  selectAColorFromTheScreen: '画面から色を選択してください',\n  showPassword: 'パスワードを表示',\n  slideNum: slide => `スライド ${slide}`,\n  toggleColorFormat: '色のフォーマットを切り替える'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/nb.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'nb',\n  $name: 'Norwegian Bokmål',\n  $dir: 'ltr',\n\n  carousel: 'Karusell',\n  clearEntry: 'Tøm felt',\n  close: 'Lukk',\n  copied: 'Kopiert',\n  copy: 'Kopier',\n  currentValue: 'Nåværende verdi',\n  error: 'Feil',\n  goToSlide: (slide, count) => `Gå til visning ${slide} av ${count}`,\n  hidePassword: 'Skjul passord',\n  loading: 'Laster',\n  nextSlide: 'Neste visning',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Ingen alternativer valgt';\n    if (num === 1) return 'Ett alternativ valgt';\n    return `${num} alternativer valgt`;\n  },\n  previousSlide: 'Forrige visning',\n  progress: 'Fremdrift',\n  remove: 'Fjern',\n  resize: 'Endre størrelse',\n  scrollToEnd: 'Rull til slutten',\n  scrollToStart: 'Rull til starten',\n  selectAColorFromTheScreen: 'Velg en farge fra skjermen',\n  showPassword: 'Vis passord',\n  slideNum: slide => `Visning ${slide}`,\n  toggleColorFormat: 'Bytt fargeformat'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/nl.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'nl',\n  $name: 'Nederlands',\n  $dir: 'ltr',\n\n  carousel: 'Carrousel',\n  clearEntry: 'Invoer wissen',\n  close: 'Sluiten',\n  copied: 'Gekopieerd',\n  copy: 'Kopiëren',\n  currentValue: 'Huidige waarde',\n  error: 'Fout',\n  goToSlide: (slide, count) => `Ga naar slide ${slide} van ${count}`,\n  hidePassword: 'Verberg wachtwoord',\n  loading: 'Bezig met laden',\n  nextSlide: 'Volgende dia',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Geen optie geselecteerd';\n    if (num === 1) return '1 optie geselecteerd';\n    return `${num} opties geselecteerd`;\n  },\n  previousSlide: 'Vorige dia',\n  progress: 'Voortgang',\n  remove: 'Verwijderen',\n  resize: 'Formaat wijzigen',\n  scrollToEnd: 'Scroll naar einde',\n  scrollToStart: 'Scroll naar begin',\n  selectAColorFromTheScreen: 'Selecteer een kleur van het scherm',\n  showPassword: 'Laat wachtwoord zien',\n  slideNum: slide => `Schuif ${slide}`,\n  toggleColorFormat: 'Wissel kleurnotatie'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/nn.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'nn',\n  $name: 'Norwegian Nynorsk',\n  $dir: 'ltr',\n\n  carousel: 'Karusell',\n  clearEntry: 'Tøm felt',\n  close: 'Lukk',\n  copied: 'Kopiert',\n  copy: 'Kopier',\n  currentValue: 'Nåverande verdi',\n  error: 'Feil',\n  goToSlide: (slide, count) => `Gå til visning ${slide} av ${count}`,\n  hidePassword: 'Gøym passord',\n  loading: 'Lastar',\n  nextSlide: 'Neste visning',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Ingen alternativ valt';\n    if (num === 1) return 'Eitt alternativ valt';\n    return `${num} alternativ valt`;\n  },\n  previousSlide: 'Førre visning',\n  progress: 'Framdrift',\n  remove: 'Fjern',\n  resize: 'Endre storleik',\n  scrollToEnd: 'Rull til slutten',\n  scrollToStart: 'Rull til starten',\n  selectAColorFromTheScreen: 'Vel ein farge frå skjermen',\n  showPassword: 'Vis passord',\n  slideNum: slide => `Visning ${slide}`,\n  toggleColorFormat: 'Byt fargeformat'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/pl.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'pl',\n  $name: 'Polski',\n  $dir: 'ltr',\n\n  carousel: 'Karuzela',\n  clearEntry: 'Wyczyść wpis',\n  close: 'Zamknij',\n  copied: 'Skopiowane',\n  copy: 'Kopiuj',\n  currentValue: 'Aktualna wartość',\n  error: 'Błąd',\n  goToSlide: (slide, count) => `Przejdź do slajdu ${slide} z ${count}`,\n  hidePassword: 'Ukryj hasło',\n  loading: 'Ładowanie',\n  nextSlide: 'Następny slajd',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Nie wybrano opcji';\n    if (num === 1) return 'Wybrano 1 opcję';\n    return `Wybrano ${num} opcje`;\n  },\n  previousSlide: 'Poprzedni slajd',\n  progress: 'Postęp',\n  remove: 'Usunąć',\n  resize: 'Zmień rozmiar',\n  scrollToEnd: 'Przewiń do końca',\n  scrollToStart: 'Przewiń do początku',\n  selectAColorFromTheScreen: 'Próbkuj z ekranu',\n  showPassword: 'Pokaż hasło',\n  slideNum: slide => `Slajd ${slide}`,\n  toggleColorFormat: 'Przełącz format'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/pt.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'pt',\n  $name: 'Português',\n  $dir: 'ltr',\n\n  carousel: 'Carrossel',\n  clearEntry: 'Limpar entrada',\n  close: 'Fechar',\n  copied: 'Copiado',\n  copy: 'Copiar',\n  currentValue: 'Valor atual',\n  error: 'Erro',\n  goToSlide: (slide, count) => `Vá para o slide ${slide} de ${count}`,\n  hidePassword: 'Esconder a senha',\n  loading: 'Carregando',\n  nextSlide: 'Próximo slide',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Nenhuma opção selecionada';\n    if (num === 1) return '1 opção selecionada';\n    return `${num} opções selecionadas`;\n  },\n  previousSlide: 'Slide anterior',\n  progress: 'Progresso',\n  remove: 'Remover',\n  resize: 'Mudar o tamanho',\n  scrollToEnd: 'Rolar até o final',\n  scrollToStart: 'Rolar até o início',\n  selectAColorFromTheScreen: 'Selecionar uma cor da tela',\n  showPassword: 'Mostrar senha',\n  slideNum: slide => `Slide ${slide}`,\n  toggleColorFormat: 'Trocar o formato de cor'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/ru.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'ru',\n  $name: 'Русский',\n  $dir: 'ltr',\n\n  carousel: 'Карусель',\n  clearEntry: 'Очистить запись',\n  close: 'Закрыть',\n  copied: 'Скопировано',\n  copy: 'Скопировать',\n  currentValue: 'Текущее значение',\n  error: 'Ошибка',\n  goToSlide: (slide, count) => `Перейти к слайду ${slide} из ${count}`,\n  hidePassword: 'Скрыть пароль',\n  loading: 'Загрузка',\n  nextSlide: 'Следующий слайд',\n  numOptionsSelected: num => {\n    if (num === 0) return 'выбрано 0 вариантов';\n    if (num === 1) return 'Выбран 1 вариант';\n    return `выбрано ${num} варианта`;\n  },\n  previousSlide: 'Предыдущий слайд',\n  progress: 'Прогресс',\n  remove: 'Удалить',\n  resize: 'Изменить размер',\n  scrollToEnd: 'Пролистать до конца',\n  scrollToStart: 'Пролистать к началу',\n  selectAColorFromTheScreen: 'Выберите цвет на экране',\n  showPassword: 'Показать пароль',\n  slideNum: slide => `Слайд ${slide}`,\n  toggleColorFormat: 'Переключить цветовую модель'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/sl.ts",
    "content": "import { registerTranslation } from '@shoelace-style/localize';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'sl',\n  $name: 'Slovenski',\n  $dir: 'ltr',\n\n  carousel: 'Vrtiljak',\n  clearEntry: 'Počisti vnos',\n  close: 'Zapri',\n  copied: 'Kopirano',\n  copy: 'Kopiraj',\n  currentValue: 'Trenutna vrednost',\n  error: 'Napaka',\n  goToSlide: (slide, count) => `Pojdi na diapozitiv ${slide} od ${count}`,\n  hidePassword: 'Skrij geslo',\n  loading: 'Nalaganje',\n  nextSlide: 'Naslednji diapozitiv',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Nobena možnost ni izbrana';\n    if (num === 1) return '1 možnost izbrana';\n    if (num === 2) return '2 možnosti izbrani';\n    if (num === 3 || num === 4) return `${num} možnosti izbrane`;\n    return `${num} možnosti izbranih`;\n  },\n  previousSlide: 'Prejšnji diapozitiv',\n  progress: 'Napredek',\n  remove: 'Odstrani',\n  resize: 'Spremeni velikost',\n  scrollToEnd: 'Pomakni se na konec',\n  scrollToStart: 'Pomakni se na začetek',\n  selectAColorFromTheScreen: 'Izberite barvo z zaslona',\n  showPassword: 'Prikaži geslo',\n  slideNum: slide => `Diapozitiv ${slide}`,\n  toggleColorFormat: 'Preklopi format barve'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/sv.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'sv',\n  $name: 'Svenska',\n  $dir: 'ltr',\n\n  carousel: 'Karusell',\n  clearEntry: 'Återställ val',\n  close: 'Stäng',\n  copied: 'Kopierade',\n  copy: 'Kopiera',\n  currentValue: 'Nuvarande värde',\n  error: 'Fel',\n  goToSlide: (slide, count) => `Gå till bild ${slide} av ${count}`,\n  hidePassword: 'Dölj lösenord',\n  loading: 'Läser in',\n  nextSlide: 'Nästa bild',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Inga alternativ har valts';\n    if (num === 1) return '1 alternativ valt';\n    return `${num} alternativ valda`;\n  },\n  previousSlide: 'Föregående bild',\n  progress: 'Framsteg',\n  remove: 'Ta bort',\n  resize: 'Ändra storlek',\n  scrollToEnd: 'Skrolla till slutet',\n  scrollToStart: 'Skrolla till början',\n  selectAColorFromTheScreen: 'Välj en färg från skärmen',\n  showPassword: 'Visa lösenord',\n  slideNum: slide => `Bild ${slide}`,\n  toggleColorFormat: 'Växla färgformat'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/tr.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'tr',\n  $name: 'Türkçe',\n  $dir: 'ltr',\n\n  carousel: 'Atlıkarınca',\n  clearEntry: 'Girişi sil',\n  close: 'Kapat',\n  copied: 'Kopyalandı',\n  copy: 'Kopya',\n  currentValue: 'Mevcut değer',\n  error: 'Hata',\n  goToSlide: (slide, count) => `${count} slayttan ${slide} slayta gidin`,\n  hidePassword: 'Şifreyi sakla',\n  loading: 'Yükleme',\n  nextSlide: 'Sonraki slayt',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Hiçbir seçenek seçilmedi';\n    if (num === 1) return '1 seçenek seçildi';\n    return `${num} seçenek seçildi`;\n  },\n  previousSlide: 'Bir onceki slayt',\n  progress: 'İlerleme',\n  remove: 'Kaldır',\n  resize: 'Yeniden boyutlandır',\n  scrollToEnd: 'Sona kay',\n  scrollToStart: 'Başa kay',\n  selectAColorFromTheScreen: 'Ekrandan bir renk seçin',\n  showPassword: 'Şifreyi göster',\n  slideNum: slide => `Slayt ${slide}`,\n  toggleColorFormat: 'Renk biçimini değiştir'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/uk.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'uk',\n  $name: 'Українська',\n  $dir: 'ltr',\n\n  carousel: 'Карусель',\n  clearEntry: 'Очистити поле',\n  close: 'Закрити',\n  copied: 'Скопійовано',\n  copy: 'Скопіювати',\n  currentValue: 'Поточне значення',\n  error: 'Збій',\n  goToSlide: (slide, count) => `Перейти до слайда №${slide} з ${count}`,\n  hidePassword: 'Приховати пароль',\n  loading: 'Завантаження',\n  nextSlide: 'Наступний слайд',\n  numOptionsSelected: num => {\n    const n = num % 10;\n    if (n === 0) return 'не вибрано варіантів';\n    if (n === 1) return 'вибрано 1 варіант';\n    if (n === 2 || n === 3 || n === 4) return `вибрано ${num} варіанти`;\n    return `вибрано ${num} варіантів`;\n  },\n  previousSlide: 'Попередній слайд',\n  progress: 'Поступ',\n  remove: 'Видалити',\n  resize: 'Змінити розмір',\n  scrollToEnd: 'Прокрутити в кінець',\n  scrollToStart: 'Прокрутити на початок',\n  selectAColorFromTheScreen: 'Виберіть колір на екрані',\n  showPassword: 'Показати пароль',\n  slideNum: slide => `Слайд ${slide}`,\n  toggleColorFormat: 'Переключити кольорову модель'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/zh-cn.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'zh-cn',\n  $name: '简体中文',\n  $dir: 'ltr',\n\n  carousel: '跑马灯',\n  clearEntry: '清空',\n  close: '关闭',\n  copied: '已复制',\n  copy: '复制',\n  currentValue: '当前值',\n  error: '错误',\n  goToSlide: (slide, count) => `转到第 ${slide} 张幻灯片，共 ${count} 张`,\n  hidePassword: '隐藏密码',\n  loading: '加载中',\n  nextSlide: '下一张幻灯片',\n  numOptionsSelected: num => {\n    if (num === 0) return '未选择任何项目';\n    if (num === 1) return '已选择 1 个项目';\n    return `${num} 选择项目`;\n  },\n  previousSlide: '上一张幻灯片',\n  progress: '进度',\n  remove: '删除',\n  resize: '调整大小',\n  scrollToEnd: '滚动至页尾',\n  scrollToStart: '滚动至页首',\n  selectAColorFromTheScreen: '从屏幕中选择一种颜色',\n  showPassword: '显示密码',\n  slideNum: slide => `幻灯片 ${slide}`,\n  toggleColorFormat: '切换颜色模式'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/translations/zh-tw.ts",
    "content": "import { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'zh-tw',\n  $name: '正體中文',\n  $dir: 'ltr',\n\n  carousel: '幻燈片',\n  clearEntry: '清空',\n  close: '關閉',\n  copied: '已複製',\n  copy: '複製',\n  currentValue: '當前值',\n  error: '錯誤',\n  goToSlide: (slide, count) => `轉到第 ${slide} 張幻燈片，共 ${count} 張`,\n  hidePassword: '隱藏密碼',\n  loading: '載入中',\n  nextSlide: '下一張幻燈片',\n  numOptionsSelected: num => {\n    if (num === 0) return '未選擇任何項目';\n    if (num === 1) return '已選擇 1 個項目';\n    return `${num} 選擇項目`;\n  },\n  previousSlide: '上一張幻燈片',\n  progress: '進度',\n  remove: '移除',\n  resize: '調整大小',\n  scrollToEnd: '捲至頁尾',\n  scrollToStart: '捲至頁首',\n  selectAColorFromTheScreen: '從螢幕中選擇一種顏色',\n  showPassword: '顯示密碼',\n  slideNum: slide => `幻燈片 ${slide}`,\n  toggleColorFormat: '切換顏色格式'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"
  },
  {
    "path": "src/utilities/animation-registry.ts",
    "content": "export interface ElementAnimation {\n  keyframes: Keyframe[];\n  rtlKeyframes?: Keyframe[];\n  options?: KeyframeAnimationOptions;\n}\n\nexport interface ElementAnimationMap {\n  [animationName: string]: ElementAnimation;\n}\n\nexport interface GetAnimationOptions {\n  /**\n   * The component's directionality. When set to \"rtl\", `rtlKeyframes` will be preferred over `keyframes` where\n   * available using getAnimation().\n   */\n  dir: string;\n}\n\nconst defaultAnimationRegistry = new Map();\nconst customAnimationRegistry = new WeakMap();\n\nfunction ensureAnimation(animation: ElementAnimation | null) {\n  return animation ?? { keyframes: [], options: { duration: 0 } };\n}\n\n//\n// Given an ElementAnimation, this function returns a new ElementAnimation where the keyframes property reflects either\n// keyframes or rtlKeyframes depending on the specified directionality.\n//\nfunction getLogicalAnimation(animation: ElementAnimation, dir: string) {\n  if (dir.toLowerCase() === 'rtl') {\n    return {\n      keyframes: animation.rtlKeyframes || animation.keyframes,\n      options: animation.options\n    };\n  }\n\n  return animation;\n}\n\n/**\n * Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`\n * for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.\n */\nexport function setDefaultAnimation(animationName: string, animation: ElementAnimation | null) {\n  defaultAnimationRegistry.set(animationName, ensureAnimation(animation));\n}\n\n/** Sets a custom animation for the specified element. */\nexport function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null) {\n  customAnimationRegistry.set(el, { ...customAnimationRegistry.get(el), [animationName]: ensureAnimation(animation) });\n}\n\n/** Gets an element's animation. Falls back to the default if no animation is found. */\nexport function getAnimation(el: Element, animationName: string, options: GetAnimationOptions) {\n  const customAnimation = customAnimationRegistry.get(el);\n\n  // Check for a custom animation\n  if (customAnimation?.[animationName]) {\n    return getLogicalAnimation(customAnimation[animationName], options.dir);\n  }\n\n  // Check for a default animation\n  const defaultAnimation = defaultAnimationRegistry.get(animationName);\n  if (defaultAnimation) {\n    return getLogicalAnimation(defaultAnimation, options.dir);\n  }\n\n  // Fall back to an empty animation\n  return {\n    keyframes: [],\n    options: { duration: 0 }\n  };\n}\n"
  },
  {
    "path": "src/utilities/animation.ts",
    "content": "export { getAnimationNames, getEasingNames } from '../components/animation/animations.js';\n"
  },
  {
    "path": "src/utilities/base-path.ts",
    "content": "let basePath = '';\n\n/** Sets the library's base path to the specified directory. */\nexport function setBasePath(path: string) {\n  basePath = path;\n}\n\n/**\n * Gets the library's base path.\n *\n * The base path is used to load assets such as icons and images, so it needs to be set for components to work properly.\n * By default, this script will look for a script ending in shoelace.js or shoelace-autoloader.js and set the base path\n * to the directory that contains that file. To override this behavior, you can add the data-shoelace attribute to any\n * script on the page (it probably makes the most sense to attach it to the Shoelace script, but it could also be on a\n * bundle). The value can be a local folder or it can point to a CORS-enabled endpoint such as a CDN.\n *\n *   \n *\n * Alternatively, you can set the base path manually using the exported setBasePath() function.\n *\n * @param subpath - An optional path to append to the base path.\n */\nexport function getBasePath(subpath = '') {\n  if (!basePath) {\n    const scripts = [...document.getElementsByTagName('script')] as HTMLScriptElement[];\n    const configScript = scripts.find(script => script.hasAttribute('data-shoelace'));\n\n    if (configScript) {\n      // Use the data-shoelace attribute\n      setBasePath(configScript.getAttribute('data-shoelace')!);\n    } else {\n      const fallbackScript = scripts.find(s => {\n        return /shoelace(\\.min)?\\.js($|\\?)/.test(s.src) || /shoelace-autoloader(\\.min)?\\.js($|\\?)/.test(s.src);\n      });\n      let path = '';\n\n      if (fallbackScript) {\n        path = fallbackScript.getAttribute('src')!;\n      }\n\n      setBasePath(path.split('/').slice(0, -1).join('/'));\n    }\n  }\n\n  // Return the base path without a trailing slash. If one exists, append the subpath separated by a slash.\n  return basePath.replace(/\\/$/, '') + (subpath ? `/${subpath.replace(/^\\//, '')}` : ``);\n}\n"
  },
  {
    "path": "src/utilities/form.ts",
    "content": "import { formCollections } from '../internal/form.js';\n\n/**\n * Serializes a form and returns a plain object. If a form control with the same name appears more than once, the\n * property will be converted to an array.\n */\nexport function serialize(form: HTMLFormElement) {\n  const formData = new FormData(form);\n  const object: Record = {};\n\n  formData.forEach((value, key) => {\n    if (Reflect.has(object, key)) {\n      const entry = object[key];\n      if (Array.isArray(entry)) {\n        entry.push(value);\n      } else {\n        object[key] = [object[key], value];\n      }\n    } else {\n      object[key] = value;\n    }\n  });\n\n  return object;\n}\n\n/**\n * Returns all form controls that are associated with the specified form. Includes both native and Shoelace form\n * controls. Use this function in lieu of the `HTMLFormElement.elements` property, which doesn't recognize Shoelace\n * form controls.\n */\nexport function getFormControls(form: HTMLFormElement) {\n  const rootNode = form.getRootNode() as Document | ShadowRoot;\n  const allNodes = [...rootNode.querySelectorAll('*')];\n  const formControls = [...form.elements];\n  const collection = formCollections.get(form);\n  const shoelaceFormControls = collection ? Array.from(collection) : [];\n\n  // To return form controls in the right order, we sort by DOM index\n  return [...formControls, ...shoelaceFormControls].sort((a: Element, b: Element) => {\n    if (allNodes.indexOf(a) < allNodes.indexOf(b)) return -1;\n    if (allNodes.indexOf(a) > allNodes.indexOf(b)) return 1;\n    return 0;\n  });\n}\n"
  },
  {
    "path": "src/utilities/icon-library.ts",
    "content": "export { registerIconLibrary, unregisterIconLibrary } from '../components/icon/library.js';\n"
  },
  {
    "path": "src/utilities/localize.ts",
    "content": "import { LocalizeController as DefaultLocalizationController, registerTranslation } from '@shoelace-style/localize';\nimport en from '../translations/en.js'; // Register English as the default/fallback language\nimport type { Translation as DefaultTranslation } from '@shoelace-style/localize';\n\n// Extend the controller and apply our own translation interface for better typings\nexport class LocalizeController extends DefaultLocalizationController {\n  // Technicallly '../translations/en.js' is supposed to work via side-effects. However, by some mystery sometimes the\n  // translations don't get bundled as expected resulting in `no translation found` errors.\n  // This is basically some extra assurance that our translations get registered prior to our localizer connecting in a component\n  // and we don't rely on implicit import ordering.\n  static {\n    registerTranslation(en);\n  }\n}\n\n// Export functions from the localize lib so we have one central place to import them from\nexport { registerTranslation } from '@shoelace-style/localize';\n\nexport interface Translation extends DefaultTranslation {\n  $code: string; // e.g. en, en-GB\n  $name: string; // e.g. English, Español\n  $dir: 'ltr' | 'rtl';\n\n  carousel: string;\n  clearEntry: string;\n  close: string;\n  copied: string;\n  copy: string;\n  currentValue: string;\n  error: string;\n  goToSlide: (slide: number, count: number) => string;\n  hidePassword: string;\n  loading: string;\n  nextSlide: string;\n  numOptionsSelected: (num: number) => string;\n  previousSlide: string;\n  progress: string;\n  remove: string;\n  resize: string;\n  scrollToEnd: string;\n  scrollToStart: string;\n  selectAColorFromTheScreen: string;\n  showPassword: string;\n  slideNum: (slide: number) => string;\n  toggleColorFormat: string;\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "/* This is the \"dev\" TS Config which includes typechecking for test. This is used by ESLint to provide TypeScript errors for test files */\n{\n  \"compilerOptions\": {\n    /* Visit https://aka.ms/tsconfig.json to read more about this file */\n    \"target\": \"es2017\",\n    \"module\": \"NodeNext\",\n    \"moduleResolution\": \"NodeNext\",\n    \"lib\": [\n      \"dom\",\n      \"dom.Iterable\",\n      \"es2020\"\n    ],\n    \"emitDeclarationOnly\": true,\n    \"declaration\": true,\n    \"rootDir\": \".\",\n    \"strict\": true,\n    \"strictPropertyInitialization\": false,\n    \"strictFunctionTypes\": false,\n    \"noImplicitThis\": false,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"esModuleInterop\": true,\n    \"experimentalDecorators\": true,\n    \"useDefineForClassFields\": false, /* See https://lit.dev/docs/components/properties/#avoiding-issues-with-class-fields */\n    \"removeComments\": false,\n    \"skipLibCheck\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"useUnknownInCatchVariables\": true,\n    \"isolatedModules\": true,\n    \"verbatimModuleSyntax\": true,\n    \"types\": [\n      \"mocha\",\n      \"user-agent-data-types\"\n    ]\n  },\n  \"include\": [\n    \"src\"\n  ]\n}\n"
  },
  {
    "path": "tsconfig.prod.json",
    "content": "{\n  \"extends\": \"./tsconfig\",\n  \"compilerOptions\": {\n    \"rootDir\": \"./src\"\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"src/**/*.test.ts\"]\n}\n"
  },
  {
    "path": "web-test-runner.config.js",
    "content": "import { esbuildPlugin } from '@web/dev-server-esbuild';\nimport { globbySync } from 'globby';\nimport { playwrightLauncher } from '@web/test-runner-playwright';\n\nexport default {\n  rootDir: '.',\n  files: 'src/**/*.test.ts', // \"default\" group\n  concurrentBrowsers: 3,\n  nodeResolve: {\n    exportConditions: ['production', 'default']\n  },\n  testFramework: {\n    config: {\n      timeout: 3000,\n      retries: 1\n    }\n  },\n  plugins: [\n    esbuildPlugin({\n      ts: true,\n      target: 'es2020'\n    })\n  ],\n  browsers: [\n    playwrightLauncher({ product: 'chromium' }),\n    // Firefox started failing randomly so we're temporarily disabling it here. This could be a rogue test, not really\n    // sure what's happening.\n    // playwrightLauncher({ product: 'firefox' }),\n    playwrightLauncher({ product: 'webkit' })\n  ],\n  testRunnerHtml: testFramework => `\n    \n      \n      \n        \n        \n        \n      \n    \n  `,\n  // Create a named group for every test file to enable running single tests. If a test file is `split-panel.test.ts`\n  // then you can run `npm run test -- --group split-panel` to run only that component's tests.\n  groups: globbySync('src/**/*.test.ts').map(path => {\n    const groupName = path.match(/^.*\\/(?.*)\\.test\\.ts/).groups.fileName;\n    return {\n      name: groupName,\n      files: path\n    };\n  })\n};\n"
  }
]