diff --git a/package-lock.json b/package-lock.json
index 19ac56617..115015301 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14017,8 +14017,7 @@
         "qr-creator": "^1.0.0"
       },
       "devDependencies": {
-        "@wc-toolkit/jsx-types": "^1.3.0",
-        "eleventy-plugin-git-commit-date": "^0.1.3"
+        "@wc-toolkit/jsx-types": "^1.3.0"
       },
       "engines": {
         "node": ">=14.17.0"
diff --git a/packages/webawesome/docs/_includes/visual-tests/appearance.njk b/packages/webawesome/docs/_includes/visual-tests/appearance.njk
index 5cece090c..b2d423646 100644
--- a/packages/webawesome/docs/_includes/visual-tests/appearance.njk
+++ b/packages/webawesome/docs/_includes/visual-tests/appearance.njk
@@ -33,11 +33,11 @@
       <th><code>filled</code> + <code>outlined</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" appearance="filled outlined">Brand</wa-badge>
-          <wa-badge variant="neutral" appearance="filled outlined">Neutral</wa-badge>
-          <wa-badge variant="success" appearance="filled outlined">Success</wa-badge>
-          <wa-badge variant="warning" appearance="filled outlined">Warning</wa-badge>
-          <wa-badge variant="danger" appearance="filled outlined">Danger</wa-badge>
+          <wa-badge variant="brand" appearance="filled-outlined">Brand</wa-badge>
+          <wa-badge variant="neutral" appearance="filled-outlined">Neutral</wa-badge>
+          <wa-badge variant="success" appearance="filled-outlined">Success</wa-badge>
+          <wa-badge variant="warning" appearance="filled-outlined">Warning</wa-badge>
+          <wa-badge variant="danger" appearance="filled-outlined">Danger</wa-badge>
         </div>
       </td>
       <td>
@@ -174,11 +174,11 @@
       <th><code>filled</code> + <code>outlined</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="filled outlined">Brand</wa-button>
-          <wa-button variant="neutral" appearance="filled outlined">Neutral</wa-button>
-          <wa-button variant="success" appearance="filled outlined">Success</wa-button>
-          <wa-button variant="warning" appearance="filled outlined">Warning</wa-button>
-          <wa-button variant="danger" appearance="filled outlined">Danger</wa-button>
+          <wa-button variant="brand" appearance="filled-outlined">Brand</wa-button>
+          <wa-button variant="neutral" appearance="filled-outlined">Neutral</wa-button>
+          <wa-button variant="success" appearance="filled-outlined">Success</wa-button>
+          <wa-button variant="warning" appearance="filled-outlined">Warning</wa-button>
+          <wa-button variant="danger" appearance="filled-outlined">Danger</wa-button>
         </div>
       </td>
       <td>
@@ -375,23 +375,23 @@
       <th><code>filled</code> + <code>outlined</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" appearance="filled outlined">
+          <wa-callout variant="brand" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
             Brand
           </wa-callout>
-          <wa-callout variant="neutral" appearance="filled outlined">
+          <wa-callout variant="neutral" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
             Neutral
           </wa-callout>
-          <wa-callout variant="success" appearance="filled outlined">
+          <wa-callout variant="success" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
             Success
           </wa-callout>
-          <wa-callout variant="warning" appearance="filled outlined">
+          <wa-callout variant="warning" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
             Warning
           </wa-callout>
-          <wa-callout variant="danger" appearance="filled outlined">
+          <wa-callout variant="danger" appearance="filled-outlined">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
             Danger
           </wa-callout>
@@ -636,11 +636,11 @@
       <th><code>filled</code> + <code>outlined</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" appearance="filled outlined">Brand</wa-tag>
-          <wa-tag variant="neutral" appearance="filled outlined">Neutral</wa-tag>
-          <wa-tag variant="success" appearance="filled outlined">Success</wa-tag>
-          <wa-tag variant="warning" appearance="filled outlined">Warning</wa-tag>
-          <wa-tag variant="danger" appearance="filled outlined">Danger</wa-tag>
+          <wa-tag variant="brand" appearance="filled-outlined">Brand</wa-tag>
+          <wa-tag variant="neutral" appearance="filled-outlined">Neutral</wa-tag>
+          <wa-tag variant="success" appearance="filled-outlined">Success</wa-tag>
+          <wa-tag variant="warning" appearance="filled-outlined">Warning</wa-tag>
+          <wa-tag variant="danger" appearance="filled-outlined">Danger</wa-tag>
         </div>
       </td>
       <td>
@@ -775,4 +775,4 @@
     </tr>
   </tbody>
 </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/packages/webawesome/docs/_includes/visual-tests/color.njk b/packages/webawesome/docs/_includes/visual-tests/color.njk
index 8ba36b7b1..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>
@@ -246,9 +246,9 @@
             <wa-icon slot="icon" name="circle-star"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout variant="brand" appearance="filled outlined">
+          <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>
@@ -270,9 +270,9 @@
             <wa-icon slot="icon" name="circle-star"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout class="wa-brand" appearance="filled outlined">
+          <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>
@@ -297,9 +297,9 @@
             <wa-icon slot="icon" name="circle-info"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout variant="neutral" appearance="filled outlined">
+          <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>
@@ -321,9 +321,9 @@
             <wa-icon slot="icon" name="circle-info"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout class="wa-neutral" appearance="filled outlined">
+          <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>
@@ -348,9 +348,9 @@
             <wa-icon slot="icon" name="circle-check"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout variant="success" appearance="filled outlined">
+          <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>
@@ -372,9 +372,9 @@
             <wa-icon slot="icon" name="circle-check"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout class="wa-success" appearance="filled outlined">
+          <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>
@@ -399,9 +399,9 @@
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout variant="warning" appearance="filled outlined">
+          <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>
@@ -423,9 +423,9 @@
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout class="wa-warning" appearance="filled outlined">
+          <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>
@@ -450,9 +450,9 @@
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout variant="danger" appearance="filled outlined">
+          <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>
@@ -474,9 +474,9 @@
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
             Accent
           </wa-callout>
-          <wa-callout class="wa-danger" appearance="filled outlined">
+          <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 f479bc338..83bfd3d61 100644
--- a/packages/webawesome/docs/_includes/visual-tests/native.njk
+++ b/packages/webawesome/docs/_includes/visual-tests/native.njk
@@ -39,14 +39,14 @@
       </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>
-          <wa-button variant="neutral" appearance="filled outlined">Neutral</wa-button>
-          <wa-button variant="success" appearance="filled outlined">Success</wa-button>
-          <wa-button variant="warning" appearance="filled outlined">Warning</wa-button>
-          <wa-button variant="danger" appearance="filled outlined">Danger</wa-button>
+          <wa-button variant="brand" appearance="filled-outlined">Brand</wa-button>
+          <wa-button variant="neutral" appearance="filled-outlined">Neutral</wa-button>
+          <wa-button variant="success" appearance="filled-outlined">Success</wa-button>
+          <wa-button variant="warning" appearance="filled-outlined">Warning</wa-button>
+          <wa-button variant="danger" appearance="filled-outlined">Danger</wa-button>
         </div>
       </td>
       <td>
@@ -429,7 +429,7 @@
         </wa-select>
       </td>
       <td>
-        <label>Select 
+        <label>Select
           <select value="1">
             <option value="1">Option</option>
           </select>
@@ -444,7 +444,7 @@
         </wa-select>
       </td>
       <td>
-        <label>Select (filled) 
+        <label>Select (filled)
           <select class="wa-filled" value="1">
             <option value="1">Option</option>
           </select>
@@ -459,7 +459,7 @@
         </wa-select>
       </td>
       <td>
-        <label class="wa-size-s">Select (small) 
+        <label class="wa-size-s">Select (small)
           <select value="1">
             <option value="1">Option</option>
           </select>
@@ -474,7 +474,7 @@
         </wa-select>
       </td>
       <td>
-        <label class="wa-size-m">Select (medium) 
+        <label class="wa-size-m">Select (medium)
           <select value="1">
             <option value="1">Option</option>
           </select>
@@ -489,7 +489,7 @@
         </wa-select>
       </td>
       <td>
-        <label class="wa-size-l">Select (large) 
+        <label class="wa-size-l">Select (large)
           <select value="1">
             <option value="1">Option</option>
           </select>
@@ -582,4 +582,4 @@
     </tr>
   </tbody>
 </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/packages/webawesome/docs/docs/components/badge.md b/packages/webawesome/docs/docs/components/badge.md
index 04cacb033..91af3ee38 100644
--- a/packages/webawesome/docs/docs/components/badge.md
+++ b/packages/webawesome/docs/docs/components/badge.md
@@ -30,31 +30,31 @@ Use the `appearance` attribute to change the badge's visual appearance.
 ```html {.example}
 <div style="margin-block-end: 1rem;">
   <wa-badge appearance="accent" variant="neutral">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="neutral">Filled + Outlined</wa-badge>
+  <wa-badge appearance="filled-outlined" variant="neutral">Filled-Outlined</wa-badge>
   <wa-badge appearance="filled" variant="neutral">Filled</wa-badge>
   <wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge>
 </div>
 <div style="margin-block-end: 1rem;">
   <wa-badge appearance="accent" variant="brand">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="brand">Filled + Outlined</wa-badge>
+  <wa-badge appearance="filled-outlined" variant="brand">Filled-Outlined</wa-badge>
   <wa-badge appearance="filled" variant="brand">Filled</wa-badge>
   <wa-badge appearance="outlined" variant="brand">Outlined</wa-badge>
 </div>
 <div style="margin-block-end: 1rem;">
   <wa-badge appearance="accent" variant="success">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="success">Filled + Outlined</wa-badge>
+  <wa-badge appearance="filled-outlined" variant="success">Filled-Outlined</wa-badge>
   <wa-badge appearance="filled" variant="success">Filled</wa-badge>
   <wa-badge appearance="outlined" variant="success">Outlined</wa-badge>
 </div>
 <div style="margin-block-end: 1rem;">
   <wa-badge appearance="accent" variant="warning">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="warning">Filled + Outlined</wa-badge>
+  <wa-badge appearance="filled-outlined" variant="warning">Filled-Outlined</wa-badge>
   <wa-badge appearance="filled" variant="warning">Filled</wa-badge>
   <wa-badge appearance="outlined" variant="warning">Outlined</wa-badge>
 </div>
 <div>
   <wa-badge appearance="accent" variant="danger">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="danger">Filled + Outlined</wa-badge>
+  <wa-badge appearance="filled-outlined" variant="danger">Filled-Outlined</wa-badge>
   <wa-badge appearance="filled" variant="danger">Filled</wa-badge>
   <wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
 </div>
diff --git a/packages/webawesome/docs/docs/components/button.md b/packages/webawesome/docs/docs/components/button.md
index e56ae8d28..6f8f1f2f7 100644
--- a/packages/webawesome/docs/docs/components/button.md
+++ b/packages/webawesome/docs/docs/components/button.md
@@ -31,35 +31,35 @@ Use the `appearance` attribute to change the button's visual appearance.
 <div class="wa-stack">
   <div class="wa-gap-2xs">
     <wa-button appearance="accent" variant="neutral">Accent</wa-button>
-    <wa-button appearance="filled outlined" variant="neutral">Filled + Outlined</wa-button>
+    <wa-button appearance="filled-outlined" variant="neutral">Filled-Outlined</wa-button>
     <wa-button appearance="filled" variant="neutral">Filled</wa-button>
     <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
     <wa-button appearance="plain" variant="neutral">Plain</wa-button>
   </div>
   <div class="wa-gap-2xs">
     <wa-button appearance="accent" variant="brand">Accent</wa-button>
-    <wa-button appearance="filled outlined" variant="brand">Filled + Outlined</wa-button>
+    <wa-button appearance="filled-outlined" variant="brand">Filled-Outlined</wa-button>
     <wa-button appearance="filled" variant="brand">Filled</wa-button>
     <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
     <wa-button appearance="plain" variant="brand">Plain</wa-button>
   </div>
   <div class="wa-gap-2xs">
     <wa-button appearance="accent" variant="success">Accent</wa-button>
-    <wa-button appearance="filled outlined" variant="success">Filled + Outlined</wa-button>
+    <wa-button appearance="filled-outlined" variant="success">Filled-Outlined</wa-button>
     <wa-button appearance="filled" variant="success">Filled</wa-button>
     <wa-button appearance="outlined" variant="success">Outlined</wa-button>
     <wa-button appearance="plain" variant="success">Plain</wa-button>
   </div>
   <div class="wa-gap-2xs">
     <wa-button appearance="accent" variant="warning">Accent</wa-button>
-    <wa-button appearance="filled outlined" variant="warning">Filled + Outlined</wa-button>
+    <wa-button appearance="filled-outlined" variant="warning">Filled-Outlined</wa-button>
     <wa-button appearance="filled" variant="warning">Filled</wa-button>
     <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
     <wa-button appearance="plain" variant="warning">Plain</wa-button>
   </div>
   <div class="wa-gap-2xs">
     <wa-button appearance="accent" variant="danger">Accent</wa-button>
-    <wa-button appearance="filled outlined" variant="danger">Filled + Outlined</wa-button>
+    <wa-button appearance="filled-outlined" variant="danger">Filled-Outlined</wa-button>
     <wa-button appearance="filled" variant="danger">Filled</wa-button>
     <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
     <wa-button appearance="plain" variant="danger">Plain</wa-button>
diff --git a/packages/webawesome/docs/docs/components/callout.md b/packages/webawesome/docs/docs/components/callout.md
index 234069fea..f37094a15 100644
--- a/packages/webawesome/docs/docs/components/callout.md
+++ b/packages/webawesome/docs/docs/components/callout.md
@@ -60,7 +60,7 @@ Set the `variant` attribute to change the callout's variant.
 
 ### Appearance
 
-Use the `appearance` attribute to change the callout's visual appearance (the default is `outlined filled`).
+Use the `appearance` attribute to change the callout's visual appearance (the default is `filled-outlined`).
 
 ```html {.example}
 <wa-callout variant="brand" appearance="accent">
@@ -70,7 +70,7 @@ Use the `appearance` attribute to change the callout's visual appearance (the de
 
 <br />
 
-<wa-callout variant="brand" appearance="outlined filled">
+<wa-callout variant="brand" appearance="filled-outlined">
   <wa-icon slot="icon" name="fill-drip" variant="regular"></wa-icon>
   This callout is both <strong>filled</strong> and <strong>outlined</strong>
 </wa-callout>
diff --git a/packages/webawesome/docs/docs/components/card.md b/packages/webawesome/docs/docs/components/card.md
index a79a4e368..5869aa2f6 100644
--- a/packages/webawesome/docs/docs/components/card.md
+++ b/packages/webawesome/docs/docs/components/card.md
@@ -137,7 +137,7 @@ Use the `appearance` attribute to change the card's visual appearance.
     />
     Outlined (default)
   </wa-card>
-  {% for appearance in ['outlined filled', 'plain', 'filled', 'accent'] -%}
+  {% for appearance in ['filled-outlined', 'plain', 'filled', 'accent'] -%}
   <wa-card appearance="{{ appearance }}">
     <img
       slot="media"
diff --git a/packages/webawesome/docs/docs/components/details.md b/packages/webawesome/docs/docs/components/details.md
index bd4f7b8a1..5262a1c25 100644
--- a/packages/webawesome/docs/docs/components/details.md
+++ b/packages/webawesome/docs/docs/components/details.md
@@ -108,7 +108,7 @@ Use the `appearance` attribute to change the element’s visual appearance.
     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="Filled + Outlined" appearance="filled outlined">
+  <wa-details summary="Filled-outlined" appearance="filled-outlined">
     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>
diff --git a/packages/webawesome/docs/docs/components/input.md b/packages/webawesome/docs/docs/components/input.md
index 867643839..a6ba85c6a 100644
--- a/packages/webawesome/docs/docs/components/input.md
+++ b/packages/webawesome/docs/docs/components/input.md
@@ -60,7 +60,9 @@ Add the `password-toggle` attribute to add a toggle button that will show the pa
 Use the `appearance` attribute to change the input's visual appearance.
 
 ```html {.example}
-<wa-input placeholder="Type something" appearance="filled"></wa-input>
+<wa-input placeholder="Type something" appearance="filled"></wa-input><br />
+<wa-input placeholder="Type something" appearance="filled-outlined"></wa-input><br />
+<wa-input placeholder="Type something" appearance="outlined"></wa-input>
 ```
 
 ### Disabled
diff --git a/packages/webawesome/docs/docs/components/select.md b/packages/webawesome/docs/docs/components/select.md
index 9bcb40e91..ff7135e8a 100644
--- a/packages/webawesome/docs/docs/components/select.md
+++ b/packages/webawesome/docs/docs/components/select.md
@@ -80,6 +80,18 @@ Use the `appearance` attribute to change the select's visual appearance.
   <wa-option value="option-2">Option 2</wa-option>
   <wa-option value="option-3">Option 3</wa-option>
 </wa-select>
+<br />
+<wa-select appearance="filled-outlined">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
+<br />
+<wa-select appearance="outlined">
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
 ```
 
 ### Pill
diff --git a/packages/webawesome/docs/docs/components/tag.md b/packages/webawesome/docs/docs/components/tag.md
index 891e03cd5..29a949653 100644
--- a/packages/webawesome/docs/docs/components/tag.md
+++ b/packages/webawesome/docs/docs/components/tag.md
@@ -18,41 +18,40 @@ category: Feedback & Status
 ### Appearance
 
 Use the `size` attribute to change a tag's visual appearance.
-The default appearance is `outlined filled`.
+The default appearance is `filled-outlined`.
 
 ```html {.example}
 <div class="wa-stack">
   <p>
     <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>
-
   </p>
   <p>
     <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>
   </p>
 
   <p>
     <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>
   </p>
 
   <p>
     <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>
   </p>
 
   <p>
     <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>
   </p>
diff --git a/packages/webawesome/docs/docs/components/textarea.md b/packages/webawesome/docs/docs/components/textarea.md
index 352b0d2c8..731f95fb9 100644
--- a/packages/webawesome/docs/docs/components/textarea.md
+++ b/packages/webawesome/docs/docs/components/textarea.md
@@ -52,7 +52,9 @@ Use the `placeholder` attribute to add a placeholder.
 Use the `appearance` attribute to change the textarea's visual appearance.
 
 ```html {.example}
-<wa-textarea placeholder="Type something" appearance="filled"></wa-textarea>
+<wa-textarea placeholder="Type something" appearance="filled"></wa-textarea><br />
+<wa-textarea placeholder="Type something" appearance="filled-outlined"></wa-textarea><br />
+<wa-textarea placeholder="Type something" appearance="outlined"></wa-textarea>
 ```
 
 ### Disabled
diff --git a/packages/webawesome/docs/docs/customizing.md b/packages/webawesome/docs/docs/customizing.md
index 904523095..f569d0286 100644
--- a/packages/webawesome/docs/docs/customizing.md
+++ b/packages/webawesome/docs/docs/customizing.md
@@ -10,7 +10,7 @@ You can customize the look and feel of Web Awesome at a high level with themes.
 
 Web Awesome uses [themes](/docs/themes) to apply a cohesive look and feel across the entire library. Themes are built with a collection of predefined CSS custom properties, which we call [design tokens](/docs/tokens), and there are many premade themes you can choose from.
 
-To use a theme, simply add a link to the theme's stylesheet to the `<head>` of your page. For example, you can add this snippet alongside th [installation code](/docs/#quick-start-autoloading-via-cdn) to use the *Awesome* theme:
+To use a theme, simply add a link to the theme's stylesheet to the `<head>` of your page. For example, you can add this snippet alongside th [installation code](/docs/#quick-start-autoloading-via-cdn) to use the _Awesome_ theme:
 
 ```html
 <link rel="stylesheet" href="{% cdnUrl 'styles/themes/awesome.css' %}" />
@@ -87,7 +87,7 @@ Custom states can be combined with CSS parts and custom properties to create sop
 
 CSS parts offer further flexibility to customize individual components. The "parts" exposed by each component can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), or `::part()`.
 
-Parts allow you to style *any* standard CSS property, not just those exposed through custom properties. Here's an example that modifies buttons with the `gradient-button` class.
+Parts allow you to style _any_ standard CSS property, not just those exposed through custom properties. Here's an example that modifies buttons with the `gradient-button` class.
 
 ```html {.example}
 <wa-button class="gradient-button"> Gradient Button </wa-button>
@@ -96,7 +96,9 @@ Parts allow you to style *any* standard CSS property, not just those exposed thr
   .gradient-button::part(base) {
     background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50));
     border: solid 1px var(--wa-color-purple-50);
-    transition: transform 100ms, box-shadow 100ms;
+    transition:
+      transform 100ms,
+      box-shadow 100ms;
   }
 
   .gradient-button::part(base):hover {
@@ -131,6 +133,7 @@ Most (but not all) components expose parts. You can find them in each component'
 If you're using [native styles](/docs/utilities/native), any custom styles added for a component should also target the corresponding native element. In general, the same styles you declare for components will work just the same to style their native counterparts.
 
 For example, we can give `<input type="checkbox">` the same custom styles as `<wa-checkbox>` by using the custom properties required to style the component:
+
 ```html {.example}
 <wa-checkbox class="pinkify">Web Awesome checkbox</wa-checkbox>
 <br />
@@ -141,7 +144,7 @@ For example, we can give `<input type="checkbox">` the same custom styles as `<w
 
 <style>
   wa-checkbox.pinkify,
-  input[type="checkbox"].pinkify {
+  input[type='checkbox'].pinkify {
     --background-color-checked: hotpink;
     --border-color-checked: hotpink;
     --border-width: 3px;
@@ -151,6 +154,7 @@ For example, we can give `<input type="checkbox">` the same custom styles as `<w
 ```
 
 Or, if using CSS parts, we can give both checkboxes the same custom styles using standard CSS properties:
+
 ```html {.example}
 <wa-checkbox class="purpleify">Web Awesome checkbox</wa-checkbox>
 <br />
@@ -161,12 +165,12 @@ Or, if using CSS parts, we can give both checkboxes the same custom styles using
 
 <style>
   wa-checkbox.purpleify::part(control),
-  input[type="checkbox"].purpleify {
+  input[type='checkbox'].purpleify {
     border-width: 3px;
   }
 
   wa-checkbox.purpleify:state(checked)::part(control),
-  input[type="checkbox"].purpleify:checked {
+  input[type='checkbox'].purpleify:checked {
     background-color: darkorchid;
     border-color: darkorchid;
     color: lavender;
@@ -174,14 +178,14 @@ Or, if using CSS parts, we can give both checkboxes the same custom styles using
 </style>
 ```
 
-
 ## Style Utilities
 
 Similarly, if you're using [style utilities](/docs/utilities), any custom styles added for a specific attribute variation of a component — such as `appearance`, `variant`, or `size` — should also target the corresponding style utility class. This ensures that the attribute and its utility class counterpart work interchangeably.
 
 For example, we can give all outlined callouts a thick left border, regardless of whether they are styled with `appearance="outlined"` or `class="wa-outlined"`:
+
 ```html {.example}
-<wa-callout appearance="outlined filled">
+<wa-callout appearance="filled-outlined">
   <wa-icon slot="icon" name="circle-star"></wa-icon>
   Here's a callout with <code>appearance="outlined"</code>
 </wa-callout>
@@ -191,8 +195,8 @@ For example, we can give all outlined callouts a thick left border, regardless o
 </wa-callout>
 
 <style>
-  wa-callout:is([appearance~="outlined"]) {
+  wa-callout:is([appearance~='outlined']) {
     border-left-width: var(--wa-panel-border-radius);
   }
 </style>
-```
\ No newline at end of file
+```
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 99ad9a2ec..f557fd59f 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -12,6 +12,15 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Next
 
+- 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in the following elements [issue:1127]
+  - `<wa-badge>`
+  - `<wa-button>`
+  - `<wa-callout>`
+  - `<wa-details>`
+  - `<wa-input>`
+  - `<wa-select>`
+  - `<wa-tag>`
+  - `<wa-textarea>`
 - Added the Kazakh translation [pr:1496]
 - Added docs for code completion for VS Code and JetBrains [pr:1550]
 - Added back the missing `form-control-label` part to `<wa-textarea>` for consistency with other form controls [pr:1533]
diff --git a/packages/webawesome/docs/examples/themes/showcase.njk b/packages/webawesome/docs/examples/themes/showcase.njk
index 7b1675035..3bbd9d374 100644
--- a/packages/webawesome/docs/examples/themes/showcase.njk
+++ b/packages/webawesome/docs/examples/themes/showcase.njk
@@ -299,7 +299,7 @@ layout: false
                 <dt class="wa-heading-s">Amount</dt>
                 <dd class="wa-heading-l">$5,610.00</dd>
               </dl>
-              <wa-badge appearance="filled outlined" variant="success">Paid</wa-badge>
+              <wa-badge appearance="filled-outlined" variant="success">Paid</wa-badge>
             </div>
             <wa-divider></wa-divider>
             <dl class="wa-stack">
diff --git a/packages/webawesome/src/components/badge/badge.css b/packages/webawesome/src/components/badge/badge.css
index 59887e6fb..6fceaac75 100644
--- a/packages/webawesome/src/components/badge/badge.css
+++ b/packages/webawesome/src/components/badge/badge.css
@@ -21,7 +21,7 @@
 }
 
 /* Appearance modifiers */
-:host([appearance~='outlined']) {
+:host([appearance='outlined']) {
   --pulse-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
 
   color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
@@ -29,7 +29,7 @@
   border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
 }
 
-:host([appearance~='filled']) {
+:host([appearance='filled']) {
   --pulse-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
 
   color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
@@ -37,13 +37,15 @@
   border-color: transparent;
 }
 
-:host([appearance~='filled'][appearance~='outlined']) {
+:host([appearance='filled-outlined']) {
   --pulse-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
 
+  color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
+  background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
   border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
 }
 
-:host([appearance~='accent']) {
+:host([appearance='accent']) {
   --pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
 
   color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
diff --git a/packages/webawesome/src/components/badge/badge.ts b/packages/webawesome/src/components/badge/badge.ts
index 3e627bce3..13c3fa375 100644
--- a/packages/webawesome/src/components/badge/badge.ts
+++ b/packages/webawesome/src/components/badge/badge.ts
@@ -25,7 +25,7 @@ export default class WaBadge extends WebAwesomeElement {
   @property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'brand';
 
   /** The badge's visual appearance. */
-  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' = 'accent';
+  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'filled-outlined' = 'accent';
 
   /** Draws a pill-style badge with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
diff --git a/packages/webawesome/src/components/button/button.css b/packages/webawesome/src/components/button/button.css
index 22036424e..7660f5c0e 100644
--- a/packages/webawesome/src/components/button/button.css
+++ b/packages/webawesome/src/components/button/button.css
@@ -3,7 +3,7 @@
     display: inline-block;
 
     /* Workaround because Chrome doesn't like :host(:has()) below
-     * https://issues.chromium.org/issues/40062355 
+     * https://issues.chromium.org/issues/40062355
      * Firefox doesn't like this nested rule, so both are needed */
     &:has(wa-badge) {
       position: relative;
@@ -47,7 +47,7 @@
 }
 
 /* Appearance modifiers */
-:host([appearance~='plain']) {
+:host([appearance='plain']) {
   .button {
     color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
     background-color: transparent;
@@ -69,7 +69,7 @@
   }
 }
 
-:host([appearance~='outlined']) {
+:host([appearance='outlined']) {
   .button {
     color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
     background-color: transparent;
@@ -91,7 +91,7 @@
   }
 }
 
-:host([appearance~='filled']) {
+:host([appearance='filled']) {
   .button {
     color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
     background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
@@ -117,11 +117,33 @@
   }
 }
 
-:host([appearance~='filled'][appearance~='outlined']) .button {
-  border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
+:host([appearance='filled-outlined']) {
+  .button {
+    color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+    background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
+    border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
+  }
+  @media (hover: hover) {
+    .button:not(.disabled):not(.loading):hover {
+      color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+      background-color: color-mix(
+        in oklab,
+        var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
+        var(--wa-color-mix-hover)
+      );
+    }
+  }
+  .button:not(.disabled):not(.loading):active {
+    color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+    background-color: color-mix(
+      in oklab,
+      var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
+      var(--wa-color-mix-active)
+    );
+  }
 }
 
-:host([appearance~='accent']) {
+:host([appearance='accent']) {
   .button {
     color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
     background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
@@ -215,7 +237,7 @@
  * Caret modifier
  */
 
-wa-icon[part~='caret'] {
+wa-icon[part='caret'] {
   display: flex;
   align-self: center;
   align-items: center;
@@ -284,7 +306,7 @@ slot[name='start']::slotted(*) {
 }
 
 slot[name='end']::slotted(*),
-.button:not(.visually-hidden-label) [part~='caret'] {
+.button:not(.visually-hidden-label) [part='caret'] {
   margin-inline-start: 0.75em;
 }
 
diff --git a/packages/webawesome/src/components/button/button.ts b/packages/webawesome/src/components/button/button.ts
index 50e3cb3a5..ac1c84c39 100644
--- a/packages/webawesome/src/components/button/button.ts
+++ b/packages/webawesome/src/components/button/button.ts
@@ -63,7 +63,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
 
   /** The button's visual appearance. */
-  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';
+  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'filled-outlined' | 'plain' = 'accent';
 
   /** The button's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
diff --git a/packages/webawesome/src/components/callout/callout.css b/packages/webawesome/src/components/callout/callout.css
index 48ea69069..b7118c2e4 100644
--- a/packages/webawesome/src/components/callout/callout.css
+++ b/packages/webawesome/src/components/callout/callout.css
@@ -27,7 +27,7 @@
   border-color: transparent;
 }
 
-:host([appearance~='filled'][appearance~='outlined']) {
+:host([appearance~='filled-outlined']) {
   border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
 }
 
diff --git a/packages/webawesome/src/components/callout/callout.ts b/packages/webawesome/src/components/callout/callout.ts
index f6daed2b6..210bae07e 100644
--- a/packages/webawesome/src/components/callout/callout.ts
+++ b/packages/webawesome/src/components/callout/callout.ts
@@ -25,8 +25,7 @@ export default class WaCallout extends WebAwesomeElement {
   @property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'brand';
 
   /** The callout's visual appearance. */
-  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' | 'outlined filled' =
-    'outlined filled';
+  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' | 'filled-outlined';
 
   /** The callout's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
diff --git a/packages/webawesome/src/components/details/details.css b/packages/webawesome/src/components/details/details.css
index 5bb034a63..858fb0a89 100644
--- a/packages/webawesome/src/components/details/details.css
+++ b/packages/webawesome/src/components/details/details.css
@@ -26,29 +26,27 @@ details {
 }
 
 /* Appearance modifiers */
-:host([appearance~='plain']) details {
+:host([appearance='plain']) details {
   background-color: transparent;
   border-color: transparent;
+  border-radius: 0;
 }
 
-:host([appearance~='outlined']) details {
+:host([appearance='outlined']) details {
   background-color: var(--wa-color-surface-default);
   border-color: var(--wa-color-surface-border);
 }
 
-:host([appearance~='filled']) details {
+:host([appearance='filled']) details {
   background-color: var(--wa-color-neutral-fill-quiet);
   border-color: transparent;
 }
 
-:host([appearance~='filled'][appearance~='outlined']) details {
+:host([appearance='filled-outlined']) details {
+  background-color: var(--wa-color-neutral-fill-quiet);
   border-color: var(--wa-color-neutral-border-quiet);
 }
 
-:host([appearance='plain']) details {
-  border-radius: 0;
-}
-
 :host([disabled]) details {
   opacity: 0.5;
   cursor: not-allowed;
diff --git a/packages/webawesome/src/components/details/details.ts b/packages/webawesome/src/components/details/details.ts
index 3b1799d82..416f746a7 100644
--- a/packages/webawesome/src/components/details/details.ts
+++ b/packages/webawesome/src/components/details/details.ts
@@ -76,7 +76,7 @@ export default class WaDetails extends WebAwesomeElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
 
   /** The element's visual appearance. */
-  @property({ reflect: true }) appearance: 'filled' | 'outlined' | 'plain' = 'outlined';
+  @property({ reflect: true }) appearance: 'filled' | 'outlined' | 'filled-outlined' | 'plain' = 'outlined';
 
   /** The location of the expand/collapse icon. */
   @property({ attribute: 'icon-placement', reflect: true }) iconPlacement: 'start' | 'end' = 'end';
diff --git a/packages/webawesome/src/components/input/input.css b/packages/webawesome/src/components/input/input.css
index 6aae262f7..ee9da923b 100644
--- a/packages/webawesome/src/components/input/input.css
+++ b/packages/webawesome/src/components/input/input.css
@@ -44,17 +44,18 @@
 }
 
 /* Appearance modifiers */
-:host([appearance~='outlined']) .text-field {
+:host([appearance='outlined']) .text-field {
   background-color: var(--wa-form-control-background-color);
   border-color: var(--wa-form-control-border-color);
 }
 
-:host([appearance~='filled']) .text-field {
+:host([appearance='filled']) .text-field {
   background-color: var(--wa-color-neutral-fill-quiet);
   border-color: var(--wa-color-neutral-fill-quiet);
 }
 
-:host([appearance~='filled'][appearance~='outlined']) .text-field {
+:host([appearance='filled-outlined']) .text-field {
+  background-color: var(--wa-color-neutral-fill-quiet);
   border-color: var(--wa-form-control-border-color);
 }
 
diff --git a/packages/webawesome/src/components/input/input.ts b/packages/webawesome/src/components/input/input.ts
index 2fbdf7f3d..29b0a4201 100644
--- a/packages/webawesome/src/components/input/input.ts
+++ b/packages/webawesome/src/components/input/input.ts
@@ -111,7 +111,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
   /** The input's visual appearance. */
-  @property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';
+  @property({ reflect: true }) appearance: 'filled' | 'outlined' | 'filled-outlined' = 'outlined';
 
   /** Draws a pill-style input with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
diff --git a/packages/webawesome/src/components/select/select.css b/packages/webawesome/src/components/select/select.css
index 007645374..a01654461 100644
--- a/packages/webawesome/src/components/select/select.css
+++ b/packages/webawesome/src/components/select/select.css
@@ -93,17 +93,18 @@
 }
 
 /* Appearance modifiers */
-:host([appearance~='outlined']) .combobox {
+:host([appearance='outlined']) .combobox {
   background-color: var(--wa-form-control-background-color);
   border-color: var(--wa-form-control-border-color);
 }
 
-:host([appearance~='filled']) .combobox {
+:host([appearance='filled']) .combobox {
   background-color: var(--wa-color-neutral-fill-quiet);
   border-color: var(--wa-color-neutral-fill-quiet);
 }
 
-:host([appearance~='filled'][appearance~='outlined']) .combobox {
+:host([appearance='filled-outlined']) .combobox {
+  background-color: var(--wa-color-neutral-fill-quiet);
   border-color: var(--wa-form-control-border-color);
 }
 
diff --git a/packages/webawesome/src/components/select/select.ts b/packages/webawesome/src/components/select/select.ts
index f0fdcac11..cfedcdd6d 100644
--- a/packages/webawesome/src/components/select/select.ts
+++ b/packages/webawesome/src/components/select/select.ts
@@ -229,7 +229,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
   @property({ type: Boolean, reflect: true }) open = false;
 
   /** The select's visual appearance. */
-  @property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';
+  @property({ reflect: true }) appearance: 'filled' | 'outlined' | 'filled-outlined' = 'outlined';
 
   /** Draws a pill-style select with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
diff --git a/packages/webawesome/src/components/tag/tag.css b/packages/webawesome/src/components/tag/tag.css
index 4ad20dc68..6289ad822 100644
--- a/packages/webawesome/src/components/tag/tag.css
+++ b/packages/webawesome/src/components/tag/tag.css
@@ -20,23 +20,25 @@
   }
 
   /* Appearance modifiers */
-  :host([appearance~='outlined']) {
+  :host([appearance='outlined']) {
     color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
     background-color: transparent;
     border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
   }
 
-  :host([appearance~='filled']) {
+  :host([appearance='filled']) {
     color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
     background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
     border-color: transparent;
   }
 
-  :host([appearance~='filled'][appearance~='outlined']) {
+  :host([appearance='filled-outlined']) {
+    color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+    background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
     border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
   }
 
-  :host([appearance~='accent']) {
+  :host([appearance='accent']) {
     color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
     background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
     border-color: transparent;
diff --git a/packages/webawesome/src/components/tag/tag.ts b/packages/webawesome/src/components/tag/tag.ts
index c301e3cb3..d2d1fbbe2 100644
--- a/packages/webawesome/src/components/tag/tag.ts
+++ b/packages/webawesome/src/components/tag/tag.ts
@@ -35,7 +35,7 @@ export default class WaTag extends WebAwesomeElement {
   @property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'neutral';
 
   /** The tag's visual appearance. */
-  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'outlined filled' = 'outlined filled';
+  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'filled-outlined' = 'filled-outlined';
 
   /** The tag's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
diff --git a/packages/webawesome/src/components/textarea/textarea.css b/packages/webawesome/src/components/textarea/textarea.css
index 35bafc55b..da7091971 100644
--- a/packages/webawesome/src/components/textarea/textarea.css
+++ b/packages/webawesome/src/components/textarea/textarea.css
@@ -24,17 +24,18 @@
 }
 
 /* Appearance modifiers */
-:host([appearance~='outlined']) .textarea {
+:host([appearance='outlined']) .textarea {
   background-color: var(--wa-form-control-background-color);
   border-color: var(--wa-form-control-border-color);
 }
 
-:host([appearance~='filled']) .textarea {
+:host([appearance='filled']) .textarea {
   background-color: var(--wa-color-neutral-fill-quiet);
   border-color: var(--wa-color-neutral-fill-quiet);
 }
 
-:host([appearance~='filled'][appearance~='outlined']) .textarea {
+:host([appearance='filled-outlined']) .textarea {
+  background-color: var(--wa-color-neutral-fill-quiet);
   border-color: var(--wa-form-control-border-color);
 }
 
diff --git a/packages/webawesome/src/components/textarea/textarea.ts b/packages/webawesome/src/components/textarea/textarea.ts
index 1b3626bac..954b325be 100644
--- a/packages/webawesome/src/components/textarea/textarea.ts
+++ b/packages/webawesome/src/components/textarea/textarea.ts
@@ -84,7 +84,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
   /** The textarea's visual appearance. */
-  @property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';
+  @property({ reflect: true }) appearance: 'filled' | 'outlined' | 'filled-outlined' = 'outlined';
 
   /** The textarea's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';