update changelog

packages/webawesome/docs/_includes/visual-tests/color.njk

@@ -516,6 +516,7 @@
           <wa-tag variant="brand" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="brand" appearance="filled">Filled</wa-tag>
           <wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
+          <wa-tag variant="brand" appearance="plain">Plain</wa-tag>
         </div>
       </td>
       <td>
@@ -524,6 +525,7 @@
           <wa-tag class="wa-brand" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-brand" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-brand" appearance="outlined">Outlined</wa-tag>
+          <wa-tag class="wa-brand" appearance="plain">Plain</wa-tag>
         </div>
       </td>
     </tr>
@@ -535,6 +537,7 @@
           <wa-tag variant="neutral" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
           <wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
+          <wa-tag variant="neutral" appearance="plain">Plain</wa-tag>
         </div>
       </td>
       <td>
@@ -543,6 +546,7 @@
           <wa-tag class="wa-neutral" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-neutral" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-neutral" appearance="outlined">Outlined</wa-tag>
+          <wa-tag class="wa-neutral" appearance="plain">Plain</wa-tag>
         </div>
       </td>
     </tr>
@@ -554,6 +558,7 @@
           <wa-tag variant="success" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="success" appearance="filled">Filled</wa-tag>
           <wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
+          <wa-tag variant="success" appearance="plain">Plain</wa-tag>
         </div>
       </td>
       <td>
@@ -562,6 +567,7 @@
           <wa-tag class="wa-success" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-success" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-success" appearance="outlined">Outlined</wa-tag>
+          <wa-tag class="wa-success" appearance="plain">Plain</wa-tag>
         </div>
       </td>
     </tr>
@@ -573,6 +579,7 @@
           <wa-tag variant="warning" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="warning" appearance="filled">Filled</wa-tag>
           <wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
+          <wa-tag variant="warning" appearance="plain">Plain</wa-tag>
         </div>
       </td>
       <td>
@@ -581,6 +588,7 @@
           <wa-tag class="wa-warning" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-warning" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-warning" appearance="outlined">Outlined</wa-tag>
+          <wa-tag class="wa-warning" appearance="plain">Plain</wa-tag>
         </div>
       </td>
     </tr>
@@ -592,6 +600,7 @@
           <wa-tag variant="danger" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="danger" appearance="filled">Filled</wa-tag>
           <wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
+          <wa-tag variant="danger" appearance="plain">Plain</wa-tag>
         </div>
       </td>
       <td>
@@ -600,6 +609,7 @@
           <wa-tag class="wa-danger" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-danger" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-danger" appearance="outlined">Outlined</wa-tag>
+          <wa-tag class="wa-danger" appearance="plain">Plain</wa-tag>
         </div>
       </td>
     </tr>

packages/webawesome/docs/docs/usage.md

@@ -174,54 +174,3 @@ This time we see an empty string, which means the boolean attribute is now prese
 :::info
 To wait for multiple components to update, you can use `requestAnimationFrame()` instead of awaiting each element.
 :::
-
-## Code Completion
-
-### VS Code
-
-Web Awesome ships with a file called `vscode.html-custom-data.json` that can be used to describe its custom elements to [Visual Studio Code](https://code.visualstudio.com/). This enables code completion for Web Awesome components (also known as “code hinting” or “IntelliSense”). To enable it, you need to tell VS Code where the file is.
-
-1. [Install Web Awesome locally](/docs/#installing-via-npm)
-2. If it doesn’t already exist, create a folder called `.vscode` at the root of your project
-3. If it doesn’t already exist, create a file inside that folder called `settings.json`
-4. Add the following to the file
-
-```json
-{
-  "html.customData": ["./node_modules/@awesome.me/webawesome/dist/vscode.html-custom-data.json"]
-}
-```
-
-If `settings.json` already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take effect.
-
-If you are using WebAwesome through the [CDN](/docs/#quick-start-autoloading-via-cdn) you can manually [download the file]({% cdnUrl 'vscode.html-custom-data.json' %}]({% cdnUrl 'vscode.html-custom-data.json' %}) instead.
-
-### JetBrains IDEs
-If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Web Awesome from NPM, the editor will automatically detect the web-types.json file from the package and you should immediately see component information in your editor.
-
-If you are installing from the CDN, you can [download a local copy]({% cdnUrl 'web-types.json' %}) and add it to the root of your project. Be sure to add a reference to the web-types.json file in your package.json in order for your editor to properly detect it.
-
-```json
-{
-  ...
-  "web-types": "./web-types.json"
-  ...
-}
-```
-
-If you are using types from multiple projects, you can add an array of references.
-
-```json
-{
-  ...
-  "web-types": [
-    ...,
-    "./web-types.json"
-  ]
-  ...
-}
-```
-
-### Other Editors
-
-Most popular editors support custom code completion with a bit of configuration. Please [submit a feature request](https://github.com/shoelace-style/webawesome/issues/new/choose) for your editor of choice. PRs are also welcome!

packages/webawesome/src/components/button/button.ts

@@ -11,7 +11,6 @@ import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
-import type WaIcon from '../icon/icon.js';
 import '../spinner/spinner.js';
 import styles from './button.css';
 
@@ -180,9 +179,9 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
 
     // If there's only an icon and no text, it's an icon button
     [...nodes].forEach(node => {
-      if (node.nodeType === Node.ELEMENT_NODE && (node as WaIcon).localName === 'wa-icon') {
+      if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).localName === 'wa-icon') {
         hasIcon = true;
-        if (!hasIconLabel) hasIconLabel = (node as WaIcon).label !== undefined;
+        if (!hasIconLabel) hasIconLabel = (node as HTMLElement).label !== undefined;
       }
 
       // Concatenate text nodes

packages/webawesome/src/components/textarea/textarea.ts

@@ -338,7 +338,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
     const hasHint = this.hint ? true : !!hasHintSlot;
 
     return html`
-      <label part="form-control-label label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
+      <label part="label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
         <slot name="label">${this.label}</slot>
       </label>