updated layouts again

cspell.json

@@ -92,7 +92,6 @@
     "heroicons",
     "hexa",
     "Hotwire",
-    "hrefs",
     "Iconoir",
     "Iframes",
     "iife",
@@ -136,7 +135,6 @@
     "noopener",
     "noreferrer",
     "noscript",
-    "Notdog",
     "novalidate",
     "nowrap",
     "Numberish",

package-lock.json

@@ -13977,7 +13977,7 @@
     },
     "packages/webawesome": {
       "name": "@awesome.me/webawesome",
-      "version": "3.0.0-beta.5",
+      "version": "3.0.0-beta.3",
       "license": "MIT",
       "dependencies": {
         "@ctrl/tinycolor": "^4.1.0",
@@ -14000,7 +14000,7 @@
     },
     "packages/webawesome-pro": {
       "name": "@shoelace-style/webawesome-pro",
-      "version": "3.0.0-beta.4",
+      "version": "3.0.0-beta.3",
       "dependencies": {
         "@ctrl/tinycolor": "^4.1.0",
         "@floating-ui/dom": "^1.6.13",
@@ -14013,9 +14013,6 @@
         "qr-creator": "^1.0.0",
         "style-observer": "^0.0.7"
       },
-      "devDependencies": {
-        "@wc-toolkit/jsx-types": "^1.3.0"
-      },
       "engines": {
         "node": ">=14.17.0"
       }

packages/webawesome/custom-elements-manifest.js

@@ -182,10 +182,6 @@ export default {
     jsxTypesPlugin({
       fileName: 'custom-elements-jsx.d.ts',
       outdir,
-      defaultExport: true,
-      componentTypePath: (_name, _tag, modulePath) => {
-        return `./${modulePath}`;
-      },
     }),
 
     //

packages/webawesome/docs/.eleventy.js

@@ -76,7 +76,6 @@ 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: '',
@@ -160,15 +159,6 @@ 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.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
+        href: 'https://fonts.googleapis.com/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.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
+        href: 'https://fonts.googleapis.com/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.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
+        href: 'https://fonts.googleapis.com/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.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',
+        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',
       },
       heading: {
         name: 'Inter',
         css: 'Inter, sans-serif',
-        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',
+        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',
       },
       code: {
         name: 'Geist Mono',
         css: '"Geist Mono", monospace',
-        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',
+        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',
       },
       longform: {
         name: 'Aleo',
         css: 'Aleo, serif',
-        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',
+        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',
       },
     },
     icons: {
@@ -254,22 +254,22 @@ export const themes = [
       body: {
         name: 'Space Grotesk',
         css: '"Space Grotesk", sans-serif',
-        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',
+        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',
       },
       heading: {
         name: 'IBM Plex Sans Condensed',
         css: '"IBM Plex Sans Condensed", sans-serif',
-        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',
+        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',
       },
       code: {
         name: 'Space Mono',
         css: '"Space Mono", monospace',
-        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',
+        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',
       },
       longform: {
         name: 'Podkova',
         css: 'Podkova, serif',
-        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',
+        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',
       },
     },
     icons: {
@@ -314,22 +314,22 @@ export const themes = [
       body: {
         name: 'Figtree',
         css: 'Figtree, sans-serif',
-        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',
+        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',
       },
       heading: {
         name: 'Figtree',
         css: 'Figtree, sans-serif',
-        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',
+        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',
       },
       code: {
         name: 'Chivo Mono',
         css: '"Chivo Mono", monospace',
-        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',
+        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',
       },
       longform: {
         name: 'Fraunces',
         css: 'Fraunces, serif',
-        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',
+        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',
       },
     },
     icons: {
@@ -374,22 +374,22 @@ export const themes = [
       body: {
         name: 'Wix Madefor Text',
         css: '"Wix Madefor Text", sans-serif',
-        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',
+        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',
       },
       heading: {
         name: 'Wix Madefor Text',
         css: '"Wix Madefor Text", sans-serif',
-        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',
+        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',
       },
       code: {
         name: 'Roboto Mono',
         css: '"Roboto Mono", monospace',
-        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',
+        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',
       },
       longform: {
         name: 'Roboto Serif',
         css: '"Roboto Serif", serif',
-        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',
+        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',
       },
     },
     icons: {
@@ -434,12 +434,12 @@ export const themes = [
       body: {
         name: 'Mulish',
         css: 'Mulish, sans-serif',
-        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',
+        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',
       },
       heading: {
         name: 'Lora',
         css: 'Lora, serif',
-        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',
+        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',
       },
       code: {
         name: 'OS Default',
@@ -449,7 +449,7 @@ export const themes = [
       longform: {
         name: 'Lora',
         css: 'Lora, serif',
-        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',
+        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',
       },
     },
     icons: {
@@ -494,22 +494,22 @@ export const themes = [
       body: {
         name: 'Nunito',
         css: 'Nunito, sans-serif',
-        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',
+        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',
       },
       heading: {
         name: 'Fredoka',
         css: 'Fredoka, sans-serif',
-        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',
+        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',
       },
       code: {
         name: 'Azeret Mono',
         css: '"Azeret Mono", monospace',
-        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',
+        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',
       },
       longform: {
         name: 'BioRhyme',
         css: 'BioRhyme, serif',
-        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',
+        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',
       },
     },
     icons: {
@@ -554,12 +554,12 @@ export const themes = [
       body: {
         name: 'DM Sans',
         css: '"DM Sans", sans-serif',
-        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',
+        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',
       },
       heading: {
         name: 'Playfair Display',
         css: '"Playfair Display", serif',
-        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',
+        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',
       },
       code: {
         name: 'OS Default',
@@ -569,7 +569,7 @@ export const themes = [
       longform: {
         name: 'Playfair',
         css: 'Playfair, serif',
-        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',
+        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',
       },
     },
     icons: {
@@ -614,12 +614,12 @@ export const themes = [
       body: {
         name: 'Inter',
         css: 'Inter, sans-serif',
-        href: 'https://fonts.bunny.net/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+        href: 'https://fonts.googleapis.com/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.bunny.net/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+        href: 'https://fonts.googleapis.com/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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-fa-kit-code="38c11e3f20" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
   <head>
     {% include 'head.njk' %}
     <meta name="theme-color" content="#f36944">
@@ -15,14 +15,8 @@
     {% 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>
 
-    {% 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 %}
-
+    {# Docs styles #}
+    <link rel="stylesheet" href="/assets/styles/docs.css" />
 
     {% block head %}{% endblock %}
 
@@ -48,55 +42,51 @@
       }
     </script>
   </head>
-  <body class="layout-{{ layout | stripExtension }} page-{{ page.fileSlug or 'home' }}{{ ' page-wide' if wide }} page-{{ pageType or 'docs' }}">
+  <body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
     <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
-    <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-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>
+
+          <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" %}
+          </div>
+
+          <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>
-
-            <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>
+            <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>
 
-          <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>
+          <wa-divider orientation="vertical"></wa-divider>
 
-            <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>
-        </header>
-      {% endif %}
+          {# Login #}
+          {% server "loginOrAvatar" %}
+        </div>
+      </header>
 
       {# Sidebar #}
       {% if hasSidebar %}
@@ -137,7 +127,7 @@
         {% block header %}
           <h1 class="title">{{ title }}</h1>
         {% endblock %}
-
+      
         {% block beforeContent %}{% endblock %}
 
         {% block content %}
@@ -148,11 +138,6 @@
       </main>
 
       {% include 'search.njk' %}
-
-      {# Footer #}
-      {% if pageFooter %}
-        {% include pageFooter %}
-      {% endif %}
     </wa-page>
 
   </body>

packages/webawesome/docs/_includes/head.njk

@@ -26,17 +26,5 @@
 {% endfor %}
 <link rel="stylesheet" href="/dist/styles/webawesome.css" />
 
-<script type="module">
-  document.addEventListener("wa-discovery-complete", loadLayout)
-  function loadLayout () {
-    if (!customElements.get("wa-layout")) {
-      import("{% cdnUrl 'components/page/page.js' %}")
-        .catch((e) => {
-        // known errors with dual registration. This is only a thing in the free repo.
-        })
-    }
-  }
-</script>
-
 {# Used by Web Awesome App to inject other assets into the head. #}
 {% server "head" %}

packages/webawesome/docs/_includes/sidebar.njk

@@ -31,19 +31,16 @@
 <!-- Components -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a class="wa-cluster wa-gap-xs" href="/docs/components/" title="Overview">
-      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+    <a href="/docs/components/" title="Overview">
       Components
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
     </a>
   </h2>
   <ul>
     <li>
-      <span class="wa-split">
-        <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
-          Page <wa-icon name="flask" aria-hidden="true"></wa-icon>
-        </a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-      </span>
+      <a href="/docs/components/page/">Page</a>
+      <wa-icon name="flask" aria-hidden="true"></wa-icon>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
     </li>
     <li><a href="/docs/components/animated-image/">Animated Image</a></li>
     <li><a href="/docs/components/animation/">Animation</a></li>
@@ -60,16 +57,12 @@
     <li><a href="/docs/components/callout/">Callout</a></li>
     <li><a href="/docs/components/card/">Card</a></li>
     <li>
-      <a class="wa-cluster wa-gap-xs" href="/docs/components/carousel/">
-        Carousel
-        <wa-icon name="flask" aria-hidden="true"></wa-icon>
-      </a>
+      <a href="/docs/components/carousel/">Carousel</a>
+      <wa-icon name="flask" aria-hidden="true"></wa-icon>
       <ul>
         <li>
-          <a class="wa-cluster wa-gap-xs" href="/docs/components/carousel-item/">
-            Carousel Item
-            <wa-icon name="flask" aria-hidden="true"></wa-icon>
-          </a>
+          <a href="/docs/components/carousel-item/">Carousel Item</a>
+          <wa-icon name="flask" aria-hidden="true"></wa-icon>
         </li>
       </ul>
     </li>
@@ -77,10 +70,8 @@
     <li><a href="/docs/components/color-picker/">Color Picker</a></li>
     <li><a href="/docs/components/comparison/">Comparison</a></li>
     <li>
-      <a class="wa-cluster wa-gap-xs" href="/docs/components/copy-button/">
-        Copy Button
-        <wa-icon name="flask" aria-hidden="true"></wa-icon>
-      </a>
+      <a href="/docs/components/copy-button/">Copy Button</a>
+      <wa-icon name="flask" aria-hidden="true"></wa-icon>
     </li>
     <li><a href="/docs/components/details/">Details</a></li>
     <li><a href="/docs/components/dialog/">Dialog</a></li>
@@ -98,7 +89,6 @@
     <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>
@@ -146,9 +136,9 @@
 <!-- Style utilities -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a class="wa-cluster wa-gap-xs" href="/docs/utilities/" title="Overview">
-      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+    <a href="/docs/utilities/" title="Overview">
       Style Utilities
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
     </a>
   </h2>
   <ul>
@@ -164,9 +154,9 @@
 <!-- Layout -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a class="wa-cluster wa-gap-xs" href="/docs/layout/" title="Overview">
-      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+    <a href="/docs/layout/" title="Overview">
       Layout
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
     </a>
   </h2>
   <ul>
@@ -179,12 +169,9 @@
     <li><a href="/docs/utilities/split/">Split</a></li>
     <li><a href="/docs/utilities/stack/">Stack</a></li>
     <li>
-      <span class="wa-split">
-        <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
-          Page <wa-icon name="flask" aria-hidden="true"></wa-icon>
-        </a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-      </span>
+      <a href="/docs/components/page/">Page</a>
+      <wa-icon name="flask" aria-hidden="true"></wa-icon>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
     </li>
   </ul>
 </wa-details>
@@ -192,17 +179,15 @@
 <!-- Patterns -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a class="wa-cluster wa-gap-xs" href="/docs/patterns/" title="Overview">
-      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+    <a href="/docs/patterns/" title="Overview">
       Patterns
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
     </a>
   </h2>
   <ul>
     <li>
-      <span class="wa-split">
-        <a href="/docs/patterns/app/">App</a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-      </span>
+      <a href="/docs/patterns/app/">App</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
       <ul>
         <li>
           <a href="/docs/patterns/app/action-panel/">Action Panel</a>
@@ -245,10 +230,8 @@
       </ul>
     </li>
     <li>
-      <span class="wa-split">
-        <a href="/docs/patterns/blog-news/">Blog &amp; News</a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-      </span>
+      <a href="/docs/patterns/blog-news/">Blog &amp; News</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
       <ul>
       <li>
           <a href="/docs/patterns/blog-news/banners/">Banners</a>
@@ -292,7 +275,7 @@
         <li>
           <a href="/docs/patterns/blog-news/login/">Sign Up &amp; Login</a>
         </li>
-        <li>
+         <li>
           <a href="/docs/patterns/blog-news/numbers/">Numbers</a>
         </li>
         <li>
@@ -301,16 +284,14 @@
         <li>
           <a href="/docs/patterns/blog-news/teams/">Teams</a>
         </li>
-        <li>
+         <li>
           <a href="/docs/patterns/blog-news/testimonials/">Testimonials</a>
         </li>
       </ul>
     </li>
     <li>
-      <span class="wa-split">
-        <a href="/docs/patterns/ecommerce/">Ecommerce</a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-      </span>
+      <a href="/docs/patterns/ecommerce/">Ecommerce</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
       <ul>
         <li>
           <a href="/docs/patterns/ecommerce/category-filter/">Category Filter</a>
@@ -348,10 +329,8 @@
       </ul>
     </li>
     <li>
-      <span class="wa-split">
-        <a href="/docs/patterns/layouts/">Layouts</a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-      </span>
+      <a href="/docs/patterns/layouts/">Layouts</a>
+      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
       <ul>
         <li>
           <a href="/docs/patterns/layouts/ecommerce/">Ecommerce</a>
@@ -373,19 +352,17 @@
   <li><a href="/docs/color-palettes">Color Palettes</a></li>
   <li><a href="/docs/themes">Themes</a></li>
   <li>
-    <span class="wa-split">
-      <a href="/themer" data-turbo="false">Theme Builder</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-    </span>
+    <a href="/themer" data-turbo="false">Theme Builder</a>
+    <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
   </li>
 </ul>
 
 <!-- Design tokens -->
 <wa-details appearance="outlined">
   <h2 slot="summary">
-    <a class="wa-cluster wa-gap-xs" href="/docs/tokens/" title="Overview">
-      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
+    <a href="/docs/tokens/" title="Overview">
       Design Tokens
+      <wa-icon name="grid-2" aria-hidden="true"></wa-icon>
     </a>
   </h2>
   <ul>

packages/webawesome/docs/_includes/visual-tests/color.njk

@@ -16,6 +16,7 @@
           <wa-badge variant="brand" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge variant="brand" appearance="filled">Filled</wa-badge>
           <wa-badge variant="brand" appearance="outlined">Outlined</wa-badge>
+          <wa-badge variant="brand" appearance="plain">Plain</wa-badge>
         </div>
       </td>
       <td>
@@ -24,6 +25,7 @@
           <wa-badge class="wa-brand" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge class="wa-brand" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-brand" appearance="outlined">Outlined</wa-badge>
+          <wa-badge class="wa-brand" appearance="plain">Plain</wa-badge>
         </div>
       </td>
     </tr>
@@ -35,6 +37,7 @@
           <wa-badge variant="neutral" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge variant="neutral" appearance="filled">Filled</wa-badge>
           <wa-badge variant="neutral" appearance="outlined">Outlined</wa-badge>
+          <wa-badge variant="neutral" appearance="plain">Plain</wa-badge>
         </div>
       </td>
       <td>
@@ -43,6 +46,7 @@
           <wa-badge class="wa-neutral" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge class="wa-neutral" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-neutral" appearance="outlined">Outlined</wa-badge>
+          <wa-badge class="wa-neutral" appearance="plain">Plain</wa-badge>
         </div>
       </td>
     </tr>
@@ -54,6 +58,7 @@
           <wa-badge variant="success" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge variant="success" appearance="filled">Filled</wa-badge>
           <wa-badge variant="success" appearance="outlined">Outlined</wa-badge>
+          <wa-badge variant="success" appearance="plain">Plain</wa-badge>
         </div>
       </td>
       <td>
@@ -62,6 +67,7 @@
           <wa-badge class="wa-success" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge class="wa-success" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-success" appearance="outlined">Outlined</wa-badge>
+          <wa-badge class="wa-success" appearance="plain">Plain</wa-badge>
         </div>
       </td>
     </tr>
@@ -73,6 +79,7 @@
           <wa-badge variant="warning" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge variant="warning" appearance="filled">Filled</wa-badge>
           <wa-badge variant="warning" appearance="outlined">Outlined</wa-badge>
+          <wa-badge variant="warning" appearance="plain">Plain</wa-badge>
         </div>
       </td>
       <td>
@@ -81,6 +88,7 @@
           <wa-badge class="wa-warning" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge class="wa-warning" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-warning" appearance="outlined">Outlined</wa-badge>
+          <wa-badge class="wa-warning" appearance="plain">Plain</wa-badge>
         </div>
       </td>
     </tr>
@@ -92,6 +100,7 @@
           <wa-badge variant="danger" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge variant="danger" appearance="filled">Filled</wa-badge>
           <wa-badge variant="danger" appearance="outlined">Outlined</wa-badge>
+          <wa-badge variant="danger" appearance="plain">Plain</wa-badge>
         </div>
       </td>
       <td>
@@ -100,6 +109,7 @@
           <wa-badge class="wa-danger" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge class="wa-danger" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-danger" appearance="outlined">Outlined</wa-badge>
+          <wa-badge class="wa-danger" appearance="plain">Plain</wa-badge>
         </div>
       </td>
     </tr>

packages/webawesome/docs/_includes/visual-tests/size.njk

@@ -40,6 +40,66 @@
 </div>
 <wa-divider></wa-divider>
 
+<h3>Button Group</h3>
+
+<div class="table-scroll">
+<table>
+  <thead>
+    <th></th>
+    <th><code>size=""</code></th>
+    <th><code>.wa-size-[s|m|l]</code></th>
+  </thead>
+  <tbody>
+    <tr>
+      <th><code>small</code>/<code>s</code></th>
+      <td>
+        <wa-button-group orientation="horizontal" size="small">
+          <wa-button value="1">Button L</wa-button>
+          <wa-button value="2">Button R</wa-button>
+        </wa-button-group>
+      </td>
+      <td>
+        <wa-button-group orientation="horizontal" class="wa-size-s">
+          <wa-button value="1">Button L</wa-button>
+          <wa-button value="2">Button R</wa-button>
+        </wa-button-group>
+      </td>
+    </tr>
+    <tr>
+      <th><code>medium</code>/<code>m</code></th>
+      <td>
+        <wa-button-group orientation="horizontal" size="medium">
+          <wa-button value="1">Button L</wa-button>
+          <wa-button value="2">Button R</wa-button>
+        </wa-button-group>
+      </td>
+      <td>
+        <wa-button-group orientation="horizontal" class="wa-size-m">
+          <wa-button value="1">Button L</wa-button>
+          <wa-button value="2">Button R</wa-button>
+        </wa-button-group>
+      </td>
+    </tr>
+    <tr>
+      <th><code>large</code>/<code>l</code></th>
+      <td>
+        <wa-button-group orientation="horizontal" size="large">
+          <wa-button value="1">Button L</wa-button>
+          <wa-button value="2">Button R</wa-button>
+        </wa-button-group>
+      </td>
+      <td>
+        <wa-button-group orientation="horizontal" class="wa-size-l">
+          <wa-button value="1">Button L</wa-button>
+          <wa-button value="2">Button R</wa-button>
+        </wa-button-group>
+      </td>
+    </tr>
+  </tbody>
+</table>
+</div>
+<wa-divider></wa-divider>
+
 <h3>Callout</h3>
 
 <div class="table-scroll">

packages/webawesome/docs/_layouts/blank.njk

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-fa-kit-code="38c11e3f20" data-cdn-url="{% cdnUrl %}">
+<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
   <head>
     {% include 'head.njk' %}
     {% block head %}{% endblock %}

packages/webawesome/docs/assets/scripts/code-examples.js

@@ -56,7 +56,7 @@ document.addEventListener('click', event => {
     const code = codeExample.querySelector('code');
     const cdnUrl = document.documentElement.dataset.cdnUrl;
     const html =
-      `<script data-fa-kit-code="38c11e3f20" type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
+      `<script data-fa-kit-code="b10bfbde90" type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
       `<link rel="stylesheet" href="${cdnUrl}styles/webawesome.css">\n\n` +
       `${code.textContent}`;
     const css = 'html > body {\n  padding: 2rem !important;\n}';

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

@@ -181,6 +181,11 @@ wa-page > header {
 
   li wa-icon {
     color: var(--wa-color-text-quiet);
+    vertical-align: middle;
+
+    &[name='flask'] {
+      margin-inline: 0.125em;
+    }
   }
 }
 
@@ -200,16 +205,25 @@ wa-badge.pro {
     color: var(--wa-color-text-quiet);
 
     a {
+      display: flex;
+      align-items: center;
+      gap: 0.4em;
       color: var(--wa-color-text-normal);
       text-decoration: none;
 
       wa-icon {
+        margin-block-end: -0.15em;
         font-size: var(--wa-font-size-s);
         font-weight: var(--wa-font-weight-action);
+        color: var(--wa-color-gray-70);
       }
 
       &:hover {
-        text-decoration: underline;
+        color: var(--wa-color-brand-on-normal);
+
+        wa-icon {
+          color: var(--wa-color-brand-on-quiet);
+        }
       }
     }
   }
@@ -394,14 +408,12 @@ wa-button#search-trigger {
     box-shadow: none;
   }
   &::part(label) {
-    text-align: start;
     width: 100%;
   }
 }
 #search-trigger kbd {
   font-size: var(--wa-font-size-2xs);
   line-height: var(--wa-form-control-value-line-height);
-  padding-inline: 0.33em;
 }
 
 /* Search list pages */
@@ -504,6 +516,7 @@ wa-card .page-name {
     width: 100%;
     height: 100%;
     display: block;
+    --background-color-hover: transparent;
     font-family: var(--wa-font-family-code);
 
     &::part(button) {
@@ -513,7 +526,6 @@ wa-card .page-name {
     }
 
     &::part(button):hover {
-      background-color: transparent;
       cursor: copy;
     }
 

packages/webawesome/docs/docs/components/button-group.md

@@ -15,6 +15,41 @@ category: Actions
 
 ## Examples
 
+### Button Sizes
+
+Unless otherwise specified,
+the size of [buttons](/docs/components/button) will be determined by the Button Group's `size` attribute.
+
+```html {.example}
+<wa-button-group size="small" label="Alignment">
+  <wa-button>Left</wa-button>
+  <wa-button>Center</wa-button>
+  <wa-button>Right</wa-button>
+</wa-button-group>
+
+<br /><br />
+
+<wa-button-group size="medium" label="Alignment">
+  <wa-button>Left</wa-button>
+  <wa-button>Center</wa-button>
+  <wa-button>Right</wa-button>
+</wa-button-group>
+
+<br /><br />
+
+<wa-button-group size="large" label="Alignment">
+  <wa-button>Left</wa-button>
+  <wa-button>Center</wa-button>
+  <wa-button>Right</wa-button>
+</wa-button-group>
+```
+
+:::info
+While you can still set the size of [buttons](/docs/components/button) individually,
+and it will override the inherited size,
+it is rarely a good idea to mix sizes within the same button group.
+:::
+
 ### Vertical Button Groups
 
 Set the `orientation` attribute to `vertical` to make a vertical button group.

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

@@ -17,8 +17,10 @@ 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>
 
-  <wa-button slot="footer" variant="brand" pill>More Info</wa-button>
-  <wa-rating slot="footer-actions" label="Rating"></wa-rating>
+  <div slot="footer" class="wa-split">
+    <wa-button variant="brand" pill>More Info</wa-button>
+    <wa-rating label="Rating"></wa-rating>
+  </div>
 </wa-card>
 
 <style>
@@ -53,11 +55,14 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
 
 ```html {.example}
 <wa-card class="card-header">
-  <h3 slot="header">Header Title</h3>
+  <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>
+
   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>
@@ -80,9 +85,10 @@ 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!
 
-  <wa-rating slot="footer"></wa-rating>
-
-  <wa-button slot="footer-actions" variant="brand">Preview</wa-button>
+  <div slot="footer" class="wa-split">
+    <wa-rating></wa-rating>
+    <wa-button variant="brand">Preview</wa-button>
+  </div>
 </wa-card>
 
 <style>
@@ -149,35 +155,3 @@ 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/details.md

@@ -50,15 +50,15 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 
 ### Icon Position
 
-The default position for the expand and collapse icons is at the end of the summary. Set the `icon-placement` attribute to `start` to place the icon at the start of the summary.
+The default position for the expand and collapse icons is at the end of the summary. Set the `icon-position` attribute to `start` to place the icon at the start of the summary.
 
 ```html {.example}
 <div class="wa-stack">
-  <wa-details summary="Start" icon-placement="start">
+  <wa-details summary="Start" icon-position="start">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
   </wa-details>
-  <wa-details summary="End" icon-placement="end">
+  <wa-details summary="End" icon-position="end">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
   </wa-details>
@@ -85,14 +85,14 @@ Links and other interactive elements will still retain their behavior:
 
 ### Right-to-Left Languages
 
-The details component, including its `icon-placement`, automatically adapts to right-to-left languages:
+The details component, including its `icon-position`, automatically adapts to right-to-left languages:
 
 ```html {.example}
 <div class="wa-stack">
   <wa-details summary="تبديلني" lang="ar" dir="rtl">
     استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
   </wa-details>
-  <wa-details summary="تبديلني" lang="ar" dir="rtl" icon-placement="start">
+  <wa-details summary="تبديلني" lang="ar" dir="rtl" icon-position="start">
     استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
   </wa-details>
 </div>

packages/webawesome/docs/docs/components/icon.md

@@ -7,10 +7,6 @@ category: Imagery
 
 Web Awesome comes bundled with over 2,000 free icons courtesy of [Font Awesome](https://fontawesome.com/). These icons are part of the `default` icon library. Font Awesome Pro users can unlock additional icon families. Or, if you prefer, you can register your own [custom icon library](#icon-library).
 
-```html {.example}
-<wa-icon name="face-awesome" variant="light" label="Awesome" style="font-size: 2em;"></wa-icon>
-```
-
 :::info
 Not sure which icon to use? [Find the perfect icon over at Font Awesome!](https://fontawesome.com/search?o=r&m=free&f=brands%2Cclassic)
 :::
@@ -21,66 +17,45 @@ Not sure which icon to use? [Find the perfect icon over at Font Awesome!](https:
 
 The default icon library is Font Awesome Free, which comes with two icon families: `classic` and `brands`. Use the `family` attribute to set the icon family.
 
-Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regular`, and `solid`. Font Awesome Pro users can [provide their kit code](/docs/#using-font-awesome-kit-codes) to unlock additional premium icon families, including `sharp`, `duotone`, `sharp-duotone`, and additional Pro+ icon packs.
-
-For supportive icon families, use the `variant` attribute to set the variant.
+Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regular`, and `solid`. Font Awesome Pro users can [provide their kit code](/docs/#using-font-awesome-kit-codes) to unlock additional families, including `sharp`, `duotone`, and `sharp-duotone`. For these icon families, use the `variant` attribute to set the variant.
 
 ```html {.example}
-<div class="wa-stack wa-gap-xl">
-  <div class="wa-flank" style="--flank-size: 12ch;">
-    <span>Classic</span>
-    <div class="wa-cluster" style="font-size: 1.5em;">
-      <wa-icon name="eyedropper"></wa-icon>
-      <wa-icon variant="regular" name="grip-vertical"></wa-icon>
-      <wa-icon variant="light" name="play"></wa-icon>
-      <wa-icon variant="thin" name="star"></wa-icon>
-    </div>
-  </div>
-  <div class="wa-flank" style="--flank-size: 12ch;">
-    <span>Duotone</span>
-    <div class="wa-cluster" style="font-size: 1.5em;">
-      <wa-icon family="duotone" name="eyedropper"></wa-icon>
-      <wa-icon family="duotone" variant="regular" name="grip-vertical"></wa-icon>
-      <wa-icon family="duotone" variant="light" name="play"></wa-icon>
-      <wa-icon family="duotone" variant="thin" name="star"></wa-icon>
-    </div>
-  </div>
-  <div class="wa-flank" style="--flank-size: 12ch;">
-    <span>Sharp</span>
-    <div class="wa-cluster" style="font-size: 1.5em;">
-      <wa-icon family="sharp" name="eyedropper"></wa-icon>
-      <wa-icon family="sharp" variant="regular" name="grip-vertical"></wa-icon>
-      <wa-icon family="sharp" variant="light" name="play"></wa-icon>
-      <wa-icon family="sharp" variant="thin" name="star"></wa-icon>
-    </div>
-  </div>
-  <div class="wa-flank" style="--flank-size: 12ch;">
-    <span>Sharp Duotone</span>
-    <div class="wa-cluster" style="font-size: 1.5em;">
-      <wa-icon family="sharp-duotone" name="eyedropper"></wa-icon>
-      <wa-icon family="sharp-duotone" variant="regular" name="grip-vertical"></wa-icon>
-      <wa-icon family="sharp-duotone" variant="light" name="play"></wa-icon>
-      <wa-icon family="sharp-duotone" variant="thin" name="star"></wa-icon>
-    </div>
-  </div>
-  <div class="wa-flank" style="--flank-size: 12ch;">
-    <span>Brands</span>
-    <div class="wa-cluster" style="font-size: 1.5em;">
-      <wa-icon family="brands" name="font-awesome"></wa-icon>
-      <wa-icon family="brands" name="web-awesome"></wa-icon>
-      <wa-icon family="brands" name="github"></wa-icon>
-      <wa-icon family="brands" name="discord"></wa-icon>
-    </div>
-  </div>
-</div>
+<wa-icon name="eyedropper"></wa-icon>
+<wa-icon name="grip-vertical"></wa-icon>
+<wa-icon name="play"></wa-icon>
+<wa-icon name="star"></wa-icon>
+<wa-icon name="user"></wa-icon>
 ```
 
-### Labels
+### Colors
 
-For non-decorative icons, use the `label` attribute to announce it to assistive devices.
+Icons inherit their color from the current text color. Thus, you can set the `color` property on the `<wa-icon>` element or an ancestor to change the color.
 
 ```html {.example}
-<wa-icon name="star" label="Favorite" style="font-size: 1.5em;"></wa-icon>
+<div style="color: #4a90e2;">
+  <wa-icon name="exclamation-triangle"></wa-icon>
+  <wa-icon name="archive"></wa-icon>
+  <wa-icon name="battery-three-quarters"></wa-icon>
+  <wa-icon name="bell"></wa-icon>
+</div>
+<div style="color: #9013fe;">
+  <wa-icon name="clock"></wa-icon>
+  <wa-icon name="cloud"></wa-icon>
+  <wa-icon name="download"></wa-icon>
+  <wa-icon name="file"></wa-icon>
+</div>
+<div style="color: #417505;">
+  <wa-icon name="flag"></wa-icon>
+  <wa-icon name="heart"></wa-icon>
+  <wa-icon name="image"></wa-icon>
+  <wa-icon name="bolt-lightning"></wa-icon>
+</div>
+<div style="color: #f5a623;">
+  <wa-icon name="microphone"></wa-icon>
+  <wa-icon name="search"></wa-icon>
+  <wa-icon name="star"></wa-icon>
+  <wa-icon name="trash"></wa-icon>
+</div>
 ```
 
 ### Sizing
@@ -88,7 +63,7 @@ For non-decorative icons, use the `label` attribute to announce it to assistive
 Icons are sized relative to the current font size. To change their size, set the `font-size` property on the icon itself or on a parent element as shown below.
 
 ```html {.example}
-<div class="wa-cluster" style="font-size: 44px;">
+<div style="font-size: 32px;">
   <wa-icon name="bell"></wa-icon>
   <wa-icon name="heart"></wa-icon>
   <wa-icon name="image"></wa-icon>
@@ -98,317 +73,27 @@ Icons are sized relative to the current font size. To change their size, set the
 </div>
 ```
 
-### Auto Width
+### Fixed Width Icons
 
-By default, icons have a 1em height and a fixed 1em width. Use the `auto-width` attribute to allow the icon to use its natural variable width.
+By default, icons have a 1em height and a variable width. Use the `fixed-width` attribute to render the host element in a 1em by 1em box.
 
 ```html {.example}
-Without auto-width<br />
-<div style="font-size: 1.5em; color: #193154;">
-  <wa-icon family="solid" name="exclamation" style="background: lightsalmon;"></wa-icon>
-  <wa-icon family="solid" name="circle-check" style="background: lightsalmon;"></wa-icon>
-  <wa-icon family="solid" name="input-numeric" style="background: lightsalmon;"></wa-icon>
-  <wa-icon family="solid" name="ruler-vertical" style="background: lightsalmon;"></wa-icon>
-  <wa-icon family="solid" name="ruler-horizontal" style="background: lightsalmon;"></wa-icon>
-  <wa-icon family="solid" name="airplay" style="background: lightsalmon;"></wa-icon>
-</div>
-
-<br />
-
-With auto-width<br />
-<div style="font-size: 1.5em; color: #193154;">
-  <wa-icon auto-width family="solid" name="exclamation" style="background: lightsalmon;"></wa-icon>
-  <wa-icon auto-width family="solid" name="circle-check" style="background: lightsalmon;"></wa-icon>
-  <wa-icon auto-width family="solid" name="input-numeric" style="background: lightsalmon;"></wa-icon>
-  <wa-icon auto-width family="solid" name="ruler-vertical" style="background: lightsalmon;"></wa-icon>
-  <wa-icon auto-width family="solid" name="ruler-horizontal" style="background: lightsalmon;"></wa-icon>
-  <wa-icon auto-width family="solid" name="airplay" style="background: lightsalmon;"></wa-icon>
-</div>
+<wa-icon fixed-width name="cloud"></wa-icon>
+<wa-icon fixed-width name="user"></wa-icon>
+<wa-icon fixed-width name="truck"></wa-icon>
+<wa-icon fixed-width name="file"></wa-icon>
+<wa-icon fixed-width name="skating"></wa-icon>
+<wa-icon fixed-width name="snowplow"></wa-icon>
 ```
 
-### Colors
+### Labels
 
-Icons inherit their color from the current text color. Thus, you can set the `color` property on the `<wa-icon>` element or an ancestor to change the color.
+For non-decorative icons, use the `label` attribute to announce it to assistive devices.
 
 ```html {.example}
-<div class="wa-cluster" style="font-size: 1.5em;">
-  <wa-icon name="strawberry" style="color: salmon;"></wa-icon>
-  <wa-icon name="crab" style="color: coral;"></wa-icon>
-  <wa-icon name="sun" style="color: gold;"></wa-icon>
-  <wa-icon name="leaf" style="color: mediumseagreen;"></wa-icon>
-  <wa-icon name="cloud-showers-heavy" style="color: steelblue;"></wa-icon>
-  <wa-icon name="cat-space" style="color: mediumpurple;"></wa-icon>
-</div>
+<wa-icon name="star" label="Add to favorites"></wa-icon>
 ```
 
-### Duotone
-
-Font Awesome's [Duotone icons](https://docs.fontawesome.com/web/style/duotone) change with the `color` property as well, but you can customize the primary and secondary colors independently using the `--primary-color` and `--secondary-color` custom properties. To change the opacity of either, use `--primary-opacity` and `--secondary-opacity`.
-
-Note that these custom properties will not inherit and _must be applied directly to the icon_.
-
-```html {.example}
-<div class="wa-stack">
-  <div class="wa-cluster" style="font-size: 1.5em;">
-    <wa-icon
-      family="duotone"
-      name="crow"
-      style="--primary-color: dodgerblue; --secondary-color: gold; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      name="campfire"
-      style="--primary-color: sienna; --secondary-color: red; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      name="birthday-cake"
-      style="--primary-color: pink; --secondary-color: palevioletred; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      name="ear"
-      style="--primary-color: sandybrown; --secondary-color: bisque; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      name="corn"
-      style="--primary-color: mediumseagreen; --secondary-color: gold; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      name="cookie-bite"
-      style="--primary-color: saddlebrown; --secondary-color: burlywood; --secondary-opacity: 1.0;"
-    ></wa-icon>
-  </div>
-
-  <div class="wa-cluster" style="font-size: 1.5em;">
-    <wa-icon
-      family="duotone"
-      variant="regular"
-      name="crow"
-      style="--primary-color: dodgerblue; --secondary-color: gold; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="regular"
-      name="campfire"
-      style="--primary-color: sienna; --secondary-color: red; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="regular"
-      name="birthday-cake"
-      style="--primary-color: pink; --secondary-color: palevioletred; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="regular"
-      name="ear"
-      style="--primary-color: sandybrown; --secondary-color: bisque; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="regular"
-      name="corn"
-      style="--primary-color: mediumseagreen; --secondary-color: gold; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="regular"
-      name="cookie-bite"
-      style="--primary-color: saddlebrown; --secondary-color: burlywood; --secondary-opacity: 1.0;"
-    ></wa-icon>
-  </div>
-
-  <div class="wa-cluster" style="font-size: 1.5em;">
-    <wa-icon
-      family="duotone"
-      variant="light"
-      name="crow"
-      style="--primary-color: dodgerblue; --secondary-color: gold; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="light"
-      name="campfire"
-      style="--primary-color: sienna; --secondary-color: red; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="light"
-      name="birthday-cake"
-      style="--primary-color: pink; --secondary-color: palevioletred; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="light"
-      name="ear"
-      style="--primary-color: sandybrown; --secondary-color: bisque; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="light"
-      name="corn"
-      style="--primary-color: mediumseagreen; --secondary-color: gold; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="light"
-      name="cookie-bite"
-      style="--primary-color: saddlebrown; --secondary-color: burlywood; --secondary-opacity: 1.0;"
-    ></wa-icon>
-  </div>
-
-  <div class="wa-cluster" style="font-size: 1.5em;">
-    <wa-icon
-      family="duotone"
-      variant="thin"
-      name="crow"
-      style="--primary-color: dodgerblue; --secondary-color: gold; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="thin"
-      name="campfire"
-      style="--primary-color: sienna; --secondary-color: red; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="thin"
-      name="birthday-cake"
-      style="--primary-color: pink; --secondary-color: palevioletred; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="thin"
-      name="ear"
-      style="--primary-color: sandybrown; --secondary-color: bisque; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="thin"
-      name="corn"
-      style="--primary-color: mediumseagreen; --secondary-color: gold; --secondary-opacity: 1.0;"
-    ></wa-icon>
-    <wa-icon
-      family="duotone"
-      variant="thin"
-      name="cookie-bite"
-      style="--primary-color: saddlebrown; --secondary-color: burlywood; --secondary-opacity: 1.0;"
-    ></wa-icon>
-  </div>
-</div>
-```
-
-:::info
-Duotone icons can be unlocked by [providing a valid Font Awesome kit code](/docs/#using-font-awesome-kit-codes).
-:::
-
-### Swap Duotone Opacity
-
-For duotone icons, you can swap the primary and secondary opacity values using the `swap-opacity` attribute. This is useful when you want to emphasize the secondary layer of the icon.
-
-```html {.example}
-Normal duotone<br />
-<div class="wa-cluster" style="font-size: 1.5em;">
-  <wa-icon family="duotone" name="home"></wa-icon>
-  <wa-icon family="duotone" name="user"></wa-icon>
-  <wa-icon family="duotone" name="envelope"></wa-icon>
-  <wa-icon family="duotone" name="calendar"></wa-icon>
-</div>
-
-<br />
-
-Swapped duotone<br />
-<div class="wa-cluster" style="font-size: 1.5em;">
-  <wa-icon family="duotone" name="home" swap-opacity></wa-icon>
-  <wa-icon family="duotone" name="user" swap-opacity></wa-icon>
-  <wa-icon family="duotone" name="envelope" swap-opacity></wa-icon>
-  <wa-icon family="duotone" name="calendar" swap-opacity></wa-icon>
-</div>
-```
-
-### Font Awesome Pro+
-
-If you're a [Font Awesome Pro+ customer](https://fontawesome.com/), you have access to even more premium icons! Just set the appropriate `family`, `variant`, and `name` on the icon.
-
-```html {.example}
-<div class="wa-stack wa-gap-xl">
-  <div class="wa-flank" style="--flank-size: 10ch;">
-    <a href="https://fontawesome.com/icons/packs/notdog" target="_blank">Notdog</a>
-    <div class="wa-cluster" style="font-size: 1.5em;">
-      <wa-icon family="notdog" variant="solid" name="house"></wa-icon>
-      <wa-icon
-        family="notdog"
-        variant="duo-solid"
-        name="house"
-        style="--secondary-color: skyblue; --secondary-opacity: 0.8;"
-      ></wa-icon>
-    </div>
-  </div>
-
-  <div class="wa-flank" style="--flank-size: 10ch;">
-    <a href="https://fontawesome.com/icons/packs/chisel" target="_blank">Chisel</a>
-    <div class="wa-cluster" style="font-size: 1.5em;">
-      <wa-icon family="chisel" variant="regular" name="house"></wa-icon>
-    </div>
-  </div>
-
-  <div class="wa-flank" style="--flank-size: 10ch;">
-    <a href="https://fontawesome.com/icons/packs/etch" target="_blank">Etch</a>
-    <div class="wa-cluster" style="font-size: 1.5em;">
-      <wa-icon family="etch" variant="solid" name="house"></wa-icon>
-    </div>
-  </div>
-
-  <div class="wa-flank" style="--flank-size: 10ch;">
-    <a href="https://fontawesome.com/icons/packs/jelly" target="_blank">Jelly</a>
-    <div class="wa-cluster" style="font-size: 1.5em;">
-      <wa-icon family="jelly" variant="regular" name="house"></wa-icon>
-      <wa-icon
-        family="jelly"
-        variant="duo-regular"
-        name="house"
-        style="--secondary-color: skyblue; --secondary-opacity: 0.8;"
-      ></wa-icon>
-      <wa-icon family="jelly" variant="fill-regular" name="house"></wa-icon>
-    </div>
-  </div>
-
-  <div class="wa-flank" style="--flank-size: 10ch;">
-    <a href="https://fontawesome.com/icons/packs/slab" target="_blank">Slab</a>
-    <div class="wa-cluster" style="font-size: 1.5em;">
-      <wa-icon family="slab" variant="regular" name="house"></wa-icon>
-      <wa-icon family="slab" variant="press-regular" name="house"></wa-icon>
-    </div>
-  </div>
-
-  <div class="wa-flank" style="--flank-size: 10ch;">
-    <a href="https://fontawesome.com/icons/packs/thumbprint" target="_blank">Thumbprint</a>
-    <div class="wa-cluster" style="font-size: 1.5em;">
-      <wa-icon
-        family="thumbprint"
-        variant="light"
-        name="house"
-        style="--secondary-color: skyblue; --secondary-opacity: 0.8;"
-      ></wa-icon>
-    </div>
-  </div>
-
-  <div class="wa-flank" style="--flank-size: 10ch;">
-    <a href="https://fontawesome.com/icons/packs/whiteboard" target="_blank">Whiteboard</a>
-    <div class="wa-cluster" style="font-size: 32px;">
-      <wa-icon family="whiteboard" variant="semibold" name="house"></wa-icon>
-    </div>
-  </div>
-</div>
-```
-
-:::info
-Pro+ icons can be unlocked by [providing a valid Font Awesome kit code](/docs/#using-font-awesome-kit-codes).
-:::
-
 ### Custom Icons
 
 Custom icons can be loaded individually with the `src` attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a [custom icon library](#icon-libraries).
@@ -602,9 +287,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu
   import { registerIconLibrary } from '/dist/webawesome.js';
 
   registerIconLibrary('iconoir', {
-    resolver: (name, family) => {
-      return `https://cdn.jsdelivr.net/npm/iconoir@7.11.0/icons/regular/${name}.svg`;
-    },
+    resolver: name => `https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@latest/icons/${name}.svg`,
     mutator: svg =>
       svg.querySelectorAll('path').forEach(path => {
         path.setAttribute('fill', 'none');
@@ -614,7 +297,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu
 </script>
 
 <div style="font-size: 24px;">
-  <wa-icon library="iconoir" name="check-circle"></wa-icon>
+  <wa-icon library="iconoir" name="check-circled-outline"></wa-icon>
   <wa-icon library="iconoir" name="drawer"></wa-icon>
   <wa-icon library="iconoir" name="keyframes"></wa-icon>
   <wa-icon library="iconoir" name="headset-help"></wa-icon>

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

@@ -1,297 +0,0 @@
----
-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/components/select.md

@@ -366,7 +366,7 @@ Here's a comprehensive example showing different lazy loading scenarios:
 
     const option = document.createElement('wa-option');
     option.setAttribute('value', 'foo');
-    option.selected = true;
+    option.selected = true
     option.innerText = 'Foo';
 
     // For the multiple select with existing selected options, make the new option selected
@@ -403,4 +403,4 @@ Here's a comprehensive example showing different lazy loading scenarios:
 
 :::info
 The key principle is that the select component prioritizes user interactions and explicit selections over programmatic changes, ensuring a predictable user experience even with dynamically loaded content.
-:::
+:::

packages/webawesome/docs/docs/index.md

@@ -32,7 +32,7 @@ Now you can [start using Web Awesome!](/docs/usage)
 
 ## Using Font Awesome Kit Codes
 
-Font Awesome users can provide their kit code to unlock premium icon packs. You can provide yours by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
+Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You can provide it by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
 
 ```html
 <!-- Option 1: the data-fa-kit-code attribute -->
@@ -45,10 +45,6 @@ Font Awesome users can provide their kit code to unlock premium icon packs. You
 </script>
 ```
 
-:::info
-Not a Font Awesome user yet? [Learn more about premium icon packs](https://fontawesome.com/) and sign up for an account to unlock them!
-:::
-
 ---
 
 {# This looks weird, but without it, markdownItAttrs flags the raw calls incorrectly. #}
@@ -191,7 +187,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

@@ -22,7 +22,43 @@ Through the magic of a mutation observer, changing the `lang` attribute will aut
 
 ## Available Translations
 
-Web Awesome ships with [a number of translations](https://github.com/shoelace-style/webawesome/tree/next/packages/webawesome/src/translations). The default is English (US), which also serves as the fallback locale. As such, you do not need to import the English translation.
+Web Awesome ships with a number of translations. The default is English (US), which also serves as the fallback locale. As such, you do not need to import the English translation.
+
+Available translations include:
+
+<div style="columns: 3; gap: 1rem; margin-block-end: 1.5rem;">
+
+- ar
+- cs
+- da
+- de-ch
+- de
+- en-gb
+- en
+- es
+- fa
+- fi
+- fr
+- he
+- hr
+- hu
+- id
+- it
+- ja
+- nb
+- nl
+- nn
+- pl
+- pt
+- ru
+- sl
+- sv
+- tr
+- uk
+- zh-cn
+- zh-tw
+
+</div>
 
 You can import translations using the following syntax, where `<code>` is replaced with any language code shown above.
 
@@ -56,7 +92,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/webawesome/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/shoelace/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/webawesome/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/shoelace/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,41 +10,6 @@ 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]
-  - Added the `auto-width` attribute to automatically size icons, since FA7 is fixed-width by default now
-  - Improved support for duotone icons in `<wa-icon>`, including custom colors, custom opacity, and opacity swapping
-  - 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]
-- Fixed a bug in `<wa-dropdown>` that caused menus to overflow the viewport instead of resizing [issue:1267]
-- Fixed a bug in `<wa-dropdown>` that prevented keyboard selection of items when nested in shadow roots [issue:1270]
-- Fixed a bug in `<wa-dropdown>` that prevented items passed in from slots from being detected [issue:1271]
-- Fixed a bug in JSX typings that prevented the types file from being exported [pr:1295]
-- 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]
-- Added horizontal orientation support with `orientation="horizontal"` for `<wa-card>`
-
-## 3.0.0-beta.4
-
 ### New Features {data-no-outline}
 
 - Added the `icon-position` attribute to `<wa-details>` [discuss:1099]
@@ -52,14 +17,12 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Added `--wa-tooltip-border-color`, `--wa-tooltip-border-style`, and `--wa-tooltip-border-width` tokens [issue:1224]
 - Added the `without-arrow` attribute to `<wa-popover>` and `<wa-tooltip>` to hide arrows without artifacts
 - Added JSX types for use with React and others [pr:1256]
-- Added `<input type="file">` to native styles [pr:1279]
 
 ### Bug Fixes and Improvements {data-no-outline}
 
 - Fixed a bug in `<wa-details>` that caused the content to overflow the container when animating [issue:1149]
 - Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that prevented the header from showing when the label was missing [issue:1209]
 - Fixed a missing dependency required for React wrappers
-- Fixed missing `:hover` and `:active` styles on native buttons without an appearance modifier class
 
 ## 3.0.0-beta.3
 

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/webawesome/discussions) is open to anyone with a GitHub account. This is the best place to:
+The [discussion forum](https://github.com/shoelace-style/shoelace/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/webawesome/discussions" target="_blank" style="margin-block-end: var(--wa-content-spacing);">
+<wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/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/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.
+**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.
 
 <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/resources/contributing.md

@@ -252,16 +252,22 @@ This creates confusion because the part will be documented, but it won't work wh
 
 ### Emitting Events
 
-Components must only emit events that start with `wa-` as a namespace. For compatibility with frameworks that utilize DOM templates, events must have lowercase, kebab-style names. For example, use `wa-event` instead of `waEvent`.
+Components must only emit events that start with `wa-` as a namespace. For compatibility with frameworks that utilize DOM templates, events must have lowercase, kebab-style names. For example, use `wa-change` instead of `waChange`.
 
 This convention avoids the problem of browsers lowercasing attributes, causing some frameworks to be unable to listen to them. This problem isn't specific to one framework, but [Vue's documentation](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names) provides a good explanation of the problem.
 
+### Change Events
+
+When change events are emitted by Web Awesome components, they should be named `wa-change` and they should only be emitted as a result of user input. Programmatic changes, such as setting `el.value = '…'` _should not_ result in a change event being emitted. This is consistent with how native form controls work.
+
 ### Data Attribute Invokers
 
 Some components can be controlled using [data attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/data-*) that trigger specific behaviors. These controls must use the following convention:
 
 ```html
-<button data-component="action id">Button text</button>
+<button data-component="action id">
+  Button text
+</button>
 ```
 
 The `data-component` portion corresponds to the component's name without the `wa-` prefix. For example, `data-dialog` must control a `<wa-dialog>` component.
@@ -271,9 +277,13 @@ The `action` parameter is required and must be a concise, descriptive term indic
 The `id` parameter must point to the ID of the target component. The ID may be omitted if and only if the target component wraps the element with the `data-` attribute.
 
 ```html
-<wa-dialog id="my-dialog"> Dialog content </wa-dialog>
+<wa-dialog id="my-dialog">
+  Dialog content
+</wa-dialog>
 
-<button data-dialog="open my-dialog">Open dialog</button>
+<button data-dialog="open my-dialog">
+  Open dialog
+</button>
 ```
 
 ### CSS Custom Properties
@@ -406,4 +416,4 @@ or for hydrated rendering only:
 
 ```bash
 SSR_ONLY="true" npm run test
-```
+```

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

@@ -59,6 +59,7 @@ 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.
@@ -72,7 +73,6 @@ 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,7 +91,6 @@ 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'] -%}
@@ -113,19 +112,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>   |
@@ -154,23 +153,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
@@ -178,19 +177,16 @@ 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 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 (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.
 
 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/docs/docs/utilities/native.md

@@ -404,7 +404,6 @@ Create a variety of form controls with `<input type="">`, `<select>`, and `<text
   <label>Time <input type="time" /></label>
   <label>Number <input type="number" placeholder="12345" /></label>
   <label>Color <input type="color" value="#f36944" /></label>
-  <label>File <input type="file" multiple /></label>
   <label>Range <input type="range" /></label>
   <label>Select
     <select>
@@ -431,27 +430,6 @@ Create a variety of form controls with `<input type="">`, `<select>`, and `<text
 </script>
 ```
 
-Add the `wa-size-s`, `wa-size-m`, or `wa-size-l` class to any form control or its parent `<label>` to specify its size.
-```html {.example}
-<div class="wa-stack">
-  <input type="text" placeholder="Small input" class="wa-size-s" />
-  <div class="wa-cluster">
-    <label class="wa-size-s"><input type="checkbox" checked /> Small checkbox</label>
-    <label class="wa-size-s"><input type="radio" name="radio-small" value="1" checked /> Small radio</label>
-  </div>
-  <input type="text" placeholder="Medium input" class="wa-size-m" />
-  <div class="wa-cluster">
-    <label class="wa-size-m"><input type="checkbox" checked /> Medium checkbox</label>
-    <label class="wa-size-m"><input type="radio" name="radio-medium" value="1" checked /> Medium radio</label>
-  </div>
-  <input type="text" placeholder="Large input" class="wa-size-l" />
-  <div class="wa-cluster">
-    <label class="wa-size-l"><input type="checkbox" checked /> Large checkbox</label>
-    <label class="wa-size-l"><input type="radio" name="radio-large" value="1" checked /> Large radio</label>
-  </div>
-</div>
-```
-
 Add the `wa-filled` class to an input to give it a filled background.
 
 ```html {.example}
@@ -475,12 +453,6 @@ Add the `wa-pill` class to an input or select to give it rounded edges.
 </div>
 ```
 
-Add any [button](#buttons) modifier class to `<input type="file">` to change the file selector button's color variant, appearance, size, and shape.
-
-```html {.example}
-<input type="file" class="wa-filled wa-outlined wa-warning wa-size-s wa-pill" />
-```
-
 ### Fieldsets
 
 Group form controls together with `<fieldset>` and `<legend>`.

packages/webawesome/docs/examples/themes/showcase.njk

@@ -3,7 +3,7 @@ unlisted: true
 layout: false
 ---
 <!doctype html>
-<html lang="en" class="wa-cloak" data-fa-kit-code="38c11e3f20">
+<html lang="en" class="wa-cloak" data-fa-kit-code="b10bfbde90">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -304,15 +304,15 @@ layout: false
             <wa-divider></wa-divider>
             <dl class="wa-stack">
               <div class="wa-flank wa-align-items-center">
-                <dt><wa-icon name="user" label="Name"></wa-icon></dt>
+                <dt><wa-icon name="user" label="Name" fixed-width></wa-icon></dt>
                 <dd>Tom Bombadil</dd>
               </div>
               <div class="wa-flank wa-align-items-center">
-                <dt><wa-icon name="calendar-days" label="Date"></wa-icon></dt>
+                <dt><wa-icon name="calendar-days" label="Date" fixed-width></wa-icon></dt>
                 <dd><wa-format-date date="2025-03-15"></wa-format-date></dd>
               </div>
               <div class="wa-flank wa-align-items-center">
-                <dt><wa-icon name="coin-vertical"></wa-icon></dt>
+                <dt><wa-icon name="coin-vertical" fixed-width></wa-icon></dt>
                 <dd>Paid with copper pennies</dd>
               </div>
             </dl>
@@ -344,19 +344,19 @@ layout: false
             <h4 class="wa-heading-s">What You Get</h4>
             <div class="wa-stack">
               <div class="wa-flank">
-                <wa-icon name="user"></wa-icon>
+                <wa-icon name="user" fixed-width></wa-icon>
                 <span class="wa-caption-m">9 users</span>
               </div>
               <div class="wa-flank">
-                <wa-icon name="ring"></wa-icon>
+                <wa-icon name="ring" fixed-width></wa-icon>
                 <span class="wa-caption-m">1 ring</span>
               </div>
               <div class="wa-flank">
-                <wa-icon name="chess-rook"></wa-icon>
+                <wa-icon name="chess-rook" fixed-width></wa-icon>
                 <span class="wa-caption-m">API access to Isengard</span>
               </div>
               <div class="wa-flank">
-                <wa-icon name="feather"></wa-icon>
+                <wa-icon name="feather" fixed-width></wa-icon>
                 <span class="wa-caption-m">Priority eagle support</span>
               </div>
             </div>

packages/webawesome/docs/index.md

@@ -141,11 +141,10 @@ layout: page
       display: flex;
       align-items: center;
       justify-content: center;
-      block-size: 2em;
-      inline-size: 2em;
       background-color: var(--wa-color-neutral-fill-loud);
       color: var(--wa-color-neutral-on-loud);
       border-radius: 0.25rem;
+      aspect-ratio: 1;
       padding: 0.5em;
 
       &.brand-orange {
@@ -274,7 +273,7 @@ layout: page
       <wa-callout variant="brand">
         <div class="wa-stack">
           <div class="wa-cluster icon-heading">
-            <wa-icon name="sparkles" variant="regular"></wa-icon>
+            <wa-icon name="sparkles" variant="regular" fixed-width></wa-icon>
             <h3>Bigger and beta than ever</h3>
           </div>
           <p>This beta is battle-tested and built to last, but if you see something, say something. Please <a href="https://github.com/shoelace-style/webawesome/issues">report bugs</a> or <a href="https://github.com/shoelace-style/webawesome/discussions">ask for help</a>!</p>
@@ -286,10 +285,10 @@ layout: page
         <div class="wa-stack">
           <div class="wa-split">
             <div class="wa-cluster icon-heading">
-              <wa-icon name="pen-ruler" class="brand-orange"></wa-icon>
+              <wa-icon name="pen-ruler" fixed-width class="brand-orange"></wa-icon>
               <h3>Get started</h3>
             </div>
-            <wa-icon name="arrow-right"></wa-icon>
+            <wa-icon name="arrow-right" fixed-width></wa-icon>
           </div>
           <p>Check out our installation guide to start building with Web Awesome.</p>
         </div>
@@ -303,28 +302,28 @@ layout: page
     <div class="grid">
       <div class="wa-stack">
         <div class="wa-cluster icon-heading">
-          <wa-icon name="code" class="brand-orange"></wa-icon>
+          <wa-icon name="code" fixed-width class="brand-orange"></wa-icon>
           <h3>Entirely native</h3>
         </div>
         <p>Built on web standards to last for years to come. No excess tooling. No third-party bloat.</p>
       </div>
       <div class="wa-stack">
         <div class="wa-cluster icon-heading">
-          <wa-icon name="palette" class="brand-orange"></wa-icon>
+          <wa-icon name="palette" fixed-width class="brand-orange"></wa-icon>
           <h3>Fully customizable</h3>
         </div>
         <p>Show off your own style with components that consistently adapt to your theme.</p>
       </div>
       <div class="wa-stack">
         <div class="wa-cluster icon-heading">
-          <wa-icon name="wheelchair-move" class="brand-orange"></wa-icon>
+          <wa-icon name="wheelchair-move" fixed-width class="brand-orange"></wa-icon>
           <h3>Accessibility forward</h3>
         </div>
         <p>Build a website that everyone can use. Designed to be inclusive and usable by everyone.</p>
       </div>
       <div class="wa-stack">
         <div class="wa-cluster icon-heading">
-          <wa-icon name="handshake-simple" class="brand-orange"></wa-icon>
+          <wa-icon name="handshake-simple" fixed-width class="brand-orange"></wa-icon>
           <h3>Proudly open source</h3>
         </div>
         <p>Use Web Awesome Free however you like. Always free, always open source.</p>
@@ -343,10 +342,10 @@ layout: page
         <div class="wa-stack">
           <div class="wa-split">
             <div class="wa-cluster icon-heading">
-              <wa-icon family="brands" name="github"></wa-icon>
+              <wa-icon family="brands" name="github" fixed-width></wa-icon>
               <h3>GitHub</h3>
             </div>
-            <wa-icon name="arrow-up-right"></wa-icon>
+            <wa-icon name="arrow-up-right" fixed-width></wa-icon>
           </div>
           <p>Get involved by opening issues, contributing to discussions, or creating PRs.</p>
         </div>
@@ -355,10 +354,10 @@ layout: page
         <div class="wa-stack">
           <div class="wa-split">
             <div class="wa-cluster icon-heading">
-              <wa-icon family="brands" name="discord"></wa-icon>
+              <wa-icon family="brands" name="discord" fixed-width></wa-icon>
               <h3>Discord</h3>
             </div>
-            <wa-icon name="arrow-up-right"></wa-icon>
+            <wa-icon name="arrow-up-right" fixed-width></wa-icon>
           </div>
           <p>Share your work, ask questions, and explore ideas with other Web Awesome builders.</p>
         </div>
@@ -366,19 +365,19 @@ layout: page
       <wa-button href="mailto:hello@webawesome.com" appearance="filled" class="tile">
         <div class="wa-split">
           <div class="wa-cluster icon-heading">
-            <wa-icon name="envelope-open"></wa-icon>
+            <wa-icon name="envelope-open" fixed-width></wa-icon>
             <h3 class="wa-cluster wa-gap-xs">
               <span>hello@webawesome.com</span>
               <wa-icon name="hand-wave" variant="regular"></wa-icon>
             </h3>
           </div>
-          <wa-icon name="arrow-up-right"></wa-icon>
+          <wa-icon name="arrow-up-right" fixed-width></wa-icon>
         </div>
       </wa-button>
     </div>
   </div>
 
-<wa-divider></wa-divider>
+  <wa-divider></wa-divider>
 
   <div class="wa-stack wa-gap-xl">
     <h2 class="wa-cluster brand-font">
@@ -389,34 +388,34 @@ layout: page
       <wa-button href="https://bsky.app/profile/webawesome.com" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
         <div class="wa-split">
           <div class="wa-cluster icon-heading">
-            <wa-icon family="brands" name="bluesky"></wa-icon>
+            <wa-icon family="brands" name="bluesky" fixed-width></wa-icon>
             <h3>Bluesky</h3>
           </div>
-          <wa-icon name="arrow-up-right"></wa-icon>
+          <wa-icon name="arrow-up-right" fixed-width></wa-icon>
         </div>
       </wa-button>
       <wa-button href="https://x.com/webawesomer" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
         <div class="wa-split">
           <div class="wa-cluster icon-heading">
-            <wa-icon family="brands" name="x-twitter"></wa-icon>
+            <wa-icon family="brands" name="x-twitter" fixed-width></wa-icon>
             <h3>Twitter (X)</h3>
           </div>
-          <wa-icon name="arrow-up-right"></wa-icon>
+          <wa-icon name="arrow-up-right" fixed-width></wa-icon>
         </div>
       </wa-button>
       <wa-button href="https://www.threads.com/@web.awesome" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
         <div class="wa-split">
           <div class="wa-cluster icon-heading">
-            <wa-icon family="brands" name="threads"></wa-icon>
+            <wa-icon family="brands" name="threads" fixed-width></wa-icon>
             <h3>Threads</h3>
           </div>
-          <wa-icon name="arrow-up-right"></wa-icon>
+          <wa-icon name="arrow-up-right" fixed-width></wa-icon>
         </div>
       </wa-button>
     </div>
   </div>
 
-<wa-divider></wa-divider>
+  <wa-divider></wa-divider>
 
   <footer>
     <div class="wa-crown">

packages/webawesome/package.json

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

packages/webawesome/scripts/build.js

@@ -123,7 +123,6 @@ 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();
     }
 
@@ -163,7 +162,6 @@ 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();
     }
 
@@ -466,25 +464,7 @@ export async function build(options = {}) {
 
       function handleWatchEvent(evt) {
         return async filename => {
-          const changedFile = relative(getRootDir(), filename);
-
-          let message = '';
-          if (evt === 'change') {
-            message = chalk.blue(`File modified ${chalk.gray(`(${changedFile})`)}`);
-          } else if (evt === 'unlink') {
-            message = chalk.red(`File deleted ${chalk.gray(`(${changedFile})`)}`);
-          } else if (evt === 'add') {
-            message = chalk.green(`File added ${chalk.gray(`(${changedFile})`)}`);
-          }
-
-          if (message) {
-            if (spinner) {
-              spinner.info(message);
-            } else {
-              console.log(message);
-            }
-          }
-
+          spinner.info(`File modified ${chalk.gray(`(${relative(getRootDir(), filename)})`)}`);
           if (typeof options.beforeWatchEvent === 'function') {
             await options.beforeWatchEvent(evt, filename);
           }

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

@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import type WaButton from '../button/button.js';
 import styles from './button-group.css';
@@ -19,7 +20,7 @@ import styles from './button-group.css';
  */
 @customElement('wa-button-group')
 export default class WaButtonGroup extends WebAwesomeElement {
-  static css = [variantStyles, styles];
+  static css = [sizeStyles, variantStyles, styles];
 
   @query('slot') defaultSlot: HTMLSlotElement;
 
@@ -35,6 +36,9 @@ export default class WaButtonGroup extends WebAwesomeElement {
   /** The button group's orientation. */
   @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
 
+  /** The component's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large'; // unset by default to not override child elements
+
   /** The button group's theme variant. Defaults to `neutral` if not within another element with a variant. */
   @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
 
@@ -81,6 +85,7 @@ export default class WaButtonGroup extends WebAwesomeElement {
 
       if (button) {
         if ((button as WaButton).appearance === 'outlined') this.hasOutlined = true;
+        if (this.size) button.setAttribute('size', this.size);
         button.classList.add('wa-button-group__button');
         button.classList.toggle('wa-button-group__horizontal', this.orientation === 'horizontal');
         button.classList.toggle('wa-button-group__vertical', this.orientation === 'vertical');

packages/webawesome/src/components/button/button.css

@@ -1,18 +1,6 @@
 @layer wa-component {
   :host {
     display: inline-block;
-
-    /* Workaround because Chrome doesn't like :host(:has()) below
-     * https://issues.chromium.org/issues/40062355 
-     * Firefox doesn't like this nested rule, so both are needed */
-    &:has(wa-badge) {
-      position: relative;
-    }
-  }
-
-  /* Apply relative positioning only when needed to position wa-badge
-   * This avoids creating a new stacking context for every button */
-  :host(:has(wa-badge)) {
     position: relative;
   }
 }
@@ -196,10 +184,6 @@
 }
 
 .label {
-  display: inline-block;
-}
-
-.is-icon-button .label {
   display: flex;
 }
 

packages/webawesome/src/components/callout/callout.ts

@@ -25,8 +25,13 @@ export default class WaCallout extends WebAwesomeElement {
   @property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'brand';
 
   /** The callout's visual appearance. */
-  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' | 'outlined filled' =
-    'outlined filled';
+  @property({ reflect: true }) appearance:
+    | 'accent'
+    | 'filled'
+    | 'outlined'
+    | 'plain'
+    | 'outlined filled'
+    | 'outlined accent' = 'outlined filled';
 
   /** The callout's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';

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

@@ -77,9 +77,7 @@
 }
 
 .header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  display: block;
   border-block-end-style: inherit;
   border-block-end-color: var(--wa-color-surface-border);
   border-block-end-width: var(--wa-panel-border-width);
@@ -92,9 +90,7 @@
 }
 
 .footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  display: block;
   border-block-start-style: inherit;
   border-block-start-color: var(--wa-color-surface-border);
   border-block-start-width: var(--wa-panel-border-width);
@@ -106,27 +102,3 @@
 :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,9 +15,6 @@ 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.
@@ -45,10 +42,6 @@ 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;
@@ -57,27 +50,11 @@ 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>
-      <header part="header" class="header">
-        <slot name="header"></slot>
-        <slot name="header-actions"></slot>
-      </header>
+      <slot name="header" part="header" class="header"></slot>
       <slot part="body" class="body"></slot>
-      <footer part="footer" class="footer">
-        <slot name="footer"></slot>
-        <slot name="footer-actions"></slot>
-      </footer>
+      <slot name="footer" part="footer" class="footer"></slot>
     `;
   }
 }

packages/webawesome/src/components/checkbox/checkbox.css

@@ -46,10 +46,6 @@
   cursor: pointer;
 }
 
-[part~='label'] {
-  display: inline;
-}
-
 /* Checked */
 [part~='control']:has(:checked, :indeterminate) {
   color: var(--checked-icon-color);

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

@@ -490,7 +490,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
     const target = event.target as HTMLInputElement;
     const oldValue = this.value;
 
-    // Prevent the `<wa-input>` element's `change` event from bubbling up
+    // Prevent the `<wa-input>` element's `wa-change` event from bubbling up
     event.stopPropagation();
 
     if (this.input.value) {
@@ -1327,10 +1327,6 @@ 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/copy-button/copy-button.ts

@@ -191,13 +191,13 @@ export default class WaCopyButton extends WebAwesomeElement {
         <!-- Render a visually hidden label to appease the accessibility checking gods -->
         <span class="wa-visually-hidden">${this.currentLabel}</span>
         <slot part="copy-icon" name="copy-icon">
-          <wa-icon library="system" name="copy" variant="regular"></wa-icon>
+          <wa-icon library="system" name="copy" variant="regular" fixed-width></wa-icon>
         </slot>
         <slot part="success-icon" name="success-icon" variant="solid" hidden>
-          <wa-icon library="system" name="check"></wa-icon>
+          <wa-icon library="system" name="check" fixed-width></wa-icon>
         </slot>
         <slot part="error-icon" name="error-icon" variant="solid" hidden>
-          <wa-icon library="system" name="xmark"></wa-icon>
+          <wa-icon library="system" name="xmark" fixed-width></wa-icon>
         </slot>
         <wa-tooltip
           class=${classMap({

packages/webawesome/src/components/details/details.css

@@ -102,8 +102,8 @@ details {
   }
 }
 
-/* 'Start' icon placement */
-:host([icon-placement='start']) summary {
+/* 'Start' icon position */
+:host([icon-position='start']) summary {
   flex-direction: row-reverse;
   justify-content: start;
 }

packages/webawesome/src/components/details/details.ts

@@ -7,10 +7,9 @@ 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 { waitForEvent } from '../../internal/event.js';
+import { getTargetElement, 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';
@@ -78,8 +77,8 @@ export default class WaDetails extends WebAwesomeElement {
   /** The element's visual appearance. */
   @property({ reflect: true }) appearance: 'filled' | 'outlined' | 'plain' = 'outlined';
 
-  /** The location of the expand/collapse icon. */
-  @property({ attribute: 'icon-placement', reflect: true }) iconPlacement: 'start' | 'end' = 'end';
+  /** The position of the expand/collapse icon. */
+  @property({ attribute: 'icon-position', reflect: true }) iconPosition: 'start' | 'end' = 'end';
 
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -113,27 +112,9 @@ export default class WaDetails extends WebAwesomeElement {
   }
 
   private handleSummaryClick(event: MouseEvent) {
-    const eventPath = event.composedPath() as HTMLElement[];
+    let targetElement = getTargetElement(event);
 
-    // 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) {
+    if (targetElement?.closest('a, button, wa-button, input, wa-input, textarea, wa-textarea, select, wa-select')) {
       // Let interactive elements handle their own clicks, fixes #309
       return;
     }
@@ -287,10 +268,20 @@ export default class WaDetails extends WebAwesomeElement {
 
           <span part="icon">
             <slot name="expand-icon">
-              <wa-icon library="system" variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
+              <wa-icon
+                library="system"
+                variant="solid"
+                name=${isRtl ? 'chevron-left' : 'chevron-right'}
+                fixed-width
+              ></wa-icon>
             </slot>
             <slot name="collapse-icon">
-              <wa-icon library="system" variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
+              <wa-icon
+                library="system"
+                variant="solid"
+                name=${isRtl ? 'chevron-left' : 'chevron-right'}
+                fixed-width
+              ></wa-icon>
             </slot>
           </span>
         </summary>

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(8203)} </slot>
+                  <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </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(8203)} </slot>
+                  <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
                 </h2>
                 <div part="header-actions" class="header-actions">
                   <slot name="header-actions"></slot>

packages/webawesome/src/components/dropdown/dropdown.css

@@ -17,9 +17,6 @@
   color: var(--wa-color-text-normal);
   text-align: start;
   user-select: none;
-  overflow: auto;
-  max-width: var(--auto-size-available-width) !important;
-  max-height: var(--auto-size-available-height) !important;
 
   &.show {
     animation: show var(--show-duration) ease;

packages/webawesome/src/components/dropdown/dropdown.ts

@@ -8,7 +8,6 @@ import { WaAfterShowEvent } from '../../events/after-show.js';
 import { WaHideEvent } from '../../events/hide.js';
 import { WaSelectEvent } from '../../events/select.js';
 import { WaShowEvent } from '../../events/show.js';
-import { activeElements } from '../../internal/active-elements.js';
 import { animateWithClass } from '../../internal/animate.js';
 import { uniqueId } from '../../internal/math.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
@@ -124,30 +123,19 @@ export default class WaDropdown extends WebAwesomeElement {
     }
   }
 
-  /** Gets all dropdown items slotted in the menu. */
+  /** Gets all <wa-dropdown-item> elements slotted in the menu that aren't disabled. */
   private getItems(includeDisabled = false): WaDropdownItem[] {
-    const items = this.defaultSlot
-      .assignedElements({ flatten: true })
-      .filter(el => el.localName === 'wa-dropdown-item') as WaDropdownItem[];
-
+    const items = [...this.children].filter(
+      el => el.localName === 'wa-dropdown-item' && !el.hasAttribute('slot'),
+    ) as WaDropdownItem[];
     return includeDisabled ? items : items.filter(item => !item.disabled);
   }
 
   /** Gets all dropdown items in a specific submenu. */
   private getSubmenuItems(parentItem: WaDropdownItem, includeDisabled = false): WaDropdownItem[] {
-    // Find the submenu slot within the parent item
-    const submenuSlot =
-      parentItem.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="submenu"]') ||
-      parentItem.querySelector<HTMLSlotElement>('slot[name="submenu"]');
-    if (!submenuSlot) {
-      return [];
-    }
-
-    // Get the items from the submenu slot
-    const items = submenuSlot
-      .assignedElements({ flatten: true })
-      .filter(el => el.localName === 'wa-dropdown-item') as WaDropdownItem[];
-
+    const items = [...parentItem.children].filter(
+      el => el.localName === 'wa-dropdown-item' && el.getAttribute('slot') === 'submenu',
+    ) as WaDropdownItem[];
     return includeDisabled ? items : items.filter(item => !item.disabled);
   }
 
@@ -289,7 +277,7 @@ export default class WaDropdown extends WebAwesomeElement {
       return;
     }
 
-    const activeElement = [...activeElements()].find(el => el.localName === 'wa-dropdown-item');
+    const activeElement = document.activeElement as HTMLElement;
     const isFocusedOnItem = activeElement?.localName === 'wa-dropdown-item';
     const currentSubmenuItem = this.getCurrentSubmenuItem();
     const isInSubmenu = !!currentSubmenuItem;
@@ -718,9 +706,7 @@ export default class WaDropdown extends WebAwesomeElement {
         flip
         flip-fallback-strategy="best-fit"
         shift
-        shift-padding="10"
-        auto-size="vertical"
-        auto-size-padding="10"
+        shift-padding="8"
       >
         <slot
           name="trigger"

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

@@ -66,22 +66,23 @@ export default class WaFormatDate extends WebAwesomeElement {
       return undefined;
     }
 
-    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>`;
+    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>
+    `;
   }
 }
 

packages/webawesome/src/components/icon/icon.css

@@ -4,38 +4,30 @@
   --secondary-color: currentColor;
   --secondary-opacity: 0.4;
 
-  box-sizing: content-box;
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: -0.125em;
-}
-
-/* Standard */
-:host(:not([auto-width])) {
-  width: 1.25em;
-  height: 1em;
-}
-
-/* Auto-width */
-:host([auto-width]) {
+  box-sizing: content-box !important;
   width: auto;
   height: 1em;
 }
 
 svg {
-  height: 1em;
+  display: inline-block;
+  width: auto;
+  height: inherit;
   fill: currentColor;
-  overflow: visible;
 
-  /* Duotone colors with path-specific opacity fallback */
-  path[data-duotone-primary] {
+  .fa-primary {
     color: var(--primary-color);
-    opacity: var(--path-opacity, var(--primary-opacity));
+    opacity: var(--primary-opacity);
   }
 
-  path[data-duotone-secondary] {
+  .fa-secondary {
     color: var(--secondary-color);
-    opacity: var(--path-opacity, var(--secondary-opacity));
+    opacity: var(--secondary-opacity);
   }
 }
+
+:host([fixed-width]) {
+  width: 1em;
+  justify-content: center;
+}

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

@@ -133,6 +133,17 @@ describe('<wa-icon>', () => {
       });
 
       describe('negative cases', () => {
+        // using new library so we can test for malformed icons when registered
+        it("svg not rendered with an icon that doesn't exist in the library", async () => {
+          const el = await fixture<WaIcon>(html` <wa-icon library="test-library" name="does-not-exist"></wa-icon> `);
+
+          // Still renders svgs for empty icons.
+          expect(el.shadowRoot?.querySelector('svg')).to.be.instanceof(SVGElement);
+
+          expect(el.getBoundingClientRect().height).to.equal(16);
+          expect(el.getBoundingClientRect().width).to.equal(16);
+        });
+
         it('emits wa-error when the file cant be retrieved', async () => {
           const el = await fixture<WaIcon>(html` <wa-icon library="test-library"></wa-icon> `);
           const listener = oneEvent(el, 'wa-error') as Promise<WaErrorEvent>;

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({ reflect: true }) name?: string;
+  @property() name?: string;
 
   /**
    * The family of icons to choose from. For Font Awesome Free, valid options include `classic` and `brands`. For
@@ -54,20 +54,17 @@ 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({ reflect: true }) family: string;
+  @property() 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({ reflect: true }) variant: string;
+  @property() 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;
-
-  /** Swaps the opacity of duotone icons. */
-  @property({ attribute: 'swap-opacity', type: Boolean, reflect: true }) swapOpacity = false;
+  /** Draws the icon in a fixed-width both. */
+  @property({ attribute: 'fixed-width', type: Boolean, reflect: true }) fixedWidth: false;
 
   /**
    * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
@@ -82,7 +79,7 @@ export default class WaIcon extends WebAwesomeElement {
   @property() label = '';
 
   /** The name of a registered custom icon library. */
-  @property({ reflect: true }) library = 'default';
+  @property() library = 'default';
 
   connectedCallback() {
     super.connectedCallback();
@@ -106,7 +103,7 @@ export default class WaIcon extends WebAwesomeElement {
 
     if (this.name && library) {
       return {
-        url: library.resolver(this.name, family, this.variant, this.autoWidth),
+        url: library.resolver(this.name, family, this.variant),
         fromLibrary: true,
       };
     }
@@ -118,7 +115,7 @@ export default class WaIcon extends WebAwesomeElement {
   }
 
   /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
-  private resolveIcon = async (url: string, library?: IconLibrary): Promise<SVGResult> => {
+  private async resolveIcon(url: string, library?: IconLibrary): Promise<SVGResult> {
     let fileData: Response;
 
     if (library?.spriteSheet) {
@@ -136,10 +133,10 @@ export default class WaIcon extends WebAwesomeElement {
       // to be passed to the library's mutator function.
       await this.updateComplete;
 
-      const svg = this.shadowRoot!.querySelector<SVGElement>("[part='svg']")!;
+      const svg = this.shadowRoot!.querySelector("[part='svg']")!;
 
       if (typeof library.mutator === 'function') {
-        library.mutator(svg, this);
+        library.mutator(svg as SVGElement);
       }
 
       return this.svg;
@@ -170,7 +167,7 @@ export default class WaIcon extends WebAwesomeElement {
     } catch {
       return CACHEABLE_ERROR;
     }
-  };
+  }
 
   @watch('label')
   handleLabelChange() {
@@ -187,7 +184,7 @@ export default class WaIcon extends WebAwesomeElement {
     }
   }
 
-  @watch(['family', 'name', 'library', 'variant', 'src', 'autoWidth', 'swapOpacity'])
+  @watch(['family', 'name', 'library', 'variant', 'src'])
   async setIcon() {
     const { url, fromLibrary } = this.getIconSource();
     const library = fromLibrary ? getIconLibrary(this.library) : undefined;
@@ -227,7 +224,7 @@ export default class WaIcon extends WebAwesomeElement {
         break;
       default:
         this.svg = svg.cloneNode(true) as SVGElement;
-        library?.mutator?.(this.svg, this);
+        library?.mutator?.(this.svg);
         this.dispatchEvent(new WaLoadEvent());
     }
   }
@@ -240,7 +237,7 @@ export default class WaIcon extends WebAwesomeElement {
 
     const svg = this.shadowRoot?.querySelector('svg');
     if (svg) {
-      library?.mutator?.(svg, this);
+      library?.mutator?.(svg);
     }
   }
 

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

@@ -1,55 +1,11 @@
 import { getKitCode } from '../../utilities/base-path.js';
 import type { IconLibrary } from './library.js';
 
-const FA_VERSION = '7.0.1';
-
 function getIconUrl(name: string, family: string, variant: string) {
   const kitCode = getKitCode();
   const isPro = kitCode.length > 0;
   let folder = 'solid';
 
-  // Notdog (Pro+)
-  if (family === 'notdog') {
-    if (variant === 'solid') folder = 'solid';
-    if (variant === 'duo-solid') folder = 'duo-solid';
-    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/notdog-${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
-  }
-
-  // Chisel (Pro+)
-  if (family === 'chisel') {
-    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/chisel-regular/${name}.svg?token=${encodeURIComponent(kitCode)}`;
-  }
-
-  // Etch (Pro+)
-  if (family === 'etch') {
-    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/etch-solid/${name}.svg?token=${encodeURIComponent(kitCode)}`;
-  }
-
-  // Jelly (Pro+)
-  if (family === 'jelly') {
-    if (variant === 'regular') folder = 'regular';
-    if (variant === 'duo-regular') folder = 'duo-regular';
-    if (variant === 'fill-regular') folder = 'fill-regular';
-    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/jelly-${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
-  }
-
-  // Slab (Pro+)
-  if (family === 'slab') {
-    if (variant === 'solid' || variant === 'regular') folder = 'regular';
-    if (variant === 'press-regular') folder = 'press-regular';
-    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/slab-${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
-  }
-
-  // Thumbprint (Pro+)
-  if (family === 'thumbprint') {
-    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/thumbprint-light/${name}.svg?token=${encodeURIComponent(kitCode)}`;
-  }
-
-  // Whiteboard (Pro+)
-  if (family === 'whiteboard') {
-    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/whiteboard-semibold/${name}.svg?token=${encodeURIComponent(kitCode)}`;
-  }
-
   // Classic
   if (family === 'classic') {
     if (variant === 'thin') folder = 'thin';
@@ -89,8 +45,8 @@ function getIconUrl(name: string, family: string, variant: string) {
 
   // Use the default CDN
   return isPro
-    ? `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`
-    : `https://ka-f.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg`;
+    ? `https://ka-p.fontawesome.com/releases/v6.7.2/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`
+    : `https://ka-f.fontawesome.com/releases/v6.7.2/svgs/${folder}/${name}.svg`;
 }
 
 const library: IconLibrary = {
@@ -98,46 +54,6 @@ const library: IconLibrary = {
   resolver: (name: string, family = 'classic', variant = 'solid') => {
     return getIconUrl(name, family, variant);
   },
-  mutator: (svg, hostEl) => {
-    // Duotone families
-    if (hostEl?.family && !svg.hasAttribute('data-duotone-initialized')) {
-      const { family, variant } = hostEl;
-
-      if (
-        // Duotone
-        family === 'duotone' ||
-        // Sharp duotone
-        family === 'sharp-duotone' ||
-        // Notdog duo-solid
-        (family === 'notdog' && variant === 'duo-solid') ||
-        // Jelly duo-regular
-        (family === 'jelly' && variant === 'duo-regular') ||
-        // Thumbprint
-        family === 'thumbprint'
-      ) {
-        // Identify the primary and secondary paths. The secondary path is the one that has an opacity attribute.
-        const paths = [...svg.querySelectorAll<SVGPathElement>('path')];
-        const primaryPath = paths.find(p => !p.hasAttribute('opacity'));
-        const secondaryPath = paths.find(p => p.hasAttribute('opacity'));
-
-        if (!primaryPath || !secondaryPath) return;
-
-        primaryPath.setAttribute('data-duotone-primary', '');
-        secondaryPath.setAttribute('data-duotone-secondary', '');
-
-        // Swap the primary and secondary opacity using CSS custom properties
-        if (hostEl.swapOpacity && primaryPath && secondaryPath) {
-          const originalOpacity = secondaryPath.getAttribute('opacity') || '0.4';
-
-          // Set path-specific opacity custom properties
-          primaryPath.style.setProperty('--path-opacity', originalOpacity);
-          secondaryPath.style.setProperty('--path-opacity', '1');
-        }
-
-        svg.setAttribute('data-duotone-initialized', '');
-      }
-    }
-  },
 };
 
 export default library;

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

@@ -9,31 +9,31 @@ export const icons: { [key: string]: { [key: string]: string } } = {
   // Solid variant
   //
   solid: {
-    check: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>`,
-    'chevron-down': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>`,
-    'chevron-left': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`,
-    'chevron-right': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
-    circle: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M0 256a256 256 0 1 1 512 0 256 256 0 1 1 -512 0z"/></svg>`,
-    eyedropper: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M341.6 29.2l-101.6 101.6-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4 101.6-101.6c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6l0 42.4-26.6 39.9c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4l39.9-26.6 42.4 0c21.2 0 41.6-8.4 56.6-23.4l109.4-109.4-45.3-45.3-109.4 109.4c-3 3-7.1 4.7-11.3 4.7l-36.1 0 0-36.1c0-4.2 1.7-8.3 4.7-11.3l109.4-109.4-45.3-45.3-109.4 109.4z"/></svg>`,
-    'grip-vertical': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M128 40c0-22.1-17.9-40-40-40L40 0C17.9 0 0 17.9 0 40L0 88c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48zM0 424l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM320 40c0-22.1-17.9-40-40-40L232 0c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48zM192 232l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM320 424c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48z"/></svg>`,
-    indeterminate: `<svg part="indeterminate-icon" class="icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"/></g></g></g></svg>`,
-    minus: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32z"/></svg>`,
-    pause: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M48 32C21.5 32 0 53.5 0 80L0 432c0 26.5 21.5 48 48 48l64 0c26.5 0 48-21.5 48-48l0-352c0-26.5-21.5-48-48-48L48 32zm224 0c-26.5 0-48 21.5-48 48l0 352c0 26.5 21.5 48 48 48l64 0c26.5 0 48-21.5 48-48l0-352c0-26.5-21.5-48-48-48l-64 0z"/></svg>`,
-    play: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M91.2 36.9c-12.4-6.8-27.4-6.5-39.6 .7S32 57.9 32 72l0 368c0 14.1 7.5 27.2 19.6 34.4s27.2 7.5 39.6 .7l336-184c12.8-7 20.8-20.5 20.8-35.1s-8-28.1-20.8-35.1l-336-184z"/></svg>`,
-    star: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M309.5-18.9c-4.1-8-12.4-13.1-21.4-13.1s-17.3 5.1-21.4 13.1L193.1 125.3 33.2 150.7c-8.9 1.4-16.3 7.7-19.1 16.3s-.5 18 5.8 24.4l114.4 114.5-25.2 159.9c-1.4 8.9 2.3 17.9 9.6 23.2s16.9 6.1 25 2L288.1 417.6 432.4 491c8 4.1 17.7 3.3 25-2s11-14.2 9.6-23.2L441.7 305.9 556.1 191.4c6.4-6.4 8.6-15.8 5.8-24.4s-10.1-14.9-19.1-16.3L383 125.3 309.5-18.9z"/></svg>`,
-    user: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M224 248a120 120 0 1 0 0-240 120 120 0 1 0 0 240zm-29.7 56C95.8 304 16 383.8 16 482.3 16 498.7 29.3 512 45.7 512l356.6 0c16.4 0 29.7-13.3 29.7-29.7 0-98.5-79.8-178.3-178.3-178.3l-59.4 0z"/></svg>`,
-    xmark: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"/></svg>`,
+    check: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`,
+    'chevron-down': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>`,
+    'chevron-left': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`,
+    'chevron-right': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
+    circle: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>`,
+    eyedropper: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>`,
+    'grip-vertical': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>`,
+    indeterminate: `<svg part="indeterminate-icon" class="icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>`,
+    minus: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>`,
+    pause: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>`,
+    play: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>`,
+    star: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>`,
+    user: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`,
+    xmark: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>`,
   },
   //
   // Regular variant
   //
   regular: {
-    'circle-question': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M464 256a208 208 0 1 0 -416 0 208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0 256 256 0 1 1 -512 0zm256-80c-17.7 0-32 14.3-32 32 0 13.3-10.7 24-24 24s-24-10.7-24-24c0-44.2 35.8-80 80-80s80 35.8 80 80c0 47.2-36 67.2-56 74.5l0 3.8c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-8.1c0-20.5 14.8-35.2 30.1-40.2 6.4-2.1 13.2-5.5 18.2-10.3 4.3-4.2 7.7-10 7.7-19.6 0-17.7-14.3-32-32-32zM224 368a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>`,
-    'circle-xmark': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM167 167c-9.4 9.4-9.4 24.6 0 33.9l55 55-55 55c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l55-55 55 55c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-55-55 55-55c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-55 55-55-55c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>`,
-    copy: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l133.5 0c4.2 0 8.3 1.7 11.3 4.7l58.5 58.5c3 3 4.7 7.1 4.7 11.3L400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-197.5c0-17-6.7-33.3-18.7-45.3L370.7 18.7C358.7 6.7 342.5 0 325.5 0L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-16-48 0 0 16c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l16 0 0-48-16 0z"/></svg>`,
-    eye: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M288 80C222.8 80 169.2 109.6 128.1 147.7 89.6 183.5 63 226 49.4 256 63 286 89.6 328.5 128.1 364.3 169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256 513 226 486.4 183.5 447.9 147.7 406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1 3.3 7.9 3.3 16.7 0 24.6-14.9 35.7-46.2 87.7-93 131.1-47.1 43.7-111.8 80.6-192.6 80.6S142.5 443.2 95.4 399.4c-46.8-43.5-78.1-95.4-93-131.1-3.3-7.9-3.3-16.7 0-24.6 14.9-35.7 46.2-87.7 93-131.1zM288 336c44.2 0 80-35.8 80-80 0-29.6-16.1-55.5-40-69.3-1.4 59.7-49.6 107.9-109.3 109.3 13.8 23.9 39.7 40 69.3 40zm-79.6-88.4c2.5 .3 5 .4 7.6 .4 35.3 0 64-28.7 64-64 0-2.6-.2-5.1-.4-7.6-37.4 3.9-67.2 33.7-71.1 71.1zm45.6-115c10.8-3 22.2-4.5 33.9-4.5 8.8 0 17.5 .9 25.8 2.6 .3 .1 .5 .1 .8 .2 57.9 12.2 101.4 63.7 101.4 125.2 0 70.7-57.3 128-128 128-61.6 0-113-43.5-125.2-101.4-1.8-8.6-2.8-17.5-2.8-26.6 0-11 1.4-21.8 4-32 .2-.7 .3-1.3 .5-1.9 11.9-43.4 46.1-77.6 89.5-89.5z"/></svg>`,
-    'eye-slash': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M41-24.9c-9.4-9.4-24.6-9.4-33.9 0S-2.3-.3 7 9.1l528 528c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-96.4-96.4c2.7-2.4 5.4-4.8 8-7.2 46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1-47.1-43.7-111.8-80.6-192.6-80.6-56.8 0-105.6 18.2-146 44.2L41-24.9zM176.9 111.1c32.1-18.9 69.2-31.1 111.1-31.1 65.2 0 118.8 29.6 159.9 67.7 38.5 35.7 65.1 78.3 78.6 108.3-13.6 30-40.2 72.5-78.6 108.3-3.1 2.8-6.2 5.6-9.4 8.4L393.8 328c14-20.5 22.2-45.3 22.2-72 0-70.7-57.3-128-128-128-26.7 0-51.5 8.2-72 22.2l-39.1-39.1zm182 182l-108-108c11.1-5.8 23.7-9.1 37.1-9.1 44.2 0 80 35.8 80 80 0 13.4-3.3 26-9.1 37.1zM103.4 173.2l-34-34c-32.6 36.8-55 75.8-66.9 104.5-3.3 7.9-3.3 16.7 0 24.6 14.9 35.7 46.2 87.7 93 131.1 47.1 43.7 111.8 80.6 192.6 80.6 37.3 0 71.2-7.9 101.5-20.6L352.2 422c-20 6.4-41.4 10-64.2 10-65.2 0-118.8-29.6-159.9-67.7-38.5-35.7-65.1-78.3-78.6-108.3 10.4-23.1 28.6-53.6 54-82.8z"/></svg>`,
-    star: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M288.1-32c9 0 17.3 5.1 21.4 13.1L383 125.3 542.9 150.7c8.9 1.4 16.3 7.7 19.1 16.3s.5 18-5.8 24.4L441.7 305.9 467 465.8c1.4 8.9-2.3 17.9-9.6 23.2s-17 6.1-25 2L288.1 417.6 143.8 491c-8 4.1-17.7 3.3-25-2s-11-14.2-9.6-23.2L134.4 305.9 20 191.4c-6.4-6.4-8.6-15.8-5.8-24.4s10.1-14.9 19.1-16.3l159.9-25.4 73.6-144.2c4.1-8 12.4-13.1 21.4-13.1zm0 76.8L230.3 158c-3.5 6.8-10 11.6-17.6 12.8l-125.5 20 89.8 89.9c5.4 5.4 7.9 13.1 6.7 20.7l-19.8 125.5 113.3-57.6c6.8-3.5 14.9-3.5 21.8 0l113.3 57.6-19.8-125.5c-1.2-7.6 1.3-15.3 6.7-20.7l89.8-89.9-125.5-20c-7.6-1.2-14.1-6-17.6-12.8L288.1 44.8z"/></svg>`,
+    'circle-question': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>`,
+    'circle-xmark': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>`,
+    copy: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg>`,
+    eye: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>`,
+    'eye-slash': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"/></svg>`,
+    star: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/></svg>',
   },
 };
 

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

@@ -2,9 +2,8 @@ import type WaIcon from '../icon/icon.js';
 import defaultLibrary from './library.default.js';
 import systemLibrary from './library.system.js';
 
-export type IconLibraryHostElement = WaIcon;
-export type IconLibraryResolver = (name: string, family: string, variant: string, autoWidth: boolean) => string;
-export type IconLibraryMutator = (svg: SVGElement, hostElement?: IconLibraryHostElement) => void;
+export type IconLibraryResolver = (name: string, family: string, variant: string) => string;
+export type IconLibraryMutator = (svg: SVGElement) => void;
 export interface IconLibrary {
   name: string;
   resolver: IconLibraryResolver;

packages/webawesome/src/components/input/input.css

@@ -174,7 +174,6 @@ textarea {
   padding: 0;
   transition: var(--wa-transition-normal) color;
   cursor: pointer;
-  margin-inline-start: var(--wa-form-control-padding-inline);
 
   @media (hover: hover) {
     &:hover {

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

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

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

@@ -1,9 +0,0 @@
-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

@@ -1,200 +0,0 @@
-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/page/page.css

@@ -0,0 +1,250 @@
+:host {
+  display: block;
+  background-color: var(--wa-color-surface-default);
+  box-sizing: border-box;
+  height: 100%;
+  --menu-width: auto;
+  --main-width: 1fr;
+  --aside-width: auto;
+  --banner-height: 0px;
+  --header-height: 0px;
+  --subheader-height: 0px;
+  --scroll-margin-top: calc(var(--header-height, 0px) + var(--subheader-height, 0px) + 0.5em);
+}
+
+slot[name]:not([name='skip-to-content'], [name='navigation-toggle'])::slotted(*) {
+  display: flex;
+  background-color: var(--wa-color-surface-default);
+}
+
+::slotted([slot='banner']) {
+  align-items: center;
+  justify-content: center;
+  gap: var(--wa-space-m);
+  padding: var(--wa-space-xs) var(--wa-space-m);
+}
+
+::slotted([slot='header']) {
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--wa-space-m);
+  padding: var(--wa-space-m);
+  flex: auto;
+}
+
+::slotted([slot='subheader']) {
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--wa-space-m);
+  padding: var(--wa-space-xs) var(--wa-space-m);
+}
+
+::slotted([slot*='navigation']),
+::slotted([slot='menu']),
+::slotted([slot='aside']) {
+  flex-direction: column;
+  gap: var(--wa-space-m);
+  padding: var(--wa-space-m);
+}
+
+::slotted([slot='main-header']) {
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--wa-space-m);
+  padding: var(--wa-space-m) var(--wa-space-3xl);
+}
+
+slot:not([name]) {
+  /* See #331 */
+  &::slotted(main),
+  &::slotted(section) {
+    padding: var(--wa-space-3xl);
+  }
+}
+
+::slotted([slot='main-footer']),
+::slotted([slot='footer']) {
+  align-items: start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--wa-space-m);
+  padding: var(--wa-space-3xl);
+}
+
+:host([disable-sticky~='banner']) :is([part~='header'], [part~='subheader']) {
+  --banner-height: 0px !important;
+}
+:host([disable-sticky~='header']) [part~='subheader'] {
+  --header-height: 0px !important;
+}
+
+/* Nothing else depends on subheader-height. */
+:host([disable-sticky~='subheader']) {
+}
+:host([disable-sticky~='aside']) [part~='aside'],
+:host([disable-sticky~='menu']) [part~='menu'] {
+  height: unset;
+  max-height: unset;
+}
+
+:host([disable-sticky~='banner']) [part~='banner'],
+:host([disable-sticky~='header']) [part~='header'],
+:host([disable-sticky~='subheader']) [part~='subheader'],
+:host([disable-sticky~='aside']) [part~='aside'],
+:host([disable-sticky~='menu']) [part~='menu'] {
+  position: static;
+  overflow: unset;
+  z-index: unset;
+}
+
+:host([disable-sticky~='aside']) [part~='aside'],
+:host([disable-sticky~='menu']) [part~='menu'] {
+  height: auto;
+  max-height: auto;
+}
+
+[part~='base'] {
+  min-height: 100%;
+  display: grid;
+  grid-template-rows: repeat(3, minmax(0, auto)) minmax(0, 1fr) minmax(0, auto);
+  grid-template-columns: 100%;
+  width: 100%;
+  grid-template-areas:
+    'banner'
+    'header'
+    'subheader'
+    'body'
+    'footer';
+}
+
+/* Grid areas */
+[part~='banner'] {
+  grid-area: banner;
+}
+[part~='header'] {
+  grid-area: header;
+}
+[part~='subheader'] {
+  grid-area: subheader;
+}
+[part~='menu'] {
+  grid-area: menu;
+}
+[part~='body'] {
+  grid-area: body;
+}
+[part~='main'] {
+  grid-area: main;
+}
+[part~='aside'] {
+  grid-area: aside;
+}
+[part~='footer'] {
+  grid-area: footer;
+}
+
+/* Z-indexes */
+[part~='banner'],
+[part~='header'],
+[part~='subheader'] {
+  position: sticky;
+  z-index: 5;
+}
+[part~='banner'] {
+  top: 0px;
+}
+[part~='header'] {
+  top: var(--banner-height);
+
+  /** Make the header flex so that you don't unexpectedly have the default toggle button appearing above a slotted div because block elements are fun. */
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+[part~='subheader'] {
+  top: calc(var(--header-height) + var(--banner-height));
+}
+[part~='body'] {
+  display: grid;
+  height: 100%;
+  align-items: flex-start;
+  grid-template-columns: minmax(0, var(--menu-width)) minmax(0, var(--main-width)) minmax(0, var(--aside-width));
+  grid-template-rows: minmax(0, 1fr);
+  grid-template-areas: 'menu main aside';
+}
+[part~='main'] {
+  display: grid;
+  min-height: 100%;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
+  grid-template-areas:
+    'main-header'
+    'main-content'
+    'main-footer';
+}
+[part~='main-header'] {
+  grid-area: main-header;
+}
+[part~='main-content'] {
+  grid-area: main-content;
+}
+[part~='main-footer'] {
+  grid-area: main-footer;
+}
+
+.skip-to-content {
+  position: absolute;
+  top: var(--wa-space-m);
+  left: var(--wa-space-m);
+  z-index: 6;
+  border-radius: var(--wa-corners-1x);
+  background-color: var(--wa-color-surface-default);
+  color: var(--wa-color-text-link);
+  text-decoration: none;
+  padding: var(--wa-space-s) var(--wa-space-m);
+  box-shadow: var(--wa-shadow-l);
+  outline: var(--wa-focus-ring);
+  outline-offset: var(--wa-focus-ring-offset);
+}
+
+[part~='menu'],
+[part~='aside'] {
+  position: sticky;
+  top: calc(var(--banner-height) + var(--header-height) + var(--subheader-height));
+  z-index: 4;
+  height: calc(100dvh - var(--header-height) - var(--banner-height) - var(--subheader-height));
+  max-height: calc(100dvh - var(--header-height) - var(--banner-height) - var(--subheader-height));
+  overflow: auto;
+}
+
+[part~='navigation'] {
+  height: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
+}
+
+[part~='drawer']::part(dialog) {
+  background-color: var(--wa-color-surface-default);
+}
+
+/* Set these on the slot because we don't always control the navigation-toggle since that may be slotted. */
+slot[name~='navigation-toggle'],
+:host([disable-navigation-toggle]) slot[name~='navigation-toggle'] {
+  display: none;
+}
+
+/* Sometimes the media query in the viewport is stubborn in iframes. This is an extra check to make it behave properly. */
+:host(:not([disable-navigation-toggle])[view='mobile']) slot[name~='navigation-toggle'] {
+  display: contents;
+}
+
+[part~='navigation-toggle'] {
+  /* Use only a margin-inline-start because the slotted header is expected to have default padding
+       so it looks really awkward if this sets a margin-inline-end and the slotted header has a padding-inline-start. */
+  margin-inline-start: var(--wa-space-m);
+}

packages/webawesome/src/components/page/page.mobile.styles.ts

@@ -0,0 +1,11 @@
+export default (breakpoint: string = '768px') => `
+  @media screen and (width < ${breakpoint}) {
+    [part~='navigation'] {
+      display: none;
+    }
+
+    :host(:not([disable-navigation-toggle])) slot[name~='navigation-toggle'] {
+      display: contents;
+    }
+  }
+`;

packages/webawesome/src/components/page/page.test.ts

@@ -0,0 +1,15 @@
+import { expect } from '@open-wc/testing';
+import { html } from 'lit';
+import { fixtures } from '../../internal/test/fixture.js';
+
+describe('<wa-page>', () => {
+  for (const fixture of fixtures) {
+    describe(`with "${fixture.type}" rendering`, () => {
+      it('should render a component', async () => {
+        const el = await fixture(html` <wa-page></wa-page> `);
+
+        expect(el).to.exist;
+      });
+    });
+  }
+});

packages/webawesome/src/components/page/page.ts

@@ -0,0 +1,455 @@
+import type { PropertyValues } from 'lit';
+import { html, isServer } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
+import visuallyHidden from '../../styles/utilities/visually-hidden.css';
+import '../button/button.js';
+import '../drawer/drawer.js';
+import type WaDrawer from '../drawer/drawer.js';
+import '../icon/icon.js';
+import styles from './page.css';
+import mobileStyles from './page.mobile.styles.js';
+
+if (typeof ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = class {
+    // eslint-disable-next-line
+    constructor(..._args: ConstructorParameters<typeof ResizeObserver>) {}
+    // eslint-disable-next-line
+    observe(..._args: Parameters<ResizeObserver['observe']>) {}
+    // eslint-disable-next-line
+    unobserve(..._args: Parameters<ResizeObserver['unobserve']>) {}
+    // eslint-disable-next-line
+    disconnect(..._args: Parameters<ResizeObserver['disconnect']>) {}
+  };
+}
+
+//
+// TODO - the toPx and toLength functions aren't used anywhere else, and they're not named or documented well enough to
+// abstract into a utility as-is.
+//
+
+/** Converts a non-pixel value to a pixel value. */
+function toPx(value: string | number, element: HTMLElement | SVGElement = document.documentElement): number {
+  if (!Number.isNaN(Number(value))) {
+    return Number(value);
+  }
+
+  // If CSS.registerProperty isn't supported, try to parse as-is
+  if (!window.CSS || !CSS.registerProperty) {
+    if (typeof value === 'string' && value.endsWith('px')) {
+      return parseFloat(value);
+    }
+    return Number(value) || 0;
+  }
+
+  const resolver = '--wa-length-resolver';
+
+  // Register the property if not already done
+  if (!CSS.registerProperty.toString().includes(resolver)) {
+    try {
+      CSS.registerProperty({
+        name: resolver,
+        syntax: '<length>',
+        inherits: false,
+        initialValue: '0px',
+      });
+    } catch (e) {
+      // Property might already be registered
+    }
+  }
+
+  const previousValue = element.style.getPropertyValue(resolver);
+  element.style.setProperty(resolver, value as string);
+  const computedValue = getComputedStyle(element)?.getPropertyValue(resolver);
+  element.style.setProperty(resolver, previousValue);
+
+  if (computedValue?.endsWith('px')) {
+    return parseFloat(computedValue);
+  }
+
+  return Number(computedValue) || 0;
+}
+
+/** Converts a number or string to a CSS px value. Not used anywhere else, so consolidated here for the time being. */
+function toLength(px: number | string): string {
+  return Number.isNaN(Number(px)) ? (px as string) : `${px}px`;
+}
+
+/**
+ * @summary Pages offer an easy way to scaffold entire page layouts using minimal markup.
+ * @documentation https://webawesome.com/docs/components/page
+ * @status experimental
+ * @since 3.0
+ *
+ * @slot - The page's main content.
+ * @slot banner - The banner that gets display above the header. The banner will not be shown if no content is provided.
+ * @slot header - The header to display at the top of the page. If a banner is present, the header will appear below the banner. The header will not be shown if there is no content.
+ * @slot subheader - A subheader to display below the `header`. This is a good place to put things like breadcrumbs.
+ * @slot menu - The left side of the page. If you slot an element in here, you will override the default `navigation` slot and will be handling navigation on your own. This also will not disable the fallback behavior of the navigation button. This section "sticks" to the top as the page scrolls.
+ * @slot navigation-header - The header for a navigation area. On mobile this will be the header for `<wa-drawer>`.
+ * @slot navigation - The main content to display in the navigation area. This is displayed on the left side of the page, if `menu` is not used. This section "sticks" to the top as the page scrolls.
+ * @slot navigation-footer - The footer for a navigation area. On mobile this will be the footer for `<wa-drawer>`.
+ * @slot navigation-toggle - Use this slot to slot in your own button + icon for toggling the navigation drawer. By default it is a `<wa-button>` + a 3 bars `<wa-icon>`
+ * @slot navigation-toggle-icon - Use this to slot in your own icon for toggling the navigation drawer. By default it is 3 bars `<wa-icon>`.
+ * @slot main-header - Header to display inline above the main content.
+ * @slot main-footer - Footer to display inline below the main content.
+ * @slot aside - Content to be shown on the right side of the page. Typically contains a table of contents, ads, etc. This section "sticks" to the top as the page scrolls.
+ * @slot skip-to-content - The "skip to content" slot. You can override this If you would like to override the `Skip to content` button and add additional "Skip to X", they can be inserted here.
+ * @slot footer - The content to display in the footer. This is always displayed underneath the viewport so will always make the page "scrollable".
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart banner - The banner to show above header.
+ * @csspart header - The header, usually for top level navigation / branding.
+ * @csspart subheader - Shown below the header, usually intended for things like breadcrumbs and other page level navigation.
+ * @csspart body - The wrapper around menu, main, and aside.
+ * @csspart menu - The left hand side of the page. Generally intended for navigation.
+ * @csspart navigation - The `<nav>` that wraps the navigation slots on desktop viewports.
+ * @csspart navigation-header - The header for a navigation area. On mobile this will be the header for `<wa-drawer>`.
+ * @csspart navigation-footer - The footer for a navigation area. On mobile this will be the footer for `<wa-drawer>`.
+ * @csspart navigation-toggle - The default `<wa-button>` that will toggle the `<wa-drawer>` for mobile viewports.
+ * @csspart navigation-toggle-icon - The default `<wa-icon>` displayed inside of the navigation-toggle button.
+ * @csspart main-header - The header above main content.
+ * @csspart main-content - The main content.
+ * @csspart main-footer - The footer below main content.
+ * @csspart aside - The right hand side of the page. Used for things like table of contents, ads, etc.
+ * @csspart skip-links - Wrapper around skip-link
+ * @csspart skip-link - The "skip to main content" link
+ * @csspart footer - The footer of the page. This is always below the initial viewport size.
+ * @csspart dialog-wrapper - A wrapper around elements such as dialogs or other modal-like elements.
+ *
+ * @cssproperty [--menu-width=auto] - The width of the page's "menu" section.
+ * @cssproperty [--main-width=1fr] - The width of the page's "main" section.
+ * @cssproperty [--aside-width=auto] - The wide of the page's "aside" section.
+ * @cssproperty [--banner-height=0px] - The height of the banner. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.
+ * @cssproperty [--header-height=0px] - The height of the header. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.
+ * @cssproperty [--subheader-height=0px] - The height of the subheader. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.
+ */
+@customElement('wa-page')
+export default class WaPage extends WebAwesomeElement {
+  static css = [visuallyHidden, styles];
+
+  private headerResizeObserver = this.slotResizeObserver('header');
+  private subheaderResizeObserver = this.slotResizeObserver('subheader');
+  private bannerResizeObserver = this.slotResizeObserver('banner');
+  private footerResizeObserver = this.slotResizeObserver('footer');
+
+  private slotResizeObserver(slot: string) {
+    return new ResizeObserver(entries => {
+      for (const entry of entries) {
+        if (entry.contentBoxSize) {
+          const contentBoxSize = entry.borderBoxSize[0];
+          this.style.setProperty(`--${slot}-height`, `${contentBoxSize.blockSize}px`);
+        }
+      }
+    });
+  }
+
+  private handleNavigationToggle = (e: Event) => {
+    // Don't toggle the nav when we're in desktop mode
+    if (this.view === 'desktop') {
+      // Just in case, try to hide the navigation.
+      this.hideNavigation();
+      return;
+    }
+
+    const path = e.composedPath();
+
+    const navigationToggleSlot = this.navigationToggleSlot;
+
+    if (
+      path.find((el: Element) => {
+        return (
+          el.hasAttribute?.('data-toggle-nav') ||
+          el.assignedSlot === navigationToggleSlot ||
+          el === navigationToggleSlot
+        );
+      })
+    ) {
+      e.preventDefault();
+      this.toggleNavigation();
+    }
+  };
+
+  @query("[part~='header']") header: HTMLElement;
+  @query("[part~='subheader']") subheader: HTMLElement;
+  @query("[part~='footer']") footer: HTMLElement;
+  @query("[part~='banner']") banner: HTMLElement;
+  @query("[part~='drawer']") navigationDrawer: WaDrawer;
+  @query("slot[name~='navigation-toggle']") navigationToggleSlot: HTMLSlotElement;
+
+  /**
+   * The view is a reflection of the "mobileBreakpoint", when the page is larger than the `mobile-breakpoint` (768px by
+   * default), it is considered to be a "desktop" view. The view is merely a way to distinguish when to show/hide the
+   * navigation. You can use additional media queries to make other adjustments to content as necessary.
+   * The default is "desktop" because the "mobile navigation drawer" isn't accessible via SSR due to drawer requiring JS.
+   */
+  @property({ attribute: 'view', reflect: true }) view: 'mobile' | 'desktop' = 'desktop';
+
+  /**
+   * Whether or not the navigation drawer is open. Note, the navigation drawer is only "open" on mobile views.
+   */
+  @property({ attribute: 'nav-open', reflect: true, type: Boolean }) navOpen = false;
+
+  /**
+   * At what page width to hide the "navigation" slot and collapse into a hamburger button.
+   * Accepts both numbers (interpreted as px) and CSS lengths (e.g. `50em`), which are resolved based on the root element.
+   */
+  @property({ attribute: 'mobile-breakpoint', type: String })
+  mobileBreakpoint = '768px';
+
+  /**
+   * Where to place the navigation when in the mobile viewport.
+   */
+  @property({ attribute: 'navigation-placement', reflect: true }) navigationPlacement: 'start' | 'end' = 'start';
+
+  /**
+   * Determines whether or not to hide the default hamburger button.
+   * This will automatically flip to "true" if you add an element with `data-toggle-nav` anywhere in the element light DOM.
+   * Generally this will be set for you and you don't need to do anything, unless you're using SSR, in which case you should set this manually for initial page loads.
+   */
+  @property({ attribute: 'disable-navigation-toggle', reflect: true, type: Boolean }) disableNavigationToggle: boolean =
+    false;
+
+  pageResizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+      if (entry.contentBoxSize) {
+        const contentBoxSize = entry.borderBoxSize[0];
+        const pageWidth = contentBoxSize.inlineSize;
+
+        const oldView = this.view;
+
+        if (pageWidth >= toPx(this.mobileBreakpoint)) {
+          this.view = 'desktop';
+        } else {
+          this.view = 'mobile';
+        }
+
+        this.requestUpdate('view', oldView);
+      }
+    }
+  });
+
+  protected update(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('view')) {
+      this.hideNavigation();
+    }
+    super.update(changedProperties);
+  }
+
+  constructor() {
+    super();
+
+    if (!isServer) {
+      this.addEventListener('click', this.handleNavigationToggle);
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.pageResizeObserver.observe(this);
+
+    const navQuery = ":not([slot='toggle-navigation']) [data-toggle-nav]";
+
+    // check once on initial connect
+    // eslint-disable-next-line
+    this.disableNavigationToggle = Boolean(this.querySelector(navQuery));
+
+    setTimeout(() => {
+      this.headerResizeObserver.observe(this.header);
+      this.subheaderResizeObserver.observe(this.subheader);
+      this.bannerResizeObserver.observe(this.banner);
+      this.footerResizeObserver.observe(this.footer);
+
+      // Check again when the element updates
+      // eslint-disable-next-line
+      this.disableNavigationToggle = Boolean(this.querySelector(navQuery));
+    });
+  }
+
+  firstUpdated() {
+    // If the user provides a #main-content id, it should be present in the default slot and the "skip to
+    // content" link will point to it. If not, we'll prepend an empty element for them so things just work.
+    if (!document.getElementById('main-content')) {
+      const div = document.createElement('div');
+      div.id = 'main-content';
+      div.slot = 'skip-to-content-target';
+      this.prepend(div);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.pageResizeObserver.unobserve(this);
+    this.headerResizeObserver.unobserve(this.header);
+    this.subheaderResizeObserver.unobserve(this.subheader);
+    this.footerResizeObserver.unobserve(this.footer);
+    this.bannerResizeObserver.unobserve(this.banner);
+  }
+
+  /**
+   * Shows the mobile navigation drawer
+   */
+  showNavigation() {
+    this.navOpen = true;
+  }
+
+  /**
+   * Hides the mobile navigation drawer
+   */
+  hideNavigation() {
+    this.navOpen = false;
+  }
+
+  /**
+   * Toggles the mobile navigation drawer
+   */
+  toggleNavigation() {
+    this.navOpen = !this.navOpen;
+  }
+
+  render() {
+    return html`
+      <a href="#main-content" part="skip-to-content" class="wa-visually-hidden">
+        <slot name="skip-to-content">Skip to content</slot>
+      </a>
+
+      <!-- unsafeHTML needed for SSR until this is solved: https://github.com/lit/lit/issues/4696 -->
+      ${unsafeHTML(`
+        <style id="mobile-styles">
+          ${mobileStyles(toLength(this.mobileBreakpoint))}
+        </style>
+      `)}
+
+      <div class="base" part="base">
+        <div class="banner" part="banner">
+          <slot name="banner"></slot>
+        </div>
+        <div class="header" part="header">
+          <slot name="navigation-toggle">
+            <wa-button part="navigation-toggle" size="small" appearance="plain" variant="neutral">
+              <slot name="navigation-toggle-icon">
+                <wa-icon name="bars" part="navigation-toggle-icon" label="Toggle navigation drawer"></wa-icon>
+              </slot>
+            </wa-button>
+          </slot>
+          <slot name="header"></slot>
+        </div>
+        <div class="subheader" part="subheader">
+          <slot name="subheader"></slot>
+        </div>
+        <div class="body" part="body">
+          <div class="menu" part="menu">
+            <slot name="menu">
+              <nav name="navigation" class="navigation" part="navigation navigation-desktop">
+                <!-- Add fallback divs so that CSS grid works properly. -->
+                <slot name="desktop-navigation-header">
+                  <slot name=${this.view === 'desktop' ? 'navigation-header' : '___'}><div></div></slot>
+                </slot>
+                <slot name="desktop-navigation">
+                  <slot name=${this.view === 'desktop' ? 'navigation' : '____'}><div></div></slot>
+                </slot>
+                <slot name="desktop-navigation-footer">
+                  <slot name=${this.view === 'desktop' ? 'navigation-footer' : '___'}><div></div></slot>
+                </slot>
+              </nav>
+            </slot>
+          </div>
+          <div class="main" part="main">
+            <div class="main-header" part="main-header">
+              <slot name="main-header"></slot>
+            </div>
+            <div class="main-content" part="main-content">
+              <slot name="skip-to-content-target"></slot>
+              <slot></slot>
+            </div>
+            <div class="main-footer" part="main-footer">
+              <slot name="main-footer"></slot>
+            </div>
+          </div>
+          <div class="aside" part="aside">
+            <slot name="aside"></slot>
+          </div>
+        </div>
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+      <wa-drawer
+        part="drawer"
+        placement=${this.navigationPlacement}
+        light-dismiss
+        ?open=${live(this.navOpen)}
+        @wa-after-show=${() => (this.navOpen = this.navigationDrawer.open)}
+        @wa-after-hide=${() => (this.navOpen = this.navigationDrawer.open)}
+        exportparts="
+          dialog:drawer__dialog,
+          overlay:drawer__overlay,
+          panel:drawer__panel,
+          header:drawer__header,
+          header-actions:drawer__header-actions,
+          title:drawer__title,
+          close-button:drawer__close-button,
+          close-button__base:drawer__close-button__base,
+          body:drawer__body,
+          footer:drawer__footer
+        "
+        class="navigation-drawer"
+      >
+        <slot slot="label" part="navigation-header" name="mobile-navigation-header">
+          <slot name=${this.view === 'mobile' ? 'navigation-header' : '___'}></slot>
+        </slot>
+        <slot name="mobile-navigation">
+          <slot name=${this.view === 'mobile' ? 'navigation' : '____'}></slot>
+        </slot>
+
+        <slot name="mobile-navigation-footer">
+          <slot
+            part="navigation-footer"
+            slot="footer"
+            name=${this.view === 'mobile' ? 'navigation-footer' : '___'}
+          ></slot>
+        </slot>
+      </wa-drawer>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wa-page': WaPage;
+  }
+}
+
+//
+// Append a supporting light DOM styles for <wa-page>
+//
+const stylesheet = new CSSStyleSheet();
+
+stylesheet.replaceSync(`
+:is(html, body):has(wa-page) {
+  min-height: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  }
+
+  /**
+  Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
+  IE: \`<a href="#id-for-h2">\` anchors.
+  */
+  wa-page :is(*, *:after, *:before) {
+  scroll-margin-top: var(--scroll-margin-top);
+  }
+
+  wa-page[view='desktop'] [data-toggle-nav] {
+  display: none;
+  }
+
+  wa-page[view='mobile'] .wa-desktop-only, wa-page[view='desktop'] .wa-mobile-only {
+  display: none !important;
+  }
+`);
+document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];

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

@@ -18,19 +18,31 @@
   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; /* Radios handle their own spacing */
+  gap: 0.75em;
 }
 
 /* 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,6 +57,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
 
   private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
 
+  @state() hasRadioButtons = false;
+
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
 
   /**
@@ -195,9 +197,11 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
 
   private async syncRadioElements() {
     const radios = this.getAllRadios();
+    let hasRadioButtons = false;
 
-    // Set positioning data attributes and properties
+    // Add data attributes to support styling
     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');
@@ -209,6 +213,9 @@ 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;
@@ -342,6 +349,7 @@ 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,41 +31,6 @@
   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 {
@@ -101,13 +66,6 @@
   }
 }
 
-/* Button appearance */
-:host([appearance='button']) {
-  .control {
-    display: none;
-  }
-}
-
 /* Checked */
 :host(:state(checked)) .control {
   color: var(--checked-icon-color);
@@ -127,6 +85,23 @@
   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;
@@ -178,7 +153,7 @@
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-/* Button overlap margins */
+/* Remove inner borders and handle overlap */
 :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,6 +111,7 @@ 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,8 +99,7 @@ export default class WaRelativeTime extends WebAwesomeElement {
       this.updateTimeout = setTimeout(() => this.requestUpdate(), nextInterval);
     }
 
-    // No whitespace before or after
-    return html`<time datetime=${this.isoTime}>${this.relativeTime}</time>`;
+    return html` <time datetime=${this.isoTime}>${this.relativeTime}</time> `;
   }
 }
 

packages/webawesome/src/components/scroller/scroller.css

@@ -20,7 +20,6 @@
 }
 
 #content {
-  z-index: 1; /* below shadows */
   border-radius: inherit;
   scroll-behavior: smooth;
   scrollbar-width: thin;
@@ -103,7 +102,6 @@
   #start-shadow,
   #end-shadow {
     position: absolute;
-    z-index: 2;
     right: 0;
     left: 0;
     height: var(--shadow-size);

packages/webawesome/src/components/select/select.css

@@ -1,7 +1,5 @@
 :host {
   --tag-max-size: 10ch;
-  --show-duration: 100ms;
-  --hide-duration: 100ms;
 }
 
 /* Add ellipses to multi select options */
@@ -32,10 +30,6 @@
   position: relative;
   vertical-align: middle;
 
-  /* Pass through from select to the popup */
-  --show-duration: inherit;
-  --hide-duration: inherit;
-
   &::part(popup) {
     z-index: 900;
   }

packages/webawesome/src/components/select/select.ts

@@ -74,8 +74,6 @@ import styles from './select.css';
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The container that wraps the expand icon.
  *
- * @cssproperty [--show-duration=100ms] - The duration of the show animation.
- * @cssproperty [--hide-duration=100ms] - The duration of the hide animation.
  * @cssproperty [--tag-max-size=10ch] - When using `multiple`, the max size of tags before their content is truncated.
  *
  * @cssstate blank - The select is empty.
@@ -493,10 +491,6 @@ 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');
@@ -948,7 +942,6 @@ 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/slider/slider.css

@@ -33,8 +33,6 @@
 }
 
 #slider {
-  touch-action: none;
-
   &:focus {
     outline: none;
   }

packages/webawesome/src/components/slider/slider.ts

@@ -841,8 +841,8 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
               id=${`tooltip${thumbId !== 'thumb' ? '-' + thumbId : ''}`}
               part="tooltip"
               exportparts="
-                base:tooltip__base,
-                body:tooltip__body,
+                tooltip:tooltip__tooltip,
+                content:tooltip__content,
                 arrow:tooltip__arrow
               "
               trigger="manual"

packages/webawesome/src/components/tag/tag.ts

@@ -35,7 +35,8 @@ export default class WaTag extends WebAwesomeElement {
   @property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'neutral';
 
   /** The tag's visual appearance. */
-  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'outlined filled' = 'outlined filled';
+  @property({ reflect: true }) appearance: 'accent' | 'outlined accent' | 'filled' | 'outlined' | 'outlined filled' =
+    'outlined filled';
 
   /** The tag's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';

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-space-m)] - The size of the indentation for nested items.
+ * @cssproperty [--indent-size=var(--wa-spacing-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,7 +11,6 @@ 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

@@ -1,19 +0,0 @@
-/** 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: true, composed: true });
+    super('wa-select', { bubbles: true, cancelable: false, composed: true });
     this.detail = detail;
   }
 }

packages/webawesome/src/internal/drag.ts

@@ -55,8 +55,6 @@ const supportsTouch = typeof window !== 'undefined' && 'ontouchstart' in window;
  * Drag functionality will be enabled as soon as the constructor is called. A `start()` and `stop()` method can be used
  * to start and stop it, if needed.
  *
- * Use `touch-action: none` on touch devices if scrolling occurs while dragging. Avoid preventing the touchstart event!
- *
  * @usage
  *
  * const draggable = new DraggableElement(element, {
@@ -87,6 +85,9 @@ export class DraggableElement {
     const clientX = supportsTouch && 'touches' in event ? event.touches[0].clientX : (event as PointerEvent).clientX;
     const clientY = supportsTouch && 'touches' in event ? event.touches[0].clientY : (event as PointerEvent).clientY;
 
+    // Prevent scrolling while dragging
+    event.preventDefault();
+
     if (
       this.isDragging ||
       // Prevent right-clicks from triggering drags

packages/webawesome/src/internal/event.ts

@@ -11,3 +11,17 @@ 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/native.css

@@ -454,7 +454,7 @@
     &::after {
       content: '';
       background-color: var(--wa-color-text-quiet);
-      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>')
+      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>')
         center no-repeat;
       width: 1rem;
       height: 1rem;
@@ -560,219 +560,124 @@
   button,
   input[type='button'],
   input[type='reset'],
-  input[type='submit'],
-  input[type='file'] {
-    /* We allow modifier classes on <input type="file">,
-     * but these selectors ensure the styles only apply to
-     * the file selector button in the user agent's shadow root */
-    &:not(input[type='file']),
-    &::file-selector-button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+  input[type='submit'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
-      height: var(--wa-form-control-height);
-      padding: 0 var(--wa-form-control-padding-inline);
+    height: var(--wa-form-control-height);
+    padding: 0 var(--wa-form-control-padding-inline);
 
-      font-family: inherit;
-      font-size: var(--wa-form-control-value-font-size);
-      font-weight: var(--wa-font-weight-action);
-      line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
-      text-decoration: none;
-      vertical-align: middle;
-      white-space: nowrap;
+    color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+    font-family: inherit;
+    font-size: var(--wa-form-control-value-font-size);
+    font-weight: var(--wa-font-weight-action);
+    line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
+    text-decoration: none;
+    vertical-align: middle;
+    white-space: nowrap;
 
-      border-style: var(--wa-border-style);
-      border-width: max(1px, var(--wa-form-control-border-width));
-      border-radius: var(--wa-form-control-border-radius);
+    background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
+    border-color: transparent;
+    border-style: var(--wa-border-style);
+    border-width: max(1px, var(--wa-form-control-border-width));
+    border-radius: var(--wa-form-control-border-radius);
 
-      transition-property: background, border, box-shadow, color;
-      transition-duration: var(--wa-transition-fast);
-      transition-timing-function: var(--wa-transition-easing);
+    transition-property: background, border, box-shadow, color;
+    transition-duration: var(--wa-transition-fast);
+    transition-timing-function: var(--wa-transition-easing);
 
-      cursor: pointer;
-      user-select: none;
-      -webkit-user-select: none;
-    }
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
 
-    /* Default styles for standard buttons */
-    :where(&:not(input[type='file'])) {
-      color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
-      background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
+    &.wa-plain {
+      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+      background-color: transparent;
       border-color: transparent;
 
-      &:not(:disabled) {
-        &:hover {
-          background-color: color-mix(
-            in oklab,
-            var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
-            var(--wa-color-mix-hover)
-          );
-        }
-
-        &:active {
-          background-color: color-mix(
-            in oklab,
-            var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
-            var(--wa-color-mix-active)
-          );
-        }
-      }
-    }
-
-    /* Default styles for file selector buttons */
-    :where(&:is(input[type='file'])) {
-      &::file-selector-button {
-        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
-        background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
-        border-color: transparent;
-      }
-
-      &:not(:disabled) {
-        &::file-selector-button:hover {
-          background-color: color-mix(
-            in oklab,
-            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
-            var(--wa-color-mix-hover)
-          );
-        }
-
-        &::file-selector-button:active {
-          background-color: color-mix(
-            in oklab,
-            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
-            var(--wa-color-mix-active)
-          );
-        }
-      }
-    }
-
-    /* Modifier classes */
-    &.wa-plain {
-      &:not(input[type='file']),
-      &::file-selector-button {
+      &:not(:disabled):hover {
         color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
-        background-color: transparent;
-        border-color: transparent;
+        background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
       }
 
-      &:not(:disabled) {
-        &:not(input[type='file']):hover,
-        &::file-selector-button:hover {
-          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
-          background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
-        }
-
-        &:not(input[type='file']):active,
-        &::file-selector-button:active {
-          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
-          background-color: color-mix(
-            in oklab,
-            var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
-            var(--wa-color-mix-active)
-          );
-        }
+      &:not(:disabled):active {
+        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
+          var(--wa-color-mix-active)
+        );
       }
     }
 
     &.wa-outlined {
-      &:not(input[type='file']),
-      &::file-selector-button {
+      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+      background-color: transparent;
+      border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
+
+      &:not(:disabled):hover {
         color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
-        background-color: transparent;
-        border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
+        background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
       }
 
-      &:not(:disabled) {
-        &:not(input[type='file']):hover,
-        &::file-selector-button:hover {
-          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
-          background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
-        }
-
-        &:not(input[type='file']):active,
-        &::file-selector-button:active {
-          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
-          background-color: color-mix(
-            in oklab,
-            var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
-            var(--wa-color-mix-active)
-          );
-        }
+      &:not(:disabled):active {
+        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
+          var(--wa-color-mix-active)
+        );
       }
     }
 
     &.wa-filled {
-      &:not(input[type='file']),
-      &::file-selector-button {
+      color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+      background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
+      border-color: transparent;
+
+      &:not(:disabled):hover {
         color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
-        background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
-        border-color: transparent;
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
+          var(--wa-color-mix-hover)
+        );
       }
 
-      &:not(:disabled) {
-        &:not(input[type='file']):hover,
-        &::file-selector-button:hover {
-          color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
-          background-color: color-mix(
-            in oklab,
-            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
-            var(--wa-color-mix-hover)
-          );
-        }
-
-        &:not(input[type='file']):active,
-        &::file-selector-button:active {
-          color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
-          background-color: color-mix(
-            in oklab,
-            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
-            var(--wa-color-mix-active)
-          );
-        }
+      &:not(:disabled):active {
+        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
+          var(--wa-color-mix-active)
+        );
       }
 
       &.wa-outlined {
-        &:not(input[type='file']),
-        &::file-selector-button {
-          border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
-        }
+        border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
       }
     }
 
     &.wa-accent {
-      &:not(input[type='file']),
-      &::file-selector-button {
-        color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
-        background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
-        border-color: transparent;
+      color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+      background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
+      border-color: transparent;
+
+      &:not(:disabled):hover {
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
+          var(--wa-color-mix-hover)
+        );
       }
 
-      &:not(:disabled) {
-        &:not(input[type='file']):hover,
-        &::file-selector-button:hover {
-          background-color: color-mix(
-            in oklab,
-            var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
-            var(--wa-color-mix-hover)
-          );
-        }
-
-        &:not(input[type='file']):active,
-        &::file-selector-button:active {
-          background-color: color-mix(
-            in oklab,
-            var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
-            var(--wa-color-mix-active)
-          );
-        }
-      }
-    }
-
-    &.wa-pill {
-      &:not(input[type='file']),
-      &::file-selector-button {
-        border-radius: var(--wa-border-radius-pill);
+      &:not(:disabled):active {
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
+          var(--wa-color-mix-active)
+        );
       }
     }
 
@@ -800,6 +705,10 @@
       }
     }
 
+    &.wa-pill {
+      border-radius: var(--wa-border-radius-pill);
+    }
+
     /* Adds space between icons and adjacent elements
      * Prefer sibling selectors over :first-child/:last-child to avoid extra space when an icon is used alone */
     & > wa-icon:has(+ *) {
@@ -812,25 +721,6 @@
   }
   /* #endregion */
 
-  /* #region File Inputs ~~~~~~~~~~~~~~~~~~~~~ */
-  input[type='file'] {
-    display: block;
-
-    max-inline-size: 100%;
-
-    color: var(--wa-form-control-value-color);
-    font-family: inherit;
-    font-size: var(--wa-form-control-value-font-size);
-    font-weight: var(--wa-form-control-value-font-weight);
-    line-height: var(--wa-form-control-value-line-height);
-    vertical-align: middle;
-
-    border-radius: var(--wa-border-radius-m);
-
-    cursor: pointer;
-  }
-  /* #endregion */
-
   /* #region Checkboxes + Radios ~~~~~~~~~~~~~ */
   input[type='checkbox'],
   label:has(input[type='checkbox']),
@@ -916,8 +806,8 @@
     &:indeterminate::after {
       position: absolute;
 
-      width: round(calc(100% - var(--wa-form-control-border-width) * 2), 1px);
-      height: round(calc(100% - var(--wa-form-control-border-width) * 2), 1px);
+      width: 100%;
+      height: 100%;
 
       content: '';
 
@@ -927,7 +817,7 @@
     }
 
     &:checked::after {
-      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>')
+      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>')
         center no-repeat;
     }
 
@@ -940,7 +830,7 @@
   /* Radio */
   input[type='radio'] {
     --checked-icon-color: var(--wa-form-control-activated-color);
-    --checked-icon-scale: 0.7;
+    --checked-icon-scale: 0.75;
 
     color: transparent;
 
@@ -1059,8 +949,6 @@
   select {
     --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path fill="rgb(180 180 200)" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
 
-    --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 448 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="rgb(180 180 200)" d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
-
     appearance: none;
 
     position: relative;

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

@@ -1,4 +1,4 @@
-@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');
+@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');
 
 @layer wa-theme {
   .wa-theme-awesome,

packages/webawesome/src/translations/hi.ts

@@ -1,43 +0,0 @@
-import type { Translation } from '../utilities/localize.js';
-import { registerTranslation } from '../utilities/localize.js';
-
-const translation: Translation = {
-  $code: 'hi',
-  $name: 'हिन्दी',
-  $dir: 'ltr',
-  carousel: 'कैरोसेल',
-  clearEntry: 'प्रविष्टि साफ़ करें',
-  close: 'बंद करें',
-  copied: 'कॉपी किया गया',
-  copy: 'कॉपी करें',
-  currentValue: 'वर्तमान मान',
-  error: 'त्रुटि',
-  goToSlide: (slide, count) => `${count} में से स्लाइड ${slide} पर जाएं`,
-  hidePassword: 'पासवर्ड छुपाएं',
-  loading: 'लोड हो रहा है',
-  nextSlide: 'अगली स्लाइड',
-  numOptionsSelected: num => {
-    if (num === 0) return 'कोई विकल्प चयनित नहीं';
-    if (num === 1) return '1 विकल्प चयनित';
-    return `${num} विकल्प चयनित`;
-  },
-  pauseAnimation: 'एनिमेशन रोकें',
-  playAnimation: 'एनिमेशन चलाएं',
-  previousSlide: 'पिछली स्लाइड',
-  progress: 'प्रगति',
-  remove: 'हटाएं',
-  resize: 'आकार बदलें',
-  scrollableRegion: 'स्क्रॉल करने योग्य क्षेत्र',
-  scrollToEnd: 'अंत तक स्क्रॉल करें',
-  scrollToStart: 'आरंभ तक स्क्रॉल करें',
-  selectAColorFromTheScreen: 'स्क्रीन से एक रंग चुनें',
-  showPassword: 'पासवर्ड दिखाएं',
-  slideNum: slide => `स्लाइड ${slide}`,
-  toggleColorFormat: 'रंग प्रारूप बदलें',
-  zoomIn: 'ज़ूम इन',
-  zoomOut: 'ज़ूम आउट',
-};
-
-registerTranslation(translation);
-
-export default translation;

vercel.sh

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