diff --git a/packages/webawesome/docs/_includes/visual-tests/color.njk b/packages/webawesome/docs/_includes/visual-tests/color.njk
index e67c16503..145bea05c 100644
--- a/packages/webawesome/docs/_includes/visual-tests/color.njk
+++ b/packages/webawesome/docs/_includes/visual-tests/color.njk
@@ -13,7 +13,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-badge variant="brand" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="brand" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -21,7 +21,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-badge class="wa-brand" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-brand" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -32,7 +32,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-badge variant="neutral" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="neutral" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -40,7 +40,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-badge class="wa-neutral" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-neutral" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -51,7 +51,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-badge variant="success" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="success" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -59,7 +59,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-badge class="wa-success" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-success" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -70,7 +70,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-badge variant="warning" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="warning" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -78,7 +78,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-badge class="wa-warning" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-warning" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -89,7 +89,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-badge variant="danger" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="danger" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -97,7 +97,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-badge class="wa-danger" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-danger" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -123,7 +123,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-button variant="brand" appearance="accent">Accent</wa-button>
-          <wa-button variant="brand" appearance="filled-outlined">Filled + Outlined</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>
@@ -132,7 +132,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-button class="wa-brand" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-brand" appearance="filled-outlined">Filled + Outlined</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>
@@ -144,7 +144,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-button variant="neutral" appearance="accent">Accent</wa-button>
-          <wa-button variant="neutral" appearance="filled-outlined">Filled + Outlined</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>
@@ -153,7 +153,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-button class="wa-neutral" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-neutral" appearance="filled-outlined">Filled + Outlined</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>
@@ -165,7 +165,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-button variant="success" appearance="accent">Accent</wa-button>
-          <wa-button variant="success" appearance="filled-outlined">Filled + Outlined</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>
@@ -174,7 +174,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-button class="wa-success" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-success" appearance="filled-outlined">Filled + Outlined</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>
@@ -186,7 +186,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-button variant="warning" appearance="accent">Accent</wa-button>
-          <wa-button variant="warning" appearance="filled-outlined">Filled + Outlined</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>
@@ -195,7 +195,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-button class="wa-warning" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-warning" appearance="filled-outlined">Filled + Outlined</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>
@@ -207,7 +207,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-button variant="danger" appearance="accent">Accent</wa-button>
-          <wa-button variant="danger" appearance="filled-outlined">Filled + Outlined</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>
@@ -216,7 +216,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-button class="wa-danger" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-danger" appearance="filled-outlined">Filled + Outlined</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>
@@ -248,7 +248,7 @@
           </wa-callout>
           <wa-callout variant="brand" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Filled + Outlined
+            Filled-Outlined
           </wa-callout>
           <wa-callout variant="brand" appearance="filled">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
@@ -272,7 +272,7 @@
           </wa-callout>
           <wa-callout class="wa-brand" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
-            Filled + Outlined
+            Filled-Outlined
           </wa-callout>
           <wa-callout class="wa-brand" appearance="filled">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
@@ -299,7 +299,7 @@
           </wa-callout>
           <wa-callout variant="neutral" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Filled + Outlined
+            Filled-Outlined
           </wa-callout>
           <wa-callout variant="neutral" appearance="filled">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
@@ -323,7 +323,7 @@
           </wa-callout>
           <wa-callout class="wa-neutral" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
-            Filled + Outlined
+            Filled-Outlined
           </wa-callout>
           <wa-callout class="wa-neutral" appearance="filled">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
@@ -350,7 +350,7 @@
           </wa-callout>
           <wa-callout variant="success" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Filled + Outlined
+            Filled-Outlined
           </wa-callout>
           <wa-callout variant="success" appearance="filled">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
@@ -374,7 +374,7 @@
           </wa-callout>
           <wa-callout class="wa-success" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
-            Filled + Outlined
+            Filled-Outlined
           </wa-callout>
           <wa-callout class="wa-success" appearance="filled">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
@@ -401,7 +401,7 @@
           </wa-callout>
           <wa-callout variant="warning" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Filled + Outlined
+            Filled-Outlined
           </wa-callout>
           <wa-callout variant="warning" appearance="filled">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
@@ -425,7 +425,7 @@
           </wa-callout>
           <wa-callout class="wa-warning" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            Filled + Outlined
+            Filled-Outlined
           </wa-callout>
           <wa-callout class="wa-warning" appearance="filled">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
@@ -452,7 +452,7 @@
           </wa-callout>
           <wa-callout variant="danger" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Filled + Outlined
+            Filled-Outlined
           </wa-callout>
           <wa-callout variant="danger" appearance="filled">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
@@ -476,7 +476,7 @@
           </wa-callout>
           <wa-callout class="wa-danger" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            Filled + Outlined
+            Filled-Outlined
           </wa-callout>
           <wa-callout class="wa-danger" appearance="filled">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
@@ -513,7 +513,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-tag variant="brand" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="brand" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -521,7 +521,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-tag class="wa-brand" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-brand" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -532,7 +532,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="neutral" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -540,7 +540,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-tag class="wa-neutral" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-neutral" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -551,7 +551,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-tag variant="success" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="success" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -559,7 +559,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-tag class="wa-success" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-success" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -570,7 +570,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-tag variant="warning" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="warning" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -578,7 +578,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-tag class="wa-warning" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-warning" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -589,7 +589,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-tag variant="danger" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="danger" appearance="filled-outlined">Filled + Outlined</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>
         </div>
@@ -597,7 +597,7 @@
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-tag class="wa-danger" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-danger" appearance="filled-outlined">Filled + Outlined</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>
         </div>
diff --git a/packages/webawesome/docs/_includes/visual-tests/native.njk b/packages/webawesome/docs/_includes/visual-tests/native.njk
index ac1284f76..83bfd3d61 100644
--- a/packages/webawesome/docs/_includes/visual-tests/native.njk
+++ b/packages/webawesome/docs/_includes/visual-tests/native.njk
@@ -39,7 +39,7 @@
       </td>
     </tr>
     <tr>
-      <th><code>filled</code> + <code>outlined</code></th>
+      <th><code>filled-outlined</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
           <wa-button variant="brand" appearance="filled-outlined">Brand</wa-button>