make event cancelable

Bump package.json version

update lockfile

cspell.json

@@ -92,6 +92,7 @@
     "heroicons",
     "hexa",
     "Hotwire",
+    "hrefs",
     "Iconoir",
     "Iframes",
     "iife",

package-lock.json

@@ -13977,7 +13977,7 @@
     },
     "packages/webawesome": {
       "name": "@awesome.me/webawesome",
-      "version": "3.0.0-beta.4",
+      "version": "3.0.0-beta.5",
       "license": "MIT",
       "dependencies": {
         "@ctrl/tinycolor": "^4.1.0",

packages/webawesome/docs/.eleventy.js

@@ -76,6 +76,7 @@ export default async function (eleventyConfig) {
   //
   eleventyConfig.addGlobalData('package', packageData);
   eleventyConfig.addGlobalData('layout', 'page.njk');
+  eleventyConfig.addGlobalData('pageType', 'docs'); // Default page type
   eleventyConfig.addGlobalData('server', {
     head: '',
     loginOrAvatar: '',
@@ -159,6 +160,15 @@ export default async function (eleventyConfig) {
   // Use our own markdown instance
   eleventyConfig.setLibrary('md', markdown);
 
+  // for files with `unpublished: true`, it will make sure they do not make it into the final build at all, but will be usable in development.
+  eleventyConfig.addPreprocessor('unpublished', '*', (data, content) => {
+    if (data.unpublished && process.env.ELEVENTY_RUN_MODE === 'build') {
+      return false;
+    }
+
+    return content;
+  });
+
   // Add anchors to headings
   eleventyConfig.addTransform('doc-transforms', function (content) {
     let doc = HTMLParse(content, { blockTextElements: { code: true } });

packages/webawesome/docs/_data/themer.js

@@ -74,12 +74,12 @@ export const themes = [
       body: {
         name: 'Quicksand',
         css: 'Quicksand, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
       },
       heading: {
         name: 'Quicksand',
         css: 'Quicksand, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
       },
       code: {
         name: 'OS Default',
@@ -89,7 +89,7 @@ export const themes = [
       longform: {
         name: 'Crimson Pro',
         css: '"Crimson Pro", serif',
-        href: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
       },
     },
     icons: {
@@ -194,22 +194,22 @@ export const themes = [
       body: {
         name: 'Inter',
         css: 'Inter, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
       },
       heading: {
         name: 'Inter',
         css: 'Inter, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
       },
       code: {
         name: 'Geist Mono',
         css: '"Geist Mono", monospace',
-        href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
       },
       longform: {
         name: 'Aleo',
         css: 'Aleo, serif',
-        href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
       },
     },
     icons: {
@@ -254,22 +254,22 @@ export const themes = [
       body: {
         name: 'Space Grotesk',
         css: '"Space Grotesk", sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
       },
       heading: {
         name: 'IBM Plex Sans Condensed',
         css: '"IBM Plex Sans Condensed", sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
       },
       code: {
         name: 'Space Mono',
         css: '"Space Mono", monospace',
-        href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
       },
       longform: {
         name: 'Podkova',
         css: 'Podkova, serif',
-        href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
       },
     },
     icons: {
@@ -314,22 +314,22 @@ export const themes = [
       body: {
         name: 'Figtree',
         css: 'Figtree, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
       },
       heading: {
         name: 'Figtree',
         css: 'Figtree, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
       },
       code: {
         name: 'Chivo Mono',
         css: '"Chivo Mono", monospace',
-        href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
       },
       longform: {
         name: 'Fraunces',
         css: 'Fraunces, serif',
-        href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
       },
     },
     icons: {
@@ -374,22 +374,22 @@ export const themes = [
       body: {
         name: 'Wix Madefor Text',
         css: '"Wix Madefor Text", sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
       },
       heading: {
         name: 'Wix Madefor Text',
         css: '"Wix Madefor Text", sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
       },
       code: {
         name: 'Roboto Mono',
         css: '"Roboto Mono", monospace',
-        href: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
       },
       longform: {
         name: 'Roboto Serif',
         css: '"Roboto Serif", serif',
-        href: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
       },
     },
     icons: {
@@ -434,12 +434,12 @@ export const themes = [
       body: {
         name: 'Mulish',
         css: 'Mulish, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap',
       },
       heading: {
         name: 'Lora',
         css: 'Lora, serif',
-        href: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap',
       },
       code: {
         name: 'OS Default',
@@ -449,7 +449,7 @@ export const themes = [
       longform: {
         name: 'Lora',
         css: 'Lora, serif',
-        href: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap',
       },
     },
     icons: {
@@ -494,22 +494,22 @@ export const themes = [
       body: {
         name: 'Nunito',
         css: 'Nunito, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
       },
       heading: {
         name: 'Fredoka',
         css: 'Fredoka, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
       },
       code: {
         name: 'Azeret Mono',
         css: '"Azeret Mono", monospace',
-        href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
       },
       longform: {
         name: 'BioRhyme',
         css: 'BioRhyme, serif',
-        href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
       },
     },
     icons: {
@@ -554,12 +554,12 @@ export const themes = [
       body: {
         name: 'DM Sans',
         css: '"DM Sans", sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap',
       },
       heading: {
         name: 'Playfair Display',
         css: '"Playfair Display", serif',
-        href: 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap',
       },
       code: {
         name: 'OS Default',
@@ -569,7 +569,7 @@ export const themes = [
       longform: {
         name: 'Playfair',
         css: 'Playfair, serif',
-        href: 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap',
       },
     },
     icons: {
@@ -614,12 +614,12 @@ export const themes = [
       body: {
         name: 'Inter',
         css: 'Inter, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
       },
       heading: {
         name: 'Inter',
         css: 'Inter, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+        href: 'https://fonts.bunny.net/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
       },
       code: {
         name: 'OS Default',

packages/webawesome/docs/_includes/base.njk

@@ -15,8 +15,14 @@
     {% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar.js"></script>{% endif %}
     <script defer data-domain="webawesome.com" src="https://plausible.io/js/script.js"></script>
 
-    {# Docs styles #}
-    <link rel="stylesheet" href="/assets/styles/docs.css" />
+    {% if pageType == 'marketing' %}
+      {# Marketing styles #}
+      <link rel="stylesheet" href="/assets/styles/marketing.css" />
+    {% else %}
+      {# Docs styles (default) #}
+      <link rel="stylesheet" href="/assets/styles/docs.css" />
+    {% endif %}
+
 
     {% block head %}{% endblock %}
 
@@ -42,51 +48,55 @@
       }
     </script>
   </head>
-  <body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
+  <body class="layout-{{ layout | stripExtension }} page-{{ page.fileSlug or 'home' }}{{ ' page-wide' if wide }} page-{{ pageType or 'docs' }}">
     <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
-    <wa-page view="desktop" disable-navigation-toggle mobile-breakpoint="1180">
-      <header slot="header" class="wa-split">
-        {# Logo #}
-        <div id="docs-branding">
-          {# Nav toggle #}
-          <wa-button appearance="plain" size="small" data-toggle-nav>
-            <wa-icon name="bars" label="Toggle navigation"></wa-icon>
-          </wa-button>
+    <wa-page view="desktop" disable-navigation-toggle {% if pageType == 'marketing' %}disable-sticky="header"{% endif %} mobile-breakpoint="1180">
+      {% if pageHeader %}
+        {% include pageHeader %}
+      {% else %}
+        <header slot="header" class="wa-split">
+          {# Logo #}
+          <div id="docs-branding">
+            {# Nav toggle #}
+            <wa-button appearance="plain" size="small" data-toggle-nav>
+              <wa-icon name="bars" label="Toggle navigation"></wa-icon>
+            </wa-button>
 
-          <a href="/" aria-label="Web Awesome">
-            <span class="wa-desktop-only">{% include "logo.njk" %}</span>
-            <span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
-          </a>
-          <small id="version-number" class="wa-desktop-only">{{ package.version }}</small>
-          <wa-badge variant="brand" appearance="filled" class="wa-desktop-only">Beta</wa-badge>
-        </div>
-
-        <div id="docs-toolbar" class="wa-cluster">
-          {# Desktop selectors #}
-          <div class="wa-desktop-only wa-cluster wa-gap-xs">
-            {% include "theme-selector.njk" %}
-            {% include "color-scheme-selector.njk" %}
+            <a href="/" aria-label="Web Awesome">
+              <span class="wa-desktop-only">{% include "logo.njk" %}</span>
+              <span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
+            </a>
+            <small id="version-number" class="wa-desktop-only">{{ package.version }}</small>
+            <wa-badge variant="brand" appearance="filled" class="wa-desktop-only">Beta</wa-badge>
           </div>
 
-          <wa-divider orientation="vertical" class="wa-desktop-only"></wa-divider>
+          <div id="docs-toolbar" class="wa-cluster">
+            {# Desktop selectors #}
+            <div class="wa-desktop-only wa-cluster wa-gap-xs">
+              {% include "theme-selector.njk" %}
+              {% include "color-scheme-selector.njk" %}
+            </div>
 
-          <div id="github-buttons" class="wa-cluster wa-gap-xs">
-            <wa-button id="github-repo-button" href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
-              <wa-icon family="brands" name="github" label="GitHub"></wa-icon>
-            </wa-button>
-            <wa-tooltip for="github-repo-button" distance="2">GitHub</wa-tooltip>
-            <wa-button id="github-star-button" href="https://github.com/shoelace-style/webawesome/stargazers" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
-              <wa-icon name="star" variant="regular" label="Star this repository"></wa-icon>
-            </wa-button>
-            <wa-tooltip for="github-star-button" distance="2">Star this repository</wa-tooltip>
+            <wa-divider orientation="vertical" class="wa-desktop-only"></wa-divider>
+
+            <div id="github-buttons" class="wa-cluster wa-gap-xs">
+              <wa-button id="github-repo-button" href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
+                <wa-icon family="brands" name="github" label="GitHub"></wa-icon>
+              </wa-button>
+              <wa-tooltip for="github-repo-button" distance="2">GitHub</wa-tooltip>
+              <wa-button id="github-star-button" href="https://github.com/shoelace-style/webawesome/stargazers" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
+                <wa-icon name="star" variant="regular" label="Star this repository"></wa-icon>
+              </wa-button>
+              <wa-tooltip for="github-star-button" distance="2">Star this repository</wa-tooltip>
+            </div>
+
+            <wa-divider orientation="vertical"></wa-divider>
+
+            {# Login #}
+            {% server "loginOrAvatar" %}
           </div>
-
-          <wa-divider orientation="vertical"></wa-divider>
-
-          {# Login #}
-          {% server "loginOrAvatar" %}
-        </div>
-      </header>
+        </header>
+      {% endif %}
 
       {# Sidebar #}
       {% if hasSidebar %}
@@ -138,6 +148,11 @@
       </main>
 
       {% include 'search.njk' %}
+
+      {# Footer #}
+      {% if pageFooter %}
+        {% include pageFooter %}
+      {% endif %}
     </wa-page>
 
   </body>

packages/webawesome/docs/_includes/sidebar.njk

@@ -98,6 +98,7 @@
     <li><a href="/docs/components/icon/">Icon</a></li>
     <li><a href="/docs/components/include/">Include</a></li>
     <li><a href="/docs/components/input/">Input</a></li>
+    <li><a href="/docs/components/intersection-observer">Intersection Observer</a></li>
     <li><a href="/docs/components/mutation-observer/">Mutation Observer</a></li>
     <li><a href="/docs/components/popover/">Popover</a></li>
     <li><a href="/docs/components/popup/">Popup</a></li>

packages/webawesome/docs/assets/styles/docs.css

@@ -504,7 +504,6 @@ wa-card .page-name {
     width: 100%;
     height: 100%;
     display: block;
-    --background-color-hover: transparent;
     font-family: var(--wa-font-family-code);
 
     &::part(button) {
@@ -514,6 +513,7 @@ wa-card .page-name {
     }
 
     &::part(button):hover {
+      background-color: transparent;
       cursor: copy;
     }
 

packages/webawesome/docs/docs/components/card.md

@@ -17,10 +17,8 @@ category: Organization
   This kitten is as cute as he is playful. Bring him home today!<br />
   <small class="wa-caption-m">6 weeks old</small>
 
-  <div slot="footer" class="wa-split">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating label="Rating"></wa-rating>
-  </div>
+  <wa-button slot="footer" variant="brand" pill>More Info</wa-button>
+  <wa-rating slot="footer-actions" label="Rating"></wa-rating>
 </wa-card>
 
 <style>
@@ -55,14 +53,11 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
 
 ```html {.example}
 <wa-card class="card-header">
-  <div slot="header" class="wa-split">
-    Header Title
-    <wa-button appearance="plain">
-      <wa-icon name="gear" variant="solid" label="Settings"></wa-icon>
-    </wa-button>
-  </div>
-
+  <h3 slot="header">Header Title</h3>
   This card has a header. You can put all sorts of things in it!
+  <wa-button appearance="plain" slot="header-actions">
+    <wa-icon name="gear" variant="solid" label="Settings"></wa-icon>
+  </wa-button>
 </wa-card>
 
 <style>
@@ -85,10 +80,9 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
 <wa-card class="card-footer">
   This card has a footer. You can put all sorts of things in it!
 
-  <div slot="footer" class="wa-split">
-    <wa-rating></wa-rating>
-    <wa-button variant="brand">Preview</wa-button>
-  </div>
+  <wa-rating slot="footer"></wa-rating>
+
+  <wa-button slot="footer-actions" variant="brand">Preview</wa-button>
 </wa-card>
 
 <style>
@@ -155,3 +149,35 @@ Use the `appearance` attribute to change the card's visual appearance.
   {%- endfor %}
 </div>
 ```
+
+### Orientation
+
+Set the `orientation` attribute to `horizontal` to create a card with a horizontal, side-by-side layout. Make sure to set a width or maximum width for the media slot. Horizontal cards do not currently contain the header and footer slots.
+<wa-callout>
+<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+The `actions` slot is only available for the horizontal orientation
+</wa-callout>
+
+```html {.example}
+<div class="wa-grid">
+  <wa-card orientation="horizontal" class="horizontal-card">
+    <img
+      slot="media"
+      src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+      alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+    />
+    This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+    <wa-button slot="actions" variant="neutral" appearance="plain"
+      ><wa-icon name="ellipsis" label="actions"></wa-icon
+    ></wa-button>
+  </wa-card>
+</div>
+
+<style>
+  .horizontal-card {
+    img[slot='media'] {
+      max-width: 300px;
+    }
+  }
+</style>
+```

packages/webawesome/docs/docs/components/intersection-observer.md

@@ -0,0 +1,297 @@
+---
+title: Intersection Observer
+description: Tracks immediate child elements and fires events as they move in and out of view.
+layout: component
+---
+
+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.
+
+```html {.example}
+<div id="intersection__overview">
+  <wa-intersection-observer threshold="1" intersect-class="visible">
+    <div class="box"><wa-icon name="bulb"></wa-icon></div>
+  </wa-intersection-observer>
+</div>
+
+<small>Scroll to see the element intersect at 100% visibility</small>
+
+<style>
+  /* Container styles */
+  #intersection__overview {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    height: 300px;
+    border: solid 2px var(--wa-color-surface-border);
+    padding: 1rem;
+    overflow-y: auto;
+
+    /* Spacers to demonstrate scrolling */
+    &::before {
+      content: '';
+      height: 260px;
+      flex-shrink: 0;
+    }
+
+    &::after {
+      content: '';
+      height: 260px;
+      flex-shrink: 0;
+    }
+
+    /* Box styles */
+    .box {
+      flex-shrink: 0;
+      width: 120px;
+      height: 120px;
+      background-color: var(--wa-color-neutral-fill-normal);
+      color: var(--wa-color-neutral-10);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-inline: auto;
+      transition: all 50ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+      wa-icon {
+        font-size: 3rem;
+        stroke-width: 1px;
+      }
+
+      &.visible {
+        background-color: var(--wa-color-brand-60);
+        color: white;
+      }
+    }
+
+    + small {
+      display: block;
+      text-align: center;
+      margin-block-start: 1rem;
+    }
+  }
+</style>
+```
+
+:::info
+Keep in mind that only direct children of the host element are monitored. Nested elements won't trigger intersection events.
+:::
+
+## Usage Examples
+
+### Adding Observable Content
+
+The intersection observer tracks only its direct children. The component uses [`display: contents`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#contents) styling, which makes it seamless to integrate with flex and grid layouts from a parent container.
+
+```html
+<div style="display: flex; flex-direction: column;">
+  <wa-intersection-observer>
+    <div class="box">Box 1</div>
+    <div class="box">Box 2</div>
+    <div class="box">Box 3</div>
+  </wa-intersection-observer>
+</div>
+```
+
+The component tracks elements as they enter and exit the root element (viewport by default) and emits the `wa-intersect` event on state changes. The event provides `event.detail.entry`, an [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) object with intersection details.
+
+You can identify the triggering element through `entry.target`. Check `entry.isIntersecting` to determine if an element is entering or exiting the viewport.
+
+```javascript
+observer.addEventListener('wa-intersect', event => {
+  const entry = event.detail.entry;
+
+  if (entry.isIntersecting) {
+    console.log('Element entered viewport:', entry.target);
+  } else {
+    console.log('Element left viewport:', entry.target);
+  }
+});
+```
+
+### Setting a Custom Root Element
+
+You can observe intersections within a specific container by assigning the `root` attribute to the [root element's](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root) ID. Apply [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) with the `root-margin` attribute to expand or contract the observation area.
+
+```html
+<div id="scroll-container">
+  <wa-intersection-observer root="scroll-container" root-margin="50px 0px"> ... </wa-intersection-observer>
+</div>
+```
+
+### Configuring Multiple Thresholds
+
+Track different visibility percentages by providing multiple [`threshold`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold) values as a space-separated list.
+
+```html
+<wa-intersection-observer threshold="0 0.25 0.5 0.75 1"> ... </wa-intersection-observer>
+```
+
+### Applying Classes on Intersect
+
+The `intersect-class` attribute automatically toggles the specified class on direct children when they become visible. This enables pure CSS styling without JavaScript event handlers.
+
+```html {.example}
+<div id="intersection__classes">
+  <wa-intersection-observer threshold="0.5" intersect-class="visible" root="intersection__classes">
+    <div class="box fade">Fade In</div>
+    <div class="box slide">Slide In</div>
+    <div class="box scale">Scale & Rotate</div>
+    <div class="box bounce">Bounce</div>
+  </wa-intersection-observer>
+</div>
+
+<small>Scroll to see elements transition at 50% visibility</small>
+
+<style>
+  /* Container styles */
+  #intersection__classes {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    height: 300px;
+    border: solid 2px var(--wa-color-surface-border);
+    padding: 1rem;
+    overflow-y: auto;
+
+    /* Spacers to demonstrate scrolling */
+    &::before {
+      content: '';
+      height: 260px;
+      flex-shrink: 0;
+    }
+
+    &::after {
+      content: '';
+      height: 260px;
+      flex-shrink: 0;
+    }
+
+    + small {
+      display: block;
+      text-align: center;
+      margin-block-start: 1rem;
+    }
+
+    /* Shared box styles */
+    .box {
+      flex-shrink: 0;
+      width: 120px;
+      height: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      color: white;
+      opacity: 0;
+      padding: 2rem;
+      margin-inline: auto;
+
+      /* Fade */
+      &.fade {
+        background: var(--wa-color-brand-fill-loud);
+        color: var(--wa-color-brand-on-loud);
+        transform: translateY(30px);
+        transition: all 0.6s ease;
+
+        &.visible {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      /* Slide */
+      &.slide {
+        background: var(--wa-color-brand-fill-loud);
+        color: var(--wa-color-brand-on-loud);
+        transform: translateX(-50px);
+        transition: all 0.5s ease;
+
+        &.visible {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      /* Scale */
+      &.scale {
+        background: var(--wa-color-brand-fill-loud);
+        color: var(--wa-color-brand-on-loud);
+        transform: scale(0.6) rotate(-15deg);
+        transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+        &.visible {
+          opacity: 1;
+          transform: scale(1) rotate(0deg);
+        }
+      }
+
+      /* Bounce In and Out */
+      &.bounce {
+        background: var(--wa-color-brand-fill-loud);
+        color: var(--wa-color-brand-on-loud);
+        opacity: 0;
+        transform: scale(0.8);
+        transition: none;
+
+        &.visible {
+          opacity: 1;
+          transform: scale(1);
+          animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+        }
+
+        &:not(.visible) {
+          animation: bounceOut 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+        }
+      }
+    }
+  }
+
+  @keyframes bounceIn {
+    0% {
+      transform: scale(0.8);
+    }
+    40% {
+      transform: scale(1.08);
+    }
+    65% {
+      transform: scale(0.98);
+    }
+    80% {
+      transform: scale(1.02);
+    }
+    90% {
+      transform: scale(0.99);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes bounceOut {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    20% {
+      transform: scale(1.02);
+      opacity: 1;
+    }
+    40% {
+      transform: scale(0.98);
+      opacity: 0.8;
+    }
+    60% {
+      transform: scale(1.05);
+      opacity: 0.6;
+    }
+    80% {
+      transform: scale(0.95);
+      opacity: 0.3;
+    }
+    100% {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+  }
+</style>
+```

packages/webawesome/docs/docs/index.md

@@ -191,7 +191,7 @@ This gives you inline documentation, autocomplete, and type-safe validation for
 ```json
 {
   "compilerOptions": {
-    "types": ["node-modules/@awesome.me/webawesome/dist/custom-elements-jsx.d.ts"]
+    "types": ["node_modules/@awesome.me/webawesome/dist/custom-elements-jsx.d.ts"]
   }
 }
 ```

packages/webawesome/docs/docs/localization.md

@@ -56,7 +56,7 @@ To contribute new translations or improvements to existing translations, please
 
 Regional translations are welcome! For example, if a German translation (`de`) exists it's perfectly acceptable to submit a German (Switzerland) (`de-CH`) translation.
 
-If you have any questions, please start a [discussion](https://github.com/shoelace-style/shoelace/discussions) or ask in the [community chat](https://discord.gg/mg8f26C).
+If you have any questions, please start a [discussion](https://github.com/shoelace-style/webawesome/discussions) or ask in the [community chat](https://discord.gg/mg8f26C).
 
 :::info
 Web Awesome provides a localization mechanism for component internals. This is not designed to be used as localization tool for your entire application. You should use a more appropriate tool such as [i18next](https://www.i18next.com/) if you need to localize content in your app.

packages/webawesome/docs/docs/resources/accessibility.md

@@ -14,7 +14,7 @@ Furthermore, accessibility doesn’t stop at the component level. Using accessib
 
 My commitment to Web Awesome users is this: Everything we develop will be built with accessibility in mind. We will test and improve every component to the best of our ability and knowledge. We will work around upstream issues, such as browser bugs and limitations, to the best of our ability and within reason.
 
-We’re fully aware that we may not get it right every time for every user, so we invite the community to participate in this ongoing effort by submitting [issues](https://github.com/shoelace-style/shoelace/issues?q=is%3Aissue+is%3Aopen+label%3Aa11y), [pull requests](https://github.com/shoelace-style/shoelace/pulls?q=is%3Aopen+is%3Apr+label%3Aa11y), and [discussions](https://github.com/shoelace-style/shoelace/discussions). Many accessibility improvements have already been made thanks to contributors submitting code, feedback, and suggestions.
+We’re fully aware that we may not get it right every time for every user, so we invite the community to participate in this ongoing effort by submitting [issues](https://github.com/shoelace-style/shoelace/issues?q=is%3Aissue+is%3Aopen+label%3Aa11y), [pull requests](https://github.com/shoelace-style/shoelace/pulls?q=is%3Aopen+is%3Apr+label%3Aa11y), and [discussions](https://github.com/shoelace-style/webawesome/discussions). Many accessibility improvements have already been made thanks to contributors submitting code, feedback, and suggestions.
 
 This is the path forward. Together, we will continue to make Web Awesome accessible to as many users as possible.
 

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

@@ -10,6 +10,10 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Next
 
+- Fixed a bug in `<wa-dropdown>` that closed the dropdown event when preventing `wa-select` [issue:1432]
+
+## 3.0.0-beta.5
+
 ### Bug Fixes and Improvements {data-no-outline}
 
 - 🚨 BREAKING: Updated `<wa-icon>` to use Font Awesome 7 [pr:1222]
@@ -18,6 +22,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
   - Removed the `fixed-width` attribute as it's now the default behavior
 - 🚨 BREAKING: Renamed the `icon-position` attribute to `icon-placement` in `<wa-details>` [discuss:1340]
 - 🚨 BREAKING: Removed the `size` attribute from `<wa-button-group>` as it only set the initial size and gets out of sync when buttons are updated (apply a `size` to each button instead)
+- Added the `<wa-intersection-observer>` component
 - Added the Hindi translation [pr:1307]
 - Added `--show-duration` and `--hide-duration` to `<wa-select>` [issue:1281]
 - Fixed incorrectly named exported tooltip parts in `<wa-slider>` [pr:1277]
@@ -33,6 +38,10 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed spacing in `<wa-input>` when both clear and password toggle icons are present [issue:1325]
 - Fixed a bug in `<wa-radio-group>` and `<wa-radio>` where changing appearances dynamically would render incorrectly [issue:1178]
 - Fixed a bug in `<wa-input>` that prevented the value from changing when assigning non-string values to `value` [issue:1323]
+- Fixed a bug in `<wa-color-picker>` that prevent the picker from staying in the viewport
+- Fixed a bug that in `<wa-icon>` that caused `library`, `family`, `variant` and `name` to not reflect [pr:#1395]
+- Fixed a bug in `<wa-format-date>` and `<wa-relative-time>` that caused spaces to appear before and after the output [#1417]
+- Added horizontal orientation support with `orientation="horizontal"` for `<wa-card>`
 
 ## 3.0.0-beta.4
 

packages/webawesome/docs/docs/resources/community.md

@@ -10,14 +10,14 @@ Please be respectful of other users and remember that Web Awesome is an open sou
 
 ## Discussion Forum
 
-The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is open to anyone with a GitHub account. This is the best place to:
+The [discussion forum](https://github.com/shoelace-style/webawesome/discussions) is open to anyone with a GitHub account. This is the best place to:
 
 - Ask for help
 - Share ideas and get feedback
 - Show the community what you're working on
 - Learn more about the project, its values, and its roadmap
 
-<wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank" style="margin-block-end: var(--wa-content-spacing);">
+<wa-button variant="brand" href="https://github.com/shoelace-style/webawesome/discussions" target="_blank" style="margin-block-end: var(--wa-content-spacing);">
   <wa-icon name="github" family="brands" slot="start"></wa-icon>
   Join the Discussion
 </wa-button>
@@ -40,9 +40,9 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
 
 Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general updates and announcements about Web Awesome. This is a great place to say "hi" or to share something you're working on.
 
-**Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
+**Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/webawesome/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
 
 <wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-content-spacing);">
   <wa-icon name="twitter" family="brands" slot="start"></wa-icon>
   Follow on Twitter
-</wa-button>
+</wa-button>

packages/webawesome/docs/docs/tokens/color.md

@@ -59,7 +59,6 @@ Color is organized by three main categories:
 - [Foundational colors](#foundational-colors) that lay the groundwork for your theme
 - [Semantic colors](#semantic-colors) that draw attention and convey meaning
 
-
 ## Color Scales
 
 Color scales are determined by your [color palette](/docs/color-palettes) and are made up of the lowest level color tokens in your theme. Each token is identified by a name, like red or gray, and numerical tint based on the color's lightness. On this scale, 100 is equal to pure white and 0 is equal to pure black.
@@ -73,6 +72,7 @@ You can use these tints to ensure accessible color contrast per [WCAG 2.1 succes
 You have several hand-crafted [color palettes](/docs/color-palettes) to choose from. Each palette defines 10 hues each with a scale of 11 tints using the format `--wa-color-{hue}-{tint}`.
 
 {% for hue in ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'] -%}
+
 <div class="color-name">{{ hue | capitalize }}</div>
 <ul class="color-group">
   {% for tint in ['95', '90', '80', '70', '60', '50', '40', '30', '20', '10', '05'] -%}
@@ -91,6 +91,7 @@ You have several hand-crafted [color palettes](/docs/color-palettes) to choose f
 Any hue can be mapped to `brand`, `neutral`, `success`, `warning`, and `danger` scales. Like the tokens in a color scale, each token is identified by its semantic group and a numerical tint using the format `--wa-color-{group}-{tint}`.
 
 {% for group in ['brand', 'neutral', 'success', 'warning', 'danger'] -%}
+
 <div class="color-name">{{ group | capitalize }}</div>
 <ul class="color-group">
   {% for tint in ['95', '90', '80', '70', '60', '50', '40', '30', '20', '10', '05'] -%}
@@ -112,19 +113,19 @@ Foundational colors lay the groundwork for the content and structure of your pro
 
 Surfaces are background layers that other content rests on. Surface colors help convey hierarchy through a sense of elevation, where `--wa-color-surface-raised` is the closest to the user (e.g., dialogs and popup menus) and `--wa-color-surface-lowered` is the farthest away (e.g., wells).
 
-| Custom Property               | Preview                                                                                                                         |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| `--wa-color-surface-raised`   | <div class="swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-s)"></div>              |
-| `--wa-color-surface-default`  | <div class="swatch" style="background-color: var(--wa-color-surface-default)"></div>                                            |
-| `--wa-color-surface-lowered`  | <div class="swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow: inset var(--wa-shadow-s)"></div>      |
-| `--wa-color-surface-border`   | <div class="swatch" style="border-color: var(--wa-color-surface-border)"></div>                                                 |
+| Custom Property              | Preview                                                                                                                    |
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `--wa-color-surface-raised`  | <div class="swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-s)"></div>         |
+| `--wa-color-surface-default` | <div class="swatch" style="background-color: var(--wa-color-surface-default)"></div>                                       |
+| `--wa-color-surface-lowered` | <div class="swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow: inset var(--wa-shadow-s)"></div> |
+| `--wa-color-surface-border`  | <div class="swatch" style="border-color: var(--wa-color-surface-border)"></div>                                            |
 
 ### Text
 
 Text colors are used for standard text elements. We recommend a minimum 4.5:1 contrast ratio between text colors and surface colors.
 
-| Custom Property          | Preview                                                    |
-| ------------------------ | ---------------------------------------------------------- |
+| Custom Property          | Preview                                                                                                                          |
+| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
 | `--wa-color-text-normal` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-normal); display: inline-block;">AaBb</div> |
 | `--wa-color-text-quiet`  | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-quiet); display: inline-block;">AaBb</div>  |
 | `--wa-color-text-link`   | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-link); display: inline-block;">AaBb</div>   |
@@ -153,23 +154,23 @@ This is used alongside other [shadow tokens](/docs/tokens/shadows) to construct
 
 Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus tokens](/docs/tokens/focus) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible.
 
-| Custom Property    | Preview                                                                                                                 |
-| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| Custom Property    | Preview                                                                                                                                          |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `--wa-color-focus` | <div class="swatch" value="--wa-color-focus" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
 
 #### Hover and Active
 
 Web Awesome leverages `color-mix()` to achieve consistent hover and active states across components without the need for untold numbers of handpicked colors. Through `color-mix()`, these custom properties contextually generate hover and active colors based on the color of the component.
 
-| Custom Property         | Preview                                                                                                          |
-| ----------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `--wa-color-mix-hover`  | <div class="swatch color-mix-example" value="--wa-color-mix-hover" style="--mix-color: var(--wa-color-mix-hover)"><small>mixed</small></div>  |
+| Custom Property         | Preview                                                                                                                                        |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--wa-color-mix-hover`  | <div class="swatch color-mix-example" value="--wa-color-mix-hover" style="--mix-color: var(--wa-color-mix-hover)"><small>mixed</small></div>   |
 | `--wa-color-mix-active` | <div class="swatch color-mix-example" value="--wa-color-mix-active" style="--mix-color: var(--wa-color-mix-active)"><small>mixed</small></div> |
 
-
 ## Semantic Colors
 
 Semantic colors reinforce a specific message, intended usage, or expected results through familiar, meaningful hues. Each color is identified by its semantic group, role, and attention using the format `--wa-color-{group}-{role}-{attention}`. There are five groups of semantic colors:
+
 - **Brand** to emphasize your brand color
 - **Success** for validity or confirmation
 - **Neutral** for ordinary or inactive content
@@ -177,16 +178,19 @@ Semantic colors reinforce a specific message, intended usage, or expected result
 - **Danger** for errors or risk
 
 Each group defines colors for specific roles so that colors can be easily assembled with predictable results and readable contrast. There are three roles:
+
 - **Fill** for background colors or areas larger than a few pixels
 - **Border** for borders, dividers, and other stroke-width elements
 - **On** for content displayed on a fill (e.g., pair `--wa-color-danger-on-loud` with `--wa-color-danger-fill-loud`)
 
 Finally, each color is named according to how much attention it draws. Here, we use noise as an analogy: a loud noise draws more attention than a quiet one. There are three levels of attention:
+
 - **Quiet** draws the least attention
 - **Normal** draws some attention
 - **Loud** draws the most attention
 
 {% set variants = ['brand', 'success', 'neutral', 'warning', 'danger'] %}
+
 <table>
   <thead>
     <tr>

packages/webawesome/docs/docs/utilities/fouce.md

@@ -7,7 +7,7 @@ tags: styleUtilities
 
 Often, components are shown before their logic and styles have had a chance to load, also known as a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).
 
-The FOUCE style utility (which is automatically applied if you use our [style utilities](/docs/utilities/)) automatically takes care of hiding custom elements until **both they and their contents** have been registered, up to a maximum of two seconds.
+The FOUCE style utility takes care of hiding custom elements until **both they and their contents** have been registered, up to a maximum of two seconds.
 
 In many cases, this is not enough, and you may wish to hide a broader wrapper element or even the entire page until all WA elements within it have loaded.
 To do that, you can add the `wa-cloak` class to any element on the page or even apply it to the whole page by placing the class on the `<html>` element:

packages/webawesome/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.5",
   "homepage": "https://webawesome.com/",
   "author": "Web Awesome",
   "license": "MIT",
@@ -29,7 +29,8 @@
     "./dist/react": "./dist/react/index.js",
     "./dist/react/*": "./dist/react/*",
     "./dist/translations": "./dist/translations",
-    "./dist/translations/*": "./dist/translations/*"
+    "./dist/translations/*": "./dist/translations/*",
+    "./package.json": "./package.json"
   },
   "files": [
     "README.md",

packages/webawesome/scripts/build.js

@@ -123,6 +123,7 @@ export async function build(options = {}) {
   function generateReactWrappers() {
     // Used by webawesome-app to make re-rendering not miserable with extra React file generation.
     if (process.env.SKIP_SLOW_STEPS === 'true') {
+      spinner.info('Skipping React Wrapper generation.');
       return Promise.resolve();
     }
 
@@ -162,6 +163,7 @@ export async function build(options = {}) {
   async function generateTypes() {
     // Used by webawesome-app to make re-rendering not miserable with extra TS compilations.
     if (process.env.SKIP_SLOW_STEPS === 'true') {
+      spinner.info('Skipping TypeScript compiler.');
       return Promise.resolve();
     }
 

packages/webawesome/src/components/card/card.css

@@ -77,7 +77,9 @@
 }
 
 .header {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   border-block-end-style: inherit;
   border-block-end-color: var(--wa-color-surface-border);
   border-block-end-width: var(--wa-panel-border-width);
@@ -90,7 +92,9 @@
 }
 
 .footer {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   border-block-start-style: inherit;
   border-block-start-color: var(--wa-color-surface-border);
   border-block-start-width: var(--wa-panel-border-width);
@@ -102,3 +106,27 @@
 :host(:not([with-media])) .media {
   display: none;
 }
+
+/* Orientation Styles */
+:host([orientation='horizontal']) {
+  flex-direction: row;
+
+  .media {
+    border-start-start-radius: var(--inner-border-radius);
+    border-end-start-radius: var(--inner-border-radius);
+    border-start-end-radius: 0;
+    object-fit: cover;
+  }
+}
+
+:host([orientation='horizontal']) ::slotted([slot='body']) {
+  display: block;
+  height: 100%;
+  margin: 0;
+}
+
+:host([orientation='horizontal']) ::slotted([slot='actions']) {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing);
+}

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

@@ -15,6 +15,9 @@ import styles from './card.css';
  * @slot header - An optional header for the card.
  * @slot footer - An optional footer for the card.
  * @slot media - An optional media section to render at the start of the card.
+ * @slot actions - An optional actions section to render at the end for the horizontal card.
+ * @slot header-actions - An optional actions section to render in the header of the vertical card.
+ * @slot footer-actions - An optional actions section to render in the footer of the vertical card.
  *
  * @csspart media - The container that wraps the card's media.
  * @csspart header - The container that wraps the card's header.
@@ -42,6 +45,10 @@ export default class WaCard extends WebAwesomeElement {
   /** Renders the card with a footer. Only needed for SSR, otherwise is automatically added. */
   @property({ attribute: 'with-footer', type: Boolean, reflect: true }) withFooter = false;
 
+  /** Renders the card's orientation **/
+  @property({ reflect: true })
+  orientation: 'horizontal' | 'vertical' = 'vertical';
+
   updated() {
     // Enable the respective slots when detected
     if (!this.withHeader && this.hasSlotController.test('header')) this.withHeader = true;
@@ -50,11 +57,27 @@ export default class WaCard extends WebAwesomeElement {
   }
 
   render() {
+    // Horizontal Orientation
+    if (this.orientation === 'horizontal') {
+      return html`
+        <slot name="media" part="media" class="media"></slot>
+        <slot part="body" class="body"></slot>
+        <slot name="actions" part="actions" class="actions"></slot>
+      `;
+    }
+
+    // Vertical Orientation
     return html`
       <slot name="media" part="media" class="media"></slot>
-      <slot name="header" part="header" class="header"></slot>
+      <header part="header" class="header">
+        <slot name="header"></slot>
+        <slot name="header-actions"></slot>
+      </header>
       <slot part="body" class="body"></slot>
-      <slot name="footer" part="footer" class="footer"></slot>
+      <footer part="footer" class="footer">
+        <slot name="footer"></slot>
+        <slot name="footer-actions"></slot>
+      </footer>
     `;
   }
 }

packages/webawesome/src/components/color-picker/color-picker.ts

@@ -1327,6 +1327,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         distance="0"
         skidding="0"
         sync="width"
+        flip
+        flip-fallback-strategy="best-fit"
+        shift
+        shift-padding="10"
         aria-disabled=${this.disabled ? 'true' : 'false'}
         @wa-after-show=${this.handleAfterShow}
         @wa-after-hide=${this.handleAfterHide}

packages/webawesome/src/components/dialog/dialog.ts

@@ -224,7 +224,7 @@ export default class WaDialog extends WebAwesomeElement {
               <header part="header" class="header">
                 <h2 part="title" class="title" id="title">
                   <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
-                  <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
+                  <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(8203)} </slot>
                 </h2>
                 <div part="header-actions" class="header-actions">
                   <slot name="header-actions"></slot>

packages/webawesome/src/components/drawer/drawer.ts

@@ -241,7 +241,7 @@ export default class WaDrawer extends WebAwesomeElement {
               <header part="header" class="header">
                 <h2 part="title" class="title" id="title">
                   <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
-                  <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
+                  <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(8203)} </slot>
                 </h2>
                 <div part="header-actions" class="header-actions">
                   <slot name="header-actions"></slot>

packages/webawesome/src/components/format-date/format-date.ts

@@ -66,23 +66,22 @@ export default class WaFormatDate extends WebAwesomeElement {
       return undefined;
     }
 
-    return html`
-      <time datetime=${date.toISOString()}>
-        ${this.localize.date(date, {
-          weekday: this.weekday,
-          era: this.era,
-          year: this.year,
-          month: this.month,
-          day: this.day,
-          hour: this.hour,
-          minute: this.minute,
-          second: this.second,
-          timeZoneName: this.timeZoneName,
-          timeZone: this.timeZone,
-          hour12: hour12,
-        })}
-      </time>
-    `;
+    const displayDate = this.localize.date(date, {
+      weekday: this.weekday,
+      era: this.era,
+      year: this.year,
+      month: this.month,
+      day: this.day,
+      hour: this.hour,
+      minute: this.minute,
+      second: this.second,
+      timeZoneName: this.timeZoneName,
+      timeZone: this.timeZone,
+      hour12: hour12,
+    });
+
+    // No whitespace before or after
+    return html`<time datetime=${date.toISOString()}>${displayDate}</time>`;
   }
 }
 

packages/webawesome/src/components/icon/icon.ts

@@ -46,7 +46,7 @@ export default class WaIcon extends WebAwesomeElement {
   @state() private svg: SVGElement | HTMLTemplateResult | null = null;
 
   /** The name of the icon to draw. Available names depend on the icon library being used. */
-  @property() name?: string;
+  @property({ reflect: true }) name?: string;
 
   /**
    * The family of icons to choose from. For Font Awesome Free, valid options include `classic` and `brands`. For
@@ -54,14 +54,14 @@ export default class WaIcon extends WebAwesomeElement {
    * A valid kit code must be present to show pro icons via CDN. You can set `<html data-fa-kit-code="...">` to provide
    * one.
    */
-  @property() family: string;
+  @property({ reflect: true }) family: string;
 
   /**
    * The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
    * the `classic` and `sharp` families. Some variants require a Font Awesome Pro subscription. Custom icon libraries
    * may or may not use this property.
    */
-  @property() variant: string;
+  @property({ reflect: true }) variant: string;
 
   /** Sets the width of the icon to match the cropped SVG viewBox. This operates like the Font `fa-width-auto` class. */
   @property({ attribute: 'auto-width', type: Boolean, reflect: true }) autoWidth: false;
@@ -82,7 +82,7 @@ export default class WaIcon extends WebAwesomeElement {
   @property() label = '';
 
   /** The name of a registered custom icon library. */
-  @property() library = 'default';
+  @property({ reflect: true }) library = 'default';
 
   connectedCallback() {
     super.connectedCallback();

packages/webawesome/src/components/icon/library.default.ts

@@ -1,7 +1,7 @@
 import { getKitCode } from '../../utilities/base-path.js';
 import type { IconLibrary } from './library.js';
 
-const FA_VERSION = '7.0.0';
+const FA_VERSION = '7.0.1';
 
 function getIconUrl(name: string, family: string, variant: string) {
   const kitCode = getKitCode();

packages/webawesome/src/components/intersection-observer/intersection-observer.css

@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}

packages/webawesome/src/components/intersection-observer/intersection-observer.test.ts

@@ -0,0 +1,9 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<wa-intersection-observer>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <wa-intersection-observer></wa-intersection-observer> `);
+
+    expect(el).to.exist;
+  });
+});

packages/webawesome/src/components/intersection-observer/intersection-observer.ts

@@ -0,0 +1,200 @@
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { WaIntersectEvent } from '../../events/intersect.js';
+import { clamp } from '../../internal/math.js';
+import { parseSpaceDelimitedTokens } from '../../internal/parse.js';
+import { watch } from '../../internal/watch.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
+import styles from './intersection-observer.css';
+
+/**
+ * @summary Tracks immediate child elements and fires events as they move in and out of view.
+ * @documentation https://webawesome.com/docs/components/intersection-observer
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - Elements to track. Only immediate children of the host are monitored.
+ *
+ * @event {{ entry: IntersectionObserverEntry }} wa-intersect - Fired when a tracked element begins or ceases intersecting.
+ */
+@customElement('wa-intersection-observer')
+export default class WaIntersectionObserver extends WebAwesomeElement {
+  static css = styles;
+
+  private intersectionObserver: IntersectionObserver | null = null;
+  private observedElements = new Map<Element, boolean>();
+
+  /** Element ID to define the viewport boundaries for tracked targets. */
+  @property() root: string | null = null;
+
+  /** Offset space around the root boundary. Accepts values like CSS margin syntax. */
+  @property({ attribute: 'root-margin' }) rootMargin = '0px';
+
+  /** One or more space-separated values representing visibility percentages that trigger the observer callback. */
+  @property() threshold = '0';
+
+  /**
+   * CSS class applied to elements during intersection. Automatically removed when elements leave
+   * the viewport, enabling pure CSS styling based on visibility state.
+   */
+  @property({ attribute: 'intersect-class' }) intersectClass = '';
+
+  /** If enabled, observation ceases after initial intersection. */
+  @property({ type: Boolean, reflect: true }) once = false;
+
+  /** Deactivates the intersection observer functionality. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (!this.disabled) {
+      this.updateComplete.then(() => {
+        this.startObserver();
+      });
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+
+  private handleSlotChange() {
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+
+  /** Converts threshold property string into numeric array. */
+  private parseThreshold(): number[] {
+    const tokens = parseSpaceDelimitedTokens(this.threshold);
+    return tokens.map((token: string) => {
+      const num = parseFloat(token);
+      return isNaN(num) ? 0 : clamp(num, 0, 1);
+    });
+  }
+
+  /** Locates and returns the root element using the specified ID. */
+  private resolveRoot(): Element | null {
+    if (!this.root) return null;
+
+    try {
+      const doc = this.getRootNode() as Document | ShadowRoot;
+      const target = doc.getElementById(this.root);
+
+      if (!target) {
+        console.warn(`Root element with ID "${this.root}" could not be found.`, this);
+      }
+
+      return target;
+    } catch {
+      console.warn(`Invalid selector for root: "${this.root}"`, this);
+      return null;
+    }
+  }
+
+  /** Initializes or reinitializes the intersection observer instance. */
+  private startObserver() {
+    this.stopObserver();
+
+    // Skip setup if functionality is disabled
+    if (this.disabled) return;
+
+    // Convert threshold string to numeric values
+    const threshold = this.parseThreshold();
+
+    // Locate the root boundary element
+    const rootElement = this.resolveRoot();
+
+    // Set up unified observer for all child elements
+    this.intersectionObserver = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          const wasIntersecting = this.observedElements.get(entry.target) ?? false;
+          const isIntersecting = entry.isIntersecting;
+
+          // Record current intersection state
+          this.observedElements.set(entry.target, isIntersecting);
+
+          // Toggle intersection class based on visibility
+          if (this.intersectClass) {
+            if (isIntersecting) {
+              entry.target.classList.add(this.intersectClass);
+            } else {
+              entry.target.classList.remove(this.intersectClass);
+            }
+          }
+
+          // Emit the intersection event
+          const changeEvent = new WaIntersectEvent({ entry });
+          this.dispatchEvent(changeEvent);
+
+          if (isIntersecting && !wasIntersecting) {
+            // When once mode is active, cease tracking after first intersection
+            if (this.once) {
+              this.intersectionObserver?.unobserve(entry.target);
+              this.observedElements.delete(entry.target);
+            }
+          }
+        });
+      },
+      {
+        root: rootElement,
+        rootMargin: this.rootMargin,
+        threshold,
+      },
+    );
+
+    // Begin tracking all immediate child elements
+    const slot = this.shadowRoot!.querySelector('slot');
+    if (slot !== null) {
+      const elements = slot.assignedElements({ flatten: true });
+      elements.forEach(element => {
+        this.intersectionObserver?.observe(element);
+        // Set initial non-intersecting state
+        this.observedElements.set(element, false);
+      });
+    }
+  }
+
+  /** Halts the intersection observer and cleans up. */
+  private stopObserver() {
+    // Clear intersection classes from all tracked elements before stopping
+    if (this.intersectClass) {
+      this.observedElements.forEach((_, element) => {
+        element.classList.remove(this.intersectClass);
+      });
+    }
+
+    this.intersectionObserver?.disconnect();
+    this.intersectionObserver = null;
+    this.observedElements.clear();
+  }
+
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+
+  @watch('root', { waitUntilFirstUpdate: true })
+  @watch('rootMargin', { waitUntilFirstUpdate: true })
+  @watch('threshold', { waitUntilFirstUpdate: true })
+  handleOptionsChange() {
+    this.startObserver();
+  }
+
+  render() {
+    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wa-intersection-observer': WaIntersectionObserver;
+  }
+}

packages/webawesome/src/components/relative-time/relative-time.ts

@@ -99,7 +99,8 @@ export default class WaRelativeTime extends WebAwesomeElement {
       this.updateTimeout = setTimeout(() => this.requestUpdate(), nextInterval);
     }
 
-    return html` <time datetime=${this.isoTime}>${this.relativeTime}</time> `;
+    // No whitespace before or after
+    return html`<time datetime=${this.isoTime}>${this.relativeTime}</time>`;
   }
 }
 

packages/webawesome/src/events/events.ts

@@ -11,6 +11,7 @@ export type { WaExpandEvent } from './expand.js';
 export type { WaFinishEvent } from './finish.js';
 export type { WaHideEvent } from './hide.js';
 export type { WaHoverEvent } from './hover.js';
+export type { WaIntersectEvent } from './intersect.js';
 export type { WaInvalidEvent } from './invalid.js';
 export type { WaLazyChangeEvent } from './lazy-change.js';
 export type { WaLazyLoadEvent } from './lazy-load.js';

packages/webawesome/src/events/intersect.ts

@@ -0,0 +1,19 @@
+/** Emitted when an element's intersection state changes. */
+export class WaIntersectEvent extends Event {
+  readonly detail?: WaIntersectEventDetail;
+
+  constructor(detail?: WaIntersectEventDetail) {
+    super('wa-intersect', { bubbles: false, cancelable: false, composed: true });
+    this.detail = detail;
+  }
+}
+
+interface WaIntersectEventDetail {
+  entry?: IntersectionObserverEntry;
+}
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'wa-intersect': WaIntersectEvent;
+  }
+}

packages/webawesome/src/events/select.ts

@@ -2,7 +2,7 @@ export class WaSelectEvent extends Event {
   readonly detail;
 
   constructor(detail: WaSelectEventDetail) {
-    super('wa-select', { bubbles: true, cancelable: false, composed: true });
+    super('wa-select', { bubbles: true, cancelable: true, composed: true });
     this.detail = detail;
   }
 }

packages/webawesome/src/styles/themes/awesome.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap');
+@import url('https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap');
 
 @layer wa-theme {
   .wa-theme-awesome,

vercel.sh

@@ -1,5 +1,9 @@
 #!/bin/bash
 
 echo "Running the build!"
-git clone "https://konnorrogers:$GITHUB_ACCESS_TOKEN@github.com/shoelace-style/webawesome-pro" packages/webawesome-pro
+
+if [[ "$CLONE_PRO" != "false" ]]; then
+  git clone "https://konnorrogers:$GITHUB_ACCESS_TOKEN@github.com/shoelace-style/webawesome-pro" packages/webawesome-pro
+fi
+
 cd packages/webawesome-pro && npm run build