From 2491ca45ac0c3ff26de55a10ab80952110212670 Mon Sep 17 00:00:00 2001
From: Kelsey Jackson <kelseythej@gmail.com>
Date: Mon, 17 Nov 2025 14:12:23 -0600
Subject: [PATCH] Fix `appearance="filled-outlined"` in `<wa-card>` (#1694)

* upated filled-outlined attribute for cards

* updated selector

* updated changelog

* updated heading

* updated css

* remove final `~=` selector (thanks @Copilot)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../webawesome/docs/docs/resources/changelog.md     |  2 ++
 packages/webawesome/src/components/card/card.css    | 13 +++++++------
 packages/webawesome/src/components/card/card.ts     |  2 +-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index fddd7d024..3526e0628 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -13,6 +13,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Next
 
+- 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in `<wa-card>` [issue:1671]
 - Fixed a bug in `<wa-slider>` that caused some touch devices to end up with the incorrect value [issue:1703]
 - Fixed a bug in `<wa-card>` that prevented some slots from being detected correctly [discuss:1450]
 - Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
@@ -23,6 +24,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
   - `<wa-badge>`
   - `<wa-button>`
   - `<wa-callout>`
+  - `<wa-card>`
   - `<wa-details>`
   - `<wa-input>`
   - `<wa-select>`
diff --git a/packages/webawesome/src/components/card/card.css b/packages/webawesome/src/components/card/card.css
index 5156511df..cb06f19f6 100644
--- a/packages/webawesome/src/components/card/card.css
+++ b/packages/webawesome/src/components/card/card.css
@@ -16,27 +16,28 @@
 }
 
 /* Appearance modifiers */
-:host([appearance~='plain']) {
+:host([appearance='plain']) {
   background-color: transparent;
   border-color: transparent;
   box-shadow: none;
 }
 
-:host([appearance~='outlined']) {
+:host([appearance='outlined']) {
   background-color: var(--wa-color-surface-default);
   border-color: var(--wa-color-surface-border);
 }
 
-:host([appearance~='filled']) {
+:host([appearance='filled']) {
   background-color: var(--wa-color-neutral-fill-quiet);
   border-color: transparent;
 }
 
-:host([appearance~='filled'][appearance~='outlined']) {
-  border-color: var(--wa-color-neutral-border-quiet);
+:host([appearance='filled-outlined']) {
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-color: var(--wa-color-surface-border);
 }
 
-:host([appearance~='accent']) {
+:host([appearance='accent']) {
   color: var(--wa-color-neutral-on-loud);
   background-color: var(--wa-color-neutral-fill-loud);
   border-color: transparent;
diff --git a/packages/webawesome/src/components/card/card.ts b/packages/webawesome/src/components/card/card.ts
index 94a4212e7..58c072852 100644
--- a/packages/webawesome/src/components/card/card.ts
+++ b/packages/webawesome/src/components/card/card.ts
@@ -42,7 +42,7 @@ export default class WaCard extends WebAwesomeElement {
 
   /** The card's visual appearance. */
   @property({ reflect: true })
-  appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'outlined';
+  appearance: 'accent' | 'filled' | 'outlined' | 'filled-outlined' | 'plain' = 'outlined';
 
   /** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */
   @property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;