diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index e2e7a5331..8ebbc208d 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -13,9 +13,11 @@ 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] - Fixed a bug in `` that caused options not to get cleared correctly. [pr:1782] +- Improved performance of `` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729] ## 3.0.0 @@ -23,6 +25,7 @@ Components with the Experimental badge sh - `` - `` - `` + - `` - `` - `` - `` 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. 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; 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; diff --git a/packages/webawesome/src/components/select/select.ts b/packages/webawesome/src/components/select/select.ts index 3ed66c5d9..a40567e75 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;