fix: card actions on hover

CHANGELOG.md

@@ -2,10 +2,9 @@
 
 ## [0.18.0](https://github.com/frontapp/front-ui-kit/compare/v0.17.1...v0.18.0) (2025-10-22)
 
-
 ### Features
 
-* added card component ([#287](https://github.com/frontapp/front-ui-kit/issues/287)) ([f73865c](https://github.com/frontapp/front-ui-kit/commit/f73865c2063990d782587999757670878d0fe19c))
+- added card component ([#287](https://github.com/frontapp/front-ui-kit/issues/287)) ([f73865c](https://github.com/frontapp/front-ui-kit/commit/f73865c2063990d782587999757670878d0fe19c))
 
 ## [0.17.1](https://github.com/frontapp/front-ui-kit/compare/v0.17.0...v0.17.1) (2025-10-22)
 

src/components/card/__docs__/index.stories.tsx

@@ -251,6 +251,37 @@ export const CardWithActions: Story = {
           </Card.Body>
           <Card.Footer>Card footer content</Card.Footer>
         </Card>
+        <Card
+          {...args}
+          groupActions
+          showActionsOnHover
+          actions={[
+            {
+              label: 'Edit',
+              icon: 'Edit',
+              tooltip: 'Edit this card',
+              onClick: () => console.log('Edit clicked!')
+            },
+            {
+              label: 'Copy',
+              icon: 'Copy',
+              tooltip: 'Copy this card',
+              onClick: () => console.log('Copy clicked!')
+            },
+            {
+              label: 'Share',
+              icon: 'ExternalLink',
+              tooltip: 'Share this card',
+              onClick: () => console.log('Share clicked!')
+            }
+          ]}>
+          <Card.Header>Grouped Actions with hover (showActionsOnHover=true)</Card.Header>
+          <Card.Body>
+            When groupActions=true, all actions are grouped into a single dropdown menu. This keeps the
+            interface clean and compact, especially useful when you have many actions or limited space.
+          </Card.Body>
+          <Card.Footer>Card footer content</Card.Footer>
+        </Card>
       </div>
     </DefaultStyleProvider>
   ),

src/components/card/card.tsx

@@ -91,6 +91,14 @@
     `${RelativeContainer}:hover & {
     opacity: 1;
   }`}
+
+  /* Keep visible when the action container or any of its children have focus or are being interacted with */
+  ${(p) =>
+    p.$showOnHover &&
+    `&:focus-within,
+     & button:active {
+    opacity: 1;
+  }`}
 `;
 
 /*
@@ -166,7 +174,7 @@
  */
 
 // Create a compound component by assigning sub-components to the main component
 const Card = Object.assign(CardComponent, {
   Header: CardHeader,
   Body: CardBody,
   Footer: CardFooter