updated layouts again

added conditional
updated templates
2026-01-19 07:29:14 +00:00 · 2025-08-05 10:33:37 -05:00 · 2025-08-05 10:06:16 -05:00 · 2025-08-05 09:55:01 -05:00 · 2025-08-01 12:57:14 -04:00 · 2025-07-31 13:10:07 -04:00
72 changed files with 547 additions and 252 deletions
--- a/package-lock.json
+++ b/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.3",
      "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,49 @@
        "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": {},
      "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",
--- a/package.json
+++ b/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 @@
    ]
  }
 }
-
--- a/packages/webawesome/custom-elements-manifest.js
+++ b/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,12 @@ export default {
      },
    }),

+    // Generate JSX types (see https://wc-toolkit.com/integrations/jsx/)
+    jsxTypesPlugin({
+      fileName: 'custom-elements-jsx.d.ts',
+      outdir,
+    }),
+
    //
    // TODO - figure out why this broke when events were updated
    //
--- a/packages/webawesome/docs/.eleventy.js
+++ b/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;
--- a/packages/webawesome/docs/_includes/base.njk
+++ b/packages/webawesome/docs/_includes/base.njk
@@ -127,7 +127,7 @@
        {% block header %}
          <h1 class="title">{{ title }}</h1>
        {% endblock %}
-
+      
        {% block beforeContent %}{% endblock %}

        {% block content %}
--- a/packages/webawesome/docs/_includes/sidebar.njk
+++ b/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>
--- a/packages/webawesome/docs/_includes/visual-tests/color.njk
+++ b/packages/webawesome/docs/_includes/visual-tests/color.njk
@@ -12,9 +12,8 @@
      <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>
@@ -22,9 +21,8 @@
      </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>
@@ -35,9 +33,8 @@
      <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>
@@ -45,9 +42,8 @@
      </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>
@@ -58,9 +54,8 @@
      <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>
@@ -68,9 +63,8 @@
      </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>
@@ -81,9 +75,8 @@
      <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>
@@ -91,9 +84,8 @@
      </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>
@@ -104,9 +96,8 @@
      <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>
@@ -114,9 +105,8 @@
      </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>
@@ -142,9 +132,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 +141,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 +153,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 +162,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 +174,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 +183,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 +195,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 +204,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 +216,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 +225,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 +252,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 +276,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 +303,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 +327,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 +354,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 +378,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 +405,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 +429,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 +456,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 +480,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 +522,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 +531,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 +543,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 +552,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 +564,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 +573,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 +585,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 +594,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 +606,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 +615,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 +625,4 @@
    </tr>
  </tbody>
 </table>
-</div>
+</div>
--- a/packages/webawesome/docs/_layouts/pattern.njk
+++ b/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" %}
--- a/packages/webawesome/docs/docs/components/details.md
+++ b/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-position` attribute to `start` to place the icon at the start of the summary.
+
+```html {.example}
+<div class="wa-stack">
+  <wa-details summary="Start" icon-position="start">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+  <wa-details summary="End" icon-position="end">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+</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-position`, 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-position="start">
+    استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
+  </wa-details>
+</div>
 ```

 ### Appearance
--- a/packages/webawesome/docs/docs/components/dropdown.md
+++ b/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>
--- a/packages/webawesome/docs/docs/components/popover.md
+++ b/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>
 ```

--- a/packages/webawesome/docs/docs/components/tooltip.md
+++ b/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.
--- a/packages/webawesome/docs/docs/index.md
+++ b/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

@@ -46,6 +47,18 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You

 ---

+{# 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 +99,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 +116,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 +149,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.
+:::
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -12,6 +12,22 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh

 ### 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]
+
+### 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
+
+## 3.0.0-beta.3
+
+### New Features {data-no-outline}
+
 - Added `--track-height` custom property to `<wa-progress-bar>` [pr:1154]
 - Added `--pulse-color` custom property to `<wa-badge>` [pr:1173]

@@ -22,9 +38,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 +191,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 +411,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)
--- a/packages/webawesome/docs/docs/resources/contributing.md
+++ b/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.

@@ -363,7 +363,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
--- a/packages/webawesome/docs/docs/resources/visual-tests.md
+++ b/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>

--- a/packages/webawesome/docs/docs/tokens/component-groups.md
+++ b/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">
--- a/packages/webawesome/docs/docs/utilities/native.md
+++ b/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.
--- a/packages/webawesome/docs/index.md
+++ b/packages/webawesome/docs/index.md
@@ -350,7 +350,7 @@ layout: page
          <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">
@@ -442,4 +442,4 @@ layout: page
      &copy; Fonticons, Inc.
    </div>
  </footer>
-</div>
+</div>
--- a/packages/webawesome/package.json
+++ b/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.3",
  "homepage": "https://webawesome.com/",
  "author": "Web Awesome",
  "license": "MIT",
@@ -73,6 +73,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 +86,8 @@
    "*.{ts,js}": [
      "prettier --write"
    ]
+  },
+  "devDependencies": {
+    "@wc-toolkit/jsx-types": "^1.3.0"
  }
 }
--- a/packages/webawesome/scripts/build.js
+++ b/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));
@@ -449,10 +465,14 @@ 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);
+          if (typeof options.beforeWatchEvent === 'function') {
+            await options.beforeWatchEvent(evt, filename);
          }
          await generateDocs({ spinner });
+
+          if (typeof options.afterWatchEvent === 'function') {
+            await options.afterWatchEvent(evt, filename);
+          }
          reload();
        };
      }
--- a/packages/webawesome/scripts/docs.js
+++ b/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);
    }
--- a/packages/webawesome/src/components/animated-image/animated-image.css
+++ b/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);
+  }
+}
--- a/packages/webawesome/src/components/animated-image/animated-image.ts
+++ b/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"
--- a/packages/webawesome/src/components/checkbox/checkbox.ts
+++ b/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>
    `;
  }
 }
--- a/packages/webawesome/src/components/color-picker/color-picker.ts
+++ b/packages/webawesome/src/components/color-picker/color-picker.ts
@@ -1310,6 +1310,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
        ></button>

        <slot
+          id="hint"
          name="hint"
          part="hint"
          class=${classMap({
--- a/packages/webawesome/src/components/details/details.css
+++ b/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 position */
+:host([icon-position='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 {
-  }
-}
--- a/packages/webawesome/src/components/details/details.ts
+++ b/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 position of the expand/collapse icon. */
+  @property({ attribute: 'icon-position', reflect: true }) iconPosition: '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());
    }
@@ -268,7 +286,14 @@ export default class WaDetails extends WebAwesomeElement {
          </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>
--- a/packages/webawesome/src/components/dialog/dialog.ts
+++ b/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`
--- a/packages/webawesome/src/components/drawer/drawer.ts
+++ b/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`
--- a/packages/webawesome/src/components/input/input.ts
+++ b/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,
        })}
--- a/packages/webawesome/src/components/popover/popover.ts
+++ b/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}>
--- a/packages/webawesome/src/components/progress-ring/progress-ring.css
+++ b/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);
--- a/packages/webawesome/src/components/radio-group/radio-group.ts
+++ b/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({
--- a/packages/webawesome/src/components/select/select.test.ts
+++ b/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">
--- a/packages/webawesome/src/components/switch/switch.test.ts
+++ b/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;
--- a/packages/webawesome/src/components/switch/switch.ts
+++ b/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({
--- a/packages/webawesome/src/components/textarea/textarea.ts
+++ b/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'}
--- a/packages/webawesome/src/components/tooltip/tooltip.css
+++ b/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);
+}
--- a/packages/webawesome/src/components/tooltip/tooltip.ts
+++ b/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}
      >
--- a/packages/webawesome/src/styles/native.css
+++ b/packages/webawesome/src/styles/native.css
@@ -564,7 +564,6 @@
    display: inline-flex;
    align-items: center;
    justify-content: center;
-    gap: 0.5em;

    height: var(--wa-form-control-height);
    padding: 0 var(--wa-form-control-padding-inline);
@@ -709,6 +708,16 @@
    &.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 */

--- a/packages/webawesome/src/styles/themes/awesome.css
+++ b/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);
--- a/packages/webawesome/src/styles/themes/default.css
+++ b/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);
--- a/packages/webawesome/src/styles/themes/shoelace.css
+++ b/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);
--- a/packages/webawesome/src/translations/ar.ts
+++ b/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: 'حذف',
--- a/packages/webawesome/src/translations/cs.ts
+++ b/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',
--- a/packages/webawesome/src/translations/da.ts
+++ b/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',
--- a/packages/webawesome/src/translations/de.ts
+++ b/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',
 };
--- a/packages/webawesome/src/translations/en.ts
+++ b/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',
--- a/packages/webawesome/src/translations/es.ts
+++ b/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',
--- a/packages/webawesome/src/translations/fa.ts
+++ b/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: 'حذف',
--- a/packages/webawesome/src/translations/fi.ts
+++ b/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',
--- a/packages/webawesome/src/translations/fr.ts
+++ b/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',
--- a/packages/webawesome/src/translations/he.ts
+++ b/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: 'שנה גודל',
--- a/packages/webawesome/src/translations/hr.ts
+++ b/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',
--- a/packages/webawesome/src/translations/hu.ts
+++ b/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',
--- a/packages/webawesome/src/translations/id.ts
+++ b/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',
--- a/packages/webawesome/src/translations/it.ts
+++ b/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',
--- a/packages/webawesome/src/translations/ja.ts
+++ b/packages/webawesome/src/translations/ja.ts
@@ -21,6 +21,8 @@ const translation: Translation = {
    if (num === 0) return '項目が選択されていません';
    return `${num} 個の項目が選択されました`;
  },
+  pauseAnimation: 'アニメーションを一時停止',
+  playAnimation: 'アニメーションを再生',
  previousSlide: '前のスライド',
  progress: '進行',
  remove: '削除',
--- a/packages/webawesome/src/translations/nb.ts
+++ b/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',
--- a/packages/webawesome/src/translations/nl.ts
+++ b/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',
--- a/packages/webawesome/src/translations/nn.ts
+++ b/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',
--- a/packages/webawesome/src/translations/pl.ts
+++ b/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ąć',
--- a/packages/webawesome/src/translations/pt.ts
+++ b/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',
--- a/packages/webawesome/src/translations/ru.ts
+++ b/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: 'Удалить',
--- a/packages/webawesome/src/translations/sl.ts
+++ b/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',
--- a/packages/webawesome/src/translations/sv.ts
+++ b/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',
--- a/packages/webawesome/src/translations/tr.ts
+++ b/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',
--- a/packages/webawesome/src/translations/uk.ts
+++ b/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: 'Видалити',
--- a/packages/webawesome/src/translations/zh-cn.ts
+++ b/packages/webawesome/src/translations/zh-cn.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
    if (num === 1) return '已选择 1 个项目';
    return `${num} 选择项目`;
  },
+  pauseAnimation: '暂停动画',
+  playAnimation: '播放动画',
  previousSlide: '上一张幻灯片',
  progress: '进度',
  remove: '删除',
--- a/packages/webawesome/src/translations/zh-tw.ts
+++ b/packages/webawesome/src/translations/zh-tw.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
    if (num === 1) return '已選擇 1 個項目';
    return `${num} 選擇項目`;
  },
+  pauseAnimation: '暫停動畫',
+  playAnimation: '播放動畫',
  previousSlide: '上一張幻燈片',
  progress: '進度',
  remove: '移除',
--- a/packages/webawesome/src/utilities/localize.ts
+++ b/packages/webawesome/src/utilities/localize.ts
@@ -33,6 +33,8 @@ export interface Translation extends DefaultTranslation {
  loading: string;
  nextSlide: string;
  numOptionsSelected: (num: number) => string;
+  pauseAnimation: string;
+  playAnimation: string;
  previousSlide: string;
  progress: string;
  remove: string;
Author	SHA1	Message	Date
Kelsey Jackson	1d498040aa	updated layouts again	2025-08-05 10:33:37 -05:00
Kelsey Jackson	c6239b17b9	added conditional	2025-08-05 10:06:16 -05:00
Kelsey Jackson	9bcdf3a0c5	updated templates	2025-08-05 09:55:01 -05:00
Kelsey Jackson	0b619a99f1	Kj/honeyhive patterns sidebar updates (#1258 ) * adding to sidebar * updated sidebar * updated sidebar navigation * add header to sidebar nav	2025-08-01 12:57:14 -04:00
Cory LaViska	89cf48c865	Add JSX types for React (#1256 ) * add JSX types for React et al * update changelog	2025-07-31 13:10:07 -04:00
Cory LaViska	b7a6ebd228	add without-arrow to hide arrows without artifacts (#1253 )	2025-07-30 14:08:26 -04:00
Cory LaViska	6c8bbd51d1	Add missing dependency for React wrappers (#1242 ) * add dep * remove dev dep	2025-07-28 13:55:12 -04:00
Lindsay M	6085b9698c	Add tokens to style tooltip borders (#1234 ) * add tooltip border tokens * target the correct part * target the correct part (for real)	2025-07-28 12:30:42 -04:00
Tu Nguyen	17ee36175b	fixed a typo in dropdown doc (#1235 )	2025-07-28 12:29:56 -04:00
Cory LaViska	3c7bb71a59	scope styles to #content (#1217 )	2025-07-23 17:10:32 -04:00
randomguy-2650	d66b552962	fix: fix a German translation to make it sound more natural (#1223 )	2025-07-23 14:43:13 -04:00
Cory LaViska	6f6e23c78c	Fix details animation by preventing overflow during animation (#1214 ) * don't overflow content; fixes #1149 * fix details overflow; closes #1149	2025-07-22 18:00:21 +00:00
Cory LaViska	310f7a8c5d	fix dialog and drawer header; fixes #1209 (#1213 )	2025-07-22 13:57:07 -04:00
Cory LaViska	9a7b258108	remove links to the old alpha repo (#1216 )	2025-07-22 13:54:19 -04:00
Lindsay M	e10aba0ed1	Add `icon-position` to `<wa-details>` (#1210 ) * add `icon-position` to `<wa-details>` * fix attribute name	2025-07-22 13:38:42 -04:00
Konnor Rogers	1ea5dae9ad	fix build reloading (#1211 ) * fix build reloading * prettier * fix build reloading	2025-07-22 10:51:17 -04:00
Cory LaViska	21310bd367	Link fix and typo (#1208 ) * fix typo * fix broken discord link	2025-07-21 14:20:54 -04:00
Doug Stevenson	c1478e5865	Fix hash link for "cherry picking" (#1207 )	2025-07-21 14:14:49 -04:00
randomguy-2650	9b8433c996	Update outdated docs related to A+O appearance (#1204 )	2025-07-21 11:37:47 -04:00
konnorrogers	57dac67aab	update package-lock	2025-07-18 14:24:04 -04:00
konnorrogers	441bfd7b72	Bump package.json version	2025-07-18 14:02:10 -04:00
konnorrogers	7150c59334	Bump changelog	2025-07-18 14:01:31 -04:00
Konnor Rogers	bd2a3c3b64	add pro setup (#1201 )	2025-07-18 13:41:03 -04:00
Lindsay M	11519625ed	Use margin for `<wa-icon>` spacing in native buttons (#1197 )	2025-07-18 09:47:24 -04:00
Konnor Rogers	f19848c11e	prevent infinite loop in build watcher (#1200 ) * prevent infinite loop in build watcher * prettier	2025-07-18 00:43:29 -04:00
Konnor Rogers	36b21b0be7	introduce before watch and after watch events (#1199 ) * add before / after watch events so pro can properly incrementally build * add events for pro / app * add extra hooks for non-wa dev * add old new line * use package-lock.json from next * npm install * prettier	2025-07-18 00:09:47 -04:00
Cory LaViska	fe2c2ab7af	improve accessibility; fixes #1177 (#1190 )	2025-07-17 11:56:41 -04:00
Cory LaViska	b98b9baba4	add back id="hint" (#1192 )	2025-07-17 11:55:53 -04:00
Cory LaViska	7b18be876b	fix media rounding; closes #1107 (#1193 )	2025-07-17 11:55:26 -04:00