From 5e482739a9973cd2044c743d57b2e8c5e02e9278 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 3 Oct 2025 12:56:05 -0400 Subject: [PATCH 01/27] updating Home view to support purchasing Pro (#1528) --- packages/webawesome/docs/index.md | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/webawesome/docs/index.md b/packages/webawesome/docs/index.md index baf06b778..e85a3473f 100644 --- a/packages/webawesome/docs/index.md +++ b/packages/webawesome/docs/index.md @@ -257,11 +257,22 @@ layout: page {% if currentUser.hasPro %} Thanks for being a Web Awesome Pro subscriber! {% else %} - Psst! You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good. - - - Pre-order WA Pro - + {% if App.flags.stripeEnabled %} +
+ +

Unlock Pro-only themes, components, patterns, and great services like the Theme Builder.

+
+ + + Purchase Pro + + {% else %} + Psst! You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good. + + + Pre-order WA Pro + + {% endif %} {% endif %} {% endraw %} From 334e3361b4079ccd75c15811dd7c0a75c7c6dc9c Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 3 Oct 2025 17:34:52 -0400 Subject: [PATCH 02/27] Docs: Add Planned Features to Navigation (#1539) * adding plannedBadge() macro + planned-badge.njk * adding planned features to sidebar.njk * adding .icon-shrink utility to utils.css * using icon-shrink on sidebar's experimental iconography * revising proBadge macro * defining params in a more clear manner * adding shrink param to visually reduce badge size * setting proBadge to shrink in sidebar.njk * addressing PR feedback * reverting proBadge shrink param * revisiting pro + sidebar wa-badge styling * removing text-transform from pro badge * scaling down sidebar-based wa-badges using 1 step below --wa-font-size-scale --- .../webawesome/docs/_includes/planned-badge.njk | 5 +++++ .../webawesome/docs/_includes/pro-badge.njk | 7 ++++--- packages/webawesome/docs/_includes/sidebar.njk | 17 +++++++++++------ packages/webawesome/docs/assets/styles/docs.css | 11 +++++++++++ .../webawesome/docs/assets/styles/utils.css | 17 ++++++++++++++++- 5 files changed, 47 insertions(+), 10 deletions(-) create mode 100644 packages/webawesome/docs/_includes/planned-badge.njk diff --git a/packages/webawesome/docs/_includes/planned-badge.njk b/packages/webawesome/docs/_includes/planned-badge.njk new file mode 100644 index 000000000..8ca42c450 --- /dev/null +++ b/packages/webawesome/docs/_includes/planned-badge.njk @@ -0,0 +1,5 @@ +{% macro plannedBadge(plannedBadgeDescription, plannedBadgeId) %} + {% set badgeId = plannedBadgeId or ("planned-badge-" + ("" | uniqueId(8))) %} + Planned + {{ plannedBadgeDescription or "This is a planned feature" }} +{% endmacro %} diff --git a/packages/webawesome/docs/_includes/pro-badge.njk b/packages/webawesome/docs/_includes/pro-badge.njk index f5d05dd2a..d67d37372 100644 --- a/packages/webawesome/docs/_includes/pro-badge.njk +++ b/packages/webawesome/docs/_includes/pro-badge.njk @@ -1,5 +1,6 @@ -{% macro proBadge(proBadgeDescription, proBadgeId) %} - {% set badgeId = proBadgeId or ("pro-badge-" + ("" | uniqueId(8))) %} +{% macro proBadge(params) %} + {% set description = params.description or "This requires access to Web Awesome Pro" %} + {% set badgeId = params.id or ("pro-badge-" + ("" | uniqueId(8))) %} Pro - {{ proBadgeDescription or "This requires access to Web Awesome Pro" }} + {{ description }} {% endmacro %} diff --git a/packages/webawesome/docs/_includes/sidebar.njk b/packages/webawesome/docs/_includes/sidebar.njk index 8f6a0dd04..dd13f997b 100644 --- a/packages/webawesome/docs/_includes/sidebar.njk +++ b/packages/webawesome/docs/_includes/sidebar.njk @@ -1,6 +1,7 @@ {# Search #} {% include "search-trigger-button.njk" %} {% from "pro-badge.njk" import proBadge %} +{% from "planned-badge.njk" import plannedBadge %} {# Getting started #}

Getting Started

@@ -40,7 +41,7 @@
  • @@ -62,26 +63,30 @@
    • +
  • Checkbox
  • Color Picker
    • +
  • Comparison
    • +
    • +
  • Details
  • Dialog
  • Divider
    • @@ -181,7 +186,7 @@
  • @@ -375,7 +380,7 @@
    • diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css index 88aeb67a5..938150bd7 100644 --- a/packages/webawesome/docs/assets/styles/docs.css +++ b/packages/webawesome/docs/assets/styles/docs.css @@ -181,6 +181,12 @@ wa-page > header { } } + li wa-badge { + /* adding 1 scale below --wa-font-size-2xs to handle badge proportions in sidebar nav */ + --font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px); /* 10px */ + font-size: var(--font-size-3xs); + } + wa-details { --show-duration: 0; --hide-duration: 0; @@ -218,6 +224,11 @@ wa-button.delete { } } +/* planned sidebar item */ +.is-planned { + color: var(--wa-color-text-quiet); +} + #sidebar-close-button { display: none; } diff --git a/packages/webawesome/docs/assets/styles/utils.css b/packages/webawesome/docs/assets/styles/utils.css index aadba9e93..52655e13d 100644 --- a/packages/webawesome/docs/assets/styles/utils.css +++ b/packages/webawesome/docs/assets/styles/utils.css @@ -73,7 +73,17 @@ color: white; background-color: var(--wa-brand-orange); border-color: var(--wa-brand-orange); - text-transform: uppercase; + + + wa-tooltip { + font-size: var(--wa-font-size-xs); + --max-width: unset; + } + } + + /* planned badge */ + wa-badge.planned { + background-color: var(--wa-color-neutral-fill-quiet); + color: var(--wa-color-neutral-on-quiet); + wa-tooltip { font-size: var(--wa-font-size-xs); @@ -145,5 +155,10 @@ wa-icon.icon-embiggen { font-size: round(1.125em, 1px); } + + /* decreasing visual size of icons in certain contexts (such as in sidebar nav) */ + wa-icon.icon-shrink { + font-size: round(0.875em, 1px); + } /* #endregion */ } From 0eb8eaea008722d34fc3c0e85051a685cd16590f Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Fri, 3 Oct 2025 23:42:31 -0400 Subject: [PATCH 03/27] add versions.txt (#1546) --- VERSIONS.txt | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 VERSIONS.txt diff --git a/VERSIONS.txt b/VERSIONS.txt new file mode 100644 index 000000000..11c438ca2 --- /dev/null +++ b/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 From 0b4517319233b1a1f1e478862a071c0fbdddc671 Mon Sep 17 00:00:00 2001 From: Leon Vogt Date: Mon, 13 Oct 2025 16:39:29 +0200 Subject: [PATCH 04/27] 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 05/27] 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 06/27] 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 07/27] =?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 08/27] 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` -