diff --git a/packages/webawesome/docs/docs/components/details.md b/packages/webawesome/docs/docs/components/details.md
index 43cb704d4..f13a6d867 100644
--- a/packages/webawesome/docs/docs/components/details.md
+++ b/packages/webawesome/docs/docs/components/details.md
@@ -86,11 +86,11 @@ 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" appearance="filled">
+  <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>
-  <wa-details summary="Filled + Outlined" appearance="filled outlined">
+  <wa-details summary="Filled" appearance="filled">
     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/tag.md b/packages/webawesome/docs/docs/components/tag.md
index b1bf6f6e3..891e03cd5 100644
--- a/packages/webawesome/docs/docs/components/tag.md
+++ b/packages/webawesome/docs/docs/components/tag.md
@@ -23,42 +23,38 @@ The default appearance is `outlined filled`.
 ```html {.example}
 <div class="wa-stack">
   <p>
-    <wa-tag variant="brand" appearance="outlined accent">Outlined accent</wa-tag>
     <wa-tag variant="brand" appearance="accent">Accent</wa-tag>
-    <wa-tag variant="brand" appearance="outlined">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 filled">Outlined Filled</wa-tag>
+    <wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
+
   </p>
   <p>
-    <wa-tag variant="success" appearance="outlined accent">Outlined accent</wa-tag>
     <wa-tag variant="success" appearance="accent">Accent</wa-tag>
-    <wa-tag variant="success" appearance="outlined">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 filled">Outlined Filled</wa-tag>
+    <wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
   </p>
 
   <p>
-    <wa-tag variant="neutral" appearance="outlined accent">Outlined accent</wa-tag>
     <wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
-    <wa-tag variant="neutral" appearance="outlined">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 filled">Outlined Filled</wa-tag>
+    <wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
   </p>
 
   <p>
-    <wa-tag variant="warning" appearance="outlined accent">Outlined accent</wa-tag>
     <wa-tag variant="warning" appearance="accent">Accent</wa-tag>
-    <wa-tag variant="warning" appearance="outlined">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 filled">Outlined Filled</wa-tag>
+    <wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
   </p>
 
   <p>
-    <wa-tag variant="danger" appearance="outlined accent">Outlined accent</wa-tag>
     <wa-tag variant="danger" appearance="accent">Accent</wa-tag>
-    <wa-tag variant="danger" appearance="outlined">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 filled">Outlined Filled</wa-tag>
+    <wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
   </p>
 </div>
 ```
diff --git a/packages/webawesome/docs/docs/utilities/native.md b/packages/webawesome/docs/docs/utilities/native.md
index b320ceeb2..cc242f3a3 100644
--- a/packages/webawesome/docs/docs/utilities/native.md
+++ b/packages/webawesome/docs/docs/utilities/native.md
@@ -319,43 +319,38 @@ Use the [appearance utility classes](/docs/utilities/appearance) to change the b
 
 ```html {.example}
 <div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-outlined wa-neutral">A + O</button>
   <button class="wa-accent wa-neutral">Accent</button>
-  <button class="wa-outlined wa-neutral">Outlined</button>
-  <button class="wa-filled wa-outlined wa-neutral">F + O</button>
+  <button class="wa-filled wa-outlined wa-neutral">Filled + Outlined</button>
   <button class="wa-filled wa-neutral">Filled</button>
+  <button class="wa-outlined wa-neutral">Outlined</button>
   <button class="wa-plain wa-neutral">Plain</button>
 </div>
 <div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-outlined wa-brand">A + O</button>
   <button class="wa-accent wa-brand">Accent</button>
-  <button class="wa-outlined wa-brand">Outlined</button>
-  <button class="wa-filled wa-outlined wa-brand">F + O</button>
+  <button class="wa-filled wa-outlined wa-brand">Filled + Outlined</button>
   <button class="wa-filled wa-brand">Filled</button>
+  <button class="wa-outlined wa-brand">Outlined</button>
   <button class="wa-plain wa-brand">Plain</button>
 </div>
 <div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-outlined wa-success">A + O</button>
   <button class="wa-accent wa-success">Accent</button>
-  <button class="wa-outlined wa-success">Outlined</button>
-  <button class="wa-filled wa-outlined wa-success">F + O</button>
+  <button class="wa-filled wa-outlined wa-success">Filled + Outlined</button>
   <button class="wa-filled wa-success">Filled</button>
+  <button class="wa-outlined wa-success">Outlined</button>
   <button class="wa-plain wa-success">Plain</button>
 </div>
 <div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-outlined wa-warning">A + O</button>
   <button class="wa-accent wa-warning">Accent</button>
-  <button class="wa-outlined wa-warning">Outlined</button>
-  <button class="wa-filled wa-outlined wa-warning">F + O</button>
+  <button class="wa-filled wa-outlined wa-warning">Filled + Outlined</button>
   <button class="wa-filled wa-warning">Filled</button>
+  <button class="wa-outlined wa-warning">Outlined</button>
   <button class="wa-plain wa-warning">Plain</button>
 </div>
 <div>
-  <button class="wa-accent wa-outlined wa-danger">A + O</button>
   <button class="wa-accent wa-danger">Accent</button>
-  <button class="wa-outlined wa-danger">Outlined</button>
-  <button class="wa-filled wa-outlined wa-danger">F + O</button>
+  <button class="wa-filled wa-outlined wa-danger">Filled + Outlined</button>
   <button class="wa-filled wa-danger">Filled</button>
+  <button class="wa-outlined wa-danger">Outlined</button>
   <button class="wa-plain wa-danger">Plain</button>
 </div>
 ```
diff --git a/packages/webawesome/src/components/badge/badge.css b/packages/webawesome/src/components/badge/badge.css
index 5da735b40..34e244ee6 100644
--- a/packages/webawesome/src/components/badge/badge.css
+++ b/packages/webawesome/src/components/badge/badge.css
@@ -35,10 +35,10 @@
   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: transparent;
+}
 
-  &:host([appearance~='outlined']) {
-    border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
-  }
+:host([appearance~='filled'][appearance~='outlined']) {
+  border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
 }
 
 :host([appearance~='accent']) {
diff --git a/packages/webawesome/src/components/button/button.css b/packages/webawesome/src/components/button/button.css
index aa67751d6..48d40b6cb 100644
--- a/packages/webawesome/src/components/button/button.css
+++ b/packages/webawesome/src/components/button/button.css
@@ -103,10 +103,10 @@
       var(--wa-color-mix-active)
     );
   }
+}
 
-  &:host([appearance~='outlined']) .button {
-    border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
-  }
+:host([appearance~='filled'][appearance~='outlined']) .button {
+  border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
 }
 
 :host([appearance~='accent']) {
diff --git a/packages/webawesome/src/components/callout/callout.css b/packages/webawesome/src/components/callout/callout.css
index 3426b227f..48ea69069 100644
--- a/packages/webawesome/src/components/callout/callout.css
+++ b/packages/webawesome/src/components/callout/callout.css
@@ -25,10 +25,10 @@
 :host([appearance~='filled']) {
   background-color: var(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
   border-color: transparent;
+}
 
-  &:host([appearance~='outlined']) {
-    border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
-  }
+:host([appearance~='filled'][appearance~='outlined']) {
+  border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
 }
 
 :host([appearance~='accent']) {
diff --git a/packages/webawesome/src/components/card/card.css b/packages/webawesome/src/components/card/card.css
index 8b4c50ad4..105a3b2de 100644
--- a/packages/webawesome/src/components/card/card.css
+++ b/packages/webawesome/src/components/card/card.css
@@ -30,10 +30,10 @@
 :host([appearance~='filled']) {
   background-color: var(--wa-color-neutral-fill-quiet);
   border-color: transparent;
+}
 
-  &:host([appearance~='outlined']) {
-    border-color: var(--wa-color-neutral-border-quiet);
-  }
+:host([appearance~='filled'][appearance~='outlined']) {
+  border-color: var(--wa-color-neutral-border-quiet);
 }
 
 :host([appearance~='accent']) {
diff --git a/packages/webawesome/src/components/details/details.css b/packages/webawesome/src/components/details/details.css
index 069778cea..30b43d8d1 100644
--- a/packages/webawesome/src/components/details/details.css
+++ b/packages/webawesome/src/components/details/details.css
@@ -49,32 +49,26 @@ details {
 }
 
 /* Appearance modifiers */
-:host([appearance~='plain']) {
-  details {
-    background-color: transparent;
-    border-color: transparent;
-  }
+:host([appearance~='plain']) details {
+  background-color: transparent;
+  border-color: transparent;
 }
 
-:host([appearance~='outlined']) {
-  details {
-    background-color: var(--wa-color-surface-default);
-    border-color: var(--wa-color-surface-border);
-  }
+:host([appearance~='outlined']) details {
+  background-color: var(--wa-color-surface-default);
+  border-color: var(--wa-color-surface-border);
 }
 
-:host([appearance~='filled']) {
-  details {
-    background-color: var(--wa-color-neutral-fill-quiet);
-    border-color: transparent;
-  }
-
-  &:host([appearance~='outlined']) details {
-    border-color: var(--wa-color-neutral-border-quiet);
-  }
+:host([appearance~='filled']) details {
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-color: transparent;
 }
 
-:host([appearance='plain']) {
+:host([appearance~='filled'][appearance~='outlined']) details {
+  border-color: var(--wa-color-neutral-border-quiet);
+}
+
+:host([appearance='plain']) details {
   border-radius: 0;
 }
 
diff --git a/packages/webawesome/src/components/input/input.css b/packages/webawesome/src/components/input/input.css
index a30c6615a..e0a12fe7d 100644
--- a/packages/webawesome/src/components/input/input.css
+++ b/packages/webawesome/src/components/input/input.css
@@ -44,22 +44,18 @@
 }
 
 /* Appearance modifiers */
-:host([appearance~='outlined']) {
-  .text-field {
-    background-color: var(--wa-form-control-background-color);
-    border-color: var(--wa-form-control-border-color);
-  }
+: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 {
-    background-color: var(--wa-color-neutral-fill-quiet);
-    border-color: var(--wa-color-neutral-fill-quiet);
-  }
+:host([appearance~='filled']) .text-field {
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-color: var(--wa-color-neutral-fill-quiet);
+}
 
-  &:host([appearance~='outlined']) .text-field {
-    border-color: var(--wa-form-control-border-color);
-  }
+:host([appearance~='filled'][appearance~='outlined']) .text-field {
+  border-color: var(--wa-form-control-border-color);
 }
 
 :host([pill]) .text-field {
diff --git a/packages/webawesome/src/components/select/select.css b/packages/webawesome/src/components/select/select.css
index 097f25af3..2812ab171 100644
--- a/packages/webawesome/src/components/select/select.css
+++ b/packages/webawesome/src/components/select/select.css
@@ -87,22 +87,18 @@
 }
 
 /* Appearance modifiers */
-:host([appearance~='outlined']) {
-  .combobox {
-    background-color: var(--wa-form-control-background-color);
-    border-color: var(--wa-form-control-border-color);
-  }
+:host([appearance~='outlined']) .combobox {
+  background-color: var(--wa-form-control-background-color);
+  border-color: var(--wa-form-control-border-color);
 }
 
-:host([appearance~='filled']) {
-  .combobox {
-    background-color: var(--wa-color-neutral-fill-quiet);
-    border-color: var(--wa-color-neutral-fill-quiet);
-  }
+:host([appearance~='filled']) .combobox {
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-color: var(--wa-color-neutral-fill-quiet);
+}
 
-  &:host([appearance~='outlined']) .combobox {
-    border-color: var(--wa-form-control-border-color);
-  }
+:host([appearance~='filled'][appearance~='outlined']) .combobox {
+  border-color: var(--wa-form-control-border-color);
 }
 
 .display-input {
diff --git a/packages/webawesome/src/components/tag/tag.css b/packages/webawesome/src/components/tag/tag.css
index 8c877faaf..4ad20dc68 100644
--- a/packages/webawesome/src/components/tag/tag.css
+++ b/packages/webawesome/src/components/tag/tag.css
@@ -30,10 +30,10 @@
     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~='outlined']) {
-      border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
-    }
+  :host([appearance~='filled'][appearance~='outlined']) {
+    border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
   }
 
   :host([appearance~='accent']) {
diff --git a/packages/webawesome/src/components/textarea/textarea.css b/packages/webawesome/src/components/textarea/textarea.css
index df5f93863..4e5561728 100644
--- a/packages/webawesome/src/components/textarea/textarea.css
+++ b/packages/webawesome/src/components/textarea/textarea.css
@@ -25,22 +25,18 @@
 }
 
 /* Appearance modifiers */
-:host([appearance~='outlined']) {
-  .textarea {
-    background-color: var(--wa-form-control-background-color);
-    border-color: var(--wa-form-control-border-color);
-  }
+:host([appearance~='outlined']) .textarea {
+  background-color: var(--wa-form-control-background-color);
+  border-color: var(--wa-form-control-border-color);
 }
 
-:host([appearance~='filled']) {
-  .textarea {
-    background-color: var(--wa-color-neutral-fill-quiet);
-    border-color: var(--wa-color-neutral-fill-quiet);
-  }
+:host([appearance~='filled']) .textarea {
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-color: var(--wa-color-neutral-fill-quiet);
+}
 
-  &:host([appearance~='outlined']) .textarea {
-    border-color: var(--wa-form-control-border-color);
-  }
+:host([appearance~='filled'][appearance~='outlined']) .textarea {
+  border-color: var(--wa-form-control-border-color);
 }
 
 textarea {