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>

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>`

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;

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;