Apply position: relative only to buttons that contain badges (#1346)

* make relative positioning conditional

* add changelog

cspell.json

@@ -135,6 +135,7 @@
     "noopener",
     "noreferrer",
     "noscript",
+    "Notdog",
     "novalidate",
     "nowrap",
     "Numberish",

package-lock.json

@@ -16,7 +16,7 @@
         "@custom-elements-manifest/analyzer": "^0.10.4",
         "@lit-labs/eleventy-plugin-lit": "^1.0.3",
         "@lit-labs/testing": "^0.2.5",
-        "@lit/react": "^1.0.6",
+        "@lit/react": "^1.0.8",
         "@open-wc/testing": "^3.2.0",
         "@types/mocha": "^10.0.10",
         "@types/react": "^18.2.28",
@@ -2029,10 +2029,9 @@
       }
     },
     "node_modules/@lit/react": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.7.tgz",
-      "integrity": "sha512-cencnwwLXQKiKxjfFzSgZRngcWJzUDZi/04E0fSaF86wZgchMdvTyu+lE36DrUfvuus3bH8+xLPrhM1cTjwpzw==",
-      "dev": true,
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.8.tgz",
+      "integrity": "sha512-p2+YcF+JE67SRX3mMlJ1TKCSTsgyOVdAwd/nxp3NuV1+Cb6MWALbN6nT7Ld4tpmYofcE5kcaSY1YBB9erY+6fw==",
       "peerDependencies": {
         "@types/react": "17 || 18 || 19"
       }
@@ -2876,8 +2875,7 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.14",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
-      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
-      "dev": true
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ=="
     },
     "node_modules/@types/qs": {
       "version": "6.9.11",
@@ -2895,7 +2893,6 @@
       "version": "18.3.23",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
       "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -2986,6 +2983,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@wc-toolkit/jsx-types": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@wc-toolkit/jsx-types/-/jsx-types-1.3.0.tgz",
+      "integrity": "sha512-2rcRyPNEAdesFlokSSFBuCjpPPrMySk4NqyVJsqCs/WczcAUnIGwjnJk2fd/SNmzSjxGFRIFLAhXOgFOHLPvxQ==",
+      "dev": true
+    },
     "node_modules/@web/browser-logs": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.4.0.tgz",
@@ -5799,8 +5802,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/custom-element-jet-brains-integration": {
       "version": "1.7.0",
@@ -13975,11 +13977,12 @@
     },
     "packages/webawesome": {
       "name": "@awesome.me/webawesome",
-      "version": "3.0.0-beta.2",
+      "version": "3.0.0-beta.4",
       "license": "MIT",
       "dependencies": {
         "@ctrl/tinycolor": "^4.1.0",
         "@floating-ui/dom": "^1.6.13",
+        "@lit/react": "^1.0.8",
         "@shoelace-style/animations": "^1.2.0",
         "@shoelace-style/localize": "^3.2.1",
         "composed-offset-position": "^0.0.6",
@@ -13988,30 +13991,52 @@
         "qr-creator": "^1.0.0",
         "style-observer": "^0.0.7"
       },
-      "devDependencies": {},
+      "devDependencies": {
+        "@wc-toolkit/jsx-types": "^1.3.0"
+      },
       "engines": {
         "node": ">=14.17.0"
       }
     },
     "packages/webawesome-pro": {
       "name": "@shoelace-style/webawesome-pro",
-      "version": "3.0.0-beta.2",
-      "license": "TODO",
+      "version": "3.0.0-beta.3",
       "dependencies": {
         "@ctrl/tinycolor": "^4.1.0",
         "@floating-ui/dom": "^1.6.13",
+        "@lit/react": "^1.0.8",
         "@shoelace-style/animations": "^1.2.0",
         "@shoelace-style/localize": "^3.2.1",
         "composed-offset-position": "^0.0.6",
         "lit": "^3.2.1",
+        "nanoid": "^5.1.5",
         "qr-creator": "^1.0.0",
         "style-observer": "^0.0.7"
       },
-      "devDependencies": {},
+      "devDependencies": {
+        "@wc-toolkit/jsx-types": "^1.3.0"
+      },
       "engines": {
         "node": ">=14.17.0"
       }
     },
+    "packages/webawesome-pro/node_modules/nanoid": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
+      "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
     "packages/webawesome/node_modules/nanoid": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",

package.json

@@ -18,13 +18,12 @@
   "engines": {
     "node": ">=14.17.0"
   },
-  "dependencies": {},
   "devDependencies": {
     "@11ty/eleventy": "3.0.0",
     "@custom-elements-manifest/analyzer": "^0.10.4",
     "@lit-labs/eleventy-plugin-lit": "^1.0.3",
     "@lit-labs/testing": "^0.2.5",
-    "@lit/react": "^1.0.6",
+    "@lit/react": "^1.0.8",
     "@open-wc/testing": "^3.2.0",
     "@types/mocha": "^10.0.10",
     "@types/react": "^18.2.28",
@@ -87,4 +86,3 @@
     ]
   }
 }
-

packages/webawesome/custom-elements-manifest.js

@@ -1,3 +1,4 @@
+import { jsxTypesPlugin } from '@wc-toolkit/jsx-types';
 import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
 // import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
@@ -164,6 +165,7 @@ export default {
       ],
     }),
 
+    // Generate custom JetBrains data
     customElementJetBrainsPlugin({
       outdir: './dist-cdn',
       excludeCss: true,
@@ -176,6 +178,16 @@ export default {
       },
     }),
 
+    // Generate JSX types (see https://wc-toolkit.com/integrations/jsx/)
+    jsxTypesPlugin({
+      fileName: 'custom-elements-jsx.d.ts',
+      outdir,
+      defaultExport: true,
+      componentTypePath: (_name, _tag, modulePath) => {
+        return `./${modulePath}`;
+      },
+    }),
+
     //
     // TODO - figure out why this broke when events were updated
     //

packages/webawesome/docs/.eleventy.js

@@ -229,9 +229,12 @@ export default async function (eleventyConfig) {
   //   eleventyConfig.addPlugin(formatCodePlugin());
   // }
 
-  let assetsDir = path.join(process.env.BASE_DIR || 'docs', 'assets');
-  const siteAssetsDir = path.join(eleventyConfig.directories.output, 'assets');
-  fs.cpSync(assetsDir, siteAssetsDir, { recursive: true });
+  // This needs to happen in "eleventy.after" otherwise incremental builds never update.
+  eleventyConfig.on('eleventy.after', function () {
+    let assetsDir = path.join(process.env.BASE_DIR || 'docs', 'assets');
+    const siteAssetsDir = path.join(eleventyConfig.directories.output, 'assets');
+    fs.cpSync(assetsDir, siteAssetsDir, { recursive: true });
+  });
 
   for (let glob of passThrough) {
     eleventyConfig.addPassthroughCopy(glob);
@@ -261,13 +264,10 @@ export default async function (eleventyConfig) {
   //   });
   // }
 
-  if (!isDev) {
+  // For a server build, we expect a server to run the second transform.
+  // For dev builds, we run the second transform in a middleware.
+  if (!isDev && !serverBuild) {
     eleventyConfig.addTransform('simulate-webawesome-app', function (content) {
-      // For a server build, we expect a server to run the second transform.
-      if (serverBuild) {
-        return content;
-      }
-
       // Only run the transform on files nunjucks would transform.
       if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
         return content;

packages/webawesome/docs/_includes/base.njk

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
+<html lang="en" data-fa-kit-code="38c11e3f20" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
   <head>
     {% include 'head.njk' %}
     <meta name="theme-color" content="#f36944">
@@ -44,7 +44,7 @@
   </head>
   <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="" mobile-breakpoint="1180">
+    <wa-page view="desktop" disable-navigation-toggle mobile-breakpoint="1180">
       <header slot="header" class="wa-split">
         {# Logo #}
         <div id="docs-branding">

packages/webawesome/docs/_includes/sidebar.njk

@@ -218,6 +218,8 @@
         </li>
         <li>
           <a href="/docs/patterns/app/pagination/">Pagination</a>
+        </li><li>
+          <a href="/docs/patterns/app/password/">Password</a>
         </li>
         <li>
           <a href="/docs/patterns/app/permissions/">Permissions</a>
@@ -231,18 +233,30 @@
       <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>
+        </li>
         <li>
           <a href="/docs/patterns/blog-news/call-to-action/">Call To Action</a>
         </li>
         <li>
           <a href="/docs/patterns/blog-news/category-list/">Category List</a>
         </li>
+        <li>
+          <a href="/docs/patterns/blog-news/contact/">Contact</a>
+        </li>
         <li>
           <a href="/docs/patterns/blog-news/featured-post/">Featured Post</a>
         </li>
         <li>
           <a href="/docs/patterns/blog-news/footer/">Footer</a>
         </li>
+        <li>
+          <a href="/docs/patterns/blog-news/grid-section/">Grid Section</a>
+        </li>
+        <li>
+          <a href="/docs/patterns/blog-news/header/">Header</a>
+        </li>
         <li>
           <a href="/docs/patterns/blog-news/newsletter/">Newsletter</a>
         </li>
@@ -260,10 +274,19 @@
         </li>
         <li>
           <a href="/docs/patterns/blog-news/login/">Sign Up &amp; Login</a>
+        </li>
+         <li>
+          <a href="/docs/patterns/blog-news/numbers/">Numbers</a>
         </li>
         <li>
           <a href="/docs/patterns/blog-news/social-share/">Social Share</a>
         </li>
+        <li>
+          <a href="/docs/patterns/blog-news/teams/">Teams</a>
+        </li>
+         <li>
+          <a href="/docs/patterns/blog-news/testimonials/">Testimonials</a>
+        </li>
       </ul>
     </li>
     <li>

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

@@ -12,22 +12,18 @@
       <th><code>brand</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="brand" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="brand" appearance="filled outlined">F+O</wa-badge>
+          <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>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-brand" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-brand" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-brand" appearance="filled outlined">F+O</wa-badge>
+          <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,22 +31,18 @@
       <th><code>neutral</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="neutral" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="neutral" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="neutral" appearance="filled outlined">F+O</wa-badge>
+          <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>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-neutral" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-neutral" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-neutral" appearance="filled outlined">F+O</wa-badge>
+          <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>
@@ -58,22 +50,18 @@
       <th><code>success</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="success" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="success" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="success" appearance="filled outlined">F+O</wa-badge>
+          <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>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-success" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-success" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-success" appearance="filled outlined">F+O</wa-badge>
+          <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>
@@ -81,22 +69,18 @@
       <th><code>warning</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="warning" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="warning" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="warning" appearance="filled outlined">F+O</wa-badge>
+          <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>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-warning" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-warning" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-warning" appearance="filled outlined">F+O</wa-badge>
+          <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>
@@ -104,22 +88,18 @@
       <th><code>danger</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="danger" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="danger" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="danger" appearance="filled outlined">F+O</wa-badge>
+          <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>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-danger" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-danger" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-danger" appearance="filled outlined">F+O</wa-badge>
+          <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>
@@ -142,9 +122,8 @@
       <th><code>brand</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="brand" appearance="accent">Accent</wa-button>
-          <wa-button variant="brand" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="brand" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button variant="brand" appearance="filled">Filled</wa-button>
           <wa-button variant="brand" appearance="outlined">Outlined</wa-button>
           <wa-button variant="brand" appearance="plain">Plain</wa-button>
@@ -152,9 +131,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-brand" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-brand" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-brand" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-brand" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button class="wa-brand" appearance="filled">Filled</wa-button>
           <wa-button class="wa-brand" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-brand" appearance="plain">Plain</wa-button>
@@ -165,9 +143,8 @@
       <th><code>neutral</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="neutral" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="neutral" appearance="accent">Accent</wa-button>
-          <wa-button variant="neutral" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="neutral" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button variant="neutral" appearance="filled">Filled</wa-button>
           <wa-button variant="neutral" appearance="outlined">Outlined</wa-button>
           <wa-button variant="neutral" appearance="plain">Plain</wa-button>
@@ -175,9 +152,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-neutral" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-neutral" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-neutral" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-neutral" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button class="wa-neutral" appearance="filled">Filled</wa-button>
           <wa-button class="wa-neutral" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-neutral" appearance="plain">Plain</wa-button>
@@ -188,9 +164,8 @@
       <th><code>success</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="success" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="success" appearance="accent">Accent</wa-button>
-          <wa-button variant="success" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="success" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button variant="success" appearance="filled">Filled</wa-button>
           <wa-button variant="success" appearance="outlined">Outlined</wa-button>
           <wa-button variant="success" appearance="plain">Plain</wa-button>
@@ -198,9 +173,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-success" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-success" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-success" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-success" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button class="wa-success" appearance="filled">Filled</wa-button>
           <wa-button class="wa-success" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-success" appearance="plain">Plain</wa-button>
@@ -211,9 +185,8 @@
       <th><code>warning</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="warning" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="warning" appearance="accent">Accent</wa-button>
-          <wa-button variant="warning" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="warning" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button variant="warning" appearance="filled">Filled</wa-button>
           <wa-button variant="warning" appearance="outlined">Outlined</wa-button>
           <wa-button variant="warning" appearance="plain">Plain</wa-button>
@@ -221,9 +194,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-warning" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-warning" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-warning" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-warning" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button class="wa-warning" appearance="filled">Filled</wa-button>
           <wa-button class="wa-warning" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-warning" appearance="plain">Plain</wa-button>
@@ -234,9 +206,8 @@
       <th><code>danger</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="danger" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="danger" appearance="accent">Accent</wa-button>
-          <wa-button variant="danger" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="danger" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button variant="danger" appearance="filled">Filled</wa-button>
           <wa-button variant="danger" appearance="outlined">Outlined</wa-button>
           <wa-button variant="danger" appearance="plain">Plain</wa-button>
@@ -244,9 +215,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-danger" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-danger" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-danger" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-danger" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button class="wa-danger" appearance="filled">Filled</wa-button>
           <wa-button class="wa-danger" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-danger" appearance="plain">Plain</wa-button>
@@ -272,17 +242,13 @@
       <th><code>brand</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="brand" appearance="accent">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout variant="brand" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout variant="brand" appearance="filled">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
@@ -300,17 +266,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-brand" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-brand" appearance="accent">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout class="wa-brand" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout class="wa-brand" appearance="filled">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
@@ -331,17 +293,13 @@
       <th><code>neutral</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="neutral" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="neutral" appearance="accent">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout variant="neutral" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout variant="neutral" appearance="filled">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
@@ -359,17 +317,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-neutral" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-neutral" appearance="accent">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout class="wa-neutral" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout class="wa-neutral" appearance="filled">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
@@ -390,17 +344,13 @@
       <th><code>success</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="success" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="success" appearance="accent">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout variant="success" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout variant="success" appearance="filled">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
@@ -418,17 +368,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-success" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-success" appearance="accent">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout class="wa-success" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout class="wa-success" appearance="filled">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
@@ -449,17 +395,13 @@
       <th><code>warning</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="warning" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="warning" appearance="accent">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout variant="warning" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout variant="warning" appearance="filled">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
@@ -477,17 +419,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-warning" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-warning" appearance="accent">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout class="wa-warning" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout class="wa-warning" appearance="filled">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
@@ -508,17 +446,13 @@
       <th><code>danger</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="danger" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="danger" appearance="accent">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout variant="danger" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout variant="danger" appearance="filled">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
@@ -536,17 +470,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-danger" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-danger" appearance="accent">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout class="wa-danger" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout class="wa-danger" appearance="filled">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
@@ -582,9 +512,8 @@
       <th><code>brand</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="brand" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="brand" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="brand" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="brand" appearance="filled">Filled</wa-tag>
           <wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
           <wa-tag variant="brand" appearance="plain">Plain</wa-tag>
@@ -592,9 +521,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-brand" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-brand" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-brand" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-brand" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-brand" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-brand" appearance="outlined">Outlined</wa-tag>
           <wa-tag class="wa-brand" appearance="plain">Plain</wa-tag>
@@ -605,9 +533,8 @@
       <th><code>neutral</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="neutral" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="neutral" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="neutral" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
           <wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
           <wa-tag variant="neutral" appearance="plain">Plain</wa-tag>
@@ -615,9 +542,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-neutral" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-neutral" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-neutral" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-neutral" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-neutral" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-neutral" appearance="outlined">Outlined</wa-tag>
           <wa-tag class="wa-neutral" appearance="plain">Plain</wa-tag>
@@ -628,9 +554,8 @@
       <th><code>success</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="success" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="success" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="success" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="success" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="success" appearance="filled">Filled</wa-tag>
           <wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
           <wa-tag variant="success" appearance="plain">Plain</wa-tag>
@@ -638,9 +563,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-success" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-success" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-success" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-success" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-success" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-success" appearance="outlined">Outlined</wa-tag>
           <wa-tag class="wa-success" appearance="plain">Plain</wa-tag>
@@ -651,9 +575,8 @@
       <th><code>warning</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="warning" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="warning" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="warning" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="warning" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="warning" appearance="filled">Filled</wa-tag>
           <wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
           <wa-tag variant="warning" appearance="plain">Plain</wa-tag>
@@ -661,9 +584,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-warning" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-warning" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-warning" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-warning" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-warning" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-warning" appearance="outlined">Outlined</wa-tag>
           <wa-tag class="wa-warning" appearance="plain">Plain</wa-tag>
@@ -674,9 +596,8 @@
       <th><code>danger</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="danger" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="danger" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="danger" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="danger" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="danger" appearance="filled">Filled</wa-tag>
           <wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
           <wa-tag variant="danger" appearance="plain">Plain</wa-tag>
@@ -684,9 +605,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-danger" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-danger" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-danger" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-danger" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-danger" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-danger" appearance="outlined">Outlined</wa-tag>
           <wa-tag class="wa-danger" appearance="plain">Plain</wa-tag>
@@ -695,4 +615,4 @@
     </tr>
   </tbody>
 </table>
-</div>
+</div>

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

@@ -40,66 +40,6 @@
 </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="b10bfbde90" data-cdn-url="{% cdnUrl %}">
+<html lang="en" data-fa-kit-code="38c11e3f20" data-cdn-url="{% cdnUrl %}">
   <head>
     {% include 'head.njk' %}
     {% block head %}{% endblock %}

packages/webawesome/docs/_layouts/pattern.njk

@@ -0,0 +1,8 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+{% set section = 'docs' %}
+
+{% block beforeContent %}
+    <p>{{ description }}</p>
+{% endblock %}
+{% extends "../_includes/base.njk" %}

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="b10bfbde90" type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
+      `<script data-fa-kit-code="38c11e3f20" 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

@@ -408,6 +408,7 @@ wa-button#search-trigger {
     box-shadow: none;
   }
   &::part(label) {
+    text-align: start;
     width: 100%;
   }
 }

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

@@ -15,41 +15,6 @@ 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/details.md

@@ -48,6 +48,23 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 </style>
 ```
 
+### 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.
+
+```html {.example}
+<div class="wa-stack">
+  <wa-details summary="Start" icon-placement="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">
+    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>
+</div>
+```
+
 ### HTML in Summary
 
 To use HTML in the summary, use the `summary` slot.
@@ -68,12 +85,17 @@ Links and other interactive elements will still retain their behavior:
 
 ### Right-to-Left Languages
 
-The details component automatically adapts to right-to-left languages:
+The details component, including its `icon-placement`, automatically adapts to right-to-left languages:
 
 ```html {.example}
-<wa-details summary="تبديلني" lang="ar" dir="rtl">
-  استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
-</wa-details>
+<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>
+</div>
 ```
 
 ### Appearance

packages/webawesome/docs/docs/components/dropdown.md

@@ -273,10 +273,10 @@ The distance from the panel to the trigger can be customized using the `distance
 
 ### Offset
 
-The offset of the panel along the trigger can be customized using the `offset` attribute. This value is specified in pixels.
+The offset of the panel along the trigger can be customized using the `skidding` attribute. This value is specified in pixels.
 
 ```html {.example}
-<wa-dropdown offset="30">
+<wa-dropdown skidding="30">
   <wa-button slot="trigger" with-caret>Edit</wa-button>
 
   <wa-dropdown-item>Cut</wa-dropdown-item>

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

@@ -7,6 +7,10 @@ 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)
 :::
@@ -17,73 +21,58 @@ 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 families, including `sharp`, `duotone`, and `sharp-duotone`. For these 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 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.
 
 ```html {.example}
-<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>
-```
-
-### Colors
-
-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}
-<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 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>
-<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
-
-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 style="font-size: 32px;">
-  <wa-icon name="bell"></wa-icon>
-  <wa-icon name="heart"></wa-icon>
-  <wa-icon name="image"></wa-icon>
-  <wa-icon name="microphone"></wa-icon>
-  <wa-icon name="search"></wa-icon>
-  <wa-icon name="star"></wa-icon>
-</div>
-```
-
-### Fixed Width Icons
-
-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}
-<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>
 ```
 
 ### Labels
@@ -91,9 +80,335 @@ By default, icons have a 1em height and a variable width. Use the `fixed-width`
 For non-decorative icons, use the `label` attribute to announce it to assistive devices.
 
 ```html {.example}
-<wa-icon name="star" label="Add to favorites"></wa-icon>
+<wa-icon name="star" label="Favorite" style="font-size: 1.5em;"></wa-icon>
 ```
 
+### Sizing
+
+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;">
+  <wa-icon name="bell"></wa-icon>
+  <wa-icon name="heart"></wa-icon>
+  <wa-icon name="image"></wa-icon>
+  <wa-icon name="microphone"></wa-icon>
+  <wa-icon name="search"></wa-icon>
+  <wa-icon name="star"></wa-icon>
+</div>
+```
+
+### Auto Width
+
+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.
+
+```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>
+```
+
+### Colors
+
+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}
+<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>
+```
+
+### 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).
@@ -287,7 +602,9 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu
   import { registerIconLibrary } from '/dist/webawesome.js';
 
   registerIconLibrary('iconoir', {
-    resolver: name => `https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@latest/icons/${name}.svg`,
+    resolver: (name, family) => {
+      return `https://cdn.jsdelivr.net/npm/iconoir@7.11.0/icons/regular/${name}.svg`;
+    },
     mutator: svg =>
       svg.querySelectorAll('path').forEach(path => {
         path.setAttribute('fill', 'none');
@@ -297,7 +614,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-circled-outline"></wa-icon>
+  <wa-icon library="iconoir" name="check-circle"></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/popover.md

@@ -91,7 +91,7 @@ Use the `distance` attribute to control how far the popover appears from its anc
 
 ### Arrow Size
 
-Use the `--arrow-size` custom property to change the size of the popover's arrow. Set it to `0` to remove the arrow entirely.
+Use the `--arrow-size` custom property to change the size of the popover's arrow. To remove it, use the `without-arrow` attribute.
 
 ```html {.example}
 <div style="display: flex; gap: 1rem; align-items: center;">
@@ -99,7 +99,7 @@ Use the `--arrow-size` custom property to change the size of the popover's arrow
   <wa-popover for="popover__big-arrow" style="--arrow-size: 8px;">I have a big arrow</wa-popover>
 
   <wa-button id="popover__no-arrow">No arrow</wa-button>
-  <wa-popover for="popover__no-arrow" style="--arrow-size: 0;">I don't have an arrow</wa-popover>
+  <wa-popover for="popover__no-arrow" without-arrow>I don't have an arrow</wa-popover>
 </div>
 ```
 

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/components/tooltip.md

@@ -113,11 +113,11 @@ Tooltips can be controller programmatically by setting the `trigger` attribute t
 
 ### Removing Arrows
 
-You can control the size of tooltip arrows by overriding the `--wa-tooltip-arrow-size` design token. To remove them, set the value to `0` as shown below.
+You can control the size of tooltip arrows by overriding the `--wa-tooltip-arrow-size` design token. To remove the arrow, use the `without-arrow` attribute.
 
 ```html {.example}
 <wa-button id="no-arrow">No Arrow</wa-button>
-<wa-tooltip for="no-arrow" style="--wa-tooltip-arrow-size: 0;">This is a tooltip with no arrow</wa-tooltip>
+<wa-tooltip for="no-arrow" without-arrow>This is a tooltip with no arrow</wa-tooltip>
 ```
 
 To override it globally, set it in a root block in your stylesheet after the Web Awesome stylesheet is loaded.

packages/webawesome/docs/docs/index.md

@@ -22,6 +22,7 @@ To get everything included in Web Awesome, add the following code to the `<head>
 ```
 
 This snippet adds:
+
 - **Web Awesome styles**, a collection of stylesheets including essential default theme styles, optional [styles for native elements](/docs/utilities/native) and optional [utility classes](/docs/utilities)
 - **The autoloader**, a lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically
 
@@ -31,7 +32,7 @@ Now you can [start using Web Awesome!](/docs/usage)
 
 ## Using Font Awesome Kit Codes
 
-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.
+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.
 
 ```html
 <!-- Option 1: the data-fa-kit-code attribute -->
@@ -44,8 +45,24 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. 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. #}
+
+<div>
+{%- raw -%}
+  {% if currentUser.hasPro %}
+    <div>
+      {% include "server/pro-setup.njk" ignore missing %}
+    </div>
+  {% endif %}
+{% endraw %}
+</div>
+
 ## Advanced Setup
 
 The autoloader is the easiest way to use Web Awesome, but different projects (or your own preferences!) may require different installation methods.
@@ -86,15 +103,15 @@ Web Awesome does not a provide a single import with all Web Awesome components.
 
 ```js
 // Option 1: import all Web Awesome styles
-import "@awesome.me/webawesome/dist/styles/webawesome.css"
+import '@awesome.me/webawesome/dist/styles/webawesome.css';
 
 // Option 2: import only the default theme
-import "@awesome.me/webawesome/dist/styles/themes/default.css"
+import '@awesome.me/webawesome/dist/styles/themes/default.css';
 
 // <wa-button>
-import "@awesome.me/webawesome/dist/components/button/button.js"
+import '@awesome.me/webawesome/dist/components/button/button.js';
 // <wa-input>
-import "@awesome.me/webawesome/dist/components/input/input.js"
+import '@awesome.me/webawesome/dist/components/input/input.js';
 ```
 
 Once they've been imported, you can use them in your HTML normally. Component imports are located in the "Importing" section of each component's documentation.
@@ -103,7 +120,7 @@ Once they've been imported, you can use them in your HTML normally. Component im
 
 Some components rely on assets (icons, images, etc.) and Web Awesome needs to know where they're located. For convenience, Web Awesome will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `webawesome.loader.js` and will "just work" for most users.
 
-==If you're using the CDN, you can skip this section.== However, if you're [cherry picking](#cherry-picking) or bundling Web Awesome, you'll need to set the base path. You can do this one of two ways.
+==If you're using the CDN, you can skip this section.== However, if you're [cherry picking](#cherry-picking-from-cdn) or bundling Web Awesome, you'll need to set the base path. You can do this one of two ways.
 
 ```html
 <!-- Option 1: the data-webawesome attribute -->
@@ -136,13 +153,63 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
 </script>
 ```
 
-## The difference between `/dist` and `/dist-cdn`
+### The Difference Between `/dist` & `/dist-cdn`
 
-If you have Web Awesome installed locally via NPM, you'll notice 2 directories. `/dist-cdn` and `/cdn`.
+If you have Web Awesome installed locally via npm, you'll notice the following directories in the project's root:
 
-The `/dist-cdn` files are bundled differently than the `/dist` files. The `/dist-cdn` files come pre-bundled, which means all dependencies are "inlined" so there are no "bare" references like `import "lit"`. The `/dist` files **DO NOT** come pre-bundled, allowing your bundler of choice to more efficiently de-duplicate dependencies, resulting in smaller bundles and optimal code sharing.
+```
+dist/
+dist-cdn/
+```
 
-TLDR:
+The `dist-cdn` files come with everything bundled together, so you can use them directly without a build tool. The dist files keep dependencies separate, which lets your bundler optimize and share code more efficiently.
 
-- `@awesome.me/webawesome/dist-cdn` is for CDNs or people not using a bundler.
-- `@awesome.me/webawesome/dist` is for bundlers or importmaps.
+Use `dist-cdn` if you're loading directly in the browser or from a CDN. Use `dist` if you're using a bundler like Webpack or Vite.
+
+## React Users
+
+React 19+ [supports custom elements](https://react.dev/blog/2024/04/25/react-19#support-for-custom-elements), so you can import them and use them as you'd expect. Just make sure you've included your Web Awesome theme into your app first.
+
+```jsx
+import '@awesome.me/webawesome/dist/components/button/button.js';
+
+function App() {
+  return <wa-button variant="brand">Button</wa-button>;
+}
+
+export default App;
+```
+
+If you're using TypeScript, you can add type safety using the types file located at:
+
+```
+node_modules/@awesome.me/webawesome/dist/custom-elements-jsx.d.ts
+```
+
+This gives you inline documentation, autocomplete, and type-safe validation for every component. You can add the types to your project by updating your `tsconfig.json` file as shown below.
+
+```json
+{
+  "compilerOptions": {
+    "types": ["node-modules/@awesome.me/webawesome/dist/custom-elements-jsx.d.ts"]
+  }
+}
+```
+
+Another way is to create a declaration file and extend JSX's `IntrinsicElements`:
+
+```ts
+import type { CustomElements, CustomCssProperties } from '@awesome.me/webawesome/dist/custom-elements-jsx.d.ts';
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  interface CSSProperties extends CustomCssProperties {}
+}
+```
+
+:::details React 18 and below
+React 18 and below have [poor support](https://custom-elements-everywhere.com/#react) for custom elements. For legacy versions of React, we provide React wrappers for every component. You can find the import instructions by selecting the _React_ tab from the _Importing_ section of each
+component's documentation.
+:::

packages/webawesome/docs/docs/localization.md

@@ -22,43 +22,7 @@ Through the magic of a mutation observer, changing the `lang` attribute will aut
 
 ## Available Translations
 
-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>
+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.
 
 You can import translations using the following syntax, where `<code>` is replaced with any language code shown above.
 

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

@@ -10,6 +10,46 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Next
 
+### 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 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 `<wa-button>` to have `static` positioning by default and `relative` positioning only when used with `<wa-badge>` [pr:1346]
+
+## 3.0.0-beta.4
+
+### New Features {data-no-outline}
+
+- Added the `icon-position` attribute to `<wa-details>` [discuss:1099]
+- Added the `animating` custom state to `<wa-details>` [pr:1214]
+- 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
+
 ### New Features {data-no-outline}
 
 - Added `--track-height` custom property to `<wa-progress-bar>` [pr:1154]
@@ -22,9 +62,11 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed the missing `nanoid` dependency in `package.json` [discuss:1139]
 - Fixed a bug in `<wa-slider>` that prevented the hint from showing up [discuss:1172]
 - Fixed a bug in `<wa-textarea>` where setting `resize="auto"` caused the height of the textarea to double [issue:1155]
+- Fixed a bug in `<wa-color-picker>`, `<wa-checkbox>`, `<wa-input>`, `<wa-radio-group>`, `<wa-switch>`, and `<wa-textarea>` that prevented screen readers from announcing hints [issue:1186]
 - Fixed a bug in `<wa-card>` that caused slotted media to have incorrectly rounded corners [issue:1107]
 - Fixed a bug in `<wa-button-group>` that prevented pill buttons from rendering corners properly [issue:1165]
 - Fixed a bug in `<wa-button-group>` that caused some vertical groups to appear horizontal [issue:1152]
+- Improved accessibility of `<wa-animated-image>` so keyboard users can focus and toggle the animation [issue:1177]
 
 ## 3.0.0-beta.2
 
@@ -173,7 +215,7 @@ Many of these changes and improvements were the direct result of feedback from u
 
 ### Bug fixes {data-no-outline}
 
-- Specifying inherited CSS properties on `<wa-tooltip>` now works as expected ([thanks Dennis!](https://github.com/shoelace-style/webawesome-alpha/discussions/203))
+- Specifying inherited CSS properties on `<wa-tooltip>` now works as expected
 - Fixed a bug in `<wa-select>` that made it hard to use with VueJS, Svelte, and many other frameworks
 - Fixed a bug in `<wa-select multiple>` that sometimes resulted in empty `<div>` elements being output
 - Fixed a bug where changing a `<wa-option>` label wouldn't update the display label in `<wa-select>`
@@ -393,4 +435,4 @@ Many of these changes and improvements were the direct result of feedback from u
 
 </details>
 
-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)
+Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)

packages/webawesome/docs/docs/resources/contributing.md

@@ -131,7 +131,7 @@ To link to a GitHub issue, PR, or discussion, use the following syntax.
 
 ### Frontmatter
 
-There's a number of frontmatter properties for doing different things in the Web Awesome documention.
+There's a number of frontmatter properties for doing different things in the Web Awesome documentation.
 
 For example, to only show a page in development, use the `unpublished: true` key / value pair.
 
@@ -252,22 +252,16 @@ 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-change` instead of `waChange`.
+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`.
 
 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.
@@ -277,13 +271,9 @@ 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
@@ -363,7 +353,7 @@ Form controls should support submission and validation through the following con
 
 - Form Controls should extend from `WebAwesomeFormAssociatedElement`
 - All form controls must use `name`, `value`, and `disabled` properties in the same manner as `HTMLInputElement`
-- All form controls with the `disabled` property *NOT* reflect the `disabled` attribute.
+- All form controls with the `disabled` property _NOT_ reflect the `disabled` attribute.
 - All form controls must have an `invalid` property that reflects their validity
 - All form controls should mirror their native validation attributes such as `required`, `pattern`, `minlength`, `maxlength`, etc. when possible and use the `MirrorValidator`.
 - All form controls must be tested to work with the standard `<form>` element
@@ -416,4 +406,4 @@ or for hydrated rendering only:
 
 ```bash
 SSR_ONLY="true" npm run test
-```
+```

packages/webawesome/docs/docs/resources/visual-tests.md

@@ -6,26 +6,33 @@ wide: true
 ---
 
 <style>
-  p {
-    max-width: 90ch;
-  }
-  tbody {
-    & .wa-grid {
-      --min-column-size: 5ch;
+  #content {
+    p {
+      max-width: 90ch;
     }
-    & tr th:first-of-type {
-      width: 20ch;
+
+    tbody {
+      & .wa-grid {
+        --min-column-size: 5ch;
+      }
+
+      & tr th:first-of-type {
+        width: 20ch;
+      }
+
+      & th {
+        vertical-align: middle;
+      }
+
+      & tr:hover {
+        background-color: color-mix(in oklch, var(--wa-color-fill-quiet), transparent 60%)
+      }
     }
-    & th {
-      vertical-align: middle;
+
+    wa-divider {
+      --width: var(--wa-border-width-m);
+      --spacing: var(--wa-space-3xl);
     }
-    & tr:hover {
-      background-color: color-mix(in oklch, var(--wa-color-fill-quiet), transparent 60%)
-    }
-  }
-  wa-divider {
-    --width: var(--wa-border-width-m);
-    --spacing: var(--wa-space-3xl);
   }
 </style>
 

packages/webawesome/docs/docs/tokens/component-groups.md

@@ -2,6 +2,7 @@
 title: Component Groups
 description: Style groups of components that share similar qualities with these Web Awesome custom properties.
 order: 9999
+layout: page-outline
 ---
 
 For components that share similar qualities, Web Awesome includes custom properties to change the appearance of these related components all at once.
@@ -84,16 +85,19 @@ Panels consist of components with larger, contained surface areas like [callout]
 
 ## Tooltips
 
-Tooltip styles are shared between the [tooltip](/docs/components/tooltip) component and the tooltip implementation in [range](/docs/components/range).
+Tooltip styles are shared between the [tooltip](/docs/components/tooltip) component and the tooltips in [slider](/docs/components/slider) and [copy button](/docs/components/copy-button).
 
-| Custom Property              | Default Value                       |
-| ---------------------------- | ----------------------------------- |
-| `--wa-tooltip-arrow-size`    | `0.375rem` <small>(6px)</small>     |
-| `--wa-tooltip-background-color`    | `var(--wa-color-neutral-fill-loud)` |
-| `--wa-tooltip-border-radius` | `var(--wa-border-radius-m)`         |
-| `--wa-tooltip-content-color` | `var(--wa-color-neutral-on-loud)`   |
-| `--wa-tooltip-font-size`     | `var(--wa-font-size-s)`             |
-| `--wa-tooltip-line-height`   | `var(--wa-line-height-normal)`      |
+| Custom Property                 | Default Value                        |
+| ------------------------------- | ------------------------------------ |
+| `--wa-tooltip-arrow-size`       | `0.375rem` <small>(6px)</small>      |
+| `--wa-tooltip-background-color` | `var(--wa-color-neutral-fill-loud)`  |
+| `--wa-tooltip-border-color`     | `var(--wa-tooltip-background-color)` |
+| `--wa-tooltip-border-style`     | `var(--wa-border-style)`             |
+| `--wa-tooltip-border-width`     | `var(--wa-border-width-s)`           |
+| `--wa-tooltip-border-radius`    | `var(--wa-border-radius-s)`          |
+| `--wa-tooltip-content-color`    | `var(--wa-color-neutral-on-loud)`    |
+| `--wa-tooltip-font-size`        | `var(--wa-font-size-s)`              |
+| `--wa-tooltip-line-height`      | `var(--wa-line-height-normal)`       |
 
 ```html {.example}
 <wa-button id="bullseye-example" appearance="plain">

packages/webawesome/docs/docs/utilities/native.md

@@ -380,6 +380,19 @@ Add the `wa-pill` class to give buttons rounded edges.
 <button class="wa-pill">Pill button</button>
 ```
 
+When using `<wa-icon>` within a button, wrap adjacent label text in `<span>` or similar to automatically add margin between the icon and the label, just like the `start` and `end` slots of `<wa-button>`.
+
+```html {.example}
+<button>
+  <wa-icon name="plane-departure"></wa-icon>
+  <span>Start Icon</span>
+</button>
+<button>
+  <span>End Icon</span>
+  <wa-icon name="plane-arrival"></wa-icon>
+</button>
+```
+
 ### Form controls
 
 Create a variety of form controls with `<input type="">`, `<select>`, and `<textarea>`. Each control closely matches the appearance of the corresponding Web Awesome component.
@@ -391,6 +404,7 @@ 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>
@@ -417,6 +431,27 @@ 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}
@@ -440,6 +475,12 @@ 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="b10bfbde90">
+<html lang="en" class="wa-cloak" data-fa-kit-code="38c11e3f20">
   <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" fixed-width></wa-icon></dt>
+                <dt><wa-icon name="user" label="Name"></wa-icon></dt>
                 <dd>Tom Bombadil</dd>
               </div>
               <div class="wa-flank wa-align-items-center">
-                <dt><wa-icon name="calendar-days" label="Date" fixed-width></wa-icon></dt>
+                <dt><wa-icon name="calendar-days" label="Date"></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" fixed-width></wa-icon></dt>
+                <dt><wa-icon name="coin-vertical"></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" fixed-width></wa-icon>
+                <wa-icon name="user"></wa-icon>
                 <span class="wa-caption-m">9 users</span>
               </div>
               <div class="wa-flank">
-                <wa-icon name="ring" fixed-width></wa-icon>
+                <wa-icon name="ring"></wa-icon>
                 <span class="wa-caption-m">1 ring</span>
               </div>
               <div class="wa-flank">
-                <wa-icon name="chess-rook" fixed-width></wa-icon>
+                <wa-icon name="chess-rook"></wa-icon>
                 <span class="wa-caption-m">API access to Isengard</span>
               </div>
               <div class="wa-flank">
-                <wa-icon name="feather" fixed-width></wa-icon>
+                <wa-icon name="feather"></wa-icon>
                 <span class="wa-caption-m">Priority eagle support</span>
               </div>
             </div>

packages/webawesome/docs/index.md

@@ -273,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" fixed-width></wa-icon>
+            <wa-icon name="sparkles" variant="regular"></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>
@@ -285,10 +285,10 @@ layout: page
         <div class="wa-stack">
           <div class="wa-split">
             <div class="wa-cluster icon-heading">
-              <wa-icon name="pen-ruler" fixed-width class="brand-orange"></wa-icon>
+              <wa-icon name="pen-ruler" class="brand-orange"></wa-icon>
               <h3>Get started</h3>
             </div>
-            <wa-icon name="arrow-right" fixed-width></wa-icon>
+            <wa-icon name="arrow-right"></wa-icon>
           </div>
           <p>Check out our installation guide to start building with Web Awesome.</p>
         </div>
@@ -302,28 +302,28 @@ layout: page
     <div class="grid">
       <div class="wa-stack">
         <div class="wa-cluster icon-heading">
-          <wa-icon name="code" fixed-width class="brand-orange"></wa-icon>
+          <wa-icon name="code" 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" fixed-width class="brand-orange"></wa-icon>
+          <wa-icon name="palette" 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" fixed-width class="brand-orange"></wa-icon>
+          <wa-icon name="wheelchair-move" 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" fixed-width class="brand-orange"></wa-icon>
+          <wa-icon name="handshake-simple" 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>
@@ -342,22 +342,22 @@ layout: page
         <div class="wa-stack">
           <div class="wa-split">
             <div class="wa-cluster icon-heading">
-              <wa-icon family="brands" name="github" fixed-width></wa-icon>
+              <wa-icon family="brands" name="github"></wa-icon>
               <h3>GitHub</h3>
             </div>
-            <wa-icon name="arrow-up-right" fixed-width></wa-icon>
+            <wa-icon name="arrow-up-right"></wa-icon>
           </div>
           <p>Get involved by opening issues, contributing to discussions, or creating PRs.</p>
         </div>
       </wa-button>
-      <wa-button href="https://discord.gg/a74U7eYH" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
+      <wa-button href="https://discord.gg/mg8f26C" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
         <div class="wa-stack">
           <div class="wa-split">
             <div class="wa-cluster icon-heading">
-              <wa-icon family="brands" name="discord" fixed-width></wa-icon>
+              <wa-icon family="brands" name="discord"></wa-icon>
               <h3>Discord</h3>
             </div>
-            <wa-icon name="arrow-up-right" fixed-width></wa-icon>
+            <wa-icon name="arrow-up-right"></wa-icon>
           </div>
           <p>Share your work, ask questions, and explore ideas with other Web Awesome builders.</p>
         </div>
@@ -365,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" fixed-width></wa-icon>
+            <wa-icon name="envelope-open"></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" fixed-width></wa-icon>
+          <wa-icon name="arrow-up-right"></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">
@@ -388,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" fixed-width></wa-icon>
+            <wa-icon family="brands" name="bluesky"></wa-icon>
             <h3>Bluesky</h3>
           </div>
-          <wa-icon name="arrow-up-right" fixed-width></wa-icon>
+          <wa-icon name="arrow-up-right"></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" fixed-width></wa-icon>
+            <wa-icon family="brands" name="x-twitter"></wa-icon>
             <h3>Twitter (X)</h3>
           </div>
-          <wa-icon name="arrow-up-right" fixed-width></wa-icon>
+          <wa-icon name="arrow-up-right"></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" fixed-width></wa-icon>
+            <wa-icon family="brands" name="threads"></wa-icon>
             <h3>Threads</h3>
           </div>
-          <wa-icon name="arrow-up-right" fixed-width></wa-icon>
+          <wa-icon name="arrow-up-right"></wa-icon>
         </div>
       </wa-button>
     </div>
   </div>
 
-  <wa-divider></wa-divider>
+<wa-divider></wa-divider>
 
   <footer>
     <div class="wa-crown">
@@ -442,4 +442,4 @@ layout: page
       &copy; Fonticons, Inc.
     </div>
   </footer>
-</div>
+</div>

packages/webawesome/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.4",
   "homepage": "https://webawesome.com/",
   "author": "Web Awesome",
   "license": "MIT",
@@ -19,6 +19,7 @@
       "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",
@@ -73,6 +74,7 @@
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",
     "@floating-ui/dom": "^1.6.13",
+    "@lit/react": "^1.0.8",
     "@shoelace-style/animations": "^1.2.0",
     "@shoelace-style/localize": "^3.2.1",
     "composed-offset-position": "^0.0.6",
@@ -85,5 +87,8 @@
     "*.{ts,js}": [
       "prettier --write"
     ]
+  },
+  "devDependencies": {
+    "@wc-toolkit/jsx-types": "^1.3.0"
   }
 }

packages/webawesome/scripts/build.js

@@ -34,7 +34,8 @@ const isDeveloping = process.argv.includes('--develop');
  * @typedef {Object} BuildOptions
  * @property {Array<string>} [watchedSrcDirectories]
  * @property {Array<string>} [watchedDocsDirectories]
- * @property {(eventName: "change" | "add" | "unlink", filePath: string) => unknown} [onWatchEvent]
+ * @property {(eventName: "change" | "add" | "unlink", filePath: string) => unknown} [beforeWatchEvent]
+ * @property {(eventName: "change" | "add" | "unlink", filePath: string) => unknown} [afterWatchEvent]
  */
 
 /**
@@ -49,8 +50,6 @@ export async function build(options = {}) {
     options.watchedDocsDirectories = [getDocsDir()];
   }
 
-  function measureStep() {}
-
   /**
    * Runs the full build.
    */
@@ -122,6 +121,11 @@ export async function build(options = {}) {
    * Generates React wrappers for all components.
    */
   function generateReactWrappers() {
+    // Used by webawesome-app to make re-rendering not miserable with extra React file generation.
+    if (process.env.SKIP_SLOW_STEPS === 'true') {
+      return Promise.resolve();
+    }
+
     spinner.start('Generating React wrappers');
 
     try {
@@ -156,6 +160,11 @@ export async function build(options = {}) {
    * Runs TypeScript to generate types.
    */
   async function generateTypes() {
+    // Used by webawesome-app to make re-rendering not miserable with extra TS compilations.
+    if (process.env.SKIP_SLOW_STEPS === 'true') {
+      return Promise.resolve();
+    }
+
     spinner.start('Running the TypeScript compiler');
 
     const cwd = process.cwd();
@@ -377,22 +386,25 @@ export async function build(options = {}) {
       },
     );
 
-    // TODO: Should probably listen for all of these instead of just "change"
-    const watchEvents = [
-      'change',
-      // "unlink",
-      // "add"
-    ];
+    const watchEvents = ['change', 'unlink', 'add'];
     // Rebuild and reload when source files change
     options.watchedSrcDirectories.forEach(dir => {
-      const watcher = bs.watch(join(dir, '**', '!(*.test).*'));
+      const watcher = bs.watch(join(dir, '**', '!(*.test).*'), { ignoreInitial: true });
 
       watchEvents.forEach(evt => {
         watcher.on(evt, handleWatchEvent(evt));
       });
       function handleWatchEvent(evt) {
         return async filename => {
-          spinner.info(`File modified ${chalk.gray(`(${relative(getRootDir(), filename)})`)}`);
+          const changedFile = relative(getRootDir(), filename);
+
+          if (evt === 'change') {
+            spinner.info(`File modified ${chalk.gray(`(${changedFile})`)}`);
+          } else if (evt === 'unlink') {
+            spinner.info(`File deleted ${chalk.gray(`(${changedFile})`)}`);
+          } else if (evt === 'add') {
+            spinner.info(`File added ${chalk.gray(`(${changedFile})`)}`);
+          }
 
           try {
             const isTestFile = filename.includes('.test.ts');
@@ -405,8 +417,8 @@ export async function build(options = {}) {
               return;
             }
 
-            if (typeof options.onWatchEvent === 'function') {
-              await options.onWatchEvent(evt, filename);
+            if (typeof options.beforeWatchEvent === 'function') {
+              await options.beforeWatchEvent(evt, filename);
             }
 
             // Copy stylesheets when CSS files change
@@ -426,6 +438,10 @@ export async function build(options = {}) {
             // This needs to be outside of "isComponent" check because SSR needs to run on CSS files too.
             await generateDocs({ spinner });
 
+            if (typeof options.afterWatchEvent === 'function') {
+              await options.afterWatchEvent(evt, filename);
+            }
+
             reload();
           } catch (err) {
             console.error(chalk.red(err));
@@ -440,7 +456,7 @@ export async function build(options = {}) {
 
     // Rebuild the docs and reload when the docs change
     options.watchedDocsDirectories.forEach(dir => {
-      const watcher = bs.watch(join(dir, '**', '*.*'));
+      const watcher = bs.watch(join(dir, '**', '*.*'), { ignoreInitial: true });
 
       watchEvents.forEach(evt => {
         watcher.on(evt, handleWatchEvent(evt));
@@ -448,11 +464,33 @@ export async function build(options = {}) {
 
       function handleWatchEvent(evt) {
         return async filename => {
-          spinner.info(`File modified ${chalk.gray(`(${relative(getRootDir(), filename)})`)}`);
-          if (typeof options.onWatchEvent === 'function') {
-            await options.onWatchEvent(evt, 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);
+            }
+          }
+
+          if (typeof options.beforeWatchEvent === 'function') {
+            await options.beforeWatchEvent(evt, filename);
           }
           await generateDocs({ spinner });
+
+          if (typeof options.afterWatchEvent === 'function') {
+            await options.afterWatchEvent(evt, filename);
+          }
           reload();
         };
       }

packages/webawesome/scripts/docs.js

@@ -72,7 +72,6 @@ export async function generateDocs(options = {}) {
   isDeveloping ??= process.argv.includes('--develop');
   isIncremental ??= isDeveloping && !process.argv.includes('--no-incremental');
 
-  let eleventy = globalThis.eleventy;
   /**
    * Used by the webawesome-app to skip doc generation since it will do its own.
    */
@@ -80,6 +79,8 @@ export async function generateDocs(options = {}) {
     return;
   }
 
+  let eleventy = globalThis.eleventy;
+
   spinner?.start?.('Writing the docs');
 
   const outputs = {
@@ -118,7 +119,7 @@ export async function generateDocs(options = {}) {
           return !line.includes('Watching');
         });
         const lastLine = info[info.length - 1];
-        output = chalk.gray(`(${lastLine})`);
+        output = chalk.gray(`(${info.join('')})`);
         eleventy.logger.logger.reset();
       }
     } else {
@@ -137,13 +138,23 @@ export async function generateDocs(options = {}) {
     if (!isDeveloping) {
       await copy(getCdnDir(), join(getSiteDir(), 'dist'));
     }
-    spinner?.succeed?.(`Writing the docs ${output}`);
+
+    if (spinner) {
+      spinner.succeed(`Writing the docs ${output}`);
+    } else {
+      console.log(`Writing the docs ${output}`);
+    }
   } catch (error) {
     console.warn = originalWarn;
 
     console.error('\n\n' + chalk.red(error) + '\n');
 
-    spinner?.fail?.(chalk.red(`Error while writing the docs.`));
+    if (spinner) {
+      spinner.fail(chalk.red(`Error while writing the docs.`));
+    } else {
+      console.error(chalk.red(`Error while writing the docs.`));
+    }
+
     if (!isDeveloping) {
       process.exit(1);
     }

packages/webawesome/src/components/animated-image/animated-image.css

@@ -42,7 +42,7 @@ img[aria-hidden='true'] {
   }
 }
 
-:host([play]:not(:hover)) .control-box {
+:where(:host([play]:not(:hover))) .control-box {
   opacity: 0;
 }
 
@@ -50,3 +50,16 @@ img[aria-hidden='true'] {
 :host(:not([play])) slot[name='pause-icon'] {
   display: none;
 }
+
+/* Show control box on keyboard focus */
+.animated-image {
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible .control-box {
+    opacity: 1;
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+}

packages/webawesome/src/components/animated-image/animated-image.ts

@@ -4,6 +4,7 @@ import { WaErrorEvent } from '../../events/error.js';
 import { WaLoadEvent } from '../../events/load.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import styles from './animated-image.css';
 
@@ -30,6 +31,8 @@ import styles from './animated-image.css';
 export default class WaAnimatedImage extends WebAwesomeElement {
   static css = styles;
 
+  private readonly localize = new LocalizeController(this);
+
   @query('.animated') animatedImage: HTMLImageElement;
 
   @state() frozenFrame: string;
@@ -48,6 +51,13 @@ export default class WaAnimatedImage extends WebAwesomeElement {
     this.play = !this.play;
   }
 
+  private handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.play = !this.play;
+    }
+  }
+
   private handleLoad() {
     const canvas = document.createElement('canvas');
     const { width, height } = this.animatedImage;
@@ -82,15 +92,26 @@ export default class WaAnimatedImage extends WebAwesomeElement {
   }
 
   render() {
+    const verb = this.localize.term(this.play ? 'pauseAnimation' : 'playAnimation');
+    const label = `${verb} ${this.alt}`;
+
     return html`
-      <div class="animated-image">
+      <div
+        class="animated-image"
+        tabindex="0"
+        role="button"
+        aria-pressed=${this.play ? 'true' : 'false'}
+        aria-label=${label}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
         <img
           class="animated"
           src=${this.src}
           alt=${this.alt}
           crossorigin="anonymous"
           aria-hidden=${this.play ? 'false' : 'true'}
-          @click=${this.handleClick}
+          role="presentation"
           @load=${this.handleLoad}
           @error=${this.handleError}
         />
@@ -102,10 +123,10 @@ export default class WaAnimatedImage extends WebAwesomeElement {
                 src=${this.frozenFrame}
                 alt=${this.alt}
                 aria-hidden=${this.play ? 'true' : 'false'}
-                @click=${this.handleClick}
+                role="presentation"
               />
 
-              <div part="control-box" class="control-box">
+              <div part="control-box" class="control-box" aria-hidden="true">
                 <slot name="play-icon">
                   <wa-icon
                     name="play"

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

@@ -3,7 +3,6 @@ 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';
@@ -20,7 +19,7 @@ import styles from './button-group.css';
  */
 @customElement('wa-button-group')
 export default class WaButtonGroup extends WebAwesomeElement {
-  static css = [sizeStyles, variantStyles, styles];
+  static css = [variantStyles, styles];
 
   @query('slot') defaultSlot: HTMLSlotElement;
 
@@ -36,9 +35,6 @@ 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';
 
@@ -85,7 +81,6 @@ 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,6 +1,9 @@
 @layer wa-component {
   :host {
     display: inline-block;
+  }
+
+  :host(:has(wa-badge)) {
     position: relative;
   }
 }
@@ -184,6 +187,10 @@
 }
 
 .label {
+  display: inline-block;
+}
+
+.is-icon-button .label {
   display: flex;
 }
 

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

@@ -25,13 +25,8 @@ 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 accent' = 'outlined filled';
+  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' | 'outlined filled' =
+    'outlined filled';
 
   /** The callout's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';

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

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

packages/webawesome/src/components/checkbox/checkbox.ts

@@ -234,13 +234,14 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
       </label>
 
       <slot
+        id="hint"
+        part="hint"
         name="hint"
         aria-hidden=${hasHint ? 'false' : 'true'}
         class="${classMap({ 'has-slotted': hasHint })}"
-        id="hint"
-        part="hint"
-        >${this.hint}</slot
       >
+        ${this.hint}
+      </slot>
     `;
   }
 }

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 `wa-change` event from bubbling up
+    // Prevent the `<wa-input>` element's `change` event from bubbling up
     event.stopPropagation();
 
     if (this.input.value) {
@@ -1310,6 +1310,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         ></button>
 
         <slot
+          id="hint"
           name="hint"
           part="hint"
           class=${classMap({

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" fixed-width></wa-icon>
+          <wa-icon library="system" name="copy" variant="regular"></wa-icon>
         </slot>
         <slot part="success-icon" name="success-icon" variant="solid" hidden>
-          <wa-icon library="system" name="check" fixed-width></wa-icon>
+          <wa-icon library="system" name="check"></wa-icon>
         </slot>
         <slot part="error-icon" name="error-icon" variant="solid" hidden>
-          <wa-icon library="system" name="xmark" fixed-width></wa-icon>
+          <wa-icon library="system" name="xmark"></wa-icon>
         </slot>
         <wa-tooltip
           class=${classMap({

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

@@ -81,6 +81,7 @@ details {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--spacing);
   user-select: none;
   -webkit-user-select: none;
   cursor: pointer;
@@ -101,6 +102,12 @@ details {
   }
 }
 
+/* 'Start' icon placement */
+:host([icon-placement='start']) summary {
+  flex-direction: row-reverse;
+  justify-content: start;
+}
+
 [part~='icon'] {
   flex: 0 0 auto;
   display: flex;
@@ -122,8 +129,7 @@ details {
   display: none;
 }
 
-/* Overflows get clipped during the closing animation if we don't wait until the close is gone. */
-:host(:not([open])) .body {
+.body.animating {
   overflow: hidden;
 }
 
@@ -133,10 +139,3 @@ details {
   padding-inline: var(--spacing); /* Add horizontal padding */
   padding-block-end: var(--spacing); /* Add bottom padding */
 }
-
-@keyframes show {
-  from {
-  }
-  to {
-  }
-}

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

@@ -1,5 +1,7 @@
+import type { PropertyValues } from 'lit';
 import { html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { WaAfterHideEvent } from '../../events/after-hide.js';
 import { WaAfterShowEvent } from '../../events/after-show.js';
 import { WaHideEvent } from '../../events/hide.js';
@@ -40,6 +42,8 @@ import styles from './details.css';
  * @cssproperty --spacing - The amount of space around and between the details' content. Expects a single value.
  * @cssproperty [--show-duration=200ms] - The show duration to use when applying built-in animation classes.
  * @cssproperty [--hide-duration=200ms] - The hide duration to use when applying built-in animation classes.
+ *
+ * @cssstate animating - Applied when the details is animating expand/collapse.
  */
 @customElement('wa-details')
 export default class WaDetails extends WebAwesomeElement {
@@ -53,6 +57,8 @@ export default class WaDetails extends WebAwesomeElement {
   @query('.body') body: HTMLElement;
   @query('.expand-icon-slot') expandIconSlot: HTMLSlotElement;
 
+  @state() isAnimating = false;
+
   /**
    * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
    * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
@@ -71,6 +77,14 @@ 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';
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.detailsObserver?.disconnect();
+  }
+
   firstUpdated() {
     this.body.style.height = this.open ? 'auto' : '0';
     if (this.open) {
@@ -91,9 +105,10 @@ export default class WaDetails extends WebAwesomeElement {
     this.detailsObserver.observe(this.details, { attributes: true });
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.detailsObserver?.disconnect();
+  updated(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('isAnimating')) {
+      this.customStates.set('animating', this.isAnimating);
+    }
   }
 
   private handleSummaryClick(event: MouseEvent) {
@@ -168,6 +183,7 @@ export default class WaDetails extends WebAwesomeElement {
       // Close other details with the same name
       this.closeOthersWithSameName();
 
+      this.isAnimating = true;
       const duration = parseDuration(getComputedStyle(this.body).getPropertyValue('--show-duration'));
       // We can't animate to 'auto', so use the scroll height for now
       await animate(
@@ -182,6 +198,7 @@ export default class WaDetails extends WebAwesomeElement {
         },
       );
       this.body.style.height = 'auto';
+      this.isAnimating = false;
 
       this.dispatchEvent(new WaAfterShowEvent());
     } else {
@@ -194,6 +211,7 @@ export default class WaDetails extends WebAwesomeElement {
         return;
       }
 
+      this.isAnimating = true;
       const duration = parseDuration(getComputedStyle(this.body).getPropertyValue('--hide-duration'));
       // We can't animate from 'auto', so use the scroll height for now
       await animate(
@@ -205,7 +223,7 @@ export default class WaDetails extends WebAwesomeElement {
         { duration, easing: 'linear' },
       );
       this.body.style.height = 'auto';
-
+      this.isAnimating = false;
       this.details.open = false;
       this.dispatchEvent(new WaAfterHideEvent());
     }
@@ -250,25 +268,22 @@ 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'}
-                fixed-width
-              ></wa-icon>
+              <wa-icon library="system" variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
             </slot>
             <slot name="collapse-icon">
-              <wa-icon
-                library="system"
-                variant="solid"
-                name=${isRtl ? 'chevron-left' : 'chevron-right'}
-                fixed-width
-              ></wa-icon>
+              <wa-icon library="system" variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
             </slot>
           </span>
         </summary>
 
-        <div class="body" role="region" aria-labelledby="header">
+        <div
+          class=${classMap({
+            body: true,
+            animating: this.isAnimating,
+          })}
+          role="region"
+          aria-labelledby="header"
+        >
           <slot part="content" id="content" class="content"></slot>
         </div>
       </details>

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

@@ -205,9 +205,7 @@ export default class WaDialog extends WebAwesomeElement {
   }
 
   render() {
-    const hasHeader =
-      !this.withoutHeader &&
-      (this.label.length > 0 || this.hasSlotController.test('label') || this.hasSlotController.test('header-actions'));
+    const hasHeader = !this.withoutHeader;
     const hasFooter = this.hasSlotController.test('footer');
 
     return html`

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

@@ -218,9 +218,7 @@ export default class WaDrawer extends WebAwesomeElement {
   }
 
   render() {
-    const hasHeader =
-      !this.withoutHeader &&
-      (this.label.length > 0 || this.hasSlotController.test('label') || this.hasSlotController.test('header-actions'));
+    const hasHeader = !this.withoutHeader;
     const hasFooter = this.hasSlotController.test('footer');
 
     return html`

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

@@ -17,6 +17,9 @@
   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,6 +8,7 @@ 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';
@@ -123,19 +124,30 @@ export default class WaDropdown extends WebAwesomeElement {
     }
   }
 
-  /** Gets all <wa-dropdown-item> elements slotted in the menu that aren't disabled. */
+  /** Gets all dropdown items slotted in the menu. */
   private getItems(includeDisabled = false): WaDropdownItem[] {
-    const items = [...this.children].filter(
-      el => el.localName === 'wa-dropdown-item' && !el.hasAttribute('slot'),
-    ) as WaDropdownItem[];
+    const items = this.defaultSlot
+      .assignedElements({ flatten: true })
+      .filter(el => el.localName === 'wa-dropdown-item') 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[] {
-    const items = [...parentItem.children].filter(
-      el => el.localName === 'wa-dropdown-item' && el.getAttribute('slot') === 'submenu',
-    ) as 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[];
+
     return includeDisabled ? items : items.filter(item => !item.disabled);
   }
 
@@ -277,7 +289,7 @@ export default class WaDropdown extends WebAwesomeElement {
       return;
     }
 
-    const activeElement = document.activeElement as HTMLElement;
+    const activeElement = [...activeElements()].find(el => el.localName === 'wa-dropdown-item');
     const isFocusedOnItem = activeElement?.localName === 'wa-dropdown-item';
     const currentSubmenuItem = this.getCurrentSubmenuItem();
     const isInSubmenu = !!currentSubmenuItem;
@@ -706,7 +718,9 @@ export default class WaDropdown extends WebAwesomeElement {
         flip
         flip-fallback-strategy="best-fit"
         shift
-        shift-padding="8"
+        shift-padding="10"
+        auto-size="vertical"
+        auto-size-padding="10"
       >
         <slot
           name="trigger"

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

@@ -4,30 +4,38 @@
   --secondary-color: currentColor;
   --secondary-opacity: 0.4;
 
+  box-sizing: content-box;
   display: inline-flex;
-  box-sizing: content-box !important;
+  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]) {
   width: auto;
   height: 1em;
 }
 
 svg {
-  display: inline-block;
-  width: auto;
-  height: inherit;
+  height: 1em;
   fill: currentColor;
+  overflow: visible;
 
-  .fa-primary {
+  /* Duotone colors with path-specific opacity fallback */
+  path[data-duotone-primary] {
     color: var(--primary-color);
-    opacity: var(--primary-opacity);
+    opacity: var(--path-opacity, var(--primary-opacity));
   }
 
-  .fa-secondary {
+  path[data-duotone-secondary] {
     color: var(--secondary-color);
-    opacity: var(--secondary-opacity);
+    opacity: var(--path-opacity, var(--secondary-opacity));
   }
 }
-
-:host([fixed-width]) {
-  width: 1em;
-  justify-content: center;
-}

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

@@ -133,17 +133,6 @@ 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

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

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

@@ -1,11 +1,55 @@
 import { getKitCode } from '../../utilities/base-path.js';
 import type { IconLibrary } from './library.js';
 
+const FA_VERSION = '7.0.0';
+
 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';
@@ -45,8 +89,8 @@ function getIconUrl(name: string, family: string, variant: string) {
 
   // Use the default CDN
   return isPro
-    ? `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`;
+    ? `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`;
 }
 
 const library: IconLibrary = {
@@ -54,6 +98,46 @@ 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" 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>`,
+    check: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z"/></svg>`,
+    'chevron-down': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"/></svg>`,
+    'chevron-left': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M169.4 297.4C156.9 309.9 156.9 330.2 169.4 342.7L361.4 534.7C373.9 547.2 394.2 547.2 406.7 534.7C419.2 522.2 419.2 501.9 406.7 489.4L237.3 320L406.6 150.6C419.1 138.1 419.1 117.8 406.6 105.3C394.1 92.8 373.8 92.8 361.3 105.3L169.3 297.3z"/></svg>`,
+    'chevron-right': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z"/></svg>`,
+    circle: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z"/></svg>`,
+    eyedropper: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M405.6 93.2L304 194.8L294.6 185.4C282.1 172.9 261.8 172.9 249.3 185.4C236.8 197.9 236.8 218.2 249.3 230.7L409.3 390.7C421.8 403.2 442.1 403.2 454.6 390.7C467.1 378.2 467.1 357.9 454.6 345.4L445.2 336L546.8 234.4C585.8 195.4 585.8 132.2 546.8 93.3C507.8 54.4 444.6 54.3 405.7 93.3zM119.4 387.3C104.4 402.3 96 422.7 96 443.9L96 486.3L69.4 526.2C60.9 538.9 62.6 555.8 73.4 566.6C84.2 577.4 101.1 579.1 113.8 570.6L153.7 544L196.1 544C217.3 544 237.7 535.6 252.7 520.6L362.1 411.2L316.8 365.9L207.4 475.3C204.4 478.3 200.3 480 196.1 480L160 480L160 443.9C160 439.7 161.7 435.6 164.7 432.6L274.1 323.2L228.8 277.9L119.4 387.3z"/></svg>`,
+    'grip-vertical': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M288 104C288 81.9 270.1 64 248 64L200 64C177.9 64 160 81.9 160 104L160 152C160 174.1 177.9 192 200 192L248 192C270.1 192 288 174.1 288 152L288 104zM288 296C288 273.9 270.1 256 248 256L200 256C177.9 256 160 273.9 160 296L160 344C160 366.1 177.9 384 200 384L248 384C270.1 384 288 366.1 288 344L288 296zM160 488L160 536C160 558.1 177.9 576 200 576L248 576C270.1 576 288 558.1 288 536L288 488C288 465.9 270.1 448 248 448L200 448C177.9 448 160 465.9 160 488zM480 104C480 81.9 462.1 64 440 64L392 64C369.9 64 352 81.9 352 104L352 152C352 174.1 369.9 192 392 192L440 192C462.1 192 480 174.1 480 152L480 104zM352 296L352 344C352 366.1 369.9 384 392 384L440 384C462.1 384 480 366.1 480 344L480 296C480 273.9 462.1 256 440 256L392 256C369.9 256 352 273.9 352 296zM480 488C480 465.9 462.1 448 440 448L392 448C369.9 448 352 465.9 352 488L352 536C352 558.1 369.9 576 392 576L440 576C462.1 576 480 558.1 480 536L480 488z"/></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 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320z"/></svg>`,
+    pause: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M176 96C149.5 96 128 117.5 128 144L128 496C128 522.5 149.5 544 176 544L240 544C266.5 544 288 522.5 288 496L288 144C288 117.5 266.5 96 240 96L176 96zM400 96C373.5 96 352 117.5 352 144L352 496C352 522.5 373.5 544 400 544L464 544C490.5 544 512 522.5 512 496L512 144C512 117.5 490.5 96 464 96L400 96z"/></svg>`,
+    play: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M187.2 100.9C174.8 94.1 159.8 94.4 147.6 101.6C135.4 108.8 128 121.9 128 136L128 504C128 518.1 135.5 531.2 147.6 538.4C159.7 545.6 174.8 545.9 187.2 539.1L523.2 355.1C536 348.1 544 334.6 544 320C544 305.4 536 291.9 523.2 284.9L187.2 100.9z"/></svg>`,
+    star: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M341.5 45.1C337.4 37.1 329.1 32 320.1 32C311.1 32 302.8 37.1 298.7 45.1L225.1 189.3L65.2 214.7C56.3 216.1 48.9 222.4 46.1 231C43.3 239.6 45.6 249 51.9 255.4L166.3 369.9L141.1 529.8C139.7 538.7 143.4 547.7 150.7 553C158 558.3 167.6 559.1 175.7 555L320.1 481.6L464.4 555C472.4 559.1 482.1 558.3 489.4 553C496.7 547.7 500.4 538.8 499 529.8L473.7 369.9L588.1 255.4C594.5 249 596.7 239.6 593.9 231C591.1 222.4 583.8 216.1 574.8 214.7L415 189.3L341.5 45.1z"/></svg>`,
+    user: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 312C386.3 312 440 258.3 440 192C440 125.7 386.3 72 320 72C253.7 72 200 125.7 200 192C200 258.3 253.7 312 320 312zM290.3 368C191.8 368 112 447.8 112 546.3C112 562.7 125.3 576 141.7 576L498.3 576C514.7 576 528 562.7 528 546.3C528 447.8 448.2 368 349.7 368L290.3 368z"/></svg>`,
+    xmark: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z"/></svg>`,
   },
   //
   // Regular variant
   //
   regular: {
-    '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>',
+    'circle-question': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M528 320C528 205.1 434.9 112 320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM320 240C302.3 240 288 254.3 288 272C288 285.3 277.3 296 264 296C250.7 296 240 285.3 240 272C240 227.8 275.8 192 320 192C364.2 192 400 227.8 400 272C400 319.2 364 339.2 344 346.5L344 350.3C344 363.6 333.3 374.3 320 374.3C306.7 374.3 296 363.6 296 350.3L296 342.2C296 321.7 310.8 307 326.1 302C332.5 299.9 339.3 296.5 344.3 291.7C348.6 287.5 352 281.7 352 272.1C352 254.4 337.7 240.1 320 240.1zM288 432C288 414.3 302.3 400 320 400C337.7 400 352 414.3 352 432C352 449.7 337.7 464 320 464C302.3 464 288 449.7 288 432z"/></svg>`,
+    'circle-xmark': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 112C434.9 112 528 205.1 528 320C528 434.9 434.9 528 320 528C205.1 528 112 434.9 112 320C112 205.1 205.1 112 320 112zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM231 231C221.6 240.4 221.6 255.6 231 264.9L286 319.9L231 374.9C221.6 384.3 221.6 399.5 231 408.8C240.4 418.1 255.6 418.2 264.9 408.8L319.9 353.8L374.9 408.8C384.3 418.2 399.5 418.2 408.8 408.8C418.1 399.4 418.2 384.2 408.8 374.9L353.8 319.9L408.8 264.9C418.2 255.5 418.2 240.3 408.8 231C399.4 221.7 384.2 221.6 374.9 231L319.9 286L264.9 231C255.5 221.6 240.3 221.6 231 231z"/></svg>`,
+    copy: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M480 400L288 400C279.2 400 272 392.8 272 384L272 128C272 119.2 279.2 112 288 112L421.5 112C425.7 112 429.8 113.7 432.8 116.7L491.3 175.2C494.3 178.2 496 182.3 496 186.5L496 384C496 392.8 488.8 400 480 400zM288 448L480 448C515.3 448 544 419.3 544 384L544 186.5C544 169.5 537.3 153.2 525.3 141.2L466.7 82.7C454.7 70.7 438.5 64 421.5 64L288 64C252.7 64 224 92.7 224 128L224 384C224 419.3 252.7 448 288 448zM160 192C124.7 192 96 220.7 96 256L96 512C96 547.3 124.7 576 160 576L352 576C387.3 576 416 547.3 416 512L416 496L368 496L368 512C368 520.8 360.8 528 352 528L160 528C151.2 528 144 520.8 144 512L144 256C144 247.2 151.2 240 160 240L176 240L176 192L160 192z"/></svg>`,
+    eye: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 144C254.8 144 201.2 173.6 160.1 211.7C121.6 247.5 95 290 81.4 320C95 350 121.6 392.5 160.1 428.3C201.2 466.4 254.8 496 320 496C385.2 496 438.8 466.4 479.9 428.3C518.4 392.5 545 350 558.6 320C545 290 518.4 247.5 479.9 211.7C438.8 173.6 385.2 144 320 144zM127.4 176.6C174.5 132.8 239.2 96 320 96C400.8 96 465.5 132.8 512.6 176.6C559.4 220.1 590.7 272 605.6 307.7C608.9 315.6 608.9 324.4 605.6 332.3C590.7 368 559.4 420 512.6 463.4C465.5 507.1 400.8 544 320 544C239.2 544 174.5 507.2 127.4 463.4C80.6 419.9 49.3 368 34.4 332.3C31.1 324.4 31.1 315.6 34.4 307.7C49.3 272 80.6 220 127.4 176.6zM320 400C364.2 400 400 364.2 400 320C400 290.4 383.9 264.5 360 250.7C358.6 310.4 310.4 358.6 250.7 360C264.5 383.9 290.4 400 320 400zM240.4 311.6C242.9 311.9 245.4 312 248 312C283.3 312 312 283.3 312 248C312 245.4 311.8 242.9 311.6 240.4C274.2 244.3 244.4 274.1 240.5 311.5zM286 196.6C296.8 193.6 308.2 192.1 319.9 192.1C328.7 192.1 337.4 193 345.7 194.7C346 194.8 346.2 194.8 346.5 194.9C404.4 207.1 447.9 258.6 447.9 320.1C447.9 390.8 390.6 448.1 319.9 448.1C258.3 448.1 206.9 404.6 194.7 346.7C192.9 338.1 191.9 329.2 191.9 320.1C191.9 309.1 193.3 298.3 195.9 288.1C196.1 287.4 196.2 286.8 196.4 286.2C208.3 242.8 242.5 208.6 285.9 196.7z"/></svg>`,
+    'eye-slash': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M73 39.1C63.6 29.7 48.4 29.7 39.1 39.1C29.8 48.5 29.7 63.7 39 73.1L567 601.1C576.4 610.5 591.6 610.5 600.9 601.1C610.2 591.7 610.3 576.5 600.9 567.2L504.5 470.8C507.2 468.4 509.9 466 512.5 463.6C559.3 420.1 590.6 368.2 605.5 332.5C608.8 324.6 608.8 315.8 605.5 307.9C590.6 272.2 559.3 220.2 512.5 176.8C465.4 133.1 400.7 96.2 319.9 96.2C263.1 96.2 214.3 114.4 173.9 140.4L73 39.1zM208.9 175.1C241 156.2 278.1 144 320 144C385.2 144 438.8 173.6 479.9 211.7C518.4 247.4 545 290 558.5 320C544.9 350 518.3 392.5 479.9 428.3C476.8 431.1 473.7 433.9 470.5 436.7L425.8 392C439.8 371.5 448 346.7 448 320C448 249.3 390.7 192 320 192C293.3 192 268.5 200.2 248 214.2L208.9 175.1zM390.9 357.1L282.9 249.1C294 243.3 306.6 240 320 240C364.2 240 400 275.8 400 320C400 333.4 396.7 346 390.9 357.1zM135.4 237.2L101.4 203.2C68.8 240 46.4 279 34.5 307.7C31.2 315.6 31.2 324.4 34.5 332.3C49.4 368 80.7 420 127.5 463.4C174.6 507.1 239.3 544 320.1 544C357.4 544 391.3 536.1 421.6 523.4L384.2 486C364.2 492.4 342.8 496 320 496C254.8 496 201.2 466.4 160.1 428.3C121.6 392.6 95 350 81.5 320C91.9 296.9 110.1 266.4 135.5 237.2z"/></svg>`,
+    star: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320.1 32C329.1 32 337.4 37.1 341.5 45.1L415 189.3L574.9 214.7C583.8 216.1 591.2 222.4 594 231C596.8 239.6 594.5 249 588.2 255.4L473.7 369.9L499 529.8C500.4 538.7 496.7 547.7 489.4 553C482.1 558.3 472.4 559.1 464.4 555L320.1 481.6L175.8 555C167.8 559.1 158.1 558.3 150.8 553C143.5 547.7 139.8 538.8 141.2 529.8L166.4 369.9L52 255.4C45.6 249 43.4 239.6 46.2 231C49 222.4 56.3 216.1 65.3 214.7L225.2 189.3L298.8 45.1C302.9 37.1 311.2 32 320.2 32zM320.1 108.8L262.3 222C258.8 228.8 252.3 233.6 244.7 234.8L119.2 254.8L209 344.7C214.4 350.1 216.9 357.8 215.7 365.4L195.9 490.9L309.2 433.3C316 429.8 324.1 429.8 331 433.3L444.3 490.9L424.5 365.4C423.3 357.8 425.8 350.1 431.2 344.7L521 254.8L395.5 234.8C387.9 233.6 381.4 228.8 377.9 222L320.1 108.8z"/></svg>`,
   },
 };
 

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

@@ -2,8 +2,9 @@ import type WaIcon from '../icon/icon.js';
 import defaultLibrary from './library.default.js';
 import systemLibrary from './library.system.js';
 
-export type IconLibraryResolver = (name: string, family: string, variant: string) => string;
-export type IconLibraryMutator = (svg: SVGElement) => void;
+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 interface IconLibrary {
   name: string;
   resolver: IconLibraryResolver;

packages/webawesome/src/components/input/input.ts

@@ -432,8 +432,9 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
       </div>
 
       <slot
-        name="hint"
+        id="hint"
         part="hint"
+        name="hint"
         class=${classMap({
           'has-slotted': hasHint,
         })}

packages/webawesome/src/components/popover/popover.ts

@@ -85,6 +85,9 @@ export default class WaPopover extends WebAwesomeElement {
   /** The ID of the popover's anchor element. This must be an interactive/focusable element such as a button. */
   @property() for: string | null = null;
 
+  /** Removes the arrow from the popover. */
+  @property({ attribute: 'without-arrow', type: Boolean, reflect: true }) withoutArrow = false;
+
   private eventController = new AbortController();
 
   connectedCallback() {
@@ -300,7 +303,7 @@ export default class WaPopover extends WebAwesomeElement {
           skidding=${this.skidding}
           flip
           shift
-          arrow
+          ?arrow=${!this.withoutArrow}
           .anchor=${this.anchor}
         >
           <div part="body" class="body" @click=${this.handleBodyClick}>

packages/webawesome/src/components/progress-ring/progress-ring.css

@@ -1,6 +1,6 @@
 :host {
   --size: 8rem;
-  --track-width: 0.25em; /* avoid using rems here - https://github.com/shoelace-style/webawesome-alpha/issues/89 */
+  --track-width: 0.25em; /* avoid using rems here */
   --track-color: var(--wa-color-neutral-fill-normal);
   --indicator-width: var(--track-width);
   --indicator-color: var(--wa-color-brand-fill-loud);

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

@@ -370,6 +370,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
         <slot part="form-control-input" @slotchange=${this.syncRadioElements}></slot>
 
         <slot
+          id="hint"
           name="hint"
           part="hint"
           class=${classMap({

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

@@ -20,6 +20,7 @@
 }
 
 #content {
+  z-index: 1; /* below shadows */
   border-radius: inherit;
   scroll-behavior: smooth;
   scrollbar-width: thin;
@@ -102,6 +103,7 @@
   #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,5 +1,7 @@
 :host {
   --tag-max-size: 10ch;
+  --show-duration: 100ms;
+  --hide-duration: 100ms;
 }
 
 /* Add ellipses to multi select options */
@@ -30,6 +32,10 @@
   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.test.ts

@@ -859,7 +859,6 @@ describe('<wa-select>', () => {
         });
       });
 
-      // https://github.com/shoelace-style/webawesome-alpha/issues/263
       it('should allow interaction after being disabled and re-enabled', async () => {
         const el = await fixture<WaSelect>(html`
           <wa-select label="Select one">

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

@@ -74,6 +74,8 @@ 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.

packages/webawesome/src/components/slider/slider.css

@@ -33,6 +33,8 @@
 }
 
 #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="
-                tooltip:tooltip__tooltip,
-                content:tooltip__content,
+                base:tooltip__base,
+                body:tooltip__body,
                 arrow:tooltip__arrow
               "
               trigger="manual"

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

@@ -329,7 +329,6 @@ describe('<wa-switch>', () => {
         expect(window.scrollY).to.equal(0);
       });
 
-      // https://github.com/shoelace-style/webawesome-alpha/discussions/124
       it('Should properly flag changes to checked and reflect', async () => {
         const el = await fixture<WaSwitch>(html`<wa-switch></wa-switch>`);
         await el.updateComplete;

packages/webawesome/src/components/switch/switch.ts

@@ -243,6 +243,7 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
       </label>
 
       <slot
+        id="hint"
         name="hint"
         part="hint"
         class=${classMap({

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

@@ -35,8 +35,7 @@ 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' | 'outlined accent' | 'filled' | 'outlined' | 'outlined filled' =
-    'outlined filled';
+  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'outlined filled' = 'outlined filled';
 
   /** The tag's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';

packages/webawesome/src/components/textarea/textarea.ts

@@ -374,6 +374,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
       </div>
 
       <slot
+        id="hint"
         name="hint"
         part="hint"
         aria-hidden=${hasHint ? 'false' : 'true'}

packages/webawesome/src/components/tooltip/tooltip.css

@@ -44,7 +44,13 @@
   max-width: var(--max-width);
   border-radius: var(--wa-tooltip-border-radius);
   background-color: var(--wa-tooltip-background-color);
+  border: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);
   padding: 0.25em 0.5em;
   user-select: none;
   -webkit-user-select: none;
 }
+
+.tooltip::part(arrow) {
+  border-bottom: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);
+  border-right: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);
+}

packages/webawesome/src/components/tooltip/tooltip.ts

@@ -89,6 +89,9 @@ export default class WaTooltip extends WebAwesomeElement {
    */
   @property() trigger = 'hover focus';
 
+  /** Removes the arrow from the tooltip. */
+  @property({ attribute: 'without-arrow', type: Boolean, reflect: true }) withoutArrow = false;
+
   @property() for: string | null = null;
 
   @state() anchor: null | Element = null;
@@ -332,7 +335,7 @@ export default class WaTooltip extends WebAwesomeElement {
         skidding=${this.skidding}
         flip
         shift
-        arrow
+        ?arrow=${!this.withoutArrow}
         hover-bridge
         .anchor=${this.anchor}
       >

packages/webawesome/src/internal/drag.ts

@@ -55,6 +55,8 @@ 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, {
@@ -85,9 +87,6 @@ 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/styles/native.css

@@ -560,125 +560,219 @@
   button,
   input[type='button'],
   input[type='reset'],
-  input[type='submit'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5em;
+  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;
 
-    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);
 
-    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;
+      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;
 
-    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);
+      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;
-
-    &.wa-plain {
-      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
-      background-color: transparent;
-      border-color: transparent;
-
-      &:not(:disabled):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(: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)
-        );
-      }
+      cursor: pointer;
+      user-select: none;
+      -webkit-user-select: none;
     }
 
-    &.wa-outlined {
-      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: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
-      }
-
-      &: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 {
-      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: color-mix(
-          in oklab,
-          var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
-          var(--wa-color-mix-hover)
-        );
-      }
-
-      &: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 {
-        border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
-      }
-    }
-
-    &.wa-accent {
+    /* 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));
       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) {
+        &: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):active {
-        background-color: color-mix(
-          in oklab,
-          var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
-          var(--wa-color-mix-active)
-        );
+      &: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 {
+        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+        background-color: transparent;
+        border-color: transparent;
+      }
+
+      &: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)
+          );
+        }
+      }
+    }
+
+    &.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) {
+        &: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)
+          );
+        }
+      }
+    }
+
+    &.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) {
+        &: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)
+          );
+        }
+      }
+
+      &.wa-outlined {
+        &:not(input[type='file']),
+        &::file-selector-button {
+          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;
+      }
+
+      &: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);
       }
     }
 
@@ -706,9 +800,34 @@
       }
     }
 
-    &.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(+ *) {
+      margin-inline-end: 0.75em;
     }
+
+    & > * + wa-icon {
+      margin-inline-start: 0.75em;
+    }
+  }
+  /* #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 */
 

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

@@ -351,6 +351,9 @@
 
     --wa-tooltip-background-color: var(--wa-color-text-normal);
 
+    --wa-tooltip-border-color: var(--wa-tooltip-background-color);
+    --wa-tooltip-border-style: var(--wa-border-style);
+    --wa-tooltip-border-width: var(--wa-border-width-s);
     --wa-tooltip-border-radius: var(--wa-border-radius-s);
 
     --wa-tooltip-content-color: var(--wa-color-surface-default);

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

@@ -347,6 +347,9 @@
 
     --wa-tooltip-background-color: var(--wa-color-text-normal);
 
+    --wa-tooltip-border-color: var(--wa-tooltip-background-color);
+    --wa-tooltip-border-style: var(--wa-border-style);
+    --wa-tooltip-border-width: var(--wa-border-width-s);
     --wa-tooltip-border-radius: var(--wa-border-radius-s);
 
     --wa-tooltip-content-color: var(--wa-color-surface-default);

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

@@ -350,6 +350,9 @@
 
     --wa-tooltip-background-color: var(--wa-color-text-normal);
 
+    --wa-tooltip-border-color: var(--wa-tooltip-background-color);
+    --wa-tooltip-border-style: var(--wa-border-style);
+    --wa-tooltip-border-width: var(--wa-border-width-s);
     --wa-tooltip-border-radius: var(--wa-border-radius-s);
 
     --wa-tooltip-content-color: var(--wa-color-surface-default);

packages/webawesome/src/translations/ar.ts

@@ -24,6 +24,8 @@ const translation: Translation = {
     if (num > 2 && num < 11) return `تم تحديد ${num} خيارات`;
     return `تم تحديد ${num} خيار`;
   },
+  pauseAnimation: 'إيقاف الرسوم المتحركة مؤقتًا',
+  playAnimation: 'تشغيل الرسوم المتحركة',
   previousSlide: 'الشريحة السابقة',
   progress: 'مقدار التقدم',
   remove: 'حذف',

packages/webawesome/src/translations/cs.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return 'Je vybrána jedna možnost';
     return `Počet vybraných možností: ${num}`;
   },
+  pauseAnimation: 'Pozastavit animaci',
+  playAnimation: 'Přehrát animaci',
   previousSlide: 'Předchozí slide',
   progress: 'Průběh',
   remove: 'Odstranit',

packages/webawesome/src/translations/da.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 valgt';
     return `${num} valgt`;
   },
+  pauseAnimation: 'Pause animation',
+  playAnimation: 'Afspil animation',
   previousSlide: 'Forrige dias',
   progress: 'Status',
   remove: 'Fjern',

packages/webawesome/src/translations/de.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 Option ausgewählt';
     return `${num} Optionen ausgewählt`;
   },
+  pauseAnimation: 'Animation pausieren',
+  playAnimation: 'Animation abspielen',
   previousSlide: 'Vorherige Folie',
   progress: 'Fortschritt',
   remove: 'Entfernen',
@@ -32,7 +34,7 @@ const translation: Translation = {
   selectAColorFromTheScreen: 'Farbe vom Bildschirm auswählen',
   showPassword: 'Passwort anzeigen',
   slideNum: slide => `Folie ${slide}`,
-  toggleColorFormat: 'Farbformat umschalten',
+  toggleColorFormat: 'Farbformat wechseln',
   zoomIn: 'Hineinzoomen',
   zoomOut: 'Herauszoomen',
 };

packages/webawesome/src/translations/en.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 option selected';
     return `${num} options selected`;
   },
+  pauseAnimation: 'Pause animation',
+  playAnimation: 'Play animation',
   previousSlide: 'Previous slide',
   progress: 'Progress',
   remove: 'Remove',

packages/webawesome/src/translations/es.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 opción seleccionada';
     return `${num} opción seleccionada`;
   },
+  pauseAnimation: 'Pausar animación',
+  playAnimation: 'Reproducir animación',
   previousSlide: 'Diapositiva anterior',
   progress: 'Progreso',
   remove: 'Eliminar',

packages/webawesome/src/translations/fa.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 گزینه انتخاب شده است';
     return `${num} گزینه انتخاب شده است`;
   },
+  pauseAnimation: 'مکث انیمیشن',
+  playAnimation: 'پخش انیمیشن',
   previousSlide: 'اسلاید قبلی',
   progress: 'پیشرفت',
   remove: 'حذف',

packages/webawesome/src/translations/fi.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return 'Yksi vaihtoehto valittu';
     return `${num} vaihtoehtoa valittu`;
   },
+  pauseAnimation: 'Keskeytä animaatio',
+  playAnimation: 'Toista animaatio',
   previousSlide: 'Edellinen dia',
   progress: 'Edistyminen',
   remove: 'Poista',

packages/webawesome/src/translations/fr.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 option sélectionnée';
     return `${num} options sélectionnées`;
   },
+  pauseAnimation: "Suspendre l'animation",
+  playAnimation: "Lire l'animation",
   previousSlide: 'Diapositive précédente',
   progress: 'Progrès',
   remove: 'Retirer',

packages/webawesome/src/translations/he.ts

@@ -16,13 +16,15 @@ const translation: Translation = {
   goToSlide: (slide, count) => `עבור לשקופית ${slide} של ${count}`,
   hidePassword: 'הסתר סיסמא',
   loading: 'טוען',
-  nextSlide: 'Next slide',
+  nextSlide: 'השקף הבא',
   numOptionsSelected: num => {
     if (num === 0) return 'לא נבחרו אפשרויות';
     if (num === 1) return 'נבחרה אפשרות אחת';
     return `נבחרו ${num} אפשרויות`;
   },
-  previousSlide: 'Previous slide',
+  pauseAnimation: 'השהה אנימציה',
+  playAnimation: 'נגן אנימציה',
+  previousSlide: 'שקופית קודמת',
   progress: 'התקדמות',
   remove: 'לְהַסִיר',
   resize: 'שנה גודל',

packages/webawesome/src/translations/hi.ts

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

packages/webawesome/src/translations/hr.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 opcija je odabrana';
     return `${num} odabranih opcija`;
   },
+  pauseAnimation: 'Pauziraj animaciju',
+  playAnimation: 'Reproduciraj animaciju',
   previousSlide: 'Prethodni slajd',
   progress: 'Napredak',
   remove: 'Makni',

packages/webawesome/src/translations/hu.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 lehetőség kiválasztva';
     return `${num} lehetőség kiválasztva`;
   },
+  pauseAnimation: 'Animáció szüneteltetése',
+  playAnimation: 'Animáció lejátszása',
   previousSlide: 'Előző dia',
   progress: 'Folyamat',
   remove: 'Eltávolítás',

packages/webawesome/src/translations/id.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 opsi yang dipilih';
     return `${num} opsi yang dipilih`;
   },
+  pauseAnimation: 'Jeda animasi',
+  playAnimation: 'Putar animasi',
   previousSlide: 'Slide sebelumnya',
   progress: 'Kemajuan',
   remove: 'Hapus',

packages/webawesome/src/translations/it.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 opzione selezionata';
     return `${num} opzioni selezionate`;
   },
+  pauseAnimation: 'Metti in pausa animazione',
+  playAnimation: 'Riproduci animazione',
   previousSlide: 'Diapositiva precedente',
   progress: 'Avanzamento',
   remove: 'Rimuovi',

packages/webawesome/src/translations/ja.ts

@@ -21,6 +21,8 @@ const translation: Translation = {
     if (num === 0) return '項目が選択されていません';
     return `${num} 個の項目が選択されました`;
   },
+  pauseAnimation: 'アニメーションを一時停止',
+  playAnimation: 'アニメーションを再生',
   previousSlide: '前のスライド',
   progress: '進行',
   remove: '削除',

packages/webawesome/src/translations/nb.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return 'Ett alternativ valgt';
     return `${num} alternativer valgt`;
   },
+  pauseAnimation: 'Sett animasjon på pause',
+  playAnimation: 'Spill av animasjon',
   previousSlide: 'Forrige visning',
   progress: 'Fremdrift',
   remove: 'Fjern',

packages/webawesome/src/translations/nl.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 optie geselecteerd';
     return `${num} opties geselecteerd`;
   },
+  pauseAnimation: 'Animatie pauzeren',
+  playAnimation: 'Animatie afspelen',
   previousSlide: 'Vorige dia',
   progress: 'Voortgang',
   remove: 'Verwijderen',

packages/webawesome/src/translations/nn.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return 'Eitt alternativ valt';
     return `${num} alternativ valt`;
   },
+  pauseAnimation: 'Set animasjon på pause',
+  playAnimation: 'Spel av animasjon',
   previousSlide: 'Førre visning',
   progress: 'Framdrift',
   remove: 'Fjern',

packages/webawesome/src/translations/pl.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return 'Wybrano 1 opcję';
     return `Wybrano ${num} opcje`;
   },
+  pauseAnimation: 'Wstrzymaj animację',
+  playAnimation: 'Odtwórz animację',
   previousSlide: 'Poprzedni slajd',
   progress: 'Postęp',
   remove: 'Usunąć',

packages/webawesome/src/translations/pt.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 opção selecionada';
     return `${num} opções selecionadas`;
   },
+  pauseAnimation: 'Pausar animação',
+  playAnimation: 'Reproduzir animação',
   previousSlide: 'Slide anterior',
   progress: 'Progresso',
   remove: 'Remover',

packages/webawesome/src/translations/ru.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return 'Выбран 1 вариант';
     return `выбрано ${num} варианта`;
   },
+  pauseAnimation: 'Приостановить анимацию',
+  playAnimation: 'Воспроизвести анимацию',
   previousSlide: 'Предыдущий слайд',
   progress: 'Прогресс',
   remove: 'Удалить',

packages/webawesome/src/translations/sl.ts

@@ -24,6 +24,8 @@ const translation: Translation = {
     if (num === 3 || num === 4) return `${num} možnosti izbrane`;
     return `${num} možnosti izbranih`;
   },
+  pauseAnimation: 'Zaustavi animacijo',
+  playAnimation: 'Predvajaj animacijo',
   previousSlide: 'Prejšnji diapozitiv',
   progress: 'Napredek',
   remove: 'Odstrani',

packages/webawesome/src/translations/sv.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 alternativ valt';
     return `${num} alternativ valda`;
   },
+  pauseAnimation: 'Pausa animation',
+  playAnimation: 'Spela upp animation',
   previousSlide: 'Föregående bild',
   progress: 'Framsteg',
   remove: 'Ta bort',

packages/webawesome/src/translations/tr.ts

@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 seçenek seçildi';
     return `${num} seçenek seçildi`;
   },
+  pauseAnimation: 'Animasyonu duraklat',
+  playAnimation: 'Animasyonu oynat',
   previousSlide: 'Bir onceki slayt',
   progress: 'İlerleme',
   remove: 'Kaldır',

packages/webawesome/src/translations/uk.ts

@@ -24,6 +24,8 @@ const translation: Translation = {
     if (n === 2 || n === 3 || n === 4) return `вибрано ${num} варіанти`;
     return `вибрано ${num} варіантів`;
   },
+  pauseAnimation: 'Призупинити анімацію',
+  playAnimation: 'Відтворити анімацію',
   previousSlide: 'Попередній слайд',
   progress: 'Поступ',
   remove: 'Видалити',