From 0b4517319233b1a1f1e478862a071c0fbdddc671 Mon Sep 17 00:00:00 2001 From: Leon Vogt Date: Mon, 13 Oct 2025 16:39:29 +0200 Subject: [PATCH 01/14] Enhance icon button label check (#1543) --- packages/webawesome/src/components/button/button.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webawesome/src/components/button/button.ts b/packages/webawesome/src/components/button/button.ts index 4923d12db..01c7bcd3f 100644 --- a/packages/webawesome/src/components/button/button.ts +++ b/packages/webawesome/src/components/button/button.ts @@ -181,7 +181,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { [...nodes].forEach(node => { if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).localName === 'wa-icon') { hasIcon = true; - if (!hasIconLabel) hasIconLabel = (node as HTMLElement).hasAttribute('label'); + if (!hasIconLabel) hasIconLabel = (node as HTMLElement).label !== undefined; } // Concatenate text nodes From 51253650e19f57d7d13b505dcf40ed0ccce1f1d0 Mon Sep 17 00:00:00 2001 From: Jason Polete Date: Mon, 13 Oct 2025 10:40:35 -0400 Subject: [PATCH 02/14] Fix wa-details accordion behavior in react (#1538) * fix wa-details accordion in react (#1534) * Update packages/webawesome/src/components/details/details.test.ts Co-authored-by: Cory LaViska * Remove unused import * Fix unintended indent --------- Co-authored-by: Cory LaViska --- packages/webawesome/src/components/details/details.test.ts | 7 +++++++ packages/webawesome/src/components/details/details.ts | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/webawesome/src/components/details/details.test.ts b/packages/webawesome/src/components/details/details.test.ts index 75bba1a17..7ceb952dd 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; From 64ce424c4290a119b50afb033cd482aab7bf5957 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Muscat Date: Mon, 13 Oct 2025 16:43:16 +0200 Subject: [PATCH 03/14] Document code completion setup for Web Awesome (#1550) * Document code completion setup for Web Awesome Added instructions for enabling code completion in VS Code and JetBrains IDEs for Web Awesome components. This mirror what already exist for Shoelace: https://shoelace.style/getting-started/usage#code-completion + a new line to explain how to setup VS Code completion from the CDN * Update packages/webawesome/docs/docs/usage.md * Update packages/webawesome/docs/docs/usage.md * Update packages/webawesome/docs/docs/usage.md * Update packages/webawesome/docs/docs/usage.md * Update packages/webawesome/docs/docs/usage.md * Update packages/webawesome/docs/docs/usage.md --------- Co-authored-by: Cory LaViska --- packages/webawesome/docs/docs/usage.md | 51 ++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) 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! From ed17964f108aeb62923afc3d6e9f7839c4b9f1a4 Mon Sep 17 00:00:00 2001 From: trent Date: Mon, 13 Oct 2025 10:43:55 -0400 Subject: [PATCH 04/14] =?UTF-8?q?remove=20unsupported=20tag=20=E2=80=98pla?= =?UTF-8?q?in=E2=80=99=20appearance=20visual=20test=20(#1519)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../webawesome/docs/_includes/visual-tests/color.njk | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/webawesome/docs/_includes/visual-tests/color.njk b/packages/webawesome/docs/_includes/visual-tests/color.njk index bb37e61b3..8ba36b7b1 100644 --- a/packages/webawesome/docs/_includes/visual-tests/color.njk +++ b/packages/webawesome/docs/_includes/visual-tests/color.njk @@ -516,7 +516,6 @@ Filled + Outlined Filled Outlined - Plain @@ -525,7 +524,6 @@ - @@ -537,7 +535,6 @@ Filled + Outlined Filled Outlined - Plain @@ -546,7 +543,6 @@ - @@ -558,7 +554,6 @@ Filled + Outlined Filled Outlined - Plain @@ -567,7 +562,6 @@ - @@ -579,7 +573,6 @@ Filled + Outlined Filled Outlined - Plain @@ -588,7 +581,6 @@ - @@ -600,7 +592,6 @@ Filled + Outlined Filled Outlined - Plain @@ -609,7 +600,6 @@ - From 8fc0ee89ff55f305499cc959f551b31736ec0d40 Mon Sep 17 00:00:00 2001 From: LX Date: Mon, 13 Oct 2025 16:45:39 +0200 Subject: [PATCH 05/14] Fix missing form-control-label part on texarea (#1533) --- packages/webawesome/src/components/textarea/textarea.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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` -