From 561e0c9553634f51416450d99eb62d67cb435894 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 15 Jan 2025 14:59:07 -0500
Subject: [PATCH] Reintroduce `--border-width` and `--border-radius`, fixes
 #531

---
 src/components/card/card.css | 31 ++++++++++++++++---------------
 src/components/card/card.ts  |  2 ++
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/card/card.css b/src/components/card/card.css
index ab99e64c3..19cecca1f 100644
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -1,29 +1,35 @@
 :host {
   --spacing: var(--wa-space-xl);
+  --border-width: var(--wa-panel-border-width);
+  --border-radius: var(--wa-panel-border-radius);
+
+  --inner-border-radius: calc(var(--border-radius) - var(--border-width));
 
   display: flex;
   flex-direction: column;
   background-color: var(--wa-color-surface-default);
   border-color: var(--wa-color-surface-border);
-  border-radius: var(--wa-panel-border-radius);
+  border-radius: var(--border-radius);
   border-style: var(--wa-panel-border-style);
-  border-width: var(--wa-panel-border-width);
   box-shadow: var(--wa-shadow-s);
+  border-width: var(--border-width);
   color: var(--wa-color-text-normal);
 }
 
+.image,
+:host(:not([with-image])) .header {
+  border-start-start-radius: var(--inner-border-radius);
+  border-start-end-radius: var(--inner-border-radius);
+}
+
 .image {
   display: flex;
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-  margin: calc(-1 * var(--border-width));
-  overflow: hidden;
 
   &::slotted(img) {
     display: block;
     width: 100%;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
+    border-start-start-radius: inherit !important;
+    border-start-end-radius: inherit !important;
   }
 }
 
@@ -33,11 +39,6 @@
   padding: calc(var(--spacing) / 2) var(--spacing);
 }
 
-:host(:not([with-image])) .header {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-}
-
 .body {
   display: block;
   padding: var(--spacing);
@@ -46,8 +47,8 @@
 .footer {
   display: block;
   border-top: inherit;
-  border-bottom-left-radius: inherit;
-  border-bottom-right-radius: inherit;
+  border-end-start-radius: var(--inner-border-radius);
+  border-end-end-radius: var(--inner-border-radius);
   padding: var(--spacing);
 }
 
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index f878d991e..7d4f35509 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -19,6 +19,8 @@ import styles from './card.css';
  * @csspart body - The container that wraps the card's main content.
  * @csspart footer - The container that wraps the card's footer.
  *
+ * @cssproperty --border-radius - The radius for the card's corners. Expects a single value. Defaults to `var(--wa-panel-border-radius)`.
+ * @cssproperty --border-width - The width of the card's borders. Expects a single value. Defaults to `var(--wa-panel-border-width)`.
  * @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value.
  */
 @customElement('wa-card')