fix positioning

.editorconfig

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

.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/CODE_OF_CONDUCT.md

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

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/config.yml

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

.github/ISSUE_TEMPLATE/feature_request.md

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

.github/SECURITY.md

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

.github/workflows/node.js.yml

@@ -5,26 +5,27 @@ name: Node.js CI
 
 on:
   push:
-    branches: [next]
+    branches: [ next ]
   pull_request:
-    branches: [next]
+    branches: [ next ]
 
 jobs:
   build:
+
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [14.x, 16.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
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test

.gitignore

@@ -1,12 +1,7 @@
-_site
-.cache
 .DS_Store
-package.json
-package-lock.json
+.cache
+docs/dist
+docs/search.json
 dist
-docs/assets/images/sprite.svg
-docs/public/pagefind
+examples
 node_modules
-src/react
-cdn
-.astro

.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

.husky/pre-commit

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

.prettierignore

@@ -1,15 +1,10 @@
 *.hbs
-*.mdx
+*.md
 .cache
 .github
-cspell.json
 dist
-docs/search.json
+docs/*.md
 src/components/icon/icons
-src/react/index.ts
 node_modules
-package.json
 package-lock.json
 tsconfig.json
-cdn
-_site

.vscode/extensions.json

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

.vscode/settings.json

@@ -1,8 +1,4 @@
 {
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
-  },
-  "debug.enableStatusBarColor": false
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contributing to Web Awesome
+# Contributing to Shoelace
 
 Before contributing, please review the contributions guidelines at:
 

LICENSE.md

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

README.md

@@ -1,4 +1,6 @@
-# Web Awesome
+# Shoelace
+
+A forward-thinking library of web components.
 
 - Works with all frameworks 🧩
 - Works with CDNs 🚛
@@ -7,7 +9,7 @@
 - Built with accessibility in mind ♿️
 - Open source 😸
 
-Built by the folks behind [Font Awesome](https://fontawesome.com/).
+Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
 
 ---
 
@@ -19,15 +21,15 @@ Twitter: [@shoelace_style](https://twitter.com/shoelace_style)
 
 ---
 
-## Developers ✨
+## Shoemakers 🥾
 
-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.
+Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace from source. You will need Node >= 14 to build and run the project locally. It is preferred, but not required, to use npm 7.
 
-**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.
+**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.
 
 If that's not what you're trying to do, the [documentation website](https://shoelace.style) is where you want to be.
 
-### What are you using to build Web Awesome?
+### What are you using to build Shoelace?
 
 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/).
 
@@ -36,8 +38,8 @@ Components are built with [LitElement](https://lit-element.polymer-project.org/)
 Start by [forking the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, then clone it locally and install dependencies.
 
 ```bash
-git clone https://github.com/YOUR_GITHUB_USERNAME/webawesome
-cd webawesome
+git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
+cd shoelace
 npm install
 ```
 
@@ -49,7 +51,9 @@ Once you've cloned the repo, run the following command.
 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 Shoelace dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browser's don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.
+
+The documentation is powered by Docsify, which uses raw markdown files to generate pages. As such, no static files are built for the docs.
 
 ### Building
 
@@ -61,18 +65,30 @@ npm run build
 
 ### Creating New Components
 
-To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
+To scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name.
 
 ```bash
-npm run create wa-tag-name
+npm run create sl-tag-name
 ```
 
 This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
 
 ### Contributing
 
-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.
+Shoelace 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.
+Shoelace is designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It’s available under the terms of the MIT license.
+
+Designing, developing, and supporting this library requires a lot of time, effort, and skill. I’d like to keep it open source so everyone can use it, but that doesn’t provide me with any income.
+
+**Therefore, if you’re using my software to make a profit,** I respectfully ask that you help [fund its development](https://github.com/sponsors/claviska) by becoming a sponsor. There are multiple tiers to choose from with benefits at every level, including prioritized support, bug fixes, feature requests, and advertising.
+
+👇 Your support is very much appreciated! 👇
+
+- [Become a sponsor](https://github.com/sponsors/claviska)
+- [Star on GitHub](https://github.com/shoelace-style/shoelace/stargazers)
+- [Follow on Twitter](https://twitter.com/shoelace_style)
+
+Whether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾

cspell.json

@@ -1,194 +0,0 @@
-{
-  "version": "0.2",
-  "words": [
-    "activedescendant",
-    "allowfullscreen",
-    "animationend",
-    "Animista",
-    "apos",
-    "atrule",
-    "autocorrect",
-    "autofix",
-    "autoload",
-    "autoloader",
-    "autoloading",
-    "autoplay",
-    "bezier",
-    "boxicons",
-    "CACHEABLE",
-    "callout",
-    "callouts",
-    "cdndir",
-    "chatbubble",
-    "checkmark",
-    "Clippy",
-    "codebases",
-    "codepen",
-    "colocated",
-    "colour",
-    "combobox",
-    "Commonmark",
-    "compat",
-    "Composability",
-    "Consolas",
-    "contenteditable",
-    "copydir",
-    "Cotte",
-    "coverpage",
-    "crossorigin",
-    "crutchcorn",
-    "csspart",
-    "cssproperty",
-    "datetime",
-    "describedby",
-    "Docsify",
-    "dogfood",
-    "dropdowns",
-    "easings",
-    "endraw",
-    "endregion",
-    "enterkeyhint",
-    "eqeqeq",
-    "erroneou",
-    "errormessage",
-    "esbuild",
-    "exportmaps",
-    "exportparts",
-    "fieldsets",
-    "formaction",
-    "formdata",
-    "formenctype",
-    "formmethod",
-    "formnovalidate",
-    "formtarget",
-    "FOUC",
-    "FOUCE",
-    "fullscreen",
-    "gestern",
-    "giga",
-    "globby",
-    "Grayscale",
-    "haspopup",
-    "heroicons",
-    "hexa",
-    "Iconoir",
-    "Iframes",
-    "iife",
-    "inputmode",
-    "ionicon",
-    "ionicons",
-    "jsDelivr",
-    "jsfiddle",
-    "jsonata",
-    "keydown",
-    "keyframes",
-    "Kool",
-    "labelledby",
-    "Laravel",
-    "linkify",
-    "listbox",
-    "listitem",
-    "litelement",
-    "longform",
-    "lowercasing",
-    "Lucide",
-    "maxlength",
-    "Menlo",
-    "menuitemcheckbox",
-    "menuitemradio",
-    "middlewares",
-    "minlength",
-    "monospace",
-    "mousedown",
-    "mousemove",
-    "mouseout",
-    "mouseup",
-    "multiselectable",
-    "nextjs",
-    "nocheck",
-    "noopener",
-    "noreferrer",
-    "novalidate",
-    "npmdir",
-    "Numberish",
-    "oklab",
-    "oklch",
-    "onscrollend",
-    "outdir",
-    "ParamagicDev",
-    "peta",
-    "petabit",
-    "Preact",
-    "prismjs",
-    "progressbar",
-    "radiogroup",
-    "Railsbyte",
-    "remixicon",
-    "reregister",
-    "resizer",
-    "resizers",
-    "retargeted",
-    "RETRYABLE",
-    "rgba",
-    "roadmap",
-    "Roboto",
-    "roledescription",
-    "Sapan",
-    "saturationl",
-    "Schilp",
-    "scrollbars",
-    "scrollend",
-    "scroller",
-    "Segoe",
-    "semibold",
-    "sitedir",
-    "slotchange",
-    "smartquotes",
-    "spacebar",
-    "stylesheet",
-    "Tabbable",
-    "tabindex",
-    "tabler",
-    "tablist",
-    "tabpanel",
-    "templating",
-    "tera",
-    "testid",
-    "textareas",
-    "textfield",
-    "tinycolor",
-    "transitionend",
-    "treeitem",
-    "treeshaking",
-    "Triaging",
-    "turbolinks",
-    "typeof",
-    "unbundles",
-    "unbundling",
-    "unicons",
-    "unsanitized",
-    "unsupportive",
-    "valpha",
-    "valuenow",
-    "valuetext",
-    "viewports",
-    "Vuejs",
-    "WCAG",
-    "webawesome",
-    "WEBP",
-    "Webpacker",
-    "xmark"
-  ],
-  "ignorePaths": [
-    "package.json",
-    "package-lock.json",
-    "docs/assets/examples/include.html",
-    ".vscode/**",
-    "src/translations/!(en).ts",
-    "**/*.min.js"
-  ],
-  "ignoreRegExpList": [
-    "(^|[^a-z])sl[a-z]*(^|[^a-z])"
-  ],
-  "useGitignore": true
-}

custom-elements-manifest.config.js

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

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/404.md

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

docs/_sidebar.md

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