updated layouts again

package-lock.json

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

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

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

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

@@ -20,53 +20,11 @@ The default icon library is Font Awesome Free, which comes with two icon familie
 Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regular`, and `solid`. Font Awesome Pro users can [provide their kit code](/docs/#using-font-awesome-kit-codes) to unlock additional families, including `sharp`, `duotone`, and `sharp-duotone`. For these icon families, use the `variant` attribute to set the variant.
 
 ```html {.example}
-<div class="wa-stack wa-gap-xl">
-  <div class="wa-stack wa-gap-s">
-    <span>Classic</span>
-    <div class="wa-cluster wa-gap-xl" style="font-size: var(--wa-space-xl)">
-      <wa-icon name="eyedropper"></wa-icon>
-      <wa-icon variant="regular" name="grip-vertical"></wa-icon>
-      <wa-icon variant="light" name="play"></wa-icon>
-      <wa-icon variant="thin" name="star"></wa-icon>
-    </div>
-  </div>
-  <div class="wa-stack wa-gap-s">
-    <span>Duotone</span>
-    <div class="wa-cluster wa-gap-xl" style="font-size: var(--wa-space-xl)">
-      <wa-icon family="duotone" name="eyedropper"></wa-icon>
-      <wa-icon family="duotone" variant="regular" name="grip-vertical"></wa-icon>
-      <wa-icon family="duotone" variant="light" name="play"></wa-icon>
-      <wa-icon family="duotone" variant="thin" name="star"></wa-icon>
-    </div>
-  </div>
-  <div class="wa-stack wa-gap-s">
-    <span>Sharp</span>
-    <div class="wa-cluster wa-gap-xl" style="font-size: var(--wa-space-xl)">
-      <wa-icon family="sharp" name="eyedropper"></wa-icon>
-      <wa-icon family="sharp" variant="regular" name="grip-vertical"></wa-icon>
-      <wa-icon family="sharp" variant="light" name="play"></wa-icon>
-      <wa-icon family="sharp" variant="thin" name="star"></wa-icon>
-    </div>
-  </div>
-  <div class="wa-stack wa-gap-s">
-    <span>Sharp Duotone</span>
-    <div class="wa-cluster wa-gap-xl" style="font-size: var(--wa-space-xl)">
-      <wa-icon family="sharp-duotone" name="eyedropper"></wa-icon>
-      <wa-icon family="sharp-duotone" variant="regular" name="grip-vertical"></wa-icon>
-      <wa-icon family="sharp-duotone" variant="light" name="play"></wa-icon>
-      <wa-icon family="sharp-duotone" variant="thin" name="star"></wa-icon>
-    </div>
-  </div>
-  <div class="wa-stack wa-gap-s">
-    <span>Brands</span>
-    <div class="wa-cluster wa-gap-xl" style="font-size: var(--wa-space-xl)">
-      <wa-icon family="brands" name="font-awesome"></wa-icon>
-      <wa-icon family="brands" name="web-awesome"></wa-icon>
-      <wa-icon family="brands" name="github"></wa-icon>
-      <wa-icon family="brands" name="discord"></wa-icon>
-    </div>
-  </div>
-</div>
+<wa-icon name="eyedropper"></wa-icon>
+<wa-icon name="grip-vertical"></wa-icon>
+<wa-icon name="play"></wa-icon>
+<wa-icon name="star"></wa-icon>
+<wa-icon name="user"></wa-icon>
 ```
 
 ### Colors

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

@@ -8,7 +8,7 @@ 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.
 
-## 3.0.0-beta.4
+## Next
 
 ### New Features {data-no-outline}
 
@@ -411,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/discussions)
+Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)

packages/webawesome/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.3",
   "homepage": "https://webawesome.com/",
   "author": "Web Awesome",
   "license": "MIT",

packages/webawesome/scripts/build.js

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