diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 6549a8d07..6556ad423 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -13,9 +13,13 @@ Components with the Experimental badge sh
## Next
- Added the Kazakh translation [pr:1496]
+- Added docs for code completion for VS Code and JetBrains [pr:1550]
+- Added back the missing `form-control-label` part to `` for consistency with other form controls [pr:1533]
- Fixed a bug in `` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377]
- Fixed focus outline styles in `` and native `` [issue:1456]
- Fixed focus outline styles in ``, ``, and `` [issue:1484]
+- Fixed a bug that caused icon button labels to not render in frameworks [issue:1542]
+- Fixed a bug in `` that caused the `name` property not to reflect [pr:1538]
## 3.0.0-beta.6
diff --git a/packages/webawesome/docs/docs/usage.md b/packages/webawesome/docs/docs/usage.md
index c7b96681f..b21fcc455 100644
--- a/packages/webawesome/docs/docs/usage.md
+++ b/packages/webawesome/docs/docs/usage.md
@@ -174,3 +174,54 @@ 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!
diff --git a/packages/webawesome/src/components/button/button.ts b/packages/webawesome/src/components/button/button.ts
index 4923d12db..4fa26436b 100644
--- a/packages/webawesome/src/components/button/button.ts
+++ b/packages/webawesome/src/components/button/button.ts
@@ -11,6 +11,7 @@ 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';
@@ -179,9 +180,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 HTMLElement).localName === 'wa-icon') {
+ if (node.nodeType === Node.ELEMENT_NODE && (node as WaIcon).localName === 'wa-icon') {
hasIcon = true;
- if (!hasIconLabel) hasIconLabel = (node as HTMLElement).hasAttribute('label');
+ if (!hasIconLabel) hasIconLabel = (node as WaIcon).label !== undefined;
}
// Concatenate text nodes
diff --git a/packages/webawesome/src/components/details/details.test.ts b/packages/webawesome/src/components/details/details.test.ts
index 75bba1a17..45b9f058f 100644
--- a/packages/webawesome/src/components/details/details.test.ts
+++ b/packages/webawesome/src/components/details/details.test.ts
@@ -24,6 +24,13 @@ describe('', () => {
});
});
+ it('should reflect the name property', async () => {
+ const el = await fixture(html``);
+ el.name = 'test';
+ await el.updateComplete;
+ expect(el.getAttribute('name')).to.equal('test');
+ });
+
it('should be visible with the open attribute', async () => {
const el = await fixture(html`
diff --git a/packages/webawesome/src/components/details/details.ts b/packages/webawesome/src/components/details/details.ts
index 13ad982cf..3b1799d82 100644
--- a/packages/webawesome/src/components/details/details.ts
+++ b/packages/webawesome/src/components/details/details.ts
@@ -70,7 +70,7 @@ export default class WaDetails extends WebAwesomeElement {
@property() summary: string;
/** Groups related details elements. When one opens, others with the same name will close. */
- @property() name: string;
+ @property({ reflect: true }) name: string;
/** Disables the details so it can't be toggled. */
@property({ type: Boolean, reflect: true }) disabled = false;
diff --git a/packages/webawesome/src/components/textarea/textarea.ts b/packages/webawesome/src/components/textarea/textarea.ts
index 61b6e856b..1b3626bac 100644
--- a/packages/webawesome/src/components/textarea/textarea.ts
+++ b/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`
-