From e7199c5fabbea3cc4192f514b9120e7c406b5fac Mon Sep 17 00:00:00 2001
From: Kelsey Jackson <kelseythej@gmail.com>
Date: Fri, 29 Aug 2025 13:14:29 -0500
Subject: [PATCH] added actions slot to horizontal card

---
 .../webawesome/docs/docs/components/card.md   | 17 +++++++++--
 .../webawesome/src/components/card/card.css   | 28 +++++++++++++++----
 .../webawesome/src/components/card/card.ts    |  7 ++++-
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/packages/webawesome/docs/docs/components/card.md b/packages/webawesome/docs/docs/components/card.md
index 77f3348b1..cd5da3263 100644
--- a/packages/webawesome/docs/docs/components/card.md
+++ b/packages/webawesome/docs/docs/components/card.md
@@ -158,15 +158,28 @@ Use the `appearance` attribute to change the card's visual appearance.
 
 ### Orientation
 
+Set the `orientation` attribute to `horizontal` to create a card with a horizontal, side-by-side layout. Make sure to set a width or maximum width for the media slot. Horizontal cards do not currently contain the header and footer slots.
+
 ```html {.example}
 <div class="wa-grid">
-  <wa-card orientation="horizontal">
+  <wa-card orientation="horizontal" class="horizontal-card">
     <img
       slot="media"
       src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       alt="A kitten sits patiently between a terracotta pot and decorative grasses."
     />
-    Outlined (default)
+    This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+    <wa-button slot="actions" variant="neutral" appearance="plain"
+      ><wa-icon name="ellipsis" label="actions"></wa-icon
+    ></wa-button>
   </wa-card>
 </div>
+
+<style>
+  .horizontal-card {
+    img[slot='media'] {
+      max-width: 300px;
+    }
+  }
+</style>
 ```
diff --git a/packages/webawesome/src/components/card/card.css b/packages/webawesome/src/components/card/card.css
index 184753e7c..0705d5547 100644
--- a/packages/webawesome/src/components/card/card.css
+++ b/packages/webawesome/src/components/card/card.css
@@ -42,11 +42,6 @@
   border-color: transparent;
 }
 
-/* Orientation Styles */
-:host([orientation='horizontal']) {
-  display: flex;
-}
-
 /* Take care of top and bottom radii */
 .media,
 :host(:not([with-media])) .header,
@@ -107,3 +102,26 @@
 :host(:not([with-media])) .media {
   display: none;
 }
+
+/* Orientation Styles */
+:host([orientation='horizontal']) {
+  flex-direction: row;
+  
+  .media {
+    border-start-start-radius: var(--inner-border-radius);
+    border-end-start-radius: var(--inner-border-radius);
+    border-start-end-radius: 0;
+  }
+}
+
+:host([orientation='horizontal']) ::slotted(*) {
+    display: block;
+    height: 100%;
+    margin: 0 !important;
+    object-fit: cover !important;
+}
+:host([orientation='horizontal']) ::slotted([slot='actions']) {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing);
+}
\ No newline at end of file
diff --git a/packages/webawesome/src/components/card/card.ts b/packages/webawesome/src/components/card/card.ts
index 2d4313420..6386cc72b 100644
--- a/packages/webawesome/src/components/card/card.ts
+++ b/packages/webawesome/src/components/card/card.ts
@@ -15,6 +15,7 @@ import styles from './card.css';
  * @slot header - An optional header for the card.
  * @slot footer - An optional footer for the card.
  * @slot media - An optional media section to render at the start of the card.
+ * @slot actions - An optional actions section to render at the end for the horizontal card.
  *
  * @csspart media - The container that wraps the card's media.
  * @csspart header - The container that wraps the card's header.
@@ -55,7 +56,11 @@ export default class WaCard extends WebAwesomeElement {
 
   render() {
     if (this.orientation === 'horizontal') {
-      return html`<slot name="media" part="media" class="media"></slot><slot part="body" class="body"></slot>`;
+      return html`
+        <slot name="media" part="media" class="media"></slot>
+        <slot part="body" class="body"></slot>
+        <slot name="actions" part="actions" class="actions"></slot>
+      `;
     }
     return html`
       <slot name="media" part="media" class="media"></slot>