From c0ced13f066f7904afe1cb0c3a354577b3d106bc Mon Sep 17 00:00:00 2001 From: Patrick McDougle Date: Tue, 2 Dec 2025 10:29:04 -0600 Subject: [PATCH 01/11] Add Intersection Observer component to the Utilities Category (#1837) --- .../webawesome/docs/docs/components/intersection-observer.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/webawesome/docs/docs/components/intersection-observer.md b/packages/webawesome/docs/docs/components/intersection-observer.md index 1252b2bcd..c2fd70e25 100644 --- a/packages/webawesome/docs/docs/components/intersection-observer.md +++ b/packages/webawesome/docs/docs/components/intersection-observer.md @@ -2,6 +2,7 @@ title: Intersection Observer description: Tracks immediate child elements and fires events as they move in and out of view. layout: component +category: Utilities --- This component leverages the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) to track when its direct children enter or leave a designated root element. The `wa-intersect` event fires whenever elements cross the visibility threshold. From 2baebca2307397c40677534c4a172a32a1424538 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 8 Dec 2025 13:37:00 -0500 Subject: [PATCH 02/11] remove old and unsupported example (#1842) --- .../docs/docs/components/button-group.md | 54 ------------------- 1 file changed, 54 deletions(-) diff --git a/packages/webawesome/docs/docs/components/button-group.md b/packages/webawesome/docs/docs/components/button-group.md index ce4c5ebf4..5a95cd281 100644 --- a/packages/webawesome/docs/docs/components/button-group.md +++ b/packages/webawesome/docs/docs/components/button-group.md @@ -40,60 +40,6 @@ Set the `orientation` attribute to `vertical` to make a vertical button group. ``` -### Theme Buttons - -Theme buttons are supported through the button group's `variant` attribute. - -```html {.example} - - Left - Center - Right - - -

- - - Left - Center - Right - - -

- - - Left - Center - Right - - -

- - - Left - Center - Right - - -

- - - Left - Center - Right - -``` - -You can still use the buttons’ own `variant` attribute to override the inherited variant. - -```html {.example} - - Left - Center - Right - -``` - ### Pill Buttons Pill buttons are supported through the button's `pill` attribute. From 579e86fc4999cd2f7194823696267457a5c21aa3 Mon Sep 17 00:00:00 2001 From: David Enke Date: Mon, 8 Dec 2025 19:49:22 +0100 Subject: [PATCH 03/11] fix(wa-button): add missing css transition property (#1850) fixes #1844 --- packages/webawesome/src/components/button/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webawesome/src/components/button/button.css b/packages/webawesome/src/components/button/button.css index 7660f5c0e..ac7ddc3f2 100644 --- a/packages/webawesome/src/components/button/button.css +++ b/packages/webawesome/src/components/button/button.css @@ -26,7 +26,7 @@ -webkit-user-select: none; white-space: nowrap; vertical-align: middle; - transition-property: background, border, box-shadow, color; + transition-property: background, border, box-shadow, color, opacity; transition-duration: var(--wa-transition-fast); transition-timing-function: var(--wa-transition-easing); cursor: pointer; From fa6ccc1ee26c7d91f55ee71161ccdfe439e0df42 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 9 Dec 2025 12:10:24 -0500 Subject: [PATCH 04/11] adding cookie consent dialog to base layout (#1840) --- packages/webawesome/docs/_includes/base.njk | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/webawesome/docs/_includes/base.njk b/packages/webawesome/docs/_includes/base.njk index 26b50c2b1..d7fafbed0 100644 --- a/packages/webawesome/docs/_includes/base.njk +++ b/packages/webawesome/docs/_includes/base.njk @@ -142,6 +142,9 @@ {% include "_dialog-wa-launch.njk" ignore missing %} {% endif %} + {#- Cookie Consent Dialog -#} + {% include "cookie-consent.njk" ignore missing %} + {# Footer #} {% block pageFooter %}{% endblock %} From 079c09b9a3fdb0536229d394aa8d4fb86df38676 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 10 Dec 2025 09:38:46 -0500 Subject: [PATCH 05/11] Space Junk Analytics: Remove Plausible Code + Details (#1801) * removing plausible-based code --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../docs/_includes/_dialog-wa-launch.njk | 24 +++---------------- packages/webawesome/docs/_includes/base.njk | 1 - 2 files changed, 3 insertions(+), 22 deletions(-) diff --git a/packages/webawesome/docs/_includes/_dialog-wa-launch.njk b/packages/webawesome/docs/_includes/_dialog-wa-launch.njk index e1ddbeb19..e1326ccbc 100644 --- a/packages/webawesome/docs/_includes/_dialog-wa-launch.njk +++ b/packages/webawesome/docs/_includes/_dialog-wa-launch.njk @@ -14,8 +14,8 @@

Celebrate our official launch with a 20% discount on a Web Awesome Pro plan…for life! But hurry, this lifetime discount is only available for a limited time.

{{ component.summary | inlineMarkdown | safe }} @@ -20,6 +23,37 @@ {# Component API #} {% block afterContent %} + {# Importing #} +

Importing

+

+ Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets. +

+ + {% set componentName = component.tagName | stripPrefix %} + {% set componentPath = ["components/", componentName, "/", componentName, ".js"] | join("") %} + + CDN + npm + React + +

+ Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome. +

+ + +

+ To manually import this component from NPM, use the following code. +

+ 
import '@awesome.me/webawesome/dist/{{ componentPath }}';
+ + +

+ To manually import this component from React, use the following code. +

+ 
import {{ component.name }} from '@awesome.me/webawesome/dist/react/{{ componentName }}';
+ + + {# Slots #} {% if component.slots.length %}

Slots

@@ -270,38 +304,6 @@ {% endif %} - {# Importing #} -

Importing

-

- Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets. -

- - - {% set componentName = component.tagName | stripPrefix %} - {% set componentPath = ["components/", componentName, "/", componentName, ".js"] | join("") %} - - CDN - npm - React - -

- Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome. -

- - -

- To manually import this component from NPM, use the following code. -

- 
import '@awesome.me/webawesome/dist/{{ componentPath }}';
- - -

- To manually import this component from React, use the following code. -

- 
import {{ component.name }} from '@awesome.me/webawesome/dist/react/{{ componentName }}';
- - -
diff --git a/packages/webawesome/docs/docs/components/select.md b/packages/webawesome/docs/docs/components/select.md index ff7135e8a..2878fc00b 100644 --- a/packages/webawesome/docs/docs/components/select.md +++ b/packages/webawesome/docs/docs/components/select.md @@ -285,9 +285,10 @@ Remember that custom tags are rendered in a shadow root. To style them, you can const name = option.querySelector('wa-icon[slot="start"]').name; // You can return a string, a Lit Template, or an HTMLElement here + // Important: include data-value so the tag can be removed properly! return ` - - + + ${option.label} `; @@ -299,6 +300,10 @@ Remember that custom tags are rendered in a shadow root. To style them, you can Be sure you trust the content you are outputting! Passing unsanitized user input to `getTag()` can result in XSS vulnerabilities. ::: +:::info +When using custom tags with `with-remove`, you must include the `data-value` attribute set to the option's value. This allows the select to identify which option to deselect when the tag's remove button is clicked. +::: + ### Lazy loading options Lazy loading options works similarly to native `