align all the focus css rules to use the same, and add a margin botton, to ensure that the bottom styling does not get cut of when in focus

Author: Welander1994

packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts

@@ -70,6 +70,10 @@ export class UUIBreadcrumbItemElement extends LitElement {
         color: var(--uui-color-focus);
       }
 
+      a:focus-visible {
+        outline: 2px solid var(--uui-color-focus, var(--color-emphasis));
+      }
+
       [part='separator']::after {
         content: '/';
         speak: never;

packages/uui-button/lib/uui-button.element.ts

@@ -370,7 +370,7 @@ export class UUIButtonElement extends UUIFormControlMixin(
       }
 
       #button:focus-visible {
-        outline: 2px solid var(--uui-focus-outline-color, var(--color-emphasis));
+        outline: 2px solid var(--uui-color-focus, var(--color-emphasis));
       }
 
       button[disabled]:active,

packages/uui-card/lib/uui-card.element.ts

@@ -151,6 +151,7 @@ export class UUICardElement extends SelectOnlyMixin(
         font-family: inherit;
         border: 0;
         padding: 0;
+        margin: 0 0 1px 0;
         background-color: transparent;
         text-align: left;
         color: var(--uui-color-text);

packages/uui-color-picker/lib/uui-color-picker.element.ts

@@ -719,6 +719,10 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
         flex: 1;
       }
 
+      button.color-picker__trigger:focus-visible {
+        outline: 2px solid var(--uui-color-focus, var(--color-emphasis));
+      }
+
       uui-color-area {
         width: 100%;
       }

packages/uui-menu-item/lib/uui-menu-item.element.ts

@@ -584,7 +584,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         border-radius: calc(var(--uui-border-radius) - 1px);
         position: absolute;
         inset: 3px 3px 3px -5px;
-        border: 2px solid var(--uui-color-focus);
+        outline: 2px solid var(--uui-color-focus, var(--color-emphasis));
       }
 
       :host([select-mode='highlight']) #caret-button:focus-visible {
@@ -597,7 +597,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         position: absolute;
         inset: 3px;
         border-radius: calc(var(--uui-border-radius) - 1px);
-        border: 2px solid var(--uui-color-focus);
+        outline: 2px solid var(--uui-color-focus, var(--color-emphasis));
       }
 
       /** Slots */

packages/uui-radio/lib/uui-radio.element.ts

@@ -201,7 +201,7 @@ export class UUIRadioElement extends LitElement {
         outline: none;
       }
       :host(:focus-within) input:focus-visible + #button {
-        outline: 2px solid var(--uui-color-focus);
+        outline: 2px solid var(--uui-color-focus, var(--color-emphasis));
       }
 
       input:checked ~ #button::after {

packages/uui-ref-node/lib/uui-ref-node.element.ts

@@ -198,6 +198,7 @@ export class UUIRefNodeElement extends UUIRefElement {
         cursor: pointer;
         display: flex;
         flex-grow: 1;
+        margin: 0 0 1px 0;
       }
 
       #icon {

packages/uui-ref/lib/uui-ref.element.ts

@@ -79,7 +79,7 @@ export class UUIRefElement extends SelectOnlyMixin(
       }
 
       :host([selectable]:focus-visible) {
-        outline-color: var(--uui-color-focus);
+        outline-color: var(--uui-color-focus), var(--color-emphasis);
         outline-width: var(--uui-card-border-width);
         outline-style: solid;
         outline-offset: var(--uui-card-border-width);
@@ -186,11 +186,9 @@ export class UUIRefElement extends SelectOnlyMixin(
 
       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);
+        outline: 2px solid var(--uui-color-focus, var(--color-emphasis));
       }
 
       slot[name='actions']::slotted(*) {