updated layouts again

added conditional
updated templates
2026-01-20 07:54: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
34 changed files with 334 additions and 216 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,17 +13991,20 @@
        "qr-creator": "^1.0.0",
        "style-observer": "^0.0.7"
      },
+      "devDependencies": {
+        "@wc-toolkit/jsx-types": "^1.3.0"
+      },
      "engines": {
        "node": ">=14.17.0"
      }
    },
    "packages/webawesome-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",
@@ -14021,7 +14027,6 @@
          "url": "https://github.com/sponsors/ai"
        }
      ],
-      "license": "MIT",
      "bin": {
        "nanoid": "bin/nanoid.js"
      },
--- 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);
--- 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

@@ -47,6 +48,7 @@ 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 %}
@@ -57,7 +59,6 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You
 {% 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.
@@ -98,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.
@@ -115,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 -->
@@ -148,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
@@ -8,6 +8,22 @@ Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes

 Components with the <wa-badge variant="warning">Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.

+## Next
+
+### 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}
@@ -175,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>`
@@ -395,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/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
@@ -398,7 +398,7 @@ export async function build(options = {}) {
        return async filename => {
          const changedFile = relative(getRootDir(), filename);

-          if (evt === 'changed') {
+          if (evt === 'change') {
            spinner.info(`File modified ${chalk.gray(`(${changedFile})`)}`);
          } else if (evt === 'unlink') {
            spinner.info(`File deleted ${chalk.gray(`(${changedFile})`)}`);
@@ -470,7 +470,7 @@ export async function build(options = {}) {
          }
          await generateDocs({ spinner });

-          if (typeof options.beforeWatchEvent === 'function') {
+          if (typeof options.afterWatchEvent === 'function') {
            await options.afterWatchEvent(evt, filename);
          }
          reload();
--- 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/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/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/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/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/de.ts
+++ b/packages/webawesome/src/translations/de.ts
@@ -34,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',
 };
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