From ed3cb6d78210d8146ae9615e9ee90049973f9922 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 24 Nov 2025 12:31:15 -0500 Subject: [PATCH 01/17] marking planned pro components in sidebar (#1819) --- packages/webawesome/docs/_includes/sidebar.njk | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/webawesome/docs/_includes/sidebar.njk b/packages/webawesome/docs/_includes/sidebar.njk index ee902cd5d..0d629660c 100644 --- a/packages/webawesome/docs/_includes/sidebar.njk +++ b/packages/webawesome/docs/_includes/sidebar.njk @@ -78,10 +78,10 @@ -
    • +
  • Checkbox
  • Color Picker
    • -
    • +
  • Comparison
    • -
    • -
    • +
    • +
  • Details
  • Dialog
  • Divider
    • @@ -101,7 +101,7 @@
  • Dropdown Item
    • -
    • +
  • Format Bytes
  • Format Date
  • Format Number
    • @@ -146,7 +146,7 @@
  • Tag
  • Textarea
    • -
    • +
  • Tooltip
  • Tree @@ -154,7 +154,7 @@
  • Tree Item
    • -
    • +
  • Zoomable Frame
    • {# PLOP_NEW_COMPONENT_PLACEHOLDER #} From fa558eeda054f11087063e22e88447aed29c852f Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 24 Nov 2025 15:58:08 -0500 Subject: [PATCH 02/17] update npm-check-updates and set a cooldown (#1820) --- package-lock.json | 19 +++++++++++++++++-- packages/webawesome/package.json | 5 +++-- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index f82819c0d..311fb0b01 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14029,7 +14029,8 @@ "devDependencies": { "@wc-toolkit/jsx-types": "^1.3.0", "eleventy-plugin-git-commit-date": "^0.1.3", - "esbuild": "^0.25.11" + "esbuild": "^0.25.11", + "npm-check-updates": "^19.1.2" }, "engines": { "node": ">=14.17.0" @@ -14037,7 +14038,7 @@ }, "packages/webawesome-pro": { "name": "@shoelace-style/webawesome-pro", - "version": "3.0.0-beta.6", + "version": "3.0.0", "dependencies": { "@ctrl/tinycolor": "4.1.0", "@floating-ui/dom": "^1.6.13", @@ -14966,6 +14967,20 @@ "engines": { "node": "^18 || >=20" } + }, + "packages/webawesome/node_modules/npm-check-updates": { + "version": "19.1.2", + "resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-19.1.2.tgz", + "integrity": "sha512-FNeFCVgPOj0fz89hOpGtxP2rnnRHR7hD2E8qNU8SMWfkyDZXA/xpgjsL3UMLSo3F/K13QvJDnbxPngulNDDo/g==", + "dev": true, + "bin": { + "ncu": "build/cli.js", + "npm-check-updates": "build/cli.js" + }, + "engines": { + "node": ">=20.0.0", + "npm": ">=8.12.1" + } } } } diff --git a/packages/webawesome/package.json b/packages/webawesome/package.json index 176b36f6d..151ae51df 100644 --- a/packages/webawesome/package.json +++ b/packages/webawesome/package.json @@ -64,7 +64,7 @@ "spellcheck": "cspell \"**/*.{js,ts,json,html,css,md}\" --no-progress --config=\"../../cspell.json\"", "verify": "npm run prettier && npm run build && npm run test", "prepublishOnly": "npm run verify", - "check-updates": "npx npm-check-updates --interactive --format group", + "check-updates": "npm-check-updates --cooldown 7 --interactive --format group", "print-version": "echo $npm_package_version", "tag-version": "git tag -a \"v$(npm run print-version | tail -n1)\" -m \"tag v$(npm run print-version | tail -n1)\"", "postversion": "npm run tag-version" @@ -91,6 +91,7 @@ "devDependencies": { "@wc-toolkit/jsx-types": "^1.3.0", "eleventy-plugin-git-commit-date": "^0.1.3", - "esbuild": "^0.25.11" + "esbuild": "^0.25.11", + "npm-check-updates": "^19.1.2" } } From 5fb6faf527d893ac3cf9be30d29c4c5867e22942 Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Tue, 25 Nov 2025 12:09:56 -0500 Subject: [PATCH 03/17] update webawesome simulation to be closer to the app. (#1789) * update webawesome simulation to be closer to the app. * prettier --- .../docs/_utils/simulate-webawesome-app.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/webawesome/docs/_utils/simulate-webawesome-app.js b/packages/webawesome/docs/_utils/simulate-webawesome-app.js index 0c07a25c7..f24682521 100644 --- a/packages/webawesome/docs/_utils/simulate-webawesome-app.js +++ b/packages/webawesome/docs/_utils/simulate-webawesome-app.js @@ -1,10 +1,20 @@ +import * as path from 'node:path'; import nunjucks from 'nunjucks'; +const baseDir = process.env.BASE_DIR || 'docs'; + +const views = [path.join(baseDir), path.join(baseDir, '_layouts'), path.join(baseDir, '_includes')]; + +const nunjucksEnv = new nunjucks.Environment(new nunjucks.FileSystemLoader(views), { + autoescape: true, + noCache: process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test', +}); + /** * This function simulates what a server would do running "on top" of eleventy. */ export function SimulateWebAwesomeApp(str) { - return nunjucks.renderString(str, { + return nunjucksEnv.renderString(str, { // Stub the server EJS shortcodes. currentUser: { hasPro: false, From 8ae90ef2b231d5f0e840eeb4354ec131e8844550 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 25 Nov 2025 16:35:31 -0500 Subject: [PATCH 04/17] add missing icon dep (#1828) --- packages/webawesome/docs/docs/resources/changelog.md | 1 + .../webawesome/src/components/dropdown-item/dropdown-item.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index a6f2c5e36..bc4553f9f 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -20,6 +20,7 @@ Components with the Experimental badge sh - Fixed a bug in `` that caused some icon libraries to render with the incorrect SVG fill [issue:1733] - Fixed a bug in `` that caused the spinner to not show when lazy loading [issue:1678] - Fixed a bug in `` that caused the browser to hang when cancelling the `wa-hide` event [issue:1483] +- Fixed a bug in `` that prevented the icon dependency from being imported [issue:1825] - Improved performance of `` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729] - Modified the default `transition` styles of `` to use design tokens [pr:1693] diff --git a/packages/webawesome/src/components/dropdown-item/dropdown-item.ts b/packages/webawesome/src/components/dropdown-item/dropdown-item.ts index 4e43f5d6f..c01b7fcb9 100644 --- a/packages/webawesome/src/components/dropdown-item/dropdown-item.ts +++ b/packages/webawesome/src/components/dropdown-item/dropdown-item.ts @@ -4,6 +4,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'; import { animateWithClass } from '../../internal/animate.js'; import { HasSlotController } from '../../internal/slot.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; +import '../icon/icon.js'; import styles from './dropdown-item.css'; /** From c0ced13f066f7904afe1cb0c3a354577b3d106bc Mon Sep 17 00:00:00 2001 From: Patrick McDougle Date: Tue, 2 Dec 2025 10:29:04 -0600 Subject: [PATCH 05/17] 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 06/17] 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 07/17] 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 08/17] 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 09/17] 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 `