add focus delegation; fixes #1622

* abstracting syntax coloring in code-highlighter.css

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

* fixup! removing `wa-` prefix

.eslintignore

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

.eslintrc.cjs

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

.github/workflows/client_tests.yml

@@ -0,0 +1,48 @@
+# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Client Tests
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [next]
+  pull_request:
+    branches: [next]
+
+
+jobs:
+  client_test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Lint
+        run: npm run prettier
+        working-directory: ./packages/webawesome
+
+      - name: Build
+        run: npm run build
+        working-directory: ./packages/webawesome
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+        working-directory: ./packages/webawesome
+
+      - name: Run CSR tests
+        # FAIL_FAST to fail on first failing test.
+        run: FAIL_FAST="true" CSR_ONLY="true" npm run test
+        working-directory: ./packages/webawesome

.github/workflows/node.js.yml

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

.github/workflows/ssr_tests.yml

@@ -0,0 +1,42 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: SSR Tests
+
+on:
+  # push:
+  #   branches: [next]
+  workflow_dispatch:
+
+jobs:
+  ssr_test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+        working-directory: ./packages/webawesome
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+        working-directory: ./packages/webawesome
+
+      - name: Run SSR tests
+        # FAIL_FAST to fail on first failing test.
+        run: FAIL_FAST="true" SSR_ONLY="true" npm run test
+        working-directory: ./packages/webawesome
+

.gitignore

@@ -1,12 +1,12 @@
 _site
 .cache
 .DS_Store
-package.json
-package-lock.json
-dist
-docs/assets/images/sprite.svg
-docs/public/pagefind
+dist/
+dist-cdn/
 node_modules
-src/react
-cdn
-.astro
+packages/**/*/src/react
+cdn/
+yarn.lock
+_bundle_
+/packages/webawesome-pro
+/packages/webawesome-app

.gitpod.yml

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

.prettierignore

@@ -1,15 +1,23 @@
+# Files are relative to .prettierignore at the root of this monorepo.
+# <https://github.com/prettier/prettier-vscode/issues/1252>
+
 *.hbs
-*.mdx
-.cache
+*.md
+!packages/webawesome/docs/docs/patterns/**/*.md
+docs/docs/patterns/blog-news/post-list.md
+**/*/.cache
 .github
 cspell.json
-dist
-docs/search.json
-src/components/icon/icons
-src/react/index.ts
+packages/**/*/dist
+packages/**/*/dist-cdn
+packages/**/*/docs/search.json
+packages/**/*/src/components/icon/icons
+packages/**/*/src/react/index.ts
+**/*/package.json
+**/*/package-lock.json
+**/*/tsconfig.json
+**/*/tsconfig.prod.json
 node_modules
-package.json
-package-lock.json
-tsconfig.json
-cdn
-_site
+
+packages/**/*/_site
+packages/webawesome/docs/assets/scripts/prism-downloaded.js

.vscode/extensions.json

@@ -3,7 +3,7 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "bierner.lit-html",
-    "bashmish.es6-string-css",
-    "streetsidesoftware.code-spell-checker"
+    "streetsidesoftware.code-spell-checker",
+    "ronnidc.nunjucks"
   ]
 }

.vscode/settings.json

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

CONTRIBUTING.md

@@ -2,4 +2,4 @@
 
 Before contributing, please review the contributions guidelines at:
 
-[shoelace.style/resources/contributing](https://shoelace.style/resources/contributing)
+[webawesome.com/docs/resources/contributing](https://webawesome.com/docs/resources/contributing)

README.md

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

VERSIONS.txt

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

cspell.json

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

docs/.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
-}

docs/.vscode/launch.json

@@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}

docs/assets/styles/docs.css

@@ -1,943 +0,0 @@
-:root {
-  --docs-background-color: var(--wa-color-surface-default);
-  --docs-content-max-width: 860px;
-  --docs-sidebar-width: 320px;
-  --docs-sidebar-transition-speed: 250ms;
-  --docs-content-toc-max-width: 260px;
-  --docs-content-padding: 2rem;
-  --docs-content-vertical-spacing: 2rem;
-  --docs-search-overlay-background: rgb(0 0 0 / 0.2);
-  --docs-skip-to-main-width: 200px;
-}
-
-/* Light theme */
-:root {
-  color-scheme: normal;
-
-  --docs-overlay-color: hsl(240 3.8% 46.1% / 33%);
-  --docs-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
-  --docs-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 24%);
-  --docs-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 24%);
-  --docs-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 24%);
-  --docs-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 24%);
-}
-
-/* Utils */
-html.wa-theme-dark .only-light,
-html:not(.wa-theme-dark) .only-dark {
-  display: none !important;
-}
-
-.nowrap {
-  white-space: nowrap;
-}
-
-.visually-hidden:not(:focus-within) {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  clip: rect(0 0 0 0) !important;
-  clip-path: inset(50%) !important;
-  border: none !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  padding: 0 !important;
-}
-
-@media screen and (max-width: 900px) {
-  :root {
-    --docs-content-padding: 1rem;
-  }
-}
-
-html {
-  height: 100%;
-  box-sizing: border-box;
-  line-height: var(--wa-font-line-height-regular);
-  padding: 0;
-  margin: 0;
-}
-
-body {
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  overflow-x: hidden;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Common elements */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 3rem 0 1.5rem 0;
-}
-
-h1:first-of-type {
-  margin-top: 1rem;
-}
-
-.badges img {
-  border-radius: var(--wa-corners-s);
-}
-
-.callout img {
-  width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-/* Color matching logos */
-svg.logo {
-  color: var(--wa-color-brand-text-on-surface);
-}
-
-/* Anchor headings */
-.anchor-heading {
-  position: relative;
-  color: inherit;
-  text-decoration: none;
-}
-
-.anchor-heading a {
-  text-decoration: none;
-  color: inherit;
-}
-
-.anchor-heading a::after {
-  content: '#';
-  color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
-  margin-inline: 0.5rem;
-  opacity: 0;
-  transition: 100ms opacity;
-}
-
-.anchor-heading:hover a::after,
-.anchor-heading:focus-within a::after {
-  opacity: 1;
-}
-
-/* External links */
-.external-link__icon {
-  width: 0.75em;
-  height: 0.75em;
-  vertical-align: 0;
-  margin-left: 0.25em;
-  margin-right: 0.125em;
-}
-
-/* Tables */
-table th p:first-child,
-table td p:first-child {
-  margin-top: 0;
-}
-
-table th p:last-child,
-table td p:last-child {
-  margin-bottom: 0;
-}
-
-.table-scroll {
-  max-width: 100%;
-  overflow-x: auto;
-}
-
-.table-scroll code {
-  white-space: nowrap;
-}
-
-th.table-name,
-th.table-event-detail {
-  min-width: 15ch;
-}
-
-th.table-description {
-  min-width: 50ch !important;
-  max-width: 70ch;
-}
-
-/* Code blocks */
-
-pre:not(:last-child) {
-  margin-bottom: 1.5rem;
-}
-
-pre {
-  position: relative;
-}
-
-pre > code {
-  display: block;
-  background: none !important;
-  border-radius: 0;
-  hyphens: none;
-  tab-size: 2;
-  white-space: pre;
-  padding: 1rem;
-  margin: -1rem;
-  overflow: auto;
-}
-
-pre .token.comment {
-  color: var(--wa-color-base-40);
-}
-
-pre .token.prolog,
-pre .token.doctype,
-pre .token.cdata,
-pre .token.operator,
-pre .token.punctuation {
-  color: var(--wa-color-base-40);
-}
-
-.namespace {
-  opacity: 0.7;
-}
-
-pre .token.property,
-pre .token.keyword,
-pre .token.tag,
-pre .token.url {
-  color: var(--wa-color-brand-text-on-fill);
-}
-
-pre .token.symbol,
-pre .token.deleted {
-  color: var(--wa-color-danger-text-on-fill);
-}
-
-pre .token.boolean,
-pre .token.constant,
-pre .token.selector,
-pre .token.attr-name,
-pre .token.string,
-pre .token.char,
-pre .token.builtin,
-pre .token.inserted {
-  color: var(--wa-color-success-text-on-fill);
-}
-
-pre .token.atrule,
-pre .token.attr-value,
-pre .token.number,
-pre .token.variable {
-  color: var(--wa-color-warning-text-on-fill);
-}
-
-pre .token.function,
-pre .token.class-name,
-pre .token.regex {
-  color: var(--wa-color-danger-text-on-fill);
-}
-
-pre .token.important {
-  color: var(--wa-color-danger-text-on-fill);
-}
-
-pre .token.important,
-pre .token.bold {
-  font-weight: bold;
-}
-
-pre .token.italic {
-  font-style: italic;
-}
-
-/* Copy code button */
-.copy-code-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-  white-space: normal;
-  color: var(--wa-color-neutral-text-on-fill-alt);
-  transition:
-    150ms opacity,
-    150ms scale;
-}
-
-.copy-code-button::part(button) {
-  background-color: var(--wa-color-neutral-fill-subtle);
-  border-radius: 0 var(--wa-corners-s) 0 var(--wa-corners-s);
-  padding: 0.75rem;
-}
-
-.copy-code-button::part(button):hover {
-  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-subtle), var(--wa-color-mix-hover));
-}
-
-.copy-code-button::part(button):active {
-  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-subtle), var(--wa-color-mix-active));
-}
-
-pre .copy-code-button {
-  opacity: 0;
-  scale: 0.75;
-}
-
-pre:hover .copy-code-button,
-.copy-code-button:focus-within {
-  opacity: 1;
-  scale: 1;
-}
-
-/* Callouts */
-.callout {
-  margin-bottom: var(--docs-content-vertical-spacing);
-}
-
-.callout > :first-child {
-  margin-top: 0;
-}
-
-.callout > :last-child {
-  margin-bottom: 0;
-}
-
-.callout a {
-  color: inherit;
-}
-
-.callout p {
-  margin-top: 0;
-}
-
-/* Aside */
-.content aside {
-  float: right;
-  min-width: 300px;
-  max-width: 50%;
-  background: var(--wa-color-surface-lowered);
-  border-radius: var(--wa-corners-s);
-  padding: var(--wa-space-m);
-  margin-left: var(--wa-space-m);
-}
-
-.content aside > :first-child {
-  margin-top: 0;
-}
-
-.content aside > :last-child {
-  margin-bottom: 0;
-}
-
-@media screen and (max-width: 600px) {
-  .content aside {
-    float: none;
-    width: calc(100% + (var(--docs-content-padding) * 2));
-    max-width: none;
-    margin: var(--docs-content-vertical-spacing) calc(-1 * var(--docs-content-padding));
-  }
-}
-
-/* Sidebar */
-#sidebar {
-  position: fixed;
-  flex: 0;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 20;
-  width: var(--docs-sidebar-width);
-  background-color: var(--docs-background-color);
-  border-right: solid var(--wa-border-width-s) var(--wa-color-surface-border);
-  border-radius: 0;
-  padding: 2rem;
-  margin: 0;
-  overflow: auto;
-  scrollbar-width: thin;
-  transition: var(--docs-sidebar-transition-speed) translate ease-in-out;
-}
-
-#sidebar::-webkit-scrollbar {
-  width: 4px;
-}
-
-#sidebar::-webkit-scrollbar-thumb {
-  background: transparent;
-  border-radius: 9999px;
-}
-
-#sidebar:hover::-webkit-scrollbar-thumb {
-  background: var(--wa-color-neutral-border-highlight);
-}
-
-#sidebar:hover::-webkit-scrollbar-track {
-  background: var(--wa-color-surface-raised);
-}
-
-#sidebar > header {
-  margin-bottom: 1.5rem;
-}
-
-#sidebar > header h1 {
-  margin: 0;
-}
-
-#sidebar > header svg {
-  margin-bottom: var(--wa-space-s);
-}
-
-#sidebar > header a {
-  display: block;
-}
-
-#sidebar nav a {
-  text-decoration: none;
-}
-
-#sidebar nav h2 {
-  font-size: var(--wa-font-size-m);
-  font-weight: var(--wa-font-weight-medium);
-  border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
-  margin: var(--wa-space-xl) 0 var(--wa-space-xs) 0;
-}
-
-#sidebar ul {
-  padding: 0;
-  margin: 0;
-}
-
-#sidebar ul li {
-  list-style: none;
-  padding: 0;
-  margin: 0.125rem 0.5rem;
-}
-
-#sidebar ul ul ul {
-  margin-left: 0.75rem;
-}
-
-#sidebar ul li a {
-  line-height: 1.33;
-  color: inherit;
-  display: inline-block;
-  padding: 0;
-}
-
-#sidebar ul li a:not(.active-link):hover {
-  color: var(--wa-color-text-link);
-}
-
-#sidebar nav .active-link {
-  color: var(--wa-color-text-link);
-  border-bottom: dashed 1px var(--wa-color-text-link);
-}
-
-#sidebar > header img {
-  display: block;
-  width: 100%;
-  height: auto;
-  margin: 0 auto;
-}
-
-@media screen and (max-width: 900px) {
-  #sidebar {
-    translate: -100%;
-  }
-
-  .sidebar-open #sidebar {
-    translate: 0;
-  }
-}
-
-.sidebar-version {
-  font-size: var(--wa-font-size-s);
-  color: var(--wa-color-text-quiet);
-  text-align: right;
-  margin-top: calc(-1 * var(--wa-space-s));
-  margin-bottom: calc(-1 * var(--wa-space-s));
-}
-
-.sidebar-buttons {
-  display: flex;
-  justify-content: space-between;
-}
-
-/* Main content */
-main {
-  position: relative;
-  padding: var(--docs-content-vertical-spacing) var(--docs-content-padding)
-    calc(var(--docs-content-vertical-spacing) * 2) var(--docs-content-padding);
-  margin-left: var(--docs-sidebar-width);
-}
-
-.sidebar-open .content {
-  margin-left: 0;
-}
-
-.content__body > :last-child {
-  margin-bottom: 0;
-}
-
-@media screen and (max-width: 900px) {
-  main {
-    margin-left: 0;
-  }
-}
-
-/* Component layouts */
-.content {
-  display: grid;
-  grid-template-columns: 100%;
-  gap: 2rem;
-  position: relative;
-  max-width: var(--docs-content-max-width);
-  margin: 0 auto;
-}
-
-.content--with-toc {
-  /* There's a 2rem gap, so we need to remove it from the column */
-  grid-template-columns: calc(75% - 2rem) min(25%, var(--docs-content-toc-max-width));
-  max-width: calc(var(--docs-content-max-width) + var(--docs-content-toc-max-width));
-}
-
-.content__body {
-  order: 1;
-  width: 100%;
-}
-
-.content:not(.content--with-toc) .content__toc {
-  display: none;
-}
-
-.content__toc {
-  order: 2;
-  display: flex;
-  flex-direction: column;
-  margin-top: 0;
-}
-
-.content__toc ul {
-  position: sticky;
-  top: 5rem;
-  max-height: calc(100vh - 6rem);
-  font-size: var(--wa-font-size-s);
-  line-height: 1.33;
-  border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
-  list-style: none;
-  padding: 1rem 0;
-  margin: 0;
-  padding-left: 1rem;
-  overflow-y: auto;
-}
-
-.content__toc li {
-  padding: 0 0 0 0.5rem;
-  margin: 0;
-}
-
-.content__toc li[data-level='3'] {
-  margin-left: 1rem;
-}
-
-/* We don't use them, but just in case */
-.content__toc li[data-level='4'],
-.content__toc li[data-level='5'],
-.content__toc li[data-level='6'] {
-  margin-left: 2rem;
-}
-
-.content__toc li:not(:last-of-type) {
-  margin-bottom: 0.6rem;
-}
-
-.content__toc a {
-  color: var(--wa-color-text-normal);
-  text-decoration: none;
-}
-
-.content__toc a:hover {
-  color: var(--wa-color-text-link);
-}
-
-.content__toc a.active {
-  color: var(--wa-color-brand-text-on-surface);
-  border-bottom: dashed 1px var(--wa-color-brand-text-on-surface);
-}
-
-.content__toc .top a {
-  font-weight: var(--wa-font-weight-medium);
-  color: var(--wa-color-text-quiet);
-}
-
-@media screen and (max-width: 1024px) {
-  .content {
-    grid-template-columns: 100%;
-    gap: 0;
-  }
-
-  .content__toc {
-    position: relative;
-    order: 1;
-  }
-
-  .content__toc ul {
-    display: flex;
-    justify-content: start;
-    gap: 1rem 1.5rem;
-    position: static;
-    border: none;
-    border-bottom: solid 1px var(--wa-color-surface-border);
-    border-radius: 0;
-    padding: 1rem 1.5rem 1rem 0.5rem; /* extra right padding to hide the fade effect */
-    margin-top: 1rem;
-    overflow-x: auto;
-  }
-
-  .content__toc ul::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 1rem; /* don't cover the scrollbar */
-    right: 0;
-    width: 2rem;
-    background: linear-gradient(90deg, rgba(0 0 0 / 0) 0%, var(--wa-color-surface-default) 100%);
-  }
-
-  .content__toc li {
-    white-space: nowrap;
-  }
-
-  .content__toc li:not(:last-of-type) {
-    margin-bottom: 0;
-  }
-
-  .content__toc [data-level]:not([data-level='2']) {
-    display: none;
-  }
-
-  .content__body {
-    order: 2;
-  }
-}
-
-/* Menu toggle */
-#menu-toggle {
-  display: none;
-  position: fixed;
-  z-index: 30;
-  top: 0.25rem;
-  left: 0.25rem;
-  height: auto;
-  width: auto;
-  color: var(--wa-color-neutral-spot);
-  border: none;
-  border-radius: 50%;
-  background: var(--wa-color-surface-default);
-  padding: 0.5rem;
-  margin: 0;
-  cursor: pointer;
-  transition: 250ms rotate ease;
-}
-
-@media screen and (max-width: 900px) {
-  #menu-toggle {
-    display: flex;
-  }
-}
-
-#menu-toggle svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-html.sidebar-open #menu-toggle {
-  rotate: 180deg;
-}
-
-/* Skip to main content */
-#skip-to-main {
-  position: fixed;
-  top: 0.25rem;
-  left: calc(50% - var(--docs-skip-to-main-width) / 2);
-  z-index: 100;
-  width: var(--docs-skip-to-main-width);
-  text-align: center;
-  text-decoration: none;
-  border-radius: 9999px;
-  background: var(--wa-color-surface-default);
-  color: var(--wa-color-text-normal);
-  padding: 0.5rem;
-}
-
-/* Print styles */
-@media print {
-  a:not(.anchor-heading)[href]::after {
-    content: ' (' attr(href) ')';
-  }
-
-  details,
-  pre {
-    border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
-  }
-
-  details summary {
-    list-style: none;
-  }
-
-  details summary span {
-    padding-left: 0;
-  }
-
-  details summary::marker,
-  details summary::-webkit-details-marker {
-    display: none;
-  }
-
-  .component-page__navigation,
-  .copy-code-button,
-  .code-preview__buttons,
-  .code-preview__resizer {
-    display: none !important;
-  }
-
-  .flavor-html .code-preview__source--html,
-  .flavor-react .code-preview__source--react {
-    display: block !important;
-  }
-
-  .flavor-html .code-preview__source--html > pre,
-  .flavor-react .code-preview__source--react > pre {
-    border: none;
-  }
-
-  .code-preview__source-group {
-    border-bottom: solid 1px var(--wa-border-width-s);
-    border-bottom-left-radius: var(--wa-corners-s);
-    border-bottom-right-radius: var(--wa-corners-s);
-  }
-
-  #sidebar {
-    display: none;
-  }
-
-  #content {
-    margin-left: 0;
-  }
-
-  #menu-toggle,
-  #icon-toolbar,
-  .external-link__icon {
-    display: none;
-  }
-}
-
-/* Splash */
-.splash {
-  display: flex;
-  padding-top: 2rem;
-}
-
-.splash-start {
-  min-width: 440px;
-}
-
-.splash li img {
-  width: 1em;
-  height: 1em;
-  vertical-align: -2px;
-}
-
-.splash svg {
-  margin-block-end: var(--wa-space-m);
-}
-
-.splash-end {
-  display: flex;
-  align-items: flex-end;
-  width: auto;
-  padding-left: 1rem;
-}
-
-.splash-image {
-  width: 100%;
-  height: auto;
-}
-
-.splash-start h1:first-of-type {
-  font-size: var(--wa-font-size-l);
-  font-weight: var(--wa-font-weight-normal);
-  margin: 0 0 0.5rem 0;
-}
-
-@media screen and (max-width: 1280px) {
-  .splash {
-    display: block;
-  }
-
-  .splash-start {
-    min-width: 0;
-    padding-bottom: 1rem;
-  }
-
-  .splash-end {
-    padding: 0;
-  }
-
-  .splash-image {
-    display: block;
-    max-width: 400px;
-  }
-
-  /* Shields */
-  .splash + p {
-    margin-top: 2rem;
-  }
-}
-
-/* Component headers */
-.component-header h1 {
-  margin-bottom: 0;
-}
-
-.component-header__tag {
-  margin-top: -0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.component-header__tag code {
-  background: none;
-  color: var(--wa-color-text-quiet);
-  font-size: var(--wa-font-size-l);
-  padding: 0;
-  margin: 0;
-}
-
-.component-header__info {
-  margin-bottom: var(--wa-space-2xl);
-}
-
-.component-summary {
-  font-size: var(--wa-font-size-l);
-  line-height: 1.6;
-  margin: 2rem 0;
-}
-
-/* Repo buttons */
-.sidebar-buttons {
-  display: flex;
-  gap: 0.125rem;
-  justify-content: space-between;
-}
-
-.sidebar-buttons .repo-button {
-  flex: 1 1 auto;
-}
-
-.repo-button wa-icon {
-  color: var(--wa-color-neutral-text-on-spot);
-}
-
-@media screen and (max-width: 400px) {
-  :not(.sidebar-buttons) > .repo-button {
-    width: 100%;
-    margin-bottom: 1rem;
-  }
-}
-
-body[data-page^='/tokens/'] .table-wrapper td:first-child,
-body[data-page^='/tokens/'] .table-wrapper td:first-child code {
-  white-space: nowrap;
-}
-
-/* Border demos */
-.border-demo {
-  height: 60px;
-  border-left: solid 1px var(--wa-color-brand-spot);
-}
-
-.corner-demo {
-  width: 3rem;
-  height: 3rem;
-  background: var(--wa-color-brand-spot);
-}
-
-/* Transition demo */
-.transition-demo {
-  position: relative;
-  background: var(--wa-color-neutral-fill-subtle);
-  width: 8rem;
-  height: 2rem;
-}
-
-.transition-demo:after {
-  content: '';
-  position: absolute;
-  background-color: var(--wa-color-brand-spot);
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 100%;
-  transition-duration: inherit;
-  transition-property: width;
-}
-
-.transition-demo:hover:after {
-  width: 100%;
-}
-
-/* Spacing demo */
-.spacing-demo {
-  background: var(--wa-color-brand-spot);
-}
-
-/* Shadow demo */
-.shadow-demo {
-  background: transparent;
-  border-radius: 3px;
-  width: 4rem;
-  height: 4rem;
-  margin: 1rem;
-}
-
-/* Color palettes */
-.color-palette {
-  display: grid;
-  grid-template-columns: 200px repeat(11, 1fr);
-  gap: var(--wa-space-m) 1px;
-  margin: var(--wa-space-2xl) 0;
-}
-
-.color-palette__name {
-  font-weight: var(--wa-font-weight-medium);
-  grid-template-columns: repeat(11, 1fr);
-}
-
-.color-palette__name code {
-  background: none;
-  font-size: var(--wa-font-size-s);
-}
-
-.color-palette__example {
-  font-size: var(--wa-font-size-s);
-  text-align: center;
-}
-
-.color-palette__swatch {
-  height: 3rem;
-  border-radius: var(--wa-corners-xs);
-}
-
-.color-palette__swatch--border {
-  box-shadow: inset 0 0 0 1px var(--wa-color-surface-border);
-}
-
-@media screen and (max-width: 1200px) {
-  .color-palette {
-    grid-template-columns: repeat(6, 1fr);
-  }
-
-  .color-palette__name {
-    grid-column-start: span 6;
-  }
-}
-
-.docs-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 2rem;
-}

docs/assets/styles/search.css

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

docs/astro.config.mjs

@@ -1,147 +0,0 @@
-import { defineConfig } from 'astro/config';
-import starlight from '@astrojs/starlight';
-import * as url from 'node:url';
-import * as path from 'node:path';
-// const __filename = url.fileURLToPath(import.meta.url);
-const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
-
-import FullReload from 'vite-plugin-full-reload';
-
-import { customElementsManifest } from './src/js/cem.js';
-import { RemarkPluginFindAndReplace } from 'remark-plugin-find-and-replace';
-import rehypeExternalLinks from 'rehype-external-links';
-import remarkCodeHighlighter from './src/plugins/prism';
-import GithubAutolink from './src/plugins/github-autolink.ts';
-
-const version = customElementsManifest().package.version;
-const cdndir = 'cdn';
-const npmdir = 'dist';
-
-function remarkFrontmatterPlugin() {
-  // All remark and rehype plugins return a separate function
-  return function (tree, file) {
-    const frontmatter = file.data.astro.frontmatter;
-
-    frontmatter.npmdir = npmdir;
-    frontmatter.cdndir = cdndir;
-    frontmatter.version = version;
-  };
-}
-
-// https://astro.build/config
-export default defineConfig({
-  server: {
-    open: true,
-    port: 4000,
-    host: true
-  },
-  vite: {
-    server: {
-      watch: {
-        ignored: ['./public/pagefind/**/*.*'] // HERE
-      }
-    },
-    plugins: [
-      FullReload([
-        path.relative(__dirname, '../dist/custom-elements.json')
-        // path.relative(__dirname, './public/**/*.*')
-      ])
-    ]
-  },
-  outDir: '../_site',
-  site: 'https://shoelace.style',
-  markdown: {
-    syntaxHighlight: 'prism',
-    remarkPlugins: [
-      remarkFrontmatterPlugin,
-      RemarkPluginFindAndReplace({
-        replacements: [
-          { pattern: '%VERSION%', replacement: version },
-          { pattern: '%CDNDIR%', replacement: cdndir },
-          { pattern: '%NPMDIR%', replacement: npmdir }
-        ]
-      }),
-      GithubAutolink,
-      remarkCodeHighlighter
-    ],
-    rehypePlugins: [
-      () =>
-        rehypeExternalLinks({
-          rel: ['nofollow', 'noopener', 'noreferrer'],
-          target: ['_blank'],
-          properties: {
-            class: 'external-link'
-          }
-        })
-    ]
-  },
-  integrations: [
-    starlight({
-      expressiveCode: false,
-      title: 'Web Awesome',
-      social: {
-        github: 'https://github.com/shoelace-style/shoelace',
-        twitter: 'https://twitter.com/shoelace_style'
-      },
-      sidebar: [
-        {
-          label: 'Experimental',
-          autogenerate: { directory: 'experimental' }
-        },
-        {
-          label: 'Getting Started',
-          autogenerate: { directory: 'getting-started' }
-        },
-        {
-          label: 'Frameworks',
-          autogenerate: { directory: 'frameworks' }
-        },
-        {
-          label: 'Resources',
-          autogenerate: { directory: 'resources' },
-          items: [
-            {
-              label: 'Community',
-              link: '/resources/community'
-            },
-            {
-              label: 'Help & Support',
-              link: 'https://github.com/shoelace-style/shoelace/discussions'
-            },
-            {
-              label: 'Accessibility',
-              link: '/resources/accessibility'
-            },
-            {
-              label: 'Contributing',
-              link: '/resources/contributing'
-            },
-            {
-              label: 'Changelog',
-              link: '/resources/changelog'
-            }
-          ]
-        },
-        {
-          label: 'Components',
-          autogenerate: { directory: 'components' }
-        },
-        {
-          label: 'Design Tokens',
-          autogenerate: { directory: 'tokens' }
-        },
-        {
-          label: 'Tutorials',
-          autogenerate: { directory: 'tutorials' }
-        }
-      ],
-      // Component overrides
-      components: {
-        // Override the default `Head` component.
-        Head: './src/components/overrides/Head.astro',
-        TableOfContents: './src/components/overrides/TableOfContents.astro',
-        Search: './src/components/overrides/Search.astro'
-      }
-    })
-  ]
-});

docs/public/assets/images/gitpod.svg

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

docs/public/assets/images/logo-simple.svg

@@ -1 +0,0 @@
-<svg class="logo" xmlns="http://www.w3.org/2000/svg" width="277" height="211" viewBox="0 0 277 211"><g fill="none" fill-rule="evenodd"><path fill="#F6894C" d="M159.275,20.7541243 C159.275,28.4927904 155.035053,35.2422161 148.749528,38.8106604 L193.9,72.6391714 L238.157213,58.6776414 C236.43401,55.6537326 235.45,52.1547058 235.45,48.42629 C235.45,36.96411 244.751396,27.6721657 256.225,27.6721657 C267.698604,27.6721657 277,36.96411 277,48.42629 C277,59.8883646 267.698604,69.1804143 256.225,69.1804143 C255.131246,69.1804143 254.057541,69.0960801 253.00969,68.9332096 L204.251886,193.411571 C200.096886,204.019762 189.858966,211 178.45659,211 L98.5434095,211 C87.1410343,211 76.9031143,204.019762 72.7481143,193.411571 L23.990205,68.9332096 C22.9423008,69.0960801 21.8685432,69.1804143 20.775,69.1804143 C9.30129067,69.1804143 0,59.8883646 0,48.42629 C0,36.96411 9.30129067,27.6721657 20.775,27.6721657 C32.2487093,27.6721657 41.55,36.96411 41.55,48.42629 C41.55,52.1547058 40.5658322,55.6537326 38.842945,58.6776414 L83.1,72.6391714 L128.250472,38.8106604 C121.964947,35.2422161 117.725,28.4927904 117.725,20.7541243 C117.725,9.29194428 127.026396,0 138.5,0 C149.973604,0 159.275,9.29194428 159.275,20.7541243 Z"/></g></svg>