From 17fd3d238c71250cbc998694cd0050fdbce831a6 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Nov 2025 14:38:40 -0500 Subject: [PATCH 1/5] fix typo; closes #1713 --- packages/webawesome/docs/docs/utilities/fouce.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webawesome/docs/docs/utilities/fouce.md b/packages/webawesome/docs/docs/utilities/fouce.md index cfe22e8dc..8bb731bba 100644 --- a/packages/webawesome/docs/docs/utilities/fouce.md +++ b/packages/webawesome/docs/docs/utilities/fouce.md @@ -22,7 +22,7 @@ As soon as all elements are registered _or_ after two seconds have elapsed, the :::details Are you using Turbo in your app? -If you're using [Turbo](https://turbo.hotwired.dev/) to serve a multi-page application (MPA) as a single page application (SPA), you might notice FOUCE when navigating from page to page. This is because Turbo renders the new page's content before the autoloader has a change to register new components. +If you're using [Turbo](https://turbo.hotwired.dev/) to serve a multi-page application (MPA) as a single page application (SPA), you might notice FOUCE when navigating from page to page. This is because Turbo renders the new page's content before the autoloader has a chance to register new components. The following function acts as a middleware to ensure components are registered _before_ the page shows, eliminating FOUCE for page-to-page navigation with Turbo. From 634828d89a45c5a1641204304efaeb4e18ddac19 Mon Sep 17 00:00:00 2001 From: Dimitri Date: Mon, 17 Nov 2025 20:49:32 +0100 Subject: [PATCH 2/5] fix(wa-icon): add waitUntilFirstUpdate: true option to the setIcon() watch decorator (#1738) --- packages/webawesome/src/components/icon/icon.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webawesome/src/components/icon/icon.ts b/packages/webawesome/src/components/icon/icon.ts index 785289805..d9e8d9760 100644 --- a/packages/webawesome/src/components/icon/icon.ts +++ b/packages/webawesome/src/components/icon/icon.ts @@ -187,7 +187,7 @@ export default class WaIcon extends WebAwesomeElement { } } - @watch(['family', 'name', 'library', 'variant', 'src', 'autoWidth', 'swapOpacity']) + @watch(['family', 'name', 'library', 'variant', 'src', 'autoWidth', 'swapOpacity'], { waitUntilFirstUpdate: true }) async setIcon() { const { url, fromLibrary } = this.getIconSource(); const library = fromLibrary ? getIconLibrary(this.library) : undefined; From 411d385d654e641598f490e36372fe75ae247616 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Nov 2025 14:49:45 -0500 Subject: [PATCH 3/5] improve icon perf; closes #1729 (#1783) --- packages/webawesome/docs/docs/resources/changelog.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index b86419fc9..fddd7d024 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -15,6 +15,7 @@ Components with the Experimental badge sh - Fixed a bug in `` that caused some touch devices to end up with the incorrect value [issue:1703] - Fixed a bug in `` that prevented some slots from being detected correctly [discuss:1450] +- Improved performance of `` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729] ## 3.0.0 From 2491ca45ac0c3ff26de55a10ab80952110212670 Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Mon, 17 Nov 2025 14:12:23 -0600 Subject: [PATCH 4/5] Fix `appearance="filled-outlined"` in `` (#1694) * upated filled-outlined attribute for cards * updated selector * updated changelog * updated heading * updated css * remove final `~=` selector (thanks @Copilot) Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../webawesome/docs/docs/resources/changelog.md | 2 ++ packages/webawesome/src/components/card/card.css | 13 +++++++------ packages/webawesome/src/components/card/card.ts | 2 +- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index fddd7d024..3526e0628 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -13,6 +13,7 @@ Components with the Experimental badge sh ## Next +- 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in `` [issue:1671] - Fixed a bug in `` that caused some touch devices to end up with the incorrect value [issue:1703] - Fixed a bug in `` that prevented some slots from being detected correctly [discuss:1450] - Improved performance of `` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729] @@ -23,6 +24,7 @@ Components with the Experimental badge sh - `` - `` - `` + - `` - `` - `` - `` diff --git a/packages/webawesome/src/components/card/card.css b/packages/webawesome/src/components/card/card.css index 5156511df..cb06f19f6 100644 --- a/packages/webawesome/src/components/card/card.css +++ b/packages/webawesome/src/components/card/card.css @@ -16,27 +16,28 @@ } /* Appearance modifiers */ -:host([appearance~='plain']) { +:host([appearance='plain']) { background-color: transparent; border-color: transparent; box-shadow: none; } -:host([appearance~='outlined']) { +:host([appearance='outlined']) { background-color: var(--wa-color-surface-default); border-color: var(--wa-color-surface-border); } -:host([appearance~='filled']) { +:host([appearance='filled']) { background-color: var(--wa-color-neutral-fill-quiet); border-color: transparent; } -:host([appearance~='filled'][appearance~='outlined']) { - border-color: var(--wa-color-neutral-border-quiet); +:host([appearance='filled-outlined']) { + background-color: var(--wa-color-neutral-fill-quiet); + border-color: var(--wa-color-surface-border); } -:host([appearance~='accent']) { +:host([appearance='accent']) { color: var(--wa-color-neutral-on-loud); background-color: var(--wa-color-neutral-fill-loud); border-color: transparent; diff --git a/packages/webawesome/src/components/card/card.ts b/packages/webawesome/src/components/card/card.ts index 94a4212e7..58c072852 100644 --- a/packages/webawesome/src/components/card/card.ts +++ b/packages/webawesome/src/components/card/card.ts @@ -42,7 +42,7 @@ export default class WaCard extends WebAwesomeElement { /** The card's visual appearance. */ @property({ reflect: true }) - appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'outlined'; + appearance: 'accent' | 'filled' | 'outlined' | 'filled-outlined' | 'plain' = 'outlined'; /** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */ @property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false; From 8fb521d9ef8bcc21ce2452426d455bce99c8ee7f Mon Sep 17 00:00:00 2001 From: Fred <37804453+fmercille@users.noreply.github.com> Date: Mon, 17 Nov 2025 17:15:18 -0500 Subject: [PATCH 5/5] Adding a `reflect` property option to the `name` property (#1716) --- packages/webawesome/src/components/select/select.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webawesome/src/components/select/select.ts b/packages/webawesome/src/components/select/select.ts index cfedcdd6d..2e1459e1c 100644 --- a/packages/webawesome/src/components/select/select.ts +++ b/packages/webawesome/src/components/select/select.ts @@ -119,7 +119,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { @state() optionValues: Set | undefined; /** The name of the select, submitted as a name/value pair with form data. */ - @property() name = ''; + @property({ reflect: true }) name = ''; private _defaultValue: null | string | string[] = null;