fix: disable-child-interaction going over edges + other details (#251)

* fix disable-child-interaction going over edges

* only show oultine when using keyboard navigation

* use new color system

Author: nielslyngsoe

packages/uui-css/lib/uui-text.css

@@ -104,10 +104,10 @@
 
 .uui-text a:link,
 .uui-text a:active {
-  color: var(--uui-color-space-cadet);
+  color: var(--uui-color-interactive);
 }
 .uui-text a:hover {
-  color: var(--uui-color-violet-blue);
+  color: var(--uui-color-interactive-emphasis);
 }
 
 .uui-text small {

packages/uui-table/lib/uui-table-cell.element.ts

@@ -14,6 +14,7 @@ export class UUITableCellElement extends LitElement {
   static styles = [
     css`
       :host {
+        position: relative;
         display: table-cell;
         height: var(--uui-table-cell-height, var(--uui-size-12));
         padding: var(

packages/uui-table/lib/uui-table-row.element.ts

@@ -23,24 +23,47 @@ export class UUITableRowElement extends SelectOnlyMixin(
       :host {
         display: table-row;
         position: relative;
+        outline-offset: -3px;
       }
 
       :host([selectable]) {
         cursor: pointer;
       }
 
+      :host(:focus) {
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
+      }
       :host([selected]) {
         outline: 2px solid
           var(--uui-table-row-color-selected, var(--uui-color-selected));
-        outline-offset: -3px;
       }
-
-      :host(:focus) {
+      :host([selected]:focus) {
         outline-color: var(--uui-color-focus);
       }
     `,
   ];
 
+  constructor() {
+    super();
+
+    // hide outline if mouse-interaction:
+    let hadMouseDown = false;
+    this.addEventListener('blur', () => {
+      if (hadMouseDown === false) {
+        this.style.setProperty('--uui-show-focus-outline', '1');
+      }
+      hadMouseDown = false;
+    });
+    this.addEventListener('mousedown', () => {
+      this.style.setProperty('--uui-show-focus-outline', '0');
+      hadMouseDown = true;
+    });
+    this.addEventListener('mouseup', () => {
+      hadMouseDown = false;
+    });
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'row');