reword

* add notes about skips

* prettier

* re-add support for 'unpublished: true'

* prettier

cspell.json

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

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/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

@@ -18,6 +18,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]
@@ -28,8 +29,14 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in JSX typings that generated the incorrect component imports [issue:1303]
 - Fixed a bug in `<wa-slider>` that prevented the thumb from receiving focus when clicking/tapping [issue:1312]
 - Fixed a bug in `<wa-scroller>` that caused the shadow to appear below relatively-positioned elements [issue:1326]
+- Fixed a bug in `<wa-details>` that caused it to expand/collapse when clicking on interactive elements in the summary [issue:1252]
 - Fixed `<wa-button>` to have `static` positioning by default and `relative` positioning only when used with `<wa-badge>` [pr:1346]
 - 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]
 
 ## 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

@@ -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/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/details/details.ts

@@ -7,9 +7,10 @@ import { WaAfterShowEvent } from '../../events/after-show.js';
 import { WaHideEvent } from '../../events/hide.js';
 import { WaShowEvent } from '../../events/show.js';
 import { animate, parseDuration } from '../../internal/animate.js';
-import { getTargetElement, waitForEvent } from '../../internal/event.js';
+import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import styles from './details.css';
@@ -112,9 +113,27 @@ export default class WaDetails extends WebAwesomeElement {
   }
 
   private handleSummaryClick(event: MouseEvent) {
-    let targetElement = getTargetElement(event);
+    const eventPath = event.composedPath() as HTMLElement[];
 
-    if (targetElement?.closest('a, button, wa-button, input, wa-input, textarea, wa-textarea, select, wa-select')) {
+    // Check if any element in the path is interactive
+    const hasInteractiveElement = eventPath.some(element => {
+      if (!(element instanceof HTMLElement)) return false;
+
+      // Check native interactive elements
+      const tagName = element.tagName?.toLowerCase();
+      if (['a', 'button', 'input', 'textarea', 'select'].includes(tagName)) {
+        return true;
+      }
+
+      // Check for Web Awesome form controls
+      if (element instanceof WebAwesomeFormAssociatedElement) {
+        return !('disabled' in element) || !element.disabled;
+      }
+
+      return false;
+    });
+
+    if (hasInteractiveElement) {
       // Let interactive elements handle their own clicks, fixes #309
       return;
     }

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/input/input.ts

@@ -372,7 +372,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
           min=${ifDefined(this.min)}
           max=${ifDefined(this.max)}
           step=${ifDefined(this.step as number)}
-          .value=${live(this.value || '')}
+          .value=${live(this.value ?? '')}
           autocapitalize=${ifDefined(this.autocapitalize)}
           autocomplete=${ifDefined(this.autocomplete)}
           autocorrect=${ifDefined(this.autocorrect)}

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/radio-group/radio-group.css

@@ -18,31 +18,19 @@
   margin-inline-start: var(--wa-form-control-required-content-offset);
 }
 
-.button-group {
-  display: flex;
-}
-
 [part~='form-control-input'] {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  gap: 0.75em;
+  gap: 0; /* Radios handle their own spacing */
 }
 
 /* Horizontal */
 :host([orientation='horizontal']) [part~='form-control-input'] {
   flex-direction: row;
-  gap: 1em;
 }
 
 /* Help text */
 [part~='hint'] {
   margin-block-start: 0.5em;
 }
-
-/* Radios have the "button" appearance */
-:host fieldset.has-radio-buttons {
-  [part~='form-control-input'] {
-    gap: 0;
-  }
-}

packages/webawesome/src/components/radio-group/radio-group.ts

@@ -57,8 +57,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
 
   private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
 
-  @state() hasRadioButtons = false;
-
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
 
   /**
@@ -197,11 +195,9 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
 
   private async syncRadioElements() {
     const radios = this.getAllRadios();
-    let hasRadioButtons = false;
 
-    // Add data attributes to support styling
+    // Set positioning data attributes and properties
     radios.forEach((radio, index) => {
-      if (radio.appearance === 'button') hasRadioButtons = true;
       radio.setAttribute('size', this.size);
       radio.toggleAttribute('data-wa-radio-horizontal', this.orientation !== 'vertical');
       radio.toggleAttribute('data-wa-radio-vertical', this.orientation === 'vertical');
@@ -213,9 +209,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
       (radio as WaRadio).forceDisabled = this.disabled;
     });
 
-    // If at least one radio button exists, we assume it's a radio button group
-    this.hasRadioButtons = hasRadioButtons;
-
     await Promise.all(
       radios.map(async radio => {
         await radio.updateComplete;
@@ -349,7 +342,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
           'form-control': true,
           'form-control-radio-group': true,
           'form-control-has-label': hasLabel,
-          'has-radio-buttons': this.hasRadioButtons,
         })}
         role="radiogroup"
         aria-labelledby="label"

packages/webawesome/src/components/radio/radio.css

@@ -31,6 +31,41 @@
   margin-block-start: 0.5em;
 }
 
+/* Default spacing for default appearance radios */
+:host([appearance='default']) {
+  margin-block: 0.375em; /* Half of the original 0.75em gap on each side */
+}
+
+:host([appearance='default'][data-wa-radio-horizontal]) {
+  margin-block: 0;
+  margin-inline: 0.5em; /* Half of the original 1em gap on each side */
+}
+
+/* Remove margin from first/last items to prevent extra space */
+:host([appearance='default'][data-wa-radio-first]) {
+  margin-block-start: 0;
+  margin-inline-start: 0;
+}
+
+:host([appearance='default'][data-wa-radio-last]) {
+  margin-block-end: 0;
+  margin-inline-end: 0;
+}
+
+/* Button appearance have no spacing, they get handled by the overlap margins below */
+:host([appearance='button']) {
+  margin: 0;
+  align-items: center;
+  min-height: var(--wa-form-control-height);
+  background-color: var(--wa-color-surface-default);
+  border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
+  border-radius: var(--wa-border-radius-m);
+  padding: 0 var(--wa-form-control-padding-inline);
+  transition:
+    background-color var(--wa-transition-fast),
+    border-color var(--wa-transition-fast);
+}
+
 /* Default appearance */
 :host([appearance='default']) {
   .control {
@@ -66,6 +101,13 @@
   }
 }
 
+/* Button appearance */
+:host([appearance='button']) {
+  .control {
+    display: none;
+  }
+}
+
 /* Checked */
 :host(:state(checked)) .control {
   color: var(--checked-icon-color);
@@ -85,23 +127,6 @@
   cursor: not-allowed;
 }
 
-/* Button appearance */
-:host([appearance='button']) {
-  align-items: center;
-  min-height: var(--wa-form-control-height);
-  background-color: var(--wa-color-surface-default);
-  border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
-  border-radius: var(--wa-border-radius-m);
-  padding: 0 var(--wa-form-control-padding-inline);
-  transition:
-    background-color var(--wa-transition-fast),
-    border-color var(--wa-transition-fast);
-
-  .control {
-    display: none;
-  }
-}
-
 /* Horizontal grouping - remove inner border radius */
 :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-inner]) {
   border-radius: 0;
@@ -153,7 +178,7 @@
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-/* Remove inner borders and handle overlap */
+/* Button overlap margins */
 :host([appearance='button'][data-wa-radio-horizontal]:not([data-wa-radio-first])) {
   margin-inline-start: calc(-1 * var(--wa-form-control-border-width));
 }

packages/webawesome/src/components/radio/radio.ts

@@ -111,7 +111,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
     // We override `setValue` because we don't want to set form values from here. We want to do that in "RadioGroup" itself.
   }
 
-  // Update the handleClick method (around line 75)
   private handleClick = () => {
     if (!this.disabled && !this.forceDisabled) {
       this.checked = true;

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/components/select/select.ts

@@ -493,6 +493,10 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     this.displayInput.focus();
   }
 
+  private handleComboboxClick(event: MouseEvent) {
+    event.preventDefault();
+  }
+
   private handleComboboxMouseDown(event: MouseEvent) {
     const path = event.composedPath();
     const isButton = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'wa-button');
@@ -944,6 +948,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
               slot="anchor"
               @keydown=${this.handleComboboxKeyDown}
               @mousedown=${this.handleComboboxMouseDown}
+              @click=${this.handleComboboxClick}
             >
               <slot part="start" name="start" class="start"></slot>
 

packages/webawesome/src/components/tree/tree.ts

@@ -64,7 +64,7 @@ function syncCheckboxes(changedTreeItem: WaTreeItem, initialSync = false) {
  *
  * @csspart base - The component's base wrapper.
  *
- * @cssproperty [--indent-size=var(--wa-spacing-m)] - The size of the indentation for nested items.
+ * @cssproperty [--indent-size=var(--wa-space-m)] - The size of the indentation for nested items.
  * @cssproperty [--indent-guide-color=var(--wa-color-surface-border)] - The color of the indentation line.
  * @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the
  *  indentation line's starting position.

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/internal/event.ts

@@ -11,17 +11,3 @@ export function waitForEvent(el: HTMLElement, eventName: string) {
     el.addEventListener(eventName, done);
   });
 }
-
-export function getTargetElement(event: Event) {
-  if (event.target instanceof Node) {
-    switch (event.target.nodeType) {
-      case Node.TEXT_NODE:
-      case Node.COMMENT_NODE:
-        return event.target.parentNode as Element;
-      case Node.ELEMENT_NODE:
-        return event.target as Element;
-    }
-  }
-
-  return null;
-}

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