From 13e6bc8dce7e2e9bf179d31e2f52036e4cd8bdc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Mon, 18 Nov 2024 14:22:47 +0100
Subject: [PATCH] correct focus styles

---
 packages/uui-card/lib/uui-card.element.ts | 25 +++++++++++++----------
 packages/uui-ref/lib/uui-ref.element.ts   | 17 ++++++++++++---
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/packages/uui-card/lib/uui-card.element.ts b/packages/uui-card/lib/uui-card.element.ts
index 185ee0cd3..f1e61443f 100644
--- a/packages/uui-card/lib/uui-card.element.ts
+++ b/packages/uui-card/lib/uui-card.element.ts
@@ -102,24 +102,18 @@ export class UUICardElement extends SelectOnlyMixin(
         transition: box-shadow 100ms ease-out;
       }
 
-      :host(*) {
-        /* TODO: implement globally shared outline style */
+      :host([selectable]:focus-visible) {
         outline-color: var(--uui-color-focus);
-        outline-offset: 4px;
+        outline-width: var(--uui-card-border-width);
+        outline-style: solid;
+        outline-offset: var(--uui-card-border-width);
       }
 
-      :host(*) * {
+      :host() * {
         /* TODO: implement globally shared outline style */
         outline-color: var(--uui-color-focus);
       }
 
-      :host(:focus) {
-        outline-color: var(--uui-color-focus);
-        outline-width: var(--uui-card-border-width);
-        outline-style: solid;
-        outline-offset: var(--uui-card-border-width);
-      }
-
       :host([error])::before {
         content: '';
         position: absolute;
@@ -148,6 +142,15 @@ export class UUICardElement extends SelectOnlyMixin(
         color: inherit;
       }
 
+      button:focus,
+      a:focus {
+        outline-color: var(--uui-color-focus);
+        outline-width: var(--uui-card-border-width);
+        outline-style: solid;
+        outline-offset: var(--uui-card-border-width);
+        border-radius: var(--uui-border-radius);
+      }
+
       :host([selectable]) {
         cursor: pointer;
       }
diff --git a/packages/uui-ref/lib/uui-ref.element.ts b/packages/uui-ref/lib/uui-ref.element.ts
index 52427f8c7..3b4782ce1 100644
--- a/packages/uui-ref/lib/uui-ref.element.ts
+++ b/packages/uui-ref/lib/uui-ref.element.ts
@@ -77,9 +77,11 @@ export class UUIRefElement extends SelectOnlyMixin(
         transition: --uui-card-before-opacity 120ms;
       }
 
-      :host(:focus) {
-        /** TODO: implement focus outline. */
-        outline-color: #6ab4f0;
+      :host([selectable]:focus-visible) {
+        outline-color: var(--uui-color-focus);
+        outline-width: var(--uui-card-border-width);
+        outline-style: solid;
+        outline-offset: var(--uui-card-border-width);
       }
 
       :host([error]) {
@@ -184,6 +186,15 @@ export class UUIRefElement extends SelectOnlyMixin(
         color: inherit;
       }
 
+      button:focus,
+      a:focus {
+        outline-color: var(--uui-color-focus);
+        outline-width: var(--uui-card-border-width);
+        outline-style: solid;
+        outline-offset: var(--uui-card-border-width);
+        border-radius: var(--uui-border-radius);
+      }
+
       slot[name='actions'] {
         display: flex;
         align-items: center;