improve icon perf; closes #1729

* add manifest json file copying

* update comment

* prettier

packages/webawesome/docs/.eleventy.js

@@ -124,6 +124,22 @@ export default async function (eleventyConfig) {
   eleventyConfig.addFilter('stripExtension', string => path.parse(string + '').name);
   eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
   eleventyConfig.addFilter('uniqueId', (_value, length = 8) => nanoid(length));
+
+  eleventyConfig.addGlobalData('eleventyComputed', {
+    // Page title with smart + default site name formatting
+    pageTitle: data => composePageTitle(data.title),
+    // Open Graph title with smart + default site name formatting
+    ogTitle: data => composePageTitle(data.ogTitle || data.title),
+    ogDescription: data => data.ogDescription || data.description,
+    ogImage: data => data.ogImage || siteMetadata.image,
+    ogUrl: data => {
+      if (data.ogUrl) return data.ogUrl;
+      const url = data.page?.url || '';
+      return url ? `${siteMetadata.url}${url}` : siteMetadata.url;
+    },
+    ogType: data => data.ogType || 'website',
+  });
+
   // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
   // With Prettier 3, this means a leading pipe will exist be present when the line wraps.
   eleventyConfig.addFilter('trimPipes', content => {
@@ -297,18 +313,19 @@ export default async function (eleventyConfig) {
 
   // This needs to happen in "eleventy.after" otherwise incremental builds never update.
   eleventyConfig.on('eleventy.after', function () {
-    let assetsDir = path.join(process.env.BASE_DIR || 'docs', 'assets');
+    const baseDir = process.env.BASE_DIR || 'docs';
+    let assetsDir = path.join(baseDir, 'assets');
     const siteAssetsDir = path.join(eleventyConfig.directories.output, 'assets');
     fs.cpSync(assetsDir, siteAssetsDir, { recursive: true });
+
+    // Passthrough copy for manifest.json (PWA manifest file)
+    fs.cpSync(path.join(baseDir, 'manifest.json'), path.join(eleventyConfig.directories.output, 'manifest.json'));
   });
 
   for (let glob of passThrough) {
     eleventyConfig.addPassthroughCopy(glob);
   }
 
-  // Passthrough copy for manifest.json (PWA manifest file)
-  eleventyConfig.addPassthroughCopy('manifest.json');
-
   // // SSR plugin
   // if (!isDev) {
   //   //

packages/webawesome/docs/docs/resources/changelog.md

@@ -14,6 +14,8 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 ## Next
 
 - Fixed a bug in `<wa-slider>` that caused some touch devices to end up with the incorrect value [issue:1703]
+- Fixed a bug in `<wa-card>` that prevented some slots from being detected correctly [discuss:1450]
+- Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
 
 ## 3.0.0
 

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.
 

packages/webawesome/src/components/card/card.ts

@@ -30,7 +30,15 @@ import styles from './card.css';
 export default class WaCard extends WebAwesomeElement {
   static css = [sizeStyles, styles];
 
-  private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'media');
+  private readonly hasSlotController = new HasSlotController(
+    this,
+    'footer',
+    'header',
+    'media',
+    'header-actions',
+    'footer-actions',
+    'actions',
+  );
 
   /** The card's visual appearance. */
   @property({ reflect: true })

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;